diff --git a/apps/web-antd/src/api/bpm/task/index.ts b/apps/web-antd/src/api/bpm/task/index.ts
index 8572b7e6e..b396594f7 100644
--- a/apps/web-antd/src/api/bpm/task/index.ts
+++ b/apps/web-antd/src/api/bpm/task/index.ts
@@ -7,13 +7,29 @@ import { requestClient } from '#/api/request';
 export namespace BpmTaskApi {
   /** 流程任务 */
   export interface Task {
-    id: number; // 编号
-    name: string; // 监听器名字
-    type: string; // 监听器类型
-    status: number; // 监听器状态
-    event: string; // 监听事件
-    valueType: string; // 监听器值类型
-    processInstance?: BpmProcessInstanceApi.ProcessInstance; // 流程实例
+    id: string; // 编号
+    name: string; // 任务名字
+    status: number; // 任务状态
+    createTime: number; // 创建时间
+    endTime: number; // 结束时间
+    durationInMillis: number; // 持续时间
+    reason: string; // 审批理由
+    ownerUser: any; // 负责人
+    assigneeUser: any; // 处理人
+    taskDefinitionKey: string; // 任务定义的标识
+    processInstanceId: string; // 流程实例id
+    processInstance: BpmProcessInstanceApi.ProcessInstance; // 流程实例
+    parentTaskId: any; // 父任务id
+    children: any; // 子任务
+    formId: any; // 表单id
+    formName: any; // 表单名称
+    formConf: any; // 表单配置
+    formFields: any; // 表单字段
+    formVariables: any; // 表单变量
+    buttonsSetting: any; // 按钮设置
+    signEnable: any; // 签名设置
+    reasonRequire: any; // 原因设置
+    nodeType: any; // 节点类型
   }
 }
 
diff --git a/apps/web-antd/src/api/infra/file-config/index.ts b/apps/web-antd/src/api/infra/file-config/index.ts
index 1a2fb7707..3b1e82e6c 100644
--- a/apps/web-antd/src/api/infra/file-config/index.ts
+++ b/apps/web-antd/src/api/infra/file-config/index.ts
@@ -17,6 +17,7 @@ export namespace InfraFileConfigApi {
     accessSecret?: string;
     pathStyle?: boolean;
     enablePublicAccess?: boolean;
+    region?: string;
     domain: string;
   }
 
diff --git a/apps/web-antd/src/api/iot/device/device/index.ts b/apps/web-antd/src/api/iot/device/device/index.ts
index 7bd59886f..a0d4659b0 100644
--- a/apps/web-antd/src/api/iot/device/device/index.ts
+++ b/apps/web-antd/src/api/iot/device/device/index.ts
@@ -77,14 +77,6 @@ export namespace IotDeviceApi {
   }
 }
 
-/** IoT 设备状态枚举 */
-// TODO @haohao：packages/constants/src/biz-iot-enum.ts 枚举；
-export enum DeviceStateEnum {
-  INACTIVE = 0, // 未激活
-  OFFLINE = 2, // 离线
-  ONLINE = 1, // 在线
-}
-
 /** 查询设备分页 */
 export function getDevicePage(params: PageParam) {
   return requestClient.get<PageResult<IotDeviceApi.Device>>(
@@ -154,6 +146,14 @@ export function importDeviceTemplate() {
   return requestClient.download('/iot/device/get-import-template');
 }
 
+/** 导入设备 */
+export function importDevice(file: File, updateSupport: boolean) {
+  return requestClient.upload('/iot/device/import', {
+    file,
+    updateSupport,
+  });
+}
+
 /** 获取设备属性最新数据 */
 export function getLatestDeviceProperties(params: any) {
   return requestClient.get<IotDeviceApi.DevicePropertyDetail[]>(
diff --git a/apps/web-antd/src/api/iot/product/product/index.ts b/apps/web-antd/src/api/iot/product/product/index.ts
index 28b2f7b2e..2833b1e5d 100644
--- a/apps/web-antd/src/api/iot/product/product/index.ts
+++ b/apps/web-antd/src/api/iot/product/product/index.ts
@@ -27,27 +27,6 @@ export namespace IotProductApi {
   }
 }
 
-// TODO @haohao：packages/constants/src/biz-iot-enum.ts 枚举；
-
-/** IOT 产品设备类型枚举类 */
-export enum DeviceTypeEnum {
-  DEVICE = 0, // 直连设备
-  GATEWAY = 2, // 网关设备
-  GATEWAY_SUB = 1, // 网关子设备
-}
-
-/** IOT 产品定位类型枚举类 */
-export enum LocationTypeEnum {
-  IP = 1, // IP 定位
-  MANUAL = 3, // 手动定位
-  MODULE = 2, // 设备定位
-}
-
-/** IOT 数据格式（编解码器类型）枚举类 */
-export enum CodecTypeEnum {
-  ALINK = 'Alink', // 阿里云 Alink 协议
-}
-
 /** 查询产品分页 */
 export function getProductPage(params: PageParam) {
   return requestClient.get<PageResult<IotProductApi.Product>>(
diff --git a/apps/web-antd/src/api/iot/statistics/index.ts b/apps/web-antd/src/api/iot/statistics/index.ts
index 9f3a04266..a02b342d2 100644
--- a/apps/web-antd/src/api/iot/statistics/index.ts
+++ b/apps/web-antd/src/api/iot/statistics/index.ts
@@ -1,21 +1,20 @@
 import { requestClient } from '#/api/request';
 
 export namespace IotStatisticsApi {
-  // TODO @haohao：需要跟后端对齐，必要的 ReqVO、RespVO
   /** 统计摘要数据 */
-  export interface StatisticsSummary {
-    productCategoryCount: number;
-    productCount: number;
-    deviceCount: number;
-    deviceMessageCount: number;
-    productCategoryTodayCount: number;
-    productTodayCount: number;
-    deviceTodayCount: number;
-    deviceMessageTodayCount: number;
-    deviceOnlineCount: number;
-    deviceOfflineCount: number;
-    deviceInactiveCount: number;
-    productCategoryDeviceCounts: Record<string, number>;
+  export interface StatisticsSummaryRespVO {
+    productCategoryCount: number; // 品类数量
+    productCount: number; // 产品数量
+    deviceCount: number; // 设备数量
+    deviceMessageCount: number; // 上报数量
+    productCategoryTodayCount: number; // 今日新增品类数量
+    productTodayCount: number; // 今日新增产品数量
+    deviceTodayCount: number; // 今日新增设备数量
+    deviceMessageTodayCount: number; // 今日新增上报数量
+    deviceOnlineCount: number; // 在线数量
+    deviceOfflineCount: number; // 离线数量
+    deviceInactiveCount: number; // 待激活设备数量
+    productCategoryDeviceCounts: Record<string, number>; // 按品类统计的设备数量
   }
 
   /** 时间戳-数值的键值对类型 */
@@ -30,15 +29,15 @@ export namespace IotStatisticsApi {
     downstreamCounts: TimeValueItem[];
   }
 
-  /** 消息统计数据项（按日期） */
-  export interface DeviceMessageSummaryByDate {
-    time: string;
-    upstreamCount: number;
-    downstreamCount: number;
+  /** 设备消息数量统计（按日期） */
+  export interface DeviceMessageSummaryByDateRespVO {
+    time: string; // 时间轴
+    upstreamCount: number; // 上行消息数量
+    downstreamCount: number; // 下行消息数量
   }
 
-  /** 消息统计接口参数 */
-  export interface DeviceMessageReq {
+  /** 设备消息统计请求 */
+  export interface DeviceMessageReqVO {
     interval: number;
     times?: string[];
   }
@@ -46,26 +45,17 @@ export namespace IotStatisticsApi {
 
 /** 获取 IoT 统计摘要数据 */
 export function getStatisticsSummary() {
-  return requestClient.get<IotStatisticsApi.StatisticsSummary>(
+  return requestClient.get<IotStatisticsApi.StatisticsSummaryRespVO>(
     '/iot/statistics/get-summary',
   );
 }
 
 /** 获取设备消息的数据统计（按日期） */
 export function getDeviceMessageSummaryByDate(
-  params: IotStatisticsApi.DeviceMessageReq,
+  params: IotStatisticsApi.DeviceMessageReqVO,
 ) {
-  return requestClient.get<IotStatisticsApi.DeviceMessageSummaryByDate[]>(
+  return requestClient.get<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>(
     '/iot/statistics/get-device-message-summary-by-date',
     { params },
   );
 }
-
-// TODO @haohao：貌似这里，没用到？是不是后面哪里用，或者可以删除哈？
-/** 获取设备消息统计摘要 */
-export function getDeviceMessageSummary(statType: number) {
-  return requestClient.get<IotStatisticsApi.DeviceMessageSummary>(
-    '/iot/statistics/get-device-message-summary',
-    { params: { statType } },
-  );
-}
diff --git a/apps/web-antd/src/api/mall/promotion/combination/combinationActivity.ts b/apps/web-antd/src/api/mall/promotion/combination/combinationActivity.ts
index e497ae204..19af95e95 100644
--- a/apps/web-antd/src/api/mall/promotion/combination/combinationActivity.ts
+++ b/apps/web-antd/src/api/mall/promotion/combination/combinationActivity.ts
@@ -21,6 +21,7 @@ export namespace MallCombinationActivityApi {
     limitDuration?: number; // 限制时长
     combinationPrice?: number; // 拼团价格
     products: CombinationProduct[]; // 商品列表
+    picUrl?: any;
   }
 
   /** 拼团活动所需属性 */
diff --git a/apps/web-antd/src/api/mall/promotion/seckill/seckillActivity.ts b/apps/web-antd/src/api/mall/promotion/seckill/seckillActivity.ts
index 82297effd..1c18c5e3b 100644
--- a/apps/web-antd/src/api/mall/promotion/seckill/seckillActivity.ts
+++ b/apps/web-antd/src/api/mall/promotion/seckill/seckillActivity.ts
@@ -31,6 +31,7 @@ export namespace MallSeckillActivityApi {
     totalStock?: number; // 秒杀总库存
     seckillPrice?: number; // 秒杀价格
     products?: SeckillProduct[]; // 秒杀商品列表
+    picUrl?: any;
   }
 }
 
diff --git a/apps/web-antd/src/api/system/mail/template/index.ts b/apps/web-antd/src/api/system/mail/template/index.ts
index 9e2a5a78d..57f722cf5 100644
--- a/apps/web-antd/src/api/system/mail/template/index.ts
+++ b/apps/web-antd/src/api/system/mail/template/index.ts
@@ -14,7 +14,6 @@ export namespace SystemMailTemplateApi {
     content: string;
     params: string[];
     status: number;
-    remark: string;
     createTime: Date;
   }
 
diff --git a/apps/web-antd/src/api/system/social/client/index.ts b/apps/web-antd/src/api/system/social/client/index.ts
index 181cdf86b..55978dd14 100644
--- a/apps/web-antd/src/api/system/social/client/index.ts
+++ b/apps/web-antd/src/api/system/social/client/index.ts
@@ -12,6 +12,7 @@ export namespace SystemSocialClientApi {
     clientId: string;
     clientSecret: string;
     agentId?: string;
+    publicKey?: string;
     status: number;
     createTime?: Date;
   }
diff --git a/apps/web-antd/src/components/select-modal/index.ts b/apps/web-antd/src/components/select-modal/index.ts
deleted file mode 100644
index 2b6e91893..000000000
--- a/apps/web-antd/src/components/select-modal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-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/router/routes/modules/bpm.ts b/apps/web-antd/src/router/routes/modules/bpm.ts
index 05e0e5664..bd4a7a209 100644
--- a/apps/web-antd/src/router/routes/modules/bpm.ts
+++ b/apps/web-antd/src/router/routes/modules/bpm.ts
@@ -9,24 +9,6 @@ const routes: RouteRecordRaw[] = [
       hideInMenu: true,
     },
     children: [
-      {
-        path: 'task',
-        name: 'BpmTask',
-        meta: {
-          title: '审批中心',
-          icon: 'ant-design:history-outlined',
-        },
-        children: [
-          {
-            path: 'my',
-            name: 'BpmTaskMy',
-            component: () => import('#/views/bpm/processInstance/index.vue'),
-            meta: {
-              title: '我的流程',
-            },
-          },
-        ],
-      },
       {
         path: 'process-instance/detail',
         component: () => import('#/views/bpm/processInstance/detail/index.vue'),
diff --git a/apps/web-antd/src/router/routes/modules/iot.ts b/apps/web-antd/src/router/routes/modules/iot.ts
index 3e7f87caf..2bc6d32b2 100644
--- a/apps/web-antd/src/router/routes/modules/iot.ts
+++ b/apps/web-antd/src/router/routes/modules/iot.ts
@@ -18,8 +18,7 @@ const routes: RouteRecordRaw[] = [
           title: '产品详情',
           activePath: '/iot/device/product',
         },
-        component: () =>
-          import('#/views/iot/product/product/modules/detail/index.vue'),
+        component: () => import('#/views/iot/product/product/detail/index.vue'),
       },
       {
         path: 'device/detail/:id',
@@ -28,8 +27,7 @@ const routes: RouteRecordRaw[] = [
           title: '设备详情',
           activePath: '/iot/device/device',
         },
-        component: () =>
-          import('#/views/iot/device/device/modules/detail/index.vue'),
+        component: () => import('#/views/iot/device/device/detail/index.vue'),
       },
       {
         path: 'ota/firmware/detail/:id',
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
index cc2a06391..4d25da7f5 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
@@ -11,7 +11,7 @@ export default {
   'Append Gateway': '追加网关',
   'Append Task': '追加任务',
   'Append Intermediate/Boundary Event': '追加中间抛出事件/边界事件',
-
+  TextAnnotation: '文本注释',
   'Activate the global connect tool': '激活全局连接工具',
   'Append {type}': '添加 {type}',
   'Add Lane above': '在上面添加道',
@@ -31,10 +31,16 @@ export default {
   'Create expanded SubProcess': '创建扩展子过程',
   'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
   'Create Pool/Participant': '创建池/参与者',
-  'Parallel Multi Instance': '并行多重事件',
-  'Sequential Multi Instance': '时序多重事件',
+  'Participant Multiplicity': '参与者多重性',
+  'Empty pool/participant (removes content)': '清空池/参与者（移除内容）',
+  'Empty pool/participant': '收缩池/参与者',
+  'Expanded pool/participant': '展开池/参与者',
+  'Parallel Multi-Instance': '并行多重事件',
+  'Sequential Multi-Instance': '时序多重事件',
   DataObjectReference: '数据对象参考',
   DataStoreReference: '数据存储参考',
+  'Data object reference': '数据对象引用 ',
+  'Data store reference': '数据存储引用 ',
   Loop: '循环',
   'Ad-hoc': '即席',
   'Create {type}': '创建 {type}',
@@ -49,6 +55,9 @@ export default {
   'Call Activity': '调用活动',
   'Sub-Process (collapsed)': '子流程（折叠的）',
   'Sub-Process (expanded)': '子流程（展开的）',
+  'Ad-hoc sub-process': '即席子流程',
+  'Ad-hoc sub-process (collapsed)': '即席子流程（折叠的）',
+  'Ad-hoc sub-process (expanded)': '即席子流程（展开的）',
   'Start Event': '开始事件',
   StartEvent: '开始事件',
   'Intermediate Throw Event': '中间事件',
@@ -111,10 +120,10 @@ export default {
   'Parallel Gateway': '并行网关',
   'Inclusive Gateway': '相容网关',
   'Complex Gateway': '复杂网关',
-  'Event based Gateway': '事件网关',
+  'Event-based Gateway': '事件网关',
   Transaction: '转运',
-  'Sub Process': '子流程',
-  'Event Sub Process': '事件子流程',
+  'sub-process': '子流程',
+  'Event sub-process': '事件子流程',
   'Collapsed Pool': '折叠池',
   'Expanded Pool': '展开池',
 
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/index.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/index.ts
index 483d5fb4d..f27319abb 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/index.ts
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/index.ts
@@ -3,9 +3,7 @@ import 'bpmn-js/dist/assets/diagram-js.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
-// TODO @puhui999：样式问题：设计器那，位置不太对；
 
 export { default as MyProcessDesigner } from './designer';
-// TODO @puhui999：流程发起时，预览相关的，需要使用；
 export { default as MyProcessViewer } from './designer/index2';
 export { default as MyProcessPenal } from './penal';
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
index 5371c88d0..97ad28d99 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
@@ -191,7 +191,7 @@ const initFormOnChanged = (element: any) => {
     conditionFormVisible.value =
       elementType.value === 'SequenceFlow' &&
       activatedElement.source &&
-      (activatedElement.source.type as string).includes('StartEvent');
+      !(activatedElement.source.type as string).includes('StartEvent');
     formVisible.value =
       elementType.value === 'UserTask' || elementType.value === 'StartEvent';
   } catch (error) {
@@ -390,8 +390,9 @@ watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
         <template #extra>
           <IconifyIcon icon="ep:timer" />
         </template>
+        <!-- 相关 issue：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICNRW2 -->
         <TimeEventConfig
-          :business-object="bpmnElement.value?.businessObject"
+          :business-object="elementBusinessObject"
           :key="elementId"
         />
       </CollapsePanel>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
index 7c3ebe9a5..25a6ebd38 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
@@ -2,14 +2,17 @@
 import { inject, nextTick, ref, toRaw, watch } from 'vue';
 
 import {
+  Col,
   Divider,
   FormItem,
   InputNumber,
   RadioButton,
   RadioGroup,
+  Row,
   Select,
   SelectOption,
   Switch,
+  TypographyText,
 } from 'ant-design-vue';
 
 import { convertTimeUnit } from '#/views/bpm/components/simple-process-design/components/nodes-config/utils';
@@ -73,7 +76,7 @@ const resetElement = () => {
   // 执行动作
   timeoutHandlerType.value = elExtensionElements.value.values?.find(
     (ex: any) => ex.$type === `${prefix}:TimeoutHandlerType`,
-  )?.[0];
+  );
   if (timeoutHandlerType.value) {
     configExtensions.value.push(timeoutHandlerType.value);
     if (eventDefinition.value.timeCycle) {
@@ -243,38 +246,54 @@ watch(
         </RadioButton>
       </RadioGroup>
     </FormItem>
-    <FormItem label="超时时间设置" v-if="timeoutHandlerEnable">
-      <span class="mr-2">当超过</span>
-      <FormItem name="timeDuration">
-        <InputNumber
-          class="mr-2"
-          :style="{ width: '100px' }"
-          v-model:value="timeDuration"
-          :min="1"
-          :controls="true"
-          @change="
-            () => {
-              updateTimeModdle();
-              updateElementExtensions();
-            }
-          "
-        />
-      </FormItem>
-      <Select
-        v-model:value="timeUnit"
-        class="mr-2"
-        :style="{ width: '100px' }"
-        @change="onTimeUnitChange"
-      >
-        <SelectOption
-          v-for="item in TIME_UNIT_TYPES"
-          :key="item.value"
-          :value="item.value"
-        >
-          {{ item.label }}
-        </SelectOption>
-      </Select>
-      未处理
+    <FormItem
+      label="超时时间设置"
+      v-if="timeoutHandlerEnable"
+      :label-col="{ span: 24 }"
+      :wrapper-col="{ span: 24 }"
+    >
+      <Row :gutter="[0, 0]">
+        <Col>
+          <TypographyText class="mr-2 mt-2 inline-flex text-sm">
+            当超过
+          </TypographyText>
+        </Col>
+        <Col>
+          <FormItem name="timeDuration" class="mb-0">
+            <InputNumber
+              class="mr-2 mt-0.5"
+              v-model:value="timeDuration"
+              :min="1"
+              controls-position="right"
+              @change="
+                () => {
+                  updateTimeModdle();
+                  updateElementExtensions();
+                }
+              "
+            />
+          </FormItem>
+        </Col>
+        <Col>
+          <Select
+            v-model:value="timeUnit"
+            class="mr-2 !w-24"
+            @change="onTimeUnitChange"
+          >
+            <SelectOption
+              v-for="item in TIME_UNIT_TYPES"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+              {{ item.label }}
+            </SelectOption>
+          </Select>
+          <TypographyText class="mr-2 mt-2 inline-flex text-sm">
+            未处理
+          </TypographyText>
+        </Col>
+      </Row>
     </FormItem>
     <FormItem
       label="最大提醒次数"
@@ -295,5 +314,3 @@ watch(
     </FormItem>
   </div>
 </template>
-
-<style lang="scss" scoped></style>
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 d7730e291..043956c20 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,9 +77,67 @@ const assignEmptyUserIdsEl = ref<any>();
 const assignEmptyUserIds = ref<any>();
 
 // 操作按钮
-const buttonsSettingEl = ref<any>();
-const { btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
-  useButtonsSetting();
+// 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[]>([]);
@@ -172,12 +233,12 @@ const resetCustomConfigList = () => {
     });
 
   // 操作按钮
-  buttonsSettingEl.value = elExtensionElements.value.values?.find(
+  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,
@@ -189,7 +250,7 @@ const resetCustomConfigList = () => {
 
   // 字段权限
   if (formType.value === BpmModelFormType.NORMAL) {
-    const fieldsPermissionList = elExtensionElements.value.values?.find(
+    const fieldsPermissionList = elExtensionElements.value.values?.filter(
       (ex: any) => ex.$type === `${prefix}:FieldsPermission`,
     );
     fieldsPermissionEl.value = [];
@@ -220,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` &&
@@ -281,7 +342,7 @@ const updateElementExtensions = () => {
       assignEmptyHandlerTypeEl.value,
       assignEmptyUserIdsEl.value,
       approveType.value,
-      ...buttonsSettingEl.value,
+      ...buttonsSetting.value,
       ...fieldsPermissionEl.value,
       signEnable.value,
       reasonRequire.value,
@@ -351,31 +412,21 @@ 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;
-  };
-  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)!;
-    }
-  };
-  return {
-    buttonsSetting,
-    btnDisplayNameEdit,
-    changeBtnDisplayName,
-    btnDisplayNameBlurEvent,
-  };
-}
+// function useButtonsSetting() {
+//   const buttonsSetting = ref<ButtonSetting[]>();
+//   // 操作按钮显示名称可编辑
+//   const btnDisplayNameEdit = ref<boolean[]>([]);
+//   const changeBtnDisplayName = (index: number) => {
+//     btnDisplayNameEdit.value[index] = true;
+//   };
+//   return {
+//     buttonsSetting,
+//     btnDisplayNameEdit,
+//     changeBtnDisplayName,
+//   };
+// }
 
 /** 批量更新权限 */
-// TODO @lesan：这个页面，有一些 idea 红色报错，咱要不要 fix 下！
 const updatePermission = (type: string) => {
   fieldsPermissionEl.value.forEach((field: any) => {
     if (type === 'READ') {
@@ -417,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
@@ -449,12 +500,12 @@ onMounted(async () => {
     </Form.Item>
 
     <Divider orientation="left">审批人为空时</Divider>
-    <Form.Item prop="assignEmptyHandlerType">
+    <Form.Item name="assignEmptyHandlerType">
       <RadioGroup
         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 }}
@@ -466,7 +517,7 @@ onMounted(async () => {
     <Form.Item
       v-if="assignEmptyHandlerType === AssignEmptyHandlerType.ASSIGN_USER"
       label="指定用户"
-      prop="assignEmptyHandlerUserIds"
+      name="assignEmptyHandlerUserIds"
     >
       <Select
         v-model:value="assignEmptyUserIds"
@@ -490,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"
@@ -503,75 +554,97 @@ 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">
-          <Switch v-model:checked="item.enable" />
+        <div class="flex w-20 items-center justify-center">
+          <Switch
+            v-model:checked="item.enable"
+            @change="updateElementExtensions"
+          />
         </div>
       </div>
     </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"
@@ -579,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"
@@ -588,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"
@@ -602,7 +677,7 @@ onMounted(async () => {
     </div>
 
     <Divider orientation="left">是否需要签名</Divider>
-    <Form.Item prop="signEnable">
+    <Form.Item name="signEnable">
       <Switch
         v-model:checked="signEnable.value"
         checked-children="是"
@@ -612,7 +687,7 @@ onMounted(async () => {
     </Form.Item>
 
     <Divider orientation="left">审批意见</Divider>
-    <Form.Item prop="reasonRequire">
+    <Form.Item name="reasonRequire">
       <Switch
         v-model:checked="reasonRequire.value"
         checked-children="必填"
@@ -622,162 +697,3 @@ onMounted(async () => {
     </Form.Item>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.button-setting-pane {
-  display: flex;
-  flex-direction: column;
-  margin-top: 8px;
-  font-size: 14px;
-
-  .button-setting-desc {
-    padding-right: 8px;
-    margin-bottom: 16px;
-    font-size: 16px;
-    font-weight: 700;
-  }
-
-  .button-setting-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 45px;
-    padding-left: 12px;
-    background-color: #f8fafc0a;
-    border: 1px solid #1f38581a;
-
-    & > :first-child {
-      width: 100px !important;
-      text-align: left !important;
-    }
-
-    & > :last-child {
-      text-align: center !important;
-    }
-
-    .button-title-label {
-      width: 150px;
-      font-size: 13px;
-      font-weight: 700;
-      color: #000;
-      text-align: left;
-    }
-  }
-
-  .button-setting-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 38px;
-    padding-left: 12px;
-    border: 1px solid #1f38581a;
-    border-top: 0;
-
-    & > :first-child {
-      width: 100px !important;
-    }
-
-    & > :last-child {
-      text-align: center !important;
-    }
-
-    .button-setting-item-label {
-      width: 150px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      text-align: left;
-      white-space: nowrap;
-    }
-
-    .editable-title-input {
-      max-width: 130px;
-      height: 24px;
-      margin-left: 4px;
-      line-height: 24px;
-      border: 1px solid #d9d9d9;
-      border-radius: 4px;
-      transition: all 0.3s;
-
-      &:focus {
-        outline: 0;
-        border-color: #40a9ff;
-        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
-      }
-    }
-  }
-}
-
-.field-setting-pane {
-  display: flex;
-  flex-direction: column;
-  font-size: 14px;
-
-  .field-setting-desc {
-    padding-right: 8px;
-    margin-bottom: 16px;
-    font-size: 16px;
-    font-weight: 700;
-  }
-
-  .field-permit-title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 45px;
-    padding-left: 12px;
-    line-height: 45px;
-    background-color: #f8fafc0a;
-    border: 1px solid #1f38581a;
-
-    .first-title {
-      text-align: left !important;
-    }
-
-    .other-titles {
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .setting-title-label {
-      display: inline-block;
-      width: 100px;
-      padding: 5px 0;
-      font-size: 13px;
-      font-weight: 700;
-      color: #000;
-      text-align: center;
-    }
-  }
-
-  .field-setting-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 38px;
-    padding-left: 12px;
-    border: 1px solid #1f38581a;
-    border-top: 0;
-
-    .field-setting-item-label {
-      display: inline-block;
-      width: 100px;
-      min-height: 16px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: text;
-    }
-
-    .field-setting-item-group {
-      display: flex;
-      justify-content: space-between;
-
-      .item-radio-wrap {
-        display: inline-block;
-        width: 100px;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
index 3fb375b03..e135c428f 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
 
-import { Form, Input, Select } from 'ant-design-vue';
+import { Form, FormItem, Input, Select, Textarea } from 'ant-design-vue';
 
 defineOptions({ name: 'FlowCondition' });
 
@@ -16,8 +16,6 @@ const props = defineProps({
   },
 });
 
-const { TextArea } = Input;
-
 const flowConditionForm = ref<any>({});
 const bpmnElement = ref();
 const bpmnElementSource = ref();
@@ -153,15 +151,19 @@ watch(
 
 <template>
   <div class="panel-tab__content">
-    <Form :model="flowConditionForm">
-      <Form.Item label="流转类型">
+    <Form
+      :model="flowConditionForm"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem label="流转类型">
         <Select v-model:value="flowConditionForm.type" @change="updateFlowType">
           <Select.Option value="normal">普通流转路径</Select.Option>
           <Select.Option value="default">默认流转路径</Select.Option>
           <Select.Option value="condition">条件流转路径</Select.Option>
         </Select>
-      </Form.Item>
-      <Form.Item
+      </FormItem>
+      <FormItem
         label="条件格式"
         v-if="flowConditionForm.type === 'condition'"
         key="condition"
@@ -170,8 +172,8 @@ watch(
           <Select.Option value="expression">表达式</Select.Option>
           <Select.Option value="script">脚本</Select.Option>
         </Select>
-      </Form.Item>
-      <Form.Item
+      </FormItem>
+      <FormItem
         label="表达式"
         v-if="
           flowConditionForm.conditionType &&
@@ -179,45 +181,45 @@ watch(
         "
         key="express"
       >
-        <Input
+        <Textarea
           v-model:value="flowConditionForm.body"
-          style="width: 192px"
+          :auto-size="{ minRows: 2, maxRows: 6 }"
           allow-clear
           @change="updateFlowCondition"
         />
-      </Form.Item>
+      </FormItem>
       <template
         v-if="
           flowConditionForm.conditionType &&
           flowConditionForm.conditionType === 'script'
         "
       >
-        <Form.Item label="脚本语言" key="language">
+        <FormItem label="脚本语言" key="language">
           <Input
             v-model:value="flowConditionForm.language"
             allow-clear
             @change="updateFlowCondition"
           />
-        </Form.Item>
-        <Form.Item label="脚本类型" key="scriptType">
+        </FormItem>
+        <FormItem label="脚本类型" key="scriptType">
           <Select v-model:value="flowConditionForm.scriptType">
             <Select.Option value="inlineScript">内联脚本</Select.Option>
             <Select.Option value="externalScript">外部脚本</Select.Option>
           </Select>
-        </Form.Item>
-        <Form.Item
+        </FormItem>
+        <FormItem
           label="脚本"
           v-if="flowConditionForm.scriptType === 'inlineScript'"
           key="body"
         >
-          <TextArea
+          <Textarea
             v-model:value="flowConditionForm.body"
             :auto-size="{ minRows: 2, maxRows: 6 }"
             allow-clear
             @change="updateFlowCondition"
           />
-        </Form.Item>
-        <Form.Item
+        </FormItem>
+        <FormItem
           label="资源地址"
           v-if="flowConditionForm.scriptType === 'externalScript'"
           key="resource"
@@ -227,7 +229,7 @@ watch(
             allow-clear
             @change="updateFlowCondition"
           />
-        </Form.Item>
+        </FormItem>
       </template>
     </Form>
   </div>
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 55d3f545b..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,29 +41,32 @@ 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);
 const fieldTypeObject = ref(fieldType);
-const bpmnElement = ref();
 const otherExtensionList = ref();
 const bpmnElementListeners = ref();
 const listenerFormRef = ref();
-const listenerFieldFormRef = ref();
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 const resetListenersList = () => {
-  bpmnElement.value = bpmnInstances().bpmnElement;
-  otherExtensionList.value = [];
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
+  otherExtensionList.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
+    ) ?? []; // 保留非监听器类型的扩展属性，避免移除监听器时清空其他配置（如审批人等）。相关案例：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICMSYC
   bpmnElementListeners.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type === `${prefix}:ExecutionListener`,
     ) ?? [];
   elementListenersList.value = bpmnElementListeners.value.map((listener: any) =>
@@ -72,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) => ({
@@ -89,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();
@@ -100,87 +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() {
-      bpmnElementListeners.value.splice(index, 1);
-      elementListenersList.value.splice(index, 1);
-      updateElementExtensions(bpmnElement.value, [
-        ...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; // 验证不通过直接返回
+  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);
@@ -196,26 +174,115 @@ const saveListenerConfig = async () => {
       listenerForm.value,
     );
   }
-  // 保存其他配置
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
     ) ?? [];
-  updateElementExtensions(bpmnElement.value, [
+  updateElementExtensions(bpmnElement, [
     ...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();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
   const listenerForm = initListenerForm2(listener);
   const listenerObject = createListenerObject(listenerForm, false, prefix);
   bpmnElementListeners.value.push(listenerObject);
@@ -223,15 +290,31 @@ const selectProcessListener = (listener: any) => {
 
   // 保存其他配置
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
     ) ?? [];
-  updateElementExtensions(bpmnElement.value, [
+  updateElementExtensions(bpmnElement, [
     ...otherExtensionList.value,
     ...bpmnElementListeners.value,
   ]);
 };
 
+watch(
+  elementListenersList,
+  (val) => {
+    listenerGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  fieldsListOfListener,
+  (val) => {
+    fieldsGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
 watch(
   () => props.id,
   (val: string) => {
@@ -245,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>
@@ -303,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"
@@ -463,8 +534,9 @@ watch(
           注入字段
         </span>
         <Button
-          type="primary"
-          title="添加字段"
+          class="flex items-center"
+          size="small"
+          type="link"
           @click="openListenerFieldForm(null, -1)"
         >
           <template #icon>
@@ -473,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..4ce87247b
--- /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 });
+      await 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 6ab38bcf9..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
@@ -1,26 +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 ProcessListenerDialog from '#/views/bpm/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.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 ListenerFieldModal from './ListenerFieldModal.vue';
 import {
   eventType,
   fieldType,
@@ -40,59 +39,49 @@ interface Props {
 }
 
 const prefix = inject<string>('prefix');
-const width = inject<number>('width');
+
 const elementListenersList = ref<any[]>([]);
 const listenerEventTypeObject = ref(eventType);
 const listenerTypeObject = ref(listenerType);
-const listenerFormModelVisible = ref(false);
 const listenerForm = ref<any>({});
 const fieldTypeObject = ref(fieldType);
 const fieldsListOfListener = ref<any[]>([]);
-const listenerFieldFormModelVisible = ref(false); // 监听器 注入字段表单弹窗 显示状态
-const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
-const editingListenerFieldIndex = ref<any>(-1); // 字段所在下标，-1 为新增
-const listenerFieldForm = ref<any>({}); // 监听器 注入字段 详情表单
-const bpmnElement = ref<any>();
+const editingListenerIndex = ref(-1);
+const editingListenerFieldIndex = ref<any>(-1);
 const bpmnElementListeners = ref<any[]>([]);
 const otherExtensionList = ref<any[]>([]);
 const listenerFormRef = ref<any>({});
-const listenerFieldFormRef = ref<any>({});
 
-interface BpmnInstances {
-  bpmnElement: any;
-  [key: string]: any;
-}
-
-declare global {
-  interface Window {
-    bpmnInstances?: BpmnInstances;
-  }
-}
-
-const bpmnInstances = () => window.bpmnInstances;
+const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 const resetListenersList = () => {
-  // console.log(
-  //   bpmnInstances().bpmnElement,
-  //   'window.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElementwindow.bpmnInstances.bpmnElement',
-  // );
-  bpmnElement.value = bpmnInstances()?.bpmnElement;
-  otherExtensionList.value = [];
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
+  otherExtensionList.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:TaskListener`,
+    ) ?? [];
   bpmnElementListeners.value =
-    bpmnElement.value.businessObject?.extensionElements?.values.filter(
+    businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type === `${prefix}:TaskListener`,
     ) ?? [];
   elementListenersList.value = bpmnElementListeners.value.map((listener) =>
     initListenerType(listener),
   );
 };
+
 const openListenerForm = (listener: any, index?: number) => {
   if (listener) {
     listenerForm.value = initListenerForm(listener);
     editingListenerIndex.value = index || -1;
   } else {
     listenerForm.value = {};
-    editingListenerIndex.value = -1; // 标记为新增
+    editingListenerIndex.value = -1;
   }
   if (listener && listener.fields) {
     fieldsListOfListener.value = listener.fields.map((field: any) => ({
@@ -103,38 +92,42 @@ const openListenerForm = (listener: any, index?: number) => {
     fieldsListOfListener.value = [];
     listenerForm.value.fields = [];
   }
-  // 打开侧边栏并清楚验证状态
-  listenerFormModelVisible.value = true;
+  listenerDrawerApi.open();
   nextTick(() => {
     if (listenerFormRef.value) listenerFormRef.value.clearValidate();
   });
 };
-// 移除监听器
+
 const removeListener = (_: any, index: number) => {
-  // console.log(listener, 'listener');
-  Modal.confirm({
+  confirm({
     title: '提示',
     content: '确认移除该监听器吗？',
-    okText: '确 认',
-    cancelText: '取 消',
-    onOk() {
-      bpmnElementListeners.value.splice(index, 1);
-      elementListenersList.value.splice(index, 1);
-      updateElementExtensions(bpmnElement.value, [
-        ...otherExtensionList.value,
-        ...bpmnElementListeners.value,
-      ]);
-    },
-    onCancel() {
-      // console.info('操作取消');
-    },
+  }).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 () => {
-  const validateStatus = await listenerFormRef.value.validate();
-  if (!validateStatus) return; // 验证不通过直接返回
+
+async function saveListenerConfig() {
+  try {
+    await listenerFormRef.value.validate();
+  } catch {
+    return;
+  }
+
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
   const listenerObject = createListenerObject(listenerForm.value, true, prefix);
+
   if (editingListenerIndex.value === -1) {
     bpmnElementListeners.value.push(listenerObject);
     elementListenersList.value.push(listenerForm.value);
@@ -150,93 +143,174 @@ const saveListenerConfig = async () => {
       listenerForm.value,
     );
   }
-  // 保存其他配置
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:TaskListener`,
     ) ?? [];
-  updateElementExtensions(bpmnElement.value, [
+  updateElementExtensions(bpmnElement, [
     ...otherExtensionList.value,
     ...bpmnElementListeners.value,
   ]);
-  // 4. 隐藏侧边栏
-  listenerFormModelVisible.value = false;
+  listenerDrawerApi.close();
   listenerForm.value = {};
+}
+
+const openListenerFieldForm = (field: any, index?: number) => {
+  const data = field ? cloneDeep(field) : {};
+  editingListenerFieldIndex.value = field ? index : -1;
+  fieldModalApi.setData(data).open();
 };
 
-// 打开监听器字段编辑弹窗
-const openListenerFieldForm = (field: any, index?: number) => {
-  listenerFieldForm.value = field ? cloneDeep(field) : {};
-  editingListenerFieldIndex.value = field ? index : -1;
-  listenerFieldFormModelVisible.value = true;
-  nextTick(() => {
-    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate();
-  });
-};
-// 保存监听器注入字段
-const saveListenerFiled = async () => {
-  const validateStatus = await listenerFieldFormRef.value.validate();
-  if (!validateStatus) return; // 验证不通过直接返回
+const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      {
+        field: 'event',
+        title: '事件类型',
+        minWidth: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (listenerEventTypeObject.value as Record<string, any>)[cellValue],
+      },
+      { field: 'id', title: '事件id', minWidth: 80, showOverflow: true },
+      {
+        field: 'listenerType',
+        title: '监听器类型',
+        minWidth: 80,
+        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,
+    },
+  },
+});
+
+async function saveListenerField(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 = (_: any, index: number) => {
-  // console.log(field, 'field');
-  Modal.confirm({
+  confirm({
     title: '提示',
     content: '确认移除该字段吗？',
-    okText: '确 认',
-    cancelText: '取 消',
-    onOk() {
-      fieldsListOfListener.value.splice(index, 1);
-      listenerForm.value.fields.splice(index, 1);
-    },
-    onCancel() {
-      // console.info('操作取消');
-    },
+  }).then(() => {
+    fieldsListOfListener.value.splice(index, 1);
+    listenerForm.value.fields.splice(index, 1);
   });
 };
 
-// 打开监听器弹窗
-const processListenerDialogRef = ref<any>();
 const openProcessListenerDialog = async () => {
-  processListenerDialogRef.value.open('task');
+  processListenerSelectModalApi.setData({ type: 'task' }).open();
 };
 const selectProcessListener = (listener: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  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);
 
-  // 保存其他配置
   otherExtensionList.value =
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
       (ex: any) => ex.$type !== `${prefix}:TaskListener`,
     ) ?? [];
   updateElementExtensions(
-    bpmnElement.value,
+    bpmnElement,
     otherExtensionList.value?.concat(bpmnElementListeners.value),
   );
 };
 
+const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
+  title: '任务监听器',
+  destroyOnClose: true,
+  onConfirm: saveListenerConfig,
+});
+
+const [FieldModal, fieldModalApi] = useVbenModal({
+  connectedComponent: ListenerFieldModal,
+});
+
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });
+
+const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'name', title: '字段名称', minWidth: 100 },
+      {
+        field: 'fieldType',
+        title: '字段类型',
+        width: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          fieldTypeObject.value[cellValue as keyof typeof fieldType],
+      },
+      {
+        title: '字段值/表达式',
+        width: 100,
+        formatter: ({ row }: { row: any }) => row.string || row.expression,
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    minHeight: 200,
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+watch(
+  elementListenersList,
+  (val) => {
+    listenerGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  fieldsListOfListener,
+  (val) => {
+    fieldsGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
 watch(
   () => props.id,
   (val) => {
@@ -250,257 +324,218 @@ watch(
 );
 </script>
 <template>
-  <div class="panel-tab__content">
-    <Table :data="elementListenersList" size="small" bordered>
-      <TableColumn title="序号" width="50px" type="index" />
-      <TableColumn
-        title="事件类型"
-        width="80px"
-        :ellipsis="{ showTitle: true }"
-        :custom-render="
-          ({ record }: any) =>
-            listenerEventTypeObject[record.event as keyof typeof eventType]
-        "
-      />
-      <TableColumn
-        title="事件id"
-        width="80px"
-        data-index="id"
-        :ellipsis="{ showTitle: true }"
-      />
-      <TableColumn
-        title="监听器类型"
-        width="80px"
-        :ellipsis="{ showTitle: true }"
-        :custom-render="
-          ({ record }: any) =>
-            listenerTypeObject[record.listenerType as keyof typeof listenerType]
-        "
-      />
-      <TableColumn title="操作" width="90px">
-        <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(record, index)"
-          >
-            移除
-          </Button>
-        </template>
-      </TableColumn>
-    </Table>
-    <div class="element-drawer__button">
-      <Button size="small" type="primary" @click="openListenerForm(null)">
+  <div class="-mx-2">
+    <ListenerGrid>
+      <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(row, 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"
+        size="small"
+        type="primary"
+        @click="openListenerForm(null)"
+      >
         <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>
         选择监听器
       </Button>
     </div>
 
     <!-- 监听器 编辑/创建 部分 -->
-    <Drawer
-      v-model:open="listenerFormModelVisible"
-      title="任务监听器"
-      :width="width"
-      :destroy-on-close="true"
-    >
-      <Form :model="listenerForm" ref="listenerFormRef">
-        <FormItem
-          label="事件类型"
-          name="event"
-          :rules="[{ required: true, message: '请选择事件类型' }]"
+    <ListenerDrawer class="w-2/5">
+      <template #default>
+        <Form
+          :label-col="{ span: 6 }"
+          :model="listenerForm"
+          :wrapper-col="{ span: 18 }"
+          ref="listenerFormRef"
         >
-          <Select v-model:value="listenerForm.event">
-            <SelectOption
-              v-for="i in Object.keys(listenerEventTypeObject)"
-              :key="i"
-              :value="i"
-            >
-              {{ listenerEventTypeObject[i as keyof typeof eventType] }}
-            </SelectOption>
-          </Select>
-        </FormItem>
-        <FormItem
-          label="监听器ID"
-          name="id"
-          :rules="[{ required: true, message: '请输入监听器ID' }]"
-        >
-          <Input v-model:value="listenerForm.id" allow-clear />
-        </FormItem>
-        <FormItem
-          label="监听器类型"
-          name="listenerType"
-          :rules="[{ required: true, message: '请选择监听器类型' }]"
-        >
-          <Select v-model:value="listenerForm.listenerType">
-            <SelectOption
-              v-for="i in Object.keys(listenerTypeObject)"
-              :key="i"
-              :value="i"
-            >
-              {{ listenerTypeObject[i as keyof typeof listenerType] }}
-            </SelectOption>
-          </Select>
-        </FormItem>
-        <FormItem
-          v-if="listenerForm.listenerType === 'classListener'"
-          label="Java类"
-          name="class"
-          key="listener-class"
-          :rules="[{ required: true, message: '请输入Java类' }]"
-        >
-          <Input v-model:value="listenerForm.class" allow-clear />
-        </FormItem>
-        <FormItem
-          v-if="listenerForm.listenerType === 'expressionListener'"
-          label="表达式"
-          name="expression"
-          key="listener-expression"
-          :rules="[{ required: true, message: '请输入表达式' }]"
-        >
-          <Input v-model:value="listenerForm.expression" allow-clear />
-        </FormItem>
-        <FormItem
-          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
-          label="代理表达式"
-          name="delegateExpression"
-          key="listener-delegate"
-          :rules="[{ required: true, message: '请输入代理表达式' }]"
-        >
-          <Input v-model:value="listenerForm.delegateExpression" allow-clear />
-        </FormItem>
-        <template v-if="listenerForm.listenerType === 'scriptListener'">
           <FormItem
-            label="脚本格式"
-            name="scriptFormat"
-            key="listener-script-format"
-            :rules="[{ required: true, message: '请填写脚本格式' }]"
+            label="事件类型"
+            name="event"
+            :rules="[{ required: true, message: '请选择事件类型' }]"
           >
-            <Input v-model:value="listenerForm.scriptFormat" allow-clear />
-          </FormItem>
-          <FormItem
-            label="脚本类型"
-            name="scriptType"
-            key="listener-script-type"
-            :rules="[{ required: true, message: '请选择脚本类型' }]"
-          >
-            <Select v-model:value="listenerForm.scriptType">
-              <SelectOption value="inlineScript">内联脚本</SelectOption>
-              <SelectOption value="externalScript">外部脚本</SelectOption>
+            <Select v-model:value="listenerForm.event">
+              <SelectOption
+                v-for="i in Object.keys(listenerEventTypeObject)"
+                :key="i"
+                :value="i"
+              >
+                {{ listenerEventTypeObject[i as keyof typeof eventType] }}
+              </SelectOption>
             </Select>
           </FormItem>
           <FormItem
-            v-if="listenerForm.scriptType === 'inlineScript'"
-            label="脚本内容"
-            name="value"
-            key="listener-script"
-            :rules="[{ required: true, message: '请填写脚本内容' }]"
+            label="监听器ID"
+            name="id"
+            :rules="[{ required: true, message: '请输入监听器ID' }]"
           >
-            <Input v-model:value="listenerForm.value" allow-clear />
+            <Input v-model:value="listenerForm.id" allow-clear />
           </FormItem>
           <FormItem
-            v-if="listenerForm.scriptType === 'externalScript'"
-            label="资源地址"
-            name="resource"
-            key="listener-resource"
-            :rules="[{ required: true, message: '请填写资源地址' }]"
+            label="监听器类型"
+            name="listenerType"
+            :rules="[{ required: true, message: '请选择监听器类型' }]"
           >
-            <Input v-model:value="listenerForm.resource" allow-clear />
-          </FormItem>
-        </template>
-
-        <template v-if="listenerForm.event === 'timeout'">
-          <FormItem
-            label="定时器类型"
-            name="eventDefinitionType"
-            key="eventDefinitionType"
-          >
-            <Select v-model:value="listenerForm.eventDefinitionType">
-              <SelectOption value="date">日期</SelectOption>
-              <SelectOption value="duration">持续时长</SelectOption>
-              <SelectOption value="cycle">循环</SelectOption>
-              <SelectOption value="null">无</SelectOption>
+            <Select v-model:value="listenerForm.listenerType">
+              <SelectOption
+                v-for="i in Object.keys(listenerTypeObject)"
+                :key="i"
+                :value="i"
+              >
+                {{ listenerTypeObject[i as keyof typeof listenerType] }}
+              </SelectOption>
             </Select>
           </FormItem>
           <FormItem
-            v-if="
-              !!listenerForm.eventDefinitionType &&
-              listenerForm.eventDefinitionType !== 'null'
-            "
-            label="定时器"
-            name="eventTimeDefinitions"
-            key="eventTimeDefinitions"
-            :rules="[{ required: true, message: '请填写定时器配置' }]"
+            v-if="listenerForm.listenerType === 'classListener'"
+            label="Java类"
+            name="class"
+            key="listener-class"
+            :rules="[{ required: true, message: '请输入Java类' }]"
+          >
+            <Input v-model:value="listenerForm.class" allow-clear />
+          </FormItem>
+          <FormItem
+            v-if="listenerForm.listenerType === 'expressionListener'"
+            label="表达式"
+            name="expression"
+            key="listener-expression"
+            :rules="[{ required: true, message: '请输入表达式' }]"
+          >
+            <Input v-model:value="listenerForm.expression" allow-clear />
+          </FormItem>
+          <FormItem
+            v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+            label="代理表达式"
+            name="delegateExpression"
+            key="listener-delegate"
+            :rules="[{ required: true, message: '请输入代理表达式' }]"
           >
             <Input
-              v-model:value="listenerForm.eventTimeDefinitions"
+              v-model:value="listenerForm.delegateExpression"
               allow-clear
             />
           </FormItem>
-        </template>
-      </Form>
-
-      <Divider />
-      <div class="mb-2 flex justify-between">
-        <span class="flex items-center">
-          <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
-          注入字段
-        </span>
-        <Button
-          type="primary"
-          title="添加字段"
-          @click="openListenerFieldForm(null)"
-        >
-          <template #icon>
-            <IconifyIcon icon="ep:plus" />
+          <template v-if="listenerForm.listenerType === 'scriptListener'">
+            <FormItem
+              label="脚本格式"
+              name="scriptFormat"
+              key="listener-script-format"
+              :rules="[{ required: true, message: '请填写脚本格式' }]"
+            >
+              <Input v-model:value="listenerForm.scriptFormat" allow-clear />
+            </FormItem>
+            <FormItem
+              label="脚本类型"
+              name="scriptType"
+              key="listener-script-type"
+              :rules="[{ required: true, message: '请选择脚本类型' }]"
+            >
+              <Select v-model:value="listenerForm.scriptType">
+                <SelectOption value="inlineScript">内联脚本</SelectOption>
+                <SelectOption value="externalScript">外部脚本</SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="listenerForm.scriptType === 'inlineScript'"
+              label="脚本内容"
+              name="value"
+              key="listener-script"
+              :rules="[{ required: true, message: '请填写脚本内容' }]"
+            >
+              <Input v-model:value="listenerForm.value" allow-clear />
+            </FormItem>
+            <FormItem
+              v-if="listenerForm.scriptType === 'externalScript'"
+              label="资源地址"
+              name="resource"
+              key="listener-resource"
+              :rules="[{ required: true, message: '请填写资源地址' }]"
+            >
+              <Input v-model:value="listenerForm.resource" allow-clear />
+            </FormItem>
           </template>
-          添加字段
-        </Button>
-      </div>
-      <Table
-        :data="fieldsListOfListener"
-        size="small"
-        :scroll="{ y: 240 }"
-        bordered
-        style="flex: none"
-      >
-        <TableColumn title="序号" width="50px" type="index" />
-        <TableColumn title="字段名称" width="100px" data-index="name" />
-        <TableColumn
-          title="字段类型"
-          width="80px"
-          :ellipsis="{ showTitle: true }"
-          :custom-render="
-            ({ record }: any) =>
-              fieldTypeObject[record.fieldType as keyof typeof fieldType]
-          "
-        />
-        <TableColumn
-          title="字段值/表达式"
-          width="100px"
-          :ellipsis="{ showTitle: true }"
-          :custom-render="
-            ({ record }: any) => record.string || record.expression
-          "
-        />
-        <TableColumn title="操作" width="100px">
-          <template #default="{ record, index }">
+
+          <template v-if="listenerForm.event === 'timeout'">
+            <FormItem
+              label="定时器类型"
+              name="eventDefinitionType"
+              key="eventDefinitionType"
+            >
+              <Select v-model:value="listenerForm.eventDefinitionType">
+                <SelectOption value="date">日期</SelectOption>
+                <SelectOption value="duration">持续时长</SelectOption>
+                <SelectOption value="cycle">循环</SelectOption>
+                <SelectOption value="null">无</SelectOption>
+              </Select>
+            </FormItem>
+            <FormItem
+              v-if="
+                !!listenerForm.eventDefinitionType &&
+                listenerForm.eventDefinitionType !== 'null'
+              "
+              label="定时器"
+              name="eventTimeDefinitions"
+              key="eventTimeDefinitions"
+              :rules="[{ required: true, message: '请填写定时器配置' }]"
+            >
+              <Input
+                v-model:value="listenerForm.eventTimeDefinitions"
+                allow-clear
+              />
+            </FormItem>
+          </template>
+        </Form>
+
+        <Divider />
+        <div class="mb-2 flex justify-between">
+          <span class="flex items-center">
+            <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+            注入字段
+          </span>
+          <Button
+            class="flex items-center"
+            size="small"
+            type="link"
+            @click="openListenerFieldForm(null)"
+          >
+            <template #icon>
+              <IconifyIcon class="size-4" icon="ep:plus" />
+            </template>
+            添加字段
+          </Button>
+        </div>
+        <FieldsGrid>
+          <template #action="{ row, rowIndex }">
             <Button
               size="small"
               type="link"
-              @click="openListenerFieldForm(record, index)"
+              @click="openListenerFieldForm(row, rowIndex)"
             >
               编辑
             </Button>
@@ -509,87 +544,19 @@ watch(
               size="small"
               type="link"
               danger
-              @click="removeListenerField(record, index)"
+              @click="removeListenerField(row, rowIndex)"
             >
               移除
             </Button>
           </template>
-        </TableColumn>
-      </Table>
-
-      <div class="element-drawer__button">
-        <Button size="small" @click="listenerFormModelVisible = false">
-          取 消
-        </Button>
-        <Button size="small" type="primary" @click="saveListenerConfig">
-          保 存
-        </Button>
-      </div>
-    </Drawer>
+        </FieldsGrid>
+      </template>
+    </ListenerDrawer>
 
     <!-- 注入字段 编辑/创建 部分 -->
-    <Modal
-      title="字段配置"
-      v-model:open="listenerFieldFormModelVisible"
-      :width="600"
-      :destroy-on-close="true"
-    >
-      <Form :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>
-      <template #footer>
-        <Button size="small" @click="listenerFieldFormModelVisible = false">
-          取 消
-        </Button>
-        <Button size="small" type="primary" @click="saveListenerFiled">
-          确 定
-        </Button>
-      </template>
-    </Modal>
+    <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..6caf5c0ab 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>
@@ -510,7 +526,7 @@ watch(
         </FormItem>
         <FormItem
           label="重试周期"
-          prop="timeCycle"
+          name="timeCycle"
           v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
           key="timeCycle"
         >
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 26a4267f6..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, toRaw, watch } from 'vue';
+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,13 +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 bpmnElement = ref<any>();
 const otherExtensionList = ref<any[]>([]);
 const bpmnElementProperties = ref<any[]>([]);
 const bpmnElementPropertyList = ref<any[]>([]);
@@ -43,116 +34,156 @@ const attributeFormRef = ref<any>();
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
 const resetAttributesList = () => {
-  bpmnElement.value = bpmnInstances().bpmnElement;
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
   otherExtensionList.value = []; // 其他扩展配置
   bpmnElementProperties.value =
-    // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
-    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
-      (ex: any) => {
-        if (ex.$type !== `${prefix}:Properties`) {
-          otherExtensionList.value.push(ex);
-        }
-        return ex.$type === `${prefix}:Properties`;
-      },
-    ) ?? [];
+    businessObject?.extensionElements?.values?.filter((ex: any) => {
+      if (ex.$type !== `${prefix}:Properties`) {
+        otherExtensionList.value.push(ex);
+      }
+      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('操作取消');
-    },
-  });
-};
-
-const saveAttribute = () => {
-  // console.log(propertyForm.value, 'propertyForm.value');
-  const { name, value } = propertyForm.value;
-  if (editingPropertyIndex.value === -1) {
-    // 新建属性字段
-    const newPropertyObject = bpmnInstances().moddle.create(
-      `${prefix}:Property`,
-      {
-        name,
-        value,
-      },
-    );
-    // 新建一个属性字段的保存列表
+  }).then(() => {
+    elementPropertyList.value.splice(index, 1);
+    bpmnElementPropertyList.value.splice(index, 1);
     const propertiesObject = bpmnInstances().moddle.create(
       `${prefix}:Properties`,
       {
-        values: [...bpmnElementPropertyList.value, newPropertyObject],
+        values: bpmnElementPropertyList.value,
       },
     );
     updateElementExtensions(propertiesObject);
+    resetAttributesList();
+  });
+};
+
+const saveAttribute = async () => {
+  try {
+    await attributeFormRef.value?.validate();
+  } catch {
+    // 校验未通过，直接返回
+    return;
+  }
+
+  const { name, value } = propertyForm.value;
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+
+  if (editingPropertyIndex.value === -1) {
+    // 新建属性字段
+    const newPropertyObject = instances.moddle.create(`${prefix}:Property`, {
+      name,
+      value,
+    });
+    // 新建一个属性字段的保存列表
+    const propertiesObject = instances.moddle.create(`${prefix}:Properties`, {
+      values: [...bpmnElementPropertyList.value, newPropertyObject],
+    });
+    updateElementExtensions(propertiesObject);
   } else {
-    bpmnInstances().modeling.updateModdleProperties(
-      toRaw(bpmnElement.value),
-      toRaw(bpmnElementPropertyList.value)[toRaw(editingPropertyIndex.value)],
+    instances.modeling.updateModdleProperties(
+      bpmnElement,
+      bpmnElementPropertyList.value[editingPropertyIndex.value],
       {
         name,
         value,
       },
     );
   }
-  propertyFormModelVisible.value = false;
+  fieldModalApi.close();
   resetAttributesList();
 };
 
 const updateElementExtensions = (properties: any) => {
-  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+  const extensions = instances.moddle.create('bpmn:ExtensionElements', {
     values: [...otherExtensionList.value, properties],
   });
-  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+  instances.modeling.updateProperties(bpmnElement, {
     extensionElements: extensions,
   });
 };
 
+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 },
@@ -160,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>
@@ -199,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 ad28bf71f..57414380d 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,37 +1,34 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 
+import { confirm, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-import {
-  Button,
-  Form,
-  FormItem,
-  Input,
-  message,
-  Modal,
-  Table,
-  TableColumn,
-} from 'ant-design-vue';
+import { Button, Divider, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import SignalMessageModal from './SignalMessageModal.vue';
 
 defineOptions({ name: 'SignalAndMassage' });
 const signalList = ref<any[]>([]);
 const messageList = ref<any[]>([]);
-const dialogVisible = ref(false);
-const modelType = ref('');
-const modelObjectForm = ref<any>({});
+const modelType = ref<'message' | 'signal'>('message');
 const rootElements = ref();
 const messageIdMap = ref();
 const signalIdMap = ref();
-const modelConfig = computed(() => {
-  return modelType.value === 'message'
-    ? { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
-    : { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' };
-});
+const editingIndex = ref(-1); // 正在编辑的索引，-1 表示新建
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
+// 生成规范化的ID
+const generateStandardId = (type: string): string => {
+  const prefix = type === 'message' ? 'Message_' : 'Signal_';
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).slice(2, 6).toUpperCase();
+  return `${prefix}${timestamp}_${random}`;
+};
+
 const initDataList = () => {
-  // console.log(window, 'window');
   rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements;
   messageIdMap.value = {};
   signalIdMap.value = {};
@@ -48,103 +45,289 @@ const initDataList = () => {
     }
   });
 };
-const openModel = (type: any) => {
+
+const openModel = (type: 'message' | 'signal') => {
   modelType.value = type;
-  modelObjectForm.value = {};
-  dialogVisible.value = true;
+  editingIndex.value = -1;
+  modalApi
+    .setData({
+      id: generateStandardId(type),
+      isEdit: false,
+      name: '',
+      type,
+    })
+    .open();
 };
-const addNewObject = () => {
+
+const openEditModel = (type: 'message' | 'signal', row: any, index: number) => {
+  modelType.value = type;
+  editingIndex.value = index;
+  modalApi
+    .setData({
+      id: row.id,
+      isEdit: true,
+      name: row.name,
+      type,
+    })
+    .open();
+};
+
+const handleConfirm = (formData: { id: string; name: string }) => {
   if (modelType.value === 'message') {
-    if (messageIdMap.value[modelObjectForm.value.id]) {
-      message.error('该消息已存在，请修改id后重新保存');
+    if (editingIndex.value === -1) {
+      // 新建模式
+      if (messageIdMap.value[formData.id]) {
+        message.error('该消息已存在，请修改id后重新保存');
+        return;
+      }
+      const messageRef = bpmnInstances().moddle.create(
+        'bpmn:Message',
+        formData,
+      );
+      rootElements.value.push(messageRef);
+    } else {
+      // 编辑模式
+      const targetMessage = messageList.value[editingIndex.value];
+      const rootMessage = rootElements.value.find(
+        (el: any) => el.$type === 'bpmn:Message' && el.id === targetMessage.id,
+      );
+      if (rootMessage) {
+        rootMessage.id = formData.id;
+        rootMessage.name = formData.name;
+      }
     }
-    const messageRef = bpmnInstances().moddle.create(
-      'bpmn:Message',
-      modelObjectForm.value,
-    );
-    rootElements.value.push(messageRef);
   } else {
-    if (signalIdMap.value[modelObjectForm.value.id]) {
-      message.error('该信号已存在，请修改id后重新保存');
+    if (editingIndex.value === -1) {
+      // 新建模式
+      if (signalIdMap.value[formData.id]) {
+        message.error('该信号已存在，请修改id后重新保存');
+        return;
+      }
+      const signalRef = bpmnInstances().moddle.create('bpmn:Signal', formData);
+      rootElements.value.push(signalRef);
+    } else {
+      // 编辑模式
+      const targetSignal = signalList.value[editingIndex.value];
+      const rootSignal = rootElements.value.find(
+        (el: any) => el.$type === 'bpmn:Signal' && el.id === targetSignal.id,
+      );
+      if (rootSignal) {
+        rootSignal.id = formData.id;
+        rootSignal.name = formData.name;
+      }
     }
-    const signalRef = bpmnInstances().moddle.create(
-      'bpmn:Signal',
-      modelObjectForm.value,
-    );
-    rootElements.value.push(signalRef);
   }
-  dialogVisible.value = false;
+  // 触发建模器更新以保存更改
+  saveChanges();
   initDataList();
 };
 
+// 补充"编辑"、"移除"功能。相关 issue：https://github.com/YunaiV/yudao-cloud/issues/270
+const removeObject = (type: any, row: any) => {
+  confirm({
+    title: '提示',
+    content: `确认移除该${type === 'message' ? '消息' : '信号'}吗？`,
+  }).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('移除成功');
+  });
+};
+
+// 触发建模器更新以保存更改
+const saveChanges = () => {
+  const modeler = bpmnInstances().modeler;
+  if (!modeler) return;
+
+  try {
+    // 获取 canvas，通过它来触发图表的重新渲染
+    const canvas = modeler.get('canvas');
+
+    // 获取根元素（Process）
+    const rootElement = canvas.getRootElement();
+
+    // 触发 changed 事件，通知建模器数据已更改
+    const eventBus = modeler.get('eventBus');
+    if (eventBus) {
+      eventBus.fire('root.added', { element: rootElement });
+      eventBus.fire('elements.changed', { elements: [rootElement] });
+    }
+
+    // 标记建模器为已修改状态
+    const commandStack = modeler.get('commandStack');
+    if (commandStack && commandStack._stack) {
+      // 添加一个空命令以标记为已修改
+      commandStack.execute('element.updateProperties', {
+        element: rootElement,
+        properties: {},
+      });
+    }
+  } catch (error) {
+    console.warn('保存更改时出错:', error);
+  }
+};
+
+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 [Modal, modalApi] = useVbenModal({
+  connectedComponent: SignalMessageModal,
+});
+
 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" />
-    </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" />
-    </Table>
-
-    <Modal
-      v-model:open="dialogVisible"
-      :title="modelConfig.title"
-      :mask-closable="false"
-      width="400px"
-      :destroy-on-close="true"
-    >
-      <Form :model="modelObjectForm">
-        <FormItem :label="modelConfig.idLabel">
-          <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>
+    <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>
-    </Modal>
+    </SignalGrid>
+
+    <Modal @confirm="handleConfirm" />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue
new file mode 100644
index 000000000..ee6f72280
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, FormItem, Input } from 'ant-design-vue';
+
+defineOptions({ name: 'SignalMessageModal' });
+
+const emit = defineEmits<{
+  confirm: [data: { id: string; name: string }];
+}>();
+
+const formRef = ref();
+const form = ref<{ id: string; name: string }>({ id: '', name: '' });
+const modelType = ref<'message' | 'signal'>('message');
+const isEdit = ref(false);
+
+const config = computed(() => {
+  return modelType.value === 'message'
+    ? {
+        title: isEdit.value ? '编辑消息' : '创建消息',
+        idLabel: '消息 ID',
+        nameLabel: '消息名称',
+      }
+    : {
+        title: isEdit.value ? '编辑信号' : '创建信号',
+        idLabel: '信号 ID',
+        nameLabel: '信号名称',
+      };
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        id?: string;
+        isEdit?: boolean;
+        name?: string;
+        type: 'message' | 'signal';
+      }>();
+      modelType.value = data?.type || 'message';
+      isEdit.value = data?.isEdit || false;
+      form.value = {
+        id: data?.id || '',
+        name: data?.name || '',
+      };
+      // 清除校验
+      setTimeout(() => {
+        formRef.value?.clearValidate();
+      }, 50);
+    }
+  },
+  async onConfirm() {
+    try {
+      await formRef.value?.validate();
+      emit('confirm', { ...form.value });
+      modalApi.close();
+    } catch {
+      // 校验未通过
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="config.title" class="w-3/5">
+    <Form
+      ref="formRef"
+      :model="form"
+      :label-col="{ span: 4 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem
+        :label="config.idLabel"
+        name="id"
+        :rules="[{ required: true, message: '请输入 ID' }]"
+      >
+        <Input v-model:value="form.id" allow-clear />
+      </FormItem>
+      <FormItem
+        :label="config.nameLabel"
+        name="name"
+        :rules="[{ required: true, message: '请输入名称' }]"
+      >
+        <Input v-model:value="form.name" allow-clear />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
index 528cd6019..53886328b 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { h, inject, nextTick, ref, toRaw, watch } from 'vue';
+import { inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
 
-import { alert } from '@vben/common-ui';
-import { PlusOutlined } from '@vben/icons';
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 
 import {
   Button,
@@ -10,12 +10,14 @@ import {
   Form,
   FormItem,
   Input,
-  Modal,
+  Select,
+  SelectOption,
   Switch,
-  Table,
-  TableColumn,
 } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getModelList } from '#/api/bpm/model';
+
 interface FormData {
   processInstanceName: string;
   calledElement: string;
@@ -44,8 +46,7 @@ const inVariableList = ref<any[]>([]);
 const outVariableList = ref<any[]>([]);
 const variableType = ref<string>(); // 参数类型
 const editingVariableIndex = ref<number>(-1); // 编辑参数下标
-const variableDialogVisible = ref<boolean>(false);
-const varialbeFormRef = ref<any>();
+const varialbeFormRef = ref();
 const varialbeFormData = ref<{
   source: string;
   target: string;
@@ -57,10 +58,10 @@ const varialbeFormData = ref<{
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 const bpmnElement = ref<any>();
 const otherExtensionList = ref<any[]>([]);
+const childProcessOptions = ref<{ key: string; name: string }[]>([]);
 
 const initCallActivity = () => {
   bpmnElement.value = bpmnInstances().bpmnElement;
-  // console.log(bpmnElement.value.businessObject, 'callActivity');
 
   // 初始化所有配置项
   Object.keys(formData.value).forEach((key: string) => {
@@ -85,11 +86,6 @@ const initCallActivity = () => {
       }
     },
   );
-
-  // 默认添加
-  // bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
-  //   calledElementType: 'key'
-  // })
 };
 
 const updateCallActivityAttr = (attr: keyof FormData) => {
@@ -98,16 +94,26 @@ const updateCallActivityAttr = (attr: keyof FormData) => {
   });
 };
 
+const [VariableModal, variableModalApi] = useVbenModal({
+  title: '参数配置',
+  onConfirm: () => {
+    saveVariable();
+  },
+});
+
 const openVariableForm = (type: string, data: any, index: number) => {
   editingVariableIndex.value = index;
   variableType.value = type;
   varialbeFormData.value = index === -1 ? {} : { ...data };
-  variableDialogVisible.value = true;
+  variableModalApi.open();
 };
 
 const removeVariable = async (type: string, index: number) => {
   try {
-    await alert('是否确认删除？');
+    await confirm({
+      title: '提示',
+      content: '是否确认删除？',
+    });
     if (type === 'in') {
       inVariableList.value.splice(index, 1);
     }
@@ -115,10 +121,19 @@ const removeVariable = async (type: string, index: number) => {
       outVariableList.value.splice(index, 1);
     }
     updateElementExtensions();
-  } catch {}
+  } catch (error: any) {
+    console.error(`[removeVariable error ]: ${error.message || error}`);
+  }
 };
 
-const saveVariable = () => {
+const saveVariable = async () => {
+  try {
+    await varialbeFormRef.value?.validate();
+  } catch {
+    // 验证失败直接返回
+    return;
+  }
+
   if (editingVariableIndex.value === -1) {
     if (variableType.value === 'in') {
       inVariableList.value.push(
@@ -149,7 +164,7 @@ const saveVariable = () => {
         varialbeFormData.value.target;
     }
   }
-  variableDialogVisible.value = false;
+  variableModalApi.close();
 };
 
 const updateElementExtensions = () => {
@@ -176,28 +191,93 @@ watch(
   },
   { immediate: true },
 );
+
+const gridOptions = {
+  columns: [
+    { title: '源', field: 'source', minWidth: 100 },
+    { title: '目标', field: 'target', minWidth: 100 },
+    {
+      title: '操作',
+      width: 130,
+      slots: { default: 'action' },
+      fixed: 'right' as const,
+    },
+  ],
+  border: true,
+  showOverflow: true,
+  height: 'auto',
+  toolbarConfig: { enabled: false },
+  pagerConfig: { enabled: false },
+};
+
+const [InVariableGrid, inVariableGridApi] = useVbenVxeGrid({
+  gridOptions,
+});
+
+const [OutVariableGrid, outVariableGridApi] = useVbenVxeGrid({
+  gridOptions,
+});
+
+// 使用浅层监听，避免无限循环
+watch(
+  () => [...inVariableList.value],
+  (val) => {
+    inVariableGridApi.setGridOptions({ data: val });
+  },
+);
+
+watch(
+  () => [...outVariableList.value],
+  (val) => {
+    outVariableGridApi.setGridOptions({ data: val });
+  },
+);
+
+/** 选择子流程, 更新 bpmn callActivity calledElement 和 processInstanceName 属性 */
+const handleChildProcessChange = (key: any) => {
+  if (!key) return;
+  const selected = childProcessOptions.value.find((item) => item.key === key);
+  if (selected) {
+    formData.value.calledElement = selected.key;
+    formData.value.processInstanceName = selected.name;
+    updateCallActivityAttr('calledElement');
+    updateCallActivityAttr('processInstanceName');
+  }
+};
+
+onMounted(async () => {
+  try {
+    // 获取流程模型列表
+    const list = await getModelList(undefined);
+    childProcessOptions.value = list.map((item) => ({
+      key: item.key,
+      name: item.name,
+    }));
+  } catch (error) {
+    console.error('获取子流程列表失败', error);
+  }
+});
 </script>
 
 <template>
-  <div>
-    <Form>
-      <FormItem label="实例名称">
-        <Input
-          v-model:value="formData.processInstanceName"
-          allow-clear
-          placeholder="请输入实例名称"
-          @change="updateCallActivityAttr('processInstanceName')"
-        />
-      </FormItem>
-
-      <!-- TODO 需要可选择已存在的流程 -->
-      <FormItem label="被调用流程">
-        <Input
+  <div class="-mx-2">
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+      <FormItem label="被调用子流程">
+        <Select
           v-model:value="formData.calledElement"
+          placeholder="请选择子流程"
           allow-clear
-          placeholder="请输入被调用流程"
-          @change="updateCallActivityAttr('calledElement')"
-        />
+          @change="handleChildProcessChange"
+        >
+          <SelectOption
+            v-for="item in childProcessOptions"
+            :key="item.key"
+            :value="item.key"
+            :label="item.name"
+          >
+            {{ item.name }}
+          </SelectOption>
+        </Select>
       </FormItem>
 
       <FormItem label="继承变量">
@@ -223,134 +303,115 @@ watch(
         />
       </FormItem>
 
-      <Divider />
-      <div>
-        <div class="mb-10px flex">
-          <span>输入参数</span>
-          <Button
-            class="ml-auto"
-            type="primary"
-            :icon="h(PlusOutlined)"
-            title="添加参数"
-            size="small"
-            @click="openVariableForm('in', null, -1)"
-          />
-        </div>
-        <Table
-          :data-source="inVariableList"
-          :scroll="{ y: 240 }"
-          bordered
-          :pagination="false"
+      <div
+        class="mb-1 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
+      >
+        <span class="flex items-center text-sm font-medium"> 输入参数 </span>
+        <Button
+          class="flex items-center"
+          size="small"
+          type="link"
+          @click="openVariableForm('in', null, -1)"
         >
-          <TableColumn
-            title="源"
-            data-index="source"
-            :min-width="100"
-            :ellipsis="true"
-          />
-          <TableColumn
-            title="目标"
-            data-index="target"
-            :min-width="100"
-            :ellipsis="true"
-          />
-          <TableColumn title="操作" :width="110">
-            <template #default="{ record, index }">
-              <Button
-                type="link"
-                @click="openVariableForm('in', record, index)"
-                size="small"
-              >
-                编辑
-              </Button>
-              <Divider type="vertical" />
-              <Button
-                type="link"
-                size="small"
-                danger
-                @click="removeVariable('in', index)"
-              >
-                移除
-              </Button>
-            </template>
-          </TableColumn>
-        </Table>
+          <template #icon>
+            <IconifyIcon icon="ep:plus" />
+          </template>
+          添加参数
+        </Button>
       </div>
+      <InVariableGrid class="-mx-2 mb-4">
+        <template #action="{ row, rowIndex }">
+          <Button
+            size="small"
+            type="link"
+            @click="openVariableForm('in', row, rowIndex)"
+          >
+            编辑
+          </Button>
+          <Divider type="vertical" />
+          <Button
+            size="small"
+            type="link"
+            danger
+            @click="removeVariable('in', rowIndex)"
+          >
+            移除
+          </Button>
+        </template>
+      </InVariableGrid>
 
-      <Divider />
-      <div>
-        <div class="mb-10px flex">
-          <span>输出参数</span>
-          <Button
-            class="ml-auto"
-            type="primary"
-            :icon="h(PlusOutlined)"
-            title="添加参数"
-            size="small"
-            @click="openVariableForm('out', null, -1)"
-          />
-        </div>
-        <Table
-          :data-source="outVariableList"
-          :scroll="{ y: 240 }"
-          bordered
-          :pagination="false"
+      <div
+        class="mb-1 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
+      >
+        <span class="flex items-center text-sm font-medium"> 输出参数 </span>
+        <Button
+          class="flex items-center"
+          size="small"
+          type="link"
+          @click="openVariableForm('out', null, -1)"
         >
-          <TableColumn
-            title="源"
-            data-index="source"
-            :min-width="100"
-            :ellipsis="true"
-          />
-          <TableColumn
-            title="目标"
-            data-index="target"
-            :min-width="100"
-            :ellipsis="true"
-          />
-          <TableColumn title="操作" :width="110">
-            <template #default="{ record, index }">
-              <Button
-                type="link"
-                @click="openVariableForm('out', record, index)"
-                size="small"
-              >
-                编辑
-              </Button>
-              <Divider type="vertical" />
-              <Button
-                type="link"
-                size="small"
-                danger
-                @click="removeVariable('out', index)"
-              >
-                移除
-              </Button>
-            </template>
-          </TableColumn>
-        </Table>
+          <template #icon>
+            <IconifyIcon icon="lucide:plus" class="size-4" />
+          </template>
+          添加参数
+        </Button>
       </div>
+      <OutVariableGrid class="-mx-2">
+        <template #action="{ row, rowIndex }">
+          <Button
+            size="small"
+            type="link"
+            @click="openVariableForm('out', row, rowIndex)"
+          >
+            编辑
+          </Button>
+          <Divider type="vertical" />
+          <Button
+            size="small"
+            type="link"
+            danger
+            @click="removeVariable('out', rowIndex)"
+          >
+            移除
+          </Button>
+        </template>
+      </OutVariableGrid>
     </Form>
 
-    <!-- 添加或修改参数 -->
-    <Modal
-      v-model:open="variableDialogVisible"
-      title="参数配置"
-      :width="600"
-      :destroy-on-close="true"
-      @ok="saveVariable"
-      @cancel="variableDialogVisible = false"
-    >
-      <Form :model="varialbeFormData" ref="varialbeFormRef">
-        <FormItem label="源：" name="source">
+    <VariableModal>
+      <Form
+        :model="varialbeFormData"
+        ref="varialbeFormRef"
+        :label-col="{ span: 4 }"
+        :wrapper-col="{ span: 18 }"
+      >
+        <FormItem
+          label="源"
+          name="source"
+          :rules="[
+            {
+              required: true,
+              message: '源不能为空',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
           <Input v-model:value="varialbeFormData.source" allow-clear />
         </FormItem>
-        <FormItem label="目标：" name="target">
+        <FormItem
+          label="目标"
+          name="target"
+          :rules="[
+            {
+              required: true,
+              message: '目标不能为空',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
           <Input v-model:value="varialbeFormData.target" allow-clear />
         </FormItem>
       </Form>
-    </Modal>
+    </VariableModal>
   </div>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue
new file mode 100644
index 000000000..4ee5d2707
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Input } from 'ant-design-vue';
+
+defineOptions({ name: 'HttpHeaderEditor' });
+
+const emit = defineEmits(['save']);
+
+interface HeaderItem {
+  key: string;
+  value: string;
+}
+
+const headerList = ref<HeaderItem[]>([]);
+
+// 解析请求头字符串为列表
+const parseHeaders = (headersStr: string): HeaderItem[] => {
+  if (!headersStr || !headersStr.trim()) {
+    return [{ key: '', value: '' }];
+  }
+
+  const lines = headersStr.split('\n').filter((line) => line.trim());
+  const parsed = lines.map((line) => {
+    const colonIndex = line.indexOf(':');
+    if (colonIndex > 0) {
+      return {
+        key: line.slice(0, Math.max(0, colonIndex)).trim(),
+        value: line.slice(Math.max(0, colonIndex + 1)).trim(),
+      };
+    }
+    return { key: line.trim(), value: '' };
+  });
+
+  return parsed.length > 0 ? parsed : [{ key: '', value: '' }];
+};
+
+// 将列表转换为请求头字符串
+const stringifyHeaders = (headers: HeaderItem[]): string => {
+  return headers
+    .filter((item) => item.key.trim())
+    .map((item) => `${item.key}: ${item.value}`)
+    .join('\n');
+};
+
+// 添加请求头
+const addHeader = () => {
+  headerList.value.push({ key: '', value: '' });
+};
+
+// 移除请求头
+const removeHeader = (index: number) => {
+  if (headerList.value.length === 1) {
+    // 至少保留一行
+    headerList.value = [{ key: '', value: '' }];
+  } else {
+    headerList.value.splice(index, 1);
+  }
+};
+
+// 保存
+const handleSave = () => {
+  const headersStr = stringifyHeaders(headerList.value);
+  emit('save', headersStr);
+  modalApi.close();
+};
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    const { headers } = modalApi.getData();
+    headerList.value = parseHeaders(headers);
+  },
+  onConfirm: handleSave,
+});
+</script>
+
+<template>
+  <Modal title="编辑请求头" class="w-3/5">
+    <div class="space-y-4">
+      <div class="mb-2 space-y-3 overflow-y-auto">
+        <div
+          v-for="(item, index) in headerList"
+          :key="index"
+          class="flex items-center gap-2"
+        >
+          <Input
+            v-model:value="item.key"
+            placeholder="请输入参数名"
+            class="w-48"
+            allow-clear
+          />
+          <span class="font-medium text-gray-600">:</span>
+          <Input
+            v-model:value="item.value"
+            placeholder="请输入参数值 (支持表达式 ${变量名})"
+            class="flex-1"
+            allow-clear
+          />
+          <Button type="text" danger size="small" @click="removeHeader(index)">
+            <template #icon>
+              <IconifyIcon icon="ep:delete" />
+            </template>
+          </Button>
+        </div>
+      </div>
+      <Button type="primary" class="w-full" @click="addHeader">
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        添加请求头
+      </Button>
+    </div>
+  </Modal>
+</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/ReceiveTask.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
index 12e2204cc..fb6d05d35 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
@@ -1,25 +1,12 @@
 <script lang="ts" setup>
-import {
-  h,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  toRaw,
-  watch,
-} from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
 
-import { PlusOutlined } from '@vben/icons';
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 
-import {
-  Button,
-  Form,
-  Input,
-  message,
-  Modal,
-  Select,
-  SelectOption,
-} from 'ant-design-vue';
+import { Button, message, Select, SelectOption } from 'ant-design-vue';
+
+import SignalMessageModal from '../../signal-message/SignalMessageModal.vue';
 
 defineOptions({ name: 'ReceiveTask' });
 const props = defineProps({
@@ -28,40 +15,54 @@ const props = defineProps({
 });
 
 const bindMessageId = ref('');
-const newMessageForm = ref<Record<string, any>>({});
 const messageMap = ref<Record<string, any>>({});
-const messageModelVisible = ref(false);
 const bpmnElement = ref<any>();
 const bpmnMessageRefsMap = ref<Record<string, any>>();
 const bpmnRootElements = ref<any>();
 
 const bpmnInstances = () => (window as any).bpmnInstances;
+
 const getBindMessage = () => {
   bpmnElement.value = bpmnInstances().bpmnElement;
   bindMessageId.value =
     bpmnElement.value.businessObject?.messageRef?.id || '-1';
 };
-const openMessageModel = () => {
-  messageModelVisible.value = true;
-  newMessageForm.value = {};
+
+/** 生成消息 ID */
+const generateMessageId = (): string => {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).slice(2, 6).toUpperCase();
+  return `Message_${timestamp}_${random}`;
 };
-const createNewMessage = () => {
-  if (messageMap.value[newMessageForm.value.id]) {
-    message.error('该消息已存在，请修改id后重新保存');
+
+/** 打开创建消息弹窗 */
+const openCreateModal = () => {
+  modalApi
+    .setData({
+      id: generateMessageId(),
+      isEdit: false,
+      name: '',
+      type: 'message',
+    })
+    .open();
+};
+
+const handleConfirm = (formData: { id: string; name: string }) => {
+  if (messageMap.value[formData.id]) {
+    message.error('该消息已存在, 请修改id后重新保存');
     return;
   }
-  const newMessage = bpmnInstances().moddle.create(
-    'bpmn:Message',
-    newMessageForm.value,
-  );
+  const newMessage = bpmnInstances().moddle.create('bpmn:Message', formData);
   bpmnRootElements.value.push(newMessage);
-  messageMap.value[newMessageForm.value.id] = newMessageForm.value.name;
-  // @ts-ignore
+  messageMap.value[formData.id] = formData.name;
   if (bpmnMessageRefsMap.value) {
-    bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage;
+    bpmnMessageRefsMap.value[formData.id] = newMessage;
   }
-  messageModelVisible.value = false;
 };
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: SignalMessageModal,
+});
 const updateTaskMessage = (messageId: string) => {
   if (messageId === '-1') {
     bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
@@ -96,7 +97,6 @@ onBeforeUnmount(() => {
 watch(
   () => props.id,
   () => {
-    // bpmnElement.value = bpmnInstances().bpmnElement
     nextTick(() => {
       getBindMessage();
     });
@@ -106,56 +106,31 @@ watch(
 </script>
 
 <template>
-  <div style="margin-top: 16px">
-    <Form.Item label="消息实例">
-      <div
-        style="
-          display: flex;
-          flex-wrap: nowrap;
-          align-items: center;
-          justify-content: space-between;
-        "
+  <div class="mt-2">
+    <div class="mb-2 flex justify-end">
+      <Button type="link" size="small" class="p-0" @click="openCreateModal">
+        <template #icon>
+          <IconifyIcon class="size-4" icon="lucide:plus" />
+        </template>
+        创建新消息
+      </Button>
+    </div>
+    <div class="mb-1 flex items-center">
+      <span class="w-20 text-foreground">消息实例:</span>
+      <Select
+        v-model:value="bindMessageId"
+        class="w-full"
+        @change="(value: any) => updateTaskMessage(value)"
       >
-        <Select
-          v-model:value="bindMessageId"
-          @change="(value: any) => updateTaskMessage(value)"
+        <SelectOption
+          v-for="key in Object.keys(messageMap)"
+          :key="key"
+          :value="key"
         >
-          <SelectOption
-            v-for="key in Object.keys(messageMap)"
-            :value="key"
-            :key="key"
-          >
-            {{ messageMap[key] }}
-          </SelectOption>
-        </Select>
-        <Button
-          type="primary"
-          :icon="h(PlusOutlined)"
-          style="margin-left: 8px"
-          @click="openMessageModel"
-        />
-      </div>
-    </Form.Item>
-    <Modal
-      v-model:open="messageModelVisible"
-      :mask-closable="false"
-      title="创建新消息"
-      width="400px"
-      :destroy-on-close="true"
-    >
-      <Form :model="newMessageForm" size="small">
-        <Form.Item label="消息ID">
-          <Input v-model:value="newMessageForm.id" allow-clear />
-        </Form.Item>
-        <Form.Item label="消息名称">
-          <Input v-model:value="newMessageForm.name" allow-clear />
-        </Form.Item>
-      </Form>
-      <template #footer>
-        <Button size="small" type="primary" @click="createNewMessage">
-          确 认
-        </Button>
-      </template>
-    </Modal>
+          {{ messageMap[key] }}
+        </SelectOption>
+      </Select>
+    </div>
+    <Modal @confirm="handleConfirm" />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
index 0a4eda338..ae221eac2 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
@@ -2,6 +2,7 @@
 import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
 
 import {
+  Form,
   FormItem,
   Input,
   Select,
@@ -75,47 +76,50 @@ watch(
 
 <template>
   <div class="mt-4">
-    <FormItem label="脚本格式">
-      <Input
-        v-model:value="scriptTaskForm.scriptFormat"
-        allow-clear
-        @input="updateElementTask()"
-        @change="updateElementTask()"
-      />
-    </FormItem>
-    <FormItem label="脚本类型">
-      <Select v-model:value="scriptTaskForm.scriptType">
-        <SelectOption value="inline">内联脚本</SelectOption>
-        <SelectOption value="external">外部资源</SelectOption>
-      </Select>
-    </FormItem>
-    <FormItem label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
-      <Textarea
-        v-model:value="scriptTaskForm.script"
-        :auto-size="{ minRows: 2, maxRows: 4 }"
-        allow-clear
-        @input="updateElementTask()"
-        @change="updateElementTask()"
-      />
-    </FormItem>
-    <FormItem
-      label="资源地址"
-      v-show="scriptTaskForm.scriptType === 'external'"
-    >
-      <Input
-        v-model:value="scriptTaskForm.resource"
-        allow-clear
-        @input="updateElementTask()"
-        @change="updateElementTask()"
-      />
-    </FormItem>
-    <FormItem label="结果变量">
-      <Input
-        v-model:value="scriptTaskForm.resultVariable"
-        allow-clear
-        @input="updateElementTask()"
-        @change="updateElementTask()"
-      />
-    </FormItem>
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+      <FormItem label="脚本格式">
+        <Input
+          v-model:value="scriptTaskForm.scriptFormat"
+          allow-clear
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </FormItem>
+      <!-- TODO scriptType  外部资源 和 内联脚本，  flowable 文档 https://www.flowable.com/open-source/docs/bpmn/ch07b-BPMN-Constructs#script-task  没看到到有相应的属性 -->
+      <FormItem label="脚本类型">
+        <Select v-model:value="scriptTaskForm.scriptType">
+          <SelectOption value="inline">内联脚本</SelectOption>
+          <SelectOption value="external">外部资源</SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
+        <Textarea
+          v-model:value="scriptTaskForm.script"
+          :auto-size="{ minRows: 2, maxRows: 4 }"
+          allow-clear
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </FormItem>
+      <FormItem
+        label="资源地址"
+        v-show="scriptTaskForm.scriptType === 'external'"
+      >
+        <Input
+          v-model:value="scriptTaskForm.resource"
+          allow-clear
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </FormItem>
+      <FormItem label="结果变量">
+        <Input
+          v-model:value="scriptTaskForm.resultVariable"
+          allow-clear
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </FormItem>
+    </Form>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
index 0241d0bb6..c16c31c92 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
@@ -1,7 +1,24 @@
+<!-- eslint-disable prettier/prettier -->
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+import { inject, nextTick, onBeforeUnmount, ref, watch } from 'vue';
 
-import { FormItem, Input, Select } from 'ant-design-vue';
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Form,
+  FormItem,
+  Input,
+  RadioButton,
+  RadioGroup,
+  Select,
+  Switch,
+  Textarea,
+} from 'ant-design-vue';
+
+import { updateElementExtensions } from '../../../utils';
+import HttpHeaderEditor from './HttpHeaderEditor.vue';
 
 defineOptions({ name: 'ServiceTask' });
 const props = defineProps({
@@ -9,40 +26,305 @@ const props = defineProps({
   type: { type: String, default: '' },
 });
 
-const defaultTaskForm = ref({
+const prefix = (inject('prefix', 'flowable') || 'flowable') as string;
+const flowableTypeKey = `${prefix}:type`;
+const flowableFieldType = `${prefix}:Field`;
+
+const HTTP_FIELD_NAMES = [
+  'requestMethod',
+  'requestUrl',
+  'requestHeaders',
+  'disallowRedirects',
+  'ignoreException',
+  'saveResponseParameters',
+  'resultVariablePrefix',
+  'saveResponseParametersTransient',
+  'saveResponseVariableAsJson',
+];
+const HTTP_BOOLEAN_FIELDS = new Set([
+  'disallowRedirects',
+  'ignoreException',
+  'saveResponseParameters',
+  'saveResponseParametersTransient',
+  'saveResponseVariableAsJson',
+]);
+
+const DEFAULT_TASK_FORM = {
   executeType: '',
   class: '',
   expression: '',
   delegateExpression: '',
-});
+};
 
-const serviceTaskForm = ref<any>({});
+const DEFAULT_HTTP_FORM = {
+  requestMethod: 'GET',
+  requestUrl: '',
+  requestHeaders: 'Content-Type: application/json',
+  resultVariablePrefix: '',
+  disallowRedirects: false,
+  ignoreException: false,
+  saveResponseParameters: false,
+  saveResponseParametersTransient: false,
+  saveResponseVariableAsJson: false,
+};
+
+const serviceTaskForm = ref({ ...DEFAULT_TASK_FORM });
+const httpTaskForm = ref<any>({ ...DEFAULT_HTTP_FORM });
 const bpmnElement = ref();
+const httpInitializing = ref(false);
 
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 
-const resetTaskForm = () => {
-  for (const key in defaultTaskForm.value) {
-    const value =
-      // @ts-ignore
-      bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key];
-    serviceTaskForm.value[key] = value;
-    if (value) {
-      serviceTaskForm.value.executeType = key;
+// 判断字符串是否包含表达式
+const isExpression = (value: string): boolean => {
+  if (!value) return false;
+  // 检测 ${...} 或 #{...} 格式的表达式
+  return /\$\{[^}]+\}/.test(value) || /#\{[^}]+\}/.test(value);
+};
+
+const collectHttpExtensionInfo = () => {
+  const businessObject = bpmnElement.value?.businessObject;
+  const extensionElements = businessObject?.extensionElements;
+  const httpFields = new Map<string, string>();
+  const httpFieldTypes = new Map<string, 'expression' | 'string'>();
+  const otherExtensions: any[] = [];
+
+  extensionElements?.values?.forEach((item: any) => {
+    if (
+      item?.$type === flowableFieldType &&
+      HTTP_FIELD_NAMES.includes(item.name)
+    ) {
+      const value = item.string ?? item.stringValue ?? item.expression ?? '';
+      const fieldType = item.expression ? 'expression' : 'string';
+      httpFields.set(item.name, value);
+      httpFieldTypes.set(item.name, fieldType);
+    } else {
+      otherExtensions.push(item);
     }
+  });
+
+  return { httpFields, httpFieldTypes, otherExtensions };
+};
+
+const resetHttpDefaults = () => {
+  httpInitializing.value = true;
+  httpTaskForm.value = { ...DEFAULT_HTTP_FORM };
+  nextTick(() => {
+    httpInitializing.value = false;
+  });
+};
+
+const resetHttpForm = () => {
+  httpInitializing.value = true;
+  const { httpFields } = collectHttpExtensionInfo();
+  const nextForm: any = { ...DEFAULT_HTTP_FORM };
+
+  HTTP_FIELD_NAMES.forEach((name) => {
+    const stored = httpFields.get(name);
+    if (stored !== undefined) {
+      nextForm[name] = HTTP_BOOLEAN_FIELDS.has(name)
+        ? stored === 'true'
+        : stored;
+    }
+  });
+
+  httpTaskForm.value = nextForm;
+  nextTick(() => {
+    httpInitializing.value = false;
+    updateHttpExtensions(true);
+  });
+};
+
+const resetServiceTaskForm = () => {
+  const businessObject = bpmnElement.value?.businessObject;
+  const nextForm = { ...DEFAULT_TASK_FORM };
+
+  if (businessObject) {
+    if (businessObject.class) {
+      nextForm.class = businessObject.class;
+      nextForm.executeType = 'class';
+    }
+    if (businessObject.expression) {
+      nextForm.expression = businessObject.expression;
+      nextForm.executeType = 'expression';
+    }
+    if (businessObject.delegateExpression) {
+      nextForm.delegateExpression = businessObject.delegateExpression;
+      nextForm.executeType = 'delegateExpression';
+    }
+    if (businessObject.$attrs?.[flowableTypeKey] === 'http') {
+      nextForm.executeType = 'http';
+    } else {
+      // 兜底：如缺少 flowable:type=http，但扩展里已有 HTTP 的字段，也认为是 HTTP
+      const { httpFields } = collectHttpExtensionInfo();
+      if (httpFields.size > 0) {
+        nextForm.executeType = 'http';
+      }
+    }
+  }
+
+  serviceTaskForm.value = nextForm;
+
+  if (nextForm.executeType === 'http') {
+    resetHttpForm();
+  } else {
+    resetHttpDefaults();
   }
 };
 
-const updateElementTask = () => {
-  const taskAttr = Object.create(null);
-  const type = serviceTaskForm.value.executeType;
-  for (const key in serviceTaskForm.value) {
-    if (key !== 'executeType' && key !== type) taskAttr[key] = null;
-  }
-  taskAttr[type] = serviceTaskForm.value[type] || '';
-  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr);
+const shouldPersistField = (name: string, value: any) => {
+  if (HTTP_BOOLEAN_FIELDS.has(name)) return true;
+  if (name === 'requestMethod') return true;
+  if (name === 'requestUrl') return !!value;
+  return value !== undefined && value !== '';
 };
 
+const updateHttpExtensions = (force = false) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  if (
+    !force &&
+    (httpInitializing.value || serviceTaskForm.value.executeType !== 'http')
+  ) {
+    return;
+  }
+
+  const {
+    httpFields: existingFields,
+    httpFieldTypes: existingTypes,
+    otherExtensions,
+  } = collectHttpExtensionInfo();
+
+  const desiredEntries: [string, string][] = [];
+  HTTP_FIELD_NAMES.forEach((name) => {
+    const rawValue = httpTaskForm.value[name];
+    if (!shouldPersistField(name, rawValue)) {
+      return;
+    }
+
+    const persisted = HTTP_BOOLEAN_FIELDS.has(name)
+      ? String(!!rawValue)
+      : (rawValue === undefined
+        ? ''
+        : rawValue.toString());
+
+    desiredEntries.push([name, persisted]);
+  });
+
+  // 检查是否有变化：不仅比较值，还要比较字段类型（string vs expression）
+  if (!force && desiredEntries.length === existingFields.size) {
+    let noChange = true;
+    for (const [name, value] of desiredEntries) {
+      const existingValue = existingFields.get(name);
+      const existingType = existingTypes.get(name);
+      const currentType = isExpression(value) ? 'expression' : 'string';
+      if (existingValue !== value || existingType !== currentType) {
+        noChange = false;
+        break;
+      }
+    }
+    if (noChange) {
+      return;
+    }
+  }
+
+  const moddle = bpmnInstances().moddle;
+  const httpFieldElements = desiredEntries.map(([name, value]) => {
+    // 根据值是否包含表达式来决定使用 string 还是 expression 属性
+    const isExpr = isExpression(value);
+    return moddle.create(flowableFieldType, {
+      name,
+      ...(isExpr ? { expression: value } : { string: value }),
+    });
+  });
+
+  updateElementExtensions(bpmnElement, [
+    ...otherExtensions,
+    ...httpFieldElements,
+  ]);
+};
+
+const removeHttpExtensions = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const { httpFields, otherExtensions } = collectHttpExtensionInfo();
+  if (httpFields.size === 0) {
+    return;
+  }
+
+  if (otherExtensions.length === 0) {
+    bpmnInstances().modeling.updateProperties(bpmnElement, {
+      extensionElements: null,
+    });
+    return;
+  }
+
+  updateElementExtensions(bpmnElement, otherExtensions);
+};
+
+const updateElementTask = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+
+  const taskAttr: Record<string, any> = {
+    class: null,
+    expression: null,
+    delegateExpression: null,
+    [flowableTypeKey]: null,
+  };
+
+  const type = serviceTaskForm.value.executeType;
+  if (
+    type === 'class' ||
+    type === 'expression' ||
+    type === 'delegateExpression'
+  ) {
+    taskAttr[type] = serviceTaskForm.value[type] || null;
+  } else if (type === 'http') {
+    taskAttr[flowableTypeKey] = 'http';
+  }
+
+  bpmnInstances().modeling.updateProperties(bpmnElement, taskAttr);
+
+  if (type === 'http') {
+    updateHttpExtensions(true);
+  } else {
+    removeHttpExtensions();
+  }
+};
+
+const handleExecuteTypeChange = (value: any) => {
+  serviceTaskForm.value.executeType = value;
+  if (value === 'http') {
+    resetHttpForm();
+  }
+  updateElementTask();
+};
+
+/** 打开请求头编辑器 */
+const openHttpHeaderEditor = () => {
+  httpHeaderEditorApi
+    .setData({
+      headers: httpTaskForm.value.requestHeaders,
+    })
+    .open();
+};
+
+/** 保存请求头 */
+const handleHeadersSave = (headersStr: string) => {
+  httpTaskForm.value.requestHeaders = headersStr;
+};
+
+const [HttpHeaderEditorModal, httpHeaderEditorApi] = useVbenModal({
+  connectedComponent: HttpHeaderEditor,
+});
+
 onBeforeUnmount(() => {
   bpmnElement.value = null;
 });
@@ -52,60 +334,157 @@ watch(
   () => {
     bpmnElement.value = bpmnInstances().bpmnElement;
     nextTick(() => {
-      resetTaskForm();
+      resetServiceTaskForm();
     });
   },
   { immediate: true },
 );
+
+watch(
+  () => httpTaskForm.value,
+  () => {
+    updateHttpExtensions();
+  },
+  { deep: true },
+);
 </script>
 
 <template>
   <div>
-    <FormItem label="执行类型" key="executeType">
-      <Select
-        v-model:value="serviceTaskForm.executeType"
-        :options="[
-          { label: 'Java类', value: 'class' },
-          { label: '表达式', value: 'expression' },
-          { label: '代理表达式', value: 'delegateExpression' },
-        ]"
-      />
-    </FormItem>
-    <FormItem
-      v-if="serviceTaskForm.executeType === 'class'"
-      label="Java类"
-      name="class"
-      key="execute-class"
-    >
-      <Input
-        v-model:value="serviceTaskForm.class"
-        allow-clear
-        @change="updateElementTask"
-      />
-    </FormItem>
-    <FormItem
-      v-if="serviceTaskForm.executeType === 'expression'"
-      label="表达式"
-      name="expression"
-      key="execute-expression"
-    >
-      <Input
-        v-model:value="serviceTaskForm.expression"
-        allow-clear
-        @change="updateElementTask"
-      />
-    </FormItem>
-    <FormItem
-      v-if="serviceTaskForm.executeType === 'delegateExpression'"
-      label="代理表达式"
-      name="delegateExpression"
-      key="execute-delegate"
-    >
-      <Input
-        v-model:value="serviceTaskForm.delegateExpression"
-        allow-clear
-        @change="updateElementTask"
-      />
-    </FormItem>
+    <Form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
+      <FormItem label="执行类型" key="executeType">
+        <Select
+          v-model:value="serviceTaskForm.executeType"
+          :options="[
+            { label: 'Java类', value: 'class' },
+            { label: '表达式', value: 'expression' },
+            { label: '代理表达式', value: 'delegateExpression' },
+            { label: 'HTTP 调用', value: 'http' },
+          ]"
+          @change="handleExecuteTypeChange"
+        />
+      </FormItem>
+      <FormItem
+        v-if="serviceTaskForm.executeType === 'class'"
+        label="Java类"
+        name="class"
+        key="execute-class"
+      >
+        <Input
+          v-model:value="serviceTaskForm.class"
+          allow-clear
+          @change="updateElementTask"
+        />
+      </FormItem>
+      <FormItem
+        v-if="serviceTaskForm.executeType === 'expression'"
+        label="表达式"
+        name="expression"
+        key="execute-expression"
+      >
+        <Input
+          v-model:value="serviceTaskForm.expression"
+          allow-clear
+          @change="updateElementTask"
+        />
+      </FormItem>
+      <FormItem
+        v-if="serviceTaskForm.executeType === 'delegateExpression'"
+        label="代理表达式"
+        name="delegateExpression"
+        key="execute-delegate"
+      >
+        <Input
+          v-model:value="serviceTaskForm.delegateExpression"
+          allow-clear
+          @change="updateElementTask"
+        />
+      </FormItem>
+      <template v-if="serviceTaskForm.executeType === 'http'">
+        <FormItem label="请求方法" key="http-method" name="requestMethod">
+          <RadioGroup v-model:value="httpTaskForm.requestMethod">
+            <RadioButton value="GET">GET</RadioButton>
+            <RadioButton value="POST">POST</RadioButton>
+            <RadioButton value="PUT">PUT</RadioButton>
+            <RadioButton value="DELETE">DELETE</RadioButton>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="请求地址" key="http-url" name="requestUrl">
+          <Input v-model:value="httpTaskForm.requestUrl" allow-clear />
+        </FormItem>
+        <FormItem label="请求头" key="http-headers" name="requestHeaders">
+          <div class="flex w-full flex-col gap-2">
+            <Textarea
+              v-model:value="httpTaskForm.requestHeaders"
+              :auto-size="{ minRows: 4, maxRows: 8 }"
+              readonly
+              placeholder="点击右侧编辑按钮添加请求头"
+              class="min-w-0 flex-1"
+            />
+            <div class="flex w-full items-center justify-center">
+              <Button
+                class="flex flex-1 items-center justify-center"
+                size="small"
+                type="primary"
+                @click="openHttpHeaderEditor"
+              >
+                <template #icon>
+                  <IconifyIcon icon="ep:edit" />
+                </template>
+                编辑
+              </Button>
+            </div>
+          </div>
+        </FormItem>
+        <FormItem
+          label="禁止重定向"
+          key="http-disallow-redirects"
+          name="disallowRedirects"
+        >
+          <Switch v-model:checked="httpTaskForm.disallowRedirects" />
+        </FormItem>
+        <FormItem
+          label="忽略异常"
+          key="http-ignore-exception"
+          name="ignoreException"
+        >
+          <Switch v-model:checked="httpTaskForm.ignoreException" />
+        </FormItem>
+        <FormItem
+          label="保存返回变量"
+          key="http-save-response"
+          name="saveResponseParameters"
+        >
+          <Switch v-model:checked="httpTaskForm.saveResponseParameters" />
+        </FormItem>
+        <FormItem
+          label="是否瞬间变量"
+          key="http-save-transient"
+          name="saveResponseParametersTransient"
+        >
+          <Switch
+            v-model:checked="httpTaskForm.saveResponseParametersTransient"
+          />
+        </FormItem>
+        <FormItem
+          label="返回变量前缀"
+          key="http-result-variable-prefix"
+          name="resultVariablePrefix"
+        >
+          <Input v-model:value="httpTaskForm.resultVariablePrefix" />
+        </FormItem>
+        <FormItem
+          label="保存为 JSON 变量"
+          :label-col="{ span: 8 }"
+          :wrapper-col="{ span: 16 }"
+          key="http-save-json"
+          name="saveResponseVariableAsJson"
+        >
+          <Switch v-model:checked="httpTaskForm.saveResponseVariableAsJson" />
+        </FormItem>
+      </template>
+    </Form>
+    <!-- 请求头编辑器 -->
+    <HttpHeaderEditorModal @save="handleHeadersSave" />
   </div>
 </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..e908fb198 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({
@@ -120,10 +120,10 @@ const resetTaskForm = () => {
     bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
   userTaskForm.value.candidateStrategy = extensionElements.values?.find(
     (ex: any) => ex.$type === `${prefix}:CandidateStrategy`,
-  )?.[0]?.value;
+  )?.value;
   const candidateParamStr = extensionElements.values?.find(
     (ex: any) => ex.$type === `${prefix}:CandidateParam`,
-  )?.[0]?.value;
+  )?.value;
   if (candidateParamStr && candidateParamStr.length > 0) {
     // eslint-disable-next-line unicorn/prefer-switch
     if (userTaskForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
@@ -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/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
index 493681f1f..5d35687d4 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
@@ -8,8 +8,10 @@ import {
   Input,
   InputNumber,
   Radio,
+  TabPane,
   Tabs,
 } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
 const props = defineProps({
   value: {
@@ -41,7 +43,7 @@ const cronFieldList = [
 ];
 const activeField = ref('second');
 const cronMode = ref({
-  second: 'appoint',
+  second: 'every',
   minute: 'every',
   hour: 'every',
   day: 'every',
@@ -50,7 +52,7 @@ const cronMode = ref({
   year: 'every',
 });
 const cronAppoint = ref({
-  second: ['00', '01'],
+  second: [],
   minute: [],
   hour: [],
   day: [],
@@ -107,103 +109,156 @@ watch(
 const isoStr = ref('');
 const repeat = ref(1);
 const isoDate = ref('');
+const durationUnits = [
+  { key: 'Y', label: '年', presets: [1, 2, 3, 4] },
+  { key: 'M', label: '月', presets: [1, 2, 3, 4] },
+  { key: 'D', label: '天', presets: [1, 2, 3, 4] },
+  { key: 'H', label: '时', presets: [4, 8, 12, 24] },
+  { key: 'm', label: '分', presets: [5, 10, 30, 50] },
+  { key: 'S', label: '秒', presets: [5, 10, 30, 50] },
+];
+const durationCustom = ref({ Y: '', M: '', D: '', H: '', m: '', S: '' });
 const isoDuration = ref('');
-function setDuration(type, val) {
-  // 组装ISO 8601字符串
-  let d = isoDuration.value;
-  if (d.includes(type)) {
-    d = d.replace(new RegExp(String.raw`\d+${type}`), val + type);
-  } else {
-    d += val + type;
-  }
-  isoDuration.value = d;
+
+function setDuration(key, val) {
+  durationCustom.value[key] = !val || Number.isNaN(val) ? '' : val;
+  updateDurationStr();
+}
+
+function updateDurationStr() {
+  let str = 'P';
+  str += durationCustom.value.Y ? `${durationCustom.value.Y}Y` : '';
+  str += durationCustom.value.M ? `${durationCustom.value.M}M` : '';
+  str += durationCustom.value.D ? `${durationCustom.value.D}D` : '';
+  str +=
+    durationCustom.value.H || durationCustom.value.m || durationCustom.value.S
+      ? 'T'
+      : '';
+  str += durationCustom.value.H ? `${durationCustom.value.H}H` : '';
+  str += durationCustom.value.m ? `${durationCustom.value.m}M` : '';
+  str += durationCustom.value.S ? `${durationCustom.value.S}S` : '';
+  isoDuration.value = str === 'P' ? '' : str;
   updateIsoStr();
 }
+
 function updateIsoStr() {
   let str = `R${repeat.value}`;
-  if (isoDate.value)
-    str += `/${
+  if (isoDate.value) {
+    const dateStr =
       typeof isoDate.value === 'string'
         ? isoDate.value
-        : new Date(isoDate.value).toISOString()
-    }`;
+        : isoDate.value.toISOString();
+    str += `/${dateStr}`;
+  }
   if (isoDuration.value) str += `/${isoDuration.value}`;
   isoStr.value = str;
   if (tab.value === 'iso') emit('change', isoStr.value);
 }
-watch([repeat, isoDate, isoDuration], updateIsoStr);
+watch([repeat, isoDate], updateIsoStr);
+watch(durationCustom, updateDurationStr, { deep: true });
 watch(
   () => props.value,
   (val) => {
     if (!val) return;
-    if (tab.value === 'cron') cronStr.value = val;
-    if (tab.value === 'iso') isoStr.value = val;
+    // 自动检测格式：以R开头的是ISO 8601格式，否则是CRON表达式
+    if (val.startsWith('R')) {
+      tab.value = 'iso';
+      isoStr.value = val;
+      // 解析ISO格式：R{repeat}/{date}/{duration}
+      const parts = val.split('/');
+      if (parts[0]) {
+        const repeatMatch = parts[0].match(/^R(\d+)$/);
+        if (repeatMatch) repeat.value = Number.parseInt(repeatMatch[1], 10);
+      }
+      // 解析date部分（ISO 8601日期时间格式）
+      const datePart = parts.find(
+        (p) => p.includes('T') && !p.startsWith('P') && !p.startsWith('R'),
+      );
+      if (datePart) {
+        isoDate.value = dayjs(datePart);
+      }
+      // 解析duration部分
+      const durationPart = parts.find((p) => p.startsWith('P'));
+      if (durationPart) {
+        const match = durationPart.match(
+          /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/,
+        );
+        if (match) {
+          durationCustom.value.Y = match[1] || '';
+          durationCustom.value.M = match[2] || '';
+          durationCustom.value.D = match[3] || '';
+          durationCustom.value.H = match[4] || '';
+          durationCustom.value.m = match[5] || '';
+          durationCustom.value.S = match[6] || '';
+          isoDuration.value = durationPart;
+        }
+      }
+    } else {
+      tab.value = 'cron';
+      cronStr.value = val;
+    }
   },
   { immediate: true },
 );
 </script>
 <template>
   <Tabs v-model:active-key="tab">
-    <Tabs.TabPane key="cron" tab="CRON表达式">
-      <div style="margin-bottom: 10px">
+    <TabPane key="cron" tab="CRON表达式">
+      <div class="mb-2.5">
         <Input
           v-model:value="cronStr"
           readonly
-          style="width: 400px; font-weight: bold"
+          class="w-[400px] font-bold"
           key="cronStr"
         />
       </div>
-      <div style="display: flex; gap: 8px; margin-bottom: 8px">
+      <div class="mb-2 flex gap-2">
         <Input
           v-model:value="fields.second"
           placeholder="秒"
-          style="width: 80px"
+          class="w-20"
           key="second"
         />
         <Input
           v-model:value="fields.minute"
           placeholder="分"
-          style="width: 80px"
+          class="w-20"
           key="minute"
         />
         <Input
           v-model:value="fields.hour"
           placeholder="时"
-          style="width: 80px"
+          class="w-20"
           key="hour"
         />
         <Input
           v-model:value="fields.day"
           placeholder="天"
-          style="width: 80px"
+          class="w-20"
           key="day"
         />
         <Input
           v-model:value="fields.month"
           placeholder="月"
-          style="width: 80px"
+          class="w-20"
           key="month"
         />
         <Input
           v-model:value="fields.week"
           placeholder="周"
-          style="width: 80px"
+          class="w-20"
           key="week"
         />
         <Input
           v-model:value="fields.year"
           placeholder="年"
-          style="width: 80px"
+          class="w-20"
           key="year"
         />
       </div>
-      <Tabs
-        v-model:active-key="activeField"
-        type="card"
-        style="margin-bottom: 8px"
-      >
+      <Tabs v-model:active-key="activeField" type="card" class="mb-2">
         <Tabs.TabPane v-for="f in cronFieldList" :key="f.key" :tab="f.label">
-          <div style="margin-bottom: 8px">
+          <div class="mb-2">
             <Radio.Group
               v-model:value="cronMode[f.key]"
               :key="`radio-${f.key}`"
@@ -218,7 +273,7 @@ watch(
                   :min="f.min"
                   :max="f.max"
                   size="small"
-                  style="width: 60px"
+                  class="w-[60px]"
                   :key="`range0-${f.key}`"
                 />
                 到
@@ -227,7 +282,7 @@ watch(
                   :min="f.min"
                   :max="f.max"
                   size="small"
-                  style="width: 60px"
+                  class="w-[60px]"
                   :key="`range1-${f.key}`"
                 />
                 之间每{{ f.label }}
@@ -239,7 +294,7 @@ watch(
                   :min="f.min"
                   :max="f.max"
                   size="small"
-                  style="width: 60px"
+                  class="w-[60px]"
                   :key="`step0-${f.key}`"
                 />
                 开始每
@@ -248,7 +303,7 @@ watch(
                   :min="1"
                   :max="f.max"
                   size="small"
-                  style="width: 60px"
+                  class="w-[60px]"
                   :key="`step1-${f.key}`"
                 />
                 {{ f.label }}
@@ -272,109 +327,64 @@ watch(
           </div>
         </Tabs.TabPane>
       </Tabs>
-    </Tabs.TabPane>
-    <Tabs.TabPane key="iso" title="标准格式" tab="iso-tab">
-      <div style="margin-bottom: 10px">
+    </TabPane>
+    <TabPane key="iso" tab="标准格式">
+      <div class="mb-2.5">
         <Input
           v-model:value="isoStr"
           placeholder="如R1/2025-05-21T21:59:54/P3DT30M30S"
-          style="width: 400px; font-weight: bold"
+          class="w-[400px] font-bold"
           key="isoStr"
         />
       </div>
-      <div style="margin-bottom: 10px">
+      <div class="mb-2.5">
         循环次数：<InputNumber
           v-model:value="repeat"
           :min="1"
-          style="width: 100px"
+          class="w-[100px]"
           key="repeat"
         />
       </div>
-      <div style="margin-bottom: 10px">
-        日期时间：<DatePicker
+      <div class="mb-2.5">
+        开始时间：<DatePicker
           v-model:value="isoDate"
           show-time
-          placeholder="选择日期时间"
-          style="width: 200px"
+          placeholder="选择开始时间"
+          class="w-[200px]"
           key="isoDate"
         />
       </div>
-      <div style="margin-bottom: 10px">
-        当前时长：<Input
+      <div class="mb-2.5">
+        间隔时长：<Input
           v-model:value="isoDuration"
+          readonly
           placeholder="如P3DT30M30S"
-          style="width: 200px"
+          class="w-[200px]"
           key="isoDuration"
         />
       </div>
       <div>
-        <div>
-          秒：
-          <Button
-            v-for="s in [5, 10, 30, 50]"
-            @click="setDuration('S', s)"
-            :key="`sec-${s}`"
-          >
-            {{ s }}
-          </Button>
-          自定义
-        </div>
-        <div>
-          分：
-          <Button
-            v-for="m in [5, 10, 30, 50]"
-            @click="setDuration('M', m)"
-            :key="`min-${m}`"
-          >
-            {{ m }}
-          </Button>
-          自定义
-        </div>
-        <div>
-          小时：
-          <Button
-            v-for="h in [4, 8, 12, 24]"
-            @click="setDuration('H', h)"
-            :key="`hour-${h}`"
-          >
-            {{ h }}
-          </Button>
-          自定义
-        </div>
-        <div>
-          天：
-          <Button
-            v-for="d in [1, 2, 3, 4]"
-            @click="setDuration('D', d)"
-            :key="`day-${d}`"
-          >
-            {{ d }}
-          </Button>
-          自定义
-        </div>
-        <div>
-          月：
-          <Button
-            v-for="mo in [1, 2, 3, 4]"
-            @click="setDuration('M', mo)"
-            :key="`mon-${mo}`"
-          >
-            {{ mo }}
-          </Button>
-          自定义
-        </div>
-        <div>
-          年：
-          <Button
-            v-for="y in [1, 2, 3, 4]"
-            @click="setDuration('Y', y)"
-            :key="`year-${y}`"
-          >
-            {{ y }}
-          </Button>
-          自定义
+        <div v-for="unit in durationUnits" :key="unit.key" class="mb-2">
+          <span>{{ unit.label }}：</span>
+          <Button.Group>
+            <Button
+              v-for="val in unit.presets"
+              :key="val"
+              size="small"
+              @click="setDuration(unit.key, val)"
+            >
+              {{ val }}
+            </Button>
+            <Input
+              v-model:value="durationCustom[unit.key]"
+              size="small"
+              class="ml-2 w-[60px]"
+              placeholder="自定义"
+              @change="setDuration(unit.key, durationCustom[unit.key])"
+            />
+          </Button.Group>
         </div>
       </div>
-    </Tabs.TabPane>
+    </TabPane>
   </Tabs>
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
index 42ae2c816..61026cb99 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
@@ -68,14 +68,10 @@ watch(
 
 <template>
   <div>
-    <div style="margin-bottom: 10px">
-      当前选择：<Input
-        v-model:value="isoString"
-        readonly
-        style="width: 300px"
-      />
+    <div class="mb-2.5">
+      当前选择：<Input v-model:value="isoString" readonly class="w-[300px]" />
     </div>
-    <div v-for="unit in units" :key="unit.key" style="margin-bottom: 8px">
+    <div v-for="unit in units" :key="unit.key" class="mb-2">
       <span>{{ unit.label }}：</span>
       <Button.Group>
         <Button
@@ -89,7 +85,7 @@ watch(
         <Input
           v-model:value="custom[unit.key]"
           size="small"
-          style="width: 60px; margin-left: 8px"
+          class="ml-2 w-[60px]"
           placeholder="自定义"
           @change="setUnit(unit.key, custom[unit.key])"
         />
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
index 0856cbc16..f754f2200 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
@@ -1,11 +1,14 @@
 <script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
 import type { Ref } from 'vue';
 
 import { computed, nextTick, onMounted, ref, toRaw, watch } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, DatePicker, Input, Modal, Tooltip } from 'ant-design-vue';
+import { Button, DatePicker, Input, Tooltip } from 'ant-design-vue';
 
 import CycleConfig from './CycleConfig.vue';
 import DurationConfig from './DurationConfig.vue';
@@ -20,13 +23,8 @@ const props = defineProps({
 const bpmnInstances = () => (window as any).bpmnInstances;
 const type: Ref<string> = ref('time');
 const condition: Ref<string> = ref('');
-const valid: Ref<boolean> = ref(true);
-const showDatePicker: Ref<boolean> = ref(false);
-const showDurationDialog: Ref<boolean> = ref(false);
-const showCycleDialog: Ref<boolean> = ref(false);
-const showHelp: Ref<boolean> = ref(false);
-const dateValue: Ref<Date | null> = ref(null);
-// const bpmnElement = ref(null);
+const valid: Ref<boolean> = ref(false);
+const dateValue = ref<Dayjs>();
 
 const placeholder = computed<string>(() => {
   if (type.value === 'time') return '请输入时间';
@@ -49,6 +47,9 @@ const helpHtml = computed<string>(() => {
   if (type.value === 'cycle') {
     return `支持CRON表达式（如0 0/30 * * * ?）或ISO 8601周期（如R3/PT10M）。`;
   }
+  if (type.value === 'time') {
+    return `支持ISO 8601格式的时间（如2024-12-12T12:12:12）`;
+  }
   return '';
 });
 
@@ -82,7 +83,6 @@ function setType(t: string) {
 // 输入校验
 watch([type, condition], () => {
   valid.value = validate();
-  // updateNode() // 可以注释掉，避免频繁触发
 });
 
 function validate(): boolean {
@@ -93,46 +93,74 @@ function validate(): boolean {
     return /^P.*$/.test(condition.value);
   }
   if (type.value === 'cycle') {
-    return /^(?:[0-9*/?, ]+|R\d*\/P.*)$/.test(condition.value);
+    // 支持CRON表达式或ISO 8601周期格式：R{n}/P... 或 R{n}/{date}/P...
+    return /^(?:[0-9*/?, ]+|R\d+(?:\/[^/]+)*\/P.*)$/.test(condition.value);
   }
   return true;
 }
 
-// 选择时间
+// 选择时间 Modal
+const [DateModal, dateModalApi] = useVbenModal({
+  title: '选择时间',
+  class: 'w-[400px]',
+  onConfirm: onDateConfirm,
+});
+
 function onDateChange(val: any) {
-  dateValue.value = val;
+  dateValue.value = val || undefined;
 }
 function onDateConfirm(): void {
   if (dateValue.value) {
-    condition.value = new Date(dateValue.value).toISOString();
-    showDatePicker.value = false;
+    condition.value = dateValue.value.toISOString();
+    dateModalApi.close();
     updateNode();
   }
 }
 
-// 持续时长
+// 持续时长 Modal
+const [DurationModal, durationModalApi] = useVbenModal({
+  title: '时间配置',
+  class: 'w-[600px]',
+  onConfirm: onDurationConfirm,
+});
+
 function onDurationChange(val: string) {
   condition.value = val;
 }
 function onDurationConfirm(): void {
-  showDurationDialog.value = false;
+  durationModalApi.close();
   updateNode();
 }
 
-// 循环
+// 循环配置 Modal
+const [CycleModal, cycleModalApi] = useVbenModal({
+  title: '时间配置',
+  class: 'w-[800px]',
+  onConfirm: onCycleConfirm,
+});
+
 function onCycleChange(val: string) {
   condition.value = val;
 }
 function onCycleConfirm(): void {
-  showCycleDialog.value = false;
+  cycleModalApi.close();
   updateNode();
 }
 
-// 输入框聚焦时弹窗（可选）
-function handleInputFocus(): void {
-  if (type.value === 'time') showDatePicker.value = true;
-  if (type.value === 'duration') showDurationDialog.value = true;
-  if (type.value === 'cycle') showCycleDialog.value = true;
+// 帮助说明 Modal
+const [HelpModal, helpModalApi] = useVbenModal({
+  class: 'w-[600px]',
+  title: '格式说明',
+  showCancelButton: false,
+  confirmText: '关闭',
+  onConfirm: () => helpModalApi.close(),
+});
+
+// 点击输入框时弹窗
+function handleInputClick(): void {
+  if (type.value === 'time') dateModalApi.open();
+  if (type.value === 'duration') durationModalApi.open();
+  if (type.value === 'cycle') cycleModalApi.open();
 }
 
 // 同步到节点
@@ -210,8 +238,8 @@ watch(
 
 <template>
   <div class="panel-tab__content">
-    <div style="margin-top: 10px">
-      <span>类型：</span>
+    <div class="mt-2 flex items-center">
+      <span class="w-14">类型：</span>
       <Button.Group>
         <Button
           size="small"
@@ -238,17 +266,17 @@ watch(
       <IconifyIcon
         icon="ant-design:check-circle-filled"
         v-if="valid"
-        style="margin-left: 8px; color: green"
+        class="ml-2 text-green-500"
       />
     </div>
-    <div style="display: flex; align-items: center; margin-top: 10px">
-      <span>条件：</span>
+    <div class="mt-2 flex items-center gap-1">
+      <span class="w-14">条件：</span>
       <Input
         v-model:value="condition"
         :placeholder="placeholder"
-        class="w-[calc(100vw-25%)]"
+        class="w-full"
         :readonly="type !== 'duration' && type !== 'cycle'"
-        @focus="handleInputFocus"
+        @click="handleInputClick"
         @blur="updateNode"
       >
         <template #suffix>
@@ -262,13 +290,13 @@ watch(
             <IconifyIcon
               icon="ant-design:question-circle-filled"
               class="cursor-pointer text-[#409eff]"
-              @click="showHelp = true"
+              @click="helpModalApi.open()"
             />
           </Tooltip>
           <Button
             v-if="type === 'time'"
-            @click="showDatePicker = true"
-            style="margin-left: 4px"
+            @click="dateModalApi.open()"
+            class="ml-1 flex items-center justify-center"
             shape="circle"
             size="small"
           >
@@ -276,8 +304,8 @@ watch(
           </Button>
           <Button
             v-if="type === 'duration'"
-            @click="showDurationDialog = true"
-            style="margin-left: 4px"
+            @click="durationModalApi.open()"
+            class="ml-1 flex items-center justify-center"
             shape="circle"
             size="small"
           >
@@ -285,8 +313,8 @@ watch(
           </Button>
           <Button
             v-if="type === 'cycle'"
-            @click="showCycleDialog = true"
-            style="margin-left: 4px"
+            @click="cycleModalApi.open()"
+            class="ml-1 flex items-center justify-center"
             shape="circle"
             size="small"
           >
@@ -295,62 +323,32 @@ watch(
         </template>
       </Input>
     </div>
+
     <!-- 时间选择器 -->
-    <Modal
-      v-model:open="showDatePicker"
-      title="选择时间"
-      width="400px"
-      @cancel="showDatePicker = false"
-    >
+    <DateModal>
       <DatePicker
         v-model:value="dateValue"
         show-time
         placeholder="选择日期时间"
-        style="width: 100%"
+        class="w-full"
         @change="onDateChange"
       />
-      <template #footer>
-        <Button @click="showDatePicker = false">取消</Button>
-        <Button type="primary" @click="onDateConfirm">确定</Button>
-      </template>
-    </Modal>
+    </DateModal>
+
     <!-- 持续时长选择器 -->
-    <Modal
-      v-model:open="showDurationDialog"
-      title="时间配置"
-      width="600px"
-      @cancel="showDurationDialog = false"
-    >
+    <DurationModal>
       <DurationConfig :value="condition" @change="onDurationChange" />
-      <template #footer>
-        <Button @click="showDurationDialog = false">取消</Button>
-        <Button type="primary" @click="onDurationConfirm">确定</Button>
-      </template>
-    </Modal>
+    </DurationModal>
+
     <!-- 循环配置器 -->
-    <Modal
-      v-model:open="showCycleDialog"
-      title="时间配置"
-      width="800px"
-      @cancel="showCycleDialog = false"
-    >
+    <CycleModal>
       <CycleConfig :value="condition" @change="onCycleChange" />
-      <template #footer>
-        <Button @click="showCycleDialog = false">取消</Button>
-        <Button type="primary" @click="onCycleConfirm">确定</Button>
-      </template>
-    </Modal>
+    </CycleModal>
+
     <!-- 帮助说明 -->
-    <Modal
-      v-model:open="showHelp"
-      title="格式说明"
-      width="600px"
-      @cancel="showHelp = false"
-    >
+    <HelpModal>
+      <!-- eslint-disable-next-line vue/no-v-html -->
       <div v-html="helpHtml"></div>
-      <template #footer>
-        <Button @click="showHelp = false">关闭</Button>
-      </template>
-    </Modal>
+    </HelpModal>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts
index f1c082f1a..b8bf53277 100644
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/utils.ts
@@ -1,5 +1,3 @@
-import { toRaw } from 'vue';
-
 const bpmnInstances = () => (window as any)?.bpmnInstances;
 // 创建监听器实例
 export function createListenerObject(options, isTask, prefix) {
@@ -76,7 +74,8 @@ export function updateElementExtensions(element, extensionList) {
   const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
     values: extensionList,
   });
-  bpmnInstances().modeling.updateProperties(toRaw(element), {
+  // 直接使用原始元素对象，不需要toRaw包装
+  bpmnInstances().modeling.updateProperties(element, {
     extensionElements: extensions,
   });
 }
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
index 25557024f..a89375397 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
@@ -193,7 +193,6 @@ const childFormFieldOptions = ref<any[]>([]);
 const saveConfig = async () => {
   activeTabName.value = 'child';
   if (!formRef.value) return false;
-
   const valid = await formRef.value.validate().catch(() => false);
   if (!valid) return false;
 
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
index 673caa68e..4a0feab8b 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/copy-task-node-config.vue
@@ -137,7 +137,7 @@ const {
 } = useNodeForm(BpmNodeTypeEnum.COPY_TASK_NODE);
 
 const configForm = tempConfigForm as Ref<CopyTaskFormType>;
-// 抄送人策略， 去掉发起人自选 和 发起人自己
+// 抄送人策略，去掉发起人自选 和 发起人自己
 const copyUserStrategies = computed(() => {
   return CANDIDATE_STRATEGY.filter(
     (item) => item.value !== CandidateStrategy.START_USER,
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
index 758c5e8c4..421fce968 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -348,7 +348,7 @@ function getShowText(): string {
   return showText;
 }
 
-/** 显示触发器节点配置， 由父组件传过来 */
+/** 显示触发器节点配置，由父组件传过来 */
 function showTriggerNodeConfig(node: SimpleFlowNode) {
   nodeName.value = node.name;
   originalSetting = node.triggerSetting
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index e09057ab6..80e6b0e07 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -532,7 +532,7 @@ function useTimeoutHandler() {
     if (timeUnit.value === TimeUnitType.HOUR) {
       configForm.value.timeDuration = 6;
     }
-    // 天， 默认 1天
+    // 天， 默认 1 天
     if (timeUnit.value === TimeUnitType.DAY) {
       configForm.value.timeDuration = 1;
     }
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue
index 09d0d2dd4..a167f3107 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/child-process-node.vue
@@ -19,7 +19,7 @@ const props = defineProps<{
   flowNode: SimpleFlowNode;
 }>();
 
-/** 定义事件，更新父组件。 */
+/** 定义事件，更新父组件 */
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue
index 3ab058b25..3cef78906 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/copy-task-node.vue
@@ -22,7 +22,7 @@ const props = defineProps({
     required: true,
   },
 });
-// 定义事件，更新父组件。
+// 定义事件，更新父组件
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue
index c72b23a09..f6f941e7c 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/delay-timer-node.vue
@@ -20,7 +20,7 @@ const props = defineProps({
     required: true,
   },
 });
-// 定义事件，更新父组件。
+// 定义事件，更新父组件
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined];
 }>();
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
index bc53b0e0d..7c6b6f555 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -289,7 +289,7 @@ function recursiveFindParentNode(
           :condition-node="item"
           :ref="item.id"
         />
-        <!-- 递归显示子节点  -->
+        <!-- 递归显示子节点 -->
         <ProcessNodeTree
           v-if="item && item.childNode"
           :parent-node="item"
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
index 5bd490df4..0253238fe 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -291,7 +291,7 @@ function recursiveFindParentNode(
           :condition-node="item"
           :ref="item.id"
         />
-        <!-- 递归显示子节点  -->
+        <!-- 递归显示子节点 -->
         <ProcessNodeTree
           v-if="item && item.childNode"
           :parent-node="item"
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
index dec77d854..c66bcef38 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
@@ -30,7 +30,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       const data = modalApi.getData<any[]>();
       // 填充列表数据
-      await gridApi.setGridOptions({ data });
+      gridApi.setGridOptions({ data });
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
index 38b869a49..baa4cc7ed 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
@@ -33,7 +33,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       const data = modalApi.getData<any[]>();
       // 填充列表数据
-      await gridApi.setGridOptions({ data });
+      gridApi.setGridOptions({ data });
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue
index 5b5545b48..206fb65c0 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/parallel-node.vue
@@ -53,10 +53,10 @@ const showInputs = ref<boolean[]>([]);
 watch(
   showInputs,
   (newValues) => {
-    // 当输入框显示时, 自动聚焦
+    // 当输入框显示时 自动聚焦
     newValues.forEach((value, index) => {
       if (value) {
-        // 当显示状态从 false 变为 true 时, 自动聚焦
+        // 当显示状态从 false 变为 true 时 自动聚焦
         nextTick(() => {
           inputRefs.value[index]?.focus();
         });
@@ -212,7 +212,7 @@ function recursiveFindParentNode(
             />
           </div>
         </div>
-        <!-- 递归显示子节点  -->
+        <!-- 递归显示子节点 -->
         <ProcessNodeTree
           v-if="item && item.childNode"
           :parent-node="item"
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue
index 6fd7daa9e..8f844b1c7 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/components/nodes/start-user-node.vue
@@ -27,7 +27,7 @@ const props = defineProps({
   },
 });
 
-// 定义事件，更新父组件。
+// 定义事件，更新父组件
 defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined];
 }>();
diff --git a/apps/web-antd/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-antd/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
index a36f96986..8f6dc85b4 100644
--- a/apps/web-antd/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-antd/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
@@ -146,7 +146,6 @@
     background: url('./svg/simple-process-bg.svg') 0 0 repeat;
     transform: scale(1);
     transform-origin: 50% 0 0;
-    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     // 节点容器 定义节点宽度
     .node-container {
       width: 200px;
diff --git a/apps/web-antd/src/views/bpm/model/form/index.vue b/apps/web-antd/src/views/bpm/model/form/index.vue
index 8dc2045b7..49e9e8999 100644
--- a/apps/web-antd/src/views/bpm/model/form/index.vue
+++ b/apps/web-antd/src/views/bpm/model/form/index.vue
@@ -259,9 +259,11 @@ async function validateAllSteps() {
   return true;
 }
 
+const saveLoading = ref<boolean>(false);
 /** 保存操作 */
 async function handleSave() {
   try {
+    saveLoading.value = true;
     // 保存前校验所有步骤的数据
     const result = await validateAllSteps();
     if (!result) {
@@ -309,9 +311,12 @@ async function handleSave() {
     }
   } catch (error: any) {
     console.error('保存失败:', error);
+  } finally {
+    saveLoading.value = false;
   }
 }
-
+// 发布加载中状态
+const deployLoading = ref<boolean>(false);
 /** 发布操作 */
 async function handleDeploy() {
   try {
@@ -319,6 +324,7 @@ async function handleDeploy() {
     if (!formData.value.id) {
       await confirm('是否确认发布该流程？');
     }
+    deployLoading.value = true;
     // 1.2 校验所有步骤
     await validateAllSteps();
 
@@ -342,6 +348,8 @@ async function handleDeploy() {
   } catch (error: any) {
     console.error('发布失败:', error);
     message.warning(error.message || '发布失败');
+  } finally {
+    deployLoading.value = false;
   }
 }
 
@@ -448,11 +456,12 @@ onBeforeUnmount(() => {
           <Button
             v-if="actionType === 'update'"
             type="primary"
+            :loading="deployLoading"
             @click="handleDeploy"
           >
             发 布
           </Button>
-          <Button type="primary" @click="handleSave">
+          <Button type="primary" @click="handleSave" :loading="saveLoading">
             <span v-if="actionType === 'definition'">恢 复</span>
             <span v-else>保 存</span>
           </Button>
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/model/form/modules/form-design.vue b/apps/web-antd/src/views/bpm/model/form/modules/form-design.vue
index 7f42c2e98..60e242e29 100644
--- a/apps/web-antd/src/views/bpm/model/form/modules/form-design.vue
+++ b/apps/web-antd/src/views/bpm/model/form/modules/form-design.vue
@@ -132,7 +132,7 @@ defineExpose({ validate });
           placeholder="请输入表单提交路由"
         />
         <Tooltip
-          title="自定义表单的提交路径，使用 Vue 的路由地址, 例如说: bpm/oa/leave/create.vue"
+          title="自定义表单的提交路径，使用 Vue 的路由地址，例如说: /bpm/oa/leave/create.vue"
           placement="top"
         >
           <IconifyIcon
@@ -154,7 +154,7 @@ defineExpose({ validate });
           placeholder="请输入表单查看的组件地址"
         />
         <Tooltip
-          title="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
+          title="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：/bpm/oa/leave/detail.vue"
           placement="top"
         >
           <IconifyIcon
diff --git a/apps/web-antd/src/views/bpm/oa/leave/index.vue b/apps/web-antd/src/views/bpm/oa/leave/index.vue
index d00ff092e..fae7f7c4a 100644
--- a/apps/web-antd/src/views/bpm/oa/leave/index.vue
+++ b/apps/web-antd/src/views/bpm/oa/leave/index.vue
@@ -17,6 +17,7 @@ import { router } from '#/router';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
+// TODO @jason：这里是不是要迁移下？
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
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..8b8b66c09
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processExpression/components/process-expression-select-modal.vue
@@ -0,0 +1,92 @@
+<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];
+}>();
+
+// TODO @jason：这里是不是要迁移下？
+// 查询参数
+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/create/index.vue b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
index 691cf0bbb..638fed593 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
@@ -228,9 +228,10 @@ onMounted(() => {
                 >
                   <Card
                     hoverable
-                    class="definition-item-card w-full cursor-pointer"
+                    class="w-full cursor-pointer"
                     :class="{
-                      'search-match': searchName.trim().length > 0,
+                      'animate-bounce-once !bg-[rgb(63_115_247_/_10%)]':
+                        searchName.trim().length > 0,
                     }"
                     :body-style="{
                       width: '100%',
@@ -241,10 +242,13 @@ onMounted(() => {
                       <img
                         v-if="definition.icon"
                         :src="definition.icon"
-                        class="flow-icon-img object-contain"
+                        class="size-12 rounded object-contain"
                         alt="流程图标"
                       />
-                      <div v-else class="flow-icon flex-shrink-0">
+                      <div
+                        v-else
+                        class="flex size-12 flex-shrink-0 items-center justify-center rounded bg-primary"
+                      >
                         <span class="text-xs text-white">
                           {{ definition.name?.slice(0, 2) }}
                         </span>
@@ -283,7 +287,6 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-// @jason：看看能不能通过 tailwindcss 简化下
 @keyframes bounce {
   0%,
   50% {
@@ -295,30 +298,7 @@ onMounted(() => {
   }
 }
 
-.process-definition-container {
-  .definition-item-card {
-    .flow-icon-img {
-      width: 48px;
-      height: 48px;
-      border-radius: 0.25rem;
-    }
-
-    .flow-icon {
-      @apply bg-primary;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 48px;
-      height: 48px;
-      border-radius: 0.25rem;
-    }
-
-    &.search-match {
-      background-color: rgb(63 115 247 / 10%);
-      border: 1px solid var(--primary);
-      animation: bounce 0.5s ease;
-    }
-  }
+.animate-bounce-once {
+  animation: bounce 0.5s ease;
 }
 </style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
index 4973fc4b5..d924aed7e 100644
--- a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
@@ -104,7 +104,7 @@ async function submitForm() {
     // 关闭并提示
     message.success('发起流程成功');
     await closeCurrentTab();
-    await router.push({ name: 'BpmTaskMy' });
+    await router.push({ name: 'BpmProcessInstanceMy' });
   } finally {
     processInstanceStartLoading.value = false;
   }
@@ -169,6 +169,7 @@ async function initProcessInfo(row: any, formVariables?: any) {
       path: row.formCustomCreatePath,
     });
     // 返回选择流程
+    // TODO @jason：这里为啥要有个 cancel 事件哈？目前看 vue3 + element-plus 貌似不需要呀；
     emit('cancel');
   }
 }
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
index 92a8ea329..7d146a871 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -212,20 +212,27 @@ watch(
     }
   },
 );
-
+const loading = ref(false);
 /** 初始化 */
 onMounted(async () => {
-  await getDetail();
-  // 获得用户列表
-  userOptions.value = await getSimpleUserList();
+  try {
+    loading.value = true;
+    await getDetail();
+    // 获得用户列表
+    userOptions.value = await getSimpleUserList();
+  } finally {
+    loading.value = false;
+  }
 });
 </script>
 
 <template>
-  <Page auto-content-height>
+  <Page auto-content-height v-loading="loading">
     <Card
+      class="flex h-full flex-col"
       :body-style="{
-        overflowY: 'auto',
+        flex: 1,
+        overflowY: 'hidden',
         paddingTop: '12px',
       }"
     >
@@ -286,24 +293,16 @@ onMounted(async () => {
         </div>
 
         <!-- 流程操作 -->
-        <div class="process-tabs-container flex flex-1 flex-col">
-          <Tabs v-model:active-key="activeTab" class="mt-0 h-full">
-            <TabPane tab="审批详情" key="form" class="tab-pane-content">
-              <Row :gutter="[48, 24]" class="h-full">
-                <Col
-                  :xs="24"
-                  :sm="24"
-                  :md="18"
-                  :lg="18"
-                  :xl="16"
-                  class="h-full"
-                >
+        <div class="flex h-full flex-1 flex-col">
+          <Tabs v-model:active-key="activeTab">
+            <TabPane tab="审批详情" key="form" class="pb-20 pr-3">
+              <Row :gutter="[48, 24]">
+                <Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
                   <!-- 流程表单 -->
                   <div
                     v-if="
                       processDefinition?.formType === BpmModelFormType.NORMAL
                     "
-                    class="h-full"
                   >
                     <form-create
                       v-model="detailForm.value"
@@ -316,13 +315,12 @@ onMounted(async () => {
                     v-else-if="
                       processDefinition?.formType === BpmModelFormType.CUSTOM
                     "
-                    class="h-full"
                   >
                     <BusinessFormComponent :id="processInstance?.businessKey" />
                   </div>
                 </Col>
-                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8" class="h-full">
-                  <div class="mt-4 h-full">
+                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
+                  <div class="mt-4">
                     <ProcessInstanceTimeline :activity-nodes="activityNodes" />
                   </div>
                 </Col>
@@ -331,44 +329,35 @@ onMounted(async () => {
             <TabPane
               tab="流程图"
               key="diagram"
-              class="tab-pane-content"
+              class="pb-20 pr-3"
               :force-render="true"
             >
-              <div class="h-full">
-                <ProcessInstanceSimpleViewer
-                  v-show="
-                    processDefinition.modelType &&
-                    processDefinition.modelType === BpmModelType.SIMPLE
-                  "
-                  :loading="processInstanceLoading"
-                  :model-view="processModelView"
-                />
-                <ProcessInstanceBpmnViewer
-                  v-show="
-                    processDefinition.modelType &&
-                    processDefinition.modelType === BpmModelType.BPMN
-                  "
-                  :loading="processInstanceLoading"
-                  :model-view="processModelView"
-                />
-              </div>
+              <ProcessInstanceSimpleViewer
+                v-show="
+                  processDefinition.modelType &&
+                  processDefinition.modelType === BpmModelType.SIMPLE
+                "
+                :loading="processInstanceLoading"
+                :model-view="processModelView"
+              />
+              <ProcessInstanceBpmnViewer
+                v-show="
+                  processDefinition.modelType &&
+                  processDefinition.modelType === BpmModelType.BPMN
+                "
+                :loading="processInstanceLoading"
+                :model-view="processModelView"
+              />
             </TabPane>
-            <TabPane tab="流转记录" key="record" class="tab-pane-content">
-              <div class="h-full">
-                <BpmProcessInstanceTaskList
-                  ref="taskListRef"
-                  :loading="processInstanceLoading"
-                  :id="id"
-                />
-              </div>
+            <TabPane tab="流转记录" key="record" class="pb-20 pr-3">
+              <BpmProcessInstanceTaskList
+                ref="taskListRef"
+                :loading="processInstanceLoading"
+                :id="id"
+              />
             </TabPane>
             <!-- TODO 待开发 -->
-            <TabPane
-              tab="流转评论"
-              key="comment"
-              v-if="false"
-              class="tab-pane-content"
-            >
+            <TabPane tab="流转评论" key="comment" v-if="false" class="pr-3">
               <div class="h-full">待开发</div>
             </TabPane>
           </Tabs>
@@ -396,35 +385,18 @@ onMounted(async () => {
 </template>
 
 <style lang="scss" scoped>
-// @jason：看看能不能通过 tailwindcss 简化下
-.ant-tabs-content {
-  height: 100%;
-}
-
-.process-tabs-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
 :deep(.ant-tabs) {
   display: flex;
   flex-direction: column;
   height: 100%;
-}
 
-:deep(.ant-tabs-content) {
-  flex: 1;
-  overflow-y: auto;
+  .ant-tabs-content {
+    height: 100%;
+  }
 }
 
 :deep(.ant-tabs-tabpane) {
   height: 100%;
-}
-
-.tab-pane-content {
-  height: calc(100vh - 420px);
-  padding-right: 12px;
-  overflow: hidden auto;
+  overflow-y: auto;
 }
 </style>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
index 4122c1fc0..c3f1a86c9 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -5,7 +5,7 @@ import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { base64ToFile } from '@vben/utils';
 
-import { Button, Space, Tooltip } from 'ant-design-vue';
+import { Button, Tooltip } from 'ant-design-vue';
 import Vue3Signature from 'vue3-signature';
 
 import { uploadFile } from '#/api/infra/file';
@@ -36,30 +36,29 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal title="流程签名" class="w-3/5">
-    <div class="mb-2 flex justify-end">
-      <Space>
+    <div class="flex h-[50vh] flex-col">
+      <div class="mb-2 flex justify-end gap-2">
         <Tooltip title="撤销上一步操作">
-          <Button @click="signature?.undo()">
+          <Button @click="signature?.undo()" size="small">
             <template #icon>
-              <IconifyIcon icon="lucide:undo" class="mb-1 size-4" />
+              <IconifyIcon icon="lucide:undo" class="mb-1 size-3" />
             </template>
             撤销
           </Button>
         </Tooltip>
         <Tooltip title="清空画布">
-          <Button @click="signature?.clear()">
+          <Button @click="signature?.clear()" size="small">
             <template #icon>
-              <IconifyIcon icon="lucide:trash" class="mb-1 size-4" />
+              <IconifyIcon icon="lucide:trash" class="mb-1 size-3" />
             </template>
             <span>清除</span>
           </Button>
         </Tooltip>
-      </Space>
+      </div>
+      <Vue3Signature
+        class="h-full flex-1 border border-solid border-gray-300"
+        ref="signature"
+      />
     </div>
-
-    <Vue3Signature
-      class="mx-auto !h-80 border border-solid border-gray-300"
-      ref="signature"
-    />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
index c3fb1050d..0565fcb9b 100644
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
@@ -44,7 +44,7 @@ function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'approver',
       title: '审批人',
       slots: {
-        default: ({ row }: { row: BpmTaskApi.TaskManager }) => {
+        default: ({ row }: { row: BpmTaskApi.Task }) => {
           return row.assigneeUser?.nickname || row.ownerUser?.nickname;
         },
       },
@@ -106,7 +106,7 @@ function handleRefresh() {
 }
 
 /** 显示表单详情 */
-async function handleShowFormDetail(row: BpmTaskApi.TaskManager) {
+async function handleShowFormDetail(row: BpmTaskApi.Task) {
   // 设置表单配置和表单字段
   taskForm.value = {
     rule: [],
@@ -141,7 +141,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     keepSource: true,
     showFooter: true,
     border: true,
-    height: 'auto',
     proxyConfig: {
       ajax: {
         query: async () => {
@@ -159,7 +158,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       enabled: false,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
+  } as VxeTableGridOptions<BpmTaskApi.Task>,
 });
 
 defineExpose({
@@ -168,7 +167,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="flex h-full flex-col">
+  <div>
     <Grid>
       <template #slot-reason="{ row }">
         <div class="flex flex-wrap items-center justify-center">
@@ -188,13 +187,13 @@ defineExpose({
         </div>
       </template>
     </Grid>
-    <Modal class="w-[800px]">
-      <form-create
-        ref="formRef"
-        v-model="taskForm.value"
-        :option="taskForm.option"
-        :rule="taskForm.rule"
-      />
-    </Modal>
   </div>
+  <Modal class="w-3/5">
+    <form-create
+      ref="formRef"
+      v-model="taskForm.value"
+      :option="taskForm.option"
+      :rule="taskForm.rule"
+    />
+  </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..c93b79ef5
--- /dev/null
+++ b/apps/web-antd/src/views/bpm/processListener/components/process-listener-select-modal.vue
@@ -0,0 +1,96 @@
+<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];
+}>();
+
+// TODO @jason：这里是不是要迁移下？
+// 查询参数
+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/bpm/processListener/data.ts b/apps/web-antd/src/views/bpm/processListener/data.ts
index 69f7d7c89..b8fdd6f32 100644
--- a/apps/web-antd/src/views/bpm/processListener/data.ts
+++ b/apps/web-antd/src/views/bpm/processListener/data.ts
@@ -8,22 +8,22 @@ import { z } from '#/adapter/form';
 
 export const EVENT_EXECUTION_OPTIONS = [
   {
-    label: 'start',
+    label: '开始',
     value: 'start',
   },
   {
-    label: 'end',
+    label: '结束',
     value: 'end',
   },
 ];
 
 export const EVENT_OPTIONS = [
-  { label: 'create', value: 'create' },
-  { label: 'assignment', value: 'assignment' },
-  { label: 'complete', value: 'complete' },
-  { label: 'delete', value: 'delete' },
-  { label: 'update', value: 'update' },
-  { label: 'timeout', value: 'timeout' },
+  { label: '创建', value: 'create' },
+  { label: '指派', value: 'assignment' },
+  { label: '完成', value: 'complete' },
+  { label: '删除', value: 'delete' },
+  { label: '更新', value: 'update' },
+  { label: '超时', value: 'timeout' },
 ];
 
 /** 新增/修改的表单 */
diff --git a/apps/web-antd/src/views/bpm/task/done/index.vue b/apps/web-antd/src/views/bpm/task/done/index.vue
index 8dcaa4ed1..33811a2f2 100644
--- a/apps/web-antd/src/views/bpm/task/done/index.vue
+++ b/apps/web-antd/src/views/bpm/task/done/index.vue
@@ -15,7 +15,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 defineOptions({ name: 'BpmDoneTask' });
 
 /** 查看历史 */
-function handleHistory(row: BpmTaskApi.TaskManager) {
+function handleHistory(row: BpmTaskApi.Task) {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
@@ -26,7 +26,7 @@ function handleHistory(row: BpmTaskApi.TaskManager) {
 }
 
 /** 撤回任务 */
-async function handleWithdraw(row: BpmTaskApi.TaskManager) {
+async function handleWithdraw(row: BpmTaskApi.Task) {
   const hideLoading = message.loading({
     content: '正在撤回中...',
     duration: 0,
@@ -67,7 +67,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
+  } as VxeTableGridOptions<BpmTaskApi.Task>,
 });
 </script>
 
diff --git a/apps/web-antd/src/views/bpm/task/manager/index.vue b/apps/web-antd/src/views/bpm/task/manager/index.vue
index effc1f469..829570b9a 100644
--- a/apps/web-antd/src/views/bpm/task/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/task/manager/index.vue
@@ -13,7 +13,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 defineOptions({ name: 'BpmManagerTask' });
 
 /** 查看历史 */
-function handleHistory(row: BpmTaskApi.TaskManager) {
+function handleHistory(row: BpmTaskApi.Task) {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
diff --git a/apps/web-antd/src/views/infra/dataSourceConfig/index.vue b/apps/web-antd/src/views/infra/dataSourceConfig/index.vue
index 25ff316e6..f6c45e81d 100644
--- a/apps/web-antd/src/views/infra/dataSourceConfig/index.vue
+++ b/apps/web-antd/src/views/infra/dataSourceConfig/index.vue
@@ -78,7 +78,8 @@ function handleRowCheckboxChange({
 }: {
   records: InfraDataSourceConfigApi.DataSourceConfig[];
 }) {
-  checkedIds.value = records.map((item) => item.id!);
+  // 过滤掉id为 0 的主数据源
+  checkedIds.value = records.map((item) => item.id!).filter((id) => id !== 0);
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -140,6 +141,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               icon: ACTION_ICON.EDIT,
               auth: ['infra:data-source-config:update'],
+              disabled: row.id === 0,
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -148,6 +150,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['infra:data-source-config:delete'],
+              disabled: row.id === 0,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-antd/src/views/infra/fileConfig/data.ts b/apps/web-antd/src/views/infra/fileConfig/data.ts
index efe5823f8..b34729dd4 100644
--- a/apps/web-antd/src/views/infra/fileConfig/data.ts
+++ b/apps/web-antd/src/views/infra/fileConfig/data.ts
@@ -229,6 +229,18 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       defaultValue: false,
     },
+    {
+      fieldName: 'config.region',
+      label: '区域',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请填写区域，一般仅 AWS 需要填写',
+      },
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
     // 通用
     {
       fieldName: 'config.domain',
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 5edd1cc0d..9360c8cdd 100644
--- a/apps/web-antd/src/views/iot/device/device/data.ts
+++ b/apps/web-antd/src/views/iot/device/device/data.ts
@@ -1,16 +1,13 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import { DeviceTypeEnum, DICT_TYPE, LocationTypeEnum } 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,
-  getSimpleProductList,
-} from '#/api/iot/product/product';
+import { getSimpleProductList } from '#/api/iot/product/product';
 
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -33,6 +30,10 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         placeholder: '请选择产品',
       },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values: any) => !!values?.id,
+      },
       rules: 'required',
     },
     {
@@ -42,6 +43,10 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入 DeviceName',
       },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values: any) => !!values?.id,
+      },
       rules: z
         .string()
         .min(4, 'DeviceName 长度不能少于 4 个字符')
@@ -63,7 +68,7 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       dependencies: {
         triggerFields: ['deviceType'],
-        show: (values) => values.deviceType === 1, // GATEWAY_SUB
+        show: (values) => values.deviceType === DeviceTypeEnum.GATEWAY_SUB,
       },
     },
     {
@@ -129,20 +134,20 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       dependencies: {
         triggerFields: ['locationType'],
-        show: (values) => values.locationType === 3, // MANUAL
+        show: (values) => values.locationType === LocationTypeEnum.MANUAL,
       },
     },
     {
       fieldName: 'latitude',
-      label: '设备维度',
+      label: '设备纬度',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入设备维度',
+        placeholder: '请输入设备纬度',
         class: 'w-full',
       },
       dependencies: {
         triggerFields: ['locationType'],
-        show: (values) => values.locationType === 3, // MANUAL
+        show: (values) => values.locationType === LocationTypeEnum.MANUAL,
       },
     },
   ];
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/index.vue b/apps/web-antd/src/views/iot/device/device/detail/index.vue
similarity index 83%
rename from apps/web-antd/src/views/iot/device/device/modules/detail/index.vue
rename to apps/web-antd/src/views/iot/device/device/detail/index.vue
index d8bf6a095..4b549a363 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/index.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/index.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IotDeviceApi } from '#/api/iot/device/device';
 import type { IotProductApi } from '#/api/iot/product/product';
 import type { ThingModelData } from '#/api/iot/thingmodel';
@@ -7,20 +7,21 @@ import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
+import { DeviceTypeEnum } from '@vben/constants';
 
 import { message, Tabs } from 'ant-design-vue';
 
 import { getDevice } from '#/api/iot/device/device';
-import { DeviceTypeEnum, getProduct } from '#/api/iot/product/product';
+import { getProduct } from '#/api/iot/product/product';
 import { getThingModelListByProductId } from '#/api/iot/thingmodel';
 
-import DeviceDetailConfig from './device-detail-config.vue';
-import DeviceDetailsHeader from './device-details-header.vue';
-import DeviceDetailsInfo from './device-details-info.vue';
-import DeviceDetailsMessage from './device-details-message.vue';
-import DeviceDetailsSimulator from './device-details-simulator.vue';
-import DeviceDetailsSubDevice from './device-details-sub-device.vue';
-import DeviceDetailsThingModel from './device-details-thing-model.vue';
+import DeviceDetailConfig from './modules/config.vue';
+import DeviceDetailsHeader from './modules/header.vue';
+import DeviceDetailsInfo from './modules/info.vue';
+import DeviceDetailsMessage from './modules/message.vue';
+import DeviceDetailsSimulator from './modules/simulator.vue';
+import DeviceDetailsSubDevice from './modules/sub-device.vue';
+import DeviceDetailsThingModel from './modules/thing-model.vue';
 
 defineOptions({ name: 'IoTDeviceDetail' });
 
@@ -52,8 +53,8 @@ async function getDeviceData(deviceId: number) {
 async function getProductData(productId: number) {
   try {
     product.value = await getProduct(productId);
-  } catch (error) {
-    console.error('获取产品详情失败:', error);
+  } catch {
+    message.error('获取产品详情失败');
   }
 }
 
@@ -62,8 +63,8 @@ async function getThingModelList(productId: number) {
   try {
     const data = await getThingModelListByProductId(productId);
     thingModelList.value = data || [];
-  } catch (error) {
-    console.error('获取物模型列表失败:', error);
+  } catch {
+    message.error('获取物模型列表失败');
     thingModelList.value = [];
   }
 }
@@ -88,9 +89,9 @@ onMounted(async () => {
 <template>
   <Page>
     <DeviceDetailsHeader
+      :device="device"
       :loading="loading"
       :product="product"
-      :device="device"
       @refresh="() => getDeviceData(id)"
     />
 
@@ -98,8 +99,8 @@ onMounted(async () => {
       <Tabs.TabPane key="info" tab="设备信息">
         <DeviceDetailsInfo
           v-if="activeTab === 'info'"
-          :product="product"
           :device="device"
+          :product="product"
         />
       </Tabs.TabPane>
       <Tabs.TabPane key="model" tab="物模型数据">
@@ -128,8 +129,8 @@ onMounted(async () => {
       <Tabs.TabPane key="simulator" tab="模拟设备">
         <DeviceDetailsSimulator
           v-if="activeTab === 'simulator'"
-          :product="product"
           :device="device"
+          :product="product"
           :thing-model-list="thingModelList"
         />
       </Tabs.TabPane>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-detail-config.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/config.vue
similarity index 85%
rename from apps/web-antd/src/views/iot/device/device/modules/detail/device-detail-config.vue
rename to apps/web-antd/src/views/iot/device/device/detail/modules/config.vue
index 6fa449022..072a1ff77 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-detail-config.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/config.vue
@@ -21,6 +21,7 @@ const emit = defineEmits<{
 
 const loading = ref(false); // 加载中
 const pushLoading = ref(false); // 推送加载中
+const saveLoading = ref(false); // 保存加载中
 const config = ref<any>({}); // 只存储 config 字段
 const configString = ref(''); // 用于编辑器的字符串格式
 
@@ -50,20 +51,15 @@ const formattedConfig = computed(() => {
   }
 });
 
-/** 判断配置是否有数据 */
-const hasConfigData = computed(() => {
-  return config.value && Object.keys(config.value).length > 0;
-});
-
 /** 启用编辑模式的函数 */
-function enableEdit() {
+function handleEdit() {
   isEditing.value = true;
   // 重新同步编辑器内容
   configString.value = JSON.stringify(config.value, null, 2);
 }
 
 /** 取消编辑的函数 */
-function cancelEdit() {
+function handleCancelEdit() {
   try {
     config.value = props.device.config ? JSON.parse(props.device.config) : {};
     configString.value = JSON.stringify(config.value, null, 2);
@@ -84,29 +80,27 @@ async function saveConfig() {
     message.error({ content: 'JSON格式错误，请修正后再提交！' });
     return;
   }
-
-  await updateDeviceConfig();
-  isEditing.value = false;
+  saveLoading.value = true;
+  try {
+    await updateDeviceConfig();
+    isEditing.value = false;
+  } finally {
+    saveLoading.value = false;
+  }
 }
 
 /** 配置推送处理函数 */
 async function handleConfigPush() {
+  pushLoading.value = true;
   try {
-    pushLoading.value = true;
-
     // 调用配置推送接口
     await sendDeviceMessage({
       deviceId: props.device.id!,
       method: IotDeviceMessageMethodEnum.CONFIG_PUSH.method,
       params: config.value,
     });
-
+    // 提示成功
     message.success({ content: '配置推送成功！' });
-  } catch (error) {
-    if (error !== 'cancel') {
-      message.error({ content: '配置推送失败！' });
-      console.error('配置推送错误:', error);
-    }
   } finally {
     pushLoading.value = false;
   }
@@ -124,8 +118,6 @@ async function updateDeviceConfig() {
     message.success({ content: '更新成功！' });
     // 触发 success 事件
     emit('success');
-  } catch (error) {
-    console.error(error);
   } finally {
     loading.value = false;
   }
@@ -134,35 +126,14 @@ async function updateDeviceConfig() {
 
 <template>
   <div>
-    <!-- 只在没有配置数据时显示提示 -->
+    <!-- 使用说明提示 -->
     <Alert
-      v-if="!hasConfigData"
-      message="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「下发」按钮，设备即可进行远程配置。"
-      type="info"
-      show-icon
       class="my-4"
       description="如需编辑文件，请点击下方编辑按钮"
+      message="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「配置推送」按钮，设备即可进行远程配置。"
+      show-icon
+      type="info"
     />
-    <div class="mt-5 text-center">
-      <Button v-if="isEditing" @click="cancelEdit">取消</Button>
-      <Button
-        v-if="isEditing"
-        type="primary"
-        @click="saveConfig"
-        :loading="loading"
-      >
-        保存
-      </Button>
-      <Button v-else @click="enableEdit">编辑</Button>
-      <Button
-        v-if="!isEditing"
-        type="primary"
-        @click="handleConfigPush"
-        :loading="pushLoading"
-      >
-        配置推送
-      </Button>
-    </div>
 
     <!-- 代码视图 - 只读展示 -->
     <div v-if="!isEditing" class="json-viewer-container">
@@ -174,9 +145,31 @@ async function updateDeviceConfig() {
       v-else
       v-model:value="configString"
       :rows="20"
-      placeholder="请输入 JSON 格式的配置信息"
       class="json-editor"
+      placeholder="请输入 JSON 格式的配置信息"
     />
+
+    <!-- 操作按钮 -->
+    <div class="mt-5 text-center">
+      <Button v-if="isEditing" @click="handleCancelEdit">取消</Button>
+      <Button
+        v-if="isEditing"
+        :loading="saveLoading"
+        type="primary"
+        @click="saveConfig"
+      >
+        保存
+      </Button>
+      <Button v-else @click="handleEdit">编辑</Button>
+      <Button
+        v-if="!isEditing"
+        :loading="pushLoading"
+        type="primary"
+        @click="handleConfigPush"
+      >
+        配置推送
+      </Button>
+    </div>
   </div>
 </template>
 
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-header.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/header.vue
similarity index 75%
rename from apps/web-antd/src/views/iot/device/device/modules/detail/device-details-header.vue
rename to apps/web-antd/src/views/iot/device/device/detail/modules/header.vue
index d0de74904..8a739a180 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-header.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/header.vue
@@ -1,14 +1,14 @@
-<!-- 设备信息（头部） -->
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IotDeviceApi } from '#/api/iot/device/device';
 import type { IotProductApi } from '#/api/iot/product/product';
 
-import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
+import { useVbenModal } from '@vben/common-ui';
+
 import { Button, Card, Descriptions, message } from 'ant-design-vue';
 
-import DeviceForm from '../device-form.vue';
+import DeviceForm from '../../modules/form.vue';
 
 interface Props {
   product: IotProductApi.Product;
@@ -26,20 +26,19 @@ const emit = defineEmits<{
 
 const router = useRouter();
 
-/** 操作修改 */
-const formRef = ref();
-function openForm(type: string, id?: number) {
-  formRef.value.open(type, id);
-}
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: DeviceForm,
+  destroyOnClose: true,
+});
 
-/** 复制到剪贴板方法 */
+/** 复制到剪贴板 */
 async function copyToClipboard(text: string | undefined) {
   if (!text) return;
   try {
     await navigator.clipboard.writeText(text);
-    message.success({ content: '复制成功' });
+    message.success('复制成功');
   } catch {
-    message.error({ content: '复制失败' });
+    message.error('复制失败');
   }
 }
 
@@ -49,19 +48,25 @@ function goToProductDetail(productId: number | undefined) {
     router.push({ name: 'IoTProductDetail', params: { id: productId } });
   }
 }
+
+/** 打开编辑表单 */
+function openEditForm(row: IotDeviceApi.Device) {
+  formModalApi.setData(row).open();
+}
 </script>
 <template>
   <div class="mb-4">
+    <FormModal @success="emit('refresh')" />
+
     <div class="flex items-start justify-between">
       <div>
         <h2 class="text-xl font-bold">{{ device.deviceName }}</h2>
       </div>
       <div class="space-x-2">
-        <!-- 右上：按钮 -->
         <Button
           v-if="product.status === 0"
           v-access:code="['iot:device:update']"
-          @click="openForm('update', device.id)"
+          @click="openEditForm(device)"
         >
           编辑
         </Button>
@@ -69,11 +74,11 @@ function goToProductDetail(productId: number | undefined) {
     </div>
 
     <Card class="mt-4">
-      <Descriptions :column="1">
+      <Descriptions :column="2">
         <Descriptions.Item label="产品">
           <a
-            @click="goToProductDetail(product.id)"
             class="cursor-pointer text-blue-600"
+            @click="goToProductDetail(product.id)"
           >
             {{ product.name }}
           </a>
@@ -81,8 +86,8 @@ function goToProductDetail(productId: number | undefined) {
         <Descriptions.Item label="ProductKey">
           {{ product.productKey }}
           <Button
-            size="small"
             class="ml-2"
+            size="small"
             @click="copyToClipboard(product.productKey)"
           >
             复制
@@ -90,8 +95,5 @@ function goToProductDetail(productId: number | undefined) {
         </Descriptions.Item>
       </Descriptions>
     </Card>
-
-    <!-- 表单弹窗：添加/修改 -->
-    <DeviceForm ref="formRef" @success="emit('refresh')" />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-info.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/info.vue
similarity index 69%
rename from apps/web-antd/src/views/iot/device/device/modules/detail/device-details-info.vue
rename to apps/web-antd/src/views/iot/device/device/detail/modules/info.vue
index fc7f056ea..71a15301a 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-info.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/info.vue
@@ -1,5 +1,4 @@
-<!-- 设备信息 -->
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IotDeviceApi } from '#/api/iot/device/device';
 import type { IotProductApi } from '#/api/iot/product/product';
 
@@ -7,7 +6,7 @@ import { computed, ref } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
-import { formatDate } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';
 
 import {
   Button,
@@ -24,51 +23,46 @@ import {
 import { getDeviceAuthInfo } from '#/api/iot/device/device';
 import { DictTag } from '#/components/dict-tag';
 
-// 消息提示
-
-const { product, device } = defineProps<{
+interface Props {
   device: IotDeviceApi.Device;
   product: IotProductApi.Product;
-}>(); // 定义 Props
-// const emit = defineEmits(['refresh']); // 定义 Emits
+}
 
-const authDialogVisible = ref(false); // 定义设备认证信息弹框的可见性
-const authPasswordVisible = ref(false); // 定义密码可见性状态
+const props = defineProps<Props>();
+
+const authDialogVisible = ref(false);
+const authPasswordVisible = ref(false);
 const authInfo = ref<IotDeviceApi.DeviceAuthInfo>(
   {} as IotDeviceApi.DeviceAuthInfo,
-); // 定义设备认证信息对象
+);
 
 /** 控制地图显示的标志 */
 const showMap = computed(() => {
-  return !!(device.longitude && device.latitude);
+  return !!(props.device.longitude && props.device.latitude);
 });
 
-/** 复制到剪贴板方法 */
+/** 复制到剪贴板 */
 async function copyToClipboard(text: string) {
   try {
     await navigator.clipboard.writeText(text);
-    message.success({ content: '复制成功' });
+    message.success('复制成功');
   } catch {
-    message.error({ content: '复制失败' });
+    message.error('复制失败');
   }
 }
 
-/** 打开设备认证信息弹框的方法 */
+/** 打开设备认证信息弹框 */
 async function handleAuthInfoDialogOpen() {
-  if (!device.id) return;
+  if (!props.device.id) return;
   try {
-    authInfo.value = await getDeviceAuthInfo(device.id);
-    // 显示设备认证信息弹框
+    authInfo.value = await getDeviceAuthInfo(props.device.id);
     authDialogVisible.value = true;
-  } catch (error) {
-    console.error('获取设备认证信息出错：', error);
-    message.error({
-      content: '获取设备认证信息失败，请检查网络连接或联系管理员',
-    });
+  } catch {
+    message.error('获取设备认证信息失败，请检查网络连接或联系管理员');
   }
 }
 
-/** 关闭设备认证信息弹框的方法 */
+/** 关闭设备认证信息弹框 */
 function handleAuthInfoDialogClose() {
   authDialogVisible.value = false;
 }
@@ -81,52 +75,59 @@ function handleAuthInfoDialogClose() {
         <Card class="h-full">
           <template #title>
             <div class="flex items-center">
-              <IconifyIcon icon="ep:info-filled" class="mr-2 text-primary" />
+              <!-- TODO @haohao：图标尽量使用中立的，这样 ep 版本呢好迁移 -->
+              <IconifyIcon class="mr-2 text-primary" icon="ep:info-filled" />
               <span>设备信息</span>
             </div>
           </template>
           <Descriptions :column="1" bordered size="small">
             <Descriptions.Item label="产品名称">
-              {{ product.name }}
+              {{ props.product.name }}
             </Descriptions.Item>
             <Descriptions.Item label="ProductKey">
-              {{ product.productKey }}
+              {{ props.product.productKey }}
             </Descriptions.Item>
             <Descriptions.Item label="设备类型">
               <DictTag
                 :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
-                :value="product.deviceType"
+                :value="props.product.deviceType"
+              />
+            </Descriptions.Item>
+            <Descriptions.Item label="定位类型">
+              <DictTag
+                :type="DICT_TYPE.IOT_LOCATION_TYPE"
+                :value="props.product.locationType"
               />
             </Descriptions.Item>
             <Descriptions.Item label="DeviceName">
-              {{ device.deviceName }}
+              {{ props.device.deviceName }}
             </Descriptions.Item>
             <Descriptions.Item label="备注名称">
-              {{ device.nickname || '--' }}
+              {{ props.device.nickname || '--' }}
             </Descriptions.Item>
             <Descriptions.Item label="当前状态">
               <DictTag
                 :type="DICT_TYPE.IOT_DEVICE_STATE"
-                :value="device.state"
+                :value="props.device.state"
               />
             </Descriptions.Item>
             <Descriptions.Item label="创建时间">
-              {{ formatDate(device.createTime) }}
+              {{ formatDateTime(props.device.createTime) }}
             </Descriptions.Item>
             <Descriptions.Item label="激活时间">
-              {{ formatDate(device.activeTime) }}
+              {{ formatDateTime(props.device.activeTime) }}
             </Descriptions.Item>
             <Descriptions.Item label="最后上线时间">
-              {{ formatDate(device.onlineTime) }}
+              {{ formatDateTime(props.device.onlineTime) }}
             </Descriptions.Item>
             <Descriptions.Item label="最后离线时间">
-              {{ formatDate(device.offlineTime) }}
+              {{ formatDateTime(props.device.offlineTime) }}
             </Descriptions.Item>
             <Descriptions.Item label="MQTT 连接参数">
               <Button
+                size="small"
                 type="link"
                 @click="handleAuthInfoDialogOpen"
-                size="small"
               >
                 查看
               </Button>
@@ -141,9 +142,13 @@ function handleAuthInfoDialogClose() {
           <template #title>
             <div class="flex items-center justify-between">
               <div class="flex items-center">
-                <IconifyIcon icon="ep:location" class="mr-2 text-primary" />
+                <!-- TODO @haohao：图标尽量使用中立的，这样 ep 版本呢好迁移 -->
+                <IconifyIcon class="mr-2 text-primary" icon="ep:location" />
                 <span>设备位置</span>
               </div>
+              <div class="text-sm text-gray-500">
+                最后上线：{{ formatDateTime(props.device.onlineTime) || '--' }}
+              </div>
             </div>
           </template>
           <div class="h-[500px] w-full">
@@ -157,7 +162,8 @@ function handleAuthInfoDialogClose() {
               v-else
               class="flex h-full w-full items-center justify-center rounded bg-gray-50 text-gray-400"
             >
-              <IconifyIcon icon="ep:warning" class="mr-2" />
+              <!-- TODO @haohao：图标尽量使用中立的，这样 ep 版本呢好迁移 -->
+              <IconifyIcon class="mr-2" icon="ep:warning" />
               <span>暂无位置信息</span>
             </div>
           </div>
@@ -168,9 +174,9 @@ function handleAuthInfoDialogClose() {
     <!-- 认证信息弹框 -->
     <Modal
       v-model:open="authDialogVisible"
+      :footer="null"
       title="MQTT 连接参数"
       width="640px"
-      :footer="null"
     >
       <Form :label-col="{ span: 6 }">
         <Form.Item label="clientId">
@@ -180,7 +186,7 @@ function handleAuthInfoDialogClose() {
               readonly
               style="width: calc(100% - 80px)"
             />
-            <Button @click="copyToClipboard(authInfo.clientId)" type="primary">
+            <Button type="primary" @click="copyToClipboard(authInfo.clientId)">
               <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
@@ -192,7 +198,7 @@ function handleAuthInfoDialogClose() {
               readonly
               style="width: calc(100% - 80px)"
             />
-            <Button @click="copyToClipboard(authInfo.username)" type="primary">
+            <Button type="primary" @click="copyToClipboard(authInfo.username)">
               <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
@@ -201,19 +207,19 @@ function handleAuthInfoDialogClose() {
           <Input.Group compact>
             <Input
               v-model:value="authInfo.password"
-              readonly
               :type="authPasswordVisible ? 'text' : 'password'"
+              readonly
               style="width: calc(100% - 160px)"
             />
             <Button
-              @click="authPasswordVisible = !authPasswordVisible"
               type="primary"
+              @click="authPasswordVisible = !authPasswordVisible"
             >
               <IconifyIcon
                 :icon="authPasswordVisible ? 'lucide:eye-off' : 'lucide:eye'"
               />
             </Button>
-            <Button @click="copyToClipboard(authInfo.password)" type="primary">
+            <Button type="primary" @click="copyToClipboard(authInfo.password)">
               <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/message.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/message.vue
new file mode 100644
index 000000000..81e4d137d
--- /dev/null
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/message.vue
@@ -0,0 +1,244 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import { Button, Select, Space, Switch, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDeviceMessagePage } from '#/api/iot/device/device';
+import { IotDeviceMessageMethodEnum } from '#/views/iot/utils/constants';
+
+const props = defineProps<{
+  deviceId: number;
+}>();
+
+/** 查询参数 */
+const queryParams = reactive({
+  method: undefined,
+  upstream: undefined,
+});
+
+/** 自动刷新开关 */
+const autoRefresh = ref(false);
+/** 自动刷新定时器 */
+let autoRefreshTimer: any = null;
+
+/** 消息方法选项 */
+const methodOptions = computed(() => {
+  return Object.values(IotDeviceMessageMethodEnum).map((item) => ({
+    label: item.name,
+    value: item.method,
+  }));
+});
+
+/** Grid 列定义 */
+function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'ts',
+      title: '时间',
+      width: 160,
+      slots: { default: 'ts' },
+    },
+    {
+      field: 'upstream',
+      title: '上行/下行',
+      width: 100,
+      slots: { default: 'upstream' },
+    },
+    {
+      field: 'reply',
+      title: '是否回复',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'requestId',
+      title: '请求编号',
+      width: 280,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'method',
+      title: '请求方法',
+      width: 120,
+      slots: { default: 'method' },
+    },
+    {
+      field: 'params',
+      title: '请求/响应数据',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+      slots: { default: 'params' },
+    },
+  ];
+}
+
+/** 创建 Grid 实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.deviceId) {
+            return { list: [], total: 0 };
+          }
+          return await getDeviceMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            deviceId: props.deviceId,
+            method: queryParams.method,
+            upstream: queryParams.upstream,
+          });
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: false,
+      search: false,
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+/** 搜索操作 */
+function handleQuery() {
+  gridApi.query();
+}
+
+/** 监听自动刷新 */
+watch(autoRefresh, (newValue) => {
+  if (newValue) {
+    autoRefreshTimer = setInterval(() => {
+      gridApi.query();
+    }, 5000);
+  } else {
+    clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+});
+
+/** 监听设备标识变化 */
+watch(
+  () => props.deviceId,
+  (newValue) => {
+    if (newValue) {
+      handleQuery();
+    }
+  },
+);
+
+/** 组件卸载时清除定时器 */
+onBeforeUnmount(() => {
+  if (autoRefreshTimer) {
+    clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+});
+
+/** 初始化 */
+onMounted(() => {
+  if (props.deviceId) {
+    handleQuery();
+  }
+});
+
+/** 刷新消息列表 */
+function refresh(delay = 0) {
+  if (delay > 0) {
+    setTimeout(() => {
+      gridApi.query();
+    }, delay);
+  } else {
+    gridApi.query();
+  }
+}
+
+/** 暴露方法给父组件 */
+defineExpose({
+  refresh,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 搜索区域 -->
+    <div class="mb-4 flex flex-wrap items-center gap-3">
+      <Select
+        v-model:value="queryParams.method"
+        allow-clear
+        placeholder="所有方法"
+        style="width: 160px"
+      >
+        <Select.Option
+          v-for="item in methodOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </Select.Option>
+      </Select>
+      <Select
+        v-model:value="queryParams.upstream"
+        allow-clear
+        placeholder="上行/下行"
+        style="width: 160px"
+      >
+        <Select.Option label="上行" value="true">上行</Select.Option>
+        <Select.Option label="下行" value="false">下行</Select.Option>
+      </Select>
+      <Space>
+        <Button type="primary" @click="handleQuery">
+          <IconifyIcon icon="ep:search" class="mr-5px" /> 搜索
+        </Button>
+        <Switch
+          v-model:checked="autoRefresh"
+          checked-children="定时刷新"
+          un-checked-children="定时刷新"
+        />
+      </Space>
+    </div>
+
+    <!-- 消息列表 -->
+    <Grid>
+      <template #ts="{ row }">
+        {{ formatDateTime(row.ts) }}
+      </template>
+      <template #upstream="{ row }">
+        <Tag :color="row.upstream ? 'blue' : 'green'">
+          {{ row.upstream ? '上行' : '下行' }}
+        </Tag>
+      </template>
+      <template #method="{ row }">
+        {{ methodOptions.find((item) => item.value === row.method)?.label }}
+      </template>
+      <template #params="{ row }">
+        <span v-if="row.reply">
+          {{ `{"code":${row.code},"msg":"${row.msg}","data":${row.data}\}` }}
+        </span>
+        <span v-else>{{ row.params }}</span>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/simulator.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/simulator.vue
new file mode 100644
index 000000000..ea9c97bb7
--- /dev/null
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/simulator.vue
@@ -0,0 +1,618 @@
+<!-- 模拟设备 -->
+<script lang="ts" setup>
+import type { TableColumnType } from 'ant-design-vue';
+
+import type { IotDeviceApi } from '#/api/iot/device/device';
+import type { IotProductApi } from '#/api/iot/product/product';
+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 {
+  Button,
+  Card,
+  Col,
+  Input,
+  message,
+  Row,
+  Table,
+  Tabs,
+  Textarea,
+} from 'ant-design-vue';
+
+import { sendDeviceMessage } from '#/api/iot/device/device';
+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<{
+  device: IotDeviceApi.Device;
+  product: IotProductApi.Product;
+  thingModelList: ThingModelData[];
+}>();
+
+// 消息弹窗
+const activeTab = ref('upstream'); // 上行upstream、下行downstream
+const upstreamTab = ref(IotDeviceMessageMethodEnum.PROPERTY_POST.method); // 上行子标签
+const downstreamTab = ref(IotDeviceMessageMethodEnum.PROPERTY_SET.method); // 下行子标签
+const deviceMessageRef = ref(); // 设备消息组件引用
+const deviceMessageRefreshDelay = 2000; // 延迟 N 秒，保证模拟上行的消息被处理
+
+// 折叠状态
+const debugCollapsed = ref(false); // 指令调试区域折叠状态
+const messageCollapsed = ref(false); // 设备消息区域折叠状态
+
+// 表单数据：存储用户输入的模拟值
+const formData = ref<Record<string, string>>({});
+
+// 根据类型过滤物模型数据
+const getFilteredThingModelList = (type: number) => {
+  return props.thingModelList.filter(
+    (item) => String(item.type) === String(type),
+  );
+};
+
+// 计算属性：属性列表
+const propertyList = computed(() =>
+  getFilteredThingModelList(IoTThingModelTypeEnum.PROPERTY),
+);
+
+// 计算属性：事件列表
+const eventList = computed(() =>
+  getFilteredThingModelList(IoTThingModelTypeEnum.EVENT),
+);
+
+// 计算属性：服务列表
+const serviceList = computed(() =>
+  getFilteredThingModelList(IoTThingModelTypeEnum.SERVICE),
+);
+
+// 属性表格列定义
+const propertyColumns: TableColumnType[] = [
+  {
+    title: '功能名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 100,
+    fixed: 'left' as any,
+  },
+  {
+    title: '标识符',
+    dataIndex: 'identifier',
+    key: 'identifier',
+    width: 120,
+    fixed: 'left' as any,
+  },
+  {
+    title: '数据类型',
+    key: 'dataType',
+    width: 90,
+  },
+  {
+    title: '数据定义',
+    key: 'dataDefinition',
+    minWidth: 150,
+  },
+  {
+    title: '值',
+    key: 'value',
+    width: 180,
+    fixed: 'right' as any,
+  },
+];
+
+// 事件表格列定义
+const eventColumns = [
+  {
+    title: '功能名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 100,
+    fixed: 'left' as any,
+  },
+  {
+    title: '标识符',
+    dataIndex: 'identifier',
+    key: 'identifier',
+    width: 120,
+    fixed: 'left' as any,
+  },
+  {
+    title: '数据类型',
+    key: 'dataType',
+    width: 90,
+  },
+  {
+    title: '数据定义',
+    key: 'dataDefinition',
+    minWidth: 150,
+  },
+  {
+    title: '值',
+    key: 'value',
+    width: 180,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 100,
+    fixed: 'right' as any,
+  },
+];
+
+// 服务表格列定义
+const serviceColumns = [
+  {
+    title: '服务名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 100,
+    fixed: 'left' as any,
+  },
+  {
+    title: '标识符',
+    dataIndex: 'identifier',
+    key: 'identifier',
+    width: 120,
+    fixed: 'left' as any,
+  },
+  {
+    title: '输入参数',
+    key: 'dataDefinition',
+    minWidth: 150,
+  },
+  {
+    title: '参数值',
+    key: 'value',
+    width: 180,
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 100,
+    fixed: 'right' as any,
+  },
+];
+
+// 获取表单值
+function getFormValue(identifier: string) {
+  return formData.value[identifier] || '';
+}
+
+// 设置表单值
+function setFormValue(identifier: string, value: string) {
+  formData.value[identifier] = value;
+}
+
+// 属性上报
+async function handlePropertyPost() {
+  try {
+    const params: Record<string, any> = {};
+    propertyList.value.forEach((item) => {
+      const value = formData.value[item.identifier!];
+      if (value) {
+        params[item.identifier!] = value;
+      }
+    });
+
+    if (Object.keys(params).length === 0) {
+      message.warning({ content: '请至少输入一个属性值' });
+      return;
+    }
+
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.PROPERTY_POST.method,
+      params,
+    });
+
+    message.success({ content: '属性上报成功' });
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    message.error({ content: '属性上报失败' });
+    console.error(error);
+  }
+}
+
+// 事件上报
+async function handleEventPost(row: ThingModelData) {
+  try {
+    const valueStr = formData.value[row.identifier!];
+    let params: any = {};
+
+    if (valueStr) {
+      try {
+        params = JSON.parse(valueStr);
+      } catch {
+        message.error({ content: '事件参数格式错误，请输入有效的JSON格式' });
+        return;
+      }
+    }
+
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.EVENT_POST.method,
+      params: {
+        identifier: row.identifier,
+        params,
+      },
+    });
+
+    message.success({ content: '事件上报成功' });
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    message.error({ content: '事件上报失败' });
+    console.error(error);
+  }
+}
+
+// 状态变更
+async function handleDeviceState(state: number) {
+  try {
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.STATE_UPDATE.method,
+      params: { state },
+    });
+
+    message.success({ content: '状态变更成功' });
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    message.error({ content: '状态变更失败' });
+    console.error(error);
+  }
+}
+
+// 属性设置
+async function handlePropertySet() {
+  try {
+    const params: Record<string, any> = {};
+    propertyList.value.forEach((item) => {
+      const value = formData.value[item.identifier!];
+      if (value) {
+        params[item.identifier!] = value;
+      }
+    });
+
+    if (Object.keys(params).length === 0) {
+      message.warning({ content: '请至少输入一个属性值' });
+      return;
+    }
+
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.PROPERTY_SET.method,
+      params,
+    });
+
+    message.success({ content: '属性设置成功' });
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    message.error({ content: '属性设置失败' });
+    console.error(error);
+  }
+}
+
+// 服务调用
+async function handleServiceInvoke(row: ThingModelData) {
+  try {
+    const valueStr = formData.value[row.identifier!];
+    let params: any = {};
+
+    if (valueStr) {
+      try {
+        params = JSON.parse(valueStr);
+      } catch {
+        message.error({ content: '服务参数格式错误，请输入有效的JSON格式' });
+        return;
+      }
+    }
+
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.SERVICE_INVOKE.method,
+      params: {
+        identifier: row.identifier,
+        params,
+      },
+    });
+
+    message.success({ content: '服务调用成功' });
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    message.error({ content: '服务调用失败' });
+    console.error(error);
+  }
+}
+</script>
+
+<template>
+  <ContentWrap>
+    <Row :gutter="16">
+      <!-- 左侧：指令调试区域 -->
+      <Col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
+        <Card class="simulator-tabs h-full">
+          <template #title>
+            <div class="flex items-center justify-between">
+              <span>指令调试</span>
+              <Button
+                size="small"
+                type="text"
+                @click="debugCollapsed = !debugCollapsed"
+              >
+                <IconifyIcon v-if="!debugCollapsed" icon="lucide:chevron-up" />
+                <IconifyIcon v-if="debugCollapsed" icon="lucide:chevron-down" />
+              </Button>
+            </div>
+          </template>
+          <div v-show="!debugCollapsed">
+            <Tabs v-model:active-key="activeTab" size="small">
+              <!-- 上行指令调试 -->
+              <Tabs.TabPane key="upstream" tab="上行指令调试">
+                <Tabs
+                  v-if="activeTab === 'upstream'"
+                  v-model:active-key="upstreamTab"
+                  size="small"
+                >
+                  <!-- 属性上报 -->
+                  <Tabs.TabPane
+                    :key="IotDeviceMessageMethodEnum.PROPERTY_POST.method"
+                    tab="属性上报"
+                  >
+                    <ContentWrap>
+                      <Table
+                        :columns="propertyColumns"
+                        :data-source="propertyList"
+                        :pagination="false"
+                        :scroll="{ x: 'max-content', y: 300 }"
+                        align="center"
+                        size="small"
+                      >
+                        <template #bodyCell="{ column, record }">
+                          <template v-if="column.key === 'dataType'">
+                            {{ record.property?.dataType ?? '-' }}
+                          </template>
+                          <template v-else-if="column.key === 'dataDefinition'">
+                            <DataDefinition :data="record" />
+                          </template>
+                          <template v-else-if="column.key === 'value'">
+                            <Input
+                              :value="getFormValue(record.identifier)"
+                              placeholder="输入值"
+                              size="small"
+                              @update:value="
+                                setFormValue(record.identifier, $event)
+                              "
+                            />
+                          </template>
+                        </template>
+                      </Table>
+                      <div class="mt-4 flex items-center justify-between">
+                        <span class="text-sm text-gray-600">
+                          设置属性值后，点击「发送属性上报」按钮
+                        </span>
+                        <Button type="primary" @click="handlePropertyPost">
+                          发送属性上报
+                        </Button>
+                      </div>
+                    </ContentWrap>
+                  </Tabs.TabPane>
+
+                  <!-- 事件上报 -->
+                  <Tabs.TabPane
+                    :key="IotDeviceMessageMethodEnum.EVENT_POST.method"
+                    tab="事件上报"
+                  >
+                    <ContentWrap>
+                      <Table
+                        :columns="eventColumns"
+                        :data-source="eventList"
+                        :pagination="false"
+                        :scroll="{ x: 'max-content', y: 300 }"
+                        align="center"
+                        size="small"
+                      >
+                        <template #bodyCell="{ column, record }">
+                          <template v-if="column.key === 'dataType'">
+                            {{ record.event?.dataType ?? '-' }}
+                          </template>
+                          <template v-else-if="column.key === 'dataDefinition'">
+                            <DataDefinition :data="record" />
+                          </template>
+                          <template v-else-if="column.key === 'value'">
+                            <Textarea
+                              :rows="3"
+                              :value="getFormValue(record.identifier)"
+                              placeholder="输入事件参数（JSON格式）"
+                              size="small"
+                              @update:value="
+                                setFormValue(record.identifier, $event)
+                              "
+                            />
+                          </template>
+                          <template v-else-if="column.key === 'action'">
+                            <Button
+                              size="small"
+                              type="primary"
+                              @click="handleEventPost(record)"
+                            >
+                              上报事件
+                            </Button>
+                          </template>
+                        </template>
+                      </Table>
+                    </ContentWrap>
+                  </Tabs.TabPane>
+
+                  <!-- 状态变更 -->
+                  <Tabs.TabPane
+                    :key="IotDeviceMessageMethodEnum.STATE_UPDATE.method"
+                    tab="状态变更"
+                  >
+                    <ContentWrap>
+                      <div class="flex gap-4">
+                        <Button
+                          type="primary"
+                          @click="handleDeviceState(DeviceStateEnum.ONLINE)"
+                        >
+                          设备上线
+                        </Button>
+                        <Button
+                          danger
+                          @click="handleDeviceState(DeviceStateEnum.OFFLINE)"
+                        >
+                          设备下线
+                        </Button>
+                      </div>
+                    </ContentWrap>
+                  </Tabs.TabPane>
+                </Tabs>
+              </Tabs.TabPane>
+
+              <!-- 下行指令调试 -->
+              <Tabs.TabPane key="downstream" tab="下行指令调试">
+                <Tabs
+                  v-if="activeTab === 'downstream'"
+                  v-model:active-key="downstreamTab"
+                  size="small"
+                >
+                  <!-- 属性调试 -->
+                  <Tabs.TabPane
+                    :key="IotDeviceMessageMethodEnum.PROPERTY_SET.method"
+                    tab="属性设置"
+                  >
+                    <ContentWrap>
+                      <Table
+                        :columns="propertyColumns"
+                        :data-source="propertyList"
+                        :pagination="false"
+                        :scroll="{ x: 'max-content', y: 300 }"
+                        align="center"
+                        size="small"
+                      >
+                        <template #bodyCell="{ column, record }">
+                          <template v-if="column.key === 'dataType'">
+                            {{ record.property?.dataType ?? '-' }}
+                          </template>
+                          <template v-else-if="column.key === 'dataDefinition'">
+                            <DataDefinition :data="record" />
+                          </template>
+                          <template v-else-if="column.key === 'value'">
+                            <Input
+                              :value="getFormValue(record.identifier)"
+                              placeholder="输入值"
+                              size="small"
+                              @update:value="
+                                setFormValue(record.identifier, $event)
+                              "
+                            />
+                          </template>
+                        </template>
+                      </Table>
+                      <div class="mt-4 flex items-center justify-between">
+                        <span class="text-sm text-gray-600">
+                          设置属性值后，点击「发送属性设置」按钮
+                        </span>
+                        <Button type="primary" @click="handlePropertySet">
+                          发送属性设置
+                        </Button>
+                      </div>
+                    </ContentWrap>
+                  </Tabs.TabPane>
+
+                  <!-- 服务调用 -->
+                  <Tabs.TabPane
+                    :key="IotDeviceMessageMethodEnum.SERVICE_INVOKE.method"
+                    tab="设备服务调用"
+                  >
+                    <ContentWrap>
+                      <Table
+                        :columns="serviceColumns"
+                        :data-source="serviceList"
+                        :pagination="false"
+                        :scroll="{ x: 'max-content', y: 300 }"
+                        align="center"
+                        size="small"
+                      >
+                        <template #bodyCell="{ column, record }">
+                          <template v-if="column.key === 'dataDefinition'">
+                            <DataDefinition :data="record" />
+                          </template>
+                          <template v-else-if="column.key === 'value'">
+                            <Textarea
+                              :rows="3"
+                              :value="getFormValue(record.identifier)"
+                              placeholder="输入服务参数（JSON格式）"
+                              size="small"
+                              @update:value="
+                                setFormValue(record.identifier, $event)
+                              "
+                            />
+                          </template>
+                          <template v-else-if="column.key === 'action'">
+                            <Button
+                              size="small"
+                              type="primary"
+                              @click="handleServiceInvoke(record)"
+                            >
+                              服务调用
+                            </Button>
+                          </template>
+                        </template>
+                      </Table>
+                    </ContentWrap>
+                  </Tabs.TabPane>
+                </Tabs>
+              </Tabs.TabPane>
+            </Tabs>
+          </div>
+        </Card>
+      </Col>
+
+      <!-- 右侧：设备消息区域 -->
+      <Col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
+        <Card class="h-full">
+          <template #title>
+            <div class="flex items-center justify-between">
+              <span>设备消息</span>
+              <Button
+                size="small"
+                type="text"
+                @click="messageCollapsed = !messageCollapsed"
+              >
+                <IconifyIcon
+                  v-if="!messageCollapsed"
+                  icon="lucide:chevron-down"
+                />
+                <IconifyIcon
+                  v-if="messageCollapsed"
+                  icon="lucide:chevron-down"
+                />
+              </Button>
+            </div>
+          </template>
+          <div v-show="!messageCollapsed">
+            <DeviceDetailsMessage
+              v-if="device.id"
+              ref="deviceMessageRef"
+              :device-id="device.id"
+            />
+          </div>
+        </Card>
+      </Col>
+    </Row>
+  </ContentWrap>
+</template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-sub-device.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/sub-device.vue
similarity index 95%
rename from apps/web-antd/src/views/iot/device/device/modules/detail/device-details-sub-device.vue
rename to apps/web-antd/src/views/iot/device/device/detail/modules/sub-device.vue
index 5345b4f37..eabab49f9 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-sub-device.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/sub-device.vue
@@ -3,6 +3,8 @@ import { onMounted, ref } from 'vue';
 
 import { Card, Empty } from 'ant-design-vue';
 
+// TODO @haohao：这里要实现一把么？
+
 interface Props {
   deviceId: number;
 }
@@ -35,8 +37,8 @@ onMounted(() => {
 <template>
   <Card :loading="loading" title="子设备管理">
     <Empty
-      description="暂无子设备数据，此功能待实现"
       :image="Empty.PRESENTED_IMAGE_SIMPLE"
+      description="暂无子设备数据，此功能待实现"
     />
     <!-- TODO: 实现子设备列表展示和管理功能 -->
   </Card>
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-event.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-event.vue
new file mode 100644
index 000000000..f17e38346
--- /dev/null
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-event.vue
@@ -0,0 +1,256 @@
+<!-- 设备事件管理 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ThingModelData } from '#/api/iot/thingmodel';
+
+import { computed, onMounted, reactive, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import { Button, RangePicker, Select, Space, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDeviceMessagePairPage } from '#/api/iot/device/device';
+import {
+  getEventTypeLabel,
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '#/views/iot/utils/constants';
+
+const props = defineProps<{
+  deviceId: number;
+  thingModelList: ThingModelData[];
+}>();
+
+/** 查询参数 */
+const queryParams = reactive({
+  identifier: '',
+  times: undefined as [string, string] | undefined,
+});
+
+/** 事件类型的物模型数据 */
+const eventThingModels = computed(() => {
+  return props.thingModelList.filter(
+    (item: ThingModelData) =>
+      String(item.type) === String(IoTThingModelTypeEnum.EVENT),
+  );
+});
+
+/** Grid 列定义 */
+function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'reportTime',
+      title: '上报时间',
+      width: 180,
+      slots: { default: 'reportTime' },
+    },
+    {
+      field: 'identifier',
+      title: '标识符',
+      width: 160,
+      slots: { default: 'identifier' },
+    },
+    {
+      field: 'eventName',
+      title: '事件名称',
+      width: 160,
+      slots: { default: 'eventName' },
+    },
+    {
+      field: 'eventType',
+      title: '事件类型',
+      width: 100,
+      slots: { default: 'eventType' },
+    },
+    {
+      field: 'params',
+      title: '输入参数',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+      slots: { default: 'params' },
+    },
+  ];
+}
+
+/** 创建 Grid 实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.deviceId) {
+            return { list: [], total: 0 };
+          }
+          return await getDeviceMessagePairPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            deviceId: props.deviceId,
+            method: IotDeviceMessageMethodEnum.EVENT_POST.method,
+            identifier: queryParams.identifier || undefined,
+            times: queryParams.times,
+          });
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: false,
+      search: false,
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  gridApi.query();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryParams.identifier = '';
+  queryParams.times = undefined;
+  handleQuery();
+}
+
+/** 获取事件名称 */
+function getEventName(identifier: string | undefined) {
+  if (!identifier) return '-';
+  const event = eventThingModels.value.find(
+    (item: ThingModelData) => item.identifier === identifier,
+  );
+  return event?.name || identifier;
+}
+
+/** 获取事件类型 */
+function getEventType(identifier: string | undefined) {
+  if (!identifier) return '-';
+  const event = eventThingModels.value.find(
+    (item: ThingModelData) => item.identifier === identifier,
+  );
+  if (!event?.event?.type) return '-';
+  return getEventTypeLabel(event.event.type) || '-';
+}
+
+/** 解析参数 */
+function parseParams(params: string) {
+  try {
+    const parsed = JSON.parse(params);
+    if (parsed.params) {
+      return parsed.params;
+    }
+    return parsed;
+  } catch {
+    return {};
+  }
+}
+
+/** 刷新列表 */
+function refresh(delay = 0) {
+  if (delay > 0) {
+    setTimeout(() => gridApi.query(), delay);
+  } else {
+    gridApi.query();
+  }
+}
+
+/** 监听设备标识变化 */
+watch(
+  () => props.deviceId,
+  (newValue) => {
+    if (newValue) {
+      handleQuery();
+    }
+  },
+);
+
+/** 初始化 */
+onMounted(() => {
+  if (props.deviceId) {
+    handleQuery();
+  }
+});
+
+/** 暴露方法给父组件 */
+defineExpose({
+  refresh,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 搜索区域 -->
+    <div class="mb-4 flex flex-wrap items-center gap-3">
+      <div class="flex items-center gap-2">
+        <span>标识符：</span>
+        <Select
+          v-model:value="queryParams.identifier"
+          allow-clear
+          placeholder="请选择事件标识符"
+          style="width: 240px"
+        >
+          <Select.Option
+            v-for="event in eventThingModels"
+            :key="event.identifier"
+            :value="event.identifier!"
+          >
+            {{ event.name }}({{ event.identifier }})
+          </Select.Option>
+        </Select>
+      </div>
+      <div class="flex items-center gap-2">
+        <span>时间范围：</span>
+        <RangePicker
+          v-model:value="queryParams.times"
+          format="YYYY-MM-DD HH:mm:ss"
+          show-time
+          style="width: 360px"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </div>
+      <Space>
+        <Button type="primary" @click="handleQuery">
+          <template #icon>
+            <IconifyIcon icon="ep:search" />
+          </template>
+          搜索
+        </Button>
+        <Button @click="resetQuery">
+          <template #icon>
+            <IconifyIcon icon="ep:refresh" />
+          </template>
+          重置
+        </Button>
+      </Space>
+    </div>
+
+    <!-- 事件列表 -->
+    <Grid>
+      <template #reportTime="{ row }">
+        {{
+          row.request?.reportTime ? formatDateTime(row.request.reportTime) : '-'
+        }}
+      </template>
+      <template #identifier="{ row }">
+        <Tag color="blue" size="small">
+          {{ row.request?.identifier }}
+        </Tag>
+      </template>
+      <template #eventName="{ row }">
+        {{ getEventName(row.request?.identifier) }}
+      </template>
+      <template #eventType="{ row }">
+        {{ getEventType(row.request?.identifier) }}
+      </template>
+      <template #params="{ row }">
+        {{ parseParams(row.request?.params) }}
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-property-history.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
similarity index 63%
rename from apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-property-history.vue
rename to apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
index 1b1be35db..1cb400c34 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-property-history.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
@@ -1,6 +1,5 @@
 <!-- 设备物模型 -> 运行状态 -> 查看数据（设备的属性值历史）-->
-// 重新关闭打开图表,图表不显示可能图例注销失败等大佬修复
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { Dayjs } from 'dayjs';
 
 import type { EchartsUIType } from '@vben/plugins/echarts';
@@ -11,14 +10,13 @@ import { computed, nextTick, reactive, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-import { beginOfDay, endOfDay, formatDate, formatDateTime } from '@vben/utils';
+import { formatDate, formatDateTime } from '@vben/utils';
 
 import {
   Button,
   Empty,
   message,
   Modal,
-  RangePicker,
   Space,
   Spin,
   Table,
@@ -27,6 +25,7 @@ import {
 import dayjs from 'dayjs';
 
 import { getHistoryDevicePropertyList } from '#/api/iot/device/device';
+import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
 import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
 
 /** IoT 设备属性历史数据详情 */
@@ -42,52 +41,70 @@ const list = ref<IotDeviceApi.DevicePropertyDetail[]>([]); // 列表的数据
 const total = ref(0); // 总数据量
 const thingModelDataType = ref<string>(''); // 物模型数据类型
 const propertyIdentifier = ref<string>(''); // 属性标识符
-const dateRange = ref<[Dayjs, Dayjs]>([
-  dayjs().subtract(7, 'day').startOf('day'),
-  dayjs().endOf('day'),
-]);
+
+const dateRange = ref<[string, string]>([
+  dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
+  dayjs().format('YYYY-MM-DD'),
+]); // 时间范围（仅日期，不包含时分秒）
 
 const queryParams = reactive({
   deviceId: -1,
   identifier: '',
-  times: [
-    formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
-    formatDateTime(endOfDay(new Date())),
-  ],
+  times: formatDateRangeWithTime(dateRange.value),
 });
 
 // Echarts 相关
 const chartRef = ref<EchartsUIType>();
 const { renderEcharts } = useEcharts(chartRef);
 
-// 判断是否为复杂数据类型（struct 或 array）
-const isComplexDataType = computed(() => {
+/** 不支持图表展示的数据类型列表 */
+const CHART_DISABLED_DATA_TYPES = [
+  IoTDataSpecsDataTypeEnum.ARRAY, // 数组
+  IoTDataSpecsDataTypeEnum.STRUCT, // 结构体
+  IoTDataSpecsDataTypeEnum.TEXT, // 文本型
+  IoTDataSpecsDataTypeEnum.BOOL, // 布尔型
+  IoTDataSpecsDataTypeEnum.ENUM, // 枚举型
+  IoTDataSpecsDataTypeEnum.DATE, // 时间型
+] as const;
+
+/** 判断是否支持图表展示（仅数值类型支持：int、float、double） */
+const canShowChart = computed(() => {
   if (!thingModelDataType.value) return false;
-  return [
-    IoTDataSpecsDataTypeEnum.ARRAY,
-    IoTDataSpecsDataTypeEnum.STRUCT,
-  ].includes(thingModelDataType.value as any);
+  return !CHART_DISABLED_DATA_TYPES.includes(
+    thingModelDataType.value as (typeof CHART_DISABLED_DATA_TYPES)[number],
+  );
 });
 
-// 统计数据
+/** 判断是否为复杂数据类型（用于格式化显示） */
+const isComplexDataType = computed(() => {
+  if (!thingModelDataType.value) return false;
+  return (
+    thingModelDataType.value === IoTDataSpecsDataTypeEnum.ARRAY ||
+    thingModelDataType.value === IoTDataSpecsDataTypeEnum.STRUCT
+  );
+});
+
+/** 最大值统计 */
 const maxValue = computed(() => {
-  if (isComplexDataType.value || list.value.length === 0) return '-';
+  if (!canShowChart.value || list.value.length === 0) return '-';
   const values = list.value
     .map((item) => Number(item.value))
     .filter((v) => !Number.isNaN(v));
   return values.length > 0 ? Math.max(...values).toFixed(2) : '-';
 });
 
+/** 最小值统计 */
 const minValue = computed(() => {
-  if (isComplexDataType.value || list.value.length === 0) return '-';
+  if (!canShowChart.value || list.value.length === 0) return '-';
   const values = list.value
     .map((item) => Number(item.value))
     .filter((v) => !Number.isNaN(v));
   return values.length > 0 ? Math.min(...values).toFixed(2) : '-';
 });
 
+/** 平均值统计 */
 const avgValue = computed(() => {
-  if (isComplexDataType.value || list.value.length === 0) return '-';
+  if (!canShowChart.value || list.value.length === 0) return '-';
   const values = list.value
     .map((item) => Number(item.value))
     .filter((v) => !Number.isNaN(v));
@@ -96,7 +113,11 @@ const avgValue = computed(() => {
   return (sum / values.length).toFixed(2);
 });
 
-// 表格列配置
+/** 将日期范围转换为带时分秒的格式 */
+function formatDateRangeWithTime(dates: [string, string]): [string, string] {
+  return [`${dates[0]} 00:00:00`, `${dates[1]} 23:59:59`];
+}
+
 const tableColumns = computed(() => [
   {
     title: '序号',
@@ -118,9 +139,8 @@ const tableColumns = computed(() => [
     dataIndex: 'value',
     align: 'center' as const,
   },
-]);
+]); // 表格列配置
 
-// 分页配置
 const paginationConfig = computed(() => ({
   current: 1,
   pageSize: 10,
@@ -129,7 +149,7 @@ const paginationConfig = computed(() => ({
   showQuickJumper: true,
   pageSizeOptions: ['10', '20', '50', '100'],
   showTotal: (total: number) => `共 ${total} 条数据`,
-}));
+})); // 分页配置
 
 /** 获得设备历史数据 */
 async function getList() {
@@ -142,16 +162,13 @@ async function getList() {
     ) as IotDeviceApi.DevicePropertyDetail[];
     total.value = list.value.length;
 
-    // 如果是图表模式且不是复杂数据类型，渲染图表
+    // 如果是图表模式且支持图表展示，等待渲染图表
     if (
       viewMode.value === 'chart' &&
-      !isComplexDataType.value &&
+      canShowChart.value &&
       list.value.length > 0
     ) {
-      // 等待 DOM 更新完成后再渲染图表
-      await nextTick();
-      await nextTick(); // 双重 nextTick 确保 DOM 完全准备好
-      renderChart();
+      await renderChartWhenReady();
     }
   } catch {
     message.error('获取数据失败');
@@ -162,126 +179,115 @@ async function getList() {
   }
 }
 
+/** 确保图表容器已经可见后再渲染 */
+async function renderChartWhenReady() {
+  if (!list.value || list.value.length === 0) {
+    return;
+  }
+  // 等待 Modal、Card loading 状态、v-show 等 DOM 更新完成
+  await nextTick();
+  await nextTick();
+  renderChart();
+}
+
 /** 渲染图表 */
 function renderChart() {
   if (!list.value || list.value.length === 0) {
     return;
   }
 
-  const chartData = list.value.map((item) => [item.updateTime, item.value]);
+  const times = list.value.map((item) =>
+    formatDate(new Date(item.updateTime), 'YYYY-MM-DD HH:mm:ss'),
+  );
+  const values = list.value.map((item) => Number(item.value));
 
-  // 使用 setTimeout 延迟渲染，避免 ECharts 主进程冲突
-  setTimeout(() => {
-    // 检查 chartRef 是否存在且已挂载
-    if (!chartRef.value || !chartRef.value.$el) {
-      return;
-    }
-
-    renderEcharts({
-      title: {
-        text: '属性值趋势',
-        left: 'center',
-        textStyle: {
-          fontSize: 16,
-          fontWeight: 'normal',
-        },
+  renderEcharts({
+    title: {
+      text: '属性值趋势',
+      left: 'center',
+      textStyle: {
+        fontSize: 16,
+        fontWeight: 'normal',
       },
-      grid: {
-        left: 60,
-        right: 60,
-        bottom: 100,
-        top: 80,
-        containLabel: true,
+    },
+    grid: {
+      left: 60,
+      right: 60,
+      bottom: 100,
+      top: 80,
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
       },
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'cross',
-        },
-        formatter: (params: any) => {
-          const param = params[0];
-          return `
-          <div style="padding: 8px;">
-            <div style="margin-bottom: 4px; font-weight: bold;">
-              ${formatDate(new Date(param.value[0]), 'YYYY-MM-DD HH:mm:ss')}
-            </div>
-            <div>
-              <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${param.color};"></span>
-              <span>属性值: <strong>${param.value[1]}</strong></span>
-            </div>
-          </div>
-        `;
-        },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      name: '时间',
+      nameTextStyle: {
+        padding: [10, 0, 0, 0],
       },
-      xAxis: {
-        type: 'time',
-        name: '时间',
-        nameTextStyle: {
-          padding: [10, 0, 0, 0],
-        },
-        axisLabel: {
-          formatter: (value: number) => {
-            return String(formatDate(new Date(value), 'MM-DD HH:mm') || '');
-          },
-        },
+      data: times,
+    },
+    yAxis: {
+      type: 'value',
+      name: '属性值',
+      nameTextStyle: {
+        padding: [0, 0, 10, 0],
       },
-      yAxis: {
-        type: 'value',
+    },
+    series: [
+      {
         name: '属性值',
-        nameTextStyle: {
-          padding: [0, 0, 10, 0],
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: {
+          width: 2,
+          color: '#1890FF',
         },
+        itemStyle: {
+          color: '#1890FF',
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(24, 144, 255, 0.3)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(24, 144, 255, 0.05)',
+              },
+            ],
+          },
+        },
+        data: values,
       },
-      series: [
-        {
-          name: '属性值',
-          type: 'line',
-          smooth: true,
-          symbol: 'circle',
-          symbolSize: 6,
-          lineStyle: {
-            width: 2,
-            color: '#1890FF',
-          },
-          itemStyle: {
-            color: '#1890FF',
-          },
-          areaStyle: {
-            color: {
-              type: 'linear',
-              x: 0,
-              y: 0,
-              x2: 0,
-              y2: 1,
-              colorStops: [
-                {
-                  offset: 0,
-                  color: 'rgba(24, 144, 255, 0.3)',
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(24, 144, 255, 0.05)',
-                },
-              ],
-            },
-          },
-          data: chartData,
-        },
-      ],
-      dataZoom: [
-        {
-          type: 'inside',
-          start: 0,
-          end: 100,
-        },
-        {
-          type: 'slider',
-          height: 30,
-          bottom: 20,
-        },
-      ],
-    });
-  }, 300); // 延迟300ms渲染，确保 DOM 完全准备好
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 100,
+      },
+      {
+        type: 'slider',
+        height: 30,
+        bottom: 20,
+      },
+    ],
+  });
 }
 
 /** 打开弹窗 */
@@ -294,42 +300,33 @@ async function open(deviceId: number, identifier: string, dataType: string) {
 
   // 重置时间范围为最近7天
   dateRange.value = [
-    dayjs().subtract(7, 'day').startOf('day'),
-    dayjs().endOf('day'),
+    dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
+    dayjs().format('YYYY-MM-DD'),
   ];
 
   // 更新查询参数的时间
-  queryParams.times = [
-    formatDateTime(dateRange.value[0].toDate()),
-    formatDateTime(dateRange.value[1].toDate()),
-  ];
+  queryParams.times = formatDateRangeWithTime(dateRange.value);
 
-  // 如果物模型是 struct、array，需要默认使用 list 模式
-  viewMode.value = isComplexDataType.value ? 'list' : 'chart';
+  // 如果不支持图表展示，默认使用列表模式
+  viewMode.value = canShowChart.value ? 'chart' : 'list';
 
   // 等待弹窗完全渲染后再获取数据
   await nextTick();
+  await nextTick(); // 双重 nextTick 确保 Modal 完全渲染
   await getList();
-
-  // 如果是图表模式，延迟渲染图表
-  if (viewMode.value === 'chart' && !isComplexDataType.value) {
-    setTimeout(() => {
-      renderChart();
-    }, 500);
-  }
 }
 
-/** 时间变化处理 */
-function handleTimeChange() {
-  if (!dateRange.value || dateRange.value.length !== 2) {
+/** 处理时间范围变化 */
+function handleDateRangeChange(times?: [Dayjs, Dayjs]) {
+  if (!times || times.length !== 2) {
     return;
   }
-
-  queryParams.times = [
-    formatDateTime(dateRange.value[0].toDate()),
-    formatDateTime(dateRange.value[1].toDate()),
+  dateRange.value = [
+    dayjs(times[0]).format('YYYY-MM-DD'),
+    dayjs(times[1]).format('YYYY-MM-DD'),
   ];
-
+  // 将选择的日期转换为带时分秒的格式（开始日期 00:00:00，结束日期 23:59:59）
+  queryParams.times = formatDateRangeWithTime(dateRange.value);
   getList();
 }
 
@@ -403,19 +400,8 @@ function formatComplexValue(value: any) {
 
 /** 监听视图模式变化，重新渲染图表 */
 watch(viewMode, async (newMode) => {
-  if (
-    newMode === 'chart' &&
-    !isComplexDataType.value &&
-    list.value.length > 0
-  ) {
-    // 等待 DOM 显示完成
-    await nextTick();
-    await nextTick();
-
-    // 延迟渲染图表
-    setTimeout(() => {
-      renderChart();
-    }, 300);
+  if (newMode === 'chart' && canShowChart.value && list.value.length > 0) {
+    await renderChartWhenReady();
   }
 });
 
@@ -426,7 +412,6 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
     v-model:open="dialogVisible"
     title="查看数据"
     width="1200px"
-    :destroy-on-close="true"
     @cancel="handleClose"
   >
     <div class="property-history-container">
@@ -434,17 +419,15 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
       <div class="toolbar-wrapper mb-4">
         <Space :size="12" class="w-full" wrap>
           <!-- 时间选择 -->
-          <RangePicker
-            v-model:value="dateRange"
-            :show-time="{ format: 'HH:mm:ss' }"
-            format="YYYY-MM-DD HH:mm:ss"
-            :placeholder="['开始时间', '结束时间']"
-            class="!w-[400px]"
-            @change="handleTimeChange"
-          />
+          <div class="flex items-center gap-3">
+            <span class="whitespace-nowrap text-sm text-gray-500">
+              时间范围
+            </span>
+            <ShortcutDateRangePicker @change="handleDateRangeChange" />
+          </div>
 
           <!-- 刷新按钮 -->
-          <Button @click="handleRefresh" :loading="loading">
+          <Button :loading="loading" @click="handleRefresh">
             <template #icon>
               <IconifyIcon icon="ant-design:reload-outlined" />
             </template>
@@ -453,9 +436,9 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
 
           <!-- 导出按钮 -->
           <Button
-            @click="handleExport"
-            :loading="exporting"
             :disabled="list.length === 0"
+            :loading="exporting"
+            @click="handleExport"
           >
             <template #icon>
               <IconifyIcon icon="ant-design:export-outlined" />
@@ -466,9 +449,9 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
           <!-- 视图切换 -->
           <Button.Group class="ml-auto">
             <Button
+              :disabled="!canShowChart"
               :type="viewMode === 'chart' ? 'primary' : 'default'"
               @click="viewMode = 'chart'"
-              :disabled="isComplexDataType"
             >
               <template #icon>
                 <IconifyIcon icon="ant-design:line-chart-outlined" />
@@ -491,7 +474,7 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
         <div v-if="list.length > 0" class="mt-3 text-sm text-gray-600">
           <Space :size="16">
             <span>共 {{ total }} 条数据</span>
-            <span v-if="viewMode === 'chart' && !isComplexDataType">
+            <span v-if="viewMode === 'chart' && canShowChart">
               最大值: {{ maxValue }} | 最小值: {{ minValue }} | 平均值:
               {{ avgValue }}
             </span>
@@ -500,16 +483,16 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
       </div>
 
       <!-- 数据展示区域 -->
-      <Spin :spinning="loading" :delay="200">
-        <!-- 图表模式 -->
+      <Spin :delay="200" :spinning="loading">
+        <!-- 图表模式 - 使用 v-show 确保图表组件始终挂载 -->
         <div v-show="viewMode === 'chart'" class="chart-container">
           <Empty
             v-if="list.length === 0"
             :image="Empty.PRESENTED_IMAGE_SIMPLE"
-            description="暂无数据"
             class="py-20"
+            :description="$t('common.noData')"
           />
-          <div v-else>
+          <div v-show="list.length > 0">
             <EchartsUI ref="chartRef" height="500px" />
           </div>
         </div>
@@ -517,8 +500,8 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
         <!-- 表格模式 -->
         <div v-show="viewMode === 'list'" class="table-container">
           <Table
-            :data-source="list"
             :columns="tableColumns"
+            :data-source="list"
             :pagination="paginationConfig"
             :scroll="{ y: 500 }"
             row-key="updateTime"
@@ -546,7 +529,7 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
   </Modal>
 </template>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .property-history-container {
   max-height: 70vh;
   overflow: auto;
@@ -561,7 +544,7 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
   .chart-container,
   .table-container {
     padding: 16px;
-    background-color: hsl(var(--card));
+    background-color: hsl(var(--card) / 100%);
     border: 1px solid hsl(var(--border) / 60%);
     border-radius: 8px;
   }
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-property.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property.vue
similarity index 53%
rename from apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-property.vue
rename to apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property.vue
index 10be53896..b01765cff 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-property.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property.vue
@@ -1,12 +1,20 @@
 <!-- 设备属性管理 -->
-<script setup lang="ts">
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotDeviceApi } from '#/api/iot/device/device';
 
-import { onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
 
-import { ContentWrap } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
-import { formatDate } from '@vben/utils';
+import { formatDateTime } from '@vben/utils';
 
 import {
   Button,
@@ -16,13 +24,13 @@ import {
   Input,
   Row,
   Switch,
-  Table,
   Tag,
 } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getLatestDeviceProperties } from '#/api/iot/device/device';
 
-import DeviceDetailsThingModelPropertyHistory from './device-details-thing-model-property-history.vue';
+import DeviceDetailsThingModelPropertyHistory from './thing-model-property-history.vue';
 
 const props = defineProps<{ deviceId: number }>();
 
@@ -31,22 +39,146 @@ const list = ref<IotDeviceApi.DevicePropertyDetail[]>([]); // 显示的列表数
 const filterList = ref<IotDeviceApi.DevicePropertyDetail[]>([]); // 完整的数据列表
 const queryParams = reactive({
   keyword: '' as string,
-});
+}); // 查询参数
 const autoRefresh = ref(false); // 自动刷新开关
 let autoRefreshTimer: any = null; // 定时器
 const viewMode = ref<'card' | 'list'>('card'); // 视图模式状态
 
+/** Grid 列定义 */
+function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'identifier',
+      title: '属性标识符',
+    },
+    {
+      field: 'name',
+      title: '属性名称',
+    },
+    {
+      field: 'dataType',
+      title: '数据类型',
+    },
+    {
+      field: 'value',
+      title: '属性值',
+      slots: { default: 'value' },
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      width: 180,
+      slots: { default: 'updateTime' },
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 创建 Grid 实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    rowConfig: {
+      keyField: 'identifier',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          if (!props.deviceId) {
+            return { list: [], total: 0 };
+          }
+          const data = await getLatestDeviceProperties({
+            deviceId: props.deviceId,
+            identifier: undefined,
+            name: undefined,
+          });
+          // 筛选数据
+          let filteredData = data;
+          if (queryParams.keyword.trim()) {
+            const keyword = queryParams.keyword.toLowerCase();
+            filteredData = data.filter(
+              (item: IotDeviceApi.DevicePropertyDetail) =>
+                item.identifier?.toLowerCase().includes(keyword) ||
+                item.name?.toLowerCase().includes(keyword),
+            );
+          }
+          // 更新本地列表用于卡片视图
+          filterList.value = data;
+          list.value = filteredData;
+          return {
+            list: filteredData,
+            total: filteredData.length,
+          };
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: false,
+      search: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<IotDeviceApi.DevicePropertyDetail>,
+});
+
+// 包装 gridApi.query() 方法，统一列表视图和卡片视图的查询接口
+gridApi.query = async () => {
+  if (viewMode.value === 'list') {
+    // 列表视图：手动获取数据并加载到 Grid
+    if (!props.deviceId) {
+      return;
+    }
+    const data = await getLatestDeviceProperties({
+      deviceId: props.deviceId,
+      identifier: undefined,
+      name: undefined,
+    });
+    const dataArray = Array.isArray(data) ? data : [];
+    let filteredData = dataArray;
+    if (queryParams.keyword.trim()) {
+      const keyword = queryParams.keyword.toLowerCase();
+      filteredData = dataArray.filter(
+        (item: IotDeviceApi.DevicePropertyDetail) =>
+          item.identifier?.toLowerCase().includes(keyword) ||
+          item.name?.toLowerCase().includes(keyword),
+      );
+    }
+    filterList.value = dataArray;
+    list.value = filteredData;
+    // 直接加载数据到 Grid
+    if (gridApi.grid) {
+      gridApi.grid.loadData(filteredData);
+    }
+  } else {
+    // 卡片视图：调用 getList 方法
+    await getList();
+  }
+};
+
 /** 查询列表 */
 async function getList() {
   loading.value = true;
   try {
-    const params = {
-      deviceId: props.deviceId,
-      identifier: undefined as string | undefined,
-      name: undefined as string | undefined,
-    };
-    filterList.value = await getLatestDeviceProperties(params);
-    handleFilter();
+    if (viewMode.value === 'list') {
+      await gridApi.query();
+    } else {
+      // 卡片视图：手动获取数据
+      const params = {
+        deviceId: props.deviceId,
+        identifier: undefined as string | undefined,
+        name: undefined as string | undefined,
+      };
+      filterList.value = await getLatestDeviceProperties(params);
+      handleFilter();
+    }
   } finally {
     loading.value = false;
   }
@@ -68,7 +200,21 @@ function handleFilter() {
 
 /** 搜索按钮操作 */
 function handleQuery() {
-  handleFilter();
+  if (viewMode.value === 'list') {
+    gridApi.query();
+  } else {
+    handleFilter();
+  }
+}
+
+/** 视图切换 */
+async function handleViewModeChange(mode: 'card' | 'list') {
+  if (viewMode.value === mode) {
+    return;
+  }
+  viewMode.value = mode;
+  await nextTick();
+  gridApi.query();
 }
 
 /** 历史操作 */
@@ -90,56 +236,70 @@ function formatValueWithUnit(item: IotDeviceApi.DevicePropertyDetail) {
 watch(autoRefresh, (newValue) => {
   if (newValue) {
     autoRefreshTimer = setInterval(() => {
-      getList();
-    }, 5000); // 每 5 秒刷新一次
+      gridApi.query();
+    }, 5000);
   } else {
     clearInterval(autoRefreshTimer);
     autoRefreshTimer = null;
   }
 });
 
+/** 监听设备标识变化 */
+watch(
+  () => props.deviceId,
+  (newValue) => {
+    if (newValue) {
+      gridApi.query();
+    }
+  },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  if (props.deviceId) {
+    await nextTick();
+    gridApi.query();
+  }
+});
+
 /** 组件卸载时清除定时器 */
 onBeforeUnmount(() => {
   if (autoRefreshTimer) {
     clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
   }
 });
-
-/** 初始化 */
-onMounted(() => {
-  getList();
-});
 </script>
 
 <template>
-  <ContentWrap>
+  <Page auto-content-height>
     <!-- 搜索工作栏 -->
     <div class="flex items-center justify-between" style="margin-bottom: 16px">
       <div class="flex items-center" style="gap: 16px">
         <Input
           v-model:value="queryParams.keyword"
-          placeholder="请输入属性名称、标识符"
           allow-clear
+          placeholder="请输入属性名称、标识符"
           style="width: 240px"
           @press-enter="handleQuery"
         />
         <Switch
           v-model:checked="autoRefresh"
-          class="ml-20px"
           checked-children="定时刷新"
+          class="ml-20px"
           un-checked-children="定时刷新"
         />
       </div>
       <Button.Group>
         <Button
           :type="viewMode === 'card' ? 'primary' : 'default'"
-          @click="viewMode = 'card'"
+          @click="handleViewModeChange('card')"
         >
           <IconifyIcon icon="ep:grid" />
         </Button>
         <Button
           :type="viewMode === 'list' ? 'primary' : 'default'"
-          @click="viewMode = 'list'"
+          @click="handleViewModeChange('list')"
         >
           <IconifyIcon icon="ep:list" />
         </Button>
@@ -151,19 +311,19 @@ onMounted(() => {
 
     <!-- 卡片视图 -->
     <template v-if="viewMode === 'card'">
-      <Row :gutter="16" v-loading="loading">
+      <Row v-loading="loading" :gutter="16">
         <Col
           v-for="item in list"
           :key="item.identifier"
-          :xs="24"
-          :sm="12"
-          :md="12"
           :lg="6"
+          :md="12"
+          :sm="12"
+          :xs="24"
           class="mb-4"
         >
           <Card
-            class="relative h-full overflow-hidden transition-colors"
             :body-style="{ padding: '0' }"
+            class="relative h-full overflow-hidden transition-colors"
           >
             <!-- 添加渐变背景层 -->
             <div
@@ -173,12 +333,12 @@ onMounted(() => {
               <!-- 标题区域 -->
               <div class="mb-3 flex items-center">
                 <div class="mr-2.5 flex items-center">
-                  <IconifyIcon icon="ep:cpu" class="text-lg text-primary" />
+                  <IconifyIcon class="text-lg text-primary" icon="ep:cpu" />
                 </div>
                 <div class="flex-1 text-base font-bold">{{ item.name }}</div>
                 <!-- 标识符 -->
                 <div class="mr-2 inline-flex items-center">
-                  <Tag size="small" color="blue">
+                  <Tag color="blue" size="small">
                     {{ item.identifier }}
                   </Tag>
                 </div>
@@ -196,8 +356,8 @@ onMounted(() => {
                   "
                 >
                   <IconifyIcon
-                    icon="ep:data-line"
                     class="text-lg text-primary"
+                    icon="ep:data-line"
                   />
                 </div>
               </div>
@@ -213,7 +373,9 @@ onMounted(() => {
                 <div class="mb-2.5 last:mb-0">
                   <span class="mr-2.5 text-muted-foreground">更新时间</span>
                   <span class="text-sm text-foreground">
-                    {{ item.updateTime ? formatDate(item.updateTime) : '-' }}
+                    {{
+                      item.updateTime ? formatDateTime(item.updateTime) : '-'
+                    }}
                   </span>
                 </div>
               </div>
@@ -224,45 +386,29 @@ onMounted(() => {
     </template>
 
     <!-- 列表视图 -->
-    <Table v-else v-loading="loading" :data-source="list" :pagination="false">
-      <Table.Column title="属性标识符" align="center" data-index="identifier" />
-      <Table.Column title="属性名称" align="center" data-index="name" />
-      <Table.Column title="数据类型" align="center" data-index="dataType" />
-      <Table.Column title="属性值" align="center" data-index="value">
-        <template #default="{ record }">
-          {{ formatValueWithUnit(record) }}
-        </template>
-      </Table.Column>
-      <Table.Column
-        title="更新时间"
-        align="center"
-        data-index="updateTime"
-        :width="180"
-      >
-        <template #default="{ record }">
-          {{ record.updateTime ? formatDate(record.updateTime) : '-' }}
-        </template>
-      </Table.Column>
-      <Table.Column title="操作" align="center">
-        <template #default="{ record }">
-          <Button
-            type="link"
-            @click="
-              openHistory(props.deviceId, record.identifier, record.dataType)
-            "
-          >
-            查看数据
-          </Button>
-        </template>
-      </Table.Column>
-    </Table>
+    <Grid v-show="viewMode === 'list'">
+      <template #value="{ row }">
+        {{ formatValueWithUnit(row) }}
+      </template>
+      <template #updateTime="{ row }">
+        {{ row.updateTime ? formatDateTime(row.updateTime) : '-' }}
+      </template>
+      <template #actions="{ row }">
+        <Button
+          type="link"
+          @click="openHistory(props.deviceId, row.identifier, row.dataType)"
+        >
+          查看数据
+        </Button>
+      </template>
+    </Grid>
 
     <!-- 表单弹窗：添加/修改 -->
     <DeviceDetailsThingModelPropertyHistory
       ref="historyRef"
       :device-id="props.deviceId"
     />
-  </ContentWrap>
+  </Page>
 </template>
 <style scoped>
 /* 移除 a-row 的额外边距 */
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-service.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-service.vue
new file mode 100644
index 000000000..fc9d9269b
--- /dev/null
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-service.vue
@@ -0,0 +1,281 @@
+<!-- 设备服务调用 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ThingModelData } from '#/api/iot/thingmodel';
+
+import { computed, onMounted, reactive, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import { Button, RangePicker, Select, Space, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDeviceMessagePairPage } from '#/api/iot/device/device';
+import {
+  getThingModelServiceCallTypeLabel,
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '#/views/iot/utils/constants';
+
+const props = defineProps<{
+  deviceId: number;
+  thingModelList: ThingModelData[];
+}>();
+
+/** 查询参数 */
+const queryParams = reactive({
+  identifier: '',
+  times: undefined as [string, string] | undefined,
+});
+
+/** 服务类型的物模型数据 */
+const serviceThingModels = computed(() => {
+  return props.thingModelList.filter(
+    (item: ThingModelData) =>
+      String(item.type) === String(IoTThingModelTypeEnum.SERVICE),
+  );
+});
+
+/** Grid 列定义 */
+function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'requestTime',
+      title: '调用时间',
+      width: 180,
+      slots: { default: 'requestTime' },
+    },
+    {
+      field: 'responseTime',
+      title: '响应时间',
+      width: 180,
+      slots: { default: 'responseTime' },
+    },
+    {
+      field: 'identifier',
+      title: '标识符',
+      width: 160,
+      slots: { default: 'identifier' },
+    },
+    {
+      field: 'serviceName',
+      title: '服务名称',
+      width: 160,
+      slots: { default: 'serviceName' },
+    },
+    {
+      field: 'callType',
+      title: '调用方式',
+      width: 100,
+      slots: { default: 'callType' },
+    },
+    {
+      field: 'inputParams',
+      title: '输入参数',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+      slots: { default: 'inputParams' },
+    },
+    {
+      field: 'outputParams',
+      title: '输出参数',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+      slots: { default: 'outputParams' },
+    },
+  ];
+}
+
+/** 创建 Grid 实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.deviceId) {
+            return { list: [], total: 0 };
+          }
+          return await getDeviceMessagePairPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            deviceId: props.deviceId,
+            method: IotDeviceMessageMethodEnum.SERVICE_INVOKE.method,
+            identifier: queryParams.identifier || undefined,
+            times: queryParams.times,
+          });
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: false,
+      search: false,
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  gridApi.query();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryParams.identifier = '';
+  queryParams.times = undefined;
+  handleQuery();
+}
+
+/** 获取服务名称 */
+function getServiceName(identifier: string | undefined) {
+  if (!identifier) return '-';
+  const service = serviceThingModels.value.find(
+    (item: ThingModelData) => item.identifier === identifier,
+  );
+  return service?.name || identifier;
+}
+
+/** 获取调用方式 */
+function getCallType(identifier: string | undefined) {
+  if (!identifier) return '-';
+  const service = serviceThingModels.value.find(
+    (item: ThingModelData) => item.identifier === identifier,
+  );
+  if (!service?.service?.callType) return '-';
+  return getThingModelServiceCallTypeLabel(service.service.callType) || '-';
+}
+
+/** 解析参数 */
+function parseParams(params: string) {
+  if (!params) return '-';
+  try {
+    const parsed = JSON.parse(params);
+    if (parsed.params) {
+      return JSON.stringify(parsed.params, null, 2);
+    }
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return params;
+  }
+}
+
+/** 刷新列表 */
+function refresh(delay = 0) {
+  if (delay > 0) {
+    setTimeout(() => gridApi.query(), delay);
+  } else {
+    gridApi.query();
+  }
+}
+
+/** 监听设备标识变化 */
+watch(
+  () => props.deviceId,
+  (newValue) => {
+    if (newValue) {
+      handleQuery();
+    }
+  },
+);
+
+/** 初始化 */
+onMounted(() => {
+  if (props.deviceId) {
+    handleQuery();
+  }
+});
+
+/** 暴露方法给父组件 */
+defineExpose({
+  refresh,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 搜索区域 -->
+    <div class="mb-4 flex flex-wrap items-center gap-3">
+      <div class="flex items-center gap-2">
+        <span>标识符：</span>
+        <Select
+          v-model:value="queryParams.identifier"
+          allow-clear
+          placeholder="请选择服务标识符"
+          style="width: 240px"
+        >
+          <Select.Option
+            v-for="service in serviceThingModels"
+            :key="service.identifier"
+            :value="service.identifier!"
+          >
+            {{ service.name }}({{ service.identifier }})
+          </Select.Option>
+        </Select>
+      </div>
+      <div class="flex items-center gap-2">
+        <span>时间范围：</span>
+        <RangePicker
+          v-model:value="queryParams.times"
+          format="YYYY-MM-DD HH:mm:ss"
+          show-time
+          style="width: 360px"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </div>
+      <Space>
+        <Button type="primary" @click="handleQuery">
+          <template #icon>
+            <IconifyIcon icon="ep:search" />
+          </template>
+          搜索
+        </Button>
+        <Button @click="resetQuery">
+          <template #icon>
+            <IconifyIcon icon="ep:refresh" />
+          </template>
+          重置
+        </Button>
+      </Space>
+    </div>
+
+    <!-- 服务调用列表 -->
+    <Grid>
+      <template #requestTime="{ row }">
+        {{
+          row.request?.reportTime ? formatDateTime(row.request.reportTime) : '-'
+        }}
+      </template>
+      <template #responseTime="{ row }">
+        {{ row.reply?.reportTime ? formatDateTime(row.reply.reportTime) : '-' }}
+      </template>
+      <template #identifier="{ row }">
+        <Tag color="blue" size="small">
+          {{ row.request?.identifier }}
+        </Tag>
+      </template>
+      <template #serviceName="{ row }">
+        {{ getServiceName(row.request?.identifier) }}
+      </template>
+      <template #callType="{ row }">
+        {{ getCallType(row.request?.identifier) }}
+      </template>
+      <template #inputParams="{ row }">
+        {{ parseParams(row.request?.params) }}
+      </template>
+      <template #outputParams="{ row }">
+        <span v-if="row.reply">
+          {{
+            `{"code":${row.reply.code},"msg":"${row.reply.msg}","data":${row.reply.data}\}`
+          }}
+        </span>
+        <span v-else>-</span>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model.vue
similarity index 81%
rename from apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model.vue
rename to apps/web-antd/src/views/iot/device/device/detail/modules/thing-model.vue
index 005e6102f..3862c6620 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model.vue
@@ -1,5 +1,5 @@
 <!-- 设备物模型：设备属性、事件管理、服务调用 -->
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { ThingModelData } from '#/api/iot/thingmodel';
 
 import { ref } from 'vue';
@@ -8,9 +8,9 @@ import { ContentWrap } from '@vben/common-ui';
 
 import { Tabs } from 'ant-design-vue';
 
-import DeviceDetailsThingModelEvent from './device-details-thing-model-event.vue';
-import DeviceDetailsThingModelProperty from './device-details-thing-model-property.vue';
-import DeviceDetailsThingModelService from './device-details-thing-model-service.vue';
+import DeviceDetailsThingModelEvent from './thing-model-event.vue';
+import DeviceDetailsThingModelProperty from './thing-model-property.vue';
+import DeviceDetailsThingModelService from './thing-model-service.vue';
 
 const props = defineProps<{
   deviceId: number;
diff --git a/apps/web-antd/src/views/iot/device/device/index.vue b/apps/web-antd/src/views/iot/device/device/index.vue
index 83c391aa4..56a3ebf45 100644
--- a/apps/web-antd/src/views/iot/device/device/index.vue
+++ b/apps/web-antd/src/views/iot/device/device/index.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotDeviceApi } from '#/api/iot/device/device';
+import type { IotDeviceGroupApi } from '#/api/iot/device/group';
+import type { IotProductApi } from '#/api/iot/product/product';
 
-import { onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
-import { downloadFileFromBlobPart } from '@vben/utils';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
 import {
   Button,
@@ -32,23 +35,22 @@ import { getSimpleProductList } from '#/api/iot/product/product';
 import { $t } from '#/locales';
 
 import { useGridColumns } from './data';
-import DeviceCardView from './modules/device-card-view.vue';
-import DeviceForm from './modules/device-form.vue';
-import DeviceGroupForm from './modules/device-group-form.vue';
-import DeviceImportForm from './modules/device-import-form.vue';
+import DeviceCardView from './modules/card-view.vue';
+import DeviceForm from './modules/form.vue';
+import DeviceGroupForm from './modules/group-form.vue';
+import DeviceImportForm from './modules/import-form.vue';
 
 /** IoT 设备列表 */
 defineOptions({ name: 'IoTDevice' });
 
 const route = useRoute();
 const router = useRouter();
-const products = ref<any[]>([]);
-const deviceGroups = ref<any[]>([]);
+const products = ref<IotProductApi.Product[]>([]);
+const deviceGroups = ref<IotDeviceGroupApi.DeviceGroup[]>([]);
 const viewMode = ref<'card' | 'list'>('card');
 const cardViewRef = ref();
+const checkedIds = ref<number[]>([]);
 
-// Modal instances
-// TODO @haohao：这个界面，等 product 改完，在一起看看怎么弄更好。
 const [DeviceFormModal, deviceFormModalApi] = useVbenModal({
   connectedComponent: DeviceForm,
   destroyOnClose: true,
@@ -64,56 +66,53 @@ const [DeviceImportFormModal, deviceImportFormModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-// 搜索参数
-const searchParams = ref({
+const queryParams = ref({
   deviceName: '',
   nickname: '',
   productId: undefined as number | undefined,
   deviceType: undefined as number | undefined,
   status: undefined as number | undefined,
   groupId: undefined as number | undefined,
-});
-
-// 获取字典选项
-const getIntDictOptions = (dictType: string) => {
-  return getDictOptions(dictType, 'number');
-};
+}); // 搜索参数
 
 /** 搜索 */
 function handleSearch() {
   if (viewMode.value === 'list') {
-    gridApi.formApi.setValues(searchParams.value);
-    gridApi.query();
-  } else {
-    cardViewRef.value?.search(searchParams.value);
+    gridApi.formApi.setValues(queryParams.value);
   }
+  gridApi.query();
 }
 
-/** 重置 */
+/** 重置搜索 */
 function handleReset() {
-  searchParams.value = {
-    deviceName: '',
-    nickname: '',
-    productId: undefined,
-    deviceType: undefined,
-    status: undefined,
-    groupId: undefined,
-  };
+  queryParams.value.deviceName = '';
+  queryParams.value.nickname = '';
+  queryParams.value.productId = undefined;
+  queryParams.value.deviceType = undefined;
+  queryParams.value.status = undefined;
+  queryParams.value.groupId = undefined;
   handleSearch();
 }
 
-/** 刷新 */
+/** 刷新表格 */
 function handleRefresh() {
-  if (viewMode.value === 'list') {
-    gridApi.query();
-  } else {
-    cardViewRef.value?.reload();
+  gridApi.query();
+}
+
+/** 视图切换 */
+async function handleViewModeChange(mode: 'card' | 'list') {
+  if (viewMode.value === mode) {
+    return; // 如果已经是目标视图，不需要切换
   }
+  viewMode.value = mode;
+  // 等待视图更新后再触发查询
+  await nextTick();
+  gridApi.query();
 }
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportDeviceExcel(searchParams.value);
+  const data = await exportDeviceExcel(queryParams.value);
   downloadFileFromBlobPart({ fileName: '物联网设备.xls', source: data });
 }
 
@@ -142,19 +141,19 @@ function handleCreate() {
 }
 
 /** 编辑设备 */
-function handleEdit(row: any) {
+function handleEdit(row: IotDeviceApi.Device) {
   deviceFormModalApi.setData(row).open();
 }
 
 /** 删除设备 */
-async function handleDelete(row: any) {
+async function handleDelete(row: IotDeviceApi.Device) {
   const hideLoading = message.loading({
-    content: `正在删除设备...`,
+    content: $t('ui.actionMessage.deleting', [row.deviceName]),
     duration: 0,
   });
   try {
-    await deleteDevice(row.id);
-    message.success($t('ui.actionMessage.deleteSuccess'));
+    await deleteDevice(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.deviceName]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -163,19 +162,18 @@ async function handleDelete(row: any) {
 
 /** 批量删除设备 */
 async function handleDeleteBatch() {
-  const checkedRows = gridApi.grid?.getCheckboxRecords() || [];
-  if (checkedRows.length === 0) {
+  if (checkedIds.value.length === 0) {
     message.warning('请选择要删除的设备');
     return;
   }
   const hideLoading = message.loading({
-    content: '正在批量删除...',
+    content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
   });
   try {
-    const ids = checkedRows.map((row: any) => row.id);
-    await deleteDeviceList(ids);
+    await deleteDeviceList(checkedIds.value);
     message.success($t('ui.actionMessage.deleteSuccess'));
+    checkedIds.value = [];
     handleRefresh();
   } finally {
     hideLoading();
@@ -184,13 +182,11 @@ async function handleDeleteBatch() {
 
 /** 添加到分组 */
 function handleAddToGroup() {
-  const checkedRows = gridApi.grid?.getCheckboxRecords() || [];
-  if (checkedRows.length === 0) {
+  if (checkedIds.value.length === 0) {
     message.warning('请选择要添加到分组的设备');
     return;
   }
-  const ids = checkedRows.map((row: any) => row.id);
-  deviceGroupFormModalApi.setData(ids).open();
+  deviceGroupFormModalApi.setData(checkedIds.value).open();
 }
 
 /** 设备导入 */
@@ -198,10 +194,15 @@ function handleImport() {
   deviceImportFormModalApi.open();
 }
 
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: IotDeviceApi.Device[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: [],
-  },
   gridOptions: {
     checkboxConfig: {
       highlight: true,
@@ -216,7 +217,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getDevicePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            ...searchParams.value,
+            ...queryParams.value,
           });
         },
       },
@@ -229,9 +230,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions,
+  } as VxeTableGridOptions<IotDeviceApi.Device>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
 });
 
+/** 包装 gridApi.query() 方法，统一列表视图和卡片视图的查询接口 */
+const originalQuery = gridApi.query.bind(gridApi);
+gridApi.query = async (params?: Record<string, any>) => {
+  if (viewMode.value === 'list') {
+    return await originalQuery(params);
+  } else {
+    // 卡片视图：调用卡片组件的 query 方法
+    cardViewRef.value?.query();
+  }
+};
+
 /** 初始化 */
 onMounted(async () => {
   // 获取产品列表
@@ -242,7 +258,7 @@ onMounted(async () => {
   // 处理 productId 参数
   const { productId } = route.query;
   if (productId) {
-    searchParams.value.productId = Number(productId);
+    queryParams.value.productId = Number(productId);
     // 自动触发搜索
     handleSearch();
   }
@@ -260,7 +276,7 @@ onMounted(async () => {
       <!-- 搜索表单 -->
       <div class="mb-3 flex flex-wrap items-center gap-3">
         <Select
-          v-model:value="searchParams.productId"
+          v-model:value="queryParams.productId"
           placeholder="请选择产品"
           allow-clear
           style="width: 200px"
@@ -274,27 +290,30 @@ onMounted(async () => {
           </Select.Option>
         </Select>
         <Input
-          v-model:value="searchParams.deviceName"
+          v-model:value="queryParams.deviceName"
           placeholder="请输入 DeviceName"
           allow-clear
           style="width: 200px"
           @press-enter="handleSearch"
         />
         <Input
-          v-model:value="searchParams.nickname"
+          v-model:value="queryParams.nickname"
           placeholder="请输入备注名称"
           allow-clear
           style="width: 200px"
           @press-enter="handleSearch"
         />
         <Select
-          v-model:value="searchParams.deviceType"
+          v-model:value="queryParams.deviceType"
           placeholder="请选择设备类型"
           allow-clear
           style="width: 200px"
         >
           <Select.Option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE)"
+            v-for="dict in getDictOptions(
+              DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE,
+              'number',
+            )"
             :key="dict.value"
             :value="dict.value"
           >
@@ -302,13 +321,13 @@ onMounted(async () => {
           </Select.Option>
         </Select>
         <Select
-          v-model:value="searchParams.status"
+          v-model:value="queryParams.status"
           placeholder="请选择设备状态"
           allow-clear
           style="width: 200px"
         >
           <Select.Option
-            v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
+            v-for="dict in getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number')"
             :key="dict.value"
             :value="dict.value"
           >
@@ -316,7 +335,7 @@ onMounted(async () => {
           </Select.Option>
         </Select>
         <Select
-          v-model:value="searchParams.groupId"
+          v-model:value="queryParams.groupId"
           placeholder="请选择设备分组"
           allow-clear
           style="width: 200px"
@@ -331,67 +350,72 @@ onMounted(async () => {
         </Select>
         <Button type="primary" @click="handleSearch">
           <IconifyIcon icon="ant-design:search-outlined" class="mr-1" />
-          搜索
+          {{ $t('common.search') }}
         </Button>
         <Button @click="handleReset">
           <IconifyIcon icon="ant-design:reload-outlined" class="mr-1" />
-          重置
+          {{ $t('common.reset') }}
         </Button>
       </div>
 
       <!-- 操作按钮 -->
       <div class="flex items-center justify-between">
-        <Space :size="12">
-          <Button
-            type="primary"
-            @click="handleCreate"
-            v-access:code="['iot:device:create']"
-          >
-            <IconifyIcon icon="ant-design:plus-outlined" class="mr-1" />
-            新增
-          </Button>
-          <Button
-            type="primary"
-            @click="handleExport"
-            v-access:code="['iot:device:export']"
-          >
-            <IconifyIcon icon="ant-design:download-outlined" class="mr-1" />
-            导出
-          </Button>
-          <Button @click="handleImport" v-access:code="['iot:device:import']">
-            <IconifyIcon icon="ant-design:upload-outlined" class="mr-1" />
-            导入
-          </Button>
-          <Button
-            v-show="viewMode === 'list'"
-            @click="handleAddToGroup"
-            v-access:code="['iot:device:update']"
-          >
-            <IconifyIcon icon="ant-design:folder-add-outlined" class="mr-1" />
-            添加到分组
-          </Button>
-          <Button
-            v-show="viewMode === 'list'"
-            danger
-            @click="handleDeleteBatch"
-            v-access:code="['iot:device:delete']"
-          >
-            <IconifyIcon icon="ant-design:delete-outlined" class="mr-1" />
-            批量删除
-          </Button>
-        </Space>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['设备']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['iot:device:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['iot:device:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.import'),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['iot:device:import'],
+              onClick: handleImport,
+            },
+            {
+              label: '添加到分组',
+              type: 'primary',
+              icon: 'ant-design:folder-add-outlined',
+              auth: ['iot:device:update'],
+              ifShow: () => viewMode === 'list',
+              disabled: isEmpty(checkedIds),
+              onClick: handleAddToGroup,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'primary',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:device:delete'],
+              ifShow: () => viewMode === 'list',
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
 
         <!-- 视图切换 -->
         <Space :size="4">
           <Button
             :type="viewMode === 'card' ? 'primary' : 'default'"
-            @click="viewMode = 'card'"
+            @click="handleViewModeChange('card')"
           >
             <IconifyIcon icon="ant-design:appstore-outlined" />
           </Button>
           <Button
             :type="viewMode === 'list' ? 'primary' : 'default'"
-            @click="viewMode = 'list'"
+            @click="handleViewModeChange('list')"
           >
             <IconifyIcon icon="ant-design:unordered-list-outlined" />
           </Button>
@@ -399,18 +423,14 @@ onMounted(async () => {
       </div>
     </Card>
 
-    <Grid v-show="viewMode === 'list'">
-      <template #toolbar-tools>
-        <div></div>
-      </template>
-
+    <Grid table-title="设备列表" v-show="viewMode === 'list'">
       <!-- 所属产品列 -->
       <template #product="{ row }">
         <a
           class="cursor-pointer text-primary"
           @click="openProductDetail(row.productId)"
         >
-          {{ products.find((p: any) => p.id === row.productId)?.name || '-' }}
+          {{ products.find((p) => p.id === row.productId)?.name || '-' }}
         </a>
       </template>
 
@@ -423,7 +443,7 @@ onMounted(async () => {
             size="small"
             class="mr-1"
           >
-            {{ deviceGroups.find((g: any) => g.id === groupId)?.name }}
+            {{ deviceGroups.find((g) => g.id === groupId)?.name }}
           </Tag>
         </template>
         <span v-else>-</span>
@@ -434,14 +454,14 @@ onMounted(async () => {
         <TableAction
           :actions="[
             {
-              label: '查看',
+              label: $t('common.detail'),
               type: 'link',
-              onClick: openDetail.bind(null, row.id),
+              onClick: openDetail.bind(null, row.id!),
             },
             {
               label: '日志',
               type: 'link',
-              onClick: openModel.bind(null, row.id),
+              onClick: openModel.bind(null, row.id!),
             },
             {
               label: $t('common.edit'),
@@ -455,7 +475,7 @@ onMounted(async () => {
               danger: true,
               icon: ACTION_ICON.DELETE,
               popConfirm: {
-                title: `确认删除设备吗?`,
+                title: $t('ui.actionMessage.deleteConfirm', [row.deviceName]),
                 confirm: handleDelete.bind(null, row),
               },
             },
@@ -470,7 +490,7 @@ onMounted(async () => {
       ref="cardViewRef"
       :products="products"
       :device-groups="deviceGroups"
-      :search-params="searchParams"
+      :search-params="queryParams"
       @create="handleCreate"
       @edit="handleEdit"
       @delete="handleDelete"
@@ -482,10 +502,6 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-
 /* 隐藏 VxeGrid 自带的搜索表单区域 */
 :deep(.vxe-grid--form-wrapper) {
   display: none !important;
diff --git a/apps/web-antd/src/views/iot/device/device/modules/card-view.vue b/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
new file mode 100644
index 000000000..4f3d6fe86
--- /dev/null
+++ b/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
@@ -0,0 +1,391 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Card,
+  Col,
+  Empty,
+  Pagination,
+  Popconfirm,
+  Row,
+  Tooltip,
+} from 'ant-design-vue';
+
+import { DictTag } from '#/components/dict-tag';
+import { getDevicePage } from '#/api/iot/device/device';
+
+interface Props {
+  products: any[];
+  deviceGroups: any[];
+  searchParams?: {
+    deviceName: string;
+    deviceType?: number;
+    groupId?: number;
+    nickname: string;
+    productId?: number;
+    status?: number;
+  };
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  create: [];
+  delete: [row: any];
+  detail: [id: number];
+  edit: [row: any];
+  model: [id: number];
+  productDetail: [productId: number];
+}>();
+
+const loading = ref(false);
+const list = ref<any[]>([]);
+const total = ref(0);
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 12,
+});
+
+/** 获取产品名称 */
+function getProductName(productId: number) {
+  const product = props.products.find((p: any) => p.id === productId);
+  return product?.name || '-';
+}
+
+/** 获取设备列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await getDevicePage({
+      ...queryParams.value,
+      ...props.searchParams,
+    });
+    list.value = data.list || [];
+    total.value = data.total || 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 处理页码变化 */
+function handlePageChange(page: number, pageSize: number) {
+  queryParams.value.pageNo = page;
+  queryParams.value.pageSize = pageSize;
+  getList();
+}
+
+defineExpose({
+  reload: getList,
+  search: () => {
+    queryParams.value.pageNo = 1;
+    getList();
+  },
+  query: () => {
+    queryParams.value.pageNo = 1;
+    getList();
+  },
+});
+
+/** 初始化 */
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="device-card-view">
+    <!-- 设备卡片列表 -->
+    <div v-loading="loading" class="min-h-96">
+      <Row v-if="list.length > 0" :gutter="[16, 16]">
+        <Col
+          v-for="item in list"
+          :key="item.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="6"
+        >
+          <Card
+            :body-style="{ padding: '16px' }"
+            class="device-card h-full rounded-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+          >
+            <!-- 顶部标题区域 -->
+            <div class="mb-3 flex items-center">
+              <div class="device-icon">
+                <IconifyIcon icon="mdi:chip" class="text-xl" />
+              </div>
+              <div class="ml-3 min-w-0 flex-1">
+                <div class="device-title">{{ item.deviceName }}</div>
+              </div>
+              <DictTag
+                :type="DICT_TYPE.IOT_DEVICE_STATE"
+                :value="item.state"
+                class="status-tag"
+              />
+            </div>
+            <!-- 内容区域 -->
+            <div class="mb-3">
+              <div class="info-list">
+                <div class="info-item">
+                  <span class="info-label">所属产品</span>
+                  <a
+                    class="info-value cursor-pointer text-primary"
+                    @click="
+                      (e) => {
+                        e.stopPropagation();
+                        emit('productDetail', item.productId);
+                      }
+                    "
+                  >
+                    {{ getProductName(item.productId) }}
+                  </a>
+                </div>
+                <div class="info-item">
+                  <span class="info-label">设备类型</span>
+                  <DictTag
+                    :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
+                    :value="item.deviceType"
+                    class="info-tag m-0"
+                  />
+                </div>
+                <div class="info-item">
+                  <span class="info-label">Deviceid</span>
+                  <Tooltip :title="item.Deviceid || item.id" placement="top">
+                    <span class="info-value device-id cursor-pointer">
+                      {{ item.Deviceid || item.id }}
+                    </span>
+                  </Tooltip>
+                </div>
+              </div>
+            </div>
+            <!-- 按钮组 -->
+            <div class="action-buttons">
+              <Button
+                size="small"
+                class="action-btn action-btn-edit"
+                @click="emit('edit', item)"
+              >
+                <IconifyIcon icon="lucide:edit" class="mr-1" />
+                编辑
+              </Button>
+              <Button
+                size="small"
+                class="action-btn action-btn-detail"
+                @click="emit('detail', item.id)"
+              >
+                <IconifyIcon icon="lucide:eye" class="mr-1" />
+                详情
+              </Button>
+              <Button
+                size="small"
+                class="action-btn action-btn-data"
+                @click="emit('model', item.id)"
+              >
+                <IconifyIcon icon="lucide:database" class="mr-1" />
+                数据
+              </Button>
+              <Popconfirm
+                :title="`确认删除设备 ${item.deviceName} 吗?`"
+                @confirm="emit('delete', item)"
+              >
+                <Button
+                  size="small"
+                  danger
+                  class="action-btn action-btn-delete !w-8"
+                >
+                  <IconifyIcon icon="lucide:trash-2" class="text-sm" />
+                </Button>
+              </Popconfirm>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+      <!-- 空状态 -->
+      <Empty v-else description="暂无设备数据" class="my-20" />
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="list.length > 0" class="mt-3 flex justify-end">
+      <Pagination
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :total="total"
+        :show-total="(total) => `共 ${total} 条`"
+        show-quick-jumper
+        show-size-changer
+        :page-size-options="['12', '24', '36', '48']"
+        @change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.device-card-view {
+  .device-card {
+    overflow: hidden;
+
+    :deep(.ant-card-body) {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    // 设备图标
+    .device-icon {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      color: white;
+      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+      border-radius: 8px;
+    }
+
+    // 设备标题
+    .device-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-size: 15px;
+      font-weight: 600;
+      line-height: 36px;
+      white-space: nowrap;
+    }
+
+    // 状态标签
+    .status-tag {
+      font-size: 12px;
+    }
+
+    // 信息列表
+    .info-list {
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+        font-size: 13px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .info-label {
+          flex-shrink: 0;
+          margin-right: 8px;
+          opacity: 0.65;
+        }
+
+        .info-value {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-weight: 500;
+          white-space: nowrap;
+
+          &.text-primary {
+            color: #1890ff;
+          }
+        }
+
+        .device-id {
+          display: inline-block;
+          max-width: 150px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          font-family: 'Courier New', monospace;
+          font-size: 12px;
+          vertical-align: middle;
+          white-space: nowrap;
+          opacity: 0.85;
+        }
+
+        .info-tag {
+          font-size: 12px;
+        }
+      }
+    }
+
+    // 按钮组
+    .action-buttons {
+      display: flex;
+      gap: 8px;
+      padding-top: 12px;
+      margin-top: auto;
+      border-top: 1px solid var(--ant-color-split);
+
+      .action-btn {
+        flex: 1;
+        height: 32px;
+        font-size: 13px;
+        border-radius: 6px;
+        transition: all 0.2s;
+
+        &.action-btn-edit {
+          color: #1890ff;
+          border-color: #1890ff;
+
+          &:hover {
+            color: white;
+            background: #1890ff;
+          }
+        }
+
+        &.action-btn-detail {
+          color: #52c41a;
+          border-color: #52c41a;
+
+          &:hover {
+            color: white;
+            background: #52c41a;
+          }
+        }
+
+        &.action-btn-data {
+          color: #fa8c16;
+          border-color: #fa8c16;
+
+          &:hover {
+            color: white;
+            background: #fa8c16;
+          }
+        }
+
+        &.action-btn-delete {
+          flex: 0 0 32px;
+          padding: 0;
+        }
+      }
+    }
+  }
+}
+
+// 夜间模式适配
+html.dark {
+  .device-card-view {
+    .device-card {
+      .device-title {
+        color: rgb(255 255 255 / 85%);
+      }
+
+      .info-list {
+        .info-label {
+          color: rgb(255 255 255 / 65%);
+        }
+
+        .info-value {
+          color: rgb(255 255 255 / 85%);
+        }
+
+        .device-id {
+          color: rgb(255 255 255 / 75%);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/components/device-table-select.vue b/apps/web-antd/src/views/iot/device/device/modules/components/device-table-select.vue
deleted file mode 100644
index 8f8afc3e0..000000000
--- a/apps/web-antd/src/views/iot/device/device/modules/components/device-table-select.vue
+++ /dev/null
@@ -1,402 +0,0 @@
-<!-- IoT 设备选择，使用弹窗展示 -->
-<script setup lang="ts">
-import type { IotDeviceApi } from '#/api/iot/device/device';
-import type { IotDeviceGroupApi } from '#/api/iot/device/group';
-import type { IotProductApi } from '#/api/iot/product/product';
-
-import { computed, onMounted, reactive, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate } from '@vben/utils';
-
-import {
-  Button,
-  Form,
-  Input,
-  message,
-  Modal,
-  Pagination,
-  Radio,
-  Select,
-  Table,
-  Tag,
-} from 'ant-design-vue';
-
-import { getDevicePage } from '#/api/iot/device/device';
-import { getSimpleDeviceGroupList } from '#/api/iot/device/group';
-import { getSimpleProductList } from '#/api/iot/product/product';
-import { DictTag } from '#/components/dict-tag';
-
-defineOptions({ name: 'IoTDeviceTableSelect' });
-
-const props = defineProps({
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  productId: {
-    type: Number,
-    default: null,
-  },
-});
-
-/** 提交表单 */
-const emit = defineEmits(['success']);
-
-// 获取字典选项
-function getIntDictOptions(dictType: string) {
-  return getDictOptions(dictType, 'number');
-}
-
-// 日期格式化
-function dateFormatter(_row: any, _column: any, cellValue: any) {
-  return cellValue ? formatDate(cellValue, 'YYYY-MM-DD HH:mm:ss') : '';
-}
-
-const dialogVisible = ref(false);
-const dialogTitle = ref('设备选择器');
-const formLoading = ref(false);
-const loading = ref(true); // 列表的加载中
-const list = ref<IotDeviceApi.Device[]>([]); // 列表的数据
-const total = ref(0); // 列表的总页数
-const selectedDevices = ref<IotDeviceApi.Device[]>([]); // 选中的设备列表
-const selectedId = ref<number>(); // 单选模式下选中的ID
-const products = ref<IotProductApi.Product[]>([]); // 产品列表
-const deviceGroups = ref<IotDeviceGroupApi.DeviceGroup[]>([]); // 设备分组列表
-const selectedRowKeys = ref<number[]>([]); // 多选模式下选中的keys
-
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  deviceName: undefined as string | undefined,
-  productId: undefined as number | undefined,
-  deviceType: undefined as number | undefined,
-  nickname: undefined as string | undefined,
-  status: undefined as number | undefined,
-  groupId: undefined as number | undefined,
-});
-const queryFormRef = ref(); // 搜索的表单
-
-// 表格列定义
-const columns = computed(() => {
-  const baseColumns = [
-    {
-      title: 'DeviceName',
-      dataIndex: 'deviceName',
-      key: 'deviceName',
-    },
-    {
-      title: '备注名称',
-      dataIndex: 'nickname',
-      key: 'nickname',
-    },
-    {
-      title: '所属产品',
-      key: 'productId',
-    },
-    {
-      title: '设备类型',
-      key: 'deviceType',
-    },
-    {
-      title: '所属分组',
-      key: 'groupIds',
-    },
-    {
-      title: '设备状态',
-      key: 'status',
-    },
-    {
-      title: '最后上线时间',
-      key: 'onlineTime',
-      width: 180,
-    },
-  ];
-
-  // 单选模式添加单选列
-  if (!props.multiple) {
-    baseColumns.unshift({
-      title: '',
-      key: 'radio',
-      width: 55,
-      align: 'center',
-    } as any);
-  }
-
-  return baseColumns;
-});
-
-// 多选配置
-const rowSelection = computed(() => ({
-  selectedRowKeys: selectedRowKeys.value,
-  onChange: (keys: any[], rows: IotDeviceApi.Device[]) => {
-    selectedRowKeys.value = keys;
-    selectedDevices.value = rows;
-  },
-}));
-
-/** 查询列表 */
-async function getList() {
-  loading.value = true;
-  try {
-    if (props.productId) {
-      queryParams.productId = props.productId;
-    }
-    const data = await getDevicePage(queryParams);
-    list.value = data.list;
-    total.value = data.total;
-  } finally {
-    loading.value = false;
-  }
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.pageNo = 1;
-  getList();
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  queryFormRef.value.resetFields();
-  handleQuery();
-}
-
-/** 打开弹窗 */
-async function open() {
-  dialogVisible.value = true;
-  // 重置选择状态
-  selectedDevices.value = [];
-  selectedId.value = undefined;
-  selectedRowKeys.value = [];
-  if (!props.productId) {
-    // 获取产品列表
-    products.value = await getSimpleProductList();
-  }
-  // 获取设备列表
-  await getList();
-}
-defineExpose({ open });
-
-/** 处理行点击事件 */
-const tableRef = ref();
-function handleRowClick(row: IotDeviceApi.Device) {
-  if (!props.multiple) {
-    selectedId.value = row.id;
-    selectedDevices.value = [row];
-  }
-}
-
-/** 处理单选变更事件 */
-function handleRadioChange(row: IotDeviceApi.Device) {
-  selectedId.value = row.id;
-  selectedDevices.value = [row];
-}
-
-async function submitForm() {
-  if (selectedDevices.value.length === 0) {
-    message.warning({
-      content: props.multiple ? '请至少选择一个设备' : '请选择一个设备',
-    });
-    return;
-  }
-  emit(
-    'success',
-    props.multiple ? selectedDevices.value : selectedDevices.value[0],
-  );
-  dialogVisible.value = false;
-}
-
-/** 初始化 */
-onMounted(async () => {
-  // 获取产品列表
-  products.value = await getSimpleProductList();
-  // 获取分组列表
-  deviceGroups.value = await getSimpleDeviceGroupList();
-});
-</script>
-
-<template>
-  <Modal
-    :title="dialogTitle"
-    v-model:open="dialogVisible"
-    width="60%"
-    :footer="null"
-  >
-    <ContentWrap>
-      <!-- 搜索工作栏 -->
-      <Form
-        ref="queryFormRef"
-        layout="inline"
-        :model="queryParams"
-        class="-mb-15px"
-      >
-        <Form.Item v-if="!props.productId" label="产品" name="productId">
-          <Select
-            v-model:value="queryParams.productId"
-            placeholder="请选择产品"
-            allow-clear
-            style="width: 240px"
-          >
-            <Select.Option
-              v-for="product in products"
-              :key="product.id"
-              :value="product.id"
-            >
-              {{ product.name }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item label="DeviceName" name="deviceName">
-          <Input
-            v-model:value="queryParams.deviceName"
-            placeholder="请输入 DeviceName"
-            allow-clear
-            @press-enter="handleQuery"
-            style="width: 240px"
-          />
-        </Form.Item>
-        <Form.Item label="备注名称" name="nickname">
-          <Input
-            v-model:value="queryParams.nickname"
-            placeholder="请输入备注名称"
-            allow-clear
-            @press-enter="handleQuery"
-            style="width: 240px"
-          />
-        </Form.Item>
-        <Form.Item label="设备类型" name="deviceType">
-          <Select
-            v-model:value="queryParams.deviceType"
-            placeholder="请选择设备类型"
-            allow-clear
-            style="width: 240px"
-          >
-            <Select.Option
-              v-for="dict in getIntDictOptions(
-                DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE,
-              )"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item label="设备状态" name="status">
-          <Select
-            v-model:value="queryParams.status"
-            placeholder="请选择设备状态"
-            allow-clear
-            style="width: 240px"
-          >
-            <Select.Option
-              v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATE)"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item label="设备分组" name="groupId">
-          <Select
-            v-model:value="queryParams.groupId"
-            placeholder="请选择设备分组"
-            allow-clear
-            style="width: 240px"
-          >
-            <Select.Option
-              v-for="group in deviceGroups"
-              :key="group.id"
-              :value="group.id"
-            >
-              {{ group.name }}
-            </Select.Option>
-          </Select>
-        </Form.Item>
-        <Form.Item>
-          <Button @click="handleQuery">
-            <IconifyIcon class="mr-5px" icon="ep:search" />
-            搜索
-          </Button>
-          <Button @click="resetQuery">
-            <IconifyIcon class="mr-5px" icon="ep:refresh" />
-            重置
-          </Button>
-        </Form.Item>
-      </Form>
-    </ContentWrap>
-
-    <!-- 列表 -->
-    <ContentWrap>
-      <Table
-        ref="tableRef"
-        :loading="loading"
-        :data-source="list"
-        :columns="columns"
-        :pagination="false"
-        :row-selection="multiple ? rowSelection : undefined"
-        @row-click="handleRowClick"
-        :row-key="(record: IotDeviceApi.Device) => record.id?.toString() ?? ''"
-      >
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'radio'">
-            <Radio
-              :checked="selectedId === record.id"
-              @click="() => handleRadioChange(record as IotDeviceApi.Device)"
-            />
-          </template>
-          <template v-else-if="column.key === 'productId'">
-            {{ products.find((p) => p.id === record.productId)?.name || '-' }}
-          </template>
-          <template v-else-if="column.key === 'deviceType'">
-            <DictTag
-              :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
-              :value="record.deviceType"
-            />
-          </template>
-          <template v-else-if="column.key === 'groupIds'">
-            <template v-if="record.groupIds?.length">
-              <Tag
-                v-for="id in record.groupIds"
-                :key="id"
-                class="ml-5px"
-                size="small"
-              >
-                {{ deviceGroups.find((g) => g.id === id)?.name }}
-              </Tag>
-            </template>
-          </template>
-          <template v-else-if="column.key === 'status'">
-            <DictTag
-              :type="DICT_TYPE.IOT_DEVICE_STATE"
-              :value="record.status"
-            />
-          </template>
-          <template v-else-if="column.key === 'onlineTime'">
-            {{ dateFormatter(null, null, record.onlineTime) }}
-          </template>
-        </template>
-      </Table>
-
-      <!-- 分页 -->
-      <Pagination
-        v-model:limit="queryParams.pageSize"
-        v-model:page="queryParams.pageNo"
-        :total="total"
-        @pagination="getList"
-      />
-    </ContentWrap>
-
-    <template #footer>
-      <Button @click="submitForm" type="primary" :disabled="formLoading">
-        确 定
-      </Button>
-      <Button @click="dialogVisible = false">取 消</Button>
-    </template>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-message.vue b/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-message.vue
deleted file mode 100644
index eb17e02fe..000000000
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-message.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<script setup lang="ts">
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  reactive,
-  ref,
-  watch,
-} from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate } from '@vben/utils';
-
-import {
-  Button,
-  Form,
-  Pagination,
-  Select,
-  Switch,
-  Table,
-  Tag,
-} from 'ant-design-vue';
-
-import { getDeviceMessagePage } from '#/api/iot/device/device';
-import { DictTag } from '#/components/dict-tag';
-import { IotDeviceMessageMethodEnum } from '#/views/iot/utils/constants';
-
-const props = defineProps<{
-  deviceId: number;
-}>();
-
-// 查询参数
-const queryParams = reactive({
-  deviceId: props.deviceId,
-  method: undefined,
-  upstream: undefined,
-  pageNo: 1,
-  pageSize: 10,
-});
-
-// 列表数据
-const loading = ref(false);
-const total = ref(0);
-const list = ref<any[]>([]);
-const autoRefresh = ref(false); // 自动刷新开关
-let autoRefreshTimer: any = null; // 自动刷新定时器
-
-// 消息方法选项
-const methodOptions = computed(() => {
-  return Object.values(IotDeviceMessageMethodEnum).map((item) => ({
-    label: item.name,
-    value: item.method,
-  }));
-});
-
-// 表格列定义
-const columns = [
-  {
-    title: '时间',
-    dataIndex: 'ts',
-    key: 'ts',
-    align: 'center' as const,
-    width: 180,
-  },
-  {
-    title: '上行/下行',
-    dataIndex: 'upstream',
-    key: 'upstream',
-    align: 'center' as const,
-    width: 140,
-  },
-  {
-    title: '是否回复',
-    dataIndex: 'reply',
-    key: 'reply',
-    align: 'center' as const,
-    width: 140,
-  },
-  {
-    title: '请求编号',
-    dataIndex: 'requestId',
-    key: 'requestId',
-    align: 'center' as const,
-    width: 300,
-  },
-  {
-    title: '请求方法',
-    dataIndex: 'method',
-    key: 'method',
-    align: 'center' as const,
-    width: 140,
-  },
-  {
-    title: '请求/响应数据',
-    dataIndex: 'params',
-    key: 'params',
-    align: 'center' as const,
-    ellipsis: true,
-  },
-];
-
-/** 查询消息列表 */
-async function getMessageList() {
-  if (!props.deviceId) return;
-  loading.value = true;
-  try {
-    const data = await getDeviceMessagePage(queryParams);
-    total.value = data.total;
-    list.value = data.list;
-  } finally {
-    loading.value = false;
-  }
-}
-
-/** 搜索操作 */
-function handleQuery() {
-  queryParams.pageNo = 1;
-  getMessageList();
-}
-
-/** 监听自动刷新 */
-watch(autoRefresh, (newValue) => {
-  if (newValue) {
-    autoRefreshTimer = setInterval(() => {
-      getMessageList();
-    }, 5000);
-  } else {
-    clearInterval(autoRefreshTimer);
-    autoRefreshTimer = null;
-  }
-});
-
-/** 监听设备标识变化 */
-watch(
-  () => props.deviceId,
-  (newValue) => {
-    if (newValue) {
-      handleQuery();
-    }
-  },
-);
-
-/** 组件卸载时清除定时器 */
-onBeforeUnmount(() => {
-  if (autoRefreshTimer) {
-    clearInterval(autoRefreshTimer);
-    autoRefreshTimer = null;
-  }
-});
-
-/** 初始化 */
-onMounted(() => {
-  if (props.deviceId) {
-    getMessageList();
-  }
-});
-
-/** 刷新消息列表 */
-function refresh(delay = 0) {
-  if (delay > 0) {
-    setTimeout(() => {
-      handleQuery();
-    }, delay);
-  } else {
-    handleQuery();
-  }
-}
-
-/** 暴露方法给父组件 */
-defineExpose({
-  refresh,
-});
-</script>
-
-<template>
-  <ContentWrap>
-    <!-- 搜索区域 -->
-    <Form :model="queryParams" layout="inline">
-      <Form.Item>
-        <Select
-          v-model:value="queryParams.method"
-          placeholder="所有方法"
-          style="width: 160px"
-          allow-clear
-        >
-          <Select.Option
-            v-for="item in methodOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          >
-            {{ item.label }}
-          </Select.Option>
-        </Select>
-      </Form.Item>
-      <Form.Item>
-        <Select
-          v-model:value="queryParams.upstream"
-          placeholder="上行/下行"
-          style="width: 160px"
-          allow-clear
-        >
-          <Select.Option label="上行" value="true">上行</Select.Option>
-          <Select.Option label="下行" value="false">下行</Select.Option>
-        </Select>
-      </Form.Item>
-      <Form.Item>
-        <Button type="primary" @click="handleQuery">
-          <IconifyIcon icon="ep:search" class="mr-5px" /> 搜索
-        </Button>
-        <Switch
-          v-model:checked="autoRefresh"
-          class="ml-20px"
-          checked-children="定时刷新"
-          un-checked-children="定时刷新"
-        />
-      </Form.Item>
-    </Form>
-
-    <!-- 消息列表 -->
-    <Table
-      :loading="loading"
-      :data-source="list"
-      :columns="columns"
-      :pagination="false"
-      class="whitespace-nowrap"
-    >
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'ts'">
-          {{ formatDate(record.ts) }}
-        </template>
-        <template v-else-if="column.key === 'upstream'">
-          <Tag :color="record.upstream ? 'blue' : 'green'">
-            {{ record.upstream ? '上行' : '下行' }}
-          </Tag>
-        </template>
-        <template v-else-if="column.key === 'reply'">
-          <DictTag
-            :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
-            :value="record.reply"
-          />
-        </template>
-        <template v-else-if="column.key === 'method'">
-          {{
-            methodOptions.find((item) => item.value === record.method)?.label
-          }}
-        </template>
-        <template v-else-if="column.key === 'params'">
-          <span v-if="record.reply">
-            {{
-              `{"code":${record.code},"msg":"${record.msg}","data":${record.data}\}`
-            }}
-          </span>
-          <span v-else>{{ record.params }}</span>
-        </template>
-      </template>
-    </Table>
-
-    <!-- 分页 -->
-    <div class="mt-10px flex justify-end">
-      <Pagination
-        :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getMessageList"
-      />
-    </div>
-  </ContentWrap>
-</template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-simulator.vue b/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-simulator.vue
deleted file mode 100644
index 19ae1dc67..000000000
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-simulator.vue
+++ /dev/null
@@ -1,603 +0,0 @@
-<!-- 模拟设备 -->
-<script lang="ts" setup>
-import type { TableColumnType } from 'ant-design-vue';
-
-import type { IotDeviceApi } from '#/api/iot/device/device';
-import type { IotProductApi } from '#/api/iot/product/product';
-import type { ThingModelData } from '#/api/iot/thingmodel';
-
-import { computed, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-
-import {
-  Button,
-  Card,
-  Input,
-  message,
-  Table,
-  Tabs,
-  Textarea,
-} from 'ant-design-vue';
-
-import { DeviceStateEnum, sendDeviceMessage } from '#/api/iot/device/device';
-import DataDefinition from '#/views/iot/thingmodel/modules/components/data-definition.vue';
-import {
-  IotDeviceMessageMethodEnum,
-  IoTThingModelTypeEnum,
-} from '#/views/iot/utils/constants';
-
-import DeviceDetailsMessage from './device-details-message.vue';
-
-const props = defineProps<{
-  device: IotDeviceApi.Device;
-  product: IotProductApi.Product;
-  thingModelList: ThingModelData[];
-}>();
-
-// 消息弹窗
-const activeTab = ref('upstream'); // 上行upstream、下行downstream
-const upstreamTab = ref(IotDeviceMessageMethodEnum.PROPERTY_POST.method); // 上行子标签
-const downstreamTab = ref(IotDeviceMessageMethodEnum.PROPERTY_SET.method); // 下行子标签
-const deviceMessageRef = ref(); // 设备消息组件引用
-const deviceMessageRefreshDelay = 2000; // 延迟 N 秒，保证模拟上行的消息被处理
-
-// 折叠状态
-const debugCollapsed = ref(false); // 指令调试区域折叠状态
-const messageCollapsed = ref(false); // 设备消息区域折叠状态
-
-// 表单数据：存储用户输入的模拟值
-const formData = ref<Record<string, string>>({});
-
-// 根据类型过滤物模型数据
-const getFilteredThingModelList = (type: number) => {
-  return props.thingModelList.filter(
-    (item) => String(item.type) === String(type),
-  );
-};
-
-// 计算属性：属性列表
-const propertyList = computed(() =>
-  getFilteredThingModelList(IoTThingModelTypeEnum.PROPERTY),
-);
-
-// 计算属性：事件列表
-const eventList = computed(() =>
-  getFilteredThingModelList(IoTThingModelTypeEnum.EVENT),
-);
-
-// 计算属性：服务列表
-const serviceList = computed(() =>
-  getFilteredThingModelList(IoTThingModelTypeEnum.SERVICE),
-);
-
-// 属性表格列定义
-const propertyColumns: TableColumnType[] = [
-  {
-    title: '功能名称',
-    dataIndex: 'name',
-    key: 'name',
-    width: 120,
-    fixed: 'left' as any,
-  },
-  {
-    title: '标识符',
-    dataIndex: 'identifier',
-    key: 'identifier',
-    width: 120,
-    fixed: 'left' as any,
-  },
-  {
-    title: '数据类型',
-    key: 'dataType',
-    width: 100,
-  },
-  {
-    title: '数据定义',
-    key: 'dataDefinition',
-    minWidth: 100,
-  },
-  {
-    title: '值',
-    key: 'value',
-    width: 300,
-    fixed: 'right' as any,
-  },
-];
-
-// 事件表格列定义
-const eventColumns = [
-  {
-    title: '功能名称',
-    dataIndex: 'name',
-    key: 'name',
-    width: 120,
-    fixed: 'left' as any,
-  },
-  {
-    title: '标识符',
-    dataIndex: 'identifier',
-    key: 'identifier',
-    width: 120,
-    fixed: 'left' as any,
-  },
-  {
-    title: '数据类型',
-    key: 'dataType',
-    width: 100,
-  },
-  {
-    title: '数据定义',
-    key: 'dataDefinition',
-    minWidth: 200,
-  },
-  {
-    title: '值',
-    key: 'value',
-    width: 200,
-  },
-  {
-    title: '操作',
-    key: 'action',
-    width: 100,
-    fixed: 'right' as any,
-  },
-];
-
-// 服务表格列定义
-const serviceColumns = [
-  {
-    title: '服务名称',
-    dataIndex: 'name',
-    key: 'name',
-    width: 120,
-    fixed: 'left' as any,
-  },
-  {
-    title: '标识符',
-    dataIndex: 'identifier',
-    key: 'identifier',
-    width: 120,
-    fixed: 'left' as any,
-  },
-  {
-    title: '输入参数',
-    key: 'dataDefinition',
-    minWidth: 200,
-  },
-  {
-    title: '参数值',
-    key: 'value',
-    width: 200,
-  },
-  {
-    title: '操作',
-    key: 'action',
-    width: 100,
-    fixed: 'right' as any,
-  },
-];
-
-// 获取表单值
-function getFormValue(identifier: string) {
-  return formData.value[identifier] || '';
-}
-
-// 设置表单值
-function setFormValue(identifier: string, value: string) {
-  formData.value[identifier] = value;
-}
-
-// 属性上报
-async function handlePropertyPost() {
-  try {
-    const params: Record<string, any> = {};
-    propertyList.value.forEach((item) => {
-      const value = formData.value[item.identifier!];
-      if (value) {
-        params[item.identifier!] = value;
-      }
-    });
-
-    if (Object.keys(params).length === 0) {
-      message.warning({ content: '请至少输入一个属性值' });
-      return;
-    }
-
-    await sendDeviceMessage({
-      deviceId: props.device.id!,
-      method: IotDeviceMessageMethodEnum.PROPERTY_POST.method,
-      params,
-    });
-
-    message.success({ content: '属性上报成功' });
-    // 延迟刷新设备消息列表
-    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
-  } catch (error) {
-    message.error({ content: '属性上报失败' });
-    console.error(error);
-  }
-}
-
-// 事件上报
-async function handleEventPost(row: ThingModelData) {
-  try {
-    const valueStr = formData.value[row.identifier!];
-    let params: any = {};
-
-    if (valueStr) {
-      try {
-        params = JSON.parse(valueStr);
-      } catch {
-        message.error({ content: '事件参数格式错误，请输入有效的JSON格式' });
-        return;
-      }
-    }
-
-    await sendDeviceMessage({
-      deviceId: props.device.id!,
-      method: IotDeviceMessageMethodEnum.EVENT_POST.method,
-      params: {
-        identifier: row.identifier,
-        params,
-      },
-    });
-
-    message.success({ content: '事件上报成功' });
-    // 延迟刷新设备消息列表
-    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
-  } catch (error) {
-    message.error({ content: '事件上报失败' });
-    console.error(error);
-  }
-}
-
-// 状态变更
-async function handleDeviceState(state: number) {
-  try {
-    await sendDeviceMessage({
-      deviceId: props.device.id!,
-      method: IotDeviceMessageMethodEnum.STATE_UPDATE.method,
-      params: { state },
-    });
-
-    message.success({ content: '状态变更成功' });
-    // 延迟刷新设备消息列表
-    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
-  } catch (error) {
-    message.error({ content: '状态变更失败' });
-    console.error(error);
-  }
-}
-
-// 属性设置
-async function handlePropertySet() {
-  try {
-    const params: Record<string, any> = {};
-    propertyList.value.forEach((item) => {
-      const value = formData.value[item.identifier!];
-      if (value) {
-        params[item.identifier!] = value;
-      }
-    });
-
-    if (Object.keys(params).length === 0) {
-      message.warning({ content: '请至少输入一个属性值' });
-      return;
-    }
-
-    await sendDeviceMessage({
-      deviceId: props.device.id!,
-      method: IotDeviceMessageMethodEnum.PROPERTY_SET.method,
-      params,
-    });
-
-    message.success({ content: '属性设置成功' });
-    // 延迟刷新设备消息列表
-    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
-  } catch (error) {
-    message.error({ content: '属性设置失败' });
-    console.error(error);
-  }
-}
-
-// 服务调用
-async function handleServiceInvoke(row: ThingModelData) {
-  try {
-    const valueStr = formData.value[row.identifier!];
-    let params: any = {};
-
-    if (valueStr) {
-      try {
-        params = JSON.parse(valueStr);
-      } catch {
-        message.error({ content: '服务参数格式错误，请输入有效的JSON格式' });
-        return;
-      }
-    }
-
-    await sendDeviceMessage({
-      deviceId: props.device.id!,
-      method: IotDeviceMessageMethodEnum.SERVICE_INVOKE.method,
-      params: {
-        identifier: row.identifier,
-        params,
-      },
-    });
-
-    message.success({ content: '服务调用成功' });
-    // 延迟刷新设备消息列表
-    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
-  } catch (error) {
-    message.error({ content: '服务调用失败' });
-    console.error(error);
-  }
-}
-</script>
-
-<template>
-  <ContentWrap>
-    <!-- 上方：指令调试区域 -->
-    <Card class="simulator-tabs mb-4">
-      <template #title>
-        <div class="flex items-center justify-between">
-          <span>指令调试</span>
-          <Button
-            type="text"
-            size="small"
-            @click="debugCollapsed = !debugCollapsed"
-          >
-            <IconifyIcon icon="lucide:chevron-up" v-if="!debugCollapsed" />
-            <IconifyIcon icon="lucide:chevron-down" v-if="debugCollapsed" />
-          </Button>
-        </div>
-      </template>
-      <div v-show="!debugCollapsed">
-        <Tabs v-model:active-key="activeTab" size="small">
-          <!-- 上行指令调试 -->
-          <Tabs.TabPane key="upstream" tab="上行指令调试">
-            <Tabs
-              v-if="activeTab === 'upstream'"
-              v-model:active-key="upstreamTab"
-              size="small"
-            >
-              <!-- 属性上报 -->
-              <Tabs.TabPane
-                :key="IotDeviceMessageMethodEnum.PROPERTY_POST.method"
-                tab="属性上报"
-              >
-                <ContentWrap>
-                  <Table
-                    :data-source="propertyList"
-                    align="center"
-                    :columns="propertyColumns"
-                    :pagination="false"
-                    :scroll="{ y: 300 }"
-                    size="small"
-                  >
-                    <template #bodyCell="{ column, record }">
-                      <template v-if="column.key === 'dataType'">
-                        {{ record.property?.dataType ?? '-' }}
-                      </template>
-                      <template v-else-if="column.key === 'dataDefinition'">
-                        <DataDefinition :data="record" />
-                      </template>
-                      <template v-else-if="column.key === 'value'">
-                        <Input
-                          :value="getFormValue(record.identifier)"
-                          @update:value="
-                            setFormValue(record.identifier, $event)
-                          "
-                          placeholder="输入值"
-                          size="small"
-                        />
-                      </template>
-                    </template>
-                  </Table>
-                  <div class="mt-4 flex items-center justify-between">
-                    <span class="text-sm text-gray-600">
-                      设置属性值后，点击「发送属性上报」按钮
-                    </span>
-                    <Button type="primary" @click="handlePropertyPost">
-                      发送属性上报
-                    </Button>
-                  </div>
-                </ContentWrap>
-              </Tabs.TabPane>
-
-              <!-- 事件上报 -->
-              <Tabs.TabPane
-                :key="IotDeviceMessageMethodEnum.EVENT_POST.method"
-                tab="事件上报"
-              >
-                <ContentWrap>
-                  <Table
-                    :data-source="eventList"
-                    align="center"
-                    :columns="eventColumns"
-                    :pagination="false"
-                    :scroll="{ y: 300 }"
-                    size="small"
-                  >
-                    <template #bodyCell="{ column, record }">
-                      <template v-if="column.key === 'dataType'">
-                        {{ record.event?.dataType ?? '-' }}
-                      </template>
-                      <template v-else-if="column.key === 'dataDefinition'">
-                        <DataDefinition :data="record" />
-                      </template>
-                      <template v-else-if="column.key === 'value'">
-                        <Textarea
-                          :value="getFormValue(record.identifier)"
-                          @update:value="
-                            setFormValue(record.identifier, $event)
-                          "
-                          :rows="3"
-                          placeholder="输入事件参数（JSON格式）"
-                          size="small"
-                        />
-                      </template>
-                      <template v-else-if="column.key === 'action'">
-                        <Button
-                          type="primary"
-                          size="small"
-                          @click="handleEventPost(record)"
-                        >
-                          上报事件
-                        </Button>
-                      </template>
-                    </template>
-                  </Table>
-                </ContentWrap>
-              </Tabs.TabPane>
-
-              <!-- 状态变更 -->
-              <Tabs.TabPane
-                :key="IotDeviceMessageMethodEnum.STATE_UPDATE.method"
-                tab="状态变更"
-              >
-                <ContentWrap>
-                  <div class="flex gap-4">
-                    <Button
-                      type="primary"
-                      @click="handleDeviceState(DeviceStateEnum.ONLINE)"
-                    >
-                      设备上线
-                    </Button>
-                    <Button
-                      danger
-                      @click="handleDeviceState(DeviceStateEnum.OFFLINE)"
-                    >
-                      设备下线
-                    </Button>
-                  </div>
-                </ContentWrap>
-              </Tabs.TabPane>
-            </Tabs>
-          </Tabs.TabPane>
-
-          <!-- 下行指令调试 -->
-          <Tabs.TabPane key="downstream" tab="下行指令调试">
-            <Tabs
-              v-if="activeTab === 'downstream'"
-              v-model:active-key="downstreamTab"
-              size="small"
-            >
-              <!-- 属性调试 -->
-              <Tabs.TabPane
-                :key="IotDeviceMessageMethodEnum.PROPERTY_SET.method"
-                tab="属性设置"
-              >
-                <ContentWrap>
-                  <Table
-                    :data-source="propertyList"
-                    align="center"
-                    :columns="propertyColumns"
-                    :pagination="false"
-                    :scroll="{ y: 300 }"
-                    size="small"
-                  >
-                    <template #bodyCell="{ column, record }">
-                      <template v-if="column.key === 'dataType'">
-                        {{ record.property?.dataType ?? '-' }}
-                      </template>
-                      <template v-else-if="column.key === 'dataDefinition'">
-                        <DataDefinition :data="record" />
-                      </template>
-                      <template v-else-if="column.key === 'value'">
-                        <Input
-                          :value="getFormValue(record.identifier)"
-                          @update:value="
-                            setFormValue(record.identifier, $event)
-                          "
-                          placeholder="输入值"
-                          size="small"
-                        />
-                      </template>
-                    </template>
-                  </Table>
-                  <div class="mt-4 flex items-center justify-between">
-                    <span class="text-sm text-gray-600">
-                      设置属性值后，点击「发送属性设置」按钮
-                    </span>
-                    <Button type="primary" @click="handlePropertySet">
-                      发送属性设置
-                    </Button>
-                  </div>
-                </ContentWrap>
-              </Tabs.TabPane>
-
-              <!-- 服务调用 -->
-              <Tabs.TabPane
-                :key="IotDeviceMessageMethodEnum.SERVICE_INVOKE.method"
-                tab="设备服务调用"
-              >
-                <ContentWrap>
-                  <Table
-                    :data-source="serviceList"
-                    align="center"
-                    :columns="serviceColumns"
-                    :pagination="false"
-                    :scroll="{ y: 300 }"
-                    size="small"
-                  >
-                    <template #bodyCell="{ column, record }">
-                      <template v-if="column.key === 'dataDefinition'">
-                        <DataDefinition :data="record" />
-                      </template>
-                      <template v-else-if="column.key === 'value'">
-                        <Textarea
-                          :value="getFormValue(record.identifier)"
-                          @update:value="
-                            setFormValue(record.identifier, $event)
-                          "
-                          :rows="3"
-                          placeholder="输入服务参数（JSON格式）"
-                          size="small"
-                        />
-                      </template>
-                      <template v-else-if="column.key === 'action'">
-                        <Button
-                          type="primary"
-                          size="small"
-                          @click="handleServiceInvoke(record)"
-                        >
-                          服务调用
-                        </Button>
-                      </template>
-                    </template>
-                  </Table>
-                </ContentWrap>
-              </Tabs.TabPane>
-            </Tabs>
-          </Tabs.TabPane>
-        </Tabs>
-      </div>
-    </Card>
-
-    <!-- 下方：设备消息区域 -->
-    <Card>
-      <template #title>
-        <div class="flex items-center justify-between">
-          <span>设备消息</span>
-          <Button
-            type="text"
-            size="small"
-            @click="messageCollapsed = !messageCollapsed"
-          >
-            <IconifyIcon icon="lucide:chevron-down" v-if="!messageCollapsed" />
-            <IconifyIcon icon="lucide:chevron-down" v-if="messageCollapsed" />
-          </Button>
-        </div>
-      </template>
-      <div v-show="!messageCollapsed">
-        <DeviceDetailsMessage
-          v-if="device.id"
-          ref="deviceMessageRef"
-          :device-id="device.id"
-        />
-      </div>
-    </Card>
-  </ContentWrap>
-</template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-event.vue b/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-event.vue
deleted file mode 100644
index 90ceb8bf3..000000000
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-event.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<!-- 设备事件管理 -->
-<script setup lang="ts">
-import type { ThingModelData } from '#/api/iot/thingmodel';
-
-import { computed, onMounted, reactive, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate } from '@vben/utils';
-
-import {
-  Button,
-  Divider,
-  Form,
-  Pagination,
-  RangePicker,
-  Select,
-  Table,
-  Tag,
-} from 'ant-design-vue';
-
-import { getDeviceMessagePairPage } from '#/api/iot/device/device';
-import {
-  getEventTypeLabel,
-  IotDeviceMessageMethodEnum,
-  IoTThingModelTypeEnum,
-} from '#/views/iot/utils/constants';
-
-const props = defineProps<{
-  deviceId: number;
-  thingModelList: ThingModelData[];
-}>();
-
-const loading = ref(false); // 列表的加载中
-const total = ref(0); // 列表的总页数
-const list = ref([] as any[]); // 列表的数据
-const queryParams = reactive({
-  deviceId: props.deviceId,
-  method: IotDeviceMessageMethodEnum.EVENT_POST.method, // 固定筛选事件消息
-  identifier: '',
-  times: undefined,
-  pageNo: 1,
-  pageSize: 10,
-});
-const queryFormRef = ref(); // 搜索的表单
-
-/** 事件类型的物模型数据 */
-const eventThingModels = computed(() => {
-  return props.thingModelList.filter(
-    (item: ThingModelData) =>
-      String(item.type) === String(IoTThingModelTypeEnum.EVENT),
-  );
-});
-
-/** 查询列表 */
-async function getList() {
-  if (!props.deviceId) return;
-  loading.value = true;
-  try {
-    const data = await getDeviceMessagePairPage(queryParams);
-    list.value = data.list || [];
-    total.value = data.total || 0;
-  } finally {
-    loading.value = false;
-  }
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.pageNo = 1;
-  getList();
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  queryFormRef.value?.resetFields();
-  queryParams.identifier = '';
-  queryParams.times = undefined;
-  handleQuery();
-}
-
-/** 获取事件名称 */
-function getEventName(identifier: string | undefined) {
-  if (!identifier) return '-';
-  const event = eventThingModels.value.find(
-    (item: ThingModelData) => item.identifier === identifier,
-  );
-  return event?.name || identifier;
-}
-
-/** 获取事件类型 */
-function getEventType(identifier: string | undefined) {
-  if (!identifier) return '-';
-  const event = eventThingModels.value.find(
-    (item: ThingModelData) => item.identifier === identifier,
-  );
-  if (!event?.event?.type) return '-';
-  return getEventTypeLabel(event.event.type) || '-';
-}
-
-/** 解析参数 */
-function parseParams(params: string) {
-  try {
-    const parsed = JSON.parse(params);
-    if (parsed.params) {
-      return parsed.params;
-    }
-    return parsed;
-  } catch {
-    return {};
-  }
-}
-
-/** 初始化 */
-onMounted(() => {
-  getList();
-});
-</script>
-
-<template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <Form
-      :model="queryParams"
-      ref="queryFormRef"
-      layout="inline"
-      @submit.prevent
-      style="margin-bottom: 16px"
-    >
-      <Form.Item label="标识符" name="identifier">
-        <Select
-          v-model:value="queryParams.identifier"
-          placeholder="请选择事件标识符"
-          allow-clear
-          style="width: 240px"
-        >
-          <Select.Option
-            v-for="event in eventThingModels"
-            :key="event.identifier"
-            :value="event.identifier!"
-          >
-            {{ event.name }}({{ event.identifier }})
-          </Select.Option>
-        </Select>
-      </Form.Item>
-      <Form.Item label="时间范围" name="times">
-        <RangePicker
-          v-model:value="queryParams.times"
-          show-time
-          format="YYYY-MM-DD HH:mm:ss"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px"
-        />
-      </Form.Item>
-      <Form.Item>
-        <Button type="primary" @click="handleQuery">
-          <template #icon>
-            <IconifyIcon icon="ep:search" />
-          </template>
-          搜索
-        </Button>
-        <Button @click="resetQuery" style="margin-left: 8px">
-          <template #icon>
-            <IconifyIcon icon="ep:refresh" />
-          </template>
-          重置
-        </Button>
-      </Form.Item>
-    </Form>
-
-    <Divider style="margin: 16px 0" />
-
-    <!-- 事件列表 -->
-    <Table v-loading="loading" :data-source="list" :pagination="false">
-      <Table.Column
-        title="上报时间"
-        align="center"
-        data-index="reportTime"
-        :width="180"
-      >
-        <template #default="{ record }">
-          {{
-            record.request?.reportTime
-              ? formatDate(record.request.reportTime)
-              : '-'
-          }}
-        </template>
-      </Table.Column>
-      <Table.Column
-        title="标识符"
-        align="center"
-        data-index="identifier"
-        :width="160"
-      >
-        <template #default="{ record }">
-          <Tag color="blue" size="small">
-            {{ record.request?.identifier }}
-          </Tag>
-        </template>
-      </Table.Column>
-      <Table.Column
-        title="事件名称"
-        align="center"
-        data-index="eventName"
-        :width="160"
-      >
-        <template #default="{ record }">
-          {{ getEventName(record.request?.identifier) }}
-        </template>
-      </Table.Column>
-      <Table.Column
-        title="事件类型"
-        align="center"
-        data-index="eventType"
-        :width="100"
-      >
-        <template #default="{ record }">
-          {{ getEventType(record.request?.identifier) }}
-        </template>
-      </Table.Column>
-      <Table.Column title="输入参数" align="center" data-index="params">
-        <template #default="{ record }">
-          {{ parseParams(record.request.params) }}
-        </template>
-      </Table.Column>
-    </Table>
-
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-</template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-service.vue b/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-service.vue
deleted file mode 100644
index c9732317e..000000000
--- a/apps/web-antd/src/views/iot/device/device/modules/detail/device-details-thing-model-service.vue
+++ /dev/null
@@ -1,258 +0,0 @@
-<!-- 设备服务调用 -->
-<script setup lang="ts">
-import type { ThingModelData } from '#/api/iot/thingmodel';
-
-import { computed, onMounted, reactive, ref } from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate } from '@vben/utils';
-
-import {
-  Button,
-  Divider,
-  Form,
-  Pagination,
-  Select,
-  Table,
-  Tag,
-} from 'ant-design-vue';
-
-import { getDeviceMessagePairPage } from '#/api/iot/device/device';
-import {
-  getThingModelServiceCallTypeLabel,
-  IotDeviceMessageMethodEnum,
-  IoTThingModelTypeEnum,
-} from '#/views/iot/utils/constants';
-
-const props = defineProps<{
-  deviceId: number;
-  thingModelList: ThingModelData[];
-}>();
-
-const loading = ref(false); // 列表的加载中
-const total = ref(0); // 列表的总页数
-const list = ref([] as any[]); // 列表的数据
-const queryParams = reactive({
-  deviceId: props.deviceId,
-  method: IotDeviceMessageMethodEnum.SERVICE_INVOKE.method, // 固定筛选服务调用消息
-  identifier: '',
-  times: [] as any[],
-  pageNo: 1,
-  pageSize: 10,
-});
-const queryFormRef = ref(); // 搜索的表单
-
-/** 服务类型的物模型数据 */
-const serviceThingModels = computed(() => {
-  return props.thingModelList.filter(
-    (item: ThingModelData) =>
-      String(item.type) === String(IoTThingModelTypeEnum.SERVICE),
-  );
-});
-
-/** 查询列表 */
-async function getList() {
-  if (!props.deviceId) return;
-  loading.value = true;
-  try {
-    const data = await getDeviceMessagePairPage(queryParams);
-    list.value = data.list || [];
-    total.value = data.total;
-  } finally {
-    loading.value = false;
-  }
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.pageNo = 1;
-  getList();
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  queryFormRef.value?.resetFields();
-  queryParams.identifier = '';
-  queryParams.times = [];
-  handleQuery();
-}
-
-/** 获取服务名称 */
-function getServiceName(identifier: string | undefined) {
-  if (!identifier) return '-';
-  const service = serviceThingModels.value.find(
-    (item: ThingModelData) => item.identifier === identifier,
-  );
-  return service?.name || identifier;
-}
-
-/** 获取调用方式 */
-function getCallType(identifier: string | undefined) {
-  if (!identifier) return '-';
-  const service = serviceThingModels.value.find(
-    (item: ThingModelData) => item.identifier === identifier,
-  );
-  if (!service?.service?.callType) return '-';
-  return getThingModelServiceCallTypeLabel(service.service.callType) || '-';
-}
-
-/** 解析参数 */
-function parseParams(params: string) {
-  if (!params) return '-';
-  try {
-    const parsed = JSON.parse(params);
-    if (parsed.params) {
-      return JSON.stringify(parsed.params, null, 2);
-    }
-    return JSON.stringify(parsed, null, 2);
-  } catch {
-    return params;
-  }
-}
-
-/** 初始化 */
-onMounted(() => {
-  getList();
-});
-</script>
-
-<template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <Form
-      :model="queryParams"
-      ref="queryFormRef"
-      layout="inline"
-      @submit.prevent
-      style="margin-bottom: 16px"
-    >
-      <Form.Item label="标识符" name="identifier">
-        <Select
-          v-model:value="queryParams.identifier"
-          placeholder="请选择服务标识符"
-          allow-clear
-          style="width: 240px"
-        >
-          <Select.Option
-            v-for="service in serviceThingModels"
-            :key="service.identifier"
-            :value="service.identifier!"
-          >
-            {{ service.name }}({{ service.identifier }})
-          </Select.Option>
-        </Select>
-      </Form.Item>
-      <Form.Item label="时间范围" name="times">
-        <RangePicker
-          v-model:value="queryParams.times"
-          show-time
-          format="YYYY-MM-DD HH:mm:ss"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          style="width: 360px"
-        />
-      </Form.Item>
-      <Form.Item>
-        <Button type="primary" @click="handleQuery">
-          <template #icon>
-            <IconifyIcon icon="ep:search" />
-          </template>
-          搜索
-        </Button>
-        <Button @click="resetQuery" style="margin-left: 8px">
-          <template #icon>
-            <IconifyIcon icon="ep:refresh" />
-          </template>
-          重置
-        </Button>
-      </Form.Item>
-    </Form>
-
-    <Divider style="margin: 16px 0" />
-
-    <!-- 服务调用列表 -->
-    <Table v-loading="loading" :data-source="list" :pagination="false">
-      <Table.Column
-        title="调用时间"
-        align="center"
-        data-index="requestTime"
-        :width="180"
-      >
-        <template #default="{ record }">
-          {{
-            record.request?.reportTime
-              ? formatDate(record.request.reportTime)
-              : '-'
-          }}
-        </template>
-      </Table.Column>
-      <Table.Column
-        title="响应时间"
-        align="center"
-        data-index="responseTime"
-        :width="180"
-      >
-        <template #default="{ record }">
-          {{
-            record.reply?.reportTime ? formatDate(record.reply.reportTime) : '-'
-          }}
-        </template>
-      </Table.Column>
-      <Table.Column
-        title="标识符"
-        align="center"
-        data-index="identifier"
-        :width="160"
-      >
-        <template #default="{ record }">
-          <Tag color="blue" size="small">
-            {{ record.request?.identifier }}
-          </Tag>
-        </template>
-      </Table.Column>
-      <Table.Column
-        title="服务名称"
-        align="center"
-        data-index="serviceName"
-        :width="160"
-      >
-        <template #default="{ record }">
-          {{ getServiceName(record.request?.identifier) }}
-        </template>
-      </Table.Column>
-      <Table.Column
-        title="调用方式"
-        align="center"
-        data-index="callType"
-        :width="100"
-      >
-        <template #default="{ record }">
-          {{ getCallType(record.request?.identifier) }}
-        </template>
-      </Table.Column>
-      <Table.Column title="输入参数" align="center" data-index="inputParams">
-        <template #default="{ record }">
-          {{ parseParams(record.request?.params) }}
-        </template>
-      </Table.Column>
-      <Table.Column title="输出参数" align="center" data-index="outputParams">
-        <template #default="{ record }">
-          <span v-if="record.reply">
-            {{
-              `{"code":${record.reply.code},"msg":"${record.reply.msg}","data":${record.reply.data}\}`
-            }}
-          </span>
-          <span v-else>-</span>
-        </template>
-      </Table.Column>
-    </Table>
-
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-</template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/device-card-view.vue b/apps/web-antd/src/views/iot/device/device/modules/device-card-view.vue
deleted file mode 100644
index 19f5412e5..000000000
--- a/apps/web-antd/src/views/iot/device/device/modules/device-card-view.vue
+++ /dev/null
@@ -1,619 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-
-import { DICT_TYPE } from '@vben/constants';
-import { getDictLabel, getDictObj } from '@vben/hooks';
-import { IconifyIcon } from '@vben/icons';
-import { isValidColor, TinyColor } from '@vben/utils';
-
-import {
-  Button,
-  Card,
-  Col,
-  Empty,
-  Pagination,
-  Popconfirm,
-  Row,
-  Tag,
-} from 'ant-design-vue';
-
-import { DeviceStateEnum, getDevicePage } from '#/api/iot/device/device';
-
-defineOptions({ name: 'DeviceCardView' });
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-  create: [];
-  delete: [row: any];
-  detail: [id: number];
-  edit: [row: any];
-  model: [id: number];
-  productDetail: [productId: number];
-}>();
-
-interface Props {
-  products: any[];
-  deviceGroups: any[];
-  searchParams?: {
-    deviceName: string;
-    deviceType?: number;
-    groupId?: number;
-    nickname: string;
-    productId?: number;
-    status?: number;
-  };
-}
-
-const loading = ref(false);
-const list = ref<any[]>([]);
-const total = ref(0);
-const queryParams = ref({
-  pageNo: 1,
-  pageSize: 12,
-});
-
-const DEFAULT_STATUS_MAP: Record<
-  'default' | number,
-  { bgColor: string; borderColor: string; color: string; text: string }
-> = {
-  [DeviceStateEnum.ONLINE]: {
-    text: '在线',
-    color: '#52c41a',
-    bgColor: '#f6ffed',
-    borderColor: '#b7eb8f',
-  },
-  [DeviceStateEnum.OFFLINE]: {
-    text: '离线',
-    color: '#faad14',
-    bgColor: '#fffbe6',
-    borderColor: '#ffe58f',
-  },
-  [DeviceStateEnum.INACTIVE]: {
-    text: '未激活',
-    color: '#ff4d4f',
-    bgColor: '#fff1f0',
-    borderColor: '#ffccc7',
-  },
-  default: {
-    text: '未知状态',
-    color: '#595959',
-    bgColor: '#fafafa',
-    borderColor: '#d9d9d9',
-  },
-};
-
-const COLOR_TYPE_PRESETS: Record<
-  string,
-  { bgColor: string; borderColor: string; color: string }
-> = {
-  success: {
-    color: '#52c41a',
-    bgColor: '#f6ffed',
-    borderColor: '#b7eb8f',
-  },
-  processing: {
-    color: '#1890ff',
-    bgColor: '#e6f7ff',
-    borderColor: '#91d5ff',
-  },
-  warning: {
-    color: '#faad14',
-    bgColor: '#fffbe6',
-    borderColor: '#ffe58f',
-  },
-  error: {
-    color: '#ff4d4f',
-    bgColor: '#fff1f0',
-    borderColor: '#ffccc7',
-  },
-  default: {
-    color: '#595959',
-    bgColor: '#fafafa',
-    borderColor: '#d9d9d9',
-  },
-};
-
-function normalizeColorType(colorType?: string) {
-  switch (colorType) {
-    case 'danger': {
-      return 'error';
-    }
-    case 'default':
-    case 'error':
-    case 'processing':
-    case 'success':
-    case 'warning': {
-      return colorType;
-    }
-    case 'info': {
-      return 'default';
-    }
-    case 'primary': {
-      return 'processing';
-    }
-    default: {
-      return 'default';
-    }
-  }
-}
-
-// 获取产品名称
-function getProductName(productId: number) {
-  const product = props.products.find((p: any) => p.id === productId);
-  return product?.name || '-';
-}
-
-// 获取设备列表
-async function getList() {
-  loading.value = true;
-  try {
-    const data = await getDevicePage({
-      ...queryParams.value,
-      ...props.searchParams,
-    });
-    list.value = data.list || [];
-    total.value = data.total || 0;
-  } finally {
-    loading.value = false;
-  }
-}
-
-// 处理页码变化
-function handlePageChange(page: number, pageSize: number) {
-  queryParams.value.pageNo = page;
-  queryParams.value.pageSize = pageSize;
-  getList();
-}
-
-// 获取设备类型颜色
-function getDeviceTypeColor(deviceType: number) {
-  const colors: Record<number, string> = {
-    0: 'blue',
-    1: 'cyan',
-  };
-  return colors[deviceType] || 'default';
-}
-
-// 获取设备状态信息
-function getStatusInfo(state: null | number | string | undefined) {
-  const parsedState = Number(state);
-  const hasNumericState = Number.isFinite(parsedState);
-  const fallback = hasNumericState
-    ? DEFAULT_STATUS_MAP[parsedState] || DEFAULT_STATUS_MAP.default
-    : DEFAULT_STATUS_MAP.default;
-  const dict = getDictObj(
-    DICT_TYPE.IOT_DEVICE_STATE,
-    hasNumericState ? parsedState : state,
-  );
-  if (dict) {
-    if (!dict.colorType && !dict.cssClass) {
-      return {
-        ...fallback,
-        text: dict.label || fallback.text,
-      };
-    }
-    const presetKey = normalizeColorType(dict.colorType);
-    if (isValidColor(dict.cssClass)) {
-      const baseColor = new TinyColor(dict.cssClass);
-      return {
-        text: dict.label || fallback.text,
-        color: baseColor.toHexString(),
-        bgColor: baseColor.clone().setAlpha(0.15).toRgbString(),
-        borderColor: baseColor.clone().lighten(30).toHexString(),
-      };
-    }
-    const preset = COLOR_TYPE_PRESETS[presetKey] || COLOR_TYPE_PRESETS.default;
-    return {
-      text: dict.label || fallback.text,
-      ...preset,
-    };
-  }
-
-  return fallback;
-}
-
-onMounted(() => {
-  getList();
-});
-
-// 暴露方法供父组件调用
-defineExpose({
-  reload: getList,
-  search: () => {
-    queryParams.value.pageNo = 1;
-    getList();
-  },
-});
-</script>
-
-<template>
-  <div class="device-card-view">
-    <!-- 设备卡片列表 -->
-    <div v-loading="loading" class="min-h-[400px]">
-      <Row v-if="list.length > 0" :gutter="[16, 16]">
-        <Col
-          v-for="item in list"
-          :key="item.id"
-          :xs="24"
-          :sm="12"
-          :md="8"
-          :lg="6"
-        >
-          <Card
-            :body-style="{ padding: 0 }"
-            class="device-card"
-            :bordered="false"
-          >
-            <!-- 卡片内容 -->
-            <div class="card-content">
-              <!-- 头部：图标和状态 -->
-              <div class="card-header">
-                <div class="device-icon">
-                  <IconifyIcon icon="mdi:chip" />
-                </div>
-                <div
-                  class="status-badge"
-                  :style="{
-                    color: getStatusInfo(item.state).color,
-                    backgroundColor: getStatusInfo(item.state).bgColor,
-                    borderColor: getStatusInfo(item.state).borderColor,
-                  }"
-                >
-                  <span class="status-dot"></span>
-                  {{ getStatusInfo(item.state).text }}
-                </div>
-              </div>
-
-              <!-- 设备名称 -->
-              <div class="device-name" :title="item.deviceName">
-                {{ item.deviceName }}
-              </div>
-
-              <!-- 信息区域 -->
-              <div class="info-section">
-                <div class="info-item">
-                  <span class="label">所属产品</span>
-                  <a
-                    class="value link"
-                    @click="
-                      (e) => {
-                        e.stopPropagation();
-                        emit('productDetail', item.productId);
-                      }
-                    "
-                  >
-                    {{ getProductName(item.productId) }}
-                  </a>
-                </div>
-                <div class="info-item">
-                  <span class="label">设备类型</span>
-                  <Tag
-                    :color="getDeviceTypeColor(item.deviceType)"
-                    size="small"
-                  >
-                    {{
-                      getDictLabel(
-                        DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE,
-                        item.deviceType,
-                      )
-                    }}
-                  </Tag>
-                </div>
-                <div class="info-item">
-                  <span class="label">Deviceid</span>
-                  <span class="value code" :title="item.Deviceid || item.id">
-                    {{ item.Deviceid || item.id }}
-                  </span>
-                </div>
-              </div>
-
-              <!-- 操作按钮 -->
-              <div class="action-bar">
-                <Button
-                  type="default"
-                  size="small"
-                  class="action-btn btn-edit"
-                  @click="
-                    (e) => {
-                      e.stopPropagation();
-                      emit('edit', item);
-                    }
-                  "
-                >
-                  <IconifyIcon icon="ph:note-pencil" />
-                  编辑
-                </Button>
-                <Button
-                  type="default"
-                  size="small"
-                  class="action-btn btn-view"
-                  @click="
-                    (e: MouseEvent) => {
-                      e.stopPropagation();
-                      emit('detail', item.id);
-                    }
-                  "
-                >
-                  <IconifyIcon icon="ph:eye" />
-                  详情
-                </Button>
-                <Button
-                  type="default"
-                  size="small"
-                  class="action-btn btn-data"
-                  @click="
-                    (e: MouseEvent) => {
-                      e.stopPropagation();
-                      emit('model', item.id);
-                    }
-                  "
-                >
-                  <IconifyIcon icon="ph:database" />
-                  数据
-                </Button>
-                <Popconfirm
-                  title="确认删除该设备吗?"
-                  @confirm="() => emit('delete', item)"
-                >
-                  <Button
-                    type="default"
-                    size="small"
-                    class="action-btn btn-delete"
-                    @click="(e: MouseEvent) => e.stopPropagation()"
-                  >
-                    <IconifyIcon icon="ph:trash" />
-                  </Button>
-                </Popconfirm>
-              </div>
-            </div>
-          </Card>
-        </Col>
-      </Row>
-
-      <!-- 空状态 -->
-      <Empty v-else description="暂无设备数据" class="my-20" />
-    </div>
-
-    <!-- 分页 -->
-    <div v-if="list.length > 0" class="mt-6 flex justify-center">
-      <Pagination
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        :total="total"
-        :show-total="(total) => `共 ${total} 条`"
-        show-quick-jumper
-        show-size-changer
-        :page-size-options="['12', '24', '36', '48']"
-        @change="handlePageChange"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.device-card-view {
-  .device-card {
-    height: 100%;
-    overflow: hidden;
-    background: hsl(var(--card) / 95%);
-    border: 1px solid hsl(var(--border) / 60%);
-    border-radius: 8px;
-    box-shadow:
-      0 1px 2px 0 hsl(var(--foreground) / 4%),
-      0 1px 6px -1px hsl(var(--foreground) / 5%),
-      0 2px 4px 0 hsl(var(--foreground) / 5%);
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-    &:hover {
-      border-color: hsl(var(--border));
-      box-shadow:
-        0 1px 2px -2px hsl(var(--foreground) / 12%),
-        0 3px 6px 0 hsl(var(--foreground) / 10%),
-        0 5px 12px 4px hsl(var(--foreground) / 8%);
-      transform: translateY(-4px);
-    }
-
-    :deep(.ant-card-body) {
-      padding: 0;
-    }
-
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      padding: 16px;
-    }
-
-    // 头部区域
-    .card-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 16px;
-
-      .device-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 32px;
-        height: 32px;
-        font-size: 18px;
-        color: #fff;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        border-radius: 6px;
-        box-shadow: 0 2px 8px rgb(102 126 234 / 25%);
-      }
-
-      .status-badge {
-        display: flex;
-        gap: 4px;
-        align-items: center;
-        padding: 2px 10px;
-        font-size: 12px;
-        font-weight: 500;
-        line-height: 18px;
-        border: 1px solid;
-        border-radius: 12px;
-
-        .status-dot {
-          width: 6px;
-          height: 6px;
-          background: currentcolor;
-          border-radius: 50%;
-        }
-      }
-    }
-
-    // 设备名称
-    .device-name {
-      margin-bottom: 16px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      font-size: 16px;
-      font-weight: 600;
-      line-height: 24px;
-      color: hsl(var(--foreground) / 90%);
-      white-space: nowrap;
-    }
-
-    // 信息区域
-    .info-section {
-      flex: 1;
-      margin-bottom: 16px;
-
-      .info-item {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 12px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-
-        .label {
-          flex-shrink: 0;
-          font-size: 13px;
-          color: hsl(var(--foreground) / 60%);
-        }
-
-        .value {
-          flex: 1;
-          min-width: 0;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          font-size: 13px;
-          color: hsl(var(--foreground) / 85%);
-          text-align: right;
-          white-space: nowrap;
-
-          &.link {
-            color: hsl(var(--primary));
-            cursor: pointer;
-            transition: color 0.2s;
-
-            &:hover {
-              color: hsl(var(--primary) / 85%);
-            }
-          }
-
-          &.code {
-            font-family:
-              'SF Mono', Monaco, Inconsolata, 'Fira Code', Consolas, monospace;
-            font-size: 12px;
-            font-weight: 500;
-            color: hsl(var(--foreground) / 60%);
-          }
-        }
-      }
-    }
-
-    // 操作按钮栏
-    .action-bar {
-      position: relative;
-      z-index: 1;
-      display: flex;
-      gap: 8px;
-      padding-top: 12px;
-      border-top: 1px solid hsl(var(--border) / 40%);
-
-      .action-btn {
-        display: flex;
-        flex: 1;
-        gap: 4px;
-        align-items: center;
-        justify-content: center;
-        height: 32px;
-        padding: 4px 8px;
-        font-size: 13px;
-        font-weight: 400;
-        pointer-events: auto;
-        cursor: pointer;
-        border: 1px solid transparent;
-        border-radius: 6px;
-        transition: all 0.2s;
-
-        :deep(.anticon) {
-          font-size: 16px;
-        }
-
-        &.btn-edit {
-          color: hsl(var(--primary));
-          background: hsl(var(--primary) / 12%);
-          border-color: hsl(var(--primary) / 25%);
-
-          &:hover {
-            color: hsl(var(--primary-foreground));
-            background: hsl(var(--primary));
-            border-color: hsl(var(--primary));
-          }
-        }
-
-        &.btn-view {
-          color: hsl(var(--warning));
-          background: hsl(var(--warning) / 12%);
-          border-color: hsl(var(--warning) / 25%);
-
-          &:hover {
-            color: #fff;
-            background: hsl(var(--warning));
-            border-color: hsl(var(--warning));
-          }
-        }
-
-        &.btn-data {
-          color: hsl(var(--accent-foreground));
-          background: color-mix(
-            in srgb,
-            hsl(var(--accent)) 40%,
-            hsl(var(--card)) 60%
-          );
-          border-color: color-mix(in srgb, hsl(var(--accent)) 55%, transparent);
-
-          &:hover {
-            color: hsl(var(--accent-foreground));
-            background: hsl(var(--accent));
-            border-color: hsl(var(--accent));
-          }
-        }
-
-        &.btn-delete {
-          flex: 0 0 32px;
-          padding: 4px;
-          color: hsl(var(--destructive));
-          background: hsl(var(--destructive) / 12%);
-          border-color: hsl(var(--destructive) / 30%);
-
-          &:hover {
-            color: hsl(var(--destructive-foreground));
-            background: hsl(var(--destructive));
-            border-color: hsl(var(--destructive));
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/device-import-form.vue b/apps/web-antd/src/views/iot/device/device/modules/device-import-form.vue
deleted file mode 100644
index 710971ce1..000000000
--- a/apps/web-antd/src/views/iot/device/device/modules/device-import-form.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
-import { downloadFileFromBlobPart } from '@vben/utils';
-
-import { message } from 'ant-design-vue';
-
-import { importDeviceTemplate } from '#/api/iot/device/device';
-
-import { useImportFormSchema } from '../data';
-
-defineOptions({ name: 'IoTDeviceImportForm' });
-
-const emit = defineEmits(['success']);
-const getTitle = computed(() => '设备导入');
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  layout: 'horizontal',
-  schema: useImportFormSchema(),
-  showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-
-    const values = await formApi.getValues();
-    const file = values.file;
-
-    if (!file || file.length === 0) {
-      message.error('请上传文件');
-      return;
-    }
-
-    modalApi.lock();
-    try {
-      // 构建表单数据
-      const formData = new FormData();
-      formData.append('file', file[0].originFileObj);
-      formData.append('updateSupport', values.updateSupport ? 'true' : 'false');
-
-      // 使用 fetch 上传文件
-      const accessToken = localStorage.getItem('accessToken') || '';
-      const response = await fetch(
-        `${import.meta.env.VITE_GLOB_API_URL}/iot/device/import?updateSupport=${values.updateSupport}`,
-        {
-          method: 'POST',
-          headers: {
-            Authorization: `Bearer ${accessToken}`,
-          },
-          body: formData,
-        },
-      );
-
-      const result = await response.json();
-
-      if (result.code !== 0) {
-        message.error(result.msg || '导入失败');
-        return;
-      }
-
-      // 拼接提示语
-      const data = result.data;
-      let text = `上传成功数量：${data.createDeviceNames?.length || 0};`;
-      if (data.createDeviceNames) {
-        for (const deviceName of data.createDeviceNames) {
-          text += `< ${deviceName} >`;
-        }
-      }
-      text += `更新成功数量：${data.updateDeviceNames?.length || 0};`;
-      if (data.updateDeviceNames) {
-        for (const deviceName of data.updateDeviceNames) {
-          text += `< ${deviceName} >`;
-        }
-      }
-      text += `更新失败数量：${Object.keys(data.failureDeviceNames || {}).length};`;
-      if (data.failureDeviceNames) {
-        for (const deviceName in data.failureDeviceNames) {
-          text += `< ${deviceName}: ${data.failureDeviceNames[deviceName]} >`;
-        }
-      }
-      message.info(text);
-
-      // 关闭并提示
-      await modalApi.close();
-      emit('success');
-    } catch (error: any) {
-      message.error(error.message || '导入失败');
-    } finally {
-      modalApi.unlock();
-    }
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (isOpen) {
-      // 重置表单
-      await formApi.resetForm();
-      await formApi.setValues({
-        updateSupport: false,
-      });
-    }
-  },
-});
-
-/** 下载模板 */
-async function handleDownloadTemplate() {
-  try {
-    const res = await importDeviceTemplate();
-    downloadFileFromBlobPart({ fileName: '设备导入模版.xls', source: res });
-  } catch (error: any) {
-    message.error(error.message || '下载失败');
-  }
-}
-</script>
-
-<template>
-  <Modal :title="getTitle" class="w-1/3">
-    <Form class="mx-4" />
-    <div class="mx-4 mt-4 text-center">
-      <a class="cursor-pointer text-primary" @click="handleDownloadTemplate">
-        下载导入模板
-      </a>
-    </div>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/iot/device/device/modules/device-form.vue b/apps/web-antd/src/views/iot/device/device/modules/form.vue
similarity index 81%
rename from apps/web-antd/src/views/iot/device/device/modules/device-form.vue
rename to apps/web-antd/src/views/iot/device/device/modules/form.vue
index 39fe16a99..53e8fc3fb 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/device-form.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/form.vue
@@ -3,10 +3,11 @@ import type { IotDeviceApi } from '#/api/iot/device/device';
 
 import { computed, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { createDevice, getDevice, updateDevice } from '#/api/iot/device/device';
 import { $t } from '#/locales';
 
@@ -15,9 +16,11 @@ import { useFormSchema } from '../data';
 defineOptions({ name: 'IoTDeviceForm' });
 
 const emit = defineEmits(['success']);
-const formData = ref<any>();
+const formData = ref<IotDeviceApi.Device>();
 const getTitle = computed(() => {
-  return formData.value?.id ? '编辑设备' : '新增设备';
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['设备'])
+    : $t('ui.actionTitle.create', ['设备']);
 });
 
 const [Form, formApi] = useVbenForm({
@@ -26,7 +29,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
   },
-  wrapperClass: 'grid-cols-2',
+  wrapperClass: 'grid-cols-1',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -57,14 +60,14 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<any>();
+    const data = modalApi.getData<IotDeviceApi.Device>();
     if (!data || !data.id) {
       return;
     }
+    // 编辑模式：加载数据
     modalApi.lock();
     try {
       formData.value = await getDevice(data.id);
-      // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
diff --git a/apps/web-antd/src/views/iot/device/device/modules/device-group-form.vue b/apps/web-antd/src/views/iot/device/device/modules/group-form.vue
similarity index 92%
rename from apps/web-antd/src/views/iot/device/device/modules/device-group-form.vue
rename to apps/web-antd/src/views/iot/device/device/modules/group-form.vue
index fa85a0ffb..2666be5b0 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/device-group-form.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/group-form.vue
@@ -1,10 +1,11 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { computed, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { updateDeviceGroup } from '#/api/iot/device/device';
 import { $t } from '#/locales';
 
diff --git a/apps/web-antd/src/views/iot/device/device/modules/import-form.vue b/apps/web-antd/src/views/iot/device/device/modules/import-form.vue
new file mode 100644
index 000000000..cfedabcd2
--- /dev/null
+++ b/apps/web-antd/src/views/iot/device/device/modules/import-form.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { importDevice, importDeviceTemplate } from '#/api/iot/device/device';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+defineOptions({ name: 'IoTDeviceImportForm' });
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importDevice(data.file, data.updateSupport);
+      // 处理导入结果提示
+      const importData = result.data || result;
+      if (importData) {
+        let text = `上传成功数量：${importData.createDeviceNames?.length || 0};`;
+        if (importData.createDeviceNames?.length) {
+          for (const deviceName of importData.createDeviceNames) {
+            text += `< ${deviceName} >`;
+          }
+        }
+        text += `更新成功数量：${importData.updateDeviceNames?.length || 0};`;
+        if (importData.updateDeviceNames?.length) {
+          for (const deviceName of importData.updateDeviceNames) {
+            text += `< ${deviceName} >`;
+          }
+        }
+        text += `更新失败数量：${Object.keys(importData.failureDeviceNames || {}).length};`;
+        if (importData.failureDeviceNames) {
+          for (const deviceName in importData.failureDeviceNames) {
+            text += `< ${deviceName}: ${importData.failureDeviceNames[deviceName]} >`;
+          }
+        }
+        message.info(text);
+      }
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importDeviceTemplate();
+  downloadFileFromBlobPart({ fileName: '设备导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.import', ['设备'])" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload
+            :before-upload="beforeUpload"
+            :max-count="1"
+            accept=".xls,.xlsx"
+          >
+            <Button type="primary"> 选择 Excel 文件</Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload"> 下载导入模板</Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/iot/device/group/index.vue b/apps/web-antd/src/views/iot/device/group/index.vue
index d72341a6b..2ee40a18b 100644
--- a/apps/web-antd/src/views/iot/device/group/index.vue
+++ b/apps/web-antd/src/views/iot/device/group/index.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotDeviceGroupApi } from '#/api/iot/device/group';
 
@@ -11,12 +11,12 @@ import { deleteDeviceGroup, getDeviceGroupPage } from '#/api/iot/device/group';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DeviceGroupForm from './modules/device-group-form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'IoTDeviceGroup' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: DeviceGroupForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
diff --git a/apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue b/apps/web-antd/src/views/iot/device/group/modules/form.vue
similarity index 64%
rename from apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue
rename to apps/web-antd/src/views/iot/device/group/modules/form.vue
index 90529de77..3e1a2d521 100644
--- a/apps/web-antd/src/views/iot/device/group/modules/device-group-form.vue
+++ b/apps/web-antd/src/views/iot/device/group/modules/form.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IotDeviceGroupApi } from '#/api/iot/device/group';
 
 import { computed, ref } from 'vue';
@@ -17,17 +17,9 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-defineOptions({ name: 'IoTDeviceGroupForm' });
-
-// TODO @haohao：web-antd/src/views/iot/product/category/modules/product-category-form.vue 类似问题
-
-const emit = defineEmits<{
-  success: [];
-}>();
-
+const emit = defineEmits(['success']);
 const formData = ref<IotDeviceGroupApi.DeviceGroup>();
-
-const modalTitle = computed(() => {
+const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['设备分组'])
     : $t('ui.actionTitle.create', ['设备分组']);
@@ -40,11 +32,9 @@ const [Form, formApi] = useVbenForm({
     },
   },
   schema: useFormSchema(),
-  showCollapseButton: false,
   showDefaultActions: false,
 });
 
-// TODO @haohao：参考别的 form；1）文件的命名可以简化；2）代码可以在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -52,17 +42,13 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-
+    // 提交表单
+    const data = (await formApi.getValues()) as IotDeviceGroupApi.DeviceGroup;
     try {
-      const values = await formApi.getValues();
-
       await (formData.value?.id
-        ? updateDeviceGroup({
-            ...values,
-            id: formData.value.id,
-          } as IotDeviceGroupApi.DeviceGroup)
-        : createDeviceGroup(values as IotDeviceGroupApi.DeviceGroup));
-
+        ? updateDeviceGroup(data)
+        : createDeviceGroup(data));
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -70,28 +56,20 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.unlock();
     }
   },
-
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
-      await formApi.resetForm();
       return;
     }
-
-    // 重置表单
-    await formApi.resetForm();
-
+    // 加载数据
     const data = modalApi.getData<IotDeviceGroupApi.DeviceGroup>();
-    // 如果没有数据或没有 id，表示是新增
     if (!data || !data.id) {
-      formData.value = undefined;
       return;
     }
-
-    // 编辑模式：加载数据
     modalApi.lock();
     try {
       formData.value = await getDeviceGroup(data.id);
+      // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
@@ -101,7 +79,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="modalTitle" class="w-2/5">
+  <Modal :title="getTitle">
     <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/iot/home/data.ts b/apps/web-antd/src/views/iot/home/data.ts
index 562490f34..5a84bd8e9 100644
--- a/apps/web-antd/src/views/iot/home/data.ts
+++ b/apps/web-antd/src/views/iot/home/data.ts
@@ -1,7 +1,10 @@
 import type { IotStatisticsApi } from '#/api/iot/statistics';
 
+/** 统计数据 */
+export type StatsData = IotStatisticsApi.StatisticsSummaryRespVO;
+
 /** 默认统计数据 */
-export const defaultStatsData: IotStatisticsApi.StatisticsSummary = {
+export const defaultStatsData: StatsData = {
   productCategoryCount: 0,
   productCount: 0,
   deviceCount: 0,
diff --git a/apps/web-antd/src/views/iot/home/index.vue b/apps/web-antd/src/views/iot/home/index.vue
index 763c03e0c..4a51e6873 100644
--- a/apps/web-antd/src/views/iot/home/index.vue
+++ b/apps/web-antd/src/views/iot/home/index.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @芋艿
 import type { StatsData } from './data';
 
 import { onMounted, ref } from 'vue';
@@ -22,38 +21,7 @@ const statsData = ref<StatsData>(defaultStatsData);
 
 /** 加载统计数据 */
 async function loadStatisticsData(): Promise<StatsData> {
-  try {
-    return await getStatisticsSummary();
-  } catch (error) {
-    // TODO @haohao：后续记得删除下哈。catch 部分可以删除
-    // 开发环境：记录错误信息，便于调试
-    console.error('获取统计数据出错:', error);
-    // 开发环境：提示使用 Mock 数据，提醒检查后端接口
-    console.warn('使用 Mock 数据，请检查后端接口是否已实现');
-
-    // TODO @haohao：后续记得删除下哈。
-    // 开发调试：返回 Mock 数据，确保前端功能正常开发
-    // 生产环境：建议移除 Mock 数据，直接抛出错误或返回空数据
-    return {
-      productCategoryCount: 12,
-      productCount: 45,
-      deviceCount: 328,
-      deviceMessageCount: 15_678,
-      productCategoryTodayCount: 2,
-      productTodayCount: 5,
-      deviceTodayCount: 23,
-      deviceMessageTodayCount: 1234,
-      deviceOnlineCount: 256,
-      deviceOfflineCount: 48,
-      deviceInactiveCount: 24,
-      productCategoryDeviceCounts: {
-        智能家居: 120,
-        工业设备: 98,
-        环境监测: 65,
-        智能穿戴: 45,
-      },
-    };
-  }
+  return await getStatisticsSummary();
 }
 
 /** 加载数据 */
@@ -61,9 +29,6 @@ async function loadData() {
   loading.value = true;
   try {
     statsData.value = await loadStatisticsData();
-  } catch (error) {
-    // TODO @haohao：后续记得删除下哈。catch 部分可以删除
-    console.error('获取统计数据出错:', error);
   } finally {
     loading.value = false;
   }
@@ -139,9 +104,3 @@ onMounted(() => {
     </Row>
   </Page>
 </template>
-
-<style scoped>
-:deep(.vben-page-content) {
-  padding: 16px;
-}
-</style>
diff --git a/apps/web-antd/src/views/iot/home/modules/device-count-card.vue b/apps/web-antd/src/views/iot/home/modules/device-count-card.vue
index dc4e2f4e1..422f6e758 100644
--- a/apps/web-antd/src/views/iot/home/modules/device-count-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/device-count-card.vue
@@ -13,7 +13,7 @@ defineOptions({ name: 'DeviceCountCard' });
 
 const props = defineProps<{
   loading?: boolean;
-  statsData: IotStatisticsApi.StatisticsSummary;
+  statsData: IotStatisticsApi.StatisticsSummaryRespVO;
 }>();
 
 const deviceCountChartRef = ref();
@@ -75,9 +75,3 @@ onMounted(() => {
     </div>
   </Card>
 </template>
-
-<style scoped>
-:deep(.ant-card-body) {
-  padding: 20px;
-}
-</style>
diff --git a/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue b/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue
index d2c6bd2ea..3a93f21f0 100644
--- a/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue
@@ -13,7 +13,7 @@ defineOptions({ name: 'DeviceStateCountCard' });
 
 const props = defineProps<{
   loading?: boolean;
-  statsData: IotStatisticsApi.StatisticsSummary;
+  statsData: IotStatisticsApi.StatisticsSummaryRespVO;
 }>();
 
 const deviceOnlineChartRef = ref();
@@ -111,9 +111,3 @@ onMounted(() => {
     </Row>
   </Card>
 </template>
-
-<style scoped>
-:deep(.ant-card-body) {
-  padding: 20px;
-}
-</style>
diff --git a/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue b/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
index 46da28ea8..f4a2a16cd 100644
--- a/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
@@ -23,7 +23,9 @@ const messageChartRef = ref();
 const { renderEcharts } = useEcharts(messageChartRef);
 
 const loading = ref(false);
-const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDate[]>([]);
+const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>(
+  [],
+);
 
 /** 时间范围（仅日期，不包含时分秒） */
 const dateRange = ref<[string, string]>([
@@ -38,7 +40,7 @@ function formatDateRangeWithTime(dates: [string, string]): [string, string] {
 }
 
 /** 查询参数 */
-const queryParams = reactive<IotStatisticsApi.DeviceMessageReq>({
+const queryParams = reactive<IotStatisticsApi.DeviceMessageReqVO>({
   interval: 1, // 默认按天
   times: formatDateRangeWithTime(dateRange.value),
 });
@@ -89,12 +91,6 @@ async function fetchMessageData() {
   loading.value = true;
   try {
     messageData.value = await getDeviceMessageSummaryByDate(queryParams);
-  } catch (error) {
-    // TODO @haohao：catch 可以删除哈；
-    // 开发环境：记录错误信息，便于调试
-    console.error('获取消息统计数据失败:', error);
-    // 错误时清空数据，避免显示错误的数据
-    messageData.value = [];
   } finally {
     loading.value = false;
     await renderChartWhenReady();
diff --git a/apps/web-antd/src/views/iot/product/category/data.ts b/apps/web-antd/src/views/iot/product/category/data.ts
index da109b8bc..57dcae56f 100644
--- a/apps/web-antd/src/views/iot/product/category/data.ts
+++ b/apps/web-antd/src/views/iot/product/category/data.ts
@@ -38,8 +38,10 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入分类排序',
         class: 'w-full',
         min: 0,
+        precision: 0,
       },
-      rules: z.number().min(0, '分类排序不能为空'),
+      defaultValue: 0,
+      rules: z.number().min(0, '分类排序不能小于 0'),
     },
     {
       fieldName: 'status',
diff --git a/apps/web-antd/src/views/iot/product/category/index.vue b/apps/web-antd/src/views/iot/product/category/index.vue
index 05a56ee6d..3dc7201b7 100644
--- a/apps/web-antd/src/views/iot/product/category/index.vue
+++ b/apps/web-antd/src/views/iot/product/category/index.vue
@@ -14,12 +14,12 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import ProductCategoryForm from './modules/product-category-form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'IoTProductCategory' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: ProductCategoryForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
diff --git a/apps/web-antd/src/views/iot/product/category/modules/product-category-form.vue b/apps/web-antd/src/views/iot/product/category/modules/form.vue
similarity index 82%
rename from apps/web-antd/src/views/iot/product/category/modules/product-category-form.vue
rename to apps/web-antd/src/views/iot/product/category/modules/form.vue
index 792c7ddac..fc92904d0 100644
--- a/apps/web-antd/src/views/iot/product/category/modules/product-category-form.vue
+++ b/apps/web-antd/src/views/iot/product/category/modules/form.vue
@@ -17,8 +17,6 @@ import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';
 
-// TODO @haohao：应该是 form.vue，不用前缀；
-
 const emit = defineEmits(['success']);
 const formData = ref<IotProductCategoryApi.ProductCategory>();
 const getTitle = computed(() => {
@@ -40,7 +38,6 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-// TODO @haohao：参考 apps/web-antd/src/views/system/dept/modules/form.vue 简化 useVbenModal 里的代码；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -66,25 +63,13 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
-      formApi.resetForm();
       return;
     }
-
-    // 重置表单
-    await formApi.resetForm();
-
+    // 加载数据
     const data = modalApi.getData<IotProductCategoryApi.ProductCategory>();
-    // 如果没有数据或没有 id，表示是新增
     if (!data || !data.id) {
-      formData.value = undefined;
-      // 新增模式：设置默认值
-      await formApi.setValues({
-        sort: 0,
-        status: 1,
-      });
       return;
     }
-
     // 编辑模式：加载数据
     modalApi.lock();
     try {
diff --git a/apps/web-antd/src/views/iot/product/product/data.ts b/apps/web-antd/src/views/iot/product/product/data.ts
index 066cc1330..c82538019 100644
--- a/apps/web-antd/src/views/iot/product/product/data.ts
+++ b/apps/web-antd/src/views/iot/product/product/data.ts
@@ -1,7 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotProductCategoryApi } from '#/api/iot/product/category';
 
-import { h, ref } from 'vue';
+import { h } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -10,160 +11,16 @@ import { Button } from 'ant-design-vue';
 
 import { z } from '#/adapter/form';
 import { getSimpleProductCategoryList } from '#/api/iot/product/category';
-import { getProductPage } from '#/api/iot/product/product';
 
-/** 新增/修改产品的表单 */
-export function useFormSchema(formApi?: any): VbenFormSchema[] {
-  return [
-    {
-      component: 'Input',
-      fieldName: 'id',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'productKey',
-      label: 'ProductKey',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入 ProductKey',
-      },
-      dependencies: {
-        triggerFields: ['id'],
-        if(values) {
-          return !values.id;
-        },
-      },
-      rules: z
-        .string()
-        .min(1, 'ProductKey 不能为空')
-        .max(32, 'ProductKey 长度不能超过 32 个字符'),
-      suffix: () => {
-        // 创建时的 ProductKey 字段（带生成按钮）
-        return h(
-          Button,
-          {
-            type: 'default',
-            onClick: () => {
-              formApi?.setFieldValue('productKey', generateProductKey());
-            },
-          },
-          { default: () => '重新生成' },
-        );
-      },
-    },
-    {
-      fieldName: 'productKey',
-      label: 'ProductKey',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入 ProductKey',
-        disabled: true, // 编辑时的 ProductKey 字段（禁用，无按钮）
-      },
-      dependencies: {
-        triggerFields: ['id'],
-        if(values) {
-          return !!values.id;
-        },
-      },
-      rules: z
-        .string()
-        .min(1, 'ProductKey 不能为空')
-        .max(32, 'ProductKey 长度不能超过 32 个字符'),
-    },
-    {
-      fieldName: 'name',
-      label: '产品名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入产品名称',
-      },
-      rules: z
-        .string()
-        .min(1, '产品名称不能为空')
-        .max(64, '产品名称长度不能超过 64 个字符'),
-    },
-    {
-      fieldName: 'categoryId',
-      label: '产品分类',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleProductCategoryList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择产品分类',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'deviceType',
-      label: '设备类型',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE, 'number'),
-        buttonStyle: 'solid',
-        optionType: 'button',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'netType',
-      label: '联网方式',
-      component: 'Select',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.IOT_NET_TYPE, 'number'),
-        placeholder: '请选择联网方式',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'codecType',
-      label: '数据格式',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.IOT_CODEC_TYPE, 'string'),
-        buttonStyle: 'solid',
-        optionType: 'button',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'status',
-      label: '产品状态',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        buttonStyle: 'solid',
-        optionType: 'button',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'icon',
-      label: '产品图标',
-      component: 'ImageUpload',
-    },
-    {
-      fieldName: 'picUrl',
-      label: '产品图片',
-      component: 'ImageUpload',
-    },
-    {
-      fieldName: 'description',
-      label: '产品描述',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入产品描述',
-        rows: 3,
-      },
-    },
-  ];
-}
+/** 产品分类列表缓存 */
+let categoryList: IotProductCategoryApi.ProductCategory[] = [];
+getSimpleProductCategoryList().then((data) => (categoryList = data));
 
 /** 基础表单字段（不含图标、图片、描述） */
-export function useBasicFormSchema(formApi?: any): VbenFormSchema[] {
+export function useBasicFormSchema(
+  formApi?: any,
+  generateProductKey?: () => string,
+): VbenFormSchema[] {
   return [
     {
       component: 'Input',
@@ -196,7 +53,9 @@ export function useBasicFormSchema(formApi?: any): VbenFormSchema[] {
           {
             type: 'default',
             onClick: () => {
-              formApi?.setFieldValue('productKey', generateProductKey());
+              if (generateProductKey) {
+                formApi?.setFieldValue('productKey', generateProductKey());
+              }
             },
           },
           { default: () => '重新生成' },
@@ -283,10 +142,11 @@ export function useBasicFormSchema(formApi?: any): VbenFormSchema[] {
       label: '产品状态',
       component: 'RadioGroup',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        options: getDictOptions(DICT_TYPE.IOT_PRODUCT_STATUS, 'number'),
         buttonStyle: 'solid',
         optionType: 'button',
       },
+      defaultValue: 0,
       rules: 'required',
     },
     {
@@ -308,11 +168,10 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'icon',
       label: '产品图标',
-      component: 'IconPicker', // 用这个组件 产品卡片列表 可以根据这个显示 否则就显示默认的
+      component: 'IconPicker',
       componentProps: {
         placeholder: '请选择产品图标',
         prefix: 'carbon',
-        autoFetchApi: false,
       },
     },
     {
@@ -328,32 +187,6 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
         placeholder: '请输入产品描述',
         rows: 3,
       },
-      formItemClass: 'col-span-2', // 让描述占满两列
-    },
-  ];
-}
-
-/** 列表的搜索表单 */
-// TODO @haohao：貌似用不上？
-export function useGridFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'name',
-      label: '产品名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入产品名称',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'productKey',
-      label: 'ProductKey',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入产品标识',
-        allowClear: true,
-      },
     },
   ];
 }
@@ -375,7 +208,8 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'categoryId',
       title: '品类',
       minWidth: 120,
-      slots: { default: 'category' },
+      formatter: ({ cellValue }) =>
+        categoryList.find((c) => c.id === cellValue)?.name || '未分类',
     },
     {
       field: 'deviceType',
@@ -390,13 +224,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'icon',
       title: '产品图标',
       width: 100,
-      slots: { default: 'icon' },
+      cellRender: {
+        name: 'CellImage',
+      },
     },
     {
       field: 'picUrl',
       title: '产品图片',
       width: 100,
-      slots: { default: 'picUrl' },
+      cellRender: {
+        name: 'CellImage',
+      },
     },
     {
       field: 'createTime',
@@ -412,43 +250,3 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
-
-/** 查询产品列表 */
-// TODO @haohao：貌似可以删除？
-export async function queryProductList({ page }: any, searchParams: any) {
-  return await getProductPage({
-    pageNo: page.currentPage,
-    pageSize: page.pageSize,
-    ...searchParams,
-  });
-}
-
-/** 创建图片预览状态 */
-// TODO @haohao：可能不一定用的上；
-export function useImagePreview() {
-  const previewVisible = ref(false);
-  const previewImage = ref('');
-
-  function handlePreviewImage(url: string) {
-    previewImage.value = url;
-    previewVisible.value = true;
-  }
-
-  return {
-    previewVisible,
-    previewImage,
-    handlePreviewImage,
-  };
-}
-
-// TODO @haohao：放到对应的 form 里
-/** 生成 ProductKey（包含大小写字母和数字） */
-export function generateProductKey(): string {
-  const chars =
-    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-  let result = '';
-  for (let i = 0; i < 16; i++) {
-    result += chars.charAt(Math.floor(Math.random() * chars.length));
-  }
-  return result;
-}
diff --git a/apps/web-antd/src/views/iot/product/product/modules/detail/index.vue b/apps/web-antd/src/views/iot/product/product/detail/index.vue
similarity index 89%
rename from apps/web-antd/src/views/iot/product/product/modules/detail/index.vue
rename to apps/web-antd/src/views/iot/product/product/detail/index.vue
index f63389860..5fc1fc7bd 100644
--- a/apps/web-antd/src/views/iot/product/product/modules/detail/index.vue
+++ b/apps/web-antd/src/views/iot/product/product/detail/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { IotProductApi } from '#/api/iot/product/product';
 
-// TODO @haohao：detail 挪到 yudao-ui-admin-vben-v5/apps/web-antd/src/views/iot/product/product/detail 下。独立一个，不放在 modules 里。
 import { onMounted, provide, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
@@ -13,8 +12,8 @@ import { getDeviceCount } from '#/api/iot/device/device';
 import { getProduct } from '#/api/iot/product/product';
 import IoTProductThingModel from '#/views/iot/thingmodel/index.vue';
 
-import ProductDetailsHeader from './product-details-header.vue';
-import ProductDetailsInfo from './product-details-info.vue';
+import ProductDetailsHeader from './modules/header.vue';
+import ProductDetailsInfo from './modules/info.vue';
 
 defineOptions({ name: 'IoTProductDetail' });
 
diff --git a/apps/web-antd/src/views/iot/product/product/modules/detail/product-details-header.vue b/apps/web-antd/src/views/iot/product/product/detail/modules/header.vue
similarity index 57%
rename from apps/web-antd/src/views/iot/product/product/modules/detail/product-details-header.vue
rename to apps/web-antd/src/views/iot/product/product/detail/modules/header.vue
index 2aab6af18..864946721 100644
--- a/apps/web-antd/src/views/iot/product/product/modules/detail/product-details-header.vue
+++ b/apps/web-antd/src/views/iot/product/product/detail/modules/header.vue
@@ -1,15 +1,16 @@
-<script setup lang="ts">
-// TODO @haohao：放到 detail/modules 里。然后名字就是 header.vue
+<script lang="ts" setup>
 import type { IotProductApi } from '#/api/iot/product/product';
 
-import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { Button, Card, Descriptions, message } from 'ant-design-vue';
+import { useVbenModal } from '@vben/common-ui';
+import { ProductStatusEnum } from '@vben/constants';
+
+import { Button, Card, Descriptions, message, Modal } from 'ant-design-vue';
 
 import { updateProductStatus } from '#/api/iot/product/product';
 
-import ProductForm from '../product-form.vue';
+import Form from '../../modules/form.vue';
 
 interface Props {
   product: IotProductApi.Product;
@@ -25,7 +26,11 @@ const emit = defineEmits<{
 }>();
 
 const router = useRouter();
-const formRef = ref();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
 
 /** 复制到剪贴板 */
 async function copyToClipboard(text: string) {
@@ -46,59 +51,63 @@ function goToDeviceList(productId: number) {
 }
 
 /** 打开编辑表单 */
-function openForm(type: string, id?: number) {
-  formRef.value?.open(type, id);
+function openEditForm(row: IotProductApi.Product) {
+  formModalApi.setData(row).open();
 }
 
 /** 发布产品 */
-async function confirmPublish(id: number) {
-  // TODO @haohao：最好类似；async function handleDeleteBatch() { 的做法：1）有个 confirm；2）有个 loading
-  try {
-    await updateProductStatus(id, 1); // TODO @好好】：1 和 0，最好用枚举；
-    message.success('发布成功');
-    emit('refresh');
-  } catch {
-    message.error('发布失败');
-  }
+function handlePublish(product: IotProductApi.Product) {
+  Modal.confirm({
+    title: '确认发布',
+    content: `确认要发布产品「${product.name}」吗？`,
+    async onOk() {
+      await updateProductStatus(product.id!, ProductStatusEnum.PUBLISHED);
+      message.success('发布成功');
+      emit('refresh');
+    },
+  });
 }
 
 /** 撤销发布 */
-async function confirmUnpublish(id: number) {
-  // TODO @haohao：最好类似；async function handleDeleteBatch() { 的做法：1）有个 confirm；2）有个 loading
-  try {
-    await updateProductStatus(id, 0);
-    message.success('撤销发布成功');
-    emit('refresh');
-  } catch {
-    message.error('撤销发布失败');
-  }
+function handleUnpublish(product: IotProductApi.Product) {
+  Modal.confirm({
+    title: '确认撤销发布',
+    content: `确认要撤销发布产品「${product.name}」吗？`,
+    async onOk() {
+      await updateProductStatus(product.id!, ProductStatusEnum.UNPUBLISHED);
+      message.success('撤销发布成功');
+      emit('refresh');
+    },
+  });
 }
 </script>
 
 <template>
   <div class="mb-4">
+    <FormModal @success="emit('refresh')" />
+
     <div class="flex items-start justify-between">
       <div>
         <h2 class="text-xl font-bold">{{ product.name }}</h2>
       </div>
       <div class="space-x-2">
         <Button
-          :disabled="product.status === 1"
-          @click="openForm('update', product.id)"
+          :disabled="product.status === ProductStatusEnum.PUBLISHED"
+          @click="openEditForm(product)"
         >
           编辑
         </Button>
         <Button
-          v-if="product.status === 0"
+          v-if="product.status === ProductStatusEnum.UNPUBLISHED"
           type="primary"
-          @click="confirmPublish(product.id!)"
+          @click="handlePublish(product)"
         >
           发布
         </Button>
         <Button
-          v-if="product.status === 1"
+          v-if="product.status === ProductStatusEnum.PUBLISHED"
           danger
-          @click="confirmUnpublish(product.id!)"
+          @click="handleUnpublish(product)"
         >
           撤销发布
         </Button>
@@ -110,8 +119,8 @@ async function confirmUnpublish(id: number) {
         <Descriptions.Item label="ProductKey">
           {{ product.productKey }}
           <Button
-            size="small"
             class="ml-2"
+            size="small"
             @click="copyToClipboard(product.productKey || '')"
           >
             复制
@@ -127,9 +136,5 @@ async function confirmUnpublish(id: number) {
         </Descriptions.Item>
       </Descriptions>
     </Card>
-
-    <!-- 表单弹窗 -->
-    <!-- TODO @haohao：弹不出来；另外，应该用 index.vue 里，Form 的声明方式哈。 -->
-    <ProductForm ref="formRef" @success="emit('refresh')" />
   </div>
 </template>
diff --git a/apps/web-antd/src/views/iot/product/product/modules/detail/product-details-info.vue b/apps/web-antd/src/views/iot/product/product/detail/modules/info.vue
similarity index 78%
rename from apps/web-antd/src/views/iot/product/product/modules/detail/product-details-info.vue
rename to apps/web-antd/src/views/iot/product/product/detail/modules/info.vue
index fbbd07246..5e5604766 100644
--- a/apps/web-antd/src/views/iot/product/product/modules/detail/product-details-info.vue
+++ b/apps/web-antd/src/views/iot/product/product/detail/modules/info.vue
@@ -1,12 +1,10 @@
-<script setup lang="ts">
-// TODO @haohao：放到 detail/modules 里。然后名字就是 info.vue
+<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 '#/api/iot/product/product';
 import { DictTag } from '#/components/dict-tag';
 
 interface Props {
@@ -24,8 +22,7 @@ function formatDate(date?: Date | string) {
 
 <template>
   <Card title="产品信息">
-    <!-- TODO @haohao：看看是不是用 description 组件 -->
-    <Descriptions bordered :column="3" size="small">
+    <Descriptions :column="3" bordered size="small">
       <Descriptions.Item label="产品名称">
         {{ product.name }}
       </Descriptions.Item>
@@ -48,7 +45,7 @@ function formatDate(date?: Date | string) {
         {{ product.codecType || '-' }}
       </Descriptions.Item>
       <Descriptions.Item label="产品状态">
-        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="product.status" />
+        <DictTag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
       </Descriptions.Item>
       <Descriptions.Item
         v-if="
@@ -60,7 +57,7 @@ function formatDate(date?: Date | string) {
       >
         <DictTag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
       </Descriptions.Item>
-      <Descriptions.Item label="产品描述" :span="3">
+      <Descriptions.Item :span="3" label="产品描述">
         {{ product.description || '-' }}
       </Descriptions.Item>
     </Descriptions>
diff --git a/apps/web-antd/src/views/iot/product/product/index.vue b/apps/web-antd/src/views/iot/product/product/index.vue
index 0e5dcef8c..0e94d1adf 100644
--- a/apps/web-antd/src/views/iot/product/product/index.vue
+++ b/apps/web-antd/src/views/iot/product/product/index.vue
@@ -1,14 +1,17 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotProductCategoryApi } from '#/api/iot/product/category';
+import type { IotProductApi } from '#/api/iot/product/product';
 
-import { onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { ProductStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { Button, Card, Image, Input, message, Space } from 'ant-design-vue';
+import { Button, Card, Input, message, Space } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSimpleProductCategoryList } from '#/api/iot/product/category';
@@ -19,25 +22,23 @@ import {
 } from '#/api/iot/product/product';
 import { $t } from '#/locales';
 
-import { useGridColumns, useImagePreview } from './data';
-import ProductCardView from './modules/product-card-view.vue';
-import ProductForm from './modules/product-form.vue';
+import { useGridColumns } from './data';
+import ProductCardView from './modules/card-view.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'IoTProduct' });
 
 const router = useRouter();
-const categoryList = ref<any[]>([]); // TODO @haohao：category 类型
+const categoryList = ref<IotProductCategoryApi.ProductCategory[]>([]);
 const viewMode = ref<'card' | 'list'>('card');
 const cardViewRef = ref();
-const searchParams = ref({
+const queryParams = ref({
   name: '',
   productKey: '',
 }); // 搜索参数
 
-const { previewVisible, previewImage, handlePreviewImage } = useImagePreview();
-
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: ProductForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -46,42 +47,40 @@ async function loadCategories() {
   categoryList.value = await getSimpleProductCategoryList();
 }
 
-/** 获取分类名称 */
-function getCategoryNameByValue(categoryId: number) {
-  const category = categoryList.value.find((c: any) => c.id === categoryId);
-  return category?.name || '未分类';
-}
-
-// TODO @haohao：要不要改成 handleRefresh，注释改成“刷新表格”，更加统一。
 /** 搜索产品 */
 function handleSearch() {
   if (viewMode.value === 'list') {
-    gridApi.formApi.setValues(searchParams.value);
-    gridApi.query();
-  } else {
-    cardViewRef.value?.search(searchParams.value);
+    gridApi.formApi.setValues(queryParams.value);
   }
+  gridApi.query();
 }
 
 /** 重置搜索 */
 function handleReset() {
-  searchParams.value.name = '';
-  searchParams.value.productKey = '';
+  queryParams.value.name = '';
+  queryParams.value.productKey = '';
   handleSearch();
 }
 
 /** 刷新表格 */
 function handleRefresh() {
-  if (viewMode.value === 'list') {
-    gridApi.query();
-  } else {
-    cardViewRef.value?.reload();
+  gridApi.query();
+}
+
+/** 视图切换 */
+async function handleViewModeChange(mode: 'card' | 'list') {
+  if (viewMode.value === mode) {
+    return; // 如果已经是目标视图，不需要切换
   }
+  viewMode.value = mode;
+  // 等待视图更新后再触发查询
+  await nextTick();
+  gridApi.query();
 }
 
 /** 导出表格 */
 async function handleExport() {
-  const data = await exportProduct(searchParams.value);
+  const data = await exportProduct(queryParams.value);
   downloadFileFromBlobPart({ fileName: '产品列表.xls', source: data });
 }
 
@@ -108,19 +107,19 @@ function handleCreate() {
 }
 
 /** 编辑产品 */
-function handleEdit(row: any) {
+function handleEdit(row: IotProductApi.Product) {
   formModalApi.setData(row).open();
 }
 
 /** 删除产品 */
-async function handleDelete(row: any) {
+async function handleDelete(row: IotProductApi.Product) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
     await deleteProduct(row.id!);
-    message.success($t('ui.actionMessage.deleteSuccess'));
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -128,10 +127,6 @@ async function handleDelete(row: any) {
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
-  // TODO @haohao：这个不用，可以删除掉的
-  formOptions: {
-    schema: [],
-  },
   gridOptions: {
     columns: useGridColumns(),
     height: 'auto',
@@ -142,7 +137,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getProductPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            ...searchParams.value,
+            ...queryParams.value,
           });
         },
       },
@@ -155,9 +150,20 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions, // TODO @haohao：这里有个 <> 泛型
+  } as VxeTableGridOptions<IotProductApi.Product>,
 });
 
+/** 包装 gridApi.query() 方法，统一列表视图和卡片视图的查询接口 */
+const originalQuery = gridApi.query.bind(gridApi);
+gridApi.query = async (params?: Record<string, any>) => {
+  if (viewMode.value === 'list') {
+    return await originalQuery(params);
+  } else {
+    // 卡片视图：调用卡片组件的 query 方法
+    cardViewRef.value?.query();
+  }
+};
+
 /** 初始化 */
 onMounted(() => {
   loadCategories();
@@ -172,24 +178,22 @@ onMounted(() => {
     <Card :body-style="{ padding: '16px' }" class="mb-4">
       <!-- 搜索表单 -->
       <div class="mb-3 flex items-center gap-3">
-        <!-- TODO @haohao：tindwind -->
         <Input
-          v-model:value="searchParams.name"
-          placeholder="请输入产品名称"
+          v-model:value="queryParams.name"
           allow-clear
-          style="width: 220px"
+          class="w-[220px]"
+          placeholder="请输入产品名称"
           @press-enter="handleSearch"
         >
           <template #prefix>
             <span class="text-gray-400">产品名称</span>
           </template>
         </Input>
-        <!-- TODO @haohao：tindwind -->
         <Input
-          v-model:value="searchParams.productKey"
-          placeholder="请输入产品标识"
+          v-model:value="queryParams.productKey"
           allow-clear
-          style="width: 220px"
+          class="w-[220px]"
+          placeholder="请输入产品标识"
           @press-enter="handleSearch"
         >
           <template #prefix>
@@ -197,39 +201,43 @@ onMounted(() => {
           </template>
         </Input>
         <Button type="primary" @click="handleSearch">
-          <IconifyIcon icon="ant-design:search-outlined" class="mr-1" />
+          <IconifyIcon class="mr-1" icon="ant-design:search-outlined" />
           搜索
         </Button>
         <Button @click="handleReset">
-          <IconifyIcon icon="ant-design:reload-outlined" class="mr-1" />
+          <IconifyIcon class="mr-1" icon="ant-design:reload-outlined" />
           重置
         </Button>
       </div>
       <!-- 操作按钮 -->
       <div class="flex items-center justify-between">
-        <Space :size="12">
-          <Button type="primary" @click="handleCreate">
-            <!-- TODO @haohao：按钮使用中立的，ACTION_ICON.ADD -->
-            <IconifyIcon icon="ant-design:plus-outlined" class="mr-1" />
-            新增产品
-          </Button>
-          <Button type="primary" @click="handleExport">
-            <!-- TODO @haohao：按钮使用中立的，ACTION_ICON.EXPORT -->
-            <IconifyIcon icon="ant-design:download-outlined" class="mr-1" />
-            导出
-          </Button>
-        </Space>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['产品']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              onClick: handleExport,
+            },
+          ]"
+        />
         <!-- 视图切换 -->
         <Space :size="4">
           <Button
             :type="viewMode === 'card' ? 'primary' : 'default'"
-            @click="viewMode = 'card'"
+            @click="handleViewModeChange('card')"
           >
             <IconifyIcon icon="ant-design:appstore-outlined" />
           </Button>
           <Button
             :type="viewMode === 'list' ? 'primary' : 'default'"
-            @click="viewMode = 'list'"
+            @click="handleViewModeChange('list')"
           >
             <IconifyIcon icon="ant-design:unordered-list-outlined" />
           </Button>
@@ -237,54 +245,19 @@ onMounted(() => {
       </div>
     </Card>
 
-    <Grid v-show="viewMode === 'list'">
-      <!-- TODO @haohao：这里貌似可以删除掉 -->
-      <template #toolbar-tools>
-        <div></div>
-      </template>
-      <!-- 产品分类列 -->
-      <!-- TODO @haohao：这里应该可以拿到 data.ts，参考别的模块；类似 apps/web-antd/src/views/ai/image/manager/data.ts 里，里面查询 category ，和自己渲染-->
-      <template #category="{ row }">
-        <span>{{ getCategoryNameByValue(row.categoryId) }}</span>
-      </template>
-      <!-- 产品图标列 -->
-      <!-- TODO @haohao：直接用 Image 组件，就 ok 了呀。在 data.ts 里 -->
-      <template #icon="{ row }">
-        <Button
-          v-if="row.icon"
-          type="link"
-          size="small"
-          @click="handlePreviewImage(row.icon)"
-        >
-          <IconifyIcon icon="ant-design:eye-outlined" class="text-lg" />
-        </Button>
-        <span v-else class="text-gray-400">-</span>
-      </template>
-      <!-- TODO @haohao：直接用 Image 组件，就 ok 了呀。在 data.ts 里 -->
-      <!-- 产品图片列 -->
-      <template #picUrl="{ row }">
-        <Button
-          v-if="row.picUrl"
-          type="link"
-          size="small"
-          @click="handlePreviewImage(row.picUrl)"
-        >
-          <IconifyIcon icon="ant-design:eye-outlined" class="text-lg" />
-        </Button>
-        <span v-else class="text-gray-400">-</span>
-      </template>
+    <Grid v-show="viewMode === 'list'" table-title="产品列表">
       <template #actions="{ row }">
         <TableAction
           :actions="[
             {
-              label: '详情',
+              label: $t('common.detail'),
               type: 'link',
-              onClick: openProductDetail.bind(null, row.id),
+              onClick: openProductDetail.bind(null, row.id!),
             },
             {
               label: '物模型',
               type: 'link',
-              onClick: openThingModel.bind(null, row.id),
+              onClick: openThingModel.bind(null, row.id!),
             },
             {
               label: $t('common.edit'),
@@ -297,8 +270,9 @@ onMounted(() => {
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              disabled: row.status === ProductStatusEnum.PUBLISHED,
               popConfirm: {
-                title: `确认删除产品 ${row.name} 吗?`,
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
               },
             },
@@ -312,50 +286,12 @@ onMounted(() => {
       v-show="viewMode === 'card'"
       ref="cardViewRef"
       :category-list="categoryList"
-      :search-params="searchParams"
+      :search-params="queryParams"
       @create="handleCreate"
-      @edit="handleEdit"
       @delete="handleDelete"
       @detail="openProductDetail"
+      @edit="handleEdit"
       @thing-model="openThingModel"
     />
-
-    <!-- 图片预览 -->
-    <!-- TODO @haohao：tindwind -->
-    <div style="display: none">
-      <!-- TODO @haohao：是不是通过 Image 直接实现预览 -->
-      <Image.PreviewGroup
-        :preview="{
-          visible: previewVisible,
-          onVisibleChange: (visible) => (previewVisible = visible),
-        }"
-      >
-        <Image :src="previewImage" />
-      </Image.PreviewGroup>
-    </div>
   </Page>
 </template>
-<style scoped>
-/** TODO @haohao：貌似这 2 个 css 没啥用？ */
-:deep(.vxe-toolbar div) {
-  z-index: 1;
-}
-
-/* 隐藏 VxeGrid 自带的搜索表单区域 */
-:deep(.vxe-grid--form-wrapper) {
-  display: none !important;
-}
-</style>
-
-<style>
-/* 控制图片预览的大小 */
-.ant-image-preview-img {
-  max-width: 80% !important;
-  max-height: 80% !important;
-  object-fit: contain !important;
-}
-
-.ant-image-preview-operations {
-  background: rgb(0 0 0 / 70%) !important;
-}
-</style>
diff --git a/apps/web-antd/src/views/iot/product/product/modules/product-card-view.vue b/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
similarity index 68%
rename from apps/web-antd/src/views/iot/product/product/modules/product-card-view.vue
rename to apps/web-antd/src/views/iot/product/product/modules/card-view.vue
index a1d3eea2c..8ae416fea 100644
--- a/apps/web-antd/src/views/iot/product/product/modules/product-card-view.vue
+++ b/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
@@ -1,8 +1,7 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
-import { getDictLabel } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 
 import {
@@ -10,19 +9,23 @@ import {
   Card,
   Col,
   Empty,
+  Image,
   Pagination,
   Popconfirm,
   Row,
-  Tag,
   Tooltip,
 } from 'ant-design-vue';
 
+import { DictTag } from '#/components/dict-tag';
 import { getProductPage } from '#/api/iot/product/product';
 
-// TODO @haohao：应该是 card-view.vue；
-
-// TODO @haohao：命名不太对；可以简化下；
-defineOptions({ name: 'ProductCardView' });
+interface Props {
+  categoryList: any[];
+  searchParams?: {
+    name: string;
+    productKey: string;
+  };
+}
 
 const props = defineProps<Props>();
 
@@ -34,14 +37,6 @@ const emit = defineEmits<{
   thingModel: [productId: number];
 }>();
 
-interface Props {
-  categoryList: any[];
-  searchParams?: {
-    name: string;
-    productKey: string;
-  };
-}
-
 const loading = ref(false);
 const list = ref<any[]>([]);
 const total = ref(0);
@@ -50,14 +45,13 @@ const queryParams = ref({
   pageSize: 12,
 });
 
-// TODO @haohao：注释的优化；
-// 获取分类名称
+/** 获取分类名称 */
 function getCategoryName(categoryId: number) {
   const category = props.categoryList.find((c: any) => c.id === categoryId);
   return category?.name || '未分类';
 }
 
-// 获取产品列表
+/** 获取产品列表 */
 async function getList() {
   loading.value = true;
   try {
@@ -72,25 +66,16 @@ async function getList() {
   }
 }
 
-// 处理页码变化
+/** 处理页码变化 */
 function handlePageChange(page: number, pageSize: number) {
   queryParams.value.pageNo = page;
   queryParams.value.pageSize = pageSize;
   getList();
 }
 
-// 获取设备类型颜色
-function getDeviceTypeColor(deviceType: number) {
-  const colors: Record<number, string> = {
-    0: 'blue',
-    1: 'green',
-  };
-  return colors[deviceType] || 'default';
-}
-
 defineExpose({
   reload: getList,
-  search: () => {
+  query: () => {
     queryParams.value.pageNo = 1;
     getList();
   },
@@ -114,17 +99,17 @@ onMounted(() => {
           :sm="12"
           :md="12"
           :lg="6"
-          class="mb-4"
         >
-          <!-- TODO @haohao：卡片之间的上下距离，太宽了。 -->
-          <Card :body-style="{ padding: '20px' }" class="product-card h-full">
+          <Card
+            :body-style="{ padding: '16px' }"
+            class="product-card h-full rounded-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+          >
             <!-- 顶部标题区域 -->
-            <div class="mb-4 flex items-start">
-              <!-- TODO @haohao：图标太大了；看看是不是参考 vue3 + element-plus 搞小点；然后标题居中。 -->
+            <div class="mb-3 flex items-center">
               <div class="product-icon">
                 <IconifyIcon
-                  :icon="item.icon || 'ant-design:inbox-outlined'"
-                  class="text-3xl"
+                  :icon="item.icon || 'lucide:box'"
+                  class="text-xl"
                 />
               </div>
               <div class="ml-3 min-w-0 flex-1">
@@ -132,7 +117,7 @@ onMounted(() => {
               </div>
             </div>
             <!-- 内容区域 -->
-            <div class="mb-4 flex items-start">
+            <div class="mb-3 flex items-start">
               <div class="info-list flex-1">
                 <div class="info-item">
                   <span class="info-label">产品分类</span>
@@ -142,34 +127,33 @@ onMounted(() => {
                 </div>
                 <div class="info-item">
                   <span class="info-label">产品类型</span>
-                  <Tag
-                    :color="getDeviceTypeColor(item.deviceType)"
+                  <DictTag
+                    :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
+                    :value="item.deviceType"
                     class="info-tag m-0"
-                  >
-                    {{
-                      getDictLabel(
-                        DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE,
-                        item.deviceType,
-                      )
-                    }}
-                  </Tag>
+                  />
                 </div>
                 <div class="info-item">
                   <span class="info-label">产品标识</span>
-                  <!-- TODO @haohao：展示 ？有点奇怪，要不小手？ -->
                   <Tooltip :title="item.productKey || item.id" placement="top">
-                    <span class="info-value product-key">
+                    <span class="info-value product-key cursor-pointer">
                       {{ item.productKey || item.id }}
                     </span>
                   </Tooltip>
                 </div>
               </div>
-              <!-- TODO @haohao：这里是不是有 image？然后默认 icon -->
-              <!-- TODO @haohao：高度太高了。建议和左侧（产品分类 + 产品类型 + 产品标识）高度保持一致 -->
-              <div class="product-3d-icon">
+              <!-- 产品图片 -->
+              <div class="product-image">
+                <Image
+                  v-if="item.picUrl"
+                  :src="item.picUrl"
+                  :preview="true"
+                  class="size-full rounded object-cover"
+                />
                 <IconifyIcon
-                  icon="ant-design:box-plot-outlined"
-                  class="text-2xl"
+                  v-else
+                  icon="lucide:image"
+                  class="text-2xl opacity-50"
                 />
               </div>
             </div>
@@ -180,8 +164,7 @@ onMounted(() => {
                 class="action-btn action-btn-edit"
                 @click="emit('edit', item)"
               >
-                <!-- TODO @haohao：按钮尽量用中立的按钮，方便迁移 ele；  -->
-                <IconifyIcon icon="ant-design:edit-outlined" class="mr-1" />
+                <IconifyIcon icon="lucide:edit" class="mr-1" />
                 编辑
               </Button>
               <Button
@@ -189,7 +172,7 @@ onMounted(() => {
                 class="action-btn action-btn-detail"
                 @click="emit('detail', item.id)"
               >
-                <IconifyIcon icon="ant-design:eye-outlined" class="mr-1" />
+                <IconifyIcon icon="lucide:eye" class="mr-1" />
                 详情
               </Button>
               <Button
@@ -197,23 +180,17 @@ onMounted(() => {
                 class="action-btn action-btn-model"
                 @click="emit('thingModel', item.id)"
               >
-                <IconifyIcon
-                  icon="ant-design:apartment-outlined"
-                  class="mr-1"
-                />
+                <IconifyIcon icon="lucide:git-branch" class="mr-1" />
                 物模型
               </Button>
-              <Tooltip v-if="item.status === 1" title="启用状态的产品不能删除">
+              <Tooltip v-if="item.status === 1" title="已发布的产品不能删除">
                 <Button
                   size="small"
                   danger
                   disabled
                   class="action-btn action-btn-delete !w-8"
                 >
-                  <IconifyIcon
-                    icon="ant-design:delete-outlined"
-                    class="text-sm"
-                  />
+                  <IconifyIcon icon="lucide:trash-2" class="text-sm" />
                 </Button>
               </Tooltip>
               <Popconfirm
@@ -226,10 +203,7 @@ onMounted(() => {
                   danger
                   class="action-btn action-btn-delete !w-8"
                 >
-                  <IconifyIcon
-                    icon="ant-design:delete-outlined"
-                    class="text-sm"
-                  />
+                  <IconifyIcon icon="lucide:trash-2" class="text-sm" />
                 </Button>
               </Popconfirm>
             </div>
@@ -241,8 +215,7 @@ onMounted(() => {
     </div>
 
     <!-- 分页 -->
-    <!-- TODO @haohao：放到最右侧好点 -->
-    <div v-if="list.length > 0" class="flex justify-center">
+    <div v-if="list.length > 0" class="mt-3 flex justify-end">
       <Pagination
         v-model:current="queryParams.pageNo"
         v-model:page-size="queryParams.pageSize"
@@ -258,18 +231,9 @@ onMounted(() => {
 </template>
 
 <style scoped lang="scss">
-/** TODO @haohao：看看哪些可以 tindwind 掉 */
 .product-card-view {
   .product-card {
-    height: 100%;
     overflow: hidden;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-
-    &:hover {
-      box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
-      transform: translateY(-2px);
-    }
 
     :deep(.ant-card-body) {
       display: flex;
@@ -283,10 +247,10 @@ onMounted(() => {
       flex-shrink: 0;
       align-items: center;
       justify-content: center;
-      width: 48px;
-      height: 48px;
+      width: 36px;
+      height: 36px;
       color: white;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
       border-radius: 8px;
     }
 
@@ -294,9 +258,9 @@ onMounted(() => {
     .product-title {
       overflow: hidden;
       text-overflow: ellipsis;
-      font-size: 16px;
+      font-size: 15px;
       font-weight: 600;
-      line-height: 1.5;
+      line-height: 36px;
       white-space: nowrap;
     }
 
@@ -305,7 +269,7 @@ onMounted(() => {
       .info-item {
         display: flex;
         align-items: center;
-        margin-bottom: 10px;
+        margin-bottom: 8px;
         font-size: 13px;
 
         &:last-child {
@@ -338,7 +302,6 @@ onMounted(() => {
           font-size: 12px;
           vertical-align: middle;
           white-space: nowrap;
-          cursor: help;
           opacity: 0.85;
         }
 
@@ -348,18 +311,17 @@ onMounted(() => {
       }
     }
 
-    // 3D 图标
-    .product-3d-icon {
+    // 产品图片
+    .product-image {
       display: flex;
       flex-shrink: 0;
       align-items: center;
       justify-content: center;
-      width: 100px;
-      height: 100px;
-      color: #667eea;
-      background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
+      width: 80px;
+      height: 80px;
+      color: #1890ff;
+      background: linear-gradient(135deg, #40a9ff15 0%, #1890ff15 100%);
       border-radius: 8px;
-      opacity: 0.8;
     }
 
     // 按钮组
@@ -398,12 +360,12 @@ onMounted(() => {
         }
 
         &.action-btn-model {
-          color: #722ed1;
-          border-color: #722ed1;
+          color: #fa8c16;
+          border-color: #fa8c16;
 
           &:hover {
             color: white;
-            background: #722ed1;
+            background: #fa8c16;
           }
         }
 
@@ -420,10 +382,6 @@ onMounted(() => {
 html.dark {
   .product-card-view {
     .product-card {
-      &:hover {
-        box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
-      }
-
       .product-title {
         color: rgb(255 255 255 / 85%);
       }
@@ -442,9 +400,9 @@ html.dark {
         }
       }
 
-      .product-3d-icon {
-        color: #8b9cff;
-        background: linear-gradient(135deg, #667eea25 0%, #764ba225 100%);
+      .product-image {
+        color: #69c0ff;
+        background: linear-gradient(135deg, #40a9ff25 0%, #1890ff25 100%);
       }
     }
   }
diff --git a/apps/web-antd/src/views/iot/product/product/modules/components/product-table-select.vue b/apps/web-antd/src/views/iot/product/product/modules/components/product-table-select.vue
deleted file mode 100644
index db475df9b..000000000
--- a/apps/web-antd/src/views/iot/product/product/modules/components/product-table-select.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<!-- IoT 产品选择器，使用弹窗展示 -->
-<script setup lang="ts">
-// TODO @haohao：这个貌似暂时没看到，在哪里用？
-import type { IotProductApi } from '#/api/iot/product/product';
-
-import { reactive, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
-
-import { Button, Form, Input, message } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getProductPage } from '#/api/iot/product/product';
-
-defineOptions({ name: 'IoTProductTableSelect' });
-
-const props = withDefaults(defineProps<Props>(), {
-  multiple: false,
-});
-
-const emit = defineEmits<{
-  success: [product: IotProductApi.Product | IotProductApi.Product[]];
-}>();
-
-interface Props {
-  multiple?: boolean;
-}
-
-const [Modal, modalApi] = useVbenModal({
-  title: '产品选择器',
-  // TODO @haohao：handleConfirm 直接放到这里，不用单独声明
-  onConfirm: handleConfirm,
-});
-
-const selectedProducts = ref<IotProductApi.Product[]>([]);
-const selectedRowKeys = ref<number[]>([]);
-
-// 搜索参数
-const queryParams = reactive({
-  name: '',
-  productKey: '',
-});
-// TODO @haohao：是不是 form 应该也在 Grid 里；
-
-// 配置表格
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    columns: [
-      {
-        type: props.multiple ? 'checkbox' : 'radio',
-        width: 50,
-      },
-      {
-        field: 'name',
-        title: '产品名称',
-        minWidth: 150,
-      },
-      {
-        field: 'productKey',
-        title: 'ProductKey',
-        minWidth: 150,
-      },
-      {
-        field: 'categoryName',
-        title: '品类',
-        minWidth: 120,
-      },
-      {
-        field: 'deviceType',
-        title: '设备类型',
-        minWidth: 100,
-        cellRender: {
-          name: 'CellDict',
-          props: { type: 'iot_product_device_type' },
-        },
-      },
-      {
-        field: 'createTime',
-        title: '创建时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-    ],
-    checkboxConfig: {
-      reserve: true,
-      highlight: true,
-    },
-    radioConfig: {
-      reserve: true,
-      highlight: true,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }: any) => {
-          return await getProductPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...queryParams,
-          });
-        },
-      },
-    },
-  },
-});
-
-// 打开选择器
-async function open() {
-  selectedProducts.value = [];
-  selectedRowKeys.value = [];
-  modalApi.open();
-  gridApi.reload();
-}
-
-// 搜索
-function handleSearch() {
-  gridApi.reload();
-}
-
-// 重置搜索
-function handleReset() {
-  queryParams.name = '';
-  queryParams.productKey = '';
-  gridApi.reload();
-}
-
-// 确认选择
-async function handleConfirm() {
-  const grid = gridApi.grid;
-  if (!grid) {
-    return false;
-  }
-
-  if (props.multiple) {
-    const checkboxRecords = grid.getCheckboxRecords();
-    if (checkboxRecords.length === 0) {
-      message.warning('请至少选择一个产品');
-      return false;
-    }
-    emit('success', checkboxRecords);
-  } else {
-    const radioRecord = grid.getRadioRecord();
-    if (!radioRecord) {
-      message.warning('请选择一个产品');
-      return false;
-    }
-    emit('success', radioRecord);
-  }
-  return true;
-}
-
-defineExpose({ open });
-</script>
-
-<template>
-  <Modal class="!w-[900px]">
-    <div class="mb-4">
-      <Form layout="inline" :model="queryParams">
-        <Form.Item label="产品名称">
-          <Input
-            v-model:value="queryParams.name"
-            placeholder="请输入产品名称"
-            allow-clear
-            class="!w-[200px]"
-            @press-enter="handleSearch"
-          />
-        </Form.Item>
-        <Form.Item label="ProductKey">
-          <Input
-            v-model:value="queryParams.productKey"
-            placeholder="请输入产品标识"
-            allow-clear
-            class="!w-[200px]"
-            @press-enter="handleSearch"
-          />
-        </Form.Item>
-        <Form.Item>
-          <Button type="primary" @click="handleSearch">
-            <template #icon>
-              <IconifyIcon icon="ant-design:search-outlined" />
-            </template>
-            搜索
-          </Button>
-          <Button class="ml-2" @click="handleReset">
-            <template #icon>
-              <IconifyIcon icon="ant-design:reload-outlined" />
-            </template>
-            重置
-          </Button>
-        </Form.Item>
-      </Form>
-    </div>
-
-    <Grid />
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/iot/product/product/modules/form.vue b/apps/web-antd/src/views/iot/product/product/modules/form.vue
new file mode 100644
index 000000000..ac8c1ad5c
--- /dev/null
+++ b/apps/web-antd/src/views/iot/product/product/modules/form.vue
@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Collapse, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProduct,
+  getProduct,
+  updateProduct,
+} from '#/api/iot/product/product';
+import { $t } from '#/locales';
+
+import { useAdvancedFormSchema, useBasicFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+/** 生成 ProductKey（包含大小写字母和数字） */
+function generateProductKey(): string {
+  const chars =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  for (let i = 0; i < 16; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
+
+const formData = ref<IotProductApi.Product>();
+const activeKey = ref<string[]>([]);
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['产品'])
+    : $t('ui.actionTitle.create', ['产品']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: { class: 'w-full' },
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1',
+});
+
+const [AdvancedForm, advancedFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: { class: 'w-full' },
+  },
+  layout: 'horizontal',
+  schema: useAdvancedFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-1',
+});
+
+/** 基础表单需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useBasicFormSchema(formApi, generateProductKey) });
+
+/** 获取高级表单的值（如果表单未挂载，则从 formData 中获取） */
+async function getAdvancedFormValues() {
+  if (advancedFormApi.isMounted) {
+    return await advancedFormApi.getValues();
+  }
+  // 表单未挂载（折叠状态），从 formData 中获取
+  return {
+    icon: formData.value?.icon,
+    picUrl: formData.value?.picUrl,
+    description: formData.value?.description,
+  };
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 合并两个表单的值（字段不冲突，可直接合并）
+    const basicValues = await formApi.getValues();
+    const advancedValues = await getAdvancedFormValues();
+    const data = {
+      ...basicValues,
+      ...advancedValues,
+    } as IotProductApi.Product;
+    try {
+      await (formData.value?.id ? updateProduct(data) : createProduct(data));
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      activeKey.value = [];
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<IotProductApi.Product>();
+    if (!data || !data.id) {
+      // 新增：确保 Collapse 折叠，并设置默认值
+      activeKey.value = [];
+      await formApi.setValues({
+        productKey: generateProductKey(),
+      });
+      return;
+    }
+    // 编辑：加载数据
+    modalApi.lock();
+    try {
+      formData.value = await getProduct(data.id);
+      await formApi.setValues(formData.value);
+      // 如果存在高级字段数据，自动展开 Collapse
+      if (
+        formData.value?.icon ||
+        formData.value?.picUrl ||
+        formData.value?.description
+      ) {
+        activeKey.value = ['advanced'];
+        // 等待 Collapse 展开后表单挂载
+        await nextTick();
+        await nextTick();
+        if (advancedFormApi.isMounted) {
+          await advancedFormApi.setValues(formData.value);
+        }
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <div class="mx-4">
+      <Form />
+      <Collapse v-model:active-key="activeKey" class="mt-4">
+        <Collapse.Panel key="advanced" header="更多设置">
+          <AdvancedForm />
+        </Collapse.Panel>
+      </Collapse>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/iot/product/product/modules/product-form.vue b/apps/web-antd/src/views/iot/product/product/modules/product-form.vue
deleted file mode 100644
index 48222bc93..000000000
--- a/apps/web-antd/src/views/iot/product/product/modules/product-form.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<script setup lang="ts">
-import type { IotProductApi } from '#/api/iot/product/product';
-
-import { computed, ref } from 'vue';
-
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
-
-import { Collapse, message } from 'ant-design-vue';
-
-import {
-  createProduct,
-  getProduct,
-  updateProduct,
-} from '#/api/iot/product/product';
-import { $t } from '#/locales';
-
-import {
-  generateProductKey,
-  useAdvancedFormSchema,
-  useBasicFormSchema,
-} from '../data';
-
-// TODO @haohao：应该是 form.vue；
-
-defineOptions({ name: 'IoTProductForm' });
-
-const emit = defineEmits(['success']);
-
-const CollapsePanel = Collapse.Panel;
-
-const formData = ref<any>();
-const getTitle = computed(() => {
-  return formData.value?.id ? '编辑产品' : '新增产品';
-});
-const activeKey = ref<string[]>([]); // 折叠面板的激活 key，默认不展开
-
-// TODO @haohao：每一行一个；
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  wrapperClass: 'grid-cols-2',
-  layout: 'horizontal',
-  schema: [],
-  showDefaultActions: false,
-});
-
-// TODO @haohao：每一行一个；
-const [AdvancedForm, advancedFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  wrapperClass: 'grid-cols-2',
-  layout: 'horizontal',
-  schema: [],
-  showDefaultActions: false,
-});
-
-// TODO @haohao：看看是不是可以参考别的 form 模块，优化表单这块的逻辑；从 61 到 156 行。体感有点冗余、以及代码风格，不够统一；
-formApi.setState({ schema: useBasicFormSchema(formApi) });
-advancedFormApi.setState({ schema: useAdvancedFormSchema() });
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    // 只验证基础表单
-    const { valid: basicValid } = await formApi.validate();
-    if (!basicValid) {
-      return;
-    }
-
-    modalApi.lock();
-    try {
-      // 提交表单 - 合并两个表单的值
-      const basicValues = await formApi.getValues();
-
-      // 如果折叠面板展开，则获取高级表单的值，否则保留原有值（编辑时）或使用空值（新增时）
-      let advancedValues: any = {};
-      if (activeKey.value.includes('advanced')) {
-        advancedValues = await advancedFormApi.getValues();
-      } else if (formData.value?.id) {
-        // 编辑时保留原有的高级字段值
-        advancedValues = {
-          icon: formData.value.icon,
-          picUrl: formData.value.picUrl,
-          description: formData.value.description,
-        };
-      }
-
-      const values = {
-        ...basicValues,
-        ...advancedValues,
-      } as IotProductApi.Product;
-      const data = formData.value?.id
-        ? { ...values, id: formData.value.id }
-        : values;
-
-      await (formData.value?.id ? updateProduct(data) : createProduct(data));
-      // 关闭并提示
-      await modalApi.close();
-      emit('success');
-      message.success($t('ui.actionMessage.operationSuccess'));
-    } finally {
-      modalApi.unlock();
-    }
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      formData.value = undefined;
-      // 重置折叠面板状态
-      activeKey.value = [];
-      return;
-    }
-    // 加载数据
-    const data = modalApi.getData<any>();
-    if (!data || !data.id) {
-      // 设置默认值
-      await formApi.setValues({
-        productKey: generateProductKey(), // 自动生成 ProductKey
-        // deviceType: 0, // 默认直连设备
-        // codecType: 'Alink', // 默认 Alink
-        // dataFormat: 1, // 默认 JSON
-        // validateType: 1, // 默认设备密钥
-        status: 0, // 默认启用
-      });
-      return;
-    }
-    try {
-      formData.value = await getProduct(data.id);
-      // 设置基础表单
-      await formApi.setValues(formData.value);
-
-      // 先设置高级表单的值（不等待）
-      advancedFormApi.setValues({
-        icon: formData.value.icon,
-        picUrl: formData.value.picUrl,
-        description: formData.value.description,
-      });
-
-      // 如果有图标、图片或描述，自动展开折叠面板以便显示
-      if (
-        formData.value.icon ||
-        formData.value.picUrl ||
-        formData.value.description
-      ) {
-        activeKey.value = ['advanced'];
-      }
-    } catch (error) {
-      console.error('加载产品数据失败:', error);
-      message.error('加载产品数据失败，请重试');
-    } finally {
-      modalApi.unlock();
-    }
-  },
-});
-</script>
-
-<template>
-  <Modal :title="getTitle" class="w-2/5">
-    <div class="mx-4">
-      <Form />
-      <Collapse v-model:active-key="activeKey" class="mt-4">
-        <CollapsePanel key="advanced" header="更多设置">
-          <AdvancedForm />
-        </CollapsePanel>
-      </Collapse>
-    </div>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/iot/rule/data/sink/data-sink-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/data-sink-form.vue
index b24accd90..98ce5faf7 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/data-sink-form.vue
+++ b/apps/web-antd/src/views/iot/rule/data/sink/data-sink-form.vue
@@ -83,7 +83,6 @@ const [Modal, modalApi] = useVbenModal({
     }
     // 加载数据
     const data = modalApi.getData<any>();
-
     if (!data || !data.id) {
       formData.value = {
         type: IotDataSinkTypeEnum.HTTP,
diff --git a/apps/web-antd/src/views/mall/product/comment/modules/form.vue b/apps/web-antd/src/views/mall/product/comment/modules/form.vue
index f2d3d14e0..0599f5977 100644
--- a/apps/web-antd/src/views/mall/product/comment/modules/form.vue
+++ b/apps/web-antd/src/views/mall/product/comment/modules/form.vue
@@ -21,7 +21,6 @@ import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-// 初始化 formData，确保始终有值
 const formData = ref<Partial<MallCommentApi.Comment>>({
   descriptionScores: 5,
   benefitScores: 5,
@@ -100,16 +99,14 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      // 重置表单数据
+      // 关闭时重置表单状态
       selectedSku.value = undefined;
+      await formApi.setValues({ spuId: undefined, skuId: undefined });
       return;
     }
     // 加载数据
     const data = modalApi.getData<MallCommentApi.Comment>();
     if (!data || !data.id) {
-      // 新建模式：重置表单
-      selectedSku.value = undefined;
-      await formApi.setValues({ spuId: undefined, skuId: undefined });
       return;
     }
     // 编辑模式：加载数据
diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue b/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue
index ea5cc0b8a..319e538e2 100644
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue
@@ -127,13 +127,13 @@ watch(
         </SkuList>
       </template>
     </VxeColumn>
-    <VxeColumn field="id" align="center" title="商品编号" />
+    <VxeColumn field="id" align="center" title="商品编号" min-width="30" />
     <VxeColumn title="商品图" min-width="80">
       <template #default="{ row }">
         <Image
           v-if="row.picUrl"
           :src="row.picUrl"
-          class="h-[30px] w-[30px] cursor-pointer"
+          class="!h-[30px] !w-[30px] cursor-pointer"
           :preview="true"
         />
       </template>
diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts b/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts
index 8fbb456bc..d2f45c864 100644
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts
@@ -2,8 +2,8 @@ import type { Ref } from 'vue';
 
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { computed } from 'vue';
 
diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue b/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue
index 01dcab3ae..17e405bfb 100644
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue
@@ -4,7 +4,7 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { computed, ref, watch } from 'vue';
 
-import { CloseCircleFilled, PlusOutlined } from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';
 
 import { Image, Tooltip } from 'ant-design-vue';
 
@@ -110,9 +110,9 @@ function emitSpuChange() {
             class="h-full w-full rounded-lg object-cover"
           />
           <!-- 删除按钮 -->
-          <!-- TODO @AI：还是使用 IconifyIcon：使用自己的 + 图标 -->
-          <CloseCircleFilled
+          <IconifyIcon
             v-if="!disabled"
+            icon="lucide:circle-x"
             class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
             @click="handleRemoveSpu(index)"
           />
@@ -126,8 +126,7 @@ function emitSpuChange() {
         class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
         @click="handleOpenSpuSelect"
       >
-        <!-- TODO @AI：还是使用 IconifyIcon：使用自己的 + 图标 -->
-        <PlusOutlined class="text-xl text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </Tooltip>
   </div>
diff --git a/apps/web-antd/src/views/mall/product/spu/form/index.vue b/apps/web-antd/src/views/mall/product/spu/form/index.vue
index 7048776bb..0d654b318 100644
--- a/apps/web-antd/src/views/mall/product/spu/form/index.vue
+++ b/apps/web-antd/src/views/mall/product/spu/form/index.vue
@@ -32,29 +32,6 @@ const spuId = ref<number>();
 const { params, name } = useRoute();
 const { closeCurrentTab } = useTabs();
 const activeTabName = ref('info');
-const tabList = ref([
-  {
-    key: 'info',
-    tab: '基础设置',
-  },
-  {
-    key: 'sku',
-    tab: '价格库存',
-  },
-  {
-    key: 'delivery',
-    tab: '物流设置',
-  },
-  {
-    key: 'description',
-    tab: '商品详情',
-  },
-  {
-    key: 'other',
-    tab: '其它设置',
-  },
-]);
-
 const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情
 const skuListRef = ref(); // 商品属性列表 Ref
@@ -94,22 +71,22 @@ const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
 const ruleConfig: RuleConfig[] = [
   {
     name: 'stock',
-    rule: (arg) => arg >= 0,
+    rule: (arg: number) => arg >= 0,
     message: '商品库存必须大于等于 1 ！！！',
   },
   {
     name: 'price',
-    rule: (arg) => arg >= 0.01,
+    rule: (arg: number) => arg >= 0.01,
     message: '商品销售价格必须大于等于 0.01 元！！！',
   },
   {
     name: 'marketPrice',
-    rule: (arg) => arg >= 0.01,
+    rule: (arg: number) => arg >= 0.01,
     message: '商品市场价格必须大于等于 0.01 元！！！',
   },
   {
     name: 'costPrice',
-    rule: (arg) => arg >= 0.01,
+    rule: (arg: number) => arg >= 0.01,
     message: '商品成本价格必须大于等于 0.00 元！！！',
   },
 ]; // sku 相关属性校验规则
@@ -221,7 +198,7 @@ async function handleSubmit() {
       item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
     });
   }
-  // 处理轮播图列表 TODO @puhui999：这个是必须的哇？
+  // 处理轮播图列表：上传组件可能返回对象或字符串，统一处理成字符串数组
   const newSliderPicUrls: any[] = [];
   values.sliderPicUrls!.forEach((item: any) => {
     // 如果是前端选的图
@@ -343,7 +320,28 @@ onMounted(async () => {
       <Card
         class="h-full w-full"
         :loading="formLoading"
-        :tab-list="tabList"
+        :tab-list="[
+          {
+            key: 'info',
+            tab: '基础设置',
+          },
+          {
+            key: 'sku',
+            tab: '价格库存',
+          },
+          {
+            key: 'delivery',
+            tab: '物流设置',
+          },
+          {
+            key: 'description',
+            tab: '商品详情',
+          },
+          {
+            key: 'other',
+            tab: '其它设置',
+          },
+        ]"
         :active-key="activeTabName"
         @tab-change="handleTabChange"
       >
@@ -409,7 +407,6 @@ onMounted(async () => {
   </div>
 </template>
 <style lang="scss" scoped>
-// TODO @puhui999：这个样式是必须的哇？
 :deep(.ant-tabs-tab-btn) {
   font-size: 14px !important;
 }
diff --git a/apps/web-antd/src/views/mall/product/spu/form/modules/product-property-add-form.vue b/apps/web-antd/src/views/mall/product/spu/form/modules/product-property-add-form.vue
index f6b4f0548..f34a8d194 100644
--- a/apps/web-antd/src/views/mall/product/spu/form/modules/product-property-add-form.vue
+++ b/apps/web-antd/src/views/mall/product/spu/form/modules/product-property-add-form.vue
@@ -130,7 +130,6 @@ const [Modal, modalApi] = useVbenModal({
     await modalApi.close();
     emit('success');
   },
-
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       return;
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts b/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
index a013b6f8d..d7474eeb5 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
@@ -24,6 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入活动名称',
       },
       rules: 'required',
+      formItemClass: 'col-span-2',
     },
     {
       fieldName: 'startTime',
@@ -32,6 +33,7 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
         placeholder: '请选择开始时间',
       },
       rules: 'required',
@@ -43,51 +45,18 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        showTime: true,
         placeholder: '请选择结束时间',
       },
       rules: 'required',
     },
-    {
-      fieldName: 'bargainFirstPrice',
-      label: '砍价起始价格(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价起始价格',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'bargainMinPrice',
-      label: '砍价底价(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价底价',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'stock',
-      label: '活动库存',
-      component: 'InputNumber',
-      componentProps: {
-        min: 1,
-        placeholder: '请输入活动库存',
-      },
-      rules: 'required',
-    },
     {
       fieldName: 'helpMaxCount',
       label: '助力人数',
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入助力人数',
+        placeholder: '达到该人数才能砍到低价',
       },
       rules: 'required',
     },
@@ -97,7 +66,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入砍价次数',
+        placeholder: '最大帮砍次数',
       },
       rules: 'required',
     },
@@ -107,7 +76,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入购买限制',
+        placeholder: '最大购买次数',
       },
       rules: 'required',
     },
@@ -119,7 +88,7 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.01,
-        placeholder: '请输入最小砍价金额',
+        placeholder: '用户每次砍价的最小金额',
       },
     },
     {
@@ -130,9 +99,16 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.01,
-        placeholder: '请输入最大砍价金额',
+        placeholder: '用户每次砍价的最大金额',
       },
     },
+    {
+      fieldName: 'spuId',
+      label: '砍价商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
   ];
 }
 
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue b/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
index 27c766183..b8e058834 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/index.vue
@@ -41,23 +41,14 @@ function handleEdit(row: MallBargainActivityApi.BargainActivity) {
 
 /** 关闭砍价活动 */
 async function handleClose(row: MallBargainActivityApi.BargainActivity) {
-  try {
-    await confirm({
-      content: '确认关闭该砍价活动吗？',
-    });
-  } catch {
-    return;
-  }
-
+  await confirm('确认关闭该砍价活动吗？');
   const hideLoading = message.loading({
-    content: '确认关闭该砍价活动吗？',
+    content: '关闭中...',
     duration: 0,
   });
   try {
-    await closeBargainActivity(row.id as number);
-    message.success({
-      content: '关闭成功',
-    });
+    await closeBargainActivity(row.id!);
+    message.success('关闭成功');
     handleRefresh();
   } finally {
     hideLoading();
@@ -71,10 +62,8 @@ async function handleDelete(row: MallBargainActivityApi.BargainActivity) {
     duration: 0,
   });
   try {
-    await deleteBargainActivity(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteBargainActivity(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
index b8e566ba4..38d492084 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/modules/form.vue
@@ -1,19 +1,32 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';
 
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { Button, InputNumber, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createBargainActivity,
   getBargainActivity,
   updateBargainActivity,
 } from '#/api/mall/promotion/bargain/bargainActivity';
 import { $t } from '#/locales';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -33,14 +46,116 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
+    labelWidth: 130,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.bargainFirstPrice',
+    rule: (arg) => arg > 0,
+    message: '商品砍价起始价格必须大于 0 ！！！',
+  },
+  {
+    name: 'productConfig.bargainMinPrice',
+    rule: (arg) => arg >= 0,
+    message: '商品砍价底价不能小于 0 ！！！',
+  },
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品活动库存必须大于等于 1 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallBargainActivityApi.BargainProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU（砍价活动只选择一个 SKU）
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置砍价活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallBargainActivityApi.BargainProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      bargainFirstPrice: 1,
+      bargainMinPrice: 1,
+      stock: 1,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.bargainFirstPrice = formatToFraction(
+          product.bargainFirstPrice,
+        ) as unknown as number;
+        product.bargainMinPrice = formatToFraction(
+          product.bargainMinPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallBargainActivityApi.BargainProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为砍价活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -48,10 +163,36 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallBargainActivityApi.BargainActivity;
     try {
+      // 获取砍价商品配置（深拷贝避免直接修改原对象）
+      const products: MallBargainActivityApi.BargainProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      if (products.length === 0) {
+        message.error('请选择砍价商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.bargainFirstPrice = convertToInteger(item.bargainFirstPrice);
+        item.bargainMinPrice = convertToInteger(item.bargainMinPrice);
+      });
+
+      // 提交表单
+      const values = await formApi.getValues();
+      const data = {
+        ...values,
+        // 用户每次砍价金额元转分
+        randomMinPrice: values.randomMinPrice
+          ? convertToInteger(values.randomMinPrice)
+          : undefined,
+        randomMaxPrice: values.randomMaxPrice
+          ? convertToInteger(values.randomMaxPrice)
+          : undefined,
+        // 合并砍价商品配置（砍价活动只有一个商品）
+        ...products[0],
+      } as MallBargainActivityApi.BargainActivity;
+
       await (formData.value?.id
         ? updateBargainActivity(data)
         : createBargainActivity(data));
@@ -66,18 +207,44 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
+
     // 加载数据
     const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
     if (!data || !data.id) {
       return;
     }
+    // 加载数据
     modalApi.lock();
     try {
       formData.value = await getBargainActivity(data.id);
-      // 设置到 values
-      await formApi.setValues(formData.value);
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId,
+        [formData.value.skuId],
+        [
+          {
+            spuId: formData.value.spuId,
+            skuId: formData.value.skuId,
+            bargainFirstPrice: formData.value.bargainFirstPrice, // 砍价起始价格，单位分
+            bargainMinPrice: formData.value.bargainMinPrice, // 砍价底价
+            stock: formData.value.stock, // 活动库存
+          },
+        ],
+      );
+      // 设置表单值时，价格字段从分转换为元
+      await formApi.setValues({
+        ...formData.value,
+        randomMinPrice: formData.value.randomMinPrice
+          ? formatToFraction(formData.value.randomMinPrice)
+          : undefined,
+        randomMaxPrice: formData.value.randomMaxPrice
+          ? formatToFraction(formData.value.randomMaxPrice)
+          : undefined,
+      });
     } finally {
       modalApi.unlock();
     }
@@ -86,7 +253,75 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
-  </Modal>
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
+              选择商品
+            </Button>
+
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：砍价活动特有配置 -->
+              <template #default>
+                <VxeColumn
+                  align="center"
+                  min-width="168"
+                  title="砍价起始价格(元)"
+                >
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.bargainFirstPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="砍价底价(元)">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.bargainMinPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="活动库存">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
+
+    <!-- 商品选择器弹窗（单选模式） -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      :radio="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts b/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
index 8c80c4265..8891f892c 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
@@ -24,16 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入活动名称',
       },
       rules: 'required',
-    },
-    {
-      fieldName: 'status',
-      label: '活动状态',
-      component: 'Select',
-      componentProps: {
-        placeholder: '请选择活动状态',
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-      },
-      rules: 'required',
+      formItemClass: 'col-span-2',
     },
     {
       fieldName: 'startTime',
@@ -41,9 +32,9 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'DatePicker',
       componentProps: {
         placeholder: '请选择开始时间',
-        showTime: false,
+        showTime: true,
         valueFormat: 'x',
-        format: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
       },
       rules: 'required',
     },
@@ -53,18 +44,18 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'DatePicker',
       componentProps: {
         placeholder: '请选择结束时间',
-        showTime: false,
+        showTime: true,
         valueFormat: 'x',
-        format: 'YYYY-MM-DD',
+        format: 'YYYY-MM-DD HH:mm:ss',
       },
       rules: 'required',
     },
     {
       fieldName: 'userSize',
-      label: '用户数量',
+      label: '拼团人数',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入用户数量',
+        placeholder: '达到该人数即成团',
         min: 2,
       },
       rules: 'required',
@@ -74,7 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '限制时长',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入限制时长(小时)',
+        placeholder: '限制时长(小时)',
         min: 0,
       },
       rules: 'required',
@@ -106,10 +97,11 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      // TODO
       fieldName: 'spuId',
       label: '拼团商品',
       component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue b/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
index 4c29f8fb3..ba430fabb 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/index.vue
@@ -43,23 +43,14 @@ function handleEdit(row: MallCombinationActivityApi.CombinationActivity) {
 async function handleClose(
   row: MallCombinationActivityApi.CombinationActivity,
 ) {
-  try {
-    await confirm({
-      content: '确认关闭该拼团活动吗？',
-    });
-  } catch {
-    return;
-  }
-
+  await confirm('确认关闭该拼团活动吗？');
   const hideLoading = message.loading({
     content: '关闭中...',
     duration: 0,
   });
   try {
-    await closeCombinationActivity(row.id as number);
-    message.success({
-      content: '关闭成功',
-    });
+    await closeCombinationActivity(row.id!);
+    message.success('关闭成功');
     handleRefresh();
   } finally {
     hideLoading();
@@ -75,10 +66,8 @@ async function handleDelete(
     duration: 0,
   });
   try {
-    await deleteCombinationActivity(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteCombinationActivity(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
diff --git a/apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue
index 92047c4ab..22c3cbb45 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/modules/form.vue
@@ -1,24 +1,39 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';
 
 import { computed, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { Button, InputNumber, message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createCombinationActivity,
   getCombinationActivity,
   updateCombinationActivity,
 } from '#/api/mall/promotion/combination/combinationActivity';
 import { $t } from '#/locales';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 defineOptions({ name: 'CombinationActivityForm' });
 
 const emit = defineEmits(['success']);
+
 const formData = ref<MallCombinationActivityApi.CombinationActivity>();
 const getTitle = computed(() => {
   return formData.value?.id
@@ -33,12 +48,99 @@ const [Form, formApi] = useVbenForm({
     },
     labelWidth: 100,
   },
-  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.combinationPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品拼团价格不能小于 0.01 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallCombinationActivityApi.CombinationProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置拼团活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallCombinationActivityApi.CombinationProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      combinationPrice: 0,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.combinationPrice = formatToFraction(
+          product.combinationPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallCombinationActivityApi.CombinationProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为拼团活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -46,10 +148,26 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallCombinationActivityApi.CombinationActivity;
     try {
+      // 获取拼团商品配置（深拷贝避免直接修改原对象）
+      const products: MallCombinationActivityApi.CombinationProduct[] =
+        cloneDeep(spuAndSkuListRef.value?.getSkuConfigs('productConfig') || []);
+      if (products.length === 0) {
+        message.error('请选择拼团商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.combinationPrice = convertToInteger(item.combinationPrice);
+      });
+
+      // 提交表单
+      const values = await formApi.getValues();
+      const data = {
+        ...values,
+        products,
+      } as MallCombinationActivityApi.CombinationActivity;
+
       await (formData.value?.id
         ? updateCombinationActivity(data)
         : createCombinationActivity(data));
@@ -64,18 +182,28 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
+
     // 加载数据
     const data =
       modalApi.getData<MallCombinationActivityApi.CombinationActivity>();
     if (!data || !data.id) {
       return;
     }
+    // 加载数据
     modalApi.lock();
     try {
       formData.value = await getCombinationActivity(data.id);
-      // 设置到 values
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId!,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
+      // 设置表单值
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
@@ -85,7 +213,49 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-3/5" :title="getTitle">
-    <Form />
-  </Modal>
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
+              选择商品
+            </Button>
+
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：拼团活动特有配置 -->
+              <template #default>
+                <VxeColumn align="center" min-width="168" title="拼团价格(元)">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.combinationPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
+
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue b/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
index 1c7e999a0..167a979bf 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/combination/components/showcase.vue
@@ -111,7 +111,6 @@ function emitActivityChange() {
     >
       <Tooltip :title="activity.name">
         <div class="relative h-full w-full">
-          <!-- TODO @芋艿 -->
           <Image
             :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
index 97108ded9..ea688e0cb 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container-property.vue
@@ -133,9 +133,8 @@ function handleSliderChange(prop: string) {
     </TabPane>
 
     <!-- 每个组件的通用内容 -->
-    <!-- TODO @xingyu：这里的样式，貌似没 ele 版本的好看。 -->
     <TabPane tab="样式" key="style" force-render>
-      <p class="text-lg font-bold">组件样式：</p>
+      <div class="mb-2 bg-gray-100 p-2 text-sm">组件样式：</div>
       <div class="flex flex-col gap-2 rounded-md p-4 shadow-lg">
         <Form :model="formData">
           <FormItem
@@ -181,7 +180,7 @@ function handleSliderChange(prop: string) {
                 class="mb-0 w-full"
               >
                 <Row>
-                  <Col :span="11">
+                  <Col :span="19">
                     <Slider
                       v-model:value="
                         formData[dataRef.prop as keyof ComponentStyle]
@@ -192,8 +191,9 @@ function handleSliderChange(prop: string) {
                       class="mr-4"
                     />
                   </Col>
-                  <Col :span="2">
+                  <Col :span="4">
                     <InputNumber
+                      class="w-[50px]"
                       :max="100"
                       :min="0"
                       v-model:value="
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
index 26fac3f7c..a2a16d657 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
@@ -98,7 +98,7 @@ const handleDeleteComponent = () => {
       <component :is="component.id" :property="component.property" />
     </div>
     <div
-      class="component-wrap absolute -bottom-1 -left-0.5 -right-0.5 -top-1 block h-full w-full"
+      class="component-wrap absolute -bottom-1 -left-0.5 -right-0.5 block h-full w-full"
     >
       <!-- 左侧：组件名（悬浮的小贴条） -->
       <div class="component-name" v-if="component.name">
@@ -109,8 +109,6 @@ const handleDeleteComponent = () => {
         class="component-toolbar"
         v-if="showToolbar && component.name && active"
       >
-        <!-- TODO @xingyu：按钮少的时候，会存在遮住的情况； -->
-        <!-- TODO @xingyu：貌似中间的选中框框，没全部框柱。上面多了点，下面少了点。 -->
         <VerticalButtonGroup size="small">
           <Button
             :disabled="!canMoveUp"
@@ -171,7 +169,6 @@ const handleDeleteComponent = () => {
     </div>
   </div>
 </template>
-
 <style scoped lang="scss">
 $active-border-width: 2px;
 $hover-border-width: 1px;
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
index 2be2df270..f447919a4 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-library.vue
@@ -100,5 +100,4 @@ function handleCloneComponent(component: DiyComponent<any>) {
       </Collapse.Panel>
     </Collapse>
   </div>
-  <!-- TODO @xingyu：ele 里面有一些 style，看看是不是都迁移完了；特别是 drag-area 是全局样式； -->
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
index 4f382957d..b18980ebe 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/menu-swiper/index.vue
@@ -106,7 +106,6 @@ watch(
     </div>
   </Carousel>
 </template>
-
 <style lang="scss">
 // Ant Design Vue Carousel 样式调整
 :deep(.ant-carousel .ant-carousel-dots) {
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
index 4288ede81..91b13cc77 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
@@ -14,7 +14,7 @@ defineProps<{ property: UserCardProperty }>();
   <div class="flex flex-col">
     <div class="flex items-center justify-between px-4 py-6">
       <div class="flex flex-1 items-center gap-4">
-        <Avatar :size="60">
+        <Avatar :size="60" class="flex items-center">
           <IconifyIcon icon="ep:avatar" :size="60" />
         </Avatar>
         <span class="text-[18px] font-bold">芋道源码</span>
diff --git a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
index 428f21429..e420c7837 100644
--- a/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/diy-editor/index.vue
@@ -38,7 +38,7 @@ const props = defineProps({
 
 const emits = defineEmits(['reset', 'save', 'update:modelValue']); // 工具栏操作
 
-// TODO @xingyu：要不要加这个？
+// TODO @xingyu：要不要加这个？ele 里是有这个的。
 // const qrcode = useQRCode(props.previewUrl, {
 //   errorCorrectionLevel: 'H',
 //   margin: 4,
@@ -175,8 +175,7 @@ function handleComponentSelected(
   index: number = -1,
 ) {
   // 使用深拷贝避免响应式追踪循环警告
-  // TODO @xingyu：这个是必须的么？ele 没有哈。
-  selectedComponent.value = cloneDeep(component);
+  selectedComponent.value = component;
   selectedComponentIndex.value = index;
 }
 
@@ -344,7 +343,7 @@ onMounted(() => {
       <!-- 中心：设计区域（ComponentContainer） -->
       <Col :span="12">
         <div
-          class="relative flex max-h-[calc(80vh)] w-full flex-1 flex-col justify-center overflow-y-auto"
+          class="editor-center relative flex max-h-[calc(80vh)] w-full flex-1 flex-col overflow-y-auto"
           @click="handlePageSelected"
         >
           <!-- 手机顶部 -->
@@ -378,20 +377,20 @@ onMounted(() => {
           </div>
           <!-- 手机页面编辑区域 -->
           <div
-            class="min-h-full w-full"
+            class="mx-auto min-h-full w-96 bg-no-repeat"
             :style="{
               // backgroundColor: pageConfigComponent.property.backgroundColor,
               backgroundImage: `url(${pageConfigComponent.property.backgroundImage})`,
             }"
           >
             <div
-              class="relative mx-auto my-0 min-h-full w-96 items-center justify-center bg-auto bg-no-repeat"
+              class="relative my-0 min-h-full w-full items-center justify-center bg-auto bg-no-repeat"
             >
               <draggable
                 v-model="pageComponents"
                 :animation="200"
                 :force-fallback="false"
-                class="min-h-full w-full"
+                class="min-h-[70vh] w-full"
                 filter=".component-toolbar"
                 ghost-class="draggable-ghost"
                 group="component"
@@ -508,5 +507,4 @@ onMounted(() => {
       </div>
     </PreviewModal>
   </Page>
-  <!-- TODO @xingyu：这里改造完后，类似 web-ele/src/views/mall/promotion/components/diy-editor/index.vue 里的全局样式（递推到子组件）里的就没没了，类似 property-group -->
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
index e68caa6d0..2f865b3da 100644
--- a/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Space } from 'ant-design-vue';
 
-// TODO @芋艿、@xingyu：貌似上下移动的按钮，被遮住了！
 /**
  * 垂直按钮组
  * Ant Design Vue 的按钮组，通过 Space 实现垂直布局
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
index 36d7ea9e3..94d79a0bb 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { ref } from 'vue';
+import { nextTick, ref } from 'vue';
 
 import { Modal } from 'ant-design-vue';
 
@@ -57,24 +57,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /** 打开弹窗 */
 async function open() {
   visible.value = true;
-  // 重置查询条件并重新加载数据，与老组件行为一致
+  // 等待 Modal 和 Grid 组件挂载完成后再查询
+  await nextTick();
   await gridApi.query();
 }
 
+/** 确认选择 */
+function handleConfirm() {
+  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+    []) as MallCouponTemplateApi.CouponTemplate[];
+  emit('change', selectedRecords);
+  closeModal();
+}
+
 /** 关闭弹窗 */
 function closeModal() {
   visible.value = false;
 }
 
-/** 确认选择 */
-function handleConfirm() {
-  // 从 gridApi 获取选中的记录
-  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
-    []) as MallCouponTemplateApi.CouponTemplate[];
-  emit('change', selectedRecords);
-  closeModal();
-}
-
 /** 对外暴露的方法 */
 defineExpose({
   open,
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts b/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts
index 5d9b14928..11f86c422 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts
@@ -60,14 +60,10 @@ export function useFormSchema(): VbenFormSchema[] {
       rules: 'required',
       defaultValue: PromotionProductScopeEnum.ALL.scope,
     },
-    // TODO @puhui999： 商品选择器优化
     {
       fieldName: 'productSpuIds',
       label: '商品',
       component: 'Input',
-      componentProps: {
-        placeholder: '请选择商品',
-      },
       dependencies: {
         triggerFields: ['productScope', 'productScopeValues'],
         show: (model) =>
@@ -84,14 +80,10 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
-    // TODO @puhui999： 商品分类选择器优化
     {
       fieldName: 'productCategoryIds',
       label: '商品分类',
       component: 'Input',
-      componentProps: {
-        placeholder: '请选择商品分类',
-      },
       dependencies: {
         triggerFields: ['productScope', 'productScopeValues'],
         show: (model) =>
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/template/modules/form.vue b/apps/web-antd/src/views/mall/promotion/coupon/template/modules/form.vue
index 753f26893..b015eb7f4 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/template/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/template/modules/form.vue
@@ -16,11 +16,18 @@ import {
   updateCouponTemplate,
 } from '#/api/mall/promotion/coupon/couponTemplate';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<MallCouponTemplateApi.CouponTemplate>();
+const formData = ref<
+  Partial<MallCouponTemplateApi.CouponTemplate> & {
+    productCategoryIds?: number | number[];
+    productSpuIds?: number[];
+  }
+>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['优惠券模板'])
@@ -64,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -75,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getCouponTemplate(data.id);
-      const processedData = await processLoadData(formData.value);
+      const processedData = await processLoadData(formData.value as any);
       // 设置到表单
       await formApi.setValues(processedData);
     } finally {
@@ -144,6 +151,15 @@ async function processLoadData(
 
 <template>
   <Modal :title="getTitle" class="w-2/5">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <!-- 自定义插槽：商品选择 -->
+      <template #productSpuIds>
+        <SpuShowcase v-model="formData.productSpuIds" />
+      </template>
+      <!-- 自定义插槽：分类选择 -->
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" />
+      </template>
+    </Form>
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/discountActivity/data.ts b/apps/web-antd/src/views/mall/promotion/discountActivity/data.ts
index 575d8c205..f9f170845 100644
--- a/apps/web-antd/src/views/mall/promotion/discountActivity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/discountActivity/data.ts
@@ -67,8 +67,15 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入备注',
         rows: 4,
       },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'spuIds',
+      label: '活动商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
     },
-    // TODO
   ];
 }
 
diff --git a/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue b/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
index 35a20c850..48e45c8e9 100644
--- a/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/discountActivity/index.vue
@@ -41,23 +41,14 @@ function handleEdit(row: MallDiscountActivityApi.DiscountActivity) {
 
 /** 关闭满减活动 */
 async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
-  try {
-    await confirm({
-      content: '确认关闭该限时折扣活动吗？',
-    });
-  } catch {
-    return;
-  }
-
+  await confirm('确认关闭该限时折扣活动吗？');
   const hideLoading = message.loading({
-    content: '正在关闭中',
+    content: '正在关闭中...',
     duration: 0,
   });
   try {
-    await closeDiscountActivity(row.id as number);
-    message.success({
-      content: '关闭成功',
-    });
+    await closeDiscountActivity(row.id!);
+    message.success('关闭成功');
     handleRefresh();
   } finally {
     hideLoading();
@@ -71,7 +62,7 @@ async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
     duration: 0,
   });
   try {
-    await deleteDiscountActivity(row.id as number);
+    await deleteDiscountActivity(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
diff --git a/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue
index 260c7a98f..6f8bc9a47 100644
--- a/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/discountActivity/modules/form.vue
@@ -13,13 +13,18 @@ import {
   updateDiscountActivity,
 } from '#/api/mall/promotion/discount/discountActivity';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 defineOptions({ name: 'DiscountActivityForm' });
 
 const emit = defineEmits(['success']);
-const formData = ref<MallDiscountActivityApi.DiscountActivity>();
+const formData = ref<
+  Partial<MallDiscountActivityApi.DiscountActivity> & {
+    spuIds?: number[];
+  }
+>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['限时折扣活动'])
@@ -69,7 +74,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -91,6 +96,11 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal class="w-3/5" :title="getTitle">
-    <Form />
+    <Form>
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuIds>
+        <SpuShowcase v-model="formData.spuIds" />
+      </template>
+    </Form>
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
index bf362a326..fc188072a 100644
--- a/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/diy/template/decorate/index.vue
@@ -27,34 +27,28 @@ const route = useRoute();
 const { refreshTab } = useTabs();
 
 const domain = import.meta.env.VITE_MALL_H5_DOMAIN;
-// 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
-const DIY_PAGE_INDEX_KEY = 'diy_page_index';
+const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
 
 const selectedTemplateItem = ref(0);
-// 左上角工具栏操作按钮
 const templateItems = ref([
   { key: 0, name: '基础设置', icon: 'lucide:settings' },
   { key: 1, name: '首页', icon: 'lucide:home' },
   { key: 2, name: '我的', icon: 'lucide:user' },
-]);
+]); // 左上角工具栏操作按钮
 
 const formData = ref<MallDiyTemplateApi.DiyTemplateProperty>();
-// 当前编辑的属性
 const currentFormData = ref<
   MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty
 >({
   property: '',
-} as MallDiyPageApi.DiyPage);
-// templateItem 对应的缓存
+} as MallDiyPageApi.DiyPage); // 当前编辑的属性
 const currentFormDataMap = ref<
   Map<string, MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty>
->(new Map());
-// 商城 H5 预览地址
-const previewUrl = ref('');
-// 模板组件库
-const templateLibs = [] as DiyComponentLibrary[];
-// 当前组件库
-const libs = ref<DiyComponentLibrary[]>(templateLibs);
+>(new Map()); // templateItem 对应的缓存
+
+const previewUrl = ref(''); // 商城 H5 预览地址
+const templateLibs = [] as DiyComponentLibrary[]; // 模板组件库
+const libs = ref<DiyComponentLibrary[]>(templateLibs); // 当前组件库
 
 /** 获取详情 */
 async function getPageDetail(id: any) {
@@ -73,23 +67,23 @@ async function getPageDetail(id: any) {
 }
 
 /** 模板选项切换 */
-function handleTemplateItemChange(val: any) {
-  const changeValue = val.target.value;
+function handleTemplateItemChange(valObj: any) {
+  const val = valObj.target.value;
   // 缓存模版编辑数据
   currentFormDataMap.value.set(
-    templateItems.value[changeValue]!.name,
+    templateItems.value[selectedTemplateItem.value]?.name || '',
     currentFormData.value!,
   );
-  // 切换模版
-  selectedTemplateItem.value = changeValue;
-
   // 读取模版缓存
   const data = currentFormDataMap.value.get(
-    templateItems.value[changeValue]!.name,
+    templateItems.value[val]?.name || '',
   );
 
+  // 切换模版
+  selectedTemplateItem.value = val;
+
   // 情况一：编辑模板
-  if (changeValue === 0) {
+  if (val === 0) {
     libs.value = templateLibs;
     currentFormData.value = (isEmpty(data) ? formData.value : data) as
       | MallDiyPageApi.DiyPage
@@ -103,7 +97,7 @@ function handleTemplateItemChange(val: any) {
     isEmpty(data)
       ? formData.value!.pages.find(
           (page: MallDiyPageApi.DiyPage) =>
-            page.name === templateItems.value[changeValue]!.name,
+            page.name === templateItems.value[val]?.name,
         )
       : data
   ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;
diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
index 4ad792388..9b2abb065 100644
--- a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
@@ -132,9 +132,6 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'Input',
       rules: 'required',
       formItemClass: 'col-span-2',
-      renderComponentContent: () => ({
-        default: () => null,
-      }),
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
index 43462850e..9653a2b0e 100644
--- a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
@@ -180,7 +180,6 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      // 重置表单数据（新增和编辑模式都需要）
       formData.value = undefined;
       spuList.value = [];
       spuPropertyList.value = [];
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/index.ts b/apps/web-antd/src/views/mall/promotion/point/components/index.ts
index 6dfdb2999..4271f4e17 100644
--- a/apps/web-antd/src/views/mall/promotion/point/components/index.ts
+++ b/apps/web-antd/src/views/mall/promotion/point/components/index.ts
@@ -1,2 +1,2 @@
-export { default as PointShowcase } from './point-showcase.vue';
-export { default as PointTableSelect } from './point-table-select.vue';
+export { default as PointShowcase } from './showcase.vue';
+export { default as PointTableSelect } from './table-select.vue';
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue b/apps/web-antd/src/views/mall/promotion/point/components/showcase.vue
similarity index 95%
rename from apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
rename to apps/web-antd/src/views/mall/promotion/point/components/showcase.vue
index e15176ef7..9f16ac9d0 100644
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/showcase.vue
@@ -10,7 +10,7 @@ import { Image, Tooltip } from 'ant-design-vue';
 
 import { getPointActivityListByIds } from '#/api/mall/promotion/point';
 
-import PointTableSelect from './point-table-select.vue';
+import TableSelect from './table-select.vue';
 
 interface PointShowcaseProps {
   modelValue?: number | number[];
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<PointShowcaseProps>(), {
 const emit = defineEmits(['update:modelValue', 'change']);
 
 const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
-const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
+const pointTableSelectRef = ref<InstanceType<typeof TableSelect>>(); // 活动选择表格组件引用
 const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
 
 /** 计算是否可以添加 */
@@ -140,7 +140,7 @@ function emitActivityChange() {
   </div>
 
   <!-- 活动选择对话框 -->
-  <PointTableSelect
+  <TableSelect
     ref="pointTableSelectRef"
     :multiple="isMultiple"
     @change="handleActivitySelected"
diff --git a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue b/apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
similarity index 96%
rename from apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
rename to apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
index eff545cba..d4c1a2a27 100644
--- a/apps/web-antd/src/views/mall/promotion/point/components/point-table-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/components/table-select.vue
@@ -9,7 +9,6 @@ import { computed } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-import { dateFormatter, fenToYuanFormat } from '@vben/utils';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getPointActivityPage } from '#/api/mall/promotion/point';
@@ -92,7 +91,9 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       title: '原价',
       minWidth: 100,
       align: 'center',
-      formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
+      formatter: ({ cellValue }) => {
+        return `¥${(cellValue / 100).toFixed(2)}`;
+      },
     },
     {
       field: 'status',
@@ -128,7 +129,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       title: '创建时间',
       width: 180,
       align: 'center',
-      formatter: ({ cellValue }) => dateFormatter(cellValue),
+      formatter: 'formatDateTime',
     },
   );
   return columns;
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts b/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
index 57ebd0acb..613a4a7e7 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
@@ -217,6 +217,7 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
+    // TODO @puhui999：1）新增时：一直报：“请输入优惠设置”；2）修改老数据，出现报“请求参数类型错误:50.00”；
     {
       fieldName: 'rules',
       label: '优惠设置',
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
index 77d038161..20e892a12 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/index.vue
@@ -42,7 +42,6 @@ function handleEdit(row: MallRewardActivityApi.RewardActivity) {
 
 /** 关闭满减送活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
-  // TODO @puhui999：这个国际化，需要加下哈；closing、closeSuccess；
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.closing', [row.name]),
     duration: 0,
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
index e9f825135..99e323193 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -11,6 +11,7 @@ import {
 import { convertToInteger, formatToFraction } from '@vben/utils';
 
 import { message } from 'ant-design-vue';
+import dayjs from 'dayjs';
 
 import { useVbenForm } from '#/adapter/form';
 import {
@@ -29,9 +30,9 @@ const emit = defineEmits(['success']);
 
 const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
   conditionType: PromotionConditionTypeEnum.PRICE.type,
+  productScope: PromotionProductScopeEnum.ALL.scope,
   rules: [],
 });
-
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['满减送'])
@@ -60,7 +61,6 @@ const [Modal, modalApi] = useVbenModal({
     // 提交表单
     try {
       const values = await formApi.getValues();
-      // 合并表单值和 formData（含 id、productSpuIds、productCategoryIds 等）
       const data = { ...formData.value, ...values };
       if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
         data.startTime = data.startAndEndTime[0];
@@ -73,23 +73,6 @@ const [Modal, modalApi] = useVbenModal({
           item.limit = convertToInteger(item.limit || 0);
         }
       });
-      // 设置 productScopeValues
-      switch (data.productScope) {
-        case PromotionProductScopeEnum.CATEGORY.scope: {
-          const categoryIds = data.productCategoryIds;
-          data.productScopeValues = Array.isArray(categoryIds)
-            ? categoryIds
-            : categoryIds
-              ? [categoryIds]
-              : [];
-          break;
-        }
-        case PromotionProductScopeEnum.SPU.scope: {
-          data.productScopeValues = data.productSpuIds;
-          break;
-        }
-      }
-
       await (data.id
         ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
         : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
@@ -114,7 +97,10 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       const result = await getReward(data.id);
-      result.startAndEndTime = [result.startTime, result.endTime] as any[];
+      result.startAndEndTime = [
+        result.startTime ? dayjs(result.startTime) : undefined,
+        result.endTime ? dayjs(result.endTime) : undefined,
+      ] as any[];
       result.rules?.forEach((item: any) => {
         item.discountPrice = formatToFraction(item.discountPrice || 0);
         if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
index 7674f5b1a..fef6297ed 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
@@ -102,46 +102,53 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="w-full">
-    <Button type="link" class="pl-0" @click="handleSelect">添加优惠券</Button>
-
-    <div
-      v-for="(item, index) in list"
-      :key="item.id"
-      class="coupon-list-item mb-2 flex justify-between rounded-lg border border-dashed border-gray-300 p-2"
-    >
-      <div class="coupon-list-item-left flex flex-wrap items-center gap-2">
-        <div>优惠券名称：{{ item.name }}</div>
-        <div>
-          范围：
-          <DictTag
-            :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
-            :value="item.productScope"
-          />
+  <div>
+    <!-- 已选优惠券列表 -->
+    <div v-if="list.length > 0" class="mb-2 flex flex-col gap-2">
+      <div
+        v-for="(item, index) in list"
+        :key="item.id"
+        class="flex items-center justify-between rounded-md border border-gray-200 bg-white px-3 py-2 transition-all hover:border-blue-400 hover:shadow-sm"
+      >
+        <div class="flex flex-wrap items-center gap-3">
+          <span class="font-medium text-gray-800">{{ item.name }}</span>
+          <span class="flex items-center gap-1 text-sm text-gray-500">
+            <DictTag
+              :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
+              :value="item.productScope"
+            />
+          </span>
+          <span class="flex items-center gap-1 text-sm text-gray-500">
+            <DictTag
+              :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
+              :value="item.discountType"
+            />
+            {{ discountFormat(item) }}
+          </span>
         </div>
-        <div class="flex items-center">
-          优惠：
-          <DictTag
-            :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
-            :value="item.discountType"
+        <div class="flex shrink-0 items-center gap-2">
+          <span class="text-gray-500">送</span>
+          <Input
+            v-model:value="item.giveCount"
+            class="!w-20"
+            placeholder=""
+            type="number"
+            size="small"
           />
-          {{ discountFormat(item) }}
+          <span class="text-gray-500">张</span>
+          <Button type="link" danger size="small" @click="handleDelete(index)">
+            删除
+          </Button>
         </div>
       </div>
-      <div class="coupon-list-item-right flex items-center gap-2">
-        <span>送</span>
-        <Input
-          v-model:value="item.giveCount"
-          class="!w-150px"
-          placeholder=""
-          type="number"
-        />
-        <span>张</span>
-        <Button type="link" danger @click="handleDelete(index)">删除</Button>
-      </div>
     </div>
 
-    <!-- 优惠券选择 -->
+    <!-- 添加按钮 -->
+    <Button type="link" class="!pl-0" @click="handleSelect">
+      + 添加优惠券
+    </Button>
+
+    <!-- 优惠券选择弹窗 -->
     <CouponSelect
       ref="selectRef"
       :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
index 56df4ac84..a90d9ff97 100644
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
@@ -8,6 +8,7 @@ import { PromotionConditionTypeEnum } from '@vben/constants';
 import { useVModel } from '@vueuse/core';
 import {
   Button,
+  Card,
   Col,
   Form,
   FormItem,
@@ -61,76 +62,92 @@ function handleDelete(ruleIndex: number) {
   <Row :gutter="[16, 16]">
     <template v-if="formData.rules">
       <Col v-for="(rule, index) in formData.rules" :key="index" :span="24">
-        <!-- 规则标题 -->
-        <div class="mb-4 flex items-center">
-          <span class="text-base font-bold">活动层级 {{ index + 1 }}</span>
-          <Button
-            v-if="index !== 0"
-            type="link"
-            danger
-            class="ml-2"
-            @click="handleDelete(index)"
-          >
-            删除
-          </Button>
-        </div>
-
-        <Form :model="rule" layout="horizontal">
-          <!-- 优惠门槛 -->
-          <FormItem label="优惠门槛" :label-col="{ span: 4 }">
-            <div class="flex items-center gap-2">
-              <span>满</span>
-              <InputNumber
-                v-if="isPriceCondition"
-                v-model:value="rule.limit"
-                :min="0"
-                :precision="2"
-                :step="0.1"
-                class="!w-40"
-                placeholder="请输入金额"
-              />
-              <Input
-                v-else
-                v-model:value="rule.limit"
-                :min="0"
-                class="!w-40"
-                placeholder="请输入数量"
-                type="number"
-              />
-              <span>{{ isPriceCondition ? '元' : '件' }}</span>
+        <Card size="small" class="rounded-lg">
+          <!-- 规则标题 -->
+          <template #title>
+            <div class="flex items-center">
+              <span class="text-base font-medium">
+                活动层级 {{ index + 1 }}
+              </span>
             </div>
-          </FormItem>
-          <!-- 优惠内容 -->
-          <FormItem
-            label="优惠内容"
-            :label-col="{ span: 4 }"
-            :wrapper-col="{ span: 20 }"
-          >
-            <div class="flex flex-col gap-2">
-              <span>订单金额优惠</span>
-              <div class="flex items-center gap-2">
-                <span>减</span>
+          </template>
+          <template v-if="index !== 0" #extra>
+            <Button
+              type="link"
+              danger
+              size="small"
+              @click="handleDelete(index)"
+            >
+              删除
+            </Button>
+          </template>
+
+          <Form :model="rule" layout="horizontal">
+            <!-- 优惠门槛 -->
+            <FormItem label="优惠门槛:" :colon="false" class="mb-3">
+              <div
+                class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+              >
+                <span>满</span>
                 <InputNumber
-                  v-model:value="rule.discountPrice"
+                  v-if="isPriceCondition"
+                  v-model:value="rule.limit"
                   :min="0"
                   :precision="2"
                   :step="0.1"
-                  class="!w-32"
+                  class="!w-40"
                   placeholder="请输入金额"
                 />
-                <span>元</span>
-              </div>
-              <div class="flex items-center gap-2">
-                <span>包邮:</span>
-                <Switch
-                  v-model:checked="rule.freeDelivery"
-                  checked-children="是"
-                  un-checked-children="否"
+                <Input
+                  v-else
+                  v-model:value="rule.limit"
+                  :min="0"
+                  class="!w-40"
+                  placeholder="请输入数量"
+                  type="number"
                 />
+                <span>{{ isPriceCondition ? '元' : '件' }}</span>
               </div>
-              <div>
-                <div>送积分:</div>
-                <div class="mt-2 flex items-center gap-2">
+            </FormItem>
+            <!-- 优惠内容 -->
+            <FormItem label="优惠内容:" :colon="false" class="!mb-0">
+              <div class="flex flex-col gap-3">
+                <!-- 订单金额优惠 -->
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="!w-21 shrink-0 text-sm text-gray-500">
+                    订单金额优惠
+                  </span>
+                  <span>减</span>
+                  <InputNumber
+                    v-model:value="rule.discountPrice"
+                    :min="0"
+                    :precision="2"
+                    :step="0.1"
+                    class="!w-32"
+                    placeholder="请输入金额"
+                  />
+                  <span>元</span>
+                </div>
+                <!-- 包邮 -->
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="w-20 shrink-0 text-sm text-gray-500">包邮</span>
+                  <Switch
+                    v-model:checked="rule.freeDelivery"
+                    checked-children="是"
+                    un-checked-children="否"
+                  />
+                </div>
+                <!-- 送积分 -->
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="w-20 shrink-0 text-sm text-gray-500">
+                    送积分
+                  </span>
                   <span>送</span>
                   <InputNumber
                     v-model:value="rule.point"
@@ -140,17 +157,24 @@ function handleDelete(ruleIndex: number) {
                   />
                   <span>积分</span>
                 </div>
+                <!-- 送优惠券 -->
+                <div
+                  class="flex flex-col items-start gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="w-20 shrink-0 text-sm text-gray-500">
+                    送优惠券
+                  </span>
+                  <RewardRuleCouponSelect
+                    :model-value="rule"
+                    @update:model-value="
+                      (val) => (formData.rules![index] = val)
+                    "
+                  />
+                </div>
               </div>
-              <div class="flex items-center gap-2">
-                <span class="w-20">送优惠券:</span>
-                <RewardRuleCouponSelect
-                  :model-value="rule"
-                  @update:model-value="(val) => (formData.rules![index] = val)"
-                />
-              </div>
-            </div>
-          </FormItem>
-        </Form>
+            </FormItem>
+          </Form>
+        </Card>
       </Col>
     </template>
 
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts b/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
index 8c1d52e23..2ebb63de5 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
@@ -59,8 +59,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'DatePicker',
       componentProps: {
         placeholder: '请选择活动开始时间',
-        showTime: false,
-        format: 'YYYY-MM-DD',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
         class: 'w-full',
       },
@@ -72,8 +72,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'DatePicker',
       componentProps: {
         placeholder: '请选择活动结束时间',
-        showTime: false,
-        format: 'YYYY-MM-DD',
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'x',
         class: 'w-full',
       },
@@ -137,6 +137,12 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       formItemClass: 'col-span-2',
     },
+    {
+      fieldName: 'spuId',
+      label: '秒杀商品',
+      component: 'Input',
+      formItemClass: 'col-span-2',
+    },
   ];
 }
 
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
index ceef1485b..0a9bc4839 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
@@ -1,115 +1,184 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';
 
-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { Button, message } from 'ant-design-vue';
+import { Button, InputNumber, message } from 'ant-design-vue';
 
 import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createSeckillActivity,
   getSeckillActivity,
   updateSeckillActivity,
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { $t } from '#/locales';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
-const emit = defineEmits(['success']);
-const formData = ref<MallSeckillActivityApi.SeckillActivity>();
+defineOptions({ name: 'PromotionSeckillActivityForm' });
 
+const emit = defineEmits(['success']);
+
+const formData = ref<MallSeckillActivityApi.SeckillActivity>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['秒杀活动'])
     : $t('ui.actionTitle.create', ['秒杀活动']);
 });
 
-// ================= 商品选择相关 =================
-const spuId = ref<number>();
-const spuName = ref<string>('');
-const skuTableData = ref<any[]>([]);
-
-// 选择商品（占位函数，实际需要对接商品选择组件）
-const handleSelectProduct = () => {
-  message.info('商品选择功能需要对接商品选择组件');
-  // TODO: 打开商品选择弹窗
-  // 实际使用时需要：
-  // 1. 打开商品选择弹窗
-  // 2. 选择商品后调用以下逻辑设置数据：
-  //    spuId.value = selectedSpu.id;
-  //    spuName.value = selectedSpu.name;
-  //    skuTableData.value = selectedSkus.map(sku => ({
-  //      skuId: sku.id,
-  //      skuName: sku.name || '',
-  //      picUrl: sku.picUrl || selectedSpu.picUrl || '',
-  //      price: sku.price || 0,
-  //      stock: 0,
-  //      seckillPrice: 0,
-  //    }));
-};
-
-// ================= end =================
-
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
+    labelWidth: 120,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-2',
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品秒杀库存必须大于等于 1 ！！！',
+  },
+  {
+    name: 'productConfig.seckillPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品秒杀价格必须大于等于 0.01 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallSeckillActivityApi.SeckillProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置秒杀活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallSeckillActivityApi.SeckillProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      stock: 0,
+      seckillPrice: 0,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.seckillPrice = formatToFraction(
+          product.seckillPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallSeckillActivityApi.SeckillProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为秒杀活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-
-    // 验证商品和 SKU 配置
-    if (!spuId.value) {
-      message.error('请选择秒杀商品');
-      return;
-    }
-
-    if (skuTableData.value.length === 0) {
-      message.error('请至少配置一个 SKU');
-      return;
-    }
-
-    // 验证 SKU 配置
-    const hasInvalidSku = skuTableData.value.some(
-      (sku) => sku.stock < 1 || sku.seckillPrice < 0.01,
-    );
-    if (hasInvalidSku) {
-      message.error('请正确配置 SKU 的秒杀库存（≥1）和秒杀价格（≥0.01）');
-      return;
-    }
-
     modalApi.lock();
     try {
-      const values = await formApi.getValues();
+      // 获取秒杀商品配置（深拷贝避免直接修改原对象）
+      const products: MallSeckillActivityApi.SeckillProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      if (products.length === 0) {
+        message.error('请选择秒杀商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.seckillPrice = convertToInteger(item.seckillPrice);
+      });
 
-      // 构建提交数据
-      const data: any = {
+      // 提交表单
+      const values = await formApi.getValues();
+      const data = {
         ...values,
-        spuId: spuId.value,
-        products: skuTableData.value.map((sku) => ({
-          skuId: sku.skuId,
-          stock: sku.stock,
-          seckillPrice: Math.round(sku.seckillPrice * 100), // 转换为分
-        })),
-      };
+        products,
+      } as MallSeckillActivityApi.SeckillActivity;
 
       await (formData.value?.id
         ? updateSeckillActivity(data)
         : createSeckillActivity(data));
-
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -120,27 +189,28 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
-      spuId.value = undefined;
-      spuName.value = '';
-      skuTableData.value = [];
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
 
+    // 加载数据
     const data = modalApi.getData<MallSeckillActivityApi.SeckillActivity>();
     if (!data || !data.id) {
       return;
     }
-
+    // 加载数据
     modalApi.lock();
     try {
       formData.value = await getSeckillActivity(data.id);
-      await nextTick();
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId!,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
+      // 设置表单值
       await formApi.setValues(formData.value);
-
-      // TODO: 加载商品和 SKU 信息
-      // 需要调用商品 API 获取 SPU 详情
-      // spuId.value = formData.value.spuId;
-      // await loadProductDetails(formData.value.spuId, formData.value.products);
     } finally {
       modalApi.unlock();
     }
@@ -149,72 +219,59 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-4/5" :title="getTitle">
-    <div class="mx-4">
-      <Form />
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
+              选择商品
+            </Button>
 
-      <!-- 商品选择区域 -->
-      <div class="mt-4">
-        <div class="mb-2 flex items-center">
-          <span class="text-sm font-medium">秒杀活动商品:</span>
-          <Button class="ml-2" type="primary" @click="handleSelectProduct">
-            选择商品
-          </Button>
-          <span v-if="spuName" class="ml-4 text-sm text-gray-600">
-            已选择: {{ spuName }}
-          </span>
-        </div>
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：秒杀活动特有配置 -->
+              <template #default>
+                <VxeColumn align="center" min-width="168" title="秒杀库存">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="秒杀价格(元)">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.seckillPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
 
-        <!-- SKU 配置表格 -->
-        <div v-if="skuTableData.length > 0" class="mt-4">
-          <table class="w-full border-collapse border border-gray-300">
-            <thead>
-              <tr class="bg-gray-100">
-                <th class="border border-gray-300 px-4 py-2">商品图片</th>
-                <th class="border border-gray-300 px-4 py-2">SKU 名称</th>
-                <th class="border border-gray-300 px-4 py-2">原价(元)</th>
-                <th class="border border-gray-300 px-4 py-2">秒杀库存</th>
-                <th class="border border-gray-300 px-4 py-2">秒杀价格(元)</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(sku, index) in skuTableData" :key="index">
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  <img
-                    v-if="sku.picUrl"
-                    :src="sku.picUrl"
-                    alt="商品图片"
-                    class="h-16 w-16 object-cover"
-                  />
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  {{ sku.skuName }}
-                </td>
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  ¥{{ (sku.price / 100).toFixed(2) }}
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  <input
-                    v-model.number="sku.stock"
-                    type="number"
-                    min="0"
-                    class="w-full rounded border border-gray-300 px-2 py-1"
-                  />
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  <input
-                    v-model.number="sku.seckillPrice"
-                    type="number"
-                    min="0"
-                    step="0.01"
-                    class="w-full rounded border border-gray-300 px-2 py-1"
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </Modal>
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/components/showcase.vue b/apps/web-antd/src/views/mall/promotion/seckill/components/showcase.vue
index 9de0df553..d5d414bdf 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/components/showcase.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/components/showcase.vue
@@ -133,7 +133,6 @@ function emitActivityChange() {
         class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
         @click="handleOpenActivitySelect"
       >
-        <!-- TODO @芋艿：等待和 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/product/spu/components/spu-showcase.vue 进一步统一 -->
         <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </Tooltip>
diff --git a/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue b/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
index 496ff29a8..aea34aa21 100644
--- a/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpMaterialApi } from '#/api/mp/material';
 
-import { reactive, ref, watch } from 'vue';
+import { computed, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import { NewsType } from '@vben/constants';
@@ -34,16 +34,6 @@ const emit = defineEmits<{
   (e: 'selectMaterial', item: any): void;
 }>();
 
-const loading = ref(false); // 遮罩层
-const total = ref(0); // 总条数
-const list = ref<any[]>([]); // 数据列表
-const queryParams = reactive({
-  accountId: props.accountId,
-  pageNo: 1,
-  pageSize: 10,
-}); // 查询参数
-
-// TODO @dylan：可以把【点击上传】3 个 tab 的按钮，放到右侧的 toolbar 一起，和刷新按钮放在一行；
 const voiceGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
   [
     {
@@ -123,6 +113,99 @@ const videoGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
     },
   ];
 
+// Image Grid
+const [ImageGrid, imageGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [],
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? props.accountId;
+          if (!finalAccountId) {
+            return { list: [], total: 0 };
+          }
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'image',
+          });
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+// News Grid
+const [NewsGrid, newsGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [],
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? props.accountId;
+          if (!finalAccountId) {
+            return { list: [], total: 0 };
+          }
+          if (props.newsType === NewsType.Published) {
+            const data = await getFreePublishPage({
+              accountId: finalAccountId,
+              pageNo: page.currentPage,
+              pageSize: page.pageSize,
+            });
+            data.list.forEach((item: any) => {
+              const articles = item.content.newsItem;
+              articles.forEach((article: any) => {
+                article.picUrl = article.thumbUrl;
+              });
+            });
+            return data;
+          } else {
+            const data = await getDraftPage({
+              accountId: finalAccountId,
+              pageNo: page.currentPage,
+              pageSize: page.pageSize,
+            });
+            data.list.forEach((draft: any) => {
+              const articles = draft.content.newsItem;
+              articles.forEach((article: any) => {
+                article.picUrl = article.thumbUrl;
+              });
+            });
+            return data;
+          }
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
 const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
   gridOptions: {
     border: true,
@@ -136,7 +219,7 @@ const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, { accountId }) => {
-          const finalAccountId = accountId ?? queryParams.accountId;
+          const finalAccountId = accountId ?? props.accountId;
           if (!finalAccountId) {
             return { list: [], total: 0 };
           }
@@ -172,7 +255,7 @@ const [VideoGrid, videoGridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, { accountId }) => {
-          const finalAccountId = accountId ?? queryParams.accountId;
+          const finalAccountId = accountId ?? props.accountId;
           if (finalAccountId === undefined || finalAccountId === null) {
             return { list: [], total: 0 };
           }
@@ -195,91 +278,164 @@ const [VideoGrid, videoGridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<MpMaterialApi.Material>,
 });
 
+// 从 Grid 获取数据
+const imageList = computed(() => {
+  try {
+    const tableData = imageGridApi.grid?.getTableData();
+    return (tableData?.tableData as MpMaterialApi.Material[]) || [];
+  } catch {
+    return [];
+  }
+});
+
+const imageLoading = computed(() => {
+  return imageGridApi.grid?.loading || false;
+});
+
+const imageTotal = computed(() => {
+  try {
+    const proxyInfo = imageGridApi.grid?.getProxyInfo();
+    return proxyInfo?.pager?.total || 0;
+  } catch {
+    return 0;
+  }
+});
+
+const imageCurrentPage = computed({
+  get: () => {
+    try {
+      return imageGridApi.grid?.pagerConfig?.currentPage || 1;
+    } catch {
+      return 1;
+    }
+  },
+  set: (value: number) => {
+    imageGridApi.grid?.commitProxy('page', { currentPage: value });
+  },
+});
+
+const imagePageSize = computed({
+  get: () => {
+    try {
+      return imageGridApi.grid?.pagerConfig?.pageSize || 10;
+    } catch {
+      return 10;
+    }
+  },
+  set: (value: number) => {
+    imageGridApi.grid?.commitProxy('page', { pageSize: value, currentPage: 1 });
+  },
+});
+
+const newsList = computed(() => {
+  try {
+    const tableData = newsGridApi.grid?.getTableData();
+    return (tableData?.tableData as any[]) || [];
+  } catch {
+    return [];
+  }
+});
+
+const newsLoading = computed(() => {
+  return newsGridApi.grid?.loading || false;
+});
+
+const newsTotal = computed(() => {
+  try {
+    const proxyInfo = newsGridApi.grid?.getProxyInfo();
+    return proxyInfo?.pager?.total || 0;
+  } catch {
+    return 0;
+  }
+});
+
+const newsCurrentPage = computed({
+  get: () => {
+    try {
+      return newsGridApi.grid?.pagerConfig?.currentPage || 1;
+    } catch {
+      return 1;
+    }
+  },
+  set: (value: number) => {
+    newsGridApi.grid?.commitProxy('page', { currentPage: value });
+  },
+});
+
+const newsPageSize = computed({
+  get: () => {
+    try {
+      return newsGridApi.grid?.pagerConfig?.pageSize || 10;
+    } catch {
+      return 10;
+    }
+  },
+  set: (value: number) => {
+    newsGridApi.grid?.commitProxy('page', { pageSize: value, currentPage: 1 });
+  },
+});
+
 function selectMaterialFun(item: any) {
   emit('selectMaterial', item);
 }
 
-async function getMaterialPageFun() {
-  const data = await getMaterialPage({
-    ...queryParams,
-    type: props.type,
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-async function getFreePublishPageFun() {
-  const data = await getFreePublishPage(queryParams);
-  data.list.forEach((item: any) => {
-    const articles = item.content.newsItem;
-    articles.forEach((article: any) => {
-      article.picUrl = article.thumbUrl;
-    });
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-async function getDraftPageFun() {
-  const data = await getDraftPage(queryParams);
-  data.list.forEach((draft: any) => {
-    const articles = draft.content.newsItem;
-    articles.forEach((article: any) => {
-      article.picUrl = article.thumbUrl;
-    });
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-async function getPage() {
-  if (props.type === 'voice') {
-    await voiceGridApi.reload({ accountId: queryParams.accountId });
-    return;
-  }
-  if (props.type === 'video') {
-    await videoGridApi.reload({ accountId: queryParams.accountId });
-    return;
-  }
-
-  loading.value = true;
-  try {
-    if (props.type === 'news' && props.newsType === NewsType.Published) {
-      await getFreePublishPageFun();
-    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
-      await getDraftPageFun();
-    } else {
-      await getMaterialPageFun();
-    }
-  } finally {
-    loading.value = false;
-  }
-}
-
+// 监听 accountId 变化
 watch(
   () => props.accountId,
   (accountId) => {
-    queryParams.accountId = accountId;
-    queryParams.pageNo = 1;
-    getPage();
+    switch (props.type) {
+      case 'image': {
+        imageGridApi.reload({ accountId });
+        break;
+      }
+      case 'news': {
+        newsGridApi.reload({ accountId });
+        break;
+      }
+      case 'video': {
+        videoGridApi.reload({ accountId });
+        break;
+      }
+      case 'voice': {
+        voiceGridApi.reload({ accountId });
+        break;
+      }
+    }
   },
   { immediate: true },
 );
 
+// 监听 type 变化
 watch(
   () => props.type,
   () => {
-    queryParams.pageNo = 1;
-    getPage();
+    switch (props.type) {
+      case 'image': {
+        imageGridApi.reload({ accountId: props.accountId });
+        break;
+      }
+      case 'news': {
+        newsGridApi.reload({ accountId: props.accountId });
+        break;
+      }
+      case 'video': {
+        videoGridApi.reload({ accountId: props.accountId });
+        break;
+      }
+      case 'voice': {
+        voiceGridApi.reload({ accountId: props.accountId });
+        break;
+      }
+    }
   },
 );
 
+// 监听 newsType 变化
 watch(
   () => props.newsType,
   () => {
     if (props.type === 'news') {
-      queryParams.pageNo = 1;
-      getPage();
+      newsGridApi.reload({ accountId: props.accountId });
     }
   },
 );
@@ -289,42 +445,47 @@ watch(
   <Page :bordered="false" class="pb-8">
     <!-- 类型：image -->
     <template v-if="props.type === 'image'">
-      <Spin :spinning="loading">
-        <div
-          class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
-        >
-          <div
-            v-for="item in list"
-            :key="item.mediaId"
-            class="mb-2.5 h-72 break-inside-avoid border border-[#eaeaea] p-2.5"
-          >
-            <img
-              class="h-48 w-full object-contain"
-              :src="item.url"
-              alt="素材图片"
+      <div class="image-grid-wrapper">
+        <ImageGrid>
+          <template #default>
+            <Spin :spinning="imageLoading">
+              <div
+                class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+              >
+                <div
+                  v-for="item in imageList"
+                  :key="item.mediaId"
+                  class="mb-2.5 h-72 break-inside-avoid border border-[#eaeaea] p-2.5"
+                >
+                  <img
+                    class="h-48 w-full object-contain"
+                    :src="item.url"
+                    alt="素材图片"
+                  />
+                  <p class="truncate text-center text-xs leading-[30px]">
+                    {{ item.name }}
+                  </p>
+                  <Row class="flex justify-center pt-2.5">
+                    <Button type="primary" @click="selectMaterialFun(item)">
+                      选择
+                      <template #icon>
+                        <IconifyIcon icon="lucide:circle-check" />
+                      </template>
+                    </Button>
+                  </Row>
+                </div>
+              </div>
+            </Spin>
+            <Pagination
+              v-model:current="imageCurrentPage"
+              v-model:page-size="imagePageSize"
+              :total="imageTotal"
+              class="mt-4"
+              show-size-changer
             />
-            <p class="truncate text-center text-xs leading-[30px]">
-              {{ item.name }}
-            </p>
-            <Row class="flex justify-center pt-2.5">
-              <Button type="primary" @click="selectMaterialFun(item)">
-                选择
-                <template #icon>
-                  <IconifyIcon icon="lucide:circle-check" />
-                </template>
-              </Button>
-            </Row>
-          </div>
-        </div>
-      </Spin>
-      <Pagination
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        :total="total"
-        class="mt-4"
-        @change="getPage"
-        @show-size-change="getPage"
-      />
+          </template>
+        </ImageGrid>
+      </div>
     </template>
 
     <!-- 类型：voice -->
@@ -363,37 +524,52 @@ watch(
 
     <!-- 类型：news -->
     <template v-else-if="props.type === 'news'">
-      <Spin :spinning="loading">
-        <div
-          class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
-        >
-          <div
-            v-for="item in list"
-            :key="item.mediaId"
-            class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
-          >
-            <div v-if="item.content && item.content.newsItem">
-              <WxNews :articles="item.content.newsItem" />
-              <Row class="flex justify-center pt-2.5">
-                <Button type="primary" @click="selectMaterialFun(item)">
-                  选择
-                  <template #icon>
-                    <IconifyIcon icon="lucide:circle-check" />
-                  </template>
-                </Button>
-              </Row>
-            </div>
-          </div>
-        </div>
-      </Spin>
-      <Pagination
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        :total="total"
-        class="mt-4"
-        @change="getPage"
-        @show-size-change="getPage"
-      />
+      <div class="news-grid-wrapper">
+        <NewsGrid>
+          <template #default>
+            <Spin :spinning="newsLoading">
+              <div
+                class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+              >
+                <div
+                  v-for="item in newsList"
+                  :key="item.mediaId"
+                  class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+                >
+                  <div v-if="item.content && item.content.newsItem">
+                    <WxNews :articles="item.content.newsItem" />
+                    <Row class="flex justify-center pt-2.5">
+                      <Button type="primary" @click="selectMaterialFun(item)">
+                        选择
+                        <template #icon>
+                          <IconifyIcon icon="lucide:circle-check" />
+                        </template>
+                      </Button>
+                    </Row>
+                  </div>
+                </div>
+              </div>
+            </Spin>
+            <Pagination
+              v-model:current="newsCurrentPage"
+              v-model:page-size="newsPageSize"
+              :total="newsTotal"
+              class="mt-4"
+              show-size-changer
+            />
+          </template>
+        </NewsGrid>
+      </div>
     </template>
   </Page>
 </template>
+
+<style scoped>
+.image-grid-wrapper :deep(.vxe-grid--body-wrapper) {
+  display: none;
+}
+
+.news-grid-wrapper :deep(.vxe-grid--body-wrapper) {
+  display: none;
+}
+</style>
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/card.scss b/apps/web-antd/src/views/mp/components/wx-msg/card.scss
deleted file mode 100644
index 639f4ca8e..000000000
--- a/apps/web-antd/src/views/mp/components/wx-msg/card.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-.mp-card {
-  &__item {
-    box-sizing: border-box;
-    height: 200px;
-    margin-bottom: 16px;
-    font-size: 14px;
-    font-feature-settings: 'tnum';
-    font-variant: tabular-nums;
-    line-height: 1.5;
-    color: rgb(0 0 0 / 65%);
-    cursor: pointer;
-    list-style: none;
-    background-color: #fff;
-    border: 1px solid #e8e8e8;
-
-    &:hover {
-      border-color: rgb(0 0 0 / 9%);
-      box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
-    }
-
-    &--add {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      font-size: 16px;
-      color: rgb(0 0 0 / 45%);
-      background-color: #fff;
-      border: 1px dashed #000;
-      border-color: #d9d9d9;
-      border-radius: 2px;
-
-      i {
-        margin-right: 10px;
-      }
-
-      &:hover {
-        color: #40a9ff;
-        background-color: #fff;
-        border-color: #40a9ff;
-      }
-    }
-  }
-
-  &__body {
-    display: flex;
-    padding: 24px;
-  }
-
-  &__detail {
-    flex: 1;
-  }
-
-  &__avatar {
-    width: 48px;
-    height: 48px;
-    margin-right: 12px;
-    overflow: hidden;
-    border-radius: 48px;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__title {
-    margin-bottom: 12px;
-    font-size: 16px;
-    color: rgb(0 0 0 / 85%);
-
-    &:hover {
-      color: #1890ff;
-    }
-  }
-
-  &__info {
-    display: -webkit-box;
-    height: 64px;
-    overflow: hidden;
-    -webkit-line-clamp: 3;
-    color: rgb(0 0 0 / 45%);
-    -webkit-box-orient: vertical;
-  }
-
-  &__menu {
-    display: flex;
-    justify-content: space-around;
-    height: 50px;
-    line-height: 50px;
-    color: rgb(0 0 0 / 45%);
-    text-align: center;
-    background: #f7f9fa;
-
-    &:hover {
-      color: #1890ff;
-    }
-  }
-}
-
-/** joolun 额外加的 */
-.mp-comment__main {
-  flex: unset !important;
-  margin: 0 8px !important;
-  border-radius: 5px !important;
-}
-
-.mp-comment__header {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.mp-comment__body {
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/comment.scss b/apps/web-antd/src/views/mp/components/wx-msg/comment.scss
deleted file mode 100644
index 98e137d4b..000000000
--- a/apps/web-antd/src/views/mp/components/wx-msg/comment.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
-.mp-comment {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 30px;
-
-  &--reverse {
-    flex-direction: row-reverse;
-
-    .mp-comment__main {
-      &::before,
-      &::after {
-        right: -8px;
-        left: auto;
-        border-width: 8px 0 8px 8px;
-      }
-
-      &::before {
-        border-left-color: #dedede;
-      }
-
-      &::after {
-        margin-right: 1px;
-        margin-left: auto;
-        border-left-color: #f8f8f8;
-      }
-    }
-  }
-
-  &__avatar {
-    box-sizing: border-box;
-    width: 48px;
-    height: 48px;
-    vertical-align: middle;
-    border: 1px solid transparent;
-    border-radius: 50%;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px 15px;
-    background: #f8f8f8;
-    border-bottom: 1px solid #eee;
-  }
-
-  &__author {
-    font-size: 14px;
-    font-weight: 700;
-    color: #999;
-  }
-
-  &__main {
-    position: relative;
-    flex: 1;
-    margin: 0 20px;
-    border: 1px solid #dedede;
-    border-radius: 2px;
-
-    &::before,
-    &::after {
-      position: absolute;
-      top: 10px;
-      right: 100%;
-      left: -8px;
-      display: block;
-      width: 0;
-      height: 0;
-      pointer-events: none;
-      content: ' ';
-      border-color: transparent;
-      border-style: solid solid outset;
-      border-width: 8px 8px 8px 0;
-    }
-
-    &::before {
-      z-index: 1;
-      border-right-color: #dedede;
-    }
-
-    &::after {
-      z-index: 2;
-      margin-left: 1px;
-      border-right-color: #f8f8f8;
-    }
-  }
-
-  &__body {
-    padding: 15px;
-    overflow: hidden;
-    font-family:
-      'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
-      FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
-      'Hiragino Sans GB W3', FontAwesome, sans-serif;
-    font-size: 14px;
-    color: #333;
-    background: #fff;
-  }
-
-  blockquote {
-    padding: 1px 0 1px 15px;
-    margin: 0;
-    font-family:
-      Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
-      FontAwesome, serif;
-    border-left: 4px solid #ddd;
-  }
-}
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
index 6f3d91e64..cd4bd6cfa 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
@@ -14,7 +14,7 @@ defineOptions({ name: 'TabNews' });
 
 const props = defineProps<{
   modelValue: Reply;
-  newsType: NewsType;
+  newsType?: NewsType;
 }>();
 
 const emit = defineEmits<{
diff --git a/apps/web-antd/src/views/mp/material/components/image-table.vue b/apps/web-antd/src/views/mp/material/components/image-table.vue
deleted file mode 100644
index d5e12cb96..000000000
--- a/apps/web-antd/src/views/mp/material/components/image-table.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script lang="ts" setup>
-import type { MpMaterialApi } from '#/api/mp/material';
-
-import { nextTick, onMounted, watch } from 'vue';
-
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-
-import { useImageGridColumns } from './data';
-
-const props = defineProps<{
-  list: MpMaterialApi.Material[];
-  loading: boolean;
-}>();
-
-const emit = defineEmits<{
-  delete: [v: number];
-}>();
-
-const columns = useImageGridColumns();
-
-const [Grid, gridApi] = useVbenVxeGrid<MpMaterialApi.Material>({
-  gridOptions: {
-    border: true,
-    columns,
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-      height: 220,
-    },
-    showOverflow: 'tooltip',
-  },
-});
-
-function updateGridData(data: MpMaterialApi.Material[]) {
-  if (gridApi.grid?.loadData) {
-    gridApi.grid.loadData(data);
-  } else {
-    gridApi.setGridOptions({ data });
-  }
-}
-
-watch(
-  () => props.list,
-  async (list: MpMaterialApi.Material[]) => {
-    const data = Array.isArray(list) ? list : [];
-    await nextTick();
-    updateGridData(data);
-  },
-  { flush: 'post' },
-);
-
-watch(
-  () => props.loading,
-  (loading: boolean) => {
-    gridApi.setLoading(loading);
-  },
-);
-
-/** 初始化 */
-onMounted(async () => {
-  await nextTick();
-  updateGridData(Array.isArray(props.list) ? props.list : []);
-  gridApi.setLoading(props.loading);
-});
-</script>
-
-<template>
-  <Grid class="image-table-grid mt-4 pb-0">
-    <template #image="{ row }">
-      <div class="flex items-center justify-center" style="height: 192px">
-        <img
-          :src="row.url"
-          class="object-contain"
-          style="display: block; max-width: 100%; max-height: 192px"
-        />
-      </div>
-    </template>
-    <template #actions="{ row }">
-      <TableAction
-        :actions="[
-          {
-            label: '删除',
-            type: 'link',
-            danger: true,
-            icon: ACTION_ICON.DELETE,
-            auth: ['mp:material:delete'],
-            popConfirm: {
-              title: '确定要删除该图片吗？',
-              confirm: () => emit('delete', row.id!),
-            },
-          },
-        ]"
-      />
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-antd/src/views/mp/material/components/video-table.vue b/apps/web-antd/src/views/mp/material/components/video-table.vue
deleted file mode 100644
index 70070dff1..000000000
--- a/apps/web-antd/src/views/mp/material/components/video-table.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MpMaterialApi } from '#/api/mp/material';
-
-import { watch } from 'vue';
-
-import { openWindow } from '@vben/utils';
-
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { WxVideoPlayer } from '#/views/mp/components';
-
-import { useVideoGridColumns } from './data';
-
-const props = defineProps<{
-  list: MpMaterialApi.Material[];
-  loading: boolean;
-}>();
-
-const emit = defineEmits<{
-  delete: [v: number];
-}>();
-
-const columns = useVideoGridColumns();
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    border: true,
-    columns,
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    showOverflow: 'tooltip',
-  } as VxeTableGridOptions<MpMaterialApi.Material>,
-});
-
-watch(
-  () => props.list,
-  (list: MpMaterialApi.Material[]) => {
-    const data = Array.isArray(list) ? list : [];
-    if (gridApi.grid?.loadData) {
-      gridApi.grid.loadData(data);
-    } else {
-      gridApi.setGridOptions({ data });
-    }
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.loading,
-  (loading: boolean) => {
-    gridApi.setLoading(loading);
-  },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <Grid class="mt-4">
-    <template #video="{ row }">
-      <WxVideoPlayer v-if="row.url" :url="row.url" />
-    </template>
-    <template #actions="{ row }">
-      <TableAction
-        :actions="[
-          {
-            label: '下载',
-            type: 'link',
-            icon: ACTION_ICON.DOWNLOAD,
-            onClick: () => openWindow(row.url),
-          },
-          {
-            label: '删除',
-            type: 'link',
-            danger: true,
-            icon: ACTION_ICON.DELETE,
-            auth: ['mp:material:delete'],
-            popConfirm: {
-              title: '确定要删除该视频吗？',
-              confirm: () => emit('delete', row.id!),
-            },
-          },
-        ]"
-      />
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-antd/src/views/mp/material/components/voice-table.vue b/apps/web-antd/src/views/mp/material/components/voice-table.vue
deleted file mode 100644
index 8ea6d0274..000000000
--- a/apps/web-antd/src/views/mp/material/components/voice-table.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MpMaterialApi } from '#/api/mp/material';
-
-import { watch } from 'vue';
-
-import { openWindow } from '@vben/utils';
-
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { WxVoicePlayer } from '#/views/mp/components';
-
-import { useVoiceGridColumns } from './data';
-// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
-
-const props = defineProps<{
-  list: MpMaterialApi.Material[];
-  loading: boolean;
-}>();
-
-const emit = defineEmits<{
-  delete: [v: number];
-}>();
-
-const columns = useVoiceGridColumns();
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    border: true,
-    columns,
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    showOverflow: 'tooltip',
-  } as VxeTableGridOptions<MpMaterialApi.Material>,
-});
-
-watch(
-  () => props.list,
-  (list: MpMaterialApi.Material[]) => {
-    const data = Array.isArray(list) ? list : [];
-    if (gridApi.grid?.loadData) {
-      gridApi.grid.loadData(data);
-    } else {
-      gridApi.setGridOptions({ data });
-    }
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.loading,
-  (loading: boolean) => {
-    gridApi.setLoading(loading);
-  },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <Grid class="mt-4">
-    <template #voice="{ row }">
-      <WxVoicePlayer v-if="row.url" :url="row.url" />
-    </template>
-    <template #actions="{ row }">
-      <TableAction
-        :actions="[
-          {
-            label: '下载',
-            type: 'link',
-            icon: ACTION_ICON.DOWNLOAD,
-            onClick: () => openWindow(row.url),
-          },
-          {
-            label: '删除',
-            type: 'link',
-            danger: true,
-            icon: ACTION_ICON.DELETE,
-            auth: ['mp:material:delete'],
-            popConfirm: {
-              title: '确定要删除该语音吗？',
-              confirm: () => emit('delete', row.id!),
-            },
-          },
-        ]"
-      />
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-antd/src/views/mp/material/index.vue b/apps/web-antd/src/views/mp/material/index.vue
index e85fea246..2d24b6100 100644
--- a/apps/web-antd/src/views/mp/material/index.vue
+++ b/apps/web-antd/src/views/mp/material/index.vue
@@ -1,78 +1,121 @@
 <script lang="ts" setup>
-import { provide, reactive, ref } from 'vue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { provide, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { confirm, DocAlert, Page } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, Card, Form, message, Pagination, Tabs } from 'ant-design-vue';
+import { Button, message, Tabs } from 'ant-design-vue';
 
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deletePermanentMaterial, getMaterialPage } from '#/api/mp/material';
 import { WxAccountSelect } from '#/views/mp/components';
 
-import ImageTable from './components/image-table.vue';
-import { UploadType } from './components/upload';
-import UploadFile from './components/UploadFile.vue';
-import UploadVideo from './components/UploadVideo.vue';
-import VideoTable from './components/video-table.vue';
-import VoiceTable from './components/voice-table.vue';
+import {
+  useGridFormSchema,
+  useImageGridColumns,
+  useVideoGridColumns,
+  useVoiceGridColumns,
+} from './modules/data';
+import { UploadType } from './modules/upload';
+import UploadFile from './modules/UploadFile.vue';
+import UploadVideo from './modules/UploadVideo.vue';
+import {$t} from '@vben/locales';
 
 defineOptions({ name: 'MpMaterial' });
 
 const { hasAccessByCodes } = useAccess();
 
 const type = ref<UploadType>(UploadType.Image); // 素材类型
-const loading = ref(false); // 遮罩层
-const list = ref<any[]>([]); // 数据列表
-const total = ref(0); // 总条数
+const showCreateVideo = ref(false); // 是否新建视频的弹窗
 
 const accountId = ref(-1);
 provide('accountId', accountId);
 
-const queryParams = reactive({
-  accountId,
-  pageNo: 1,
-  pageSize: 10,
-  permanent: true,
-}); // 查询参数
-const showCreateVideo = ref(false); // 是否新建视频的弹窗
-
-/** 侦听公众号变化 */
-function onAccountChanged(id: number) {
-  accountId.value = id;
-  queryParams.accountId = id;
-  queryParams.pageNo = 1;
-  getList();
-}
-
-/** 查询列表 */
-async function getList() {
-  loading.value = true;
-  try {
-    const data = await getMaterialPage({
-      ...queryParams,
-      type: type.value,
-    });
-    list.value = data.list;
-    total.value = data.total;
-  } finally {
-    loading.value = false;
+// 根据类型获取对应的列配置
+const getColumnsByType = () => {
+  switch (type.value) {
+    case UploadType.Image: {
+      return useImageGridColumns();
+    }
+    case UploadType.Video: {
+      return useVideoGridColumns();
+    }
+    case UploadType.Voice: {
+      return useVoiceGridColumns();
+    }
+    default: {
+      return [];
+    }
   }
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: getColumnsByType(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const finalAccountId = formValues?.accountId ?? accountId.value;
+          if (!finalAccountId || finalAccountId === -1) {
+            return { list: [], total: 0 };
+          }
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: type.value,
+            permanent: true,
+            accountId: finalAccountId,
+            ...formValues,
+          });
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+      height: type.value === UploadType.Image ? 220 : 'auto',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+// 当 tab 切换时，更新 Grid 的 columns 和 rowConfig
+async function onTabChange() {
+  const columns = getColumnsByType();
+  gridApi.setGridOptions({
+    columns,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+      height: type.value === UploadType.Image ? 220 : 'auto',
+    },
+  });
+  await gridApi.reload();
 }
 
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.pageNo = 1;
-  getList();
+async function handleAccountChange(id: number) {
+  accountId.value = id;
+  // 同步设置表单值
+  await gridApi.formApi.setValues({ accountId: id });
+  await gridApi.formApi.submitForm();
 }
 
-/** 处理 tab 切换 */
-function onTabChange() {
-  // 提前清空数据，避免 tab 切换后显示垃圾数据
-  list.value = [];
-  total.value = 0;
-  // 从第一页开始查询
-  handleQuery();
+async function handleRefresh() {
+  await gridApi.query();
 }
 
 /** 处理删除操作 */
@@ -85,7 +128,7 @@ async function handleDelete(id: number) {
   try {
     await deletePermanentMaterial(id);
     message.success('删除成功');
-    await getList();
+    await handleRefresh();
   } finally {
     hideLoading();
   }
@@ -97,18 +140,12 @@ async function handleDelete(id: number) {
     <template #doc>
       <DocAlert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
     </template>
-    <div class="h-full">
-      <!-- 搜索工作栏 -->
-      <Card class="h-[10%]" :bordered="false">
-        <Form :model="queryParams" layout="inline">
-          <Form.Item label="公众号">
-            <WxAccountSelect @change="onAccountChanged" />
-          </Form.Item>
-        </Form>
-      </Card>
-
-      <Card :bordered="false" class="mt-4 h-auto">
-        <Tabs v-model:active-key="type" @change="onTabChange">
+    <Grid class="material-grid">
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
+      <template #toolbar-actions>
+        <Tabs v-model:active-key="type" class="w-full" @change="onTabChange">
           <!-- tab 1：图片  -->
           <Tabs.TabPane :key="UploadType.Image">
             <template #tab>
@@ -117,30 +154,6 @@ async function handleDelete(id: number) {
                 图片
               </span>
             </template>
-            <UploadFile
-              v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
-              :type="UploadType.Image"
-              @uploaded="getList"
-            >
-              支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
-            </UploadFile>
-            <!-- 列表 -->
-            <ImageTable
-              :list="list"
-              :loading="loading"
-              @delete="handleDelete"
-            />
-            <!-- 分页组件 -->
-            <div class="mt-4 flex justify-end">
-              <Pagination
-                v-model:current="queryParams.pageNo"
-                v-model:page-size="queryParams.pageSize"
-                :total="total"
-                show-size-changer
-                @change="getList"
-                @show-size-change="getList"
-              />
-            </div>
           </Tabs.TabPane>
 
           <!-- tab 2：语音  -->
@@ -151,30 +164,6 @@ async function handleDelete(id: number) {
                 语音
               </span>
             </template>
-            <UploadFile
-              v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
-              :type="UploadType.Voice"
-              @uploaded="getList"
-            >
-              格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
-            </UploadFile>
-            <!-- 列表 -->
-            <VoiceTable
-              :list="list"
-              :loading="loading"
-              @delete="handleDelete"
-            />
-            <!-- 分页组件 -->
-            <div class="mt-4 flex justify-end">
-              <Pagination
-                v-model:current="queryParams.pageNo"
-                v-model:page-size="queryParams.pageSize"
-                :total="total"
-                show-size-changer
-                @change="getList"
-                @show-size-change="getList"
-              />
-            </div>
           </Tabs.TabPane>
 
           <!-- tab 3：视频 -->
@@ -185,35 +174,81 @@ async function handleDelete(id: number) {
                 视频
               </span>
             </template>
-            <Button
-              v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
-              type="primary"
-              @click="showCreateVideo = true"
-            >
-              新建视频
-            </Button>
-            <!-- 新建视频的弹窗 -->
-            <UploadVideo v-model:open="showCreateVideo" @uploaded="getList" />
-            <!-- 列表 -->
-            <VideoTable
-              :list="list"
-              :loading="loading"
-              @delete="handleDelete"
-            />
-            <!-- 分页组件 -->
-            <div class="mt-4 flex justify-end">
-              <Pagination
-                v-model:current="queryParams.pageNo"
-                v-model:page-size="queryParams.pageSize"
-                :total="total"
-                show-size-changer
-                @change="getList"
-                @show-size-change="getList"
-              />
-            </div>
           </Tabs.TabPane>
         </Tabs>
-      </Card>
-    </div>
+      </template>
+      <template #toolbar-tools>
+        <UploadFile
+          v-if="
+            hasAccessByCodes(['mp:material:upload-permanent']) &&
+            type === UploadType.Image
+          "
+          :type="UploadType.Image"
+          @uploaded="handleRefresh"
+        />
+        <UploadFile
+          v-if="
+            hasAccessByCodes(['mp:material:upload-permanent']) &&
+            type === UploadType.Voice
+          "
+          :type="UploadType.Voice"
+          @uploaded="handleRefresh"
+        />
+        <Button
+          v-if="
+            hasAccessByCodes(['mp:material:upload-permanent']) &&
+            type === UploadType.Video
+          "
+          type="primary"
+          @click="showCreateVideo = true"
+        >
+          新建视频
+        </Button>
+      </template>
+
+      <!-- 图片列的 slot -->
+      <template #image="{ row }">
+        <div class="flex items-center justify-center" style="height: 192px">
+          <img
+            :src="row.url"
+            class="object-contain"
+            style="display: block; max-width: 100%; max-height: 192px"
+          />
+        </div>
+      </template>
+
+      <!-- 语音列的 slot -->
+      <template #voice="{ row }">
+        <audio :src="row.url" controls style="width: 160px"></audio>
+      </template>
+
+      <!-- 视频列的 slot -->
+      <template #video="{ row }">
+        <video
+          :src="row.url"
+          controls
+          style="width: 200px; height: 150px"
+        ></video>
+      </template>
+
+      <!-- 操作列的 slot -->
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:material:delete'],
+              onClick: () => handleDelete(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 新建视频的弹窗 -->
+    <UploadVideo v-model:open="showCreateVideo" @uploaded="handleRefresh" />
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/material/components/UploadFile.vue b/apps/web-antd/src/views/mp/material/modules/UploadFile.vue
similarity index 99%
rename from apps/web-antd/src/views/mp/material/components/UploadFile.vue
rename to apps/web-antd/src/views/mp/material/modules/UploadFile.vue
index 213bb3ac5..51d46894b 100644
--- a/apps/web-antd/src/views/mp/material/components/UploadFile.vue
+++ b/apps/web-antd/src/views/mp/material/modules/UploadFile.vue
@@ -86,7 +86,6 @@ const customRequest: UploadProps['customRequest'] = async function (options) {
     :file-list="fileList"
     :headers="HEADERS"
     :multiple="true"
-    class="mb-4"
   >
     <Button type="primary">
       <IconifyIcon icon="lucide:upload" class="mr-1" />
diff --git a/apps/web-antd/src/views/mp/material/components/UploadVideo.vue b/apps/web-antd/src/views/mp/material/modules/UploadVideo.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/material/components/UploadVideo.vue
rename to apps/web-antd/src/views/mp/material/modules/UploadVideo.vue
diff --git a/apps/web-antd/src/views/mp/material/components/data.ts b/apps/web-antd/src/views/mp/material/modules/data.ts
similarity index 91%
rename from apps/web-antd/src/views/mp/material/components/data.ts
rename to apps/web-antd/src/views/mp/material/modules/data.ts
index 59b5de3e7..cd3e07ac1 100644
--- a/apps/web-antd/src/views/mp/material/components/data.ts
+++ b/apps/web-antd/src/views/mp/material/modules/data.ts
@@ -1,7 +1,7 @@
+import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpMaterialApi } from '#/api/mp/material';
 
-// TODO @dylan：看看 ele 要迁移一个么？
 /** 视频表格列配置 */
 export function useVideoGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
   return [
@@ -132,3 +132,14 @@ export function useImageGridColumns(): VxeTableGridOptions<MpMaterialApi.Materia
     },
   ];
 }
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Input',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/material/components/upload.ts b/apps/web-antd/src/views/mp/material/modules/upload.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/material/components/upload.ts
rename to apps/web-antd/src/views/mp/material/modules/upload.ts
diff --git a/apps/web-antd/src/views/mp/message/data.ts b/apps/web-antd/src/views/mp/message/data.ts
new file mode 100644
index 000000000..2aaf1303c
--- /dev/null
+++ b/apps/web-antd/src/views/mp/message/data.ts
@@ -0,0 +1,94 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMessageApi } from '#/api/mp/message';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'type',
+      label: '消息类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择消息类型',
+        options: getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE),
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'openid',
+      label: '用户标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户标识',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MpMessageApi.Message>['columns'] {
+  return [
+    {
+      field: 'createTime',
+      title: '发送时间',
+      width: 180,
+      align: 'center',
+      slots: { default: 'createTime' },
+    },
+    {
+      field: 'type',
+      title: '消息类型',
+      width: 80,
+      align: 'center',
+    },
+    {
+      field: 'sendFrom',
+      title: '发送方',
+      width: 80,
+      align: 'center',
+      slots: { default: 'sendFrom' },
+    },
+    {
+      field: 'openid',
+      title: '用户标识',
+      width: 300,
+      align: 'center',
+    },
+    {
+      field: 'content',
+      title: '内容',
+      align: 'left',
+      minWidth: 320,
+      slots: { default: 'content' },
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 120,
+      align: 'center',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/message/index.vue b/apps/web-antd/src/views/mp/message/index.vue
index 7c0a82ed8..0aead5be1 100644
--- a/apps/web-antd/src/views/mp/message/index.vue
+++ b/apps/web-antd/src/views/mp/message/index.vue
@@ -1,184 +1,228 @@
 <script lang="ts" setup>
-import type { Dayjs } from 'dayjs';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMessageApi } from '#/api/mp/message';
 
-import { reactive, ref } from 'vue';
+import { ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
-import { DICT_TYPE, MpMsgType } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { IconifyIcon } from '@vben/icons';
+import { MpMsgType as MsgType } from '@vben/constants';
+import { formatDate2 } from '@vben/utils';
 
-import {
-  Button,
-  DatePicker,
-  Form,
-  FormItem,
-  Input,
-  Modal,
-  Pagination,
-  Select,
-} from 'ant-design-vue';
+import { Image, Modal, Tag } from 'ant-design-vue';
 
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getMessagePage } from '#/api/mp/message';
-import { WxAccountSelect, WxMsg } from '#/views/mp/components';
+import {
+  WxAccountSelect,
+  WxLocation,
+  WxMsg,
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
 
-import MessageTable from './message-table.vue';
+import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'MpMessage' });
 
-const loading = ref(false);
-const total = ref(0); // 数据的总页数
-const list = ref<any[]>([]); // 当前页的列表数据
-
-const queryParams = reactive<{
-  accountId: number;
-  createTime: [Dayjs, Dayjs] | undefined;
-  openid: string;
-  pageNo: number;
-  pageSize: number;
-  type: string;
-}>({
-  accountId: -1,
-  createTime: undefined,
-  openid: '',
-  pageNo: 1,
-  pageSize: 10,
-  type: MpMsgType.Text,
-}); // 搜索参数
-
-const queryFormRef = ref(); // 搜索的表单
-
 // 消息对话框
 const messageBoxVisible = ref(false);
 const messageBoxUserId = ref(0);
 
-/** 侦听 accountId */
-function onAccountChanged(id: number) {
-  queryParams.accountId = id;
-  queryParams.pageNo = 1;
-  handleQuery();
-}
-
-/** 查询列表 */
-function handleQuery() {
-  queryParams.pageNo = 1;
-  getList();
-}
-
-async function getList() {
-  try {
-    loading.value = true;
-    const data = await getMessagePage(queryParams);
-    list.value = data.list;
-    total.value = data.total;
-  } finally {
-    loading.value = false;
-  }
-}
-
-/** 重置按钮操作 */
-async function resetQuery() {
-  // 暂存 accountId，并在 reset 后恢复
-  const accountId = queryParams.accountId;
-  queryFormRef.value?.resetFields();
-  queryParams.accountId = accountId;
-  handleQuery();
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
 }
 
 /** 打开消息发送窗口 */
-async function handleSend(userId: number) {
+function handleSend(userId: number) {
   messageBoxUserId.value = userId;
   messageBoxVisible.value = true;
 }
 
-/** 分页改变事件 */
-function handlePageChange(page: number, pageSize: number) {
-  queryParams.pageNo = page;
-  queryParams.pageSize = pageSize;
-  getList();
-}
-
-/** 显示总条数 */
-function showTotal(total: number) {
-  return `共 ${total} 条`;
-}
+const [Grid, gridApi] = useVbenVxeGrid<MpMessageApi.Message>({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<MpMessageApi.Message>,
+});
 </script>
 
 <template>
-  <Page auto-content-height class="flex flex-col">
-    <!-- 搜索工作栏 -->
-    <div class="mb-4 rounded-lg bg-background p-4">
-      <Form
-        ref="queryFormRef"
-        :model="queryParams"
-        layout="inline"
-        class="search-form"
-      >
-        <FormItem label="公众号" name="accountId">
-          <WxAccountSelect @change="onAccountChanged" />
-        </FormItem>
-        <FormItem label="消息类型" name="type">
-          <Select
-            v-model:value="queryParams.type"
-            placeholder="请选择消息类型"
-            class="!w-[240px]"
-          >
-            <Select.Option
-              v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
-              :key="dict.value"
-              :value="dict.value"
-            >
-              {{ dict.label }}
-            </Select.Option>
-          </Select>
-        </FormItem>
-        <FormItem label="用户标识" name="openid">
-          <Input
-            v-model:value="queryParams.openid"
-            placeholder="请输入用户标识"
-            allow-clear
-            class="!w-[240px]"
-          />
-        </FormItem>
-        <FormItem label="创建时间" name="createTime">
-          <DatePicker.RangePicker
-            v-model:value="queryParams.createTime"
-            :show-time="true"
-            class="!w-[240px]"
-          />
-        </FormItem>
-        <FormItem>
-          <Button type="primary" @click="handleQuery">
-            <template #icon>
-              <IconifyIcon icon="mdi:magnify" />
-            </template>
-            搜索
-          </Button>
-          <Button class="ml-2" @click="resetQuery">
-            <template #icon>
-              <IconifyIcon icon="mdi:refresh" />
-            </template>
-            重置
-          </Button>
-        </FormItem>
-      </Form>
-    </div>
+  <Page auto-content-height>
+    <Grid>
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
+      <template #createTime="{ row }">
+        {{ row.createTime ? formatDate2(row.createTime) : '' }}
+      </template>
 
-    <!-- 列表 -->
-    <div class="flex-1 rounded-lg bg-background p-4">
-      <MessageTable :list="list" :loading="loading" @send="handleSend" />
-      <div v-show="total > 0" class="mt-4 flex justify-end">
-        <Pagination
-          v-model:current="queryParams.pageNo"
-          v-model:page-size="queryParams.pageSize"
-          :total="total"
-          show-size-changer
-          show-quick-jumper
-          :show-total="showTotal"
-          @change="handlePageChange"
+      <template #sendFrom="{ row }">
+        <Tag v-if="row.sendFrom === 1" color="success">粉丝</Tag>
+        <Tag v-else>公众号</Tag>
+      </template>
+
+      <template #content="{ row }">
+        <div
+          v-if="
+            (row.type as string) === (MsgType.Event as string) &&
+            (row.event as string) === 'subscribe'
+          "
+        >
+          <Tag color="success">关注</Tag>
+        </div>
+        <div
+          v-else-if="
+            (row.type as string) === (MsgType.Event as string) &&
+            (row.event as string) === 'unsubscribe'
+          "
+        >
+          <Tag color="error">取消关注</Tag>
+        </div>
+        <div
+          v-else-if="
+            (row.type as string) === (MsgType.Event as string) &&
+            (row.event as string) === 'CLICK'
+          "
+        >
+          <Tag>点击菜单</Tag>
+          【{{ row.eventKey }}】
+        </div>
+        <div v-else-if="row.type === MsgType.Event && row.event === 'VIEW'">
+          <Tag>点击菜单链接</Tag>
+          【{{ row.eventKey }}】
+        </div>
+        <div
+          v-else-if="
+            row.type === MsgType.Event && row.event === 'scancode_waitmsg'
+          "
+        >
+          <Tag>扫码结果</Tag>
+          【{{ row.eventKey }}】
+        </div>
+        <div
+          v-else-if="
+            row.type === MsgType.Event && row.event === 'scancode_push'
+          "
+        >
+          <Tag>扫码结果</Tag>
+          【{{ row.eventKey }}】
+        </div>
+        <div
+          v-else-if="row.type === MsgType.Event && row.event === 'pic_sysphoto'"
+        >
+          <Tag>系统拍照发图</Tag>
+        </div>
+        <div
+          v-else-if="
+            row.type === MsgType.Event && row.event === 'pic_photo_or_album'
+          "
+        >
+          <Tag>拍照或者相册</Tag>
+        </div>
+        <div
+          v-else-if="row.type === MsgType.Event && row.event === 'pic_weixin'"
+        >
+          <Tag>微信相册</Tag>
+        </div>
+        <div
+          v-else-if="
+            row.type === MsgType.Event && row.event === 'location_select'
+          "
+        >
+          <Tag>选择地理位置</Tag>
+        </div>
+        <div v-else-if="row.type === MsgType.Event">
+          <Tag color="error">未知事件类型</Tag>
+        </div>
+
+        <div v-else-if="row.type === MsgType.Text">{{ row.content }}</div>
+        <div v-else-if="row.type === MsgType.Voice">
+          <WxVoicePlayer
+            :url="row.mediaUrl || ''"
+            :content="row.recognition || ''"
+          />
+        </div>
+        <div v-else-if="row.type === MsgType.Image">
+          <a :href="row.mediaUrl" target="_blank">
+            <Image :src="row.mediaUrl" :width="100" :preview="false" />
+          </a>
+        </div>
+        <div
+          v-else-if="row.type === MsgType.Video || row.type === 'shortvideo'"
+        >
+          <WxVideoPlayer :url="row.mediaUrl || ''" class="mt-2" />
+        </div>
+        <div v-else-if="row.type === MsgType.Link">
+          <Tag>链接</Tag>
+          ：
+          <a :href="row.url" target="_blank">{{ row.title }}</a>
+        </div>
+        <div v-else-if="row.type === MsgType.Location">
+          <WxLocation
+            :label="row.label || ''"
+            :location-y="row.locationY || 0"
+            :location-x="row.locationX || 0"
+          />
+        </div>
+        <div v-else-if="row.type === MsgType.Music">
+          <WxMusic
+            :title="row.title"
+            :description="row.description"
+            :thumb-media-url="row.thumbMediaUrl || ''"
+            :music-url="row.musicUrl"
+            :hq-music-url="row.hqMusicUrl"
+          />
+        </div>
+        <div v-else-if="row.type === MsgType.News">
+          <WxNews :articles="row.articles" />
+        </div>
+        <div v-else>
+          <Tag color="error">未知消息类型</Tag>
+        </div>
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '消息',
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              onClick: () => handleSend(row.userId || 0),
+            },
+          ]"
         />
-      </div>
-    </div>
+      </template>
+    </Grid>
 
     <!-- 发送消息的弹窗 -->
     <Modal
@@ -192,9 +236,3 @@ function showTotal(total: number) {
     </Modal>
   </Page>
 </template>
-
-<style scoped>
-.search-form :deep(.ant-form-item) {
-  margin-bottom: 16px;
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/message/message-table.vue b/apps/web-antd/src/views/mp/message/message-table.vue
deleted file mode 100644
index b24d1ec81..000000000
--- a/apps/web-antd/src/views/mp/message/message-table.vue
+++ /dev/null
@@ -1,262 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MpMessageApi } from '#/api/mp/message';
-
-import { onMounted, watch } from 'vue';
-
-import { MpMsgType as MsgType } from '@vben/constants';
-import { formatDate2 } from '@vben/utils';
-
-import { Button, Image, Tag } from 'ant-design-vue';
-
-// TODO @dylan：看看 ele 要迁移一个么？
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import {
-  WxLocation,
-  WxMusic,
-  WxNews,
-  WxVideoPlayer,
-  WxVoicePlayer,
-} from '#/views/mp/components';
-
-const props = withDefaults(
-  defineProps<{
-    list?: MpMessageApi.Message[];
-    loading?: boolean;
-  }>(),
-  {
-    list() {
-      return [];
-    },
-    loading: false,
-  },
-);
-
-const emit = defineEmits<{
-  (e: 'send', userId: number): void;
-}>();
-
-const columns: VxeTableGridOptions<MpMessageApi.Message>['columns'] = [
-  {
-    field: 'createTime',
-    title: '发送时间',
-    width: 180,
-    align: 'center',
-    slots: { default: 'createTime' },
-  },
-  {
-    field: 'type',
-    title: '消息类型',
-    width: 80,
-    align: 'center',
-  },
-  {
-    field: 'sendFrom',
-    title: '发送方',
-    width: 80,
-    align: 'center',
-    slots: { default: 'sendFrom' },
-  },
-  {
-    field: 'openid',
-    title: '用户标识',
-    width: 300,
-    align: 'center',
-  },
-  {
-    field: 'content',
-    title: '内容',
-    align: 'left',
-    minWidth: 320,
-    slots: { default: 'content' },
-  },
-  {
-    field: 'actions',
-    title: '操作',
-    width: 120,
-    align: 'center',
-    fixed: 'right',
-    slots: { default: 'actions' },
-  },
-];
-
-const [Grid, gridApi] = useVbenVxeGrid<MpMessageApi.Message>({
-  gridOptions: {
-    border: true,
-    columns,
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    showOverflow: 'tooltip',
-  },
-});
-
-function normalizeList(list?: MpMessageApi.Message[]) {
-  return Array.isArray(list) ? list : [];
-}
-
-function updateGridData(data: MpMessageApi.Message[]) {
-  if (gridApi.grid?.loadData) {
-    gridApi.grid.loadData(data);
-  } else {
-    gridApi.setGridOptions({ data });
-  }
-}
-
-watch(
-  () => props.list,
-  (list) => {
-    updateGridData(normalizeList(list));
-  },
-  { flush: 'post' },
-);
-
-watch(
-  () => props.loading,
-  (loading) => {
-    gridApi.setLoading(loading);
-  },
-);
-
-/** 初始化 */
-onMounted(() => {
-  updateGridData(normalizeList(props.list));
-  gridApi.setLoading(props.loading);
-});
-</script>
-
-<template>
-  <Grid>
-    <template #createTime="{ row }">
-      {{ row.createTime ? formatDate2(row.createTime) : '' }}
-    </template>
-
-    <template #sendFrom="{ row }">
-      <Tag v-if="row.sendFrom === 1" color="success">粉丝</Tag>
-      <Tag v-else color="default">公众号</Tag>
-    </template>
-
-    <template #content="{ row }">
-      <div
-        v-if="
-          (row.type as string) === (MsgType.Event as string) &&
-          (row.event as string) === 'subscribe'
-        "
-      >
-        <Tag color="success">关注</Tag>
-      </div>
-      <div
-        v-else-if="
-          (row.type as string) === (MsgType.Event as string) &&
-          (row.event as string) === 'unsubscribe'
-        "
-      >
-        <Tag color="error">取消关注</Tag>
-      </div>
-      <div
-        v-else-if="
-          (row.type as string) === (MsgType.Event as string) &&
-          (row.event as string) === 'CLICK'
-        "
-      >
-        <Tag>点击菜单</Tag>
-        【{{ row.eventKey }}】
-      </div>
-      <div v-else-if="row.type === MsgType.Event && row.event === 'VIEW'">
-        <Tag>点击菜单链接</Tag>
-        【{{ row.eventKey }}】
-      </div>
-      <div
-        v-else-if="
-          row.type === MsgType.Event && row.event === 'scancode_waitmsg'
-        "
-      >
-        <Tag>扫码结果</Tag>
-        【{{ row.eventKey }}】
-      </div>
-      <div
-        v-else-if="row.type === MsgType.Event && row.event === 'scancode_push'"
-      >
-        <Tag>扫码结果</Tag>
-        【{{ row.eventKey }}】
-      </div>
-      <div
-        v-else-if="row.type === MsgType.Event && row.event === 'pic_sysphoto'"
-      >
-        <Tag>系统拍照发图</Tag>
-      </div>
-      <div
-        v-else-if="
-          row.type === MsgType.Event && row.event === 'pic_photo_or_album'
-        "
-      >
-        <Tag>拍照或者相册</Tag>
-      </div>
-      <div v-else-if="row.type === MsgType.Event && row.event === 'pic_weixin'">
-        <Tag>微信相册</Tag>
-      </div>
-      <div
-        v-else-if="
-          row.type === MsgType.Event && row.event === 'location_select'
-        "
-      >
-        <Tag>选择地理位置</Tag>
-      </div>
-      <div v-else-if="row.type === MsgType.Event">
-        <Tag color="error">未知事件类型</Tag>
-      </div>
-
-      <div v-else-if="row.type === MsgType.Text">{{ row.content }}</div>
-      <div v-else-if="row.type === MsgType.Voice">
-        <WxVoicePlayer
-          :url="row.mediaUrl || ''"
-          :content="row.recognition || ''"
-        />
-      </div>
-      <div v-else-if="row.type === MsgType.Image">
-        <a :href="row.mediaUrl" target="_blank">
-          <Image :src="row.mediaUrl" :width="100" :preview="false" />
-        </a>
-      </div>
-      <div v-else-if="row.type === MsgType.Video || row.type === 'shortvideo'">
-        <WxVideoPlayer :url="row.mediaUrl || ''" class="mt-2" />
-      </div>
-      <div v-else-if="row.type === MsgType.Link">
-        <Tag>链接</Tag>
-        ：
-        <a :href="row.url" target="_blank">{{ row.title }}</a>
-      </div>
-      <div v-else-if="row.type === MsgType.Location">
-        <WxLocation
-          :label="row.label || ''"
-          :location-y="row.locationY || 0"
-          :location-x="row.locationX || 0"
-        />
-      </div>
-      <div v-else-if="row.type === MsgType.Music">
-        <WxMusic
-          :title="row.title"
-          :description="row.description"
-          :thumb-media-url="row.thumbMediaUrl || ''"
-          :music-url="row.musicUrl"
-          :hq-music-url="row.hqMusicUrl"
-        />
-      </div>
-      <div v-else-if="row.type === MsgType.News">
-        <WxNews :articles="row.articles" />
-      </div>
-      <div v-else>
-        <Tag color="error">未知消息类型</Tag>
-      </div>
-    </template>
-
-    <template #actions="{ row }">
-      <Button type="link" @click="emit('send', row.userId || 0)"> 消息 </Button>
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-antd/src/views/system/dept/components/index.ts b/apps/web-antd/src/views/system/dept/components/index.ts
new file mode 100644
index 000000000..04d2b6145
--- /dev/null
+++ b/apps/web-antd/src/views/system/dept/components/index.ts
@@ -0,0 +1 @@
+export { default as DeptSelectModal } from './select-modal.vue';
diff --git a/apps/web-antd/src/components/select-modal/dept-select-modal.vue b/apps/web-antd/src/views/system/dept/components/select-modal.vue
similarity index 85%
rename from apps/web-antd/src/components/select-modal/dept-select-modal.vue
rename to apps/web-antd/src/views/system/dept/components/select-modal.vue
index 09cea78ef..b53e32a49 100644
--- a/apps/web-antd/src/components/select-modal/dept-select-modal.vue
+++ b/apps/web-antd/src/views/system/dept/components/select-modal.vue
@@ -1,4 +1,3 @@
-// TODO @芋艿：是否有更好的组织形式？！
 <script lang="ts" setup>
 import type { DataNode } from 'ant-design-vue/es/tree';
 
@@ -17,16 +16,11 @@ defineOptions({ name: 'DeptSelectModal' });
 
 const props = withDefaults(
   defineProps<{
-    // 取消按钮文本
-    cancelText?: string;
-    // checkable 状态下节点选择完全受控
-    checkStrictly?: boolean;
-    // 确认按钮文本
-    confirmText?: string;
-    // 是否支持多选
-    multiple?: boolean;
-    // 标题
-    title?: string;
+    cancelText?: string; // 取消按钮文本
+    checkStrictly?: boolean; // checkable 状态下节点选择完全受控
+    confirmText?: string; // 确认按钮文本
+    multiple?: boolean; // 是否支持多选
+    title?: string; // 标题
   }>(),
   {
     cancelText: '取消',
@@ -42,17 +36,13 @@ const emit = defineEmits<{
 }>();
 
 type checkedKeys = number[] | { checked: number[]; halfChecked: number[] };
-// 部门树形结构
-const deptTree = ref<DataNode[]>([]);
-// 选中的部门 ID 列表
-const selectedDeptIds = ref<checkedKeys>([]);
-// 部门数据
-const deptData = ref<SystemDeptApi.Dept[]>([]);
+const deptTree = ref<DataNode[]>([]); // 部门树形结构
+const selectedDeptIds = ref<checkedKeys>([]); // 选中的部门 ID 列表
+const deptData = ref<SystemDeptApi.Dept[]>([]); // 部门数据
 
-// 对话框配置
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    // 获取选中的部门ID
+    // 获取选中的部门 ID
     const selectedIds: number[] = Array.isArray(selectedDeptIds.value)
       ? selectedDeptIds.value
       : selectedDeptIds.value.checked || [];
diff --git a/apps/web-antd/src/views/system/loginlog/data.ts b/apps/web-antd/src/views/system/loginlog/data.ts
index 24433e9ac..386d832de 100644
--- a/apps/web-antd/src/views/system/loginlog/data.ts
+++ b/apps/web-antd/src/views/system/loginlog/data.ts
@@ -53,7 +53,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       field: 'logType',
-      title: '操作类型',
+      title: '登录类型',
       minWidth: 120,
       cellRender: {
         name: 'CellDict',
@@ -108,7 +108,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       field: 'logType',
-      label: '操作类型',
+      label: '登录类型',
       render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
diff --git a/apps/web-antd/src/views/system/mail/template/data.ts b/apps/web-antd/src/views/system/mail/template/data.ts
index f7345abb5..71f4ab397 100644
--- a/apps/web-antd/src/views/system/mail/template/data.ts
+++ b/apps/web-antd/src/views/system/mail/template/data.ts
@@ -83,14 +83,6 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: z.number().default(CommonStatusEnum.ENABLE),
     },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-      },
-    },
   ];
 }
 
diff --git a/apps/web-antd/src/views/system/operatelog/data.ts b/apps/web-antd/src/views/system/operatelog/data.ts
index 3144daa90..c75d4c26f 100644
--- a/apps/web-antd/src/views/system/operatelog/data.ts
+++ b/apps/web-antd/src/views/system/operatelog/data.ts
@@ -2,9 +2,13 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
 import { formatDateTime } from '@vben/utils';
 
 import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -139,6 +143,11 @@ export function useDetailSchema(): DescriptionItemSchema[] {
       field: 'userId',
       label: '操作人编号',
     },
+    {
+      field: 'userType',
+      label: '操作人类型',
+      render: (val) => h(DictTag, { type: DICT_TYPE.USER_TYPE, value: val }),
+    },
     {
       field: 'userName',
       label: '操作人名字',
diff --git a/apps/web-antd/src/views/system/social/client/data.ts b/apps/web-antd/src/views/system/social/client/data.ts
index 15402d12a..c9638ff37 100644
--- a/apps/web-antd/src/views/system/social/client/data.ts
+++ b/apps/web-antd/src/views/system/social/client/data.ts
@@ -82,6 +82,18 @@ export function useFormSchema(): VbenFormSchema[] {
           values.socialType === SystemUserSocialTypeEnum.WECHAT_ENTERPRISE.type,
       },
     },
+    {
+      fieldName: 'publicKey',
+      label: 'publicKey',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 publicKey 公钥',
+      },
+      dependencies: {
+        triggerFields: ['socialType'],
+        show: (values) => values.socialType === 40,
+      },
+    },
     {
       fieldName: 'status',
       label: '状态',
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..9f00ad117
--- /dev/null
+++ b/apps/web-antd/src/views/system/user/components/index.ts
@@ -0,0 +1 @@
+export { default as UserSelectModal } from './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/select-modal.vue
similarity index 95%
rename from apps/web-antd/src/components/select-modal/user-select-modal.vue
rename to apps/web-antd/src/views/system/user/components/select-modal.vue
index 77ef98155..755399269 100644
--- a/apps/web-antd/src/components/select-modal/user-select-modal.vue
+++ b/apps/web-antd/src/views/system/user/components/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';
@@ -24,7 +23,7 @@ import {
 import { getSimpleDeptList } from '#/api/system/dept';
 import { getUserPage } from '#/api/system/user';
 
-// 部门树节点接口
+/** 部门树节点接口 */
 interface DeptTreeNode {
   key: string;
   title: string;
@@ -68,7 +67,6 @@ const deptSearchKeys = ref('');
 const userList = ref<SystemUserApi.User[]>([]); // 存储所有已知用户
 const selectedUserIds = ref<string[]>([]);
 
-// 弹窗配置
 const [Modal, modalApi] = useVbenModal({
   onCancel: handleCancel,
   onClosed: handleClosed,
@@ -122,7 +120,6 @@ const [Modal, modalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-// 左侧列表状态
 const leftListState = ref({
   searchValue: '',
   dataSource: [] as SystemUserApi.User[],
@@ -131,9 +128,8 @@ const leftListState = ref({
     pageSize: 10,
     total: 0,
   },
-});
+}); // 左侧列表状态
 
-// 右侧列表状态
 const rightListState = ref({
   searchValue: '',
   dataSource: [] as SystemUserApi.User[],
@@ -142,17 +138,15 @@ const rightListState = ref({
     pageSize: 10,
     total: 0,
   },
-});
+}); // 右侧列表状态
 
-// 计算属性：Transfer 数据源
 const transferDataSource = computed(() => {
   return [
     ...leftListState.value.dataSource,
     ...rightListState.value.dataSource,
   ];
-});
+}); // 计算属性：Transfer 数据源
 
-// 过滤部门树数据
 const filteredDeptTree = computed(() => {
   if (!deptSearchKeys.value) return deptTree.value;
 
@@ -190,9 +184,9 @@ const filteredDeptTree = computed(() => {
   };
 
   return deptTree.value.map((node: any) => filterNode(node)).filter(Boolean);
-});
+}); // 过滤部门树数据
 
-// 加载用户数据
+/** 加载用户数据 */
 async function loadUserData(pageNo: number, pageSize: number) {
   try {
     const { list, total } = await getUserPage({
@@ -219,9 +213,9 @@ async function loadUserData(pageNo: number, pageSize: number) {
   }
 }
 
-// 更新右侧列表数据
+/** 更新右侧列表数据 */
 function updateRightListData() {
-  // 使用 Set 来去重选中的用户ID
+  // 使用 Set 来去重选中的用户 ID
   const uniqueSelectedIds = new Set(selectedUserIds.value);
 
   // 获取选中的用户，确保不重复
@@ -251,19 +245,19 @@ function updateRightListData() {
   rightListState.value.dataSource = filteredUsers.slice(startIndex, endIndex);
 }
 
-// 处理左侧分页变化
+/** 处理左侧分页变化 */
 async function handleLeftPaginationChange(page: number, pageSize: number) {
   await loadUserData(page, pageSize);
 }
 
-// 处理右侧分页变化
+/** 处理右侧分页变化 */
 function handleRightPaginationChange(page: number, pageSize: number) {
   rightListState.value.pagination.current = page;
   rightListState.value.pagination.pageSize = pageSize;
   updateRightListData();
 }
 
-// 处理用户搜索
+/** 处理用户搜索 */
 async function handleUserSearch(direction: string, value: string) {
   if (direction === 'left') {
     leftListState.value.searchValue = value;
@@ -276,7 +270,7 @@ async function handleUserSearch(direction: string, value: string) {
   }
 }
 
-// 处理用户选择变化
+/** 处理用户选择变化 */
 function handleUserChange(targetKeys: string[]) {
   // 使用 Set 来去重选中的用户ID
   selectedUserIds.value = [...new Set(targetKeys)];
@@ -284,14 +278,13 @@ function handleUserChange(targetKeys: string[]) {
   updateRightListData();
 }
 
-// 重置数据
+/** 重置数据 */
 function resetData() {
   userList.value = [];
   selectedUserIds.value = [];
 
   // 取消部门选中
   selectedDeptId.value = undefined;
-
   // 取消选中的用户
   selectedUserIds.value = [];
 
@@ -321,12 +314,12 @@ function filterOption(inputValue: string, option: any) {
   return option.username.toLowerCase().includes(inputValue.toLowerCase());
 }
 
-// 处理部门树展开/折叠
+/** 处理部门树展开/折叠 */
 function handleExpand(keys: Key[]) {
   expandedKeys.value = keys;
 }
 
-// 处理部门搜索
+/** 处理部门搜索 */
 function handleDeptSearch(value: string) {
   deptSearchKeys.value = value;
 
@@ -349,9 +342,9 @@ function handleDeptSearch(value: string) {
   }
 }
 
-// 处理部门选择
+/** 处理部门选择 */
 async function handleDeptSelect(selectedKeys: Key[], _info: any) {
-  // 更新选中的部门ID
+  // 更新选中的部门 ID
   const newDeptId =
     selectedKeys.length > 0 ? Number(selectedKeys[0]) : undefined;
   selectedDeptId.value =
@@ -363,7 +356,7 @@ async function handleDeptSelect(selectedKeys: Key[], _info: any) {
   await loadUserData(1, pageSize);
 }
 
-// 确认选择
+/** 确认选择 */
 function handleConfirm() {
   if (selectedUserIds.value.length === 0) {
     message.warning('请选择用户');
@@ -378,7 +371,7 @@ function handleConfirm() {
   modalApi.close();
 }
 
-// 取消选择
+/** 取消选择 */
 function handleCancel() {
   emit('cancel');
   modalApi.close();
@@ -388,13 +381,13 @@ function handleCancel() {
   }, 300);
 }
 
-// 关闭弹窗
+/** 关闭弹窗 */
 function handleClosed() {
   emit('closed');
   resetData();
 }
 
-// 递归处理部门树节点
+/** 递归处理部门树节点 */
 function processDeptNode(node: any): DeptTreeNode {
   return {
     key: String(node.id),
diff --git a/apps/web-ele/package.json b/apps/web-ele/package.json
index 4f74ce6a1..b6a959e48 100644
--- a/apps/web-ele/package.json
+++ b/apps/web-ele/package.json
@@ -47,11 +47,18 @@
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "benz-amr-recorder": "catalog:",
+    "bpmn-js": "catalog:",
+    "bpmn-js-properties-panel": "catalog:",
+    "bpmn-js-token-simulation": "catalog:",
+    "camunda-bpmn-moddle": "catalog:",
     "cropperjs": "catalog:",
     "dayjs": "catalog:",
+    "diagram-js": "catalog:",
     "element-plus": "catalog:",
+    "fast-xml-parser": "catalog:",
     "highlight.js": "catalog:",
     "pinia": "catalog:",
+    "steady-xml": "catalog:",
     "tinymce": "catalog:",
     "video.js": "catalog:",
     "vue": "catalog:",
diff --git a/apps/web-ele/src/api/bpm/task/index.ts b/apps/web-ele/src/api/bpm/task/index.ts
index d6a0e81cb..b396594f7 100644
--- a/apps/web-ele/src/api/bpm/task/index.ts
+++ b/apps/web-ele/src/api/bpm/task/index.ts
@@ -7,27 +7,16 @@ import { requestClient } from '#/api/request';
 export namespace BpmTaskApi {
   /** 流程任务 */
   export interface Task {
-    id: number; // 编号
-    name: string; // 监听器名字
-    type: string; // 监听器类型
-    status: number; // 监听器状态
-    event: string; // 监听事件
-    valueType: string; // 监听器值类型
-    processInstance?: BpmProcessInstanceApi.ProcessInstance; // 流程实例
-  }
-
-  // 流程任务
-  export interface TaskManager {
     id: string; // 编号
-    name: string; // 任务名称
+    name: string; // 任务名字
+    status: number; // 任务状态
     createTime: number; // 创建时间
     endTime: number; // 结束时间
     durationInMillis: number; // 持续时间
-    status: number; // 状态
-    reason: string; // 原因
+    reason: string; // 审批理由
     ownerUser: any; // 负责人
     assigneeUser: any; // 处理人
-    taskDefinitionKey: string; // 任务定义key
+    taskDefinitionKey: string; // 任务定义的标识
     processInstanceId: string; // 流程实例id
     processInstance: BpmProcessInstanceApi.ProcessInstance; // 流程实例
     parentTaskId: any; // 父任务id
diff --git a/apps/web-ele/src/api/infra/file-config/index.ts b/apps/web-ele/src/api/infra/file-config/index.ts
index 1a2fb7707..3b1e82e6c 100644
--- a/apps/web-ele/src/api/infra/file-config/index.ts
+++ b/apps/web-ele/src/api/infra/file-config/index.ts
@@ -17,6 +17,7 @@ export namespace InfraFileConfigApi {
     accessSecret?: string;
     pathStyle?: boolean;
     enablePublicAccess?: boolean;
+    region?: string;
     domain: string;
   }
 
diff --git a/apps/web-ele/src/api/mall/product/spu/index.ts b/apps/web-ele/src/api/mall/product/spu/index.ts
index 4b37151c6..0c9f4ce94 100644
--- a/apps/web-ele/src/api/mall/product/spu/index.ts
+++ b/apps/web-ele/src/api/mall/product/spu/index.ts
@@ -62,13 +62,6 @@ export namespace MallSpuApi {
     valueName?: string; // 属性值名称
   }
 
-  // TODO @puhui999：这个还要么？
-  /** 优惠券模板 */
-  export interface GiveCouponTemplate {
-    id?: number; // 优惠券编号
-    name?: string; // 优惠券名称
-  }
-
   /** 商品状态更新请求 */
   export interface SpuStatusUpdateReqVO {
     id: number; // 商品编号
diff --git a/apps/web-ele/src/api/mall/promotion/bargain/bargainActivity.ts b/apps/web-ele/src/api/mall/promotion/bargain/bargainActivity.ts
index 97917ec2d..f13b64916 100644
--- a/apps/web-ele/src/api/mall/promotion/bargain/bargainActivity.ts
+++ b/apps/web-ele/src/api/mall/promotion/bargain/bargainActivity.ts
@@ -1,7 +1,5 @@
 import type { PageParam, PageResult } from '@vben/request';
 
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
 import { requestClient } from '#/api/request';
 
 export namespace MallBargainActivityApi {
@@ -32,17 +30,6 @@ export namespace MallBargainActivityApi {
     bargainMinPrice: number; // 砍价底价
     stock: number; // 活动库存
   }
-
-  // TODO @puhui999：要不要删除？
-  /** 扩展 SKU 配置 */
-  export type SkuExtension = {
-    productConfig: BargainProduct; // 砍价活动配置
-  } & MallSpuApi.Sku;
-
-  /** 扩展 SPU 配置 */
-  export interface SpuExtension extends MallSpuApi.Spu {
-    skus: SkuExtension[]; // SKU 列表
-  }
 }
 
 /** 查询砍价活动列表 */
diff --git a/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts b/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
index 00471bd65..19af95e95 100644
--- a/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
+++ b/apps/web-ele/src/api/mall/promotion/combination/combinationActivity.ts
@@ -1,7 +1,5 @@
 import type { PageParam, PageResult } from '@vben/request';
 
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
 import { requestClient } from '#/api/request';
 
 export namespace MallCombinationActivityApi {
@@ -23,25 +21,15 @@ export namespace MallCombinationActivityApi {
     limitDuration?: number; // 限制时长
     combinationPrice?: number; // 拼团价格
     products: CombinationProduct[]; // 商品列表
+    picUrl?: any;
   }
 
-  // TODO @puhui999：要不要删除？
   /** 拼团活动所需属性 */
   export interface CombinationProduct {
     spuId: number; // 商品 SPU 编号
     skuId: number; // 商品 SKU 编号
     combinationPrice: number; // 拼团价格
   }
-
-  /** 扩展 SKU 配置 */
-  export type SkuExtension = {
-    productConfig: CombinationProduct; // 拼团活动配置
-  } & MallSpuApi.Sku;
-
-  /** 扩展 SPU 配置 */
-  export interface SpuExtension extends MallSpuApi.Spu {
-    skus: SkuExtension[]; // SKU 列表
-  }
 }
 
 /** 查询拼团活动列表 */
diff --git a/apps/web-ele/src/api/mall/promotion/discount/discountActivity.ts b/apps/web-ele/src/api/mall/promotion/discount/discountActivity.ts
index 3beaa1aef..1236140f4 100644
--- a/apps/web-ele/src/api/mall/promotion/discount/discountActivity.ts
+++ b/apps/web-ele/src/api/mall/promotion/discount/discountActivity.ts
@@ -1,7 +1,5 @@
 import type { PageParam, PageResult } from '@vben/request';
 
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
 import { requestClient } from '#/api/request';
 
 export namespace MallDiscountActivityApi {
@@ -25,17 +23,6 @@ export namespace MallDiscountActivityApi {
     endTime?: Date; // 结束时间
     products?: DiscountProduct[]; // 商品列表
   }
-
-  // TODO @puhui999：要不要删除？
-  /** 扩展 SKU 配置 */
-  export type SkuExtension = {
-    productConfig: DiscountProduct; // 限时折扣配置
-  } & MallSpuApi.Sku;
-
-  /** 扩展 SPU 配置 */
-  export interface SpuExtension extends MallSpuApi.Spu {
-    skus: SkuExtension[]; // SKU 列表
-  }
 }
 
 /** 查询限时折扣活动列表 */
diff --git a/apps/web-ele/src/api/mall/promotion/point/index.ts b/apps/web-ele/src/api/mall/promotion/point/index.ts
index 99f39bced..3cf24a4b2 100644
--- a/apps/web-ele/src/api/mall/promotion/point/index.ts
+++ b/apps/web-ele/src/api/mall/promotion/point/index.ts
@@ -36,17 +36,6 @@ export namespace MallPointActivityApi {
     price: number; // 兑换金额，单位：分
   }
 
-  // TODO @puhui999：这些还需要么？
-  /** 扩展 SKU 配置 */
-  export type SkuExtension = {
-    productConfig: PointProduct; // 积分商城商品配置
-  } & MallSpuApi.Sku;
-
-  /** 扩展 SPU 配置 */
-  export interface SpuExtension extends MallSpuApi.Spu {
-    skus: SkuExtension[]; // SKU 列表
-  }
-
   /** 扩展 SPU 配置（带积分信息） */
   export interface SpuExtensionWithPoint extends MallSpuApi.Spu {
     pointStock: number; // 积分商城活动库存
diff --git a/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts b/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
index 51da7d275..1c18c5e3b 100644
--- a/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
+++ b/apps/web-ele/src/api/mall/promotion/seckill/seckillActivity.ts
@@ -1,7 +1,5 @@
 import type { PageParam, PageResult } from '@vben/request';
 
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
 import { requestClient } from '#/api/request';
 
 export namespace MallSeckillActivityApi {
@@ -33,17 +31,7 @@ export namespace MallSeckillActivityApi {
     totalStock?: number; // 秒杀总库存
     seckillPrice?: number; // 秒杀价格
     products?: SeckillProduct[]; // 秒杀商品列表
-  }
-
-  // TODO @puhui999：这些还需要么？
-  /** 扩展 SKU 配置 */
-  export type SkuExtension = {
-    productConfig: SeckillProduct; // 秒杀商品配置
-  } & MallSpuApi.Sku;
-
-  /** 扩展 SPU 配置 */
-  export interface SpuExtension extends MallSpuApi.Spu {
-    skus: SkuExtension[]; // SKU 列表
+    picUrl?: any;
   }
 }
 
diff --git a/apps/web-ele/src/api/mp/message/index.ts b/apps/web-ele/src/api/mp/message/index.ts
index dc393baca..8395e2933 100644
--- a/apps/web-ele/src/api/mp/message/index.ts
+++ b/apps/web-ele/src/api/mp/message/index.ts
@@ -1,36 +1,41 @@
 import type { PageParam, PageResult } from '@vben/request';
 
-import { requestClient } from '#/api/request';
+import { MessageType } from '@vben/constants';
 
-// TODO @dylan：这个类的代码，应该和对应的 antd 是一致的。调整下~看看相关的 vue 是不是也要调整掉。
-/** 消息类型枚举 */
-export enum MessageType {
-  IMAGE = 'image', // 图片消息
-  MPNEWS = 'mpnews', // 公众号图文消息
-  MUSIC = 'music', // 音乐消息
-  NEWS = 'news', // 图文消息
-  TEXT = 'text', // 文本消息
-  VIDEO = 'video', // 视频消息
-  VOICE = 'voice', // 语音消息
-  WXCARD = 'wxcard', // 卡券消息
-}
+import { requestClient } from '#/api/request';
 
 export namespace MpMessageApi {
   /** 消息信息 */
   export interface Message {
     id?: number;
     accountId: number;
-    type: MessageType;
+    type: MessageType | string;
     openid: string;
     content: string;
     mediaId?: string;
     status: number;
     remark?: string;
     createTime?: Date;
+    sendFrom?: number;
+    userId?: number;
+    event?: string;
+    eventKey?: string;
+    mediaUrl?: string;
+    recognition?: string;
+    url?: string;
+    title?: string;
+    label?: string;
+    locationX?: number;
+    locationY?: number;
+    thumbMediaUrl?: string;
+    musicUrl?: string;
+    hqMusicUrl?: string;
+    description?: string;
+    articles?: any[];
   }
 
   /** 发送消息请求 */
-  export interface SendMessageRequest {
+  export interface MessageSendRequestVO {
     accountId: number;
     openid: string;
     type: MessageType;
@@ -50,6 +55,6 @@ export function getMessagePage(params: PageParam) {
 }
 
 /** 发送消息 */
-export function sendMessage(data: MpMessageApi.SendMessageRequest) {
+export function sendMessage(data: MpMessageApi.MessageSendRequestVO) {
   return requestClient.post('/mp/message/send', data);
 }
diff --git a/apps/web-ele/src/api/system/mail/template/index.ts b/apps/web-ele/src/api/system/mail/template/index.ts
index 9e2a5a78d..57f722cf5 100644
--- a/apps/web-ele/src/api/system/mail/template/index.ts
+++ b/apps/web-ele/src/api/system/mail/template/index.ts
@@ -14,7 +14,6 @@ export namespace SystemMailTemplateApi {
     content: string;
     params: string[];
     status: number;
-    remark: string;
     createTime: Date;
   }
 
diff --git a/apps/web-ele/src/api/system/social/client/index.ts b/apps/web-ele/src/api/system/social/client/index.ts
index 181cdf86b..55978dd14 100644
--- a/apps/web-ele/src/api/system/social/client/index.ts
+++ b/apps/web-ele/src/api/system/social/client/index.ts
@@ -12,6 +12,7 @@ export namespace SystemSocialClientApi {
     clientId: string;
     clientSecret: string;
     agentId?: string;
+    publicKey?: string;
     status: number;
     createTime?: Date;
   }
diff --git a/apps/web-ele/src/router/routes/modules/bpm.ts b/apps/web-ele/src/router/routes/modules/bpm.ts
index 05e0e5664..bd4a7a209 100644
--- a/apps/web-ele/src/router/routes/modules/bpm.ts
+++ b/apps/web-ele/src/router/routes/modules/bpm.ts
@@ -9,24 +9,6 @@ const routes: RouteRecordRaw[] = [
       hideInMenu: true,
     },
     children: [
-      {
-        path: 'task',
-        name: 'BpmTask',
-        meta: {
-          title: '审批中心',
-          icon: 'ant-design:history-outlined',
-        },
-        children: [
-          {
-            path: 'my',
-            name: 'BpmTaskMy',
-            component: () => import('#/views/bpm/processInstance/index.vue'),
-            meta: {
-              title: '我的流程',
-            },
-          },
-        ],
-      },
       {
         path: 'process-instance/detail',
         component: () => import('#/views/bpm/processInstance/detail/index.vue'),
diff --git a/apps/web-ele/src/router/routes/modules/mall.ts b/apps/web-ele/src/router/routes/modules/mall.ts
index 1c2f40496..db8fcab5e 100644
--- a/apps/web-ele/src/router/routes/modules/mall.ts
+++ b/apps/web-ele/src/router/routes/modules/mall.ts
@@ -18,7 +18,7 @@ const routes: RouteRecordRaw[] = [
           title: '商品添加',
           activePath: '/mall/product/spu',
         },
-        component: () => import('#/views/mall/product/spu/modules/form.vue'),
+        component: () => import('#/views/mall/product/spu/form/index.vue'),
       },
       {
         path: String.raw`spu/edit/:id(\d+)`,
@@ -27,25 +27,16 @@ const routes: RouteRecordRaw[] = [
           title: '商品编辑',
           activePath: '/mall/product/spu',
         },
-        component: () => import('#/views/mall/product/spu/modules/form.vue'),
+        component: () => import('#/views/mall/product/spu/form/index.vue'),
       },
       {
         path: String.raw`spu/detail/:id(\d+)`,
         name: 'ProductSpuDetail',
         meta: {
           title: '商品详情',
-          activePath: '/crm/business',
-        },
-        component: () => import('#/views/mall/product/spu/modules/detail.vue'),
-      },
-      {
-        path: '/product/spu',
-        name: 'ProductSpu',
-        meta: {
-          title: '商品列表',
           activePath: '/mall/product/spu',
         },
-        component: () => import('#/views/mall/product/spu/index.vue'),
+        component: () => import('#/views/mall/product/spu/form/index.vue'),
       },
     ],
   },
diff --git a/apps/web-ele/src/store/mall/kefu.ts b/apps/web-ele/src/store/mall/kefu.ts
index b9197d3e6..c30087375 100644
--- a/apps/web-ele/src/store/mall/kefu.ts
+++ b/apps/web-ele/src/store/mall/kefu.ts
@@ -5,7 +5,10 @@ import { isEmpty } from '@vben/utils';
 
 import { acceptHMRUpdate, defineStore } from 'pinia';
 
-import * as KeFuConversationApi from '#/api/mall/promotion/kefu/conversation';
+import {
+  getConversation,
+  getConversationList,
+} from '#/api/mall/promotion/kefu/conversation';
 
 interface MallKefuInfoVO {
   conversationList: MallKefuConversationApi.Conversation[]; // 会话列表
@@ -41,9 +44,7 @@ export const useMallKefuStore = defineStore('mall-kefu', {
     // ======================= 会话相关 =======================
     /** 加载会话缓存列表 */
     async setConversationList() {
-      // TODO @jave：idea linter 告警，修复下；
-      // TODO @jave：不使用 KeFuConversationApi.，直接用 getConversationList
-      this.conversationList = await KeFuConversationApi.getConversationList();
+      this.conversationList = await getConversationList();
       this.conversationSort();
     },
     /** 更新会话缓存已读 */
@@ -51,8 +52,11 @@ export const useMallKefuStore = defineStore('mall-kefu', {
       if (isEmpty(this.conversationList)) {
         return;
       }
-      const conversation = this.conversationList.find(
-        (item) => item.id === conversationId,
+      const conversationList = this
+        .conversationList as MallKefuConversationApi.Conversation[];
+      const conversation = conversationList.find(
+        (item: MallKefuConversationApi.Conversation) =>
+          item.id === conversationId,
       );
       conversation && (conversation.adminUnreadMessageCount = 0);
     },
@@ -62,10 +66,16 @@ export const useMallKefuStore = defineStore('mall-kefu', {
         return;
       }
 
-      const conversation =
-        await KeFuConversationApi.getConversation(conversationId);
+      const conversation = await getConversation(conversationId);
       this.deleteConversation(conversationId);
-      conversation && this.conversationList.push(conversation);
+      if (conversation && this.conversationList) {
+        const conversationList = this
+          .conversationList as MallKefuConversationApi.Conversation[];
+        this.conversationList = [
+          ...conversationList,
+          conversation as MallKefuConversationApi.Conversation,
+        ];
+      }
       this.conversationSort();
     },
     /** 删除会话缓存 */
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/index.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/index.ts
new file mode 100644
index 000000000..411e2ceba
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/index.ts
@@ -0,0 +1,2 @@
+// 导出 BPMN 流程设计器相关组件
+export * from './package';
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
new file mode 100644
index 000000000..e77301f20
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessDesigner.vue
@@ -0,0 +1,683 @@
+<script lang="ts" setup>
+// import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
+import { computed, h, onBeforeUnmount, onMounted, provide, ref } from 'vue';
+
+import {
+  AlignLeftOutlined,
+  ApiOutlined,
+  DownloadOutlined,
+  EyeOutlined,
+  FolderOpenOutlined,
+  RedoOutlined,
+  ReloadOutlined,
+  UndoOutlined,
+  WarningOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@vben/icons';
+
+// 模拟流转流程
+// @ts-ignore
+import tokenSimulation from 'bpmn-js-token-simulation';
+import BpmnModeler from 'bpmn-js/lib/Modeler';
+import {
+  ElButton,
+  ElButtonGroup,
+  ElDialog,
+  ElMessage,
+  ElMessageBox,
+  ElTooltip,
+} from 'element-plus';
+// 代码高亮插件
+// import hljs from 'highlight.js/lib/highlight'
+// import 'highlight.js/styles/github-gist.css'
+// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml')
+// hljs.registerLanguage('json', 'highlight.js/lib/languages/json')
+// const eventName = reactive({
+//   name: ''
+// })
+import hljs from 'highlight.js'; // 导入代码高亮文件
+// 引入json转换与高亮
+// import xml2js from 'xml-js'
+// import xml2js from 'fast-xml-parser'
+import { parseXmlString, XmlNode } from 'steady-xml';
+
+import DefaultEmptyXML from './plugins/defaultEmpty';
+import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json';
+// 标签解析构建器
+// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
+// import propertiesPanelModule from 'bpmn-js-properties-panel'
+// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
+// 标签解析 Moddle
+import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json';
+import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json';
+import activitiModdleExtension from './plugins/extension-moddle/activiti';
+// 标签解析 Extension
+import camundaModdleExtension from './plugins/extension-moddle/camunda';
+import flowableModdleExtension from './plugins/extension-moddle/flowable';
+// 翻译方法
+import customTranslate from './plugins/translate/customTranslate';
+import translationsCN from './plugins/translate/zh';
+
+import 'highlight.js/styles/github.css';
+
+defineOptions({ name: 'MyProcessDesigner' });
+
+const props = defineProps({
+  value: { type: String, default: '' }, // xml 字符串
+  // valueWatch: true, // xml 字符串的 watch 状态
+  processId: { type: String, default: '' }, // 流程 key 标识
+  processName: { type: String, default: '' }, // 流程 name 名字
+  formId: { type: Number, default: undefined }, // 流程 form 表单编号
+  translations: {
+    // 自定义的翻译文件
+    type: Object,
+    default: () => {},
+  },
+  // eslint-disable-next-line vue/require-default-prop
+  additionalModel: [Object, Array], // 自定义model
+  moddleExtension: {
+    // 自定义moddle
+    type: Object,
+    default: () => {},
+  },
+  onlyCustomizeAddi: {
+    type: Boolean,
+    default: false,
+  },
+  onlyCustomizeModdle: {
+    type: Boolean,
+    default: false,
+  },
+  simulation: {
+    type: Boolean,
+    default: true,
+  },
+  keyboard: {
+    type: Boolean,
+    default: true,
+  },
+  prefix: {
+    type: String,
+    default: 'camunda',
+  },
+  events: {
+    type: Array,
+    default: () => ['element.click'],
+  },
+  headerButtonSize: {
+    type: String,
+    default: 'small',
+    validator: (value: string) =>
+      ['default', 'medium', 'mini', 'small'].includes(value),
+  },
+  headerButtonType: {
+    type: String,
+    default: 'primary',
+    validator: (value: string) =>
+      ['danger', 'default', 'info', 'primary', 'success', 'warning'].includes(
+        value,
+      ),
+  },
+});
+
+// 导入代码高亮样式
+
+const emit = defineEmits([
+  'destroy',
+  'init-finished',
+  'save',
+  'commandStack-changed',
+  'input',
+  'change',
+  'canvas-viewbox-changed',
+  // eventName.name
+  'element-click',
+]);
+
+const bpmnCanvas = ref();
+const refFile = ref();
+
+/**
+ * 代码高亮
+ */
+const highlightedCode = (code: string) => {
+  // 高亮
+  if (previewType.value === 'json') {
+    code = JSON.stringify(code, null, 2);
+  }
+  const result = hljs.highlight(code, {
+    language: previewType.value,
+    ignoreIllegals: true,
+  });
+  return result.value || '&nbsp;';
+};
+
+provide('configGlobal', props);
+let bpmnModeler: any = null;
+const defaultZoom = ref(1);
+const previewModelVisible = ref(false);
+const simulationStatus = ref(false);
+const previewResult = ref('');
+const previewType = ref('xml');
+const recoverable = ref(false);
+const revocable = ref(false);
+const additionalModules = computed(() => {
+  // console.log(props.additionalModel, 'additionalModel');
+  const Modules: any[] = [];
+  // 仅保留用户自定义扩展模块
+  if (props.onlyCustomizeAddi) {
+    if (
+      Object.prototype.toString.call(props.additionalModel) === '[object Array]'
+    ) {
+      return props.additionalModel || [];
+    }
+    return [props.additionalModel];
+  }
+
+  // 插入用户自定义扩展模块
+  if (
+    Object.prototype.toString.call(props.additionalModel) === '[object Array]'
+  ) {
+    Modules.push(...(props.additionalModel as any[]));
+  } else {
+    props.additionalModel && Modules.push(props.additionalModel);
+  }
+
+  // 翻译模块
+  const TranslateModule = {
+    translate: ['value', customTranslate(props.translations || translationsCN)],
+  };
+  Modules.push(TranslateModule);
+
+  // 模拟流转模块
+  if (props.simulation) {
+    Modules.push(tokenSimulation);
+  }
+
+  // 根据需要的流程类型设置扩展元素构建模块
+  // if (this.prefix === "bpmn") {
+  //   Modules.push(bpmnModdleExtension);
+  // }
+  // console.log(props.prefix, 'props.prefix ');
+  if (props.prefix === 'camunda') {
+    Modules.push(camundaModdleExtension);
+  }
+  if (props.prefix === 'flowable') {
+    Modules.push(flowableModdleExtension);
+  }
+  if (props.prefix === 'activiti') {
+    Modules.push(activitiModdleExtension);
+  }
+
+  return Modules;
+});
+const moddleExtensions = computed(() => {
+  // console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle');
+  // console.log(props.moddleExtension, 'props.moddleExtension');
+  // console.log(props.prefix, 'props.prefix');
+  const Extensions: any = {};
+  // 仅使用用户自定义模块
+  if (props.onlyCustomizeModdle) {
+    return props.moddleExtension || null;
+  }
+
+  // 插入用户自定义模块
+  if (props.moddleExtension) {
+    for (const key in props.moddleExtension) {
+      Extensions[key] = props.moddleExtension[key];
+    }
+  }
+
+  // 根据需要的 "流程类型" 设置 对应的解析文件
+  if (props.prefix === 'activiti') {
+    Extensions.activiti = activitiModdleDescriptor;
+  }
+  if (props.prefix === 'flowable') {
+    Extensions.flowable = flowableModdleDescriptor;
+  }
+  if (props.prefix === 'camunda') {
+    Extensions.camunda = camundaModdleDescriptor;
+  }
+  return Extensions;
+});
+// console.log(additionalModules, 'additionalModules()');
+// console.log(moddleExtensions, 'moddleExtensions()');
+const initBpmnModeler = () => {
+  if (bpmnModeler) return;
+  const data: any = document.querySelector('#bpmnCanvas');
+  // console.log(data, 'data');
+  // console.log(props.keyboard, 'props.keyboard');
+  // console.log(additionalModules, 'additionalModules()');
+  // console.log(moddleExtensions, 'moddleExtensions()');
+
+  bpmnModeler = new BpmnModeler({
+    // container: this.$refs['bpmn-canvas'],
+    // container: getCurrentInstance(),
+    // container: needClass,
+    // container: bpmnCanvas.value,
+    container: data,
+    // width: '100%',
+    // 添加控制板
+    // propertiesPanel: {
+    // parent: '#js-properties-panel'
+    // },
+    keyboard: props.keyboard ? { bindTo: document } : null,
+    // additionalModules: additionalModules.value,
+    additionalModules: additionalModules.value as any[],
+    moddleExtensions: moddleExtensions.value,
+
+    // additionalModules: [
+    // additionalModules.value
+    // propertiesPanelModule,
+    // propertiesProviderModule
+    // propertiesProviderModule
+    // ],
+    // moddleExtensions: { camunda: moddleExtensions.value }
+  });
+
+  // bpmnModeler.createDiagram()
+
+  // console.log(bpmnModeler, 'bpmnModeler111111')
+  // eslint-disable-next-line vue/custom-event-name-casing
+  emit('init-finished', bpmnModeler);
+  initModelListeners();
+};
+
+const initModelListeners = () => {
+  const EventBus = bpmnModeler.get('eventBus');
+  // console.log(EventBus, 'EventBus');
+  // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+  props.events.forEach((event: any) => {
+    EventBus.on(event, (eventObj: any) => {
+      // const eventName = event.replaceAll('.', '-');
+      // eventName.name = eventName
+      const element = eventObj ? eventObj.element : null;
+      // console.log(eventName, 'eventName');
+      // console.log(element, 'element');
+      // eslint-disable-next-line vue/custom-event-name-casing
+      emit('element-click', element, eventObj);
+      // emit(eventName, element, eventObj)
+    });
+  });
+  // 监听图形改变返回xml
+  EventBus.on('commandStack.changed', async (event: any) => {
+    try {
+      recoverable.value = bpmnModeler.get('commandStack').canRedo();
+      revocable.value = bpmnModeler.get('commandStack').canUndo();
+      const { xml } = await bpmnModeler.saveXML({ format: true });
+      // eslint-disable-next-line vue/custom-event-name-casing
+      emit('commandStack-changed', event);
+      emit('input', xml);
+      emit('change', xml);
+      emit('save', xml);
+    } catch {
+      // console.error(`[Process Designer Warn]: ${e.message || e}`);
+    }
+  });
+  // 监听视图缩放变化
+  bpmnModeler.on('canvas.viewbox.changed', ({ viewbox }: { viewbox: any }) => {
+    // eslint-disable-next-line vue/custom-event-name-casing
+    emit('canvas-viewbox-changed', { viewbox });
+    const { scale } = viewbox;
+    defaultZoom.value = Math.floor(scale * 100) / 100;
+  });
+};
+/* 创建新的流程图 */
+const createNewDiagram = async (xml: any) => {
+  // console.log(xml, 'xml');
+  // 将字符串转换成图显示出来
+  const newId = props.processId || `Process_${Date.now()}`;
+  const newName = props.processName || `业务流程_${Date.now()}`;
+  const xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix);
+  try {
+    // console.log(xmlString, 'xmlString')
+    // console.log(this.bpmnModeler.importXML);
+    const { warnings } = await bpmnModeler.importXML(xmlString);
+    // console.log(warnings, 'warnings');
+    if (warnings && warnings.length > 0) {
+      // warnings.forEach((warn: any) => console.warn(warn));
+    }
+  } catch {
+    // console.error(`[Process Designer Warn]: ${e.message || e}`);
+  }
+};
+
+// 下载流程图到本地
+const downloadProcess = async (type: string) => {
+  try {
+    // 按需要类型创建文件并下载
+    if (type === 'xml' || type === 'bpmn') {
+      const { err, xml } = await bpmnModeler.saveXML();
+      // 读取异常时抛出异常
+      if (err) {
+        // console.error(`[Process Designer Warn ]: ${err.message || err}`);
+      }
+      const { href, filename } = setEncoded(type.toUpperCase(), xml);
+      downloadFunc(href, filename);
+    } else {
+      const { err, svg } = await bpmnModeler.saveSVG();
+      // 读取异常时抛出异常
+      if (err) {
+        // return console.error(err);
+      }
+      const { href, filename } = setEncoded('SVG', svg);
+      downloadFunc(href, filename);
+    }
+  } catch (error: any) {
+    console.error(`[Process Designer Warn ]: ${error.message || error}`);
+  }
+  // 文件下载方法
+  function downloadFunc(href: string, filename: string) {
+    if (href && filename) {
+      const a = document.createElement('a');
+      a.download = filename; // 指定下载的文件名
+      a.href = href; //  URL对象
+      a.click(); // 模拟点击
+      URL.revokeObjectURL(a.href); // 释放URL 对象
+    }
+  }
+};
+
+// 根据所需类型进行转码并返回下载地址
+const setEncoded = (type: string, data: string) => {
+  const filename = 'diagram';
+  const encodedData = encodeURIComponent(data);
+  return {
+    filename: `${filename}.${type}`,
+    href: `data:application/${
+      type === 'svg' ? 'text/xml' : 'bpmn20-xml'
+    };charset=UTF-8,${encodedData}`,
+    data,
+  };
+};
+
+// 加载本地文件
+const importLocalFile = () => {
+  const file = refFile.value.files[0];
+  const reader = new FileReader();
+  // eslint-disable-next-line unicorn/prefer-blob-reading-methods
+  reader.readAsText(file);
+  reader.addEventListener('load', function () {
+    const xmlStr = this.result;
+    createNewDiagram(xmlStr);
+    emit('save', xmlStr);
+  });
+};
+/* ------------------------------------------------ refs methods ------------------------------------------------------ */
+const downloadProcessAsXml = () => {
+  downloadProcess('xml');
+};
+const downloadProcessAsBpmn = () => {
+  downloadProcess('bpmn');
+};
+const downloadProcessAsSvg = () => {
+  downloadProcess('svg');
+};
+const processSimulation = () => {
+  simulationStatus.value = !simulationStatus.value;
+  // console.log(
+  //   bpmnModeler.get('toggleMode', 'strict'),
+  //   "bpmnModeler.get('toggleMode')",
+  // );
+  props.simulation && bpmnModeler.get('toggleMode', 'strict').toggleMode();
+};
+const processRedo = () => {
+  bpmnModeler.get('commandStack').redo();
+};
+const processUndo = () => {
+  bpmnModeler.get('commandStack').undo();
+};
+const processZoomIn = (zoomStep = 0.1) => {
+  const newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
+  if (newZoom > 4) {
+    throw new Error(
+      '[Process Designer Warn ]: The zoom ratio cannot be greater than 4',
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnModeler.get('canvas').zoom(defaultZoom.value);
+};
+const processZoomOut = (zoomStep = 0.1) => {
+  const newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100;
+  if (newZoom < 0.2) {
+    throw new Error(
+      '[Process Designer Warn ]: The zoom ratio cannot be less than 0.2',
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnModeler.get('canvas').zoom(defaultZoom.value);
+};
+const processReZoom = () => {
+  defaultZoom.value = 1;
+  bpmnModeler.get('canvas').zoom('fit-viewport', 'auto');
+};
+const processRestart = () => {
+  recoverable.value = false;
+  revocable.value = false;
+  createNewDiagram(null);
+};
+const elementsAlign = (align: string) => {
+  const Align = bpmnModeler.get('alignElements');
+  const Selection = bpmnModeler.get('selection');
+  const SelectedElements = Selection.get();
+  if (!SelectedElements || SelectedElements.length <= 1) {
+    ElMessage.warning('请按住 Shift 键选择多个元素对齐');
+    // alert('请按住 Ctrl 键选择多个元素对齐
+    return;
+  }
+  ElMessageBox.confirm('自动对齐可能造成图形变形，是否继续？', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning',
+    icon: h(WarningOutlined) as any,
+  }).then(() => {
+    Align.trigger(SelectedElements, align);
+  });
+};
+/* -----------------------------    方法结束     ---------------------------------*/
+const previewProcessXML = () => {
+  // console.log(bpmnModeler.saveXML, 'bpmnModeler');
+  bpmnModeler.saveXML({ format: true }).then(({ xml }: { xml: string }) => {
+    // console.log(xml, 'xml111111')
+    previewResult.value = xml;
+    previewType.value = 'xml';
+    previewModelVisible.value = true;
+  });
+};
+const previewProcessJson = () => {
+  bpmnModeler.saveXML({ format: true }).then(({ xml }: { xml: string }) => {
+    const rootNodes = new XmlNode('root' as any, parseXmlString(xml));
+    previewResult.value = rootNodes.parent?.toJSON() as unknown as string;
+    previewType.value = 'json';
+    previewModelVisible.value = true;
+  });
+};
+
+/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
+onMounted(() => {
+  initBpmnModeler();
+  createNewDiagram(props.value);
+});
+onBeforeUnmount(() => {
+  if (bpmnModeler) bpmnModeler.destroy();
+  emit('destroy', bpmnModeler);
+  bpmnModeler = null;
+});
+</script>
+
+<template>
+  <div class="my-process-designer">
+    <div
+      class="my-process-designer__header"
+      style="z-index: 999; display: table-row-group"
+    >
+      <slot name="control-header"></slot>
+      <template v-if="!$slots['control-header']">
+        <ElButtonGroup key="file-control">
+          <ElButton
+            :icon="FolderOpenOutlined"
+            title="打开文件"
+            @click="refFile.click()"
+          />
+          <ElTooltip placement="bottom">
+            <template #content>
+              <div>
+                <ElButton type="primary" link @click="downloadProcessAsXml()">
+                  下载为XML文件
+                </ElButton>
+                <br />
+                <ElButton type="primary" link @click="downloadProcessAsSvg()">
+                  下载为SVG文件
+                </ElButton>
+                <br />
+                <ElButton type="primary" link @click="downloadProcessAsBpmn()">
+                  下载为BPMN文件
+                </ElButton>
+              </div>
+            </template>
+            <ElButton :icon="DownloadOutlined" title="下载文件" />
+          </ElTooltip>
+          <ElTooltip>
+            <template #content>
+              <ElButton type="primary" link @click="previewProcessXML">
+                预览XML
+              </ElButton>
+              <br />
+              <ElButton type="primary" link @click="previewProcessJson">
+                预览JSON
+              </ElButton>
+            </template>
+            <ElButton :icon="EyeOutlined" title="浏览" />
+          </ElTooltip>
+          <ElTooltip
+            v-if="props.simulation"
+            :content="simulationStatus ? '退出模拟' : '开启模拟'"
+          >
+            <ElButton
+              :icon="ApiOutlined"
+              title="模拟"
+              @click="processSimulation"
+            />
+          </ElTooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="align-control">
+          <ElTooltip content="向左对齐">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-bottom"
+              @click="elementsAlign('left')"
+            />
+          </ElTooltip>
+          <ElTooltip content="向右对齐">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-top"
+              @click="elementsAlign('right')"
+            />
+          </ElTooltip>
+          <ElTooltip content="向上对齐">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-left"
+              @click="elementsAlign('top')"
+            />
+          </ElTooltip>
+          <ElTooltip content="向下对齐">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-right"
+              @click="elementsAlign('bottom')"
+            />
+          </ElTooltip>
+          <ElTooltip content="水平居中">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-center"
+              @click="elementsAlign('center')"
+            />
+          </ElTooltip>
+          <ElTooltip content="垂直居中">
+            <ElButton
+              :icon="AlignLeftOutlined"
+              class="align align-middle"
+              @click="elementsAlign('middle')"
+            />
+          </ElTooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="scale-control">
+          <ElTooltip content="缩小视图">
+            <ElButton
+              :icon="ZoomOutOutlined"
+              @click="processZoomOut()"
+              :disabled="defaultZoom < 0.2"
+            />
+          </ElTooltip>
+          <ElButton>{{ `${Math.floor(defaultZoom * 10 * 10)}%` }}</ElButton>
+          <ElTooltip content="放大视图">
+            <ElButton
+              :icon="ZoomInOutlined"
+              @click="processZoomIn()"
+              :disabled="defaultZoom > 4"
+            />
+          </ElTooltip>
+          <ElTooltip content="重置视图并居中">
+            <ElButton :icon="ReloadOutlined" @click="processReZoom()" />
+          </ElTooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="stack-control">
+          <ElTooltip content="撤销">
+            <ElButton
+              :icon="UndoOutlined"
+              @click="processUndo()"
+              :disabled="!revocable"
+            />
+          </ElTooltip>
+          <ElTooltip content="恢复">
+            <ElButton
+              :icon="RedoOutlined"
+              @click="processRedo()"
+              :disabled="!recoverable"
+            />
+          </ElTooltip>
+          <ElTooltip content="重新绘制">
+            <ElButton :icon="ReloadOutlined" @click="processRestart()" />
+          </ElTooltip>
+        </ElButtonGroup>
+      </template>
+      <!-- 用于打开本地文件-->
+      <input
+        type="file"
+        id="files"
+        ref="refFile"
+        class="hidden"
+        accept=".xml, .bpmn"
+        @change="importLocalFile"
+      />
+    </div>
+    <div class="my-process-designer__container">
+      <div
+        class="my-process-designer__canvas"
+        ref="bpmnCanvas"
+        id="bpmnCanvas"
+        style="width: 1680px; height: 800px"
+      ></div>
+      <!-- <div id="js-properties-panel" class="panel"></div> -->
+      <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
+    </div>
+    <ElDialog
+      title="预览"
+      v-model="previewModelVisible"
+      class="max-h-[600px] w-4/5"
+    >
+      <div>
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <pre><code v-html="highlightedCode(previewResult)" class="hljs"></code></pre>
+      </div>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue
new file mode 100644
index 000000000..881f70a07
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/ProcessViewer.vue
@@ -0,0 +1,427 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
+import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
+import { formatDate, formatPast2 } from '@vben/utils';
+
+import BpmnViewer from 'bpmn-js/lib/Viewer';
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
+import {
+  ElButton,
+  ElButtonGroup,
+  ElDialog,
+  ElRow,
+  ElTable,
+  ElTableColumn,
+} from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+
+import '../theme/index.scss';
+
+const props = defineProps({
+  xml: {
+    type: String,
+    required: true,
+  },
+  view: {
+    type: Object,
+    require: true,
+    default: () => ({}),
+  },
+});
+
+const processCanvas = ref();
+const bpmnViewer = ref<any | BpmnViewer>(null);
+const customDefs = ref();
+const defaultZoom = ref(1); // 默认缩放比例
+const isLoading = ref(false); // 是否加载中
+
+const processInstance = ref<any>({}); // 流程实例
+const tasks = ref([]); // 流程任务
+
+const dialogVisible = ref(false); // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined); // 弹窗标题
+const selectActivityType = ref<string | undefined>(undefined); // 选中 Task 的活动编号
+const selectTasks = ref<any[]>([]); // 选中的任务数组
+
+/** Zoom：恢复 */
+const processReZoom = () => {
+  defaultZoom.value = 1;
+  bpmnViewer.value?.get('canvas').zoom('fit-viewport', 'auto');
+};
+
+/** Zoom：放大 */
+const processZoomIn = (zoomStep = 0.1) => {
+  const newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
+  if (newZoom > 4) {
+    throw new Error(
+      '[Process Designer Warn ]: The zoom ratio cannot be greater than 4',
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value);
+};
+
+/** Zoom：缩小 */
+const processZoomOut = (zoomStep = 0.1) => {
+  const newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100;
+  if (newZoom < 0.2) {
+    throw new Error(
+      '[Process Designer Warn ]: The zoom ratio cannot be less than 0.2',
+    );
+  }
+  defaultZoom.value = newZoom;
+  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value);
+};
+
+/** 流程图预览清空 */
+const clearViewer = () => {
+  if (processCanvas.value) {
+    processCanvas.value.innerHTML = '';
+  }
+  if (bpmnViewer.value) {
+    bpmnViewer.value.destroy();
+  }
+  bpmnViewer.value = null;
+};
+
+/** 添加自定义箭头 */
+// TODO 芋艿：自定义箭头不生效，有点奇怪！！！！相关的 marker-end、marker-start 暂时也注释了！！！
+const addCustomDefs = () => {
+  if (!bpmnViewer.value) {
+    return;
+  }
+  const canvas = bpmnViewer.value?.get('canvas');
+  const svg = canvas?._svg;
+  svg.append(customDefs.value);
+};
+
+/** 节点选中 */
+const onSelectElement = (element: any) => {
+  // 清空原选中
+  selectActivityType.value = undefined;
+  dialogTitle.value = undefined;
+  if (!element || !processInstance.value?.id) {
+    return;
+  }
+
+  // UserTask 的情况
+  const activityType = element.type;
+  selectActivityType.value = activityType;
+  if (activityType === 'bpmn:UserTask') {
+    dialogTitle.value = element.businessObject
+      ? element.businessObject.name
+      : undefined;
+    selectTasks.value = tasks.value.filter(
+      (item: any) => item?.taskDefinitionKey === element.id,
+    );
+    dialogVisible.value = true;
+  } else if (
+    activityType === 'bpmn:EndEvent' ||
+    activityType === 'bpmn:StartEvent'
+  ) {
+    dialogTitle.value = '审批信息';
+    selectTasks.value = [
+      {
+        assigneeUser: processInstance.value.startUser,
+        createTime: processInstance.value.startTime,
+        endTime: processInstance.value.endTime,
+        status: processInstance.value.status,
+        durationInMillis: processInstance.value.durationInMillis,
+      },
+    ];
+    dialogVisible.value = true;
+  }
+};
+
+/** 初始化 BPMN 视图 */
+const importXML = async (xml: string) => {
+  // 清空流程图
+  clearViewer();
+
+  // 初始化流程图
+  if (xml !== null && xml !== '') {
+    try {
+      bpmnViewer.value = new BpmnViewer({
+        additionalModules: [MoveCanvasModule],
+        container: processCanvas.value,
+      });
+      // 增加点击事件
+      bpmnViewer.value.on('element.click', ({ element }: { element: any }) => {
+        onSelectElement(element);
+      });
+
+      // 初始化 BPMN 视图
+      isLoading.value = true;
+      await bpmnViewer.value.importXML(xml);
+      // 自定义成功的箭头
+      addCustomDefs();
+    } catch {
+      clearViewer();
+    } finally {
+      isLoading.value = false;
+      // 高亮流程
+      setProcessStatus(props.view);
+    }
+  }
+};
+
+/** 高亮流程 */
+const setProcessStatus = (view: any) => {
+  // 设置相关变量
+  if (!view || !view.processInstance) {
+    return;
+  }
+  processInstance.value = view.processInstance;
+  tasks.value = view.tasks;
+  if (isLoading.value || !bpmnViewer.value) {
+    return;
+  }
+  const {
+    unfinishedTaskActivityIds,
+    finishedTaskActivityIds,
+    finishedSequenceFlowActivityIds,
+    rejectedTaskActivityIds,
+  } = view;
+  const canvas: any = bpmnViewer.value.get('canvas');
+  const elementRegistry: any = bpmnViewer.value.get('elementRegistry');
+
+  // 已完成节点
+  if (Array.isArray(finishedSequenceFlowActivityIds)) {
+    finishedSequenceFlowActivityIds.forEach((item: any) => {
+      if (item !== null) {
+        canvas.addMarker(item, 'success');
+        const element = elementRegistry.get(item);
+        const conditionExpression = element.businessObject.conditionExpression;
+        if (conditionExpression) {
+          canvas.addMarker(item, 'condition-expression');
+        }
+      }
+    });
+  }
+  if (Array.isArray(finishedTaskActivityIds)) {
+    finishedTaskActivityIds.forEach((item: any) =>
+      canvas.addMarker(item, 'success'),
+    );
+  }
+
+  // 未完成节点
+  if (Array.isArray(unfinishedTaskActivityIds)) {
+    unfinishedTaskActivityIds.forEach((item: any) =>
+      canvas.addMarker(item, 'primary'),
+    );
+  }
+
+  // 被拒绝节点
+  if (Array.isArray(rejectedTaskActivityIds)) {
+    rejectedTaskActivityIds.forEach((item: any) => {
+      if (item !== null) {
+        canvas.addMarker(item, 'danger');
+      }
+    });
+  }
+
+  // 特殊：处理 end 节点的高亮。因为 end 在拒绝、取消时，被后端计算成了 finishedTaskActivityIds 里
+  if (
+    [BpmProcessInstanceStatus.CANCEL, BpmProcessInstanceStatus.REJECT].includes(
+      processInstance.value.status,
+    )
+  ) {
+    const endNodes = elementRegistry.filter(
+      (element: any) => element.type === 'bpmn:EndEvent',
+    );
+    endNodes.forEach((item: any) => {
+      canvas.removeMarker(item.id, 'success');
+      if (processInstance.value.status === BpmProcessInstanceStatus.CANCEL) {
+        canvas.addMarker(item.id, 'cancel');
+      } else {
+        canvas.addMarker(item.id, 'danger');
+      }
+    });
+  }
+};
+
+watch(
+  () => props.xml,
+  (newXml) => {
+    importXML(newXml);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.view,
+  (newView) => {
+    setProcessStatus(newView);
+  },
+  { immediate: true },
+);
+
+/** mounted：初始化 */
+onMounted(() => {
+  importXML(props.xml);
+  setProcessStatus(props.view);
+});
+
+/** unmount：销毁 */
+onBeforeUnmount(() => {
+  clearViewer();
+});
+</script>
+
+<template>
+  <div class="process-viewer">
+    <div style="height: 100%" ref="processCanvas" v-show="!isLoading"></div>
+    <!-- 自定义箭头样式，用于已完成状态下流程连线箭头 -->
+    <defs ref="customDefs">
+      <marker
+        id="sequenceflow-end-white-success"
+        viewBox="0 0 20 20"
+        refX="11"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-arrow"
+          d="M 1 5 L 11 10 L 1 15 Z"
+          style="
+            stroke-width: 1px;
+            stroke-linecap: round;
+            stroke-dasharray: 10000, 1;
+          "
+        />
+      </marker>
+      <marker
+        id="conditional-flow-marker-white-success"
+        viewBox="0 0 20 20"
+        refX="-1"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-conditional"
+          d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
+          style="
+            stroke-width: 1px;
+            stroke-linecap: round;
+            stroke-dasharray: 10000, 1;
+          "
+        />
+      </marker>
+    </defs>
+
+    <!-- 审批记录 -->
+    <ElDialog
+      :title="dialogTitle || '审批记录'"
+      v-model="dialogVisible"
+      width="1000px"
+    >
+      <ElRow>
+        <ElTable :data="selectTasks" size="small" border>
+          <ElTableColumn label="序号" align="center" width="50">
+            <template #default="{ $index }">
+              {{ $index + 1 }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            label="审批人"
+            width="100"
+            align="center"
+            v-if="selectActivityType === 'bpmn:UserTask'"
+          >
+            <template #default="{ row }">
+              {{ row.assigneeUser?.nickname || row.ownerUser?.nickname }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            label="发起人"
+            prop="assigneeUser.nickname"
+            width="100"
+            align="center"
+            v-else
+          />
+          <ElTableColumn label="部门" width="100" align="center">
+            <template #default="{ row }">
+              {{ row.assigneeUser?.deptName || row.ownerUser?.deptName }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            width="140"
+          >
+            <template #default="{ row }">
+              {{ formatDate(row.createTime) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            width="140"
+          >
+            <template #default="{ row }">
+              {{ formatDate(row.endTime) }}
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            align="center"
+            label="审批状态"
+            prop="status"
+            width="90"
+          >
+            <template #default="{ row }">
+              <DictTag :type="DICT_TYPE.BPM_TASK_STATUS" :value="row.status" />
+            </template>
+          </ElTableColumn>
+          <ElTableColumn
+            align="center"
+            label="审批建议"
+            prop="reason"
+            width="120"
+            v-if="selectActivityType === 'bpmn:UserTask'"
+          />
+          <ElTableColumn
+            align="center"
+            label="耗时"
+            prop="durationInMillis"
+            width="100"
+          >
+            <template #default="{ row }">
+              {{ formatPast2(row.durationInMillis) }}
+            </template>
+          </ElTableColumn>
+        </ElTable>
+      </ElRow>
+    </ElDialog>
+
+    <!-- Zoom：放大、缩小 -->
+    <div style="position: absolute; top: 0; left: 0; width: 100%">
+      <ElRow justify="end">
+        <ElButtonGroup key="scale-control">
+          <ElButton
+            :disabled="defaultZoom <= 0.3"
+            :icon="ZoomOutOutlined"
+            @click="processZoomOut()"
+          />
+          <ElButton style="width: 90px">
+            {{ `${Math.floor(defaultZoom * 10 * 10)}%` }}
+          </ElButton>
+          <ElButton
+            :disabled="defaultZoom >= 3.9"
+            :icon="ZoomInOutlined"
+            @click="processZoomIn()"
+          />
+          <ElButton :icon="UndoOutlined" @click="processReZoom()" />
+        </ElButtonGroup>
+      </ElRow>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index.ts
new file mode 100644
index 000000000..cc2dc24fc
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index.ts
@@ -0,0 +1,8 @@
+import MyProcessDesigner from './ProcessDesigner.vue';
+
+MyProcessDesigner.install = function (Vue: any) {
+  Vue.component(MyProcessDesigner.name, MyProcessDesigner);
+};
+
+// 流程图的设计器，可编辑
+export default MyProcessDesigner;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index2.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index2.ts
new file mode 100644
index 000000000..9f085a72e
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/index2.ts
@@ -0,0 +1,8 @@
+import MyProcessViewer from './ProcessViewer.vue';
+
+MyProcessViewer.install = function (Vue: any) {
+  Vue.component(MyProcessViewer.name, MyProcessViewer);
+};
+
+// 流程图的查看器，不可编辑
+export default MyProcessViewer;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js
new file mode 100644
index 000000000..638317fb8
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/contentPadProvider.js
@@ -0,0 +1,443 @@
+import { getChildLanes } from 'bpmn-js/lib/features/modeling/util/LaneUtil';
+import { isAny } from 'bpmn-js/lib/features/modeling/util/ModelingUtil';
+import { isEventSubProcess, isExpanded } from 'bpmn-js/lib/util/DiUtil';
+import { is } from 'bpmn-js/lib/util/ModelUtil';
+import { hasPrimaryModifier } from 'diagram-js/lib/util/Mouse';
+
+/**
+ * A provider for BPMN 2.0 elements context pad
+ */
+export default function ContextPadProvider(
+  config,
+  injector,
+  eventBus,
+  contextPad,
+  modeling,
+  elementFactory,
+  connect,
+  create,
+  popupMenu,
+  canvas,
+  rules,
+  translate,
+) {
+  config = config || {};
+
+  contextPad.registerProvider(this);
+
+  this._contextPad = contextPad;
+
+  this._modeling = modeling;
+
+  this._elementFactory = elementFactory;
+  this._connect = connect;
+  this._create = create;
+  this._popupMenu = popupMenu;
+  this._canvas = canvas;
+  this._rules = rules;
+  this._translate = translate;
+
+  if (config.autoPlace !== false) {
+    this._autoPlace = injector.get('autoPlace', false);
+  }
+
+  eventBus.on('create.end', 250, (event) => {
+    const context = event.context;
+    const shape = context.shape;
+
+    if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
+      return;
+    }
+
+    const entries = contextPad.getEntries(shape);
+
+    if (entries.replace) {
+      entries.replace.action.click(event, shape);
+    }
+  });
+}
+
+ContextPadProvider.$inject = [
+  'config.contextPad',
+  'injector',
+  'eventBus',
+  'contextPad',
+  'modeling',
+  'elementFactory',
+  'connect',
+  'create',
+  'popupMenu',
+  'canvas',
+  'rules',
+  'translate',
+  'elementRegistry',
+];
+
+ContextPadProvider.prototype.getContextPadEntries = function (element) {
+  const autoPlace = this._autoPlace;
+  const canvas = this._canvas;
+  const connect = this._connect;
+  const contextPad = this._contextPad;
+  const create = this._create;
+  const elementFactory = this._elementFactory;
+  const modeling = this._modeling;
+  const popupMenu = this._popupMenu;
+  const rules = this._rules;
+  const translate = this._translate;
+
+  const actions = {};
+
+  if (element.type === 'label') {
+    return actions;
+  }
+
+  const businessObject = element.businessObject;
+
+  function startConnect(event, element) {
+    connect.start(event, element);
+  }
+
+  function removeElement() {
+    modeling.removeElements([element]);
+  }
+
+  function getReplaceMenuPosition(element) {
+    const Y_OFFSET = 5;
+
+    const diagramContainer = canvas.getContainer();
+    const pad = contextPad.getPad(element).html;
+
+    const diagramRect = diagramContainer.getBoundingClientRect();
+    const padRect = pad.getBoundingClientRect();
+
+    const top = padRect.top - diagramRect.top;
+    const left = padRect.left - diagramRect.left;
+
+    const pos = {
+      x: left,
+      y: top + padRect.height + Y_OFFSET,
+    };
+
+    return pos;
+  }
+
+  /**
+   * Create an append action
+   *
+   * @param {string} type
+   * @param {string} className
+   * @param {string} [title]
+   * @param {object} [options]
+   *
+   * @return {object} descriptor
+   */
+  function appendAction(type, className, title, options) {
+    if (typeof title !== 'string') {
+      options = title;
+      title = translate('Append {type}', { type: type.replace(/^bpmn:/, '') });
+    }
+
+    function appendStart(event, element) {
+      const shape = elementFactory.createShape(
+        Object.assign({ type }, options),
+      );
+      create.start(event, shape, {
+        source: element,
+      });
+    }
+
+    const append = autoPlace
+      ? function (event, element) {
+          const shape = elementFactory.createShape(
+            Object.assign({ type }, options),
+          );
+
+          autoPlace.append(element, shape);
+        }
+      : appendStart;
+
+    return {
+      group: 'model',
+      className,
+      title,
+      action: {
+        dragstart: appendStart,
+        click: append,
+      },
+    };
+  }
+
+  function splitLaneHandler(count) {
+    return function (event, element) {
+      // actual split
+      modeling.splitLane(element, count);
+
+      // refresh context pad after split to
+      // get rid of split icons
+      contextPad.open(element, true);
+    };
+  }
+
+  if (
+    isAny(businessObject, ['bpmn:Lane', 'bpmn:Participant']) &&
+    isExpanded(businessObject)
+  ) {
+    const childLanes = getChildLanes(element);
+
+    Object.assign(actions, {
+      'lane-insert-above': {
+        group: 'lane-insert-above',
+        className: 'bpmn-icon-lane-insert-above',
+        title: translate('Add Lane above'),
+        action: {
+          click(event, element) {
+            modeling.addLane(element, 'top');
+          },
+        },
+      },
+    });
+
+    if (childLanes.length < 2) {
+      if (element.height >= 120) {
+        Object.assign(actions, {
+          'lane-divide-two': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-two',
+            title: translate('Divide into two Lanes'),
+            action: {
+              click: splitLaneHandler(2),
+            },
+          },
+        });
+      }
+
+      if (element.height >= 180) {
+        Object.assign(actions, {
+          'lane-divide-three': {
+            group: 'lane-divide',
+            className: 'bpmn-icon-lane-divide-three',
+            title: translate('Divide into three Lanes'),
+            action: {
+              click: splitLaneHandler(3),
+            },
+          },
+        });
+      }
+    }
+
+    Object.assign(actions, {
+      'lane-insert-below': {
+        group: 'lane-insert-below',
+        className: 'bpmn-icon-lane-insert-below',
+        title: translate('Add Lane below'),
+        action: {
+          click(event, element) {
+            modeling.addLane(element, 'bottom');
+          },
+        },
+      },
+    });
+  }
+
+  if (is(businessObject, 'bpmn:FlowNode')) {
+    if (is(businessObject, 'bpmn:EventBasedGateway')) {
+      Object.assign(actions, {
+        'append.receive-task': appendAction(
+          'bpmn:ReceiveTask',
+          'bpmn-icon-receive-task',
+          translate('Append ReceiveTask'),
+        ),
+        'append.message-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-message',
+          translate('Append MessageIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:MessageEventDefinition' },
+        ),
+        'append.timer-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-timer',
+          translate('Append TimerIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:TimerEventDefinition' },
+        ),
+        'append.condition-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-condition',
+          translate('Append ConditionIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:ConditionalEventDefinition' },
+        ),
+        'append.signal-intermediate-event': appendAction(
+          'bpmn:IntermediateCatchEvent',
+          'bpmn-icon-intermediate-event-catch-signal',
+          translate('Append SignalIntermediateCatchEvent'),
+          { eventDefinitionType: 'bpmn:SignalEventDefinition' },
+        ),
+      });
+    } else if (
+      isEventType(
+        businessObject,
+        'bpmn:BoundaryEvent',
+        'bpmn:CompensateEventDefinition',
+      )
+    ) {
+      Object.assign(actions, {
+        'append.compensation-activity': appendAction(
+          'bpmn:Task',
+          'bpmn-icon-task',
+          translate('Append compensation activity'),
+          {
+            isForCompensation: true,
+          },
+        ),
+      });
+    } else if (
+      !is(businessObject, 'bpmn:EndEvent') &&
+      !businessObject.isForCompensation &&
+      !isEventType(
+        businessObject,
+        'bpmn:IntermediateThrowEvent',
+        'bpmn:LinkEventDefinition',
+      ) &&
+      !isEventSubProcess(businessObject)
+    ) {
+      Object.assign(actions, {
+        'append.end-event': appendAction(
+          'bpmn:EndEvent',
+          'bpmn-icon-end-event-none',
+          translate('Append EndEvent'),
+        ),
+        'append.gateway': appendAction(
+          'bpmn:ExclusiveGateway',
+          'bpmn-icon-gateway-none',
+          translate('Append Gateway'),
+        ),
+        'append.append-task': appendAction(
+          'bpmn:UserTask',
+          'bpmn-icon-user-task',
+          translate('Append Task'),
+        ),
+        'append.intermediate-event': appendAction(
+          'bpmn:IntermediateThrowEvent',
+          'bpmn-icon-intermediate-event-none',
+          translate('Append Intermediate/Boundary Event'),
+        ),
+      });
+    }
+  }
+
+  if (!popupMenu.isEmpty(element, 'bpmn-replace')) {
+    // Replace menu entry
+    Object.assign(actions, {
+      replace: {
+        group: 'edit',
+        className: 'bpmn-icon-screw-wrench',
+        title: '修改类型',
+        action: {
+          click(event, element) {
+            const position = Object.assign(getReplaceMenuPosition(element), {
+              cursor: { x: event.x, y: event.y },
+            });
+
+            popupMenu.open(element, 'bpmn-replace', position);
+          },
+        },
+      },
+    });
+  }
+
+  if (
+    isAny(businessObject, [
+      'bpmn:FlowNode',
+      'bpmn:InteractionNode',
+      'bpmn:DataObjectReference',
+      'bpmn:DataStoreReference',
+    ])
+  ) {
+    Object.assign(actions, {
+      'append.text-annotation': appendAction(
+        'bpmn:TextAnnotation',
+        'bpmn-icon-text-annotation',
+      ),
+
+      connect: {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate(
+          `Connect using ${
+            businessObject.isForCompensation ? '' : 'Sequence/MessageFlow or '
+          }Association`,
+        ),
+        action: {
+          click: startConnect,
+          dragstart: startConnect,
+        },
+      },
+    });
+  }
+
+  if (
+    isAny(businessObject, [
+      'bpmn:DataObjectReference',
+      'bpmn:DataStoreReference',
+    ])
+  ) {
+    Object.assign(actions, {
+      connect: {
+        group: 'connect',
+        className: 'bpmn-icon-connection-multi',
+        title: translate('Connect using DataInputAssociation'),
+        action: {
+          click: startConnect,
+          dragstart: startConnect,
+        },
+      },
+    });
+  }
+
+  if (is(businessObject, 'bpmn:Group')) {
+    Object.assign(actions, {
+      'append.text-annotation': appendAction(
+        'bpmn:TextAnnotation',
+        'bpmn-icon-text-annotation',
+      ),
+    });
+  }
+
+  // delete element entry, only show if allowed by rules
+  let deleteAllowed = rules.allowed('elements.delete', { elements: [element] });
+
+  if (Array.isArray(deleteAllowed)) {
+    // was the element returned as a deletion candidate?
+    deleteAllowed = deleteAllowed[0] === element;
+  }
+
+  if (deleteAllowed) {
+    Object.assign(actions, {
+      delete: {
+        group: 'edit',
+        className: 'bpmn-icon-trash',
+        title: translate('Remove'),
+        action: {
+          click: removeElement,
+        },
+      },
+    });
+  }
+
+  return actions;
+};
+
+// helpers /////////
+
+function isEventType(eventBo, type, definition) {
+  const isType = eventBo.$instanceOf(type);
+  let isDefinition = false;
+
+  const definitions = eventBo.eventDefinitions || [];
+  definitions.forEach((def) => {
+    if (def.$type === definition) {
+      isDefinition = true;
+    }
+  });
+
+  return isType && isDefinition;
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js
new file mode 100644
index 000000000..d5325aedb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad/index.js
@@ -0,0 +1,6 @@
+import CustomContextPadProvider from './contentPadProvider';
+
+export default {
+  __init__: ['contextPadProvider'],
+  contextPadProvider: ['type', CustomContextPadProvider],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
new file mode 100644
index 000000000..5c25d8e8d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
@@ -0,0 +1,26 @@
+function defaultEmpty(key, name, type) {
+  if (!type) type = 'camunda';
+  const TYPE_TARGET = {
+    activiti: 'http://activiti.org/bpmn',
+    camunda: 'http://bpmn.io/schema/bpmn',
+    flowable: 'http://flowable.org/bpmn',
+  };
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn2:definitions
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
+  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+  id="diagram_${key}"
+  targetNamespace="${TYPE_TARGET[type]}">
+  <bpmn2:process id="${key}" name="${name}" isExecutable="true">
+  </bpmn2:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn2:definitions>`;
+}
+
+export default defaultEmpty;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json
new file mode 100644
index 000000000..879785225
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/activitiDescriptor.json
@@ -0,0 +1,1007 @@
+{
+  "name": "Activiti",
+  "uri": "http://activiti.org/bpmn",
+  "prefix": "activiti",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": ["bpmn:Definitions"],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "activiti:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "activiti:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        },
+        {
+          "name": "executionListener",
+          "isAbstract": true,
+          "type": "Expression"
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "multiinstance_type",
+      "superClass": ["Element"]
+    },
+    {
+      "name": "multiinstance_condition",
+      "superClass": ["Element"]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "multiinstance_condition",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["activiti:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "activiti:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["activiti:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "activiti:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "activiti:ServiceTaskLike",
+          "activiti:ExecutionListener",
+          "activiti:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["activiti:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "activiti:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json
new file mode 100644
index 000000000..18fe80288
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/camundaDescriptor.json
@@ -0,0 +1,1023 @@
+{
+  "name": "Camunda",
+  "uri": "http://camunda.org/schema/1.0/bpmn",
+  "prefix": "camunda",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": ["bpmn:Definitions"],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity", "bpmn:SignalEventDefinition"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "camunda:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "camunda:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "modelerTemplateVersion",
+          "isAttr": true,
+          "type": "Integer"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["camunda:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "camunda:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["camunda:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "camunda:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "camunda:ServiceTaskLike",
+          "camunda:ExecutionListener",
+          "camunda:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["camunda:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "camunda:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "eventDefinitions",
+          "type": "bpmn:TimerEventDefinition",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvents",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json
new file mode 100644
index 000000000..2a929bd2d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/descriptor/flowableDescriptor.json
@@ -0,0 +1,1496 @@
+{
+  "name": "Flowable",
+  "uri": "http://flowable.org/bpmn",
+  "prefix": "flowable",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "flowable:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formType",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formReadOnly",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "formInit",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStrategy",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateParam",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "supperClass": "Element",
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "viewId",
+          "type": "Number",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementType",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "processInstanceName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "inheritBusinessKey",
+          "isAttr": true,
+          "type": "Boolean"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "inheritVariables",
+          "isAttr": true,
+          "type": "Boolean"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["flowable:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "flowable:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Button",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "code",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "isHide",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "next",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "condition",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "operationType",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["flowable:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "flowable:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:ServiceTaskLike",
+          "flowable:ExecutionListener",
+          "flowable:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ChildField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "eventDefinitions",
+          "type": "bpmn:TimerEventDefinition",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        },
+        {
+          "name": "children",
+          "type": "ChildField",
+          "isMany": true
+        },
+        {
+          "name": "extensionElements",
+          "type": "bpmn:ExtensionElements",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Condition",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:SequenceFlow"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "field",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "compare",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "logic",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "AssignStartUserHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "RejectHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "RejectReturnTaskId",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "AssignEmptyHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "AssignEmptyUserIds",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "ButtonsSetting",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "flowable:id",
+          "type": "Integer",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:enable",
+          "type": "Boolean",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:displayName",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FieldsPermission",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "flowable:field",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:title",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "flowable:permission",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "BoundaryEventType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:BoundaryEvent"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "TimeoutHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:BoundaryEvent"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "ApproveType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "ApproveMethod",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "CandidateStrategy",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "CandidateParam",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "SignEnable",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Boolean",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "SkipExpression",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "skipExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ReasonRequire",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Boolean",
+          "isBody": true
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
new file mode 100644
index 000000000..54d506019
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/activitiExtension.js
@@ -0,0 +1,94 @@
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: [
+    'bpmn:StartEvent',
+    'bpmn:BoundaryEvent',
+    'bpmn:IntermediateCatchEvent',
+    'bpmn:Activity',
+  ],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+};
+
+function is(element, type) {
+  return (
+    element &&
+    typeof element.$instanceOf === 'function' &&
+    element.$instanceOf(type)
+  );
+}
+
+function exists(element) {
+  return element && element.length > 0;
+}
+
+function includesType(collection, type) {
+  return (
+    exists(collection) &&
+    collection.some((element) => {
+      return is(element, type);
+    })
+  );
+}
+
+function anyType(element, types) {
+  return types.some((type) => {
+    return is(element, type);
+  });
+}
+
+function isAllowed(propName, propDescriptor, newElement) {
+  const name = propDescriptor.name;
+  const types = ALLOWED_TYPES[name.replace(/activiti:/, '')];
+
+  return name === propName && anyType(newElement, types);
+}
+
+function ActivitiModdleExtension(eventBus) {
+  eventBus.on(
+    'property.clone',
+    function (context) {
+      const newElement = context.newElement;
+      const propDescriptor = context.propertyDescriptor;
+
+      this.canCloneProperty(newElement, propDescriptor);
+    },
+    this,
+  );
+}
+
+ActivitiModdleExtension.$inject = ['eventBus'];
+
+ActivitiModdleExtension.prototype.canCloneProperty = function (
+  newElement,
+  propDescriptor,
+) {
+  if (
+    isAllowed('activiti:FailedJobRetryTimeCycle', propDescriptor, newElement)
+  ) {
+    return (
+      includesType(newElement.eventDefinitions, 'bpmn:TimerEventDefinition') ||
+      includesType(newElement.eventDefinitions, 'bpmn:SignalEventDefinition') ||
+      is(
+        newElement.loopCharacteristics,
+        'bpmn:MultiInstanceLoopCharacteristics',
+      )
+    );
+  }
+
+  if (isAllowed('activiti:Connector', propDescriptor, newElement)) {
+    return includesType(
+      newElement.eventDefinitions,
+      'bpmn:MessageEventDefinition',
+    );
+  }
+
+  if (isAllowed('activiti:Field', propDescriptor, newElement)) {
+    return includesType(
+      newElement.eventDefinitions,
+      'bpmn:MessageEventDefinition',
+    );
+  }
+};
+
+// module.exports = ActivitiModdleExtension;
+export default ActivitiModdleExtension;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js
new file mode 100644
index 000000000..7c38ff4e5
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/activiti/index.js
@@ -0,0 +1,11 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+
+import activitiExtension from './activitiExtension';
+
+export default {
+  __init__: ['ActivitiModdleExtension'],
+  ActivitiModdleExtension: ['type', activitiExtension],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js
new file mode 100644
index 000000000..3956be680
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/extension.js
@@ -0,0 +1,156 @@
+import { isFunction, isObject } from '@vben/utils';
+
+const WILDCARD = '*';
+
+function CamundaModdleExtension(eventBus) {
+  // eslint-disable-next-line unicorn/no-this-assignment, @typescript-eslint/no-this-alias
+  const self = this;
+
+  eventBus.on('moddleCopy.canCopyProperty', (context) => {
+    const parent = context.parent;
+    const property = context.property;
+
+    return self.canCopyProperty(property, parent);
+  });
+}
+
+CamundaModdleExtension.$inject = ['eventBus'];
+
+/**
+ * Check wether to disallow copying property.
+ */
+CamundaModdleExtension.prototype.canCopyProperty = function (property, parent) {
+  // (1) check wether property is allowed in parent
+  if (isObject(property) && !isAllowedInParent(property, parent)) {
+    return false;
+  }
+
+  // (2) check more complex scenarios
+
+  if (is(property, 'camunda:InputOutput') && !this.canHostInputOutput(parent)) {
+    return false;
+  }
+
+  if (
+    isAny(property, ['camunda:Connector', 'camunda:Field']) &&
+    !this.canHostConnector(parent)
+  ) {
+    return false;
+  }
+
+  if (is(property, 'camunda:In') && !this.canHostIn(parent)) {
+    return false;
+  }
+};
+
+CamundaModdleExtension.prototype.canHostInputOutput = function (parent) {
+  // allowed in camunda:Connector
+  const connector = getParent(parent, 'camunda:Connector');
+
+  if (connector) {
+    return true;
+  }
+
+  // special rules inside bpmn:FlowNode
+  const flowNode = getParent(parent, 'bpmn:FlowNode');
+
+  if (!flowNode) {
+    return false;
+  }
+
+  if (
+    isAny(flowNode, ['bpmn:StartEvent', 'bpmn:Gateway', 'bpmn:BoundaryEvent'])
+  ) {
+    return false;
+  }
+
+  return !(is(flowNode, 'bpmn:SubProcess') && flowNode.get('triggeredByEvent'));
+};
+
+CamundaModdleExtension.prototype.canHostConnector = function (parent) {
+  const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike');
+
+  if (is(serviceTaskLike, 'bpmn:MessageEventDefinition')) {
+    // only allow on throw and end events
+    return (
+      getParent(parent, 'bpmn:IntermediateThrowEvent') ||
+      getParent(parent, 'bpmn:EndEvent')
+    );
+  }
+
+  return true;
+};
+
+CamundaModdleExtension.prototype.canHostIn = function (parent) {
+  const callActivity = getParent(parent, 'bpmn:CallActivity');
+
+  if (callActivity) {
+    return true;
+  }
+
+  const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition');
+
+  if (signalEventDefinition) {
+    // only allow on throw and end events
+    return (
+      getParent(parent, 'bpmn:IntermediateThrowEvent') ||
+      getParent(parent, 'bpmn:EndEvent')
+    );
+  }
+
+  return true;
+};
+
+// module.exports = CamundaModdleExtension;
+export default CamundaModdleExtension;
+
+// helpers //////////
+
+function is(element, type) {
+  return (
+    element && isFunction(element.$instanceOf) && element.$instanceOf(type)
+  );
+}
+
+function isAny(element, types) {
+  return types.some((t) => {
+    return is(element, t);
+  });
+}
+
+function getParent(element, type) {
+  if (!type) {
+    return element.$parent;
+  }
+
+  if (is(element, type)) {
+    return element;
+  }
+
+  if (!element.$parent) {
+    return;
+  }
+
+  return getParent(element.$parent, type);
+}
+
+function isAllowedInParent(property, parent) {
+  // (1) find property descriptor
+  const descriptor =
+    property.$type && property.$model.getTypeDescriptor(property.$type);
+
+  const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn;
+
+  if (!allowedIn || isWildcard(allowedIn)) {
+    return true;
+  }
+
+  // (2) check wether property has parent of allowed type
+  return allowedIn.some((type) => {
+    return getParent(parent, type);
+  });
+}
+
+function isWildcard(allowedIn) {
+  return allowedIn.includes(WILDCARD);
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
new file mode 100644
index 000000000..f20d5eb8e
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
@@ -0,0 +1,6 @@
+import extension from './extension';
+
+export default {
+  __init__: ['camundaModdleExtension'],
+  camundaModdleExtension: ['type', extension],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
new file mode 100644
index 000000000..25fa1cc8e
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/flowableExtension.js
@@ -0,0 +1,94 @@
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: [
+    'bpmn:StartEvent',
+    'bpmn:BoundaryEvent',
+    'bpmn:IntermediateCatchEvent',
+    'bpmn:Activity',
+  ],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+};
+
+function is(element, type) {
+  return (
+    element &&
+    typeof element.$instanceOf === 'function' &&
+    element.$instanceOf(type)
+  );
+}
+
+function exists(element) {
+  return element && element.length > 0;
+}
+
+function includesType(collection, type) {
+  return (
+    exists(collection) &&
+    collection.some((element) => {
+      return is(element, type);
+    })
+  );
+}
+
+function anyType(element, types) {
+  return types.some((type) => {
+    return is(element, type);
+  });
+}
+
+function isAllowed(propName, propDescriptor, newElement) {
+  const name = propDescriptor.name;
+  const types = ALLOWED_TYPES[name.replace(/flowable:/, '')];
+
+  return name === propName && anyType(newElement, types);
+}
+
+function FlowableModdleExtension(eventBus) {
+  eventBus.on(
+    'property.clone',
+    function (context) {
+      const newElement = context.newElement;
+      const propDescriptor = context.propertyDescriptor;
+
+      this.canCloneProperty(newElement, propDescriptor);
+    },
+    this,
+  );
+}
+
+FlowableModdleExtension.$inject = ['eventBus'];
+
+FlowableModdleExtension.prototype.canCloneProperty = function (
+  newElement,
+  propDescriptor,
+) {
+  if (
+    isAllowed('flowable:FailedJobRetryTimeCycle', propDescriptor, newElement)
+  ) {
+    return (
+      includesType(newElement.eventDefinitions, 'bpmn:TimerEventDefinition') ||
+      includesType(newElement.eventDefinitions, 'bpmn:SignalEventDefinition') ||
+      is(
+        newElement.loopCharacteristics,
+        'bpmn:MultiInstanceLoopCharacteristics',
+      )
+    );
+  }
+
+  if (isAllowed('flowable:Connector', propDescriptor, newElement)) {
+    return includesType(
+      newElement.eventDefinitions,
+      'bpmn:MessageEventDefinition',
+    );
+  }
+
+  if (isAllowed('flowable:Field', propDescriptor, newElement)) {
+    return includesType(
+      newElement.eventDefinitions,
+      'bpmn:MessageEventDefinition',
+    );
+  }
+};
+
+// module.exports = FlowableModdleExtension;
+export default FlowableModdleExtension;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js
new file mode 100644
index 000000000..86474675b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/flowable/index.js
@@ -0,0 +1,10 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+import flowableExtension from './flowableExtension';
+
+export default {
+  __init__: ['FlowableModdleExtension'],
+  FlowableModdleExtension: ['type', flowableExtension],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js
new file mode 100644
index 000000000..75b491ccb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/CustomPalette.js
@@ -0,0 +1,234 @@
+import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider';
+
+export default function CustomPalette(
+  palette,
+  create,
+  elementFactory,
+  spaceTool,
+  lassoTool,
+  handTool,
+  globalConnect,
+  translate,
+) {
+  PaletteProvider.call(
+    this,
+    palette,
+    create,
+    elementFactory,
+    spaceTool,
+    lassoTool,
+    handTool,
+    globalConnect,
+    translate,
+    2000,
+  );
+}
+
+const F = function () {}; // 核心，利用空对象作为中介；
+F.prototype = PaletteProvider.prototype; // 核心，将父类的原型赋值给空对象F；
+
+// 利用中介函数重写原型链方法
+F.prototype.getPaletteEntries = function () {
+  const actions = {};
+  const create = this._create;
+  const elementFactory = this._elementFactory;
+  const spaceTool = this._spaceTool;
+  const lassoTool = this._lassoTool;
+  const handTool = this._handTool;
+  const globalConnect = this._globalConnect;
+  const translate = this._translate;
+
+  function createAction(type, group, className, title, options) {
+    function createListener(event) {
+      const shape = Object.assign(
+        elementFactory.createShape({ type }, options),
+      );
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded;
+      }
+
+      create.start(event, shape);
+    }
+
+    const shortType = type.replace(/^bpmn:/, '');
+
+    return {
+      group,
+      className,
+      title: title || translate('Create {type}', { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener,
+      },
+    };
+  }
+
+  function createSubprocess(event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true,
+    });
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess,
+    });
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent],
+      },
+    });
+  }
+
+  function createParticipant(event) {
+    create.start(event, elementFactory.createParticipantShape());
+  }
+
+  Object.assign(actions, {
+    'hand-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-hand-tool',
+      title: '激活抓手工具',
+      // title: translate("Activate the hand tool"),
+      action: {
+        click(event) {
+          handTool.activateHand(event);
+        },
+      },
+    },
+    'lasso-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-lasso-tool',
+      title: translate('Activate the lasso tool'),
+      action: {
+        click(event) {
+          lassoTool.activateSelection(event);
+        },
+      },
+    },
+    'space-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-space-tool',
+      title: translate('Activate the create/remove space tool'),
+      action: {
+        click(event) {
+          spaceTool.activateSelection(event);
+        },
+      },
+    },
+    'global-connect-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-connection-multi',
+      title: translate('Activate the global connect tool'),
+      action: {
+        click(event) {
+          globalConnect.toggle(event);
+        },
+      },
+    },
+    'tool-separator': {
+      group: 'tools',
+      separator: true,
+    },
+    'create.start-event': createAction(
+      'bpmn:StartEvent',
+      'event',
+      'bpmn-icon-start-event-none',
+      translate('Create StartEvent'),
+    ),
+    'create.intermediate-event': createAction(
+      'bpmn:IntermediateThrowEvent',
+      'event',
+      'bpmn-icon-intermediate-event-none',
+      translate('Create Intermediate/Boundary Event'),
+    ),
+    'create.end-event': createAction(
+      'bpmn:EndEvent',
+      'event',
+      'bpmn-icon-end-event-none',
+      translate('Create EndEvent'),
+    ),
+    'create.exclusive-gateway': createAction(
+      'bpmn:ExclusiveGateway',
+      'gateway',
+      'bpmn-icon-gateway-none',
+      translate('Create Gateway'),
+    ),
+    'create.user-task': createAction(
+      'bpmn:UserTask',
+      'activity',
+      'bpmn-icon-user-task',
+      translate('Create User Task'),
+    ),
+    'create.call-activity': createAction(
+      'bpmn:CallActivity',
+      'activity',
+      'bpmn-icon-call-activity',
+      translate('Create Call Activity'),
+    ),
+    'create.service-task': createAction(
+      'bpmn:ServiceTask',
+      'activity',
+      'bpmn-icon-service',
+      translate('Create Service Task'),
+    ),
+    'create.data-object': createAction(
+      'bpmn:DataObjectReference',
+      'data-object',
+      'bpmn-icon-data-object',
+      translate('Create DataObjectReference'),
+    ),
+    'create.data-store': createAction(
+      'bpmn:DataStoreReference',
+      'data-store',
+      'bpmn-icon-data-store',
+      translate('Create DataStoreReference'),
+    ),
+    'create.subprocess-expanded': {
+      group: 'activity',
+      className: 'bpmn-icon-subprocess-expanded',
+      title: translate('Create expanded SubProcess'),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess,
+      },
+    },
+    'create.participant-expanded': {
+      group: 'collaboration',
+      className: 'bpmn-icon-participant',
+      title: translate('Create Pool/Participant'),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant,
+      },
+    },
+    'create.group': createAction(
+      'bpmn:Group',
+      'artifact',
+      'bpmn-icon-group',
+      translate('Create Group'),
+    ),
+  });
+
+  return actions;
+};
+
+CustomPalette.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate',
+];
+
+CustomPalette.prototype = new F(); // 核心，将 F的实例赋值给子类；
+CustomPalette.prototype.constructor = CustomPalette; // 修复子类CustomPalette的构造器指向，防止原型链的混乱；
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/index.js
new file mode 100644
index 000000000..afe1367c8
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/index.js
@@ -0,0 +1,22 @@
+// import PaletteModule from "diagram-js/lib/features/palette";
+// import CreateModule from "diagram-js/lib/features/create";
+// import SpaceToolModule from "diagram-js/lib/features/space-tool";
+// import LassoToolModule from "diagram-js/lib/features/lasso-tool";
+// import HandToolModule from "diagram-js/lib/features/hand-tool";
+// import GlobalConnectModule from "diagram-js/lib/features/global-connect";
+// import translate from "diagram-js/lib/i18n/translate";
+//
+// import PaletteProvider from "./paletteProvider";
+//
+// export default {
+//   __depends__: [PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate],
+//   __init__: ["paletteProvider"],
+//   paletteProvider: ["type", PaletteProvider]
+// };
+
+import CustomPalette from './CustomPalette';
+
+export default {
+  __init__: ['paletteProvider'],
+  paletteProvider: ['type', CustomPalette],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js
new file mode 100644
index 000000000..70a27a9a6
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette/paletteProvider.js
@@ -0,0 +1,219 @@
+/**
+ * A palette provider for BPMN 2.0 elements.
+ */
+export default function PaletteProvider(
+  palette,
+  create,
+  elementFactory,
+  spaceTool,
+  lassoTool,
+  handTool,
+  globalConnect,
+  translate,
+) {
+  this._palette = palette;
+  this._create = create;
+  this._elementFactory = elementFactory;
+  this._spaceTool = spaceTool;
+  this._lassoTool = lassoTool;
+  this._handTool = handTool;
+  this._globalConnect = globalConnect;
+  this._translate = translate;
+
+  palette.registerProvider(this);
+}
+
+PaletteProvider.$inject = [
+  'palette',
+  'create',
+  'elementFactory',
+  'spaceTool',
+  'lassoTool',
+  'handTool',
+  'globalConnect',
+  'translate',
+];
+
+PaletteProvider.prototype.getPaletteEntries = function () {
+  const actions = {};
+  const create = this._create;
+  const elementFactory = this._elementFactory;
+  const spaceTool = this._spaceTool;
+  const lassoTool = this._lassoTool;
+  const handTool = this._handTool;
+  const globalConnect = this._globalConnect;
+  const translate = this._translate;
+
+  function createAction(type, group, className, title, options) {
+    function createListener(event) {
+      const shape = elementFactory.createShape(
+        Object.assign({ type }, options),
+      );
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded;
+      }
+
+      create.start(event, shape);
+    }
+
+    const shortType = type.replace(/^bpmn:/, '');
+
+    return {
+      group,
+      className,
+      title: title || translate('Create {type}', { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener,
+      },
+    };
+  }
+
+  function createSubprocess(event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true,
+    });
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess,
+    });
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent],
+      },
+    });
+  }
+
+  function createParticipant(event) {
+    create.start(event, elementFactory.createParticipantShape());
+  }
+
+  Object.assign(actions, {
+    'hand-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-hand-tool',
+      title: translate('Activate the hand tool'),
+      action: {
+        click(event) {
+          handTool.activateHand(event);
+        },
+      },
+    },
+    'lasso-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-lasso-tool',
+      title: translate('Activate the lasso tool'),
+      action: {
+        click(event) {
+          lassoTool.activateSelection(event);
+        },
+      },
+    },
+    'space-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-space-tool',
+      title: translate('Activate the create/remove space tool'),
+      action: {
+        click(event) {
+          spaceTool.activateSelection(event);
+        },
+      },
+    },
+    'global-connect-tool': {
+      group: 'tools',
+      className: 'bpmn-icon-connection-multi',
+      title: translate('Activate the global connect tool'),
+      action: {
+        click(event) {
+          globalConnect.toggle(event);
+        },
+      },
+    },
+    'tool-separator': {
+      group: 'tools',
+      separator: true,
+    },
+    'create.start-event': createAction(
+      'bpmn:StartEvent',
+      'event',
+      'bpmn-icon-start-event-none',
+      translate('Create StartEvent'),
+    ),
+    'create.intermediate-event': createAction(
+      'bpmn:IntermediateThrowEvent',
+      'event',
+      'bpmn-icon-intermediate-event-none',
+      translate('Create Intermediate/Boundary Event'),
+    ),
+    'create.end-event': createAction(
+      'bpmn:EndEvent',
+      'event',
+      'bpmn-icon-end-event-none',
+      translate('Create EndEvent'),
+    ),
+    'create.exclusive-gateway': createAction(
+      'bpmn:ExclusiveGateway',
+      'gateway',
+      'bpmn-icon-gateway-none',
+      translate('Create Gateway'),
+    ),
+    'create.user-task': createAction(
+      'bpmn:UserTask',
+      'activity',
+      'bpmn-icon-user-task',
+      translate('Create User Task'),
+    ),
+    'create.service-task': createAction(
+      'bpmn:ServiceTask',
+      'activity',
+      'bpmn-icon-service',
+      translate('Create Service Task'),
+    ),
+    'create.data-object': createAction(
+      'bpmn:DataObjectReference',
+      'data-object',
+      'bpmn-icon-data-object',
+      translate('Create DataObjectReference'),
+    ),
+    'create.data-store': createAction(
+      'bpmn:DataStoreReference',
+      'data-store',
+      'bpmn-icon-data-store',
+      translate('Create DataStoreReference'),
+    ),
+    'create.subprocess-expanded': {
+      group: 'activity',
+      className: 'bpmn-icon-subprocess-expanded',
+      title: translate('Create expanded SubProcess'),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess,
+      },
+    },
+    'create.participant-expanded': {
+      group: 'collaboration',
+      className: 'bpmn-icon-participant',
+      title: translate('Create Pool/Participant'),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant,
+      },
+    },
+    'create.group': createAction(
+      'bpmn:Group',
+      'artifact',
+      'bpmn-icon-group',
+      translate('Create Group'),
+    ),
+  });
+
+  return actions;
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js
new file mode 100644
index 000000000..cc6ad6e9a
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/customTranslate.js
@@ -0,0 +1,44 @@
+// import translations from "./zh";
+//
+// export default function customTranslate(template, replacements) {
+//   replacements = replacements || {};
+//
+//   // Translate
+//   template = translations[template] || template;
+//
+//   // Replace
+//   return template.replace(/{([^}]+)}/g, function(_, key) {
+//     let str = replacements[key];
+//     if (
+//       translations[replacements[key]] !== null &&
+//       translations[replacements[key]] !== "undefined"
+//     ) {
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//       str = translations[replacements[key]];
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//     }
+//     return str || "{" + key + "}";
+//   });
+// }
+
+export default function customTranslate(translations) {
+  return function (template, replacements) {
+    replacements = replacements || {};
+    // 将模板和翻译字典的键统一转换为小写进行匹配
+    const lowerTemplate = template.toLowerCase();
+    const translation = Object.keys(translations).find(
+      (key) => key.toLowerCase() === lowerTemplate,
+    );
+
+    // 如果找到匹配的翻译，使用翻译后的模板
+    if (translation) {
+      template = translations[translation];
+    }
+
+    // 替换模板中的占位符
+    return template.replaceAll(/\{([^}]+)\}/g, (_, key) => {
+      // 如果替换值存在，返回替换值；否则返回原始占位符
+      return replacements[key] === undefined ? `{${key}}` : replacements[key];
+    });
+  };
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
new file mode 100644
index 000000000..4d25da7f5
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
@@ -0,0 +1,256 @@
+/* eslint-disable no-template-curly-in-string */
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  // 添加部分
+  'Append EndEvent': '追加结束事件',
+  'Append Gateway': '追加网关',
+  'Append Task': '追加任务',
+  'Append Intermediate/Boundary Event': '追加中间抛出事件/边界事件',
+  TextAnnotation: '文本注释',
+  'Activate the global connect tool': '激活全局连接工具',
+  'Append {type}': '添加 {type}',
+  'Add Lane above': '在上面添加道',
+  'Divide into two Lanes': '分割成两个道',
+  'Divide into three Lanes': '分割成三个道',
+  'Add Lane below': '在下面添加道',
+  'Append compensation activity': '追加补偿活动',
+  'Change type': '修改类型',
+  'Connect using Association': '使用关联连接',
+  'Connect using Sequence/MessageFlow or Association':
+    '使用顺序/消息流或者关联连接',
+  'Connect using DataInputAssociation': '使用数据输入关联连接',
+  Remove: '移除',
+  'Activate the hand tool': '激活抓手工具',
+  'Activate the lasso tool': '激活套索工具',
+  'Activate the create/remove space tool': '激活创建/删除空间工具',
+  'Create expanded SubProcess': '创建扩展子过程',
+  'Create IntermediateThrowEvent/BoundaryEvent': '创建中间抛出事件/边界事件',
+  'Create Pool/Participant': '创建池/参与者',
+  'Participant Multiplicity': '参与者多重性',
+  'Empty pool/participant (removes content)': '清空池/参与者（移除内容）',
+  'Empty pool/participant': '收缩池/参与者',
+  'Expanded pool/participant': '展开池/参与者',
+  'Parallel Multi-Instance': '并行多重事件',
+  'Sequential Multi-Instance': '时序多重事件',
+  DataObjectReference: '数据对象参考',
+  DataStoreReference: '数据存储参考',
+  'Data object reference': '数据对象引用 ',
+  'Data store reference': '数据存储引用 ',
+  Loop: '循环',
+  'Ad-hoc': '即席',
+  'Create {type}': '创建 {type}',
+  Task: '任务',
+  'Send Task': '发送任务',
+  'Receive Task': '接收任务',
+  'User Task': '用户任务',
+  'Manual Task': '手工任务',
+  'Business Rule Task': '业务规则任务',
+  'Service Task': '服务任务',
+  'Script Task': '脚本任务',
+  'Call Activity': '调用活动',
+  'Sub-Process (collapsed)': '子流程（折叠的）',
+  'Sub-Process (expanded)': '子流程（展开的）',
+  'Ad-hoc sub-process': '即席子流程',
+  'Ad-hoc sub-process (collapsed)': '即席子流程（折叠的）',
+  'Ad-hoc sub-process (expanded)': '即席子流程（展开的）',
+  'Start Event': '开始事件',
+  StartEvent: '开始事件',
+  'Intermediate Throw Event': '中间事件',
+  'End Event': '结束事件',
+  EndEvent: '结束事件',
+  'Create StartEvent': '创建开始事件',
+  'Create EndEvent': '创建结束事件',
+  'Create Task': '创建任务',
+  'Create User Task': '创建用户任务',
+  'Create Call Activity': '创建调用活动',
+  'Create Service Task': '创建服务任务',
+  'Create Gateway': '创建网关',
+  'Create DataObjectReference': '创建数据对象',
+  'Create DataStoreReference': '创建数据存储',
+  'Create Group': '创建分组',
+  'Create Intermediate/Boundary Event': '创建中间/边界事件',
+  'Message Start Event': '消息开始事件',
+  'Timer Start Event': '定时开始事件',
+  'Conditional Start Event': '条件开始事件',
+  'Signal Start Event': '信号开始事件',
+  'Error Start Event': '错误开始事件',
+  'Escalation Start Event': '升级开始事件',
+  'Compensation Start Event': '补偿开始事件',
+  'Message Start Event (non-interrupting)': '消息开始事件（非中断）',
+  'Timer Start Event (non-interrupting)': '定时开始事件（非中断）',
+  'Conditional Start Event (non-interrupting)': '条件开始事件（非中断）',
+  'Signal Start Event (non-interrupting)': '信号开始事件（非中断）',
+  'Escalation Start Event (non-interrupting)': '升级开始事件（非中断）',
+  'Message Intermediate Catch Event': '消息中间捕获事件',
+  'Message Intermediate Throw Event': '消息中间抛出事件',
+  'Timer Intermediate Catch Event': '定时中间捕获事件',
+  'Escalation Intermediate Throw Event': '升级中间抛出事件',
+  'Conditional Intermediate Catch Event': '条件中间捕获事件',
+  'Link Intermediate Catch Event': '链接中间捕获事件',
+  'Link Intermediate Throw Event': '链接中间抛出事件',
+  'Compensation Intermediate Throw Event': '补偿中间抛出事件',
+  'Signal Intermediate Catch Event': '信号中间捕获事件',
+  'Signal Intermediate Throw Event': '信号中间抛出事件',
+  'Message End Event': '消息结束事件',
+  'Escalation End Event': '定时结束事件',
+  'Error End Event': '错误结束事件',
+  'Cancel End Event': '取消结束事件',
+  'Compensation End Event': '补偿结束事件',
+  'Signal End Event': '信号结束事件',
+  'Terminate End Event': '终止结束事件',
+  'Message Boundary Event': '消息边界事件',
+  'Message Boundary Event (non-interrupting)': '消息边界事件（非中断）',
+  'Timer Boundary Event': '定时边界事件',
+  'Timer Boundary Event (non-interrupting)': '定时边界事件（非中断）',
+  'Escalation Boundary Event': '升级边界事件',
+  'Escalation Boundary Event (non-interrupting)': '升级边界事件（非中断）',
+  'Conditional Boundary Event': '条件边界事件',
+  'Conditional Boundary Event (non-interrupting)': '条件边界事件（非中断）',
+  'Error Boundary Event': '错误边界事件',
+  'Cancel Boundary Event': '取消边界事件',
+  'Signal Boundary Event': '信号边界事件',
+  'Signal Boundary Event (non-interrupting)': '信号边界事件（非中断）',
+  'Compensation Boundary Event': '补偿边界事件',
+  'Exclusive Gateway': '互斥网关',
+  'Parallel Gateway': '并行网关',
+  'Inclusive Gateway': '相容网关',
+  'Complex Gateway': '复杂网关',
+  'Event-based Gateway': '事件网关',
+  Transaction: '转运',
+  'sub-process': '子流程',
+  'Event sub-process': '事件子流程',
+  'Collapsed Pool': '折叠池',
+  'Expanded Pool': '展开池',
+
+  // Errors
+  'no parent for {element} in {parent}': '在{parent}里，{element}没有父类',
+  'no shape type specified': '没有指定的形状类型',
+  'flow elements must be children of pools/participants':
+    '流元素必须是池/参与者的子类',
+  'out of bounds release': 'out of bounds release',
+  'more than {count} child lanes': '子道大于{count} ',
+  'element required': '元素不能为空',
+  'diagram not part of bpmn:Definitions': '流程图不符合bpmn规范',
+  'no diagram to display': '没有可展示的流程图',
+  'no process or collaboration to display': '没有可展示的流程/协作',
+  'element {element} referenced by {referenced}#{property} not yet drawn':
+    '由{referenced}#{property}引用的{element}元素仍未绘制',
+  'already rendered {element}': '{element} 已被渲染',
+  'failed to import {element}': '导入{element}失败',
+  // 属性面板的参数
+  Id: '编号',
+  Name: '名称',
+  General: '常规',
+  Details: '详情',
+  'Message Name': '消息名称',
+  Message: '消息',
+  Initiator: '创建者',
+  'Asynchronous Continuations': '持续异步',
+  'Asynchronous Before': '异步前',
+  'Asynchronous After': '异步后',
+  'Job Configuration': '工作配置',
+  Exclusive: '排除',
+  'Job Priority': '工作优先级',
+  'Retry Time Cycle': '重试时间周期',
+  Documentation: '文档',
+  'Element Documentation': '元素文档',
+  'History Configuration': '历史配置',
+  'History Time To Live': '历史的生存时间',
+  Forms: '表单',
+  'Form Key': '表单key',
+  'Form Fields': '表单字段',
+  'Business Key': '业务key',
+  'Form Field': '表单字段',
+  ID: '编号',
+  Type: '类型',
+  Label: '名称',
+  'Default Value': '默认值',
+  'Default Flow': '默认流转路径',
+  'Conditional Flow': '条件流转路径',
+  'Sequence Flow': '普通流转路径',
+  Validation: '校验',
+  'Add Constraint': '添加约束',
+  Config: '配置',
+  Properties: '属性',
+  'Add Property': '添加属性',
+  Value: '值',
+  Listeners: '监听器',
+  'Execution Listener': '执行监听',
+  'Event Type': '事件类型',
+  'Listener Type': '监听器类型',
+  'Java Class': 'Java类',
+  Expression: '表达式',
+  'Must provide a value': '必须提供一个值',
+  'Delegate Expression': '代理表达式',
+  Script: '脚本',
+  'Script Format': '脚本格式',
+  'Script Type': '脚本类型',
+  'Inline Script': '内联脚本',
+  'External Script': '外部脚本',
+  Resource: '资源',
+  'Field Injection': '字段注入',
+  Extensions: '扩展',
+  'Input/Output': '输入/输出',
+  'Input Parameters': '输入参数',
+  'Output Parameters': '输出参数',
+  Parameters: '参数',
+  'Output Parameter': '输出参数',
+  'Timer Definition Type': '定时器定义类型',
+  'Timer Definition': '定时器定义',
+  Date: '日期',
+  Duration: '持续',
+  Cycle: '循环',
+  Signal: '信号',
+  'Signal Name': '信号名称',
+  Escalation: '升级',
+  Error: '错误',
+  'Link Name': '链接名称',
+  Condition: '条件名称',
+  'Variable Name': '变量名称',
+  'Variable Event': '变量事件',
+  'Specify more than one variable change event as a comma separated list.':
+    '多个变量事件以逗号隔开',
+  'Wait for Completion': '等待完成',
+  'Activity Ref': '活动参考',
+  'Version Tag': '版本标签',
+  Executable: '可执行文件',
+  'External Task Configuration': '扩展任务配置',
+  'Task Priority': '任务优先级',
+  External: '外部',
+  Connector: '连接器',
+  'Must configure Connector': '必须配置连接器',
+  'Connector Id': '连接器编号',
+  Implementation: '实现方式',
+  'Field Injections': '字段注入',
+  Fields: '字段',
+  'Result Variable': '结果变量',
+  Topic: '主题',
+  'Configure Connector': '配置连接器',
+  'Input Parameter': '输入参数',
+  Assignee: '代理人',
+  'Candidate Users': '候选用户',
+  'Candidate Groups': '候选组',
+  'Due Date': '到期时间',
+  'Follow Up Date': '跟踪日期',
+  Priority: '优先级',
+  'The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
+    '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  'The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)':
+    '跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00',
+  Variables: '变量',
+  'Candidate Starter Configuration': '候选人起动器配置',
+  'Candidate Starter Groups': '候选人起动器组',
+  'This maps to the process definition key.': '这映射到流程定义键。',
+  'Candidate Starter Users': '候选人起动器的用户',
+  'Specify more than one user as a comma separated list.':
+    '指定多个用户作为逗号分隔的列表。',
+  'Tasklist Configuration': 'Tasklist配置',
+  Startable: '启动',
+  'Specify more than one group as a comma separated list.':
+    '指定多个组作为逗号分隔的列表。',
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/index.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/index.ts
new file mode 100644
index 000000000..f27319abb
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/index.ts
@@ -0,0 +1,9 @@
+import './theme/index.scss';
+import 'bpmn-js/dist/assets/diagram-js.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
+
+export { default as MyProcessDesigner } from './designer';
+export { default as MyProcessViewer } from './designer/index2';
+export { default as MyProcessPenal } from './penal';
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/palette/ProcessPalette.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/palette/ProcessPalette.vue
new file mode 100644
index 000000000..6d0ac704b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/palette/ProcessPalette.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { ElButton } from 'element-plus';
+
+defineOptions({ name: 'MyProcessPalette' });
+
+const bpmnInstances = () =>
+  (window as typeof window & { bpmnInstances?: any }).bpmnInstances;
+const addTask = (event: MouseEvent, options: any = {}) => {
+  const ElementFactory = bpmnInstances().elementFactory;
+  const create = bpmnInstances().modeler.get('create');
+
+  const shape = ElementFactory.createShape(
+    Object.assign({ type: 'bpmn:UserTask' }, options),
+  );
+
+  if (options) {
+    shape.businessObject.di.isExpanded = options.isExpanded;
+  }
+  create.start(event, shape);
+};
+</script>
+
+<template>
+  <div class="my-process-palette p-20 pt-80">
+    <ElButton type="primary" @click="addTask" @mousedown="addTask">
+      测试任务
+    </ElButton>
+    <div class="mt-4" id="palette-container">1</div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
new file mode 100644
index 000000000..5e482c870
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/PropertiesPanel.vue
@@ -0,0 +1,399 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
+
+import { ElCollapse, ElCollapseItem } from 'element-plus';
+
+import ElementCustomConfig from '#/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue';
+import ElementForm from '#/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue';
+
+import ElementBaseInfo from './base/ElementBaseInfo.vue';
+import FlowCondition from './flow-condition/FlowCondition.vue';
+import ElementListeners from './listeners/ElementListeners.vue';
+// import ElementForm from './form/ElementForm.vue'
+import UserTaskListeners from './listeners/UserTaskListeners.vue';
+import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue';
+import ElementOtherConfig from './other/ElementOtherConfig.vue';
+import ElementProperties from './properties/ElementProperties.vue';
+import SignalAndMassage from './signal-message/SignalAndMessage.vue';
+import { getTaskCollapseItemName, isTaskCollapseItemShow } from './task/data';
+import ElementTask from './task/ElementTask.vue';
+import TimeEventConfig from './time-event-config/TimeEventConfig.vue';
+
+defineOptions({ name: 'MyPropertiesPanel' });
+
+/**
+ * 侧边栏
+ * @Author MiyueFE
+ * @Home https://github.com/miyuesc
+ * @Date 2021年3月31日18:57:51
+ */
+const props = defineProps({
+  bpmnModeler: {
+    type: Object,
+    default: () => ({}),
+  },
+  prefix: {
+    type: String,
+    default: 'camunda',
+  },
+  width: {
+    type: Number,
+    default: 480,
+  },
+  idEditDisabled: {
+    type: Boolean,
+    default: false,
+  },
+  businessObject: {
+    type: Object,
+    default: () => ({}),
+  },
+  model: {
+    type: Object,
+    default: () => ({}),
+  }, // 流程模型的数据
+});
+
+const activeTab = ref('base');
+const elementId = ref('');
+const elementType = ref<any>('');
+const elementBusinessObject = ref<any>({}); // 元素 businessObject 镜像，提供给需要做判断的组件使用
+const conditionFormVisible = ref(false); // 流转条件设置
+const formVisible = ref(false); // 表单配置
+const bpmnElement = ref();
+const isReady = ref(false);
+
+const type = ref('time');
+const condition = ref('');
+provide('prefix', props.prefix);
+provide('width', props.width);
+
+// 初始化 bpmnInstances
+const initBpmnInstances = () => {
+  if (!props.bpmnModeler) return false;
+  try {
+    const instances = {
+      modeler: props.bpmnModeler,
+      modeling: props.bpmnModeler.get('modeling'),
+      moddle: props.bpmnModeler.get('moddle'),
+      eventBus: props.bpmnModeler.get('eventBus'),
+      bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
+      elementFactory: props.bpmnModeler.get('elementFactory'),
+      elementRegistry: props.bpmnModeler.get('elementRegistry'),
+      replace: props.bpmnModeler.get('replace'),
+      selection: props.bpmnModeler.get('selection'),
+    };
+
+    // 检查所有实例是否都存在
+    const allInstancesExist = Object.values(instances).every(Boolean);
+    if (allInstancesExist) {
+      const w = window as any;
+      w.bpmnInstances = instances;
+      return true;
+    }
+    return false;
+  } catch (error) {
+    console.error('初始化 bpmnInstances 失败:', error);
+    return false;
+  }
+};
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+// 监听 props.bpmnModeler 然后 initModels
+watch(
+  () => props.bpmnModeler,
+  async () => {
+    // 避免加载时 流程图 并未加载完成
+    if (!props.bpmnModeler) {
+      // console.log('缺少props.bpmnModeler');
+      return;
+    }
+
+    try {
+      // 等待 modeler 初始化完成
+      await nextTick();
+      if (initBpmnInstances()) {
+        isReady.value = true;
+        await nextTick();
+        getActiveElement();
+      } else {
+        console.error('modeler 实例未完全初始化');
+      }
+    } catch (error) {
+      console.error('初始化失败:', error);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const getActiveElement = () => {
+  if (!isReady.value || !props.bpmnModeler) return;
+
+  // 初始第一个选中元素 bpmn:Process
+  initFormOnChanged(null);
+  props.bpmnModeler.on('import.done', (_: any) => {
+    // console.log(e, 'eeeee');
+    initFormOnChanged(null);
+  });
+  // 监听选择事件，修改当前激活的元素以及表单
+  props.bpmnModeler.on(
+    'selection.changed',
+    ({ newSelection }: { newSelection: any }) => {
+      initFormOnChanged(newSelection[0] || null);
+    },
+  );
+  props.bpmnModeler.on('element.changed', ({ element }: { element: any }) => {
+    // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+    if (element && element.id === elementId.value) {
+      initFormOnChanged(element);
+    }
+  });
+};
+
+// 初始化数据
+const initFormOnChanged = (element: any) => {
+  if (!isReady.value || !bpmnInstances()) return;
+
+  let activatedElement = element;
+  if (!activatedElement) {
+    activatedElement =
+      bpmnInstances().elementRegistry.find(
+        (el: any) => el.type === 'bpmn:Process',
+      ) ??
+      bpmnInstances().elementRegistry.find(
+        (el: any) => el.type === 'bpmn:Collaboration',
+      );
+  }
+  if (!activatedElement) return;
+
+  try {
+    // console.log(`
+    //             ----------
+    //     select element changed:
+    //               id:  ${activatedElement.id}
+    //             type:  ${activatedElement.businessObject.$type}
+    //             ----------
+    //             `);
+    // console.log('businessObject:', activatedElement.businessObject);
+    bpmnInstances().bpmnElement = activatedElement;
+    bpmnElement.value = activatedElement;
+    elementId.value = activatedElement.id;
+    elementType.value = activatedElement.type.split(':')[1] || '';
+    elementBusinessObject.value = cloneDeep(activatedElement.businessObject);
+    conditionFormVisible.value =
+      elementType.value === 'SequenceFlow' &&
+      activatedElement.source &&
+      !(activatedElement.source.type as string).includes('StartEvent');
+    formVisible.value =
+      elementType.value === 'UserTask' || elementType.value === 'StartEvent';
+  } catch (error) {
+    console.error('初始化表单数据失败:', error);
+  }
+};
+
+onBeforeUnmount(() => {
+  const w = window as any;
+  w.bpmnInstances = null;
+  isReady.value = false;
+});
+
+watch(
+  () => elementId.value,
+  () => {
+    activeTab.value = 'base';
+  },
+);
+//
+// function updateNode() {
+//   const moddle = window.bpmnInstances?.moddle;
+//   const modeling = window.bpmnInstances?.modeling;
+//   const elementRegistry = window.bpmnInstances?.elementRegistry;
+//   if (!moddle || !modeling || !elementRegistry) return;
+//
+//   const element = elementRegistry.get(props.businessObject.id);
+//   if (!element) return;
+//
+//   const timerDef = moddle.create('bpmn:TimerEventDefinition', {});
+//   switch (type.value) {
+//     case 'cycle': {
+//       timerDef.timeCycle = moddle.create('bpmn:FormalExpression', {
+//         body: condition.value,
+//       });
+//
+//       break;
+//     }
+//     case 'duration': {
+//       timerDef.timeDuration = moddle.create('bpmn:FormalExpression', {
+//         body: condition.value,
+//       });
+//
+//       break;
+//     }
+//     case 'time': {
+//       timerDef.timeDate = moddle.create('bpmn:FormalExpression', {
+//         body: condition.value,
+//       });
+//
+//       break;
+//     }
+//     // No default
+//   }
+//
+//   modeling.updateModdleProperties(element, element.businessObject, {
+//     eventDefinitions: [timerDef],
+//   });
+// }
+
+// 初始化和监听
+function syncFromBusinessObject() {
+  if (props.businessObject) {
+    const timerDef = (props.businessObject.eventDefinitions || [])[0];
+    if (timerDef) {
+      if (timerDef.timeDate) {
+        type.value = 'time';
+        condition.value = timerDef.timeDate.body;
+      } else if (timerDef.timeDuration) {
+        type.value = 'duration';
+        condition.value = timerDef.timeDuration.body;
+      } else if (timerDef.timeCycle) {
+        type.value = 'cycle';
+        condition.value = timerDef.timeCycle.body;
+      }
+    }
+  }
+}
+onMounted(syncFromBusinessObject);
+watch(() => props.businessObject, syncFromBusinessObject, { deep: true });
+</script>
+<template>
+  <div
+    class="process-panel__container"
+    :style="{ width: `${width}px`, maxHeight: '600px' }"
+  >
+    <ElCollapse v-model="activeTab" v-if="isReady">
+      <ElCollapseItem name="base" title="常规">
+        <template #icon>
+          <IconifyIcon icon="ep:info-filled" />
+        </template>
+        <ElementBaseInfo
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+          :model="model"
+        />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="message"
+        title="消息与信号"
+        v-if="elementType === 'Process'"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:comment" />
+        </template>
+        <SignalAndMassage />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="condition"
+        title="流转条件"
+        v-if="conditionFormVisible"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:promotion" />
+        </template>
+        <FlowCondition
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </ElCollapseItem>
+      <ElCollapseItem name="form" title="表单" v-if="formVisible">
+        <template #icon>
+          <IconifyIcon icon="ep:list" />
+        </template>
+        <ElementForm :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="task"
+        :title="getTaskCollapseItemName(elementType)"
+        v-if="isTaskCollapseItemShow(elementType)"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:checked" />
+        </template>
+        <ElementTask :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="multiInstance"
+        title="多人审批方式"
+        v-if="elementType.includes('Task')"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:help-filled" />
+        </template>
+        <ElementMultiInstance
+          :id="elementId"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+        />
+      </ElCollapseItem>
+      <ElCollapseItem name="listeners" title="执行监听器">
+        <template #icon>
+          <IconifyIcon icon="ep:bell-filled" />
+        </template>
+        <ElementListeners :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem
+        name="taskListeners"
+        title="任务监听器"
+        v-if="elementType === 'UserTask'"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:bell-filled" />
+        </template>
+        <UserTaskListeners :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem name="extensions" title="扩展属性">
+        <template #icon>
+          <IconifyIcon icon="ep:circle-plus-filled" />
+        </template>
+        <ElementProperties :id="elementId" :type="elementType" />
+      </ElCollapseItem>
+      <ElCollapseItem name="other" title="其他">
+        <template #icon>
+          <IconifyIcon icon="ep:promotion" />
+        </template>
+        <ElementOtherConfig :id="elementId" />
+      </ElCollapseItem>
+      <ElCollapseItem name="customConfig" title="自定义配置">
+        <template #icon>
+          <IconifyIcon icon="ep:tools" />
+        </template>
+        <ElementCustomConfig
+          :id="elementId"
+          :type="elementType"
+          :business-object="elementBusinessObject"
+        />
+      </ElCollapseItem>
+      <!-- 新增的时间事件配置项 -->
+      <ElCollapseItem
+        name="timeEvent"
+        title="时间事件"
+        v-if="elementType === 'IntermediateCatchEvent'"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:timer" />
+        </template>
+        <!-- 相关 issue：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICNRW2 -->
+        <TimeEventConfig
+          :business-object="elementBusinessObject"
+          :key="elementId"
+        />
+      </ElCollapseItem>
+    </ElCollapse>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
new file mode 100644
index 000000000..3887645ce
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue
@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, reactive, ref, toRaw, watch } from 'vue';
+
+import { ElForm, ElFormItem, ElInput } from 'element-plus';
+
+defineOptions({ name: 'ElementBaseInfo' });
+
+const props = defineProps<{
+  businessObject?: BusinessObject;
+  model?: Model;
+}>();
+
+interface BusinessObject {
+  id?: string;
+  name?: string;
+  $type: string;
+  [key: string]: any;
+}
+
+interface Model {
+  key?: string;
+  name?: string;
+  [key: string]: any;
+}
+
+const needProps = ref<Record<string, any>>({});
+const bpmnElement = ref<any>();
+const elementBaseInfo = ref<BusinessObject>({} as any);
+// 流程表单的下拉框的数据
+// const forms = ref([])
+// 流程模型的校验
+const rules = reactive<any>({
+  id: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }],
+});
+
+const bpmnInstances = () =>
+  (window as any)?.bpmnInstances as {
+    bpmnElement: any;
+    modeling: {
+      updateProperties: (element: any, properties: any) => void;
+    };
+  };
+const resetBaseInfo = () => {
+  // console.log(window, 'window');
+  // console.log(bpmnElement.value, 'bpmnElement');
+
+  bpmnElement.value = bpmnInstances()?.bpmnElement;
+  // console.log(bpmnElement.value, 'resetBaseInfo11111111111')
+  if (bpmnElement.value?.businessObject) {
+    elementBaseInfo.value = bpmnElement.value.businessObject;
+    needProps.value.type = bpmnElement.value.businessObject.$type;
+  }
+  // elementBaseInfo.value['typess'] = bpmnElement.value.businessObject.$type
+
+  // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
+  // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
+};
+const handleKeyUpdate = (value: any) => {
+  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
+  if (!value) {
+    return;
+  }
+  if (!/[a-z_][-\w.$]*/i.test(value)) {
+    // console.log('key 不满足 XML NCName 规则，所以不进行赋值');
+    return;
+  }
+  // console.log('key 满足 XML NCName 规则，所以进行赋值');
+
+  // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
+  if (elementBaseInfo.value) {
+    elementBaseInfo.value.id = value;
+  }
+
+  setTimeout(() => {
+    updateBaseInfo('id');
+  }, 100);
+};
+
+const handleNameUpdate = (value: any) => {
+  // console.log(elementBaseInfo, 'elementBaseInfo');
+  if (!value) {
+    return;
+  }
+  if (elementBaseInfo.value) {
+    elementBaseInfo.value.name = value;
+  }
+
+  setTimeout(() => {
+    updateBaseInfo('name');
+  }, 100);
+};
+// const handleDescriptionUpdate=(value)=> {
+// TODO 芋艿：documentation 暂时无法修改，后续在看看
+// this.elementBaseInfo['documentation'] = value;
+// this.updateBaseInfo('documentation');
+// }
+const updateBaseInfo = (key: string) => {
+  // console.log(key, 'key');
+  // 触发 elementBaseInfo 对应的字段
+  const attrObj: Record<string, any> = Object.create(null);
+
+  // 安全检查
+  if (!elementBaseInfo.value || !bpmnElement.value) {
+    return;
+  }
+
+  // console.log(attrObj, 'attrObj')
+  attrObj[key] = elementBaseInfo.value[key];
+  // console.log(attrObj, 'attrObj111')
+  // const attrObj = {
+  //   id: elementBaseInfo.value[key]
+  //   // di: { id: `${elementBaseInfo.value[key]}_di` }
+  // }
+  // console.log(elementBaseInfo, 'elementBaseInfo11111111111')
+  needProps.value = { ...elementBaseInfo.value, ...needProps.value };
+
+  if (key === 'id') {
+    // console.log('jinru')
+    // console.log(window, 'window');
+    // console.log(bpmnElement.value, 'bpmnElement');
+    // console.log(toRaw(bpmnElement.value), 'bpmnElement');
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      id: elementBaseInfo.value[key],
+      di: { id: `${elementBaseInfo.value[key]}_di` },
+    });
+  } else {
+    // console.log(attrObj, 'attrObj');
+    bpmnInstances().modeling.updateProperties(
+      toRaw(bpmnElement.value),
+      attrObj,
+    );
+  }
+};
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    // console.log(val, 'val11111111111111111111')
+    if (val) {
+      // nextTick(() => {
+      resetBaseInfo();
+      // })
+    }
+  },
+);
+
+watch(
+  () => props.model?.key,
+  (val) => {
+    // 针对上传的 bpmn 流程图时，保证 key 和 name 的更新
+    if (val) {
+      handleKeyUpdate(props.model?.key as any);
+      handleNameUpdate(props.model?.name as any);
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+// watch(
+//   () => ({ ...props }),
+//   (oldVal, newVal) => {
+//     console.log(oldVal, 'oldVal')
+//     console.log(newVal, 'newVal')
+//     if (newVal) {
+//       needProps.value = newVal
+//     }
+//   },
+//   {
+//     immediate: true
+//   }
+// )
+// 'model.key': {
+//   immediate: false,
+//   handler: function (val) {
+//     this.handleKeyUpdate(val)
+//   }
+// }
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+</script>
+<template>
+  <div class="panel-tab__content">
+    <ElForm :model="needProps" :rules="rules" label-position="top">
+      <div v-if="needProps.type === 'bpmn:Process'">
+        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
+        <ElFormItem label="流程标识" prop="id">
+          <ElInput
+            v-model="needProps.id"
+            placeholder="请输入流标标识"
+            :disabled="needProps.id !== undefined && needProps.id.length > 0"
+            @change="handleKeyUpdate"
+          />
+        </ElFormItem>
+        <ElFormItem label="流程名称" prop="name">
+          <ElInput
+            v-model="needProps.name"
+            placeholder="请输入流程名称"
+            clearable
+            @change="handleNameUpdate"
+          />
+        </ElFormItem>
+      </div>
+      <div v-else>
+        <ElFormItem label="ID">
+          <ElInput
+            v-model="elementBaseInfo.id"
+            clearable
+            @change="updateBaseInfo('id')"
+          />
+        </ElFormItem>
+        <ElFormItem label="名称">
+          <ElInput
+            v-model="elementBaseInfo.name"
+            clearable
+            @change="updateBaseInfo('name')"
+          />
+        </ElFormItem>
+      </div>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
new file mode 100644
index 000000000..8c8cc6f11
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import type { Component } from 'vue';
+
+import { ref, watch } from 'vue';
+
+import { CustomConfigMap } from './data';
+
+defineOptions({ name: 'ElementCustomConfig' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+  businessObject: {
+    type: Object as () => BusinessObject,
+    default: () => ({}),
+  },
+});
+
+interface BusinessObject {
+  eventDefinitions?: Array<{ $type: string }>;
+  [key: string]: any;
+}
+
+// const bpmnInstances = () => (window as any)?.bpmnInstances;
+const customConfigComponent = ref<Component | null>(null);
+
+watch(
+  () => props.businessObject,
+  () => {
+    if (props.type && props.businessObject) {
+      let val = props.type;
+      if (props.businessObject.eventDefinitions) {
+        val +=
+          props.businessObject.eventDefinitions[0]?.$type.split(':')[1] || '';
+      }
+      // @ts-ignore
+      customConfigComponent.value = (
+        CustomConfigMap as Record<string, { component: Component }>
+      )[val]?.component;
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <component :is="customConfigComponent" v-bind="$props" />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
new file mode 100644
index 000000000..2a0316489
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/BoundaryEventTimer.vue
@@ -0,0 +1,305 @@
+<script lang="ts" setup>
+import { inject, nextTick, ref, toRaw, watch } from 'vue';
+
+import {
+  ElCol,
+  ElDivider,
+  ElFormItem,
+  ElInputNumber,
+  ElOption,
+  ElRadioButton,
+  ElRadioGroup,
+  ElRow,
+  ElSelect,
+  ElSwitch,
+  ElText,
+} from 'element-plus';
+
+import { convertTimeUnit } from '#/views/bpm/components/simple-process-design/components/nodes-config/utils';
+import {
+  TIME_UNIT_TYPES,
+  TIMEOUT_HANDLER_TYPES,
+  TimeUnitType,
+} from '#/views/bpm/components/simple-process-design/consts';
+
+defineOptions({ name: 'ElementCustomConfig4BoundaryEventTimer' });
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+
+const bpmnElement = ref<any>();
+const bpmnInstances = () => (window as Record<string, any>)?.bpmnInstances;
+
+const timeoutHandlerEnable = ref(false);
+const boundaryEventType = ref<any>();
+const timeoutHandlerType = ref<{
+  value: number | undefined;
+}>({
+  value: undefined,
+});
+const timeModdle = ref<any>();
+const timeDuration = ref(6);
+const timeUnit = ref(TimeUnitType.HOUR);
+const maxRemindCount = ref(1);
+
+const elExtensionElements = ref<any>();
+const otherExtensions = ref<any[]>();
+const configExtensions = ref<any[]>([]);
+const eventDefinition = ref<any>();
+
+const resetElement = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+  eventDefinition.value = bpmnElement.value.businessObject.eventDefinitions[0];
+
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnElement.value.businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
+
+  // 是否开启自定义用户任务超时处理
+  boundaryEventType.value = elExtensionElements.value.values?.find(
+    (ex: any) => ex.$type === `${prefix}:BoundaryEventType`,
+  );
+  if (boundaryEventType.value && boundaryEventType.value.value === 1) {
+    timeoutHandlerEnable.value = true;
+    configExtensions.value.push(boundaryEventType.value);
+  }
+
+  // 执行动作
+  timeoutHandlerType.value = elExtensionElements.value.values?.find(
+    (ex: any) => ex.$type === `${prefix}:TimeoutHandlerType`,
+  );
+  if (timeoutHandlerType.value) {
+    configExtensions.value.push(timeoutHandlerType.value);
+    if (eventDefinition.value.timeCycle) {
+      const timeStr = eventDefinition.value.timeCycle.body;
+      const maxRemindCountStr = timeStr.split('/')[0];
+      const timeDurationStr = timeStr.split('/')[1];
+      maxRemindCount.value = Number.parseInt(maxRemindCountStr.slice(1));
+      timeDuration.value = Number.parseInt(timeDurationStr.slice(2, -1));
+      timeUnit.value = convertTimeUnit(timeDurationStr.slice(-1));
+      timeModdle.value = eventDefinition.value.timeCycle;
+    }
+    if (eventDefinition.value.timeDuration) {
+      const timeDurationStr = eventDefinition.value.timeDuration.body;
+      timeDuration.value = Number.parseInt(timeDurationStr.slice(2, -1));
+      timeUnit.value = convertTimeUnit(timeDurationStr.slice(-1));
+      timeModdle.value = eventDefinition.value.timeDuration;
+    }
+  }
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value =
+    elExtensionElements.value.values?.filter(
+      (ex: any) =>
+        ex.$type !== `${prefix}:BoundaryEventType` &&
+        ex.$type !== `${prefix}:TimeoutHandlerType`,
+    ) ?? [];
+};
+
+const timeoutHandlerChange = (checked: any) => {
+  timeoutHandlerEnable.value = checked;
+  if (checked) {
+    // 启用自定义用户任务超时处理
+    // 边界事件类型 --- 超时
+    boundaryEventType.value = bpmnInstances().moddle.create(
+      `${prefix}:BoundaryEventType`,
+      {
+        value: 1,
+      },
+    );
+    configExtensions.value.push(boundaryEventType.value);
+    // 超时处理类型
+    timeoutHandlerType.value = bpmnInstances().moddle.create(
+      `${prefix}:TimeoutHandlerType`,
+      {
+        value: 1,
+      },
+    );
+    configExtensions.value.push(timeoutHandlerType.value);
+    // 超时时间表达式
+    timeDuration.value = 6;
+    timeUnit.value = 2;
+    maxRemindCount.value = 1;
+    timeModdle.value = bpmnInstances().moddle.create(`bpmn:Expression`, {
+      body: 'PT6H',
+    });
+    eventDefinition.value.timeDuration = timeModdle.value;
+  } else {
+    // 关闭自定义用户任务超时处理
+    configExtensions.value = [];
+    delete eventDefinition.value.timeDuration;
+    delete eventDefinition.value.timeCycle;
+  }
+  updateElementExtensions();
+};
+
+const onTimeoutHandlerTypeChanged = () => {
+  maxRemindCount.value = 1;
+  updateElementExtensions();
+  updateTimeModdle();
+};
+
+const onTimeUnitChange = () => {
+  // 分钟，默认是 60 分钟
+  if (timeUnit.value === TimeUnitType.MINUTE) {
+    timeDuration.value = 60;
+  }
+  // 小时，默认是 6 个小时
+  if (timeUnit.value === TimeUnitType.HOUR) {
+    timeDuration.value = 6;
+  }
+  // 天， 默认 1天
+  if (timeUnit.value === TimeUnitType.DAY) {
+    timeDuration.value = 1;
+  }
+  updateTimeModdle();
+  updateElementExtensions();
+};
+
+const updateTimeModdle = () => {
+  if (maxRemindCount.value > 1) {
+    timeModdle.value.body = `R${maxRemindCount.value}/${isoTimeDuration()}`;
+    if (!eventDefinition.value.timeCycle) {
+      delete eventDefinition.value.timeDuration;
+      eventDefinition.value.timeCycle = timeModdle.value;
+    }
+  } else {
+    timeModdle.value.body = isoTimeDuration();
+    if (!eventDefinition.value.timeDuration) {
+      delete eventDefinition.value.timeCycle;
+      eventDefinition.value.timeDuration = timeModdle.value;
+    }
+  }
+};
+
+const isoTimeDuration = () => {
+  let strTimeDuration = 'PT';
+  if (timeUnit.value === TimeUnitType.MINUTE) {
+    strTimeDuration += `${timeDuration.value}M`;
+  }
+  if (timeUnit.value === TimeUnitType.HOUR) {
+    strTimeDuration += `${timeDuration.value}H`;
+  }
+  if (timeUnit.value === TimeUnitType.DAY) {
+    strTimeDuration += `${timeDuration.value}D`;
+  }
+  return strTimeDuration;
+};
+
+const updateElementExtensions = () => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [...(otherExtensions.value || []), ...configExtensions.value],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+};
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        resetElement();
+      });
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <ElDivider content-position="left">审批人超时未处理时</ElDivider>
+    <ElFormItem label="启用开关" prop="timeoutHandlerEnable">
+      <ElSwitch
+        v-model="timeoutHandlerEnable"
+        active-text="开启"
+        inactive-text="关闭"
+        @change="timeoutHandlerChange"
+      />
+    </ElFormItem>
+    <ElFormItem
+      label="执行动作"
+      prop="timeoutHandlerType"
+      v-if="timeoutHandlerEnable"
+    >
+      <ElRadioGroup
+        v-model="timeoutHandlerType.value"
+        @change="onTimeoutHandlerTypeChanged"
+      >
+        <ElRadioButton
+          v-for="item in TIMEOUT_HANDLER_TYPES"
+          :key="item.value"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </ElRadioButton>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem label="超时时间设置" v-if="timeoutHandlerEnable">
+      <ElRow :gutter="0">
+        <ElCol :span="6">
+          <ElText class="mr-2 mt-2 inline-flex text-sm"> 当超过 </ElText>
+        </ElCol>
+        <ElCol :span="6">
+          <ElFormItem prop="timeDuration" class="mb-0">
+            <ElInputNumber
+              class="mr-2 mt-0.5"
+              v-model="timeDuration"
+              :min="1"
+              controls-position="right"
+              @change="
+                () => {
+                  updateTimeModdle();
+                  updateElementExtensions();
+                }
+              "
+            />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElSelect
+            v-model="timeUnit"
+            class="mr-2 !w-24"
+            @change="onTimeUnitChange"
+          >
+            <ElOption
+              v-for="item in TIME_UNIT_TYPES"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </ElSelect>
+          <ElText class="mr-2 mt-2 inline-flex text-sm"> 未处理 </ElText>
+        </ElCol>
+      </ElRow>
+    </ElFormItem>
+    <ElFormItem
+      label="最大提醒次数"
+      prop="maxRemindCount"
+      v-if="timeoutHandlerEnable && timeoutHandlerType.value === 1"
+    >
+      <ElInputNumber
+        v-model="maxRemindCount"
+        :min="1"
+        :max="10"
+        @change="
+          () => {
+            updateTimeModdle();
+            updateElementExtensions();
+          }
+        "
+      />
+    </ElFormItem>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
new file mode 100644
index 000000000..ac4a7310d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/components/UserTaskCustomConfig.vue
@@ -0,0 +1,663 @@
+<!-- UserTask 自定义配置：
+     1. 审批人与提交人为同一人时
+     2. 审批人拒绝时
+     3. 审批人为空时
+     4. 操作按钮
+     5. 字段权限
+     6. 审批类型
+     7. 是否需要签名
+-->
+<script lang="ts" setup>
+import type { ComponentPublicInstance } from 'vue';
+
+import type { SystemUserApi } from '#/api/system/user';
+
+import { inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+
+import { BpmModelFormType } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElDivider,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus';
+
+import { getSimpleUserList } from '#/api/system/user';
+import {
+  APPROVE_TYPE,
+  ApproveType,
+  ASSIGN_EMPTY_HANDLER_TYPES,
+  ASSIGN_START_USER_HANDLER_TYPES,
+  AssignEmptyHandlerType,
+  DEFAULT_BUTTON_SETTING,
+  FieldPermissionType,
+  OPERATION_BUTTON_NAME,
+  REJECT_HANDLER_TYPES,
+  RejectHandlerType,
+} from '#/views/bpm/components/simple-process-design/consts';
+import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
+
+defineOptions({ name: 'ElementCustomConfig4UserTask' });
+const props = defineProps({
+  id: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  type: {
+    type: String,
+    required: false,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+
+// 审批人与提交人为同一人时
+const assignStartUserHandlerTypeEl = ref<any>();
+const assignStartUserHandlerType = ref<any>();
+
+// 审批人拒绝时
+const rejectHandlerTypeEl = ref<any>();
+const rejectHandlerType = ref<any>();
+const returnNodeIdEl = ref<any>();
+const returnNodeId = ref<any>();
+const returnTaskList = ref<any[]>([]);
+
+// 审批人为空时
+const assignEmptyHandlerTypeEl = ref<any>();
+const assignEmptyHandlerType = ref<any>();
+const assignEmptyUserIdsEl = ref<any>();
+const assignEmptyUserIds = ref<any>();
+
+// 操作按钮设置
+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[]>([]);
+const { formType, fieldsPermissionConfig, getNodeConfigFormFields } =
+  useFormFieldsPermission(FieldPermissionType.READ);
+
+// 审批类型
+const approveType = ref({ value: ApproveType.USER });
+
+// 是否需要签名
+const signEnable = ref({ value: false });
+
+// 审批意见
+const reasonRequire = ref({ value: false });
+
+const elExtensionElements = ref<any>();
+const otherExtensions = ref<any>();
+const bpmnElement = ref<any>();
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetCustomConfigList = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+
+  // 获取可回退的列表
+  returnTaskList.value = findAllPredecessorsExcludingStart(
+    bpmnElement.value.id,
+    bpmnInstances().modeler,
+  );
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnElement.value.businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
+
+  // 审批类型
+  approveType.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:ApproveType`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:ApproveType`, {
+      value: ApproveType.USER,
+    });
+
+  // 审批人与提交人为同一人时
+  assignStartUserHandlerTypeEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:AssignStartUserHandlerType`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:AssignStartUserHandlerType`, {
+      value: 1,
+    });
+  assignStartUserHandlerType.value = assignStartUserHandlerTypeEl.value.value;
+
+  // 审批人拒绝时
+  rejectHandlerTypeEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:RejectHandlerType`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:RejectHandlerType`, { value: 1 });
+  rejectHandlerType.value = rejectHandlerTypeEl.value.value;
+  returnNodeIdEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:RejectReturnTaskId`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:RejectReturnTaskId`, {
+      value: '',
+    });
+  returnNodeId.value = returnNodeIdEl.value.value;
+
+  // 审批人为空时
+  assignEmptyHandlerTypeEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:AssignEmptyHandlerType`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:AssignEmptyHandlerType`, {
+      value: 1,
+    });
+  assignEmptyHandlerType.value = assignEmptyHandlerTypeEl.value.value;
+  assignEmptyUserIdsEl.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:AssignEmptyUserIds`,
+    )?.[0] ||
+    bpmnInstances().moddle.create(`${prefix}:AssignEmptyUserIds`, {
+      value: '',
+    });
+  assignEmptyUserIds.value = assignEmptyUserIdsEl.value.value
+    ?.split(',')
+    .map((item: string) => {
+      // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+      const num = Number(item);
+      return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER
+        ? item
+        : num;
+    });
+
+  // 操作按钮
+  buttonsSetting.value = elExtensionElements.value.values?.filter(
+    (ex: any) => ex.$type === `${prefix}:ButtonsSetting`,
+  );
+  if (buttonsSetting.value.length === 0) {
+    DEFAULT_BUTTON_SETTING.forEach((item) => {
+      buttonsSetting.value.push(
+        bpmnInstances().moddle.create(`${prefix}:ButtonsSetting`, {
+          'flowable:id': item.id,
+          'flowable:displayName': item.displayName,
+          'flowable:enable': item.enable,
+        }),
+      );
+    });
+  }
+
+  // 字段权限
+  if (formType.value === BpmModelFormType.NORMAL) {
+    const fieldsPermissionList = elExtensionElements.value.values?.filter(
+      (ex: any) => ex.$type === `${prefix}:FieldsPermission`,
+    );
+    fieldsPermissionEl.value = [];
+    getNodeConfigFormFields();
+    fieldsPermissionConfig.value.forEach((element: any) => {
+      element.permission =
+        fieldsPermissionList?.find((obj: any) => obj.field === element.field)
+          ?.permission ?? '1';
+      fieldsPermissionEl.value.push(
+        bpmnInstances().moddle.create(`${prefix}:FieldsPermission`, element),
+      );
+    });
+  }
+
+  // 是否需要签名
+  signEnable.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:SignEnable`,
+    ) ||
+    bpmnInstances().moddle.create(`${prefix}:SignEnable`, { value: false });
+
+  // 审批意见
+  reasonRequire.value =
+    elExtensionElements.value.values?.find(
+      (ex: any) => ex.$type === `${prefix}:ReasonRequire`,
+    ) ||
+    bpmnInstances().moddle.create(`${prefix}:ReasonRequire`, { value: false });
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value =
+    elExtensionElements.value.values?.filter(
+      (ex: any) =>
+        ex.$type !== `${prefix}:AssignStartUserHandlerType` &&
+        ex.$type !== `${prefix}:RejectHandlerType` &&
+        ex.$type !== `${prefix}:RejectReturnTaskId` &&
+        ex.$type !== `${prefix}:AssignEmptyHandlerType` &&
+        ex.$type !== `${prefix}:AssignEmptyUserIds` &&
+        ex.$type !== `${prefix}:ButtonsSetting` &&
+        ex.$type !== `${prefix}:FieldsPermission` &&
+        ex.$type !== `${prefix}:ApproveType` &&
+        ex.$type !== `${prefix}:SignEnable` &&
+        ex.$type !== `${prefix}:ReasonRequire`,
+    ) ?? [];
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions();
+};
+
+const updateAssignStartUserHandlerType = () => {
+  assignStartUserHandlerTypeEl.value.value = assignStartUserHandlerType.value;
+
+  updateElementExtensions();
+};
+
+const updateRejectHandlerType = () => {
+  rejectHandlerTypeEl.value.value = rejectHandlerType.value;
+
+  returnNodeId.value = returnTaskList.value[0]?.id;
+  returnNodeIdEl.value.value = returnNodeId.value;
+
+  updateElementExtensions();
+};
+
+const updateReturnNodeId = () => {
+  returnNodeIdEl.value.value = returnNodeId.value;
+
+  updateElementExtensions();
+};
+
+const updateAssignEmptyHandlerType = () => {
+  assignEmptyHandlerTypeEl.value.value = assignEmptyHandlerType.value;
+
+  updateElementExtensions();
+};
+
+const updateAssignEmptyUserIds = () => {
+  assignEmptyUserIdsEl.value.value = assignEmptyUserIds.value.toString();
+
+  updateElementExtensions();
+};
+
+const updateElementExtensions = () => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      assignStartUserHandlerTypeEl.value,
+      rejectHandlerTypeEl.value,
+      returnNodeIdEl.value,
+      assignEmptyHandlerTypeEl.value,
+      assignEmptyUserIdsEl.value,
+      approveType.value,
+      ...buttonsSetting.value,
+      ...fieldsPermissionEl.value,
+      signEnable.value,
+      reasonRequire.value,
+    ],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+};
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        resetCustomConfigList();
+      });
+  },
+  { immediate: true },
+);
+
+function findAllPredecessorsExcludingStart(elementId: string, modeler: any) {
+  const elementRegistry = modeler.get('elementRegistry');
+  const allConnections = elementRegistry.filter(
+    (element: any) => element.type === 'bpmn:SequenceFlow',
+  );
+  const predecessors = new Set(); // 使用 Set 来避免重复节点
+  const visited = new Set(); // 用于记录已访问的节点
+
+  // 检查是否是开始事件节点
+  function isStartEvent(element: any) {
+    return element.type === 'bpmn:StartEvent';
+  }
+
+  function findPredecessorsRecursively(element: any) {
+    // 如果该节点已经访问过，直接返回，避免循环
+    if (visited.has(element)) {
+      return;
+    }
+
+    // 标记当前节点为已访问
+    visited.add(element);
+
+    // 获取与当前节点相连的所有连接
+    const incomingConnections = allConnections.filter(
+      (connection: any) => connection.target === element,
+    );
+
+    incomingConnections.forEach((connection: any) => {
+      const source = connection.source; // 获取前置节点
+
+      // 只添加不是开始事件的前置节点
+      if (!isStartEvent(source)) {
+        predecessors.add(source.businessObject);
+        // 递归查找前置节点
+        findPredecessorsRecursively(source);
+      }
+    });
+  }
+
+  const targetElement = elementRegistry.get(elementId);
+  if (targetElement) {
+    findPredecessorsRecursively(targetElement);
+  }
+
+  return [...predecessors]; // 返回前置节点数组
+}
+
+/** 批量更新权限 */
+const updatePermission = (type: string) => {
+  fieldsPermissionEl.value.forEach((field: any) => {
+    if (type === 'READ') {
+      field.permission = FieldPermissionType.READ;
+    } else if (type === 'WRITE') {
+      field.permission = FieldPermissionType.WRITE;
+    } else {
+      field.permission = FieldPermissionType.NONE;
+    }
+  });
+};
+
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
+onMounted(async () => {
+  // 获得用户列表
+  userOptions.value = await getSimpleUserList();
+});
+</script>
+
+<template>
+  <div>
+    <ElDivider content-position="left">审批类型</ElDivider>
+    <ElFormItem prop="approveType" label="审批类型">
+      <ElRadioGroup v-model="approveType.value">
+        <ElRadio
+          v-for="(item, index) in APPROVE_TYPE"
+          :key="index"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </ElRadio>
+      </ElRadioGroup>
+    </ElFormItem>
+
+    <ElDivider content-position="left">审批人拒绝时</ElDivider>
+    <ElFormItem prop="rejectHandlerType" label="处理方式">
+      <ElRadioGroup
+        v-model="rejectHandlerType"
+        :disabled="returnTaskList.length === 0"
+        @change="updateRejectHandlerType"
+      >
+        <ElRadio
+          v-for="(item, index) in REJECT_HANDLER_TYPES"
+          :key="index"
+          :value="item.value"
+        >
+          {{ item.label }}
+        </ElRadio>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
+      v-if="rejectHandlerType === RejectHandlerType.RETURN_USER_TASK"
+      prop="returnNodeId"
+      label="驳回节点"
+    >
+      <ElSelect
+        v-model="returnNodeId"
+        clearable
+        style="width: 100%"
+        @change="updateReturnNodeId"
+        placeholder="请选择驳回节点"
+      >
+        <ElOption
+          v-for="item in returnTaskList"
+          :key="item.id"
+          :value="item.id"
+          :label="item.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+
+    <ElDivider content-position="left">审批人为空时</ElDivider>
+    <ElFormItem prop="assignEmptyHandlerType">
+      <ElRadioGroup
+        v-model="assignEmptyHandlerType"
+        @change="updateAssignEmptyHandlerType"
+      >
+        <div class="flex flex-col gap-2">
+          <div v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES" :key="index">
+            <ElRadio :key="item.value" :value="item.value">
+              {{ item.label }}
+            </ElRadio>
+          </div>
+        </div>
+      </ElRadioGroup>
+    </ElFormItem>
+    <ElFormItem
+      v-if="assignEmptyHandlerType === AssignEmptyHandlerType.ASSIGN_USER"
+      label="指定用户"
+      prop="assignEmptyHandlerUserIds"
+    >
+      <ElSelect
+        v-model="assignEmptyUserIds"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateAssignEmptyUserIds"
+      >
+        <ElOption
+          v-for="item in userOptions"
+          :key="item.id"
+          :value="item.id!"
+          :label="item.nickname"
+        />
+      </ElSelect>
+    </ElFormItem>
+
+    <ElDivider content-position="left">审批人与提交人为同一人时</ElDivider>
+    <ElRadioGroup
+      v-model="assignStartUserHandlerType"
+      @change="updateAssignStartUserHandlerType"
+    >
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES"
+          :key="index"
+        >
+          <ElRadio :key="item.value" :value="item.value">
+            {{ item.label }}
+          </ElRadio>
+        </div>
+      </div>
+    </ElRadioGroup>
+
+    <ElDivider content-position="left">操作按钮</ElDivider>
+    <div 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="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="flex w-40 items-center truncate text-left">
+          <ElInput
+            v-if="btnDisplayNameEdit[index]"
+            :ref="(el) => setInputRef(el, index)"
+            @blur="btnDisplayNameBlurEvent(index)"
+            @keyup.enter="btnDisplayNameBlurEvent(index)"
+            type="text"
+            v-model="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"
+          />
+          <ElButton v-else @click="changeBtnDisplayName(index)">
+            <div class="flex items-center">
+              {{ item.displayName }}
+              <IconifyIcon icon="lucide:edit" class="ml-2" />
+            </div>
+          </ElButton>
+        </div>
+        <div class="flex w-20 items-center justify-center">
+          <ElSwitch v-model="item.enable" @change="updateElementExtensions" />
+        </div>
+      </div>
+    </div>
+
+    <ElDivider content-position="left">字段权限</ElDivider>
+    <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="inline-block w-24 cursor-pointer text-center hover:text-blue-500"
+            @click="updatePermission('READ')"
+          >
+            只读
+          </span>
+          <span
+            class="inline-block w-24 cursor-pointer text-center hover:text-blue-500"
+            @click="updatePermission('WRITE')"
+          >
+            可编辑
+          </span>
+          <span
+            class="inline-block w-24 cursor-pointer text-center hover:text-blue-500"
+            @click="updatePermission('NONE')"
+          >
+            隐藏
+          </span>
+        </div>
+      </div>
+
+      <!-- 字段权限行 -->
+      <div
+        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="w-28 truncate text-left" :title="item.title">
+          {{ item.title }}
+        </div>
+        <ElRadioGroup v-model="item.permission" class="ml-7 w-full">
+          <div class="flex flex-1 items-center justify-center">
+            <ElRadio
+              :value="FieldPermissionType.READ"
+              size="large"
+              @change="updateElementExtensions"
+            >
+              <span></span>
+            </ElRadio>
+          </div>
+          <div class="flex flex-1 items-center justify-center">
+            <ElRadio
+              :value="FieldPermissionType.WRITE"
+              size="large"
+              @change="updateElementExtensions"
+            >
+              <span></span>
+            </ElRadio>
+          </div>
+          <div class="flex flex-1 items-center justify-center">
+            <ElRadio
+              :value="FieldPermissionType.NONE"
+              size="large"
+              @change="updateElementExtensions"
+            >
+              <span></span>
+            </ElRadio>
+          </div>
+        </ElRadioGroup>
+      </div>
+    </div>
+
+    <ElDivider content-position="left">是否需要签名</ElDivider>
+    <ElFormItem prop="signEnable">
+      <ElSwitch
+        v-model="signEnable.value"
+        active-text="是"
+        inactive-text="否"
+        @change="updateElementExtensions"
+      />
+    </ElFormItem>
+
+    <ElDivider content-position="left">审批意见</ElDivider>
+    <ElFormItem prop="reasonRequire">
+      <ElSwitch
+        v-model="reasonRequire.value"
+        active-text="必填"
+        inactive-text="非必填"
+        @change="updateElementExtensions"
+      />
+    </ElFormItem>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/data.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/data.ts
new file mode 100644
index 000000000..cd8830003
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/custom-config/data.ts
@@ -0,0 +1,13 @@
+import BoundaryEventTimer from './components/BoundaryEventTimer.vue';
+import UserTaskCustomConfig from './components/UserTaskCustomConfig.vue';
+
+export const CustomConfigMap = {
+  UserTask: {
+    name: '用户任务',
+    component: UserTaskCustomConfig,
+  },
+  BoundaryEventTimerEventDefinition: {
+    name: '定时边界事件(非中断)',
+    component: BoundaryEventTimer,
+  },
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
new file mode 100644
index 000000000..b922db0e7
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/flow-condition/FlowCondition.vue
@@ -0,0 +1,234 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+defineOptions({ name: 'FlowCondition' });
+
+const props = defineProps({
+  businessObject: {
+    type: Object,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+
+const flowConditionForm = ref<any>({});
+const bpmnElement = ref();
+const bpmnElementSource = ref();
+const bpmnElementSourceRef = ref();
+const flowConditionRef = ref();
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetFlowCondition = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+  bpmnElementSource.value = bpmnElement.value.source;
+  bpmnElementSourceRef.value = bpmnElement.value.businessObject.sourceRef;
+  // 初始化默认type为default
+  flowConditionForm.value = { type: 'default' };
+  if (
+    bpmnElementSourceRef.value &&
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === bpmnElement.value.id
+  ) {
+    flowConditionForm.value = { type: 'default' };
+  } else if (bpmnElement.value.businessObject.conditionExpression) {
+    // 带条件
+    const conditionExpression =
+      bpmnElement.value.businessObject.conditionExpression;
+    flowConditionForm.value = { ...conditionExpression, type: 'condition' };
+    // resource 可直接标识 是否是外部资源脚本
+    if (flowConditionForm.value.resource) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "externalScript");
+      flowConditionForm.value.conditionType = 'script';
+      flowConditionForm.value.scriptType = 'externalScript';
+      return;
+    }
+    if (conditionExpression.language) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "inlineScript");
+      flowConditionForm.value.conditionType = 'script';
+      flowConditionForm.value.scriptType = 'inlineScript';
+
+      return;
+    }
+    // this.$set(this.flowConditionForm, "conditionType", "expression");
+    flowConditionForm.value.conditionType = 'expression';
+  } else {
+    // 普通
+    flowConditionForm.value = { type: 'normal' };
+  }
+};
+
+const updateFlowType = (flowType: any) => {
+  // 正常条件类
+  if (flowType === 'condition') {
+    flowConditionRef.value = bpmnInstances().moddle.create(
+      'bpmn:FormalExpression',
+    );
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      conditionExpression: flowConditionRef.value,
+    });
+    return;
+  }
+  // 默认路径
+  if (flowType === 'default') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      conditionExpression: null,
+    });
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
+      default: toRaw(bpmnElement.value),
+    });
+    return;
+  }
+  // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
+  if (
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === bpmnElement.value.id
+  ) {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElementSource.value), {
+      default: null,
+    });
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    conditionExpression: null,
+  });
+};
+
+const updateFlowCondition = () => {
+  const { conditionType, scriptType, body, resource, language } =
+    flowConditionForm.value;
+  let condition;
+  if (conditionType === 'expression') {
+    condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+      body,
+    });
+  } else {
+    if (scriptType === 'inlineScript') {
+      condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+        body,
+        language,
+      });
+      // this.$set(this.flowConditionForm, "resource", "");
+      flowConditionForm.value.resource = '';
+    } else {
+      // this.$set(this.flowConditionForm, "body", "");
+      flowConditionForm.value.body = '';
+      condition = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+        resource,
+        language,
+      });
+    }
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    conditionExpression: condition,
+  });
+};
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+  bpmnElementSource.value = null;
+  bpmnElementSourceRef.value = null;
+});
+
+watch(
+  () => props.businessObject,
+  (_) => {
+    // console.log(val, 'val');
+    nextTick(() => {
+      resetFlowCondition();
+    });
+  },
+  {
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <ElForm :model="flowConditionForm" label-width="80px">
+      <ElFormItem label="流转类型">
+        <ElSelect v-model="flowConditionForm.type" @change="updateFlowType">
+          <ElOption value="normal" label="普通流转路径" />
+          <ElOption value="default" label="默认流转路径" />
+          <ElOption value="condition" label="条件流转路径" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="条件格式"
+        v-if="flowConditionForm.type === 'condition'"
+        key="condition"
+      >
+        <ElSelect v-model="flowConditionForm.conditionType">
+          <ElOption value="expression" label="表达式" />
+          <ElOption value="script" label="脚本" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="表达式"
+        v-if="
+          flowConditionForm.conditionType &&
+          flowConditionForm.conditionType === 'expression'
+        "
+        key="express"
+      >
+        <ElInput
+          type="textarea"
+          v-model="flowConditionForm.body"
+          :autosize="{ minRows: 2, maxRows: 6 }"
+          clearable
+          @change="updateFlowCondition"
+        />
+      </ElFormItem>
+      <template
+        v-if="
+          flowConditionForm.conditionType &&
+          flowConditionForm.conditionType === 'script'
+        "
+      >
+        <ElFormItem label="脚本语言" key="language">
+          <ElInput
+            v-model="flowConditionForm.language"
+            clearable
+            @change="updateFlowCondition"
+          />
+        </ElFormItem>
+        <ElFormItem label="脚本类型" key="scriptType">
+          <ElSelect v-model="flowConditionForm.scriptType">
+            <ElOption value="inlineScript" label="内联脚本" />
+            <ElOption value="externalScript" label="外部脚本" />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          label="脚本"
+          v-if="flowConditionForm.scriptType === 'inlineScript'"
+          key="body"
+        >
+          <ElInput
+            type="textarea"
+            v-model="flowConditionForm.body"
+            :autosize="{ minRows: 2, maxRows: 6 }"
+            clearable
+            @change="updateFlowCondition"
+          />
+        </ElFormItem>
+        <ElFormItem
+          label="资源地址"
+          v-if="flowConditionForm.scriptType === 'externalScript'"
+          key="resource"
+        >
+          <ElInput
+            v-model="flowConditionForm.resource"
+            clearable
+            @change="updateFlowCondition"
+          />
+        </ElFormItem>
+      </template>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
new file mode 100644
index 000000000..3c8b781ef
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
@@ -0,0 +1,337 @@
+<!-- eslint-disable no-unused-vars -->
+<script lang="ts" setup>
+import { computed, inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+
+import { cloneDeep } from '@vben/utils';
+
+import { ElForm, ElFormItem, ElOption, ElSelect } from 'element-plus';
+
+import { getFormSimpleList } from '#/api/bpm/form';
+
+defineOptions({ name: 'ElementForm' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+
+const formKey = ref<number | string | undefined>(undefined);
+const businessKey = ref('');
+const optionModelTitle = ref('');
+const fieldList = ref<any[]>([]);
+const formFieldForm = ref<any>({});
+const fieldType = ref({
+  long: '长整型',
+  string: '字符串',
+  boolean: '布尔类',
+  date: '日期类',
+  enum: '枚举类',
+  custom: '自定义类型',
+});
+const formFieldIndex = ref(-1); // 编辑中的字段， -1 为新增
+const formFieldOptionIndex = ref(-1); // 编辑中的字段配置项， -1 为新增
+const fieldModelVisible = ref(false);
+const fieldOptionModelVisible = ref(false);
+const fieldOptionForm = ref<any>({}); // 当前激活的字段配置项数据
+const fieldOptionType = ref(''); // 当前激活的字段配置项弹窗 类型
+const fieldEnumList = ref<any[]>([]); // 枚举值列表
+const fieldConstraintsList = ref<any[]>([]); // 约束条件列表
+const fieldPropertiesList = ref<any[]>([]); // 绑定属性列表
+const bpmnELement = ref();
+const elExtensionElements = ref();
+const formData = ref();
+const otherExtensions = ref();
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+const resetFormList = () => {
+  bpmnELement.value = bpmnInstances().bpmnElement;
+  formKey.value = bpmnELement.value.businessObject.formKey;
+  // if (formKey.value?.length > 0) {
+  //   formKey.value = parseInt(formKey.value)
+  // }
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnELement.value.businessObject.get('extensionElements') ||
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
+  // 获取元素表单配置 或者 创建新的表单配置
+  formData.value =
+    elExtensionElements.value.values.find(
+      (ex: any) => ex.$type === `${prefix}:FormData`,
+    ) || bpmnInstances().moddle.create(`${prefix}:FormData`, { fields: [] });
+
+  // 业务标识 businessKey， 绑定在 formData 中
+  businessKey.value = formData.value.businessKey;
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value = elExtensionElements.value.values.filter(
+    (ex: any) => ex.$type !== `${prefix}:FormData`,
+  );
+
+  // 复制原始值，填充表格
+  fieldList.value = cloneDeep(formData.value.fields || []);
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions();
+};
+const updateElementFormKey = () => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    formKey: formKey.value,
+  });
+};
+const _updateElementBusinessKey = () => {
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnELement.value),
+    formData.value,
+    {
+      businessKey: businessKey.value,
+    },
+  );
+};
+// 根据类型调整字段type
+const _changeFieldTypeType = (type: any) => {
+  formFieldForm.value.type = type === 'custom' ? '' : type;
+};
+
+// 打开字段详情侧边栏
+const _openFieldForm = (field: any, index: any) => {
+  formFieldIndex.value = index;
+  if (index === -1) {
+    formFieldForm.value = {};
+    // 初始化枚举值列表
+    fieldEnumList.value = [];
+    // 初始化约束条件列表
+    fieldConstraintsList.value = [];
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = [];
+  } else {
+    const FieldObject = formData.value.fields[index];
+    formFieldForm.value = cloneDeep(field);
+    // 设置自定义类型
+    // this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
+    formFieldForm.value.typeType = fieldType.value[
+      field.type as keyof typeof fieldType.value
+    ]
+      ? field.type
+      : 'custom';
+    // 初始化枚举值列表
+    field.type === 'enum' &&
+      (fieldEnumList.value = cloneDeep(FieldObject?.values || []));
+    // 初始化约束条件列表
+    fieldConstraintsList.value = cloneDeep(
+      FieldObject?.validation?.constraints || [],
+    );
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = cloneDeep(
+      FieldObject?.properties?.values || [],
+    );
+  }
+  fieldModelVisible.value = true;
+};
+// 打开字段 某个 配置项 弹窗
+const _openFieldOptionForm = (option: any, index: any, type: any) => {
+  fieldOptionModelVisible.value = true;
+  fieldOptionType.value = type;
+  formFieldOptionIndex.value = index;
+  if (type === 'property') {
+    fieldOptionForm.value = option ? cloneDeep(option) : {};
+    return (optionModelTitle.value = '属性配置');
+  }
+  if (type === 'enum') {
+    fieldOptionForm.value = option ? cloneDeep(option) : {};
+    return (optionModelTitle.value = '枚举值配置');
+  }
+  fieldOptionForm.value = option ? cloneDeep(option) : {};
+  return (optionModelTitle.value = '约束条件配置');
+};
+
+// 保存字段 某个 配置项
+const _saveFieldOption = () => {
+  if (formFieldOptionIndex.value === -1) {
+    if (fieldOptionType.value === 'property') {
+      fieldPropertiesList.value.push(fieldOptionForm.value);
+    }
+    if (fieldOptionType.value === 'constraint') {
+      fieldConstraintsList.value.push(fieldOptionForm.value);
+    }
+    if (fieldOptionType.value === 'enum') {
+      fieldEnumList.value.push(fieldOptionForm.value);
+    }
+  } else {
+    fieldOptionType.value === 'property' &&
+      fieldPropertiesList.value.splice(
+        formFieldOptionIndex.value,
+        1,
+        fieldOptionForm.value,
+      );
+    fieldOptionType.value === 'constraint' &&
+      fieldConstraintsList.value.splice(
+        formFieldOptionIndex.value,
+        1,
+        fieldOptionForm.value,
+      );
+    fieldOptionType.value === 'enum' &&
+      fieldEnumList.value.splice(
+        formFieldOptionIndex.value,
+        1,
+        fieldOptionForm.value,
+      );
+  }
+  fieldOptionModelVisible.value = false;
+  fieldOptionForm.value = {};
+};
+// 保存字段配置
+const _saveField = () => {
+  const { id, type, label, defaultValue, datePattern } = formFieldForm.value;
+  const Field = bpmnInstances().moddle.create(`${prefix}:FormField`, {
+    id,
+    type,
+    label,
+  });
+  defaultValue && (Field.defaultValue = defaultValue);
+  datePattern && (Field.datePattern = datePattern);
+  // 构建属性
+  if (fieldPropertiesList.value && fieldPropertiesList.value.length > 0) {
+    const fieldPropertyList = fieldPropertiesList.value.map((fp: any) => {
+      return bpmnInstances().moddle.create(`${prefix}:Property`, {
+        id: fp.id,
+        value: fp.value,
+      });
+    });
+    Field.properties = bpmnInstances().moddle.create(`${prefix}:Properties`, {
+      values: fieldPropertyList,
+    });
+  }
+  // 构建校验规则
+  if (fieldConstraintsList.value && fieldConstraintsList.value.length > 0) {
+    const fieldConstraintList = fieldConstraintsList.value.map((fc: any) => {
+      return bpmnInstances().moddle.create(`${prefix}:Constraint`, {
+        name: fc.name,
+        config: fc.config,
+      });
+    });
+    Field.validation = bpmnInstances().moddle.create(`${prefix}:Validation`, {
+      constraints: fieldConstraintList,
+    });
+  }
+  // 构建枚举值
+  if (fieldEnumList.value && fieldEnumList.value.length > 0) {
+    Field.values = fieldEnumList.value.map((fe: any) => {
+      return bpmnInstances().moddle.create(`${prefix}:Value`, {
+        name: fe.name,
+        id: fe.id,
+      });
+    });
+  }
+  // 更新数组 与 表单配置实例
+  if (formFieldIndex.value === -1) {
+    fieldList.value.push(formFieldForm.value);
+    formData.value.fields.push(Field);
+  } else {
+    fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value);
+    formData.value.fields.splice(formFieldIndex.value, 1, Field);
+  }
+  updateElementExtensions();
+  fieldModelVisible.value = false;
+};
+
+// 移除某个 字段的 配置项
+const _removeFieldOptionItem = (_option: any, index: any, type: any) => {
+  // console.log(option, 'option')
+  if (type === 'property') {
+    fieldPropertiesList.value.splice(index, 1);
+    return;
+  }
+  if (type === 'enum') {
+    fieldEnumList.value.splice(index, 1);
+    return;
+  }
+  fieldConstraintsList.value.splice(index, 1);
+};
+// 移除 字段
+const _removeField = (field: any, index: any) => {
+  console.warn(field, 'field');
+  fieldList.value.splice(index, 1);
+  formData.value.fields.splice(index, 1);
+  updateElementExtensions();
+};
+
+const updateElementExtensions = () => {
+  // 更新回扩展元素
+  const newElExtensionElements = bpmnInstances().moddle.create(
+    `bpmn:ExtensionElements`,
+    {
+      values: [...otherExtensions.value, formData.value],
+    },
+  );
+  // 更新到元素上
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnELement.value), {
+    extensionElements: newElExtensionElements,
+  });
+};
+
+const formList = ref<any[]>([]); // 流程表单的下拉框的数据
+const formOptions = computed(() => {
+  return formList.value.map((form: any) => ({
+    value: form.id,
+    label: form.name,
+  }));
+});
+
+onMounted(async () => {
+  formList.value = await getFormSimpleList();
+  formKey.value = formKey.value
+    ? Number.parseInt(formKey.value as string)
+    : undefined;
+});
+
+watch(
+  () => props.id,
+  (val: any) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        resetFormList();
+      });
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <ElForm label-width="80px">
+      <ElFormItem label="流程表单">
+        <ElSelect v-model="formKey" clearable @change="updateElementFormKey">
+          <ElOption
+            v-for="item in formOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="业务标识">
+        <ElSelect
+          v-model="businessKey"
+          @change="_updateElementBusinessKey"
+          clearable
+        >
+          <ElOption
+            v-for="i in fieldList"
+            :key="i.id"
+            :value="i.id"
+            :label="i.label"
+          />
+          <ElOption value="" label="无" />
+        </ElSelect>
+      </ElFormItem>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/index.js
new file mode 100644
index 000000000..1688cf7d1
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/index.js
@@ -0,0 +1,7 @@
+import MyPropertiesPanel from './PropertiesPanel.vue';
+
+MyPropertiesPanel.install = function (Vue) {
+  Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
+};
+
+export default MyPropertiesPanel;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
new file mode 100644
index 000000000..e4cb2fe0b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue
@@ -0,0 +1,573 @@
+<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 {
+  ElButton,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ProcessListenerSelectModal } from '#/views/bpm/processListener/components';
+
+import { createListenerObject, updateElementExtensions } from '../../utils';
+import ListenerFieldModal from './ListenerFieldModal.vue';
+import {
+  fieldType,
+  initListenerForm,
+  initListenerForm2,
+  initListenerType,
+  listenerType,
+} from './utilSelf';
+
+defineOptions({ name: 'ElementListeners' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+const elementListenersList = ref<any[]>([]); // 监听器列表
+const listenerForm = ref<any>({}); // 监听器详情表单
+const fieldsListOfListener = ref<any[]>([]);
+const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新增
+const listenerTypeObject = ref(listenerType);
+const fieldTypeObject = ref(fieldType);
+const otherExtensionList = ref();
+const bpmnElementListeners = ref();
+const listenerFormRef = ref();
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetListenersList = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
+  otherExtensionList.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
+    ) ?? []; // 保留非监听器类型的扩展属性，避免移除监听器时清空其他配置（如审批人等）。相关案例：https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues/ICMSYC
+  bpmnElementListeners.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type === `${prefix}:ExecutionListener`,
+    ) ?? [];
+  elementListenersList.value = bpmnElementListeners.value.map((listener: any) =>
+    initListenerType(listener),
+  );
+};
+// 打开 监听器详情 侧边栏
+const openListenerForm = (listener: any, index: number) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener);
+    editingListenerIndex.value = index;
+  } else {
+    listenerForm.value = {};
+    editingListenerIndex.value = -1;
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field: any) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression',
+    }));
+  } else {
+    fieldsListOfListener.value = [];
+    listenerForm.value.fields = [];
+  }
+  listenerDrawerApi.open();
+  nextTick(() => {
+    if (listenerFormRef.value) {
+      listenerFormRef.value.clearValidate();
+    }
+  });
+};
+
+// 打开监听器字段编辑弹窗
+const openListenerFieldForm = (field: any, index: number) => {
+  const data = field ? cloneDeep(field) : {};
+  editingListenerFieldIndex.value = field ? index : -1;
+  fieldModalApi.setData(data).open();
+};
+// 保存监听器注入字段
+const saveListenerFiled = async (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);
+  }
+};
+// 移除监听器字段
+const removeListenerField = (index: number) => {
+  confirm({
+    title: '提示',
+    content: '确认移除该字段吗？',
+  }).then(() => {
+    fieldsListOfListener.value.splice(index, 1);
+    listenerForm.value.fields.splice(index, 1);
+  });
+};
+// 移除监听器
+const removeListener = (index: number) => {
+  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 () => {
+  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);
+  } else {
+    bpmnElementListeners.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerObject,
+    );
+    elementListenersList.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerForm.value,
+    );
+  }
+  otherExtensionList.value =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
+    ) ?? [];
+  updateElementExtensions(bpmnElement, [
+    ...otherExtensionList.value,
+    ...bpmnElementListeners.value,
+  ]);
+  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 openProcessListenerDialog = async () => {
+  processListenerSelectModalApi.setData({ type: 'execution' }).open();
+};
+const selectProcessListener = (listener: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+  const listenerForm = initListenerForm2(listener);
+  const listenerObject = createListenerObject(listenerForm, false, prefix);
+  bpmnElementListeners.value.push(listenerObject);
+  elementListenersList.value.push(listenerForm);
+
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:ExecutionListener`,
+    ) ?? [];
+  updateElementExtensions(bpmnElement, [
+    ...otherExtensionList.value,
+    ...bpmnElementListeners.value,
+  ]);
+};
+
+watch(
+  elementListenersList,
+  (val) => {
+    listenerGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  fieldsListOfListener,
+  (val) => {
+    fieldsGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.id,
+  (val: string) => {
+    if (val && val.length > 0) {
+      nextTick(() => {
+        resetListenersList();
+      });
+    }
+  },
+  { immediate: true },
+);
+</script>
+<template>
+  <div class="-mx-2 mb-2">
+    <ListenerGrid :data="elementListenersList">
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openListenerForm(row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeListener(rowIndex)"
+        >
+          移除
+        </ElButton>
+      </template>
+    </ListenerGrid>
+    <div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        type="primary"
+        size="small"
+        @click="openListenerForm(null, -1)"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        添加监听器
+      </ElButton>
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        size="small"
+        @click="openProcessListenerDialog"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:select" />
+        </template>
+        选择监听器
+      </ElButton>
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <ListenerDrawer>
+      <ElForm :model="listenerForm" ref="listenerFormRef" label-width="90px">
+        <ElFormItem
+          label="事件类型"
+          prop="event"
+          :rules="[
+            {
+              required: true,
+              message: '请选择事件类型',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElSelect v-model="listenerForm.event">
+            <ElOption value="start" label="start" />
+            <ElOption value="end" label="end" />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          label="监听器类型"
+          prop="listenerType"
+          :rules="[
+            {
+              required: true,
+              message: '请选择监听器类型',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElSelect v-model="listenerForm.listenerType">
+            <ElOption
+              v-for="i in Object.keys(listenerTypeObject)"
+              :key="i"
+              :value="i"
+              :label="listenerTypeObject[i as keyof typeof listenerType]"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <ElFormItem
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="[
+            {
+              required: true,
+              message: '请填写Java类',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="listenerForm.class" clearable />
+        </ElFormItem>
+        <ElFormItem
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="[
+            {
+              required: true,
+              message: '请填写表达式',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="listenerForm.expression" clearable />
+        </ElFormItem>
+        <ElFormItem
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="[
+            {
+              required: true,
+              message: '请填写代理表达式',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="listenerForm.delegateExpression" clearable />
+        </ElFormItem>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <ElFormItem
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="[
+              {
+                required: true,
+                trigger: ['blur', 'change'],
+                message: '请填写脚本格式',
+              },
+            ]"
+          >
+            <ElInput v-model="listenerForm.scriptFormat" clearable />
+          </ElFormItem>
+          <ElFormItem
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="[
+              {
+                required: true,
+                trigger: ['blur', 'change'],
+                message: '请选择脚本类型',
+              },
+            ]"
+          >
+            <ElSelect v-model="listenerForm.scriptType">
+              <ElOption value="inlineScript" label="内联脚本" />
+              <ElOption value="externalScript" label="外部脚本" />
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="[
+              {
+                required: true,
+                trigger: ['blur', 'change'],
+                message: '请填写脚本内容',
+              },
+            ]"
+          >
+            <ElInput v-model="listenerForm.value" clearable />
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="[
+              {
+                required: true,
+                trigger: ['blur', 'change'],
+                message: '请填写资源地址',
+              },
+            ]"
+          >
+            <ElInput v-model="listenerForm.resource" clearable />
+          </ElFormItem>
+        </template>
+      </ElForm>
+      <ElDivider />
+      <div class="mb-2 flex justify-between">
+        <span class="flex items-center">
+          <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+          注入字段
+        </span>
+        <ElButton
+          class="flex items-center"
+          size="small"
+          type="primary"
+          link
+          @click="openListenerFieldForm(null, -1)"
+        >
+          <template #icon>
+            <IconifyIcon icon="ep:plus" />
+          </template>
+          添加字段
+        </ElButton>
+      </div>
+      <FieldsGrid :data="fieldsListOfListener">
+        <template #action="{ row, rowIndex }">
+          <ElButton
+            size="small"
+            type="primary"
+            link
+            @click="openListenerFieldForm(row, rowIndex)"
+          >
+            编辑
+          </ElButton>
+          <ElDivider direction="vertical" />
+          <ElButton
+            size="small"
+            type="danger"
+            link
+            @click="removeListenerField(rowIndex)"
+          >
+            移除
+          </ElButton>
+        </template>
+      </FieldsGrid>
+    </ListenerDrawer>
+
+    <!-- 注入字段 编辑/创建 部分 -->
+    <FieldModal @confirm="saveListenerFiled" />
+  </div>
+
+  <!-- 选择弹窗 -->
+  <ProcessListenerSelectModalComp @select="selectProcessListener" />
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
new file mode 100644
index 000000000..5d1c57a3a
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/ListenerFieldModal.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+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 });
+      await modalApi.close();
+    } catch {
+      // validate failed
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="字段配置" class="w-3/5">
+    <ElForm ref="formRef" :model="form" label-width="80px">
+      <ElFormItem
+        label="字段名称："
+        prop="name"
+        :rules="[
+          {
+            required: true,
+            message: '请填写字段名称',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <ElInput v-model="form.name" clearable />
+      </ElFormItem>
+      <ElFormItem
+        label="字段类型："
+        prop="fieldType"
+        :rules="[
+          {
+            required: true,
+            message: '请选择字段类型',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <ElSelect v-model="form.fieldType">
+          <ElOption
+            v-for="i in Object.keys(fieldTypeObject)"
+            :key="i"
+            :value="i"
+            :label="fieldTypeObject[i as keyof typeof fieldType]"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        v-if="form.fieldType === 'string'"
+        label="字段值："
+        prop="string"
+        key="field-string"
+        :rules="[
+          {
+            required: true,
+            message: '请填写字段值',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <ElInput v-model="form.string" clearable />
+      </ElFormItem>
+      <ElFormItem
+        v-if="form.fieldType === 'expression'"
+        label="表达式："
+        prop="expression"
+        key="field-expression"
+        :rules="[
+          {
+            required: true,
+            message: '请填写表达式',
+            trigger: ['blur', 'change'],
+          },
+        ]"
+      >
+        <ElInput v-model="form.expression" clearable />
+      </ElFormItem>
+    </ElForm>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
new file mode 100644
index 000000000..af7a1c6e4
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue
@@ -0,0 +1,552 @@
+<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 {
+  ElButton,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ProcessListenerSelectModal } from '#/views/bpm/processListener/components';
+
+import { createListenerObject, updateElementExtensions } from '../../utils';
+import ListenerFieldModal from './ListenerFieldModal.vue';
+import {
+  eventType,
+  fieldType,
+  initListenerForm,
+  initListenerForm2,
+  initListenerType,
+  listenerType,
+} from './utilSelf';
+
+defineOptions({ name: 'UserTaskListeners' });
+
+const props = defineProps<Props>();
+
+interface Props {
+  id?: string;
+  type?: string;
+}
+
+const prefix = inject<string>('prefix');
+
+const elementListenersList = ref<any[]>([]);
+const listenerEventTypeObject = ref(eventType);
+const listenerTypeObject = ref(listenerType);
+const listenerForm = ref<any>({});
+const fieldTypeObject = ref(fieldType);
+const fieldsListOfListener = ref<any[]>([]);
+const editingListenerIndex = ref(-1);
+const editingListenerFieldIndex = ref<any>(-1);
+const bpmnElementListeners = ref<any[]>([]);
+const otherExtensionList = ref<any[]>([]);
+const listenerFormRef = ref<any>({});
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetListenersList = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
+  otherExtensionList.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:TaskListener`,
+    ) ?? [];
+  bpmnElementListeners.value =
+    businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type === `${prefix}:TaskListener`,
+    ) ?? [];
+  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
+    initListenerType(listener),
+  );
+};
+
+const openListenerForm = (listener: any, index?: number) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener);
+    editingListenerIndex.value = index || -1;
+  } else {
+    listenerForm.value = {};
+    editingListenerIndex.value = -1;
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field: any) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression',
+    }));
+  } else {
+    fieldsListOfListener.value = [];
+    listenerForm.value.fields = [];
+  }
+  listenerDrawerApi.open();
+  nextTick(() => {
+    if (listenerFormRef.value) listenerFormRef.value.clearValidate();
+  });
+};
+
+const removeListener = (_: any, index: number) => {
+  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,
+    ]);
+  });
+};
+
+async function saveListenerConfig() {
+  try {
+    await listenerFormRef.value.validate();
+  } catch {
+    return;
+  }
+
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+  const listenerObject = createListenerObject(listenerForm.value, true, prefix);
+
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject);
+    elementListenersList.value.push(listenerForm.value);
+  } else {
+    bpmnElementListeners.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerObject,
+    );
+    elementListenersList.value.splice(
+      editingListenerIndex.value,
+      1,
+      listenerForm.value,
+    );
+  }
+  otherExtensionList.value =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:TaskListener`,
+    ) ?? [];
+  updateElementExtensions(bpmnElement, [
+    ...otherExtensionList.value,
+    ...bpmnElementListeners.value,
+  ]);
+  listenerDrawerApi.close();
+  listenerForm.value = {};
+}
+
+const openListenerFieldForm = (field: any, index?: number) => {
+  const data = field ? cloneDeep(field) : {};
+  editingListenerFieldIndex.value = field ? index : -1;
+  fieldModalApi.setData(data).open();
+};
+
+const [ListenerGrid, listenerGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      {
+        field: 'event',
+        title: '事件类型',
+        minWidth: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          (listenerEventTypeObject.value as Record<string, any>)[cellValue],
+      },
+      { field: 'id', title: '事件id', minWidth: 80, showOverflow: true },
+      {
+        field: 'listenerType',
+        title: '监听器类型',
+        minWidth: 80,
+        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,
+    },
+  },
+});
+
+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);
+  }
+}
+
+const removeListenerField = (_: any, index: number) => {
+  confirm({
+    title: '提示',
+    content: '确认移除该字段吗？',
+  }).then(() => {
+    fieldsListOfListener.value.splice(index, 1);
+    listenerForm.value.fields.splice(index, 1);
+  });
+};
+
+const openProcessListenerDialog = async () => {
+  processListenerSelectModalApi.setData({ type: 'task' }).open();
+};
+const selectProcessListener = (listener: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  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);
+
+  otherExtensionList.value =
+    bpmnElement.businessObject?.extensionElements?.values?.filter(
+      (ex: any) => ex.$type !== `${prefix}:TaskListener`,
+    ) ?? [];
+  updateElementExtensions(
+    bpmnElement,
+    otherExtensionList.value?.concat(bpmnElementListeners.value),
+  );
+};
+
+const [ListenerDrawer, listenerDrawerApi] = useVbenDrawer({
+  title: '任务监听器',
+  destroyOnClose: true,
+  onConfirm: saveListenerConfig,
+});
+
+const [FieldModal, fieldModalApi] = useVbenModal({
+  connectedComponent: ListenerFieldModal,
+});
+
+const [ProcessListenerSelectModalComp, processListenerSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessListenerSelectModal,
+    destroyOnClose: true,
+  });
+
+const [FieldsGrid, fieldsGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { type: 'seq', width: 50, title: '序号' },
+      { field: 'name', title: '字段名称', minWidth: 100 },
+      {
+        field: 'fieldType',
+        title: '字段类型',
+        width: 80,
+        formatter: ({ cellValue }: { cellValue: string }) =>
+          fieldTypeObject.value[cellValue as keyof typeof fieldType],
+      },
+      {
+        title: '字段值/表达式',
+        width: 100,
+        formatter: ({ row }: { row: any }) => row.string || row.expression,
+      },
+      {
+        title: '操作',
+        width: 120,
+        slots: { default: 'action' },
+        fixed: 'right',
+      },
+    ],
+    border: true,
+    showOverflow: true,
+    minHeight: 200,
+    toolbarConfig: {
+      enabled: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  },
+});
+
+watch(
+  elementListenersList,
+  (val) => {
+    listenerGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  fieldsListOfListener,
+  (val) => {
+    fieldsGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        resetListenersList();
+      });
+  },
+  { immediate: true },
+);
+</script>
+<template>
+  <div class="-mx-2 mb-2">
+    <ListenerGrid>
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openListenerForm(row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeListener(row, rowIndex)"
+        >
+          移除
+        </ElButton>
+      </template>
+    </ListenerGrid>
+    <div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        size="small"
+        type="primary"
+        @click="openListenerForm(null)"
+      >
+        <template #icon> <IconifyIcon icon="ep:plus" /></template>
+        添加监听器
+      </ElButton>
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        size="small"
+        @click="openProcessListenerDialog"
+      >
+        <template #icon> <IconifyIcon icon="ep:select" /></template>
+        选择监听器
+      </ElButton>
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <ListenerDrawer class="w-2/5">
+      <template #default>
+        <ElForm :model="listenerForm" ref="listenerFormRef" label-width="90px">
+          <ElFormItem
+            label="事件类型"
+            prop="event"
+            :rules="[{ required: true, message: '请选择事件类型' }]"
+          >
+            <ElSelect v-model="listenerForm.event">
+              <ElOption
+                v-for="i in Object.keys(listenerEventTypeObject)"
+                :key="i"
+                :value="i"
+                :label="listenerEventTypeObject[i as keyof typeof eventType]"
+              />
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            label="监听器ID"
+            prop="id"
+            :rules="[{ required: true, message: '请输入监听器ID' }]"
+          >
+            <ElInput v-model="listenerForm.id" clearable />
+          </ElFormItem>
+          <ElFormItem
+            label="监听器类型"
+            prop="listenerType"
+            :rules="[{ required: true, message: '请选择监听器类型' }]"
+          >
+            <ElSelect v-model="listenerForm.listenerType">
+              <ElOption
+                v-for="i in Object.keys(listenerTypeObject)"
+                :key="i"
+                :value="i"
+                :label="listenerTypeObject[i as keyof typeof listenerType]"
+              />
+            </ElSelect>
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.listenerType === 'classListener'"
+            label="Java类"
+            prop="class"
+            key="listener-class"
+            :rules="[{ required: true, message: '请输入Java类' }]"
+          >
+            <ElInput v-model="listenerForm.class" clearable />
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.listenerType === 'expressionListener'"
+            label="表达式"
+            prop="expression"
+            key="listener-expression"
+            :rules="[{ required: true, message: '请输入表达式' }]"
+          >
+            <ElInput v-model="listenerForm.expression" clearable />
+          </ElFormItem>
+          <ElFormItem
+            v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+            label="代理表达式"
+            prop="delegateExpression"
+            key="listener-delegate"
+            :rules="[{ required: true, message: '请输入代理表达式' }]"
+          >
+            <ElInput v-model="listenerForm.delegateExpression" clearable />
+          </ElFormItem>
+          <template v-if="listenerForm.listenerType === 'scriptListener'">
+            <ElFormItem
+              label="脚本格式"
+              prop="scriptFormat"
+              key="listener-script-format"
+              :rules="[{ required: true, message: '请填写脚本格式' }]"
+            >
+              <ElInput v-model="listenerForm.scriptFormat" clearable />
+            </ElFormItem>
+            <ElFormItem
+              label="脚本类型"
+              prop="scriptType"
+              key="listener-script-type"
+              :rules="[{ required: true, message: '请选择脚本类型' }]"
+            >
+              <ElSelect v-model="listenerForm.scriptType">
+                <ElOption value="inlineScript" label="内联脚本" />
+                <ElOption value="externalScript" label="外部脚本" />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="listenerForm.scriptType === 'inlineScript'"
+              label="脚本内容"
+              prop="value"
+              key="listener-script"
+              :rules="[{ required: true, message: '请填写脚本内容' }]"
+            >
+              <ElInput v-model="listenerForm.value" clearable />
+            </ElFormItem>
+            <ElFormItem
+              v-if="listenerForm.scriptType === 'externalScript'"
+              label="资源地址"
+              prop="resource"
+              key="listener-resource"
+              :rules="[{ required: true, message: '请填写资源地址' }]"
+            >
+              <ElInput v-model="listenerForm.resource" clearable />
+            </ElFormItem>
+          </template>
+
+          <template v-if="listenerForm.event === 'timeout'">
+            <ElFormItem
+              label="定时器类型"
+              prop="eventDefinitionType"
+              key="eventDefinitionType"
+            >
+              <ElSelect v-model="listenerForm.eventDefinitionType">
+                <ElOption value="date" label="日期" />
+                <ElOption value="duration" label="持续时长" />
+                <ElOption value="cycle" label="循环" />
+                <ElOption value="null" label="无" />
+              </ElSelect>
+            </ElFormItem>
+            <ElFormItem
+              v-if="
+                !!listenerForm.eventDefinitionType &&
+                listenerForm.eventDefinitionType !== 'null'
+              "
+              label="定时器"
+              prop="eventTimeDefinitions"
+              key="eventTimeDefinitions"
+              :rules="[{ required: true, message: '请填写定时器配置' }]"
+            >
+              <ElInput v-model="listenerForm.eventTimeDefinitions" clearable />
+            </ElFormItem>
+          </template>
+        </ElForm>
+
+        <ElDivider />
+        <div class="mb-2 flex justify-between">
+          <span class="flex items-center">
+            <IconifyIcon icon="ep:menu" class="mr-2 text-gray-600" />
+            注入字段
+          </span>
+          <ElButton
+            class="flex items-center"
+            size="small"
+            type="primary"
+            link
+            @click="openListenerFieldForm(null)"
+          >
+            <template #icon>
+              <IconifyIcon class="size-4" icon="ep:plus" />
+            </template>
+            添加字段
+          </ElButton>
+        </div>
+        <FieldsGrid>
+          <template #action="{ row, rowIndex }">
+            <ElButton
+              size="small"
+              type="primary"
+              link
+              @click="openListenerFieldForm(row, rowIndex)"
+            >
+              编辑
+            </ElButton>
+            <ElDivider direction="vertical" />
+            <ElButton
+              size="small"
+              type="danger"
+              link
+              @click="removeListenerField(row, rowIndex)"
+            >
+              移除
+            </ElButton>
+          </template>
+        </FieldsGrid>
+      </template>
+    </ListenerDrawer>
+
+    <!-- 注入字段 编辑/创建 部分 -->
+    <FieldModal @confirm="saveListenerField" />
+  </div>
+
+  <!-- 选择弹窗 -->
+  <ProcessListenerSelectModalComp @select="selectProcessListener" />
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
new file mode 100644
index 000000000..2cfd78dfa
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts
@@ -0,0 +1,101 @@
+// 初始化表单数据
+import { cloneDeep } from '@vben/utils';
+
+export function initListenerForm(listener: any) {
+  let self = {
+    ...listener,
+  };
+  if (listener.script) {
+    self = {
+      ...listener,
+      ...listener.script,
+      scriptType: listener.script.resource ? 'externalScript' : 'inlineScript',
+    };
+  }
+  if (
+    listener.event === 'timeout' &&
+    listener.eventDefinitions &&
+    listener.eventDefinitions.length > 0
+  ) {
+    let k = '';
+    for (const key in listener.eventDefinitions[0]) {
+      // console.log(listener.eventDefinitions, key);
+      if (key.includes('time')) {
+        k = key;
+        self.eventDefinitionType = key.replace('time', '').toLowerCase();
+      }
+    }
+    // console.log(k);
+    self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
+  }
+  return self;
+}
+
+export function initListenerType(listener: any) {
+  let listenerType;
+  if (listener.class) listenerType = 'classListener';
+  if (listener.expression) listenerType = 'expressionListener';
+  if (listener.delegateExpression) listenerType = 'delegateExpressionListener';
+  if (listener.script) listenerType = 'scriptListener';
+  return {
+    ...cloneDeep(listener),
+    ...listener.script,
+    listenerType,
+  };
+}
+
+/** 将 ProcessListenerDO 转换成 initListenerForm 想同的 Form 对象 */
+export function initListenerForm2(processListener: any) {
+  switch (processListener.valueType) {
+    case 'class': {
+      return {
+        listenerType: 'classListener',
+        class: processListener.value,
+        event: processListener.event,
+        fields: [],
+        id: undefined,
+      };
+    }
+    case 'delegateExpression': {
+      return {
+        listenerType: 'delegateExpressionListener',
+        delegateExpression: processListener.value,
+        event: processListener.event,
+        fields: [],
+        id: undefined,
+      };
+    }
+    case 'expression': {
+      return {
+        listenerType: 'expressionListener',
+        expression: processListener.value,
+        event: processListener.event,
+        fields: [],
+        id: undefined,
+      };
+    }
+    // No default
+  }
+  throw new Error('未知的监听器类型');
+}
+
+export const listenerType = {
+  classListener: 'Java 类',
+  expressionListener: '表达式',
+  delegateExpressionListener: '代理表达式',
+  scriptListener: '脚本',
+};
+
+export const eventType = {
+  create: '创建',
+  assignment: '指派',
+  complete: '完成',
+  delete: '删除',
+  update: '更新',
+  timeout: '超时',
+};
+
+export const fieldType = {
+  string: '字符串',
+  expression: '表达式',
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
new file mode 100644
index 000000000..f7ca14286
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
@@ -0,0 +1,545 @@
+<!-- eslint-disable no-unused-vars -->
+<script lang="ts" setup>
+import { inject, nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+
+import {
+  ElButton,
+  ElCheckbox,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+} from 'element-plus';
+
+import {
+  APPROVE_METHODS,
+  ApproveMethodType,
+} from '#/views/bpm/components/simple-process-design/consts';
+
+defineOptions({ name: 'ElementMultiInstance' });
+
+const props = defineProps({
+  businessObject: {
+    type: Object,
+    required: false,
+    default: () => ({}),
+  },
+  type: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  id: {
+    type: String,
+    required: false,
+    default: '',
+  },
+});
+const prefix = inject<string>('prefix');
+const loopCharacteristics = ref('');
+// 默认配置，用来覆盖原始不存在的选项，避免报错
+const defaultLoopInstanceForm = ref({
+  completionCondition: '',
+  loopCardinality: '',
+  extensionElements: [],
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false,
+});
+interface LoopInstanceForm {
+  completionCondition?: string;
+  loopCardinality?: string;
+  extensionElements?: any[];
+  asyncAfter?: boolean;
+  asyncBefore?: boolean;
+  exclusive?: boolean;
+  collection?: string;
+  elementVariable?: string;
+  timeCycle?: string;
+}
+
+const loopInstanceForm = ref<LoopInstanceForm>({});
+const bpmnElement = ref<any>(null);
+const multiLoopInstance = ref<any>(null);
+declare global {
+  interface Window {
+    // @ts-ignore
+    bpmnInstances?: () => any;
+  }
+}
+
+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';
+    loopInstanceForm.value = {};
+    return;
+  }
+  if (
+    businessObject.loopCharacteristics.$type ===
+    'bpmn:StandardLoopCharacteristics'
+  ) {
+    loopCharacteristics.value = 'StandardLoop';
+    loopInstanceForm.value = {};
+    return;
+  }
+  loopCharacteristics.value = businessObject.loopCharacteristics.isSequential
+    ? 'SequentialMultiInstance'
+    : 'ParallelMultiInstance';
+  // 合并配置
+  loopInstanceForm.value = {
+    ...defaultLoopInstanceForm.value,
+    ...businessObject.loopCharacteristics,
+    completionCondition:
+      businessObject.loopCharacteristics?.completionCondition?.body ?? '',
+    loopCardinality:
+      businessObject.loopCharacteristics?.loopCardinality?.body ?? '',
+  };
+  // 保留当前元素 businessObject 上的 loopCharacteristics 实例
+  multiLoopInstance.value =
+    bpmnInstances().bpmnElement.businessObject.loopCharacteristics;
+  // 更新表单
+  if (
+    businessObject.loopCharacteristics.extensionElements &&
+    businessObject.loopCharacteristics.extensionElements.values &&
+    businessObject.loopCharacteristics.extensionElements.values.length > 0
+  ) {
+    loopInstanceForm.value.timeCycle =
+      businessObject.loopCharacteristics.extensionElements.values[0].body;
+  }
+};
+
+const changeLoopCharacteristicsType = (type: any): void => {
+  // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
+  // 取消多实例配置
+  if (type === 'Null') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: null,
+    });
+    return;
+  }
+  // 配置循环
+  if (type === 'StandardLoop') {
+    const loopCharacteristicsObject = bpmnInstances().moddle.create(
+      'bpmn:StandardLoopCharacteristics',
+    );
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: loopCharacteristicsObject,
+    });
+    multiLoopInstance.value = null;
+    return;
+  }
+  // 时序
+  multiLoopInstance.value =
+    type === 'SequentialMultiInstance'
+      ? bpmnInstances().moddle.create('bpmn:MultiInstanceLoopCharacteristics', {
+          isSequential: true,
+        })
+      : bpmnInstances().moddle.create('bpmn:MultiInstanceLoopCharacteristics', {
+          // eslint-disable-next-line no-template-curly-in-string
+          collection: '${coll_userList}',
+        });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    loopCharacteristics: toRaw(multiLoopInstance.value),
+  });
+};
+
+// 循环基数
+const updateLoopCardinality = (cardinality: string): void => {
+  let loopCardinality = null;
+  if (cardinality && cardinality.length > 0) {
+    loopCardinality = bpmnInstances().moddle.create('bpmn:FormalExpression', {
+      body: cardinality,
+    });
+  }
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      loopCardinality,
+    },
+  );
+};
+
+// 完成条件
+const updateLoopCondition = (condition: string): void => {
+  let completionCondition = null;
+  if (condition && condition.length > 0) {
+    completionCondition = bpmnInstances().moddle.create(
+      'bpmn:FormalExpression',
+      {
+        body: condition,
+      },
+    );
+  }
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      completionCondition,
+    },
+  );
+};
+
+// 重试周期
+const updateLoopTimeCycle = (timeCycle: string): void => {
+  const extensionElements = bpmnInstances().moddle.create(
+    'bpmn:ExtensionElements',
+    {
+      values: [
+        bpmnInstances().moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
+          body: timeCycle,
+        }),
+      ],
+    },
+  );
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      extensionElements,
+    },
+  );
+};
+
+// 直接更新的基础信息
+const updateLoopBase = (): void => {
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    {
+      collection: loopInstanceForm.value.collection || null,
+      elementVariable: loopInstanceForm.value.elementVariable || null,
+    },
+  );
+};
+
+// 各异步状态
+const updateLoopAsync = (key: any): void => {
+  const { asyncBefore, asyncAfter } = loopInstanceForm.value;
+  let asyncAttr = Object.create(null);
+  if (!asyncBefore && !asyncAfter) {
+    // this.$set(this.loopInstanceForm, "exclusive", false);
+    loopInstanceForm.value.exclusive = false;
+    asyncAttr = {
+      asyncBefore: false,
+      asyncAfter: false,
+      exclusive: false,
+      extensionElements: null,
+    };
+  } else {
+    // @ts-ignore
+    asyncAttr[key] = loopInstanceForm.value[key];
+  }
+  bpmnInstances().modeling.updateModdleProperties(
+    toRaw(bpmnElement.value),
+    multiLoopInstance.value,
+    asyncAttr,
+  );
+};
+
+const changeConfig = (config: string): void => {
+  switch (config) {
+    case '会签': {
+      changeLoopCharacteristicsType('ParallelMultiInstance');
+      // eslint-disable-next-line no-template-curly-in-string
+      updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }');
+
+      break;
+    }
+    case '依次审批': {
+      changeLoopCharacteristicsType('SequentialMultiInstance');
+      updateLoopCardinality('1');
+      // eslint-disable-next-line no-template-curly-in-string
+      updateLoopCondition('${ nrOfCompletedInstances >= nrOfInstances }');
+
+      break;
+    }
+    case '或签': {
+      changeLoopCharacteristicsType('ParallelMultiInstance');
+      // eslint-disable-next-line no-template-curly-in-string
+      updateLoopCondition('${ nrOfCompletedInstances > 0 }');
+
+      break;
+    }
+    // No default
+  }
+};
+
+/**
+ * -----新版本多实例-----
+ */
+const approveMethod = ref<ApproveMethodType | undefined>();
+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: [] });
+    approveMethod.value = extensionElements.values.find(
+      (ex: any) => ex.$type === `${prefix}:ApproveMethod`,
+    )?.value;
+
+    otherExtensions.value =
+      extensionElements.values.filter(
+        (ex: any) => ex.$type !== `${prefix}:ApproveMethod`,
+      ) ?? [];
+
+    if (!approveMethod.value) {
+      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 => {
+  updateLoopCharacteristics();
+};
+const onApproveRatioChange = (): void => {
+  updateLoopCharacteristics();
+};
+const updateLoopCharacteristics = (): void => {
+  // 根据ApproveMethod生成multiInstanceLoopCharacteristics节点
+  if (approveMethod.value === ApproveMethodType.RANDOM_SELECT_ONE_APPROVE) {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: null,
+    });
+  } else {
+    if (approveMethod.value === ApproveMethodType.APPROVE_BY_RATIO) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        // eslint-disable-next-line no-template-curly-in-string
+        { isSequential: false, collection: '${coll_userList}' },
+      );
+      multiLoopInstance.value.completionCondition =
+        bpmnInstances().moddle.create('bpmn:FormalExpression', {
+          body: `\${ nrOfCompletedInstances/nrOfInstances >= ${
+            approveRatio.value / 100
+          }}`,
+        });
+    }
+    if (approveMethod.value === ApproveMethodType.ANY_APPROVE) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        // eslint-disable-next-line no-template-curly-in-string
+        { isSequential: false, collection: '${coll_userList}' },
+      );
+      multiLoopInstance.value.completionCondition =
+        bpmnInstances().moddle.create('bpmn:FormalExpression', {
+          // eslint-disable-next-line no-template-curly-in-string
+          body: '${ nrOfCompletedInstances > 0 }',
+        });
+    }
+    if (approveMethod.value === ApproveMethodType.SEQUENTIAL_APPROVE) {
+      multiLoopInstance.value = bpmnInstances().moddle.create(
+        'bpmn:MultiInstanceLoopCharacteristics',
+        // eslint-disable-next-line no-template-curly-in-string
+        { isSequential: true, collection: '${coll_userList}' },
+      );
+      multiLoopInstance.value.loopCardinality = bpmnInstances().moddle.create(
+        'bpmn:FormalExpression',
+        {
+          body: '1',
+        },
+      );
+      multiLoopInstance.value.completionCondition =
+        bpmnInstances().moddle.create('bpmn:FormalExpression', {
+          // eslint-disable-next-line no-template-curly-in-string
+          body: '${ nrOfCompletedInstances >= nrOfInstances }',
+        });
+    }
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      loopCharacteristics: toRaw(multiLoopInstance.value),
+    });
+  }
+
+  // 添加ApproveMethod到ExtensionElements
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      bpmnInstances().moddle.create(`${prefix}:ApproveMethod`, {
+        value: approveMethod.value,
+      }),
+    ],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+};
+
+onBeforeUnmount(() => {
+  multiLoopInstance.value = null;
+  bpmnElement.value = null;
+});
+
+watch(
+  () => props.id,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        bpmnElement.value = bpmnInstances().bpmnElement;
+        // getElementLoop(val)
+        getElementLoopNew();
+      });
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="-mx-2 mb-2 px-2">
+    <ElRadioGroup
+      v-if="type === 'UserTask'"
+      v-model="approveMethod"
+      @change="onApproveMethodChange"
+    >
+      <div class="flex flex-col gap-3">
+        <div v-for="(item, index) in APPROVE_METHODS" :key="index">
+          <ElRadio :value="item.value">
+            {{ item.label }}
+          </ElRadio>
+          <ElInputNumber
+            v-if="
+              item.value === ApproveMethodType.APPROVE_BY_RATIO &&
+              approveMethod === ApproveMethodType.APPROVE_BY_RATIO
+            "
+            v-model="approveRatio"
+            :min="10"
+            :max="100"
+            :step="10"
+            size="small"
+            @change="onApproveRatioChange"
+          />
+        </div>
+      </div>
+    </ElRadioGroup>
+    <div v-else>除了UserTask以外节点的多实例待实现</div>
+    <!-- 与Simple设计器配置合并，保留以前的代码 -->
+    <ElForm class="hidden">
+      <ElFormItem label="快捷配置">
+        <ElButton size="small" @click="() => changeConfig('依次审批')">
+          依次审批
+        </ElButton>
+        <ElButton size="small" @click="() => changeConfig('会签')">
+          会签
+        </ElButton>
+        <ElButton size="small" @click="() => changeConfig('或签')">
+          或签
+        </ElButton>
+      </ElFormItem>
+      <ElFormItem label="会签类型">
+        <ElSelect
+          v-model="loopCharacteristics"
+          @change="changeLoopCharacteristicsType"
+        >
+          <ElOption value="ParallelMultiInstance" label="并行多重事件" />
+          <ElOption value="SequentialMultiInstance" label="时序多重事件" />
+          <ElOption value="Null" label="无" />
+        </ElSelect>
+      </ElFormItem>
+      <template
+        v-if="
+          loopCharacteristics === 'ParallelMultiInstance' ||
+          loopCharacteristics === 'SequentialMultiInstance'
+        "
+      >
+        <ElFormItem label="循环数量" key="loopCardinality">
+          <ElInput
+            v-model="loopInstanceForm.loopCardinality"
+            clearable
+            @change="
+              () =>
+                updateLoopCardinality(loopInstanceForm.loopCardinality || '')
+            "
+          />
+        </ElFormItem>
+        <ElFormItem label="集合" key="collection" v-show="false">
+          <ElInput
+            v-model="loopInstanceForm.collection"
+            clearable
+            @change="() => updateLoopBase()"
+          />
+        </ElFormItem>
+        <!-- add by 芋艿：由于「元素变量」暂时用不到，所以这里 display 为 none -->
+        <ElFormItem label="元素变量" key="elementVariable" class="hidden">
+          <ElInput
+            v-model="loopInstanceForm.elementVariable"
+            clearable
+            @change="() => updateLoopBase()"
+          />
+        </ElFormItem>
+        <ElFormItem label="完成条件" key="completionCondition">
+          <ElInput
+            v-model="loopInstanceForm.completionCondition"
+            clearable
+            @change="
+              () =>
+                updateLoopCondition(loopInstanceForm.completionCondition || '')
+            "
+          />
+        </ElFormItem>
+        <!-- add by 芋艿：由于「异步状态」暂时用不到，所以这里 display 为 none -->
+        <ElFormItem label="异步状态" key="async" class="hidden">
+          <ElCheckbox
+            v-model="loopInstanceForm.asyncBefore"
+            @change="() => updateLoopAsync('asyncBefore')"
+          >
+            异步前
+          </ElCheckbox>
+          <ElCheckbox
+            v-model="loopInstanceForm.asyncAfter"
+            @change="() => updateLoopAsync('asyncAfter')"
+          >
+            异步后
+          </ElCheckbox>
+          <ElCheckbox
+            v-model="loopInstanceForm.exclusive"
+            v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
+            @change="() => updateLoopAsync('exclusive')"
+          >
+            排除
+          </ElCheckbox>
+        </ElFormItem>
+        <ElFormItem
+          label="重试周期"
+          prop="timeCycle"
+          v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
+          key="timeCycle"
+        >
+          <ElInput
+            v-model="loopInstanceForm.timeCycle"
+            clearable
+            @change="
+              () => updateLoopTimeCycle(loopInstanceForm.timeCycle || '')
+            "
+          />
+        </ElFormItem>
+      </template>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
new file mode 100644
index 000000000..f0fb820cf
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/other/ElementOtherConfig.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+
+import { ElInput } from 'element-plus';
+
+defineOptions({ name: 'ElementOtherConfig' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+});
+
+const documentation = ref('');
+const bpmnElement = ref();
+
+const bpmnInstances = () => (window as any).bpmnInstances;
+
+const updateDocumentation = () => {
+  (bpmnElement.value && bpmnElement.value.id === props.id) ||
+    (bpmnElement.value = bpmnInstances().elementRegistry.get(props.id));
+  const documentations = bpmnInstances().bpmnFactory.create(
+    'bpmn:Documentation',
+    {
+      text: documentation.value,
+    },
+  );
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    documentation: [documentations],
+  });
+};
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+
+watch(
+  () => props.id,
+  (id) => {
+    if (id && id.length > 0) {
+      nextTick(() => {
+        const documentations =
+          bpmnInstances().bpmnElement.businessObject?.documentation;
+        documentation.value =
+          documentations && documentations.length > 0
+            ? documentations[0].text
+            : '';
+      });
+    } else {
+      documentation.value = '';
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="px-2 py-2">
+    <div class="flex items-start gap-2">
+      <div class="w-20 pt-1 text-sm text-gray-700">元素文档：</div>
+      <div class="flex-1">
+        <ElInput
+          type="textarea"
+          v-model="documentation"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          @change="updateDocumentation"
+          @blur="updateDocumentation"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
new file mode 100644
index 000000000..dfde667c3
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue
@@ -0,0 +1,249 @@
+<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 { ElButton, ElDivider, ElForm, ElFormItem, ElInput } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+defineOptions({ name: 'ElementProperties' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+
+const prefix = inject('prefix');
+
+const elementPropertyList = ref<Array<{ name: string; value: string }>>([]);
+const propertyForm = ref<{ name?: string; value?: string }>({});
+const editingPropertyIndex = ref(-1);
+const otherExtensionList = ref<any[]>([]);
+const bpmnElementProperties = ref<any[]>([]);
+const bpmnElementPropertyList = ref<any[]>([]);
+const attributeFormRef = ref<any>();
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetAttributesList = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const businessObject = bpmnElement.businessObject;
+
+  otherExtensionList.value = []; // 其他扩展配置
+  bpmnElementProperties.value =
+    businessObject?.extensionElements?.values?.filter((ex: any) => {
+      if (ex.$type !== `${prefix}:Properties`) {
+        otherExtensionList.value.push(ex);
+      }
+      return ex.$type === `${prefix}:Properties`;
+    }) ?? [];
+
+  bpmnElementPropertyList.value = bpmnElementProperties.value.flatMap(
+    (current: any) => current.values,
+  );
+  elementPropertyList.value = cloneDeep(bpmnElementPropertyList.value ?? []);
+};
+
+const removeAttributes = (
+  _attr: { name: string; value: string },
+  index: number,
+) => {
+  confirm({
+    title: '提示',
+    content: '确认移除该属性吗？',
+  }).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 = async () => {
+  try {
+    await attributeFormRef.value?.validate();
+  } catch {
+    // 校验未通过，直接返回
+    return;
+  }
+
+  const { name, value } = propertyForm.value;
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+
+  if (editingPropertyIndex.value === -1) {
+    // 新建属性字段
+    const newPropertyObject = instances.moddle.create(`${prefix}:Property`, {
+      name,
+      value,
+    });
+    // 新建一个属性字段的保存列表
+    const propertiesObject = instances.moddle.create(`${prefix}:Properties`, {
+      values: [...bpmnElementPropertyList.value, newPropertyObject],
+    });
+    updateElementExtensions(propertiesObject);
+  } else {
+    instances.modeling.updateModdleProperties(
+      bpmnElement,
+      bpmnElementPropertyList.value[editingPropertyIndex.value],
+      {
+        name,
+        value,
+      },
+    );
+  }
+  fieldModalApi.close();
+  resetAttributesList();
+};
+
+const updateElementExtensions = (properties: any) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+
+  const bpmnElement = instances.bpmnElement;
+  const extensions = instances.moddle.create('bpmn:ExtensionElements', {
+    values: [...otherExtensionList.value, properties],
+  });
+  instances.modeling.updateProperties(bpmnElement, {
+    extensionElements: extensions,
+  });
+};
+
+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.length > 0) {
+      resetAttributesList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="-mx-2 mb-2">
+    <Grid :data="elementPropertyList">
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openAttributesForm(row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeAttributes(row, rowIndex)"
+        >
+          移除
+        </ElButton>
+      </template>
+    </Grid>
+    <div class="mt-1 flex w-full items-center justify-center gap-2 px-2">
+      <ElButton
+        class="flex flex-1 items-center justify-center"
+        type="primary"
+        size="small"
+        @click="openAttributesForm(null, -1)"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        添加属性
+      </ElButton>
+    </div>
+
+    <FieldModal class="w-3/5">
+      <ElForm :model="propertyForm" ref="attributeFormRef" label-width="80px">
+        <ElFormItem
+          label="属性名："
+          prop="name"
+          :rules="[{ required: true, message: '请输入属性名' }]"
+        >
+          <ElInput v-model="propertyForm.name" clearable />
+        </ElFormItem>
+        <ElFormItem
+          label="属性值："
+          prop="value"
+          :rules="[{ required: true, message: '请输入属性值' }]"
+        >
+          <ElInput v-model="propertyForm.value" clearable />
+        </ElFormItem>
+      </ElForm>
+    </FieldModal>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
new file mode 100644
index 000000000..9821b041c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalAndMessage.vue
@@ -0,0 +1,337 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElDivider, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import SignalMessageModal from './SignalMessageModal.vue';
+
+defineOptions({ name: 'SignalAndMassage' });
+const signalList = ref<any[]>([]);
+const messageList = ref<any[]>([]);
+const modelType = ref<'message' | 'signal'>('message');
+const rootElements = ref();
+const messageIdMap = ref();
+const signalIdMap = ref();
+const editingIndex = ref(-1); // 正在编辑的索引，-1 表示新建
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+// 生成规范化的ID
+const generateStandardId = (type: string): string => {
+  const prefix = type === 'message' ? 'Message_' : 'Signal_';
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).slice(2, 6).toUpperCase();
+  return `${prefix}${timestamp}_${random}`;
+};
+
+const initDataList = () => {
+  rootElements.value = bpmnInstances().modeler.getDefinitions().rootElements;
+  messageIdMap.value = {};
+  signalIdMap.value = {};
+  messageList.value = [];
+  signalList.value = [];
+  rootElements.value.forEach((el: any) => {
+    if (el.$type === 'bpmn:Message') {
+      messageIdMap.value[el.id] = true;
+      messageList.value.push({ ...el });
+    }
+    if (el.$type === 'bpmn:Signal') {
+      signalIdMap.value[el.id] = true;
+      signalList.value.push({ ...el });
+    }
+  });
+};
+
+const openModel = (type: 'message' | 'signal') => {
+  modelType.value = type;
+  editingIndex.value = -1;
+  modalApi
+    .setData({
+      id: generateStandardId(type),
+      isEdit: false,
+      name: '',
+      type,
+    })
+    .open();
+};
+
+const openEditModel = (type: 'message' | 'signal', row: any, index: number) => {
+  modelType.value = type;
+  editingIndex.value = index;
+  modalApi
+    .setData({
+      id: row.id,
+      isEdit: true,
+      name: row.name,
+      type,
+    })
+    .open();
+};
+
+const handleConfirm = (formData: { id: string; name: string }) => {
+  if (modelType.value === 'message') {
+    if (editingIndex.value === -1) {
+      // 新建模式
+      if (messageIdMap.value[formData.id]) {
+        ElMessage.error('该消息已存在，请修改id后重新保存');
+        return;
+      }
+      const messageRef = bpmnInstances().moddle.create(
+        'bpmn:Message',
+        formData,
+      );
+      rootElements.value.push(messageRef);
+    } else {
+      // 编辑模式
+      const targetMessage = messageList.value[editingIndex.value];
+      const rootMessage = rootElements.value.find(
+        (el: any) => el.$type === 'bpmn:Message' && el.id === targetMessage.id,
+      );
+      if (rootMessage) {
+        rootMessage.id = formData.id;
+        rootMessage.name = formData.name;
+      }
+    }
+  } else {
+    if (editingIndex.value === -1) {
+      // 新建模式
+      if (signalIdMap.value[formData.id]) {
+        ElMessage.error('该信号已存在，请修改id后重新保存');
+        return;
+      }
+      const signalRef = bpmnInstances().moddle.create('bpmn:Signal', formData);
+      rootElements.value.push(signalRef);
+    } else {
+      // 编辑模式
+      const targetSignal = signalList.value[editingIndex.value];
+      const rootSignal = rootElements.value.find(
+        (el: any) => el.$type === 'bpmn:Signal' && el.id === targetSignal.id,
+      );
+      if (rootSignal) {
+        rootSignal.id = formData.id;
+        rootSignal.name = formData.name;
+      }
+    }
+  }
+  // 触发建模器更新以保存更改
+  saveChanges();
+  initDataList();
+};
+
+// 补充"编辑"、"移除"功能。相关 issue：https://github.com/YunaiV/yudao-cloud/issues/270
+const removeObject = (type: any, row: any) => {
+  confirm({
+    title: '提示',
+    content: `确认移除该${type === 'message' ? '消息' : '信号'}吗？`,
+  }).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();
+    ElMessage.success('移除成功');
+  });
+};
+
+// 触发建模器更新以保存更改
+const saveChanges = () => {
+  const modeler = bpmnInstances().modeler;
+  if (!modeler) return;
+
+  try {
+    // 获取 canvas，通过它来触发图表的重新渲染
+    const canvas = modeler.get('canvas');
+
+    // 获取根元素（Process）
+    const rootElement = canvas.getRootElement();
+
+    // 触发 changed 事件，通知建模器数据已更改
+    const eventBus = modeler.get('eventBus');
+    if (eventBus) {
+      eventBus.fire('root.added', { element: rootElement });
+      eventBus.fire('elements.changed', { elements: [rootElement] });
+    }
+
+    // 标记建模器为已修改状态
+    const commandStack = modeler.get('commandStack');
+    if (commandStack && commandStack._stack) {
+      // 添加一个空命令以标记为已修改
+      commandStack.execute('element.updateProperties', {
+        element: rootElement,
+        properties: {},
+      });
+    }
+  } catch (error) {
+    console.warn('保存更改时出错:', error);
+  }
+};
+
+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 [Modal, modalApi] = useVbenModal({
+  connectedComponent: SignalMessageModal,
+});
+
+onMounted(() => {
+  initDataList();
+});
+
+watch(
+  messageList,
+  (val) => {
+    messageGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+
+watch(
+  signalList,
+  (val) => {
+    signalGridApi.setGridOptions({ data: val });
+  },
+  { deep: true },
+);
+</script>
+<template>
+  <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>
+      <ElButton
+        class="flex items-center"
+        size="small"
+        type="primary"
+        link
+        @click="openModel('message')"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        创建新消息
+      </ElButton>
+    </div>
+    <MessageGrid :data="messageList">
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openEditModel('message', row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeObject('message', row)"
+        >
+          移除
+        </ElButton>
+      </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>
+      <ElButton
+        class="flex items-center"
+        size="small"
+        type="primary"
+        link
+        @click="openModel('signal')"
+      >
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        创建新信号
+      </ElButton>
+    </div>
+    <SignalGrid :data="signalList">
+      <template #action="{ row, rowIndex }">
+        <ElButton
+          size="small"
+          type="primary"
+          link
+          @click="openEditModel('signal', row, rowIndex)"
+        >
+          编辑
+        </ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton
+          size="small"
+          type="danger"
+          link
+          @click="removeObject('signal', row)"
+        >
+          移除
+        </ElButton>
+      </template>
+    </SignalGrid>
+
+    <Modal @confirm="handleConfirm" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue
new file mode 100644
index 000000000..45d185dd4
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/signal-message/SignalMessageModal.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElForm, ElFormItem, ElInput } from 'element-plus';
+
+defineOptions({ name: 'SignalMessageModal' });
+
+const emit = defineEmits<{
+  confirm: [data: { id: string; name: string }];
+}>();
+
+const formRef = ref();
+const form = ref<{ id: string; name: string }>({ id: '', name: '' });
+const modelType = ref<'message' | 'signal'>('message');
+const isEdit = ref(false);
+
+const config = computed(() => {
+  return modelType.value === 'message'
+    ? {
+        title: isEdit.value ? '编辑消息' : '创建消息',
+        idLabel: '消息 ID',
+        nameLabel: '消息名称',
+      }
+    : {
+        title: isEdit.value ? '编辑信号' : '创建信号',
+        idLabel: '信号 ID',
+        nameLabel: '信号名称',
+      };
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        id?: string;
+        isEdit?: boolean;
+        name?: string;
+        type: 'message' | 'signal';
+      }>();
+      modelType.value = data?.type || 'message';
+      isEdit.value = data?.isEdit || false;
+      form.value = {
+        id: data?.id || '',
+        name: data?.name || '',
+      };
+      // 清除校验
+      setTimeout(() => {
+        formRef.value?.clearValidate();
+      }, 50);
+    }
+  },
+  async onConfirm() {
+    try {
+      await formRef.value?.validate();
+      emit('confirm', { ...form.value });
+      modalApi.close();
+    } catch {
+      // 校验未通过
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="config.title" class="w-3/5">
+    <ElForm ref="formRef" :model="form" label-width="80px">
+      <ElFormItem
+        :label="config.idLabel"
+        prop="id"
+        :rules="[{ required: true, message: '请输入 ID' }]"
+      >
+        <ElInput v-model="form.id" clearable />
+      </ElFormItem>
+      <ElFormItem
+        :label="config.nameLabel"
+        prop="name"
+        :rules="[{ required: true, message: '请输入名称' }]"
+      >
+        <ElInput v-model="form.name" clearable />
+      </ElFormItem>
+    </ElForm>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
new file mode 100644
index 000000000..8775cb942
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/ElementTask.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { ElCheckbox, ElForm, ElFormItem } from 'element-plus';
+
+import { installedComponent } from './data';
+
+defineOptions({ name: 'ElementTaskConfig' });
+
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const taskConfigForm = ref({
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false,
+});
+const witchTaskComponent = ref();
+
+const bpmnElement = ref();
+
+const bpmnInstances = () => (window as any).bpmnInstances;
+const changeTaskAsync = () => {
+  if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
+    taskConfigForm.value.exclusive = false;
+  }
+  bpmnInstances().modeling.updateProperties(bpmnInstances().bpmnElement, {
+    ...taskConfigForm.value,
+  });
+};
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement;
+    taskConfigForm.value.asyncBefore =
+      bpmnElement.value?.businessObject?.asyncBefore;
+    taskConfigForm.value.asyncAfter =
+      bpmnElement.value?.businessObject?.asyncAfter;
+    taskConfigForm.value.exclusive =
+      bpmnElement.value?.businessObject?.exclusive;
+  },
+  { immediate: true },
+);
+watch(
+  () => props.type,
+  () => {
+    if (props.type) {
+      // @ts-ignore
+      witchTaskComponent.value = installedComponent[props.type].component;
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <ElForm>
+      <!-- add by 芋艿：由于「异步延续」暂时用不到，所以这里 display 为 none -->
+      <!-- TODO @jaosn：这里 antd 属性地 hidden，需要关注么？ -->
+      <ElFormItem label="异步延续" class="!hidden">
+        <ElCheckbox
+          v-model="taskConfigForm.asyncBefore"
+          @change="changeTaskAsync"
+        >
+          异步前
+        </ElCheckbox>
+        <ElCheckbox
+          v-model="taskConfigForm.asyncAfter"
+          @change="changeTaskAsync"
+        >
+          异步后
+        </ElCheckbox>
+        <ElCheckbox
+          v-model="taskConfigForm.exclusive"
+          v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore"
+          @change="changeTaskAsync"
+        >
+          排除
+        </ElCheckbox>
+      </ElFormItem>
+      <component :is="witchTaskComponent" v-bind="$props" />
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/data.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/data.ts
new file mode 100644
index 000000000..d453b382c
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/data.ts
@@ -0,0 +1,40 @@
+import CallActivity from './task-components/CallActivity.vue';
+import ReceiveTask from './task-components/ReceiveTask.vue';
+import ScriptTask from './task-components/ScriptTask.vue';
+import ServiceTask from './task-components/ServiceTask.vue';
+import UserTask from './task-components/UserTask.vue';
+
+export const installedComponent = {
+  UserTask: {
+    name: '用户任务',
+    component: UserTask,
+  },
+  ServiceTask: {
+    name: '服务任务',
+    component: ServiceTask,
+  },
+  ScriptTask: {
+    name: '脚本任务',
+    component: ScriptTask,
+  },
+  ReceiveTask: {
+    name: '接收任务',
+    component: ReceiveTask,
+  },
+  CallActivity: {
+    name: '调用活动',
+    component: CallActivity,
+  },
+};
+
+export const getTaskCollapseItemName = (
+  elementType: keyof typeof installedComponent,
+) => {
+  return installedComponent[elementType].name;
+};
+
+export const isTaskCollapseItemShow = (
+  elementType: keyof typeof installedComponent,
+) => {
+  return installedComponent[elementType];
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
new file mode 100644
index 000000000..dfdf17647
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue
@@ -0,0 +1,418 @@
+<script lang="ts" setup>
+import { inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getModelList } from '#/api/bpm/model';
+
+interface FormData {
+  processInstanceName: string;
+  calledElement: string;
+  inheritVariables: boolean;
+  businessKey: string;
+  inheritBusinessKey: boolean;
+  calledElementType: string;
+}
+
+defineOptions({ name: 'CallActivity' });
+const props = defineProps({
+  id: { type: String, default: '' },
+  type: { type: String, default: '' },
+});
+const prefix = inject('prefix');
+
+const formData = ref<FormData>({
+  processInstanceName: '',
+  calledElement: '',
+  inheritVariables: false,
+  businessKey: '',
+  inheritBusinessKey: false,
+  calledElementType: 'key',
+});
+const inVariableList = ref<any[]>([]);
+const outVariableList = ref<any[]>([]);
+const variableType = ref<string>(); // 参数类型
+const editingVariableIndex = ref<number>(-1); // 编辑参数下标
+const varialbeFormRef = ref();
+const varialbeFormData = ref<{
+  source: string;
+  target: string;
+}>({
+  source: '',
+  target: '',
+});
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+const bpmnElement = ref<any>();
+const otherExtensionList = ref<any[]>([]);
+const childProcessOptions = ref<{ key: string; name: string }[]>([]);
+
+const initCallActivity = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+
+  // 初始化所有配置项
+  Object.keys(formData.value).forEach((key: string) => {
+    // @ts-ignore
+    formData.value[key] =
+      bpmnElement.value.businessObject[key] ??
+      formData.value[key as keyof FormData];
+  });
+
+  otherExtensionList.value = []; // 其他扩展配置
+  inVariableList.value.length = 0;
+  outVariableList.value.length = 0;
+  // 初始化输入参数
+  bpmnElement.value.businessObject?.extensionElements?.values?.forEach(
+    (ex: any) => {
+      if (ex.$type === `${prefix}:In`) {
+        inVariableList.value.push(ex);
+      } else if (ex.$type === `${prefix}:Out`) {
+        outVariableList.value.push(ex);
+      } else {
+        otherExtensionList.value.push(ex);
+      }
+    },
+  );
+};
+
+const updateCallActivityAttr = (attr: keyof FormData) => {
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    [attr]: formData.value[attr],
+  });
+};
+
+const [VariableModal, variableModalApi] = useVbenModal({
+  title: '参数配置',
+  onConfirm: () => {
+    saveVariable();
+  },
+});
+
+const openVariableForm = (type: string, data: any, index: number) => {
+  editingVariableIndex.value = index;
+  variableType.value = type;
+  varialbeFormData.value = index === -1 ? {} : { ...data };
+  variableModalApi.open();
+};
+
+const removeVariable = async (type: string, index: number) => {
+  try {
+    await confirm({
+      title: '提示',
+      content: '是否确认删除？',
+    });
+    if (type === 'in') {
+      inVariableList.value.splice(index, 1);
+    }
+    if (type === 'out') {
+      outVariableList.value.splice(index, 1);
+    }
+    updateElementExtensions();
+  } catch (error: any) {
+    console.error(`[removeVariable error ]: ${error.message || error}`);
+  }
+};
+
+const saveVariable = async () => {
+  try {
+    await varialbeFormRef.value?.validate();
+  } catch {
+    // 验证失败直接返回
+    return;
+  }
+
+  if (editingVariableIndex.value === -1) {
+    if (variableType.value === 'in') {
+      inVariableList.value.push(
+        bpmnInstances().moddle.create(`${prefix}:In`, {
+          ...varialbeFormData.value,
+        }),
+      );
+    }
+    if (variableType.value === 'out') {
+      outVariableList.value.push(
+        bpmnInstances().moddle.create(`${prefix}:Out`, {
+          ...varialbeFormData.value,
+        }),
+      );
+    }
+    updateElementExtensions();
+  } else {
+    if (variableType.value === 'in') {
+      inVariableList.value[editingVariableIndex.value].source =
+        varialbeFormData.value.source;
+      inVariableList.value[editingVariableIndex.value].target =
+        varialbeFormData.value.target;
+    }
+    if (variableType.value === 'out') {
+      outVariableList.value[editingVariableIndex.value].source =
+        varialbeFormData.value.source;
+      outVariableList.value[editingVariableIndex.value].target =
+        varialbeFormData.value.target;
+    }
+  }
+  variableModalApi.close();
+};
+
+const updateElementExtensions = () => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...inVariableList.value,
+      ...outVariableList.value,
+      ...otherExtensionList.value,
+    ],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+};
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length > 0 &&
+      nextTick(() => {
+        initCallActivity();
+      });
+  },
+  { immediate: true },
+);
+
+const gridOptions = {
+  columns: [
+    { title: '源', field: 'source', minWidth: 100 },
+    { title: '目标', field: 'target', minWidth: 100 },
+    {
+      title: '操作',
+      width: 130,
+      slots: { default: 'action' },
+      fixed: 'right' as const,
+    },
+  ],
+  border: true,
+  showOverflow: true,
+  height: 'auto',
+  toolbarConfig: { enabled: false },
+  pagerConfig: { enabled: false },
+};
+
+const [InVariableGrid, inVariableGridApi] = useVbenVxeGrid({
+  gridOptions,
+});
+
+const [OutVariableGrid, outVariableGridApi] = useVbenVxeGrid({
+  gridOptions,
+});
+
+// 使用浅层监听，避免无限循环
+watch(
+  () => [...inVariableList.value],
+  (val) => {
+    inVariableGridApi.setGridOptions({ data: val });
+  },
+);
+
+watch(
+  () => [...outVariableList.value],
+  (val) => {
+    outVariableGridApi.setGridOptions({ data: val });
+  },
+);
+
+/** 选择子流程, 更新 bpmn callActivity calledElement 和 processInstanceName 属性 */
+const handleChildProcessChange = (key: any) => {
+  if (!key) return;
+  const selected = childProcessOptions.value.find((item) => item.key === key);
+  if (selected) {
+    formData.value.calledElement = selected.key;
+    formData.value.processInstanceName = selected.name;
+    updateCallActivityAttr('calledElement');
+    updateCallActivityAttr('processInstanceName');
+  }
+};
+
+onMounted(async () => {
+  try {
+    // 获取流程模型列表
+    const list = await getModelList(undefined);
+    childProcessOptions.value = list.map((item) => ({
+      key: item.key,
+      name: item.name,
+    }));
+  } catch (error) {
+    console.error('获取子流程列表失败', error);
+  }
+});
+</script>
+
+<template>
+  <div class="-mx-2">
+    <ElForm label-width="100px">
+      <ElFormItem label="被调用子流程">
+        <ElSelect
+          v-model="formData.calledElement"
+          placeholder="请选择子流程"
+          clearable
+          @change="handleChildProcessChange"
+        >
+          <ElOption
+            v-for="item in childProcessOptions"
+            :key="item.key"
+            :value="item.key"
+            :label="item.name"
+          />
+        </ElSelect>
+      </ElFormItem>
+
+      <ElFormItem label="继承变量">
+        <ElSwitch
+          v-model="formData.inheritVariables"
+          @change="updateCallActivityAttr('inheritVariables')"
+        />
+      </ElFormItem>
+
+      <ElFormItem label="继承业务键">
+        <ElSwitch
+          v-model="formData.inheritBusinessKey"
+          @change="updateCallActivityAttr('inheritBusinessKey')"
+        />
+      </ElFormItem>
+
+      <ElFormItem v-if="!formData.inheritBusinessKey" label="业务键表达式">
+        <ElInput
+          v-model="formData.businessKey"
+          clearable
+          placeholder="请输入业务键表达式"
+          @change="updateCallActivityAttr('businessKey')"
+        />
+      </ElFormItem>
+
+      <div
+        class="mb-1 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
+      >
+        <span class="flex items-center text-sm font-medium"> 输入参数 </span>
+        <ElButton
+          class="flex items-center"
+          size="small"
+          type="primary"
+          link
+          @click="openVariableForm('in', null, -1)"
+        >
+          <template #icon>
+            <IconifyIcon icon="ep:plus" />
+          </template>
+          添加参数
+        </ElButton>
+      </div>
+      <InVariableGrid class="-mx-2 mb-4">
+        <template #action="{ row, rowIndex }">
+          <ElButton
+            size="small"
+            type="primary"
+            link
+            @click="openVariableForm('in', row, rowIndex)"
+          >
+            编辑
+          </ElButton>
+          <ElDivider direction="vertical" />
+          <ElButton
+            size="small"
+            type="danger"
+            link
+            @click="removeVariable('in', rowIndex)"
+          >
+            移除
+          </ElButton>
+        </template>
+      </InVariableGrid>
+
+      <div
+        class="mb-1 mt-2 flex items-center justify-between border-t border-gray-200 pt-2"
+      >
+        <span class="flex items-center text-sm font-medium"> 输出参数 </span>
+        <ElButton
+          class="flex items-center"
+          size="small"
+          type="primary"
+          link
+          @click="openVariableForm('out', null, -1)"
+        >
+          <template #icon>
+            <IconifyIcon icon="lucide:plus" class="size-4" />
+          </template>
+          添加参数
+        </ElButton>
+      </div>
+      <OutVariableGrid class="-mx-2">
+        <template #action="{ row, rowIndex }">
+          <ElButton
+            size="small"
+            type="primary"
+            link
+            @click="openVariableForm('out', row, rowIndex)"
+          >
+            编辑
+          </ElButton>
+          <ElDivider direction="vertical" />
+          <ElButton
+            size="small"
+            type="danger"
+            link
+            @click="removeVariable('out', rowIndex)"
+          >
+            移除
+          </ElButton>
+        </template>
+      </OutVariableGrid>
+    </ElForm>
+
+    <VariableModal>
+      <ElForm
+        :model="varialbeFormData"
+        ref="varialbeFormRef"
+        label-width="60px"
+      >
+        <ElFormItem
+          label="源"
+          prop="source"
+          :rules="[
+            {
+              required: true,
+              message: '源不能为空',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="varialbeFormData.source" clearable />
+        </ElFormItem>
+        <ElFormItem
+          label="目标"
+          prop="target"
+          :rules="[
+            {
+              required: true,
+              message: '目标不能为空',
+              trigger: ['blur', 'change'],
+            },
+          ]"
+        >
+          <ElInput v-model="varialbeFormData.target" clearable />
+        </ElFormItem>
+      </ElForm>
+    </VariableModal>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue
new file mode 100644
index 000000000..6c994b608
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/HttpHeaderEditor.vue
@@ -0,0 +1,126 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElInput } from 'element-plus';
+
+defineOptions({ name: 'HttpHeaderEditor' });
+
+const emit = defineEmits(['save']);
+
+interface HeaderItem {
+  key: string;
+  value: string;
+}
+
+const headerList = ref<HeaderItem[]>([]);
+
+// 解析请求头字符串为列表
+const parseHeaders = (headersStr: string): HeaderItem[] => {
+  if (!headersStr || !headersStr.trim()) {
+    return [{ key: '', value: '' }];
+  }
+
+  const lines = headersStr.split('\n').filter((line) => line.trim());
+  const parsed = lines.map((line) => {
+    const colonIndex = line.indexOf(':');
+    if (colonIndex > 0) {
+      return {
+        key: line.slice(0, Math.max(0, colonIndex)).trim(),
+        value: line.slice(Math.max(0, colonIndex + 1)).trim(),
+      };
+    }
+    return { key: line.trim(), value: '' };
+  });
+
+  return parsed.length > 0 ? parsed : [{ key: '', value: '' }];
+};
+
+// 将列表转换为请求头字符串
+const stringifyHeaders = (headers: HeaderItem[]): string => {
+  return headers
+    .filter((item) => item.key.trim())
+    .map((item) => `${item.key}: ${item.value}`)
+    .join('\n');
+};
+
+// 添加请求头
+const addHeader = () => {
+  headerList.value.push({ key: '', value: '' });
+};
+
+// 移除请求头
+const removeHeader = (index: number) => {
+  if (headerList.value.length === 1) {
+    // 至少保留一行
+    headerList.value = [{ key: '', value: '' }];
+  } else {
+    headerList.value.splice(index, 1);
+  }
+};
+
+// 保存
+const handleSave = () => {
+  const headersStr = stringifyHeaders(headerList.value);
+  emit('save', headersStr);
+  modalApi.close();
+};
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  onOpenChange(isOpen) {
+    if (!isOpen) {
+      return;
+    }
+    const { headers } = modalApi.getData();
+    headerList.value = parseHeaders(headers);
+  },
+  onConfirm: handleSave,
+});
+</script>
+
+<template>
+  <Modal title="编辑请求头" class="w-3/5">
+    <div class="space-y-4">
+      <div class="mb-2 space-y-3 overflow-y-auto">
+        <div
+          v-for="(item, index) in headerList"
+          :key="index"
+          class="flex items-center gap-2"
+        >
+          <ElInput
+            v-model="item.key"
+            placeholder="请输入参数名"
+            class="w-48"
+            clearable
+          />
+          <span class="font-medium text-gray-600">:</span>
+          <ElInput
+            v-model="item.value"
+            placeholder="请输入参数值 (支持表达式 ${变量名})"
+            class="flex-1"
+            clearable
+          />
+          <ElButton
+            type="danger"
+            text
+            size="small"
+            @click="removeHeader(index)"
+          >
+            <template #icon>
+              <IconifyIcon icon="ep:delete" />
+            </template>
+          </ElButton>
+        </div>
+      </div>
+      <ElButton type="primary" class="w-full" @click="addHeader">
+        <template #icon>
+          <IconifyIcon icon="ep:plus" />
+        </template>
+        添加请求头
+      </ElButton>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
new file mode 100644
index 000000000..affd1cd0a
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue
@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElMessage, ElOption, ElSelect } from 'element-plus';
+
+import SignalMessageModal from '../../signal-message/SignalMessageModal.vue';
+
+defineOptions({ name: 'ReceiveTask' });
+const props = defineProps({
+  id: { type: String, default: '' },
+  type: { type: String, default: '' },
+});
+
+const bindMessageId = ref('');
+const messageMap = ref<Record<string, any>>({});
+const bpmnElement = ref<any>();
+const bpmnMessageRefsMap = ref<Record<string, any>>();
+const bpmnRootElements = ref<any>();
+
+const bpmnInstances = () => (window as any).bpmnInstances;
+
+const getBindMessage = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement;
+  bindMessageId.value =
+    bpmnElement.value.businessObject?.messageRef?.id || '-1';
+};
+
+/** 生成消息 ID */
+const generateMessageId = (): string => {
+  const timestamp = Date.now();
+  const random = Math.random().toString(36).slice(2, 6).toUpperCase();
+  return `Message_${timestamp}_${random}`;
+};
+
+/** 打开创建消息弹窗 */
+const openCreateModal = () => {
+  modalApi
+    .setData({
+      id: generateMessageId(),
+      isEdit: false,
+      name: '',
+      type: 'message',
+    })
+    .open();
+};
+
+const handleConfirm = (formData: { id: string; name: string }) => {
+  if (messageMap.value[formData.id]) {
+    ElMessage.error('该消息已存在, 请修改id后重新保存');
+    return;
+  }
+  const newMessage = bpmnInstances().moddle.create('bpmn:Message', formData);
+  bpmnRootElements.value.push(newMessage);
+  messageMap.value[formData.id] = formData.name;
+  if (bpmnMessageRefsMap.value) {
+    bpmnMessageRefsMap.value[formData.id] = newMessage;
+  }
+};
+
+const [Modal, modalApi] = useVbenModal({
+  connectedComponent: SignalMessageModal,
+});
+const updateTaskMessage = (messageId: string) => {
+  if (messageId === '-1') {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      messageRef: null,
+    });
+  } else {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      messageRef: bpmnMessageRefsMap.value?.[messageId],
+    });
+  }
+};
+
+onMounted(() => {
+  bpmnMessageRefsMap.value = Object.create(null);
+  bpmnRootElements.value =
+    bpmnInstances().modeler.getDefinitions().rootElements;
+  bpmnRootElements.value
+    .filter((el: any) => el.$type === 'bpmn:Message')
+    .forEach((m: any) => {
+      // @ts-ignore
+      if (bpmnMessageRefsMap.value) {
+        bpmnMessageRefsMap.value[m.id] = m;
+      }
+      messageMap.value[m.id] = m.name;
+    });
+  messageMap.value['-1'] = '无';
+});
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+watch(
+  () => props.id,
+  () => {
+    nextTick(() => {
+      getBindMessage();
+    });
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="mt-2">
+    <div class="mb-2 flex justify-end">
+      <ElButton
+        type="primary"
+        link
+        size="small"
+        class="p-0"
+        @click="openCreateModal"
+      >
+        <template #icon>
+          <IconifyIcon class="size-4" icon="lucide:plus" />
+        </template>
+        创建新消息
+      </ElButton>
+    </div>
+    <div class="mb-1 flex items-center">
+      <span class="w-20 text-foreground">消息实例:</span>
+      <ElSelect
+        v-model="bindMessageId"
+        class="w-full"
+        @change="(value: any) => updateTaskMessage(value)"
+      >
+        <ElOption
+          v-for="key in Object.keys(messageMap)"
+          :key="key"
+          :value="key"
+          :label="messageMap[key]"
+        />
+      </ElSelect>
+    </div>
+    <Modal @confirm="handleConfirm" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
new file mode 100644
index 000000000..c15dad114
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ScriptTask.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import { nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+defineOptions({ name: 'ScriptTask' });
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const defaultTaskForm = ref({
+  scriptFormat: '',
+  script: '',
+  resource: '',
+  resultVariable: '',
+});
+const scriptTaskForm = ref<any>({});
+const bpmnElement = ref();
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+const resetTaskForm = () => {
+  for (const key in defaultTaskForm.value) {
+    // @ts-ignore
+    scriptTaskForm.value[key] =
+      bpmnElement.value?.businessObject[
+        key as keyof typeof defaultTaskForm.value
+      ] || defaultTaskForm.value[key as keyof typeof defaultTaskForm.value];
+  }
+  scriptTaskForm.value.scriptType = scriptTaskForm.value.script
+    ? 'inline'
+    : 'external';
+};
+const updateElementTask = () => {
+  const taskAttr = Object.create(null);
+  taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null;
+  taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null;
+  if (scriptTaskForm.value.scriptType === 'inline') {
+    taskAttr.script = scriptTaskForm.value.script || null;
+    taskAttr.resource = null;
+  } else {
+    taskAttr.resource = scriptTaskForm.value.resource || null;
+    taskAttr.script = null;
+  }
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr);
+};
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement;
+    nextTick(() => {
+      resetTaskForm();
+    });
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="mt-4">
+    <ElForm label-width="80px">
+      <ElFormItem label="脚本格式">
+        <ElInput
+          v-model="scriptTaskForm.scriptFormat"
+          clearable
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </ElFormItem>
+      <!-- TODO scriptType  外部资源 和 内联脚本，  flowable 文档 https://www.flowable.com/open-source/docs/bpmn/ch07b-BPMN-Constructs#script-task  没看到到有相应的属性 -->
+      <ElFormItem label="脚本类型">
+        <ElSelect v-model="scriptTaskForm.scriptType">
+          <ElOption value="inline" label="内联脚本" />
+          <ElOption value="external" label="外部资源" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
+        <ElInput
+          type="textarea"
+          v-model="scriptTaskForm.script"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          clearable
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </ElFormItem>
+      <ElFormItem
+        label="资源地址"
+        v-show="scriptTaskForm.scriptType === 'external'"
+      >
+        <ElInput
+          v-model="scriptTaskForm.resource"
+          clearable
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </ElFormItem>
+      <ElFormItem label="结果变量">
+        <ElInput
+          v-model="scriptTaskForm.resultVariable"
+          clearable
+          @input="updateElementTask()"
+          @change="updateElementTask()"
+        />
+      </ElFormItem>
+    </ElForm>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
new file mode 100644
index 000000000..2994f1eb9
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/ServiceTask.vue
@@ -0,0 +1,487 @@
+<!-- eslint-disable prettier/prettier -->
+<script lang="ts" setup>
+import { inject, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadioButton,
+  ElRadioGroup,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus';
+
+import { updateElementExtensions } from '../../../utils';
+import HttpHeaderEditor from './HttpHeaderEditor.vue';
+
+defineOptions({ name: 'ServiceTask' });
+const props = defineProps({
+  id: { type: String, default: '' },
+  type: { type: String, default: '' },
+});
+
+const prefix = (inject('prefix', 'flowable') || 'flowable') as string;
+const flowableTypeKey = `${prefix}:type`;
+const flowableFieldType = `${prefix}:Field`;
+
+const HTTP_FIELD_NAMES = [
+  'requestMethod',
+  'requestUrl',
+  'requestHeaders',
+  'disallowRedirects',
+  'ignoreException',
+  'saveResponseParameters',
+  'resultVariablePrefix',
+  'saveResponseParametersTransient',
+  'saveResponseVariableAsJson',
+];
+const HTTP_BOOLEAN_FIELDS = new Set([
+  'disallowRedirects',
+  'ignoreException',
+  'saveResponseParameters',
+  'saveResponseParametersTransient',
+  'saveResponseVariableAsJson',
+]);
+
+const DEFAULT_TASK_FORM = {
+  executeType: '',
+  class: '',
+  expression: '',
+  delegateExpression: '',
+};
+
+const DEFAULT_HTTP_FORM = {
+  requestMethod: 'GET',
+  requestUrl: '',
+  requestHeaders: 'Content-Type: application/json',
+  resultVariablePrefix: '',
+  disallowRedirects: false,
+  ignoreException: false,
+  saveResponseParameters: false,
+  saveResponseParametersTransient: false,
+  saveResponseVariableAsJson: false,
+};
+
+const serviceTaskForm = ref({ ...DEFAULT_TASK_FORM });
+const httpTaskForm = ref<any>({ ...DEFAULT_HTTP_FORM });
+const bpmnElement = ref();
+const httpInitializing = ref(false);
+
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+
+// 判断字符串是否包含表达式
+const isExpression = (value: string): boolean => {
+  if (!value) return false;
+  // 检测 ${...} 或 #{...} 格式的表达式
+  return /\$\{[^}]+\}/.test(value) || /#\{[^}]+\}/.test(value);
+};
+
+const collectHttpExtensionInfo = () => {
+  const businessObject = bpmnElement.value?.businessObject;
+  const extensionElements = businessObject?.extensionElements;
+  const httpFields = new Map<string, string>();
+  const httpFieldTypes = new Map<string, 'expression' | 'string'>();
+  const otherExtensions: any[] = [];
+
+  extensionElements?.values?.forEach((item: any) => {
+    if (
+      item?.$type === flowableFieldType &&
+      HTTP_FIELD_NAMES.includes(item.name)
+    ) {
+      const value = item.string ?? item.stringValue ?? item.expression ?? '';
+      const fieldType = item.expression ? 'expression' : 'string';
+      httpFields.set(item.name, value);
+      httpFieldTypes.set(item.name, fieldType);
+    } else {
+      otherExtensions.push(item);
+    }
+  });
+
+  return { httpFields, httpFieldTypes, otherExtensions };
+};
+
+const resetHttpDefaults = () => {
+  httpInitializing.value = true;
+  httpTaskForm.value = { ...DEFAULT_HTTP_FORM };
+  nextTick(() => {
+    httpInitializing.value = false;
+  });
+};
+
+const resetHttpForm = () => {
+  httpInitializing.value = true;
+  const { httpFields } = collectHttpExtensionInfo();
+  const nextForm: any = { ...DEFAULT_HTTP_FORM };
+
+  HTTP_FIELD_NAMES.forEach((name) => {
+    const stored = httpFields.get(name);
+    if (stored !== undefined) {
+      nextForm[name] = HTTP_BOOLEAN_FIELDS.has(name)
+        ? stored === 'true'
+        : stored;
+    }
+  });
+
+  httpTaskForm.value = nextForm;
+  nextTick(() => {
+    httpInitializing.value = false;
+    updateHttpExtensions(true);
+  });
+};
+
+const resetServiceTaskForm = () => {
+  const businessObject = bpmnElement.value?.businessObject;
+  const nextForm = { ...DEFAULT_TASK_FORM };
+
+  if (businessObject) {
+    if (businessObject.class) {
+      nextForm.class = businessObject.class;
+      nextForm.executeType = 'class';
+    }
+    if (businessObject.expression) {
+      nextForm.expression = businessObject.expression;
+      nextForm.executeType = 'expression';
+    }
+    if (businessObject.delegateExpression) {
+      nextForm.delegateExpression = businessObject.delegateExpression;
+      nextForm.executeType = 'delegateExpression';
+    }
+    if (businessObject.$attrs?.[flowableTypeKey] === 'http') {
+      nextForm.executeType = 'http';
+    } else {
+      // 兜底：如缺少 flowable:type=http，但扩展里已有 HTTP 的字段，也认为是 HTTP
+      const { httpFields } = collectHttpExtensionInfo();
+      if (httpFields.size > 0) {
+        nextForm.executeType = 'http';
+      }
+    }
+  }
+
+  serviceTaskForm.value = nextForm;
+
+  if (nextForm.executeType === 'http') {
+    resetHttpForm();
+  } else {
+    resetHttpDefaults();
+  }
+};
+
+const shouldPersistField = (name: string, value: any) => {
+  if (HTTP_BOOLEAN_FIELDS.has(name)) return true;
+  if (name === 'requestMethod') return true;
+  if (name === 'requestUrl') return !!value;
+  return value !== undefined && value !== '';
+};
+
+const updateHttpExtensions = (force = false) => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  if (
+    !force &&
+    (httpInitializing.value || serviceTaskForm.value.executeType !== 'http')
+  ) {
+    return;
+  }
+
+  const {
+    httpFields: existingFields,
+    httpFieldTypes: existingTypes,
+    otherExtensions,
+  } = collectHttpExtensionInfo();
+
+  const desiredEntries: [string, string][] = [];
+  HTTP_FIELD_NAMES.forEach((name) => {
+    const rawValue = httpTaskForm.value[name];
+    if (!shouldPersistField(name, rawValue)) {
+      return;
+    }
+
+    const persisted = HTTP_BOOLEAN_FIELDS.has(name)
+      ? String(!!rawValue)
+      : (rawValue === undefined
+        ? ''
+        : rawValue.toString());
+
+    desiredEntries.push([name, persisted]);
+  });
+
+  // 检查是否有变化：不仅比较值，还要比较字段类型（string vs expression）
+  if (!force && desiredEntries.length === existingFields.size) {
+    let noChange = true;
+    for (const [name, value] of desiredEntries) {
+      const existingValue = existingFields.get(name);
+      const existingType = existingTypes.get(name);
+      const currentType = isExpression(value) ? 'expression' : 'string';
+      if (existingValue !== value || existingType !== currentType) {
+        noChange = false;
+        break;
+      }
+    }
+    if (noChange) {
+      return;
+    }
+  }
+
+  const moddle = bpmnInstances().moddle;
+  const httpFieldElements = desiredEntries.map(([name, value]) => {
+    // 根据值是否包含表达式来决定使用 string 还是 expression 属性
+    const isExpr = isExpression(value);
+    return moddle.create(flowableFieldType, {
+      name,
+      ...(isExpr ? { expression: value } : { string: value }),
+    });
+  });
+
+  updateElementExtensions(bpmnElement, [
+    ...otherExtensions,
+    ...httpFieldElements,
+  ]);
+};
+
+const removeHttpExtensions = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+  const { httpFields, otherExtensions } = collectHttpExtensionInfo();
+  if (httpFields.size === 0) {
+    return;
+  }
+
+  if (otherExtensions.length === 0) {
+    bpmnInstances().modeling.updateProperties(bpmnElement, {
+      extensionElements: null,
+    });
+    return;
+  }
+
+  updateElementExtensions(bpmnElement, otherExtensions);
+};
+
+const updateElementTask = () => {
+  const instances = bpmnInstances();
+  if (!instances || !instances.bpmnElement) return;
+  // 直接使用原始BPMN元素，避免Vue响应式代理问题
+  const bpmnElement = instances.bpmnElement;
+
+  const taskAttr: Record<string, any> = {
+    class: null,
+    expression: null,
+    delegateExpression: null,
+    [flowableTypeKey]: null,
+  };
+
+  const type = serviceTaskForm.value.executeType;
+  if (
+    type === 'class' ||
+    type === 'expression' ||
+    type === 'delegateExpression'
+  ) {
+    taskAttr[type] = serviceTaskForm.value[type] || null;
+  } else if (type === 'http') {
+    taskAttr[flowableTypeKey] = 'http';
+  }
+
+  bpmnInstances().modeling.updateProperties(bpmnElement, taskAttr);
+
+  if (type === 'http') {
+    updateHttpExtensions(true);
+  } else {
+    removeHttpExtensions();
+  }
+};
+
+const handleExecuteTypeChange = (value: any) => {
+  serviceTaskForm.value.executeType = value;
+  if (value === 'http') {
+    resetHttpForm();
+  }
+  updateElementTask();
+};
+
+/** 打开请求头编辑器 */
+const openHttpHeaderEditor = () => {
+  httpHeaderEditorApi
+    .setData({
+      headers: httpTaskForm.value.requestHeaders,
+    })
+    .open();
+};
+
+/** 保存请求头 */
+const handleHeadersSave = (headersStr: string) => {
+  httpTaskForm.value.requestHeaders = headersStr;
+};
+
+const [HttpHeaderEditorModal, httpHeaderEditorApi] = useVbenModal({
+  connectedComponent: HttpHeaderEditor,
+});
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement;
+    nextTick(() => {
+      resetServiceTaskForm();
+    });
+  },
+  { immediate: true },
+);
+
+watch(
+  () => httpTaskForm.value,
+  () => {
+    updateHttpExtensions();
+  },
+  { deep: true },
+);
+</script>
+
+<template>
+  <div>
+    <ElForm label-width="100px">
+      <ElFormItem label="执行类型" key="executeType">
+        <ElSelect
+          v-model="serviceTaskForm.executeType"
+          @change="handleExecuteTypeChange"
+        >
+          <ElOption label="Java类" value="class" />
+          <ElOption label="表达式" value="expression" />
+          <ElOption label="代理表达式" value="delegateExpression" />
+          <ElOption label="HTTP 调用" value="http" />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        v-if="serviceTaskForm.executeType === 'class'"
+        label="Java类"
+        prop="class"
+        key="execute-class"
+      >
+        <ElInput
+          v-model="serviceTaskForm.class"
+          clearable
+          @change="updateElementTask"
+        />
+      </ElFormItem>
+      <ElFormItem
+        v-if="serviceTaskForm.executeType === 'expression'"
+        label="表达式"
+        prop="expression"
+        key="execute-expression"
+      >
+        <ElInput
+          v-model="serviceTaskForm.expression"
+          clearable
+          @change="updateElementTask"
+        />
+      </ElFormItem>
+      <ElFormItem
+        v-if="serviceTaskForm.executeType === 'delegateExpression'"
+        label="代理表达式"
+        prop="delegateExpression"
+        key="execute-delegate"
+      >
+        <ElInput
+          v-model="serviceTaskForm.delegateExpression"
+          clearable
+          @change="updateElementTask"
+        />
+      </ElFormItem>
+      <template v-if="serviceTaskForm.executeType === 'http'">
+        <ElFormItem label="请求方法" key="http-method" prop="requestMethod">
+          <ElRadioGroup v-model="httpTaskForm.requestMethod">
+            <ElRadioButton value="GET">GET</ElRadioButton>
+            <ElRadioButton value="POST">POST</ElRadioButton>
+            <ElRadioButton value="PUT">PUT</ElRadioButton>
+            <ElRadioButton value="DELETE">DELETE</ElRadioButton>
+          </ElRadioGroup>
+        </ElFormItem>
+        <ElFormItem label="请求地址" key="http-url" prop="requestUrl">
+          <ElInput v-model="httpTaskForm.requestUrl" clearable />
+        </ElFormItem>
+        <ElFormItem label="请求头" key="http-headers" prop="requestHeaders">
+          <div class="flex w-full flex-col gap-2">
+            <ElInput
+              type="textarea"
+              v-model="httpTaskForm.requestHeaders"
+              :autosize="{ minRows: 4, maxRows: 8 }"
+              readonly
+              placeholder="点击右侧编辑按钮添加请求头"
+              class="min-w-0 flex-1"
+            />
+            <div class="flex w-full items-center justify-center">
+              <ElButton
+                class="flex flex-1 items-center justify-center"
+                size="small"
+                type="primary"
+                @click="openHttpHeaderEditor"
+              >
+                <template #icon>
+                  <IconifyIcon icon="ep:edit" />
+                </template>
+                编辑
+              </ElButton>
+            </div>
+          </div>
+        </ElFormItem>
+        <ElFormItem
+          label="禁止重定向"
+          key="http-disallow-redirects"
+          prop="disallowRedirects"
+        >
+          <ElSwitch v-model="httpTaskForm.disallowRedirects" />
+        </ElFormItem>
+        <ElFormItem
+          label="忽略异常"
+          key="http-ignore-exception"
+          prop="ignoreException"
+        >
+          <ElSwitch v-model="httpTaskForm.ignoreException" />
+        </ElFormItem>
+        <ElFormItem
+          label="保存返回变量"
+          key="http-save-response"
+          prop="saveResponseParameters"
+        >
+          <ElSwitch v-model="httpTaskForm.saveResponseParameters" />
+        </ElFormItem>
+        <ElFormItem
+          label="是否瞬间变量"
+          key="http-save-transient"
+          prop="saveResponseParametersTransient"
+        >
+          <ElSwitch v-model="httpTaskForm.saveResponseParametersTransient" />
+        </ElFormItem>
+        <ElFormItem
+          label="返回变量前缀"
+          key="http-result-variable-prefix"
+          prop="resultVariablePrefix"
+        >
+          <ElInput v-model="httpTaskForm.resultVariablePrefix" />
+        </ElFormItem>
+        <ElFormItem
+          label="保存为 JSON 变量"
+          label-width="120px"
+          key="http-save-json"
+          prop="saveResponseVariableAsJson"
+        >
+          <ElSwitch v-model="httpTaskForm.saveResponseVariableAsJson" />
+        </ElFormItem>
+      </template>
+    </ElForm>
+    <!-- 请求头编辑器 -->
+    <HttpHeaderEditorModal @save="handleHeadersSave" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
new file mode 100644
index 000000000..b2b33fda4
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue
@@ -0,0 +1,571 @@
+<script lang="ts" setup>
+import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
+import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
+import type { SystemPostApi } from '#/api/system/post';
+import type { SystemRoleApi } from '#/api/system/role';
+import type { SystemUserApi } from '#/api/system/user';
+
+import {
+  computed,
+  h,
+  inject,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRaw,
+  watch,
+} from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { SelectOutlined } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElSelect,
+  ElTreeSelect,
+} from 'element-plus';
+
+import { getUserGroupSimpleList } from '#/api/bpm/userGroup';
+import { getSimpleDeptList } from '#/api/system/dept';
+import { getSimplePostList } from '#/api/system/post';
+import { getSimpleRoleList } from '#/api/system/role';
+import { getSimpleUserList } from '#/api/system/user';
+import {
+  CANDIDATE_STRATEGY,
+  CandidateStrategy,
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT,
+} from '#/views/bpm/components/simple-process-design/consts';
+import { useFormFieldsPermission } from '#/views/bpm/components/simple-process-design/helpers';
+// TODO @jason：antd 是不是导入对齐这个？
+import { ProcessExpressionSelectModal } from '#/views/bpm/processExpression/components';
+
+defineOptions({ name: 'UserTask' });
+const props = defineProps({
+  id: {
+    type: String,
+    default: '',
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+});
+const prefix = inject('prefix');
+const userTaskForm = ref({
+  candidateStrategy: undefined, // 分配规则
+  candidateParam: [], // 分配选项
+  skipExpression: '', // 跳过表达式
+});
+const bpmnElement = ref<any>();
+const bpmnInstances = () => (window as Record<string, any>)?.bpmnInstances;
+
+const roleOptions = ref<SystemRoleApi.Role[]>([]); // 角色列表
+const deptTreeOptions = ref<any>(); // 部门树
+const postOptions = ref<SystemPostApi.Post[]>([]); // 岗位列表
+const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
+const userGroupOptions = ref<BpmUserGroupApi.UserGroup[]>([]); // 用户组列表
+const treeRef = ref<any>();
+
+const { formFieldOptions } = useFormFieldsPermission(FieldPermissionType.READ);
+
+// 定义 TreeSelect 的默认属性映射
+const defaultProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id',
+};
+// 表单内用户字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'UserSelect');
+});
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect');
+});
+
+const deptLevel = ref(1);
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源';
+  if (
+    userTaskForm.value.candidateStrategy ===
+    CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+  ) {
+    label = `${label}(指定部门向上)`;
+  } else if (
+    userTaskForm.value.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+  ) {
+    label = `${label}(表单内部门向上)`;
+  } else {
+    label = `${label}(发起人部门向上)`;
+  }
+  return label;
+});
+
+const otherExtensions = ref<any>();
+
+const resetTaskForm = () => {
+  const businessObject = bpmnElement.value.businessObject;
+  if (!businessObject) {
+    return;
+  }
+
+  const extensionElements =
+    businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] });
+  userTaskForm.value.candidateStrategy = extensionElements.values?.find(
+    (ex: any) => ex.$type === `${prefix}:CandidateStrategy`,
+  )?.value;
+  const candidateParamStr = extensionElements.values?.find(
+    (ex: any) => ex.$type === `${prefix}:CandidateParam`,
+  )?.value;
+  if (candidateParamStr && candidateParamStr.length > 0) {
+    // eslint-disable-next-line unicorn/prefer-switch
+    if (userTaskForm.value.candidateStrategy === CandidateStrategy.EXPRESSION) {
+      // 特殊：流程表达式，只有一个 input 输入框
+      // @ts-ignore
+      userTaskForm.value.candidateParam = [candidateParamStr];
+    } else if (
+      userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+    ) {
+      // 特殊：多级不部门负责人，需要通过'|'分割
+      userTaskForm.value.candidateParam = candidateParamStr
+        .split('|')[0]
+        .split(',')
+        .map((item: any) => {
+          // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+          const num = Number(item);
+          return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER
+            ? item
+            : num;
+        });
+      deptLevel.value = +candidateParamStr.split('|')[1];
+    } else if (
+      userTaskForm.value.candidateStrategy ===
+        CandidateStrategy.START_USER_DEPT_LEADER ||
+      userTaskForm.value.candidateStrategy ===
+        CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+    ) {
+      // @ts-ignore
+      userTaskForm.value.candidateParam = +candidateParamStr;
+      deptLevel.value = +candidateParamStr;
+    } else if (
+      userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.FORM_DEPT_LEADER
+    ) {
+      userTaskForm.value.candidateParam = candidateParamStr.split('|')[0];
+      deptLevel.value = +candidateParamStr.split('|')[1];
+    } else {
+      userTaskForm.value.candidateParam = candidateParamStr
+        .split(',')
+        .map((item: any) => {
+          // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+          const num = Number(item);
+          return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER
+            ? item
+            : num;
+        });
+    }
+  } else {
+    userTaskForm.value.candidateParam = [];
+  }
+
+  otherExtensions.value =
+    extensionElements.values?.filter(
+      (ex: any) =>
+        ex.$type !== `${prefix}:CandidateStrategy` &&
+        ex.$type !== `${prefix}:CandidateParam`,
+    ) ?? [];
+
+  // 跳过表达式
+  userTaskForm.value.skipExpression =
+    businessObject.skipExpression === undefined
+      ? ''
+      : businessObject.skipExpression;
+
+  // 改用通过extensionElements来存储数据
+
+  // if (businessObject.candidateStrategy != undefined) {
+  //   userTaskForm.value.candidateStrategy = parseInt(
+  //     businessObject.candidateStrategy,
+  //   ) as any;
+  // } else {
+  //   userTaskForm.value.candidateStrategy = undefined;
+  // }
+  // if (
+  //   businessObject.candidateParam &&
+  //   businessObject.candidateParam.length > 0
+  // ) {
+  //   if (userTaskForm.value.candidateStrategy === 60) {
+  //     // 特殊：流程表达式，只有一个 input 输入框
+  //     userTaskForm.value.candidateParam = [businessObject.candidateParam];
+  //   } else {
+  //     userTaskForm.value.candidateParam = businessObject.candidateParam
+  //       .split(',')
+  //       .map((item) => item);
+  //   }
+  // } else {
+  //   userTaskForm.value.candidateParam = [];
+  // }
+};
+
+/** 更新 candidateStrategy 字段时，需要清空 candidateParam，并触发 bpmn 图更新 */
+const changeCandidateStrategy = () => {
+  userTaskForm.value.candidateParam = [];
+  deptLevel.value = 1;
+  // 注释 by 芋艿：这个交互很多用户反馈费解，https://t.zsxq.com/xNmas 所以暂时屏蔽
+  // if (userTaskForm.value.candidateStrategy === CandidateStrategy.FORM_USER) {
+  //   // 特殊处理表单内用户字段，当只有发起人选项时应选中发起人
+  //   if (!userFieldOnFormOptions.value || userFieldOnFormOptions.value.length <= 1) {
+  //     userTaskForm.value.candidateStrategy = CandidateStrategy.START_USER
+  //   }
+  // }
+  updateElementTask();
+};
+
+/** 选中某个 options 时候，更新 bpmn 图  */
+const updateElementTask = () => {
+  let candidateParam = Array.isArray(userTaskForm.value.candidateParam)
+    ? userTaskForm.value.candidateParam.join(',')
+    : userTaskForm.value.candidateParam;
+
+  // 特殊处理多级部门情况
+  if (
+    userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+    userTaskForm.value.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+  ) {
+    candidateParam += `|${deptLevel.value}`;
+  }
+  // 特殊处理发起人部门负责人、发起人连续部门负责人
+  if (
+    userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.START_USER_DEPT_LEADER ||
+    userTaskForm.value.candidateStrategy ===
+      CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
+  ) {
+    candidateParam = `${deptLevel.value}`;
+  }
+
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: [
+      ...otherExtensions.value,
+      bpmnInstances().moddle.create(`${prefix}:CandidateStrategy`, {
+        value: userTaskForm.value.candidateStrategy,
+      }),
+      bpmnInstances().moddle.create(`${prefix}:CandidateParam`, {
+        value: candidateParam,
+      }),
+    ],
+  });
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions,
+  });
+
+  // 改用通过extensionElements来存储数据
+  // return;
+  // bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+  //   candidateStrategy: userTaskForm.value.candidateStrategy,
+  //   candidateParam: userTaskForm.value.candidateParam.join(','),
+  // });
+};
+
+const updateSkipExpression = () => {
+  if (
+    userTaskForm.value.skipExpression &&
+    userTaskForm.value.skipExpression !== ''
+  ) {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      skipExpression: userTaskForm.value.skipExpression,
+    });
+  } else {
+    bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+      skipExpression: null,
+    });
+  }
+};
+
+// 打开监听器弹窗
+const [ProcessExpressionSelectModalComp, ProcessExpressionSelectModalApi] =
+  useVbenModal({
+    connectedComponent: ProcessExpressionSelectModal,
+    destroyOnClose: true,
+  });
+const openProcessExpressionDialog = async () => {
+  ProcessExpressionSelectModalApi.open();
+};
+const selectProcessExpression = (
+  expression: BpmProcessExpressionApi.ProcessExpression,
+) => {
+  // @ts-ignore
+  userTaskForm.value.candidateParam = [expression.expression];
+  updateElementTask();
+};
+
+const handleFormUserChange = (e: any) => {
+  if (e === 'PROCESS_START_USER_ID') {
+    userTaskForm.value.candidateParam = [];
+    // @ts-ignore
+    userTaskForm.value.candidateStrategy = CandidateStrategy.START_USER;
+  }
+  updateElementTask();
+};
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement;
+    nextTick(() => {
+      resetTaskForm();
+    });
+  },
+  { immediate: true },
+);
+
+onMounted(async () => {
+  // 获得角色列表
+  roleOptions.value = await getSimpleRoleList();
+  // 获得部门列表
+  const deptOptions = await getSimpleDeptList();
+  deptTreeOptions.value = handleTree(deptOptions, 'id');
+  // 获得岗位列表
+  postOptions.value = await getSimplePostList();
+  // 获得用户列表
+  userOptions.value = await getSimpleUserList();
+  // 获得用户组列表
+  userGroupOptions.value = await getUserGroupSimpleList();
+});
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null;
+});
+</script>
+
+<template>
+  <ElForm label-width="100px">
+    <ElFormItem label="规则类型" prop="candidateStrategy">
+      <ElSelect
+        v-model="userTaskForm.candidateStrategy"
+        clearable
+        style="width: 100%"
+        @change="changeCandidateStrategy"
+      >
+        <ElOption
+          v-for="(dict, index) in CANDIDATE_STRATEGY"
+          :key="index"
+          :value="dict.value"
+          :label="dict.label"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.ROLE"
+      label="指定角色"
+      prop="candidateParam"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="item in roleOptions"
+          :key="item.id"
+          :value="item.id!"
+          :label="item.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        userTaskForm.candidateStrategy === CandidateStrategy.DEPT_MEMBER ||
+        userTaskForm.candidateStrategy === CandidateStrategy.DEPT_LEADER ||
+        userTaskForm.candidateStrategy ===
+          CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
+      "
+      label="指定部门"
+      prop="candidateParam"
+    >
+      <ElTreeSelect
+        ref="treeRef"
+        v-model="userTaskForm.candidateParam"
+        :data="deptTreeOptions"
+        :props="defaultProps"
+        placeholder="加载中，请稍后"
+        multiple
+        check-strictly
+        show-checkbox
+        @change="updateElementTask"
+      />
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.POST"
+      label="指定岗位"
+      prop="candidateParam"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="item in postOptions"
+          :key="item.id"
+          :value="item.id!"
+          :label="item.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.USER"
+      label="指定用户"
+      prop="candidateParam"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="item in userOptions"
+          :key="item.id"
+          :value="item.id!"
+          :label="item.nickname"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.USER_GROUP"
+      label="指定用户组"
+      prop="candidateParam"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="item in userGroupOptions"
+          :key="item.id"
+          :value="item.id"
+          :label="item.name"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.FORM_USER"
+      label="表单内用户字段"
+      prop="formUser"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        style="width: 100%"
+        @change="handleFormUserChange"
+      >
+        <ElOption
+          v-for="(item, idx) in userFieldOnFormOptions"
+          :key="idx"
+          :value="item.field"
+          :disabled="!item.required"
+          :label="item.title"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        userTaskForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+      "
+      label="表单内部门字段"
+      prop="formDept"
+    >
+      <ElSelect
+        v-model="userTaskForm.candidateParam"
+        clearable
+        style="width: 100%"
+        @change="updateElementTask"
+      >
+        <ElOption
+          v-for="(item, idx) in deptFieldOnFormOptions"
+          :key="idx"
+          :value="item.field"
+          :disabled="!item.required"
+          :label="item.title"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="
+        userTaskForm.candidateStrategy ===
+          CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+        userTaskForm.candidateStrategy ===
+          CandidateStrategy.START_USER_DEPT_LEADER ||
+        userTaskForm.candidateStrategy ===
+          CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+        userTaskForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER
+      "
+      :label="deptLevelLabel!"
+      prop="deptLevel"
+    >
+      <ElSelect v-model="deptLevel" clearable @change="updateElementTask">
+        <ElOption
+          v-for="(item, index) in MULTI_LEVEL_DEPT"
+          :key="index"
+          :value="item.value"
+          :label="item.label"
+        />
+      </ElSelect>
+    </ElFormItem>
+    <ElFormItem
+      v-if="userTaskForm.candidateStrategy === CandidateStrategy.EXPRESSION"
+      label="流程表达式"
+      prop="candidateParam"
+    >
+      <ElInput
+        type="textarea"
+        v-model="userTaskForm.candidateParam[0]"
+        clearable
+        style="width: 100%"
+        @change="updateElementTask"
+      />
+      <div class="mt-2 flex w-full items-center justify-center">
+        <ElButton
+          class="flex flex-1 items-center justify-center"
+          type="primary"
+          size="small"
+          :icon="h(SelectOutlined)"
+          @click="openProcessExpressionDialog"
+        >
+          选择表达式
+        </ElButton>
+      </div>
+      <!-- 选择弹窗 -->
+      <ProcessExpressionSelectModalComp @select="selectProcessExpression" />
+    </ElFormItem>
+
+    <ElFormItem label="跳过表达式" prop="skipExpression">
+      <ElInput
+        type="textarea"
+        v-model="userTaskForm.skipExpression"
+        clearable
+        style="width: 100%"
+        @change="updateSkipExpression"
+      />
+    </ElFormItem>
+  </ElForm>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
new file mode 100644
index 000000000..650f16651
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/CycleConfig.vue
@@ -0,0 +1,391 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+import dayjs from 'dayjs';
+import {
+  ElButton,
+  ElButtonGroup,
+  ElCheckbox,
+  ElCheckboxGroup,
+  ElDatePicker,
+  ElInput,
+  ElInputNumber,
+  ElRadio,
+  ElRadioGroup,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['change']);
+
+const tab = ref('cron');
+const cronStr = ref(props.value || '* * * * * ?');
+const fields = ref({
+  second: '*',
+  minute: '*',
+  hour: '*',
+  day: '*',
+  month: '*',
+  week: '?',
+  year: '',
+});
+const cronFieldList = [
+  { key: 'second', label: '秒', min: 0, max: 59 },
+  { key: 'minute', label: '分', min: 0, max: 59 },
+  { key: 'hour', label: '时', min: 0, max: 23 },
+  { key: 'day', label: '天', min: 1, max: 31 },
+  { key: 'month', label: '月', min: 1, max: 12 },
+  { key: 'week', label: '周', min: 1, max: 7 },
+  { key: 'year', label: '年', min: 1970, max: 2099 },
+];
+const activeField = ref('second');
+const cronMode = ref({
+  second: 'every',
+  minute: 'every',
+  hour: 'every',
+  day: 'every',
+  month: 'every',
+  week: 'every',
+  year: 'every',
+});
+const cronAppoint = ref({
+  second: [],
+  minute: [],
+  hour: [],
+  day: [],
+  month: [],
+  week: [],
+  year: [],
+});
+const cronRange = ref({
+  second: [0, 1],
+  minute: [0, 1],
+  hour: [0, 1],
+  day: [1, 2],
+  month: [1, 2],
+  week: [1, 2],
+  year: [1970, 1971],
+});
+const cronStep = ref({
+  second: [1, 1],
+  minute: [1, 1],
+  hour: [1, 1],
+  day: [1, 1],
+  month: [1, 1],
+  week: [1, 1],
+  year: [1970, 1],
+});
+
+function pad(n) {
+  return n < 10 ? `0${n}` : `${n}`;
+}
+
+watch(
+  [fields, cronMode, cronAppoint, cronRange, cronStep],
+  () => {
+    // 组装cron表达式
+    const arr = cronFieldList.map((f) => {
+      if (cronMode.value[f.key] === 'every') return '*';
+      if (cronMode.value[f.key] === 'appoint')
+        return cronAppoint.value[f.key].join(',') || '*';
+      if (cronMode.value[f.key] === 'range')
+        return `${cronRange.value[f.key][0]}-${cronRange.value[f.key][1]}`;
+      if (cronMode.value[f.key] === 'step')
+        return `${cronStep.value[f.key][0]}/${cronStep.value[f.key][1]}`;
+      return fields.value[f.key] || '*';
+    });
+    // week和year特殊处理
+    arr[5] = arr[5] || '?';
+    cronStr.value = arr.join(' ');
+    if (tab.value === 'cron') emit('change', cronStr.value);
+  },
+  { deep: true },
+);
+
+// 标准格式
+const isoStr = ref('');
+const repeat = ref(1);
+const isoDate = ref('');
+const durationUnits = [
+  { key: 'Y', label: '年', presets: [1, 2, 3, 4] },
+  { key: 'M', label: '月', presets: [1, 2, 3, 4] },
+  { key: 'D', label: '天', presets: [1, 2, 3, 4] },
+  { key: 'H', label: '时', presets: [4, 8, 12, 24] },
+  { key: 'm', label: '分', presets: [5, 10, 30, 50] },
+  { key: 'S', label: '秒', presets: [5, 10, 30, 50] },
+];
+const durationCustom = ref({ Y: '', M: '', D: '', H: '', m: '', S: '' });
+const isoDuration = ref('');
+
+function setDuration(key, val) {
+  durationCustom.value[key] = !val || Number.isNaN(val) ? '' : val;
+  updateDurationStr();
+}
+
+function updateDurationStr() {
+  let str = 'P';
+  str += durationCustom.value.Y ? `${durationCustom.value.Y}Y` : '';
+  str += durationCustom.value.M ? `${durationCustom.value.M}M` : '';
+  str += durationCustom.value.D ? `${durationCustom.value.D}D` : '';
+  str +=
+    durationCustom.value.H || durationCustom.value.m || durationCustom.value.S
+      ? 'T'
+      : '';
+  str += durationCustom.value.H ? `${durationCustom.value.H}H` : '';
+  str += durationCustom.value.m ? `${durationCustom.value.m}M` : '';
+  str += durationCustom.value.S ? `${durationCustom.value.S}S` : '';
+  isoDuration.value = str === 'P' ? '' : str;
+  updateIsoStr();
+}
+
+function updateIsoStr() {
+  let str = `R${repeat.value}`;
+  if (isoDate.value) {
+    const dateStr =
+      typeof isoDate.value === 'string'
+        ? isoDate.value
+        : isoDate.value.toISOString();
+    str += `/${dateStr}`;
+  }
+  if (isoDuration.value) str += `/${isoDuration.value}`;
+  isoStr.value = str;
+  if (tab.value === 'iso') emit('change', isoStr.value);
+}
+watch([repeat, isoDate], updateIsoStr);
+watch(durationCustom, updateDurationStr, { deep: true });
+watch(
+  () => props.value,
+  (val) => {
+    if (!val) return;
+    // 自动检测格式：以R开头的是ISO 8601格式，否则是CRON表达式
+    if (val.startsWith('R')) {
+      tab.value = 'iso';
+      isoStr.value = val;
+      // 解析ISO格式：R{repeat}/{date}/{duration}
+      const parts = val.split('/');
+      if (parts[0]) {
+        const repeatMatch = parts[0].match(/^R(\d+)$/);
+        if (repeatMatch) repeat.value = Number.parseInt(repeatMatch[1], 10);
+      }
+      // 解析date部分（ISO 8601日期时间格式）
+      const datePart = parts.find(
+        (p) => p.includes('T') && !p.startsWith('P') && !p.startsWith('R'),
+      );
+      if (datePart) {
+        isoDate.value = dayjs(datePart);
+      }
+      // 解析duration部分
+      const durationPart = parts.find((p) => p.startsWith('P'));
+      if (durationPart) {
+        const match = durationPart.match(
+          /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/,
+        );
+        if (match) {
+          durationCustom.value.Y = match[1] || '';
+          durationCustom.value.M = match[2] || '';
+          durationCustom.value.D = match[3] || '';
+          durationCustom.value.H = match[4] || '';
+          durationCustom.value.m = match[5] || '';
+          durationCustom.value.S = match[6] || '';
+          isoDuration.value = durationPart;
+        }
+      }
+    } else {
+      tab.value = 'cron';
+      cronStr.value = val;
+    }
+  },
+  { immediate: true },
+);
+</script>
+<template>
+  <ElTabs v-model="tab">
+    <ElTabPane name="cron" label="CRON表达式">
+      <div class="mb-2.5">
+        <ElInput
+          v-model="cronStr"
+          readonly
+          class="!w-[400px] font-bold"
+          key="cronStr"
+        />
+      </div>
+      <div class="mb-2 flex gap-2">
+        <ElInput
+          v-model="fields.second"
+          placeholder="秒"
+          class="w-20"
+          key="second"
+        />
+        <ElInput
+          v-model="fields.minute"
+          placeholder="分"
+          class="w-20"
+          key="minute"
+        />
+        <ElInput
+          v-model="fields.hour"
+          placeholder="时"
+          class="w-20"
+          key="hour"
+        />
+        <ElInput v-model="fields.day" placeholder="天" class="w-20" key="day" />
+        <ElInput
+          v-model="fields.month"
+          placeholder="月"
+          class="w-20"
+          key="month"
+        />
+        <ElInput
+          v-model="fields.week"
+          placeholder="周"
+          class="w-20"
+          key="week"
+        />
+        <ElInput
+          v-model="fields.year"
+          placeholder="年"
+          class="w-20"
+          key="year"
+        />
+      </div>
+      <ElTabs v-model="activeField" type="card" class="mb-2">
+        <ElTabPane
+          v-for="f in cronFieldList"
+          :key="f.key"
+          :name="f.key"
+          :label="f.label"
+        >
+          <div class="mb-2">
+            <ElRadioGroup v-model="cronMode[f.key]" :key="`radio-${f.key}`">
+              <ElRadio value="every" :key="`every-${f.key}`">
+                每{{ f.label }}
+              </ElRadio>
+              <ElRadio value="range" :key="`range-${f.key}`">
+                从
+                <ElInputNumber
+                  v-model="cronRange[f.key][0]"
+                  :min="f.min"
+                  :max="f.max"
+                  size="small"
+                  class="!w-[100px]"
+                  :key="`range0-${f.key}`"
+                />
+                到
+                <ElInputNumber
+                  v-model="cronRange[f.key][1]"
+                  :min="f.min"
+                  :max="f.max"
+                  size="small"
+                  class="!w-[100px]"
+                  :key="`range1-${f.key}`"
+                />
+                之间每{{ f.label }}
+              </ElRadio>
+              <ElRadio value="step" :key="`step-${f.key}`">
+                从第
+                <ElInputNumber
+                  v-model="cronStep[f.key][0]"
+                  :min="f.min"
+                  :max="f.max"
+                  size="small"
+                  class="!w-[100px]"
+                  :key="`step0-${f.key}`"
+                />
+                开始每
+                <ElInputNumber
+                  v-model="cronStep[f.key][1]"
+                  :min="1"
+                  :max="f.max"
+                  size="small"
+                  class="!w-[100px]"
+                  :key="`step1-${f.key}`"
+                />
+                {{ f.label }}
+              </ElRadio>
+              <ElRadio value="appoint" :key="`appoint-${f.key}`">
+                指定
+              </ElRadio>
+            </ElRadioGroup>
+          </div>
+          <div v-if="cronMode[f.key] === 'appoint'">
+            <ElCheckboxGroup
+              v-model="cronAppoint[f.key]"
+              :key="`group-${f.key}`"
+            >
+              <ElCheckbox
+                v-for="n in f.max + 1"
+                :key="`cb-${f.key}-${n - 1}`"
+                :value="pad(n - 1)"
+                :label="pad(n - 1)"
+              />
+            </ElCheckboxGroup>
+          </div>
+        </ElTabPane>
+      </ElTabs>
+    </ElTabPane>
+    <ElTabPane name="iso" label="标准格式">
+      <div class="mb-2.5">
+        <ElInput
+          v-model="isoStr"
+          placeholder="如R1/2025-05-21T21:59:54/P3DT30M30S"
+          class="w-[400px] font-bold"
+          key="isoStr"
+        />
+      </div>
+      <div class="mb-2.5">
+        循环次数：<ElInputNumber
+          v-model="repeat"
+          :min="1"
+          class="!w-[100px]"
+          key="repeat"
+        />
+      </div>
+      <div class="mb-2.5">
+        开始时间：<ElDatePicker
+          v-model="isoDate"
+          type="datetime"
+          placeholder="选择开始时间"
+          class="!w-[200px]"
+          key="isoDate"
+        />
+      </div>
+      <div class="mb-2.5">
+        间隔时长：<ElInput
+          v-model="isoDuration"
+          readonly
+          placeholder="如P3DT30M30S"
+          class="!w-[200px]"
+          key="isoDuration"
+        />
+      </div>
+      <div>
+        <div v-for="unit in durationUnits" :key="unit.key" class="mb-2">
+          <span>{{ unit.label }}：</span>
+          <ElButtonGroup>
+            <ElButton
+              v-for="val in unit.presets"
+              :key="val"
+              size="small"
+              @click="setDuration(unit.key, val)"
+            >
+              {{ val }}
+            </ElButton>
+          </ElButtonGroup>
+          <ElInput
+            v-model="durationCustom[unit.key]"
+            size="small"
+            class="ml-2 !w-[60px]"
+            placeholder="自定义"
+            @change="setDuration(unit.key, durationCustom[unit.key])"
+          />
+        </div>
+      </div>
+    </ElTabPane>
+  </ElTabs>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
new file mode 100644
index 000000000..b817b0923
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/DurationConfig.vue
@@ -0,0 +1,95 @@
+<script setup>
+import { ref, watch } from 'vue';
+
+import { ElButton, ElButtonGroup, ElInput } from 'element-plus';
+
+const props = defineProps({
+  value: {
+    type: String,
+    default: '',
+  },
+});
+const emit = defineEmits(['change']);
+
+const units = [
+  { key: 'Y', label: '年', presets: [1, 2, 3, 4] },
+  { key: 'M', label: '月', presets: [1, 2, 3, 4] },
+  { key: 'D', label: '天', presets: [1, 2, 3, 4] },
+  { key: 'H', label: '时', presets: [4, 8, 12, 24] },
+  { key: 'm', label: '分', presets: [5, 10, 30, 50] },
+  { key: 'S', label: '秒', presets: [5, 10, 30, 50] },
+];
+const custom = ref({ Y: '', M: '', D: '', H: '', m: '', S: '' });
+const isoString = ref('');
+
+function setUnit(key, val) {
+  if (!val || Number.isNaN(val)) {
+    custom.value[key] = '';
+    return;
+  }
+  custom.value[key] = val;
+  updateIsoString();
+}
+
+function updateIsoString() {
+  let str = 'P';
+  if (custom.value.Y) str += `${custom.value.Y}Y`;
+  if (custom.value.M) str += `${custom.value.M}M`;
+  if (custom.value.D) str += `${custom.value.D}D`;
+  if (custom.value.H || custom.value.m || custom.value.S) str += 'T';
+  if (custom.value.H) str += `${custom.value.H}H`;
+  if (custom.value.m) str += `${custom.value.m}M`;
+  if (custom.value.S) str += `${custom.value.S}S`;
+  isoString.value = str === 'P' ? '' : str;
+  emit('change', isoString.value);
+}
+
+watch(
+  () => props.value,
+  (val) => {
+    if (!val) return;
+    // 解析ISO 8601字符串到custom
+    const match = val.match(
+      /^P(?:(\d+)Y)?(?:(\d+)M)?(?:(\d+)D)?(?:T(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?)?$/,
+    );
+    if (match) {
+      custom.value.Y = match[1] || '';
+      custom.value.M = match[2] || '';
+      custom.value.D = match[3] || '';
+      custom.value.H = match[4] || '';
+      custom.value.m = match[5] || '';
+      custom.value.S = match[6] || '';
+      updateIsoString();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div class="mb-2.5">
+      当前选择：<ElInput v-model="isoString" readonly class="!w-[300px]" />
+    </div>
+    <div v-for="unit in units" :key="unit.key" class="mb-2">
+      <span>{{ unit.label }}：</span>
+      <ElButtonGroup>
+        <ElButton
+          v-for="val in unit.presets"
+          :key="val"
+          size="small"
+          @click="setUnit(unit.key, val)"
+        >
+          {{ val }}
+        </ElButton>
+      </ElButtonGroup>
+      <ElInput
+        v-model="custom[unit.key]"
+        size="small"
+        class="ml-2 !w-[60px]"
+        placeholder="自定义"
+        @change="setUnit(unit.key, custom[unit.key])"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
new file mode 100644
index 000000000..f3992a816
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/penal/time-event-config/TimeEventConfig.vue
@@ -0,0 +1,361 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { computed, nextTick, onMounted, ref, toRaw, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElButtonGroup,
+  ElDatePicker,
+  ElInput,
+  ElTooltip,
+} from 'element-plus';
+
+import CycleConfig from './CycleConfig.vue';
+import DurationConfig from './DurationConfig.vue';
+
+const props = defineProps({
+  businessObject: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const bpmnInstances = () => (window as any).bpmnInstances;
+const type: Ref<string> = ref('time');
+const condition: Ref<string> = ref('');
+const valid: Ref<boolean> = ref(false);
+// TODO @jason：const dateValue = ref<Dayjs>(); 需要么？
+const dateValue = ref();
+
+const placeholder = computed<string>(() => {
+  if (type.value === 'time') return '请输入时间';
+  if (type.value === 'duration') return '请输入持续时长';
+  if (type.value === 'cycle') return '请输入循环表达式';
+  return '';
+});
+const helpText = computed<string>(() => {
+  if (type.value === 'time') return '选择具体时间';
+  if (type.value === 'duration') return 'ISO 8601格式，如PT1H';
+  if (type.value === 'cycle') return 'CRON表达式或ISO 8601周期';
+  return '';
+});
+const helpHtml = computed<string>(() => {
+  if (type.value === 'duration') {
+    return `指定定时器之前要等待多长时间。S表示秒，M表示分，D表示天；P表示时间段，T表示精确到时间的时间段。<br>
+    时间格式依然为ISO 8601格式，一年两个月三天四小时五分六秒内，可以写成P1Y2M3DT4H5M6S。<br>
+    P是开始标记，T是时间和日期分割标记，没有日期只有时间T是不能省去的，比如1小时执行一次应写成PT1H。`;
+  }
+  if (type.value === 'cycle') {
+    return `支持CRON表达式（如0 0/30 * * * ?）或ISO 8601周期（如R3/PT10M）。`;
+  }
+  if (type.value === 'time') {
+    return `支持ISO 8601格式的时间（如2024-12-12T12:12:12）`;
+  }
+  return '';
+});
+
+// 初始化和监听
+function syncFromBusinessObject(): void {
+  if (props.businessObject) {
+    const timerDef = (props.businessObject.eventDefinitions || [])[0];
+    if (timerDef) {
+      if (timerDef.timeDate) {
+        type.value = 'time';
+        condition.value = timerDef.timeDate.body;
+      } else if (timerDef.timeDuration) {
+        type.value = 'duration';
+        condition.value = timerDef.timeDuration.body;
+      } else if (timerDef.timeCycle) {
+        type.value = 'cycle';
+        condition.value = timerDef.timeCycle.body;
+      }
+    }
+  }
+}
+onMounted(syncFromBusinessObject);
+
+// 切换类型
+function setType(t: string) {
+  type.value = t;
+  condition.value = '';
+  updateNode();
+}
+
+// 输入校验
+watch([type, condition], () => {
+  valid.value = validate();
+});
+
+function validate(): boolean {
+  if (type.value === 'time') {
+    return !!condition.value && !Number.isNaN(Date.parse(condition.value));
+  }
+  if (type.value === 'duration') {
+    return /^P.*$/.test(condition.value);
+  }
+  if (type.value === 'cycle') {
+    // 支持CRON表达式或ISO 8601周期格式：R{n}/P... 或 R{n}/{date}/P...
+    return /^(?:[0-9*/?, ]+|R\d+(?:\/[^/]+)*\/P.*)$/.test(condition.value);
+  }
+  return true;
+}
+
+// 选择时间 Modal
+const [DateModal, dateModalApi] = useVbenModal({
+  title: '选择时间',
+  // TODO @jason：antd 这里有个属性，需要么？
+  onConfirm: onDateConfirm,
+});
+
+function onDateChange(val: any) {
+  dateValue.value = val || undefined;
+}
+function onDateConfirm(): void {
+  if (dateValue.value) {
+    condition.value = dateValue.value.toISOString();
+    dateModalApi.close();
+    updateNode();
+  }
+}
+
+// 持续时长 Modal
+const [DurationModal, durationModalApi] = useVbenModal({
+  title: '时间配置',
+  // TODO @jason：antd 这里有个属性，需要么？
+  onConfirm: onDurationConfirm,
+});
+
+function onDurationChange(val: string) {
+  condition.value = val;
+}
+function onDurationConfirm(): void {
+  durationModalApi.close();
+  updateNode();
+}
+
+// 循环配置 Modal
+const [CycleModal, cycleModalApi] = useVbenModal({
+  title: '时间配置',
+  // TODO @jason：antd 这里有个属性，需要么？
+  onConfirm: onCycleConfirm,
+});
+
+function onCycleChange(val: string) {
+  condition.value = val;
+}
+function onCycleConfirm(): void {
+  cycleModalApi.close();
+  updateNode();
+}
+
+// 帮助说明 Modal
+const [HelpModal, helpModalApi] = useVbenModal({
+  class: 'w-[600px]',
+  title: '格式说明',
+  showCancelButton: false,
+  confirmText: '关闭',
+  onConfirm: () => helpModalApi.close(),
+});
+
+// 点击输入框时弹窗
+function handleInputClick(): void {
+  if (type.value === 'time') dateModalApi.open();
+  if (type.value === 'duration') durationModalApi.open();
+  if (type.value === 'cycle') cycleModalApi.open();
+}
+
+// 同步到节点
+function updateNode(): void {
+  const moddle = (window.bpmnInstances as any)?.moddle;
+  const modeling = (window.bpmnInstances as any)?.modeling;
+  const elementRegistry = (window.bpmnInstances as any)?.elementRegistry;
+  if (!moddle || !modeling || !elementRegistry) return;
+
+  // 获取元素
+  if (!props.businessObject || !props.businessObject.id) return;
+  const element = elementRegistry.get(props.businessObject.id);
+  if (!element) return;
+
+  // 1. 复用原有 timerDef，或新建
+  let timerDef =
+    element.businessObject.eventDefinitions &&
+    element.businessObject.eventDefinitions[0];
+  if (!timerDef) {
+    timerDef = bpmnInstances().bpmnFactory.create(
+      'bpmn:TimerEventDefinition',
+      {},
+    );
+    modeling.updateProperties(element, {
+      eventDefinitions: [timerDef],
+    });
+  }
+
+  // 2. 清空原有
+  delete timerDef.timeDate;
+  delete timerDef.timeDuration;
+  delete timerDef.timeCycle;
+
+  // 3. 设置新的
+  if (type.value === 'time' && condition.value) {
+    timerDef.timeDate = bpmnInstances().bpmnFactory.create(
+      'bpmn:FormalExpression',
+      {
+        body: condition.value,
+      },
+    );
+  } else if (type.value === 'duration' && condition.value) {
+    timerDef.timeDuration = bpmnInstances().bpmnFactory.create(
+      'bpmn:FormalExpression',
+      {
+        body: condition.value,
+      },
+    );
+  } else if (type.value === 'cycle' && condition.value) {
+    timerDef.timeCycle = bpmnInstances().bpmnFactory.create(
+      'bpmn:FormalExpression',
+      {
+        body: condition.value,
+      },
+    );
+  }
+
+  bpmnInstances().modeling.updateProperties(toRaw(element), {
+    eventDefinitions: [timerDef],
+  });
+}
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        syncFromBusinessObject();
+      });
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div class="panel-tab__content">
+    <div class="mt-2 flex items-center">
+      <span class="w-14">类型：</span>
+      <ElButtonGroup>
+        <ElButton
+          size="small"
+          :type="type === 'time' ? 'primary' : 'default'"
+          @click="setType('time')"
+        >
+          时间
+        </ElButton>
+        <ElButton
+          size="small"
+          :type="type === 'duration' ? 'primary' : 'default'"
+          @click="setType('duration')"
+        >
+          持续
+        </ElButton>
+        <ElButton
+          size="small"
+          :type="type === 'cycle' ? 'primary' : 'default'"
+          @click="setType('cycle')"
+        >
+          循环
+        </ElButton>
+      </ElButtonGroup>
+      <IconifyIcon
+        icon="ant-design:check-circle-filled"
+        v-if="valid"
+        class="ml-2 text-green-500"
+      />
+    </div>
+    <div class="mt-2 flex items-center gap-1">
+      <span class="w-14">条件：</span>
+      <ElInput
+        v-model="condition"
+        :placeholder="placeholder"
+        class="w-full"
+        :readonly="type !== 'duration' && type !== 'cycle'"
+        @click="handleInputClick"
+        @blur="updateNode"
+      >
+        <template #suffix>
+          <div class="flex items-center gap-1">
+            <ElTooltip v-if="!valid" content="格式错误" placement="top">
+              <IconifyIcon
+                icon="ant-design:exclamation-circle-filled"
+                class="text-orange-400"
+              />
+            </ElTooltip>
+            <ElTooltip :content="helpText" placement="top">
+              <IconifyIcon
+                icon="ant-design:question-circle-filled"
+                class="cursor-pointer text-[#409eff]"
+                @click="helpModalApi.open()"
+              />
+            </ElTooltip>
+            <ElButton
+              v-if="type === 'time'"
+              @click="dateModalApi.open()"
+              class="ml-1 flex items-center justify-center"
+              circle
+              size="small"
+            >
+              <IconifyIcon icon="ep:calendar" />
+            </ElButton>
+            <ElButton
+              v-if="type === 'duration'"
+              @click="durationModalApi.open()"
+              class="ml-1 flex items-center justify-center"
+              circle
+              size="small"
+            >
+              <IconifyIcon icon="ep:timer" />
+            </ElButton>
+            <ElButton
+              v-if="type === 'cycle'"
+              @click="cycleModalApi.open()"
+              class="ml-1 flex items-center justify-center"
+              circle
+              size="small"
+            >
+              <IconifyIcon icon="ep:setting" />
+            </ElButton>
+          </div>
+        </template>
+      </ElInput>
+    </div>
+
+    <!-- 时间选择器 -->
+    <DateModal>
+      <ElDatePicker
+        v-model="dateValue"
+        type="datetime"
+        placeholder="选择日期时间"
+        class="!w-full"
+        @change="onDateChange"
+      />
+    </DateModal>
+
+    <!-- 持续时长选择器 -->
+    <DurationModal>
+      <DurationConfig :value="condition" @change="onDurationChange" />
+    </DurationModal>
+
+    <!-- 循环配置器 -->
+    <CycleModal class="w-2/3">
+      <CycleConfig :value="condition" @change="onCycleChange" />
+    </CycleModal>
+
+    <!-- 帮助说明 -->
+    <HelpModal>
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-html="helpHtml"></div>
+    </HelpModal>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/index.scss b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/index.scss
new file mode 100644
index 000000000..a2d32d4f3
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/index.scss
@@ -0,0 +1,120 @@
+@use './process-designer';
+@use './process-panel';
+
+$success-color: #4eb819;
+$primary-color: #409eff;
+$danger-color: #f56c6c;
+$cancel-color: #909399;
+
+.process-viewer {
+  position: relative;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
+    repeat !important;
+  border: 1px solid #efefef;
+
+  .success-arrow {
+    fill: $success-color;
+    stroke: $success-color;
+  }
+
+  .success-conditional {
+    fill: white;
+    stroke: $success-color;
+  }
+
+  .success.djs-connection {
+    .djs-visual path {
+      stroke: $success-color !important;
+      //marker-end: url(#sequenceflow-end-white-success)!important;
+    }
+  }
+
+  .success.djs-connection.condition-expression {
+    .djs-visual path {
+      //marker-start: url(#conditional-flow-marker-white-success)!important;
+    }
+  }
+
+  .success.djs-shape {
+    .djs-visual rect {
+      fill: $success-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $success-color !important;
+    }
+
+    .djs-visual polygon {
+      stroke: $success-color !important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      fill: $success-color !important;
+      stroke: $success-color !important;
+    }
+
+    .djs-visual circle {
+      fill: $success-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $success-color !important;
+    }
+  }
+
+  .primary.djs-shape {
+    .djs-visual rect {
+      fill: $primary-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $primary-color !important;
+    }
+
+    .djs-visual polygon {
+      stroke: $primary-color !important;
+    }
+
+    .djs-visual circle {
+      fill: $primary-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $primary-color !important;
+    }
+  }
+
+  .danger.djs-shape {
+    .djs-visual rect {
+      fill: $danger-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $danger-color !important;
+    }
+
+    .djs-visual polygon {
+      stroke: $danger-color !important;
+    }
+
+    .djs-visual circle {
+      fill: $danger-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $danger-color !important;
+    }
+  }
+
+  .cancel.djs-shape {
+    .djs-visual rect {
+      fill: $cancel-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $cancel-color !important;
+    }
+
+    .djs-visual polygon {
+      stroke: $cancel-color !important;
+    }
+
+    .djs-visual circle {
+      fill: $cancel-color !important;
+      fill-opacity: 0.15 !important;
+      stroke: $cancel-color !important;
+    }
+  }
+}
+
+.process-viewer .djs-tooltip-container,
+.process-viewer .djs-overlay-container,
+.process-viewer .djs-palette {
+  display: none;
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-designer.scss b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-designer.scss
new file mode 100644
index 000000000..83418ca0a
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-designer.scss
@@ -0,0 +1,183 @@
+@use 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
+
+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .my-process-designer__header {
+    width: 100%;
+    min-height: 36px;
+
+    .el-button {
+      text-align: center;
+    }
+
+    .el-button-group {
+      margin: 4px;
+    }
+
+    .el-tooltip__popper {
+      .el-button {
+        width: 100%;
+        padding-right: 8px;
+        padding-left: 8px;
+        text-align: left;
+      }
+
+      .el-button:hover {
+        color: #fff;
+        background: rgb(64 158 255 / 80%);
+      }
+    }
+
+    .align {
+      position: relative;
+
+      i {
+        &::after {
+          position: absolute;
+          content: '|';
+          // transform: rotate(90deg) translate(200%, 60%);
+          transform: rotate(180deg) translate(271%, -10%);
+        }
+      }
+    }
+
+    .align.align-left i {
+      transform: rotate(90deg);
+    }
+
+    .align.align-right i {
+      transform: rotate(-90deg);
+    }
+
+    .align.align-top i {
+      transform: rotate(180deg);
+    }
+
+    .align.align-bottom i {
+      transform: rotate(0deg);
+    }
+
+    .align.align-center i {
+      transform: rotate(0deg);
+
+      &::after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(-0%, -5%);
+      }
+    }
+
+    .align.align-middle i {
+      transform: rotate(-90deg);
+
+      &::after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(0, -10%);
+      }
+    }
+  }
+
+  .my-process-designer__container {
+    display: inline-flex;
+    flex: 1;
+    width: 100%;
+
+    .my-process-designer__canvas {
+      position: relative;
+      flex: 1;
+      height: 100%;
+      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
+        repeat !important;
+
+      div.toggle-mode {
+        display: none;
+      }
+    }
+
+    .my-process-designer__property-panel {
+      z-index: 10;
+      height: 100%;
+      overflow: scroll;
+      overflow-y: auto;
+
+      * {
+        box-sizing: border-box;
+      }
+    }
+    // svg {
+    //   width: 100%;
+    //   height: 100%;
+    //   min-height: 100%;
+    //   overflow: hidden;
+    // }
+  }
+}
+
+//侧边栏配置
+// .djs-palette .two-column .open {
+.open {
+  // .djs-palette.open {
+  .djs-palette-entries {
+    div[class^='bpmn-icon-']::before,
+    div[class*='bpmn-icon-']::before {
+      line-height: unset;
+    }
+
+    div.entry {
+      position: relative;
+    }
+
+    div.entry:hover {
+      &::after {
+        position: absolute;
+        top: 0;
+        right: -10px;
+        bottom: 0;
+        z-index: 100;
+        box-sizing: border-box;
+        display: inline-block;
+        width: max-content;
+        padding: 0 16px;
+        overflow: hidden;
+        font-size: 0.5em;
+        font-variant: normal;
+        vertical-align: text-bottom;
+        text-transform: none;
+        text-decoration: inherit;
+        content: attr(title);
+        background: #fafafa;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-shadow: 0 0 6px #eee;
+        transform: translateX(100%);
+      }
+    }
+  }
+}
+
+pre {
+  height: 100%;
+  max-height: calc(80vh - 32px);
+  margin: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.hljs {
+  white-space: pre-wrap;
+}
+
+.hljs * {
+  font-family: Consolas, Monaco, monospace;
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss
new file mode 100644
index 000000000..d7e8cfbcd
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/theme/process-panel.scss
@@ -0,0 +1,127 @@
+.process-panel__container {
+  box-sizing: border-box;
+  max-height: 100%;
+  padding: 0 8px;
+  overflow-y: scroll;
+  border-left: 1px solid #eee;
+  box-shadow: 0 0 8px #ccc;
+}
+
+.panel-tab__title {
+  padding: 0 8px;
+  font-size: 1.1em;
+  font-weight: 600;
+  line-height: 1.2em;
+
+  i {
+    margin-right: 8px;
+    font-size: 1.2em;
+  }
+}
+
+.panel-tab__content {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 8px 16px;
+  border-top: 1px solid #eee;
+
+  .panel-tab__content--title {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 8px;
+
+    span {
+      flex: 1;
+      text-align: left;
+    }
+  }
+}
+
+.element-property {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  margin: 8px 0;
+
+  .element-property__label {
+    box-sizing: border-box;
+    display: block;
+    width: 90px;
+    padding-right: 12px;
+    overflow: hidden;
+    font-size: 14px;
+    line-height: 32px;
+    text-align: right;
+  }
+
+  .element-property__value {
+    flex: 1;
+    line-height: 32px;
+  }
+
+  .el-form-item {
+    width: 100%;
+    padding-bottom: 18px;
+    margin-bottom: 0;
+  }
+}
+
+.list-property {
+  flex-direction: column;
+
+  .element-listener-item {
+    display: inline-grid;
+    grid-template-columns: 16px auto 32px 32px;
+    grid-column-gap: 8px;
+    width: 100%;
+  }
+
+  .element-listener-item + .element-listener-item {
+    margin-top: 8px;
+  }
+}
+
+.listener-filed__title {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-top: 0;
+
+  span {
+    width: 200px;
+    font-size: 14px;
+    text-align: left;
+  }
+
+  i {
+    margin-right: 8px;
+  }
+}
+
+.element-drawer__button {
+  display: inline-flex;
+  justify-content: space-around;
+  width: 100%;
+  margin-top: 8px;
+}
+
+.element-drawer__button > .el-button {
+  width: 100%;
+}
+
+.el-collapse-item__content {
+  padding-bottom: 0;
+}
+
+.el-input.is-disabled .el-input__inner {
+  color: #999;
+}
+
+.el-form-item.el-form-item--mini {
+  margin-bottom: 0;
+
+  & + .el-form-item {
+    margin-top: 16px;
+  }
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/utils.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/utils.ts
new file mode 100644
index 000000000..b8bf53277
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/package/utils.ts
@@ -0,0 +1,94 @@
+const bpmnInstances = () => (window as any)?.bpmnInstances;
+// 创建监听器实例
+export function createListenerObject(options, isTask, prefix) {
+  const listenerObj = Object.create(null);
+  listenerObj.event = options.event;
+  isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
+  switch (options.listenerType) {
+    case 'delegateExpressionListener': {
+      listenerObj.delegateExpression = options.delegateExpression;
+      break;
+    }
+    case 'expressionListener': {
+      listenerObj.expression = options.expression;
+      break;
+    }
+    case 'scriptListener': {
+      listenerObj.script = createScriptObject(options, prefix);
+      break;
+    }
+    default: {
+      listenerObj.class = options.class;
+    }
+  }
+  // 注入字段
+  if (options.fields) {
+    listenerObj.fields = options.fields.map((field) => {
+      return createFieldObject(field, prefix);
+    });
+  }
+  // 任务监听器的 定时器 设置
+  if (isTask && options.event === 'timeout' && !!options.eventDefinitionType) {
+    const timeDefinition = bpmnInstances().moddle.create(
+      'bpmn:FormalExpression',
+      {
+        body: options.eventTimeDefinitions,
+      },
+    );
+    const TimerEventDefinition = bpmnInstances().moddle.create(
+      'bpmn:TimerEventDefinition',
+      {
+        id: `TimerEventDefinition_${uuid(8)}`,
+        [`time${options.eventDefinitionType.replace(/^\S/, (s) => s.toUpperCase())}`]:
+          timeDefinition,
+      },
+    );
+    listenerObj.eventDefinitions = [TimerEventDefinition];
+  }
+  return bpmnInstances().moddle.create(
+    `${prefix}:${isTask ? 'TaskListener' : 'ExecutionListener'}`,
+    listenerObj,
+  );
+}
+
+// 创建 监听器的注入字段 实例
+export function createFieldObject(option, prefix) {
+  const { name, fieldType, string, expression } = option;
+  const fieldConfig =
+    fieldType === 'string' ? { name, string } : { name, expression };
+  return bpmnInstances().moddle.create(`${prefix}:Field`, fieldConfig);
+}
+
+// 创建脚本实例
+export function createScriptObject(options, prefix) {
+  const { scriptType, scriptFormat, value, resource } = options;
+  const scriptConfig =
+    scriptType === 'inlineScript'
+      ? { scriptFormat, value }
+      : { scriptFormat, resource };
+  return bpmnInstances().moddle.create(`${prefix}:Script`, scriptConfig);
+}
+
+// 更新元素扩展属性
+export function updateElementExtensions(element, extensionList) {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: extensionList,
+  });
+  // 直接使用原始元素对象，不需要toRaw包装
+  bpmnInstances().modeling.updateProperties(element, {
+    extensionElements: extensions,
+  });
+}
+
+// 创建一个id
+export function uuid(
+  length = 8,
+  charsString = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
+) {
+  let result = '';
+
+  for (let i = length; i > 0; --i) {
+    result += charsString[Math.floor(Math.random() * charsString.length)];
+  }
+  return result;
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
new file mode 100644
index 000000000..c8d70960d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
@@ -0,0 +1,8 @@
+import hljs from 'highlight.js/lib/core';
+import jsonLanguage from 'highlight.js/lib/languages/json';
+import xmlLanguage from 'highlight.js/lib/languages/xml';
+
+hljs.registerLanguage('xml', xmlLanguage);
+hljs.registerLanguage('json', jsonLanguage);
+
+export default hljs;
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js
new file mode 100644
index 000000000..506a1b3c3
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/CustomRenderer.js
@@ -0,0 +1,30 @@
+import BpmnRenderer from 'bpmn-js/lib/draw/BpmnRenderer';
+
+export default function CustomRenderer(
+  config,
+  eventBus,
+  styles,
+  pathMap,
+  canvas,
+  textRenderer,
+) {
+  BpmnRenderer.call(
+    this,
+    config,
+    eventBus,
+    styles,
+    pathMap,
+    canvas,
+    textRenderer,
+    2000,
+  );
+
+  this.handlers.label = function () {
+    return null;
+  };
+}
+
+const F = function () {}; // 核心，利用空对象作为中介；
+F.prototype = BpmnRenderer.prototype; // 核心，将父类的原型赋值给空对象F；
+CustomRenderer.prototype = new F(); // 核心，将 F的实例赋值给子类；
+CustomRenderer.prototype.constructor = CustomRenderer; // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/index.js
new file mode 100644
index 000000000..a1842ec76
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/custom-renderer/index.js
@@ -0,0 +1,6 @@
+import CustomRenderer from './CustomRenderer';
+
+export default {
+  __init__: ['customRenderer'],
+  customRenderer: ['type', CustomRenderer],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/CustomRules.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/CustomRules.js
new file mode 100644
index 000000000..49ed6e3e1
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/CustomRules.js
@@ -0,0 +1,16 @@
+import BpmnRules from 'bpmn-js/lib/features/rules/BpmnRules';
+import inherits from 'inherits';
+
+export default function CustomRules(eventBus) {
+  BpmnRules.call(this, eventBus);
+}
+
+inherits(CustomRules, BpmnRules);
+
+CustomRules.prototype.canDrop = function () {
+  return false;
+};
+
+CustomRules.prototype.canMove = function () {
+  return false;
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/index.js
new file mode 100644
index 000000000..838b93ea6
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/modules/rules/index.js
@@ -0,0 +1,6 @@
+import CustomRules from './CustomRules';
+
+export default {
+  __init__: ['customRules'],
+  customRules: ['type', CustomRules],
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/translations.ts b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/translations.ts
new file mode 100644
index 000000000..75c615592
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/translations.ts
@@ -0,0 +1,25 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  'Exclusive Gateway': 'Exklusives Gateway',
+  'Parallel Gateway': 'Paralleles Gateway',
+  'Inclusive Gateway': 'Inklusives Gateway',
+  'Complex Gateway': 'Komplexes Gateway',
+  'Event based Gateway': 'Ereignis-basiertes Gateway',
+  'Message Start Event': '消息启动事件',
+  'Timer Start Event': '定时启动事件',
+  'Conditional Start Event': '条件启动事件',
+  'Signal Start Event': '信号启动事件',
+  'Error Start Event': '错误启动事件',
+  'Escalation Start Event': '升级启动事件',
+  'Compensation Start Event': '补偿启动事件',
+  'Message Start Event (non-interrupting)': '消息启动事件 (非中断)',
+  'Timer Start Event (non-interrupting)': '定时启动事件 (非中断)',
+  'Conditional Start Event (non-interrupting)': '条件启动事件 (非中断)',
+  'Signal Start Event (non-interrupting)': '信号启动事件 (非中断)',
+  'Escalation Start Event (non-interrupting)': '升级启动事件 (非中断)',
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
new file mode 100644
index 000000000..e8ea772ba
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
@@ -0,0 +1,40 @@
+// outside.js
+
+const ctx = '@@clickoutsideContext';
+
+export default {
+  bind(el, binding, vnode) {
+    const ele = el;
+    const documentHandler = (e) => {
+      if (!vnode.context || ele.contains(e.target)) {
+        return false;
+      }
+      // 调用指令回调
+      if (binding.expression) {
+        vnode.context[el[ctx].methodName](e);
+      } else {
+        el[ctx].bindingFn(e);
+      }
+    };
+    // 将方法添加到ele
+    ele[ctx] = {
+      documentHandler,
+      methodName: binding.expression,
+      bindingFn: binding.value,
+    };
+
+    setTimeout(() => {
+      document.addEventListener('touchstart', documentHandler); // 为document绑定事件
+    });
+  },
+  update(el, binding) {
+    const ele = el;
+    ele[ctx].methodName = binding.expression;
+    ele[ctx].bindingFn = binding.value;
+  },
+  unbind(el) {
+    document.removeEventListener('touchstart', el[ctx].documentHandler); // 解绑
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete el[ctx];
+  },
+};
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/index.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/index.js
new file mode 100644
index 000000000..973685a0b
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/index.js
@@ -0,0 +1,10 @@
+export function debounce(fn, delay = 500) {
+  let timer;
+  return function (...args) {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(fn.bind(this, ...args), delay);
+  };
+}
diff --git a/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
new file mode 100644
index 000000000..3370a47f5
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
@@ -0,0 +1,50 @@
+function xmlStr2XmlObj(xmlStr) {
+  let xmlObj = {};
+  if (document.all) {
+    const xmlDom = new window.ActiveXObject('Microsoft.XMLDOM');
+    xmlDom.loadXML(xmlStr);
+    xmlObj = xmlDom;
+  } else {
+    xmlObj = new DOMParser().parseFromString(xmlStr, 'text/xml');
+  }
+  return xmlObj;
+}
+
+function xml2json(xml) {
+  try {
+    let obj = {};
+    if (xml.children.length > 0) {
+      for (let i = 0; i < xml.children.length; i++) {
+        const item = xml.children.item(i);
+        const nodeName = item.nodeName;
+        if (obj[nodeName] === undefined) {
+          obj[nodeName] = xml2json(item);
+        } else {
+          if (obj[nodeName].push === undefined) {
+            const old = obj[nodeName];
+            obj[nodeName] = [];
+            obj[nodeName].push(old);
+          }
+          obj[nodeName].push(xml2json(item));
+        }
+      }
+    } else {
+      obj = xml.textContent;
+    }
+    return obj;
+  } catch (error) {
+    console.warn(error.message);
+  }
+}
+
+function xmlObj2json(xml) {
+  const xmlObj = xmlStr2XmlObj(xml);
+  console.warn(xmlObj);
+  let jsonObj = {};
+  if (xmlObj.childNodes.length > 0) {
+    jsonObj = xml2json(xmlObj);
+  }
+  return jsonObj;
+}
+
+export default xmlObj2json;
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
index 9ad51c734..bf9d637b5 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/child-process-node-config.vue
@@ -194,10 +194,10 @@ const saveConfig = async () => {
     // 3. 是否跳过发起人
     currentNode.value.childProcessSetting.skipStartUserNode =
       configForm.value.skipStartUserNode;
-    // 4. 主→子变量
+    // 4. 主->子变量
     currentNode.value.childProcessSetting.inVariables =
       configForm.value.inVariables;
-    // 5. 子→主变量
+    // 5. 子->主变量
     currentNode.value.childProcessSetting.outVariables =
       configForm.value.outVariables;
     // 6. 发起人设置
@@ -256,9 +256,9 @@ const showChildProcessNodeConfig = (node: SimpleFlowNode) => {
     // 3. 是否跳过发起人
     configForm.value.skipStartUserNode =
       node.childProcessSetting.skipStartUserNode;
-    // 4. 主流程→子流程变量
+    // 4. 主->子变量
     configForm.value.inVariables = node.childProcessSetting.inVariables ?? [];
-    // 5. 子流程→主流程变量
+    // 5. 子->主变量
     configForm.value.outVariables = node.childProcessSetting.outVariables ?? [];
     // 6. 发起人设置
     configForm.value.startUserType =
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue
index e09097147..6ea32ca63 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/condition-node-config.vue
@@ -96,7 +96,7 @@ const [Drawer, drawerApi] = useVbenDrawer({
 });
 
 function open() {
-  // 使用三元表达式代替if-else，解决linter 警告
+  // 使用三元表达式代替 if-else，解决 linter 警告
   condition.value = currentNode.value.conditionSetting
     ? cloneDeep(currentNode.value.conditionSetting)
     : {
@@ -132,7 +132,7 @@ watch(
 const showInput = ref(false);
 // 输入框的引用
 const inputRef = ref<HTMLInputElement | null>(null);
-// 监听 showInput 的变化，当变为true 时自动聚焦
+// 监听 showInput 的变化，当变为 true 时自动聚焦
 watch(showInput, (value) => {
   if (value) {
     nextTick(() => {
@@ -158,6 +158,7 @@ function changeNodeName() {
 defineExpose({ open }); // 提供 open 方法，用于打开弹窗
 </script>
 <template>
+  <!-- TODO @jason：antd 是 1/3，这里要统一么？ -->
   <Drawer class="w-2/5">
     <template #title>
       <div class="flex items-center">
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
index e018cdde6..c2812f4a9 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/modules/condition.vue
@@ -40,6 +40,7 @@ defineOptions({
 const props = defineProps({
   modelValue: {
     type: Object,
+    // TODO @jason：这里 required: false,
     default: () => ({}),
   },
 });
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
index f01543c3e..105b53ff6 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/trigger-node-config.vue
@@ -262,7 +262,7 @@ function updateFormFieldKey(
   formSetting.updateFormFields[String(newKey)] = value;
 }
 
-/** 删除修改字段设置 */
+/** 删除修改字段设置项 */
 function deleteFormFieldSetting(formSetting: FormTriggerSetting, key: string) {
   if (!formSetting?.updateFormFields) return;
   delete formSetting.updateFormFields[key];
@@ -383,6 +383,7 @@ onMounted(() => {
 });
 </script>
 <template>
+  <!-- TODO @jason：antd 这里是 1/3，需要保持一致么？ -->
   <Drawer class="w-2/5">
     <template #title>
       <div class="config-header">
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
index effa8b404..41f232fe1 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes-config/user-task-node-config.vue
@@ -373,7 +373,7 @@ function showUserTaskNodeConfig(node: SimpleFlowNode) {
     return;
   }
 
-  // 2.1 审批人设置策略
+  // 2.1 审批人设置
   configForm.value.candidateStrategy = node.candidateStrategy!;
   // 解析候选人参数
   parseCandidateParam(node.candidateStrategy!, node?.candidateParam);
@@ -402,7 +402,7 @@ function showUserTaskNodeConfig(node: SimpleFlowNode) {
   // 2.5 设置审批人为空时
   configForm.value.assignEmptyHandlerType = node.assignEmptyHandler?.type;
   configForm.value.assignEmptyHandlerUserIds = node.assignEmptyHandler?.userIds;
-  // 2.6 设置用户任务的审批人与发起人相同处理
+  // 2.6 设置用户任务的审批人与发起人相同时
   configForm.value.assignStartUserHandlerType = node.assignStartUserHandlerType;
   // 3. 操作按钮设置
   buttonsSetting.value =
@@ -456,7 +456,7 @@ function useButtonsSetting() {
 
   const changeBtnDisplayName = (index: number) => {
     btnDisplayNameEdit.value[index] = true;
-    // 输入框自动聚焦
+    // 输入框自动聚集
     nextTick(() => {
       if (_btnDisplayNameInputRefs.value[index]) {
         _btnDisplayNameInputRefs.value[index]?.focus();
@@ -533,7 +533,7 @@ function useTimeoutHandler() {
       configForm.value.timeDuration = 1;
     }
   };
-  // 超时时间 ISO 表示
+  // 超时时间的 ISO 表示
   const isoTimeDuration = computed(() => {
     if (!configForm.value.timeoutHandlerEnable) {
       return undefined;
@@ -586,12 +586,12 @@ function updatePermission(type: string) {
   });
 }
 
-// 在组件初始化时记录初始值
+// 在组件初始化时记录初始位置
 onMounted(() => {
   // 固定添加发起人ID字段
   formFieldOptions.unshift({
     field: ProcessVariableEnum.START_USER_ID,
-    title: '发起人ID',
+    title: '发起人',
     type: 'UserSelect',
     required: true,
   });
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
index 7ad414aeb..34562aef6 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/exclusive-node.vue
@@ -59,10 +59,10 @@ const showInputs = ref<boolean[]>([]);
 watch(
   showInputs,
   (newValues) => {
-    // 当状态为 true 时
+    // 当状态为 true 时, 自动聚焦
     newValues.forEach((value, index) => {
       if (value) {
-        // 当显示状态从 false 变为 true 时
+        // 当显示状态从 false 变为 true 时, 自动聚焦
         nextTick(() => {
           inputRefs.value[index]?.focus();
         });
@@ -137,7 +137,7 @@ function deleteCondition(index: number) {
 
 // 移动节点
 function moveNode(index: number, to: number) {
-  // -1 ：向左 1：向右
+  // -1 ：向左  1： 向右
   if (
     currentNode.value.conditionNodes &&
     currentNode.value.conditionNodes[index]
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
index cc2d7f195..d3cf1b49d 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/inclusive-node.vue
@@ -64,10 +64,10 @@ const showInputs = ref<boolean[]>([]);
 watch(
   showInputs,
   (newValues) => {
-    // 当状态为 true 时
+    // 当状态为 true 时, 自动聚焦
     newValues.forEach((value, index) => {
       if (value) {
-        // 当显示状态从 false 变为 true 时
+        // 当显示状态从 false 变为 true 时, 自动聚焦
         nextTick(() => {
           inputRefs.value[index]?.focus();
         });
@@ -141,7 +141,7 @@ function deleteCondition(index: number) {
 
 // 移动节点
 function moveNode(index: number, to: number) {
-  // -1 ：向左 1：向右
+  // -1 ：向左  1： 向右
   if (
     currentNode.value.conditionNodes &&
     currentNode.value.conditionNodes[index]
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
index dec77d854..c66bcef38 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/process-instance-modal.vue
@@ -30,7 +30,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       const data = modalApi.getData<any[]>();
       // 填充列表数据
-      await gridApi.setGridOptions({ data });
+      gridApi.setGridOptions({ data });
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
index 38b869a49..baa4cc7ed 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/nodes/modules/task-list-modal.vue
@@ -33,7 +33,7 @@ const [Modal, modalApi] = useVbenModal({
     try {
       const data = modalApi.getData<any[]>();
       // 填充列表数据
-      await gridApi.setGridOptions({ data });
+      gridApi.setGridOptions({ data });
     } finally {
       modalApi.unlock();
     }
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/components/process-node-tree.vue b/apps/web-ele/src/views/bpm/components/simple-process-design/components/process-node-tree.vue
index ea8596a85..677370030 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/components/process-node-tree.vue
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/components/process-node-tree.vue
@@ -71,7 +71,7 @@ function recursiveFindParentNode(
 }
 </script>
 <template>
-  <!-- 发起人节�?-->
+  <!-- 发起人节点 -->
   <StartUserNode
     v-if="currentNode && currentNode.type === BpmNodeTypeEnum.START_USER_NODE"
     :flow-node="currentNode"
@@ -87,7 +87,7 @@ function recursiveFindParentNode(
     @update:flow-node="handleModelValueUpdate"
     @find-parent-node="findParentNode"
   />
-  <!-- 抄送节�?-->
+  <!-- 抄送节点 -->
   <CopyTaskNode
     v-if="currentNode && currentNode.type === BpmNodeTypeEnum.COPY_TASK_NODE"
     :flow-node="currentNode"
@@ -120,7 +120,7 @@ function recursiveFindParentNode(
     @update:model-value="handleModelValueUpdate"
     @find-parent-node="findParentNode"
   />
-  <!-- 延迟器节�?-->
+  <!-- 延迟器节点 -->
   <DelayTimerNode
     v-if="currentNode && currentNode.type === BpmNodeTypeEnum.DELAY_TIMER_NODE"
     :flow-node="currentNode"
@@ -134,13 +134,13 @@ function recursiveFindParentNode(
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
   />
-  <!-- 触发器节�?-->
+  <!-- 触发器节点 -->
   <TriggerNode
     v-if="currentNode && currentNode.type === BpmNodeTypeEnum.TRIGGER_NODE"
     :flow-node="currentNode"
     @update:flow-node="handleModelValueUpdate"
   />
-  <!-- 子流程节�?-->
+  <!-- 子流程节点 -->
   <ChildProcessNode
     v-if="
       currentNode && currentNode.type === BpmNodeTypeEnum.CHILD_PROCESS_NODE
diff --git a/apps/web-ele/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
index a36f96986..8f6dc85b4 100644
--- a/apps/web-ele/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
+++ b/apps/web-ele/src/views/bpm/components/simple-process-design/styles/simple-process-designer.scss
@@ -146,7 +146,6 @@
     background: url('./svg/simple-process-bg.svg') 0 0 repeat;
     transform: scale(1);
     transform-origin: 50% 0 0;
-    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     // 节点容器 定义节点宽度
     .node-container {
       width: 200px;
diff --git a/apps/web-ele/src/views/bpm/model/form/index.vue b/apps/web-ele/src/views/bpm/model/form/index.vue
index 8c42659c1..25201f4d4 100644
--- a/apps/web-ele/src/views/bpm/model/form/index.vue
+++ b/apps/web-ele/src/views/bpm/model/form/index.vue
@@ -259,9 +259,11 @@ async function validateAllSteps() {
   return true;
 }
 
+const saveLoading = ref<boolean>(false);
 /** 保存操作 */
 async function handleSave() {
   try {
+    saveLoading.value = true;
     // 保存前校验所有步骤的数据
     const result = await validateAllSteps();
     if (!result) {
@@ -309,9 +311,12 @@ async function handleSave() {
     }
   } catch (error: any) {
     console.error('保存失败:', error);
+  } finally {
+    saveLoading.value = false;
   }
 }
-
+// 发布加载中状态
+const deployLoading = ref<boolean>(false);
 /** 发布操作 */
 async function handleDeploy() {
   try {
@@ -319,6 +324,7 @@ async function handleDeploy() {
     if (!formData.value.id) {
       await confirm('是否确认发布该流程？');
     }
+    deployLoading.value = true;
     // 1.2 校验所有步骤
     await validateAllSteps();
 
@@ -342,6 +348,8 @@ async function handleDeploy() {
   } catch (error: any) {
     console.error('发布失败:', error);
     ElMessage.warning(error.message || '发布失败');
+  } finally {
+    deployLoading.value = false;
   }
 }
 
@@ -448,11 +456,12 @@ onBeforeUnmount(() => {
           <ElButton
             v-if="actionType === 'update'"
             type="primary"
+            :loading="deployLoading"
             @click="handleDeploy"
           >
             发 布
           </ElButton>
-          <ElButton type="primary" @click="handleSave">
+          <ElButton type="primary" @click="handleSave" :loading="saveLoading">
             <span v-if="actionType === 'definition'">恢 复</span>
             <span v-else>保 存</span>
           </ElButton>
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue b/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
index 8d1bdc79d..8d9227868 100644
--- a/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
+++ b/apps/web-ele/src/views/bpm/model/form/modules/basic-info.vue
@@ -289,7 +289,7 @@ defineExpose({ validate });
       </ElFormItem>
       <ElFormItem label="流程图标">
         <ImageUpload
-          v-model:value="modelData.icon"
+          v-model="modelData.icon"
           :show-description="false"
           width="120px"
           height="120px"
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue b/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue
index 4f756afc3..9ea0516d0 100644
--- a/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue
+++ b/apps/web-ele/src/views/bpm/model/form/modules/bpm-model-editor.vue
@@ -1,20 +1,24 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
+import type { BpmModelApi } from '#/api/bpm/model';
+
 import { inject, onBeforeUnmount, provide, ref, shallowRef, watch } from 'vue';
 
 import { ContentWrap } from '@vben/common-ui';
 import { BpmModelFormType } from '@vben/constants';
 
+import { ElMessage } from 'element-plus';
+
 import { getForm } from '#/api/bpm/form';
-// import {
-//   MyProcessDesigner,
-//   MyProcessPenal,
-// } from '#/views/bpm/components/bpmn-process-designer/package';
-// // 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
-// import CustomContentPadProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad';
-// // 自定义左侧菜单（修改 默认任务 为 用户任务）
-// import CustomPaletteProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette';
+import {
+  MyProcessDesigner,
+  MyProcessPenal,
+} from '#/views/bpm/components/bpmn-process-designer/package';
+// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+import CustomContentPadProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/content-pad';
+// 自定义左侧菜单（修改 默认任务 为 用户任务）
+import CustomPaletteProvider from '#/views/bpm/components/bpmn-process-designer/package/designer/plugins/palette';
 
 defineOptions({ name: 'BpmModelEditor' });
 
@@ -25,45 +29,44 @@ defineProps<{
   value?: string;
 }>();
 
-// const emit = defineEmits(['success', 'init-finished']);
+const emit = defineEmits(['success', 'init-finished']);
 
 const formFields = ref<string[]>([]); // 表单信息
 const formType = ref(BpmModelFormType.NORMAL); // 表单类型，暂仅限流程表单 TODO @jason：是不是已经支持 业务表单 了？
 provide('formFields', formFields);
 provide('formType', formType);
 
-// const xmlString = inject('processData') as Ref; // 注入流程数据
+const xmlString = inject('processData') as Ref; // 注入流程数据
 const modelData = inject('modelData') as Ref; // 注入模型数据
 
 const modeler = shallowRef(); // BPMN Modeler
-// const processDesigner = ref();
-// const controlForm = ref({
-//   simulation: true,
-//   labelEditing: false,
-//   labelVisible: false,
-//   prefix: 'flowable',
-//   headerButtonSize: 'mini',
-//   // additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
-// });
-
-// const model = ref<BpmModelApi.Model>(); // 流程模型的信息
+const processDesigner = ref();
+const controlForm = ref({
+  simulation: true,
+  labelEditing: false,
+  labelVisible: false,
+  prefix: 'flowable',
+  headerButtonSize: 'mini',
+  additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
+});
+const model = ref<BpmModelApi.Model>(); // 流程模型的信息
 
 /** 初始化 modeler */
-// const initModeler = async (item: any) => {
-//   model.value = modelData.value;
-//   modeler.value = item;
-// };
+const initModeler = async (item: any) => {
+  model.value = modelData.value;
+  modeler.value = item;
+};
 
 /** 添加/修改模型 */
-// const save = async (bpmnXml: string) => {
-//   try {
-//     xmlString.value = bpmnXml;
-//     emit('success', bpmnXml);
-//   } catch (error) {
-//     console.error('保存失败:', error);
-//     ElMessage.error('保存失败');
-//   }
-// };
+const save = async (bpmnXml: string) => {
+  try {
+    xmlString.value = bpmnXml;
+    emit('success', bpmnXml);
+  } catch (error) {
+    console.error('保存失败:', error);
+    ElMessage.error('保存失败');
+  }
+};
 
 /** 监听表单 ID 变化，加载表单数据 */
 watch(
@@ -93,7 +96,7 @@ onBeforeUnmount(() => {
 <template>
   <ContentWrap>
     <!-- 流程设计器，负责绘制流程等 -->
-    <!-- <MyProcessDesigner
+    <MyProcessDesigner
       key="designer"
       v-model="xmlString"
       :value="xmlString"
@@ -106,16 +109,16 @@ onBeforeUnmount(() => {
       @save="save"
       :process-id="modelKey"
       :process-name="modelName"
-    /> -->
+    />
     <!-- 流程属性器，负责编辑每个流程节点的属性 -->
-    <!-- <MyProcessPenal
+    <MyProcessPenal
       v-if="modeler"
       key="penal"
       :bpmn-modeler="modeler"
       :prefix="controlForm.prefix"
       class="process-panel"
       :model="model"
-    /> -->
+    />
   </ContentWrap>
 </template>
 
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue b/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
index 739229387..248b6d0f1 100644
--- a/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
+++ b/apps/web-ele/src/views/bpm/model/form/modules/extra-setting.vue
@@ -30,6 +30,7 @@ import {
 } from 'element-plus';
 
 import { getForm } from '#/api/bpm/form';
+// TODO @jason：这里要迁移下么？
 // import {
 //   HttpRequestSetting,
 //   parseFormFields,
diff --git a/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue b/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
index 534001d77..b522dc903 100644
--- a/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
+++ b/apps/web-ele/src/views/bpm/model/form/modules/form-design.vue
@@ -129,7 +129,7 @@ defineExpose({ validate });
           placeholder="请输入表单提交路由"
         />
         <ElTooltip
-          content="自定义表单的提交路径，使用 Vue 的路由地址, 例如说: bpm/oa/leave/create.vue"
+          content="自定义表单的提交路径，使用 Vue 的路由地址，例如说: /bpm/oa/leave/create.vue"
           placement="top"
         >
           <IconifyIcon
@@ -151,7 +151,7 @@ defineExpose({ validate });
           placeholder="请输入表单查看的组件地址"
         />
         <ElTooltip
-          content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：bpm/oa/leave/detail.vue"
+          content="自定义表单的查看组件地址，使用 Vue 的组件地址，例如说：/bpm/oa/leave/detail.vue"
           placement="top"
         >
           <IconifyIcon
diff --git a/apps/web-ele/src/views/bpm/processExpression/components/index.ts b/apps/web-ele/src/views/bpm/processExpression/components/index.ts
new file mode 100644
index 000000000..4047767df
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processExpression/components/index.ts
@@ -0,0 +1 @@
+export { default as ProcessExpressionSelectModal } from './select-modal.vue';
diff --git a/apps/web-ele/src/views/bpm/processExpression/components/select-modal.vue b/apps/web-ele/src/views/bpm/processExpression/components/select-modal.vue
new file mode 100644
index 000000000..dc1fb4984
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processExpression/components/select-modal.vue
@@ -0,0 +1,92 @@
+<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: 'primary',
+              link: true,
+              icon: 'lucide:pointer',
+              onClick: handleSelect.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/create/index.vue b/apps/web-ele/src/views/bpm/processInstance/create/index.vue
index df5507705..a6579f73d 100644
--- a/apps/web-ele/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/create/index.vue
@@ -185,6 +185,7 @@ onMounted(() => {
 
 <template>
   <Page auto-content-height>
+    <!-- TODO @jason：这里交互，可以做成类似 vue3 + element-plus 那个一样，滚动切换分类哈？对标钉钉、飞书哈； -->
     <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
     <template v-if="!selectProcessDefinition">
       <ElCard
@@ -234,9 +235,10 @@ onMounted(() => {
                   >
                     <ElCard
                       shadow="hover"
-                      class="definition-item-card w-full cursor-pointer"
+                      class="w-full cursor-pointer"
                       :class="{
-                        'search-match': searchName.trim().length > 0,
+                        'animate-bounce-once !bg-[rgb(63_115_247_/_10%)]':
+                          searchName.trim().length > 0,
                       }"
                       :body-style="{
                         width: '100%',
@@ -247,10 +249,13 @@ onMounted(() => {
                         <img
                           v-if="definition.icon"
                           :src="definition.icon"
-                          class="flow-icon-img object-contain"
+                          class="size-12 rounded object-contain"
                           alt="流程图标"
                         />
-                        <div v-else class="flow-icon flex-shrink-0">
+                        <div
+                          v-else
+                          class="flex size-12 flex-shrink-0 items-center justify-center rounded bg-primary"
+                        >
                           <span class="text-xs text-white">
                             {{ definition.name?.slice(0, 2) }}
                           </span>
@@ -301,31 +306,8 @@ onMounted(() => {
   }
 }
 
-.process-definition-container {
-  .definition-item-card {
-    .flow-icon-img {
-      width: 48px;
-      height: 48px;
-      border-radius: 0.25rem;
-    }
-
-    .flow-icon {
-      @apply bg-primary;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 48px;
-      height: 48px;
-      border-radius: 0.25rem;
-    }
-
-    &.search-match {
-      background-color: rgb(63 115 247 / 10%);
-      border: 1px solid var(--primary);
-      animation: bounce 0.5s ease;
-    }
-  }
+.animate-bounce-once {
+  animation: bounce 0.5s ease;
 }
 
 :deep(.el-tabs__content) {
diff --git a/apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue b/apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue
index 7ba63b5fa..7c5ed297c 100644
--- a/apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/create/modules/form.vue
@@ -112,7 +112,7 @@ async function submitForm() {
     // 关闭并提示
     ElMessage.success('发起流程成功');
     await closeCurrentTab();
-    await router.push({ name: 'BpmTaskMy' });
+    await router.push({ name: 'BpmProcessInstanceMy' });
   } finally {
     processInstanceStartLoading.value = false;
   }
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/index.vue b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
index fad5ed688..8e63adaf1 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/index.vue
@@ -220,17 +220,22 @@ watch(
     }
   },
 );
-
+const loading = ref(false);
 /** 初始化 */
 onMounted(async () => {
-  await getDetail();
-  // 获得用户列表
-  userOptions.value = await getSimpleUserList();
+  try {
+    loading.value = true;
+    await getDetail();
+    // 获得用户列表
+    userOptions.value = await getSimpleUserList();
+  } finally {
+    loading.value = false;
+  }
 });
 </script>
 
 <template>
-  <Page auto-content-height>
+  <Page auto-content-height v-loading="loading">
     <ElCard
       class="flex h-full flex-col"
       :body-style="{
@@ -339,24 +344,22 @@ onMounted(async () => {
               </ElRow>
             </ElTabPane>
             <ElTabPane label="流程图" name="diagram" class="pb-20 pr-3">
-              <div>
-                <ProcessInstanceSimpleViewer
-                  v-show="
-                    processDefinition.modelType &&
-                    processDefinition.modelType === BpmModelType.SIMPLE
-                  "
-                  :loading="processInstanceLoading"
-                  :model-view="processModelView"
-                />
-                <ProcessInstanceBpmnViewer
-                  v-show="
-                    processDefinition.modelType &&
-                    processDefinition.modelType === BpmModelType.BPMN
-                  "
-                  :loading="processInstanceLoading"
-                  :model-view="processModelView"
-                />
-              </div>
+              <ProcessInstanceSimpleViewer
+                v-show="
+                  processDefinition.modelType &&
+                  processDefinition.modelType === BpmModelType.SIMPLE
+                "
+                :loading="processInstanceLoading"
+                :model-view="processModelView"
+              />
+              <ProcessInstanceBpmnViewer
+                v-show="
+                  processDefinition.modelType &&
+                  processDefinition.modelType === BpmModelType.BPMN
+                "
+                :loading="processInstanceLoading"
+                :model-view="processModelView"
+              />
             </ElTabPane>
             <ElTabPane label="流转记录" name="record" class="pb-20 pr-3">
               <BpmProcessInstanceTaskList
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
index 2b9dfdeee..e69a06ab4 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
+// TODO @jason：这个貌似暂时还没迁移的样子？
 // import { MyProcessViewer } from '#/views/bpm/components/bpmn-process-designer/package';
 
 defineOptions({ name: 'ProcessInstanceBpmnViewer' });
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
index 19a5fd407..4fbb1e2bf 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -275,7 +275,8 @@ async function openPopover(type: string) {
     }
   }
   Object.keys(popOverVisible.value).forEach((item) => {
-    if (popOverVisible.value[item]) popOverVisible.value[item] = item === type;
+    // TODO @jason：这里是不是保持和 antd 一致？
+    popOverVisible.value[item] = item === type;
   });
 }
 
@@ -704,13 +705,7 @@ function handleSignFinish(url: string) {
   approveFormRef.value?.validateField('signPicUrl');
 }
 
-/** 处理弹窗可见性 */
-function handlePopoverVisible(visible: boolean) {
-  if (!visible) {
-    // 拦截关闭事件
-    popOverVisible.value.approve = true;
-  }
-}
+// TODO @jason：handlePopoverVisible 需要要有么？
 
 defineExpose({ loadTodoTask });
 </script>
@@ -720,11 +715,10 @@ defineExpose({ loadTodoTask });
     <!-- z-index 设置为300 避免覆盖签名弹窗 -->
     <ElSpace size="default">
       <ElPopover
-        v-model:visible="popOverVisible.approve"
+        :visible="popOverVisible.approve"
         placement="top"
         :popper-style="{ minWidth: '400px', zIndex: 300 }"
         trigger="click"
-        @open-change="handlePopoverVisible"
         v-if="
           runningTask &&
           isHandleTaskStatus() &&
@@ -734,9 +728,9 @@ defineExpose({ loadTodoTask });
         <template #reference>
           <ElButton plain type="primary" @click="openPopover('approve')">
             <IconifyIcon icon="lucide:check" />
-            <span class="ml-1">{{
-              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE)
-            }}</span>
+            <span class="ml-1">
+              {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.APPROVE) }}
+            </span>
           </ElButton>
         </template>
         <!-- 办理表单 -->
@@ -825,7 +819,7 @@ defineExpose({ loadTodoTask });
 
       <!-- 【拒绝】按钮 -->
       <ElPopover
-        v-model:visible="popOverVisible.reject"
+        :visible="popOverVisible.reject"
         placement="top"
         :popper-style="{ minWidth: '400px' }"
         trigger="click"
@@ -885,7 +879,7 @@ defineExpose({ loadTodoTask });
 
       <!-- 【抄送】按钮 -->
       <ElPopover
-        v-model:visible="popOverVisible.copy"
+        :visible="popOverVisible.copy"
         placement="top"
         :popper-style="{ width: '400px' }"
         trigger="click"
@@ -960,7 +954,7 @@ defineExpose({ loadTodoTask });
 
       <!-- 【转办】按钮 -->
       <ElPopover
-        v-model:visible="popOverVisible.transfer"
+        :visible="popOverVisible.transfer"
         placement="top"
         :popper-style="{ width: '400px' }"
         trigger="click"
@@ -988,6 +982,7 @@ defineExpose({ loadTodoTask });
             label-width="100px"
           >
             <ElFormItem label="新审批人" prop="assigneeUserId">
+              <!-- TODO @jason：是不是用 unocss 哈？antd 和 ele 都要改下 -->
               <ElSelect
                 v-model="transferForm.assigneeUserId"
                 clearable
@@ -1036,7 +1031,7 @@ defineExpose({ loadTodoTask });
 
       <!-- 【委派】按钮 -->
       <ElPopover
-        v-model:visible="popOverVisible.delegate"
+        :visible="popOverVisible.delegate"
         placement="top"
         :popper-style="{ width: '400px' }"
         trigger="click"
@@ -1049,9 +1044,11 @@ defineExpose({ loadTodoTask });
         <template #reference>
           <ElButton plain @click="openPopover('delegate')">
             <IconifyIcon :size="14" icon="icon-park-outline:user-positioning" />
-            <span class="ml-1">{{
-              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.DELEGATE)
-            }}</span>
+            <span class="ml-1">
+              {{
+                getButtonDisplayName(BpmTaskOperationButtonTypeEnum.DELEGATE)
+              }}
+            </span>
           </ElButton>
         </template>
         <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
@@ -1112,7 +1109,7 @@ defineExpose({ loadTodoTask });
 
       <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
       <ElPopover
-        v-model:visible="popOverVisible.addSign"
+        :visible="popOverVisible.addSign"
         placement="top"
         :popper-style="{ width: '400px' }"
         trigger="click"
@@ -1125,9 +1122,11 @@ defineExpose({ loadTodoTask });
         <template #reference>
           <ElButton plain @click="openPopover('addSign')">
             <IconifyIcon :size="14" icon="icon-park-outline:plus" />
-            <span class="ml-1">{{
-              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.ADD_SIGN)
-            }}</span>
+            <span class="ml-1">
+              {{
+                getButtonDisplayName(BpmTaskOperationButtonTypeEnum.ADD_SIGN)
+              }}
+            </span>
           </ElButton>
         </template>
         <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
@@ -1200,7 +1199,7 @@ defineExpose({ loadTodoTask });
 
       <!-- 【减签】按钮 -->
       <ElPopover
-        v-model:visible="popOverVisible.deleteSign"
+        :visible="popOverVisible.deleteSign"
         placement="top"
         :popper-style="{ width: '400px' }"
         trigger="click"
@@ -1268,7 +1267,7 @@ defineExpose({ loadTodoTask });
 
       <!-- 【退回】按钮 -->
       <ElPopover
-        v-model:visible="popOverVisible.return"
+        :visible="popOverVisible.return"
         placement="top"
         :popper-style="{ width: '400px' }"
         trigger="click"
@@ -1281,9 +1280,9 @@ defineExpose({ loadTodoTask });
         <template #reference>
           <ElButton plain @click="openPopover('return')">
             <IconifyIcon :size="14" icon="lucide:arrow-left" />
-            <span class="ml-1">{{
-              getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN)
-            }}</span>
+            <span class="ml-1">
+              {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.RETURN) }}
+            </span>
           </ElButton>
         </template>
         <div class="flex flex-1 flex-col px-5 pt-5" v-loading="formLoading">
@@ -1342,7 +1341,7 @@ defineExpose({ loadTodoTask });
 
       <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
       <ElPopover
-        v-model:visible="popOverVisible.cancel"
+        :visible="popOverVisible.cancel"
         placement="top"
         :popper-style="{ width: '460px' }"
         trigger="click"
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/signature.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/signature.vue
index a3f1b0861..c89cbbcb9 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/signature.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -35,30 +35,29 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal title="流程签名" class="w-3/5">
-    <div class="mb-2 flex justify-end">
-      <ElSpace>
+    <div class="flex h-[50vh] flex-col">
+      <div class="mb-2 flex justify-end">
         <ElTooltip content="撤销上一步操作">
-          <ElButton @click="signature?.undo()">
+          <ElButton @click="signature?.undo()" size="small">
             <template #icon>
-              <IconifyIcon icon="lucide:undo" class="mb-1 size-4" />
+              <IconifyIcon icon="lucide:undo" class="size-4" />
             </template>
             撤销
           </ElButton>
         </ElTooltip>
         <ElTooltip content="清空画布">
-          <ElButton @click="signature?.clear()">
+          <ElButton @click="signature?.clear()" size="small">
             <template #icon>
-              <IconifyIcon icon="lucide:trash" class="mb-1 size-4" />
+              <IconifyIcon icon="lucide:trash" class="size-4" />
             </template>
             <span>清除</span>
           </ElButton>
         </ElTooltip>
-      </ElSpace>
+      </div>
+      <Vue3Signature
+        class="h-full flex-1 border border-solid border-gray-300"
+        ref="signature"
+      />
     </div>
-
-    <Vue3Signature
-      class="mx-auto !h-80 border border-solid border-gray-300"
-      ref="signature"
-    />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/bpm/processInstance/detail/modules/task-list.vue b/apps/web-ele/src/views/bpm/processInstance/detail/modules/task-list.vue
index 5b64e38ad..b522d119d 100644
--- a/apps/web-ele/src/views/bpm/processInstance/detail/modules/task-list.vue
+++ b/apps/web-ele/src/views/bpm/processInstance/detail/modules/task-list.vue
@@ -42,7 +42,7 @@ function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'approver',
       title: '审批人',
       slots: {
-        default: ({ row }: { row: BpmTaskApi.TaskManager }) => {
+        default: ({ row }: { row: BpmTaskApi.Task }) => {
           return row.assigneeUser?.nickname || row.ownerUser?.nickname;
         },
       },
@@ -86,6 +86,8 @@ function useGridColumns(): VxeTableGridOptions['columns'] {
   ];
 }
 
+// TODO @jason：是不是要 const formRef = ref<formCreate>();
+
 const formRef = ref();
 const taskForm = ref<TaskForm>({
   rule: [],
@@ -104,7 +106,7 @@ function handleRefresh() {
 }
 
 /** 显示表单详情 */
-async function handleShowFormDetail(row: BpmTaskApi.TaskManager) {
+async function handleShowFormDetail(row: BpmTaskApi.Task) {
   // 设置表单配置和表单字段
   taskForm.value = {
     rule: [],
@@ -156,7 +158,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     toolbarConfig: {
       enabled: false,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
+  } as VxeTableGridOptions<BpmTaskApi.Task>,
 });
 
 defineExpose({
@@ -186,7 +188,8 @@ defineExpose({
       </template>
     </Grid>
   </div>
-  <Modal class="w-[800px]">
+  <Modal class="w-3/5">
+    <!-- TODO @jason：是不是 antd 和 ele 保持统一？ -->
     <FormCreate
       ref="formRef"
       v-model="taskForm.value"
diff --git a/apps/web-ele/src/views/bpm/processListener/components/data.ts b/apps/web-ele/src/views/bpm/processListener/components/data.ts
new file mode 100644
index 000000000..37725d839
--- /dev/null
+++ b/apps/web-ele/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-ele/src/views/bpm/processListener/components/index.ts b/apps/web-ele/src/views/bpm/processListener/components/index.ts
new file mode 100644
index 000000000..04dbccf3d
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/components/index.ts
@@ -0,0 +1 @@
+export { default as ProcessListenerSelectModal } from './select-modal.vue';
diff --git a/apps/web-ele/src/views/bpm/processListener/components/select-modal.vue b/apps/web-ele/src/views/bpm/processListener/components/select-modal.vue
new file mode 100644
index 000000000..ef1237eca
--- /dev/null
+++ b/apps/web-ele/src/views/bpm/processListener/components/select-modal.vue
@@ -0,0 +1,96 @@
+<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: 'primary',
+              link: true,
+              icon: 'lucide:pointer',
+              onClick: handleSelect.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/bpm/processListener/data.ts b/apps/web-ele/src/views/bpm/processListener/data.ts
index 339f2b8bf..ea26dbfc8 100644
--- a/apps/web-ele/src/views/bpm/processListener/data.ts
+++ b/apps/web-ele/src/views/bpm/processListener/data.ts
@@ -8,22 +8,22 @@ import { z } from '#/adapter/form';
 
 export const EVENT_EXECUTION_OPTIONS = [
   {
-    label: 'start',
+    label: '开始',
     value: 'start',
   },
   {
-    label: 'end',
+    label: '结束',
     value: 'end',
   },
 ];
 
 export const EVENT_OPTIONS = [
-  { label: 'create', value: 'create' },
-  { label: 'assignment', value: 'assignment' },
-  { label: 'complete', value: 'complete' },
-  { label: 'delete', value: 'delete' },
-  { label: 'update', value: 'update' },
-  { label: 'timeout', value: 'timeout' },
+  { label: '创建', value: 'create' },
+  { label: '指派', value: 'assignment' },
+  { label: '完成', value: 'complete' },
+  { label: '删除', value: 'delete' },
+  { label: '更新', value: 'update' },
+  { label: '超时', value: 'timeout' },
 ];
 
 /** 新增/修改的表单 */
diff --git a/apps/web-ele/src/views/bpm/task/done/index.vue b/apps/web-ele/src/views/bpm/task/done/index.vue
index cc1aba780..15efbd13b 100644
--- a/apps/web-ele/src/views/bpm/task/done/index.vue
+++ b/apps/web-ele/src/views/bpm/task/done/index.vue
@@ -15,7 +15,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 defineOptions({ name: 'BpmDoneTask' });
 
 /** 查看历史 */
-function handleHistory(row: BpmTaskApi.TaskManager) {
+function handleHistory(row: BpmTaskApi.Task) {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
@@ -26,7 +26,7 @@ function handleHistory(row: BpmTaskApi.TaskManager) {
 }
 
 /** 撤回任务 */
-async function handleWithdraw(row: BpmTaskApi.TaskManager) {
+async function handleWithdraw(row: BpmTaskApi.Task) {
   const loadingInstance = ElLoading.service({
     text: '正在撤回中...',
   });
@@ -66,7 +66,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskManager>,
+  } as VxeTableGridOptions<BpmTaskApi.Task>,
 });
 </script>
 
diff --git a/apps/web-ele/src/views/bpm/task/manager/index.vue b/apps/web-ele/src/views/bpm/task/manager/index.vue
index 37575579b..2c320a0e7 100644
--- a/apps/web-ele/src/views/bpm/task/manager/index.vue
+++ b/apps/web-ele/src/views/bpm/task/manager/index.vue
@@ -13,7 +13,7 @@ import { useGridColumns, useGridFormSchema } from './data';
 defineOptions({ name: 'BpmManagerTask' });
 
 /** 查看历史 */
-function handleHistory(row: BpmTaskApi.TaskManager) {
+function handleHistory(row: BpmTaskApi.Task) {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
diff --git a/apps/web-ele/src/views/crm/business/status/data.ts b/apps/web-ele/src/views/crm/business/status/data.ts
index 86f20d819..d5e5608a0 100644
--- a/apps/web-ele/src/views/crm/business/status/data.ts
+++ b/apps/web-ele/src/views/crm/business/status/data.ts
@@ -37,7 +37,7 @@ export function useFormSchema(): VbenFormSchema[] {
         multiple: true,
         fieldNames: { label: 'name', value: 'id', children: 'children' },
         placeholder: '请选择应用部门',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
       },
       help: '不选择部门时，默认全公司生效',
     },
diff --git a/apps/web-ele/src/views/crm/customer/limitConfig/data.ts b/apps/web-ele/src/views/crm/customer/limitConfig/data.ts
index 3b05ebfc2..675019ab0 100644
--- a/apps/web-ele/src/views/crm/customer/limitConfig/data.ts
+++ b/apps/web-ele/src/views/crm/customer/limitConfig/data.ts
@@ -56,7 +56,7 @@ export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择规则适用部门',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
       },
     },
     {
diff --git a/apps/web-ele/src/views/crm/product/category/data.ts b/apps/web-ele/src/views/crm/product/category/data.ts
index beca87319..d271c8fa4 100644
--- a/apps/web-ele/src/views/crm/product/category/data.ts
+++ b/apps/web-ele/src/views/crm/product/category/data.ts
@@ -36,7 +36,7 @@ export function useFormSchema(): VbenFormSchema[] {
         childrenField: 'children',
         placeholder: '请选择上级分类',
         showSearch: true,
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
       },
       rules: 'selectRequired',
     },
diff --git a/apps/web-ele/src/views/crm/statistics/customer/data.ts b/apps/web-ele/src/views/crm/statistics/customer/data.ts
index a2ec49ecc..b0cd09d60 100644
--- a/apps/web-ele/src/views/crm/statistics/customer/data.ts
+++ b/apps/web-ele/src/views/crm/statistics/customer/data.ts
@@ -91,7 +91,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
         placeholder: '请选择归属部门',
       },
       defaultValue: userStore.userInfo?.deptId,
diff --git a/apps/web-ele/src/views/crm/statistics/funnel/data.ts b/apps/web-ele/src/views/crm/statistics/funnel/data.ts
index 5dd93db19..76ee95135 100644
--- a/apps/web-ele/src/views/crm/statistics/funnel/data.ts
+++ b/apps/web-ele/src/views/crm/statistics/funnel/data.ts
@@ -65,7 +65,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
         placeholder: '请选择归属部门',
       },
       defaultValue: userStore.userInfo?.deptId,
diff --git a/apps/web-ele/src/views/crm/statistics/performance/data.ts b/apps/web-ele/src/views/crm/statistics/performance/data.ts
index ab86673ac..41a964c55 100644
--- a/apps/web-ele/src/views/crm/statistics/performance/data.ts
+++ b/apps/web-ele/src/views/crm/statistics/performance/data.ts
@@ -50,7 +50,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
         placeholder: '请选择归属部门',
       },
       defaultValue: userStore.userInfo?.deptId,
diff --git a/apps/web-ele/src/views/crm/statistics/portrait/data.ts b/apps/web-ele/src/views/crm/statistics/portrait/data.ts
index 18e22e767..e471da330 100644
--- a/apps/web-ele/src/views/crm/statistics/portrait/data.ts
+++ b/apps/web-ele/src/views/crm/statistics/portrait/data.ts
@@ -57,7 +57,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
         placeholder: '请选择归属部门',
       },
       defaultValue: userStore.userInfo?.deptId,
diff --git a/apps/web-ele/src/views/crm/statistics/rank/data.ts b/apps/web-ele/src/views/crm/statistics/rank/data.ts
index b60d90dce..1a52d2a34 100644
--- a/apps/web-ele/src/views/crm/statistics/rank/data.ts
+++ b/apps/web-ele/src/views/crm/statistics/rank/data.ts
@@ -71,7 +71,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         labelField: 'name',
         valueField: 'id',
         childrenField: 'children',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
         placeholder: '请选择归属部门',
       },
       defaultValue: userStore.userInfo?.deptId,
diff --git a/apps/web-ele/src/views/erp/product/category/data.ts b/apps/web-ele/src/views/erp/product/category/data.ts
index e6b13c900..4256e524d 100644
--- a/apps/web-ele/src/views/erp/product/category/data.ts
+++ b/apps/web-ele/src/views/erp/product/category/data.ts
@@ -38,7 +38,7 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择上级分类',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
       },
       rules: 'selectRequired',
     },
diff --git a/apps/web-ele/src/views/erp/product/product/data.ts b/apps/web-ele/src/views/erp/product/product/data.ts
index 8bfa9ebfe..80bb96103 100644
--- a/apps/web-ele/src/views/erp/product/product/data.ts
+++ b/apps/web-ele/src/views/erp/product/product/data.ts
@@ -52,7 +52,7 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择分类',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
       },
       rules: 'required',
     },
@@ -181,7 +181,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择分类',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
       },
     },
   ];
diff --git a/apps/web-ele/src/views/infra/codegen/data.ts b/apps/web-ele/src/views/infra/codegen/data.ts
index a02a6e191..f421263ce 100644
--- a/apps/web-ele/src/views/infra/codegen/data.ts
+++ b/apps/web-ele/src/views/infra/codegen/data.ts
@@ -172,6 +172,7 @@ export function useGenerationInfoBaseFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择上级菜单',
+        checkStrictly: true,
         filterTreeNode(input: string, node: Recordable<any>) {
           if (!input || input.length === 0) {
             return true;
@@ -181,7 +182,7 @@ export function useGenerationInfoBaseFormSchema(): VbenFormSchema[] {
           return name.includes(input) || $t(name).includes(input);
         },
         showSearch: true,
-        treeDefaultExpandedKeys: [0],
+        defaultExpandedKeys: [0],
       },
       rules: 'selectRequired',
       renderComponentContent() {
diff --git a/apps/web-ele/src/views/infra/dataSourceConfig/index.vue b/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
index c885bf455..3727b2b52 100644
--- a/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
+++ b/apps/web-ele/src/views/infra/dataSourceConfig/index.vue
@@ -76,7 +76,8 @@ function handleRowCheckboxChange({
 }: {
   records: InfraDataSourceConfigApi.DataSourceConfig[];
 }) {
-  checkedIds.value = records.map((item) => item.id!);
+  // 过滤掉id为 0 的主数据源
+  checkedIds.value = records.map((item) => item.id!).filter((id) => id !== 0);
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -138,6 +139,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               link: true,
               icon: ACTION_ICON.EDIT,
               auth: ['infra:data-source-config:update'],
+              disabled: row.id === 0,
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -146,6 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               link: true,
               icon: ACTION_ICON.DELETE,
               auth: ['infra:data-source-config:delete'],
+              disabled: row.id === 0,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-ele/src/views/infra/demo/demo02/data.ts b/apps/web-ele/src/views/infra/demo/demo02/data.ts
index 6fb82a8ca..7dc36aeb6 100644
--- a/apps/web-ele/src/views/infra/demo/demo02/data.ts
+++ b/apps/web-ele/src/views/infra/demo/demo02/data.ts
@@ -36,7 +36,7 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择上级示例分类',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
       },
       rules: 'selectRequired',
     },
diff --git a/apps/web-ele/src/views/infra/fileConfig/data.ts b/apps/web-ele/src/views/infra/fileConfig/data.ts
index c7745237d..99533cf31 100644
--- a/apps/web-ele/src/views/infra/fileConfig/data.ts
+++ b/apps/web-ele/src/views/infra/fileConfig/data.ts
@@ -225,6 +225,18 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       defaultValue: false,
     },
+    {
+      fieldName: 'config.region',
+      label: '区域',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请填写区域，一般仅 AWS 需要填写',
+      },
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
     // 通用
     {
       fieldName: 'config.domain',
diff --git a/apps/web-ele/src/views/mall/product/category/data.ts b/apps/web-ele/src/views/mall/product/category/data.ts
index 5fbb3cccb..5bb4e8f6c 100644
--- a/apps/web-ele/src/views/mall/product/category/data.ts
+++ b/apps/web-ele/src/views/mall/product/category/data.ts
@@ -38,7 +38,7 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择上级分类',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
       },
       rules: 'selectRequired',
     },
diff --git a/apps/web-ele/src/views/mall/product/comment/data.ts b/apps/web-ele/src/views/mall/product/comment/data.ts
index 7a3641ef2..e3f895801 100644
--- a/apps/web-ele/src/views/mall/product/comment/data.ts
+++ b/apps/web-ele/src/views/mall/product/comment/data.ts
@@ -3,7 +3,6 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCommentApi } from '#/api/mall/product/comment';
 
 import { z } from '#/adapter/form';
-import { getSpuSimpleList } from '#/api/mall/product/spu';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 新增/修改的表单 */
@@ -17,19 +16,28 @@ export function useFormSchema(): VbenFormSchema[] {
         show: () => false,
       },
     },
-    // TODO @puhui999：商品的选择
     {
       fieldName: 'spuId',
       label: '商品',
-      component: 'ApiSelect',
+      component: 'Input',
       componentProps: {
-        api: getSpuSimpleList,
-        labelField: 'name',
-        valueField: 'id',
         placeholder: '请选择商品',
       },
       rules: 'required',
     },
+    {
+      fieldName: 'skuId',
+      label: '商品规格',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请选择商品规格',
+      },
+      dependencies: {
+        triggerFields: ['spuId'],
+        show: (values) => !!values.spuId,
+      },
+      rules: 'required',
+    },
     {
       fieldName: 'userAvatar',
       label: '用户头像',
@@ -88,7 +96,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'replyStatus',
       label: '回复状态',
-      component: 'Select',
+      component: 'RadioGroup',
       componentProps: {
         options: [
           { label: '已回复', value: true },
diff --git a/apps/web-ele/src/views/mall/product/comment/index.vue b/apps/web-ele/src/views/mall/product/comment/index.vue
index 373dbe7c0..3c39a767c 100644
--- a/apps/web-ele/src/views/mall/product/comment/index.vue
+++ b/apps/web-ele/src/views/mall/product/comment/index.vue
@@ -2,8 +2,6 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCommentApi } from '#/api/mall/product/comment';
 
-import { h } from 'vue';
-
 import { confirm, DocAlert, Page, prompt, useVbenModal } from '@vben/common-ui';
 
 import { ElInput, ElMessage, ElRate } from 'element-plus';
@@ -37,17 +35,17 @@ function handleCreate() {
 /** 回复评价 */
 function handleReply(row: MallCommentApi.Comment) {
   prompt({
-    component: () => {
-      return h(ElInput, {
-        type: 'textarea',
-        placeholder: '请输入回复内容',
-      });
+    component: ElInput,
+    componentProps: {
+      type: 'textarea',
+      placeholder: '请输入回复内容',
+      rows: 4,
     },
     content: row.content
       ? `用户评论：${row.content}\n请输入回复内容：`
       : '请输入回复内容：',
     title: '回复评论',
-    modelPropName: 'value',
+    modelPropName: 'modelValue',
   }).then(async (val) => {
     if (val) {
       await replyComment({
@@ -127,10 +125,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <FormModal @success="handleRefresh" />
     <Grid table-title="评论列表">
       <template #descriptionScores="{ row }">
-        <ElRate v-model="row.descriptionScores" :disabled="true" />
+        <ElRate :model-value="row.descriptionScores" disabled />
       </template>
       <template #benefitScores="{ row }">
-        <ElRate v-model="row.benefitScores" :disabled="true" />
+        <ElRate :model-value="row.benefitScores" disabled />
       </template>
       <template #toolbar-tools>
         <TableAction
@@ -150,8 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               label: '回复',
-              type: 'primary',
-              link: true,
+              type: 'text',
               auth: ['product:comment:update'],
               onClick: handleReply.bind(null, row),
             },
diff --git a/apps/web-ele/src/views/mall/product/comment/modules/form.vue b/apps/web-ele/src/views/mall/product/comment/modules/form.vue
index e3648c6b8..6509e9e57 100644
--- a/apps/web-ele/src/views/mall/product/comment/modules/form.vue
+++ b/apps/web-ele/src/views/mall/product/comment/modules/form.vue
@@ -1,21 +1,30 @@
 <script lang="ts" setup>
 import type { MallCommentApi } from '#/api/mall/product/comment';
+import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
 import { createComment, getComment } from '#/api/mall/product/comment';
+import { getSpu } from '#/api/mall/product/spu';
 import { $t } from '#/locales';
+import {
+  SkuTableSelect,
+  SpuShowcase,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 
-const formData = ref<MallCommentApi.Comment>();
+const formData = ref<Partial<MallCommentApi.Comment>>({
+  descriptionScores: 5,
+  benefitScores: 5,
+});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['虚拟评论'])
@@ -35,6 +44,40 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+const skuTableSelectRef = ref<InstanceType<typeof SkuTableSelect>>();
+const selectedSku = ref<MallSpuApi.Sku>();
+
+/** 处理商品的选择变化 */
+async function handleSpuChange(spu?: MallSpuApi.Spu | null) {
+  // 处理商品选择：如果 spu 为 null 或 id 为 0，表示清空选择
+  const spuId = spu?.id && spu.id ? spu.id : undefined;
+  formData.value.spuId = spuId;
+  await formApi.setFieldValue('spuId', spuId);
+  // 清空已选规格
+  selectedSku.value = undefined;
+  formData.value.skuId = undefined;
+  await formApi.setFieldValue('skuId', undefined);
+}
+
+/** 打开商品规格的选择弹框 */
+async function openSkuSelect() {
+  const currentValues =
+    (await formApi.getValues()) as Partial<MallCommentApi.Comment>;
+  const currentSpuId = currentValues.spuId ?? formData.value?.spuId;
+  if (!currentSpuId) {
+    ElMessage.warning('请先选择商品');
+    return;
+  }
+  skuTableSelectRef.value?.open({ spuId: currentSpuId });
+}
+
+/** 处理商品规格的选择 */
+async function handleSkuSelected(sku: MallSpuApi.Sku) {
+  selectedSku.value = sku;
+  formData.value.skuId = sku.id;
+  await formApi.setFieldValue('skuId', sku.id);
+}
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -56,7 +99,9 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      // 关闭时重置表单状态
+      selectedSku.value = undefined;
+      await formApi.setValues({ spuId: undefined, skuId: undefined });
       return;
     }
     // 加载数据
@@ -64,11 +109,22 @@ const [Modal, modalApi] = useVbenModal({
     if (!data || !data.id) {
       return;
     }
+    // 编辑模式：加载数据
     modalApi.lock();
     try {
       formData.value = await getComment(data.id);
       // 设置到 values
       await formApi.setValues(formData.value);
+      // 回显已选的商品规格
+      if (formData.value?.spuId && formData.value?.skuId) {
+        const spu = await getSpu(formData.value.spuId);
+        const sku = spu.skus?.find((item) => item.id === formData.value!.skuId);
+        if (sku) {
+          selectedSku.value = sku;
+        }
+      } else {
+        selectedSku.value = undefined;
+      }
     } finally {
       modalApi.unlock();
     }
@@ -78,6 +134,37 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <template #spuId>
+        <SpuShowcase
+          v-model="(formData as any).spuId"
+          :limit="1"
+          @change="handleSpuChange"
+        />
+      </template>
+      <template #skuId>
+        <div class="flex items-center gap-2">
+          <ElButton
+            type="primary"
+            :disabled="!formData?.spuId"
+            @click="openSkuSelect"
+          >
+            选择规格
+          </ElButton>
+          <span
+            v-if="
+              selectedSku &&
+              selectedSku.properties &&
+              selectedSku.properties.length > 0
+            "
+          >
+            已选：
+            {{ selectedSku.properties.map((p: any) => p.valueName).join('/') }}
+          </span>
+          <span v-else-if="selectedSku">已选：{{ selectedSku.id }}</span>
+        </div>
+      </template>
+    </Form>
+    <SkuTableSelect ref="skuTableSelectRef" @change="handleSkuSelected" />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/index.ts b/apps/web-ele/src/views/mall/product/spu/components/index.ts
index 122cbcea0..bedd27a45 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/index.ts
+++ b/apps/web-ele/src/views/mall/product/spu/components/index.ts
@@ -1,3 +1,8 @@
+export * from './property-util';
+export { default as SkuList } from './sku-list.vue';
 export { default as SkuTableSelect } from './sku-table-select.vue';
+export { default as SpuAndSkuList } from './spu-and-sku-list.vue';
+export { default as SpuSkuSelect } from './spu-select.vue';
 export { default as SpuShowcase } from './spu-showcase.vue';
 export { default as SpuTableSelect } from './spu-table-select.vue';
+export * from './type';
diff --git a/apps/web-ele/src/views/mall/product/spu/components/property-util.ts b/apps/web-ele/src/views/mall/product/spu/components/property-util.ts
new file mode 100644
index 000000000..7f6524969
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/property-util.ts
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type { PropertyAndValues } from '#/views/mall/product/spu/components/type';
+
+/** 获得商品的规格列表 - 商品相关的公共函数（被其它模块如 promotion 使用） */
+const getPropertyList = (spu: MallSpuApi.Spu): PropertyAndValues[] => {
+  //  直接拿返回的 skus 属性逆向生成出 propertyList
+  const properties: PropertyAndValues[] = [];
+  // 只有是多规格才处理
+  if (spu.specType) {
+    spu.skus?.forEach((sku) => {
+      sku.properties?.forEach(
+        ({ propertyId, propertyName, valueId, valueName }) => {
+          // 添加属性
+          if (!properties?.some((item) => item.id === propertyId)) {
+            properties.push({
+              id: propertyId!,
+              name: propertyName!,
+              values: [],
+            });
+          }
+          // 添加属性值
+          const index = properties?.findIndex((item) => item.id === propertyId);
+          if (
+            !properties[index]?.values?.some((value) => value.id === valueId)
+          ) {
+            properties[index]?.values?.push({ id: valueId!, name: valueName! });
+          }
+        },
+      );
+    });
+  }
+  return properties;
+};
+
+export { getPropertyList };
diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
new file mode 100644
index 000000000..d92eeb16a
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
@@ -0,0 +1,643 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type {
+  PropertyAndValues,
+  RuleConfig,
+} from '#/views/mall/product/spu/components';
+
+import { ref, watch } from 'vue';
+
+import {
+  copyValueToTarget,
+  formatToFraction,
+  getNestedValue,
+  isEmpty,
+} from '@vben/utils';
+
+import {
+  ElButton,
+  ElImage,
+  ElInput,
+  ElInputNumber,
+  ElMessage,
+} from 'element-plus';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { ImageUpload } from '#/components/upload';
+
+defineOptions({ name: 'SkuList' });
+
+const props = withDefaults(
+  defineProps<{
+    isActivityComponent?: boolean; // 是否作为 sku 活动配置组件
+    isBatch?: boolean; // 是否作为批量操作组件
+    isComponent?: boolean; // 是否作为 sku 选择组件
+    isDetail?: boolean; // 是否作为 sku 详情组件
+    propertyList?: PropertyAndValues[];
+    propFormData?: MallSpuApi.Spu;
+    ruleConfig?: RuleConfig[];
+  }>(),
+  {
+    propFormData: () => ({}) as MallSpuApi.Spu,
+    propertyList: () => [],
+    ruleConfig: () => [],
+    isBatch: false,
+    isDetail: false,
+    isComponent: false,
+    isActivityComponent: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'selectionChange', value: MallSpuApi.Sku[]): void;
+}>();
+
+const { isBatch, isDetail, isComponent, isActivityComponent } = props;
+
+const formData: Ref<MallSpuApi.Spu | undefined> = ref<MallSpuApi.Spu>();
+const tableHeaders = ref<{ label: string; prop: string }[]>([]);
+
+/** 创建空 SKU 数据 */
+function createEmptySku(): MallSpuApi.Sku {
+  return {
+    price: 0,
+    marketPrice: 0,
+    costPrice: 0,
+    barCode: '',
+    picUrl: '',
+    stock: 0,
+    weight: 0,
+    volume: 0,
+    firstBrokeragePrice: 0,
+    secondBrokeragePrice: 0,
+  };
+}
+
+const skuList = ref<MallSpuApi.Sku[]>([createEmptySku()]);
+
+/** 批量添加 */
+function batchAdd() {
+  validateProperty();
+  formData.value!.skus!.forEach((item: MallSpuApi.Sku) => {
+    copyValueToTarget(item, skuList.value[0]);
+  });
+}
+
+/** 校验商品属性属性值 */
+function validateProperty() {
+  // 校验商品属性属性值是否为空，有一个为空都不给过
+  const warningInfo = '存在属性属性值为空，请先检查完善属性值后重试！！！';
+  for (const item of props.propertyList as PropertyAndValues[]) {
+    if (!item.values || isEmpty(item.values)) {
+      ElMessage.warning(warningInfo);
+      throw new Error(warningInfo);
+    }
+  }
+}
+
+/** 删除 SKU */
+function deleteSku(row: MallSpuApi.Sku) {
+  const index = formData.value!.skus!.findIndex(
+    (sku: MallSpuApi.Sku) =>
+      JSON.stringify(sku.properties) === JSON.stringify(row.properties),
+  );
+  if (index !== -1) {
+    formData.value!.skus!.splice(index, 1);
+  }
+}
+
+/** 校验 SKU 数据：保存时，每个商品规格的表单要校验。例如：销售金额最低是 0.01 */
+function validateSku() {
+  validateProperty();
+  let warningInfo = '请检查商品各行相关属性配置，';
+  let validate = true;
+
+  for (const sku of formData.value!.skus!) {
+    for (const rule of props?.ruleConfig as RuleConfig[]) {
+      const value = getNestedValue(sku, rule.name);
+      if (!rule.rule(value)) {
+        validate = false;
+        warningInfo += rule.message;
+        break;
+      }
+    }
+
+    if (!validate) {
+      ElMessage.warning(warningInfo);
+      throw new Error(warningInfo);
+    }
+  }
+}
+
+/**
+ * 选择时触发
+ *
+ * @param {object} param0 参数对象
+ * @param {MallSpuApi.Sku[]} param0.records 传递过来的选中的 sku 是一个数组
+ */
+function handleSelectionChange({ records }: { records: MallSpuApi.Sku[] }) {
+  emit('selectionChange', records);
+}
+
+/** 将传进来的值赋值给 skuList */
+watch(
+  () => props.propFormData,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+/** 生成表数据 */
+function generateTableData(propertyList: PropertyAndValues[]) {
+  const propertyValues = propertyList.map((item: PropertyAndValues) =>
+    (item.values || []).map((v: { id: number; name: string }) => ({
+      propertyId: item.id,
+      propertyName: item.name,
+      valueId: v.id,
+      valueName: v.name,
+    })),
+  );
+
+  const buildSkuList = build(propertyValues);
+
+  // 如果回显的 sku 属性和添加的属性不一致则重置 skus 列表
+  if (!validateData(propertyList)) {
+    formData.value!.skus = [];
+  }
+
+  for (const item of buildSkuList) {
+    const properties = Array.isArray(item) ? item : [item];
+    const row = {
+      ...createEmptySku(),
+      properties,
+    };
+
+    // 如果存在属性相同的 sku 则不做处理
+    const exists = formData.value!.skus!.some(
+      (sku: MallSpuApi.Sku) =>
+        JSON.stringify(sku.properties) === JSON.stringify(row.properties),
+    );
+
+    if (!exists) {
+      formData.value!.skus!.push(row);
+    }
+  }
+}
+
+/** 生成 skus 前置校验 */
+function validateData(propertyList: PropertyAndValues[]): boolean {
+  const skuPropertyIds: number[] = [];
+  formData.value!.skus!.forEach((sku: MallSpuApi.Sku) =>
+    sku.properties
+      ?.map((property: MallSpuApi.Property) => property.propertyId)
+      ?.forEach((propertyId?: number) => {
+        if (!skuPropertyIds.includes(propertyId!)) {
+          skuPropertyIds.push(propertyId!);
+        }
+      }),
+  );
+  const propertyIds = propertyList.map((item: PropertyAndValues) => item.id);
+  return skuPropertyIds.length === propertyIds.length;
+}
+
+/** 构建所有排列组合 */
+function build(
+  propertyValuesList: MallSpuApi.Property[][],
+): (MallSpuApi.Property | MallSpuApi.Property[])[] {
+  if (propertyValuesList.length === 0) {
+    return [];
+  } else if (propertyValuesList.length === 1) {
+    return propertyValuesList[0] || [];
+  } else {
+    const result: MallSpuApi.Property[][] = [];
+    const rest = build(propertyValuesList.slice(1));
+    const firstList = propertyValuesList[0];
+    if (!firstList) {
+      return [];
+    }
+
+    for (const element of firstList) {
+      for (const element_ of rest) {
+        // 第一次不是数组结构，后面的都是数组结构
+        if (Array.isArray(element_)) {
+          result.push([element!, ...(element_ as MallSpuApi.Property[])]);
+        } else {
+          result.push([element!, element_ as MallSpuApi.Property]);
+        }
+      }
+    }
+    return result;
+  }
+}
+
+/** 监听属性列表，生成相关参数和表头 */
+watch(
+  () => props.propertyList as PropertyAndValues[],
+  (propertyList: PropertyAndValues[]) => {
+    // 如果不是多规格则结束
+    if (!formData.value!.specType) {
+      return;
+    }
+
+    // 如果当前组件作为批量添加数据使用，则重置表数据
+    if (props.isBatch) {
+      skuList.value = [createEmptySku()];
+    }
+
+    // 判断代理对象是否为空
+    if (JSON.stringify(propertyList) === '[]') {
+      return;
+    }
+
+    // 重置并生成表头
+    tableHeaders.value = propertyList.map((item, index) => ({
+      prop: `name${index}`,
+      label: item.name,
+    }));
+
+    // 如果回显的 sku 属性和添加的属性一致则不处理
+    if (validateData(propertyList)) {
+      return;
+    }
+
+    // 添加新属性没有属性值也不做处理
+    if (propertyList.some((item) => !item.values || isEmpty(item.values))) {
+      return;
+    }
+
+    // 生成 table 数据，即 sku 列表
+    generateTableData(propertyList);
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+const activitySkuListRef = ref();
+
+/** 获取 SKU 表格引用 */
+function getSkuTableRef() {
+  return activitySkuListRef.value;
+}
+
+defineExpose({
+  generateTableData,
+  validateSku,
+  getSkuTableRef,
+});
+</script>
+
+<template>
+  <div class="w-full">
+    <!-- 情况一：添加/修改 -->
+    <VxeTable
+      v-if="!isDetail && !isActivityComponent"
+      :data="isBatch ? skuList : formData?.skus || []"
+      border
+      max-height="500"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
+      size="small"
+    >
+      <VxeColumn align="center" title="图片" width="120" fixed="left">
+        <template #default="{ row }">
+          <ImageUpload
+            v-model:value="row.picUrl"
+            :max-number="1"
+            :max-size="2"
+            :show-description="false"
+          />
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.specType && !isBatch">
+        <!-- 根据商品属性动态添加 -->
+        <VxeColumn
+          v-for="(item, index) in tableHeaders"
+          :key="index"
+          :title="item.label"
+          align="center"
+          fixed="left"
+          min-width="80"
+        >
+          <template #default="{ row }">
+            <span class="font-bold text-[#40aaff]">
+              {{ row.properties?.[index]?.valueName }}
+            </span>
+          </template>
+        </VxeColumn>
+      </template>
+      <VxeColumn align="center" title="商品条码" width="168">
+        <template #default="{ row }">
+          <ElInput v-model="row.barCode" class="w-full" />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="销售价" width="168">
+        <template #default="{ row }">
+          <ElInputNumber
+            v-model="row.price"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+            controls-position="right"
+          />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="市场价" width="168">
+        <template #default="{ row }">
+          <ElInputNumber
+            v-model="row.marketPrice"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+            controls-position="right"
+          />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="成本价" width="168">
+        <template #default="{ row }">
+          <ElInputNumber
+            v-model="row.costPrice"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+            controls-position="right"
+          />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="库存" width="168">
+        <template #default="{ row }">
+          <ElInputNumber
+            v-model="row.stock"
+            :min="0"
+            class="w-full"
+            controls-position="right"
+          />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="重量(kg)" width="168">
+        <template #default="{ row }">
+          <ElInputNumber
+            v-model="row.weight"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+            controls-position="right"
+          />
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="体积(m^3)" width="168">
+        <template #default="{ row }">
+          <ElInputNumber
+            v-model="row.volume"
+            :min="0"
+            :precision="2"
+            :step="0.1"
+            class="w-full"
+            controls-position="right"
+          />
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.subCommissionType">
+        <VxeColumn align="center" title="一级返佣(元)" width="168">
+          <template #default="{ row }">
+            <ElInputNumber
+              v-model="row.firstBrokeragePrice"
+              :min="0"
+              :precision="2"
+              :step="0.1"
+              class="w-full"
+              controls-position="right"
+            />
+          </template>
+        </VxeColumn>
+        <VxeColumn align="center" title="二级返佣(元)" width="168">
+          <template #default="{ row }">
+            <ElInputNumber
+              v-model="row.secondBrokeragePrice"
+              :min="0"
+              :precision="2"
+              :step="0.1"
+              class="w-full"
+              controls-position="right"
+            />
+          </template>
+        </VxeColumn>
+      </template>
+      <VxeColumn
+        v-if="formData?.specType"
+        align="center"
+        fixed="right"
+        title="操作"
+        width="100"
+      >
+        <template #default="{ row }">
+          <ElButton
+            v-if="isBatch"
+            type="primary"
+            link
+            size="small"
+            @click="batchAdd"
+          >
+            批量添加
+          </ElButton>
+          <ElButton
+            v-else
+            type="danger"
+            link
+            size="small"
+            @click="deleteSku(row)"
+          >
+            删除
+          </ElButton>
+        </template>
+      </VxeColumn>
+    </VxeTable>
+
+    <!-- 情况二：详情 -->
+    <VxeTable
+      v-if="isDetail"
+      ref="activitySkuListRef"
+      :data="formData?.skus || []"
+      border
+      max-height="500"
+      size="small"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
+      :checkbox-config="isComponent ? { reserve: true } : undefined"
+      @checkbox-change="handleSelectionChange"
+      @checkbox-all="handleSelectionChange"
+    >
+      <VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
+      <!-- TODO @puhui999：这里的宽度貌似有点问题，图片会寄出来； -->
+      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
+        <template #default="{ row }">
+          <ElImage
+            v-if="row.picUrl"
+            :src="row.picUrl"
+            class="h-[50px] w-[50px] cursor-pointer"
+            :preview-src-list="[row.picUrl]"
+            fit="cover"
+          />
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.specType && !isBatch">
+        <!-- 根据商品属性动态添加 -->
+        <VxeColumn
+          v-for="(item, index) in tableHeaders"
+          :key="index"
+          :title="item.label"
+          align="center"
+          max-width="80"
+          fixed="left"
+        >
+          <template #default="{ row }">
+            <span class="font-bold text-[#40aaff]">
+              {{ row.properties?.[index]?.valueName }}
+            </span>
+          </template>
+        </VxeColumn>
+      </template>
+      <VxeColumn align="center" title="商品条码" width="100">
+        <template #default="{ row }">
+          {{ row.barCode }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="销售价(元)" width="80">
+        <template #default="{ row }">
+          {{ row.price }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="市场价(元)" width="80">
+        <template #default="{ row }">
+          {{ row.marketPrice }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="成本价(元)" width="80">
+        <template #default="{ row }">
+          {{ row.costPrice }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="库存" width="80">
+        <template #default="{ row }">
+          {{ row.stock }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="重量(kg)" width="80">
+        <template #default="{ row }">
+          {{ row.weight }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="体积(m^3)" width="80">
+        <template #default="{ row }">
+          {{ row.volume }}
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.subCommissionType">
+        <VxeColumn align="center" title="一级返佣(元)" width="80">
+          <template #default="{ row }">
+            {{ row.firstBrokeragePrice }}
+          </template>
+        </VxeColumn>
+        <VxeColumn align="center" title="二级返佣(元)" width="80">
+          <template #default="{ row }">
+            {{ row.secondBrokeragePrice }}
+          </template>
+        </VxeColumn>
+      </template>
+    </VxeTable>
+
+    <!-- 情况三：作为活动组件 -->
+    <VxeTable
+      v-if="isActivityComponent"
+      :data="formData?.skus || []"
+      border
+      max-height="500"
+      size="small"
+      :column-config="{
+        resizable: true,
+      }"
+      :resizable-config="{
+        dragMode: 'fixed',
+      }"
+    >
+      <VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
+      <!-- TODO @puhui999：这里的宽度貌似有点问题，图片会寄出来； -->
+      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
+        <template #default="{ row }">
+          <ElImage
+            :src="row.picUrl"
+            class="h-[60px] w-[60px] cursor-pointer"
+            :preview-src-list="[row.picUrl]"
+            fit="cover"
+          />
+        </template>
+      </VxeColumn>
+      <template v-if="formData?.specType">
+        <!-- 根据商品属性动态添加 -->
+        <VxeColumn
+          v-for="(item, index) in tableHeaders"
+          :key="index"
+          :title="item.label"
+          align="center"
+          width="80"
+          fixed="left"
+        >
+          <template #default="{ row }">
+            <span class="font-bold text-[#40aaff]">
+              {{ row.properties?.[index]?.valueName }}
+            </span>
+          </template>
+        </VxeColumn>
+      </template>
+      <VxeColumn align="center" title="商品条码" width="100">
+        <template #default="{ row }">
+          {{ row.barCode }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="销售价(元)" width="80">
+        <template #default="{ row }">
+          {{ formatToFraction(row.price) }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="市场价(元)" width="80">
+        <template #default="{ row }">
+          {{ formatToFraction(row.marketPrice) }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="成本价(元)" width="80">
+        <template #default="{ row }">
+          {{ formatToFraction(row.costPrice) }}
+        </template>
+      </VxeColumn>
+      <VxeColumn align="center" title="库存" width="80">
+        <template #default="{ row }">
+          {{ row.stock }}
+        </template>
+      </VxeColumn>
+      <!-- 方便扩展每个活动配置的属性不一样  -->
+      <slot name="extension"></slot>
+    </VxeTable>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
index 11f9f887d..c4e23a314 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/sku-table-select.vue
@@ -1,16 +1,16 @@
 <!-- SKU 选择弹窗组件 -->
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
-import { fenToYuan } from '@vben/utils';
+import { ElDialog } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 
+import { useSkuGridColumns } from './spu-select-data';
+
 interface SpuData {
   spuId: number;
 }
@@ -19,105 +19,78 @@ const emit = defineEmits<{
   change: [sku: MallSpuApi.Sku];
 }>();
 
+const visible = ref(false);
 const spuId = ref<number>();
 
-/** 表格列配置 */
-const gridColumns = computed<VxeGridProps['columns']>(() => [
-  {
-    type: 'radio',
-    width: 55,
-  },
-  {
-    field: 'picUrl',
-    title: '图片',
-    width: 100,
-    align: 'center',
-    cellRender: {
-      name: 'CellImage',
-    },
-  },
-  {
-    field: 'properties',
-    title: '规格',
-    minWidth: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return (
-        cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
-        '-'
-      );
-    },
-  },
-  {
-    field: 'price',
-    title: '销售价(元)',
-    width: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return fenToYuan(cellValue);
-    },
-  },
-]);
-
-/** 处理选中 */
-function handleRadioChange() {
-  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
-  if (selectedRow) {
-    emit('change', selectedRow);
-    modalApi.close();
-  }
-}
-
-// TODO @芋艿：要不要直接非 pager？
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: gridColumns.value,
+    columns: useSkuGridColumns(),
     height: 400,
     border: true,
-    showOverflow: true,
     radioConfig: {
       reserve: true,
+      highlight: true,
     },
-    proxyConfig: {
-      ajax: {
-        query: async () => {
-          if (!spuId.value) {
-            return { list: [], total: 0 };
-          }
-          const spu = await getSpu(spuId.value);
-          return {
-            list: spu.skus || [],
-            total: spu.skus?.length || 0,
-          };
-        },
-      },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
     },
   },
   gridEvents: {
-    radioChange: handleRadioChange,
+    radioChange: () => {
+      const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
+      if (selectedRow) {
+        emit('change', selectedRow);
+        // 关闭弹窗
+        visible.value = false;
+        gridApi.grid.clearRadioRow();
+        spuId.value = undefined;
+      }
+    },
   },
 });
 
-const [Modal, modalApi] = useVbenModal({
-  destroyOnClose: true,
-  onOpenChange: async (isOpen: boolean) => {
-    if (!isOpen) {
-      gridApi.grid.clearRadioRow();
-      spuId.value = undefined;
-      return;
-    }
-    const data = modalApi.getData<SpuData>();
-    if (!data?.spuId) {
-      return;
-    }
-    spuId.value = data.spuId;
-    await gridApi.query();
-  },
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+  spuId.value = undefined;
+}
+
+/** 打开弹窗 */
+async function openModal(data?: SpuData) {
+  if (!data?.spuId) {
+    return;
+  }
+  spuId.value = data.spuId;
+  visible.value = true;
+  // 注意：useVbenVxeGrid 关闭分页(pagerConfig.enabled=false)后，proxyConfig.ajax.query 的结果不会传递到 vxe-table
+  // 需要手动调用 reloadData 设置表格数据
+  if (!spuId.value) {
+    gridApi.grid?.reloadData([]);
+    return;
+  }
+  const spu = await getSpu(spuId.value);
+  gridApi.grid?.reloadData(spu.skus || []);
+}
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: openModal,
 });
 </script>
 
 <template>
-  <Modal class="w-[700px]" title="选择规格">
+  <ElDialog
+    v-model="visible"
+    title="选择规格"
+    width="700px"
+    :destroy-on-close="true"
+    :append-to-body="true"
+    @close="closeModal"
+  >
     <Grid />
-  </Modal>
+  </ElDialog>
 </template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-and-sku-list.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-and-sku-list.vue
new file mode 100644
index 000000000..a46770be7
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-and-sku-list.vue
@@ -0,0 +1,167 @@
+<script generic="T extends MallSpuApi.Spu" lang="ts" setup>
+import type { MallSpuApi, RuleConfig, SpuProperty } from './type';
+
+import { ref, watch } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import { formatToFraction } from '@vben/utils';
+
+import { ElButton, ElImage } from 'element-plus';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+
+import SkuList from './sku-list.vue';
+
+defineOptions({ name: 'PromotionSpuAndSkuList' });
+
+const props = withDefaults(
+  defineProps<{
+    deletable?: boolean; // SPU 是否可删除
+    ruleConfig: RuleConfig[];
+    spuList: T[];
+    spuPropertyListP: SpuProperty<T>[];
+  }>(),
+  {
+    deletable: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'delete', spuId: number): void;
+}>();
+
+const spuData = ref<MallSpuApi.Spu[]>([]); // spu 详情数据列表
+const skuListRef = ref<InstanceType<typeof SkuList> | undefined>(); // 商品属性列表Ref
+const spuPropertyList = ref<SpuProperty<T>[]>([]); // spuId 对应的 sku 的属性列表
+const expandRowKeys = ref<string[]>([]); // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
+
+/**
+ * 获取所有 sku 活动配置
+ *
+ * @param extendedAttribute 在 sku 上扩展的属性，例：秒杀活动 sku 扩展属性 productConfig 请参考 seckillActivity.ts
+ */
+function getSkuConfigs(extendedAttribute: string) {
+  // 验证 SKU 数据（如果有 ref 的话）
+  if (skuListRef.value) {
+    skuListRef.value.validateSku();
+  }
+  const seckillProducts: unknown[] = [];
+  spuPropertyList.value.forEach((item) => {
+    item.spuDetail.skus?.forEach((sku) => {
+      const extendedValue = (sku as Record<string, unknown>)[extendedAttribute];
+      if (extendedValue) {
+        seckillProducts.push(extendedValue);
+      }
+    });
+  });
+  return seckillProducts;
+}
+
+defineExpose({ getSkuConfigs }); // 暴露出给表单提交时使用
+
+/** 多选时可以删除 SPU */
+async function deleteSpu(spuId: number) {
+  await confirm(`是否删除商品编号为${spuId}的数据？`);
+  const index = spuData.value.findIndex((item) => item.id === spuId);
+  if (index !== -1) {
+    spuData.value.splice(index, 1);
+    emit('delete', spuId);
+  }
+}
+
+/** 将传进来的值赋值给 spuData */
+watch(
+  () => props.spuList,
+  (data) => {
+    if (!data) return;
+    spuData.value = data as MallSpuApi.Spu[];
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+/** 将传进来的值赋值给 spuPropertyList */
+watch(
+  () => props.spuPropertyListP,
+  (data) => {
+    if (!data) return;
+    spuPropertyList.value = data as SpuProperty<T>[];
+    // 解决如果之前选择的是单规格 spu 的话后面选择多规格 sku 多规格属性信息不展示的问题。解决方法：让 SkuList 组件重新渲染（行折叠会干掉包含的组件展开时会重新加载）
+    setTimeout(() => {
+      expandRowKeys.value = data.map((item) => String(item.spuId));
+    }, 200);
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+</script>
+
+<template>
+  <VxeTable
+    :data="spuData"
+    :expand-row-keys="expandRowKeys"
+    :row-config="{
+      keyField: 'id',
+    }"
+  >
+    <VxeColumn type="expand" width="30">
+      <template #content="{ row }">
+        <SkuList
+          ref="skuListRef"
+          :is-activity-component="true"
+          :prop-form-data="
+            spuPropertyList.find((item) => item.spuId === row.id)?.spuDetail
+          "
+          :property-list="
+            spuPropertyList.find((item) => item.spuId === row.id)?.propertyList
+          "
+          :rule-config="ruleConfig"
+        >
+          <template #extension>
+            <slot></slot>
+          </template>
+        </SkuList>
+      </template>
+    </VxeColumn>
+    <VxeColumn field="id" align="center" title="商品编号" min-width="30" />
+    <VxeColumn title="商品图" min-width="80">
+      <template #default="{ row }">
+        <!-- TODO @puhui999：它的 preview 貌似展示有点奇怪，不像 antd 是全屏的。。。 -->
+        <ElImage
+          v-if="row.picUrl"
+          :src="row.picUrl"
+          class="h-[30px] w-[30px] cursor-pointer"
+          :preview-src-list="[row.picUrl]"
+          fit="cover"
+        />
+      </template>
+    </VxeColumn>
+    <VxeColumn
+      field="name"
+      title="商品名称"
+      min-width="300"
+      show-overflow="tooltip"
+    />
+    <VxeColumn align="center" title="商品售价" min-width="90">
+      <template #default="{ row }">
+        {{ formatToFraction(row.price) }}
+      </template>
+    </VxeColumn>
+    <VxeColumn field="salesCount" align="center" title="销量" min-width="90" />
+    <VxeColumn field="stock" align="center" title="库存" min-width="90" />
+    <VxeColumn
+      v-if="spuData.length > 1 && deletable"
+      align="center"
+      title="操作"
+      min-width="90"
+    >
+      <template #default="{ row }">
+        <ElButton type="danger" link @click="deleteSpu(row.id)">删除</ElButton>
+      </template>
+    </VxeColumn>
+  </VxeTable>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-select-data.ts b/apps/web-ele/src/views/mall/product/spu/components/spu-select-data.ts
new file mode 100644
index 000000000..bb1296995
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-select-data.ts
@@ -0,0 +1,168 @@
+import type { Ref } from 'vue';
+
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed } from 'vue';
+
+import { fenToYuan } from '@vben/utils';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(
+  categoryTreeList: Ref<MallCategoryApi.Category[] | unknown[]>,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'categoryId',
+      label: '商品分类',
+      component: 'TreeSelect',
+      componentProps: {
+        data: computed(() => categoryTreeList.value),
+        props: {
+          label: 'name',
+          value: 'id',
+        },
+        checkStrictly: true,
+        placeholder: '请选择商品分类',
+        clearable: true,
+        filterable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  isSelectSku: boolean,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      type: 'expand',
+      width: 30,
+      visible: isSelectSku,
+      slots: { content: 'expand_content' },
+    },
+    { type: 'checkbox', width: 55 },
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '商品图',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '商品名称',
+      minWidth: 300,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'price',
+      title: '商品售价',
+      minWidth: 90,
+      align: 'center',
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'salesCount',
+      title: '销量',
+      minWidth: 90,
+      align: 'center',
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      minWidth: 90,
+      align: 'center',
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      minWidth: 70,
+      align: 'center',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      align: 'center',
+      formatter: 'formatDateTime',
+    },
+  ] as VxeTableGridOptions['columns'];
+}
+
+/** SKU 列表的字段 */
+export function useSkuGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      type: 'radio',
+      width: 55,
+    },
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '图片',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'properties',
+      title: '规格',
+      minWidth: 120,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return (
+          cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
+          '-'
+        );
+      },
+    },
+    {
+      field: 'price',
+      title: '销售价(元)',
+      width: 120,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return fenToYuan(cellValue);
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue
new file mode 100644
index 000000000..970f56506
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-select.vue
@@ -0,0 +1,322 @@
+<script lang="ts" setup>
+import type { PropertyAndValues } from './type';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallCategoryApi } from '#/api/mall/product/category';
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSpu, getSpuPage } from '#/api/mall/product/spu';
+
+import { getPropertyList } from './property-util';
+import SkuList from './sku-list.vue';
+import { useGridColumns, useGridFormSchema } from './spu-select-data';
+
+defineOptions({ name: 'SpuSelect' });
+
+const props = withDefaults(defineProps<SpuSelectProps>(), {
+  isSelectSku: false,
+  radio: false,
+});
+
+const emit = defineEmits<{
+  (e: 'select', spuId: number, skuIds?: number[]): void;
+}>();
+
+interface SpuSelectProps {
+  // 默认不需要（不需要的情况下只返回 spu，需要的情况下返回 选中的 spu 和 sku 列表）
+  // 其它活动需要选择商品和商品属性导入此组件即可，需添加组件属性 :isSelectSku='true'
+  isSelectSku?: boolean; // 是否需要选择 sku 属性
+  radio?: boolean; // 是否单选 sku
+}
+
+// ============ 数据状态 ============
+const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
+const categoryTreeList = ref<MallCategoryApi.Category[]>([]); // 分类树
+const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
+const spuData = ref<MallSpuApi.Spu>(); // 当前展开的商品详情
+const isExpand = ref(false); // 控制 SKU 列表显示
+
+// ============ 商品选择相关 ============
+const selectedSpuId = ref<number>(0); // 选中的商品 spuId
+const selectedSkuIds = ref<number[]>([]); // 选中的商品 skuIds
+const skuListRef = ref<InstanceType<typeof SkuList>>(); // 商品属性选择 Ref
+
+/** 处理 SKU 选择变化 */
+function selectSku(val: MallSpuApi.Sku[]) {
+  const skuTable = skuListRef.value?.getSkuTableRef();
+  if (selectedSpuId.value === 0) {
+    ElMessage.warning('请先选择商品再选择相应的规格！！！');
+    skuTable?.clearSelection();
+    return;
+  }
+  if (val.length === 0) {
+    selectedSkuIds.value = [];
+    return;
+  }
+  if (props.radio) {
+    // 只选择一个
+    const firstId = val[0]?.id;
+    if (firstId !== undefined) {
+      selectedSkuIds.value = [firstId];
+    }
+    // 如果大于1个
+    if (val.length > 1) {
+      // 清空选择
+      skuTable?.clearSelection();
+      // 变更为最后一次选择的
+      const lastItem = val.pop();
+      if (lastItem) {
+        skuTable?.toggleRowSelection(lastItem, true);
+      }
+    }
+  } else {
+    selectedSkuIds.value = val
+      .map((sku) => sku.id!)
+      .filter((id): id is number => id !== undefined);
+  }
+}
+
+/** 处理 SPU 选择变化 */
+function selectSpu(row: MallSpuApi.Spu) {
+  if (!row) {
+    selectedSpuId.value = 0;
+    return;
+  }
+  selectedSpuId.value = row.id!;
+
+  // 切换选择 spu 如果有选择的 sku 则清空,确保选择的 sku 是对应的 spu 下面的
+  if (selectedSkuIds.value.length > 0) {
+    selectedSkuIds.value = [];
+  }
+}
+
+/** 处理行展开变化 */
+async function expandChange(
+  row: MallSpuApi.Spu,
+  expandedRows?: MallSpuApi.Spu[],
+) {
+  // 判断需要展开的 spuId === 选择的 spuId。如果选择了 A 就展开 A 的 skuList。如果选择了 A 手动展开 B 则阻断
+  // 目的：防止误选 sku
+  if (selectedSpuId.value !== 0) {
+    if (row.id !== selectedSpuId.value) {
+      ElMessage.warning('你已选择商品请先取消');
+      // 阻止展开，通过重新设置展开状态来保持当前选中行的展开
+      if (row.id !== undefined) {
+        const tableData = gridApi.grid.getTableData().fullData;
+        const selectedRow = tableData.find(
+          (item: MallSpuApi.Spu) => item.id === selectedSpuId.value,
+        );
+        if (selectedRow) {
+          // 关闭当前行，重新展开选中行
+          gridApi.grid.setRowExpand(selectedRow, true);
+        }
+      }
+      return;
+    }
+    // 如果已展开 skuList 则选择此对应的 spu 不需要重新获取渲染 skuList
+    if (isExpand.value && spuData.value?.id === row.id) {
+      return;
+    }
+  }
+  spuData.value = undefined;
+  propertyList.value = [];
+  isExpand.value = false;
+  if (expandedRows?.length === 0) {
+    // 如果展开个数为 0，直接返回
+    return;
+  }
+  // 获取 SPU 详情
+  if (row.id === undefined) {
+    return;
+  }
+  const res = (await getSpu(row.id)) as MallSpuApi.Spu;
+  res.skus?.forEach((item) => {
+    if (typeof item.price === 'number') {
+      item.price = Math.round(item.price * 100);
+    }
+    if (typeof item.marketPrice === 'number') {
+      item.marketPrice = Math.round(item.marketPrice * 100);
+    }
+    if (typeof item.costPrice === 'number') {
+      item.costPrice = Math.round(item.costPrice * 100);
+    }
+    if (typeof item.firstBrokeragePrice === 'number') {
+      item.firstBrokeragePrice = Math.round(item.firstBrokeragePrice * 100);
+    }
+    if (typeof item.secondBrokeragePrice === 'number') {
+      item.secondBrokeragePrice = Math.round(item.secondBrokeragePrice * 100);
+    }
+  });
+  propertyList.value = getPropertyList(res);
+  spuData.value = res;
+  isExpand.value = true;
+}
+
+const formSchema = computed(() => useGridFormSchema(categoryTreeList)); // 搜索表单 Schema
+const gridColumns = computed<VxeTableGridOptions['columns']>(() => {
+  const columns = useGridColumns(props.isSelectSku);
+  // 将 checkbox 替换为 radio
+  return columns?.map((col) => {
+    if (col.type === 'checkbox') {
+      return { ...col, type: 'radio' };
+    }
+    return col;
+  });
+}); // 表格列配置
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 800,
+    border: true,
+    radioConfig: {
+      reserve: true,
+      highlight: true,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    expandConfig: {
+      trigger: 'row',
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          return await getSpuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            tabType: 0,
+            ...formValues,
+          });
+        },
+      },
+    },
+  },
+  gridEvents: {
+    radioChange: ({ row, $grid }: { $grid: any; row: MallSpuApi.Spu }) => {
+      selectSpu(row);
+      if (props.isSelectSku) {
+        $grid.clearRowExpand();
+        $grid.setRowExpand(row, true);
+        expandChange(row, [row]);
+      }
+    },
+    toggleRowExpand: ({
+      row,
+      expanded,
+    }: {
+      expanded: boolean;
+      row: unknown;
+    }) => {
+      if (expanded) {
+        expandChange(row as MallSpuApi.Spu, [row as MallSpuApi.Spu]);
+      } else {
+        expandChange(row as MallSpuApi.Spu, []);
+      }
+    },
+  },
+});
+
+const visible = ref(false); // 弹窗显示状态
+
+/** 打开弹窗 */
+async function openModal() {
+  visible.value = true;
+  // 等待 Grid 组件完全初始化后再查询数据
+  await nextTick();
+  if (gridApi.grid) {
+    await gridApi.query();
+  }
+}
+
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+  selectedSpuId.value = 0;
+  selectedSkuIds.value = [];
+  spuData.value = undefined;
+  propertyList.value = [];
+  isExpand.value = false;
+}
+
+/** 确认选择 */
+function handleConfirm() {
+  if (selectedSpuId.value === 0) {
+    ElMessage.warning('没有选择任何商品');
+    return;
+  }
+  if (props.isSelectSku && selectedSkuIds.value.length === 0) {
+    ElMessage.warning('没有选择任何商品属性');
+    return;
+  }
+  // 返回各自 id 列表
+  props.isSelectSku
+    ? emit('select', selectedSpuId.value, selectedSkuIds.value)
+    : emit('select', selectedSpuId.value);
+
+  // 重置选中状态
+  closeModal();
+}
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: openModal,
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(
+    categoryList.value,
+    'id',
+    'parentId',
+  ) as MallCategoryApi.Category[];
+});
+</script>
+
+<template>
+  <ElDialog
+    v-model="visible"
+    title="商品选择"
+    width="70%"
+    :destroy-on-close="true"
+    :append-to-body="true"
+    @close="closeModal"
+  >
+    <Grid>
+      <!-- 展开列内容（SKU 列表） -->
+      <template v-if="isSelectSku" #expand_content="{ row }">
+        <SkuList
+          v-if="isExpand && spuData?.id === row.id"
+          ref="skuListRef"
+          :is-component="true"
+          :is-detail="true"
+          :prop-form-data="spuData"
+          :property-list="propertyList"
+          @selection-change="selectSku"
+        />
+      </template>
+    </Grid>
+    <template #footer>
+      <span class="dialog-footer">
+        <ElButton @click="closeModal">取消</ElButton>
+        <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+      </span>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
index 73e5af5cc..940ad3d81 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-showcase.vue
@@ -108,13 +108,12 @@ function emitSpuChange() {
           <ElImage
             :src="spu.picUrl"
             class="h-full w-full rounded-lg object-cover"
-            :preview-src-list="[spu.picUrl!]"
             fit="cover"
           />
           <!-- 删除按钮 -->
           <IconifyIcon
             v-if="!disabled"
-            icon="ep:circle-close-filled"
+            icon="lucide:circle-x"
             class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
             @click="handleRemoveSpu(index)"
           />
@@ -128,7 +127,7 @@ function emitSpuChange() {
         class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
         @click="handleOpenSpuSelect"
       >
-        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </ElTooltip>
   </div>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
index e97de6b6c..e50a19523 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-table-select.vue
@@ -5,11 +5,12 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallCategoryApi } from '#/api/mall/product/category';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { computed, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
+import { ElButton, ElDialog } from 'element-plus';
+
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCategoryList } from '#/api/mall/product/category';
 import { getSpuPage } from '#/api/mall/product/spu';
@@ -30,12 +31,16 @@ const emit = defineEmits<{
 const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
 const categoryTreeList = ref<any[]>([]); // 分类树
 
+/** 弹窗显示状态 */
+const visible = ref(false);
+const initData = ref<MallSpuApi.Spu | MallSpuApi.Spu[]>();
+
 /** 单选：处理选中变化 */
 function handleRadioChange() {
   const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
   if (selectedRow) {
     emit('change', selectedRow);
-    modalApi.close();
+    closeModal();
   }
 }
 
@@ -47,19 +52,23 @@ const formSchema = computed<VbenFormSchema[]>(() => [
     component: 'Input',
     componentProps: {
       placeholder: '请输入商品名称',
-      clearable: true,
+      allowClear: true,
     },
   },
   {
     fieldName: 'categoryId',
     label: '商品分类',
-    component: 'ApiTreeSelect',
+    component: 'TreeSelect',
     componentProps: {
-      options: categoryTreeList,
-      props: { label: 'name', children: 'children' },
-      nodeKey: 'id',
+      data: categoryTreeList,
+      props: {
+        label: 'name',
+        value: 'id',
+      },
+      checkStrictly: true,
       placeholder: '请选择商品分类',
       clearable: true,
+      filterable: true,
     },
   },
   {
@@ -68,7 +77,7 @@ const formSchema = computed<VbenFormSchema[]>(() => [
     component: 'RangePicker',
     componentProps: {
       ...getRangePickerDefaultProps(),
-      clearable: true,
+      allowClear: true,
     },
   },
 ]);
@@ -153,25 +162,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
   },
 });
 
-const [Modal, modalApi] = useVbenModal({
-  destroyOnClose: true,
-  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
-  onConfirm: () => {
-    const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
-    emit('change', selectedRows);
-    modalApi.close();
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      await gridApi.grid.clearCheckboxRow();
-      await gridApi.grid.clearRadioRow();
-      return;
-    }
-
+/** 打开弹窗 */
+async function openModal(data?: MallSpuApi.Spu | MallSpuApi.Spu[]) {
+  initData.value = data;
+  visible.value = true;
+  // 等待 Grid 组件完全初始化后再查询数据
+  await nextTick();
+  if (gridApi.grid) {
     // 1. 先查询数据
     await gridApi.query();
     // 2. 设置已选中行
-    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
     if (props.multiple && Array.isArray(data) && data.length > 0) {
       setTimeout(() => {
         const tableData = gridApi.grid.getTableData().fullData;
@@ -195,15 +195,27 @@ const [Modal, modalApi] = useVbenModal({
         }
       }, 300);
     }
-  },
-});
+  }
+}
+
+/** 关闭弹窗 */
+async function closeModal() {
+  visible.value = false;
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearRadioRow();
+  initData.value = undefined;
+}
+
+/** 确认选择（多选模式） */
+function handleConfirm() {
+  const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
+  emit('change', selectedRows);
+  closeModal();
+}
 
-/** 对外暴露的方法 */
 defineExpose({
-  open: (data?: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
-    modalApi.setData(data).open();
-  },
-});
+  open: openModal,
+}); // 对外暴露的方法
 
 /** 初始化分类数据 */
 onMounted(async () => {
@@ -213,7 +225,20 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Modal title="选择商品" class="w-[950px]">
+  <ElDialog
+    v-model="visible"
+    title="选择商品"
+    width="950px"
+    :destroy-on-close="true"
+    :append-to-body="true"
+    @close="closeModal"
+  >
     <Grid />
-  </Modal>
+    <template #footer>
+      <span v-if="props.multiple" class="dialog-footer">
+        <ElButton @click="closeModal">取消</ElButton>
+        <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+      </span>
+    </template>
+  </ElDialog>
 </template>
diff --git a/apps/web-ele/src/views/mall/product/spu/components/type.ts b/apps/web-ele/src/views/mall/product/spu/components/type.ts
new file mode 100644
index 000000000..7e1155af1
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/components/type.ts
@@ -0,0 +1,32 @@
+/** 商品属性及其值的树形结构（用于前端展示和操作） */
+export interface PropertyAndValues {
+  id: number;
+  name: string;
+  values?: PropertyAndValues[];
+}
+
+export interface RuleConfig {
+  // 需要校验的字段
+  // 例：name: 'name' 则表示校验 sku.name 的值
+  // 例：name: 'productConfig.stock' 则表示校验 sku.productConfig.name 的值,此处 productConfig 表示我在 Sku 上扩展的属性
+  name: string;
+  // 校验规格为一个毁掉函数，其中 arg 为需要校验的字段的值。
+  // 例：需要校验价格必须大于0.01
+  // {
+  //  name:'price',
+  //  rule:(arg: number) => arg > 0.01
+  // }
+  rule: (arg: any) => boolean;
+  // 校验不通过时的消息提示
+  message: string;
+}
+
+export interface SpuProperty<T> {
+  propertyList: PropertyAndValues[];
+  spuDetail: T;
+  spuId: number;
+}
+
+// Re-export for use in generic constraint
+
+export { type MallSpuApi } from '#/api/mall/product/spu';
diff --git a/apps/web-ele/src/views/mall/product/spu/data.ts b/apps/web-ele/src/views/mall/product/spu/data.ts
index f667c6948..f26dc8e43 100644
--- a/apps/web-ele/src/views/mall/product/spu/data.ts
+++ b/apps/web-ele/src/views/mall/product/spu/data.ts
@@ -2,11 +2,17 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { handleTree } from '@vben/utils';
+import { fenToYuan, handleTree, treeToString } from '@vben/utils';
 
 import { getCategoryList } from '#/api/mall/product/category';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let categoryList: any[] = [];
+getCategoryList({}).then((data) => {
+  categoryList = handleTree(data, 'id', 'parentId', 'children');
+});
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -14,15 +20,20 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'name',
       label: '商品名称',
       component: 'Input',
+      componentProps: {
+        placeholder: '请输入商品名称',
+        clearable: true,
+      },
     },
     {
       fieldName: 'categoryId',
       label: '商品分类',
       component: 'ApiTreeSelect',
       componentProps: {
+        placeholder: '请选择商品分类',
+        clearable: true,
         api: async () => {
-          const res = await getCategoryList({});
-          return handleTree(res, 'id', 'parentId', 'children');
+          return categoryList;
         },
         labelField: 'name',
         valueField: 'id',
@@ -49,16 +60,11 @@ export function useGridColumns(
   ) => PromiseLike<boolean | undefined>,
 ): VxeTableGridOptions['columns'] {
   return [
-    {
-      type: 'expand',
-      width: 80,
-      slots: { content: 'expand_content' },
-      fixed: 'left',
-    },
     {
       field: 'id',
       title: '商品编号',
       fixed: 'left',
+      minWidth: 100,
     },
     {
       field: 'name',
@@ -69,30 +75,23 @@ export function useGridColumns(
     {
       field: 'picUrl',
       title: '商品图片',
+      minWidth: 100,
       cellRender: {
         name: 'CellImage',
       },
     },
     {
-      field: 'price',
-      title: '价格',
-      formatter: 'formatFenToYuanAmount',
-    },
-    {
-      field: 'salesCount',
-      title: '销量',
-    },
-    {
-      field: 'stock',
-      title: '库存',
-    },
-    {
-      field: 'sort',
-      title: '排序',
+      field: 'categoryId',
+      title: '商品分类',
+      minWidth: 150,
+      formatter: ({ row }) => {
+        return treeToString(categoryList, row.categoryId);
+      },
     },
     {
       field: 'status',
       title: '销售状态',
+      minWidth: 100,
       cellRender: {
         attrs: { beforeChange: onStatusChange },
         name: 'CellSwitch',
@@ -104,9 +103,57 @@ export function useGridColumns(
         },
       },
     },
+    {
+      field: 'price',
+      title: '价格',
+      minWidth: 100,
+      formatter: 'formatAmount2',
+    },
+    {
+      field: 'marketPrice',
+      title: '市场价',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        return `${fenToYuan(row.marketPrice)} 元`;
+      },
+    },
+    {
+      field: 'costPrice',
+      title: '成本价',
+      minWidth: 100,
+      formatter: ({ row }) => {
+        return `${fenToYuan(row.costPrice)} 元`;
+      },
+    },
+    {
+      field: 'salesCount',
+      title: '销量',
+      minWidth: 80,
+    },
+    {
+      field: 'virtualSalesCount',
+      title: '虚拟销量',
+      minWidth: 100,
+    },
+    {
+      field: 'stock',
+      title: '库存',
+      minWidth: 80,
+    },
+    {
+      field: 'browseCount',
+      title: '浏览量',
+      minWidth: 100,
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      minWidth: 80,
+    },
     {
       field: 'createTime',
       title: '创建时间',
+      minWidth: 160,
       formatter: 'formatDateTime',
     },
     {
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts b/apps/web-ele/src/views/mall/product/spu/form/data.ts
similarity index 73%
rename from apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
rename to apps/web-ele/src/views/mall/product/spu/form/data.ts
index b8cf52008..5cc80e16e 100644
--- a/apps/web-ele/src/views/mall/product/spu/modules/form-data.ts
+++ b/apps/web-ele/src/views/mall/product/spu/form/data.ts
@@ -4,7 +4,6 @@ import { DeliveryTypeEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { handleTree } from '@vben/utils';
 
-import { z } from '#/adapter/form';
 import { getSimpleBrandList } from '#/api/mall/product/brand';
 import { getCategoryList } from '#/api/mall/product/category';
 import { getSimpleTemplateList } from '#/api/mall/trade/delivery/expressTemplate';
@@ -25,7 +24,7 @@ export function useInfoFormSchema(): VbenFormSchema[] {
       label: '商品名称',
       component: 'Input',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         placeholder: '请输入商品名称',
       },
       rules: 'required',
@@ -33,14 +32,15 @@ export function useInfoFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'categoryId',
       label: '分类名称',
-      // component: 'ApiCascader',
       component: 'ApiTreeSelect',
       componentProps: {
         api: async () => {
           const data = await getCategoryList({});
           return handleTree(data);
         },
-        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        labelField: 'name',
+        valueField: 'id',
+        childrenField: 'children',
         placeholder: '请选择商品分类',
       },
       rules: 'required',
@@ -53,7 +53,7 @@ export function useInfoFormSchema(): VbenFormSchema[] {
         api: getSimpleBrandList,
         labelField: 'name',
         valueField: 'id',
-        allowClear: true,
+        clearable: true,
         placeholder: '请选择商品品牌',
       },
       rules: 'required',
@@ -73,10 +73,10 @@ export function useInfoFormSchema(): VbenFormSchema[] {
       component: 'Textarea',
       componentProps: {
         placeholder: '请输入商品简介',
-        autoSize: { minRows: 2, maxRows: 2 },
-        showCount: true,
+        autosize: { minRows: 2, maxRows: 2 },
+        showWordLimit: true,
         maxlength: 128,
-        allowClear: true,
+        clearable: true,
       },
       rules: 'required',
     },
@@ -104,7 +104,10 @@ export function useInfoFormSchema(): VbenFormSchema[] {
 }
 
 /** 价格库存的表单 */
-export function useSkuFormSchema(): VbenFormSchema[] {
+export function useSkuFormSchema(
+  propertyList: any[] = [],
+  isDetail: boolean = false,
+): VbenFormSchema[] {
   return [
     {
       fieldName: 'id',
@@ -119,7 +122,7 @@ export function useSkuFormSchema(): VbenFormSchema[] {
       label: '分销类型',
       component: 'RadioGroup',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         options: [
           {
             label: '默认设置',
@@ -138,7 +141,7 @@ export function useSkuFormSchema(): VbenFormSchema[] {
       label: '商品规格',
       component: 'RadioGroup',
       componentProps: {
-        allowClear: true,
+        clearable: true,
         options: [
           {
             label: '单规格',
@@ -152,7 +155,51 @@ export function useSkuFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
-    // TODO @xingyu：待补充商品属性
+    // 单规格时显示的 SkuList
+    {
+      fieldName: 'singleSkuList',
+      label: '',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        // 当 specType 为 false（单规格）时显示
+        show: (values) => values.specType === false,
+      },
+    },
+    // 多规格时显示的商品属性（占位，实际通过插槽渲染）
+    {
+      fieldName: 'productAttributes',
+      label: '商品属性',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        // 当 specType 为 true（多规格）时显示
+        show: (values) => values.specType === true,
+      },
+    },
+    // 多规格 - 批量设置
+    {
+      fieldName: 'batchSkuList',
+      label: '批量设置',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        // 当 specType 为 true（多规格）且 propertyList 有数据时显示，且非详情模式
+        show: (values) =>
+          values.specType === true && propertyList.length > 0 && !isDetail,
+      },
+    },
+    // 多规格 - 规格列表
+    {
+      fieldName: 'multiSkuList',
+      label: '规格列表',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['specType'],
+        // 当 specType 为 true（多规格）且 propertyList 有数据时显示
+        show: (values) => values.specType === true && propertyList.length > 0,
+      },
+    },
   ];
 }
 
@@ -237,10 +284,8 @@ export function useOtherFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
-      rules: z.number().min(0).optional().default(0),
+      rules: 'required',
     },
     {
       fieldName: 'giveIntegral',
@@ -248,10 +293,8 @@ export function useOtherFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
-      rules: z.number().min(0).optional().default(0),
+      rules: 'required',
     },
     {
       fieldName: 'virtualSalesCount',
@@ -259,10 +302,8 @@ export function useOtherFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
-      rules: z.number().min(0).optional().default(0),
+      rules: 'required',
     },
   ];
 }
diff --git a/apps/web-ele/src/views/mall/product/spu/form/index.vue b/apps/web-ele/src/views/mall/product/spu/form/index.vue
new file mode 100644
index 000000000..3b5bb6ea7
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/form/index.vue
@@ -0,0 +1,399 @@
+<script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
+import type {
+  PropertyAndValues,
+  RuleConfig,
+} from '#/views/mall/product/spu/components';
+
+import { onMounted, ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { useTabs } from '@vben/hooks';
+import { convertToInteger, formatToFraction } from '@vben/utils';
+
+import { ElButton, ElCard, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createSpu, getSpu, updateSpu } from '#/api/mall/product/spu';
+import { getPropertyList, SkuList } from '#/views/mall/product/spu/components';
+
+import {
+  useDeliveryFormSchema,
+  useDescriptionFormSchema,
+  useInfoFormSchema,
+  useOtherFormSchema,
+  useSkuFormSchema,
+} from './data';
+import ProductAttributes from './modules/product-attributes.vue';
+import ProductPropertyAddForm from './modules/product-property-add-form.vue';
+
+const spuId = ref<number>();
+const { params, name } = useRoute();
+const { closeCurrentTab } = useTabs();
+const activeTabName = ref('info');
+const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const isDetail = ref(name === 'ProductSpuDetail'); // 是否查看详情
+const skuListRef = ref(); // 商品属性列表 Ref
+
+const formData = ref<MallSpuApi.Spu>({
+  name: '',
+  categoryId: undefined,
+  keyword: '',
+  picUrl: '',
+  sliderPicUrls: [],
+  introduction: '',
+  deliveryTypes: [],
+  deliveryTemplateId: undefined,
+  brandId: undefined,
+  specType: false,
+  subCommissionType: false,
+  skus: [
+    {
+      price: 0,
+      marketPrice: 0,
+      costPrice: 0,
+      barCode: '',
+      picUrl: '',
+      stock: 0,
+      weight: 0,
+      volume: 0,
+      firstBrokeragePrice: 0,
+      secondBrokeragePrice: 0,
+    },
+  ],
+  description: '',
+  sort: 0,
+  giveIntegral: 0,
+  virtualSalesCount: 0,
+}); // spu 表单数据
+const propertyList = ref<PropertyAndValues[]>([]); // 商品属性列表
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'stock',
+    rule: (arg: number) => arg >= 0,
+    message: '商品库存必须大于等于 1 ！！！',
+  },
+  {
+    name: 'price',
+    rule: (arg: number) => arg >= 0.01,
+    message: '商品销售价格必须大于等于 0.01 元！！！',
+  },
+  {
+    name: 'marketPrice',
+    rule: (arg: number) => arg >= 0.01,
+    message: '商品市场价格必须大于等于 0.01 元！！！',
+  },
+  {
+    name: 'costPrice',
+    rule: (arg: number) => arg >= 0.01,
+    message: '商品成本价格必须大于等于 0.00 元！！！',
+  },
+]; // sku 相关属性校验规则
+
+const [InfoForm, infoFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useInfoFormSchema(),
+  showDefaultActions: false,
+});
+
+const [SkuForm, skuFormApi] = useVbenForm({
+  commonConfig: {
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useSkuFormSchema(propertyList.value, isDetail.value),
+  showDefaultActions: false,
+  handleValuesChange: (values, fieldsChanged) => {
+    if (fieldsChanged.includes('subCommissionType')) {
+      formData.value.subCommissionType = values.subCommissionType;
+      handleChangeSubCommissionType();
+    }
+    if (fieldsChanged.includes('specType')) {
+      formData.value.specType = values.specType;
+      handleChangeSpec();
+    }
+  },
+});
+
+const [ProductPropertyAddFormModal, productPropertyAddFormApi] = useVbenModal({
+  connectedComponent: ProductPropertyAddForm,
+  destroyOnClose: true,
+});
+
+const [DeliveryForm, deliveryFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useDeliveryFormSchema(),
+  showDefaultActions: false,
+});
+
+const [DescriptionForm, descriptionFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'vertical',
+  schema: useDescriptionFormSchema(),
+  showDefaultActions: false,
+});
+
+const [OtherForm, otherFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useOtherFormSchema(),
+  showDefaultActions: false,
+});
+
+/** tab 切换 */
+function handleTabChange(key: string) {
+  activeTabName.value = key;
+}
+
+/** 提交表单 */
+async function handleSubmit() {
+  const values: MallSpuApi.Spu = await infoFormApi
+    .merge(skuFormApi)
+    .merge(deliveryFormApi)
+    .merge(descriptionFormApi)
+    .merge(otherFormApi)
+    .submitAllForm(true);
+  values.skus = formData.value.skus;
+  if (values.skus) {
+    try {
+      // 校验 sku
+      skuListRef.value.validateSku();
+    } catch {
+      ElMessage.error('【库存价格】不完善，请填写相关信息');
+      return;
+    }
+    values.skus.forEach((item) => {
+      // 金额转换：元转分
+      item.price = convertToInteger(item.price);
+      item.marketPrice = convertToInteger(item.marketPrice);
+      item.costPrice = convertToInteger(item.costPrice);
+      item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice);
+      item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
+    });
+  }
+  // 处理轮播图列表：上传组件可能返回对象或字符串，统一处理成字符串数组
+  const newSliderPicUrls: any[] = [];
+  values.sliderPicUrls!.forEach((item: any) => {
+    // 如果是前端选的图
+    typeof item === 'object'
+      ? newSliderPicUrls.push(item.url)
+      : newSliderPicUrls.push(item);
+  });
+  values.sliderPicUrls = newSliderPicUrls;
+
+  // 提交数据
+  await (spuId.value ? updateSpu(values) : createSpu(values));
+}
+
+/** 获得详情 */
+async function getDetail() {
+  if (isDetail.value) {
+    isDetail.value = true;
+    infoFormApi.setDisabled(true);
+    skuFormApi.setDisabled(true);
+    deliveryFormApi.setDisabled(true);
+    descriptionFormApi.setDisabled(true);
+    otherFormApi.setDisabled(true);
+  }
+  // 将 SKU 的属性，整理成 PropertyAndValues 数组
+  propertyList.value = getPropertyList(formData.value);
+  formLoading.value = true;
+  try {
+    const res = await getSpu(spuId.value!);
+    // 金额转换：元转分
+    res.skus?.forEach((item) => {
+      item.price = formatToFraction(item.price);
+      item.marketPrice = formatToFraction(item.marketPrice);
+      item.costPrice = formatToFraction(item.costPrice);
+      item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
+      item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
+    });
+    formData.value = res;
+    // 初始化各表单值
+    infoFormApi.setValues(res).then();
+    skuFormApi.setValues(res).then();
+    deliveryFormApi.setValues(res).then();
+    descriptionFormApi.setValues(res).then();
+    otherFormApi.setValues(res).then();
+    // 将 SKU 的属性，整理成 PropertyAndValues 数组
+    propertyList.value = getPropertyList(formData.value);
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+// =========== sku form 逻辑 ===========
+
+/** 打开属性添加表单 */
+function openPropertyAddForm() {
+  productPropertyAddFormApi.open();
+}
+
+/** 调用 SkuList generateTableData 方法*/
+function generateSkus(propertyList: PropertyAndValues[]) {
+  skuListRef.value.generateTableData(propertyList);
+}
+
+/** 分销类型 */
+function handleChangeSubCommissionType() {
+  // 默认为零，类型切换后也要重置为零
+  for (const item of formData.value.skus!) {
+    item.firstBrokeragePrice = 0;
+    item.secondBrokeragePrice = 0;
+  }
+}
+
+/** 选择规格 */
+function handleChangeSpec() {
+  // 重置商品属性列表
+  propertyList.value = [];
+  // 重置 sku 列表
+  formData.value.skus = [
+    {
+      price: 0,
+      marketPrice: 0,
+      costPrice: 0,
+      barCode: '',
+      picUrl: '',
+      stock: 0,
+      weight: 0,
+      volume: 0,
+      firstBrokeragePrice: 0,
+      secondBrokeragePrice: 0,
+    },
+  ];
+}
+
+/** 监听 sku form schema 变化，更新表单 */
+watch(
+  propertyList,
+  () => {
+    skuFormApi.updateSchema(
+      useSkuFormSchema(propertyList.value, isDetail.value),
+    );
+  },
+  { deep: true },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  spuId.value = params.id as unknown as number;
+  if (!spuId.value) {
+    return;
+  }
+  await getDetail();
+});
+</script>
+
+<template>
+  <div>
+    <ProductPropertyAddFormModal :property-list="propertyList" />
+
+    <Page auto-content-height>
+      <ElCard class="h-full w-full" v-loading="formLoading">
+        <template #header>
+          <div class="flex items-center justify-between">
+            <!-- TODO @puhui999：这里有告警，需要修复下。 -->
+            <ElTabs v-model="activeTabName" @tab-change="handleTabChange">
+              <ElTabPane label="基础设置" name="info" />
+              <ElTabPane label="价格库存" name="sku" />
+              <ElTabPane label="物流设置" name="delivery" />
+              <ElTabPane label="商品详情" name="description" />
+              <ElTabPane label="其它设置" name="other" />
+            </ElTabs>
+            <div>
+              <ElButton type="primary" v-if="!isDetail" @click="handleSubmit">
+                保存
+              </ElButton>
+              <ElButton v-else @click="() => closeCurrentTab()">
+                返回列表
+              </ElButton>
+            </div>
+          </div>
+        </template>
+
+        <InfoForm class="w-3/5" v-show="activeTabName === 'info'" />
+        <SkuForm class="w-full" v-show="activeTabName === 'sku'">
+          <template #singleSkuList>
+            <SkuList
+              ref="skuListRef"
+              class="w-full"
+              :is-detail="isDetail"
+              :prop-form-data="formData"
+              :property-list="propertyList"
+              :rule-config="ruleConfig"
+            />
+          </template>
+          <template #productAttributes>
+            <div>
+              <ElButton class="mb-10px mr-15px" @click="openPropertyAddForm">
+                添加属性
+              </ElButton>
+              <ProductAttributes
+                :is-detail="isDetail"
+                :property-list="propertyList"
+                @success="generateSkus"
+              />
+            </div>
+          </template>
+          <template #batchSkuList>
+            <SkuList
+              :is-batch="true"
+              :is-detail="isDetail"
+              :prop-form-data="formData"
+              :property-list="propertyList"
+            />
+          </template>
+          <template #multiSkuList>
+            <SkuList
+              ref="skuListRef"
+              :is-detail="isDetail"
+              :prop-form-data="formData"
+              :property-list="propertyList"
+              :rule-config="ruleConfig"
+            />
+          </template>
+        </SkuForm>
+        <DeliveryForm class="w-3/5" v-show="activeTabName === 'delivery'" />
+        <DescriptionForm
+          class="w-3/5"
+          v-show="activeTabName === 'description'"
+        />
+        <OtherForm class="w-3/5" v-show="activeTabName === 'other'" />
+      </ElCard>
+    </Page>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-tabs__nav-wrap::after) {
+  display: none;
+}
+</style>
diff --git a/apps/web-ele/src/views/mall/product/spu/form/modules/product-attributes.vue b/apps/web-ele/src/views/mall/product/spu/form/modules/product-attributes.vue
new file mode 100644
index 000000000..e92e00237
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/form/modules/product-attributes.vue
@@ -0,0 +1,234 @@
+<!-- 商品发布 - 库存价格 - 属性列表 -->
+<script lang="ts" setup>
+import type { MallPropertyApi } from '#/api/mall/product/property';
+import type { PropertyAndValues } from '#/views/mall/product/spu/components';
+
+import { computed, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElCol,
+  ElDivider,
+  ElMessage,
+  ElOption,
+  ElSelect,
+  ElTag,
+} from 'element-plus';
+
+import {
+  createPropertyValue,
+  getPropertyValueSimpleList,
+} from '#/api/mall/product/property';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'ProductAttributes' });
+
+const props = withDefaults(defineProps<Props>(), {
+  propertyList: () => [],
+  isDetail: false,
+});
+
+const emit = defineEmits(['success']);
+
+interface Props {
+  propertyList?: PropertyAndValues[];
+  isDetail?: boolean;
+}
+
+const inputValue = ref<string[]>([]); // 输入框值（tags 模式使用数组）
+const attributeIndex = ref<null | number>(null); // 获取焦点时记录当前属性项的 index
+const inputVisible = computed(() => (index: number) => {
+  if (attributeIndex.value === null) {
+    return false;
+  }
+  if (attributeIndex.value === index) {
+    return true;
+  }
+}); // 输入框显隐控制
+
+interface InputRefItem {
+  inputRef?: {
+    attributes: {
+      id: string;
+    };
+  };
+  focus: () => void;
+}
+
+const inputRef = ref<InputRefItem[]>([]); // 标签输入框 Ref
+const attributeList = ref<PropertyAndValues[]>([]); // 商品属性列表
+const attributeOptions = ref<MallPropertyApi.PropertyValue[]>([]); // 商品属性值下拉框
+
+/** 解决 ref 在 v-for 中的获取问题*/
+function setInputRef(el: any) {
+  if (el === null || el === undefined) return;
+  // 如果不存在 id 相同的元素才添加
+  if (
+    !inputRef.value.some(
+      (item) => item.inputRef?.attributes.id === el.inputRef?.attributes.id,
+    )
+  ) {
+    inputRef.value.push(el);
+  }
+}
+
+watch(
+  () => props.propertyList,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    attributeList.value = data;
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+/** 删除属性值 */
+function handleCloseValue(index: number, value: PropertyAndValues) {
+  if (attributeList.value[index]?.values) {
+    attributeList.value[index].values = attributeList.value[
+      index
+    ].values?.filter((item) => item.id !== value.id);
+  }
+}
+
+/** 删除属性 */
+function handleCloseProperty(item: PropertyAndValues) {
+  attributeList.value = attributeList.value.filter(
+    (attribute) => attribute.id !== item.id,
+  );
+  emit('success', attributeList.value);
+}
+
+/** 显示输入框并获取焦点 */
+async function showInput(index: number) {
+  attributeIndex.value = index;
+  inputRef.value?.[index]?.focus();
+  // 获取属性下拉选项
+  await getAttributeOptions(attributeList.value?.[index]?.id!);
+}
+
+/** 定义 success 事件，用于操作成功后的回调 */
+async function handleInputConfirm(index: number, propertyId: number) {
+  // 从数组中取最后一个输入的值（tags 模式下 inputValue 是数组）
+  const currentValue = inputValue.value?.[inputValue.value.length - 1]?.trim();
+
+  if (currentValue) {
+    // 1. 重复添加校验
+    if (
+      attributeList.value?.[index]?.values?.find(
+        (item) => item.name === currentValue,
+      )
+    ) {
+      ElMessage.warning('已存在相同属性值，请重试');
+      attributeIndex.value = null;
+      inputValue.value = [];
+      return;
+    }
+
+    // 2.1 情况一：属性值已存在，则直接使用并结束
+    const existValue = attributeOptions.value.find(
+      (item) => item.name === currentValue,
+    );
+    if (existValue) {
+      attributeIndex.value = null;
+      inputValue.value = [];
+      attributeList.value?.[index]?.values?.push({
+        id: existValue.id!,
+        name: existValue.name,
+      });
+      emit('success', attributeList.value);
+      return;
+    }
+
+    // 2.2 情况二：新属性值，则进行保存
+    try {
+      const id = await createPropertyValue({
+        propertyId,
+        name: currentValue,
+      });
+      attributeList.value?.[index]?.values?.push({
+        id,
+        name: currentValue,
+      });
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+      emit('success', attributeList.value);
+    } catch {
+      ElMessage.error($t('ui.actionMessage.operationFailed'));
+    }
+  }
+  attributeIndex.value = null;
+  inputValue.value = [];
+}
+
+/** 获取商品属性下拉选项 */
+async function getAttributeOptions(propertyId: number) {
+  attributeOptions.value = await getPropertyValueSimpleList(propertyId);
+}
+</script>
+
+<template>
+  <ElCol v-for="(attribute, index) in attributeList" :key="index">
+    <ElDivider class="my-3" />
+    <div class="mt-2 flex flex-wrap items-center gap-2">
+      <span class="mx-1">属性名：</span>
+      <ElTag
+        :closable="!isDetail"
+        class="mx-1"
+        type="success"
+        @close="handleCloseProperty(attribute)"
+      >
+        {{ attribute.name }}
+      </ElTag>
+    </div>
+    <div class="mt-2 flex flex-wrap items-center gap-2">
+      <span class="mx-1">属性值：</span>
+      <ElTag
+        v-for="(value, valueIndex) in attribute.values"
+        :key="valueIndex"
+        :closable="!isDetail"
+        class="mx-1"
+        @close="handleCloseValue(index, value)"
+      >
+        {{ value?.name }}
+      </ElTag>
+      <ElSelect
+        v-show="inputVisible(index)"
+        :id="`input${index}`"
+        :ref="setInputRef"
+        v-model="inputValue"
+        clearable
+        multiple
+        filterable
+        allow-create
+        default-first-option
+        :max-collapse-tags="1"
+        size="small"
+        style="width: 100px"
+        @blur="handleInputConfirm(index, attribute.id)"
+        @change="handleInputConfirm(index, attribute.id)"
+      >
+        <ElOption
+          v-for="item2 in attributeOptions"
+          :key="item2.id"
+          :label="item2.name"
+          :value="item2.name"
+        />
+      </ElSelect>
+      <ElTag
+        v-show="!inputVisible(index)"
+        @click="showInput(index)"
+        class="mx-1 cursor-pointer border-dashed bg-gray-100"
+      >
+        <div class="flex items-center">
+          <IconifyIcon class="mr-2" icon="lucide:plus" />
+          添加
+        </div>
+      </ElTag>
+    </div>
+  </ElCol>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/form/modules/product-property-add-form.vue b/apps/web-ele/src/views/mall/product/spu/form/modules/product-property-add-form.vue
new file mode 100644
index 000000000..789ecd139
--- /dev/null
+++ b/apps/web-ele/src/views/mall/product/spu/form/modules/product-property-add-form.vue
@@ -0,0 +1,146 @@
+<!-- 商品发布 - 库存价格 - 添加属性 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { MallPropertyApi } from '#/api/mall/product/property';
+
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProperty,
+  getPropertySimpleList,
+} from '#/api/mall/product/property';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'ProductPropertyAddForm' });
+
+const props = defineProps({
+  propertyList: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const attributeList = ref<any[]>([]); // 商品属性列表
+const attributeOptions = ref<MallPropertyApi.Property[]>([]); // 商品属性名称下拉框
+
+watch(
+  () => props.propertyList,
+  (data) => {
+    if (!data) {
+      return;
+    }
+    attributeList.value = data as any[];
+  },
+  {
+    deep: true,
+    immediate: true,
+  },
+);
+
+const formSchema: VbenFormSchema[] = [
+  {
+    fieldName: 'name',
+    label: '属性名称',
+    component: 'ApiSelect',
+    componentProps: {
+      api: async () => {
+        const data = await getPropertySimpleList();
+        attributeOptions.value = data;
+        return data.map((item: MallPropertyApi.Property) => ({
+          label: item.name,
+          value: item.name,
+        }));
+      },
+      filterable: true,
+      allowCreate: true,
+      placeholder: '请选择属性名称。如果不存在，可手动输入选择',
+      multiple: true,
+      clearable: true,
+    },
+    rules: 'required',
+  },
+];
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: formSchema,
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const values = await formApi.getValues();
+    // name 为数组，遍历数组，进行重复添加校验
+    const names = values.name;
+    for (const name of names) {
+      // 重复添加校验
+      for (const attrItem of attributeList.value) {
+        if (attrItem.name === name) {
+          ElMessage.error('该属性已存在，请勿重复添加');
+          return;
+        }
+      }
+    }
+
+    for (const name of names) {
+      const existProperty = attributeOptions.value.find(
+        (item: MallPropertyApi.Property) => item.name === name,
+      );
+      if (existProperty) {
+        // 情况一：如果属性已存在，则直接使用并结束
+        attributeList.value.push({
+          id: existProperty.id,
+          name,
+          values: [],
+        });
+      } else {
+        // 情况二：如果是不存在的属性，则需要执行新增
+        const propertyId = await createProperty({ name });
+        attributeList.value.push({
+          id: propertyId,
+          name,
+          values: [],
+        });
+      }
+    }
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    modalApi.unlock();
+    await modalApi.close();
+    emit('success');
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    await formApi.resetForm();
+  },
+});
+</script>
+
+<template>
+  <Modal title="添加商品属性">
+    <Form />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mall/product/spu/index.vue b/apps/web-ele/src/views/mall/product/spu/index.vue
index 61ae8d8d0..f206c5f92 100644
--- a/apps/web-ele/src/views/mall/product/spu/index.vue
+++ b/apps/web-ele/src/views/mall/product/spu/index.vue
@@ -7,17 +7,11 @@ import { useRoute, useRouter } from 'vue-router';
 
 import { confirm, DocAlert, Page } from '@vben/common-ui';
 import { ProductSpuStatusEnum } from '@vben/constants';
-import {
-  downloadFileFromBlobPart,
-  fenToYuan,
-  handleTree,
-  treeToString,
-} from '@vben/utils';
+import { downloadFileFromBlobPart } from '@vben/utils';
 
-import { ElDescriptions, ElLoading, ElMessage, ElTabs } from 'element-plus';
+import { ElLoading, ElMessage, ElTabs } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getCategoryList } from '#/api/mall/product/category';
 import {
   deleteSpu,
   exportSpu,
@@ -30,11 +24,8 @@ import { $t } from '#/locales';
 import { useGridColumns, useGridFormSchema } from './data';
 
 const { push } = useRouter();
-const tabType = ref(0);
 const route = useRoute();
-const categoryList = ref();
-
-// tabs 数据
+const tabType = ref('0');
 const tabsData = ref([
   {
     name: '出售中',
@@ -69,13 +60,19 @@ async function handleRefresh() {
   await getTabCount();
 }
 
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportSpu(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '商品.xls', source: data });
+}
+
 /** 获得每个 Tab 的数量 */
 async function getTabCount() {
   const res = await getTabsCount();
   for (const objName in res) {
     const index = Number(objName);
     if (tabsData.value[index]) {
-      tabsData.value[index].count = res[objName] as number;
+      tabsData.value[index].count = res[objName]!;
     }
   }
 }
@@ -85,12 +82,6 @@ function handleCreate() {
   push({ name: 'ProductSpuAdd' });
 }
 
-/** 导出表格 */
-async function handleExport() {
-  const data = await exportSpu(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '商品.xls', source: data });
-}
-
 /** 编辑商品 */
 function handleEdit(row: MallSpuApi.Spu) {
   push({ name: 'ProductSpuEdit', params: { id: row.id } });
@@ -102,7 +93,7 @@ async function handleDelete(row: MallSpuApi.Spu) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteSpu(row.id as number);
+    await deleteSpu(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     await handleRefresh();
   } finally {
@@ -110,19 +101,6 @@ async function handleDelete(row: MallSpuApi.Spu) {
   }
 }
 
-/** 添加到仓库 / 回收站的状态 */
-async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
-  // 二次确认
-  const text =
-    newStatus === ProductSpuStatusEnum.RECYCLE.status
-      ? '加入到回收站'
-      : '恢复到仓库';
-  await confirm(`确认要"${row.name}"${text}吗？`);
-  await updateStatus({ id: row.id as number, status: newStatus });
-  ElMessage.success(`${text}成功`);
-  await handleRefresh();
-}
-
 /** 更新状态 */
 async function handleStatusChange(
   newStatus: number,
@@ -130,14 +108,14 @@ async function handleStatusChange(
 ): Promise<boolean | undefined> {
   return new Promise((resolve, reject) => {
     // 二次确认
-    const text = row.status ? '上架' : '下架';
+    const text = newStatus ? '上架' : '下架';
     confirm({
       content: `确认要${text + row.name}吗?`,
     })
       .then(async () => {
         // 更新状态
         await updateStatus({
-          id: row.id as number,
+          id: row.id!,
           status: newStatus,
         });
         // 提示并返回成功
@@ -150,6 +128,27 @@ async function handleStatusChange(
   });
 }
 
+/** 添加到仓库 / 回收站的状态 */
+async function handleStatus02Change(row: MallSpuApi.Spu, newStatus: number) {
+  const text =
+    newStatus === ProductSpuStatusEnum.RECYCLE.status
+      ? '加入到回收站'
+      : '恢复到仓库';
+  await confirm({
+    content: `确认要"${row.name}"${text}吗？`,
+  });
+  const loadingInstance = ElLoading.service({
+    text: `正在${text}中...`,
+  });
+  try {
+    await updateStatus({ id: row.id!, status: newStatus });
+    ElMessage.success(`${text}成功`);
+    await handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
 /** 查看商品详情 */
 function handleDetail(row: MallSpuApi.Spu) {
   push({ name: 'ProductSpuDetail', params: { id: row.id } });
@@ -162,12 +161,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(handleStatusChange),
     height: 'auto',
-    cellConfig: {
-      height: 80,
-    },
-    expandConfig: {
-      height: 100,
-    },
     keepSource: true,
     proxyConfig: {
       ajax: {
@@ -175,7 +168,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getSpuPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            tabType: tabType.value,
+            tabType: Number(tabType.value),
             ...formValues,
           });
         },
@@ -183,7 +176,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
-      resizable: true,
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -192,8 +185,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<MallSpuApi.Spu>,
 });
 
-function onChangeTab(key: any) {
-  tabType.value = Number(key);
+function onChangeTab(key: number | string) {
+  tabType.value = key.toString();
   gridApi.query();
 }
 
@@ -204,9 +197,8 @@ onMounted(async () => {
       categoryId: Number(route.query.categoryId),
     });
   }
+  // 获得每个 Tab 的数量
   await getTabCount();
-  const categoryRes = await getCategoryList({});
-  categoryList.value = handleTree(categoryRes, 'id', 'parentId', 'children');
 });
 </script>
 
@@ -221,12 +213,12 @@ onMounted(async () => {
 
     <Grid>
       <template #toolbar-actions>
-        <ElTabs class="w-full" @tab-change="onChangeTab" :stretch="true">
+        <ElTabs v-model="tabType" class="w-full" @tab-change="onChangeTab">
           <ElTabs.TabPane
             v-for="item in tabsData"
             :key="item.type"
             :label="`${item.name} (${item.count})`"
-            :name="item.type"
+            :name="String(item.type)"
           />
         </ElTabs>
       </template>
@@ -250,39 +242,6 @@ onMounted(async () => {
           ]"
         />
       </template>
-      <!-- TODO @霖：展开的样子，不展示信息 -->
-      <template #expand_content="{ row }">
-        <ElDescriptions
-          :column="4"
-          class="mt-4"
-          :label-style="{
-            width: '100px',
-            fontWeight: 'bold',
-            fontSize: '14px',
-          }"
-          :content-style="{ width: '100px', fontSize: '14px' }"
-        >
-          <ElDescriptions.Item label="商品分类">
-            {{ treeToString(categoryList, row.categoryId || 0) }}
-          </ElDescriptions.Item>
-          <ElDescriptions.Item label="商品名称">
-            {{ row.name }}
-          </ElDescriptions.Item>
-
-          <ElDescriptions.Item label="市场价">
-            {{ fenToYuan(row.marketPrice || 0) }} 元
-          </ElDescriptions.Item>
-          <ElDescriptions.Item label="成本价">
-            {{ fenToYuan(row.costPrice || 0) }} 元
-          </ElDescriptions.Item>
-          <ElDescriptions.Item label="浏览量">
-            {{ row.browseCount || 0 }}
-          </ElDescriptions.Item>
-          <ElDescriptions.Item label="虚拟销量">
-            {{ row.virtualSalesCount || 0 }}
-          </ElDescriptions.Item>
-        </ElDescriptions>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -307,7 +266,7 @@ onMounted(async () => {
               link: true,
               icon: ACTION_ICON.DELETE,
               auth: ['product:spu:delete'],
-              ifShow: () => tabType === 4,
+              ifShow: () => tabType === '4',
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
@@ -319,7 +278,6 @@ onMounted(async () => {
               link: true,
               icon: ACTION_ICON.EDIT,
               auth: ['product:spu:update'],
-              ifShow: () => tabType === 4,
               onClick: handleStatus02Change.bind(
                 null,
                 row,
@@ -332,7 +290,6 @@ onMounted(async () => {
               link: true,
               icon: ACTION_ICON.EDIT,
               auth: ['product:spu:update'],
-              ifShow: () => tabType !== 4,
               onClick: handleStatus02Change.bind(
                 null,
                 row,
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/detail.vue b/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
deleted file mode 100644
index 78de39519..000000000
--- a/apps/web-ele/src/views/mall/product/spu/modules/detail.vue
+++ /dev/null
@@ -1,504 +0,0 @@
-<script lang="ts" setup>
-import type { DictDataType } from '@vben/hooks';
-
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-import { onMounted, ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-
-import { Page } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { IconifyIcon } from '@vben/icons';
-import { floatToFixed2 } from '@vben/utils';
-
-import {
-  ElButton,
-  ElCard,
-  ElCarousel,
-  ElCarouselItem,
-  ElDescriptions,
-  ElDescriptionsItem,
-  ElEmpty,
-  ElImage,
-  ElTabPane,
-  ElTabs,
-  ElTag,
-} from 'element-plus';
-
-import * as ProductBrandApi from '#/api/mall/product/brand';
-import * as ProductCategoryApi from '#/api/mall/product/category';
-import * as ProductSpuApi from '#/api/mall/product/spu';
-
-interface Category {
-  id: number;
-  name: string;
-  children?: Category[];
-}
-
-interface Brand {
-  id: number;
-  name: string;
-}
-
-const { push } = useRouter();
-const { params } = useRoute();
-
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const activeTab = ref('basic'); // 当前激活的标签页
-const categoryList = ref<Category[]>([]); // 商品分类列表
-const brandList = ref<Brand[]>([]); // 商品品牌列表
-const deliveryTypeDict = ref<DictDataType[]>([]); // 配送方式字典
-
-// SPU 表单数据
-const formData = ref<MallSpuApi.Spu>({
-  name: '', // 商品名称
-  categoryId: undefined, // 商品分类
-  keyword: '', // 关键字
-  picUrl: '', // 商品封面图
-  sliderPicUrls: [], // 商品轮播图
-  introduction: '', // 商品简介
-  deliveryTypes: [], // 配送方式数组
-  deliveryTemplateId: undefined, // 运费模版
-  brandId: undefined, // 商品品牌
-  specType: false, // 商品规格
-  subCommissionType: false, // 分销类型
-  skus: [
-    {
-      price: 0, // 商品价格
-      marketPrice: 0, // 市场价
-      costPrice: 0, // 成本价
-      barCode: '', // 商品条码
-      picUrl: '', // 图片地址
-      stock: 0, // 库存
-      weight: 0, // 商品重量
-      volume: 0, // 商品体积
-      firstBrokeragePrice: 0, // 一级分销的佣金
-      secondBrokeragePrice: 0, // 二级分销的佣金
-    },
-  ],
-  description: '', // 商品详情
-  sort: 0, // 商品排序
-  giveIntegral: 0, // 赠送积分
-  virtualSalesCount: 0, // 虚拟销量
-});
-
-/** 获取配送方式字典 */
-const getDeliveryTypeDict = async () => {
-  try {
-    deliveryTypeDict.value = await getDictOptions(
-      DICT_TYPE.TRADE_DELIVERY_TYPE,
-      'number',
-    );
-    deliveryTypeDict.value = await getDictOptions(
-      DICT_TYPE.TRADE_DELIVERY_TYPE,
-      'number',
-    );
-  } catch (error) {
-    console.error('获取配送方式字典失败', error);
-  }
-};
-
-/** 获取商品分类列表 */
-const getCategoryList = async () => {
-  try {
-    const data = await ProductCategoryApi.getCategorySimpleList();
-    categoryList.value = data as Category[];
-  } catch (error) {
-    console.error('获取商品分类失败', error);
-  }
-};
-
-/** 获取商品品牌列表 */
-const getBrandList = async () => {
-  try {
-    const data = await ProductBrandApi.getSimpleBrandList();
-    brandList.value = data as Brand[];
-  } catch (error) {
-    console.error('获取商品品牌失败', error);
-  }
-};
-
-/** 根据ID获取分类名称 */
-const getCategoryNameById = (id: number | undefined) => {
-  if (!id || !categoryList.value || categoryList.value.length === 0)
-    return '未知分类';
-  const category = categoryList.value.find((item) => item.id === id);
-  return category ? category.name : '未知分类';
-};
-
-/** 根据ID获取品牌名称 */
-const getBrandNameById = (id: number | undefined) => {
-  if (!id || !brandList.value || brandList.value.length === 0)
-    return '未知品牌';
-  const brand = brandList.value.find((item) => item.id === id);
-  return brand ? brand.name : '未知品牌';
-};
-
-/** 根据值获取配送方式名称 */
-const getDeliveryTypeName = (value: number) => {
-  if (!deliveryTypeDict.value || deliveryTypeDict.value.length === 0)
-    return `${value}`;
-  const dict = deliveryTypeDict.value.find((item) => item.value === value);
-  return dict ? dict.label : `${value}`;
-};
-
-/** 获得详情 */
-const getDetail = async () => {
-  const id = params.id as unknown as number;
-  if (id) {
-    formLoading.value = true;
-    try {
-      const res = (await ProductSpuApi.getSpu(id)) as MallSpuApi.Spu;
-      res.skus?.forEach((item: MallSpuApi.Sku) => {
-        item.price = floatToFixed2(item.price);
-        item.marketPrice = floatToFixed2(item.marketPrice);
-        item.costPrice = floatToFixed2(item.costPrice);
-        item.firstBrokeragePrice = floatToFixed2(item.firstBrokeragePrice);
-        item.secondBrokeragePrice = floatToFixed2(item.secondBrokeragePrice);
-      });
-      formData.value = res;
-    } finally {
-      formLoading.value = false;
-    }
-  }
-};
-
-/** 返回列表 */
-const back = () => {
-  push({ name: 'ProductSpu' });
-};
-
-/** 编辑商品 */
-const editProduct = () => {
-  push({ name: 'ProductSpuForm', params: { id: params.id } });
-};
-
-/** 初始化 */
-onMounted(async () => {
-  await Promise.all([getCategoryList(), getBrandList(), getDeliveryTypeDict()]);
-  await getDetail();
-});
-</script>
-
-<template>
-  <Page auto-content-height :loading="formLoading">
-    <template #title>
-      <span class="text-lg font-bold">商品详情</span>
-    </template>
-
-    <template #extra>
-      <div class="flex gap-2">
-        <ElButton type="primary" @click="editProduct">
-          <IconifyIcon icon="ep:edit" class="mr-1" />
-          编辑商品
-        </ElButton>
-        <ElButton @click="back">
-          <IconifyIcon icon="ep:back" class="mr-1" />
-          返回列表
-        </ElButton>
-      </div>
-    </template>
-
-    <ElCard shadow="hover" class="mb-4">
-      <div class="mb-4 flex flex-col gap-4 md:flex-row md:items-center">
-        <ElImage
-          :src="formData.picUrl"
-          fit="contain"
-          style="width: 120px; height: 120px"
-          class="rounded border"
-        />
-        <div class="flex-grow">
-          <h1 class="mb-2 text-xl font-bold">{{ formData.name }}</h1>
-          <div class="mb-2 text-gray-500">
-            {{ formData.introduction || '暂无简介' }}
-          </div>
-          <div class="flex flex-wrap gap-2">
-            <ElTag v-if="formData.specType" type="success">多规格</ElTag>
-            <ElTag v-else type="info">单规格</ElTag>
-            <ElTag v-if="formData.subCommissionType" type="warning">分销</ElTag>
-            <ElTag type="danger">
-              库存:
-              {{
-                formData.skus?.reduce(
-                  (sum, sku) => sum + (sku.stock || 0),
-                  0,
-                ) || 0
-              }}
-            </ElTag>
-            <ElTag type="info">
-              分类: {{ getCategoryNameById(formData.categoryId) }}
-            </ElTag>
-          </div>
-        </div>
-      </div>
-
-      <ElTabs v-model="activeTab" type="border-card">
-        <ElTabPane name="basic" label="基本信息">
-          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-            <!-- 基本信息 -->
-            <ElCard shadow="never" header="商品信息" class="h-full">
-              <ElDescriptions :column="1" border>
-                <ElDescriptionsItem label="商品名称">
-                  {{ formData.name }}
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="商品分类">
-                  <ElTag type="success">
-                    {{ getCategoryNameById(formData.categoryId) }}
-                  </ElTag>
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="商品品牌">
-                  <ElTag type="primary">
-                    {{ getBrandNameById(formData.brandId) }}
-                  </ElTag>
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="关键字">
-                  <ElTag type="danger" />{{ formData.keyword || '无' }}
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="赠送积分">
-                  {{ formData.giveIntegral }}
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="虚拟销量">
-                  {{ formData.virtualSalesCount }}
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="排序">
-                  {{ formData.sort }}
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="规格类型">
-                  <ElTag :type="formData.specType ? 'success' : 'info'">
-                    {{ formData.specType ? '多规格' : '单规格' }}
-                  </ElTag>
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="分销类型">
-                  <ElTag
-                    :type="formData.subCommissionType ? 'warning' : 'info'"
-                  >
-                    {{ formData.subCommissionType ? '单独设置' : '默认设置' }}
-                  </ElTag>
-                </ElDescriptionsItem>
-              </ElDescriptions>
-            </ElCard>
-
-            <!-- 配送信息 -->
-            <ElCard shadow="never" header="配送信息" class="h-full">
-              <ElDescriptions :column="1" border>
-                <ElDescriptionsItem label="配送方式">
-                  <div class="flex flex-wrap gap-2">
-                    <ElTag
-                      v-for="(type, index) in formData.deliveryTypes"
-                      :key="index"
-                      :type="
-                        (deliveryTypeDict.find((dict) => dict.value === type)
-                          ?.colorType as
-                          | 'success'
-                          | 'warning'
-                          | 'info'
-                          | 'danger'
-                          | 'primary'
-                          | undefined) || undefined
-                      "
-                    >
-                      {{ getDeliveryTypeName(type) }}
-                    </ElTag>
-                    <span
-                      v-if="
-                        !formData.deliveryTypes ||
-                        formData.deliveryTypes.length === 0
-                      "
-                      class="text-gray-400"
-                    >
-                      暂无配送方式
-                    </span>
-                  </div>
-                </ElDescriptionsItem>
-                <ElDescriptionsItem label="运费模板">
-                  {{ formData.deliveryTemplateId || '未设置' }}
-                </ElDescriptionsItem>
-              </ElDescriptions>
-            </ElCard>
-          </div>
-        </ElTabPane>
-
-        <ElTabPane name="images" label="商品图片">
-          <ElCard shadow="never" header="商品轮播图">
-            <div
-              v-if="formData.sliderPicUrls && formData.sliderPicUrls.length > 0"
-            >
-              <ElCarousel
-                height="400px"
-                :interval="4000"
-                indicator-position="outside"
-                arrow="always"
-              >
-                <ElCarouselItem
-                  v-for="(item, index) in formData.sliderPicUrls"
-                  :key="index"
-                >
-                  <div class="flex h-full items-center justify-center">
-                    <ElImage
-                      :src="item"
-                      fit="contain"
-                      class="max-h-full"
-                      :preview-src-list="formData.sliderPicUrls"
-                      :initial-index="index"
-                    />
-                  </div>
-                </ElCarouselItem>
-              </ElCarousel>
-              <div class="mt-6 flex flex-wrap justify-center gap-3">
-                <div
-                  v-for="(item, index) in formData.sliderPicUrls"
-                  :key="index"
-                  class="cursor-pointer rounded border p-1"
-                >
-                  <ElImage
-                    :src="item"
-                    fit="cover"
-                    style="width: 80px; height: 80px"
-                  />
-                </div>
-              </div>
-            </div>
-            <ElEmpty v-else description="暂无轮播图" />
-          </ElCard>
-        </ElTabPane>
-
-        <ElTabPane name="sku" label="SKU信息">
-          <div v-if="formData.skus && formData.skus.length > 0">
-            <div
-              v-for="(sku, index) in formData.skus"
-              :key="index"
-              class="mb-6"
-            >
-              <ElCard
-                shadow="hover"
-                :header="`规格 ${index + 1}${sku.properties && sku.properties.length > 0 ? ` - ${sku.properties.map((p) => p.valueName).join('/')}` : ''}`"
-              >
-                <div class="flex flex-col gap-4 md:flex-row">
-                  <ElImage
-                    :src="sku.picUrl || formData.picUrl"
-                    fit="contain"
-                    style="width: 120px; height: 120px"
-                    class="flex-shrink-0 rounded border"
-                  />
-
-                  <div class="grid flex-grow grid-cols-1 gap-6 md:grid-cols-3">
-                    <!-- 价格信息 -->
-                    <div class="rounded bg-gray-50 p-4">
-                      <h3 class="mb-2 border-b pb-2 font-bold text-gray-700">
-                        价格信息
-                      </h3>
-                      <div class="grid grid-cols-2 gap-2">
-                        <div class="text-gray-500">销售价:</div>
-                        <div class="font-bold text-red-500">
-                          ¥{{ sku.price }}
-                        </div>
-                        <div class="text-gray-500">市场价:</div>
-                        <div>¥{{ sku.marketPrice }}</div>
-                        <div class="text-gray-500">成本价:</div>
-                        <div>¥{{ sku.costPrice }}</div>
-                      </div>
-                    </div>
-
-                    <!-- 库存信息 -->
-                    <div class="rounded bg-gray-50 p-4">
-                      <h3 class="mb-2 border-b pb-2 font-bold text-gray-700">
-                        库存信息
-                      </h3>
-                      <div class="grid grid-cols-2 gap-2">
-                        <div class="text-gray-500">库存:</div>
-                        <div class="font-bold">{{ sku.stock }} 件</div>
-                        <div class="text-gray-500">条码:</div>
-                        <div>{{ sku.barCode || '未设置' }}</div>
-                      </div>
-                    </div>
-
-                    <!-- 物流信息 -->
-                    <div class="rounded bg-gray-50 p-4">
-                      <h3 class="mb-2 border-b pb-2 font-bold text-gray-700">
-                        物流信息
-                      </h3>
-                      <div class="grid grid-cols-2 gap-2">
-                        <div class="text-gray-500">重量:</div>
-                        <div>{{ sku.weight }} kg</div>
-                        <div class="text-gray-500">体积:</div>
-                        <div>{{ sku.volume }} m³</div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <!-- 分销佣金 -->
-                <div
-                  v-if="formData.subCommissionType"
-                  class="mt-4 rounded bg-yellow-50 p-4"
-                >
-                  <h3 class="mb-2 border-b pb-2 font-bold text-gray-700">
-                    分销佣金
-                  </h3>
-                  <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
-                    <div class="text-gray-500">一级佣金:</div>
-                    <div class="font-bold">¥{{ sku.firstBrokeragePrice }}</div>
-                    <div class="text-gray-500">二级佣金:</div>
-                    <div class="font-bold">¥{{ sku.secondBrokeragePrice }}</div>
-                  </div>
-                </div>
-
-                <!-- 规格属性 -->
-                <div
-                  v-if="sku.properties && sku.properties.length > 0"
-                  class="mt-4"
-                >
-                  <h3 class="mb-2 font-bold text-gray-700">规格属性</h3>
-                  <div class="flex flex-wrap gap-2">
-                    <ElTag
-                      v-for="(prop, propIndex) in sku.properties"
-                      :key="propIndex"
-                      effect="dark"
-                      class="text-sm"
-                    >
-                      {{ prop.propertyName }}: {{ prop.valueName }}
-                    </ElTag>
-                  </div>
-                </div>
-              </ElCard>
-            </div>
-          </div>
-          <ElEmpty v-else description="暂无SKU信息" />
-        </ElTabPane>
-
-        <ElTabPane name="detail" label="商品详情">
-          <ElCard shadow="never" body-style="padding: 0;">
-            <div v-if="formData.description" class="product-description">
-              <div v-html="formData.description"></div>
-            </div>
-            <ElEmpty v-else description="暂无商品详情" />
-          </ElCard>
-        </ElTabPane>
-      </ElTabs>
-    </ElCard>
-  </Page>
-</template>
-
-<style scoped>
-.product-description {
-  padding: 20px;
-  background-color: #fff;
-  border-radius: 4px;
-}
-
-.product-description :deep(img) {
-  max-width: 100%;
-  height: auto;
-}
-
-.product-description :deep(table) {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.product-description :deep(table td) {
-  padding: 8px;
-  border: 1px solid #eee;
-}
-</style>
diff --git a/apps/web-ele/src/views/mall/product/spu/modules/form.vue b/apps/web-ele/src/views/mall/product/spu/modules/form.vue
deleted file mode 100644
index adcad4c02..000000000
--- a/apps/web-ele/src/views/mall/product/spu/modules/form.vue
+++ /dev/null
@@ -1,177 +0,0 @@
-<script lang="ts" setup>
-import type { MallSpuApi } from '#/api/mall/product/spu';
-
-import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { ContentWrap, Page } from '@vben/common-ui';
-import { convertToInteger, formatToFraction } from '@vben/utils';
-
-import { ElButton, ElTabs } from 'element-plus';
-
-import { useVbenForm } from '#/adapter/form';
-import { createSpu, getSpu, updateSpu } from '#/api/mall/product/spu';
-
-import {
-  useDeliveryFormSchema,
-  useDescriptionFormSchema,
-  useInfoFormSchema,
-  useOtherFormSchema,
-  useSkuFormSchema,
-} from './form-data';
-
-const spuId = ref<number>();
-const { params } = useRoute();
-
-const activeTab = ref('info');
-
-const [InfoForm, infoFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: useInfoFormSchema(),
-  showDefaultActions: false,
-});
-
-const [SkuForm, skuFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: useSkuFormSchema(),
-  showDefaultActions: false,
-});
-
-const [DeliveryForm, deliveryFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: useDeliveryFormSchema(),
-  showDefaultActions: false,
-});
-
-const [DescriptionForm, descriptionFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'vertical',
-  schema: useDescriptionFormSchema(),
-  showDefaultActions: false,
-});
-
-const [OtherForm, otherFormApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: useOtherFormSchema(),
-  showDefaultActions: false,
-});
-
-async function onSubmit() {
-  const values: MallSpuApi.Spu = await infoFormApi
-    .merge(skuFormApi)
-    .merge(deliveryFormApi)
-    .merge(descriptionFormApi)
-    .merge(otherFormApi)
-    .submitAllForm(true);
-
-  if (values.skus) {
-    values.skus.forEach((item) => {
-      // sku相关价格元转分
-      item.price = convertToInteger(item.price);
-      item.marketPrice = convertToInteger(item.marketPrice);
-      item.costPrice = convertToInteger(item.costPrice);
-      item.firstBrokeragePrice = convertToInteger(item.firstBrokeragePrice);
-      item.secondBrokeragePrice = convertToInteger(item.secondBrokeragePrice);
-    });
-  }
-  // 处理轮播图列表
-  const newSliderPicUrls: any[] = [];
-  values.sliderPicUrls!.forEach((item: any) => {
-    // 如果是前端选的图
-    typeof item === 'object'
-      ? newSliderPicUrls.push(item.url)
-      : newSliderPicUrls.push(item);
-  });
-  values.sliderPicUrls = newSliderPicUrls;
-
-  await (spuId.value ? updateSpu(values) : createSpu(values));
-}
-
-async function initDate() {
-  spuId.value = params.id as unknown as number;
-  if (!spuId.value) {
-    return;
-  }
-  const res = await getSpu(spuId.value);
-  if (res.skus) {
-    res.skus.forEach((item) => {
-      // 回显价格分转元
-      item.price = formatToFraction(item.price);
-      item.marketPrice = formatToFraction(item.marketPrice);
-      item.costPrice = formatToFraction(item.costPrice);
-      item.firstBrokeragePrice = formatToFraction(item.firstBrokeragePrice);
-      item.secondBrokeragePrice = formatToFraction(item.secondBrokeragePrice);
-    });
-  }
-  infoFormApi.setValues(res);
-  skuFormApi.setValues(res);
-  deliveryFormApi.setValues(res);
-  descriptionFormApi.setValues(res);
-  otherFormApi.setValues(res);
-}
-
-onMounted(async () => {
-  await initDate();
-});
-</script>
-
-<template>
-  <Page auto-content-height>
-    <ContentWrap class="h-full w-full pb-8">
-      <template #extra>
-        <ElButton type="primary" @click="onSubmit"> 保存 </ElButton>
-      </template>
-      <ElTabs v-model="activeTab">
-        <ElTabs.TabPane label="基础设置" name="info">
-          <InfoForm class="w-3/5" />
-        </ElTabs.TabPane>
-        <ElTabs.TabPane label="价格库存" name="sku">
-          <SkuForm class="w-3/5" />
-        </ElTabs.TabPane>
-        <ElTabs.TabPane label="物流设置" name="delivery">
-          <DeliveryForm class="w-3/5" />
-        </ElTabs.TabPane>
-        <ElTabs.TabPane label="商品详情" name="description">
-          <DescriptionForm class="w-3/5" />
-        </ElTabs.TabPane>
-        <ElTabs.TabPane label="其它设置" name="other">
-          <OtherForm class="w-3/5" />
-        </ElTabs.TabPane>
-      </ElTabs>
-    </ContentWrap>
-  </Page>
-</template>
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts b/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
index 1dab0a941..06762a868 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
@@ -24,6 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入活动名称',
       },
       rules: 'required',
+      formItemClass: 'col-span-2',
     },
     {
       fieldName: 'startTime',
@@ -32,8 +33,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'datetime',
         placeholder: '请选择开始时间',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -44,48 +45,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'datetime',
         placeholder: '请选择结束时间',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'bargainFirstPrice',
-      label: '砍价起始价格(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价起始价格',
-        controlsPosition: 'right',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'bargainMinPrice',
-      label: '砍价底价(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价底价',
-        controlsPosition: 'right',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'stock',
-      label: '活动库存',
-      component: 'InputNumber',
-      componentProps: {
-        min: 1,
-        placeholder: '请输入活动库存',
-        controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -95,9 +56,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入助力人数',
+        placeholder: '达到该人数才能砍到低价',
         controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -107,9 +67,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入砍价次数',
+        placeholder: '最大帮砍次数',
         controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -119,9 +78,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入购买限制',
+        placeholder: '最大购买次数',
         controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -133,9 +91,8 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.01,
-        placeholder: '请输入最小砍价金额',
+        placeholder: '用户每次砍价的最小金额',
         controlsPosition: 'right',
-        class: '!w-full',
       },
     },
     {
@@ -146,11 +103,17 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.01,
-        placeholder: '请输入最大砍价金额',
+        placeholder: '用户每次砍价的最大金额',
         controlsPosition: 'right',
-        class: '!w-full',
       },
     },
+    {
+      fieldName: 'spuId',
+      label: '砍价商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
   ];
 }
 
@@ -222,13 +185,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'bargainFirstPrice',
       title: '起始价格',
       minWidth: 100,
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'bargainMinPrice',
       title: '砍价底价',
       minWidth: 100,
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'recordUserCount',
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue b/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue
index dba3d075b..1b11a02b1 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/index.vue
@@ -42,9 +42,16 @@ function handleEdit(row: MallBargainActivityApi.BargainActivity) {
 /** 关闭砍价活动 */
 async function handleClose(row: MallBargainActivityApi.BargainActivity) {
   await confirm('确定关闭该砍价活动吗？');
-  await closeBargainActivity(row.id as number);
-  ElMessage.success('关闭成功');
-  handleRefresh();
+  const loadingInstance = ElLoading.service({
+    text: '关闭中...',
+  });
+  try {
+    await closeBargainActivity(row.id!);
+    ElMessage.success('关闭成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 删除砍价活动 */
@@ -53,7 +60,7 @@ async function handleDelete(row: MallBargainActivityApi.BargainActivity) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteBargainActivity(row.id as number);
+    await deleteBargainActivity(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
index 04fa5dfca..56a6e0061 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
@@ -1,19 +1,32 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';
 
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createBargainActivity,
   getBargainActivity,
   updateBargainActivity,
 } from '#/api/mall/promotion/bargain/bargainActivity';
 import { $t } from '#/locales';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -33,14 +46,116 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
+    labelWidth: 130,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.bargainFirstPrice',
+    rule: (arg) => arg > 0,
+    message: '商品砍价起始价格必须大于 0 ！！！',
+  },
+  {
+    name: 'productConfig.bargainMinPrice',
+    rule: (arg) => arg >= 0,
+    message: '商品砍价底价不能小于 0 ！！！',
+  },
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品活动库存必须大于等于 1 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallBargainActivityApi.BargainProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU（砍价活动只选择一个 SKU）
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置砍价活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallBargainActivityApi.BargainProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      bargainFirstPrice: 1,
+      bargainMinPrice: 1,
+      stock: 1,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.bargainFirstPrice = formatToFraction(
+          product.bargainFirstPrice,
+        ) as unknown as number;
+        product.bargainMinPrice = formatToFraction(
+          product.bargainMinPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallBargainActivityApi.BargainProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为砍价活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -48,10 +163,36 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallBargainActivityApi.BargainActivity;
     try {
+      // 获取砍价商品配置（深拷贝避免直接修改原对象）
+      const products: MallBargainActivityApi.BargainProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      if (products.length === 0) {
+        ElMessage.error('请选择砍价商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.bargainFirstPrice = convertToInteger(item.bargainFirstPrice);
+        item.bargainMinPrice = convertToInteger(item.bargainMinPrice);
+      });
+
+      // 提交表单
+      const values = await formApi.getValues();
+      const data = {
+        ...values,
+        // 用户每次砍价金额元转分
+        randomMinPrice: values.randomMinPrice
+          ? convertToInteger(values.randomMinPrice)
+          : undefined,
+        randomMaxPrice: values.randomMaxPrice
+          ? convertToInteger(values.randomMaxPrice)
+          : undefined,
+        // 合并砍价商品配置（砍价活动只有一个商品）
+        ...products[0],
+      } as MallBargainActivityApi.BargainActivity;
+
       await (formData.value?.id
         ? updateBargainActivity(data)
         : createBargainActivity(data));
@@ -66,18 +207,44 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
+
     // 加载数据
     const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
     if (!data || !data.id) {
       return;
     }
+    // 加载数据
     modalApi.lock();
     try {
       formData.value = await getBargainActivity(data.id);
-      // 设置到 values
-      await formApi.setValues(formData.value);
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId,
+        [formData.value.skuId],
+        [
+          {
+            spuId: formData.value.spuId,
+            skuId: formData.value.skuId,
+            bargainFirstPrice: formData.value.bargainFirstPrice, // 砍价起始价格，单位分
+            bargainMinPrice: formData.value.bargainMinPrice, // 砍价底价
+            stock: formData.value.stock, // 活动库存
+          },
+        ],
+      );
+      // 设置表单值时，价格字段从分转换为元
+      await formApi.setValues({
+        ...formData.value,
+        randomMinPrice: formData.value.randomMinPrice
+          ? formatToFraction(formData.value.randomMinPrice)
+          : undefined,
+        randomMaxPrice: formData.value.randomMaxPrice
+          ? formatToFraction(formData.value.randomMaxPrice)
+          : undefined,
+      });
     } finally {
       modalApi.unlock();
     }
@@ -86,7 +253,82 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
-  </Modal>
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <ElButton
+              v-if="!formData?.id"
+              type="primary"
+              @click="openSpuSelect"
+            >
+              选择商品
+            </ElButton>
+
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：砍价活动特有配置 -->
+              <template #default>
+                <VxeColumn
+                  align="center"
+                  min-width="168"
+                  title="砍价起始价格(元)"
+                >
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.bargainFirstPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="砍价底价(元)">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.bargainMinPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="活动库存">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
+
+    <!-- 商品选择器弹窗（单选模式） -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      :radio="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts b/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
index 836500cec..47480820e 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
@@ -75,13 +75,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'activity.bargainMinPrice',
       title: '最低价',
       minWidth: 100,
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'bargainPrice',
       title: '当前价',
       minWidth: 100,
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'activity.helpMaxCount',
@@ -152,7 +152,7 @@ export function useHelpGridColumns(): VxeTableGridOptions['columns'] {
       field: 'reducePrice',
       title: '砍价金额',
       minWidth: 100,
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'createTime',
diff --git a/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts b/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts
index 301ac3076..900af00e9 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/combination/activity/data.ts
@@ -24,16 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入活动名称',
       },
       rules: 'required',
-    },
-    {
-      fieldName: 'status',
-      label: '活动状态',
-      component: 'Select',
-      componentProps: {
-        placeholder: '请选择活动状态',
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-      },
-      rules: 'required',
+      formItemClass: 'col-span-2',
     },
     {
       fieldName: 'startTime',
@@ -41,10 +32,9 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'DatePicker',
       componentProps: {
         placeholder: '请选择开始时间',
-        showTime: false,
+        type: 'datetime',
         valueFormat: 'x',
-        format: 'YYYY-MM-DD',
-        class: '!w-full',
+        format: 'YYYY-MM-DD HH:mm:ss',
       },
       rules: 'required',
     },
@@ -54,22 +44,19 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'DatePicker',
       componentProps: {
         placeholder: '请选择结束时间',
-        showTime: false,
+        type: 'datetime',
         valueFormat: 'x',
-        format: 'YYYY-MM-DD',
-        class: '!w-full',
+        format: 'YYYY-MM-DD HH:mm:ss',
       },
       rules: 'required',
     },
     {
       fieldName: 'userSize',
-      label: '用户数量',
+      label: '拼团人数',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入用户数量',
+        placeholder: '达到该人数即成团',
         min: 2,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -78,10 +65,8 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '限制时长',
       component: 'InputNumber',
       componentProps: {
-        placeholder: '请输入限制时长(小时)',
+        placeholder: '限制时长(小时)',
         min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -92,8 +77,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入总限购数量',
         min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
     },
     {
@@ -103,8 +86,6 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入单次限购数量',
         min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
       },
     },
     {
@@ -116,10 +97,11 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      // TODO
       fieldName: 'spuId',
       label: '拼团商品',
       component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
     },
   ];
 }
diff --git a/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue b/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue
index ad7f19a00..9f8b477b2 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/combination/activity/index.vue
@@ -43,10 +43,17 @@ function handleEdit(row: MallCombinationActivityApi.CombinationActivity) {
 async function handleClose(
   row: MallCombinationActivityApi.CombinationActivity,
 ) {
-  await confirm('确定关闭该拼团活动吗？');
-  await closeCombinationActivity(row.id as number);
-  ElMessage.success('关闭成功');
-  handleRefresh();
+  await confirm('确认关闭该拼团活动吗？');
+  const loadingInstance = ElLoading.service({
+    text: '关闭中...',
+  });
+  try {
+    await closeCombinationActivity(row.id!);
+    ElMessage.success('关闭成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 删除拼团活动 */
@@ -57,7 +64,7 @@ async function handleDelete(
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteCombinationActivity(row.id as number);
+    await deleteCombinationActivity(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue
index 7781fd5b9..3b8750de1 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/combination/activity/modules/form.vue
@@ -1,24 +1,39 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallCombinationActivityApi } from '#/api/mall/promotion/combination/combinationActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';
 
 import { computed, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
 
+import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createCombinationActivity,
   getCombinationActivity,
   updateCombinationActivity,
 } from '#/api/mall/promotion/combination/combinationActivity';
 import { $t } from '#/locales';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 defineOptions({ name: 'CombinationActivityForm' });
 
 const emit = defineEmits(['success']);
+
 const formData = ref<MallCombinationActivityApi.CombinationActivity>();
 const getTitle = computed(() => {
   return formData.value?.id
@@ -33,12 +48,99 @@ const [Form, formApi] = useVbenForm({
     },
     labelWidth: 100,
   },
-  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.combinationPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品拼团价格不能小于 0.01 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallCombinationActivityApi.CombinationProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置拼团活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallCombinationActivityApi.CombinationProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      combinationPrice: 0,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.combinationPrice = formatToFraction(
+          product.combinationPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallCombinationActivityApi.CombinationProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为拼团活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -46,10 +148,26 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallCombinationActivityApi.CombinationActivity;
     try {
+      // 获取拼团商品配置（深拷贝避免直接修改原对象）
+      const products: MallCombinationActivityApi.CombinationProduct[] =
+        cloneDeep(spuAndSkuListRef.value?.getSkuConfigs('productConfig') || []);
+      if (products.length === 0) {
+        ElMessage.error('请选择拼团商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.combinationPrice = convertToInteger(item.combinationPrice);
+      });
+
+      // 提交表单
+      const values = await formApi.getValues();
+      const data = {
+        ...values,
+        products,
+      } as MallCombinationActivityApi.CombinationActivity;
+
       await (formData.value?.id
         ? updateCombinationActivity(data)
         : createCombinationActivity(data));
@@ -64,18 +182,28 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
+
     // 加载数据
     const data =
       modalApi.getData<MallCombinationActivityApi.CombinationActivity>();
     if (!data || !data.id) {
       return;
     }
+    // 加载数据
     modalApi.lock();
     try {
       formData.value = await getCombinationActivity(data.id);
-      // 设置到 values
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId!,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
+      // 设置表单值
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
@@ -85,7 +213,53 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-3/5" :title="getTitle">
-    <Form />
-  </Modal>
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <ElButton
+              v-if="!formData?.id"
+              type="primary"
+              @click="openSpuSelect"
+            >
+              选择商品
+            </ElButton>
+
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：拼团活动特有配置 -->
+              <template #default>
+                <VxeColumn align="center" min-width="168" title="拼团价格(元)">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.combinationPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
+
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/combination/components/showcase.vue b/apps/web-ele/src/views/mall/promotion/combination/components/showcase.vue
index d52e0e458..880790952 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/components/showcase.vue
+++ b/apps/web-ele/src/views/mall/promotion/combination/components/showcase.vue
@@ -111,7 +111,6 @@ function emitActivityChange() {
     >
       <ElTooltip :content="activity.name">
         <div class="relative h-full w-full">
-          <!-- TODO @芋艿 -->
           <ElImage
             :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"
diff --git a/apps/web-ele/src/views/mall/promotion/combination/record/data.ts b/apps/web-ele/src/views/mall/promotion/combination/record/data.ts
index 82b63c49a..7669be635 100644
--- a/apps/web-ele/src/views/mall/promotion/combination/record/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/combination/record/data.ts
@@ -20,9 +20,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'createTime',
       label: '创建时间',
-      component: 'RangePicker',
+      component: 'DatePicker',
       componentProps: {
-        placeholder: ['开始时间', '结束时间'],
+        type: 'daterange',
+        startPlaceholder: '开始时间',
+        endPlaceholder: '结束时间',
         clearable: true,
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
       },
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue b/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
index 073206aff..386ba7b7c 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/select.vue
@@ -2,7 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { useVbenModal } from '@vben/common-ui';
+import { ref } from 'vue';
+
+import { ElButton, ElDialog } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
@@ -15,7 +17,11 @@ const props = defineProps<{
   takeType?: number; // 领取方式
 }>();
 
-const emit = defineEmits(['success']);
+const emit = defineEmits<{
+  (e: 'change', v: MallCouponTemplateApi.CouponTemplate[]): void;
+}>();
+
+const visible = ref(false); // 弹窗显示状态
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
@@ -48,19 +54,44 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
 });
 
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    // 从 gridApi 获取选中的记录
-    const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
-      []) as MallCouponTemplateApi.CouponTemplate[];
-    await modalApi.close();
-    emit('success', selectedRecords);
-  },
+/** 打开弹窗 */
+async function open() {
+  visible.value = true;
+  await gridApi.query();
+}
+
+/** 确认选择 */
+function handleConfirm() {
+  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+    []) as MallCouponTemplateApi.CouponTemplate[];
+  emit('change', selectedRecords);
+  closeModal();
+}
+
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+}
+
+/** 对外暴露的方法 */
+defineExpose({
+  open,
 });
 </script>
 
 <template>
-  <Modal title="选择优惠券" class="w-2/3">
+  <ElDialog
+    v-model="visible"
+    title="选择优惠券"
+    width="65%"
+    :destroy-on-close="true"
+    :append-to-body="true"
+    @close="closeModal"
+  >
     <Grid />
-  </Modal>
+    <template #footer>
+      <ElButton @click="closeModal">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </ElDialog>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue b/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
index ce609628a..38cad5360 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/components/send-form.vue
@@ -73,8 +73,7 @@ const [Modal, modalApi] = useVbenModal({
           :actions="[
             {
               label: '发送',
-              type: 'primary',
-              link: true,
+              type: 'text',
               auth: ['promotion:coupon:send'],
               onClick: () => handleSendCoupon(row),
             },
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts b/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts
index 035259be5..0b00c1427 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/coupon/template/data.ts
@@ -60,7 +60,6 @@ export function useFormSchema(): VbenFormSchema[] {
       rules: 'required',
       defaultValue: PromotionProductScopeEnum.ALL.scope,
     },
-    // TODO @puhui999： 商品选择器优化
     {
       fieldName: 'productSpuIds',
       label: '商品',
@@ -84,7 +83,6 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
-    // TODO @puhui999： 商品分类选择器优化
     {
       fieldName: 'productCategoryIds',
       label: '商品分类',
diff --git a/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue b/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue
index c8b735ccc..13e4c7535 100644
--- a/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/coupon/template/modules/form.vue
@@ -16,11 +16,18 @@ import {
   updateCouponTemplate,
 } from '#/api/mall/promotion/coupon/couponTemplate';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<MallCouponTemplateApi.CouponTemplate>();
+const formData = ref<
+  Partial<MallCouponTemplateApi.CouponTemplate> & {
+    productCategoryIds?: number | number[];
+    productSpuIds?: number[];
+  }
+>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['优惠券模板'])
@@ -64,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -75,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getCouponTemplate(data.id);
-      const processedData = await processLoadData(formData.value);
+      const processedData = await processLoadData(formData.value as any);
       // 设置到表单
       await formApi.setValues(processedData);
     } finally {
@@ -144,6 +151,15 @@ async function processLoadData(
 
 <template>
   <Modal :title="getTitle" class="w-2/5">
-    <Form class="mx-4" />
+    <Form class="mx-4">
+      <!-- 自定义插槽：商品选择 -->
+      <template #productSpuIds>
+        <SpuShowcase v-model="formData.productSpuIds" />
+      </template>
+      <!-- 自定义插槽：分类选择 -->
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" />
+      </template>
+    </Form>
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts b/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
index 8de164a6a..9e6368fd2 100644
--- a/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/data.ts
@@ -69,8 +69,15 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入备注',
         rows: 4,
       },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'spuIds',
+      label: '活动商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
     },
-    // TODO
   ];
 }
 
diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue b/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
index 6d8d15850..b9a5e725a 100644
--- a/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/index.vue
@@ -41,10 +41,17 @@ function handleEdit(row: MallDiscountActivityApi.DiscountActivity) {
 
 /** 关闭满减活动 */
 async function handleClose(row: MallDiscountActivityApi.DiscountActivity) {
-  await confirm('确定关闭该限时折扣活动吗？');
-  await closeDiscountActivity(row.id as number);
-  ElMessage.success('关闭成功');
-  handleRefresh();
+  await confirm('确认关闭该限时折扣活动吗？');
+  const loadingInstance = ElLoading.service({
+    text: '正在关闭中...',
+  });
+  try {
+    await closeDiscountActivity(row.id!);
+    ElMessage.success('关闭成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 删除满减活动 */
@@ -53,7 +60,7 @@ async function handleDelete(row: MallDiscountActivityApi.DiscountActivity) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteDiscountActivity(row.id as number);
+    await deleteDiscountActivity(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
index c1b67fe6f..07d640864 100644
--- a/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/discountActivity/modules/form.vue
@@ -13,13 +13,18 @@ import {
   updateDiscountActivity,
 } from '#/api/mall/promotion/discount/discountActivity';
 import { $t } from '#/locales';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
 defineOptions({ name: 'DiscountActivityForm' });
 
 const emit = defineEmits(['success']);
-const formData = ref<MallDiscountActivityApi.DiscountActivity>();
+const formData = ref<
+  Partial<MallDiscountActivityApi.DiscountActivity> & {
+    spuIds?: number[];
+  }
+>({});
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['限时折扣活动'])
@@ -39,6 +44,7 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
+// TODO @puhui999：antd 和 ele 里，修改时，商品都没展示。
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -69,7 +75,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -91,6 +97,11 @@ const [Modal, modalApi] = useVbenModal({
 
 <template>
   <Modal class="w-3/5" :title="getTitle">
-    <Form />
+    <Form>
+      <!-- 自定义插槽：商品选择 -->
+      <template #spuIds>
+        <SpuShowcase v-model="formData.spuIds" />
+      </template>
+    </Form>
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
index 3f655becf..b2fd164c9 100644
--- a/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/diy/template/decorate/index.vue
@@ -3,7 +3,7 @@ import type { MallDiyPageApi } from '#/api/mall/promotion/diy/page';
 import type { MallDiyTemplateApi } from '#/api/mall/promotion/diy/template';
 import type { DiyComponentLibrary } from '#/views/mall/promotion/components'; // 商城的 DIY 组件，在 DiyEditor 目录下
 
-import { onMounted, reactive, ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useTabs } from '@vben/hooks';
@@ -35,7 +35,7 @@ const { refreshTab } = useTabs();
 const DIY_PAGE_INDEX_KEY = 'diy_page_index'; // 特殊：存储 reset 重置时，当前 selectedTemplateItem 值，从而进行恢复
 
 const selectedTemplateItem = ref(0);
-const templateItems = reactive([
+const templateItems = ref([
   { name: '基础设置', icon: 'ep:iphone' },
   { name: '首页', icon: 'ep:home-filled' },
   { name: '我的', icon: 'ep:user-filled' },
@@ -77,11 +77,13 @@ async function getPageDetail(id: any) {
 function handleTemplateItemChange(val: any) {
   // 缓存模版编辑数据
   currentFormDataMap.value.set(
-    templateItems[selectedTemplateItem.value]?.name || '',
+    templateItems.value[selectedTemplateItem.value]?.name || '',
     currentFormData.value!,
   );
   // 读取模版缓存
-  const data = currentFormDataMap.value.get(templateItems[val]?.name || '');
+  const data = currentFormDataMap.value.get(
+    templateItems.value[val]?.name || '',
+  );
 
   // 切换模版
   selectedTemplateItem.value = val;
@@ -101,7 +103,7 @@ function handleTemplateItemChange(val: any) {
     isEmpty(data)
       ? formData.value!.pages.find(
           (page: MallDiyPageApi.DiyPage) =>
-            page.name === templateItems[val]?.name,
+            page.name === templateItems.value[val]?.name,
         )
       : data
   ) as MallDiyPageApi.DiyPage | MallDiyTemplateApi.DiyTemplateProperty;
@@ -114,7 +116,7 @@ async function submitForm() {
   });
   try {
     // 对所有的 templateItems 都进行保存，有缓存则保存缓存，解决都有修改时只保存了当前所编辑的 templateItem，导致装修效果存在差异
-    for (const [i, templateItem] of templateItems.entries()) {
+    for (const [i, templateItem] of templateItems.value.entries()) {
       const data = currentFormDataMap.value.get(templateItem.name) as any;
       // 情况一：基础设置
       if (i === 0) {
@@ -188,7 +190,7 @@ onMounted(async () => {
     :show-navigation-bar="selectedTemplateItem !== 0"
     :show-page-config="selectedTemplateItem !== 0"
     :show-tab-bar="selectedTemplateItem === 0"
-    :title="templateItems[selectedTemplateItem]?.name || ''"
+    :title="templateItems[selectedTemplateItem]?.name ?? ''"
     @reset="handleEditorReset"
     @save="submitForm"
   >
diff --git a/apps/web-ele/src/views/mall/promotion/point/activity/data.ts b/apps/web-ele/src/views/mall/promotion/point/activity/data.ts
index dcb750cbb..78231575f 100644
--- a/apps/web-ele/src/views/mall/promotion/point/activity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/point/activity/data.ts
@@ -3,50 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-
-/** 表单配置 */
-export function useFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'spuId',
-      label: '积分商城活动商品',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请选择商品',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'sort',
-      label: '排序',
-      component: 'InputNumber',
-      componentProps: {
-        placeholder: '请输入排序',
-        min: 0,
-        controlsPosition: 'right',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        rows: 4,
-      },
-    },
-  ];
-}
+import { fenToYuan } from '@vben/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -56,15 +13,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动状态',
       component: 'Select',
       componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择活动状态',
         clearable: true,
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
     },
   ];
 }
 
-/** 列表的字段 */
+/** 列表的表格列 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
@@ -78,6 +35,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 80,
       cellRender: {
         name: 'CellImage',
+        props: {
+          height: 40,
+        },
       },
     },
     {
@@ -89,18 +49,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'marketPrice',
       title: '原价',
       minWidth: 100,
-      formatter: 'formatFenToYuanAmount',
-    },
-    {
-      field: 'point',
-      title: '兑换积分',
-      minWidth: 100,
-    },
-    {
-      field: 'price',
-      title: '兑换金额',
-      minWidth: 100,
-      formatter: 'formatFenToYuanAmount',
+      formatter: ({ row }) => `￥${fenToYuan(row.marketPrice)}`,
     },
     {
       field: 'status',
@@ -125,7 +74,9 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'redeemedQuantity',
       title: '已兑换数量',
       minWidth: 100,
-      slots: { default: 'redeemedQuantity' },
+      formatter: ({ row }) => {
+        return (row.totalStock || 0) - (row.stock || 0);
+      },
     },
     {
       field: 'createTime',
@@ -141,3 +92,47 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        min: 0,
+        placeholder: '请输入排序',
+        controlsPosition: 'right',
+        class: '!w-full',
+      },
+      defaultValue: 0,
+      rules: 'required',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'spuId',
+      label: '活动商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/point/activity/index.vue b/apps/web-ele/src/views/mall/promotion/point/activity/index.vue
index 4fcebfad2..dc8b10534 100644
--- a/apps/web-ele/src/views/mall/promotion/point/activity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/activity/index.vue
@@ -1,10 +1,7 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallPointActivityApi } from '#/api/mall/promotion/point';
 
-import { computed } from 'vue';
-
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
 
 import { ElLoading, ElMessage } from 'element-plus';
 
@@ -17,51 +14,52 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import PointActivityForm from './modules/form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'PromotionPointActivity' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: PointActivityForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
-/** 获得商品已兑换数量 */
-const getRedeemedQuantity = computed(
-  () => (row: MallPointActivityApi.PointActivity) =>
-    (row.totalStock || 0) - (row.stock || 0),
-);
-
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建积分活动 */
+/** 创建积分商城活动 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑积分活动 */
-function handleEdit(row: MallPointActivityApi.PointActivity) {
+/** 编辑积分商城活动 */
+function handleEdit(row: any) {
   formModalApi.setData(row).open();
 }
 
-/** 关闭积分活动 */
-async function handleClose(row: MallPointActivityApi.PointActivity) {
-  await confirm('确认关闭该积分商城活动吗？');
-  await closePointActivity(row.id);
-  ElMessage.success('关闭成功');
-  handleRefresh();
+/** 关闭积分商城活动 */
+async function handleClose(row: any) {
+  const loadingInstance = ElLoading.service({
+    text: '正在关闭中...',
+  });
+  try {
+    await closePointActivity(row.id);
+    ElMessage.success('关闭成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
-/** 删除积分活动 */
-async function handleDelete(row: MallPointActivityApi.PointActivity) {
+/** 删除积分商城活动 */
+async function handleDelete(row: any) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.spuName]),
   });
   try {
     await deletePointActivity(row.id);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.spuName]));
     handleRefresh();
   } finally {
     loadingInstance.close();
@@ -95,21 +93,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<MallPointActivityApi.PointActivity>,
+  } as VxeTableGridOptions,
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <template #doc>
-      <DocAlert
-        title="【营销】积分商城活动"
-        url="https://doc.iocoder.cn/mall/promotion-point/"
-      />
-    </template>
-
     <FormModal @success="handleRefresh" />
-
     <Grid table-title="积分商城活动列表">
       <template #toolbar-tools>
         <TableAction
@@ -124,9 +114,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <template #redeemedQuantity="{ row }">
-        {{ getRedeemedQuantity(row) }}
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -142,17 +129,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '关闭',
               type: 'danger',
               link: true,
-              auth: ['promotion:point-activity:close'],
+              icon: ACTION_ICON.CLOSE,
               ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
+              auth: ['promotion:point-activity:close'],
+              popConfirm: {
+                title: '确认关闭该积分商城活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
             },
             {
               label: $t('common.delete'),
               type: 'danger',
               link: true,
               icon: ACTION_ICON.DELETE,
-              auth: ['promotion:point-activity:delete'],
               ifShow: row.status !== 0,
+              auth: ['promotion:point-activity:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.spuName]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue
index 5bded7559..bf21ae078 100644
--- a/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/activity/modules/form.vue
@@ -1,18 +1,32 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallPointActivityApi } from '#/api/mall/promotion/point';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';
 
 import { computed, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
 
+import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createPointActivity,
   getPointActivity,
   updatePointActivity,
 } from '#/api/mall/promotion/point';
 import { $t } from '#/locales';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -29,13 +43,110 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    labelWidth: 120,
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换库存必须大于等于 1 ！！！',
+  },
+  {
+    name: 'productConfig.point',
+    rule: (arg) => arg >= 1,
+    message: '商品所需兑换积分必须大于等于 1 ！！！',
+  },
+  {
+    name: 'productConfig.count',
+    rule: (arg) => arg >= 1,
+    message: '商品可兑换次数必须大于等于 1 ！！！',
+  },
+]; // SKU 规则配置
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallPointActivityApi.PointProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+  // 为每个 SKU 配置积分商城相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallPointActivityApi.PointProduct = {
+      skuId: sku.id!,
+      stock: 0,
+      price: 0,
+      point: 0,
+      count: 0,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        product.price = formatToFraction(product.price) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallPointActivityApi.PointProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ]; // 构建 SPU 属性列表
+
+  // 直接赋值，因为每次只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -43,19 +154,19 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallPointActivityApi.PointActivity;
-
-    // 确保必要的默认值
-    if (!data.products) {
-      data.products = [];
-    }
-    if (!data.sort) {
-      data.sort = 0;
-    }
-
     try {
+      // 获取积分商城商品配置（深拷贝避免直接修改原对象）
+      const products: MallPointActivityApi.PointProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.price = convertToInteger(item.price);
+      });
+      // 提交表单
+      const data =
+        (await formApi.getValues()) as MallPointActivityApi.PointActivity;
+      data.products = products;
       await (formData.value?.id
         ? updatePointActivity(data)
         : createPointActivity(data));
@@ -70,16 +181,25 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
+
     // 加载数据
     const data = modalApi.getData<MallPointActivityApi.PointActivity>();
     if (!data || !data.id) {
       return;
     }
+    // 加载数据
     modalApi.lock();
     try {
       formData.value = await getPointActivity(data.id);
+      await getSpuDetails(
+        formData.value.spuId,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
       // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
@@ -90,16 +210,85 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-3/5" :title="getTitle">
-    <div class="p-4">
-      <div class="mb-4 rounded border border-yellow-200 bg-yellow-50 p-4">
-        <p class="text-yellow-800">
-          <strong>注意：</strong>
-          积分活动涉及复杂的商品选择和SKU配置，当前为简化版本。
-          完整的商品选择和积分配置功能需要在后续版本中完善。
-        </p>
-      </div>
-      <Form />
-    </div>
-  </Modal>
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <ElButton
+              v-if="!formData?.id"
+              type="primary"
+              @click="openSpuSelect"
+            >
+              选择商品
+            </ElButton>
+
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：积分商城特有配置 -->
+              <template #default>
+                <VxeColumn align="center" min-width="168" title="可兑换库存">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="可兑换次数">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.count"
+                      :min="0"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="所需积分">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.point"
+                      :min="0"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="所需金额(元)">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.price"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
+
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/index.ts b/apps/web-ele/src/views/mall/promotion/point/components/index.ts
index bb0194057..4271f4e17 100644
--- a/apps/web-ele/src/views/mall/promotion/point/components/index.ts
+++ b/apps/web-ele/src/views/mall/promotion/point/components/index.ts
@@ -1 +1,2 @@
 export { default as PointShowcase } from './showcase.vue';
+export { default as PointTableSelect } from './table-select.vue';
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue b/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue
index f1bbe2a59..597395ea3 100644
--- a/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/components/showcase.vue
@@ -10,7 +10,7 @@ import { ElImage, ElTooltip } from 'element-plus';
 
 import { getPointActivityListByIds } from '#/api/mall/promotion/point';
 
-import PointTableSelect from './table-select.vue';
+import TableSelect from './table-select.vue';
 
 interface PointShowcaseProps {
   modelValue?: number | number[];
@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<PointShowcaseProps>(), {
 const emit = defineEmits(['update:modelValue', 'change']);
 
 const pointActivityList = ref<MallPointActivityApi.PointActivity[]>([]); // 已选择的活动列表
-const pointTableSelectRef = ref<InstanceType<typeof PointTableSelect>>(); // 活动选择表格组件引用
+const pointTableSelectRef = ref<InstanceType<typeof TableSelect>>(); // 活动选择表格组件引用
 const isMultiple = computed(() => props.limit !== 1); // 是否为多选模式
 
 /** 计算是否可以添加 */
@@ -108,21 +108,21 @@ function emitActivityChange() {
     <div
       v-for="(activity, index) in pointActivityList"
       :key="activity.id"
-      class="group relative h-[60px] w-[60px] overflow-hidden rounded-lg"
+      class="relative h-[60px] w-[60px] overflow-hidden rounded-lg border border-dashed border-gray-300"
     >
       <ElTooltip :content="activity.spuName">
         <div class="relative h-full w-full">
           <ElImage
+            :preview-src-list="[activity.picUrl!]"
             :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"
-            :preview-src-list="[activity.picUrl!]"
             fit="cover"
           />
           <!-- 删除按钮 -->
           <IconifyIcon
             v-if="!disabled"
-            icon="ep:circle-close-filled"
-            class="absolute -right-2 -top-2 cursor-pointer text-xl text-red-500 opacity-0 transition-opacity hover:text-red-600 group-hover:opacity-100"
+            icon="lucide:x"
+            class="absolute -right-2 -top-2 z-10 h-5 w-5 cursor-pointer text-red-500 hover:text-red-600"
             @click="handleRemoveActivity(index)"
           />
         </div>
@@ -132,16 +132,16 @@ function emitActivityChange() {
     <!-- 添加活动按钮 -->
     <ElTooltip v-if="canAdd" content="选择活动">
       <div
-        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border-2 border-dashed transition-colors hover:border-primary hover:bg-primary/5"
+        class="flex h-[60px] w-[60px] cursor-pointer items-center justify-center rounded-lg border border-dashed border-gray-300 hover:border-blue-400"
         @click="handleOpenActivitySelect"
       >
-        <IconifyIcon icon="ep:plus" class="text-xl text-gray-400" />
+        <IconifyIcon icon="lucide:plus" class="text-xl text-gray-400" />
       </div>
     </ElTooltip>
   </div>
 
   <!-- 活动选择对话框 -->
-  <PointTableSelect
+  <TableSelect
     ref="pointTableSelectRef"
     :multiple="isMultiple"
     @change="handleActivitySelected"
diff --git a/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue b/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
index eff545cba..d4c1a2a27 100644
--- a/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
+++ b/apps/web-ele/src/views/mall/promotion/point/components/table-select.vue
@@ -9,7 +9,6 @@ import { computed } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
-import { dateFormatter, fenToYuanFormat } from '@vben/utils';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getPointActivityPage } from '#/api/mall/promotion/point';
@@ -92,7 +91,9 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       title: '原价',
       minWidth: 100,
       align: 'center',
-      formatter: ({ cellValue }) => fenToYuanFormat(cellValue),
+      formatter: ({ cellValue }) => {
+        return `¥${(cellValue / 100).toFixed(2)}`;
+      },
     },
     {
       field: 'status',
@@ -128,7 +129,7 @@ const gridColumns = computed<VxeGridProps['columns']>(() => {
       title: '创建时间',
       width: 180,
       align: 'center',
-      formatter: ({ cellValue }) => dateFormatter(cellValue),
+      formatter: 'formatDateTime',
     },
   );
   return columns;
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts b/apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts
index 410941928..57ebd0acb 100644
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/data.ts
@@ -1,84 +1,16 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { DICT_TYPE } from '@vben/constants';
+import {
+  DICT_TYPE,
+  PromotionConditionTypeEnum,
+  PromotionProductScopeEnum,
+} from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
 
-/** 表单配置 */
-export function useFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'name',
-      label: '活动名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入活动名称',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'startTime',
-      label: '开始时间',
-      component: 'DatePicker',
-      componentProps: {
-        placeholder: '请选择开始时间',
-        showTime: true,
-        valueFormat: 'x',
-        format: 'YYYY-MM-DD HH:mm:ss',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'endTime',
-      label: '结束时间',
-      component: 'DatePicker',
-      componentProps: {
-        placeholder: '请选择结束时间',
-        showTime: true,
-        valueFormat: 'x',
-        format: 'YYYY-MM-DD HH:mm:ss',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'conditionType',
-      label: '条件类型',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.PROMOTION_CONDITION_TYPE, 'number'),
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'productScope',
-      label: '商品范围',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        rows: 4,
-      },
-    },
-  ];
-}
+import { z } from '#/adapter/form';
+import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -89,7 +21,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入活动名称',
-        clearable: true,
+        allowClear: true,
       },
     },
     {
@@ -97,9 +29,9 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动状态',
       component: 'Select',
       componentProps: {
-        placeholder: '请选择活动状态',
-        clearable: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择活动状态',
+        allowClear: true,
       },
     },
     {
@@ -107,26 +39,25 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '活动时间',
       component: 'RangePicker',
       componentProps: {
-        placeholder: ['活动开始日期', '活动结束日期'],
-        clearable: true,
-        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
       },
     },
   ];
 }
 
-/** 列表的字段 */
+/** 列表的表格列 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
       title: '活动名称',
-      minWidth: 140,
+      minWidth: 200,
     },
     {
       field: 'productScope',
       title: '活动范围',
-      minWidth: 100,
+      minWidth: 120,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.PROMOTION_PRODUCT_SCOPE },
@@ -161,9 +92,160 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 180,
+      width: 200,
       fixed: 'right',
       slots: { default: 'actions' },
     },
   ];
 }
+
+/** 新增/修改的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '活动名称',
+      component: 'Input',
+      rules: 'required',
+      componentProps: {
+        placeholder: '请输入活动名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'startAndEndTime',
+      label: '活动时间',
+      component: 'RangePicker',
+      rules: 'required',
+      componentProps: {
+        showTime: true,
+        format: 'YYYY-MM-DD HH:mm:ss',
+        placeholder: [
+          $t('utils.rangePicker.beginTime'),
+          $t('utils.rangePicker.endTime'),
+        ],
+      },
+    },
+    {
+      fieldName: 'conditionType',
+      label: '条件类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_CONDITION_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(PromotionConditionTypeEnum.PRICE.type),
+    },
+    {
+      fieldName: 'productScope',
+      label: '活动范围',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.PROMOTION_PRODUCT_SCOPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
+    },
+    {
+      fieldName: 'productSpuIds',
+      label: '选择商品',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productScopeValues'],
+        show: (values) => {
+          return values.productScope === PromotionProductScopeEnum.SPU.scope;
+        },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productSpuIds
+          if (
+            values.productScope === PromotionProductScopeEnum.SPU.scope &&
+            values.productScopeValues
+          ) {
+            form.setFieldValue('productSpuIds', values.productScopeValues);
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'productCategoryIds',
+      label: '选择分类',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productScopeValues'],
+        show: (values) => {
+          return (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope
+          );
+        },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productCategoryIds
+          if (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope &&
+            values.productScopeValues
+          ) {
+            const categoryIds = values.productScopeValues;
+            // 单选时使用数组不能反显，取第一个元素
+            form.setFieldValue(
+              'productCategoryIds',
+              Array.isArray(categoryIds) && categoryIds.length > 0
+                ? categoryIds[0]
+                : categoryIds,
+            );
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'rules',
+      label: '优惠设置',
+      component: 'Input',
+      formItemClass: 'items-start',
+      rules: 'required',
+    },
+    {
+      fieldName: 'productScopeValues', // 隐藏字段：用于自动同步 productScopeValues
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productSpuIds', 'productCategoryIds'],
+        show: () => false,
+        trigger(values, form) {
+          switch (values.productScope) {
+            case PromotionProductScopeEnum.CATEGORY.scope: {
+              const categoryIds = Array.isArray(values.productCategoryIds)
+                ? values.productCategoryIds
+                : [values.productCategoryIds];
+              form.setFieldValue('productScopeValues', categoryIds);
+              break;
+            }
+            case PromotionProductScopeEnum.SPU.scope: {
+              form.setFieldValue('productScopeValues', values.productSpuIds);
+              break;
+            }
+          }
+        },
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
index 3a148d167..1b5d52a8e 100644
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/index.vue
@@ -2,7 +2,8 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
 
 import { ElLoading, ElMessage } from 'element-plus';
 
@@ -15,12 +16,12 @@ import {
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import RewardActivityForm from './modules/form.vue';
+import Form from './modules/form.vue';
 
 defineOptions({ name: 'PromotionRewardActivity' });
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: RewardActivityForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -36,24 +37,30 @@ function handleCreate() {
 
 /** 编辑满减送活动 */
 function handleEdit(row: MallRewardActivityApi.RewardActivity) {
-  formModalApi.setData(row).open();
+  formModalApi.setData({ id: row.id }).open();
 }
 
-/** 关闭活动 */
+/** 关闭满减送活动 */
 async function handleClose(row: MallRewardActivityApi.RewardActivity) {
-  await confirm('确认关闭该满减送活动吗？');
-  await closeRewardActivity(row.id as number);
-  ElMessage.success('关闭成功');
-  handleRefresh();
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.closing', [row.name]),
+  });
+  try {
+    await closeRewardActivity(row.id!);
+    ElMessage.success($t('ui.actionMessage.closeSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
-/** 删除活动 */
+/** 删除满减送活动 */
 async function handleDelete(row: MallRewardActivityApi.RewardActivity) {
   const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteRewardActivity(row.id as number);
+    await deleteRewardActivity(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
@@ -94,21 +101,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <template #doc>
-      <DocAlert
-        title="【营销】满减送"
-        url="https://doc.iocoder.cn/mall/promotion-record/"
-      />
-    </template>
-
     <FormModal @success="handleRefresh" />
-
-    <Grid table-title="满减送活动列表">
+    <Grid table-title="满减送活动">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['满减送活动']),
+              label: $t('ui.actionTitle.create', ['活动']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['promotion:reward-activity:create'],
@@ -132,10 +131,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '关闭',
               type: 'danger',
               link: true,
-              icon: ACTION_ICON.DELETE,
+              icon: ACTION_ICON.CLOSE,
               auth: ['promotion:reward-activity:close'],
-              ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
+              ifShow: row.status === CommonStatusEnum.ENABLE,
+              popConfirm: {
+                title: '确认关闭该满减送活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
             },
             {
               label: $t('common.delete'),
@@ -143,7 +145,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
               link: true,
               icon: ACTION_ICON.DELETE,
               auth: ['promotion:reward-activity:delete'],
-              ifShow: row.status !== 0,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
index e1c74b702..b2f3bec94 100644
--- a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -3,25 +3,39 @@ import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardAc
 
 import { computed, ref } from 'vue';
 
-import { useVbenForm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
+import {
+  PromotionConditionTypeEnum,
+  PromotionProductScopeEnum,
+} from '@vben/constants';
+import { convertToInteger, formatToFraction } from '@vben/utils';
 
 import { ElMessage } from 'element-plus';
 
+import { useVbenForm } from '#/adapter/form';
 import {
   createRewardActivity,
   getReward,
   updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
+import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
+import RewardRule from './reward-rule.vue';
 
 const emit = defineEmits(['success']);
-const formData = ref<MallRewardActivityApi.RewardActivity>();
+
+const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
+  conditionType: PromotionConditionTypeEnum.PRICE.type,
+  productScope: PromotionProductScopeEnum.ALL.scope,
+  rules: [],
+});
 const getTitle = computed(() => {
   return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['满减送活动'])
-    : $t('ui.actionTitle.create', ['满减送活动']);
+    ? $t('ui.actionTitle.edit', ['满减送'])
+    : $t('ui.actionTitle.create', ['满减送']);
 });
 
 const [Form, formApi] = useVbenForm({
@@ -31,7 +45,6 @@ const [Form, formApi] = useVbenForm({
     },
     labelWidth: 100,
   },
-  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -45,18 +58,23 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     // 提交表单
-    const data =
-      (await formApi.getValues()) as MallRewardActivityApi.RewardActivity;
-
-    // 确保必要的默认值
-    if (!data.rules) {
-      data.rules = [];
-    }
-
     try {
-      await (formData.value?.id
-        ? updateRewardActivity(data)
-        : createRewardActivity(data));
+      const values = await formApi.getValues();
+      const data = { ...formData.value, ...values };
+      if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
+        data.startTime = data.startAndEndTime[0];
+        data.endTime = data.startAndEndTime[1];
+        delete data.startAndEndTime;
+      }
+      data.rules?.forEach((item: any) => {
+        item.discountPrice = convertToInteger(item.discountPrice || 0);
+        if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+          item.limit = convertToInteger(item.limit || 0);
+        }
+      });
+      await (data.id
+        ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
+        : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
       // 关闭并提示
       await modalApi.close();
       emit('success');
@@ -67,7 +85,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
+      formData.value = {};
       return;
     }
     // 加载数据
@@ -77,9 +95,17 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      formData.value = await getReward(data.id);
+      const result = await getReward(data.id);
+      result.startAndEndTime = [result.startTime, result.endTime] as any[];
+      result.rules?.forEach((item: any) => {
+        item.discountPrice = formatToFraction(item.discountPrice || 0);
+        if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {
+          item.limit = formatToFraction(item.limit || 0);
+        }
+      });
+      formData.value = result;
       // 设置到 values
-      await formApi.setValues(formData.value);
+      await formApi.setValues(result);
     } finally {
       modalApi.unlock();
     }
@@ -88,16 +114,20 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-4/5" :title="getTitle">
-    <Form />
-
-    <!-- 简化说明 -->
-    <div class="mt-4 rounded bg-blue-50 p-4">
-      <p class="text-sm text-blue-600">
-        <strong>说明：</strong> 当前为简化版本的满减送活动表单。
-        复杂的商品选择、优惠规则配置等功能已简化，仅保留基础字段配置。
-        如需完整功能，请参考原始 Element UI 版本的实现。
-      </p>
-    </div>
+  <Modal :title="getTitle" class="w-2/3">
+    <Form class="mx-6">
+      <!-- 自定义插槽：优惠规则 -->
+      <template #rules>
+        <RewardRule v-model="formData" />
+      </template>
+      <!-- 自定义插槽：商品选择 -->
+      <template #productSpuIds>
+        <SpuShowcase v-model="formData.productSpuIds" />
+      </template>
+      <!-- 自定义插槽：分类选择 -->
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" multiple />
+      </template>
+    </Form>
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
new file mode 100644
index 000000000..ae400c2a8
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { nextTick, onMounted, ref, watch } from 'vue';
+
+import { CouponTemplateTakeTypeEnum, DICT_TYPE } from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { ElButton, ElInputNumber } from 'element-plus';
+
+import { getCouponTemplateList } from '#/api/mall/promotion/coupon/couponTemplate';
+import { DictTag } from '#/components/dict-tag';
+import { CouponSelect } from '#/views/mall/promotion/coupon/components';
+import { discountFormat } from '#/views/mall/promotion/coupon/formatter';
+
+defineOptions({ name: 'RewardRuleCouponSelect' });
+
+const props = defineProps<{
+  modelValue: MallRewardActivityApi.RewardRule;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+/** 选择赠送的优惠类型拓展 */
+interface GiveCoupon extends MallCouponTemplateApi.CouponTemplate {
+  giveCount?: number;
+}
+
+const rewardRule = useVModel(props, 'modelValue', emits);
+const list = ref<GiveCoupon[]>([]); // 选择的优惠劵列表
+
+/** 选择优惠券 */
+const selectRef = ref<InstanceType<typeof CouponSelect>>();
+function handleSelect() {
+  selectRef.value?.open();
+}
+
+/** 选择优惠券后的回调 */
+function handleChange(val: any[]) {
+  for (const item of val) {
+    if (list.value.some((v) => v.id === item.id)) {
+      continue;
+    }
+    list.value.push(item);
+  }
+}
+
+/** 删除优惠券 */
+function handleDelete(index: number) {
+  list.value.splice(index, 1);
+}
+
+/** 初始化赠送的优惠券列表 */
+async function initGiveCouponList() {
+  // 校验优惠券存在
+  if (
+    !rewardRule.value ||
+    !rewardRule.value.giveCouponTemplateCounts ||
+    Object.keys(rewardRule.value.giveCouponTemplateCounts).length === 0
+  ) {
+    return;
+  }
+  const tempLateIds = Object.keys(
+    rewardRule.value.giveCouponTemplateCounts,
+  ) as unknown as number[];
+  const data = await getCouponTemplateList(tempLateIds);
+  if (!data) {
+    return;
+  }
+  data.forEach((coupon) => {
+    list.value.push({
+      ...coupon,
+      giveCount: rewardRule.value.giveCouponTemplateCounts![coupon.id],
+    });
+  });
+}
+
+/** 监听 list 变化，自动同步到 rewardRule */
+watch(
+  list,
+  (val) => {
+    if (!rewardRule.value) {
+      return;
+    }
+    // 核心：清空 giveCouponTemplateCounts，解决删除不生效的问题
+    rewardRule.value.giveCouponTemplateCounts = {};
+    // 设置优惠券和其数量的对应
+    val.forEach((item) => {
+      rewardRule.value.giveCouponTemplateCounts![item.id] = item.giveCount!;
+    });
+  },
+  { deep: true },
+);
+
+onMounted(async () => {
+  await nextTick();
+  await initGiveCouponList();
+});
+</script>
+
+<template>
+  <div>
+    <!-- 已选优惠券列表 -->
+    <div v-if="list.length > 0" class="mb-2 flex flex-col gap-2">
+      <div
+        v-for="(item, index) in list"
+        :key="item.id"
+        class="flex items-center justify-between rounded-md border border-gray-200 bg-white px-3 py-2 transition-all hover:border-blue-400 hover:shadow-sm"
+      >
+        <div class="flex flex-wrap items-center gap-3">
+          <span class="font-medium text-gray-800">{{ item.name }}</span>
+          <span class="flex items-center gap-1 text-sm text-gray-500">
+            <DictTag
+              :type="DICT_TYPE.PROMOTION_PRODUCT_SCOPE"
+              :value="item.productScope"
+            />
+          </span>
+          <span class="flex items-center gap-1 text-sm text-gray-500">
+            <DictTag
+              :type="DICT_TYPE.PROMOTION_DISCOUNT_TYPE"
+              :value="item.discountType"
+            />
+            {{ discountFormat(item) }}
+          </span>
+        </div>
+        <div class="flex shrink-0 items-center gap-2">
+          <span class="text-gray-500">送</span>
+          <ElInputNumber
+            v-model="item.giveCount"
+            class="!w-32"
+            :min="0"
+            :step="1"
+          />
+          <span class="text-gray-500">张</span>
+          <ElButton
+            type="danger"
+            text
+            size="small"
+            @click="handleDelete(index)"
+          >
+            删除
+          </ElButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- 添加按钮 -->
+    <ElButton link class="!pl-0" @click="handleSelect">+ 添加优惠券</ElButton>
+
+    <!-- 优惠券选择弹窗 -->
+    <CouponSelect
+      ref="selectRef"
+      :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
+      @change="handleChange"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
new file mode 100644
index 000000000..afe05ed21
--- /dev/null
+++ b/apps/web-ele/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
+
+import { computed } from 'vue';
+
+import { PromotionConditionTypeEnum } from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElForm,
+  ElFormItem,
+  ElInputNumber,
+  ElRow,
+  ElSwitch,
+  ElTag,
+} from 'element-plus';
+
+import RewardRuleCouponSelect from './reward-rule-coupon-select.vue';
+
+defineOptions({ name: 'RewardRule' });
+
+const props = defineProps<{
+  modelValue: Partial<MallRewardActivityApi.RewardActivity>;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const formData = useVModel(props, 'modelValue', emits);
+
+const isPriceCondition = computed(() => {
+  return (
+    formData.value?.conditionType === PromotionConditionTypeEnum.PRICE.type
+  );
+});
+
+/** 处理新增 */
+function handleAdd() {
+  if (!formData.value.rules) {
+    formData.value.rules = [];
+  }
+  formData.value.rules.push({
+    limit: 0,
+    discountPrice: 0,
+    freeDelivery: false,
+    point: 0,
+  });
+}
+
+/** 处理删除 */
+function handleDelete(ruleIndex: number) {
+  formData.value.rules?.splice(ruleIndex, 1);
+}
+</script>
+
+<template>
+  <ElRow :gutter="16">
+    <template v-if="formData.rules">
+      <ElCol v-for="(rule, index) in formData.rules" :key="index" :span="24">
+        <ElCard size="small" class="rounded-lg">
+          <!-- 规则标题 -->
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span class="text-base font-medium">
+                活动层级 {{ index + 1 }}
+              </span>
+              <ElButton
+                v-if="index !== 0"
+                type="danger"
+                text
+                size="small"
+                @click="handleDelete(index)"
+              >
+                删除
+              </ElButton>
+            </div>
+          </template>
+
+          <ElForm :model="rule" label-position="left">
+            <!-- 优惠门槛 -->
+            <ElFormItem label="优惠门槛:" class="mb-3">
+              <div
+                class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+              >
+                <span>满</span>
+                <ElInputNumber
+                  v-if="isPriceCondition"
+                  v-model="rule.limit"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
+                  class="!w-40"
+                  placeholder="请输入金额"
+                />
+                <ElInputNumber
+                  v-else
+                  v-model="rule.limit"
+                  :min="0"
+                  :step="1"
+                  class="!w-40"
+                  placeholder="请输入数量"
+                />
+                <span>{{ isPriceCondition ? '元' : '件' }}</span>
+              </div>
+            </ElFormItem>
+            <!-- 优惠内容 -->
+            <ElFormItem label="优惠内容:" class="!mb-0">
+              <div class="flex flex-col gap-3">
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="!w-21 shrink-0 text-sm text-gray-500">
+                    订单金额优惠
+                  </span>
+                  <span>减</span>
+                  <ElInputNumber
+                    v-model="rule.discountPrice"
+                    :min="0"
+                    :precision="2"
+                    :step="0.1"
+                    class="!w-32"
+                    placeholder="请输入金额"
+                  />
+                  <span>元</span>
+                </div>
+                <!-- 包邮 -->
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="w-20 shrink-0 text-sm text-gray-500">包邮</span>
+                  <ElSwitch v-model="rule.freeDelivery" />
+                </div>
+                <!-- 送积分 -->
+                <div
+                  class="flex items-center gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="w-20 shrink-0 text-sm text-gray-500">
+                    送积分
+                  </span>
+                  <span>送</span>
+                  <ElInputNumber
+                    v-model="rule.point"
+                    :min="0"
+                    :step="1"
+                    class="!w-32"
+                    placeholder="请输入积分"
+                  />
+                  <span>积分</span>
+                </div>
+                <!-- 送优惠券 -->
+                <div
+                  class="flex flex-col items-start gap-2 rounded-md bg-gray-50 px-3 py-2"
+                >
+                  <span class="w-20 shrink-0 text-sm text-gray-500">
+                    送优惠券
+                  </span>
+                  <RewardRuleCouponSelect
+                    :model-value="rule"
+                    @update:model-value="
+                      (val) => (formData.rules![index] = val)
+                    "
+                  />
+                </div>
+              </div>
+            </ElFormItem>
+          </ElForm>
+        </ElCard>
+      </ElCol>
+    </template>
+
+    <!-- 添加规则按钮 -->
+    <ElCol :span="24" class="mt-2">
+      <ElButton type="primary" @click="handleAdd">+ 添加优惠规则</ElButton>
+    </ElCol>
+
+    <!-- 提示信息 -->
+    <ElCol :span="24" class="mt-2">
+      <ElTag type="warning">
+        提示：赠送积分为 0 时不赠送；未选择优惠券时不赠送。
+      </ElTag>
+    </ElCol>
+  </ElRow>
+</template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts b/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts
index b27413519..b9e3a1d5d 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/data.ts
@@ -4,6 +4,9 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { z } from '#/adapter/form';
+import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -29,6 +32,120 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
+/** 新增/编辑的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '秒杀活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'startTime',
+      label: '活动开始时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择活动开始时间',
+        type: 'datetime',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '活动结束时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择活动结束时间',
+        type: 'datetime',
+        format: 'YYYY-MM-DD HH:mm:ss',
+        valueFormat: 'x',
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'configIds',
+      label: '秒杀时段',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择秒杀时段',
+        multiple: true,
+        api: getSimpleSeckillConfigList,
+        labelField: 'name',
+        valueField: 'id',
+        class: 'w-full',
+      },
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'totalLimitCount',
+      label: '总限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入总限购数量',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'singleLimitCount',
+      label: '单次限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入单次限购数量',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'spuId',
+      label: '秒杀商品',
+      component: 'Input',
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/formatter.ts b/apps/web-ele/src/views/mall/promotion/seckill/activity/formatter.ts
index db1bce54d..5ec39d387 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/activity/formatter.ts
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/formatter.ts
@@ -9,7 +9,7 @@ export function setConfigList(list: any[]) {
 }
 
 /** 格式化配置名称 */
-export function formatConfigNames(configId: number): string {
+export function formatConfigNames(configId: number | string): string {
   const config = configList.find((item) => item.id === configId);
   return config === null || config === undefined
     ? ''
@@ -27,8 +27,11 @@ export function formatSeckillPrice(products: any[]): string {
 
 /** 格式化活动时间范围 */
 export function formatTimeRange(
-  startTime: Date | string,
-  endTime: Date | string,
+  startTime: Date | string | undefined,
+  endTime: Date | string | undefined,
 ): string {
-  return `${formatDate(startTime, 'YYYY-MM-DD')} ~ ${formatDate(endTime, 'YYYY-MM-DD')}`;
+  if (startTime && endTime) {
+    return `${formatDate(startTime, 'YYYY-MM-DD')} ~ ${formatDate(endTime, 'YYYY-MM-DD')}`;
+  }
+  return '';
 }
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue b/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
index ea9d01761..8ac8f397d 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/index.vue
@@ -4,8 +4,7 @@ import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckil
 
 import { onMounted } from 'vue';
 
-import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
 import { ElLoading, ElMessage, ElTag } from 'element-plus';
 
@@ -16,6 +15,7 @@ import {
   getSeckillActivityPage,
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
+import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import { formatConfigNames, formatTimeRange, setConfigList } from './formatter';
@@ -45,10 +45,16 @@ function handleCreate() {
 
 /** 关闭活动 */
 async function handleClose(row: MallSeckillActivityApi.SeckillActivity) {
-  await confirm('确认关闭该秒杀活动吗？');
-  await closeSeckillActivity(row.id as number);
-  ElMessage.success('关闭成功');
-  handleRefresh();
+  const loadingInstance = ElLoading.service({
+    text: '活动关闭中...',
+  });
+  try {
+    await closeSeckillActivity(row.id as number);
+    ElMessage.success('关闭成功');
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
 }
 
 /** 删除活动 */
@@ -84,9 +90,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
         },
       },
     },
-    cellConfig: {
-      height: 250,
-    },
     rowConfig: {
       keyField: 'id',
       isHover: true,
@@ -164,7 +167,10 @@ onMounted(async () => {
               link: true,
               auth: ['promotion:seckill-activity:close'],
               ifShow: row.status === 0,
-              onClick: handleClose.bind(null, row),
+              popConfirm: {
+                title: '确认关闭该秒杀活动吗？',
+                confirm: handleClose.bind(null, row),
+              },
             },
             {
               label: $t('common.delete'),
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue
index 3de767ce9..6575f396a 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/activity/modules/form.vue
@@ -1,21 +1,39 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';
 
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createSeckillActivity,
   getSeckillActivity,
   updateSeckillActivity,
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { $t } from '#/locales';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'PromotionSeckillActivityForm' });
 
 const emit = defineEmits(['success']);
+
 const formData = ref<MallSeckillActivityApi.SeckillActivity>();
 const getTitle = computed(() => {
   return formData.value?.id
@@ -23,53 +41,112 @@ const getTitle = computed(() => {
     : $t('ui.actionTitle.create', ['秒杀活动']);
 });
 
-// 简化的表单配置，实际项目中应该有完整的字段配置
-const formSchema = [
-  {
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      triggerFields: [''],
-      show: () => false,
-    },
-  },
-  {
-    fieldName: 'name',
-    label: '活动名称',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入活动名称',
-    },
-    rules: 'required',
-  },
-  {
-    fieldName: 'status',
-    label: '活动状态',
-    component: 'Select',
-    componentProps: {
-      placeholder: '请选择活动状态',
-      options: [
-        { label: '开启', value: 0 },
-        { label: '关闭', value: 1 },
-      ],
-    },
-    rules: 'required',
-  },
-];
-
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 80,
+    labelWidth: 120,
   },
   layout: 'horizontal',
-  schema: formSchema,
+  schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品秒杀库存必须大于等于 1 ！！！',
+  },
+  {
+    name: 'productConfig.seckillPrice',
+    rule: (arg) => arg >= 0.01,
+    message: '商品秒杀价格必须大于等于 0.01 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallSeckillActivityApi.SeckillProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置秒杀活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallSeckillActivityApi.SeckillProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      stock: 0,
+      seckillPrice: 0,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.seckillPrice = formatToFraction(
+          product.seckillPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallSeckillActivityApi.SeckillProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为秒杀活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -77,10 +154,27 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallSeckillActivityApi.SeckillActivity;
     try {
+      // 获取秒杀商品配置（深拷贝避免直接修改原对象）
+      const products: MallSeckillActivityApi.SeckillProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      if (products.length === 0) {
+        ElMessage.error('请选择秒杀商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.seckillPrice = convertToInteger(item.seckillPrice);
+      });
+
+      // 提交表单
+      const values = await formApi.getValues();
+      const data = {
+        ...values,
+        products,
+      } as MallSeckillActivityApi.SeckillActivity;
+
       await (formData.value?.id
         ? updateSeckillActivity(data)
         : createSeckillActivity(data));
@@ -95,17 +189,27 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
+
     // 加载数据
     const data = modalApi.getData<MallSeckillActivityApi.SeckillActivity>();
     if (!data || !data.id) {
       return;
     }
+    // 加载数据
     modalApi.lock();
     try {
       formData.value = await getSeckillActivity(data.id);
-      // 设置到 values
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId!,
+        formData.value.products?.map((sku) => sku.skuId),
+        formData.value.products,
+      );
+      // 设置表单值
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
@@ -115,7 +219,63 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
-  </Modal>
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <ElButton
+              v-if="!formData?.id"
+              type="primary"
+              @click="openSpuSelect"
+            >
+              选择商品
+            </ElButton>
+
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：秒杀活动特有配置 -->
+              <template #default>
+                <VxeColumn align="center" min-width="168" title="秒杀库存">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="秒杀价格(元)">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.seckillPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
+
+    <!-- 商品选择器弹窗 -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue b/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue
index 5ee5fe6d3..fd3ec979c 100644
--- a/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue
+++ b/apps/web-ele/src/views/mall/promotion/seckill/components/showcase.vue
@@ -110,7 +110,6 @@ function emitActivityChange() {
     >
       <ElTooltip :content="activity.name">
         <div class="relative h-full w-full">
-          <!-- TODO @芋艿 -->
           <ElImage
             :src="activity.picUrl"
             class="h-full w-full rounded-lg object-cover"
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts
index f3f9be687..cdfa7b594 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/data.ts
@@ -12,7 +12,9 @@ import { getRangePickerDefaultProps } from '#/utils';
 
 /** 关联数据 */
 const userStore = useUserStore();
-const pickUpStoreList = ref<MallDeliveryPickUpStoreApi.PickUpStore[]>([]);
+const pickUpStoreList = ref<MallDeliveryPickUpStoreApi.DeliveryPickUpStore[]>(
+  [],
+);
 getSimpleDeliveryPickUpStoreList().then((res) => {
   pickUpStoreList.value = res;
   // 移除自己无法核销的门店
diff --git a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue
index 878f38920..c4f704cf5 100644
--- a/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/apps/web-ele/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -20,6 +20,7 @@ import {
 
 import { useGridColumns, useGridFormSchema } from './data';
 
+// TODO @芋艿：风格和 antd 不一致；
 const summary = ref<MallOrderApi.OrderSummary>();
 
 /** 刷新表格 */
diff --git a/apps/web-ele/src/views/mall/trade/order/data.ts b/apps/web-ele/src/views/mall/trade/order/data.ts
index 0d4e92364..e94a07b4e 100644
--- a/apps/web-ele/src/views/mall/trade/order/data.ts
+++ b/apps/web-ele/src/views/mall/trade/order/data.ts
@@ -376,7 +376,7 @@ export function useAddressFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择收件人所在地',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
       },
       rules: 'required',
     },
diff --git a/apps/web-ele/src/views/mp/components/index.ts b/apps/web-ele/src/views/mp/components/index.ts
index b14a2c4c1..abab7ffb5 100644
--- a/apps/web-ele/src/views/mp/components/index.ts
+++ b/apps/web-ele/src/views/mp/components/index.ts
@@ -1,7 +1,7 @@
 export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
 export { default as WxLocation } from './wx-location/wx-location.vue';
 export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
-export { default as WxMsg } from './wx-msg/msg.vue'; // TODO @hw、@dylan：貌似和 antd 不同。antd 这里是 export { default as WxMsg } from './wx-msg/wx-msg.vue'; 看看哪个是对的
+export { default as WxMsg } from './wx-msg/wx-msg.vue';
 export { default as WxMusic } from './wx-music/wx-music.vue';
 export { default as WxNews } from './wx-news/wx-news.vue';
 export { default as WxReply } from './wx-reply/wx-reply.vue';
diff --git a/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue b/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
index f7e3c38e7..3a6a0e024 100644
--- a/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
+++ b/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
@@ -1,26 +1,19 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { computed, watch } from 'vue';
 
 import { NewsType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
-import { formatTime } from '@vben/utils';
 
-import {
-  ElButton,
-  ElPagination,
-  ElRow,
-  ElTable,
-  ElTableColumn,
-} from 'element-plus';
+import { ElButton, ElPagination, ElRow } from 'element-plus';
 
-import * as MpDraftApi from '#/api/mp/draft';
-import * as MpFreePublishApi from '#/api/mp/freePublish';
-import * as MpMaterialApi from '#/api/mp/material';
-import News from '#/views/mp/components/wx-news/wx-news.vue';
-import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
-import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
-
-// TODO @hw：代码风格，看看 antd 和 ele 是不是统一下； 等antd此组件修改完再调整
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDraftPage } from '#/api/mp/draft';
+import { getFreePublishPage } from '#/api/mp/freePublish';
+import { getMaterialPage } from '#/api/mp/material';
+import { WxNews, WxVideoPlayer, WxVoicePlayer } from '#/views/mp/components';
 
 /** 微信素材选择 */
 defineOptions({ name: 'WxMaterialSelect' });
@@ -40,235 +33,527 @@ const emit = defineEmits<{
   (e: 'selectMaterial', item: any): void;
 }>();
 
-const loading = ref(false); // 遮罩层
-const total = ref(0); // 总条数
-const list = ref<any[]>([]); // 数据列表
-const queryParams = reactive({
-  accountId: props.accountId,
-  pageNo: 1,
-  pageSize: 10,
-}); // 查询参数
+const voiceGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
+  [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      minWidth: 200,
+    },
+    {
+      field: 'voice',
+      title: '语音',
+      minWidth: 200,
+      align: 'center',
+      slots: { default: 'voice' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    },
+  ];
+
+const videoGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
+  [
+    {
+      field: 'mediaId',
+      title: '编号',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      minWidth: 200,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      minWidth: 200,
+    },
+    {
+      field: 'introduction',
+      title: '介绍',
+      minWidth: 220,
+    },
+    {
+      field: 'video',
+      title: '视频',
+      minWidth: 220,
+      align: 'center',
+      slots: { default: 'video' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    },
+  ];
+
+// Image Grid
+const [ImageGrid, imageGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [],
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? props.accountId;
+          if (!finalAccountId) {
+            return { list: [], total: 0 };
+          }
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'image',
+          });
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+// News Grid
+const [NewsGrid, newsGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [],
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? props.accountId;
+          if (!finalAccountId) {
+            return { list: [], total: 0 };
+          }
+          if (props.newsType === NewsType.Published) {
+            const data = await getFreePublishPage({
+              accountId: finalAccountId,
+              pageNo: page.currentPage,
+              pageSize: page.pageSize,
+            });
+            data.list.forEach((item: any) => {
+              const articles = item.content.newsItem;
+              articles.forEach((article: any) => {
+                article.picUrl = article.thumbUrl;
+              });
+            });
+            return data;
+          } else {
+            const data = await getDraftPage({
+              accountId: finalAccountId,
+              pageNo: page.currentPage,
+              pageSize: page.pageSize,
+            });
+            data.list.forEach((draft: any) => {
+              const articles = draft.content.newsItem;
+              articles.forEach((article: any) => {
+                article.picUrl = article.thumbUrl;
+              });
+            });
+            return data;
+          }
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: voiceGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? props.accountId;
+          if (!finalAccountId) {
+            return { list: [], total: 0 };
+          }
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'voice',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+const [VideoGrid, videoGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: videoGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? props.accountId;
+          if (finalAccountId === undefined || finalAccountId === null) {
+            return { list: [], total: 0 };
+          }
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'video',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+// 从 Grid 获取数据
+const imageList = computed(() => {
+  try {
+    const tableData = imageGridApi.grid?.getTableData();
+    return (tableData?.tableData as MpMaterialApi.Material[]) || [];
+  } catch {
+    return [];
+  }
+});
+
+const imageLoading = computed(() => {
+  return imageGridApi.grid?.loading || false;
+});
+
+const imageTotal = computed(() => {
+  try {
+    const proxyInfo = imageGridApi.grid?.getProxyInfo();
+    return proxyInfo?.pager?.total || 0;
+  } catch {
+    return 0;
+  }
+});
+
+const imageCurrentPage = computed({
+  get: () => {
+    try {
+      return imageGridApi.grid?.pagerConfig?.currentPage || 1;
+    } catch {
+      return 1;
+    }
+  },
+  set: (value: number) => {
+    imageGridApi.grid?.commitProxy('page', { currentPage: value });
+  },
+});
+
+const imagePageSize = computed({
+  get: () => {
+    try {
+      return imageGridApi.grid?.pagerConfig?.pageSize || 10;
+    } catch {
+      return 10;
+    }
+  },
+  set: (value: number) => {
+    imageGridApi.grid?.commitProxy('page', { pageSize: value, currentPage: 1 });
+  },
+});
+
+const newsList = computed(() => {
+  try {
+    const tableData = newsGridApi.grid?.getTableData();
+    return (tableData?.tableData as any[]) || [];
+  } catch {
+    return [];
+  }
+});
+
+const newsLoading = computed(() => {
+  return newsGridApi.grid?.loading || false;
+});
+
+const newsTotal = computed(() => {
+  try {
+    const proxyInfo = newsGridApi.grid?.getProxyInfo();
+    return proxyInfo?.pager?.total || 0;
+  } catch {
+    return 0;
+  }
+});
+
+const newsCurrentPage = computed({
+  get: () => {
+    try {
+      return newsGridApi.grid?.pagerConfig?.currentPage || 1;
+    } catch {
+      return 1;
+    }
+  },
+  set: (value: number) => {
+    newsGridApi.grid?.commitProxy('page', { currentPage: value });
+  },
+});
+
+const newsPageSize = computed({
+  get: () => {
+    try {
+      return newsGridApi.grid?.pagerConfig?.pageSize || 10;
+    } catch {
+      return 10;
+    }
+  },
+  set: (value: number) => {
+    newsGridApi.grid?.commitProxy('page', { pageSize: value, currentPage: 1 });
+  },
+});
 
-/** 选择素材 */
 function selectMaterialFun(item: any) {
   emit('selectMaterial', item);
 }
 
-/** 获取分页数据 */
-async function getPage() {
-  loading.value = true;
-  try {
-    if (props.type === 'news' && props.newsType === NewsType.Published) {
-      // 【图文】+ 【已发布】
-      await getFreePublishPageFun();
-    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
-      // 【图文】+ 【草稿】
-      await getDraftPageFun();
-    } else {
-      // 【素材】
-      await getMaterialPageFun();
+// 监听 accountId 变化
+watch(
+  () => props.accountId,
+  (accountId) => {
+    switch (props.type) {
+      case 'image': {
+        imageGridApi.reload({ accountId });
+        break;
+      }
+      case 'news': {
+        newsGridApi.reload({ accountId });
+        break;
+      }
+      case 'video': {
+        videoGridApi.reload({ accountId });
+        break;
+      }
+      case 'voice': {
+        voiceGridApi.reload({ accountId });
+        break;
+      }
     }
-  } finally {
-    loading.value = false;
-  }
-}
+  },
+  { immediate: true },
+);
 
-/** 获取素材分页 */
-async function getMaterialPageFun() {
-  const data = await MpMaterialApi.getMaterialPage({
-    ...queryParams,
-    type: props.type,
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
+// 监听 type 变化
+watch(
+  () => props.type,
+  () => {
+    switch (props.type) {
+      case 'image': {
+        imageGridApi.reload({ accountId: props.accountId });
+        break;
+      }
+      case 'news': {
+        newsGridApi.reload({ accountId: props.accountId });
+        break;
+      }
+      case 'video': {
+        videoGridApi.reload({ accountId: props.accountId });
+        break;
+      }
+      case 'voice': {
+        voiceGridApi.reload({ accountId: props.accountId });
+        break;
+      }
+    }
+  },
+);
 
-/** 获取已发布图文分页 */
-async function getFreePublishPageFun() {
-  const data = await MpFreePublishApi.getFreePublishPage(queryParams);
-  data.list.forEach((item: any) => {
-    const articles = item.content.newsItem;
-    articles.forEach((article: any) => {
-      article.picUrl = article.thumbUrl;
-    });
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-/** 获取草稿图文分页 */
-async function getDraftPageFun() {
-  const data = await MpDraftApi.getDraftPage(queryParams);
-  data.list.forEach((draft: any) => {
-    const articles = draft.content.newsItem;
-    articles.forEach((article: any) => {
-      article.picUrl = article.thumbUrl;
-    });
-  });
-  list.value = data.list;
-  total.value = data.total;
-}
-
-onMounted(async () => {
-  getPage();
-});
+// 监听 newsType 变化
+watch(
+  () => props.newsType,
+  () => {
+    if (props.type === 'news') {
+      newsGridApi.reload({ accountId: props.accountId });
+    }
+  },
+);
 </script>
 
 <template>
   <div class="pb-30px">
     <!-- 类型：image -->
-    <div v-if="props.type === 'image'">
-      <div
-        class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
-        v-loading="loading"
-      >
-        <div
-          class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
-          v-for="item in list"
-          :key="item.mediaId"
-        >
-          <img class="w-full" :src="item.url" />
-          <p class="truncate text-center text-xs leading-[30px]">
-            {{ item.name }}
-          </p>
-          <ElRow class="flex justify-center pt-2.5">
-            <ElButton type="success" @click="selectMaterialFun(item)">
-              选择
-              <IconifyIcon icon="lucide:circle-check" />
-            </ElButton>
-          </ElRow>
-        </div>
-      </div>
-      <!-- 分页组件 -->
-      <ElPagination
-        background
-        layout="prev, pager, next, sizes, total"
-        :total="total"
-        v-model:current-page="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @current-change="getMaterialPageFun"
-        @size-change="getMaterialPageFun"
-      />
+    <div v-if="props.type === 'image'" class="image-grid-wrapper">
+      <ImageGrid>
+        <template #default>
+          <div
+            class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+            v-loading="imageLoading"
+          >
+            <div
+              class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+              v-for="item in imageList"
+              :key="item.mediaId"
+            >
+              <img class="w-full" :src="item.url" />
+              <p class="truncate text-center text-xs leading-[30px]">
+                {{ item.name }}
+              </p>
+              <ElRow class="flex justify-center pt-2.5">
+                <ElButton type="success" @click="selectMaterialFun(item)">
+                  选择
+                  <IconifyIcon icon="lucide:circle-check" />
+                </ElButton>
+              </ElRow>
+            </div>
+          </div>
+          <!-- 分页组件 -->
+          <ElPagination
+            background
+            layout="prev, pager, next, sizes, total"
+            :total="imageTotal"
+            v-model:current-page="imageCurrentPage"
+            v-model:page-size="imagePageSize"
+            class="mt-4"
+          />
+        </template>
+      </ImageGrid>
     </div>
     <!-- 类型：voice -->
     <div v-else-if="props.type === 'voice'">
-      <!-- 列表 -->
-      <ElTable v-loading="loading" :data="list">
-        <ElTableColumn label="编号" align="center" prop="mediaId" />
-        <ElTableColumn label="文件名" align="center" prop="name" />
-        <ElTableColumn label="语音" align="center">
-          <template #default="scope">
-            <VoicePlayer :url="scope.row.url" />
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          label="上传时间"
-          align="center"
-          prop="createTime"
-          width="180"
-          :formatter="
-            (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
-          "
-        />
-        <ElTableColumn label="操作" align="center" fixed="right">
-          <template #default="scope">
-            <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
-              选择
-              <IconifyIcon icon="lucide:plus" />
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-      <!-- 分页组件 -->
-      <ElPagination
-        background
-        layout="prev, pager, next, sizes, total"
-        :total="total"
-        v-model:current-page="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @current-change="getPage"
-        @size-change="getPage"
-      />
+      <VoiceGrid>
+        <template #voice="{ row }">
+          <WxVoicePlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <ElButton type="primary" link @click="selectMaterialFun(row)">
+            选择
+            <IconifyIcon icon="lucide:plus" />
+          </ElButton>
+        </template>
+      </VoiceGrid>
     </div>
+
     <!-- 类型：video -->
     <div v-else-if="props.type === 'video'">
-      <!-- 列表 -->
-      <ElTable v-loading="loading" :data="list">
-        <ElTableColumn label="编号" align="center" prop="mediaId" />
-        <ElTableColumn label="文件名" align="center" prop="name" />
-        <ElTableColumn label="标题" align="center" prop="title" />
-        <ElTableColumn label="介绍" align="center" prop="introduction" />
-        <ElTableColumn label="视频" align="center">
-          <template #default="scope">
-            <VideoPlayer :url="scope.row.url" />
-          </template>
-        </ElTableColumn>
-        <ElTableColumn
-          label="上传时间"
-          align="center"
-          prop="createTime"
-          width="180"
-          :formatter="
-            (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
-          "
-        />
-        <ElTableColumn
-          label="操作"
-          align="center"
-          fixed="right"
-          class-name="small-padding fixed-width"
-        >
-          <template #default="scope">
-            <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
-              选择
-              <IconifyIcon icon="lucide:circle-plus" />
-            </ElButton>
-          </template>
-        </ElTableColumn>
-      </ElTable>
-      <!-- 分页组件 -->
-      <ElPagination
-        background
-        layout="prev, pager, next, sizes, total"
-        :total="total"
-        v-model:current-page="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @current-change="getMaterialPageFun"
-        @size-change="getMaterialPageFun"
-      />
+      <VideoGrid>
+        <template #video="{ row }">
+          <WxVideoPlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <ElButton type="primary" link @click="selectMaterialFun(row)">
+            选择
+            <IconifyIcon icon="lucide:circle-plus" />
+          </ElButton>
+        </template>
+      </VideoGrid>
     </div>
+
     <!-- 类型：news -->
-    <div v-else-if="props.type === 'news'">
-      <div
-        class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
-        v-loading="loading"
-      >
-        <div
-          class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
-          v-for="item in list"
-          :key="item.mediaId"
-        >
-          <div v-if="item.content && item.content.newsItem">
-            <News :articles="item.content.newsItem" />
-            <ElRow class="flex justify-center pt-2.5">
-              <ElButton type="success" @click="selectMaterialFun(item)">
-                选择
-                <IconifyIcon icon="lucide:circle-check" />
-              </ElButton>
-            </ElRow>
+    <div v-else-if="props.type === 'news'" class="news-grid-wrapper">
+      <NewsGrid>
+        <template #default>
+          <div
+            class="mx-auto w-full columns-1 [column-gap:10px] md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+            v-loading="newsLoading"
+          >
+            <div
+              class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+              v-for="item in newsList"
+              :key="item.mediaId"
+            >
+              <div v-if="item.content && item.content.newsItem">
+                <WxNews :articles="item.content.newsItem" />
+                <ElRow class="flex justify-center pt-2.5">
+                  <ElButton type="success" @click="selectMaterialFun(item)">
+                    选择
+                    <IconifyIcon icon="lucide:circle-check" />
+                  </ElButton>
+                </ElRow>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
-      <!-- 分页组件 -->
-      <ElPagination
-        background
-        layout="prev, pager, next, sizes, total"
-        :total="total"
-        v-model:current-page="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @current-change="getMaterialPageFun"
-        @size-change="getMaterialPageFun"
-      />
+          <!-- 分页组件 -->
+          <ElPagination
+            background
+            layout="prev, pager, next, sizes, total"
+            :total="newsTotal"
+            v-model:current-page="newsCurrentPage"
+            v-model:page-size="newsPageSize"
+            class="mt-4"
+          />
+        </template>
+      </NewsGrid>
     </div>
   </div>
 </template>
+
+<style scoped>
+.image-grid-wrapper :deep(.vxe-grid--body-wrapper) {
+  display: none;
+}
+
+.news-grid-wrapper :deep(.vxe-grid--body-wrapper) {
+  display: none;
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/card.scss b/apps/web-ele/src/views/mp/components/wx-msg/card.scss
deleted file mode 100644
index 639f4ca8e..000000000
--- a/apps/web-ele/src/views/mp/components/wx-msg/card.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-.mp-card {
-  &__item {
-    box-sizing: border-box;
-    height: 200px;
-    margin-bottom: 16px;
-    font-size: 14px;
-    font-feature-settings: 'tnum';
-    font-variant: tabular-nums;
-    line-height: 1.5;
-    color: rgb(0 0 0 / 65%);
-    cursor: pointer;
-    list-style: none;
-    background-color: #fff;
-    border: 1px solid #e8e8e8;
-
-    &:hover {
-      border-color: rgb(0 0 0 / 9%);
-      box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
-    }
-
-    &--add {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      font-size: 16px;
-      color: rgb(0 0 0 / 45%);
-      background-color: #fff;
-      border: 1px dashed #000;
-      border-color: #d9d9d9;
-      border-radius: 2px;
-
-      i {
-        margin-right: 10px;
-      }
-
-      &:hover {
-        color: #40a9ff;
-        background-color: #fff;
-        border-color: #40a9ff;
-      }
-    }
-  }
-
-  &__body {
-    display: flex;
-    padding: 24px;
-  }
-
-  &__detail {
-    flex: 1;
-  }
-
-  &__avatar {
-    width: 48px;
-    height: 48px;
-    margin-right: 12px;
-    overflow: hidden;
-    border-radius: 48px;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__title {
-    margin-bottom: 12px;
-    font-size: 16px;
-    color: rgb(0 0 0 / 85%);
-
-    &:hover {
-      color: #1890ff;
-    }
-  }
-
-  &__info {
-    display: -webkit-box;
-    height: 64px;
-    overflow: hidden;
-    -webkit-line-clamp: 3;
-    color: rgb(0 0 0 / 45%);
-    -webkit-box-orient: vertical;
-  }
-
-  &__menu {
-    display: flex;
-    justify-content: space-around;
-    height: 50px;
-    line-height: 50px;
-    color: rgb(0 0 0 / 45%);
-    text-align: center;
-    background: #f7f9fa;
-
-    &:hover {
-      color: #1890ff;
-    }
-  }
-}
-
-/** joolun 额外加的 */
-.mp-comment__main {
-  flex: unset !important;
-  margin: 0 8px !important;
-  border-radius: 5px !important;
-}
-
-.mp-comment__header {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.mp-comment__body {
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/comment.scss b/apps/web-ele/src/views/mp/components/wx-msg/comment.scss
deleted file mode 100644
index 98e137d4b..000000000
--- a/apps/web-ele/src/views/mp/components/wx-msg/comment.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
-.mp-comment {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 30px;
-
-  &--reverse {
-    flex-direction: row-reverse;
-
-    .mp-comment__main {
-      &::before,
-      &::after {
-        right: -8px;
-        left: auto;
-        border-width: 8px 0 8px 8px;
-      }
-
-      &::before {
-        border-left-color: #dedede;
-      }
-
-      &::after {
-        margin-right: 1px;
-        margin-left: auto;
-        border-left-color: #f8f8f8;
-      }
-    }
-  }
-
-  &__avatar {
-    box-sizing: border-box;
-    width: 48px;
-    height: 48px;
-    vertical-align: middle;
-    border: 1px solid transparent;
-    border-radius: 50%;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px 15px;
-    background: #f8f8f8;
-    border-bottom: 1px solid #eee;
-  }
-
-  &__author {
-    font-size: 14px;
-    font-weight: 700;
-    color: #999;
-  }
-
-  &__main {
-    position: relative;
-    flex: 1;
-    margin: 0 20px;
-    border: 1px solid #dedede;
-    border-radius: 2px;
-
-    &::before,
-    &::after {
-      position: absolute;
-      top: 10px;
-      right: 100%;
-      left: -8px;
-      display: block;
-      width: 0;
-      height: 0;
-      pointer-events: none;
-      content: ' ';
-      border-color: transparent;
-      border-style: solid solid outset;
-      border-width: 8px 8px 8px 0;
-    }
-
-    &::before {
-      z-index: 1;
-      border-right-color: #dedede;
-    }
-
-    &::after {
-      z-index: 2;
-      margin-left: 1px;
-      border-right-color: #f8f8f8;
-    }
-  }
-
-  &__body {
-    padding: 15px;
-    overflow: hidden;
-    font-family:
-      'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
-      FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
-      'Hiragino Sans GB W3', FontAwesome, sans-serif;
-    font-size: 14px;
-    color: #333;
-    background: #fff;
-  }
-
-  blockquote {
-    padding: 1px 0 1px 15px;
-    margin: 0;
-    font-family:
-      Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
-      FontAwesome, serif;
-    border-left: 4px solid #ddd;
-  }
-}
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
index 80f58e0b7..c6cd948c8 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
@@ -14,7 +14,7 @@ defineOptions({ name: 'TabNews' });
 
 const props = defineProps<{
   modelValue: Reply;
-  newsType: NewsType;
+  newsType?: NewsType;
 }>();
 
 const emit = defineEmits<{
diff --git a/apps/web-ele/src/views/mp/hooks/useUpload.ts b/apps/web-ele/src/views/mp/hooks/useUpload.ts
new file mode 100644
index 000000000..3a8d21f13
--- /dev/null
+++ b/apps/web-ele/src/views/mp/hooks/useUpload.ts
@@ -0,0 +1,76 @@
+import { ElMessage } from 'element-plus';
+
+import { $t } from '#/locales';
+
+export enum UploadType {
+  Image = 'image',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+interface UploadTypeConfig {
+  allowTypes: string[];
+  maxSizeMB: number;
+  i18nKey: string;
+}
+
+export interface UploadRawFile {
+  name: string;
+  size: number;
+  type: string;
+}
+
+const UPLOAD_CONFIGS: Record<UploadType, UploadTypeConfig> = {
+  [UploadType.Image]: {
+    allowTypes: [
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/bmp',
+      'image/jpg',
+    ],
+    maxSizeMB: 2,
+    i18nKey: 'mp.upload.image',
+  },
+  [UploadType.Video]: {
+    allowTypes: ['video/mp4'],
+    maxSizeMB: 10,
+    i18nKey: 'mp.upload.video',
+  },
+  [UploadType.Voice]: {
+    allowTypes: [
+      'audio/mp3',
+      'audio/mpeg',
+      'audio/wma',
+      'audio/wav',
+      'audio/amr',
+    ],
+    maxSizeMB: 2,
+    i18nKey: 'mp.upload.voice',
+  },
+};
+
+export const useBeforeUpload = (type: UploadType, maxSizeMB?: number) => {
+  const fn = (rawFile: UploadRawFile): boolean => {
+    const config = UPLOAD_CONFIGS[type];
+    const finalMaxSize = maxSizeMB ?? config.maxSizeMB;
+
+    // 格式不正确
+    if (!config.allowTypes.includes(rawFile.type)) {
+      const typeName = $t(config.i18nKey);
+      ElMessage.error($t('mp.upload.invalidFormat', [typeName]));
+      return false;
+    }
+
+    // 大小不正确
+    if (rawFile.size / 1024 / 1024 > finalMaxSize) {
+      const typeName = $t(config.i18nKey);
+      ElMessage.error($t('mp.upload.maxSize', [typeName, finalMaxSize]));
+      return false;
+    }
+
+    return true;
+  };
+
+  return fn;
+};
diff --git a/apps/web-ele/src/views/mp/material/index.vue b/apps/web-ele/src/views/mp/material/index.vue
new file mode 100644
index 000000000..b1dcb2ff9
--- /dev/null
+++ b/apps/web-ele/src/views/mp/material/index.vue
@@ -0,0 +1,259 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { provide, ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElLoading,
+  ElMessage,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deletePermanentMaterial, getMaterialPage } from '#/api/mp/material';
+import { WxAccountSelect } from '#/views/mp/components';
+
+import {
+  useGridFormSchema,
+  useImageGridColumns,
+  useVideoGridColumns,
+  useVoiceGridColumns,
+} from './modules/data';
+import { UploadType } from './modules/upload';
+import UploadFile from './modules/UploadFile.vue';
+import UploadVideo from './modules/UploadVideo.vue';
+
+defineOptions({ name: 'MpMaterial' });
+
+const { hasAccessByCodes } = useAccess();
+
+const type = ref<UploadType>(UploadType.Image); // 素材类型
+const showCreateVideo = ref(false); // 是否新建视频的弹窗
+
+const accountId = ref(-1);
+provide('accountId', accountId);
+
+// 根据类型获取对应的列配置
+const getColumnsByType = () => {
+  switch (type.value) {
+    case UploadType.Image: {
+      return useImageGridColumns();
+    }
+    case UploadType.Video: {
+      return useVideoGridColumns();
+    }
+    case UploadType.Voice: {
+      return useVoiceGridColumns();
+    }
+    default: {
+      return [];
+    }
+  }
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: getColumnsByType(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {},
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const finalAccountId = formValues?.accountId ?? accountId.value;
+          if (!finalAccountId || finalAccountId === -1) {
+            return { list: [], total: 0 };
+          }
+          return await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: type.value,
+            permanent: true,
+            accountId: finalAccountId,
+            ...formValues,
+          });
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+      height: type.value === UploadType.Image ? 220 : 'auto',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+// 当 tab 切换时，更新 Grid 的 columns 和 rowConfig
+async function onTabChange() {
+  const columns = getColumnsByType();
+  gridApi.setGridOptions({
+    columns,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+      height: type.value === UploadType.Image ? 220 : 'auto',
+    },
+  });
+  await gridApi.reload();
+}
+
+async function handleAccountChange(id: number) {
+  accountId.value = id;
+  // 同步设置表单值
+  await gridApi.formApi.setValues({ accountId: id });
+  await gridApi.formApi.submitForm();
+}
+
+async function handleRefresh() {
+  await gridApi.query();
+}
+
+/** 处理删除操作 */
+async function handleDelete(id: number) {
+  await confirm('此操作将永久删除该文件, 是否继续?');
+  const loadingInstance = ElLoading.service({
+    text: '正在删除...',
+    lock: true,
+  });
+  try {
+    await deletePermanentMaterial(id);
+    ElMessage.success('删除成功');
+    await handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
+    </template>
+    <Grid class="material-grid">
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
+      <template #toolbar-actions>
+        <ElTabs v-model="type" class="w-full" @tab-change="onTabChange">
+          <!-- tab 1：图片  -->
+          <ElTabPane :name="UploadType.Image">
+            <template #label>
+              <span class="flex items-center">
+                <IconifyIcon icon="lucide:image" class="mr-1" />
+                图片
+              </span>
+            </template>
+          </ElTabPane>
+
+          <!-- tab 2：语音  -->
+          <ElTabPane :name="UploadType.Voice">
+            <template #label>
+              <span class="flex items-center">
+                <IconifyIcon icon="lucide:mic" class="mr-1" />
+                语音
+              </span>
+            </template>
+          </ElTabPane>
+
+          <!-- tab 3：视频 -->
+          <ElTabPane :name="UploadType.Video">
+            <template #label>
+              <span class="flex items-center">
+                <IconifyIcon icon="lucide:video" class="mr-1" />
+                视频
+              </span>
+            </template>
+          </ElTabPane>
+        </ElTabs>
+      </template>
+      <template #toolbar-tools>
+        <UploadFile
+          v-if="
+            hasAccessByCodes(['mp:material:upload-permanent']) &&
+            type === UploadType.Image
+          "
+          :type="UploadType.Image"
+          @uploaded="handleRefresh"
+        />
+        <UploadFile
+          v-if="
+            hasAccessByCodes(['mp:material:upload-permanent']) &&
+            type === UploadType.Voice
+          "
+          :type="UploadType.Voice"
+          @uploaded="handleRefresh"
+        />
+        <ElButton
+          v-if="
+            hasAccessByCodes(['mp:material:upload-permanent']) &&
+            type === UploadType.Video
+          "
+          type="primary"
+          @click="showCreateVideo = true"
+        >
+          新建视频
+        </ElButton>
+      </template>
+
+      <!-- 图片列的 slot -->
+      <template #image="{ row }">
+        <div class="flex items-center justify-center" style="height: 192px">
+          <img
+            :src="row.url"
+            class="object-contain"
+            style="display: block; max-width: 100%; max-height: 192px"
+          />
+        </div>
+      </template>
+
+      <!-- 语音列的 slot -->
+      <template #voice="{ row }">
+        <audio :src="row.url" controls style="width: 160px"></audio>
+      </template>
+
+      <!-- 视频列的 slot -->
+      <template #video="{ row }">
+        <video
+          :src="row.url"
+          controls
+          style="width: 200px; height: 150px"
+        ></video>
+      </template>
+
+      <!-- 操作列的 slot -->
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:material:delete'],
+              onClick: () => handleDelete(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 新建视频的弹窗 -->
+    <UploadVideo v-model:open="showCreateVideo" @uploaded="handleRefresh" />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mp/material/modules/UploadFile.vue b/apps/web-ele/src/views/mp/material/modules/UploadFile.vue
new file mode 100644
index 000000000..fe364e972
--- /dev/null
+++ b/apps/web-ele/src/views/mp/material/modules/UploadFile.vue
@@ -0,0 +1,110 @@
+<script lang="ts" setup>
+import type { UploadProps } from 'element-plus';
+
+import type { UploadData } from './upload';
+
+import { inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElMessage, ElUpload } from 'element-plus';
+
+import {
+  beforeImageUpload,
+  beforeVoiceUpload,
+  HEADERS,
+  UPLOAD_URL,
+  UploadType,
+} from './upload';
+
+const props = defineProps<{ type: UploadType }>();
+
+const emit = defineEmits<{
+  uploaded: [v: void];
+}>();
+
+const accountId = inject<number>('accountId');
+
+const fileList = ref<any[]>([]);
+const uploadData: UploadData = reactive({
+  accountId: accountId!,
+  introduction: '',
+  title: '',
+  type: props.type,
+});
+
+/** 上传前检查 */
+const onBeforeUpload =
+  props.type === UploadType.Image ? beforeImageUpload : beforeVoiceUpload;
+
+/** 自定义上传 */
+const customRequest: UploadProps['httpRequest'] = async function (options) {
+  const { file, onError, onSuccess } = options;
+
+  const formData = new FormData();
+  formData.append('file', file as File);
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+  formData.append('accountId', String(uploadData.accountId));
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      body: formData,
+      headers: HEADERS,
+      method: 'POST',
+    });
+
+    const res = await response.json();
+
+    if (res.code !== 0) {
+      ElMessage.error(`上传出错：${res.msg}`);
+      const error = new Error(res.msg) as any;
+      error.status = 200;
+      error.method = 'POST';
+      error.url = UPLOAD_URL;
+      onError?.(error);
+      return;
+    }
+
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    ElMessage.success('上传成功');
+    onSuccess?.(res);
+    emit('uploaded');
+  } catch (error: any) {
+    ElMessage.error(`上传失败: ${error.message}`);
+    onError?.(error);
+  }
+};
+</script>
+
+<template>
+  <ElUpload
+    :action="UPLOAD_URL"
+    :before-upload="onBeforeUpload"
+    :http-request="customRequest"
+    :file-list="fileList"
+    :headers="HEADERS"
+    :multiple="true"
+  >
+    <ElButton type="primary">
+      <IconifyIcon icon="lucide:upload" class="mr-1" />
+      点击上传
+    </ElButton>
+    <template #file="{ file }">
+      <div class="flex items-center">
+        <span>{{ file.name }}</span>
+        <ElButton type="primary" link size="small" @click="fileList = []">
+          删除
+        </ElButton>
+      </div>
+    </template>
+  </ElUpload>
+  <div v-if="$slots.default" class="ml-1 text-sm text-gray-500">
+    <slot></slot>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mp/material/modules/UploadVideo.vue b/apps/web-ele/src/views/mp/material/modules/UploadVideo.vue
new file mode 100644
index 000000000..cbf187e5a
--- /dev/null
+++ b/apps/web-ele/src/views/mp/material/modules/UploadVideo.vue
@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import type { FormInstance, UploadProps } from 'element-plus';
+
+import type { UploadData } from './upload';
+
+import { inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElDialog,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElUpload,
+} from 'element-plus';
+
+import { beforeVideoUpload, HEADERS, UPLOAD_URL, UploadType } from './upload';
+
+withDefaults(
+  defineProps<{
+    open?: boolean;
+  }>(),
+  {
+    open: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:open': [v: boolean];
+  uploaded: [v: void];
+}>();
+
+const accountId = inject<number>('accountId');
+
+const uploadRules = {
+  introduction: [
+    { message: '请输入描述', required: true, trigger: 'blur' } as const,
+  ],
+  title: [{ message: '请输入标题', required: true, trigger: 'blur' } as const],
+};
+
+function handleCancel() {
+  emit('update:open', false);
+}
+
+const fileList = ref<any[]>([]);
+
+const uploadData: UploadData = reactive({
+  accountId: accountId!,
+  introduction: '',
+  title: '',
+  type: UploadType.Video,
+});
+
+const uploadFormRef = ref<FormInstance | null>(null);
+const uploadVideoRef = ref<any>(null);
+
+async function submitVideo() {
+  await uploadFormRef.value?.validate();
+  uploadVideoRef.value?.submit();
+}
+
+/** 自定义上传 */
+const customRequest: UploadProps['httpRequest'] = async function (options) {
+  const { file, onError, onSuccess } = options;
+
+  const formData = new FormData();
+  formData.append('file', file as File);
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+  formData.append('accountId', String(uploadData.accountId));
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      body: formData,
+      headers: HEADERS,
+      method: 'POST',
+    });
+
+    const res = await response.json();
+
+    if (res.code !== 0) {
+      ElMessage.error(`上传出错：${res.msg}`);
+      const error = new Error(res.msg) as any;
+      error.status = 200;
+      error.method = 'POST';
+      error.url = UPLOAD_URL;
+      onError?.(error);
+      return;
+    }
+
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    emit('update:open', false);
+    ElMessage.success('上传成功');
+    onSuccess?.(res);
+    emit('uploaded');
+  } catch (error: any) {
+    ElMessage.error(`上传失败: ${error.message}`);
+    onError?.(error);
+  }
+};
+</script>
+
+<template>
+  <ElDialog
+    :model-value="open"
+    title="新建视频"
+    width="600px"
+    @close="handleCancel"
+  >
+    <template #footer>
+      <ElButton @click="handleCancel">取消</ElButton>
+      <ElButton type="primary" @click="submitVideo">确定</ElButton>
+    </template>
+    <ElUpload
+      ref="uploadVideoRef"
+      :action="UPLOAD_URL"
+      :auto-upload="false"
+      :before-upload="beforeVideoUpload"
+      :http-request="customRequest"
+      :file-list="fileList"
+      :headers="HEADERS"
+      :limit="1"
+      :multiple="true"
+      class="mb-4"
+    >
+      <ElButton type="primary">
+        <IconifyIcon icon="lucide:video" class="mr-1" />
+        选择视频
+      </ElButton>
+    </ElUpload>
+    <div class="mb-4 ml-1 text-sm text-gray-500">
+      格式支持 MP4，文件大小不超过 10MB
+    </div>
+
+    <ElDivider />
+
+    <ElForm
+      ref="uploadFormRef"
+      :model="uploadData"
+      :rules="uploadRules"
+      label-position="top"
+    >
+      <ElFormItem label="标题" prop="title">
+        <ElInput
+          v-model="uploadData.title"
+          placeholder="标题将展示在相关播放页面，建议填写清晰、准确、生动的标题"
+        />
+      </ElFormItem>
+      <ElFormItem label="描述" prop="introduction">
+        <ElInput
+          v-model="uploadData.introduction"
+          type="textarea"
+          :rows="3"
+          placeholder="介绍语将展示在相关播放页面，建议填写简洁明确、有信息量的内容"
+        />
+      </ElFormItem>
+    </ElForm>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mp/material/modules/data.ts b/apps/web-ele/src/views/mp/material/modules/data.ts
new file mode 100644
index 000000000..cd3e07ac1
--- /dev/null
+++ b/apps/web-ele/src/views/mp/material/modules/data.ts
@@ -0,0 +1,145 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+/** 视频表格列配置 */
+export function useVideoGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
+  return [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      align: 'center',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      align: 'center',
+      minWidth: 200,
+    },
+    {
+      field: 'introduction',
+      title: '介绍',
+      align: 'center',
+      minWidth: 220,
+    },
+    {
+      field: 'video',
+      title: '视频',
+      align: 'center',
+      width: 220,
+      slots: { default: 'video' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      align: 'center',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      width: 180,
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 语音表格列配置 */
+export function useVoiceGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
+  return [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      align: 'center',
+      minWidth: 100,
+    },
+    {
+      field: 'voice',
+      title: '语音',
+      align: 'center',
+      width: 220,
+      slots: { default: 'voice' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      align: 'center',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      width: 160,
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 图片表格列配置 */
+export function useImageGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
+  return [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      width: 400,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      align: 'center',
+      width: 200,
+    },
+    {
+      field: 'url',
+      title: '图片',
+      align: 'center',
+      width: 200,
+      slots: { default: 'image' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      align: 'center',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Input',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/material/modules/upload.ts b/apps/web-ele/src/views/mp/material/modules/upload.ts
new file mode 100644
index 000000000..2a2707d12
--- /dev/null
+++ b/apps/web-ele/src/views/mp/material/modules/upload.ts
@@ -0,0 +1,46 @@
+import type { UploadProps } from 'element-plus';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { useAccessStore } from '@vben/stores';
+
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+const accessStore = useAccessStore();
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` }; // 请求头
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传地址
+
+interface UploadData {
+  accountId: number;
+  introduction: string;
+  title: string;
+  type: UploadType;
+}
+
+const beforeImageUpload: UploadProps['beforeUpload'] = function (
+  rawFile: UploadRawFile,
+) {
+  return useBeforeUpload(UploadType.Image, 2)(rawFile);
+};
+
+const beforeVoiceUpload: UploadProps['beforeUpload'] = function (
+  rawFile: UploadRawFile,
+) {
+  return useBeforeUpload(UploadType.Voice, 2)(rawFile);
+};
+
+const beforeVideoUpload: UploadProps['beforeUpload'] = function (
+  rawFile: UploadRawFile,
+) {
+  return useBeforeUpload(UploadType.Video, 10)(rawFile);
+};
+
+export {
+  beforeImageUpload,
+  beforeVideoUpload,
+  beforeVoiceUpload,
+  HEADERS,
+  UPLOAD_URL,
+  type UploadData,
+  UploadType,
+};
diff --git a/apps/web-ele/src/views/mp/message/data.ts b/apps/web-ele/src/views/mp/message/data.ts
new file mode 100644
index 000000000..1f07fb11c
--- /dev/null
+++ b/apps/web-ele/src/views/mp/message/data.ts
@@ -0,0 +1,94 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMessageApi } from '#/api/mp/message';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Input',
+    },
+    {
+      fieldName: 'type',
+      label: '消息类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择消息类型',
+        options: getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE),
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'openid',
+      label: '用户标识',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户标识',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MpMessageApi.Message>['columns'] {
+  return [
+    {
+      field: 'createTime',
+      title: '发送时间',
+      width: 180,
+      align: 'center',
+      slots: { default: 'createTime' },
+    },
+    {
+      field: 'type',
+      title: '消息类型',
+      width: 80,
+      align: 'center',
+    },
+    {
+      field: 'sendFrom',
+      title: '发送方',
+      width: 80,
+      align: 'center',
+      slots: { default: 'sendFrom' },
+    },
+    {
+      field: 'openid',
+      title: '用户标识',
+      width: 300,
+      align: 'center',
+    },
+    {
+      field: 'content',
+      title: '内容',
+      align: 'left',
+      minWidth: 320,
+      slots: { default: 'content' },
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 120,
+      align: 'center',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/message/index.vue b/apps/web-ele/src/views/mp/message/index.vue
new file mode 100644
index 000000000..8f4917170
--- /dev/null
+++ b/apps/web-ele/src/views/mp/message/index.vue
@@ -0,0 +1,239 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMessageApi } from '#/api/mp/message';
+
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { MpMsgType as MsgType } from '@vben/constants';
+import { formatDate2 } from '@vben/utils';
+
+import { ElDialog, ElImage, ElTag } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getMessagePage } from '#/api/mp/message';
+import {
+  WxAccountSelect,
+  WxLocation,
+  WxMsg,
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'MpMessage' });
+
+// 消息对话框
+const messageBoxVisible = ref(false);
+const messageBoxUserId = ref(0);
+
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
+}
+
+/** 打开消息发送窗口 */
+function handleSend(userId: number) {
+  messageBoxUserId.value = userId;
+  messageBoxVisible.value = true;
+}
+
+const [Grid, gridApi] = useVbenVxeGrid<MpMessageApi.Message>({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<MpMessageApi.Message>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid>
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
+      <template #createTime="{ row }">
+        {{ row.createTime ? formatDate2(row.createTime) : '' }}
+      </template>
+
+      <template #sendFrom="{ row }">
+        <ElTag v-if="row.sendFrom === 1" type="success">粉丝</ElTag>
+        <ElTag v-else>公众号</ElTag>
+      </template>
+
+      <template #content="{ row }">
+        <div
+          v-if="
+            (row.type as string) === (MsgType.Event as string) &&
+            (row.event as string) === 'subscribe'
+          "
+        >
+          <ElTag type="success">关注</ElTag>
+        </div>
+        <div
+          v-else-if="
+            (row.type as string) === (MsgType.Event as string) &&
+            (row.event as string) === 'unsubscribe'
+          "
+        >
+          <ElTag type="danger">取消关注</ElTag>
+        </div>
+        <div
+          v-else-if="
+            (row.type as string) === (MsgType.Event as string) &&
+            (row.event as string) === 'CLICK'
+          "
+        >
+          <ElTag>点击菜单</ElTag>
+          【{{ row.eventKey }}】
+        </div>
+        <div v-else-if="row.type === MsgType.Event && row.event === 'VIEW'">
+          <ElTag>点击菜单链接</ElTag>
+          【{{ row.eventKey }}】
+        </div>
+        <div
+          v-else-if="
+            row.type === MsgType.Event && row.event === 'scancode_waitmsg'
+          "
+        >
+          <ElTag>扫码结果</ElTag>
+          【{{ row.eventKey }}】
+        </div>
+        <div
+          v-else-if="
+            row.type === MsgType.Event && row.event === 'scancode_push'
+          "
+        >
+          <ElTag>扫码结果</ElTag>
+          【{{ row.eventKey }}】
+        </div>
+        <div
+          v-else-if="row.type === MsgType.Event && row.event === 'pic_sysphoto'"
+        >
+          <ElTag>系统拍照发图</ElTag>
+        </div>
+        <div
+          v-else-if="
+            row.type === MsgType.Event && row.event === 'pic_photo_or_album'
+          "
+        >
+          <ElTag>拍照或者相册</ElTag>
+        </div>
+        <div
+          v-else-if="row.type === MsgType.Event && row.event === 'pic_weixin'"
+        >
+          <ElTag>微信相册</ElTag>
+        </div>
+        <div
+          v-else-if="
+            row.type === MsgType.Event && row.event === 'location_select'
+          "
+        >
+          <ElTag>选择地理位置</ElTag>
+        </div>
+        <div v-else-if="row.type === MsgType.Event">
+          <ElTag type="danger">未知事件类型</ElTag>
+        </div>
+
+        <div v-else-if="row.type === MsgType.Text">{{ row.content }}</div>
+        <div v-else-if="row.type === MsgType.Voice">
+          <WxVoicePlayer
+            :url="row.mediaUrl || ''"
+            :content="row.recognition || ''"
+          />
+        </div>
+        <div v-else-if="row.type === MsgType.Image">
+          <a :href="row.mediaUrl" target="_blank">
+            <ElImage :src="row.mediaUrl" :width="100" :preview-src-list="[]" />
+          </a>
+        </div>
+        <div
+          v-else-if="row.type === MsgType.Video || row.type === 'shortvideo'"
+        >
+          <WxVideoPlayer :url="row.mediaUrl || ''" class="mt-2" />
+        </div>
+        <div v-else-if="row.type === MsgType.Link">
+          <ElTag>链接</ElTag>
+          ：
+          <a :href="row.url" target="_blank">{{ row.title }}</a>
+        </div>
+        <div v-else-if="row.type === MsgType.Location">
+          <WxLocation
+            :label="row.label || ''"
+            :location-y="row.locationY || 0"
+            :location-x="row.locationX || 0"
+          />
+        </div>
+        <div v-else-if="row.type === MsgType.Music">
+          <WxMusic
+            :title="row.title"
+            :description="row.description"
+            :thumb-media-url="row.thumbMediaUrl || ''"
+            :music-url="row.musicUrl"
+            :hq-music-url="row.hqMusicUrl"
+          />
+        </div>
+        <div v-else-if="row.type === MsgType.News">
+          <WxNews :articles="row.articles" />
+        </div>
+        <div v-else>
+          <ElTag type="danger">未知消息类型</ElTag>
+        </div>
+      </template>
+
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '消息',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              onClick: () => handleSend(row.userId || 0),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 发送消息的弹窗 -->
+    <ElDialog
+      v-model="messageBoxVisible"
+      title="粉丝消息列表"
+      width="800"
+      :close-on-click-modal="false"
+      destroy-on-close
+    >
+      <WxMsg :user-id="messageBoxUserId" />
+    </ElDialog>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/card.scss b/apps/web-ele/src/views/mp/modules/wx-msg/card.scss
deleted file mode 100644
index 639f4ca8e..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-msg/card.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-.mp-card {
-  &__item {
-    box-sizing: border-box;
-    height: 200px;
-    margin-bottom: 16px;
-    font-size: 14px;
-    font-feature-settings: 'tnum';
-    font-variant: tabular-nums;
-    line-height: 1.5;
-    color: rgb(0 0 0 / 65%);
-    cursor: pointer;
-    list-style: none;
-    background-color: #fff;
-    border: 1px solid #e8e8e8;
-
-    &:hover {
-      border-color: rgb(0 0 0 / 9%);
-      box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
-    }
-
-    &--add {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      font-size: 16px;
-      color: rgb(0 0 0 / 45%);
-      background-color: #fff;
-      border: 1px dashed #000;
-      border-color: #d9d9d9;
-      border-radius: 2px;
-
-      i {
-        margin-right: 10px;
-      }
-
-      &:hover {
-        color: #40a9ff;
-        background-color: #fff;
-        border-color: #40a9ff;
-      }
-    }
-  }
-
-  &__body {
-    display: flex;
-    padding: 24px;
-  }
-
-  &__detail {
-    flex: 1;
-  }
-
-  &__avatar {
-    width: 48px;
-    height: 48px;
-    margin-right: 12px;
-    overflow: hidden;
-    border-radius: 48px;
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  &__title {
-    margin-bottom: 12px;
-    font-size: 16px;
-    color: rgb(0 0 0 / 85%);
-
-    &:hover {
-      color: #1890ff;
-    }
-  }
-
-  &__info {
-    display: -webkit-box;
-    height: 64px;
-    overflow: hidden;
-    -webkit-line-clamp: 3;
-    color: rgb(0 0 0 / 45%);
-    -webkit-box-orient: vertical;
-  }
-
-  &__menu {
-    display: flex;
-    justify-content: space-around;
-    height: 50px;
-    line-height: 50px;
-    color: rgb(0 0 0 / 45%);
-    text-align: center;
-    background: #f7f9fa;
-
-    &:hover {
-      color: #1890ff;
-    }
-  }
-}
-
-/** joolun 额外加的 */
-.mp-comment__main {
-  flex: unset !important;
-  margin: 0 8px !important;
-  border-radius: 5px !important;
-}
-
-.mp-comment__header {
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.mp-comment__body {
-  border-bottom-right-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/comment.scss b/apps/web-ele/src/views/mp/modules/wx-msg/comment.scss
deleted file mode 100644
index 98e137d4b..000000000
--- a/apps/web-ele/src/views/mp/modules/wx-msg/comment.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
-.mp-comment {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 30px;
-
-  &--reverse {
-    flex-direction: row-reverse;
-
-    .mp-comment__main {
-      &::before,
-      &::after {
-        right: -8px;
-        left: auto;
-        border-width: 8px 0 8px 8px;
-      }
-
-      &::before {
-        border-left-color: #dedede;
-      }
-
-      &::after {
-        margin-right: 1px;
-        margin-left: auto;
-        border-left-color: #f8f8f8;
-      }
-    }
-  }
-
-  &__avatar {
-    box-sizing: border-box;
-    width: 48px;
-    height: 48px;
-    vertical-align: middle;
-    border: 1px solid transparent;
-    border-radius: 50%;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 5px 15px;
-    background: #f8f8f8;
-    border-bottom: 1px solid #eee;
-  }
-
-  &__author {
-    font-size: 14px;
-    font-weight: 700;
-    color: #999;
-  }
-
-  &__main {
-    position: relative;
-    flex: 1;
-    margin: 0 20px;
-    border: 1px solid #dedede;
-    border-radius: 2px;
-
-    &::before,
-    &::after {
-      position: absolute;
-      top: 10px;
-      right: 100%;
-      left: -8px;
-      display: block;
-      width: 0;
-      height: 0;
-      pointer-events: none;
-      content: ' ';
-      border-color: transparent;
-      border-style: solid solid outset;
-      border-width: 8px 8px 8px 0;
-    }
-
-    &::before {
-      z-index: 1;
-      border-right-color: #dedede;
-    }
-
-    &::after {
-      z-index: 2;
-      margin-left: 1px;
-      border-right-color: #f8f8f8;
-    }
-  }
-
-  &__body {
-    padding: 15px;
-    overflow: hidden;
-    font-family:
-      'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
-      FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
-      'Hiragino Sans GB W3', FontAwesome, sans-serif;
-    font-size: 14px;
-    color: #333;
-    background: #fff;
-  }
-
-  blockquote {
-    padding: 1px 0 1px 15px;
-    margin: 0;
-    font-family:
-      Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
-      FontAwesome, serif;
-    border-left: 4px solid #ddd;
-  }
-}
diff --git a/apps/web-ele/src/views/system/dept/components/index.ts b/apps/web-ele/src/views/system/dept/components/index.ts
index d41597e97..04d2b6145 100644
--- a/apps/web-ele/src/views/system/dept/components/index.ts
+++ b/apps/web-ele/src/views/system/dept/components/index.ts
@@ -1,2 +1 @@
-// TODO @xingyu：【待讨论】是不是把 user select 放到 user 目录的 components 下，dept select 放到 dept 目录的 components 下
-export { default as DeptSelectModal } from './dept-select-modal.vue';
+export { default as DeptSelectModal } from './select-modal.vue';
diff --git a/apps/web-ele/src/views/system/dept/components/dept-select-modal.vue b/apps/web-ele/src/views/system/dept/components/select-modal.vue
similarity index 93%
rename from apps/web-ele/src/views/system/dept/components/dept-select-modal.vue
rename to apps/web-ele/src/views/system/dept/components/select-modal.vue
index be14cf6ed..81e73782c 100644
--- a/apps/web-ele/src/views/system/dept/components/dept-select-modal.vue
+++ b/apps/web-ele/src/views/system/dept/components/select-modal.vue
@@ -1,5 +1,5 @@
-// TODO @芋艿：是否有更好的组织形式？！
 <script lang="ts" setup>
+// TODO @jason：看看这个有没办法，整体代码的文件顺序，注释风格等，和 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/dept/components/select-modal.vue 一致。原因是：好维护~
 import type { SystemDeptApi } from '#/api/system/dept';
 
 import { nextTick, ref } from 'vue';
diff --git a/apps/web-ele/src/views/system/dept/data.ts b/apps/web-ele/src/views/system/dept/data.ts
index 0bc18c1bc..4f03592dd 100644
--- a/apps/web-ele/src/views/system/dept/data.ts
+++ b/apps/web-ele/src/views/system/dept/data.ts
@@ -44,7 +44,8 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择上级部门',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
+        checkStrictly: true,
       },
       rules: 'selectRequired',
     },
diff --git a/apps/web-ele/src/views/system/loginlog/data.ts b/apps/web-ele/src/views/system/loginlog/data.ts
index 2be5cdf1c..daa67c17b 100644
--- a/apps/web-ele/src/views/system/loginlog/data.ts
+++ b/apps/web-ele/src/views/system/loginlog/data.ts
@@ -53,7 +53,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       field: 'logType',
-      title: '操作类型',
+      title: '登录类型',
       minWidth: 120,
       cellRender: {
         name: 'CellDict',
@@ -108,7 +108,7 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     },
     {
       field: 'logType',
-      label: '操作类型',
+      label: '登录类型',
       render: (val) => {
         return h(DictTag, {
           type: DICT_TYPE.SYSTEM_LOGIN_TYPE,
diff --git a/apps/web-ele/src/views/system/mail/template/data.ts b/apps/web-ele/src/views/system/mail/template/data.ts
index e57e92f17..876ebccd8 100644
--- a/apps/web-ele/src/views/system/mail/template/data.ts
+++ b/apps/web-ele/src/views/system/mail/template/data.ts
@@ -81,14 +81,6 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: z.number().default(CommonStatusEnum.ENABLE),
     },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-      },
-    },
   ];
 }
 
diff --git a/apps/web-ele/src/views/system/menu/data.ts b/apps/web-ele/src/views/system/menu/data.ts
index 86c9fda8e..4b510a909 100644
--- a/apps/web-ele/src/views/system/menu/data.ts
+++ b/apps/web-ele/src/views/system/menu/data.ts
@@ -58,7 +58,8 @@ export function useFormSchema(): VbenFormSchema[] {
           return name.includes(input) || $t(name).includes(input);
         },
         showSearch: true,
-        treeDefaultExpandedKeys: [0],
+        defaultExpandedKeys: [0],
+        checkStrictly: true,
       },
       rules: 'selectRequired',
       renderComponentContent() {
diff --git a/apps/web-ele/src/views/system/operatelog/data.ts b/apps/web-ele/src/views/system/operatelog/data.ts
index 67b321fe2..aa67c8e33 100644
--- a/apps/web-ele/src/views/system/operatelog/data.ts
+++ b/apps/web-ele/src/views/system/operatelog/data.ts
@@ -2,9 +2,13 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { DescriptionItemSchema } from '#/components/description';
 
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
 import { formatDateTime } from '@vben/utils';
 
 import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -133,12 +137,17 @@ export function useDetailSchema(): DescriptionItemSchema[] {
     {
       field: 'traceId',
       label: '链路追踪',
-      show: (val) => !val,
+      show: (data) => !data?.traceId,
     },
     {
       field: 'userId',
       label: '操作人编号',
     },
+    {
+      field: 'userType',
+      label: '操作人类型',
+      render: (val) => h(DictTag, { type: DICT_TYPE.USER_TYPE, value: val }),
+    },
     {
       field: 'userName',
       label: '操作人名字',
diff --git a/apps/web-ele/src/views/system/social/client/data.ts b/apps/web-ele/src/views/system/social/client/data.ts
index f7f15d6b3..1fcf77a28 100644
--- a/apps/web-ele/src/views/system/social/client/data.ts
+++ b/apps/web-ele/src/views/system/social/client/data.ts
@@ -80,6 +80,18 @@ export function useFormSchema(): VbenFormSchema[] {
           values.socialType === SystemUserSocialTypeEnum.WECHAT_ENTERPRISE.type,
       },
     },
+    {
+      fieldName: 'publicKey',
+      label: 'publicKey',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 publicKey 公钥',
+      },
+      dependencies: {
+        triggerFields: ['socialType'],
+        show: (values) => values.socialType === 40,
+      },
+    },
     {
       fieldName: 'status',
       label: '状态',
diff --git a/apps/web-ele/src/views/system/user/components/index.ts b/apps/web-ele/src/views/system/user/components/index.ts
index 9cb1c93fd..9f00ad117 100644
--- a/apps/web-ele/src/views/system/user/components/index.ts
+++ b/apps/web-ele/src/views/system/user/components/index.ts
@@ -1 +1 @@
-export { default as UserSelectModal } from './user-select-modal.vue';
+export { default as UserSelectModal } from './select-modal.vue';
diff --git a/apps/web-ele/src/views/system/user/components/user-select-modal.vue b/apps/web-ele/src/views/system/user/components/select-modal.vue
similarity index 97%
rename from apps/web-ele/src/views/system/user/components/user-select-modal.vue
rename to apps/web-ele/src/views/system/user/components/select-modal.vue
index a9c2b1b16..266edca41 100644
--- a/apps/web-ele/src/views/system/user/components/user-select-modal.vue
+++ b/apps/web-ele/src/views/system/user/components/select-modal.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-// TODO @芋艿：是否有更好的组织形式？！
-// TODO @xingyu：你感觉，这个放到每个 system、infra 模块下，然后新建一个 components，表示每个模块，有一些共享的组件？然后，全局只放通用的（无业务含义的），可以哇？
+// TODO @jason：看看这个有没办法，整体代码的文件顺序，注释风格等，和 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/components/select-modal.vue 一致。原因是：好维护~
 import type { SystemDeptApi } from '#/api/system/dept';
 import type { SystemUserApi } from '#/api/system/user';
 
diff --git a/apps/web-ele/src/views/system/user/data.ts b/apps/web-ele/src/views/system/user/data.ts
index 98cf580dc..813ed7eb9 100644
--- a/apps/web-ele/src/views/system/user/data.ts
+++ b/apps/web-ele/src/views/system/user/data.ts
@@ -68,7 +68,8 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         childrenField: 'children',
         placeholder: '请选择归属部门',
-        treeDefaultExpandAll: true,
+        defaultExpandAll: true,
+        checkStrictly: true,
       },
     },
     {
diff --git a/apps/web-ele/tsconfig.json b/apps/web-ele/tsconfig.json
index 02c287fe6..33f79aaf8 100644
--- a/apps/web-ele/tsconfig.json
+++ b/apps/web-ele/tsconfig.json
@@ -5,7 +5,8 @@
     "baseUrl": ".",
     "paths": {
       "#/*": ["./src/*"]
-    }
+    },
+    "allowJs": true
   },
   "references": [{ "path": "./tsconfig.node.json" }],
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
diff --git a/apps/web-naive/src/api/infra/file-config/index.ts b/apps/web-naive/src/api/infra/file-config/index.ts
index 1a2fb7707..3b1e82e6c 100644
--- a/apps/web-naive/src/api/infra/file-config/index.ts
+++ b/apps/web-naive/src/api/infra/file-config/index.ts
@@ -17,6 +17,7 @@ export namespace InfraFileConfigApi {
     accessSecret?: string;
     pathStyle?: boolean;
     enablePublicAccess?: boolean;
+    region?: string;
     domain: string;
   }
 
diff --git a/apps/web-naive/src/api/system/social/client/index.ts b/apps/web-naive/src/api/system/social/client/index.ts
index 181cdf86b..55978dd14 100644
--- a/apps/web-naive/src/api/system/social/client/index.ts
+++ b/apps/web-naive/src/api/system/social/client/index.ts
@@ -12,6 +12,7 @@ export namespace SystemSocialClientApi {
     clientId: string;
     clientSecret: string;
     agentId?: string;
+    publicKey?: string;
     status: number;
     createTime?: Date;
   }
diff --git a/apps/web-naive/src/views/infra/dataSourceConfig/index.vue b/apps/web-naive/src/views/infra/dataSourceConfig/index.vue
index 866b26b38..41b9d7e3a 100644
--- a/apps/web-naive/src/views/infra/dataSourceConfig/index.vue
+++ b/apps/web-naive/src/views/infra/dataSourceConfig/index.vue
@@ -76,7 +76,8 @@ function handleRowCheckboxChange({
 }: {
   records: InfraDataSourceConfigApi.DataSourceConfig[];
 }) {
-  checkedIds.value = records.map((item) => item.id!);
+  // 过滤掉id为 0 的主数据源
+  checkedIds.value = records.map((item) => item.id!).filter((id) => id !== 0);
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -138,6 +139,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               text: true,
               icon: ACTION_ICON.EDIT,
               auth: ['infra:data-source-config:update'],
+              disabled: row.id === 0,
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -146,6 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               text: true,
               icon: ACTION_ICON.DELETE,
               auth: ['infra:data-source-config:delete'],
+              disabled: row.id === 0,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-naive/src/views/infra/fileConfig/data.ts b/apps/web-naive/src/views/infra/fileConfig/data.ts
index 85e5fb3cd..773ca3bc8 100644
--- a/apps/web-naive/src/views/infra/fileConfig/data.ts
+++ b/apps/web-naive/src/views/infra/fileConfig/data.ts
@@ -224,6 +224,18 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       defaultValue: false,
     },
+    {
+      fieldName: 'config.region',
+      label: '区域',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请填写区域，一般仅 AWS 需要填写',
+      },
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
     // 通用
     {
       fieldName: 'config.domain',
diff --git a/apps/web-naive/src/views/system/social/client/data.ts b/apps/web-naive/src/views/system/social/client/data.ts
index fbd3b8bd7..54ae3c7bf 100644
--- a/apps/web-naive/src/views/system/social/client/data.ts
+++ b/apps/web-naive/src/views/system/social/client/data.ts
@@ -79,6 +79,18 @@ export function useFormSchema(): VbenFormSchema[] {
           values.socialType === SystemUserSocialTypeEnum.WECHAT_ENTERPRISE.type,
       },
     },
+    {
+      fieldName: 'publicKey',
+      label: 'publicKey',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 publicKey 公钥',
+      },
+      dependencies: {
+        triggerFields: ['socialType'],
+        show: (values) => values.socialType === 40,
+      },
+    },
     {
       fieldName: 'status',
       label: '状态',
diff --git a/apps/web-tdesign/src/api/infra/file-config/index.ts b/apps/web-tdesign/src/api/infra/file-config/index.ts
index 1a2fb7707..3b1e82e6c 100644
--- a/apps/web-tdesign/src/api/infra/file-config/index.ts
+++ b/apps/web-tdesign/src/api/infra/file-config/index.ts
@@ -17,6 +17,7 @@ export namespace InfraFileConfigApi {
     accessSecret?: string;
     pathStyle?: boolean;
     enablePublicAccess?: boolean;
+    region?: string;
     domain: string;
   }
 
diff --git a/apps/web-tdesign/src/api/system/social/client/index.ts b/apps/web-tdesign/src/api/system/social/client/index.ts
index 181cdf86b..55978dd14 100644
--- a/apps/web-tdesign/src/api/system/social/client/index.ts
+++ b/apps/web-tdesign/src/api/system/social/client/index.ts
@@ -12,6 +12,7 @@ export namespace SystemSocialClientApi {
     clientId: string;
     clientSecret: string;
     agentId?: string;
+    publicKey?: string;
     status: number;
     createTime?: Date;
   }
diff --git a/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue b/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue
index 18be0d1e4..2e1ae503e 100644
--- a/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue
+++ b/apps/web-tdesign/src/views/infra/dataSourceConfig/index.vue
@@ -77,7 +77,8 @@ function handleRowCheckboxChange({
 }: {
   records: InfraDataSourceConfigApi.DataSourceConfig[];
 }) {
-  checkedIds.value = records.map((item) => item.id!);
+  // 过滤掉id为 0 的主数据源
+  checkedIds.value = records.map((item) => item.id!).filter((id) => id !== 0);
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -138,6 +139,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               variant: 'text',
               icon: ACTION_ICON.EDIT,
               auth: ['infra:data-source-config:update'],
+              disabled: row.id === 0,
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -146,6 +148,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'danger',
               icon: ACTION_ICON.DELETE,
               auth: ['infra:data-source-config:delete'],
+              disabled: row.id === 0,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-tdesign/src/views/infra/fileConfig/data.ts b/apps/web-tdesign/src/views/infra/fileConfig/data.ts
index efe5823f8..b34729dd4 100644
--- a/apps/web-tdesign/src/views/infra/fileConfig/data.ts
+++ b/apps/web-tdesign/src/views/infra/fileConfig/data.ts
@@ -229,6 +229,18 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       defaultValue: false,
     },
+    {
+      fieldName: 'config.region',
+      label: '区域',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请填写区域，一般仅 AWS 需要填写',
+      },
+      dependencies: {
+        triggerFields: ['storage'],
+        show: (formValues) => formValues.storage === 20,
+      },
+    },
     // 通用
     {
       fieldName: 'config.domain',
diff --git a/apps/web-tdesign/src/views/system/social/client/data.ts b/apps/web-tdesign/src/views/system/social/client/data.ts
index bbcd3c18b..7075b7bd7 100644
--- a/apps/web-tdesign/src/views/system/social/client/data.ts
+++ b/apps/web-tdesign/src/views/system/social/client/data.ts
@@ -81,6 +81,18 @@ export function useFormSchema(): VbenFormSchema[] {
           values.socialType === SystemUserSocialTypeEnum.WECHAT_ENTERPRISE.type,
       },
     },
+    {
+      fieldName: 'publicKey',
+      label: 'publicKey',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 publicKey 公钥',
+      },
+      dependencies: {
+        triggerFields: ['socialType'],
+        show: (values) => values.socialType === 40,
+      },
+    },
     {
       fieldName: 'status',
       label: '状态',
diff --git a/packages/constants/src/biz-iot-enum.ts b/packages/constants/src/biz-iot-enum.ts
index ad2f3bd5a..f494a9a78 100644
--- a/packages/constants/src/biz-iot-enum.ts
+++ b/packages/constants/src/biz-iot-enum.ts
@@ -1 +1,43 @@
-// TODO @haohao：枚举可以放到这里；
+// ========== IOT - 设备模块 ==========
+/**
+ * 设备状态枚举
+ */
+export const DeviceStateEnum = {
+  INACTIVE: 0, // 未激活
+  OFFLINE: 2, // 离线
+  ONLINE: 1, // 在线
+} as const;
+
+// ========== IOT - 产品模块 ==========
+/**
+ * 产品设备类型枚举
+ */
+export const DeviceTypeEnum = {
+  DEVICE: 0, // 直连设备
+  GATEWAY: 2, // 网关设备
+  GATEWAY_SUB: 1, // 网关子设备
+} as const;
+
+/**
+ * 产品状态枚举
+ */
+export const ProductStatusEnum = {
+  UNPUBLISHED: 0, // 开发中
+  PUBLISHED: 1, // 已发布
+} as const;
+
+/**
+ * 产品定位类型枚举
+ */
+export const LocationTypeEnum = {
+  IP: 1, // IP 定位
+  MANUAL: 3, // 手动定位
+  MODULE: 2, // 设备定位
+} as const;
+
+/**
+ * 数据格式（编解码器类型）枚举
+ */
+export const CodecTypeEnum = {
+  ALINK: 'Alink', // 阿里云 Alink 协议
+} as const;
diff --git a/packages/effects/plugins/src/vxe-table/init.ts b/packages/effects/plugins/src/vxe-table/init.ts
index 00e9d8abe..0a1e8bab6 100644
--- a/packages/effects/plugins/src/vxe-table/init.ts
+++ b/packages/effects/plugins/src/vxe-table/init.ts
@@ -24,8 +24,8 @@ import {
   // VxeOptgroup,
   // VxeOption,
   // VxePulldown,
-  // VxeRadio,
-  // VxeRadioButton,
+  VxeRadio,
+  VxeRadioButton,
   VxeRadioGroup,
   VxeSelect,
   VxeTooltip,
@@ -88,8 +88,8 @@ export function initVxeTable() {
   // VxeUI.component(VxeOption);
   VxeUI.component(VxePager);
   // VxeUI.component(VxePulldown);
-  // VxeUI.component(VxeRadio);
-  // VxeUI.component(VxeRadioButton);
+  VxeUI.component(VxeRadio);
+  VxeUI.component(VxeRadioButton);
   VxeUI.component(VxeRadioGroup);
   VxeUI.component(VxeSelect);
   // VxeUI.component(VxeSwitch);
diff --git a/packages/locales/src/langs/en-US/ui.json b/packages/locales/src/langs/en-US/ui.json
index 08722ab81..34e2664b6 100644
--- a/packages/locales/src/langs/en-US/ui.json
+++ b/packages/locales/src/langs/en-US/ui.json
@@ -36,7 +36,9 @@
     "downloadTemplateFail": "Download template failed",
     "updating": "Updating {0}...",
     "updateSuccess": "Update {0} successfully",
-    "updateFailed": "Update {0} failed"
+    "updateFailed": "Update {0} failed",
+    "closing": "Closing {0} ...",
+    "closeSuccess": "{0} closed successfully"
   },
   "placeholder": {
     "input": "Please enter",
diff --git a/packages/locales/src/langs/zh-CN/ui.json b/packages/locales/src/langs/zh-CN/ui.json
index 3b1bc453a..a8bbb4d9b 100644
--- a/packages/locales/src/langs/zh-CN/ui.json
+++ b/packages/locales/src/langs/zh-CN/ui.json
@@ -36,7 +36,9 @@
     "downloadTemplateFail": "下载模板失败",
     "updating": "正在更新 {0}...",
     "updateSuccess": "更新 {0} 成功",
-    "updateFailed": "更新 {0} 失败"
+    "updateFailed": "更新 {0} 失败",
+    "closing": "正在关闭 {0} ...",
+    "closeSuccess": "{0} 关闭成功"
   },
   "placeholder": {
     "input": "请输入",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9a2bdc5f8..f1d9dbc45 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -908,21 +908,42 @@ importers:
       benz-amr-recorder:
         specifier: 'catalog:'
         version: 1.1.5
+      bpmn-js:
+        specifier: 'catalog:'
+        version: 17.11.1
+      bpmn-js-properties-panel:
+        specifier: 'catalog:'
+        version: 5.23.0(@bpmn-io/properties-panel@3.34.0)(bpmn-js@17.11.1)(camunda-bpmn-js-behaviors@1.11.3(bpmn-js@17.11.1)(camunda-bpmn-moddle@7.0.1)(zeebe-bpmn-moddle@1.11.0))(diagram-js@12.8.1)
+      bpmn-js-token-simulation:
+        specifier: 'catalog:'
+        version: 0.36.3
+      camunda-bpmn-moddle:
+        specifier: 'catalog:'
+        version: 7.0.1
       cropperjs:
         specifier: 'catalog:'
         version: 1.6.2
       dayjs:
         specifier: 'catalog:'
         version: 1.11.19
+      diagram-js:
+        specifier: 'catalog:'
+        version: 12.8.1
       element-plus:
         specifier: 'catalog:'
         version: 2.11.8(vue@3.5.25(typescript@5.9.3))
+      fast-xml-parser:
+        specifier: 'catalog:'
+        version: 4.5.3
       highlight.js:
         specifier: 'catalog:'
         version: 11.11.1
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
+      steady-xml:
+        specifier: 'catalog:'
+        version: 0.1.0
       tinymce:
         specifier: 'catalog:'
         version: 7.9.1