diff --git a/apps/web-antdv-next/src/api/iot/alert/config/index.ts b/apps/web-antdv-next/src/api/iot/alert/config/index.ts
index 26e114c0c..a1d3bdfcc 100644
--- a/apps/web-antdv-next/src/api/iot/alert/config/index.ts
+++ b/apps/web-antdv-next/src/api/iot/alert/config/index.ts
@@ -3,37 +3,24 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace AlertConfigApi {
-  /** IoT 告警配置 VO */
+  /** IoT 告警配置 */
   export interface AlertConfig {
     id?: number;
-    name: string;
+    name?: string;
     description?: string;
     level?: number;
     status?: number;
     sceneRuleIds?: number[];
     receiveUserIds?: number[];
-    receiveUserNames?: string;
+    receiveUserNames?: string[];
     receiveTypes?: number[];
+    smsTemplateCode?: string;
+    mailTemplateCode?: string;
+    notifyTemplateCode?: string;
     createTime?: Date;
-    updateTime?: Date;
   }
 }
 
-/** IoT 告警配置 */
-export interface AlertConfig {
-  id?: number;
-  name?: string;
-  description?: string;
-  level?: number;
-  status?: number;
-  sceneRuleIds?: number[];
-  receiveUserIds?: number[];
-  receiveUserNames?: string;
-  receiveTypes?: number[];
-  createTime?: Date;
-  updateTime?: Date;
-}
-
 /** 查询告警配置分页 */
 export function getAlertConfigPage(params: PageParam) {
   return requestClient.get<PageResult<AlertConfigApi.AlertConfig>>(
@@ -49,20 +36,20 @@ export function getAlertConfig(id: number) {
   );
 }
 
-/** 查询所有告警配置列表 */
-export function getAlertConfigList() {
+/** 获取告警配置简单列表 */
+export function getSimpleAlertConfigList() {
   return requestClient.get<AlertConfigApi.AlertConfig[]>(
-    '/iot/alert-config/list',
+    '/iot/alert-config/simple-list',
   );
 }
 
 /** 新增告警配置 */
-export function createAlertConfig(data: AlertConfig) {
+export function createAlertConfig(data: AlertConfigApi.AlertConfig) {
   return requestClient.post('/iot/alert-config/create', data);
 }
 
 /** 修改告警配置 */
-export function updateAlertConfig(data: AlertConfig) {
+export function updateAlertConfig(data: AlertConfigApi.AlertConfig) {
   return requestClient.put('/iot/alert-config/update', data);
 }
 
@@ -70,25 +57,3 @@ export function updateAlertConfig(data: AlertConfig) {
 export function deleteAlertConfig(id: number) {
   return requestClient.delete(`/iot/alert-config/delete?id=${id}`);
 }
-
-/** 批量删除告警配置 */
-export function deleteAlertConfigList(ids: number[]) {
-  return requestClient.delete('/iot/alert-config/delete-list', {
-    params: { ids: ids.join(',') },
-  });
-}
-
-/** 启用/禁用告警配置 */
-export function toggleAlertConfig(id: number, enabled: boolean) {
-  return requestClient.put(`/iot/alert-config/toggle`, {
-    id,
-    enabled,
-  });
-}
-
-/** 获取告警配置简单列表 */
-export function getSimpleAlertConfigList() {
-  return requestClient.get<AlertConfigApi.AlertConfig[]>(
-    '/iot/alert-config/simple-list',
-  );
-}
diff --git a/apps/web-antdv-next/src/api/iot/alert/record/index.ts b/apps/web-antdv-next/src/api/iot/alert/record/index.ts
index 6d2afcfcf..fea6e17a4 100644
--- a/apps/web-antdv-next/src/api/iot/alert/record/index.ts
+++ b/apps/web-antdv-next/src/api/iot/alert/record/index.ts
@@ -3,41 +3,21 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace AlertRecordApi {
-  /** IoT 告警记录 VO */
+  /** IoT 告警记录 */
   export interface AlertRecord {
     id?: number;
     configId?: number;
     configName?: string;
     configLevel?: number;
     deviceId?: number;
-    deviceName?: string;
     productId?: number;
-    productName?: string;
-    deviceMessage?: string;
+    deviceMessage?: any;
     processStatus?: boolean;
     processRemark?: string;
-    processTime?: Date;
     createTime?: Date;
   }
 }
 
-/** IoT 告警记录 */
-export interface AlertRecord {
-  id?: number;
-  configId?: number;
-  configName?: string;
-  configLevel?: number;
-  deviceId?: number;
-  deviceName?: string;
-  productId?: number;
-  productName?: string;
-  deviceMessage?: string;
-  processStatus?: boolean;
-  processRemark?: string;
-  processTime?: Date;
-  createTime?: Date;
-}
-
 /** 查询告警记录分页 */
 export function getAlertRecordPage(params: PageParam) {
   return requestClient.get<PageResult<AlertRecordApi.AlertRecord>>(
@@ -54,29 +34,9 @@ export function getAlertRecord(id: number) {
 }
 
 /** 处理告警记录 */
-export function processAlertRecord(id: number, remark?: string) {
+export function processAlertRecord(id: number, processRemark?: string) {
   return requestClient.put('/iot/alert-record/process', {
     id,
-    remark,
-  });
-}
-
-/** 批量处理告警记录 */
-export function batchProcessAlertRecord(ids: number[], remark?: string) {
-  return requestClient.put('/iot/alert-record/batch-process', {
-    ids,
-    remark,
-  });
-}
-
-/** 删除告警记录 */
-export function deleteAlertRecord(id: number) {
-  return requestClient.delete(`/iot/alert-record/delete?id=${id}`);
-}
-
-/** 批量删除告警记录 */
-export function deleteAlertRecordList(ids: number[]) {
-  return requestClient.delete('/iot/alert-record/delete-list', {
-    params: { ids: ids.join(',') },
+    processRemark,
   });
 }
diff --git a/apps/web-antdv-next/src/api/iot/device/device/index.ts b/apps/web-antdv-next/src/api/iot/device/device/index.ts
index ca2a17ada..a55b017d5 100644
--- a/apps/web-antdv-next/src/api/iot/device/device/index.ts
+++ b/apps/web-antdv-next/src/api/iot/device/device/index.ts
@@ -150,11 +150,8 @@ export function importDeviceTemplate() {
 /** 导入设备 */
 export function importDevice(file: File, updateSupport: boolean) {
   return requestClient.upload<IotDeviceApi.DeviceImportRespVO>(
-    '/iot/device/import',
-    {
-      file,
-      updateSupport,
-    },
+    `/iot/device/import?updateSupport=${updateSupport}`,
+    { file },
   );
 }
 
@@ -168,7 +165,7 @@ export function getLatestDeviceProperties(params: any) {
 
 /** 获取设备属性历史数据 */
 export function getHistoryDevicePropertyList(params: any) {
-  return requestClient.get<PageResult<IotDeviceApi.DeviceProperty>>(
+  return requestClient.get<IotDeviceApi.DeviceProperty[]>(
     '/iot/device/property/history-list',
     { params },
   );
diff --git a/apps/web-antdv-next/src/api/iot/ota/firmware/index.ts b/apps/web-antdv-next/src/api/iot/ota/firmware/index.ts
index 1b8ae5b69..7fd7469ca 100644
--- a/apps/web-antdv-next/src/api/iot/ota/firmware/index.ts
+++ b/apps/web-antdv-next/src/api/iot/ota/firmware/index.ts
@@ -3,39 +3,22 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace IoTOtaFirmwareApi {
-  /** IoT OTA 固件 VO */
+  /** IoT OTA 固件信息 */
   export interface Firmware {
     id?: number;
-    name: string;
-    version: string;
-    productId: number;
-    productName?: string;
+    name?: string;
     description?: string;
+    version?: string;
+    productId?: number;
+    productName?: string;
     fileUrl?: string;
-    fileMd5?: string;
     fileSize?: number;
-    status?: number;
+    fileDigestAlgorithm?: string;
+    fileDigestValue?: string;
     createTime?: Date;
-    updateTime?: Date;
   }
 }
 
-/** IoT OTA 固件 */
-export interface IoTOtaFirmware {
-  id?: number;
-  name?: string;
-  version?: string;
-  productId?: number;
-  productName?: string;
-  description?: string;
-  fileUrl?: string;
-  fileMd5?: string;
-  fileSize?: number;
-  status?: number;
-  createTime?: Date;
-  updateTime?: Date;
-}
-
 /** 查询 OTA 固件分页 */
 export function getOtaFirmwarePage(params: PageParam) {
   return requestClient.get<PageResult<IoTOtaFirmwareApi.Firmware>>(
@@ -52,12 +35,12 @@ export function getOtaFirmware(id: number) {
 }
 
 /** 新增 OTA 固件 */
-export function createOtaFirmware(data: IoTOtaFirmware) {
+export function createOtaFirmware(data: IoTOtaFirmwareApi.Firmware) {
   return requestClient.post('/iot/ota/firmware/create', data);
 }
 
 /** 修改 OTA 固件 */
-export function updateOtaFirmware(data: IoTOtaFirmware) {
+export function updateOtaFirmware(data: IoTOtaFirmwareApi.Firmware) {
   return requestClient.put('/iot/ota/firmware/update', data);
 }
 
@@ -65,26 +48,3 @@ export function updateOtaFirmware(data: IoTOtaFirmware) {
 export function deleteOtaFirmware(id: number) {
   return requestClient.delete(`/iot/ota/firmware/delete?id=${id}`);
 }
-
-/** 批量删除 OTA 固件 */
-export function deleteOtaFirmwareList(ids: number[]) {
-  return requestClient.delete('/iot/ota/firmware/delete-list', {
-    params: { ids: ids.join(',') },
-  });
-}
-
-/** 更新 OTA 固件状态 */
-export function updateOtaFirmwareStatus(id: number, status: number) {
-  return requestClient.put(`/iot/ota/firmware/update-status`, {
-    id,
-    status,
-  });
-}
-
-/** 根据产品 ID 查询固件列表 */
-export function getOtaFirmwareListByProductId(productId: number) {
-  return requestClient.get<IoTOtaFirmwareApi.Firmware[]>(
-    '/iot/ota/firmware/list-by-product-id',
-    { params: { productId } },
-  );
-}
diff --git a/apps/web-antdv-next/src/api/iot/ota/task/index.ts b/apps/web-antdv-next/src/api/iot/ota/task/index.ts
index 25ef2429f..7f4f5d6fb 100644
--- a/apps/web-antdv-next/src/api/iot/ota/task/index.ts
+++ b/apps/web-antdv-next/src/api/iot/ota/task/index.ts
@@ -3,45 +3,21 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace IoTOtaTaskApi {
-  /** IoT OTA 升级任务 VO */
+  /** IoT OTA 升级任务 */
   export interface Task {
     id?: number;
-    name: string;
+    name?: string;
     description?: string;
-    firmwareId: number;
-    firmwareName?: string;
-    productId?: number;
-    productName?: string;
+    firmwareId?: number;
+    status?: number;
     deviceScope?: number;
     deviceIds?: number[];
-    status?: number;
-    successCount?: number;
-    failureCount?: number;
-    pendingCount?: number;
+    deviceTotalCount?: number;
+    deviceSuccessCount?: number;
     createTime?: Date;
-    updateTime?: Date;
   }
 }
 
-/** IoT OTA 升级任务 */
-export interface OtaTask {
-  id?: number;
-  name?: string;
-  description?: string;
-  firmwareId?: number;
-  firmwareName?: string;
-  productId?: number;
-  productName?: string;
-  deviceScope?: number;
-  deviceIds?: number[];
-  status?: number;
-  successCount?: number;
-  failureCount?: number;
-  pendingCount?: number;
-  createTime?: Date;
-  updateTime?: Date;
-}
-
 /** 查询 OTA 升级任务分页 */
 export function getOtaTaskPage(params: PageParam) {
   return requestClient.get<PageResult<IoTOtaTaskApi.Task>>(
@@ -56,43 +32,11 @@ export function getOtaTask(id: number) {
 }
 
 /** 新增 OTA 升级任务 */
-export function createOtaTask(data: OtaTask) {
+export function createOtaTask(data: IoTOtaTaskApi.Task) {
   return requestClient.post('/iot/ota/task/create', data);
 }
 
-/** 修改 OTA 升级任务 */
-export function updateOtaTask(data: OtaTask) {
-  return requestClient.put('/iot/ota/task/update', data);
-}
-
-/** 删除 OTA 升级任务 */
-export function deleteOtaTask(id: number) {
-  return requestClient.delete(`/iot/ota/task/delete?id=${id}`);
-}
-
-/** 批量删除 OTA 升级任务 */
-export function deleteOtaTaskList(ids: number[]) {
-  return requestClient.delete('/iot/ota/task/delete-list', {
-    params: { ids: ids.join(',') },
-  });
-}
-
 /** 取消 OTA 升级任务 */
 export function cancelOtaTask(id: number) {
-  return requestClient.put(`/iot/ota/task/cancel?id=${id}`);
-}
-
-/** 启动 OTA 升级任务 */
-export function startOtaTask(id: number) {
-  return requestClient.put(`/iot/ota/task/start?id=${id}`);
-}
-
-/** 暂停 OTA 升级任务 */
-export function pauseOtaTask(id: number) {
-  return requestClient.put(`/iot/ota/task/pause?id=${id}`);
-}
-
-/** 恢复 OTA 升级任务 */
-export function resumeOtaTask(id: number) {
-  return requestClient.put(`/iot/ota/task/resume?id=${id}`);
+  return requestClient.post(`/iot/ota/task/cancel?id=${id}`);
 }
diff --git a/apps/web-antdv-next/src/api/iot/ota/task/record/index.ts b/apps/web-antdv-next/src/api/iot/ota/task/record/index.ts
index 2d66a422f..29eada8b6 100644
--- a/apps/web-antdv-next/src/api/iot/ota/task/record/index.ts
+++ b/apps/web-antdv-next/src/api/iot/ota/task/record/index.ts
@@ -3,44 +3,24 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace IoTOtaTaskRecordApi {
-  /** IoT OTA 升级任务记录 VO */
+  /** IoT OTA 升级任务记录 */
   export interface TaskRecord {
     id?: number;
-    taskId: number;
-    taskName?: string;
-    deviceId: number;
-    deviceName?: string;
     firmwareId?: number;
-    firmwareName?: string;
     firmwareVersion?: string;
+    taskId?: number;
+    deviceId?: string;
+    deviceName?: string;
+    currentVersion?: string;
+    fromFirmwareId?: number;
+    fromFirmwareVersion?: string;
     status?: number;
     progress?: number;
-    errorMessage?: string;
-    startTime?: Date;
-    endTime?: Date;
-    createTime?: Date;
+    description?: string;
+    updateTime?: Date;
   }
 }
 
-// TODO @AI：这里应该拿到 IoTOtaTaskRecordApi 里
-/** IoT OTA 升级任务记录 */
-export interface OtaTaskRecord {
-  id?: number;
-  taskId?: number;
-  taskName?: string;
-  deviceId?: number;
-  deviceName?: string;
-  firmwareId?: number;
-  firmwareName?: string;
-  firmwareVersion?: string;
-  status?: number;
-  progress?: number;
-  errorMessage?: string;
-  startTime?: Date;
-  endTime?: Date;
-  createTime?: Date;
-}
-
 /** 查询 OTA 升级任务记录分页 */
 export function getOtaTaskRecordPage(params: PageParam) {
   return requestClient.get<PageResult<IoTOtaTaskRecordApi.TaskRecord>>(
@@ -49,48 +29,12 @@ export function getOtaTaskRecordPage(params: PageParam) {
   );
 }
 
-/** 查询 OTA 升级任务记录详情 */
-export function getOtaTaskRecord(id: number) {
-  return requestClient.get<IoTOtaTaskRecordApi.TaskRecord>(
-    `/iot/ota/task/record/get?id=${id}`,
-  );
-}
-
-/** 根据任务 ID 查询记录列表 */
-export function getOtaTaskRecordListByTaskId(taskId: number) {
-  return requestClient.get<IoTOtaTaskRecordApi.TaskRecord[]>(
-    '/iot/ota/task/record/list-by-task-id',
-    { params: { taskId } },
-  );
-}
-
-/** 根据设备 ID 查询记录列表 */
-export function getOtaTaskRecordListByDeviceId(deviceId: number) {
-  return requestClient.get<IoTOtaTaskRecordApi.TaskRecord[]>(
-    '/iot/ota/task/record/list-by-device-id',
-    { params: { deviceId } },
-  );
-}
-
-/** 根据固件 ID 查询记录列表 */
-export function getOtaTaskRecordListByFirmwareId(firmwareId: number) {
-  return requestClient.get<IoTOtaTaskRecordApi.TaskRecord[]>(
-    '/iot/ota/task/record/list-by-firmware-id',
-    { params: { firmwareId } },
-  );
-}
-
-/** 重试升级任务记录 */
-export function retryOtaTaskRecord(id: number) {
-  return requestClient.put(`/iot/ota/task/record/retry?id=${id}`);
-}
-
-/** 取消升级任务记录 */
+/** 取消 OTA 升级任务记录 */
 export function cancelOtaTaskRecord(id: number) {
   return requestClient.put(`/iot/ota/task/record/cancel?id=${id}`);
 }
 
-/** 获取升级任务记录状态统计 */
+/** 获取 OTA 升级任务记录状态统计 */
 export function getOtaTaskRecordStatusStatistics(
   firmwareId?: number,
   taskId?: number,
diff --git a/apps/web-antdv-next/src/api/iot/product/category/index.ts b/apps/web-antdv-next/src/api/iot/product/category/index.ts
index 24d02ed3b..45ce4ccdb 100644
--- a/apps/web-antdv-next/src/api/iot/product/category/index.ts
+++ b/apps/web-antdv-next/src/api/iot/product/category/index.ts
@@ -7,11 +7,10 @@ export namespace IotProductCategoryApi {
   export interface ProductCategory {
     id?: number; // 分类 ID
     name: string; // 分类名称
-    parentId?: number; // 父级分类 ID
     sort?: number; // 分类排序
     status?: number; // 分类状态
     description?: string; // 分类描述
-    createTime?: string; // 创建时间
+    createTime?: Date; // 创建时间
   }
 }
 
diff --git a/apps/web-antdv-next/src/api/iot/product/product/index.ts b/apps/web-antdv-next/src/api/iot/product/product/index.ts
index f77255f4d..9b4a88ed6 100644
--- a/apps/web-antdv-next/src/api/iot/product/product/index.ts
+++ b/apps/web-antdv-next/src/api/iot/product/product/index.ts
@@ -20,8 +20,6 @@ export namespace IotProductApi {
     deviceType?: number; // 设备类型
     netType?: number; // 联网方式
     serializeType?: string; // 序列化类型
-    dataFormat?: number; // 数据格式
-    validateType?: number; // 认证方式
     registerEnabled?: boolean; // 是否开启动态注册
     deviceCount?: number; // 设备数量
     createTime?: Date; // 创建时间
@@ -103,3 +101,10 @@ export function getProductByKey(productKey: string) {
     params: { productKey },
   });
 }
+
+/** 同步产品物模型 TDengine 超级表结构 */
+export function syncProductPropertyTable(productId: number) {
+  return requestClient.post(
+    `/iot/product/sync-property-table?productId=${productId}`,
+  );
+}
diff --git a/apps/web-antdv-next/src/api/iot/rule/data/rule/index.ts b/apps/web-antdv-next/src/api/iot/rule/data/rule/index.ts
index 55e50184a..e9ba120b2 100644
--- a/apps/web-antdv-next/src/api/iot/rule/data/rule/index.ts
+++ b/apps/web-antdv-next/src/api/iot/rule/data/rule/index.ts
@@ -3,45 +3,21 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace DataRuleApi {
-  /** IoT 数据流转规则 VO */
-  export interface Rule {
+  /** IoT 数据流转规则 */
+  export interface DataRule {
     id?: number;
-    name: string;
+    name?: string;
     description?: string;
     status?: number;
-    productId?: number;
-    productKey?: string;
-    sourceConfigs?: SourceConfig[];
+    sourceConfigs?: any[];
     sinkIds?: number[];
     createTime?: Date;
   }
-
-  /** IoT 数据源配置 */
-  export interface SourceConfig {
-    productId?: number;
-    productKey?: string;
-    deviceId?: number;
-    type?: string;
-    topic?: string;
-  }
-}
-
-/** IoT 数据流转规则 */
-export interface DataRule {
-  id?: number;
-  name?: string;
-  description?: string;
-  status?: number;
-  productId?: number;
-  productKey?: string;
-  sourceConfigs?: any[];
-  sinkIds?: number[];
-  createTime?: Date;
 }
 
 /** 查询数据流转规则分页 */
 export function getDataRulePage(params: PageParam) {
-  return requestClient.get<PageResult<DataRuleApi.Rule>>(
+  return requestClient.get<PageResult<DataRuleApi.DataRule>>(
     '/iot/data-rule/page',
     { params },
   );
@@ -49,16 +25,16 @@ export function getDataRulePage(params: PageParam) {
 
 /** 查询数据流转规则详情 */
 export function getDataRule(id: number) {
-  return requestClient.get<DataRuleApi.Rule>(`/iot/data-rule/get?id=${id}`);
+  return requestClient.get<DataRuleApi.DataRule>(`/iot/data-rule/get?id=${id}`);
 }
 
 /** 新增数据流转规则 */
-export function createDataRule(data: DataRule) {
+export function createDataRule(data: DataRuleApi.DataRule) {
   return requestClient.post('/iot/data-rule/create', data);
 }
 
 /** 修改数据流转规则 */
-export function updateDataRule(data: DataRule) {
+export function updateDataRule(data: DataRuleApi.DataRule) {
   return requestClient.put('/iot/data-rule/update', data);
 }
 
@@ -66,18 +42,3 @@ export function updateDataRule(data: DataRule) {
 export function deleteDataRule(id: number) {
   return requestClient.delete(`/iot/data-rule/delete?id=${id}`);
 }
-
-/** 批量删除数据流转规则 */
-export function deleteDataRuleList(ids: number[]) {
-  return requestClient.delete('/iot/data-rule/delete-list', {
-    params: { ids: ids.join(',') },
-  });
-}
-
-/** 更新数据流转规则状态 */
-export function updateDataRuleStatus(id: number, status: number) {
-  return requestClient.put(`/iot/data-rule/update-status`, {
-    id,
-    status,
-  });
-}
diff --git a/apps/web-antdv-next/src/api/iot/rule/data/sink/index.ts b/apps/web-antdv-next/src/api/iot/rule/data/sink/index.ts
index 4614c2a6e..3c26df91d 100644
--- a/apps/web-antdv-next/src/api/iot/rule/data/sink/index.ts
+++ b/apps/web-antdv-next/src/api/iot/rule/data/sink/index.ts
@@ -2,101 +2,147 @@ import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
+interface BaseConfig {
+  type: string;
+}
+
 export namespace DataSinkApi {
   /** IoT 数据流转目的 VO */
-  export interface Sink {
+  export interface DataSink {
     id?: number;
-    name: string;
+    name?: string;
     description?: string;
     status?: number;
-    type: string;
-    config?: any;
+    direction?: number;
+    type?: number;
+    config?:
+      | DatabaseConfig
+      | HttpConfig
+      | KafkaMQConfig
+      | MqttConfig
+      | RabbitMQConfig
+      | RedisStreamMQConfig
+      | RocketMQConfig
+      | TcpConfig
+      | WebSocketConfig;
     createTime?: Date;
   }
+
+  /** HTTP 配置 */
+  export interface HttpConfig extends BaseConfig {
+    url: string;
+    method: string;
+    headers: Record<string, string>;
+    query: Record<string, string>;
+    body: string;
+  }
+
+  /** TCP 配置 */
+  export interface TcpConfig extends BaseConfig {
+    host: string;
+    port: number;
+    connectTimeoutMs: number;
+    readTimeoutMs: number;
+    ssl: boolean;
+    sslCertPath: string;
+    dataFormat: string;
+    heartbeatIntervalMs: number;
+    reconnectIntervalMs: number;
+    maxReconnectAttempts: number;
+  }
+
+  /** WebSocket 配置 */
+  export interface WebSocketConfig extends BaseConfig {
+    serverUrl: string;
+    connectTimeoutMs: number;
+    sendTimeoutMs: number;
+    heartbeatIntervalMs: number;
+    heartbeatMessage: string;
+    subprotocols: string;
+    customHeaders: string;
+    verifySslCert: boolean;
+    dataFormat: string;
+    reconnectIntervalMs: number;
+    maxReconnectAttempts: number;
+    enableCompression: boolean;
+    sendRetryCount: number;
+    sendRetryIntervalMs: number;
+  }
+
+  /** MQTT 配置 */
+  export interface MqttConfig extends BaseConfig {
+    url: string;
+    username: string;
+    password: string;
+    clientId: string;
+    topic: string;
+  }
+
+  /** Database 配置 */
+  export interface DatabaseConfig extends BaseConfig {
+    jdbcUrl: string;
+    username: string;
+    password: string;
+    tableName: string;
+  }
+
+  /** RocketMQ 配置 */
+  export interface RocketMQConfig extends BaseConfig {
+    nameServer: string;
+    accessKey: string;
+    secretKey: string;
+    group: string;
+    topic: string;
+    tags: string;
+  }
+
+  /** Kafka 配置 */
+  export interface KafkaMQConfig extends BaseConfig {
+    bootstrapServers: string;
+    username: string;
+    password: string;
+    ssl: boolean;
+    topic: string;
+  }
+
+  /** RabbitMQ 配置 */
+  export interface RabbitMQConfig extends BaseConfig {
+    host: string;
+    port: number;
+    virtualHost: string;
+    username: string;
+    password: string;
+    exchange: string;
+    routingKey: string;
+    queue: string;
+  }
+
+  /** Redis Stream MQ 配置 */
+  export interface RedisStreamMQConfig extends BaseConfig {
+    host: string;
+    port: number;
+    password: string;
+    database: number;
+    topic: string;
+  }
 }
 
-/** IoT 数据流转目的 */
-export interface DataSinkVO {
-  id?: number;
-  name?: string;
-  description?: string;
-  status?: number;
-  type?: string;
-  config?: any;
-  createTime?: Date;
-}
-
-/** IoT 数据目的类型枚举 */
-export enum IotDataSinkTypeEnum {
-  HTTP = 'HTTP',
-  KAFKA = 'KAFKA',
-  MQTT = 'MQTT',
-  RABBITMQ = 'RABBITMQ',
-  REDIS_STREAM = 'REDIS_STREAM',
-  ROCKETMQ = 'ROCKETMQ',
-}
-
-/** HTTP 配置 */
-export interface HttpConfig {
-  url?: string;
-  method?: string;
-  headers?: Record<string, string>;
-  timeout?: number;
-}
-
-/** MQTT 配置 */
-export interface MqttConfig {
-  broker?: string;
-  port?: number;
-  topic?: string;
-  username?: string;
-  password?: string;
-  clientId?: string;
-  qos?: number;
-}
-
-/** Kafka 配置 */
-export interface KafkaMQConfig {
-  bootstrapServers?: string;
-  topic?: string;
-  acks?: string;
-  retries?: number;
-  batchSize?: number;
-}
-
-/** RabbitMQ 配置 */
-export interface RabbitMQConfig {
-  host?: string;
-  port?: number;
-  virtualHost?: string;
-  username?: string;
-  password?: string;
-  exchange?: string;
-  routingKey?: string;
-  queue?: string;
-}
-
-/** RocketMQ 配置 */
-export interface RocketMQConfig {
-  nameServer?: string;
-  topic?: string;
-  tag?: string;
-  producerGroup?: string;
-}
-
-/** Redis Stream 配置 */
-export interface RedisStreamMQConfig {
-  host?: string;
-  port?: number;
-  password?: string;
-  database?: number;
-  streamKey?: string;
-  maxLen?: number;
-}
+/** 数据流转目的类型 */
+export const IotDataSinkTypeEnum = {
+  HTTP: 1,
+  TCP: 2,
+  WEBSOCKET: 3,
+  MQTT: 10,
+  DATABASE: 20,
+  REDIS_STREAM: 21,
+  ROCKETMQ: 30,
+  RABBITMQ: 31,
+  KAFKA: 32,
+} as const;
 
 /** 查询数据流转目的分页 */
 export function getDataSinkPage(params: PageParam) {
-  return requestClient.get<PageResult<DataSinkApi.Sink>>(
+  return requestClient.get<PageResult<DataSinkApi.DataSink>>(
     '/iot/data-sink/page',
     { params },
   );
@@ -104,26 +150,23 @@ export function getDataSinkPage(params: PageParam) {
 
 /** 查询数据流转目的详情 */
 export function getDataSink(id: number) {
-  return requestClient.get<DataSinkApi.Sink>(`/iot/data-sink/get?id=${id}`);
+  return requestClient.get<DataSinkApi.DataSink>(`/iot/data-sink/get?id=${id}`);
 }
 
-/** 查询所有数据流转目的列表 */
-export function getDataSinkList() {
-  return requestClient.get<DataSinkApi.Sink[]>('/iot/data-sink/list');
-}
-
-/** 查询数据流转目的简单列表 */
+/** 查询数据流转目的（精简）列表 */
 export function getDataSinkSimpleList() {
-  return requestClient.get<DataSinkApi.Sink[]>('/iot/data-sink/simple-list');
+  return requestClient.get<DataSinkApi.DataSink[]>(
+    '/iot/data-sink/simple-list',
+  );
 }
 
 /** 新增数据流转目的 */
-export function createDataSink(data: DataSinkVO) {
+export function createDataSink(data: DataSinkApi.DataSink) {
   return requestClient.post('/iot/data-sink/create', data);
 }
 
 /** 修改数据流转目的 */
-export function updateDataSink(data: DataSinkVO) {
+export function updateDataSink(data: DataSinkApi.DataSink) {
   return requestClient.put('/iot/data-sink/update', data);
 }
 
@@ -131,18 +174,3 @@ export function updateDataSink(data: DataSinkVO) {
 export function deleteDataSink(id: number) {
   return requestClient.delete(`/iot/data-sink/delete?id=${id}`);
 }
-
-/** 批量删除数据流转目的 */
-export function deleteDataSinkList(ids: number[]) {
-  return requestClient.delete('/iot/data-sink/delete-list', {
-    params: { ids: ids.join(',') },
-  });
-}
-
-/** 更新数据流转目的状态 */
-export function updateDataSinkStatus(id: number, status: number) {
-  return requestClient.put(`/iot/data-sink/update-status`, {
-    id,
-    status,
-  });
-}
diff --git a/apps/web-antdv-next/src/api/iot/rule/scene/index.ts b/apps/web-antdv-next/src/api/iot/rule/scene/index.ts
index 9a8acf758..23549f1ad 100644
--- a/apps/web-antdv-next/src/api/iot/rule/scene/index.ts
+++ b/apps/web-antdv-next/src/api/iot/rule/scene/index.ts
@@ -11,25 +11,20 @@ export namespace RuleSceneApi {
     status?: number;
     triggers?: Trigger[];
     actions?: Action[];
+    lastTriggeredTime?: Date;
     createTime?: Date;
   }
 
   /** 场景联动规则的触发器 */
   export interface Trigger {
-    type?: string;
+    type?: number;
     productId?: number;
     deviceId?: number;
     identifier?: string;
     operator?: string;
     value?: any;
     cronExpression?: string;
-    conditionGroups?: TriggerConditionGroup[];
-  }
-
-  /** 场景联动规则的触发条件组 */
-  export interface TriggerConditionGroup {
-    conditions?: TriggerCondition[];
-    operator?: string;
+    conditionGroups?: TriggerCondition[][]; // 后端结构：List<List<TriggerCondition>>；外层「或」、组内「且」
   }
 
   /**  场景联动规则的触发条件 */
@@ -39,72 +34,22 @@ export namespace RuleSceneApi {
     identifier?: string;
     operator?: string;
     value?: any;
-    type?: string;
+    type?: number;
+    param?: string;
   }
 
   /** 场景联动规则的动作 */
   export interface Action {
-    type?: string;
+    type?: number;
     productId?: number;
     deviceId?: number;
     identifier?: string;
     value?: any;
     alertConfigId?: number;
+    params?: string;
   }
 }
 
-// TODO @haohao：貌似下面的，和 RuleSceneApi 重复了。
-/** IoT 场景联动规则 */
-export interface IotSceneRule {
-  id?: number;
-  name?: string;
-  description?: string;
-  status?: number;
-  triggers?: Trigger[];
-  actions?: Action[];
-  createTime?: Date;
-}
-
-/** IoT 场景联动规则触发器 */
-export interface Trigger {
-  type?: string;
-  productId?: number;
-  deviceId?: number;
-  identifier?: string;
-  operator?: string;
-  value?: any;
-  cronExpression?: string;
-  conditionGroups?: TriggerConditionGroup[];
-}
-
-/** IoT 场景联动规则触发条件组 */
-export interface TriggerConditionGroup {
-  conditions?: TriggerCondition[];
-  operator?: string;
-}
-
-/** IoT 场景联动规则触发条件 */
-export interface TriggerCondition {
-  productId?: number;
-  deviceId?: number;
-  identifier?: string;
-  operator?: string;
-  value?: any;
-  type?: string;
-  param?: string;
-}
-
-/** IoT 场景联动规则动作 */
-export interface Action {
-  type?: string;
-  productId?: number;
-  deviceId?: number;
-  identifier?: string;
-  value?: any;
-  alertConfigId?: number;
-  params?: string;
-}
-
 /** 查询场景联动规则分页 */
 export function getSceneRulePage(params: PageParam) {
   return requestClient.get<PageResult<RuleSceneApi.SceneRule>>(
@@ -121,12 +66,12 @@ export function getSceneRule(id: number) {
 }
 
 /** 新增场景联动规则 */
-export function createSceneRule(data: IotSceneRule) {
+export function createSceneRule(data: RuleSceneApi.SceneRule) {
   return requestClient.post('/iot/scene-rule/create', data);
 }
 
 /** 修改场景联动规则 */
-export function updateSceneRule(data: IotSceneRule) {
+export function updateSceneRule(data: RuleSceneApi.SceneRule) {
   return requestClient.put('/iot/scene-rule/update', data);
 }
 
@@ -135,14 +80,6 @@ export function deleteSceneRule(id: number) {
   return requestClient.delete(`/iot/scene-rule/delete?id=${id}`);
 }
 
-/** 批量删除场景联动规则 */
-// TODO @haohao：貌似用上。
-export function deleteSceneRuleList(ids: number[]) {
-  return requestClient.delete('/iot/scene-rule/delete-list', {
-    params: { ids: ids.join(',') },
-  });
-}
-
 /** 更新场景联动规则状态 */
 export function updateSceneRuleStatus(id: number, status: number) {
   return requestClient.put(`/iot/scene-rule/update-status`, {
diff --git a/apps/web-antdv-next/src/api/iot/statistics/index.ts b/apps/web-antdv-next/src/api/iot/statistics/index.ts
index a02b342d2..dc7971eb6 100644
--- a/apps/web-antdv-next/src/api/iot/statistics/index.ts
+++ b/apps/web-antdv-next/src/api/iot/statistics/index.ts
@@ -17,18 +17,6 @@ export namespace IotStatisticsApi {
     productCategoryDeviceCounts: Record<string, number>; // 按品类统计的设备数量
   }
 
-  /** 时间戳-数值的键值对类型 */
-  export interface TimeValueItem {
-    [key: string]: number;
-  }
-
-  /** 消息统计数据类型 */
-  export interface DeviceMessageSummary {
-    statType: number;
-    upstreamCounts: TimeValueItem[];
-    downstreamCounts: TimeValueItem[];
-  }
-
   /** 设备消息数量统计（按日期） */
   export interface DeviceMessageSummaryByDateRespVO {
     time: string; // 时间轴
diff --git a/apps/web-antdv-next/src/api/iot/thingmodel/index.ts b/apps/web-antdv-next/src/api/iot/thingmodel/index.ts
index 9e89b869c..002ccd9c2 100644
--- a/apps/web-antdv-next/src/api/iot/thingmodel/index.ts
+++ b/apps/web-antdv-next/src/api/iot/thingmodel/index.ts
@@ -1,126 +1,209 @@
+import type { Rule } from 'antdv-next/es/form';
+
 import type { PageParam, PageResult } from '@vben/request';
 
+import { isEmpty } from '@vben/utils';
+
 import { requestClient } from '#/api/request';
 
 export namespace ThingModelApi {
-  /** IoT 物模型数据 VO */
+  /** IoT 物模型数据 */
   export interface ThingModel {
     id?: number;
     productId?: number;
     productKey?: string;
-    identifier: string;
-    name: string;
-    desc?: string;
-    type: string;
-    property?: ThingModelProperty;
-    event?: ThingModelEvent;
-    service?: ThingModelService;
+    identifier?: string;
+    name?: string;
+    description?: string;
+    dataType?: string;
+    type?: number; // 参见 IoTThingModelTypeEnum 枚举类
+    property?: Property;
+    event?: Event;
+    service?: Service;
   }
 
   /** IoT 物模型属性 */
   export interface Property {
-    identifier: string;
-    name: string;
-    accessMode: string;
-    dataType: string;
+    identifier?: string;
+    name?: string;
+    accessMode?: string;
+    required?: boolean;
+    dataType?: string;
+    description?: string;
     dataSpecs?: any;
     dataSpecsList?: any[];
-    desc?: string;
   }
 
   /** IoT 物模型服务 */
   export interface Service {
-    identifier: string;
-    name: string;
-    callType: string;
-    inputData?: any[];
-    outputData?: any[];
-    desc?: string;
+    identifier?: string;
+    name?: string;
+    required?: boolean;
+    callType?: string;
+    description?: string;
+    inputParams?: Param[];
+    outputParams?: Param[];
+    method?: string;
   }
 
   /** IoT 物模型事件 */
   export interface Event {
-    identifier: string;
+    identifier?: string;
+    name?: string;
+    required?: boolean;
+    type?: string;
+    description?: string;
+    outputParams?: Param[];
+    method?: string;
+  }
+
+  /** IoT 物模型参数 */
+  export interface Param {
+    identifier?: string;
+    name?: string;
+    direction?: string;
+    paraOrder?: number;
+    dataType?: string;
+    dataSpecs?: any;
+    dataSpecsList?: any[];
+  }
+
+  /** IoT 物模型 TSL（树形）响应 */
+  export interface ThingModelTSL {
+    productId?: number;
+    productKey?: string;
+    properties?: Property[];
+    events?: Event[];
+    services?: Service[];
+  }
+
+  /** IoT 数据定义（数值型） */
+  export interface DataSpecsNumberData {
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+    unit?: string;
+    unitName?: string;
+  }
+
+  /** IoT 数据定义（枚举/布尔型） */
+  export interface DataSpecsEnumOrBoolData {
+    value: number | string;
     name: string;
-    type: string;
-    outputData?: any[];
-    desc?: string;
   }
 }
 
-/** IoT 物模型数据 */
-export interface ThingModelData {
-  id?: number;
-  productId?: number;
-  productKey?: string;
-  identifier?: string;
-  name?: string;
-  desc?: string;
-  type?: string;
-  dataType?: string;
-  property?: ThingModelProperty;
-  event?: ThingModelEvent;
-  service?: ThingModelService;
+/** 生成「必填 + 数字」类校验器：拼到 size / length / 枚举值上 */
+function buildRequiredNumberValidator(label: string) {
+  return (_rule: any, value: any, callback: any) => {
+    if (isEmpty(value)) {
+      callback(new Error(`${label}不能为空`));
+      return;
+    }
+    if (Number.isNaN(Number(value))) {
+      callback(new Error(`${label}必须是数字`));
+      return;
+    }
+    callback();
+  };
 }
 
-/** IoT 物模型属性 */
-export interface ThingModelProperty {
-  identifier?: string;
-  name?: string;
-  accessMode?: string;
-  dataType?: string;
-  dataSpecs?: any;
-  dataSpecsList?: any[];
-  desc?: string;
-}
-
-/** IoT 物模型服务 */
-export interface ThingModelService {
-  identifier?: string;
-  name?: string;
-  callType?: string;
-  inputData?: any[];
-  outputData?: any[];
-  desc?: string;
-}
-
-/** IoT 物模型事件 */
-export interface ThingModelEvent {
-  identifier?: string;
-  name?: string;
-  type?: string;
-  outputData?: any[];
-  desc?: string;
-}
-
-/** IoT 数据定义（数值型） */
-export interface DataSpecsNumberData {
-  min?: number | string;
-  max?: number | string;
-  step?: number | string;
-  unit?: string;
-  unitName?: string;
-}
-
-/** IoT 数据定义（枚举/布尔型） */
-export interface DataSpecsEnumOrBoolData {
-  value: number | string;
-  name: string;
+/** 生成「标识符样式」名称校验器：开头需为中文 / 英文 / 数字，整体仅允许中文、英文、数字、下划线、短划线，长度 ≤ 20 */
+export function buildIdentifierLikeNameValidator(label: string) {
+  return (_rule: any, value: string, callback: any) => {
+    if (isEmpty(value)) {
+      callback(new Error(`${label}不能为空`));
+      return;
+    }
+    if (!/^[一-龥A-Za-z0-9]/.test(value)) {
+      callback(new Error(`${label}必须以中文、英文字母或数字开头`));
+      return;
+    }
+    if (!/^[一-龥A-Za-z0-9][\w一-龥-]*$/.test(value)) {
+      callback(
+        new Error(`${label}只能包含中文、英文字母、数字、下划线和短划线`),
+      );
+      return;
+    }
+    if (value.length > 20) {
+      callback(new Error(`${label}长度不能超过 20 个字符`));
+      return;
+    }
+    callback();
+  };
 }
 
 /** IoT 物模型表单校验规则 */
-export interface ThingModelFormRules {
-  [key: string]: any;
-}
+export const ThingModelFormRules: Record<string, Rule[]> = {
+  name: [
+    { required: true, message: '功能名称不能为空', trigger: 'blur' },
+    {
+      pattern: /^[一-龥A-Za-z0-9][一-龥A-Za-z0-9\-_/.]{0,29}$/,
+      message:
+        '支持中文、大小写字母、日文、数字、短划线、下划线、斜杠和小数点，必须以中文、英文或数字开头，不超过 30 个字符',
+      trigger: 'blur',
+    },
+  ],
+  type: [{ required: true, message: '功能类型不能为空', trigger: 'blur' }],
+  identifier: [
+    { required: true, message: '标识符不能为空', trigger: 'blur' },
+    {
+      pattern: /^[a-zA-Z][a-zA-Z0-9_]{0,31}$/,
+      message: '支持大小写字母、数字和下划线，必须以字母开头，不超过 32 个字符',
+      trigger: 'blur',
+    },
+    {
+      validator: (_rule: any, value: string, callback: any) => {
+        const reservedKeywords = [
+          'set',
+          'get',
+          'post',
+          'property',
+          'event',
+          'time',
+          'value',
+        ];
+        if (reservedKeywords.includes(value)) {
+          callback(
+            new Error(
+              'set, get, post, property, event, time, value 是系统保留字段，不能用于标识符定义',
+            ),
+          );
+          return;
+        }
+        if (/^\d+$/.test(value)) {
+          callback(new Error('标识符不能是纯数字'));
+          return;
+        }
+        callback();
+      },
+      trigger: 'blur',
+    },
+  ],
+  childDataType: [{ required: true, message: '元素类型不能为空' }],
+  size: [
+    {
+      required: true,
+      validator: buildRequiredNumberValidator('元素个数'),
+      trigger: 'blur',
+    },
+  ],
+  length: [
+    {
+      required: true,
+      validator: buildRequiredNumberValidator('文本长度'),
+      trigger: 'blur',
+    },
+  ],
+  accessMode: [
+    { required: true, message: '请选择读写类型', trigger: 'change' },
+  ],
+  callType: [{ required: true, message: '请选择调用方式', trigger: 'change' }],
+  eventType: [{ required: true, message: '请选择事件类型', trigger: 'change' }],
+};
 
-/** 验证布尔型名称 */
-export function validateBoolName(_rule: any, value: any, callback: any) {
-  if (value) {
-    callback();
-  } else {
-    callback(new Error('枚举描述不能为空'));
-  }
-}
+/** 校验布尔值名称 */
+export const validateBoolName = buildIdentifierLikeNameValidator('布尔值名称');
 
 /** 查询产品物模型分页 */
 export function getThingModelPage(params: PageParam) {
@@ -141,17 +224,19 @@ export function getThingModel(id: number) {
 export function getThingModelListByProductId(productId: number) {
   return requestClient.get<ThingModelApi.ThingModel[]>(
     '/iot/thing-model/list',
-    { params: { productId } },
+    {
+      params: { productId },
+    },
   );
 }
 
 /** 新增物模型 */
-export function createThingModel(data: ThingModelData) {
+export function createThingModel(data: ThingModelApi.ThingModel) {
   return requestClient.post('/iot/thing-model/create', data);
 }
 
 /** 修改物模型 */
-export function updateThingModel(data: ThingModelData) {
+export function updateThingModel(data: ThingModelApi.ThingModel) {
   return requestClient.put('/iot/thing-model/update', data);
 }
 
@@ -161,26 +246,11 @@ export function deleteThingModel(id: number) {
 }
 
 /** 获取物模型 TSL */
-export function getThingModelTSL(productId: number) {
-  return requestClient.get<ThingModelApi.ThingModel[]>(
+export function getThingModelTSLByProductId(productId: number) {
+  return requestClient.get<ThingModelApi.ThingModelTSL>(
     '/iot/thing-model/get-tsl',
-    { params: { productId } },
+    {
+      params: { productId },
+    },
   );
 }
-
-/** 导入物模型 TSL
-export function importThingModelTSL(productId: number, tslData: any) {
-  return requestClient.post('/iot/thing-model/import-tsl', {
-    productId,
-    tslData,
-  });
-}
- */
-
-/** 导出物模型 TSL
-export function exportThingModelTSL(productId: number) {
-  return requestClient.get<any>('/iot/thing-model/export-tsl', {
-    params: { productId },
-  });
-}
- */
diff --git a/apps/web-antdv-next/src/api/system/mail/template/index.ts b/apps/web-antdv-next/src/api/system/mail/template/index.ts
index 57f722cf5..fffd5d62b 100644
--- a/apps/web-antdv-next/src/api/system/mail/template/index.ts
+++ b/apps/web-antdv-next/src/api/system/mail/template/index.ts
@@ -17,6 +17,13 @@ export namespace SystemMailTemplateApi {
     createTime: Date;
   }
 
+  /** 邮件模版精简信息 */
+  export interface MailTemplateSimple {
+    id: number;
+    name: string;
+    code: string;
+  }
+
   /** 邮件发送信息 */
   export interface MailSendReqVO {
     toMails: string[];
@@ -35,6 +42,13 @@ export function getMailTemplatePage(params: PageParam) {
   );
 }
 
+/** 查询邮件模版精简列表 */
+export function getSimpleMailTemplateList() {
+  return requestClient.get<SystemMailTemplateApi.MailTemplateSimple[]>(
+    '/system/mail-template/simple-list',
+  );
+}
+
 /** 查询邮件模版详情 */
 export function getMailTemplate(id: number) {
   return requestClient.get<SystemMailTemplateApi.MailTemplate>(
diff --git a/apps/web-antdv-next/src/api/system/notify/template/index.ts b/apps/web-antdv-next/src/api/system/notify/template/index.ts
index dd19f4b8f..92c7d7bcc 100644
--- a/apps/web-antdv-next/src/api/system/notify/template/index.ts
+++ b/apps/web-antdv-next/src/api/system/notify/template/index.ts
@@ -16,6 +16,13 @@ export namespace SystemNotifyTemplateApi {
     remark: string;
   }
 
+  /** 站内信模板精简信息 */
+  export interface NotifyTemplateSimple {
+    id: number;
+    name: string;
+    code: string;
+  }
+
   /** 发送站内信请求 */
   export interface NotifySendReqVO {
     userId: number;
@@ -33,6 +40,13 @@ export function getNotifyTemplatePage(params: PageParam) {
   );
 }
 
+/** 查询站内信模板精简列表 */
+export function getSimpleNotifyTemplateList() {
+  return requestClient.get<SystemNotifyTemplateApi.NotifyTemplateSimple[]>(
+    '/system/notify-template/simple-list',
+  );
+}
+
 /** 查询站内信模板详情 */
 export function getNotifyTemplate(id: number) {
   return requestClient.get<SystemNotifyTemplateApi.NotifyTemplate>(
diff --git a/apps/web-antdv-next/src/api/system/sms/template/index.ts b/apps/web-antdv-next/src/api/system/sms/template/index.ts
index eccfb911e..5cfc5ca9b 100644
--- a/apps/web-antdv-next/src/api/system/sms/template/index.ts
+++ b/apps/web-antdv-next/src/api/system/sms/template/index.ts
@@ -19,6 +19,13 @@ export namespace SystemSmsTemplateApi {
     createTime?: Date;
   }
 
+  /** 短信模板精简信息 */
+  export interface SmsTemplateSimple {
+    id: number;
+    name: string;
+    code: string;
+  }
+
   /** 发送短信请求 */
   export interface SmsSendReqVO {
     mobile: string;
@@ -35,6 +42,13 @@ export function getSmsTemplatePage(params: PageParam) {
   );
 }
 
+/** 查询短信模板精简列表 */
+export function getSimpleSmsTemplateList() {
+  return requestClient.get<SystemSmsTemplateApi.SmsTemplateSimple[]>(
+    '/system/sms-template/simple-list',
+  );
+}
+
 /** 查询短信模板详情 */
 export function getSmsTemplate(id: number) {
   return requestClient.get<SystemSmsTemplateApi.SmsTemplate>(
diff --git a/apps/web-antdv-next/src/assets/imgs/iot/device.png b/apps/web-antdv-next/src/assets/imgs/iot/device.png
new file mode 100644
index 000000000..79339cdf4
Binary files /dev/null and b/apps/web-antdv-next/src/assets/imgs/iot/device.png differ
diff --git a/apps/web-antdv-next/src/assets/svgs/iot/cube.svg b/apps/web-antdv-next/src/assets/svgs/iot/cube.svg
new file mode 100644
index 000000000..200ac1b1c
--- /dev/null
+++ b/apps/web-antdv-next/src/assets/svgs/iot/cube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 12 12"><g clip-path="url(#a)"><path fill="url(#b)" fill-rule="evenodd" d="M6.958.42C6.444.216 5.61.216 5.098.42L1.15 1.975c-.77.304-.77.797 0 1.1l3.947 1.558c.514.202 1.347.202 1.86 0l3.948-1.557c.77-.304.77-.797 0-1.1L6.958.418ZM4.715 11.788a.857.857 0 0 0 .3.056c.383 0 .671-.295.671-.7V6.404c0-.49-.364-1.007-.817-1.177L1.09 3.805a.808.808 0 0 0-.284-.056c-.353 0-.581.275-.581.7V9.19c0 .508.33 1.014.763 1.177l3.726 1.422Zm2.229-.024h-.02l.073.003c.074.004.154.009.227-.019L11 10.367c.45-.168.83-.686.83-1.177V4.45c0-.413-.29-.7-.673-.7a.965.965 0 0 0-.317.055l-3.72 1.422c-.44.165-.75.67-.75 1.177v4.74c0 .42.218.621.575.621Z" clip-rule="evenodd"/></g><defs><linearGradient id="b" x1=".226" x2="11.803" y1=".267" y2="11.871" gradientUnits="userSpaceOnUse"><stop stop-color="#1B3149"/><stop offset="1" stop-color="#717D8A"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h12v12H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/apps/web-antdv-next/src/router/routes/modules/iot.ts b/apps/web-antdv-next/src/router/routes/modules/iot.ts
index 2bc6d32b2..a1d2203b9 100644
--- a/apps/web-antdv-next/src/router/routes/modules/iot.ts
+++ b/apps/web-antdv-next/src/router/routes/modules/iot.ts
@@ -12,7 +12,7 @@ const routes: RouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'product/detail/:id',
+        path: 'product/product/detail/:id',
         name: 'IoTProductDetail',
         meta: {
           title: '产品详情',
@@ -30,14 +30,13 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/iot/device/device/detail/index.vue'),
       },
       {
-        path: 'ota/firmware/detail/:id',
+        path: 'ota/operation/firmware/detail/:id',
         name: 'IoTOtaFirmwareDetail',
         meta: {
           title: '固件详情',
-          activePath: '/iot/ota',
+          activePath: '/iot/operation/ota/firmware',
         },
-        component: () =>
-          import('#/views/iot/ota/modules/firmware-detail/index.vue'),
+        component: () => import('#/views/iot/ota/firmware/detail/index.vue'),
       },
     ],
   },
diff --git a/apps/web-antdv-next/src/views/iot/alert/config/data.ts b/apps/web-antdv-next/src/views/iot/alert/config/data.ts
index 37fc38ed1..86dab96cc 100644
--- a/apps/web-antdv-next/src/views/iot/alert/config/data.ts
+++ b/apps/web-antdv-next/src/views/iot/alert/config/data.ts
@@ -1,12 +1,26 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AlertConfigApi } from '#/api/iot/alert/config';
 
-import { DICT_TYPE } from '@vben/constants';
+import { markRaw } from 'vue';
+
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  IotAlertReceiveTypeEnum,
+} from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getSimpleRuleSceneList } from '#/api/iot/rule/scene';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
+import { MailTemplateSelect } from '#/views/system/mail/template/components';
+import { NotifyTemplateSelect } from '#/views/system/notify/template/components';
+import { SmsTemplateSelect } from '#/views/system/sms/template/components';
+
+function hasReceiveType(values: Partial<Record<string, any>>, type: number) {
+  return Array.isArray(values.receiveTypes) && values.receiveTypes.includes(type);
+}
 
 /** 新增/修改告警配置的表单 */
 export function useFormSchema(): VbenFormSchema[] {
@@ -31,7 +45,7 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'description',
       label: '配置描述',
-      component: 'TextArea',
+      component: 'Textarea',
       componentProps: {
         placeholder: '请输入配置描述',
         rows: 3,
@@ -56,6 +70,7 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
+      defaultValue: CommonStatusEnum.ENABLE,
       rules: 'required',
     },
     {
@@ -69,6 +84,7 @@ export function useFormSchema(): VbenFormSchema[] {
         mode: 'multiple',
         placeholder: '请选择关联的场景联动规则',
       },
+      defaultValue: [],
       rules: 'required',
     },
     {
@@ -82,6 +98,7 @@ export function useFormSchema(): VbenFormSchema[] {
         mode: 'multiple',
         placeholder: '请选择接收的用户',
       },
+      defaultValue: [],
       rules: 'required',
     },
     {
@@ -93,8 +110,63 @@ export function useFormSchema(): VbenFormSchema[] {
         mode: 'multiple',
         placeholder: '请选择接收类型',
       },
+      defaultValue: [],
       rules: 'required',
     },
+    {
+      fieldName: 'smsTemplateCode',
+      label: '短信模板',
+      component: markRaw(SmsTemplateSelect),
+      dependencies: {
+        triggerFields: ['receiveTypes'],
+        show: (values) => hasReceiveType(values, IotAlertReceiveTypeEnum.SMS),
+        trigger: async (values, formApi) => {
+          if (
+            !hasReceiveType(values, IotAlertReceiveTypeEnum.SMS) &&
+            values.smsTemplateCode
+          ) {
+            await formApi.setFieldValue('smsTemplateCode', undefined);
+          }
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'mailTemplateCode',
+      label: '邮件模板',
+      component: markRaw(MailTemplateSelect),
+      dependencies: {
+        triggerFields: ['receiveTypes'],
+        show: (values) => hasReceiveType(values, IotAlertReceiveTypeEnum.MAIL),
+        trigger: async (values, formApi) => {
+          if (
+            !hasReceiveType(values, IotAlertReceiveTypeEnum.MAIL) &&
+            values.mailTemplateCode
+          ) {
+            await formApi.setFieldValue('mailTemplateCode', undefined);
+          }
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'notifyTemplateCode',
+      label: '站内信模板',
+      component: markRaw(NotifyTemplateSelect),
+      dependencies: {
+        triggerFields: ['receiveTypes'],
+        show: (values) => hasReceiveType(values, IotAlertReceiveTypeEnum.NOTIFY),
+        trigger: async (values, formApi) => {
+          if (
+            !hasReceiveType(values, IotAlertReceiveTypeEnum.NOTIFY) &&
+            values.notifyTemplateCode
+          ) {
+            await formApi.setFieldValue('notifyTemplateCode', undefined);
+          }
+        },
+      },
+      rules: 'selectRequired',
+    },
   ];
 }
 
@@ -133,9 +205,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<AlertConfigApi.AlertConfig>['columns'] {
   return [
-    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '配置编号',
@@ -155,7 +226,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'level',
       title: '告警级别',
       minWidth: 100,
-      slots: { default: 'level' },
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_ALERT_LEVEL },
+      },
     },
     {
       field: 'status',
@@ -170,7 +244,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'sceneRuleIds',
       title: '关联场景联动规则',
       minWidth: 150,
-      slots: { default: 'sceneRules' },
+      formatter: ({ cellValue }) => `${cellValue?.length || 0} 条`,
     },
     {
       field: 'receiveUserNames',
diff --git a/apps/web-antdv-next/src/views/iot/alert/config/index.vue b/apps/web-antdv-next/src/views/iot/alert/config/index.vue
index bba84f73f..137a16875 100644
--- a/apps/web-antdv-next/src/views/iot/alert/config/index.vue
+++ b/apps/web-antdv-next/src/views/iot/alert/config/index.vue
@@ -1,22 +1,22 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { AlertConfigApi } from '#/api/iot/alert/config';
 
 import { Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
 
-import { message, Tag } from 'antdv-next';
+import { message } from 'antdv-next';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteAlertConfig, getAlertConfigPage } from '#/api/iot/alert/config';
+import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 
-import AlertConfigForm from '../modules/alert-config-form.vue';
 import { useGridColumns, useGridFormSchema } from './data';
-
-defineOptions({ name: 'IoTAlertConfig' });
+import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: AlertConfigForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -25,42 +25,6 @@ function handleRefresh() {
   gridApi.query();
 }
 
-// 获取告警级别文本
-function getLevelText(level?: number) {
-  const levelMap: Record<number, string> = {
-    1: '提示',
-    2: '一般',
-    3: '警告',
-    4: '严重',
-    5: '紧急',
-  };
-  return level ? levelMap[level] || `级别${level}` : '-';
-}
-
-// 获取告警级别颜色
-function getLevelColor(level?: number) {
-  const colorMap: Record<number, string> = {
-    1: 'blue',
-    2: 'green',
-    3: 'orange',
-    4: 'red',
-    5: 'purple',
-  };
-  return level ? colorMap[level] || 'default' : 'default';
-}
-
-// 获取接收类型文本
-function getReceiveTypeText(type?: number) {
-  const typeMap: Record<number, string> = {
-    1: '站内信',
-    2: '邮箱',
-    3: '短信',
-    4: '微信',
-    5: '钉钉',
-  };
-  return type ? typeMap[type] || `类型${type}` : '-';
-}
-
 /** 创建告警配置 */
 function handleCreate() {
   formModalApi.setData(null).open();
@@ -78,10 +42,8 @@ async function handleDelete(row: AlertConfigApi.AlertConfig) {
     duration: 0,
   });
   try {
-    await deleteAlertConfig(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteAlertConfig(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -130,36 +92,21 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('ui.actionTitle.create', ['告警配置']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['iot:alert-config:create'],
               onClick: handleCreate,
             },
           ]"
         />
       </template>
-
-      <!-- 告警级别列 -->
-      <template #level="{ row }">
-        <Tag :color="getLevelColor(row.level)">
-          {{ getLevelText(row.level) }}
-        </Tag>
-      </template>
-
-      <!-- 关联场景联动规则列 -->
-      <template #sceneRules="{ row }">
-        <span>{{ row.sceneRuleIds?.length || 0 }} 条</span>
-      </template>
-
-      <!-- 接收类型列 -->
       <template #receiveTypes="{ row }">
-        <Tag
+        <DictTag
           v-for="(type, index) in row.receiveTypes"
           :key="index"
+          :type="DICT_TYPE.IOT_ALERT_RECEIVE_TYPE"
+          :value="type"
           class="mr-1"
-        >
-          {{ getReceiveTypeText(type) }}
-        </Tag>
+        />
       </template>
-
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -167,6 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['iot:alert-config:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -174,6 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:alert-config:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-antdv-next/src/views/iot/alert/modules/alert-config-form.vue b/apps/web-antdv-next/src/views/iot/alert/config/modules/form.vue
similarity index 85%
rename from apps/web-antdv-next/src/views/iot/alert/modules/alert-config-form.vue
rename to apps/web-antdv-next/src/views/iot/alert/config/modules/form.vue
index 61758c6be..3405d3ce2 100644
--- a/apps/web-antdv-next/src/views/iot/alert/modules/alert-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/alert/config/modules/form.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { AlertConfigApi } from '#/api/iot/alert/config';
 
 import { computed, ref } from 'vue';
@@ -15,9 +15,7 @@ import {
 } from '#/api/iot/alert/config';
 import { $t } from '#/locales';
 
-import { useFormSchema } from '../config/data';
-
-defineOptions({ name: 'IoTAlertConfigForm' });
+import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<AlertConfigApi.AlertConfig>();
@@ -32,8 +30,9 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 140,
   },
-  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -68,13 +67,6 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<AlertConfigApi.AlertConfig>();
     if (!data || !data.id) {
-      // 新增时设置默认值
-      await formApi.setValues({
-        status: 0,
-        sceneRuleIds: [],
-        receiveUserIds: [],
-        receiveTypes: [],
-      });
       return;
     }
     modalApi.lock();
diff --git a/apps/web-antdv-next/src/views/iot/alert/record/data.ts b/apps/web-antdv-next/src/views/iot/alert/record/data.ts
index 2c5ef9a84..2bc0af490 100644
--- a/apps/web-antdv-next/src/views/iot/alert/record/data.ts
+++ b/apps/web-antdv-next/src/views/iot/alert/record/data.ts
@@ -1,5 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AlertRecordApi } from '#/api/iot/alert/record';
+import type { IotDeviceApi } from '#/api/iot/device/device';
+import type { IotProductApi } from '#/api/iot/product/product';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -9,6 +12,12 @@ import { getSimpleDeviceList } from '#/api/iot/device/device';
 import { getSimpleProductList } from '#/api/iot/product/product';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let productList: IotProductApi.Product[] = [];
+let deviceList: IotDeviceApi.Device[] = [];
+getSimpleProductList().then((data) => (productList = data));
+getSimpleDeviceList().then((data) => (deviceList = data));
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -53,20 +62,34 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '设备',
       component: 'ApiSelect',
       componentProps: {
-        api: getSimpleDeviceList,
+        api: (params?: { productId?: number }) =>
+          getSimpleDeviceList(undefined, params?.productId),
         labelField: 'deviceName',
         valueField: 'id',
         placeholder: '请选择设备',
         allowClear: true,
         showSearch: true,
       },
+      dependencies: {
+        triggerFields: ['productId'],
+        componentProps: (values) => {
+          return {
+            params: { productId: values.productId },
+          };
+        },
+        trigger: (values, formApi) => {
+          if (values.deviceId !== undefined) {
+            void formApi.setFieldValue('deviceId', undefined);
+          }
+        },
+      },
     },
     {
       fieldName: 'processStatus',
       label: '是否处理',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING),
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
         placeholder: '请选择是否处理',
         allowClear: true,
       },
@@ -84,9 +107,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<AlertRecordApi.AlertRecord>['columns'] {
   return [
-    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '记录编号',
@@ -101,19 +123,24 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'configLevel',
       title: '告警级别',
       minWidth: 100,
-      slots: { default: 'configLevel' },
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_ALERT_LEVEL },
+      },
     },
     {
       field: 'productId',
       title: '产品名称',
       minWidth: 120,
-      slots: { default: 'product' },
+      formatter: ({ cellValue }) =>
+        productList.find((product) => product.id === cellValue)?.name || '-',
     },
     {
       field: 'deviceId',
       title: '设备名称',
       minWidth: 120,
-      slots: { default: 'device' },
+      formatter: ({ cellValue }) =>
+        deviceList.find((device) => device.id === cellValue)?.deviceName || '-',
     },
     {
       field: 'deviceMessage',
diff --git a/apps/web-antdv-next/src/views/iot/alert/record/index.vue b/apps/web-antdv-next/src/views/iot/alert/record/index.vue
index 2cabdbeb3..1df234f7b 100644
--- a/apps/web-antdv-next/src/views/iot/alert/record/index.vue
+++ b/apps/web-antdv-next/src/views/iot/alert/record/index.vue
@@ -1,110 +1,58 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { AlertRecord } from '#/api/iot/alert/record';
+import type { AlertRecordApi } from '#/api/iot/alert/record';
 
-import { h, onMounted, ref } from 'vue';
+import { h, ref } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-import { Button, message, Modal, Popover, Tag } from 'antdv-next';
+import { Button, Input, message, Modal, Popover } from 'antdv-next';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getAlertRecordPage, processAlertRecord } from '#/api/iot/alert/record';
-import { getSimpleDeviceList } from '#/api/iot/device/device';
-import { getSimpleProductList } from '#/api/iot/product/product';
 
 import { useGridColumns, useGridFormSchema } from './data';
 
-defineOptions({ name: 'IoTAlertRecord' });
-
-const productList = ref<any[]>([]);
-const deviceList = ref<any[]>([]);
+/** 把设备消息序列化成可读字符串 */
+function stringifyDeviceMessage(deviceMessage: any) {
+  if (!deviceMessage) {
+    return '';
+  }
+  return typeof deviceMessage === 'object'
+    ? JSON.stringify(deviceMessage, null, 2)
+    : String(deviceMessage);
+}
 
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
 }
 
-// 加载产品和设备列表
-async function loadData() {
-  productList.value = await getSimpleProductList();
-  deviceList.value = await getSimpleDeviceList();
-}
-
-// 获取告警级别文本
-function getLevelText(level?: number) {
-  const levelMap: Record<number, string> = {
-    1: '提示',
-    2: '一般',
-    3: '警告',
-    4: '严重',
-    5: '紧急',
-  };
-  return level ? levelMap[level] || `级别${level}` : '-';
-}
-
-// 获取告警级别颜色
-function getLevelColor(level?: number) {
-  const colorMap: Record<number, string> = {
-    1: 'blue',
-    2: 'green',
-    3: 'orange',
-    4: 'red',
-    5: 'purple',
-  };
-  return level ? colorMap[level] || 'default' : 'default';
-}
-
-// 获取产品名称
-function getProductName(productId?: number) {
-  if (!productId) return '-';
-  const product = productList.value.find((p: any) => p.id === productId);
-  return product?.name || '加载中...';
-}
-
-// 获取设备名称
-function getDeviceName(deviceId?: number) {
-  if (!deviceId) return '-';
-  const device = deviceList.value.find((d: any) => d.id === deviceId);
-  return device?.deviceName || '加载中...';
-}
-
-// 处理告警记录
-async function handleProcess(row: AlertRecord) {
+/** 处理告警记录 */
+function handleProcess(row: AlertRecordApi.AlertRecord) {
+  const processRemark = ref('');
   Modal.confirm({
     title: '处理告警记录',
-    content: h('div', [
-      h('p', '请输入处理原因：'),
-      h('textarea', {
-        id: 'processRemark',
-        class: 'ant-input',
-        rows: 3,
-        placeholder: '请输入处理原因',
-      }),
-    ]),
+    content: () =>
+      h('div', { class: 'space-y-2' }, [
+        h('p', '请输入处理原因：'),
+        h(Input.TextArea, {
+          value: processRemark.value,
+          'onUpdate:value': (val: string) => (processRemark.value = val),
+          rows: 3,
+          placeholder: '请输入处理原因',
+        }),
+      ]),
     async onOk() {
-      const textarea = document.querySelector(
-        '#processRemark',
-      ) as HTMLTextAreaElement;
-      const processRemark = textarea?.value || '';
-
-      if (!processRemark) {
-        message.warning('请输入处理原因');
-        throw new Error('请输入处理原因');
-      }
-
       const hideLoading = message.loading({
         content: '正在处理...',
         duration: 0,
       });
       try {
-        await processAlertRecord(row.id as number, processRemark);
+        await processAlertRecord(row.id!, processRemark.value);
         message.success('处理成功');
         handleRefresh();
-      } catch (error) {
-        console.error('处理失败:', error);
-        throw error;
       } finally {
         hideLoading();
       }
@@ -112,45 +60,6 @@ async function handleProcess(row: AlertRecord) {
   });
 }
 
-// 查看告警记录详情
-function handleView(row: AlertRecord) {
-  Modal.info({
-    title: '告警记录详情',
-    width: 600,
-    content: h('div', { class: 'space-y-2' }, [
-      h('div', [
-        h('span', { class: 'font-semibold' }, '告警名称：'),
-        h('span', row.configName || '-'),
-      ]),
-      h('div', [
-        h('span', { class: 'font-semibold' }, '告警级别：'),
-        h('span', getLevelText(row.configLevel)),
-      ]),
-      h('div', [
-        h('span', { class: 'font-semibold' }, '设备消息：'),
-        h(
-          'pre',
-          { class: 'mt-1 text-xs bg-gray-50 p-2 rounded' },
-          row.deviceMessage || '-',
-        ),
-      ]),
-      h('div', [
-        h('span', { class: 'font-semibold' }, '处理结果：'),
-        h('span', row.processRemark || '-'),
-      ]),
-      h('div', [
-        h('span', { class: 'font-semibold' }, '处理时间：'),
-        h(
-          'span',
-          row.processTime
-            ? new Date(row.processTime).toLocaleString('zh-CN')
-            : '-',
-        ),
-      ]),
-    ]),
-  });
-}
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -178,44 +87,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<AlertRecord>,
-});
-
-onMounted(() => {
-  loadData();
+  } as VxeTableGridOptions<AlertRecordApi.AlertRecord>,
 });
 </script>
 
 <template>
   <Page auto-content-height>
     <Grid table-title="告警记录列表">
-      <!-- 告警级别列 -->
-      <template #configLevel="{ row }">
-        <Tag :color="getLevelColor(row.configLevel)">
-          {{ getLevelText(row.configLevel) }}
-        </Tag>
-      </template>
-
-      <!-- 产品名称列 -->
-      <template #product="{ row }">
-        <span>{{ getProductName(row.productId) }}</span>
-      </template>
-
-      <!-- 设备名称列 -->
-      <template #device="{ row }">
-        <span>{{ getDeviceName(row.deviceId) }}</span>
-      </template>
-
-      <!-- 设备消息列 -->
       <template #deviceMessage="{ row }">
         <Popover
           v-if="row.deviceMessage"
           placement="topLeft"
           trigger="hover"
-          :styles="{ root: { maxWidth: '600px' } }"
+          :overlay-style="{ maxWidth: '600px' }"
         >
           <template #content>
-            <pre class="text-xs">{{ row.deviceMessage }}</pre>
+            <pre class="text-xs">{{
+              stringifyDeviceMessage(row.deviceMessage)
+            }}</pre>
           </template>
           <Button size="small" type="link">
             <IconifyIcon icon="ant-design:eye-outlined" class="mr-1" />
@@ -224,8 +113,6 @@ onMounted(() => {
         </Popover>
         <span v-else class="text-gray-400">-</span>
       </template>
-
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -233,16 +120,10 @@ onMounted(() => {
               label: '处理',
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['iot:alert-record:process'],
               onClick: handleProcess.bind(null, row),
               ifShow: !row.processStatus,
             },
-            {
-              label: '查看',
-              type: 'link',
-              icon: ACTION_ICON.VIEW,
-              onClick: handleView.bind(null, row),
-              ifShow: row.processStatus,
-            },
           ]"
         />
       </template>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/data.ts b/apps/web-antdv-next/src/views/iot/device/device/data.ts
index c53c0e207..ea7f0fc9b 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/data.ts
+++ b/apps/web-antdv-next/src/views/iot/device/device/data.ts
@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotDeviceApi } from '#/api/iot/device/device';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -78,10 +79,18 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
       },
       rules: z
         .string()
-        .min(4, '备注名称长度限制为 4~64 个字符')
-        .max(64, '备注名称长度限制为 4~64 个字符')
-        .regex(
-          /^[\u4E00-\u9FA5\u3040-\u30FF\w]+$/,
+        .refine(
+          (value) => {
+            const length = value.replaceAll(
+              /[\u4E00-\u9FA5\u3040-\u30FF]/g,
+              'aa',
+            ).length;
+            return length >= 4 && length <= 64;
+          },
+          '备注名称长度限制为 4~64 个字符，中文及日文算 2 个字符',
+        )
+        .refine(
+          (value) => /^[\u4E00-\u9FA5\u3040-\u30FF\w]+$/.test(value),
           '备注名称只能包含中文、英文字母、日文、数字和下划线（_）',
         )
         .optional()
@@ -122,8 +131,8 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
       label: '设备经度',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入设备经度',
-        class: 'w-full',
         min: -180,
         max: 180,
         precision: 6,
@@ -140,8 +149,8 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
       label: '设备纬度',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入设备纬度',
-        class: 'w-full',
         min: -90,
         max: 90,
         precision: 6,
@@ -268,13 +277,14 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<IotDeviceApi.Device>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
       field: 'deviceName',
       title: 'DeviceName',
       minWidth: 150,
+      slots: { default: 'deviceName' },
     },
     {
       field: 'nickname',
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/index.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/index.vue
index 824e2473e..81d042af7 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/index.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/index.vue
@@ -1,7 +1,7 @@
 <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';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -9,7 +9,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { Page } from '@vben/common-ui';
 import { DeviceTypeEnum } from '@vben/constants';
 
-import { message, TabPane, Tabs } from 'antdv-next';
+import { message, Tabs } from 'antdv-next';
 
 import { getDevice } from '#/api/iot/device/device';
 import { getProduct, ProtocolTypeEnum } from '#/api/iot/product/product';
@@ -24,8 +24,6 @@ import DeviceDetailsSimulator from './modules/simulator.vue';
 import DeviceDetailsSubDevice from './modules/sub-device.vue';
 import DeviceDetailsThingModel from './modules/thing-model.vue';
 
-defineOptions({ name: 'IoTDeviceDetail' });
-
 const route = useRoute();
 const router = useRouter();
 
@@ -34,7 +32,7 @@ const loading = ref(true);
 const product = ref<IotProductApi.Product>({} as IotProductApi.Product);
 const device = ref<IotDeviceApi.Device>({} as IotDeviceApi.Device);
 const activeTab = ref('info');
-const thingModelList = ref<ThingModelData[]>([]);
+const thingModelList = ref<ThingModelApi.ThingModel[]>([]);
 
 /** 获取设备详情 */
 async function getDeviceData(deviceId: number) {
@@ -97,52 +95,52 @@ onMounted(async () => {
     />
 
     <Tabs v-model:active-key="activeTab" class="mt-4">
-      <TabPane key="info" tab="设备信息">
+      <Tabs.TabPane key="info" tab="设备信息">
         <DeviceDetailsInfo
-          v-if="activeTab === 'info'"
+          v-if="activeTab === 'info' && device.id"
           :device="device"
           :product="product"
         />
-      </TabPane>
-      <TabPane key="model" tab="物模型数据">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="model" tab="物模型数据">
         <DeviceDetailsThingModel
           v-if="activeTab === 'model' && device.id"
           :device-id="device.id"
           :thing-model-list="thingModelList"
         />
-      </TabPane>
-      <TabPane
+      </Tabs.TabPane>
+      <Tabs.TabPane
         v-if="product.deviceType === DeviceTypeEnum.GATEWAY"
-        key="sub-device"
+        key="subDevice"
         tab="子设备管理"
       >
         <DeviceDetailsSubDevice
-          v-if="activeTab === 'sub-device' && device.id"
+          v-if="activeTab === 'subDevice' && device.id"
           :device-id="device.id"
         />
-      </TabPane>
-      <TabPane key="log" tab="设备消息">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="log" tab="设备消息">
         <DeviceDetailsMessage
           v-if="activeTab === 'log' && device.id"
           :device-id="device.id"
         />
-      </TabPane>
-      <TabPane key="simulator" tab="模拟设备">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="simulator" tab="模拟设备">
         <DeviceDetailsSimulator
-          v-if="activeTab === 'simulator'"
+          v-if="activeTab === 'simulator' && device.id"
           :device="device"
           :product="product"
           :thing-model-list="thingModelList"
         />
-      </TabPane>
-      <TabPane key="config" tab="设备配置">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="config" tab="设备配置">
         <DeviceDetailConfig
-          v-if="activeTab === 'config'"
+          v-if="activeTab === 'config' && device.id"
           :device="device"
           @success="() => getDeviceData(id)"
         />
-      </TabPane>
-      <TabPane
+      </Tabs.TabPane>
+      <Tabs.TabPane
         v-if="
           [
             ProtocolTypeEnum.MODBUS_TCP_CLIENT,
@@ -153,12 +151,12 @@ onMounted(async () => {
         tab="Modbus 配置"
       >
         <DeviceModbusConfig
-          v-if="activeTab === 'modbus'"
+          v-if="activeTab === 'modbus' && device.id"
           :device="device"
           :product="product"
           :thing-model-list="thingModelList"
         />
-      </TabPane>
+      </Tabs.TabPane>
     </Tabs>
   </Page>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/config.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/config.vue
index c35d7a5f1..813bbb152 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/config.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/config.vue
@@ -6,12 +6,10 @@ import { computed, ref, watchEffect } from 'vue';
 
 import { IotDeviceMessageMethodEnum } from '@vben/constants';
 
-import { Alert, Button, message, TextArea } from 'antdv-next';
+import { Alert, Button, message, Popconfirm, TextArea } from 'antdv-next';
 
 import { sendDeviceMessage, updateDevice } from '#/api/iot/device/device';
 
-defineOptions({ name: 'DeviceDetailConfig' });
-
 const props = defineProps<{
   device: IotDeviceApi.Device;
 }>();
@@ -78,7 +76,7 @@ async function saveConfig() {
     config.value = JSON.parse(configString.value);
   } catch (error) {
     console.error('JSON格式错误:', error);
-    message.error({ content: 'JSON格式错误，请修正后再提交！' });
+    message.error('JSON格式错误，请修正后再提交！');
     return;
   }
   saveLoading.value = true;
@@ -101,7 +99,7 @@ async function handleConfigPush() {
       params: config.value,
     });
     // 提示成功
-    message.success({ content: '配置推送成功！' });
+    message.success('配置推送成功！');
   } finally {
     pushLoading.value = false;
   }
@@ -116,7 +114,7 @@ async function updateDeviceConfig() {
       id: props.device.id,
       config: JSON.stringify(config.value),
     } as IotDeviceApi.Device);
-    message.success({ content: '更新成功！' });
+    message.success('更新成功！');
     // 触发 success 事件
     emit('success');
   } finally {
@@ -129,7 +127,7 @@ async function updateDeviceConfig() {
   <div>
     <!-- 使用说明提示 -->
     <Alert
-      class="my-4"
+      class="!mb-4"
       description="如需编辑文件，请点击下方编辑按钮"
       message="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「配置推送」按钮，设备即可进行远程配置。"
       show-icon
@@ -137,21 +135,22 @@ async function updateDeviceConfig() {
     />
 
     <!-- 代码视图 - 只读展示 -->
-    <div v-if="!isEditing" class="json-viewer-container">
-      <pre class="json-code"><code>{{ formattedConfig }}</code></pre>
-    </div>
+    <pre
+      v-if="!isEditing"
+      class="m-0 h-[460px] overflow-y-auto whitespace-pre-wrap break-words rounded border border-[#d9d9d9] bg-[#f5f5f5] p-3 font-mono text-[13px] leading-normal text-[#333] dark:border-[#3a3a3a] dark:bg-[#1a1a1a] dark:text-gray-300"
+      v-text="formattedConfig"
+    ></pre>
 
     <!-- 编辑器视图 - 可编辑 -->
     <TextArea
       v-else
       v-model:value="configString"
-      :rows="20"
-      class="json-editor"
+      class="!h-[460px] font-mono text-[13px]"
       placeholder="请输入 JSON 格式的配置信息"
     />
 
     <!-- 操作按钮 -->
-    <div class="mt-5 text-center">
+    <div class="mt-4 flex justify-center gap-2">
       <Button v-if="isEditing" @click="handleCancelEdit">取消</Button>
       <Button
         v-if="isEditing"
@@ -162,40 +161,13 @@ async function updateDeviceConfig() {
         保存
       </Button>
       <Button v-else @click="handleEdit">编辑</Button>
-      <Button
+      <Popconfirm
         v-if="!isEditing"
-        :loading="pushLoading"
-        type="primary"
-        @click="handleConfigPush"
+        title="确定要推送配置到设备吗？此操作将远程更新设备配置。"
+        @confirm="handleConfigPush"
       >
-        配置推送
-      </Button>
+        <Button :loading="pushLoading" type="primary"> 配置推送 </Button>
+      </Popconfirm>
     </div>
   </div>
 </template>
-
-<style scoped>
-.json-viewer-container {
-  max-height: 600px;
-  padding: 12px;
-  overflow-y: auto;
-  background-color: #f5f5f5;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.json-code {
-  margin: 0;
-  font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  color: #333;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.json-editor {
-  font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, monospace;
-  font-size: 13px;
-}
-</style>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/header.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/header.vue
index fe95df4d3..dd809afca 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/header.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/header.vue
@@ -62,7 +62,7 @@ function openEditForm(row: IotDeviceApi.Device) {
       <div>
         <h2 class="text-xl font-bold">{{ device.deviceName }}</h2>
       </div>
-      <div class="space-x-2">
+      <div class="flex gap-2">
         <Button
           v-if="product.status === 0"
           v-access:code="['iot:device:update']"
@@ -75,15 +75,15 @@ function openEditForm(row: IotDeviceApi.Device) {
 
     <Card class="mt-4">
       <Descriptions :column="2">
-        <DescriptionsItem label="产品">
+        <Descriptions.Item label="产品">
           <a
             class="cursor-pointer text-blue-600"
             @click="goToProductDetail(product.id)"
           >
             {{ product.name }}
           </a>
-        </DescriptionsItem>
-        <DescriptionsItem label="ProductKey">
+        </Descriptions.Item>
+        <Descriptions.Item label="ProductKey">
           {{ product.productKey }}
           <Button
             class="ml-2"
@@ -92,7 +92,7 @@ function openEditForm(row: IotDeviceApi.Device) {
           >
             复制
           </Button>
-        </DescriptionsItem>
+        </Descriptions.Item>
       </Descriptions>
     </Card>
   </div>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/info.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/info.vue
index 74fb0b396..6378814e8 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/info.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/info.vue
@@ -36,9 +36,9 @@ const authInfo = ref<IotDeviceApi.DeviceAuthInfoRespVO>(
 );
 const mapDialogRef = ref<InstanceType<typeof MapDialog>>();
 
-/** 是否有位置信息 */
+/** 是否有位置信息（合法经纬度 0 不应视为空） */
 const hasLocation = computed(() => {
-  return !!(props.device.longitude && props.device.latitude);
+  return props.device.longitude != null && props.device.latitude != null;
 });
 
 /** 打开地图弹窗 */
@@ -77,40 +77,40 @@ function handleAuthInfoDialogClose() {
   <div>
     <Card title="设备信息">
       <Descriptions :column="3" bordered size="small">
-        <DescriptionsItem label="产品名称">
+        <Descriptions.Item label="产品名称">
           {{ product.name }}
-        </DescriptionsItem>
-        <DescriptionsItem label="ProductKey">
+        </Descriptions.Item>
+        <Descriptions.Item label="ProductKey">
           {{ product.productKey }}
-        </DescriptionsItem>
-        <DescriptionsItem label="设备类型">
+        </Descriptions.Item>
+        <Descriptions.Item label="设备类型">
           <DictTag
             :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
             :value="product.deviceType"
           />
-        </DescriptionsItem>
-        <DescriptionsItem label="DeviceName">
+        </Descriptions.Item>
+        <Descriptions.Item label="DeviceName">
           {{ device.deviceName }}
-        </DescriptionsItem>
-        <DescriptionsItem label="备注名称">
+        </Descriptions.Item>
+        <Descriptions.Item label="备注名称">
           {{ device.nickname || '--' }}
-        </DescriptionsItem>
-        <DescriptionsItem label="当前状态">
+        </Descriptions.Item>
+        <Descriptions.Item label="当前状态">
           <DictTag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
-        </DescriptionsItem>
-        <DescriptionsItem label="创建时间">
+        </Descriptions.Item>
+        <Descriptions.Item label="创建时间">
           {{ formatDateTime(device.createTime) }}
-        </DescriptionsItem>
-        <DescriptionsItem label="激活时间">
+        </Descriptions.Item>
+        <Descriptions.Item label="激活时间">
           {{ formatDateTime(device.activeTime) }}
-        </DescriptionsItem>
-        <DescriptionsItem label="最后上线时间">
+        </Descriptions.Item>
+        <Descriptions.Item label="最后上线时间">
           {{ formatDateTime(device.onlineTime) }}
-        </DescriptionsItem>
-        <DescriptionsItem label="最后离线时间">
+        </Descriptions.Item>
+        <Descriptions.Item label="最后离线时间">
           {{ formatDateTime(device.offlineTime) }}
-        </DescriptionsItem>
-        <DescriptionsItem label="设备位置">
+        </Descriptions.Item>
+        <Descriptions.Item label="设备位置">
           <template v-if="hasLocation">
             <span class="mr-2">
               {{ device.longitude }}, {{ device.latitude }}
@@ -121,12 +121,12 @@ function handleAuthInfoDialogClose() {
             </Button>
           </template>
           <span v-else class="text-gray-400">暂无位置信息</span>
-        </DescriptionsItem>
-        <DescriptionsItem label="MQTT 连接参数">
+        </Descriptions.Item>
+        <Descriptions.Item label="MQTT 连接参数">
           <Button size="small" type="link" @click="handleAuthInfoDialogOpen">
             查看
           </Button>
-        </DescriptionsItem>
+        </Descriptions.Item>
       </Descriptions>
     </Card>
 
@@ -138,7 +138,7 @@ function handleAuthInfoDialogClose() {
       width="640px"
     >
       <Form :label-col="{ span: 6 }">
-        <FormItem label="clientId">
+        <Form.Item label="clientId">
           <Input.Group compact>
             <Input
               v-model:value="authInfo.clientId"
@@ -149,8 +149,8 @@ function handleAuthInfoDialogClose() {
               <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
-        </FormItem>
-        <FormItem label="username">
+        </Form.Item>
+        <Form.Item label="username">
           <Input.Group compact>
             <Input
               v-model:value="authInfo.username"
@@ -161,8 +161,8 @@ function handleAuthInfoDialogClose() {
               <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
-        </FormItem>
-        <FormItem label="password">
+        </Form.Item>
+        <Form.Item label="password">
           <Input.Group compact>
             <Input
               v-model:value="authInfo.password"
@@ -182,7 +182,7 @@ function handleAuthInfoDialogClose() {
               <IconifyIcon icon="lucide:copy" />
             </Button>
           </Input.Group>
-        </FormItem>
+        </Form.Item>
       </Form>
       <div class="mt-4 text-right">
         <Button @click="handleAuthInfoDialogClose">关闭</Button>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/message.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/message.vue
index a20e93d09..aee71e18f 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/message.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/message.vue
@@ -24,16 +24,14 @@ const props = defineProps<{
   deviceId: number;
 }>();
 
-/** 查询参数 */
 const queryParams = reactive({
   method: undefined,
   upstream: undefined,
-});
+}); // 查询参数
 
-/** 自动刷新开关 */
-const autoRefresh = ref(false);
-/** 自动刷新定时器 */
-let autoRefreshTimer: any = null;
+const autoRefresh = ref(false); // 自动刷新开关
+let autoRefreshTimer: any = null; // 自动刷新定时器
+let refreshTimer: ReturnType<typeof setTimeout> | undefined; // 延迟刷新定时器
 
 /** 消息方法选项 */
 const methodOptions = computed(() => {
@@ -44,7 +42,7 @@ const methodOptions = computed(() => {
 });
 
 /** Grid 列定义 */
-function useGridColumns(): VxeTableGridOptions['columns'] {
+function useGridColumns(): VxeTableGridOptions<Record<string, any>>['columns'] {
   return [
     {
       field: 'ts',
@@ -153,6 +151,10 @@ onBeforeUnmount(() => {
     clearInterval(autoRefreshTimer);
     autoRefreshTimer = null;
   }
+  if (refreshTimer) {
+    clearTimeout(refreshTimer);
+    refreshTimer = undefined;
+  }
 });
 
 /** 初始化 */
@@ -164,9 +166,14 @@ onMounted(() => {
 
 /** 刷新消息列表 */
 function refresh(delay = 0) {
+  if (refreshTimer) {
+    clearTimeout(refreshTimer);
+    refreshTimer = undefined;
+  }
   if (delay > 0) {
-    setTimeout(() => {
+    refreshTimer = setTimeout(() => {
       gridApi.query();
+      refreshTimer = undefined;
     }, delay);
   } else {
     gridApi.query();
@@ -189,14 +196,14 @@ defineExpose({
         placeholder="所有方法"
         style="width: 160px"
       >
-        <SelectOption
+        <Select.Option
           v-for="item in methodOptions"
           :key="item.value"
           :label="item.label"
           :value="item.value"
         >
           {{ item.label }}
-        </SelectOption>
+        </Select.Option>
       </Select>
       <Select
         v-model:value="queryParams.upstream"
@@ -204,12 +211,12 @@ defineExpose({
         placeholder="上行/下行"
         style="width: 160px"
       >
-        <SelectOption label="上行" value="true">上行</SelectOption>
-        <SelectOption label="下行" value="false">下行</SelectOption>
+        <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" /> 搜索
+          <IconifyIcon icon="ep:search" class="mr-[5px]" /> 搜索
         </Button>
         <Switch
           v-model:checked="autoRefresh"
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-config-form.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-config-form.vue
index e5b32f61d..0af67389d 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-config-form.vue
@@ -20,8 +20,6 @@ import { saveModbusConfig } from '#/api/iot/device/modbus/config';
 import { ProtocolTypeEnum } from '#/api/iot/product/product';
 import { $t } from '#/locales';
 
-defineOptions({ name: 'DeviceModbusConfigForm' });
-
 const emit = defineEmits(['success']);
 
 const formData = ref<IotDeviceModbusConfigApi.ModbusConfig>();
@@ -60,26 +58,32 @@ const [Form, formApi] = useVbenForm({
       componentProps: {
         placeholder: '请输入 Modbus 服务器 IP 地址',
       },
+      // Client 模式专有字段：必填；Server 模式不显示也不校验
       dependencies: {
         triggerFields: [''],
-        show: () => isClient.value, // Client 模式专有字段：IP 地址
+        show: () => isClient.value,
+        rules: () =>
+          isClient.value ? z.string().min(1, '请输入 IP 地址') : null,
       },
-      rules: z.string().min(1, '请输入 IP 地址').optional(),
     },
     {
       fieldName: 'port',
       label: '端口',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入端口',
         min: 1,
         max: 65_535,
       },
       dependencies: {
         triggerFields: [''],
-        show: () => isClient.value, // Client 模式专有字段：端口
+        show: () => isClient.value,
+        rules: () =>
+          isClient.value
+            ? z.number({ message: '请输入端口' }).min(1).max(65_535)
+            : null,
       },
-      rules: z.number().min(1).max(65_535).optional(),
       defaultValue: 502,
     },
     {
@@ -87,6 +91,7 @@ const [Form, formApi] = useVbenForm({
       label: '从站地址',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入从站地址，范围 1-247',
         min: 1,
         max: 247,
@@ -99,15 +104,19 @@ const [Form, formApi] = useVbenForm({
       label: '连接超时(ms)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入连接超时时间',
         min: 1000,
         step: 1000,
       },
       dependencies: {
         triggerFields: [''],
-        show: () => isClient.value, // Client 模式专有字段：连接超时
+        show: () => isClient.value,
+        rules: () =>
+          isClient.value
+            ? z.number({ message: '请输入连接超时时间' }).min(1000)
+            : null,
       },
-      rules: z.number().min(1000).optional(),
       defaultValue: 3000,
     },
     {
@@ -115,15 +124,19 @@ const [Form, formApi] = useVbenForm({
       label: '重试间隔(ms)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入重试间隔',
         min: 1000,
         step: 1000,
       },
       dependencies: {
         triggerFields: [''],
-        show: () => isClient.value, // Client 模式专有字段：重试间隔
+        show: () => isClient.value,
+        rules: () =>
+          isClient.value
+            ? z.number({ message: '请输入重试间隔' }).min(1000)
+            : null,
       },
-      rules: z.number().min(1000).optional(),
       defaultValue: 10_000,
     },
     {
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-config.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-config.vue
index 34436a381..e0db18595 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-config.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-config.vue
@@ -6,7 +6,7 @@ import type { IotDeviceApi } from '#/api/iot/device/device';
 import type { IotDeviceModbusConfigApi } from '#/api/iot/device/modbus/config';
 import type { IotDeviceModbusPointApi } from '#/api/iot/device/modbus/point';
 import type { IotProductApi } from '#/api/iot/product/product';
-import type { ThingModelData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { computed, h, onMounted, ref } from 'vue';
@@ -14,7 +14,7 @@ import { computed, h, onMounted, ref } from 'vue';
 import { confirm, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE, ModbusFunctionCodeOptions } from '@vben/constants';
 
-import { Button, message } from 'antdv-next';
+import { message } from 'antdv-next';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getModbusConfig } from '#/api/iot/device/modbus/config';
@@ -29,12 +29,10 @@ import { DictTag } from '#/components/dict-tag';
 import DeviceModbusConfigForm from './modbus-config-form.vue';
 import DeviceModbusPointForm from './modbus-point-form.vue';
 
-defineOptions({ name: 'DeviceModbusConfig' });
-
 const props = defineProps<{
   device: IotDeviceApi.Device;
   product: IotProductApi.Product;
-  thingModelList: ThingModelData[];
+  thingModelList: ThingModelApi.ThingModel[];
 }>();
 
 // ======================= 连接配置 =======================
@@ -173,7 +171,7 @@ function usePointFormSchema(): VbenFormSchema[] {
 }
 
 /** 点位列表列配置 */
-function usePointColumns(): VxeTableGridOptions['columns'] {
+function usePointColumns(): VxeTableGridOptions<IotDeviceModbusPointApi.ModbusPoint>['columns'] {
   return [
     { field: 'name', title: '属性名称', minWidth: 100 },
     {
@@ -287,7 +285,7 @@ function handleEditPoint(row: IotDeviceModbusPointApi.ModbusPoint) {
 
 /** 删除点位 */
 async function handleDeletePoint(row: IotDeviceModbusPointApi.ModbusPoint) {
-  await confirm({ content: `确定要删除点位【${row.name}】吗？` });
+  await confirm(`确定要删除点位【${row.name}】吗？`);
   await deleteModbusPoint(row.id!);
   message.success('删除成功');
   await gridApi.query();
@@ -309,7 +307,16 @@ onMounted(async () => {
     <!-- 连接配置区域 -->
     <ConfigDescriptions :data="modbusConfig" class="mb-4">
       <template #extra>
-        <Button type="primary" @click="handleEditConfig">编辑</Button>
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'primary',
+              auth: ['iot:device:create'],
+              onClick: handleEditConfig,
+            },
+          ]"
+        />
       </template>
     </ConfigDescriptions>
 
@@ -322,6 +329,7 @@ onMounted(async () => {
               label: '新增点位',
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['iot:device:create'],
               onClick: handleAddPoint,
             },
           ]"
@@ -333,12 +341,14 @@ onMounted(async () => {
             {
               label: '编辑',
               type: 'link',
+              auth: ['iot:device:update'],
               onClick: () => handleEditPoint(row),
             },
             {
               label: '删除',
               type: 'link',
               danger: true,
+              auth: ['iot:device:delete'],
               popConfirm: {
                 title: `确定要删除点位【${row.name}】吗？`,
                 confirm: () => handleDeletePoint(row),
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-point-form.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-point-form.vue
index fc996aa6a..944904ac2 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-point-form.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/modbus-point-form.vue
@@ -2,7 +2,7 @@
 <script lang="ts" setup>
 import type { VbenFormSchema } from '#/adapter/form';
 import type { IotDeviceModbusPointApi } from '#/api/iot/device/modbus/point';
-import type { ThingModelData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { computed, h, ref } from 'vue';
 
@@ -27,8 +27,6 @@ import {
 } from '#/api/iot/device/modbus/point';
 import { $t } from '#/locales';
 
-defineOptions({ name: 'DeviceModbusPointForm' });
-
 const emit = defineEmits(['success']);
 
 const formData = ref<IotDeviceModbusPointApi.ModbusPoint>();
@@ -36,7 +34,7 @@ const getTitle = computed(() => {
   return formData.value?.id ? '编辑点位' : '新增点位';
 });
 const deviceId = ref<number>(0);
-const thingModelList = ref<ThingModelData[]>([]);
+const thingModelList = ref<ThingModelApi.ThingModel[]>([]);
 
 /** 筛选属性类型的物模型 */
 const propertyList = computed(() => {
@@ -112,6 +110,7 @@ function useFormSchema(): VbenFormSchema[] {
       label: '寄存器地址',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入寄存器地址',
         min: 0,
         max: 65_535,
@@ -134,6 +133,7 @@ function useFormSchema(): VbenFormSchema[] {
       label: '寄存器数量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入寄存器数量',
         min: 1,
         max: 125,
@@ -178,6 +178,7 @@ function useFormSchema(): VbenFormSchema[] {
       label: '缩放因子',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入缩放因子',
         precision: 6,
         step: 0.1,
@@ -189,6 +190,7 @@ function useFormSchema(): VbenFormSchema[] {
       label: '轮询间隔(ms)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入轮询间隔',
         min: 100,
         step: 1000,
@@ -221,10 +223,10 @@ const [Form, formApi] = useVbenForm({
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
-  handleValuesChange: async (_values, changedFields) => {
+  handleValuesChange: async (values, changedFields) => {
     // 物模型属性变化：自动填充 identifier 和 name
     if (changedFields.includes('thingModelId')) {
-      const thingModelId = await formApi.getFieldValue('thingModelId');
+      const thingModelId = values.thingModelId;
       const thingModel = thingModelList.value.find(
         (item) => item.id === thingModelId,
       );
@@ -235,7 +237,7 @@ const [Form, formApi] = useVbenForm({
     }
     // 数据类型变化：自动设置寄存器数量和字节序
     if (changedFields.includes('rawDataType')) {
-      const rawDataType = await formApi.getFieldValue('rawDataType');
+      const rawDataType = values.rawDataType;
       if (rawDataType) {
         // 根据数据类型自动设置寄存器数量
         const option = ModbusRawDataTypeOptions.find(
@@ -244,10 +246,20 @@ const [Form, formApi] = useVbenForm({
         if (option && option.registerCount > 0) {
           await formApi.setFieldValue('registerCount', option.registerCount);
         }
-        // 重置字节序为第一个选项
+        // 字节序：仅在当前值为空或不属于新 rawDataType 时才重置为第一个选项；
+        // 编辑回填时 setValues 会触发本回调，无条件重置会覆盖已保存字节序
         const byteOrderOptions = getByteOrderOptions(rawDataType);
         if (byteOrderOptions.length > 0) {
-          await formApi.setFieldValue('byteOrder', byteOrderOptions[0]!.value);
+          const currentByteOrder = values.byteOrder;
+          const isCurrentValid =
+            !!currentByteOrder &&
+            byteOrderOptions.some((opt) => opt.value === currentByteOrder);
+          if (!isCurrentValid) {
+            await formApi.setFieldValue(
+              'byteOrder',
+              byteOrderOptions[0]!.value,
+            );
+          }
         }
       }
     }
@@ -286,7 +298,7 @@ const [Modal, modalApi] = useVbenModal({
     const data = modalApi.getData<{
       deviceId: number;
       id?: number;
-      thingModelList: ThingModelData[];
+      thingModelList: ThingModelApi.ThingModel[];
     }>();
     if (!data) {
       return;
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/simulator.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/simulator.vue
index 8a757bd88..229850471 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/simulator.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/simulator.vue
@@ -4,15 +4,16 @@ import type { TableColumnType } from 'antdv-next';
 
 import type { IotDeviceApi } from '#/api/iot/device/device';
 import type { IotProductApi } from '#/api/iot/product/product';
-import type { ThingModelData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import { ContentWrap } from '@vben/common-ui';
 import {
   DeviceStateEnum,
-  IoTThingModelTypeEnum,
+  IoTDataSpecsDataTypeEnum,
   IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
 } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
@@ -21,8 +22,10 @@ import {
   Card,
   Col,
   Input,
+  InputNumber,
   message,
   Row,
+  Select,
   Table,
   Tabs,
   TextArea,
@@ -36,7 +39,7 @@ import DeviceDetailsMessage from './message.vue';
 const props = defineProps<{
   device: IotDeviceApi.Device;
   product: IotProductApi.Product;
-  thingModelList: ThingModelData[];
+  thingModelList: ThingModelApi.ThingModel[];
 }>();
 
 // 消息弹窗
@@ -51,7 +54,7 @@ const debugCollapsed = ref(false); // 指令调试区域折叠状态
 const messageCollapsed = ref(false); // 设备消息区域折叠状态
 
 // 表单数据：存储用户输入的模拟值
-const formData = ref<Record<string, string>>({});
+const formData = ref<Record<string, any>>({});
 
 // 根据类型过滤物模型数据
 const getFilteredThingModelList = (type: number) => {
@@ -184,27 +187,107 @@ const serviceColumns = [
 
 // 获取表单值
 function getFormValue(identifier: string) {
-  return formData.value[identifier] || '';
+  return formData.value[identifier] ?? '';
 }
 
 // 设置表单值
-function setFormValue(identifier: string, value: string) {
+function setFormValue(identifier: string, value: any) {
   formData.value[identifier] = value;
 }
 
+/** 获取属性数据类型 */
+function getPropertyDataType(row: ThingModelApi.ThingModel) {
+  return row.property?.dataType;
+}
+
+/** 判断属性是否为数值类型 */
+function isNumberProperty(row: ThingModelApi.ThingModel) {
+  return [
+    IoTDataSpecsDataTypeEnum.DOUBLE,
+    IoTDataSpecsDataTypeEnum.FLOAT,
+    IoTDataSpecsDataTypeEnum.INT,
+  ].includes(getPropertyDataType(row) as any);
+}
+
+/** 判断属性是否使用下拉选项 */
+function isSelectProperty(row: ThingModelApi.ThingModel) {
+  return [
+    IoTDataSpecsDataTypeEnum.BOOL,
+    IoTDataSpecsDataTypeEnum.ENUM,
+  ].includes(getPropertyDataType(row) as any);
+}
+
+/** 获取属性选项 */
+function getPropertyOptions(row: ThingModelApi.ThingModel) {
+  const list = row.property?.dataSpecsList || [];
+  if (list.length > 0) {
+    return list.map((item: any) => ({
+      label: item.name || item.label || String(item.value),
+      value: String(item.value),
+    }));
+  }
+  if (getPropertyDataType(row) === IoTDataSpecsDataTypeEnum.BOOL) {
+    return [
+      { label: '真 (true)', value: 'true' },
+      { label: '假 (false)', value: 'false' },
+    ];
+  }
+  return [];
+}
+
+/** 获取物模型选项原始值 */
+function getMatchedPropertyOption(row: ThingModelApi.ThingModel, value: any) {
+  return row.property?.dataSpecsList?.find(
+    (item: any) => String(item.value) === String(value),
+  );
+}
+
+/** 按物模型数据类型转换属性值 */
+function normalizePropertyValue(row: ThingModelApi.ThingModel, value: any) {
+  if (value === undefined || value === null || value === '') {
+    return undefined;
+  }
+  const dataType = getPropertyDataType(row);
+  if (isNumberProperty(row)) {
+    return Number(value);
+  }
+  if (
+    [IoTDataSpecsDataTypeEnum.BOOL, IoTDataSpecsDataTypeEnum.ENUM].includes(
+      dataType as any,
+    )
+  ) {
+    const option = getMatchedPropertyOption(row, value);
+    if (option) {
+      return option.value;
+    }
+  }
+  if (dataType === IoTDataSpecsDataTypeEnum.BOOL) {
+    if (String(value) === 'true') {
+      return true;
+    }
+    if (String(value) === 'false') {
+      return false;
+    }
+  }
+  return value;
+}
+
 // 属性上报
 async function handlePropertyPost() {
   try {
     const params: Record<string, any> = {};
     propertyList.value.forEach((item) => {
-      const value = formData.value[item.identifier!];
-      if (value) {
+      const value = normalizePropertyValue(
+        item,
+        formData.value[item.identifier!],
+      );
+      if (value !== undefined) {
         params[item.identifier!] = value;
       }
     });
 
     if (Object.keys(params).length === 0) {
-      message.warning({ content: '请至少输入一个属性值' });
+      message.warning('请至少输入一个属性值');
       return;
     }
 
@@ -214,44 +297,48 @@ async function handlePropertyPost() {
       params,
     });
 
-    message.success({ content: '属性上报成功' });
+    message.success('属性上报成功');
     // 延迟刷新设备消息列表
     deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
   } catch (error) {
-    message.error({ content: '属性上报失败' });
+    message.error('属性上报失败');
     console.error(error);
   }
 }
 
 // 事件上报
-async function handleEventPost(row: ThingModelData) {
+async function handleEventPost(row: ThingModelApi.ThingModel) {
   try {
     const valueStr = formData.value[row.identifier!];
-    let params: any = {};
+    let eventValue: any;
 
-    if (valueStr) {
-      try {
-        params = JSON.parse(valueStr);
-      } catch {
-        message.error({ content: '事件参数格式错误，请输入有效的JSON格式' });
-        return;
-      }
+    if (valueStr === undefined || valueStr === null || valueStr === '') {
+      message.warning('请输入事件参数');
+      return;
+    }
+    try {
+      eventValue = JSON.parse(valueStr);
+    } catch {
+      message.error('事件参数格式错误，请输入有效的JSON格式');
+      return;
     }
 
+    // 与后端 IotDeviceEventPostReqDTO 对齐 ：{ identifier, value, time }
     await sendDeviceMessage({
       deviceId: props.device.id!,
       method: IotDeviceMessageMethodEnum.EVENT_POST.method,
       params: {
         identifier: row.identifier,
-        params,
+        value: eventValue,
+        time: Date.now(),
       },
     });
 
-    message.success({ content: '事件上报成功' });
+    message.success('事件上报成功');
     // 延迟刷新设备消息列表
     deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
   } catch (error) {
-    message.error({ content: '事件上报失败' });
+    message.error('事件上报失败');
     console.error(error);
   }
 }
@@ -265,11 +352,11 @@ async function handleDeviceState(state: number) {
       params: { state },
     });
 
-    message.success({ content: '状态变更成功' });
+    message.success('状态变更成功');
     // 延迟刷新设备消息列表
     deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
   } catch (error) {
-    message.error({ content: '状态变更失败' });
+    message.error('状态变更失败');
     console.error(error);
   }
 }
@@ -279,14 +366,17 @@ async function handlePropertySet() {
   try {
     const params: Record<string, any> = {};
     propertyList.value.forEach((item) => {
-      const value = formData.value[item.identifier!];
-      if (value) {
+      const value = normalizePropertyValue(
+        item,
+        formData.value[item.identifier!],
+      );
+      if (value !== undefined) {
         params[item.identifier!] = value;
       }
     });
 
     if (Object.keys(params).length === 0) {
-      message.warning({ content: '请至少输入一个属性值' });
+      message.warning('请至少输入一个属性值');
       return;
     }
 
@@ -296,47 +386,63 @@ async function handlePropertySet() {
       params,
     });
 
-    message.success({ content: '属性设置成功' });
+    message.success('属性设置成功');
     // 延迟刷新设备消息列表
     deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
   } catch (error) {
-    message.error({ content: '属性设置失败' });
+    message.error('属性设置失败');
     console.error(error);
   }
 }
 
 // 服务调用
-async function handleServiceInvoke(row: ThingModelData) {
+async function handleServiceInvoke(row: ThingModelApi.ThingModel) {
   try {
     const valueStr = formData.value[row.identifier!];
-    let params: any = {};
+    let inputParams: any = {};
 
-    if (valueStr) {
-      try {
-        params = JSON.parse(valueStr);
-      } catch {
-        message.error({ content: '服务参数格式错误，请输入有效的JSON格式' });
-        return;
-      }
+    if (valueStr === undefined || valueStr === null || valueStr === '') {
+      message.warning('请输入服务参数');
+      return;
+    }
+    try {
+      inputParams = JSON.parse(valueStr);
+    } catch {
+      message.error('服务参数格式错误，请输入有效的JSON格式');
+      return;
+    }
+    if (
+      typeof inputParams !== 'object' ||
+      inputParams === null ||
+      Array.isArray(inputParams)
+    ) {
+      message.error('服务参数必须是 JSON 对象');
+      return;
     }
 
+    // 与后端 IotDeviceServiceInvokeReqDTO 对齐 ：{ identifier, inputParams }
     await sendDeviceMessage({
       deviceId: props.device.id!,
       method: IotDeviceMessageMethodEnum.SERVICE_INVOKE.method,
       params: {
         identifier: row.identifier,
-        params,
+        inputParams,
       },
     });
 
-    message.success({ content: '服务调用成功' });
+    message.success('服务调用成功');
     // 延迟刷新设备消息列表
     deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
   } catch (error) {
-    message.error({ content: '服务调用失败' });
+    message.error('服务调用失败');
     console.error(error);
   }
 }
+
+/** 切换调试方法时清空输入，避免不同方法之间串台提交 */
+watch([activeTab, upstreamTab, downstreamTab], () => {
+  formData.value = {};
+});
 </script>
 
 <template>
@@ -361,14 +467,14 @@ async function handleServiceInvoke(row: ThingModelData) {
           <div v-show="!debugCollapsed">
             <Tabs v-model:active-key="activeTab" size="small">
               <!-- 上行指令调试 -->
-              <TabPane key="upstream" tab="上行指令调试">
+              <Tabs.TabPane key="upstream" tab="上行指令调试">
                 <Tabs
                   v-if="activeTab === 'upstream'"
                   v-model:active-key="upstreamTab"
                   size="small"
                 >
                   <!-- 属性上报 -->
-                  <TabPane
+                  <Tabs.TabPane
                     :key="IotDeviceMessageMethodEnum.PROPERTY_POST.method"
                     tab="属性上报"
                   >
@@ -389,7 +495,29 @@ async function handleServiceInvoke(row: ThingModelData) {
                             <DataDefinition :data="record" />
                           </template>
                           <template v-else-if="column.key === 'value'">
+                            <InputNumber
+                              v-if="isNumberProperty(record)"
+                              :value="getFormValue(record.identifier)"
+                              placeholder="输入值"
+                              size="small"
+                              class="w-full"
+                              @update:value="
+                                setFormValue(record.identifier, $event)
+                              "
+                            />
+                            <Select
+                              v-else-if="isSelectProperty(record)"
+                              :value="getFormValue(record.identifier)"
+                              :options="getPropertyOptions(record)"
+                              placeholder="请选择值"
+                              size="small"
+                              class="w-full"
+                              @update:value="
+                                setFormValue(record.identifier, $event)
+                              "
+                            />
                             <Input
+                              v-else
                               :value="getFormValue(record.identifier)"
                               placeholder="输入值"
                               size="small"
@@ -409,10 +537,10 @@ async function handleServiceInvoke(row: ThingModelData) {
                         </Button>
                       </div>
                     </ContentWrap>
-                  </TabPane>
+                  </Tabs.TabPane>
 
                   <!-- 事件上报 -->
-                  <TabPane
+                  <Tabs.TabPane
                     :key="IotDeviceMessageMethodEnum.EVENT_POST.method"
                     tab="事件上报"
                   >
@@ -455,10 +583,10 @@ async function handleServiceInvoke(row: ThingModelData) {
                         </template>
                       </Table>
                     </ContentWrap>
-                  </TabPane>
+                  </Tabs.TabPane>
 
                   <!-- 状态变更 -->
-                  <TabPane
+                  <Tabs.TabPane
                     :key="IotDeviceMessageMethodEnum.STATE_UPDATE.method"
                     tab="状态变更"
                   >
@@ -478,19 +606,19 @@ async function handleServiceInvoke(row: ThingModelData) {
                         </Button>
                       </div>
                     </ContentWrap>
-                  </TabPane>
+                  </Tabs.TabPane>
                 </Tabs>
-              </TabPane>
+              </Tabs.TabPane>
 
               <!-- 下行指令调试 -->
-              <TabPane key="downstream" tab="下行指令调试">
+              <Tabs.TabPane key="downstream" tab="下行指令调试">
                 <Tabs
                   v-if="activeTab === 'downstream'"
                   v-model:active-key="downstreamTab"
                   size="small"
                 >
                   <!-- 属性调试 -->
-                  <TabPane
+                  <Tabs.TabPane
                     :key="IotDeviceMessageMethodEnum.PROPERTY_SET.method"
                     tab="属性设置"
                   >
@@ -511,7 +639,29 @@ async function handleServiceInvoke(row: ThingModelData) {
                             <DataDefinition :data="record" />
                           </template>
                           <template v-else-if="column.key === 'value'">
+                            <InputNumber
+                              v-if="isNumberProperty(record)"
+                              :value="getFormValue(record.identifier)"
+                              placeholder="输入值"
+                              size="small"
+                              class="w-full"
+                              @update:value="
+                                setFormValue(record.identifier, $event)
+                              "
+                            />
+                            <Select
+                              v-else-if="isSelectProperty(record)"
+                              :value="getFormValue(record.identifier)"
+                              :options="getPropertyOptions(record)"
+                              placeholder="请选择值"
+                              size="small"
+                              class="w-full"
+                              @update:value="
+                                setFormValue(record.identifier, $event)
+                              "
+                            />
                             <Input
+                              v-else
                               :value="getFormValue(record.identifier)"
                               placeholder="输入值"
                               size="small"
@@ -531,10 +681,10 @@ async function handleServiceInvoke(row: ThingModelData) {
                         </Button>
                       </div>
                     </ContentWrap>
-                  </TabPane>
+                  </Tabs.TabPane>
 
                   <!-- 服务调用 -->
-                  <TabPane
+                  <Tabs.TabPane
                     :key="IotDeviceMessageMethodEnum.SERVICE_INVOKE.method"
                     tab="设备服务调用"
                   >
@@ -574,9 +724,9 @@ async function handleServiceInvoke(row: ThingModelData) {
                         </template>
                       </Table>
                     </ContentWrap>
-                  </TabPane>
+                  </Tabs.TabPane>
                 </Tabs>
-              </TabPane>
+              </Tabs.TabPane>
             </Tabs>
           </div>
         </Card>
@@ -595,7 +745,7 @@ async function handleServiceInvoke(row: ThingModelData) {
               >
                 <IconifyIcon
                   v-if="!messageCollapsed"
-                  icon="lucide:chevron-down"
+                  icon="lucide:chevron-up"
                 />
                 <IconifyIcon
                   v-if="messageCollapsed"
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/sub-device.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/sub-device.vue
index bc795ce7e..a556031ae 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/sub-device.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/sub-device.vue
@@ -29,7 +29,7 @@ const props = defineProps<Props>();
 const router = useRouter();
 
 /** 子设备列表表格列配置 */
-function useGridColumns(): VxeTableGridOptions['columns'] {
+function useGridColumns(): VxeTableGridOptions<IotDeviceApi.Device>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -126,7 +126,7 @@ function handleRowCheckboxChange({
 
 /** 解绑单个设备 */
 async function handleUnbind(row: IotDeviceApi.Device) {
-  await confirm({ content: `确定要解绑子设备【${row.deviceName}】吗？` });
+  await confirm(`确定要解绑子设备【${row.deviceName}】吗？`);
   const hideLoading = message.loading({
     content: `正在解绑【${row.deviceName}】...`,
     duration: 0,
@@ -142,9 +142,7 @@ async function handleUnbind(row: IotDeviceApi.Device) {
 
 /** 批量解绑 */
 async function handleUnbindBatch() {
-  await confirm({
-    content: `确定要解绑选中的 ${checkedIds.value.length} 个子设备吗？`,
-  });
+  await confirm(`确定要解绑选中的 ${checkedIds.value.length} 个子设备吗？`);
   const hideLoading = message.loading({
     content: '正在批量解绑...',
     duration: 0,
@@ -190,7 +188,7 @@ function useAddGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
-function useAddGridColumns(): VxeTableGridOptions['columns'] {
+function useAddGridColumns(): VxeTableGridOptions<IotDeviceApi.Device>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -317,6 +315,7 @@ watch(
               label: '添加子设备',
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['iot:device:update'],
               onClick: openAddModal,
             },
             {
@@ -324,6 +323,7 @@ watch(
               type: 'primary',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:device:update'],
               disabled: isEmpty(checkedIds),
               onClick: handleUnbindBatch,
             },
@@ -342,6 +342,7 @@ watch(
               label: '解绑',
               type: 'link',
               danger: true,
+              auth: ['iot:device:update'],
               onClick: () => handleUnbind(row),
             },
           ]"
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-event.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-event.vue
index 3ddd21000..97d50cdba 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-event.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-event.vue
@@ -1,45 +1,48 @@
 <!-- 设备事件管理 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { ThingModelData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, reactive, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import {
   getEventTypeLabel,
-  IoTThingModelTypeEnum,
   IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
 } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
-import { Button, DateRangePicker, Select, Space, Tag } from 'antdv-next';
+import { Button, DatePicker, Select, Space, Tag } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDeviceMessagePairPage } from '#/api/iot/device/device';
 
 const props = defineProps<{
   deviceId: number;
-  thingModelList: ThingModelData[];
+  thingModelList: ThingModelApi.ThingModel[];
 }>();
 
+const RangePicker = DatePicker.RangePicker;
+
 /** 查询参数 */
 const queryParams = reactive({
   identifier: '',
   times: undefined as [string, string] | undefined,
 });
+let refreshTimer: ReturnType<typeof setTimeout> | undefined; // 延迟刷新定时器
 
 /** 事件类型的物模型数据 */
 const eventThingModels = computed(() => {
   return props.thingModelList.filter(
-    (item: ThingModelData) =>
+    (item: ThingModelApi.ThingModel) =>
       String(item.type) === String(IoTThingModelTypeEnum.EVENT),
   );
 });
 
 /** Grid 列定义 */
-function useGridColumns(): VxeTableGridOptions['columns'] {
+function useGridColumns(): VxeTableGridOptions<Record<string, any>>['columns'] {
   return [
     {
       field: 'reportTime',
@@ -123,7 +126,7 @@ function resetQuery() {
 function getEventName(identifier: string | undefined) {
   if (!identifier) return '-';
   const event = eventThingModels.value.find(
-    (item: ThingModelData) => item.identifier === identifier,
+    (item: ThingModelApi.ThingModel) => item.identifier === identifier,
   );
   return event?.name || identifier;
 }
@@ -132,7 +135,7 @@ function getEventName(identifier: string | undefined) {
 function getEventType(identifier: string | undefined) {
   if (!identifier) return '-';
   const event = eventThingModels.value.find(
-    (item: ThingModelData) => item.identifier === identifier,
+    (item: ThingModelApi.ThingModel) => item.identifier === identifier,
   );
   if (!event?.event?.type) return '-';
   return getEventTypeLabel(event.event.type) || '-';
@@ -153,8 +156,15 @@ function parseParams(params: string) {
 
 /** 刷新列表 */
 function refresh(delay = 0) {
+  if (refreshTimer) {
+    clearTimeout(refreshTimer);
+    refreshTimer = undefined;
+  }
   if (delay > 0) {
-    setTimeout(() => gridApi.query(), delay);
+    refreshTimer = setTimeout(() => {
+      gridApi.query();
+      refreshTimer = undefined;
+    }, delay);
   } else {
     gridApi.query();
   }
@@ -177,6 +187,14 @@ onMounted(() => {
   }
 });
 
+/** 组件卸载时清除延迟刷新定时器 */
+onBeforeUnmount(() => {
+  if (refreshTimer) {
+    clearTimeout(refreshTimer);
+    refreshTimer = undefined;
+  }
+});
+
 /** 暴露方法给父组件 */
 defineExpose({
   refresh,
@@ -195,18 +213,18 @@ defineExpose({
           placeholder="请选择事件标识符"
           style="width: 240px"
         >
-          <SelectOption
+          <Select.Option
             v-for="event in eventThingModels"
             :key="event.identifier"
             :value="event.identifier!"
           >
             {{ event.name }}({{ event.identifier }})
-          </SelectOption>
+          </Select.Option>
         </Select>
       </div>
       <div class="flex items-center gap-2">
         <span>时间范围：</span>
-        <DateRangePicker
+        <RangePicker
           v-model:value="queryParams.times"
           format="YYYY-MM-DD HH:mm:ss"
           show-time
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property-history.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
index 9449307d4..eed402505 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
@@ -11,7 +11,7 @@ import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { IoTDataSpecsDataTypeEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-import { formatDate, formatDateTime } from '@vben/utils';
+import { formatDate } from '@vben/utils';
 
 import {
   Button,
@@ -28,16 +28,12 @@ import dayjs from 'dayjs';
 import { getHistoryDevicePropertyList } from '#/api/iot/device/device';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
 
-/** IoT 设备属性历史数据详情 */
-defineOptions({ name: 'DeviceDetailsThingModelPropertyHistory' });
-
 defineProps<{ deviceId: number }>();
 
 const dialogVisible = ref(false); // 弹窗的是否展示
 const loading = ref(false);
-const exporting = ref(false);
 const viewMode = ref<'chart' | 'list'>('chart'); // 视图模式状态
-const list = ref<IotDeviceApi.DevicePropertyDetail[]>([]); // 列表的数据
+const list = ref<Array<IotDeviceApi.DeviceProperty & { _rowKey: string }>>([]); // 列表的数据
 const total = ref(0); // 总数据量
 const thingModelDataType = ref<string>(''); // 物模型数据类型
 const propertyIdentifier = ref<string>(''); // 属性标识符
@@ -89,7 +85,7 @@ const maxValue = computed(() => {
   if (!canShowChart.value || list.value.length === 0) return '-';
   const values = list.value
     .map((item) => Number(item.value))
-    .filter((v) => !Number.isNaN(v));
+    .filter((value) => !Number.isNaN(value));
   return values.length > 0 ? Math.max(...values).toFixed(2) : '-';
 });
 
@@ -98,7 +94,7 @@ const minValue = computed(() => {
   if (!canShowChart.value || list.value.length === 0) return '-';
   const values = list.value
     .map((item) => Number(item.value))
-    .filter((v) => !Number.isNaN(v));
+    .filter((value) => !Number.isNaN(value));
   return values.length > 0 ? Math.min(...values).toFixed(2) : '-';
 });
 
@@ -107,9 +103,9 @@ const avgValue = computed(() => {
   if (!canShowChart.value || list.value.length === 0) return '-';
   const values = list.value
     .map((item) => Number(item.value))
-    .filter((v) => !Number.isNaN(v));
+    .filter((value) => !Number.isNaN(value));
   if (values.length === 0) return '-';
-  const sum = values.reduce((acc, val) => acc + val, 0);
+  const sum = values.reduce((total, value) => total + value, 0);
   return (sum / values.length).toFixed(2);
 });
 
@@ -124,7 +120,7 @@ const tableColumns = computed(() => [
     key: 'index',
     width: 80,
     align: 'center' as const,
-    render: ({ index }: { index: number }) => index + 1,
+    customRender: ({ index }: { index: number }) => index + 1,
   },
   {
     title: '时间',
@@ -141,25 +137,15 @@ const tableColumns = computed(() => [
   },
 ]); // 表格列配置
 
-const paginationConfig = computed(() => ({
-  current: 1,
-  pageSize: 10,
-  total: total.value,
-  showSizeChanger: true,
-  showQuickJumper: true,
-  pageSizeOptions: ['10', '20', '50', '100'],
-  showTotal: (total: number) => `共 ${total} 条数据`,
-})); // 分页配置
-
 /** 获得设备历史数据 */
 async function getList() {
   loading.value = true;
   try {
     const data = await getHistoryDevicePropertyList(queryParams);
-    // 后端直接返回数组，不是 { list: [] } 格式
-    list.value = (
-      Array.isArray(data) ? data : data?.list || []
-    ) as IotDeviceApi.DevicePropertyDetail[];
+    list.value = (data || []).map((item, idx) => ({
+      ...item,
+      _rowKey: `${item.updateTime ?? ''}-${idx}`, // 后端直接返回数组，仅含 value/updateTime，给每行补 _rowKey 保证唯一
+    }));
     total.value = list.value.length;
 
     // 如果是图表模式且支持图表展示，等待渲染图表
@@ -335,54 +321,6 @@ function handleRefresh() {
   getList();
 }
 
-/** 导出数据 */
-async function handleExport() {
-  if (list.value.length === 0) {
-    message.warning('暂无数据可导出');
-    return;
-  }
-
-  exporting.value = true;
-  try {
-    // 构建CSV内容
-    const headers = ['序号', '时间', '属性值'];
-    const csvContent = [
-      headers.join(','),
-      ...list.value.map((item, index) => {
-        return [
-          index + 1,
-          formatDateTime(new Date(item.updateTime)),
-          isComplexDataType.value
-            ? `"${JSON.stringify(item.value)}"`
-            : item.value,
-        ].join(',');
-      }),
-    ].join('\n');
-
-    // 创建 BOM 头,解决中文乱码
-    const BOM = '\uFEFF';
-    const blob = new Blob([BOM + csvContent], {
-      type: 'text/csv;charset=utf-8',
-    });
-
-    // 下载文件
-    const url = window.URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = `设备属性历史_${propertyIdentifier.value}_${formatDate(new Date(), 'YYYYMMDDHHmmss')}.csv`;
-    document.body.append(link);
-    link.click();
-    link.remove();
-    window.URL.revokeObjectURL(url);
-
-    message.success('导出成功');
-  } catch {
-    message.error('导出失败');
-  } finally {
-    exporting.value = false;
-  }
-}
-
 /** 关闭弹窗 */
 function handleClose() {
   dialogVisible.value = false;
@@ -434,20 +372,8 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
             刷新
           </Button>
 
-          <!-- 导出按钮 -->
-          <Button
-            :disabled="list.length === 0"
-            :loading="exporting"
-            @click="handleExport"
-          >
-            <template #icon>
-              <IconifyIcon icon="ant-design:export-outlined" />
-            </template>
-            导出
-          </Button>
-
           <!-- 视图切换 -->
-          <Space class="ml-auto">
+          <Button.Group class="ml-auto">
             <Button
               :disabled="!canShowChart"
               :type="viewMode === 'chart' ? 'primary' : 'default'"
@@ -467,7 +393,7 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
               </template>
               列表
             </Button>
-          </Space>
+          </Button.Group>
         </Space>
 
         <!-- 数据统计信息 -->
@@ -502,9 +428,9 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
           <Table
             :columns="tableColumns"
             :data-source="list"
-            :pagination="paginationConfig"
+            :pagination="false"
             :scroll="{ y: 500 }"
-            row-key="updateTime"
+            row-key="_rowKey"
             size="small"
           >
             <template #bodyCell="{ column, record }">
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property.vue
index 3ed388d04..0491e71d3 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-property.vue
@@ -45,7 +45,7 @@ let autoRefreshTimer: any = null; // 定时器
 const viewMode = ref<'card' | 'list'>('card'); // 视图模式状态
 
 /** Grid 列定义 */
-function useGridColumns(): VxeTableGridOptions['columns'] {
+function useGridColumns(): VxeTableGridOptions<IotDeviceApi.DevicePropertyDetail>['columns'] {
   return [
     {
       field: 'identifier',
@@ -207,6 +207,13 @@ function handleQuery() {
   }
 }
 
+/** 搜索关键词变化 */
+function handleKeywordChange(event: Event) {
+  if (!(event.target as HTMLInputElement).value) {
+    handleQuery();
+  }
+}
+
 /** 视图切换 */
 async function handleViewModeChange(mode: 'card' | 'list') {
   if (viewMode.value === mode) {
@@ -281,16 +288,17 @@ onBeforeUnmount(() => {
           allow-clear
           placeholder="请输入属性名称、标识符"
           style="width: 240px"
+          @change="handleKeywordChange"
           @press-enter="handleQuery"
         />
         <Switch
           v-model:checked="autoRefresh"
           checked-children="定时刷新"
-          class="ml-20px"
+          class="ml-[20px]"
           un-checked-children="定时刷新"
         />
       </div>
-      <Space>
+      <Button.Group>
         <Button
           :type="viewMode === 'card' ? 'primary' : 'default'"
           @click="handleViewModeChange('card')"
@@ -303,7 +311,7 @@ onBeforeUnmount(() => {
         >
           <IconifyIcon icon="ep:list" />
         </Button>
-      </Space>
+      </Button.Group>
     </div>
 
     <!-- 分隔线 -->
@@ -322,7 +330,7 @@ onBeforeUnmount(() => {
           class="mb-4"
         >
           <Card
-            :styles="{ body: { padding: '0' } }"
+            :body-style="{ padding: '0' }"
             class="relative h-full overflow-hidden transition-colors"
           >
             <!-- 添加渐变背景层 -->
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-service.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-service.vue
index 44af81f1d..fbab67035 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-service.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model-service.vue
@@ -1,45 +1,48 @@
 <!-- 设备服务调用 -->
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { ThingModelData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
-import { computed, onMounted, reactive, watch } from 'vue';
+import { computed, onBeforeUnmount, onMounted, reactive, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import {
   getThingModelServiceCallTypeLabel,
-  IoTThingModelTypeEnum,
   IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
 } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
-import { Button, DateRangePicker, Select, Space, Tag } from 'antdv-next';
+import { Button, DatePicker, Select, Space, Tag } from 'antdv-next';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDeviceMessagePairPage } from '#/api/iot/device/device';
 
 const props = defineProps<{
   deviceId: number;
-  thingModelList: ThingModelData[];
+  thingModelList: ThingModelApi.ThingModel[];
 }>();
 
+const RangePicker = DatePicker.RangePicker;
+
 /** 查询参数 */
 const queryParams = reactive({
   identifier: '',
   times: undefined as [string, string] | undefined,
 });
+let refreshTimer: ReturnType<typeof setTimeout> | undefined; // 延迟刷新定时器
 
 /** 服务类型的物模型数据 */
 const serviceThingModels = computed(() => {
   return props.thingModelList.filter(
-    (item: ThingModelData) =>
+    (item: ThingModelApi.ThingModel) =>
       String(item.type) === String(IoTThingModelTypeEnum.SERVICE),
   );
 });
 
 /** Grid 列定义 */
-function useGridColumns(): VxeTableGridOptions['columns'] {
+function useGridColumns(): VxeTableGridOptions<Record<string, any>>['columns'] {
   return [
     {
       field: 'requestTime',
@@ -136,7 +139,7 @@ function resetQuery() {
 function getServiceName(identifier: string | undefined) {
   if (!identifier) return '-';
   const service = serviceThingModels.value.find(
-    (item: ThingModelData) => item.identifier === identifier,
+    (item: ThingModelApi.ThingModel) => item.identifier === identifier,
   );
   return service?.name || identifier;
 }
@@ -145,7 +148,7 @@ function getServiceName(identifier: string | undefined) {
 function getCallType(identifier: string | undefined) {
   if (!identifier) return '-';
   const service = serviceThingModels.value.find(
-    (item: ThingModelData) => item.identifier === identifier,
+    (item: ThingModelApi.ThingModel) => item.identifier === identifier,
   );
   if (!service?.service?.callType) return '-';
   return getThingModelServiceCallTypeLabel(service.service.callType) || '-';
@@ -167,8 +170,15 @@ function parseParams(params: string) {
 
 /** 刷新列表 */
 function refresh(delay = 0) {
+  if (refreshTimer) {
+    clearTimeout(refreshTimer);
+    refreshTimer = undefined;
+  }
   if (delay > 0) {
-    setTimeout(() => gridApi.query(), delay);
+    refreshTimer = setTimeout(() => {
+      gridApi.query();
+      refreshTimer = undefined;
+    }, delay);
   } else {
     gridApi.query();
   }
@@ -191,6 +201,14 @@ onMounted(() => {
   }
 });
 
+/** 组件卸载时清除延迟刷新定时器 */
+onBeforeUnmount(() => {
+  if (refreshTimer) {
+    clearTimeout(refreshTimer);
+    refreshTimer = undefined;
+  }
+});
+
 /** 暴露方法给父组件 */
 defineExpose({
   refresh,
@@ -209,18 +227,18 @@ defineExpose({
           placeholder="请选择服务标识符"
           style="width: 240px"
         >
-          <SelectOption
+          <Select.Option
             v-for="service in serviceThingModels"
             :key="service.identifier"
             :value="service.identifier!"
           >
             {{ service.name }}({{ service.identifier }})
-          </SelectOption>
+          </Select.Option>
         </Select>
       </div>
       <div class="flex items-center gap-2">
         <span>时间范围：</span>
-        <DateRangePicker
+        <RangePicker
           v-model:value="queryParams.times"
           format="YYYY-MM-DD HH:mm:ss"
           show-time
diff --git a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model.vue b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model.vue
index 62c8a2af8..7e84d9d22 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/detail/modules/thing-model.vue
@@ -1,12 +1,12 @@
 <!-- 设备物模型：设备属性、事件管理、服务调用 -->
 <script lang="ts" setup>
-import type { ThingModelData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { ref } from 'vue';
 
 import { ContentWrap } from '@vben/common-ui';
 
-import { TabPane, Tabs } from 'antdv-next';
+import { Tabs } from 'antdv-next';
 
 import DeviceDetailsThingModelEvent from './thing-model-event.vue';
 import DeviceDetailsThingModelProperty from './thing-model-property.vue';
@@ -14,7 +14,7 @@ import DeviceDetailsThingModelService from './thing-model-service.vue';
 
 const props = defineProps<{
   deviceId: number;
-  thingModelList: ThingModelData[];
+  thingModelList: ThingModelApi.ThingModel[];
 }>();
 
 const activeTab = ref('property'); // 默认选中设备属性
@@ -22,26 +22,26 @@ const activeTab = ref('property'); // 默认选中设备属性
 <template>
   <ContentWrap>
     <Tabs v-model:active-key="activeTab" class="!h-auto !p-0">
-      <TabPane key="property" tab="设备属性（运行状态）">
+      <Tabs.TabPane key="property" tab="设备属性（运行状态）">
         <DeviceDetailsThingModelProperty
           v-if="activeTab === 'property'"
           :device-id="deviceId"
         />
-      </TabPane>
-      <TabPane key="event" tab="设备事件上报">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="event" tab="设备事件上报">
         <DeviceDetailsThingModelEvent
           v-if="activeTab === 'event'"
           :device-id="props.deviceId"
           :thing-model-list="props.thingModelList"
         />
-      </TabPane>
-      <TabPane key="service" tab="设备服务调用">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="service" tab="设备服务调用">
         <DeviceDetailsThingModelService
           v-if="activeTab === 'service'"
           :device-id="deviceId"
           :thing-model-list="props.thingModelList"
         />
-      </TabPane>
+      </Tabs.TabPane>
     </Tabs>
   </ContentWrap>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/index.vue b/apps/web-antdv-next/src/views/iot/device/device/index.vue
index e530ff63b..f28362608 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/index.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/index.vue
@@ -1,6 +1,7 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { PageParam } from '@vben/request';
 
+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';
@@ -8,13 +9,21 @@ import type { IotProductApi } from '#/api/iot/product/product';
 import { nextTick, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
 
-import { Button, Card, Input, message, Select, Space, Tag } from 'antdv-next';
+import {
+  Button,
+  Card,
+  Input,
+  message,
+  Select,
+  Space,
+  Tag,
+} from 'antdv-next';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -33,9 +42,6 @@ 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<IotProductApi.Product[]>([]);
@@ -44,9 +50,6 @@ const viewMode = ref<'card' | 'list'>('card');
 const cardViewRef = ref();
 const checkedIds = ref<number[]>([]);
 
-/** 判断是否为列表视图 */
-const isListView = () => viewMode.value === 'list';
-
 const [DeviceFormModal, deviceFormModalApi] = useVbenModal({
   connectedComponent: DeviceForm,
   destroyOnClose: true,
@@ -166,6 +169,7 @@ async function handleDeleteBatch() {
     message.warning('请选择要删除的设备');
     return;
   }
+  await confirm($t('ui.actionMessage.deleteBatchConfirm'));
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deletingBatch'),
     duration: 0,
@@ -211,6 +215,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
+    pagerConfig: {
+      pageSize: 12,
+    },
     proxyConfig: {
       ajax: {
         query: async ({
@@ -276,7 +283,7 @@ onMounted(async () => {
     <DeviceImportFormModal @success="handleRefresh" />
 
     <!-- 统一搜索工具栏 -->
-    <Card :styles="{ body: { padding: '16px' } }" class="mb-4">
+    <Card :body-style="{ padding: '16px' }" class="!mb-2">
       <!-- 搜索表单 -->
       <div class="mb-3 flex flex-wrap items-center gap-3">
         <Select
@@ -285,13 +292,13 @@ onMounted(async () => {
           allow-clear
           style="width: 200px"
         >
-          <SelectOption
+          <Select.Option
             v-for="product in products"
             :key="product.id"
             :value="product.id"
           >
             {{ product.name }}
-          </SelectOption>
+          </Select.Option>
         </Select>
         <Input
           v-model:value="queryParams.deviceName"
@@ -313,7 +320,7 @@ onMounted(async () => {
           allow-clear
           style="width: 200px"
         >
-          <SelectOption
+          <Select.Option
             v-for="dict in getDictOptions(
               DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE,
               'number',
@@ -322,7 +329,7 @@ onMounted(async () => {
             :value="dict.value"
           >
             {{ dict.label }}
-          </SelectOption>
+          </Select.Option>
         </Select>
         <Select
           v-model:value="queryParams.status"
@@ -330,13 +337,13 @@ onMounted(async () => {
           allow-clear
           style="width: 200px"
         >
-          <SelectOption
+          <Select.Option
             v-for="dict in getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number')"
             :key="dict.value"
             :value="dict.value"
           >
             {{ dict.label }}
-          </SelectOption>
+          </Select.Option>
         </Select>
         <Select
           v-model:value="queryParams.groupId"
@@ -344,13 +351,13 @@ onMounted(async () => {
           allow-clear
           style="width: 200px"
         >
-          <SelectOption
+          <Select.Option
             v-for="group in deviceGroups"
             :key="group.id"
             :value="group.id"
           >
             {{ group.name }}
-          </SelectOption>
+          </Select.Option>
         </Select>
         <Button type="primary" @click="handleSearch">
           <IconifyIcon icon="ant-design:search-outlined" class="mr-1" />
@@ -392,7 +399,6 @@ onMounted(async () => {
               type: 'primary',
               icon: 'ant-design:folder-add-outlined',
               auth: ['iot:device:update'],
-              ifShow: isListView,
               disabled: isEmpty(checkedIds),
               onClick: handleAddToGroup,
             },
@@ -402,7 +408,6 @@ onMounted(async () => {
               danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['iot:device:delete'],
-              ifShow: isListView,
               disabled: isEmpty(checkedIds),
               onClick: handleDeleteBatch,
             },
@@ -428,12 +433,20 @@ onMounted(async () => {
 
     <!-- 列表视图 -->
     <Grid table-title="设备列表" v-show="viewMode === 'list'">
+      <template #deviceName="{ row }">
+        <a class="cursor-pointer text-primary" @click="openDetail(row.id!)">
+          {{ row.deviceName }}
+        </a>
+      </template>
       <template #product="{ row }">
         <a
           class="cursor-pointer text-primary"
           @click="openProductDetail(row.productId)"
         >
-          {{ products.find((p) => p.id === row.productId)?.name || '-' }}
+          {{
+            products.find((product) => product.id === row.productId)?.name ||
+            '-'
+          }}
         </a>
       </template>
       <template #groups="{ row }">
@@ -444,7 +457,7 @@ onMounted(async () => {
             size="small"
             class="mr-1"
           >
-            {{ deviceGroups.find((g) => g.id === groupId)?.name }}
+            {{ deviceGroups.find((group) => group.id === groupId)?.name }}
           </Tag>
         </template>
         <span v-else>-</span>
@@ -455,17 +468,20 @@ onMounted(async () => {
             {
               label: $t('common.detail'),
               type: 'link',
+              auth: ['iot:device:query'],
               onClick: openDetail.bind(null, row.id!),
             },
             {
               label: '日志',
               type: 'link',
+              auth: ['iot:device:query'],
               onClick: openModel.bind(null, row.id!),
             },
             {
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['iot:device:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -473,6 +489,7 @@ onMounted(async () => {
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:device:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.deviceName]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-antdv-next/src/views/iot/device/device/modules/card-view.vue b/apps/web-antdv-next/src/views/iot/device/device/modules/card-view.vue
index fb7ac3729..06b55875f 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/modules/card-view.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/modules/card-view.vue
@@ -5,6 +5,7 @@ import type { IotDeviceApi } from '#/api/iot/device/device';
 
 import { onMounted, ref } from 'vue';
 
+import { useAccess } from '@vben/access';
 import { DICT_TYPE } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
@@ -47,6 +48,8 @@ const emit = defineEmits<{
   productDetail: [productId: number];
 }>();
 
+const { hasAccessByCodes } = useAccess();
+
 const loading = ref(false);
 const list = ref<IotDeviceApi.Device[]>([]);
 const total = ref(0);
@@ -102,7 +105,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="device-card-view">
+  <div>
     <!-- 设备卡片列表 -->
     <div v-loading="loading" class="min-h-96">
       <Row v-if="list.length > 0" :gutter="[16, 16]">
@@ -115,30 +118,43 @@ onMounted(() => {
           :lg="6"
         >
           <Card
-            :styles="{ body: { padding: '16px' } }"
-            class="device-card h-full rounded-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+            :body-style="{
+              padding: '16px',
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+            }"
+            class="h-full overflow-hidden 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">
+              <div
+                class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-[#40a9ff] to-[#1890ff] text-white"
+              >
                 <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
+                  class="truncate text-[15px] font-semibold leading-9 dark:text-white/85"
+                >
+                  {{ item.deviceName }}
+                </div>
               </div>
               <DictTag
                 :type="DICT_TYPE.IOT_DEVICE_STATE"
                 :value="item.state"
-                class="status-tag"
+                class="text-xs"
               />
             </div>
             <!-- 内容区域 -->
             <div class="mb-3 flex items-start">
-              <div class="info-list flex-1">
-                <div class="info-item">
-                  <span class="info-label">所属产品</span>
+              <div class="flex-1">
+                <div class="mb-2 flex items-center text-[13px]">
+                  <span class="mr-2 shrink-0 opacity-65 dark:text-white/65">
+                    所属产品
+                  </span>
                   <a
-                    class="info-value cursor-pointer text-primary"
+                    class="cursor-pointer truncate font-medium text-primary"
                     @click="
                       (e) => {
                         e.stopPropagation();
@@ -149,25 +165,36 @@ onMounted(() => {
                     {{ getProductName(item.productId) }}
                   </a>
                 </div>
-                <div class="info-item">
-                  <span class="info-label">设备类型</span>
+                <div class="mb-2 flex items-center text-[13px]">
+                  <span class="mr-2 shrink-0 opacity-65 dark:text-white/65">
+                    设备类型
+                  </span>
                   <DictTag
                     :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
                     :value="item.deviceType"
-                    class="info-tag m-0"
+                    class="m-0 text-xs"
                   />
                 </div>
-                <div class="info-item">
-                  <span class="info-label">Deviceid</span>
-                  <Tooltip :title="String(item.id)" placement="top">
-                    <span class="info-value device-id cursor-pointer">
-                      {{ item.id }}
+                <div class="flex items-center text-[13px]">
+                  <span class="mr-2 shrink-0 opacity-65 dark:text-white/65">
+                    备注名称
+                  </span>
+                  <Tooltip
+                    :title="item.nickname || item.deviceName"
+                    placement="top"
+                  >
+                    <span
+                      class="inline-block max-w-[150px] cursor-pointer truncate align-middle text-xs opacity-85 dark:text-white/75"
+                    >
+                      {{ item.nickname || item.deviceName }}
                     </span>
                   </Tooltip>
                 </div>
               </div>
               <!-- 设备图片 -->
-              <div class="device-image">
+              <div
+                class="flex size-20 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-[#40a9ff15] to-[#1890ff15] text-[#1890ff] dark:from-[#40a9ff25] dark:to-[#1890ff25] dark:text-[#69c0ff]"
+              >
                 <Image
                   v-if="item.picUrl"
                   :src="item.picUrl"
@@ -182,43 +209,51 @@ onMounted(() => {
               </div>
             </div>
             <!-- 按钮组 -->
-            <div class="action-buttons">
+            <div class="mt-auto flex gap-2 border-t border-border pt-3">
               <Button
+                v-if="hasAccessByCodes(['iot:device:update'])"
                 size="small"
-                class="action-btn action-btn-edit"
+                class="!h-8 min-w-0 flex-1 rounded-md !border-[#1890ff] !text-[13px] !text-[#1890ff] transition-all duration-200 hover:!bg-[#1890ff] hover:!text-white"
                 @click="emit('edit', item)"
               >
                 <IconifyIcon icon="lucide:edit" class="mr-1" />
                 编辑
               </Button>
               <Button
+                v-if="hasAccessByCodes(['iot:device:query'])"
                 size="small"
-                class="action-btn action-btn-detail"
+                class="!h-8 min-w-0 flex-1 rounded-md !border-[#52c41a] !text-[13px] !text-[#52c41a] transition-all duration-200 hover:!bg-[#52c41a] hover:!text-white"
                 @click="emit('detail', item.id!)"
               >
                 <IconifyIcon icon="lucide:eye" class="mr-1" />
                 详情
               </Button>
               <Button
+                v-if="hasAccessByCodes(['iot:device:query'])"
                 size="small"
-                class="action-btn action-btn-data"
+                class="!h-8 min-w-0 flex-1 rounded-md !border-[#fa8c16] !text-[13px] !text-[#fa8c16] transition-all duration-200 hover:!bg-[#fa8c16] hover:!text-white"
                 @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"
+              <template v-if="hasAccessByCodes(['iot:device:delete'])">
+                <div
+                  class="h-5 w-px self-center bg-[#dcdfe6] dark:bg-[#3a3a3a]"
+                ></div>
+                <Popconfirm
+                  :title="`确认删除设备 ${item.deviceName} 吗?`"
+                  @confirm="emit('delete', item)"
                 >
-                  <IconifyIcon icon="lucide:trash-2" class="text-sm" />
-                </Button>
-              </Popconfirm>
+                  <Button
+                    size="small"
+                    danger
+                    class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                  >
+                    <IconifyIcon icon="lucide:trash-2" class="text-sm" />
+                  </Button>
+                </Popconfirm>
+              </template>
             </div>
           </Card>
         </Col>
@@ -242,187 +277,3 @@ onMounted(() => {
     </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;
-    }
-
-    // 设备图片
-    .device-image {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      width: 80px;
-      height: 80px;
-      color: #1890ff;
-      background: linear-gradient(135deg, #40a9ff15 0%, #1890ff15 100%);
-      border-radius: 8px;
-    }
-
-    // 信息列表
-    .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%);
-        }
-      }
-
-      .device-image {
-        color: #69c0ff;
-        background: linear-gradient(135deg, #40a9ff25 0%, #1890ff25 100%);
-      }
-    }
-  }
-}
-</style>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/modules/form.vue b/apps/web-antdv-next/src/views/iot/device/device/modules/form.vue
index a0839970c..922b39bdd 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/modules/form.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/modules/form.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';
 
@@ -16,8 +16,6 @@ import { $t } from '#/locales';
 
 import { useAdvancedFormSchema, useBasicFormSchema } from '../data';
 
-defineOptions({ name: 'IoTDeviceForm' });
-
 const emit = defineEmits(['success']);
 const formData = ref<IotDeviceApi.Device>();
 const products = ref<IotProductApi.Product[]>([]);
@@ -35,8 +33,9 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
   },
-  wrapperClass: 'grid-cols-1',
   layout: 'horizontal',
   schema: useBasicFormSchema(),
   showDefaultActions: false,
@@ -49,7 +48,7 @@ const [Form, formApi] = useVbenForm({
         return;
       }
       // 从产品列表中查找产品
-      const product = products.value.find((p) => p.id === productId);
+      const product = products.value.find((item) => item.id === productId);
       if (product?.deviceType !== undefined) {
         await formApi.setFieldValue('deviceType', product.deviceType);
       }
@@ -62,8 +61,9 @@ const [AdvancedForm, advancedFormApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
   },
-  wrapperClass: 'grid-cols-1',
   layout: 'horizontal',
   schema: useAdvancedFormSchema(),
   showDefaultActions: false,
@@ -118,6 +118,28 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
+    // 高级表单：先单独校验，再做经纬度成对填写的跨字段检查
+    if (advancedFormApi.isMounted) {
+      const { valid: advancedValid } = await advancedFormApi.validate();
+      if (!advancedValid) {
+        return;
+      }
+      const advValues = await advancedFormApi.getValues();
+      const hasLongitude =
+        advValues.longitude !== undefined &&
+        advValues.longitude !== null &&
+        advValues.longitude !== '';
+      const hasLatitude =
+        advValues.latitude !== undefined &&
+        advValues.latitude !== null &&
+        advValues.latitude !== '';
+      if (hasLongitude !== hasLatitude) {
+        message.warning(
+          hasLongitude ? '请同时填写设备纬度' : '请同时填写设备经度',
+        );
+        return;
+      }
+    }
     modalApi.lock();
     // 合并两个表单的值（字段不冲突，可直接合并）
     const basicValues = await formApi.getValues();
@@ -186,12 +208,12 @@ onMounted(async () => {
     <div class="mx-4">
       <Form />
       <Collapse v-model:active-key="activeKey" class="mt-4">
-        <CollapsePanel key="advanced" header="更多设置">
+        <Collapse.Panel key="advanced" header="更多设置">
           <AdvancedForm />
           <Space class="mt-2">
             <Button type="primary" @click="openMapDialog">坐标拾取</Button>
           </Space>
-        </CollapsePanel>
+        </Collapse.Panel>
       </Collapse>
     </div>
   </Modal>
diff --git a/apps/web-antdv-next/src/views/iot/device/device/modules/group-form.vue b/apps/web-antdv-next/src/views/iot/device/device/modules/group-form.vue
index ce5075e3c..3e1630b69 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/modules/group-form.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/modules/group-form.vue
@@ -13,8 +13,6 @@ import { $t } from '#/locales';
 
 import { useGroupFormSchema } from '../data';
 
-defineOptions({ name: 'IoTDeviceGroupForm' });
-
 const emit = defineEmits(['success']);
 const deviceIds = ref<number[]>([]);
 const getTitle = computed(() => '添加设备到分组');
@@ -24,6 +22,8 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
   },
   layout: 'horizontal',
   schema: useGroupFormSchema(),
diff --git a/apps/web-antdv-next/src/views/iot/device/device/modules/import-form.vue b/apps/web-antdv-next/src/views/iot/device/device/modules/import-form.vue
index 90093432b..534656f08 100644
--- a/apps/web-antdv-next/src/views/iot/device/device/modules/import-form.vue
+++ b/apps/web-antdv-next/src/views/iot/device/device/modules/import-form.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import type { FileType } from 'antdv-next/es/upload/interface';
+
 import type { IotDeviceApi } from '#/api/iot/device/device';
 
-import { useVbenModal } from '@vben/common-ui';
+import { alert, useVbenModal } from '@vben/common-ui';
 import { downloadFileFromBlobPart } from '@vben/utils';
 
 import { Button, message, Upload } from 'antdv-next';
@@ -11,13 +13,14 @@ import { importDevice, importDeviceTemplate } from '#/api/iot/device/device';
 import { $t } from '#/locales';
 
 import { useImportFormSchema } from '../data';
-type FileType = any;
-defineOptions({ name: 'IoTDeviceImportForm' });
 
 const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
     formItemClass: 'col-span-2',
     labelWidth: 120,
   },
@@ -58,7 +61,7 @@ const [Modal, modalApi] = useVbenModal({
             text += `< ${deviceName}: ${importData.failureDeviceNames[deviceName]} >`;
           }
         }
-        message.info(text);
+        await alert(text, '导入结果');
       }
       // 关闭并提示
       await modalApi.close();
@@ -89,18 +92,18 @@ async function handleDownload() {
       <template #file>
         <div class="w-full">
           <Upload
-            :before-upload="beforeUpload"
             :max-count="1"
             accept=".xls,.xlsx"
+            :before-upload="beforeUpload"
           >
-            <Button type="primary"> 选择 Excel 文件</Button>
+            <Button type="primary"> 选择 Excel 文件 </Button>
           </Upload>
         </div>
       </template>
     </Form>
     <template #prepend-footer>
       <div class="flex flex-auto items-center">
-        <Button @click="handleDownload"> 下载导入模板</Button>
+        <Button @click="handleDownload"> 下载导入模板 </Button>
       </div>
     </template>
   </Modal>
diff --git a/apps/web-antdv-next/src/views/iot/device/group/data.ts b/apps/web-antdv-next/src/views/iot/device/group/data.ts
index 6b7cdc0c2..9de20e9d8 100644
--- a/apps/web-antdv-next/src/views/iot/device/group/data.ts
+++ b/apps/web-antdv-next/src/views/iot/device/group/data.ts
@@ -1,7 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotDeviceGroupApi } from '#/api/iot/device/group';
 
-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { z } from '#/adapter/form';
@@ -25,10 +26,7 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入分组名称',
       },
-      rules: z
-        .string()
-        .min(1, '分组名称不能为空')
-        .max(64, '分组名称长度不能超过 64 个字符'),
+      rules: z.string().min(1, '分组名称不能为空'),
     },
     {
       fieldName: 'status',
@@ -39,12 +37,12 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
-      rules: z.number().default(CommonStatusEnum.ENABLE),
+      rules: 'required',
     },
     {
       fieldName: 'description',
       label: '分组描述',
-      component: 'TextArea',
+      component: 'Textarea',
       componentProps: {
         placeholder: '请输入分组描述',
         rows: 3,
@@ -78,7 +76,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<IotDeviceGroupApi.DeviceGroup>['columns'] {
   return [
     {
       field: 'id',
diff --git a/apps/web-antdv-next/src/views/iot/device/group/index.vue b/apps/web-antdv-next/src/views/iot/device/group/index.vue
index 23c84aaa3..5c2f2bc8b 100644
--- a/apps/web-antdv-next/src/views/iot/device/group/index.vue
+++ b/apps/web-antdv-next/src/views/iot/device/group/index.vue
@@ -13,8 +13,6 @@ import { $t } from '#/locales';
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
-defineOptions({ name: 'IoTDeviceGroup' });
-
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
@@ -37,12 +35,16 @@ function handleEdit(row: IotDeviceGroupApi.DeviceGroup) {
 
 /** 删除设备分组 */
 async function handleDelete(row: IotDeviceGroupApi.DeviceGroup) {
+  if (row.deviceCount && row.deviceCount > 0) {
+    message.warning(`分组「${row.name}」下存在 ${row.deviceCount} 台设备，无法删除`);
+    return;
+  }
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteDeviceGroup(row.id as number);
+    await deleteDeviceGroup(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
diff --git a/apps/web-antdv-next/src/views/iot/device/group/modules/form.vue b/apps/web-antdv-next/src/views/iot/device/group/modules/form.vue
index 965ad8b3d..9ba24ffd7 100644
--- a/apps/web-antdv-next/src/views/iot/device/group/modules/form.vue
+++ b/apps/web-antdv-next/src/views/iot/device/group/modules/form.vue
@@ -30,7 +30,10 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
   },
+  layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
diff --git a/apps/web-antdv-next/src/views/iot/home/chart-options.ts b/apps/web-antdv-next/src/views/iot/home/chart-options.ts
index 902181505..8745452ec 100644
--- a/apps/web-antdv-next/src/views/iot/home/chart-options.ts
+++ b/apps/web-antdv-next/src/views/iot/home/chart-options.ts
@@ -15,7 +15,7 @@ export function getMessageTrendChartOptions(
       },
     },
     legend: {
-      data: ['上行消息', '下行消息'],
+      data: ['上行消息量', '下行消息量'],
       top: '5%',
     },
     grid: {
@@ -40,11 +40,21 @@ export function getMessageTrendChartOptions(
     ],
     series: [
       {
-        name: '上行消息',
+        name: '上行消息量',
         type: 'line',
         smooth: true,
         areaStyle: {
-          opacity: 0.3,
+          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)' },
+            ],
+          },
         },
         emphasis: {
           focus: 'series',
@@ -55,11 +65,21 @@ export function getMessageTrendChartOptions(
         },
       },
       {
-        name: '下行消息',
+        name: '下行消息量',
         type: 'line',
         smooth: true,
         areaStyle: {
-          opacity: 0.3,
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(82, 196, 26, 0.3)' },
+              { offset: 1, color: 'rgba(82, 196, 26, 0)' },
+            ],
+          },
         },
         emphasis: {
           focus: 'series',
@@ -73,9 +93,7 @@ export function getMessageTrendChartOptions(
   };
 }
 
-/**
- * 设备状态仪表盘图表配置
- */
+/** 设备状态仪表盘图表配置 */
 export function getDeviceStateGaugeChartOptions(
   value: number,
   max: number,
@@ -86,8 +104,8 @@ export function getDeviceStateGaugeChartOptions(
     series: [
       {
         type: 'gauge',
-        startAngle: 225,
-        endAngle: -45,
+        startAngle: 360,
+        endAngle: 0,
         min: 0,
         max,
         center: ['50%', '50%'],
@@ -129,9 +147,7 @@ export function getDeviceStateGaugeChartOptions(
   };
 }
 
-/**
- * 设备数量饼图配置
- */
+/** 设备数量饼图配置 */
 export function getDeviceCountPieChartOptions(
   data: Array<{ name: string; value: number }>,
 ): any {
diff --git a/apps/web-antdv-next/src/views/iot/home/data.ts b/apps/web-antdv-next/src/views/iot/home/data.ts
index 5a84bd8e9..eaa9159f4 100644
--- a/apps/web-antdv-next/src/views/iot/home/data.ts
+++ b/apps/web-antdv-next/src/views/iot/home/data.ts
@@ -3,18 +3,18 @@ import type { IotStatisticsApi } from '#/api/iot/statistics';
 /** 统计数据 */
 export type StatsData = IotStatisticsApi.StatisticsSummaryRespVO;
 
-/** 默认统计数据 */
+/** 默认统计数据；用 -1 作为「未加载」哨兵，避免与「真 0 设备」混淆 */
 export const defaultStatsData: StatsData = {
-  productCategoryCount: 0,
-  productCount: 0,
-  deviceCount: 0,
-  deviceMessageCount: 0,
-  productCategoryTodayCount: 0,
-  productTodayCount: 0,
-  deviceTodayCount: 0,
-  deviceMessageTodayCount: 0,
-  deviceOnlineCount: 0,
-  deviceOfflineCount: 0,
-  deviceInactiveCount: 0,
+  productCategoryCount: -1,
+  productCount: -1,
+  deviceCount: -1,
+  deviceMessageCount: -1,
+  productCategoryTodayCount: -1,
+  productTodayCount: -1,
+  deviceTodayCount: -1,
+  deviceMessageTodayCount: -1,
+  deviceOnlineCount: -1,
+  deviceOfflineCount: -1,
+  deviceInactiveCount: -1,
   productCategoryDeviceCounts: {},
 };
diff --git a/apps/web-antdv-next/src/views/iot/home/index.vue b/apps/web-antdv-next/src/views/iot/home/index.vue
index 4a0505668..d52c59869 100644
--- a/apps/web-antdv-next/src/views/iot/home/index.vue
+++ b/apps/web-antdv-next/src/views/iot/home/index.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { StatsData } from './data';
 
 import { onMounted, ref } from 'vue';
@@ -15,27 +15,20 @@ import DeviceMapCard from './modules/device-map-card.vue';
 import DeviceStateCountCard from './modules/device-state-count-card.vue';
 import MessageTrendCard from './modules/message-trend-card.vue';
 
-defineOptions({ name: 'IoTHome' });
-
 const loading = ref(true);
 const statsData = ref<StatsData>(defaultStatsData);
 
-/** 加载统计数据 */
-async function loadStatisticsData(): Promise<StatsData> {
-  return await getStatisticsSummary();
-}
-
 /** 加载数据 */
 async function loadData() {
   loading.value = true;
   try {
-    statsData.value = await loadStatisticsData();
+    statsData.value = await getStatisticsSummary();
   } finally {
     loading.value = false;
   }
 }
 
-/** 组件挂载时加载数据 */
+/** 初始化 */
 onMounted(() => {
   loadData();
 });
diff --git a/apps/web-antdv-next/src/views/iot/home/modules/device-count-card.vue b/apps/web-antdv-next/src/views/iot/home/modules/device-count-card.vue
index 4140af50d..8f18d08ef 100644
--- a/apps/web-antdv-next/src/views/iot/home/modules/device-count-card.vue
+++ b/apps/web-antdv-next/src/views/iot/home/modules/device-count-card.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IotStatisticsApi } from '#/api/iot/statistics';
 
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
@@ -21,11 +21,13 @@ const { renderEcharts } = useEcharts(deviceCountChartRef);
 
 /** 是否有数据 */
 const hasData = computed(() => {
-  if (!props.statsData) return false;
+  if (!props.statsData) {
+    return false;
+  }
   const categories = Object.entries(
     props.statsData.productCategoryDeviceCounts || {},
   );
-  return categories.length > 0 && props.statsData.deviceCount !== 0;
+  return categories.length > 0 && props.statsData.deviceCount !== -1;
 });
 
 /** 初始化图表 */
diff --git a/apps/web-antdv-next/src/views/iot/home/modules/device-map-card.vue b/apps/web-antdv-next/src/views/iot/home/modules/device-map-card.vue
index f11754a36..8f49bdc7c 100644
--- a/apps/web-antdv-next/src/views/iot/home/modules/device-map-card.vue
+++ b/apps/web-antdv-next/src/views/iot/home/modules/device-map-card.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
+import type { NumberDictDataType } from '@vben/hooks';
+
 import type { IotDeviceApi } from '#/api/iot/device/device';
 
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { DeviceStateEnum } from '@vben/constants';
+import { DeviceStateEnum, DICT_TYPE } from '@vben/constants';
+import { getDictLabel, getDictOptions } from '@vben/hooks';
 
 import { Card, Empty, Spin } from 'antdv-next';
 
@@ -14,30 +17,30 @@ import { loadBaiduMapSdk } from '#/components/map';
 defineOptions({ name: 'DeviceMapCard' });
 
 const router = useRouter();
-const mapContainerRef = ref<HTMLElement>();
-let mapInstance: any = null;
-const loading = ref(true);
-const deviceList = ref<IotDeviceApi.Device[]>([]);
+const mapContainerRef = ref<HTMLElement>(); // 地图容器节点
+let mapInstance: any = null; // 百度地图实例
+const loading = ref(true); // 加载状态
+const deviceList = ref<IotDeviceApi.Device[]>([]); // 设备分布列表
 
-/** 是否有数据 */
-const hasData = computed(() => deviceList.value.length > 0);
+const hasData = computed(() => deviceList.value.length > 0); // 是否有数据
+
+const stateOptions = computed(() =>
+  getDictOptions(
+    DICT_TYPE.IOT_DEVICE_STATE,
+    'number',
+  ) as NumberDictDataType[],
+); // 状态图例列表（从字典获取）
 
-/** 设备状态颜色映射 */
 const stateColorMap: Record<number, string> = {
   [DeviceStateEnum.INACTIVE]: '#EAB308', // 待激活 - 黄色
   [DeviceStateEnum.ONLINE]: '#22C55E', // 在线 - 绿色
   [DeviceStateEnum.OFFLINE]: '#9CA3AF', // 离线 - 灰色
-};
+}; // 设备状态颜色映射
 
-/** 获取设备状态配置 */
+/** 获取设备状态配置；名称走字典，颜色用本地映射 */
 function getStateConfig(state: number): { color: string; name: string } {
-  const stateNames: Record<number, string> = {
-    [DeviceStateEnum.INACTIVE]: '待激活',
-    [DeviceStateEnum.ONLINE]: '在线',
-    [DeviceStateEnum.OFFLINE]: '离线',
-  };
   return {
-    name: stateNames[state] || '未知',
+    name: getDictLabel(DICT_TYPE.IOT_DEVICE_STATE, state) || '未知',
     color: stateColorMap[state] || '#909399',
   };
 }
@@ -115,19 +118,22 @@ function initMap() {
       // 信息窗口打开后绑定链接点击事件
       infoWindow.addEventListener('open', () => {
         setTimeout(() => {
-          const link = document.querySelector('.device-link');
-          if (link) {
-            link.addEventListener('click', (e) => {
-              e.preventDefault();
-              const deviceId = e.target as HTMLElement.dataset.id;
-              if (deviceId) {
-                router.push({
-                  name: 'IoTDeviceDetail',
-                  params: { id: deviceId },
-                });
-              }
-            });
+          const link = document.querySelector(
+            '.BMap_bubble_content .device-link',
+          );
+          if (!link) {
+            return;
           }
+          link.addEventListener('click', (e) => {
+            e.preventDefault();
+            if (device.id === undefined || device.id === null) {
+              return;
+            }
+            router.push({
+              name: 'IoTDeviceDetail',
+              params: { id: device.id },
+            });
+          });
         }, 100);
       });
 
@@ -155,6 +161,8 @@ async function init() {
     return;
   }
   await loadBaiduMapSdk();
+  // 等待 v-show 容器渲染完成；SDK 缓存命中时上一行会同步 resolve，DOM 来不及切换
+  await nextTick();
   initMap();
 }
 
@@ -176,28 +184,18 @@ onUnmounted(() => {
   <Card class="h-full" title="设备分布地图">
     <template #extra>
       <div class="flex items-center gap-4 text-sm">
-        <span class="flex items-center gap-1">
-          <span
-            class="inline-block h-3 w-3 rounded-full"
-            :style="{ backgroundColor: stateColorMap[DeviceStateEnum.ONLINE] }"
-          ></span>
-          <span class="text-gray-500">在线</span>
-        </span>
-        <span class="flex items-center gap-1">
-          <span
-            class="inline-block h-3 w-3 rounded-full"
-            :style="{ backgroundColor: stateColorMap[DeviceStateEnum.OFFLINE] }"
-          ></span>
-          <span class="text-gray-500">离线</span>
-        </span>
-        <span class="flex items-center gap-1">
+        <span
+          v-for="item in stateOptions"
+          :key="item.value"
+          class="flex items-center gap-1"
+        >
           <span
             class="inline-block h-3 w-3 rounded-full"
             :style="{
-              backgroundColor: stateColorMap[DeviceStateEnum.INACTIVE],
+              backgroundColor: stateColorMap[item.value],
             }"
           ></span>
-          <span class="text-gray-500">待激活</span>
+          <span class="text-gray-500">{{ item.label }}</span>
         </span>
       </div>
     </template>
diff --git a/apps/web-antdv-next/src/views/iot/home/modules/device-state-count-card.vue b/apps/web-antdv-next/src/views/iot/home/modules/device-state-count-card.vue
index b6a33b2bf..154b7acbc 100644
--- a/apps/web-antdv-next/src/views/iot/home/modules/device-state-count-card.vue
+++ b/apps/web-antdv-next/src/views/iot/home/modules/device-state-count-card.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IotStatisticsApi } from '#/api/iot/statistics';
 
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
@@ -29,7 +29,7 @@ const { renderEcharts: renderInactiveChart } = useEcharts(
 /** 是否有数据 */
 const hasData = computed(() => {
   if (!props.statsData) return false;
-  return props.statsData.deviceCount !== 0;
+  return props.statsData.deviceCount !== -1;
 });
 
 /** 初始化图表 */
diff --git a/apps/web-antdv-next/src/views/iot/home/modules/message-trend-card.vue b/apps/web-antdv-next/src/views/iot/home/modules/message-trend-card.vue
index cd3ea987a..1bcd0789f 100644
--- a/apps/web-antdv-next/src/views/iot/home/modules/message-trend-card.vue
+++ b/apps/web-antdv-next/src/views/iot/home/modules/message-trend-card.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { Dayjs } from 'dayjs';
 
 import type { IotStatisticsApi } from '#/api/iot/statistics';
@@ -22,16 +22,17 @@ defineOptions({ name: 'MessageTrendCard' });
 const messageChartRef = ref();
 const { renderEcharts } = useEcharts(messageChartRef);
 
-const loading = ref(false);
+const loading = ref(false); // 加载状态
 const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>(
   [],
-);
+); // 消息趋势数据
+const isFirstMount = ref(true); // 首次挂载标记，用于跳过子组件 mount 时的默认 emit
 
 /** 时间范围（仅日期，不包含时分秒） */
 const dateRange = ref<[string, string]>([
-  // 默认显示最近一周的数据（包含今天和前六天）
-  dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
-  dayjs().format('YYYY-MM-DD'),
+  // 默认显示最近一周的数据（截至昨天）
+  dayjs().subtract(7, 'day').format('YYYY-MM-DD'),
+  dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
 ]);
 
 /** 将日期范围转换为带时分秒的格式 */
@@ -74,6 +75,11 @@ function handleDateRangeChange(times?: [Dayjs, Dayjs]) {
   ];
   // 将选择的日期转换为带时分秒的格式（开始日期 00:00:00，结束日期 23:59:59）
   queryParams.times = formatDateRangeWithTime(dateRange.value);
+  if (isFirstMount.value) {
+    // 子组件 ShortcutDateRangePicker mount 时会 emit 一次默认日期范围，跳过 fetch；
+    // 首次请求统一由父组件 onMounted 发起，避免双请求
+    return;
+  }
   handleQuery();
 }
 
@@ -91,6 +97,8 @@ async function fetchMessageData() {
   loading.value = true;
   try {
     messageData.value = await getDeviceMessageSummaryByDate(queryParams);
+  } catch {
+    messageData.value = [];
   } finally {
     loading.value = false;
     await renderChartWhenReady();
@@ -122,10 +130,12 @@ async function renderChartWhenReady() {
   await nextTick();
   initChart();
 }
-
-/** 组件挂载时查询数据 */
+// 父组件挂载后统一发起首次请求；
+// 原因：子组件 ShortcutDateRangePicker 早期 emit 触发的请求落在 useEcharts isActiveRef = false 阶段，会被 renderEcharts 静默丢弃；
+// 通过 handleDateRangeChange 在 isFirstMount=true 时跳过 fetch，由这里统一发起一次，避免双请求
 onMounted(() => {
   fetchMessageData();
+  isFirstMount.value = false;
 });
 </script>
 
diff --git a/apps/web-antdv-next/src/views/iot/ota/data.ts b/apps/web-antdv-next/src/views/iot/ota/data.ts
deleted file mode 100644
index a873d4d85..000000000
--- a/apps/web-antdv-next/src/views/iot/ota/data.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { getSimpleProductList } from '#/api/iot/product/product';
-import { getRangePickerDefaultProps } from '#/utils';
-
-/** 新增/修改固件的表单 */
-export function useFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      component: 'Input',
-      fieldName: 'id',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      fieldName: 'name',
-      label: '固件名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入固件名称',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'productId',
-      label: '所属产品',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleProductList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择产品',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'version',
-      label: '版本号',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入版本号',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'description',
-      label: '固件描述',
-      component: 'TextArea',
-      componentProps: {
-        placeholder: '请输入固件描述',
-        rows: 3,
-      },
-    },
-    {
-      fieldName: 'fileUrl',
-      label: '固件文件',
-      component: 'Upload',
-      componentProps: {
-        maxCount: 1,
-        accept: '.bin,.hex,.zip',
-      },
-      rules: 'required',
-      help: '支持上传 .bin、.hex、.zip 格式的固件文件',
-    },
-  ];
-}
-
-/** 列表的搜索表单 */
-export function useGridFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'name',
-      label: '固件名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入固件名称',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'productId',
-      label: '产品',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleProductList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择产品',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-  ];
-}
-
-/** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
-  return [
-    {
-      type: 'checkbox',
-      width: 50,
-      fixed: 'left',
-    },
-    {
-      field: 'id',
-      title: '固件编号',
-      width: 100,
-    },
-    {
-      field: 'name',
-      title: '固件名称',
-      minWidth: 150,
-    },
-    {
-      field: 'version',
-      title: '版本号',
-      width: 120,
-    },
-    {
-      field: 'productName',
-      title: '所属产品',
-      minWidth: 150,
-    },
-    {
-      field: 'description',
-      title: '固件描述',
-      minWidth: 200,
-      showOverflow: 'tooltip',
-    },
-    {
-      field: 'fileSize',
-      title: '文件大小',
-      width: 120,
-      formatter: ({ cellValue }) => {
-        if (!cellValue) return '-';
-        const kb = cellValue / 1024;
-        if (kb < 1024) return `${kb.toFixed(2)} KB`;
-        return `${(kb / 1024).toFixed(2)} MB`;
-      },
-    },
-    {
-      field: 'status',
-      title: '状态',
-      width: 100,
-      formatter: ({ cellValue }) => {
-        return cellValue === 1 ? '启用' : '禁用';
-      },
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      width: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '操作',
-      width: 160,
-      fixed: 'right',
-      slots: { default: 'actions' },
-    },
-  ];
-}
diff --git a/apps/web-antdv-next/src/views/iot/ota/firmware/data.ts b/apps/web-antdv-next/src/views/iot/ota/firmware/data.ts
index 298cd340b..a8d52702f 100644
--- a/apps/web-antdv-next/src/views/iot/ota/firmware/data.ts
+++ b/apps/web-antdv-next/src/views/iot/ota/firmware/data.ts
@@ -1,9 +1,44 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotProductApi } from '#/api/iot/product/product';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { formatDateTime } from '@vben/utils';
 
 import { getSimpleProductList } from '#/api/iot/product/product';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let productList: IotProductApi.Product[] = [];
+getSimpleProductList().then((data) => (productList = data));
+
+/** 根据产品 ID 取产品名称 */
+export function getProductName(productId?: number): string {
+  if (!productId) {
+    return '-';
+  }
+  return productList.find((product) => product.id === productId)?.name || '-';
+}
+
+/** 固件详情的描述字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    { field: 'name', label: '固件名称' },
+    {
+      field: 'productName',
+      label: '所属产品',
+      render: (val) => val || '-',
+    },
+    { field: 'version', label: '固件版本' },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => (val ? (formatDateTime(val) as string) : '-'),
+    },
+    { field: 'description', label: '固件描述', span: 2 },
+  ];
+}
+
 /** 新增/修改固件的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -34,7 +69,13 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         placeholder: '请选择产品',
       },
-      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+        rules: (values) => (values.id ? null : 'required'),
+      },
     },
     {
       fieldName: 'version',
@@ -43,12 +84,18 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         placeholder: '请输入版本号',
       },
-      rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+        rules: (values) => (values.id ? null : 'required'),
+      },
     },
     {
       fieldName: 'description',
       label: '固件描述',
-      component: 'TextArea',
+      component: 'Textarea',
       componentProps: {
         placeholder: '请输入固件描述',
         rows: 3,
@@ -60,11 +107,17 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'FileUpload',
       componentProps: {
         maxNumber: 1,
-        accept: ['bin', 'hex', 'zip'],
+        accept: ['bin', 'zip', 'pdf'],
         maxSize: 50,
-        helpText: '支持上传 .bin、.hex、.zip 格式的固件文件，最大 50MB',
+        helpText: '支持上传 .bin、.zip、.pdf 格式的固件文件，最大 50MB',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+        rules: (values) => (values.id ? null : 'required'),
       },
-      rules: 'required',
     },
   ];
 }
@@ -108,7 +161,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
-    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '固件编号',
@@ -133,7 +185,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'productId',
       title: '所属产品',
       minWidth: 150,
-      slots: { default: 'product' },
+      slots: { default: 'productName' },
     },
     {
       field: 'fileUrl',
diff --git a/apps/web-antdv-next/src/views/iot/ota/firmware/detail/index.vue b/apps/web-antdv-next/src/views/iot/ota/firmware/detail/index.vue
new file mode 100644
index 000000000..7f9ff9a36
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/firmware/detail/index.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
+
+import { onMounted, ref } from 'vue';
+import { useRoute } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+
+import { getOtaFirmware } from '#/api/iot/ota/firmware';
+import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
+
+import OtaTaskList from '../../task/modules/list.vue';
+import UpgradeStatistics from '../../task/modules/statistics.vue';
+import FirmwareInfo from './modules/info.vue';
+
+const route = useRoute();
+
+const firmwareId = ref(Number(route.params.id));
+const firmwareLoading = ref(false);
+const firmware = ref<IoTOtaFirmwareApi.Firmware>();
+
+const firmwareStatisticsLoading = ref(false);
+const firmwareStatistics = ref<Record<string, number>>({});
+
+/** 获取固件信息 */
+async function getFirmwareInfo() {
+  firmwareLoading.value = true;
+  try {
+    firmware.value = await getOtaFirmware(firmwareId.value);
+  } finally {
+    firmwareLoading.value = false;
+  }
+}
+
+/** 获取升级统计 */
+async function getStatistics() {
+  firmwareStatisticsLoading.value = true;
+  try {
+    firmwareStatistics.value = await getOtaTaskRecordStatusStatistics(
+      firmwareId.value,
+    );
+  } finally {
+    firmwareStatisticsLoading.value = false;
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getFirmwareInfo();
+  getStatistics();
+});
+</script>
+
+<template>
+  <Page>
+    <!-- 固件信息 -->
+    <FirmwareInfo :firmware="firmware" :loading="firmwareLoading" />
+    <!-- 升级设备统计 -->
+    <div class="mt-4">
+      <UpgradeStatistics
+        :loading="firmwareStatisticsLoading"
+        :statistics="firmwareStatistics"
+      />
+    </div>
+    <!-- 任务管理 -->
+    <div v-if="firmware?.productId" class="mt-4">
+      <OtaTaskList
+        :firmware-id="firmwareId"
+        :product-id="firmware.productId"
+        @success="getStatistics"
+      />
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/firmware/detail/modules/info.vue b/apps/web-antdv-next/src/views/iot/ota/firmware/detail/modules/info.vue
new file mode 100644
index 000000000..6f40f3e45
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/firmware/detail/modules/info.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
+
+import { Card } from 'antdv-next';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../../data';
+
+defineProps<{
+  firmware?: IoTOtaFirmwareApi.Firmware;
+  loading?: boolean;
+}>();
+
+const [Description] = useDescription({
+  bordered: true,
+  column: 3,
+  schema: useDetailSchema(),
+});
+</script>
+
+<template>
+  <Card title="固件信息" :loading="loading">
+    <Description :data="firmware" />
+  </Card>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/firmware/index.vue b/apps/web-antdv-next/src/views/iot/ota/firmware/index.vue
index f39d4ae67..13f331313 100644
--- a/apps/web-antdv-next/src/views/iot/ota/firmware/index.vue
+++ b/apps/web-antdv-next/src/views/iot/ota/firmware/index.vue
@@ -13,10 +13,12 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteOtaFirmware, getOtaFirmwarePage } from '#/api/iot/ota/firmware';
 import { $t } from '#/locales';
 
-import OtaFirmwareForm from '../modules/ota-firmware-form.vue';
-import { useGridColumns, useGridFormSchema } from './data';
-
-defineOptions({ name: 'IoTOtaFirmware' });
+import {
+  getProductName,
+  useGridColumns,
+  useGridFormSchema,
+} from './data';
+import OtaFirmwareForm from './modules/form.vue';
 
 const { push } = useRouter();
 
@@ -47,7 +49,7 @@ async function handleDelete(row: IoTOtaFirmwareApi.Firmware) {
     duration: 0,
   });
   try {
-    await deleteOtaFirmware(row.id as number);
+    await deleteOtaFirmware(row.id!);
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
@@ -62,6 +64,11 @@ function handleDetail(row: IoTOtaFirmwareApi.Firmware) {
   push({ name: 'IoTOtaFirmwareDetail', params: { id: row.id } });
 }
 
+/** 跳转到产品详情 */
+function handleOpenProductDetail(productId: number) {
+  push({ name: 'IoTProductDetail', params: { id: productId } });
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -104,17 +111,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('ui.actionTitle.create', ['固件']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['iot:ota-firmware:create'],
               onClick: handleCreate,
             },
           ]"
         />
       </template>
-
-      <!-- 产品名称列 -->
-      <template #product="{ row }">
-        <span class="text-gray-700">{{ row.productName || '未知产品' }}</span>
+      <!-- 所属产品列：点击跳产品详情 -->
+      <template #productName="{ row }">
+        <a
+          v-if="row.productId && getProductName(row.productId) !== '-'"
+          class="cursor-pointer text-primary hover:underline"
+          @click="handleOpenProductDetail(row.productId)"
+        >
+          {{ getProductName(row.productId) }}
+        </a>
+        <span v-else class="text-gray-400">-</span>
       </template>
-
       <!-- 固件文件列 -->
       <template #fileUrl="{ row }">
         <div
@@ -136,8 +149,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </div>
         <span v-else class="text-gray-400">无文件</span>
       </template>
-
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -145,12 +156,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.detail'),
               type: 'link',
               icon: ACTION_ICON.VIEW,
+              auth: ['iot:ota-firmware:query'],
               onClick: handleDetail.bind(null, row),
             },
             {
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['iot:ota-firmware:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -158,6 +171,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:ota-firmware:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-antdv-next/src/views/iot/ota/modules/ota-firmware-form.vue b/apps/web-antdv-next/src/views/iot/ota/firmware/modules/form.vue
similarity index 77%
rename from apps/web-antdv-next/src/views/iot/ota/modules/ota-firmware-form.vue
rename to apps/web-antdv-next/src/views/iot/ota/firmware/modules/form.vue
index 3dc255da5..3aa4407bc 100644
--- a/apps/web-antdv-next/src/views/iot/ota/modules/ota-firmware-form.vue
+++ b/apps/web-antdv-next/src/views/iot/ota/firmware/modules/form.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
 
 import { computed, ref } from 'vue';
@@ -15,13 +15,9 @@ import {
 } from '#/api/iot/ota/firmware';
 import { $t } from '#/locales';
 
-import { useFormSchema } from '../firmware/data';
+import { useFormSchema } from '../data';
 
-defineOptions({ name: 'IoTOtaFirmwareForm' });
-
-const emit = defineEmits<{
-  success: [];
-}>();
+const emit = defineEmits(['success']);
 
 const formData = ref<IoTOtaFirmwareApi.Firmware>();
 
@@ -32,13 +28,15 @@ const getTitle = computed(() => {
 });
 
 const [Form, formApi] = useVbenForm({
-  schema: useFormSchema(),
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
   },
   layout: 'horizontal',
+  schema: useFormSchema(),
   showDefaultActions: false,
 });
 
@@ -49,8 +47,15 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    // 提交表单
-    const data = (await formApi.getValues()) as IoTOtaFirmwareApi.Firmware;
+    // 提交表单：编辑态只提交 id / name / description，其它字段固定不变
+    const values = (await formApi.getValues()) as IoTOtaFirmwareApi.Firmware;
+    const data: IoTOtaFirmwareApi.Firmware = formData.value?.id
+      ? {
+          id: formData.value.id,
+          name: values.name,
+          description: values.description,
+        }
+      : values;
     try {
       await (formData.value?.id
         ? updateOtaFirmware(data)
diff --git a/apps/web-antdv-next/src/views/iot/ota/index.vue b/apps/web-antdv-next/src/views/iot/ota/index.vue
deleted file mode 100644
index 83c98ef95..000000000
--- a/apps/web-antdv-next/src/views/iot/ota/index.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
-
-import { Page, useVbenModal } from '@vben/common-ui';
-
-import { message } from 'antdv-next';
-
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteOtaFirmware, getOtaFirmwarePage } from '#/api/iot/ota/firmware';
-import { $t } from '#/locales';
-
-import { useGridColumns, useGridFormSchema } from './data';
-import OtaFirmwareForm from './modules/ota-firmware-form.vue';
-
-defineOptions({ name: 'IoTOtaFirmware' });
-
-const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: OtaFirmwareForm,
-  destroyOnClose: true,
-});
-
-/** 刷新表格 */
-function handleRefresh() {
-  gridApi.query();
-}
-
-/** 创建固件 */
-function handleCreate() {
-  formModalApi.setData(null).open();
-}
-
-/** 编辑固件 */
-function handleEdit(row: IoTOtaFirmwareApi.Firmware) {
-  formModalApi.setData(row).open();
-}
-
-/** 删除固件 */
-async function handleDelete(row: IoTOtaFirmwareApi.Firmware) {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
-  });
-  try {
-    await deleteOtaFirmware(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
-    handleRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
-  gridOptions: {
-    columns: useGridColumns(),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getOtaFirmwarePage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<IoTOtaFirmwareApi.Firmware>,
-});
-</script>
-
-<template>
-  <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
-    <Grid table-title="OTA 固件列表">
-      <template #toolbar-tools>
-        <TableAction
-          :actions="[
-            {
-              label: $t('ui.actionTitle.create', ['固件']),
-              type: 'primary',
-              icon: ACTION_ICON.ADD,
-              auth: ['iot:ota-firmware:create'],
-              onClick: handleCreate,
-            },
-          ]"
-        />
-      </template>
-      <template #actions="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: $t('common.edit'),
-              type: 'link',
-              icon: ACTION_ICON.EDIT,
-              auth: ['iot:ota-firmware:update'],
-              onClick: handleEdit.bind(null, row),
-            },
-            {
-              label: $t('common.delete'),
-              type: 'link',
-              danger: true,
-              icon: ACTION_ICON.DELETE,
-              auth: ['iot:ota-firmware:delete'],
-              popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
-                confirm: handleDelete.bind(null, row),
-              },
-            },
-          ]"
-        />
-      </template>
-    </Grid>
-  </Page>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/modules/detail/index.vue b/apps/web-antdv-next/src/views/iot/ota/modules/detail/index.vue
deleted file mode 100644
index cda8f8848..000000000
--- a/apps/web-antdv-next/src/views/iot/ota/modules/detail/index.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<script setup lang="ts">
-import type { IoTOtaFirmware } from '#/api/iot/ota/firmware';
-
-import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { IoTOtaTaskRecordStatusEnum } from '@vben/constants';
-import { formatDate } from '@vben/utils';
-
-import { Card, Col, Descriptions, Row } from 'antdv-next';
-
-import { getOtaFirmware } from '#/api/iot/ota/firmware';
-import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
-
-import OtaTaskList from '../task/ota-task-list.vue';
-
-/** IoT OTA 固件详情 */
-defineOptions({ name: 'IoTOtaFirmwareDetail' });
-
-const route = useRoute();
-
-const firmwareId = ref(Number(route.params.id));
-const firmwareLoading = ref(false);
-const firmware = ref<IoTOtaFirmware>({} as IoTOtaFirmware);
-
-const firmwareStatisticsLoading = ref(false);
-const firmwareStatistics = ref<Record<string, number>>({});
-
-/** 获取固件信息 */
-async function getFirmwareInfo() {
-  firmwareLoading.value = true;
-  try {
-    firmware.value = await getOtaFirmware(firmwareId.value);
-  } finally {
-    firmwareLoading.value = false;
-  }
-}
-
-/** 获取升级统计 */
-async function getStatistics() {
-  firmwareStatisticsLoading.value = true;
-  try {
-    firmwareStatistics.value = await getOtaTaskRecordStatusStatistics(
-      firmwareId.value,
-    );
-  } finally {
-    firmwareStatisticsLoading.value = false;
-  }
-}
-
-/** 初始化 */
-onMounted(() => {
-  getFirmwareInfo();
-  getStatistics();
-});
-</script>
-
-<template>
-  <div class="p-4">
-    <!-- 固件信息 -->
-    <Card title="固件信息" class="mb-3" :loading="firmwareLoading">
-      <Descriptions :column="3" bordered size="small">
-        <DescriptionsItem label="固件名称">
-          {{ firmware?.name }}
-        </DescriptionsItem>
-        <DescriptionsItem label="所属产品">
-          {{ firmware?.productName }}
-        </DescriptionsItem>
-        <DescriptionsItem label="固件版本">
-          {{ firmware?.version }}
-        </DescriptionsItem>
-        <DescriptionsItem label="创建时间">
-          {{
-            firmware?.createTime
-              ? formatDate(firmware.createTime, 'YYYY-MM-DD HH:mm:ss')
-              : '-'
-          }}
-        </DescriptionsItem>
-        <DescriptionsItem label="固件描述" :span="2">
-          {{ firmware?.description }}
-        </DescriptionsItem>
-      </Descriptions>
-    </Card>
-
-    <!-- 升级设备统计 -->
-    <Card
-      title="升级设备统计"
-      class="mb-3"
-      :loading="firmwareStatisticsLoading"
-    >
-      <Row :gutter="20" class="py-3">
-        <Col :span="6">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
-          >
-            <div class="mb-1 text-3xl font-bold text-blue-500">
-              {{
-                Object.values(firmwareStatistics).reduce(
-                  (sum: number, count) => sum + (count || 0),
-                  0,
-                ) || 0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">升级设备总数</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
-          >
-            <div class="mb-1 text-3xl font-bold text-gray-400">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.PENDING.value] ||
-                0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">待推送</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
-          >
-            <div class="mb-1 text-3xl font-bold text-blue-400">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.PUSHED.value] || 0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">已推送</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
-          >
-            <div class="mb-1 text-3xl font-bold text-yellow-500">
-              {{
-                firmwareStatistics[
-                  IoTOtaTaskRecordStatusEnum.UPGRADING.value
-                ] || 0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">正在升级</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
-          >
-            <div class="mb-1 text-3xl font-bold text-green-500">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.SUCCESS.value] ||
-                0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">升级成功</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
-          >
-            <div class="mb-1 text-3xl font-bold text-red-500">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.FAILURE.value] ||
-                0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">升级失败</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-3 text-center"
-          >
-            <div class="mb-1 text-3xl font-bold text-gray-400">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.CANCELED.value] ||
-                0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">升级取消</div>
-          </div>
-        </Col>
-      </Row>
-    </Card>
-
-    <!-- 任务管理 -->
-    <OtaTaskList
-      v-if="firmware?.productId"
-      :firmware-id="firmwareId"
-      :product-id="firmware.productId"
-      @success="getStatistics"
-    />
-  </div>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/modules/firmware-detail/index.vue b/apps/web-antdv-next/src/views/iot/ota/modules/firmware-detail/index.vue
deleted file mode 100644
index 1e4cc3adf..000000000
--- a/apps/web-antdv-next/src/views/iot/ota/modules/firmware-detail/index.vue
+++ /dev/null
@@ -1,196 +0,0 @@
-<script setup lang="ts">
-import type { IoTOtaFirmware } from '#/api/iot/ota/firmware';
-
-import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
-
-import { IoTOtaTaskRecordStatusEnum } from '@vben/constants';
-import { formatDate } from '@vben/utils';
-
-import { Card, Col, Descriptions, Row } from 'antdv-next';
-
-import { getOtaFirmware } from '#/api/iot/ota/firmware';
-import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
-
-import OtaTaskList from '../task/ota-task-list.vue';
-
-/** IoT OTA 固件详情 */
-defineOptions({ name: 'IoTOtaFirmwareDetail' });
-
-const route = useRoute();
-
-const firmwareId = ref(Number(route.params.id));
-const firmwareLoading = ref(false);
-const firmware = ref<IoTOtaFirmware>({} as IoTOtaFirmware);
-
-const firmwareStatisticsLoading = ref(false);
-const firmwareStatistics = ref<Record<string, number>>({});
-
-/** 获取固件信息 */
-async function getFirmwareInfo() {
-  firmwareLoading.value = true;
-  try {
-    firmware.value = await getOtaFirmware(firmwareId.value);
-  } finally {
-    firmwareLoading.value = false;
-  }
-}
-
-/** 获取升级统计 */
-async function getStatistics() {
-  firmwareStatisticsLoading.value = true;
-  try {
-    firmwareStatistics.value = await getOtaTaskRecordStatusStatistics(
-      firmwareId.value,
-    );
-  } finally {
-    firmwareStatisticsLoading.value = false;
-  }
-}
-
-/** 初始化 */
-onMounted(() => {
-  getFirmwareInfo();
-  getStatistics();
-});
-</script>
-
-<template>
-  <div class="p-4">
-    <!-- 固件信息 -->
-    <Card title="固件信息" class="mb-5" :loading="firmwareLoading">
-      <Descriptions :column="3" bordered>
-        <DescriptionsItem label="固件名称">
-          {{ firmware?.name }}
-        </DescriptionsItem>
-        <DescriptionsItem label="所属产品">
-          {{ firmware?.productName }}
-        </DescriptionsItem>
-        <DescriptionsItem label="固件版本">
-          {{ firmware?.version }}
-        </DescriptionsItem>
-        <DescriptionsItem label="创建时间">
-          {{
-            firmware?.createTime
-              ? formatDate(firmware.createTime, 'YYYY-MM-DD HH:mm:ss')
-              : '-'
-          }}
-        </DescriptionsItem>
-        <DescriptionsItem label="固件描述" :span="2">
-          {{ firmware?.description }}
-        </DescriptionsItem>
-      </Descriptions>
-    </Card>
-
-    <!-- 升级设备统计 -->
-    <Card
-      title="升级设备统计"
-      class="mb-5"
-      :loading="firmwareStatisticsLoading"
-    >
-      <Row :gutter="20" class="py-5">
-        <Col :span="6">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-          >
-            <div class="mb-2 text-3xl font-bold text-blue-500">
-              {{
-                Object.values(firmwareStatistics).reduce(
-                  (sum: number, count) => sum + (count || 0),
-                  0,
-                ) || 0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">升级设备总数</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-          >
-            <div class="mb-2 text-3xl font-bold text-gray-400">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.PENDING.value] ||
-                0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">待推送</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-          >
-            <div class="mb-2 text-3xl font-bold text-blue-400">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.PUSHED.value] || 0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">已推送</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-          >
-            <div class="mb-2 text-3xl font-bold text-yellow-500">
-              {{
-                firmwareStatistics[
-                  IoTOtaTaskRecordStatusEnum.UPGRADING.value
-                ] || 0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">正在升级</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-          >
-            <div class="mb-2 text-3xl font-bold text-green-500">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.SUCCESS.value] ||
-                0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">升级成功</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-          >
-            <div class="mb-2 text-3xl font-bold text-red-500">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.FAILURE.value] ||
-                0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">升级失败</div>
-          </div>
-        </Col>
-        <Col :span="3">
-          <div
-            class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-          >
-            <div class="mb-2 text-3xl font-bold text-gray-400">
-              {{
-                firmwareStatistics[IoTOtaTaskRecordStatusEnum.CANCELED.value] ||
-                0
-              }}
-            </div>
-            <div class="text-sm text-gray-600">升级取消</div>
-          </div>
-        </Col>
-      </Row>
-    </Card>
-
-    <!-- 任务管理 -->
-    <OtaTaskList
-      v-if="firmware?.productId"
-      :firmware-id="firmwareId"
-      :product-id="firmware.productId"
-      @success="getStatistics"
-    />
-  </div>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/modules/task/ota-task-detail.vue b/apps/web-antdv-next/src/views/iot/ota/modules/task/ota-task-detail.vue
deleted file mode 100644
index d45630df9..000000000
--- a/apps/web-antdv-next/src/views/iot/ota/modules/task/ota-task-detail.vue
+++ /dev/null
@@ -1,411 +0,0 @@
-<script setup lang="ts">
-import type { TableColumnsType } from 'antdv-next';
-
-import type { OtaTask } from '#/api/iot/ota/task';
-import type { OtaTaskRecord } from '#/api/iot/ota/task/record';
-
-import { computed, reactive, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { IoTOtaTaskRecordStatusEnum } from '@vben/constants';
-import { formatDate } from '@vben/utils';
-
-import {
-  Card,
-  Col,
-  Descriptions,
-  message,
-  Modal,
-  Row,
-  Table,
-  Tabs,
-  Tag,
-} from 'antdv-next';
-
-import { getOtaTask } from '#/api/iot/ota/task';
-import {
-  cancelOtaTaskRecord,
-  getOtaTaskRecordPage,
-  getOtaTaskRecordStatusStatistics,
-} from '#/api/iot/ota/task/record';
-
-/** OTA 任务详情组件 */
-defineOptions({ name: 'OtaTaskDetail' });
-
-const emit = defineEmits(['success']);
-
-const taskId = ref<number>();
-const taskLoading = ref(false);
-const task = ref<OtaTask>({} as OtaTask);
-
-const taskStatisticsLoading = ref(false);
-const taskStatistics = ref<Record<string, number>>({});
-
-const recordLoading = ref(false);
-const recordList = ref<OtaTaskRecord[]>([]);
-const recordTotal = ref(0);
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  taskId: undefined as number | undefined,
-  status: undefined as number | undefined,
-});
-const activeTab = ref('');
-
-/** 状态标签配置 */
-const statusTabs = computed(() => {
-  const tabs = [{ key: '', label: '全部设备' }];
-  Object.values(IoTOtaTaskRecordStatusEnum).forEach((status) => {
-    tabs.push({
-      key: status.value.toString(),
-      label: status.label,
-    });
-  });
-  return tabs;
-});
-
-/** 表格列配置 */
-const columns: TableColumnsType = [
-  {
-    title: '设备名称',
-    dataIndex: 'deviceName',
-    key: 'deviceName',
-    align: 'center' as const,
-  },
-  {
-    title: '当前版本',
-    dataIndex: 'fromFirmwareVersion',
-    key: 'fromFirmwareVersion',
-    align: 'center' as const,
-  },
-  {
-    title: '升级状态',
-    dataIndex: 'status',
-    key: 'status',
-    align: 'center' as const,
-    width: 120,
-  },
-  {
-    title: '升级进度',
-    dataIndex: 'progress',
-    key: 'progress',
-    align: 'center' as const,
-    width: 120,
-  },
-  {
-    title: '状态描述',
-    dataIndex: 'description',
-    key: 'description',
-    align: 'center' as const,
-  },
-  {
-    title: '更新时间',
-    dataIndex: 'updateTime',
-    key: 'updateTime',
-    align: 'center' as const,
-    width: 180,
-    render: ({ text }: any) => formatDate(text, 'YYYY-MM-DD HH:mm:ss'),
-  },
-  {
-    title: '操作',
-    key: 'action',
-    align: 'center' as const,
-    width: 80,
-  },
-];
-
-const [ModalComponent, modalApi] = useVbenModal();
-
-/** 获取任务详情 */
-async function getTaskInfo() {
-  if (!taskId.value) {
-    return;
-  }
-  taskLoading.value = true;
-  try {
-    task.value = await getOtaTask(taskId.value);
-  } finally {
-    taskLoading.value = false;
-  }
-}
-
-/** 获取统计数据 */
-async function getStatistics() {
-  if (!taskId.value) {
-    return;
-  }
-  taskStatisticsLoading.value = true;
-  try {
-    taskStatistics.value = await getOtaTaskRecordStatusStatistics(
-      undefined,
-      taskId.value,
-    );
-  } finally {
-    taskStatisticsLoading.value = false;
-  }
-}
-
-/** 获取升级记录列表 */
-async function getRecordList() {
-  if (!taskId.value) {
-    return;
-  }
-  recordLoading.value = true;
-  try {
-    queryParams.taskId = taskId.value;
-    const data = await getOtaTaskRecordPage(queryParams);
-    recordList.value = data.list || [];
-    recordTotal.value = data.total || 0;
-  } finally {
-    recordLoading.value = false;
-  }
-}
-
-/** 切换标签 */
-function handleTabChange(tabKey: number | string) {
-  activeTab.value = String(tabKey);
-  queryParams.pageNo = 1;
-  queryParams.status =
-    activeTab.value === '' ? undefined : Number.parseInt(String(tabKey));
-  getRecordList();
-}
-
-/** 分页变化 */
-function handleTableChange(pagination: any) {
-  queryParams.pageNo = pagination.current;
-  queryParams.pageSize = pagination.pageSize;
-  getRecordList();
-}
-
-/** 取消升级 */
-async function handleCancelUpgrade(record: OtaTaskRecord) {
-  Modal.confirm({
-    title: '确认取消',
-    content: '确认要取消该设备的升级任务吗？',
-    async onOk() {
-      try {
-        await cancelOtaTaskRecord(record.id!);
-        message.success('取消成功');
-        await getRecordList();
-        await getStatistics();
-        await getTaskInfo();
-        emit('success');
-      } catch (error) {
-        console.error('取消升级失败', error);
-      }
-    },
-  });
-}
-
-/** 打开弹窗 */
-function open(id: number) {
-  modalApi.open();
-  taskId.value = id;
-  activeTab.value = '';
-  queryParams.pageNo = 1;
-  queryParams.status = undefined;
-
-  // 加载数据
-  getTaskInfo();
-  getStatistics();
-  getRecordList();
-}
-
-/** 暴露方法 */
-defineExpose({ open });
-</script>
-
-<template>
-  <ModalComponent title="升级任务详情" class="w-5/6">
-    <div class="p-4">
-      <!-- 任务信息 -->
-      <Card title="任务信息" class="mb-5" :loading="taskLoading">
-        <Descriptions :column="3" bordered>
-          <DescriptionsItem label="任务编号">{{ task.id }}</DescriptionsItem>
-          <DescriptionsItem label="任务名称">
-            {{ task.name }}
-          </DescriptionsItem>
-          <DescriptionsItem label="升级范围">
-            <Tag v-if="task.deviceScope === 1" color="blue">全部设备</Tag>
-            <Tag v-else-if="task.deviceScope === 2" color="green">指定设备</Tag>
-            <Tag v-else>{{ task.deviceScope }}</Tag>
-          </DescriptionsItem>
-          <DescriptionsItem label="任务状态">
-            <Tag v-if="task.status === 0" color="orange">待执行</Tag>
-            <Tag v-else-if="task.status === 1" color="blue">执行中</Tag>
-            <Tag v-else-if="task.status === 2" color="green">已完成</Tag>
-            <Tag v-else-if="task.status === 3" color="red">已取消</Tag>
-            <Tag v-else>{{ task.status }}</Tag>
-          </DescriptionsItem>
-          <DescriptionsItem label="创建时间">
-            {{
-              task.createTime
-                ? formatDate(task.createTime, 'YYYY-MM-DD HH:mm:ss')
-                : '-'
-            }}
-          </DescriptionsItem>
-          <DescriptionsItem label="任务描述" :span="3">
-            {{ task.description }}
-          </DescriptionsItem>
-        </Descriptions>
-      </Card>
-
-      <!-- 任务升级设备统计 -->
-      <Card title="升级设备统计" class="mb-5" :loading="taskStatisticsLoading">
-        <Row :gutter="20" class="py-5">
-          <Col :span="6">
-            <div
-              class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-            >
-              <div class="mb-2 text-3xl font-bold text-blue-500">
-                {{
-                  Object.values(taskStatistics).reduce(
-                    (sum, count) => sum + (count || 0),
-                    0,
-                  ) || 0
-                }}
-              </div>
-              <div class="text-sm text-gray-600">升级设备总数</div>
-            </div>
-          </Col>
-          <Col :span="3">
-            <div
-              class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-            >
-              <div class="mb-2 text-3xl font-bold text-gray-400">
-                {{
-                  taskStatistics[IoTOtaTaskRecordStatusEnum.PENDING.value] || 0
-                }}
-              </div>
-              <div class="text-sm text-gray-600">待推送</div>
-            </div>
-          </Col>
-          <Col :span="3">
-            <div
-              class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-            >
-              <div class="mb-2 text-3xl font-bold text-blue-400">
-                {{
-                  taskStatistics[IoTOtaTaskRecordStatusEnum.PUSHED.value] || 0
-                }}
-              </div>
-              <div class="text-sm text-gray-600">已推送</div>
-            </div>
-          </Col>
-          <Col :span="3">
-            <div
-              class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-            >
-              <div class="mb-2 text-3xl font-bold text-yellow-500">
-                {{
-                  taskStatistics[IoTOtaTaskRecordStatusEnum.UPGRADING.value] ||
-                  0
-                }}
-              </div>
-              <div class="text-sm text-gray-600">正在升级</div>
-            </div>
-          </Col>
-          <Col :span="3">
-            <div
-              class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-            >
-              <div class="mb-2 text-3xl font-bold text-green-500">
-                {{
-                  taskStatistics[IoTOtaTaskRecordStatusEnum.SUCCESS.value] || 0
-                }}
-              </div>
-              <div class="text-sm text-gray-600">升级成功</div>
-            </div>
-          </Col>
-          <Col :span="3">
-            <div
-              class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-            >
-              <div class="mb-2 text-3xl font-bold text-red-500">
-                {{
-                  taskStatistics[IoTOtaTaskRecordStatusEnum.FAILURE.value] || 0
-                }}
-              </div>
-              <div class="text-sm text-gray-600">升级失败</div>
-            </div>
-          </Col>
-          <Col :span="3">
-            <div
-              class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
-            >
-              <div class="mb-2 text-3xl font-bold text-gray-400">
-                {{
-                  taskStatistics[IoTOtaTaskRecordStatusEnum.CANCELED.value] || 0
-                }}
-              </div>
-              <div class="text-sm text-gray-600">升级取消</div>
-            </div>
-          </Col>
-        </Row>
-      </Card>
-
-      <!-- 设备管理 -->
-      <Card title="升级设备记录">
-        <Tabs
-          v-model:active-key="activeTab"
-          @change="handleTabChange"
-          class="mb-4"
-        >
-          <TabPane v-for="tab in statusTabs" :key="tab.key" :tab="tab.label" />
-        </Tabs>
-
-        <Table
-          :columns="columns"
-          :data-source="recordList"
-          :loading="recordLoading"
-          :pagination="{
-            current: queryParams.pageNo,
-            pageSize: queryParams.pageSize,
-            total: recordTotal,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            showTotal: (total: number) => `共 ${total} 条`,
-          }"
-          @change="handleTableChange"
-        >
-          <template #bodyCell="{ column, record }">
-            <!-- 升级状态 -->
-            <template v-if="column.key === 'status'">
-              <Tag v-if="record.status === 0" color="default">待推送</Tag>
-              <Tag v-else-if="record.status === 1" color="blue">已推送</Tag>
-              <Tag v-else-if="record.status === 2" color="processing">
-                升级中
-              </Tag>
-              <Tag v-else-if="record.status === 3" color="success">成功</Tag>
-              <Tag v-else-if="record.status === 4" color="error">失败</Tag>
-              <Tag v-else-if="record.status === 5" color="warning">已取消</Tag>
-              <Tag v-else>{{ record.status }}</Tag>
-            </template>
-
-            <!-- 升级进度 -->
-            <template v-else-if="column.key === 'progress'">
-              {{ record.progress }}%
-            </template>
-
-            <!-- 操作 -->
-            <template v-else-if="column.key === 'action'">
-              <a
-                v-if="
-                  [
-                    IoTOtaTaskRecordStatusEnum.PENDING.value,
-                    IoTOtaTaskRecordStatusEnum.PUSHED.value,
-                    IoTOtaTaskRecordStatusEnum.UPGRADING.value,
-                  ].includes(record.status)
-                "
-                class="text-red-500"
-                @click="handleCancelUpgrade(record)"
-              >
-                取消
-              </a>
-            </template>
-          </template>
-        </Table>
-      </Card>
-    </div>
-  </ModalComponent>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/modules/task/ota-task-form.vue b/apps/web-antdv-next/src/views/iot/ota/modules/task/ota-task-form.vue
deleted file mode 100644
index 0a153ca38..000000000
--- a/apps/web-antdv-next/src/views/iot/ota/modules/task/ota-task-form.vue
+++ /dev/null
@@ -1,173 +0,0 @@
-<script setup lang="ts">
-import type { IotDeviceApi } from '#/api/iot/device/device';
-import type { OtaTask } from '#/api/iot/ota/task';
-
-import { computed, ref } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-import { IoTOtaTaskDeviceScopeEnum } from '@vben/constants';
-
-import { Form, Input, message, Select, Spin } from 'antdv-next';
-
-import { getDeviceListByProductId } from '#/api/iot/device/device';
-import { createOtaTask } from '#/api/iot/ota/task';
-
-/** IoT OTA 升级任务表单 */
-defineOptions({ name: 'OtaTaskForm' });
-
-const props = defineProps<{
-  firmwareId: number;
-  productId: number;
-}>();
-
-const emit = defineEmits(['success']);
-
-const formLoading = ref(false);
-const formData = ref<OtaTask>({
-  name: '',
-  deviceScope: IoTOtaTaskDeviceScopeEnum.ALL.value,
-  firmwareId: props.firmwareId,
-  description: '',
-  deviceIds: [],
-});
-const formRef = ref();
-const formRules = {
-  name: [
-    {
-      required: true,
-      message: '请输入任务名称',
-      trigger: 'blur' as const,
-      type: 'string' as const,
-    },
-  ],
-  deviceScope: [
-    {
-      required: true,
-      message: '请选择升级范围',
-      trigger: 'change' as const,
-      type: 'number' as const,
-    },
-  ],
-  deviceIds: [
-    {
-      required: true,
-      message: '请至少选择一个设备',
-      trigger: 'change' as const,
-      type: 'array' as const,
-    },
-  ],
-};
-const devices = ref<IotDeviceApi.Device[]>([]);
-
-/** 设备选项 */
-const deviceOptions = computed(() => {
-  return devices.value.map((device) => ({
-    label: device.nickname
-      ? `${device.deviceName} (${device.nickname})`
-      : device.deviceName,
-    value: device.id,
-  }));
-});
-
-/** 升级范围选项 */
-const deviceScopeOptions = computed(() => {
-  return Object.values(IoTOtaTaskDeviceScopeEnum).map((item) => ({
-    label: item.label,
-    value: item.value,
-  }));
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    try {
-      await formRef.value.validate();
-      modalApi.lock();
-      await createOtaTask(formData.value);
-      message.success('创建成功');
-      await modalApi.close();
-      emit('success');
-    } finally {
-      modalApi.unlock();
-    }
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      resetForm();
-      return;
-    }
-    // 加载设备列表
-    formLoading.value = true;
-    try {
-      devices.value = (await getDeviceListByProductId(props.productId)) || [];
-    } finally {
-      formLoading.value = false;
-    }
-  },
-});
-
-/** 重置表单 */
-function resetForm() {
-  formData.value = {
-    name: '',
-    deviceScope: IoTOtaTaskDeviceScopeEnum.ALL.value,
-    firmwareId: props.firmwareId,
-    description: '',
-    deviceIds: [],
-  };
-  formRef.value?.resetFields();
-}
-
-/** 打开弹窗 */
-async function open() {
-  await modalApi.open();
-}
-
-defineExpose({ open });
-</script>
-
-<template>
-  <Modal title="新增升级任务" class="w-3/5">
-    <Spin :spinning="formLoading">
-      <Form
-        ref="formRef"
-        :model="formData"
-        :rules="formRules"
-        :label-col="{ span: 4 }"
-        :wrapper-col="{ span: 20 }"
-        class="mx-4"
-      >
-        <FormItem label="任务名称" name="name">
-          <Input v-model:value="formData.name" placeholder="请输入任务名称" />
-        </FormItem>
-        <FormItem label="任务描述" name="description">
-          <Input.TextArea
-            v-model:value="formData.description"
-            :rows="3"
-            placeholder="请输入任务描述"
-          />
-        </FormItem>
-        <FormItem label="升级范围" name="deviceScope">
-          <Select
-            v-model:value="formData.deviceScope"
-            placeholder="请选择升级范围"
-            :options="deviceScopeOptions"
-          />
-        </FormItem>
-        <FormItem
-          v-if="formData.deviceScope === IoTOtaTaskDeviceScopeEnum.SELECT.value"
-          label="选择设备"
-          name="deviceIds"
-        >
-          <Select
-            v-model:value="formData.deviceIds"
-            mode="multiple"
-            placeholder="请选择设备"
-            :options="deviceOptions"
-            :filter-option="true"
-            show-search
-          />
-        </FormItem>
-      </Form>
-    </Spin>
-  </Modal>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/modules/task/ota-task-list.vue b/apps/web-antdv-next/src/views/iot/ota/modules/task/ota-task-list.vue
deleted file mode 100644
index f3a815bce..000000000
--- a/apps/web-antdv-next/src/views/iot/ota/modules/task/ota-task-list.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<script setup lang="ts">
-import type { TableColumnsType } from 'antdv-next';
-
-import type { OtaTask } from '#/api/iot/ota/task';
-
-import { onMounted, reactive, ref } from 'vue';
-
-import { IoTOtaTaskStatusEnum } from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate } from '@vben/utils';
-
-import {
-  Button,
-  Card,
-  Input,
-  message,
-  Modal,
-  Space,
-  Table,
-  Tag,
-} from 'antdv-next';
-
-import { getOtaTaskPage } from '#/api/iot/ota/task';
-
-import OtaTaskDetail from './ota-task-detail.vue';
-import OtaTaskForm from './ota-task-form.vue';
-
-/** IoT OTA 任务列表 */
-defineOptions({ name: 'OtaTaskList' });
-
-const props = defineProps<{
-  firmwareId: number;
-  productId: number;
-}>();
-
-const emit = defineEmits(['success']);
-
-// 任务列表
-const taskLoading = ref(false);
-const taskList = ref<OtaTask[]>([]);
-const taskTotal = ref(0);
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  name: '',
-  firmwareId: props.firmwareId,
-});
-const taskFormRef = ref(); // 任务表单引用
-const taskDetailRef = ref(); // 任务详情引用
-
-/** 获取任务列表 */
-async function getTaskList() {
-  taskLoading.value = true;
-  try {
-    const data = await getOtaTaskPage(queryParams);
-    taskList.value = data.list;
-    taskTotal.value = data.total;
-  } finally {
-    taskLoading.value = false;
-  }
-}
-
-/** 搜索 */
-function handleQuery() {
-  queryParams.pageNo = 1;
-  getTaskList();
-}
-
-/** 打开任务表单 */
-function openTaskForm() {
-  taskFormRef.value?.open();
-}
-
-/** 处理任务创建成功 */
-function handleTaskCreateSuccess() {
-  getTaskList();
-  emit('success');
-}
-
-/** 查看任务详情 */
-function handleTaskDetail(id: number) {
-  taskDetailRef.value?.open(id);
-}
-
-/** 取消任务 */
-async function handleCancelTask(id: number) {
-  Modal.confirm({
-    title: '确认取消',
-    content: '确认要取消该升级任务吗？',
-    async onOk() {
-      try {
-        await IoTOtaTaskApi.cancelOtaTask(id);
-        message.success('取消成功');
-        await refresh();
-      } catch (error) {
-        console.error('取消任务失败', error);
-      }
-    },
-  });
-}
-
-/** 刷新数据 */
-async function refresh() {
-  await getTaskList();
-  emit('success');
-}
-
-/** 分页变化 */
-function handleTableChange(pagination: any) {
-  queryParams.pageNo = pagination.current;
-  queryParams.pageSize = pagination.pageSize;
-  getTaskList();
-}
-
-/** 表格列配置 */
-const columns: TableColumnsType = [
-  {
-    title: '任务编号',
-    dataIndex: 'id',
-    key: 'id',
-    width: 80,
-    align: 'center' as const,
-  },
-  {
-    title: '任务名称',
-    dataIndex: 'name',
-    key: 'name',
-    align: 'center' as const,
-  },
-  {
-    title: '升级范围',
-    dataIndex: 'deviceScope',
-    key: 'deviceScope',
-    align: 'center' as const,
-  },
-  {
-    title: '升级进度',
-    key: 'progress',
-    align: 'center' as const,
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    key: 'createTime',
-    align: 'center' as const,
-    render: ({ text }: any) => formatDate(text, 'YYYY-MM-DD HH:mm:ss'),
-  },
-  {
-    title: '任务描述',
-    dataIndex: 'description',
-    key: 'description',
-    align: 'center' as const,
-    ellipsis: true,
-  },
-  {
-    title: '任务状态',
-    dataIndex: 'status',
-    key: 'status',
-    align: 'center' as const,
-  },
-  {
-    title: '操作',
-    key: 'action',
-    align: 'center' as const,
-    width: 120,
-  },
-];
-
-/** 初始化 */
-onMounted(() => {
-  getTaskList();
-});
-</script>
-
-<template>
-  <Card title="升级任务管理" class="mb-5">
-    <!-- 搜索栏 -->
-    <div class="mb-4 flex items-center justify-between">
-      <Button type="primary" @click="openTaskForm">
-        <IconifyIcon icon="ant-design:plus-outlined" class="mr-1" />
-        新增
-      </Button>
-      <Input
-        v-model:value="queryParams.name"
-        placeholder="请输入任务名称"
-        allow-clear
-        @press-enter="handleQuery"
-        style="width: 240px"
-      />
-    </div>
-
-    <!-- 任务列表 -->
-    <Table
-      :columns="columns"
-      :data-source="taskList"
-      :loading="taskLoading"
-      :pagination="{
-        current: queryParams.pageNo,
-        pageSize: queryParams.pageSize,
-        total: taskTotal,
-        showSizeChanger: true,
-        showQuickJumper: true,
-        showTotal: (total: number) => `共 ${total} 条`,
-      }"
-      :scroll="{ x: 'max-content' }"
-      @change="handleTableChange"
-    >
-      <!-- 升级范围 -->
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'deviceScope'">
-          <Tag v-if="record.deviceScope === 1" color="blue">全部设备</Tag>
-          <Tag v-else-if="record.deviceScope === 2" color="green">指定设备</Tag>
-          <Tag v-else>{{ record.deviceScope }}</Tag>
-        </template>
-
-        <!-- 升级进度 -->
-        <template v-else-if="column.key === 'progress'">
-          {{ record.deviceSuccessCount }}/{{ record.deviceTotalCount }}
-        </template>
-
-        <!-- 任务状态 -->
-        <template v-else-if="column.key === 'status'">
-          <Tag v-if="record.status === 0" color="orange">待执行</Tag>
-          <Tag v-else-if="record.status === 1" color="blue">执行中</Tag>
-          <Tag v-else-if="record.status === 2" color="green">已完成</Tag>
-          <Tag v-else-if="record.status === 3" color="red">已取消</Tag>
-          <Tag v-else>{{ record.status }}</Tag>
-        </template>
-
-        <!-- 操作 -->
-        <template v-else-if="column.key === 'action'">
-          <Space>
-            <a @click="handleTaskDetail(record.id)">详情</a>
-            <a
-              v-if="record.status === IoTOtaTaskStatusEnum.IN_PROGRESS.value"
-              class="text-red-500"
-              @click="handleCancelTask(record.id)"
-            >
-              取消
-            </a>
-          </Space>
-        </template>
-      </template>
-    </Table>
-
-    <!-- 新增任务弹窗 -->
-    <OtaTaskForm
-      ref="taskFormRef"
-      :firmware-id="firmwareId"
-      :product-id="productId"
-      @success="handleTaskCreateSuccess"
-    />
-
-    <!-- 任务详情弹窗 -->
-    <OtaTaskDetail ref="taskDetailRef" @success="refresh" />
-  </Card>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/task/data.ts b/apps/web-antdv-next/src/views/iot/ota/task/data.ts
new file mode 100644
index 000000000..c0d2dfd13
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/task/data.ts
@@ -0,0 +1,163 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { DICT_TYPE, IoTOtaTaskDeviceScopeEnum } from '@vben/constants';
+import { getDictLabel, getDictOptions } from '@vben/hooks';
+import { formatDateTime } from '@vben/utils';
+
+/** 任务详情的描述字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    { field: 'id', label: '任务编号' },
+    { field: 'name', label: '任务名称' },
+    {
+      field: 'deviceScope',
+      label: '升级范围',
+      render: (val) => getDictLabel(DICT_TYPE.IOT_OTA_TASK_DEVICE_SCOPE, val),
+    },
+    {
+      field: 'status',
+      label: '任务状态',
+      render: (val) => getDictLabel(DICT_TYPE.IOT_OTA_TASK_STATUS, val),
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => (val ? (formatDateTime(val) as string) : '-'),
+    },
+    { field: 'description', label: '任务描述', span: 3 },
+  ];
+}
+
+/** 新增升级任务的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'firmwareId',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '任务名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入任务名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '任务描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入任务描述',
+        rows: 3,
+      },
+    },
+    {
+      fieldName: 'deviceScope',
+      label: '升级范围',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_OTA_TASK_DEVICE_SCOPE, 'number'),
+        placeholder: '请选择升级范围',
+      },
+      defaultValue: IoTOtaTaskDeviceScopeEnum.ALL.value,
+      rules: 'required',
+    },
+    {
+      fieldName: 'deviceIds',
+      label: '选择设备',
+      component: 'Select',
+      componentProps: {
+        mode: 'multiple',
+        placeholder: '请选择设备',
+        showSearch: true,
+        filterOption: true,
+        optionFilterProp: 'label',
+      },
+      defaultValue: [],
+      dependencies: {
+        triggerFields: ['deviceScope'],
+        show: (values) =>
+          values.deviceScope === IoTOtaTaskDeviceScopeEnum.SELECT.value,
+        rules: (values) =>
+          values.deviceScope === IoTOtaTaskDeviceScopeEnum.SELECT.value
+            ? 'required'
+            : null,
+      },
+    },
+  ];
+}
+
+/** 任务列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '任务编号',
+      width: 80,
+      align: 'center',
+    },
+    {
+      field: 'name',
+      title: '任务名称',
+      minWidth: 150,
+      align: 'center',
+    },
+    {
+      field: 'deviceScope',
+      title: '升级范围',
+      width: 110,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_OTA_TASK_DEVICE_SCOPE },
+      },
+    },
+    {
+      field: 'progress',
+      title: '升级进度',
+      width: 110,
+      align: 'center',
+      formatter: ({ row }) =>
+        `${row.deviceSuccessCount || 0}/${row.deviceTotalCount || 0}`,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      align: 'center',
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'description',
+      title: '任务描述',
+      minWidth: 150,
+      align: 'center',
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'status',
+      title: '任务状态',
+      width: 110,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_OTA_TASK_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antdv-next/src/views/iot/ota/task/modules/detail.vue b/apps/web-antdv-next/src/views/iot/ota/task/modules/detail.vue
new file mode 100644
index 000000000..9e0492c1c
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/task/modules/detail.vue
@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import type { IoTOtaTaskApi } from '#/api/iot/ota/task';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { getOtaTask } from '#/api/iot/ota/task';
+import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
+
+import OtaTaskRecordList from '../record/modules/list.vue';
+import TaskInfo from './info.vue';
+import UpgradeStatistics from './statistics.vue';
+
+const emit = defineEmits(['success']);
+
+const taskId = ref<number>();
+const taskLoading = ref(false);
+const task = ref<IoTOtaTaskApi.Task>();
+
+const taskStatisticsLoading = ref(false);
+const taskStatistics = ref<Record<string, number>>({});
+
+/** 获取任务详情 */
+async function getTaskInfo() {
+  if (!taskId.value) {
+    return;
+  }
+  taskLoading.value = true;
+  try {
+    task.value = await getOtaTask(taskId.value);
+  } finally {
+    taskLoading.value = false;
+  }
+}
+
+/** 获取统计数据 */
+async function getStatistics() {
+  if (!taskId.value) {
+    return;
+  }
+  taskStatisticsLoading.value = true;
+  try {
+    taskStatistics.value = await getOtaTaskRecordStatusStatistics(
+      undefined,
+      taskId.value,
+    );
+  } finally {
+    taskStatisticsLoading.value = false;
+  }
+}
+
+/** 单条记录取消后，刷新任务信息和统计 */
+async function handleRecordSuccess() {
+  await getStatistics();
+  await getTaskInfo();
+  emit('success');
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    const data = modalApi.getData<{ id: number }>();
+    if (!data?.id) {
+      return;
+    }
+    taskId.value = data.id;
+    await Promise.all([getTaskInfo(), getStatistics()]);
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="升级任务详情"
+    class="w-5/6"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <!-- 任务信息 -->
+    <TaskInfo :task="task" :loading="taskLoading" />
+    <!-- 升级设备统计 -->
+    <div class="mt-4">
+      <UpgradeStatistics
+        :loading="taskStatisticsLoading"
+        :statistics="taskStatistics"
+      />
+    </div>
+    <!-- 升级设备记录 -->
+    <div class="mt-4">
+      <OtaTaskRecordList :task-id="taskId" @success="handleRecordSuccess" />
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/task/modules/form.vue b/apps/web-antdv-next/src/views/iot/ota/task/modules/form.vue
new file mode 100644
index 000000000..a1341ff54
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/task/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { IoTOtaTaskApi } from '#/api/iot/ota/task';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'antdv-next';
+
+import { useVbenForm } from '#/adapter/form';
+import { getDeviceListByProductId } from '#/api/iot/device/device';
+import { createOtaTask } from '#/api/iot/ota/task';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as IoTOtaTaskApi.Task;
+    try {
+      await createOtaTask(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{ firmwareId: number; productId: number }>();
+    if (!data?.firmwareId || !data?.productId) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 设置 firmwareId
+      await formApi.setValues({ firmwareId: data.firmwareId });
+      // 加载产品下的设备列表
+      const devices = (await getDeviceListByProductId(data.productId)) || [];
+      // 注入到 deviceIds 字段的 options
+      formApi.updateSchema([
+        {
+          fieldName: 'deviceIds',
+          componentProps: {
+            options: devices.map((device) => ({
+              label: device.nickname
+                ? `${device.deviceName} (${device.nickname})`
+                : device.deviceName,
+              value: device.id,
+            })),
+          },
+        },
+      ]);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/5" :title="$t('ui.actionTitle.create', ['升级任务'])">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/task/modules/info.vue b/apps/web-antdv-next/src/views/iot/ota/task/modules/info.vue
new file mode 100644
index 000000000..dcd365156
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/task/modules/info.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import type { IoTOtaTaskApi } from '#/api/iot/ota/task';
+
+import { Card } from 'antdv-next';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+defineProps<{
+  loading?: boolean;
+  task?: IoTOtaTaskApi.Task;
+}>();
+
+const [Description] = useDescription({
+  bordered: true,
+  column: 3,
+  schema: useDetailSchema(),
+});
+</script>
+
+<template>
+  <Card title="任务信息" :loading="loading">
+    <Description :data="task" />
+  </Card>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/task/modules/list.vue b/apps/web-antdv-next/src/views/iot/ota/task/modules/list.vue
new file mode 100644
index 000000000..d83bf0150
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/task/modules/list.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IoTOtaTaskApi } from '#/api/iot/ota/task';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IoTOtaTaskStatusEnum } from '@vben/constants';
+
+import { Input, message } from 'antdv-next';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { cancelOtaTask, getOtaTaskPage } from '#/api/iot/ota/task';
+import { $t } from '#/locales';
+
+import { useGridColumns } from '../data';
+import OtaTaskDetail from './detail.vue';
+import OtaTaskForm from './form.vue';
+
+const props = defineProps<{
+  firmwareId: number;
+  productId: number;
+}>();
+
+const emit = defineEmits(['success']);
+
+const searchName = ref('');
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: OtaTaskForm,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: OtaTaskDetail,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+async function handleRefresh() {
+  await gridApi.query();
+  emit('success');
+}
+
+/** 按任务名称搜索 */
+async function handleSearch() {
+  await gridApi.reload();
+}
+
+/** 新增任务 */
+function handleCreate() {
+  formModalApi
+    .setData({ firmwareId: props.firmwareId, productId: props.productId })
+    .open();
+}
+
+/** 查看任务详情 */
+function handleDetail(row: IoTOtaTaskApi.Task) {
+  detailModalApi.setData({ id: row.id }).open();
+}
+
+/** 取消任务 */
+async function handleCancel(row: IoTOtaTaskApi.Task) {
+  await cancelOtaTask(row.id!);
+  message.success('取消成功');
+  await handleRefresh();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    maxHeight: 500,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getOtaTaskPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            firmwareId: props.firmwareId,
+            name: searchName.value || undefined,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<IoTOtaTaskApi.Task>,
+});
+</script>
+
+<template>
+  <div>
+    <FormModal @success="handleRefresh" />
+    <DetailModal @success="handleRefresh" />
+
+    <Grid table-title="升级任务管理">
+      <template #toolbar-tools>
+        <div class="flex items-center gap-2">
+          <Input
+            v-model:value="searchName"
+            placeholder="请输入任务名称"
+            allow-clear
+            style="width: 200px"
+            @press-enter="handleSearch"
+            @clear="handleSearch"
+          />
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.search'),
+                type: 'default',
+                icon: 'ant-design:search-outlined',
+                onClick: handleSearch,
+              },
+              {
+                label: $t('ui.actionTitle.create', ['升级任务']),
+                type: 'primary',
+                icon: ACTION_ICON.ADD,
+                auth: ['iot:ota-task:create'],
+                onClick: handleCreate,
+              },
+            ]"
+          />
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['iot:ota-task:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.cancel'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:ota-task:cancel'],
+              ifShow: row.status === IoTOtaTaskStatusEnum.IN_PROGRESS.value,
+              popConfirm: {
+                title: '确认要取消该升级任务吗？',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/task/modules/statistics.vue b/apps/web-antdv-next/src/views/iot/ota/task/modules/statistics.vue
new file mode 100644
index 000000000..0bc9c8528
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/task/modules/statistics.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { DICT_TYPE, IoTOtaTaskRecordStatusEnum } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
+import { Card, Col, Row } from 'antdv-next';
+
+const props = defineProps<{
+  loading?: boolean;
+  statistics: Record<string, number>;
+}>();
+
+/** 取字典标签（同步） */
+function dictLabel(value: number) {
+  return getDictLabel(DICT_TYPE.IOT_OTA_TASK_RECORD_STATUS, value);
+}
+
+/** 统计项配置 */
+const items = computed(() => [
+  {
+    label: '升级设备总数',
+    span: 6,
+    color: 'text-blue-500',
+    value: Object.values(props.statistics).reduce(
+      (sum, count) => sum + (count || 0),
+      0,
+    ),
+  },
+  {
+    label: dictLabel(IoTOtaTaskRecordStatusEnum.PENDING.value),
+    span: 3,
+    color: 'text-gray-400',
+    value: props.statistics[IoTOtaTaskRecordStatusEnum.PENDING.value] || 0,
+  },
+  {
+    label: dictLabel(IoTOtaTaskRecordStatusEnum.PUSHED.value),
+    span: 3,
+    color: 'text-blue-400',
+    value: props.statistics[IoTOtaTaskRecordStatusEnum.PUSHED.value] || 0,
+  },
+  {
+    label: dictLabel(IoTOtaTaskRecordStatusEnum.UPGRADING.value),
+    span: 3,
+    color: 'text-yellow-500',
+    value: props.statistics[IoTOtaTaskRecordStatusEnum.UPGRADING.value] || 0,
+  },
+  {
+    label: dictLabel(IoTOtaTaskRecordStatusEnum.SUCCESS.value),
+    span: 3,
+    color: 'text-green-500',
+    value: props.statistics[IoTOtaTaskRecordStatusEnum.SUCCESS.value] || 0,
+  },
+  {
+    label: dictLabel(IoTOtaTaskRecordStatusEnum.FAILURE.value),
+    span: 3,
+    color: 'text-red-500',
+    value: props.statistics[IoTOtaTaskRecordStatusEnum.FAILURE.value] || 0,
+  },
+  {
+    label: dictLabel(IoTOtaTaskRecordStatusEnum.CANCELED.value),
+    span: 3,
+    color: 'text-gray-400',
+    value: props.statistics[IoTOtaTaskRecordStatusEnum.CANCELED.value] || 0,
+  },
+]);
+</script>
+
+<template>
+  <Card title="升级设备统计" :loading="loading">
+    <Row :gutter="20" class="py-5">
+      <Col v-for="item in items" :key="item.label" :span="item.span">
+        <div
+          class="rounded border border-solid border-gray-200 bg-gray-50 p-5 text-center"
+        >
+          <div class="mb-2 text-3xl font-bold" :class="item.color">
+            {{ item.value }}
+          </div>
+          <div class="text-sm text-gray-600">{{ item.label }}</div>
+        </div>
+      </Col>
+    </Row>
+  </Card>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/ota/task/record/data.ts b/apps/web-antdv-next/src/views/iot/ota/task/record/data.ts
new file mode 100644
index 000000000..a07093b09
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/task/record/data.ts
@@ -0,0 +1,59 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { DICT_TYPE } from '@vben/constants';
+
+/** 升级记录的列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'deviceName',
+      title: '设备名称',
+      minWidth: 150,
+      align: 'center',
+    },
+    {
+      field: 'fromFirmwareVersion',
+      title: '当前版本',
+      width: 120,
+      align: 'center',
+    },
+    {
+      field: 'status',
+      title: '升级状态',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_OTA_TASK_RECORD_STATUS },
+      },
+    },
+    {
+      field: 'progress',
+      title: '升级进度',
+      width: 120,
+      align: 'center',
+      formatter: ({ row }) => `${row.progress || 0}%`,
+    },
+    {
+      field: 'description',
+      title: '状态描述',
+      minWidth: 150,
+      align: 'center',
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      width: 180,
+      align: 'center',
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antdv-next/src/views/iot/ota/task/record/modules/list.vue b/apps/web-antdv-next/src/views/iot/ota/task/record/modules/list.vue
new file mode 100644
index 000000000..0f6d8d52a
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/ota/task/record/modules/list.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IoTOtaTaskRecordApi } from '#/api/iot/ota/task/record';
+
+import { computed, ref, watch } from 'vue';
+
+import { IoTOtaTaskRecordStatusEnum } from '@vben/constants';
+
+import { Card, message, Tabs } from 'antdv-next';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  cancelOtaTaskRecord,
+  getOtaTaskRecordPage,
+} from '#/api/iot/ota/task/record';
+import { $t } from '#/locales';
+
+import { useGridColumns } from '../data';
+
+const props = defineProps<{
+  taskId: number | undefined;
+}>();
+
+const emit = defineEmits(['success']);
+
+const activeTab = ref('');
+
+/** 状态标签配置 */
+const statusTabs = computed(() => {
+  const tabs = [{ key: '', label: '全部设备' }];
+  Object.values(IoTOtaTaskRecordStatusEnum).forEach((status) => {
+    tabs.push({
+      key: status.value.toString(),
+      label: status.label,
+    });
+  });
+  return tabs;
+});
+
+/** 切换标签 */
+async function handleTabChange(tabKey: number | string) {
+  activeTab.value = String(tabKey);
+  await gridApi.reload();
+}
+
+/** 取消单条记录的升级 */
+async function handleCancelUpgrade(record: IoTOtaTaskRecordApi.TaskRecord) {
+  await cancelOtaTaskRecord(record.id!);
+  message.success('取消成功');
+  await gridApi.query();
+  emit('success');
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 400,
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.taskId) {
+            return { list: [], total: 0 };
+          }
+          return await getOtaTaskRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            taskId: props.taskId,
+            status:
+              activeTab.value === '' ? undefined : Number(activeTab.value),
+          });
+        },
+      },
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<IoTOtaTaskRecordApi.TaskRecord>,
+});
+
+/** taskId 变化时重新查询 */
+watch(
+  () => props.taskId,
+  async (val) => {
+    if (val) {
+      activeTab.value = '';
+      await gridApi.reload();
+    }
+  },
+);
+</script>
+
+<template>
+  <Card title="升级设备记录">
+    <Tabs v-model:active-key="activeTab" @change="handleTabChange" class="mb-4">
+      <Tabs.TabPane v-for="tab in statusTabs" :key="tab.key" :tab="tab.label" />
+    </Tabs>
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.cancel'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:ota-task-record:cancel'],
+              ifShow: [
+                IoTOtaTaskRecordStatusEnum.PENDING.value,
+                IoTOtaTaskRecordStatusEnum.PUSHED.value,
+                IoTOtaTaskRecordStatusEnum.UPGRADING.value,
+              ].includes(row.status!),
+              popConfirm: {
+                title: '确认要取消该设备的升级任务吗？',
+                confirm: handleCancelUpgrade.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Card>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/product/category/data.ts b/apps/web-antdv-next/src/views/iot/product/category/data.ts
index cac6d9a89..c5a147373 100644
--- a/apps/web-antdv-next/src/views/iot/product/category/data.ts
+++ b/apps/web-antdv-next/src/views/iot/product/category/data.ts
@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotProductCategoryApi } from '#/api/iot/product/category';
 
 import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -35,8 +36,8 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '分类排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入分类排序',
-        class: 'w-full',
         min: 0,
         precision: 0,
       },
@@ -57,7 +58,7 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'description',
       label: '描述',
-      component: 'TextArea',
+      component: 'Textarea',
       componentProps: {
         placeholder: '请输入分类描述',
         rows: 3,
@@ -91,10 +92,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<IotProductCategoryApi.ProductCategory>['columns'] {
   return [
     {
-      type: 'seq',
+      field: 'id',
       title: 'ID',
       width: 80,
     },
diff --git a/apps/web-antdv-next/src/views/iot/product/category/index.vue b/apps/web-antdv-next/src/views/iot/product/category/index.vue
index f660110db..31995c14b 100644
--- a/apps/web-antdv-next/src/views/iot/product/category/index.vue
+++ b/apps/web-antdv-next/src/views/iot/product/category/index.vue
@@ -16,8 +16,6 @@ import { $t } from '#/locales';
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
-defineOptions({ name: 'IoTProductCategory' });
-
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
@@ -87,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 <template>
   <Page auto-content-height>
     <FormModal @success="handleRefresh" />
-    <Grid>
+    <Grid table-title="产品分类列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
@@ -95,6 +93,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('ui.actionTitle.create', ['分类']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['iot:product-category:create'],
               onClick: handleCreate,
             },
           ]"
@@ -107,6 +106,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['iot:product-category:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -114,6 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:product-category:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-antdv-next/src/views/iot/product/category/modules/form.vue b/apps/web-antdv-next/src/views/iot/product/category/modules/form.vue
index 575892cad..248567cbe 100644
--- a/apps/web-antdv-next/src/views/iot/product/category/modules/form.vue
+++ b/apps/web-antdv-next/src/views/iot/product/category/modules/form.vue
@@ -70,10 +70,10 @@ const [Modal, modalApi] = useVbenModal({
     if (!data || !data.id) {
       return;
     }
-    // 编辑模式：加载数据
     modalApi.lock();
     try {
       formData.value = await getProductCategory(data.id);
+      // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();
diff --git a/apps/web-antdv-next/src/views/iot/product/product/components/select.vue b/apps/web-antdv-next/src/views/iot/product/product/components/select.vue
index e40f8e3a6..3dedd730e 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/components/select.vue
+++ b/apps/web-antdv-next/src/views/iot/product/product/components/select.vue
@@ -24,9 +24,9 @@ const loading = ref(false);
 const productList = ref<IotProductApi.Product[]>([]);
 
 /** 处理选择变化 */
-function handleChange(value?: number) {
-  emit('update:modelValue', value);
-  emit('change', value);
+function handleChange(value: any) {
+  emit('update:modelValue', value as number | undefined);
+  emit('change', value as number | undefined);
 }
 
 /** 获取产品列表 */
@@ -47,11 +47,18 @@ onMounted(() => {
 <template>
   <Select
     :value="modelValue"
-    :options="productList.map((p) => ({ label: p.name, value: p.id }))"
+    :options="
+      productList.map((product) => ({
+        label: product.name,
+        value: product.id,
+      }))
+    "
     :loading="loading"
     placeholder="请选择产品"
     allow-clear
     class="w-full"
+    option-filter-prop="label"
+    show-search
     @change="handleChange"
   />
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/product/product/data.ts b/apps/web-antdv-next/src/views/iot/product/product/data.ts
index f4ef808fc..f7eee5da3 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/data.ts
+++ b/apps/web-antdv-next/src/views/iot/product/product/data.ts
@@ -1,10 +1,10 @@
-import type { VbenFormSchema } from '#/adapter/form';
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { IotProductCategoryApi } from '#/api/iot/product/category';
+import type { IotProductApi } from '#/api/iot/product/product';
 
 import { h } from 'vue';
 
-import { DICT_TYPE } from '@vben/constants';
+import { DeviceTypeEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { Button } from 'antdv-next';
@@ -12,13 +12,9 @@ import { Button } from 'antdv-next';
 import { z } from '#/adapter/form';
 import { getSimpleProductCategoryList } from '#/api/iot/product/category';
 
-/** 产品分类列表缓存 */
-let categoryList: IotProductCategoryApi.ProductCategory[] = [];
-getSimpleProductCategoryList().then((data) => (categoryList = data));
-
 /** 基础表单字段（不含图标、图片、描述） */
 export function useBasicFormSchema(
-  formApi?: any,
+  formApi?: VbenFormApi,
   generateProductKey?: () => string,
 ): VbenFormSchema[] {
   return [
@@ -114,6 +110,13 @@ export function useBasicFormSchema(
         buttonStyle: 'solid',
         optionType: 'button',
       },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          // 编辑时设备类型不可改
+          disabled: !!values.id,
+        }),
+      },
       rules: 'required',
     },
     {
@@ -124,6 +127,14 @@ export function useBasicFormSchema(
         options: getDictOptions(DICT_TYPE.IOT_NET_TYPE, 'number'),
         placeholder: '请选择联网方式',
       },
+      // 网关子设备走网关联网，不需要联网方式
+      dependencies: {
+        triggerFields: ['deviceType'],
+        show: (values) =>
+          [DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(
+            values.deviceType,
+          ),
+      },
       rules: 'required',
     },
     {
@@ -134,6 +145,7 @@ export function useBasicFormSchema(
         options: getDictOptions(DICT_TYPE.IOT_PROTOCOL_TYPE, 'string'),
         placeholder: '请选择协议类型',
       },
+      defaultValue: 'mqtt',
       rules: 'required',
     },
     {
@@ -144,22 +156,10 @@ export function useBasicFormSchema(
         options: getDictOptions(DICT_TYPE.IOT_SERIALIZE_TYPE, 'string'),
         placeholder: '请选择序列化类型',
       },
+      defaultValue: 'json',
       help: 'iot-gateway-server 默认根据接入的协议类型确定数据格式，仅 MQTT、EMQX 协议支持自定义序列化类型',
       rules: 'required',
     },
-    // TODO @haohao：这个貌似不需要？！
-    {
-      fieldName: 'status',
-      label: '产品状态',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.IOT_PRODUCT_STATUS, 'number'),
-        buttonStyle: 'solid',
-        optionType: 'button',
-      },
-      defaultValue: 0,
-      rules: 'required',
-    },
   ];
 }
 
@@ -180,11 +180,7 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'icon',
       label: '产品图标',
-      component: 'IconPicker',
-      componentProps: {
-        placeholder: '请选择产品图标',
-        prefix: 'carbon',
-      },
+      component: 'ImageUpload',
     },
     {
       fieldName: 'picUrl',
@@ -194,7 +190,7 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'description',
       label: '产品描述',
-      component: 'TextArea',
+      component: 'Textarea',
       componentProps: {
         placeholder: '请输入产品描述',
         rows: 3,
@@ -204,7 +200,7 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<IotProductApi.Product>['columns'] {
   return [
     {
       field: 'id',
@@ -217,11 +213,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 150,
     },
     {
-      field: 'categoryId',
+      field: 'categoryName',
       title: '品类',
       minWidth: 120,
-      formatter: ({ cellValue }) =>
-        categoryList.find((c) => c.id === cellValue)?.name || '未分类',
+      formatter: ({ row }) => row.categoryName || '未分类',
     },
     {
       field: 'deviceType',
@@ -248,15 +243,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
         name: 'CellImage',
       },
     },
-    {
-      field: 'status',
-      title: '产品状态',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.IOT_PRODUCT_STATUS },
-      },
-    },
     {
       field: 'createTime',
       title: '创建时间',
diff --git a/apps/web-antdv-next/src/views/iot/product/product/detail/index.vue b/apps/web-antdv-next/src/views/iot/product/product/detail/index.vue
index 8425e44ba..56e6dd134 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/detail/index.vue
+++ b/apps/web-antdv-next/src/views/iot/product/product/detail/index.vue
@@ -1,12 +1,13 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { IotProductApi } from '#/api/iot/product/product';
 
 import { onMounted, provide, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
+import { IOT_PROVIDE_KEY } from '@vben/constants';
 
-import { message, TabPane, Tabs } from 'antdv-next';
+import { message, Tabs } from 'antdv-next';
 
 import { getDeviceCount } from '#/api/iot/device/device';
 import { getProduct } from '#/api/iot/product/product';
@@ -15,8 +16,6 @@ import IoTProductThingModel from '#/views/iot/thingmodel/index.vue';
 import ProductDetailsHeader from './modules/header.vue';
 import ProductDetailsInfo from './modules/info.vue';
 
-defineOptions({ name: 'IoTProductDetail' });
-
 const route = useRoute();
 const router = useRouter();
 
@@ -25,7 +24,8 @@ const loading = ref(true);
 const product = ref<IotProductApi.Product>({} as IotProductApi.Product);
 const activeTab = ref('info');
 
-provide('product', product); // 提供产品信息给子组件
+/** 向子组件提供产品信息 */
+provide(IOT_PROVIDE_KEY.PRODUCT, product);
 
 /** 获取产品详情 */
 async function getProductData(productId: number) {
@@ -78,15 +78,12 @@ onMounted(async () => {
       @refresh="() => getProductData(id)"
     />
     <Tabs v-model:active-key="activeTab" class="mt-4">
-      <TabPane key="info" tab="产品信息">
+      <Tabs.TabPane key="info" tab="产品信息">
         <ProductDetailsInfo v-if="activeTab === 'info'" :product="product" />
-      </TabPane>
-      <TabPane key="thingModel" tab="物模型（功能定义）">
-        <IoTProductThingModel
-          v-if="activeTab === 'thingModel'"
-          :product-id="id"
-        />
-      </TabPane>
+      </Tabs.TabPane>
+      <Tabs.TabPane key="thingModel" tab="物模型（功能定义）">
+        <IoTProductThingModel v-if="activeTab === 'thingModel'" />
+      </Tabs.TabPane>
     </Tabs>
   </Page>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/product/product/detail/modules/header.vue b/apps/web-antdv-next/src/views/iot/product/product/detail/modules/header.vue
index 6680199ee..54c6dc8ce 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/detail/modules/header.vue
+++ b/apps/web-antdv-next/src/views/iot/product/product/detail/modules/header.vue
@@ -3,12 +3,22 @@ import type { IotProductApi } from '#/api/iot/product/product';
 
 import { useRouter } from 'vue-router';
 
+import { useAccess } from '@vben/access';
 import { useVbenModal } from '@vben/common-ui';
 import { ProductStatusEnum } from '@vben/constants';
 
-import { Button, Card, Descriptions, message, Modal } from 'antdv-next';
+import {
+  Button,
+  Card,
+  Descriptions,
+  message,
+  Popconfirm,
+} from 'antdv-next';
 
-import { updateProductStatus } from '#/api/iot/product/product';
+import {
+  syncProductPropertyTable,
+  updateProductStatus,
+} from '#/api/iot/product/product';
 
 import Form from '../../modules/form.vue';
 
@@ -26,6 +36,7 @@ const emit = defineEmits<{
 }>();
 
 const router = useRouter();
+const { hasAccessByCodes } = useAccess();
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -45,7 +56,7 @@ async function copyToClipboard(text: string) {
 /** 跳转到设备管理 */
 function goToDeviceList(productId: number) {
   router.push({
-    path: '/iot/device/device',
+    name: 'IoTDevice',
     query: { productId: String(productId) },
   });
 }
@@ -56,29 +67,23 @@ function openEditForm(row: IotProductApi.Product) {
 }
 
 /** 发布产品 */
-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 handlePublish(product: IotProductApi.Product) {
+  await updateProductStatus(product.id!, ProductStatusEnum.PUBLISHED);
+  message.success('发布成功');
+  emit('refresh');
 }
 
 /** 撤销发布 */
-function handleUnpublish(product: IotProductApi.Product) {
-  Modal.confirm({
-    title: '确认撤销发布',
-    content: `确认要撤销发布产品「${product.name}」吗？`,
-    async onOk() {
-      await updateProductStatus(product.id!, ProductStatusEnum.UNPUBLISHED);
-      message.success('撤销发布成功');
-      emit('refresh');
-    },
-  });
+async function handleUnpublish(product: IotProductApi.Product) {
+  await updateProductStatus(product.id!, ProductStatusEnum.UNPUBLISHED);
+  message.success('撤销发布成功');
+  emit('refresh');
+}
+
+/** 同步物模型超级表结构 */
+async function handleSyncPropertyTable(product: IotProductApi.Product) {
+  await syncProductPropertyTable(product.id!);
+  message.success('同步成功');
 }
 </script>
 
@@ -90,33 +95,47 @@ function handleUnpublish(product: IotProductApi.Product) {
       <div>
         <h2 class="text-xl font-bold">{{ product.name }}</h2>
       </div>
-      <div class="space-x-2">
+      <div class="flex gap-2">
         <Button
+          v-if="hasAccessByCodes(['iot:product:update'])"
           :disabled="product.status === ProductStatusEnum.PUBLISHED"
           @click="openEditForm(product)"
         >
           编辑
         </Button>
-        <Button
-          v-if="product.status === ProductStatusEnum.UNPUBLISHED"
-          type="primary"
-          @click="handlePublish(product)"
+        <Popconfirm
+          v-if="
+            product.status === ProductStatusEnum.UNPUBLISHED &&
+            hasAccessByCodes(['iot:product:update'])
+          "
+          :title="`确认要发布产品「${product.name}」吗？`"
+          @confirm="handlePublish(product)"
         >
-          发布
-        </Button>
-        <Button
-          v-if="product.status === ProductStatusEnum.PUBLISHED"
-          danger
-          @click="handleUnpublish(product)"
+          <Button type="primary">发布</Button>
+        </Popconfirm>
+        <Popconfirm
+          v-if="
+            product.status === ProductStatusEnum.PUBLISHED &&
+            hasAccessByCodes(['iot:product:update'])
+          "
+          :title="`确认要撤销发布产品「${product.name}」吗？`"
+          @confirm="handleUnpublish(product)"
         >
-          撤销发布
-        </Button>
+          <Button danger>撤销发布</Button>
+        </Popconfirm>
+        <Popconfirm
+          v-if="hasAccessByCodes(['iot:product:update'])"
+          :title="`确认要同步产品「${product.name}」的物模型超级表结构吗？`"
+          @confirm="handleSyncPropertyTable(product)"
+        >
+          <Button>同步物模型表结构</Button>
+        </Popconfirm>
       </div>
     </div>
 
     <Card class="mt-4">
       <Descriptions :column="1">
-        <DescriptionsItem label="ProductKey">
+        <Descriptions.Item label="ProductKey">
           {{ product.productKey }}
           <Button
             class="ml-2"
@@ -125,15 +144,15 @@ function handleUnpublish(product: IotProductApi.Product) {
           >
             复制
           </Button>
-        </DescriptionsItem>
-        <DescriptionsItem label="设备总数">
+        </Descriptions.Item>
+        <Descriptions.Item label="设备总数">
           <span class="ml-5 mr-2">
             {{ product.deviceCount ?? '加载中...' }}
           </span>
           <Button size="small" @click="goToDeviceList(product.id!)">
             前往管理
           </Button>
-        </DescriptionsItem>
+        </Descriptions.Item>
       </Descriptions>
     </Card>
   </div>
diff --git a/apps/web-antdv-next/src/views/iot/product/product/detail/modules/info.vue b/apps/web-antdv-next/src/views/iot/product/product/detail/modules/info.vue
index e8ed7c102..ecd96c07d 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/detail/modules/info.vue
+++ b/apps/web-antdv-next/src/views/iot/product/product/detail/modules/info.vue
@@ -19,7 +19,9 @@ const showProductSecret = ref(false); // 是否显示产品密钥
 
 /** 格式化日期 */
 function formatDate(date?: Date | string) {
-  if (!date) return '-';
+  if (!date) {
+    return '-';
+  }
   return new Date(date).toLocaleString('zh-CN');
 }
 
@@ -42,66 +44,67 @@ async function copyToClipboard(text: string) {
 <template>
   <Card title="产品信息">
     <Descriptions :column="3" bordered size="small">
-      <DescriptionsItem label="产品名称">
+      <Descriptions.Item label="产品名称">
         {{ product.name }}
-      </DescriptionsItem>
-      <DescriptionsItem label="所属分类">
+      </Descriptions.Item>
+      <Descriptions.Item label="所属分类">
         {{ product.categoryName || '-' }}
-      </DescriptionsItem>
-      <DescriptionsItem label="设备类型">
+      </Descriptions.Item>
+      <Descriptions.Item label="设备类型">
         <DictTag
           :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
           :value="product.deviceType"
         />
-      </DescriptionsItem>
-      <DescriptionsItem label="创建时间">
+      </Descriptions.Item>
+      <Descriptions.Item label="创建时间">
         {{ formatDate(product.createTime) }}
-      </DescriptionsItem>
-      <DescriptionsItem label="协议类型">
+      </Descriptions.Item>
+      <Descriptions.Item label="协议类型">
         <DictTag
           :type="DICT_TYPE.IOT_PROTOCOL_TYPE"
           :value="product.protocolType"
         />
-      </DescriptionsItem>
-      <DescriptionsItem label="序列化类型">
+      </Descriptions.Item>
+      <Descriptions.Item label="序列化类型">
         <DictTag
           :type="DICT_TYPE.IOT_SERIALIZE_TYPE"
           :value="product.serializeType"
         />
-      </DescriptionsItem>
-      <DescriptionsItem label="产品状态">
+      </Descriptions.Item>
+      <Descriptions.Item label="产品状态">
         <DictTag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
-      </DescriptionsItem>
-      <DescriptionsItem
+      </Descriptions.Item>
+      <Descriptions.Item
         v-if="
-          [DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(
-            product.deviceType!,
-          )
+          (
+            [DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY] as number[]
+          ).includes(product.deviceType!)
         "
         label="联网方式"
       >
         <DictTag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
-      </DescriptionsItem>
-      <DescriptionsItem v-if="product.productSecret" label="ProductSecret">
+      </Descriptions.Item>
+      <Descriptions.Item label="产品密钥">
         <span v-if="showProductSecret">{{ product.productSecret }}</span>
         <span v-else>********</span>
         <Button class="ml-2" size="small" @click="toggleProductSecretVisible">
           {{ showProductSecret ? '隐藏' : '显示' }}
         </Button>
         <Button
+          v-if="showProductSecret && product.productSecret"
           class="ml-2"
           size="small"
           @click="copyToClipboard(product.productSecret || '')"
         >
           复制
         </Button>
-      </DescriptionsItem>
-      <DescriptionsItem label="动态注册">
+      </Descriptions.Item>
+      <Descriptions.Item label="动态注册">
         {{ product.registerEnabled ? '已开启' : '未开启' }}
-      </DescriptionsItem>
-      <DescriptionsItem :span="3" label="产品描述">
+      </Descriptions.Item>
+      <Descriptions.Item :span="3" label="产品描述">
         {{ product.description || '-' }}
-      </DescriptionsItem>
+      </Descriptions.Item>
     </Descriptions>
   </Card>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/product/product/index.vue b/apps/web-antdv-next/src/views/iot/product/product/index.vue
index fc0b0fe0e..0944d24df 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/index.vue
+++ b/apps/web-antdv-next/src/views/iot/product/product/index.vue
@@ -26,8 +26,6 @@ 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<IotProductCategoryApi.ProductCategory[]>([]);
 const viewMode = ref<'card' | 'list'>('card');
@@ -81,7 +79,7 @@ async function handleViewModeChange(mode: 'card' | 'list') {
 /** 导出表格 */
 async function handleExport() {
   const data = await exportProduct(queryParams.value);
-  downloadFileFromBlobPart({ fileName: '产品列表.xls', source: data });
+  downloadFileFromBlobPart({ fileName: '物联网产品.xls', source: data });
 }
 
 /** 打开产品详情 */
@@ -175,7 +173,7 @@ onMounted(() => {
     <FormModal @success="handleRefresh" />
 
     <!-- 统一搜索工具栏 -->
-    <Card :styles="{ body: { padding: '16px' } }" class="mb-4">
+    <Card :body-style="{ padding: '16px' }" class="!mb-2">
       <!-- 搜索表单 -->
       <div class="mb-3 flex items-center gap-3">
         <Input
@@ -217,12 +215,14 @@ onMounted(() => {
               label: $t('ui.actionTitle.create', ['产品']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['iot:product:create'],
               onClick: handleCreate,
             },
             {
               label: $t('ui.actionTitle.export'),
               type: 'primary',
               icon: ACTION_ICON.DOWNLOAD,
+              auth: ['iot:product:export'],
               onClick: handleExport,
             },
           ]"
@@ -252,17 +252,20 @@ onMounted(() => {
             {
               label: $t('common.detail'),
               type: 'link',
+              auth: ['iot:product:query'],
               onClick: openProductDetail.bind(null, row.id!),
             },
             {
               label: '物模型',
               type: 'link',
+              auth: ['iot:thing-model:query'],
               onClick: openThingModel.bind(null, row.id!),
             },
             {
               label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['iot:product:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
@@ -270,6 +273,7 @@ onMounted(() => {
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:product:delete'],
               disabled: row.status === ProductStatusEnum.PUBLISHED,
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
diff --git a/apps/web-antdv-next/src/views/iot/product/product/modules/card-view.vue b/apps/web-antdv-next/src/views/iot/product/product/modules/card-view.vue
index c72ced523..12b539144 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/modules/card-view.vue
+++ b/apps/web-antdv-next/src/views/iot/product/product/modules/card-view.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { DICT_TYPE } from '@vben/constants';
+import { useAccess } from '@vben/access';
+import { DICT_TYPE, ProductStatusEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
+import { isHttpUrl } from '@vben/utils';
 
 import {
   Button,
@@ -17,6 +19,8 @@ import {
 } from 'antdv-next';
 
 import { getProductPage } from '#/api/iot/product/product';
+import defaultPicUrl from '#/assets/imgs/iot/device.png';
+import defaultIconUrl from '#/assets/svgs/iot/cube.svg';
 import { DictTag } from '#/components/dict-tag';
 
 interface Props {
@@ -37,6 +41,8 @@ const emit = defineEmits<{
   thingModel: [productId: number];
 }>();
 
+const { hasAccessByCodes } = useAccess();
+
 const loading = ref(false);
 const list = ref<any[]>([]);
 const total = ref(0);
@@ -46,9 +52,27 @@ const queryParams = ref({
 });
 
 /** 获取分类名称 */
-function getCategoryName(categoryId: number) {
-  const category = props.categoryList.find((c: any) => c.id === categoryId);
-  return category?.name || '未分类';
+function getCategoryName(item: any) {
+  const category = props.categoryList.find((c: any) => c.id === item.categoryId);
+  return item.categoryName || category?.name || '未分类';
+}
+
+/** 是否按图片 URL 渲染产品图标 */
+function isImageIcon(icon?: string) {
+  if (!icon) {
+    return true;
+  }
+  return isHttpUrl(icon);
+}
+
+/** 产品图标 fallback */
+function getProductIcon(icon?: string) {
+  return icon || defaultIconUrl;
+}
+
+/** 产品图片 fallback */
+function getProductPic(picUrl?: string) {
+  return picUrl || defaultPicUrl;
 }
 
 /** 获取产品列表 */
@@ -88,7 +112,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="product-card-view">
+  <div>
     <!-- 产品卡片列表 -->
     <div v-loading="loading" class="min-h-96">
       <Row v-if="list.length > 0" :gutter="[16, 16]">
@@ -101,116 +125,144 @@ onMounted(() => {
           :lg="6"
         >
           <Card
-            :styles="{ body: { padding: '16px' } }"
-            class="product-card h-full rounded-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+            :body-style="{
+              padding: '16px',
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+            }"
+            class="h-full overflow-hidden rounded-lg transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
           >
             <!-- 顶部标题区域 -->
             <div class="mb-3 flex items-center">
-              <div class="product-icon">
+              <div
+                class="flex size-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-[#40a9ff] to-[#1890ff] text-white"
+              >
+                <img
+                  v-if="isImageIcon(item.icon)"
+                  :src="getProductIcon(item.icon)"
+                  alt=""
+                  class="size-6 object-contain"
+                />
                 <IconifyIcon
-                  :icon="item.icon || 'lucide:box'"
+                  v-else
+                  :icon="item.icon"
                   class="text-xl"
                 />
               </div>
               <div class="ml-3 min-w-0 flex-1">
-                <div class="product-title">{{ item.name }}</div>
+                <div
+                  class="truncate text-[15px] font-semibold leading-9 dark:text-white/85"
+                >
+                  {{ item.name }}
+                </div>
               </div>
-              <DictTag
-                :type="DICT_TYPE.IOT_PRODUCT_STATUS"
-                :value="item.status"
-                class="status-tag"
-              />
             </div>
             <!-- 内容区域 -->
             <div class="mb-3 flex items-start">
-              <div class="info-list flex-1">
-                <div class="info-item">
-                  <span class="info-label">产品分类</span>
-                  <span class="info-value text-primary">
-                    {{ getCategoryName(item.categoryId) }}
+              <div class="flex-1">
+                <div class="mb-2 flex items-center text-[13px]">
+                  <span class="mr-2 shrink-0 opacity-65 dark:text-white/65">
+                    产品分类
+                  </span>
+                  <span class="truncate font-medium text-primary">
+                    {{ getCategoryName(item) }}
                   </span>
                 </div>
-                <div class="info-item">
-                  <span class="info-label">产品类型</span>
+                <div class="mb-2 flex items-center text-[13px]">
+                  <span class="mr-2 shrink-0 opacity-65 dark:text-white/65">
+                    产品类型
+                  </span>
                   <DictTag
                     :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
                     :value="item.deviceType"
-                    class="info-tag m-0"
+                    class="m-0 text-xs"
                   />
                 </div>
-                <div class="info-item">
-                  <span class="info-label">产品标识</span>
+                <div class="flex items-center text-[13px]">
+                  <span class="mr-2 shrink-0 opacity-65 dark:text-white/65">
+                    产品标识
+                  </span>
                   <Tooltip :title="item.productKey || item.id" placement="top">
-                    <span class="info-value product-key cursor-pointer">
+                    <span
+                      class="inline-block max-w-[150px] cursor-pointer truncate align-middle font-mono text-xs opacity-85 dark:text-white/75"
+                    >
                       {{ item.productKey || item.id }}
                     </span>
                   </Tooltip>
                 </div>
               </div>
               <!-- 产品图片 -->
-              <div class="product-image">
+              <div
+                class="flex size-20 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-[#40a9ff15] to-[#1890ff15] text-[#1890ff] dark:from-[#40a9ff25] dark:to-[#1890ff25] dark:text-[#69c0ff]"
+              >
                 <Image
-                  v-if="item.picUrl"
-                  :src="item.picUrl"
+                  :src="getProductPic(item.picUrl)"
                   :preview="true"
                   class="size-full rounded object-cover"
                 />
-                <IconifyIcon
-                  v-else
-                  icon="lucide:image"
-                  class="text-2xl opacity-50"
-                />
               </div>
             </div>
             <!-- 按钮组 -->
-            <div class="action-buttons">
+            <div class="mt-auto flex gap-2 border-t border-border pt-3">
               <Button
+                v-if="hasAccessByCodes(['iot:product:update'])"
                 size="small"
-                class="action-btn action-btn-edit"
+                class="!h-8 min-w-0 flex-1 rounded-md !border-[#1890ff] !text-[13px] !text-[#1890ff] transition-all duration-200 hover:!bg-[#1890ff] hover:!text-white"
                 @click="emit('edit', item)"
               >
                 <IconifyIcon icon="lucide:edit" class="mr-1" />
                 编辑
               </Button>
               <Button
+                v-if="hasAccessByCodes(['iot:product:query'])"
                 size="small"
-                class="action-btn action-btn-detail"
+                class="!h-8 min-w-0 flex-1 rounded-md !border-[#52c41a] !text-[13px] !text-[#52c41a] transition-all duration-200 hover:!bg-[#52c41a] hover:!text-white"
                 @click="emit('detail', item.id)"
               >
                 <IconifyIcon icon="lucide:eye" class="mr-1" />
                 详情
               </Button>
               <Button
+                v-if="hasAccessByCodes(['iot:thing-model:query'])"
                 size="small"
-                class="action-btn action-btn-model"
+                class="!h-8 min-w-0 flex-1 rounded-md !border-[#fa8c16] !text-[13px] !text-[#fa8c16] transition-all duration-200 hover:!bg-[#fa8c16] hover:!text-white"
                 @click="emit('thingModel', item.id)"
               >
                 <IconifyIcon icon="lucide:git-branch" class="mr-1" />
                 物模型
               </Button>
-              <Tooltip v-if="item.status === 1" title="已发布的产品不能删除">
-                <Button
-                  size="small"
-                  danger
-                  disabled
-                  class="action-btn action-btn-delete !w-8"
+              <template v-if="hasAccessByCodes(['iot:product:delete'])">
+                <div
+                  class="h-5 w-px self-center bg-[#dcdfe6] dark:bg-[#3a3a3a]"
+                ></div>
+                <Tooltip
+                  v-if="item.status === ProductStatusEnum.PUBLISHED"
+                  title="已发布的产品不能删除"
                 >
-                  <IconifyIcon icon="lucide:trash-2" class="text-sm" />
-                </Button>
-              </Tooltip>
-              <Popconfirm
-                v-else
-                :title="`确认删除产品 ${item.name} 吗?`"
-                @confirm="emit('delete', item)"
-              >
-                <Button
-                  size="small"
-                  danger
-                  class="action-btn action-btn-delete !w-8"
+                  <Button
+                    size="small"
+                    danger
+                    disabled
+                    class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                  >
+                    <IconifyIcon icon="lucide:trash-2" class="text-sm" />
+                  </Button>
+                </Tooltip>
+                <Popconfirm
+                  v-else
+                  :title="`确认删除产品 ${item.name} 吗?`"
+                  @confirm="emit('delete', item)"
                 >
-                  <IconifyIcon icon="lucide:trash-2" class="text-sm" />
-                </Button>
-              </Popconfirm>
+                  <Button
+                    size="small"
+                    danger
+                    class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                  >
+                    <IconifyIcon icon="lucide:trash-2" class="text-sm" />
+                  </Button>
+                </Popconfirm>
+              </template>
             </div>
           </Card>
         </Col>
@@ -234,187 +286,3 @@ onMounted(() => {
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.product-card-view {
-  .product-card {
-    overflow: hidden;
-
-    :deep(.ant-card-body) {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-
-    // 产品图标
-    .product-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;
-    }
-
-    // 产品标题
-    .product-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;
-          }
-        }
-
-        .product-key {
-          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;
-        }
-      }
-    }
-
-    // 产品图片
-    .product-image {
-      display: flex;
-      flex-shrink: 0;
-      align-items: center;
-      justify-content: center;
-      width: 80px;
-      height: 80px;
-      color: #1890ff;
-      background: linear-gradient(135deg, #40a9ff15 0%, #1890ff15 100%);
-      border-radius: 8px;
-    }
-
-    // 按钮组
-    .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-model {
-          color: #fa8c16;
-          border-color: #fa8c16;
-
-          &:hover {
-            color: white;
-            background: #fa8c16;
-          }
-        }
-
-        &.action-btn-delete {
-          flex: 0 0 32px;
-          padding: 0;
-        }
-      }
-    }
-  }
-}
-
-// 夜间模式适配
-html.dark {
-  .product-card-view {
-    .product-card {
-      .product-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%);
-        }
-
-        .product-key {
-          color: rgb(255 255 255 / 75%);
-        }
-      }
-
-      .product-image {
-        color: #69c0ff;
-        background: linear-gradient(135deg, #40a9ff25 0%, #1890ff25 100%);
-      }
-    }
-  }
-}
-</style>
diff --git a/apps/web-antdv-next/src/views/iot/product/product/modules/form.vue b/apps/web-antdv-next/src/views/iot/product/product/modules/form.vue
index e7878bd4b..848f84e1e 100644
--- a/apps/web-antdv-next/src/views/iot/product/product/modules/form.vue
+++ b/apps/web-antdv-next/src/views/iot/product/product/modules/form.vue
@@ -41,26 +41,25 @@ const getTitle = computed(() => {
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: { class: 'w-full' },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
   },
   layout: 'horizontal',
   schema: [],
   showDefaultActions: false,
-  wrapperClass: 'grid-cols-1',
 });
 
 const [AdvancedForm, advancedFormApi] = useVbenForm({
   commonConfig: {
     componentProps: { class: 'w-full' },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
   },
   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) {
@@ -104,6 +103,9 @@ const [Modal, modalApi] = useVbenModal({
       activeKey.value = [];
       return;
     }
+    formApi.setState({
+      schema: useBasicFormSchema(formApi, generateProductKey),
+    });
     // 加载数据
     const data = modalApi.getData<IotProductApi.Product>();
     if (!data || !data.id) {
@@ -146,9 +148,9 @@ const [Modal, modalApi] = useVbenModal({
     <div class="mx-4">
       <Form />
       <Collapse v-model:active-key="activeKey" class="mt-4">
-        <CollapsePanel key="advanced" header="更多设置">
+        <Collapse.Panel key="advanced" header="更多设置">
           <AdvancedForm />
-        </CollapsePanel>
+        </Collapse.Panel>
       </Collapse>
     </div>
   </Modal>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/data.ts b/apps/web-antdv-next/src/views/iot/rule/data/data.ts
deleted file mode 100644
index efebb92d0..000000000
--- a/apps/web-antdv-next/src/views/iot/rule/data/data.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { getSimpleProductList } from '#/api/iot/product/product';
-import { getRangePickerDefaultProps } from '#/utils';
-
-/** 列表的搜索表单 */
-export function useGridFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'name',
-      label: '规则名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入规则名称',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'productId',
-      label: '产品',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleProductList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择产品',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'status',
-      label: '规则状态',
-      component: 'Select',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        placeholder: '请选择状态',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-  ];
-}
-
-/** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
-  return [
-    { type: 'checkbox', width: 40 },
-    {
-      field: 'id',
-      title: '规则编号',
-      minWidth: 80,
-    },
-    {
-      field: 'name',
-      title: '规则名称',
-      minWidth: 150,
-    },
-    {
-      field: 'description',
-      title: '规则描述',
-      minWidth: 200,
-    },
-    {
-      field: 'status',
-      title: '规则状态',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.COMMON_STATUS },
-      },
-    },
-    // TODO @haohao：这里是【数据源】【数据目的】
-    {
-      field: 'sinkCount',
-      title: '数据流转数',
-      minWidth: 100,
-    },
-    {
-      field: 'createTime',
-      title: '创建时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
-    {
-      title: '操作',
-      width: 240,
-      fixed: 'right',
-      slots: { default: 'actions' },
-    },
-  ];
-}
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/index.vue b/apps/web-antdv-next/src/views/iot/rule/data/index.vue
index 37aa01355..cd97852bd 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/index.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/index.vue
@@ -1,128 +1,25 @@
 <script lang="ts" setup>
-// TODO @haohao：应该先有【规则】【目的】两个 tab；然后，在进行管理操作；类似，apps/web-antd/src/views/ai/chat/manager
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import { ref } from 'vue';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { Page } from '@vben/common-ui';
 
-import { message } from 'antdv-next';
+import { Tabs } from 'antdv-next';
 
-import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteDataRule, getDataRulePage } from '#/api/iot/rule/data/rule';
-import { $t } from '#/locales';
+import DataRuleList from './rule/index.vue';
+import DataSinkList from './sink/index.vue';
 
-import { useGridColumns, useGridFormSchema } from './data';
-import DataRuleForm from './rule/data-rule-form.vue';
-
-/** IoT 数据流转规则列表 */
-defineOptions({ name: 'IoTDataRule' });
-
-const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: DataRuleForm,
-  destroyOnClose: true,
-});
-
-/** 刷新表格 */
-function handleRefresh() {
-  gridApi.query();
-}
-
-/** 创建规则 */
-function handleCreate() {
-  formModalApi.setData(null).open();
-}
-
-/** 编辑规则 */
-function handleEdit(row: any) {
-  formModalApi.setData({ id: row.id }).open();
-}
-
-/** 删除规则 */
-async function handleDelete(row: any) {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
-  });
-  try {
-    await deleteDataRule(row.id!);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    handleRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
-  gridOptions: {
-    columns: useGridColumns(),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getDataRulePage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions,
-});
+const activeTabName = ref('rule');
 </script>
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
-    <Grid table-title="数据规则列表">
-      <template #toolbar-tools>
-        <TableAction
-          :actions="[
-            {
-              label: $t('ui.actionTitle.create', ['规则']),
-              type: 'primary',
-              icon: ACTION_ICON.ADD,
-              auth: ['iot:data-rule:create'],
-              onClick: handleCreate,
-            },
-          ]"
-        />
-      </template>
-      <template #actions="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: $t('common.edit'),
-              type: 'link',
-              icon: ACTION_ICON.EDIT,
-              auth: ['iot:data-rule:update'],
-              onClick: handleEdit.bind(null, row),
-            },
-            {
-              label: $t('common.delete'),
-              type: 'link',
-              danger: true,
-              icon: ACTION_ICON.DELETE,
-              auth: ['iot:data-rule:delete'],
-              popConfirm: {
-                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
-                confirm: handleDelete.bind(null, row),
-              },
-            },
-          ]"
-        />
-      </template>
-    </Grid>
+    <Tabs v-model:active-key="activeTabName">
+      <Tabs.TabPane key="rule" tab="规则">
+        <DataRuleList />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="sink" tab="目的">
+        <DataSinkList />
+      </Tabs.TabPane>
+    </Tabs>
   </Page>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/rule/components/source-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/rule/components/source-config-form.vue
deleted file mode 100644
index 7d450533a..000000000
--- a/apps/web-antdv-next/src/views/iot/rule/data/rule/components/source-config-form.vue
+++ /dev/null
@@ -1,311 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue';
-
-import {
-  IoTThingModelTypeEnum,
-  IotDeviceMessageMethodEnum,
-} from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
-
-import { Button, Form, Select, Table } from 'antdv-next';
-
-import { getSimpleDeviceList } from '#/api/iot/device/device';
-import { getSimpleProductList } from '#/api/iot/product/product';
-import { getThingModelListByProductId } from '#/api/iot/thingmodel';
-
-const formData = ref<any[]>([]);
-const productList = ref<any[]>([]); // 产品列表
-const deviceList = ref<any[]>([]); // 设备列表
-const thingModelCache = ref<Map<number, any[]>>(new Map()); // 缓存物模型数据，key 为 productId
-
-const formRules: any = reactive({
-  productId: [{ required: true, message: '产品不能为空', trigger: 'change' }],
-  deviceId: [{ required: true, message: '设备不能为空', trigger: 'change' }],
-  method: [{ required: true, message: '消息方法不能为空', trigger: 'change' }],
-});
-const formRef = ref(); // 表单 Ref
-
-const upstreamMethods = computed(() => {
-  return Object.values(IotDeviceMessageMethodEnum).filter(
-    (item) => item.upstream,
-  );
-}); // 获取上行消息方法列表
-
-/** 根据产品 ID 过滤设备 */
-function getFilteredDevices(productId: number) {
-  if (!productId) return [];
-  return deviceList.value.filter(
-    (device: any) => device.productId === productId,
-  );
-}
-
-/** 判断是否需要显示标识符选择器 */
-function shouldShowIdentifierSelect(row: any) {
-  return [
-    IotDeviceMessageMethodEnum.EVENT_POST.method,
-    IotDeviceMessageMethodEnum.PROPERTY_POST.method,
-  ].includes(row.method);
-}
-
-/** 获取物模型选项 */
-function getThingModelOptions(row: any) {
-  if (!row.productId || !shouldShowIdentifierSelect(row)) {
-    return [];
-  }
-  const thingModels: any[] = thingModelCache.value.get(row.productId) || [];
-  let filteredModels: any[] = [];
-  if (row.method === IotDeviceMessageMethodEnum.EVENT_POST.method) {
-    filteredModels = thingModels.filter(
-      (item: any) => item.type === IoTThingModelTypeEnum.EVENT,
-    );
-  } else if (row.method === IotDeviceMessageMethodEnum.PROPERTY_POST.method) {
-    filteredModels = thingModels.filter(
-      (item: any) => item.type === IoTThingModelTypeEnum.PROPERTY,
-    );
-  }
-  return filteredModels.map((item: any) => ({
-    label: `${item.name} (${item.identifier})`,
-    value: item.identifier,
-  }));
-}
-
-/** 加载产品列表 */
-async function loadProductList() {
-  try {
-    productList.value = await getSimpleProductList();
-  } catch (error) {
-    console.error('加载产品列表失败:', error);
-  }
-}
-
-/** 加载设备列表 */
-async function loadDeviceList() {
-  try {
-    deviceList.value = await getSimpleDeviceList();
-  } catch (error) {
-    console.error('加载设备列表失败:', error);
-  }
-}
-
-/** 加载物模型数据 */
-async function loadThingModel(productId: number) {
-  // 已缓存，无需重复加载
-  if (thingModelCache.value.has(productId)) {
-    return;
-  }
-  try {
-    const thingModels = await getThingModelListByProductId(productId);
-    thingModelCache.value.set(productId, thingModels);
-  } catch (error) {
-    console.error('加载物模型失败:', error);
-  }
-}
-
-/** 产品变化时处理 */
-async function handleProductChange(row: any, _index: number) {
-  row.deviceId = 0;
-  row.method = undefined;
-  row.identifier = undefined;
-  row.identifierLoading = false;
-}
-
-/** 消息方法变化时处理 */
-async function handleMethodChange(row: any, _index: number) {
-  // 清空标识符
-  row.identifier = undefined;
-  // 如果需要加载物模型数据
-  if (shouldShowIdentifierSelect(row) && row.productId) {
-    row.identifierLoading = true;
-    await loadThingModel(row.productId);
-    row.identifierLoading = false;
-  }
-}
-
-/** 新增按钮操作 */
-function handleAdd() {
-  const row = {
-    productId: undefined,
-    deviceId: undefined,
-    method: undefined,
-    identifier: undefined,
-    identifierLoading: false,
-  };
-  formData.value.push(row);
-}
-
-/** 删除按钮操作 */
-function handleDelete(index: number) {
-  formData.value.splice(index, 1);
-}
-
-/** 表单校验 */
-function validate() {
-  return formRef.value.validate();
-}
-
-/** 表单值 */
-function getData() {
-  return formData.value;
-}
-
-/** 设置表单值 */
-function setData(data: any[]) {
-  // 确保每个项都有必要的字段
-  formData.value = (data || []).map((item) => ({
-    ...item,
-    identifierLoading: false,
-  }));
-  // 为已有数据预加载物模型
-  data?.forEach(async (item) => {
-    if (item.productId && shouldShowIdentifierSelect(item)) {
-      await loadThingModel(item.productId);
-    }
-  });
-}
-
-/** 初始化 */
-onMounted(async () => {
-  await Promise.all([loadProductList(), loadDeviceList()]);
-});
-
-const columns = [
-  {
-    title: '产品',
-    dataIndex: 'productId',
-    width: 200,
-  },
-  {
-    title: '设备',
-    dataIndex: 'deviceId',
-    width: 200,
-  },
-  {
-    title: '消息',
-    dataIndex: 'method',
-    width: 200,
-  },
-  {
-    title: '标识符',
-    dataIndex: 'identifier',
-    width: 250,
-  },
-  {
-    title: '操作',
-    width: 80,
-    fixed: 'right',
-  },
-];
-
-defineExpose({ validate, getData, setData });
-</script>
-
-<template>
-  <Form ref="formRef" :model="{ data: formData }">
-    <!-- TODO @haohao：貌似有告警。 -->
-    <!-- TODO @haohao：是不是搞成 web-antd/src/views/erp/finance/receipt/modules/item-form.vue 的做法，通过 Grid；或 apps/web-antd/src/views/infra/demo/demo03/erp/modules/demo03-grade-list.vue；目的：后续 ele 通用性更好！ -->
-    <Table
-      :columns="columns"
-      :data-source="formData"
-      :pagination="false"
-      size="small"
-      bordered
-    >
-      <template #bodyCell="{ column, record, index }">
-        <template v-if="column.dataIndex === 'productId'">
-          <FormItem
-            :name="['data', index, 'productId']"
-            :rules="formRules.productId"
-            class="mb-0"
-          >
-            <Select
-              v-model:value="record.productId"
-              placeholder="请选择产品"
-              show-search
-              :filter-option="
-                (input: string, option: any) =>
-                  option.label.toLowerCase().includes(input.toLowerCase())
-              "
-              :options="
-                productList.map((p: any) => ({ label: p.name, value: p.id }))
-              "
-              @change="() => handleProductChange(record, index)"
-            />
-          </FormItem>
-        </template>
-        <template v-else-if="column.dataIndex === 'deviceId'">
-          <FormItem
-            :name="['data', index, 'deviceId']"
-            :rules="formRules.deviceId"
-            class="mb-0"
-          >
-            <Select
-              v-model:value="record.deviceId"
-              placeholder="请选择设备"
-              show-search
-              :filter-option="
-                (input: string, option: any) =>
-                  option.label.toLowerCase().includes(input.toLowerCase())
-              "
-              :options="[
-                { label: '全部设备', value: 0 },
-                ...getFilteredDevices(record.productId).map((d: any) => ({
-                  label: d.deviceName,
-                  value: d.id,
-                })),
-              ]"
-            />
-          </FormItem>
-        </template>
-        <template v-else-if="column.dataIndex === 'method'">
-          <FormItem
-            :name="['data', index, 'method']"
-            :rules="formRules.method"
-            class="mb-0"
-          >
-            <Select
-              v-model:value="record.method"
-              placeholder="请选择消息"
-              show-search
-              :filter-option="
-                (input: string, option: any) =>
-                  option.label.toLowerCase().includes(input.toLowerCase())
-              "
-              :options="
-                upstreamMethods.map((m: any) => ({
-                  label: m.name,
-                  value: m.method,
-                }))
-              "
-              @change="() => handleMethodChange(record, index)"
-            />
-          </FormItem>
-        </template>
-        <template v-else-if="column.dataIndex === 'identifier'">
-          <FormItem :name="['data', index, 'identifier']" class="mb-0">
-            <Select
-              v-if="shouldShowIdentifierSelect(record)"
-              v-model:value="record.identifier"
-              placeholder="请选择标识符"
-              show-search
-              :loading="record.identifierLoading"
-              :filter-option="
-                (input: string, option: any) =>
-                  option.label.toLowerCase().includes(input.toLowerCase())
-              "
-              :options="getThingModelOptions(record)"
-            />
-          </FormItem>
-        </template>
-        <template v-else-if="column.title === '操作'">
-          <Button type="link" danger @click="handleDelete(index)">删除</Button>
-        </template>
-      </template>
-    </Table>
-    <div class="mt-3 text-center">
-      <Button type="primary" @click="handleAdd">
-        <IconifyIcon icon="ant-design:plus-outlined" class="mr-1" />
-        添加数据源
-      </Button>
-    </div>
-  </Form>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/rule/data.ts b/apps/web-antdv-next/src/views/iot/rule/data/rule/data.ts
index bb6632c7b..fc496dc93 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/rule/data.ts
+++ b/apps/web-antdv-next/src/views/iot/rule/data/rule/data.ts
@@ -1,9 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DataRuleApi } from '#/api/iot/rule/data/rule';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { getDataSinkSimpleList } from '#/api/iot/rule/data/sink';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -44,11 +46,11 @@ export function useGridFormSchema(): VbenFormSchema[] {
 export function useRuleFormSchema(): VbenFormSchema[] {
   return [
     {
-      fieldName: 'id',
       component: 'Input',
+      fieldName: 'id',
       dependencies: {
-        show: false,
-        triggerFields: ['id'],
+        triggerFields: [''],
+        show: () => false,
       },
     },
     {
@@ -63,7 +65,7 @@ export function useRuleFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'description',
       label: '规则描述',
-      component: 'TextArea',
+      component: 'Textarea',
       componentProps: {
         placeholder: '请输入规则描述',
         rows: 3,
@@ -82,20 +84,58 @@ export function useRuleFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'sinkIds',
       label: '数据目的',
-      component: 'Select',
+      component: 'ApiSelect',
       componentProps: {
-        placeholder: '请选择数据目的',
+        api: getDataSinkSimpleList,
+        labelField: 'name',
+        valueField: 'id',
         mode: 'multiple',
         allowClear: true,
-        options: [],
+        placeholder: '请选择数据目的',
       },
       rules: 'required',
     },
   ];
 }
 
+/** 数据源配置（行编辑表）的字段 */
+export function useSourceConfigColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'productId',
+      title: '产品',
+      minWidth: 200,
+      slots: { default: 'productId' },
+    },
+    {
+      field: 'deviceId',
+      title: '设备',
+      minWidth: 200,
+      slots: { default: 'deviceId' },
+    },
+    {
+      field: 'method',
+      title: '消息',
+      minWidth: 200,
+      slots: { default: 'method' },
+    },
+    {
+      field: 'identifier',
+      title: '标识符',
+      minWidth: 250,
+      slots: { default: 'identifier' },
+    },
+    {
+      title: '操作',
+      width: 80,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<DataRuleApi.DataRule>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
@@ -126,13 +166,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'sourceConfigs',
       title: '数据源',
       minWidth: 100,
-      formatter: ({ cellValue }: any) => `${cellValue?.length || 0} 个`,
+      formatter: ({ cellValue }) => `${cellValue?.length || 0} 个`,
     },
     {
       field: 'sinkIds',
       title: '数据目的',
       minWidth: 100,
-      formatter: ({ cellValue }: any) => `${cellValue?.length || 0} 个`,
+      formatter: ({ cellValue }) => `${cellValue?.length || 0} 个`,
     },
     {
       field: 'createTime',
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/rule/index.vue b/apps/web-antdv-next/src/views/iot/rule/data/rule/index.vue
index 469edcb37..3a2ccfdfc 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/rule/index.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/rule/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DataRuleApi } from '#/api/iot/rule/data/rule';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
@@ -10,15 +11,10 @@ import { deleteDataRule, getDataRulePage } from '#/api/iot/rule/data/rule';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DataRuleForm from './data-rule-form.vue';
-
-// TODO @haohao：貌似和 apps/web-antd/src/views/iot/rule/data/index.vue 重复的。可能这个是对的。然后把 apps/web-antd/src/views/iot/rule/data/index.vue 搞成 tabs；
-
-/** IoT 数据流转规则列表 */
-defineOptions({ name: 'IotDataRule' });
+import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: DataRuleForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -33,18 +29,18 @@ function handleCreate() {
 }
 
 /** 编辑规则 */
-function handleEdit(row: any) {
+function handleEdit(row: DataRuleApi.DataRule) {
   formModalApi.setData({ id: row.id }).open();
 }
 
 /** 删除规则 */
-async function handleDelete(row: any) {
+async function handleDelete(row: DataRuleApi.DataRule) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteDataRule(row.id);
+    await deleteDataRule(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
@@ -79,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions,
+  } as VxeTableGridOptions<DataRuleApi.DataRule>,
 });
 </script>
 
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/rule/data-rule-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/rule/modules/form.vue
similarity index 72%
rename from apps/web-antdv-next/src/views/iot/rule/data/rule/data-rule-form.vue
rename to apps/web-antdv-next/src/views/iot/rule/data/rule/modules/form.vue
index 5f7d2f0cb..93b67f157 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/rule/data-rule-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/rule/modules/form.vue
@@ -1,4 +1,6 @@
 <script lang="ts" setup>
+import type { DataRuleApi } from '#/api/iot/rule/data/rule';
+
 import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
@@ -11,17 +13,14 @@ import {
   getDataRule,
   updateDataRule,
 } from '#/api/iot/rule/data/rule';
-import { getDataSinkSimpleList } from '#/api/iot/rule/data/sink';
 import { $t } from '#/locales';
 
-import SourceConfigForm from './components/source-config-form.vue';
-import { useRuleFormSchema } from './data';
+import { useRuleFormSchema } from '../data';
+import SourceConfigForm from './source-config-form.vue';
 
 const emit = defineEmits(['success']);
-const formData = ref<any>();
-const sourceConfigRef = ref();
-
-// TODO @haohao：应该放到 modules
+const formData = ref<DataRuleApi.DataRule>();
+const sourceConfigRef = ref<InstanceType<typeof SourceConfigForm>>();
 const getTitle = computed(() => {
   return formData.value?.id
     ? $t('ui.actionTitle.edit', ['数据规则'])
@@ -41,22 +40,22 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-// TODO @haohao：这里需要优化下，参考别的模块写法；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-
     // 校验数据源配置
-    await sourceConfigRef.value?.validate();
-
+    try {
+      await sourceConfigRef.value?.validate();
+    } catch {
+      return;
+    }
     modalApi.lock();
     // 提交表单
-    const data = (await formApi.getValues()) as any;
+    const data = (await formApi.getValues()) as DataRuleApi.DataRule;
     data.sourceConfigs = sourceConfigRef.value?.getData() || [];
-
     try {
       await (formData.value?.id ? updateDataRule(data) : createDataRule(data));
       // 关闭并提示
@@ -74,22 +73,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     // 加载数据
-    const data = modalApi.getData<any>();
-
-    // 加载数据目的列表
-    const sinkList = await getDataSinkSimpleList();
-    formApi.updateSchema([
-      {
-        fieldName: 'sinkIds',
-        componentProps: {
-          options: sinkList.map((item: any) => ({
-            label: item.name,
-            value: item.id,
-          })),
-        },
-      },
-    ]);
-
+    const data = modalApi.getData<DataRuleApi.DataRule>();
     if (!data || !data.id) {
       return;
     }
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/rule/modules/source-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/rule/modules/source-config-form.vue
new file mode 100644
index 000000000..b367f4fe7
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/rule/data/rule/modules/source-config-form.vue
@@ -0,0 +1,301 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import {
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, message, Select } from 'antdv-next';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSimpleDeviceList } from '#/api/iot/device/device';
+import { getSimpleProductList } from '#/api/iot/product/product';
+import { getThingModelListByProductId } from '#/api/iot/thingmodel';
+
+import { useSourceConfigColumns } from '../data';
+
+const formData = ref<any[]>([]);
+const productList = ref<any[]>([]); // 产品列表
+const deviceList = ref<any[]>([]); // 设备列表
+const thingModelCache = ref<Map<number, any[]>>(new Map()); // 缓存物模型数据，key 为 productId
+
+/** 上行消息方法列表 */
+const upstreamMethods = computed(() => {
+  return Object.values(IotDeviceMessageMethodEnum).filter(
+    (item) => item.upstream,
+  );
+});
+
+/** 根据产品 ID 过滤设备 */
+function getFilteredDevices(productId: number) {
+  if (!productId) return [];
+  return deviceList.value.filter(
+    (device: any) => device.productId === productId,
+  );
+}
+
+/** 判断是否需要显示标识符选择器 */
+function shouldShowIdentifierSelect(row: any) {
+  return [
+    IotDeviceMessageMethodEnum.EVENT_POST.method,
+    IotDeviceMessageMethodEnum.PROPERTY_POST.method,
+  ].includes(row.method);
+}
+
+/** 获取物模型选项 */
+function getThingModelOptions(row: any) {
+  if (!row.productId || !shouldShowIdentifierSelect(row)) {
+    return [];
+  }
+  const thingModels: any[] = thingModelCache.value.get(row.productId) || [];
+  let filteredModels: any[] = [];
+  if (row.method === IotDeviceMessageMethodEnum.EVENT_POST.method) {
+    filteredModels = thingModels.filter(
+      (item: any) => item.type === IoTThingModelTypeEnum.EVENT,
+    );
+  } else if (row.method === IotDeviceMessageMethodEnum.PROPERTY_POST.method) {
+    filteredModels = thingModels.filter(
+      (item: any) => item.type === IoTThingModelTypeEnum.PROPERTY,
+    );
+  }
+  return filteredModels.map((item: any) => ({
+    label: `${item.name} (${item.identifier})`,
+    value: item.identifier,
+  }));
+}
+
+/** 加载产品列表 */
+async function loadProductList() {
+  try {
+    productList.value = await getSimpleProductList();
+  } catch (error) {
+    console.error('加载产品列表失败:', error);
+  }
+}
+
+/** 加载设备列表 */
+async function loadDeviceList() {
+  try {
+    deviceList.value = await getSimpleDeviceList();
+  } catch (error) {
+    console.error('加载设备列表失败:', error);
+  }
+}
+
+/** 加载物模型数据 */
+async function loadThingModel(productId: number) {
+  if (thingModelCache.value.has(productId)) {
+    return;
+  }
+  try {
+    const thingModels = await getThingModelListByProductId(productId);
+    thingModelCache.value.set(productId, thingModels);
+  } catch (error) {
+    console.error('加载物模型失败:', error);
+  }
+}
+
+/** 产品变化时清空设备 / 消息 / 标识符 */
+function handleProductChange(rowIndex: number) {
+  const row = formData.value[rowIndex];
+  row.deviceId = 0;
+  row.method = undefined;
+  row.identifier = undefined;
+  row.identifierLoading = false;
+}
+
+/** 消息方法变化时清空标识符 + 按需加载物模型 */
+async function handleMethodChange(rowIndex: number) {
+  const row = formData.value[rowIndex];
+  row.identifier = undefined;
+  if (shouldShowIdentifierSelect(row) && row.productId) {
+    row.identifierLoading = true;
+    await loadThingModel(row.productId);
+    row.identifierLoading = false;
+  }
+}
+
+/** 表格配置 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useSourceConfigColumns(),
+    data: formData.value,
+    minHeight: 160,
+    border: true,
+    showOverflow: false,
+    rowConfig: { isHover: true, height: 64 },
+    pagerConfig: { enabled: false },
+    toolbarConfig: { enabled: false },
+  },
+});
+
+/** 同步 formData 到 vxe-grid */
+async function reloadGrid() {
+  await nextTick();
+  await gridApi.grid?.reloadData(formData.value);
+}
+
+/** 新增一行数据源 */
+async function handleAdd() {
+  formData.value.push({
+    productId: undefined,
+    deviceId: undefined,
+    method: undefined,
+    identifier: undefined,
+    identifierLoading: false,
+  });
+  await reloadGrid();
+}
+
+/** 删除一行数据源 */
+async function handleDelete(rowIndex: number) {
+  formData.value.splice(rowIndex, 1);
+  await reloadGrid();
+}
+
+/** 校验全部行；返回 Promise，失败时 reject 第一条错误信息 */
+function validate() {
+  if (formData.value.length === 0) {
+    message.error('请至少添加一条数据源配置');
+    return Promise.reject(new Error('数据源配置不能为空'));
+  }
+  for (let i = 0; i < formData.value.length; i++) {
+    const row = formData.value[i];
+    if (!row.productId) {
+      message.error(`第 ${i + 1} 行：产品不能为空`);
+      return Promise.reject(new Error('产品不能为空'));
+    }
+    if (row.deviceId === undefined || row.deviceId === null) {
+      message.error(`第 ${i + 1} 行：设备不能为空`);
+      return Promise.reject(new Error('设备不能为空'));
+    }
+    if (!row.method) {
+      message.error(`第 ${i + 1} 行：消息方法不能为空`);
+      return Promise.reject(new Error('消息方法不能为空'));
+    }
+  }
+  return Promise.resolve();
+}
+
+/** 取当前所有行的值（剔除 identifierLoading 等仅供 UI 使用的临时字段） */
+function getData() {
+  return formData.value.map(
+    ({ identifierLoading: _identifierLoading, ...rest }) => rest,
+  );
+}
+
+/** 设置初始数据 */
+async function setData(data: any[]) {
+  formData.value = (data || []).map((item) => ({
+    ...item,
+    identifierLoading: false,
+  }));
+  // 为已有数据预加载物模型；并行加载，不阻塞 reloadGrid
+  await Promise.all(
+    (data || [])
+      .filter((item) => item.productId && shouldShowIdentifierSelect(item))
+      .map((item) => loadThingModel(item.productId)),
+  );
+  await reloadGrid();
+}
+
+onMounted(async () => {
+  await Promise.all([loadProductList(), loadDeviceList()]);
+});
+
+defineExpose({ validate, getData, setData });
+</script>
+
+<template>
+  <div>
+    <Grid>
+      <template #productId="{ rowIndex }">
+        <Select
+          v-model:value="formData[rowIndex].productId"
+          placeholder="请选择产品"
+          show-search
+          allow-clear
+          :filter-option="
+            (input: string, option: any) =>
+              option.label.toLowerCase().includes(input.toLowerCase())
+          "
+          :options="
+            productList.map((p: any) => ({ label: p.name, value: p.id }))
+          "
+          class="w-full"
+          @change="() => handleProductChange(rowIndex)"
+        />
+      </template>
+      <template #deviceId="{ rowIndex }">
+        <Select
+          v-model:value="formData[rowIndex].deviceId"
+          placeholder="请选择设备"
+          show-search
+          allow-clear
+          :filter-option="
+            (input: string, option: any) =>
+              option.label.toLowerCase().includes(input.toLowerCase())
+          "
+          :options="[
+            { label: '全部设备', value: 0 },
+            ...getFilteredDevices(formData[rowIndex].productId).map(
+              (d: any) => ({
+                label: d.deviceName,
+                value: d.id,
+              }),
+            ),
+          ]"
+          class="w-full"
+        />
+      </template>
+      <template #method="{ rowIndex }">
+        <Select
+          v-model:value="formData[rowIndex].method"
+          placeholder="请选择消息"
+          show-search
+          allow-clear
+          :filter-option="
+            (input: string, option: any) =>
+              option.label.toLowerCase().includes(input.toLowerCase())
+          "
+          :options="
+            upstreamMethods.map((m: any) => ({
+              label: m.name,
+              value: m.method,
+            }))
+          "
+          class="w-full"
+          @change="() => handleMethodChange(rowIndex)"
+        />
+      </template>
+      <template #identifier="{ rowIndex }">
+        <Select
+          v-if="shouldShowIdentifierSelect(formData[rowIndex])"
+          v-model:value="formData[rowIndex].identifier"
+          placeholder="请选择标识符"
+          show-search
+          allow-clear
+          :loading="formData[rowIndex].identifierLoading"
+          :filter-option="
+            (input: string, option: any) =>
+              option.label.toLowerCase().includes(input.toLowerCase())
+          "
+          :options="getThingModelOptions(formData[rowIndex])"
+          class="w-full"
+        />
+        <span v-else class="text-xs text-muted-foreground">-</span>
+      </template>
+      <template #actions="{ rowIndex }">
+        <Button danger type="link" @click="handleDelete(rowIndex)">删除</Button>
+      </template>
+    </Grid>
+    <div class="mt-3 text-center">
+      <Button type="primary" @click="handleAdd">
+        <IconifyIcon icon="ant-design:plus-outlined" class="mr-1" />
+        添加数据源
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/components/key-value-editor.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/components/key-value-editor.vue
index b94eb7f49..2b9e18dd4 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/components/key-value-editor.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/components/key-value-editor.vue
@@ -16,15 +16,18 @@ const props = defineProps<{
 const emit = defineEmits(['update:modelValue']);
 
 interface KeyValueItem {
+  _uid: number;
   key: string;
   value: string;
 }
 
+let uidCounter = 0;
 const items = ref<KeyValueItem[]>([]); // 内部 key-value 项列表
 
 /** 添加项目 */
 function addItem() {
-  items.value.push({ key: '', value: '' });
+  uidCounter += 1;
+  items.value.push({ _uid: uidCounter, key: '', value: '' });
   updateModelValue();
 }
 
@@ -54,24 +57,24 @@ watch(
     if (isEmpty(val) || !isEmpty(items.value)) {
       return;
     }
-    items.value = Object.entries(props.modelValue).map(([key, value]) => ({
-      key,
-      value,
-    }));
+    items.value = Object.entries(props.modelValue).map(([key, value]) => {
+      uidCounter += 1;
+      return { _uid: uidCounter, key, value };
+    });
   },
 );
 </script>
 
 <template>
-  <div v-for="(item, index) in items" :key="index" class="mb-2 flex w-full">
-    <Input v-model="item.key" class="mr-2" placeholder="键" />
-    <Input v-model="item.value" placeholder="值" />
-    <Button class="ml-2" text danger @click="removeItem(index)">
+  <div v-for="(item, index) in items" :key="item._uid" class="mb-2 flex w-full">
+    <Input v-model:value="item.key" class="mr-2" placeholder="键" />
+    <Input v-model:value="item.value" placeholder="值" />
+    <Button class="ml-2" type="link" danger @click="removeItem(index)">
       <IconifyIcon icon="ant-design:delete-outlined" />
       删除
     </Button>
   </div>
-  <Button text type="primary" @click="addItem">
+  <Button type="link" @click="addItem">
     <IconifyIcon icon="ant-design:plus-outlined" />
     {{ addButtonText }}
   </Button>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/database-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/database-config-form.vue
new file mode 100644
index 000000000..f06210d8b
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/database-config-form.vue
@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
+
+import { useClipboard, useVModel } from '@vueuse/core';
+import { Button, Form, Input, message } from 'antdv-next';
+
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
+
+const props = defineProps<{ modelValue: any }>();
+
+const emit = defineEmits(['update:modelValue']);
+
+const TABLE_SQL = `CREATE TABLE iot_device_message_sink (
+    id VARCHAR(64) NOT NULL COMMENT '消息ID',
+    device_id BIGINT NOT NULL COMMENT '设备编号',
+    tenant_id BIGINT NOT NULL DEFAULT 0 COMMENT '租户编号',
+    method VARCHAR(128) COMMENT '请求方法',
+    report_time DATETIME COMMENT '上报时间',
+    data TEXT COMMENT '完整消息JSON',
+    create_time DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
+    PRIMARY KEY (id) USING BTREE,
+    INDEX idx_create_time (create_time ASC) USING BTREE
+) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = 'IoT 设备消息流转目标表';`;
+
+const config = useVModel(props, 'modelValue', emit);
+
+const showSqlTip = ref(false);
+const copied = ref(false);
+const { copy } = useClipboard();
+let copyResetTimer: null | ReturnType<typeof setTimeout> = null;
+
+async function handleCopySql() {
+  await copy(TABLE_SQL);
+  copied.value = true;
+  message.success('建表 SQL 已复制到剪贴板');
+  if (copyResetTimer) {
+    clearTimeout(copyResetTimer);
+  }
+  copyResetTimer = setTimeout(() => {
+    copied.value = false;
+    copyResetTimer = null;
+  }, 2000);
+}
+
+onBeforeUnmount(() => {
+  if (copyResetTimer) {
+    clearTimeout(copyResetTimer);
+    copyResetTimer = null;
+  }
+});
+
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return;
+  }
+  config.value = {
+    type: `${IotDataSinkTypeEnum.DATABASE}`,
+    jdbcUrl: '',
+    username: '',
+    password: '',
+    tableName: 'iot_device_message_sink',
+  };
+});
+</script>
+
+<template>
+  <Form.Item
+    :name="['config', 'jdbcUrl']"
+    :rules="[
+      { required: true, message: 'JDBC 连接地址不能为空', trigger: 'blur' },
+    ]"
+    label="JDBC 地址"
+  >
+    <Input
+      v-model:value="config.jdbcUrl"
+      placeholder="请输入 JDBC 连接地址，如：jdbc:mysql://localhost:3306/iot_data"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'username']"
+    :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
+    label="用户名"
+  >
+    <Input v-model:value="config.username" placeholder="请输入数据库用户名" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'password']"
+    :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]"
+    label="密码"
+  >
+    <Input.Password
+      v-model:value="config.password"
+      placeholder="请输入数据库密码"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'tableName']"
+    :rules="[{ required: true, message: '目标表名不能为空', trigger: 'blur' }]"
+    label="目标表名"
+  >
+    <div class="flex items-center gap-3">
+      <Input
+        v-model:value="config.tableName"
+        placeholder="目标表名"
+        class="w-[240px]"
+      />
+      <Button type="link" @click="showSqlTip = !showSqlTip">
+        <IconifyIcon
+          :icon="showSqlTip ? 'lucide:chevron-up' : 'lucide:file-text'"
+          class="mr-1"
+        />
+        {{ showSqlTip ? '收起表结构提示' : '查看表结构提示' }}
+      </Button>
+    </div>
+  </Form.Item>
+  <div
+    v-if="showSqlTip"
+    class="mt-2 overflow-hidden rounded border border-gray-200 dark:border-gray-700"
+  >
+    <div
+      class="flex items-center justify-between bg-gray-100 px-3 py-2 dark:bg-gray-800"
+    >
+      <span class="text-xs text-gray-600 dark:text-gray-300">
+        目标数据库需包含以下结构的表，才能正常接收数据流转的消息
+      </span>
+      <Button size="small" @click="handleCopySql">
+        <IconifyIcon
+          :icon="copied ? 'lucide:check' : 'lucide:copy'"
+          class="mr-1"
+        />
+        {{ copied ? '已复制' : '复制 SQL' }}
+      </Button>
+    </div>
+    <pre
+      class="m-0 overflow-x-auto bg-gray-50 p-3 font-mono text-[12px] leading-normal text-gray-800 dark:bg-gray-900 dark:text-gray-200"
+    ><code>{{ TABLE_SQL }}</code></pre>
+  </div>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/http-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/http-config-form.vue
index 7e9d7b7f3..2cd0f38ed 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/http-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/http-config-form.vue
@@ -1,53 +1,55 @@
+<!--suppress HttpUrlsUsage -->
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue';
 
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, Select } from 'antdv-next';
+import { Form, Input, Select } from 'antdv-next';
+
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
 
 import KeyValueEditor from './components/key-value-editor.vue';
 
-defineOptions({ name: 'HttpConfigForm' });
-
-const props = defineProps<{
-  modelValue: any;
-}>();
+const props = defineProps<{ modelValue: any }>();
 const emit = defineEmits(['update:modelValue']);
-const config = useVModel(props, 'modelValue', emit) as any;
+const config = useVModel(props, 'modelValue', emit);
 
-// noinspection HttpUrlsUsage
-/** URL处理 */
-const urlPrefix = ref('http://');
+const urlPrefix = ref<'http://' | 'https://'>('http://');
 const urlPath = ref('');
-const fullUrl = computed(() => {
-  return urlPath.value ? urlPrefix.value + urlPath.value : '';
-});
+const fullUrl = computed(() =>
+  urlPath.value ? urlPrefix.value + urlPath.value : '',
+);
+
+function syncUrlFields(url?: string) {
+  if (url?.startsWith('https://')) {
+    urlPrefix.value = 'https://';
+    urlPath.value = url.slice(8);
+  } else if (url?.startsWith('http://')) {
+    urlPrefix.value = 'http://';
+    urlPath.value = url.slice(7);
+  } else {
+    urlPath.value = url ?? '';
+  }
+}
 
-/** 监听 URL 变化 */
 watch([urlPrefix, urlPath], () => {
   config.value.url = fullUrl.value;
 });
 
-/** 组件初始化 */
+watch(
+  () => config.value?.url,
+  (url) => syncUrlFields(url),
+  { immediate: true },
+);
+
 onMounted(() => {
   if (!isEmpty(config.value)) {
-    // 初始化 URL
-    if (config.value.url) {
-      if (config.value.url.startsWith('https://')) {
-        urlPrefix.value = 'https://';
-        urlPath.value = config.value.url.slice(8);
-      } else if (config.value.url.startsWith('http://')) {
-        urlPrefix.value = 'http://';
-        urlPath.value = config.value.url.slice(7);
-      } else {
-        urlPath.value = config.value.url;
-      }
-    }
+    syncUrlFields(config.value.url);
     return;
   }
-
   config.value = {
+    type: `${IotDataSinkTypeEnum.HTTP}`,
     url: '',
     method: 'POST',
     headers: {},
@@ -55,51 +57,48 @@ onMounted(() => {
     body: '',
   };
 });
-
-const methodOptions = [
-  { label: 'GET', value: 'GET' },
-  { label: 'POST', value: 'POST' },
-  { label: 'PUT', value: 'PUT' },
-  { label: 'DELETE', value: 'DELETE' },
-];
 </script>
 
 <template>
-  <div class="space-y-4">
-    <FormItem label="请求地址" required>
-      <Input v-model:value="urlPath" placeholder="请输入请求地址">
-        <template #addonBefore>
-          <Select
-            v-model:value="urlPrefix"
-            placeholder="Select"
-            style="width: 115px"
-            :options="[
-              { label: 'http://', value: 'http://' },
-              { label: 'https://', value: 'https://' },
-            ]"
-          />
-        </template>
-      </Input>
-    </FormItem>
-    <FormItem label="请求方法" required>
-      <Select
-        v-model:value="config.method"
-        placeholder="请选择请求方法"
-        :options="methodOptions"
-      />
-    </FormItem>
-    <FormItem label="请求头">
-      <KeyValueEditor v-model="config.headers" add-button-text="添加请求头" />
-    </FormItem>
-    <FormItem label="请求参数">
-      <KeyValueEditor v-model="config.query" add-button-text="添加参数" />
-    </FormItem>
-    <FormItem label="请求体">
-      <Input.TextArea
-        v-model:value="config.body"
-        placeholder="请输入内容"
-        :rows="3"
-      />
-    </FormItem>
-  </div>
+  <Form.Item
+    :name="['config', 'url']"
+    :rules="[{ required: true, message: '请求地址不能为空', trigger: 'blur' }]"
+    label="请求地址"
+  >
+    <Input v-model:value="urlPath" placeholder="请输入请求地址">
+      <template #addonBefore>
+        <Select v-model:value="urlPrefix" class="w-[100px]">
+          <Select.Option value="http://">http://</Select.Option>
+          <Select.Option value="https://">https://</Select.Option>
+        </Select>
+      </template>
+    </Input>
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'method']"
+    :rules="[
+      { required: true, message: '请求方法不能为空', trigger: 'change' },
+    ]"
+    label="请求方法"
+  >
+    <Select v-model:value="config.method" placeholder="请选择请求方法">
+      <Select.Option value="GET">GET</Select.Option>
+      <Select.Option value="POST">POST</Select.Option>
+      <Select.Option value="PUT">PUT</Select.Option>
+      <Select.Option value="DELETE">DELETE</Select.Option>
+    </Select>
+  </Form.Item>
+  <Form.Item label="请求头">
+    <KeyValueEditor v-model="config.headers" add-button-text="添加请求头" />
+  </Form.Item>
+  <Form.Item label="请求参数">
+    <KeyValueEditor v-model="config.query" add-button-text="添加参数" />
+  </Form.Item>
+  <Form.Item label="请求体">
+    <Input.TextArea
+      v-model:value="config.body"
+      placeholder="请输入内容"
+      :rows="4"
+    />
+  </Form.Item>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/index.ts b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/index.ts
index 6fb57388c..d2967eafe 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/index.ts
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/index.ts
@@ -1,6 +1,9 @@
+export { default as DatabaseConfigForm } from './database-config-form.vue';
 export { default as HttpConfigForm } from './http-config-form.vue';
 export { default as KafkaMqConfigForm } from './kafka-mq-config-form.vue';
 export { default as MqttConfigForm } from './mqtt-config-form.vue';
 export { default as RabbitMqConfigForm } from './rabbit-mq-config-form.vue';
 export { default as RedisStreamConfigForm } from './redis-stream-config-form.vue';
 export { default as RocketMqConfigForm } from './rocket-mq-config-form.vue';
+export { default as TcpConfigForm } from './tcp-config-form.vue';
+export { default as WebSocketConfigForm } from './websocket-config-form.vue';
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue
index 6fe385d54..6da154393 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue
@@ -4,22 +4,20 @@ import { onMounted } from 'vue';
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, Switch } from 'antdv-next';
+import { Form, Input, Switch } from 'antdv-next';
 
-defineOptions({ name: 'KafkaMQConfigForm' });
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
 
-const props = defineProps<{
-  modelValue: any;
-}>();
+const props = defineProps<{ modelValue: any }>();
 const emit = defineEmits(['update:modelValue']);
-const config = useVModel(props, 'modelValue', emit) as any;
+const config = useVModel(props, 'modelValue', emit);
 
-/** 组件初始化 */
 onMounted(() => {
   if (!isEmpty(config.value)) {
     return;
   }
   config.value = {
+    type: `${IotDataSinkTypeEnum.KAFKA}`,
     bootstrapServers: '',
     username: '',
     password: '',
@@ -30,27 +28,38 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-4">
-    <FormItem label="服务地址" required>
-      <Input
-        v-model:value="config.bootstrapServers"
-        placeholder="请输入服务地址，如：localhost:9092"
-      />
-    </FormItem>
-    <FormItem label="用户名">
-      <Input v-model:value="config.username" placeholder="请输入用户名" />
-    </FormItem>
-    <FormItem label="密码">
-      <Input.Password
-        v-model:value="config.password"
-        placeholder="请输入密码"
-      />
-    </FormItem>
-    <FormItem label="启用 SSL" required>
-      <Switch v-model:checked="config.ssl" />
-    </FormItem>
-    <FormItem label="主题" required>
-      <Input v-model:value="config.topic" placeholder="请输入主题" />
-    </FormItem>
-  </div>
+  <Form.Item
+    :name="['config', 'bootstrapServers']"
+    :rules="[{ required: true, message: '服务地址不能为空', trigger: 'blur' }]"
+    label="服务地址"
+  >
+    <Input
+      v-model:value="config.bootstrapServers"
+      placeholder="请输入服务地址，如：localhost:9092"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'username']"
+    :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
+    label="用户名"
+  >
+    <Input v-model:value="config.username" placeholder="请输入用户名" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'password']"
+    :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]"
+    label="密码"
+  >
+    <Input.Password v-model:value="config.password" placeholder="请输入密码" />
+  </Form.Item>
+  <Form.Item :name="['config', 'ssl']" label="启用 SSL">
+    <Switch v-model:checked="config.ssl" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'topic']"
+    :rules="[{ required: true, message: '主题不能为空', trigger: 'blur' }]"
+    label="主题"
+  >
+    <Input v-model:value="config.topic" placeholder="请输入主题" />
+  </Form.Item>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/mqtt-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/mqtt-config-form.vue
index 3e6c91017..b8848491b 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/mqtt-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/mqtt-config-form.vue
@@ -4,22 +4,20 @@ import { onMounted } from 'vue';
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input } from 'antdv-next';
+import { Form, Input } from 'antdv-next';
 
-defineOptions({ name: 'MqttConfigForm' });
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
 
-const props = defineProps<{
-  modelValue: any;
-}>();
+const props = defineProps<{ modelValue: any }>();
 const emit = defineEmits(['update:modelValue']);
-const config = useVModel(props, 'modelValue', emit) as any;
+const config = useVModel(props, 'modelValue', emit);
 
-/** 组件初始化 */
 onMounted(() => {
   if (!isEmpty(config.value)) {
     return;
   }
   config.value = {
+    type: `${IotDataSinkTypeEnum.MQTT}`,
     url: '',
     username: '',
     password: '',
@@ -30,27 +28,44 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-4">
-    <FormItem label="服务地址" required>
-      <Input
-        v-model:value="config.url"
-        placeholder="请输入MQTT服务地址，如：mqtt://localhost:1883"
-      />
-    </FormItem>
-    <FormItem label="用户名" required>
-      <Input v-model:value="config.username" placeholder="请输入用户名" />
-    </FormItem>
-    <FormItem label="密码" required>
-      <Input.Password
-        v-model:value="config.password"
-        placeholder="请输入密码"
-      />
-    </FormItem>
-    <FormItem label="客户端ID" required>
-      <Input v-model:value="config.clientId" placeholder="请输入客户端ID" />
-    </FormItem>
-    <FormItem label="主题" required>
-      <Input v-model:value="config.topic" placeholder="请输入主题" />
-    </FormItem>
-  </div>
+  <Form.Item
+    :name="['config', 'url']"
+    :rules="[{ required: true, message: '服务地址不能为空', trigger: 'blur' }]"
+    label="服务地址"
+  >
+    <Input
+      v-model:value="config.url"
+      placeholder="请输入 MQTT 服务地址，如：mqtt://localhost:1883"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'username']"
+    :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
+    label="用户名"
+  >
+    <Input v-model:value="config.username" placeholder="请输入用户名" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'password']"
+    :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]"
+    label="密码"
+  >
+    <Input.Password v-model:value="config.password" placeholder="请输入密码" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'clientId']"
+    :rules="[
+      { required: true, message: '客户端 ID 不能为空', trigger: 'blur' },
+    ]"
+    label="客户端 ID"
+  >
+    <Input v-model:value="config.clientId" placeholder="请输入客户端 ID" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'topic']"
+    :rules="[{ required: true, message: '主题不能为空', trigger: 'blur' }]"
+    label="主题"
+  >
+    <Input v-model:value="config.topic" placeholder="请输入主题" />
+  </Form.Item>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue
index 4cd8519f6..bb9108bcb 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue
@@ -4,27 +4,25 @@ import { onMounted } from 'vue';
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, InputNumber } from 'antdv-next';
+import { Form, Input, InputNumber } from 'antdv-next';
 
-defineOptions({ name: 'RabbitMQConfigForm' });
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
 
-const props = defineProps<{
-  modelValue: any;
-}>();
+const props = defineProps<{ modelValue: any }>();
 const emit = defineEmits(['update:modelValue']);
-const config = useVModel(props, 'modelValue', emit) as any;
+const config = useVModel(props, 'modelValue', emit);
 
-/** 组件初始化 */
 onMounted(() => {
   if (!isEmpty(config.value)) {
     return;
   }
   config.value = {
+    type: `${IotDataSinkTypeEnum.RABBITMQ}`,
     host: '',
     port: 5672,
+    virtualHost: '/',
     username: '',
     password: '',
-    virtualHost: '/',
     exchange: '',
     routingKey: '',
     queue: '',
@@ -33,45 +31,78 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-4">
-    <FormItem label="主机地址" required>
-      <Input
-        v-model:value="config.host"
-        placeholder="请输入主机地址，如：localhost"
-      />
-    </FormItem>
-    <FormItem label="端口" required>
-      <InputNumber
-        v-model:value="config.port"
-        :min="1"
-        :max="65535"
-        placeholder="请输入端口，如：5672"
-        class="w-full"
-      />
-    </FormItem>
-    <FormItem label="用户名" required>
-      <Input v-model:value="config.username" placeholder="请输入用户名" />
-    </FormItem>
-    <FormItem label="密码" required>
-      <Input.Password
-        v-model:value="config.password"
-        placeholder="请输入密码"
-      />
-    </FormItem>
-    <FormItem label="虚拟主机" required>
-      <Input
-        v-model:value="config.virtualHost"
-        placeholder="请输入虚拟主机，如：/"
-      />
-    </FormItem>
-    <FormItem label="交换机" required>
-      <Input v-model:value="config.exchange" placeholder="请输入交换机名称" />
-    </FormItem>
-    <FormItem label="路由键" required>
-      <Input v-model:value="config.routingKey" placeholder="请输入路由键" />
-    </FormItem>
-    <FormItem label="队列" required>
-      <Input v-model:value="config.queue" placeholder="请输入队列名称" />
-    </FormItem>
-  </div>
+  <Form.Item
+    :name="['config', 'host']"
+    :rules="[{ required: true, message: '主机地址不能为空', trigger: 'blur' }]"
+    label="主机地址"
+  >
+    <Input
+      v-model:value="config.host"
+      placeholder="请输入主机地址，如：localhost"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'port']"
+    :rules="[
+      { required: true, message: '端口不能为空', trigger: 'blur' },
+      {
+        type: 'number',
+        min: 1,
+        max: 65_535,
+        message: '端口号范围 1-65535',
+        trigger: 'blur',
+      },
+    ]"
+    label="端口"
+  >
+    <InputNumber
+      v-model:value="config.port"
+      :max="65535"
+      :min="1"
+      placeholder="请输入端口"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'virtualHost']"
+    :rules="[{ required: true, message: '虚拟主机不能为空', trigger: 'blur' }]"
+    label="虚拟主机"
+  >
+    <Input v-model:value="config.virtualHost" placeholder="请输入虚拟主机" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'username']"
+    :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
+    label="用户名"
+  >
+    <Input v-model:value="config.username" placeholder="请输入用户名" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'password']"
+    :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]"
+    label="密码"
+  >
+    <Input.Password v-model:value="config.password" placeholder="请输入密码" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'exchange']"
+    :rules="[{ required: true, message: '交换机不能为空', trigger: 'blur' }]"
+    label="交换机"
+  >
+    <Input v-model:value="config.exchange" placeholder="请输入交换机" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'routingKey']"
+    :rules="[{ required: true, message: '路由键不能为空', trigger: 'blur' }]"
+    label="路由键"
+  >
+    <Input v-model:value="config.routingKey" placeholder="请输入路由键" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'queue']"
+    :rules="[{ required: true, message: '队列不能为空', trigger: 'blur' }]"
+    label="队列"
+  >
+    <Input v-model:value="config.queue" placeholder="请输入队列" />
+  </Form.Item>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue
index 5cfe5b653..960293025 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue
@@ -4,55 +4,103 @@ import { onMounted } from 'vue';
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, InputNumber } from 'antdv-next';
+import { Form, Input, InputNumber } from 'antdv-next';
 
-defineOptions({ name: 'RedisStreamConfigForm' });
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
 
-const props = defineProps<{
-  modelValue: any;
-}>();
+const props = defineProps<{ modelValue: any }>();
 const emit = defineEmits(['update:modelValue']);
-const config = useVModel(props, 'modelValue', emit) as any;
+const config = useVModel(props, 'modelValue', emit);
+
+/** 移除当前 Redis Stream API 类型未声明的旧扩展字段 */
+function removeUnsupportedFields() {
+  delete config.value.dataStructure;
+  delete config.value.hashField;
+  delete config.value.scoreField;
+}
 
-/** 组件初始化 */
 onMounted(() => {
   if (!isEmpty(config.value)) {
+    removeUnsupportedFields();
     return;
   }
   config.value = {
-    url: '',
+    type: `${IotDataSinkTypeEnum.REDIS_STREAM}`,
+    host: '',
+    port: 6379,
     password: '',
     database: 0,
-    streamKey: '',
+    topic: '',
   };
 });
 </script>
 
 <template>
-  <div class="space-y-4">
-    <FormItem label="服务地址" required>
-      <Input
-        v-model:value="config.url"
-        placeholder="请输入Redis服务地址，如：redis://127.0.0.1:6379"
-      />
-    </FormItem>
-    <FormItem label="密码">
-      <Input.Password
-        v-model:value="config.password"
-        placeholder="请输入密码"
-      />
-    </FormItem>
-    <FormItem label="数据库索引" required>
-      <InputNumber
-        v-model:value="config.database"
-        :min="0"
-        :max="15"
-        placeholder="请输入数据库索引"
-        class="w-full"
-      />
-    </FormItem>
-    <FormItem label="Stream Key" required>
-      <Input v-model:value="config.streamKey" placeholder="请输入Stream Key" />
-    </FormItem>
-  </div>
+  <Form.Item
+    :name="['config', 'host']"
+    :rules="[{ required: true, message: '主机地址不能为空', trigger: 'blur' }]"
+    label="主机地址"
+  >
+    <Input
+      v-model:value="config.host"
+      placeholder="请输入主机地址，如：localhost"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'port']"
+    :rules="[
+      { required: true, message: '端口不能为空', trigger: 'blur' },
+      {
+        type: 'number',
+        min: 1,
+        max: 65_535,
+        message: '端口号范围 1-65535',
+        trigger: 'blur',
+      },
+    ]"
+    label="端口"
+  >
+    <InputNumber
+      v-model:value="config.port"
+      :max="65535"
+      :min="1"
+      placeholder="请输入端口"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'password']"
+    :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]"
+    label="密码"
+  >
+    <Input.Password v-model:value="config.password" placeholder="请输入密码" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'database']"
+    :rules="[
+      { required: true, message: '数据库索引不能为空', trigger: 'blur' },
+      {
+        type: 'number',
+        min: 0,
+        message: '数据库索引必须是非负整数',
+        trigger: 'blur',
+      },
+    ]"
+    label="数据库"
+  >
+    <InputNumber
+      v-model:value="config.database"
+      :max="15"
+      :min="0"
+      placeholder="请输入数据库索引"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'topic']"
+    :rules="[{ required: true, message: '主题不能为空', trigger: 'blur' }]"
+    label="主题"
+  >
+    <Input v-model:value="config.topic" placeholder="请输入主题" />
+  </Form.Item>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue
index c9ba16ba4..8420696b4 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue
@@ -4,22 +4,20 @@ import { onMounted } from 'vue';
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input } from 'antdv-next';
+import { Form, Input } from 'antdv-next';
 
-defineOptions({ name: 'RocketMQConfigForm' });
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
 
-const props = defineProps<{
-  modelValue: any;
-}>();
+const props = defineProps<{ modelValue: any }>();
 const emit = defineEmits(['update:modelValue']);
-const config = useVModel(props, 'modelValue', emit) as any;
+const config = useVModel(props, 'modelValue', emit);
 
-/** 组件初始化 */
 onMounted(() => {
   if (!isEmpty(config.value)) {
     return;
   }
   config.value = {
+    type: `${IotDataSinkTypeEnum.ROCKETMQ}`,
     nameServer: '',
     accessKey: '',
     secretKey: '',
@@ -31,30 +29,54 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="space-y-4">
-    <FormItem label="NameServer" required>
-      <Input
-        v-model:value="config.nameServer"
-        placeholder="请输入 NameServer 地址，如：127.0.0.1:9876"
-      />
-    </FormItem>
-    <FormItem label="AccessKey" required>
-      <Input v-model:value="config.accessKey" placeholder="请输入 AccessKey" />
-    </FormItem>
-    <FormItem label="SecretKey" required>
-      <Input.Password
-        v-model:value="config.secretKey"
-        placeholder="请输入 SecretKey"
-      />
-    </FormItem>
-    <FormItem label="消费组" required>
-      <Input v-model:value="config.group" placeholder="请输入消费组" />
-    </FormItem>
-    <FormItem label="主题" required>
-      <Input v-model:value="config.topic" placeholder="请输入主题" />
-    </FormItem>
-    <FormItem label="标签">
-      <Input v-model:value="config.tags" placeholder="请输入标签" />
-    </FormItem>
-  </div>
+  <Form.Item
+    :name="['config', 'nameServer']"
+    :rules="[
+      { required: true, message: 'NameServer 地址不能为空', trigger: 'blur' },
+    ]"
+    label="NameServer"
+  >
+    <Input
+      v-model:value="config.nameServer"
+      placeholder="请输入 NameServer 地址，如：127.0.0.1:9876"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'accessKey']"
+    :rules="[
+      { required: true, message: 'AccessKey 不能为空', trigger: 'blur' },
+    ]"
+    label="AccessKey"
+  >
+    <Input v-model:value="config.accessKey" placeholder="请输入 AccessKey" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'secretKey']"
+    :rules="[
+      { required: true, message: 'SecretKey 不能为空', trigger: 'blur' },
+    ]"
+    label="SecretKey"
+  >
+    <Input.Password
+      v-model:value="config.secretKey"
+      placeholder="请输入 SecretKey"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'group']"
+    :rules="[{ required: true, message: '消费组不能为空', trigger: 'blur' }]"
+    label="消费组"
+  >
+    <Input v-model:value="config.group" placeholder="请输入消费组" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'topic']"
+    :rules="[{ required: true, message: '主题不能为空', trigger: 'blur' }]"
+    label="主题"
+  >
+    <Input v-model:value="config.topic" placeholder="请输入主题" />
+  </Form.Item>
+  <Form.Item :name="['config', 'tags']" label="标签">
+    <Input v-model:value="config.tags" placeholder="请输入标签" />
+  </Form.Item>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/tcp-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/tcp-config-form.vue
new file mode 100644
index 000000000..d9149000e
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/tcp-config-form.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Form, Input, InputNumber, Select, Switch } from 'antdv-next';
+
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
+
+const props = defineProps<{ modelValue: any }>();
+const emit = defineEmits(['update:modelValue']);
+const config = useVModel(props, 'modelValue', emit);
+
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return;
+  }
+  config.value = {
+    type: `${IotDataSinkTypeEnum.TCP}`,
+    host: '',
+    port: 8080,
+    connectTimeoutMs: 5000,
+    readTimeoutMs: 10_000,
+    ssl: false,
+    sslCertPath: '',
+    dataFormat: 'JSON',
+    heartbeatIntervalMs: 30_000,
+    reconnectIntervalMs: 5000,
+    maxReconnectAttempts: 3,
+  };
+});
+</script>
+
+<template>
+  <Form.Item
+    :name="['config', 'host']"
+    :rules="[{ required: true, message: '主机地址不能为空', trigger: 'blur' }]"
+    label="服务器地址"
+  >
+    <Input
+      v-model:value="config.host"
+      placeholder="请输入 TCP 服务器地址，如：localhost"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'port']"
+    :rules="[
+      { required: true, message: '端口不能为空', trigger: 'blur' },
+      {
+        type: 'number',
+        min: 1,
+        max: 65_535,
+        message: '端口号范围 1-65535',
+        trigger: 'blur',
+      },
+    ]"
+    label="端口"
+  >
+    <InputNumber
+      v-model:value="config.port"
+      :max="65535"
+      :min="1"
+      placeholder="请输入端口"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'connectTimeoutMs']"
+    :rules="[
+      { required: true, message: '连接超时时间不能为空', trigger: 'blur' },
+    ]"
+    label="连接超时(ms)"
+  >
+    <InputNumber
+      v-model:value="config.connectTimeoutMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'readTimeoutMs']"
+    :rules="[
+      { required: true, message: '读取超时时间不能为空', trigger: 'blur' },
+    ]"
+    label="读取超时(ms)"
+  >
+    <InputNumber
+      v-model:value="config.readTimeoutMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'ssl']" label="启用 SSL">
+    <Switch v-model:checked="config.ssl" />
+  </Form.Item>
+  <Form.Item
+    v-if="config.ssl"
+    :name="['config', 'sslCertPath']"
+    label="SSL 证书路径"
+  >
+    <Input
+      v-model:value="config.sslCertPath"
+      placeholder="请输入 SSL 证书路径"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'dataFormat']"
+    :rules="[
+      { required: true, message: '数据格式不能为空', trigger: 'change' },
+    ]"
+    label="数据格式"
+  >
+    <Select v-model:value="config.dataFormat" placeholder="请选择数据格式">
+      <Select.Option value="JSON">JSON</Select.Option>
+      <Select.Option value="BINARY">BINARY</Select.Option>
+    </Select>
+  </Form.Item>
+  <Form.Item :name="['config', 'heartbeatIntervalMs']" label="心跳间隔(ms)">
+    <InputNumber
+      v-model:value="config.heartbeatIntervalMs"
+      :min="0"
+      :step="1000"
+      placeholder="0 表示不启用心跳"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'reconnectIntervalMs']" label="重连间隔(ms)">
+    <InputNumber
+      v-model:value="config.reconnectIntervalMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'maxReconnectAttempts']" label="最大重连次数">
+    <InputNumber
+      v-model:value="config.maxReconnectAttempts"
+      :min="0"
+      class="w-full"
+    />
+  </Form.Item>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/config/websocket-config-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/websocket-config-form.vue
new file mode 100644
index 000000000..aa056c5ec
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/config/websocket-config-form.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Form, Input, InputNumber, Select, Switch } from 'antdv-next';
+
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
+
+const props = defineProps<{ modelValue: any }>();
+const emit = defineEmits(['update:modelValue']);
+const config = useVModel(props, 'modelValue', emit);
+
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return;
+  }
+  config.value = {
+    type: `${IotDataSinkTypeEnum.WEBSOCKET}`,
+    serverUrl: '',
+    connectTimeoutMs: 5000,
+    sendTimeoutMs: 10_000,
+    heartbeatIntervalMs: 30_000,
+    heartbeatMessage: '{"type":"heartbeat"}',
+    subprotocols: '',
+    customHeaders: '',
+    verifySslCert: true,
+    dataFormat: 'JSON',
+    reconnectIntervalMs: 5000,
+    maxReconnectAttempts: 3,
+    enableCompression: false,
+    sendRetryCount: 1,
+    sendRetryIntervalMs: 1000,
+  };
+});
+</script>
+
+<template>
+  <Form.Item
+    :name="['config', 'serverUrl']"
+    :rules="[
+      {
+        required: true,
+        message: 'WebSocket 服务器地址不能为空',
+        trigger: 'blur',
+      },
+    ]"
+    label="服务器地址"
+  >
+    <Input
+      v-model:value="config.serverUrl"
+      placeholder="请输入 WebSocket 地址，如：ws://localhost:8080/ws"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'connectTimeoutMs']"
+    :rules="[
+      { required: true, message: '连接超时时间不能为空', trigger: 'blur' },
+    ]"
+    label="连接超时(ms)"
+  >
+    <InputNumber
+      v-model:value="config.connectTimeoutMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'sendTimeoutMs']"
+    :rules="[
+      { required: true, message: '发送超时时间不能为空', trigger: 'blur' },
+    ]"
+    label="发送超时(ms)"
+  >
+    <InputNumber
+      v-model:value="config.sendTimeoutMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'heartbeatIntervalMs']" label="心跳间隔(ms)">
+    <InputNumber
+      v-model:value="config.heartbeatIntervalMs"
+      :min="0"
+      :step="1000"
+      placeholder="0 表示不启用心跳"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'heartbeatMessage']" label="心跳消息">
+    <Input
+      v-model:value="config.heartbeatMessage"
+      placeholder="请输入心跳消息内容（JSON 格式）"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'subprotocols']" label="子协议">
+    <Input
+      v-model:value="config.subprotocols"
+      placeholder="请输入子协议列表，多个用逗号分隔"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'customHeaders']" label="自定义请求头">
+    <Input.TextArea
+      v-model:value="config.customHeaders"
+      placeholder="请输入自定义请求头（JSON 格式）"
+      :rows="3"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'verifySslCert']" label="验证 SSL 证书">
+    <Switch v-model:checked="config.verifySslCert" />
+  </Form.Item>
+  <Form.Item
+    :name="['config', 'dataFormat']"
+    :rules="[
+      { required: true, message: '数据格式不能为空', trigger: 'change' },
+    ]"
+    label="数据格式"
+  >
+    <Select v-model:value="config.dataFormat" placeholder="请选择数据格式">
+      <Select.Option value="JSON">JSON</Select.Option>
+      <Select.Option value="TEXT">TEXT</Select.Option>
+    </Select>
+  </Form.Item>
+  <Form.Item :name="['config', 'reconnectIntervalMs']" label="重连间隔(ms)">
+    <InputNumber
+      v-model:value="config.reconnectIntervalMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'maxReconnectAttempts']" label="最大重连次数">
+    <InputNumber
+      v-model:value="config.maxReconnectAttempts"
+      :min="0"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'enableCompression']" label="启用压缩">
+    <Switch v-model:checked="config.enableCompression" />
+  </Form.Item>
+  <Form.Item :name="['config', 'sendRetryCount']" label="发送重试次数">
+    <InputNumber
+      v-model:value="config.sendRetryCount"
+      :min="0"
+      class="w-full"
+    />
+  </Form.Item>
+  <Form.Item :name="['config', 'sendRetryIntervalMs']" label="重试间隔(ms)">
+    <InputNumber
+      v-model:value="config.sendRetryIntervalMs"
+      :min="100"
+      :step="500"
+      class="w-full"
+    />
+  </Form.Item>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/data-sink-form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/data-sink-form.vue
deleted file mode 100644
index 4ba1af0ee..000000000
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/data-sink-form.vue
+++ /dev/null
@@ -1,149 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref, watch } from 'vue';
-
-import { useVbenModal } from '@vben/common-ui';
-
-import { message } from 'antdv-next';
-
-import { useVbenForm } from '#/adapter/form';
-import {
-  createDataSink,
-  getDataSink,
-  updateDataSink,
-} from '#/api/iot/rule/data/sink';
-import { $t } from '#/locales';
-
-import {
-  HttpConfigForm,
-  KafkaMqConfigForm,
-  MqttConfigForm,
-  RabbitMqConfigForm,
-  RedisStreamConfigForm,
-  RocketMqConfigForm,
-} from './config';
-import { useSinkFormSchema } from './data';
-
-const emit = defineEmits(['success']);
-
-const IotDataSinkTypeEnum = {
-  HTTP: 1,
-  MQTT: 2,
-  ROCKETMQ: 3,
-  KAFKA: 4,
-  RABBITMQ: 5,
-  REDIS_STREAM: 6,
-} as const;
-
-const formData = ref<any>();
-
-const getTitle = computed(() => {
-  return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['数据目的'])
-    : $t('ui.actionTitle.create', ['数据目的']);
-});
-
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
-  },
-  layout: 'horizontal',
-  schema: useSinkFormSchema(),
-  showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
-      return;
-    }
-    modalApi.lock();
-    // 提交表单
-    const data = (await formApi.getValues()) as any;
-    data.config = formData.value.config;
-
-    try {
-      await (formData.value?.id ? updateDataSink(data) : createDataSink(data));
-      // 关闭并提示
-      await modalApi.close();
-      emit('success');
-      message.success($t('ui.actionMessage.operationSuccess'));
-    } finally {
-      modalApi.unlock();
-    }
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      formData.value = undefined;
-      return;
-    }
-    // 加载数据
-    const data = modalApi.getData<any>();
-    if (!data || !data.id) {
-      formData.value = {
-        type: IotDataSinkTypeEnum.HTTP,
-        status: 0,
-        config: {},
-      };
-      await formApi.setValues(formData.value);
-      return;
-    }
-    modalApi.lock();
-    try {
-      formData.value = await getDataSink(data.id);
-      // 设置到 values
-      await formApi.setValues(formData.value);
-    } finally {
-      modalApi.unlock();
-    }
-  },
-});
-
-// 监听类型变化，重置配置
-watch(
-  () => formApi.getValues().then((values) => values.type),
-  (newType) => {
-    if (formData.value && newType !== formData.value.type) {
-      formData.value.config = {};
-    }
-  },
-);
-</script>
-
-<template>
-  <Modal class="w-3/5" :title="getTitle">
-    <Form class="mx-4" />
-    <div v-if="formData" class="mx-4 mt-4">
-      <div class="mb-2 text-sm font-medium">配置信息</div>
-      <!-- TODO @haohao：下面的 form，看看有没办法，搞成 form schema 的，方便后续 ele 的迁移！ -->
-      <HttpConfigForm
-        v-if="IotDataSinkTypeEnum.HTTP === formData.type"
-        v-model="formData.config"
-      />
-      <MqttConfigForm
-        v-if="IotDataSinkTypeEnum.MQTT === formData.type"
-        v-model="formData.config"
-      />
-      <RocketMqConfigForm
-        v-if="IotDataSinkTypeEnum.ROCKETMQ === formData.type"
-        v-model="formData.config"
-      />
-      <KafkaMqConfigForm
-        v-if="IotDataSinkTypeEnum.KAFKA === formData.type"
-        v-model="formData.config"
-      />
-      <RabbitMqConfigForm
-        v-if="IotDataSinkTypeEnum.RABBITMQ === formData.type"
-        v-model="formData.config"
-      />
-      <RedisStreamConfigForm
-        v-if="IotDataSinkTypeEnum.REDIS_STREAM === formData.type"
-        v-model="formData.config"
-      />
-    </div>
-  </Modal>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/data.ts b/apps/web-antdv-next/src/views/iot/rule/data/sink/data.ts
index 937a1e6c6..4d70695f2 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/data.ts
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/data.ts
@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DataSinkApi } from '#/api/iot/rule/data/sink';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -50,60 +51,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
-/** 目的表单 Schema */
-export function useSinkFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      fieldName: 'id',
-      component: 'Input',
-      dependencies: {
-        show: false,
-        triggerFields: ['id'],
-      },
-    },
-    {
-      fieldName: 'name',
-      label: '目的名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入目的名称',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'description',
-      label: '目的描述',
-      component: 'TextArea',
-      componentProps: {
-        placeholder: '请输入目的描述',
-        rows: 3,
-      },
-    },
-    {
-      fieldName: 'type',
-      label: '目的类型',
-      component: 'Select',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.IOT_DATA_SINK_TYPE_ENUM, 'number'),
-        placeholder: '请选择目的类型',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'status',
-      label: '目的状态',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-      },
-      defaultValue: 0,
-      rules: 'required',
-    },
-  ];
-}
-
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<DataSinkApi.DataSink>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/index.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/index.vue
index 1718312e9..1ac86ca8d 100644
--- a/apps/web-antdv-next/src/views/iot/rule/data/sink/index.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/index.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DataSinkApi } from '#/api/iot/rule/data/sink';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
@@ -10,15 +11,10 @@ import { deleteDataSink, getDataSinkPage } from '#/api/iot/rule/data/sink';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DataSinkForm from './data-sink-form.vue';
-
-// TODO @haohao：需要根据代码规范，在优化下这个模块。和别的模块的风格保持一致。
-
-/** IoT 数据流转目的列表 */
-defineOptions({ name: 'IotDataSink' });
+import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: DataSinkForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -33,18 +29,18 @@ function handleCreate() {
 }
 
 /** 编辑数据目的 */
-function handleEdit(row: any) {
+function handleEdit(row: DataSinkApi.DataSink) {
   formModalApi.setData({ id: row.id }).open();
 }
 
 /** 删除数据目的 */
-async function handleDelete(row: any) {
+async function handleDelete(row: DataSinkApi.DataSink) {
   const hideLoading = message.loading({
     content: $t('ui.actionMessage.deleting', [row.name]),
     duration: 0,
   });
   try {
-    await deleteDataSink(row.id);
+    await deleteDataSink(row.id!);
     message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
@@ -79,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions,
+  } as VxeTableGridOptions<DataSinkApi.DataSink>,
 });
 </script>
 
diff --git a/apps/web-antdv-next/src/views/iot/rule/data/sink/modules/form.vue b/apps/web-antdv-next/src/views/iot/rule/data/sink/modules/form.vue
new file mode 100644
index 000000000..ada1afb55
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/rule/data/sink/modules/form.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import type { DataSinkApi } from '#/api/iot/rule/data/sink';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Form, Input, message, Radio, Select } from 'antdv-next';
+
+import {
+  createDataSink,
+  getDataSink,
+  IotDataSinkTypeEnum,
+  updateDataSink,
+} from '#/api/iot/rule/data/sink';
+import { $t } from '#/locales';
+
+import {
+  DatabaseConfigForm,
+  HttpConfigForm,
+  KafkaMqConfigForm,
+  MqttConfigForm,
+  RabbitMqConfigForm,
+  RedisStreamConfigForm,
+  RocketMqConfigForm,
+  TcpConfigForm,
+  WebSocketConfigForm,
+} from '../config';
+
+const emit = defineEmits(['success']);
+
+const formRef = ref();
+const formData = ref<DataSinkApi.DataSink>(buildEmptyFormData());
+
+const getTitle = computed(() =>
+  formData.value.id
+    ? $t('ui.actionTitle.edit', ['数据目的'])
+    : $t('ui.actionTitle.create', ['数据目的']),
+);
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    try {
+      await formRef.value?.validate();
+    } catch {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const data = { ...formData.value };
+      await (data.id ? updateDataSink(data) : createDataSink(data));
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    formData.value = buildEmptyFormData();
+    formRef.value?.clearValidate?.();
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDataSink(data.id);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 构造空白表单数据 */
+function buildEmptyFormData(): DataSinkApi.DataSink {
+  return {
+    status: CommonStatusEnum.ENABLE,
+    type: IotDataSinkTypeEnum.HTTP,
+    config: {} as any,
+  };
+}
+
+/** 类型切换时清空配置，子组件 onMounted 会按新类型重新初始化 */
+function handleTypeChange(type: number) {
+  formData.value.type = type;
+  formData.value.config = {} as any;
+}
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form
+      ref="formRef"
+      :label-col="{ span: 5 }"
+      :model="formData"
+      :wrapper-col="{ span: 18 }"
+      class="mx-4"
+    >
+      <Form.Item
+        :rules="[
+          { required: true, message: '目的名称不能为空', trigger: 'blur' },
+        ]"
+        label="目的名称"
+        name="name"
+      >
+        <Input v-model:value="formData.name" placeholder="请输入目的名称" />
+      </Form.Item>
+      <Form.Item label="目的描述" name="description">
+        <Input.TextArea
+          v-model:value="formData.description"
+          placeholder="请输入目的描述"
+          :rows="3"
+        />
+      </Form.Item>
+      <Form.Item
+        :rules="[
+          { required: true, message: '目的类型不能为空', trigger: 'change' },
+        ]"
+        label="目的类型"
+        name="type"
+      >
+        <Select
+          :value="formData.type"
+          :options="
+            getDictOptions(DICT_TYPE.IOT_DATA_SINK_TYPE_ENUM, 'number') as any
+          "
+          placeholder="请选择目的类型"
+          @change="(value: any) => handleTypeChange(value as number)"
+        />
+      </Form.Item>
+      <!-- 配置项：按目的类型分支 -->
+      <HttpConfigForm
+        v-if="formData.type === IotDataSinkTypeEnum.HTTP"
+        v-model="formData.config"
+      />
+      <TcpConfigForm
+        v-if="formData.type === IotDataSinkTypeEnum.TCP"
+        v-model="formData.config"
+      />
+      <WebSocketConfigForm
+        v-if="formData.type === IotDataSinkTypeEnum.WEBSOCKET"
+        v-model="formData.config"
+      />
+      <MqttConfigForm
+        v-if="formData.type === IotDataSinkTypeEnum.MQTT"
+        v-model="formData.config"
+      />
+      <DatabaseConfigForm
+        v-if="formData.type === IotDataSinkTypeEnum.DATABASE"
+        v-model="formData.config"
+      />
+      <RocketMqConfigForm
+        v-if="formData.type === IotDataSinkTypeEnum.ROCKETMQ"
+        v-model="formData.config"
+      />
+      <KafkaMqConfigForm
+        v-if="formData.type === IotDataSinkTypeEnum.KAFKA"
+        v-model="formData.config"
+      />
+      <RabbitMqConfigForm
+        v-if="formData.type === IotDataSinkTypeEnum.RABBITMQ"
+        v-model="formData.config"
+      />
+      <RedisStreamConfigForm
+        v-if="formData.type === IotDataSinkTypeEnum.REDIS_STREAM"
+        v-model="formData.config"
+      />
+      <Form.Item
+        :rules="[
+          { required: true, message: '目的状态不能为空', trigger: 'change' },
+        ]"
+        label="目的状态"
+        name="status"
+      >
+        <Radio.Group v-model:value="formData.status">
+          <Radio
+            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS, 'number')"
+            :key="String(dict.value)"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </Radio.Group>
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/data.ts b/apps/web-antdv-next/src/views/iot/rule/scene/data.ts
index 1713d8fab..cb3a4b61e 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/data.ts
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/data.ts
@@ -1,56 +1,11 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';
 
-/** 新增/修改的表单 */
-export function useFormSchema(): VbenFormSchema[] {
-  return [
-    {
-      component: 'Input',
-      fieldName: 'id',
-      dependencies: {
-        triggerFields: [''],
-        show: () => false,
-      },
-    },
-    {
-      component: 'Input',
-      fieldName: 'name',
-      label: '规则名称',
-      rules: 'required',
-      componentProps: {
-        placeholder: '请输入规则名称',
-      },
-    },
-    {
-      fieldName: 'status',
-      label: '规则状态',
-      component: 'RadioGroup',
-      componentProps: {
-        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
-        buttonStyle: 'solid',
-        optionType: 'button',
-      },
-      rules: z.number().default(CommonStatusEnum.ENABLE),
-    },
-    {
-      fieldName: 'description',
-      label: '规则描述',
-      component: 'TextArea',
-      componentProps: {
-        placeholder: '请输入规则描述',
-        rows: 3,
-      },
-      formItemClass: 'col-span-2',
-    },
-  ];
-}
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -89,49 +44,45 @@ export function useGridFormSchema(): VbenFormSchema[] {
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     { type: 'checkbox', width: 40 },
-    {
-      field: 'id',
-      title: '规则编号',
-      minWidth: 80,
-    },
     {
       field: 'name',
       title: '规则名称',
-      minWidth: 150,
-    },
-    {
-      field: 'description',
-      title: '规则描述',
       minWidth: 200,
+      align: 'left',
+      showOverflow: false,
+      slots: { default: 'name' },
     },
     {
-      field: 'status',
-      title: '规则状态',
-      minWidth: 100,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.COMMON_STATUS },
-      },
+      field: 'triggers',
+      title: '触发条件',
+      minWidth: 280,
+      align: 'left',
+      showOverflow: false,
+      slots: { default: 'triggers' },
     },
     {
-      field: 'actionCount',
-      title: '执行动作数',
-      minWidth: 100,
+      field: 'actions',
+      title: '执行动作',
+      minWidth: 250,
+      align: 'left',
+      showOverflow: false,
+      slots: { default: 'actionsCol' },
     },
     {
-      field: 'executeCount',
-      title: '执行次数',
-      minWidth: 100,
+      field: 'lastTriggeredTime',
+      title: '最近触发',
+      width: 180,
+      slots: { default: 'lastTriggeredTime' },
     },
     {
       field: 'createTime',
       title: '创建时间',
-      minWidth: 180,
+      width: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '操作',
-      width: 240,
+      width: 210,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/alert-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/alert-config.vue
index 6f1aa5027..ea81ead11 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/alert-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/alert-config.vue
@@ -3,9 +3,9 @@
 import { onMounted, ref } from 'vue';
 
 import { useVModel } from '@vueuse/core';
-import { Select, Tag } from 'antdv-next';
+import { Form, Select } from 'antdv-next';
 
-import { getAlertConfigPage } from '#/api/iot/alert/config';
+import { getSimpleAlertConfigList } from '#/api/iot/alert/config';
 
 /** 告警配置组件 */
 defineOptions({ name: 'AlertConfig' });
@@ -23,32 +23,22 @@ const localValue = useVModel(props, 'modelValue', emit);
 const loading = ref(false); // 加载状态
 const alertConfigs = ref<any[]>([]); // 告警配置列表
 
-/**
- * 处理选择变化事件
- * @param value 选中的值
- */
+/** 处理选择变化事件 */
 function handleChange(value?: any) {
   emit('update:modelValue', value);
 }
 
-/**
- * 加载告警配置列表
- */
+/** 加载告警配置列表 */
 async function loadAlertConfigs() {
   loading.value = true;
   try {
-    const data = await getAlertConfigPage({
-      pageNo: 1,
-      pageSize: 100,
-      enabled: true, // 只加载启用的配置
-    });
-    alertConfigs.value = data.list || [];
+    alertConfigs.value = (await getSimpleAlertConfigList()) || [];
   } finally {
     loading.value = false;
   }
 }
 
-// 组件挂载时加载数据
+/** 初始化 **/
 onMounted(() => {
   loadAlertConfigs();
 });
@@ -56,30 +46,23 @@ onMounted(() => {
 
 <template>
   <div class="w-full">
-    <FormItem label="告警配置" required>
+    <Form.Item label="告警配置" required>
       <Select
-        v-model="localValue"
+        v-model:value="localValue"
         placeholder="请选择告警配置"
-        filterable
-        clearable
+        show-search
+        allow-clear
         @change="handleChange"
         class="w-full"
         :loading="loading"
       >
-        <SelectOption
+        <Select.Option
           v-for="config in alertConfigs"
           :key="config.id"
           :label="config.name"
           :value="config.id"
-        >
-          <div class="flex items-center justify-between">
-            <span>{{ config.name }}</span>
-            <Tag :type="config.enabled ? 'success' : 'danger'" size="small">
-              {{ config.enabled ? '启用' : '禁用' }}
-            </Tag>
-          </div>
-        </SelectOption>
+        />
       </Select>
-    </FormItem>
+    </Form.Item>
   </div>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/condition-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/condition-config.vue
index e1fa3673e..031cafb2e 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/condition-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/condition-config.vue
@@ -1,6 +1,6 @@
 <!-- 单个条件配置组件 -->
 <script setup lang="ts">
-import type { TriggerCondition } from '#/api/iot/rule/scene';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import { computed, ref } from 'vue';
 
@@ -12,7 +12,7 @@ import {
 } from '@vben/constants';
 
 import { useVModel } from '@vueuse/core';
-import { Col, Row, Select } from 'antdv-next';
+import { Col, Form, Row, Select } from 'antdv-next';
 
 import ValueInput from '../inputs/value-input.vue';
 import DeviceSelector from '../selectors/device-selector.vue';
@@ -25,12 +25,12 @@ import CurrentTimeConditionConfig from './current-time-condition-config.vue';
 defineOptions({ name: 'ConditionConfig' });
 
 const props = defineProps<{
-  modelValue: TriggerCondition;
+  modelValue: RuleSceneApi.TriggerCondition;
   triggerType: number;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: TriggerCondition): void;
+  (e: 'update:modelValue', value: RuleSceneApi.TriggerCondition): void;
 }>();
 
 /** 获取设备状态选项 */
@@ -64,9 +64,9 @@ const propertyConfig = ref<any>(null); // 属性配置
 const isDeviceCondition = computed(() => {
   return (
     condition.value.type ===
-      IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS.toString() ||
+      IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS ||
     condition.value.type ===
-      IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString()
+      IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
   );
 }); // 计算属性：判断是否为设备相关条件
 
@@ -84,7 +84,7 @@ function updateConditionField(field: any, value: any) {
  * 更新整个条件对象
  * @param newCondition 新的条件对象
  */
-function updateCondition(newCondition: TriggerCondition) {
+function updateCondition(newCondition: RuleSceneApi.TriggerCondition) {
   condition.value = newCondition;
   emit('update:modelValue', condition.value);
 }
@@ -156,35 +156,38 @@ function handleOperatorChange() {
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="gap-[16px] flex flex-col">
     <!-- 条件类型选择 -->
     <Row :gutter="16">
       <Col :span="8">
-        <FormItem label="条件类型" required>
+        <Form.Item label="条件类型" required>
           <Select
-            :model-value="condition.type"
-            @update:model-value="
-              (value: any) => updateConditionField('type', value)
+            :value="condition.type"
+            @change="
+              (value: any) => {
+                updateConditionField('type', value);
+                handleConditionTypeChange(value);
+              }
             "
-            @change="handleConditionTypeChange"
             placeholder="请选择条件类型"
             class="w-full"
           >
-            <SelectOption
+            <Select.Option
               v-for="option in getConditionTypeOptions()"
               :key="option.value"
-              :label="option.label"
               :value="option.value"
-            />
+            >
+              {{ option.label }}
+            </Select.Option>
           </Select>
-        </FormItem>
+        </Form.Item>
       </Col>
     </Row>
 
     <!-- 产品设备选择 - 设备相关条件的公共部分 -->
     <Row v-if="isDeviceCondition" :gutter="16">
       <Col :span="12">
-        <FormItem label="产品" required>
+        <Form.Item label="产品" required>
           <ProductSelector
             :model-value="condition.productId"
             @update:model-value="
@@ -192,10 +195,10 @@ function handleOperatorChange() {
             "
             @change="handleProductChange"
           />
-        </FormItem>
+        </Form.Item>
       </Col>
       <Col :span="12">
-        <FormItem label="设备" required>
+        <Form.Item label="设备" required>
           <DeviceSelector
             :model-value="condition.deviceId"
             @update:model-value="
@@ -204,60 +207,57 @@ function handleOperatorChange() {
             :product-id="condition.productId"
             @change="handleDeviceChange"
           />
-        </FormItem>
+        </Form.Item>
       </Col>
     </Row>
 
     <!-- 设备状态条件配置 -->
     <div
       v-if="
-        condition.type ===
-        IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS.toString()
+        condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS
       "
-      class="gap-16px flex flex-col"
+      class="gap-[16px] flex flex-col"
     >
       <!-- 状态和操作符选择 -->
       <Row :gutter="16">
         <!-- 操作符选择 -->
         <Col :span="12">
-          <FormItem label="操作符" required>
+          <Form.Item label="操作符" required>
             <Select
-              :model-value="condition.operator"
-              @update:model-value="
-                (value: any) => updateConditionField('operator', value)
-              "
+              :value="condition.operator"
+              @change="(value: any) => updateConditionField('operator', value)"
               placeholder="请选择操作符"
               class="w-full"
             >
-              <SelectOption
+              <Select.Option
                 v-for="option in statusOperatorOptions"
                 :key="option.value"
-                :label="option.label"
                 :value="option.value"
-              />
+              >
+                {{ option.label }}
+              </Select.Option>
             </Select>
-          </FormItem>
+          </Form.Item>
         </Col>
 
         <!-- 状态选择 -->
         <Col :span="12">
-          <FormItem label="设备状态" required>
+          <Form.Item label="设备状态" required>
             <Select
-              :model-value="condition.param"
-              @update:model-value="
-                (value: any) => updateConditionField('param', value)
-              "
+              :value="condition.param"
+              @change="(value: any) => updateConditionField('param', value)"
               placeholder="请选择设备状态"
               class="w-full"
             >
-              <SelectOption
+              <Select.Option
                 v-for="option in deviceStatusOptions"
                 :key="option.value"
-                :label="option.label"
                 :value="option.value"
-              />
+              >
+                {{ option.label }}
+              </Select.Option>
             </Select>
-          </FormItem>
+          </Form.Item>
         </Col>
       </Row>
     </div>
@@ -265,16 +265,15 @@ function handleOperatorChange() {
     <!-- 设备属性条件配置 -->
     <div
       v-else-if="
-        condition.type ===
-        IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString()
+        condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
       "
-      class="space-y-16px"
+      class="space-y-[16px]"
     >
       <!-- 属性配置 -->
       <Row :gutter="16">
         <!-- 属性/事件/服务选择 -->
         <Col :span="6">
-          <FormItem label="监控项" required>
+          <Form.Item label="监控项" required>
             <PropertySelector
               :model-value="condition.identifier"
               @update:model-value="
@@ -285,12 +284,12 @@ function handleOperatorChange() {
               :device-id="condition.deviceId"
               @change="handlePropertyChange"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
 
         <!-- 操作符选择 -->
         <Col :span="6">
-          <FormItem label="操作符" required>
+          <Form.Item label="操作符" required>
             <OperatorSelector
               :model-value="condition.operator"
               @update:model-value="
@@ -299,12 +298,12 @@ function handleOperatorChange() {
               :property-type="propertyType"
               @change="handleOperatorChange"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
 
         <!-- 值输入 -->
         <Col :span="12">
-          <FormItem label="比较值" required>
+          <Form.Item label="比较值" required>
             <ValueInput
               :model-value="condition.param"
               @update:model-value="
@@ -314,7 +313,7 @@ function handleOperatorChange() {
               :operator="condition.operator"
               :property-config="propertyConfig"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
       </Row>
     </div>
@@ -322,8 +321,7 @@ function handleOperatorChange() {
     <!-- 当前时间条件配置 -->
     <CurrentTimeConditionConfig
       v-else-if="
-        condition.type ===
-        IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME.toString()
+        condition.type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME
       "
       :model-value="condition"
       @update:model-value="updateCondition"
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
index 6561860b5..128a614d1 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
@@ -1,24 +1,35 @@
 <!-- 当前时间条件配置组件 -->
 <script setup lang="ts">
-import type { TriggerCondition } from '#/api/iot/rule/scene';
+import type { Dayjs } from 'dayjs';
+
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import { computed, watch } from 'vue';
 
 import { IotRuleSceneTriggerTimeOperatorEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
+import { formatDayjs } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { Col, DatePicker, Row, Select, Tag, TimePicker } from 'antdv-next';
+import {
+  Col,
+  DatePicker,
+  Form,
+  Row,
+  Select,
+  Tag,
+  TimePicker,
+} from 'antdv-next';
 
 /** 当前时间条件配置组件 */
 defineOptions({ name: 'CurrentTimeConditionConfig' });
 
 const props = defineProps<{
-  modelValue: TriggerCondition;
+  modelValue: RuleSceneApi.TriggerCondition;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: TriggerCondition): void;
+  (e: 'update:modelValue', value: RuleSceneApi.TriggerCondition): void;
 }>();
 
 const condition = useVModel(props, 'modelValue', emit);
@@ -30,7 +41,7 @@ const timeOperatorOptions = [
     label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
     icon: 'ep:arrow-left',
     iconClass: 'text-blue-500',
-    tag: 'primary',
+    tag: 'processing',
     category: '时间点',
   },
   {
@@ -54,7 +65,7 @@ const timeOperatorOptions = [
     label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
     icon: 'ep:position',
     iconClass: 'text-purple-500',
-    tag: 'info',
+    tag: 'default',
     category: '时间点',
   },
   {
@@ -62,7 +73,7 @@ const timeOperatorOptions = [
     label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
     icon: 'ep:calendar',
     iconClass: 'text-red-500',
-    tag: 'danger',
+    tag: 'error',
     category: '日期',
   },
 ];
@@ -78,9 +89,9 @@ const needsTimeInput = computed(() => {
   return timeOnlyOperators.includes(condition.value.operator as any);
 });
 
-// 计算属性：是否需要日期输入
+/** 是否需要日期输入：当前只支持时间维度的判断 */
 const needsDateInput = computed(() => {
-  return false; // 暂时不支持日期输入，只支持时间
+  return false;
 });
 
 // 计算属性：是否需要第二个时间输入
@@ -118,11 +129,12 @@ function updateConditionField(field: any, value: any) {
  * 处理第一个时间值变化
  * @param value 时间值
  */
-function handleTimeValueChange(value: string) {
+function handleTimeValueChange(value: Dayjs | null | string) {
+  const normalized = formatDayjs(value);
   const currentParams = condition.value.param
     ? condition.value.param.split(',')
     : [];
-  currentParams[0] = value || '';
+  currentParams[0] = normalized;
 
   // 如果是范围条件，保留第二个值；否则只保留第一个值
   condition.value.param = needsSecondTimeInput.value
@@ -134,11 +146,12 @@ function handleTimeValueChange(value: string) {
  * 处理第二个时间值变化
  * @param value 时间值
  */
-function handleTimeValue2Change(value: string) {
+function handleTimeValue2Change(value: Dayjs | null | string) {
+  const normalized = formatDayjs(value);
   const currentParams = condition.value.param
     ? condition.value.param.split(',')
     : [''];
-  currentParams[1] = value || '';
+  currentParams[1] = normalized;
   condition.value.param = currentParams.slice(0, 2).join(',');
 }
 
@@ -165,16 +178,16 @@ watch(
     <Row :gutter="16">
       <!-- 时间操作符选择 -->
       <Col :span="8">
-        <FormItem label="时间条件" required>
+        <Form.Item label="时间条件" required>
           <Select
-            :model-value="condition.operator"
-            @update:model-value="
+            :value="condition.operator"
+            @update:value="
               (value: any) => updateConditionField('operator', value)
             "
             placeholder="请选择时间条件"
             class="w-full"
           >
-            <SelectOption
+            <Select.Option
               v-for="option in timeOperatorOptions"
               :key="option.value"
               :label="option.label"
@@ -185,22 +198,22 @@ watch(
                   <IconifyIcon :icon="option.icon" :class="option.iconClass" />
                   <span>{{ option.label }}</span>
                 </div>
-                <Tag :type="option.tag as any" size="small">
+                <Tag :color="option.tag">
                   {{ option.category }}
                 </Tag>
               </div>
-            </SelectOption>
+            </Select.Option>
           </Select>
-        </FormItem>
+        </Form.Item>
       </Col>
 
       <!-- 时间值输入 -->
       <Col :span="8">
-        <FormItem label="时间值" required>
+        <Form.Item label="时间值" required>
           <TimePicker
             v-if="needsTimeInput"
-            :model-value="timeValue"
-            @update:model-value="handleTimeValueChange"
+            :value="timeValue"
+            @update:value="handleTimeValueChange"
             placeholder="请选择时间"
             format="HH:mm:ss"
             value-format="HH:mm:ss"
@@ -208,25 +221,25 @@ watch(
           />
           <DatePicker
             v-else-if="needsDateInput"
-            :model-value="timeValue"
-            @update:model-value="handleTimeValueChange"
+            :value="timeValue"
+            @update:value="handleTimeValueChange"
             type="datetime"
             placeholder="请选择日期时间"
             format="YYYY-MM-DD HH:mm:ss"
             value-format="YYYY-MM-DD HH:mm:ss"
             class="w-full"
           />
-          <div v-else class="text-sm text-secondary">无需设置时间值</div>
-        </FormItem>
+          <div v-else class="text-sm text-muted-foreground">无需设置时间值</div>
+        </Form.Item>
       </Col>
 
       <!-- 第二个时间值（范围条件） -->
       <Col :span="8" v-if="needsSecondTimeInput">
-        <FormItem label="结束时间" required>
+        <Form.Item label="结束时间" required>
           <TimePicker
             v-if="needsTimeInput"
-            :model-value="timeValue2"
-            @update:model-value="handleTimeValue2Change"
+            :value="timeValue2"
+            @update:value="handleTimeValue2Change"
             placeholder="请选择结束时间"
             format="HH:mm:ss"
             value-format="HH:mm:ss"
@@ -234,15 +247,15 @@ watch(
           />
           <DatePicker
             v-else
-            :model-value="timeValue2"
-            @update:model-value="handleTimeValue2Change"
+            :value="timeValue2"
+            @update:value="handleTimeValue2Change"
             type="datetime"
             placeholder="请选择结束日期时间"
             format="YYYY-MM-DD HH:mm:ss"
             value-format="YYYY-MM-DD HH:mm:ss"
             class="w-full"
           />
-        </FormItem>
+        </Form.Item>
       </Col>
     </Row>
   </div>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/device-control-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/device-control-config.vue
index 388140c9c..449230a40 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/device-control-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/device-control-config.vue
@@ -1,10 +1,7 @@
 <!-- 设备控制配置组件 -->
 <script setup lang="ts">
-import type { Action } from '#/api/iot/rule/scene';
-import type {
-  ThingModelProperty,
-  ThingModelService,
-} from '#/api/iot/thingmodel';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { computed, onMounted, ref, watch } from 'vue';
 
@@ -16,9 +13,9 @@ import {
 import { isObject } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { Col, Row, Select, Tag } from 'antdv-next';
+import { Col, Form, Row, Select, Tag } from 'antdv-next';
 
-import { getThingModelListByProductId } from '#/api/iot/thingmodel';
+import { getThingModelTSLByProductId } from '#/api/iot/thingmodel';
 
 import JsonParamsInput from '../inputs/json-params-input.vue';
 import DeviceSelector from '../selectors/device-selector.vue';
@@ -28,19 +25,19 @@ import ProductSelector from '../selectors/product-selector.vue';
 defineOptions({ name: 'DeviceControlConfig' });
 
 const props = defineProps<{
-  modelValue: Action;
+  modelValue: RuleSceneApi.Action;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Action): void;
+  (e: 'update:modelValue', value: RuleSceneApi.Action): void;
 }>();
 
 const action = useVModel(props, 'modelValue', emit);
 
-const thingModelProperties = ref<ThingModelProperty[]>([]); // 物模型属性列表
+const thingModelProperties = ref<ThingModelApi.Property[]>([]); // 物模型属性列表
 const loadingThingModel = ref(false); // 物模型加载状态
-const selectedService = ref<null | ThingModelService>(null); // 选中的服务对象
-const serviceList = ref<ThingModelService[]>([]); // 服务列表
+const selectedService = ref<null | ThingModelApi.Service>(null); // 选中的服务对象
+const serviceList = ref<ThingModelApi.Service[]>([]); // 服务列表
 const loadingServices = ref(false); // 服务加载状态
 
 // 参数值的计算属性，用于双向绑定
@@ -55,41 +52,33 @@ const paramsValue = computed({
   },
   set: (value: string) => {
     // 直接保存为 JSON 字符串，不进行解析转换
-    action.value.params = value.trim() || '';
+    action.value.params = (value.trim() || '') as any;
   },
 });
 
 // 计算属性：是否为属性设置类型
 const isPropertySetAction = computed(() => {
-  return (
-    action.value.type ===
-    IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET.toString()
-  );
+  return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET;
 });
 
 // 计算属性：是否为服务调用类型
 const isServiceInvokeAction = computed(() => {
-  return (
-    action.value.type ===
-    IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE.toString()
-  );
+  return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE;
 });
 
 /**
  * 处理产品变化事件
  * @param productId 产品 ID
+ *
+ * ProductSelector 只在用户主动切换时 emit change，编辑回填阶段不会触发。
  */
 function handleProductChange(productId?: number) {
-  // 当产品变化时，清空设备选择和参数配置
-  if (action.value.productId !== productId) {
-    action.value.deviceId = undefined;
-    action.value.identifier = undefined; // 清空服务标识符
-    action.value.params = ''; // 清空参数，保存为空字符串
-    selectedService.value = null; // 清空选中的服务
-    serviceList.value = []; // 清空服务列表
-  }
+  action.value.deviceId = undefined;
+  action.value.identifier = undefined;
+  action.value.params = '' as any;
+  selectedService.value = null;
+  serviceList.value = [];
 
-  // 加载新产品的物模型属性或服务列表
   if (productId) {
     if (isPropertySetAction.value) {
       loadThingModelProperties(productId);
@@ -103,11 +92,8 @@ function handleProductChange(productId?: number) {
  * 处理设备变化事件
  * @param deviceId 设备 ID
  */
-function handleDeviceChange(deviceId?: number) {
-  // 当设备变化时，清空参数配置
-  if (action.value.deviceId !== deviceId) {
-    action.value.params = ''; // 清空参数，保存为空字符串
-  }
+function handleDeviceChange(_deviceId?: number) {
+  action.value.params = '' as any;
 }
 
 /**
@@ -117,35 +103,31 @@ function handleDeviceChange(deviceId?: number) {
 function handleServiceChange(serviceIdentifier?: any) {
   // 根据服务标识符找到对应的服务对象
   const service =
-    serviceList.value.find((s) => s.identifier === serviceIdentifier) || null;
+    serviceList.value.find((item) => item.identifier === serviceIdentifier) ||
+    null;
   selectedService.value = service;
 
   // 当服务变化时，清空参数配置
-  action.value.params = '';
+  action.value.params = '' as any;
 
   // 如果选择了服务且有输入参数，生成默认参数结构
   if (service && service.inputParams && service.inputParams.length > 0) {
-    const defaultParams = {};
+    const defaultParams: Record<string, any> = {};
     service.inputParams.forEach((param) => {
-      defaultParams[param.identifier] = getDefaultValueForParam(param);
+      defaultParams[param.identifier!] = getDefaultValueForParam(param);
     });
     // 将默认参数转换为 JSON 字符串保存
-    action.value.params = JSON.stringify(defaultParams, null, 2);
+    action.value.params = JSON.stringify(defaultParams, null, 2) as any;
   }
 }
 
-/**
- * 获取物模型TSL数据
- * @param productId 产品ID
- * @returns 物模型TSL数据
- */
-async function getThingModelTSL(productId: number) {
+/** 获取物模型 TSL 数据 */
+async function fetchThingModelTSL(productId: number) {
   if (!productId) return null;
-
   try {
-    return await getThingModelListByProductId(productId);
+    return await getThingModelTSLByProductId(productId);
   } catch (error) {
-    console.error('获取物模型TSL数据失败:', error);
+    console.error('获取物模型 TSL 数据失败：', error);
     return null;
   }
 }
@@ -162,7 +144,7 @@ async function loadThingModelProperties(productId: number) {
 
   try {
     loadingThingModel.value = true;
-    const tslData = await getThingModelTSL(productId);
+    const tslData = await fetchThingModelTSL(productId);
 
     if (!tslData?.properties) {
       thingModelProperties.value = [];
@@ -171,13 +153,13 @@ async function loadThingModelProperties(productId: number) {
 
     // 过滤出可写的属性（accessMode 包含 'w'）
     thingModelProperties.value = tslData.properties.filter(
-      (property: ThingModelProperty) =>
+      (property: ThingModelApi.Property) =>
         property.accessMode &&
         (property.accessMode === IoTThingModelAccessModeEnum.READ_WRITE.value ||
           property.accessMode === IoTThingModelAccessModeEnum.WRITE_ONLY.value),
     );
   } catch (error) {
-    console.error('加载物模型属性失败:', error);
+    console.error('加载物模型属性失败 ：', error);
     thingModelProperties.value = [];
   } finally {
     loadingThingModel.value = false;
@@ -196,7 +178,7 @@ async function loadServiceList(productId: number) {
 
   try {
     loadingServices.value = true;
-    const tslData = await getThingModelTSL(productId);
+    const tslData = await fetchThingModelTSL(productId);
 
     if (!tslData?.services) {
       serviceList.value = [];
@@ -205,7 +187,7 @@ async function loadServiceList(productId: number) {
 
     serviceList.value = tslData.services;
   } catch (error) {
-    console.error('加载服务列表失败:', error);
+    console.error('加载服务列表失败 ：', error);
     serviceList.value = [];
   } finally {
     loadingServices.value = false;
@@ -213,8 +195,8 @@ async function loadServiceList(productId: number) {
 }
 
 /**
- * 从TSL加载服务信息（用于编辑模式回显）
- * @param productId 产品ID
+ * 从 TSL 加载服务信息（用于编辑模式回显）
+ * @param productId 产品 ID
  * @param serviceIdentifier 服务标识符
  */
 async function loadServiceFromTSL(
@@ -269,14 +251,10 @@ function getDefaultValueForParam(param: any) {
   }
 }
 
-const isInitialized = ref(false); // 防止重复初始化的标志
-
 /**
  * 初始化组件数据
  */
 async function initializeComponent() {
-  if (isInitialized.value) return;
-
   const currentAction = action.value;
   if (!currentAction) return;
 
@@ -294,8 +272,6 @@ async function initializeComponent() {
     // 加载物模型TSL以获取服务信息
     await loadServiceFromTSL(currentAction.productId, currentAction.identifier);
   }
-
-  isInitialized.value = true;
 }
 
 /** 组件初始化 */
@@ -307,9 +283,6 @@ onMounted(() => {
 watch(
   () => [action.value.productId, action.value.type, action.value.identifier],
   async ([newProductId, , newIdentifier], [oldProductId, , oldIdentifier]) => {
-    // 避免初始化时的重复调用
-    if (!isInitialized.value) return;
-
     // 产品变化时重新加载数据
     if (newProductId !== oldProductId) {
       if (newProductId && isPropertySetAction.value) {
@@ -338,41 +311,44 @@ watch(
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="gap-[16px] flex flex-col">
     <!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 -->
     <Row :gutter="16">
       <Col :span="12">
-        <FormItem label="产品" required>
+        <Form.Item label="产品" required>
           <ProductSelector
             v-model="action.productId"
             @change="handleProductChange"
           />
-        </FormItem>
+        </Form.Item>
       </Col>
       <Col :span="12">
-        <FormItem label="设备" required>
+        <Form.Item label="设备" required>
           <DeviceSelector
             v-model="action.deviceId"
             :product-id="action.productId"
             @change="handleDeviceChange"
           />
-        </FormItem>
+        </Form.Item>
       </Col>
     </Row>
 
     <!-- 服务选择 - 服务调用类型时显示 -->
-    <div v-if="action.productId && isServiceInvokeAction" class="space-y-16px">
-      <FormItem label="服务" required>
+    <div
+      v-if="action.productId && isServiceInvokeAction"
+      class="space-y-[16px]"
+    >
+      <Form.Item label="服务" required>
         <Select
-          v-model="action.identifier"
+          v-model:value="action.identifier"
           placeholder="请选择服务"
-          filterable
-          clearable
+          show-search
+          allow-clear
           class="w-full"
           :loading="loadingServices"
           @change="handleServiceChange"
         >
-          <SelectOption
+          <Select.Option
             v-for="service in serviceList"
             :key="service.identifier"
             :label="service.name"
@@ -381,40 +357,39 @@ watch(
             <div class="flex items-center justify-between">
               <span>{{ service.name }}</span>
               <Tag
-                :type="service.callType === 'sync' ? 'primary' : 'success'"
-                size="small"
+                :color="service.callType === 'sync' ? 'processing' : 'success'"
               >
                 {{ service.callType === 'sync' ? '同步' : '异步' }}
               </Tag>
             </div>
-          </SelectOption>
+          </Select.Option>
         </Select>
-      </FormItem>
+      </Form.Item>
 
       <!-- 服务参数配置 -->
-      <div v-if="action.identifier" class="space-y-16px">
-        <FormItem label="服务参数" required>
+      <div v-if="action.identifier" class="space-y-[16px]">
+        <Form.Item label="服务参数" required>
           <JsonParamsInput
             v-model="paramsValue"
             type="service"
             :config="{ service: selectedService } as any"
             placeholder="请输入 JSON 格式的服务参数"
           />
-        </FormItem>
+        </Form.Item>
       </div>
     </div>
 
     <!-- 控制参数配置 - 属性设置类型时显示 -->
-    <div v-if="action.productId && isPropertySetAction" class="space-y-16px">
+    <div v-if="action.productId && isPropertySetAction" class="space-y-[16px]">
       <!-- 参数配置 -->
-      <FormItem label="参数" required>
+      <Form.Item label="参数" required>
         <JsonParamsInput
           v-model="paramsValue"
           type="property"
           :config="{ properties: thingModelProperties }"
           placeholder="请输入 JSON 格式的控制参数"
         />
-      </FormItem>
+      </Form.Item>
     </div>
   </div>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/device-trigger-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
index 36e723930..1a6675251 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
@@ -5,6 +5,7 @@ import type { RuleSceneApi } from '#/api/iot/rule/scene';
 import { nextTick } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
+import { getStableObjectKey } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
 import { Button, Tag } from 'antdv-next';
@@ -43,7 +44,7 @@ function updateCondition(condition: RuleSceneApi.Trigger) {
  * @param type 触发器类型
  */
 function handleTriggerTypeChange(type: number) {
-  trigger.value.type = type.toString();
+  trigger.value.type = type;
   emit('triggerTypeChange', type);
 }
 
@@ -93,29 +94,29 @@ function removeConditionGroup() {
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="gap-[16px] flex flex-col">
     <!-- 主条件配置 - 默认直接展示 -->
-    <div class="space-y-16px">
+    <div class="space-y-[16px]">
       <!-- 主条件配置 -->
-      <div class="gap-16px flex flex-col">
+      <div class="gap-[16px] flex flex-col">
         <!-- 主条件配置 -->
-        <div class="space-y-16px">
-          <!-- 主条件头部 - 与附加条件组保持一致的绿色风格 -->
+        <div class="space-y-[16px]">
+          <!-- 主条件头部（绿色主题） -->
           <div
-            class="p-16px rounded-8px flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50"
+            class="px-[16px] py-[10px] rounded-[6px] flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 dark:border-green-900/40 dark:from-green-950/30 dark:to-emerald-950/30"
           >
-            <div class="gap-12px flex items-center">
+            <div class="gap-[10px] flex items-center">
               <div
-                class="gap-8px text-16px font-600 flex items-center text-green-700"
+                class="gap-[8px] text-[14px] font-semibold flex items-center text-green-700 dark:text-green-300"
               >
                 <div
-                  class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
+                  class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
                 >
                   主
                 </div>
                 <span>主条件</span>
               </div>
-              <el-tag size="small" type="success">必须满足</el-tag>
+              <Tag color="success">必须满足</Tag>
             </div>
           </div>
 
@@ -123,7 +124,7 @@ function removeConditionGroup() {
           <MainConditionInnerConfig
             :model-value="trigger"
             @update:model-value="updateCondition"
-            :trigger-type="trigger.type as any"
+            :trigger-type="trigger.type as number"
             @trigger-type-change="handleTriggerTypeChange"
           />
         </div>
@@ -131,30 +132,28 @@ function removeConditionGroup() {
     </div>
 
     <!-- 条件组配置 -->
-    <div class="space-y-16px">
+    <div class="space-y-[16px]">
       <!-- 条件组配置 -->
-      <div class="gap-16px flex flex-col">
-        <!-- 条件组容器头部 -->
+      <div class="gap-[16px] flex flex-col">
+        <!-- 条件组容器头部（绿色主题） -->
         <div
-          class="p-16px rounded-8px flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50"
+          class="px-[16px] py-[10px] rounded-[6px] flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 dark:border-green-900/40 dark:from-green-950/30 dark:to-emerald-950/30"
         >
-          <div class="gap-12px flex items-center">
+          <div class="gap-[10px] flex items-center">
             <div
-              class="gap-8px text-16px font-600 flex items-center text-green-700"
+              class="gap-[8px] text-[14px] font-semibold flex items-center text-green-700 dark:text-green-300"
             >
               <div
-                class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
+                class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
               >
                 组
               </div>
               <span>附加条件组</span>
             </div>
-            <el-tag size="small" type="success">与"主条件"为且关系</el-tag>
-            <el-tag size="small" type="info">
-              {{ trigger.conditionGroups?.length || 0 }} 个子条件组
-            </el-tag>
+            <Tag color="success">与「主条件」为且关系</Tag>
+            <Tag>{{ trigger.conditionGroups?.length || 0 }} 个子条件组</Tag>
           </div>
-          <div class="gap-8px flex items-center">
+          <div class="gap-[8px] flex items-center">
             <Button
               type="primary"
               size="small"
@@ -164,7 +163,12 @@ function removeConditionGroup() {
               <IconifyIcon icon="lucide:plus" />
               添加子条件组
             </Button>
-            <Button danger size="small" text @click="removeConditionGroup">
+            <Button
+              danger
+              size="small"
+              type="link"
+              @click="removeConditionGroup"
+            >
               <IconifyIcon icon="lucide:trash-2" />
               删除条件组
             </Button>
@@ -174,46 +178,46 @@ function removeConditionGroup() {
         <!-- 子条件组列表 -->
         <div
           v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
-          class="space-y-16px"
+          class="space-y-[16px]"
         >
           <!-- 逻辑关系说明 -->
           <div class="relative">
             <div
               v-for="(subGroup, subGroupIndex) in trigger.conditionGroups"
-              :key="`sub-group-${subGroupIndex}`"
+              :key="getStableObjectKey(subGroup)"
               class="relative"
             >
-              <!-- 子条件组容器 -->
+              <!-- 子条件组容器（橙色主题） -->
               <div
-                class="rounded-8px border-2 border-orange-200 bg-orange-50 shadow-sm transition-shadow hover:shadow-md"
+                class="rounded-[8px] border border-orange-200 bg-orange-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-orange-900/40 dark:bg-orange-950/20"
               >
                 <div
-                  class="p-16px rounded-t-6px flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50"
+                  class="px-[16px] py-[10px] rounded-t-[8px] flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50 dark:border-orange-900/40 dark:from-orange-950/30 dark:to-yellow-950/30"
                 >
-                  <div class="gap-12px flex items-center">
+                  <div class="gap-[10px] flex items-center">
                     <div
-                      class="gap-8px text-16px font-600 flex items-center text-orange-700"
+                      class="gap-[8px] text-[14px] font-semibold flex items-center text-orange-700 dark:text-orange-300"
                     >
                       <div
-                        class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
+                        class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
                       >
                         {{ subGroupIndex + 1 }}
                       </div>
                       <span>子条件组 {{ subGroupIndex + 1 }}</span>
                     </div>
-                    <Tag size="small" type="warning" class="font-500">
-                      组内条件为"且"关系
+                    <Tag color="warning" class="font-medium">
+                      组内条件为「且」关系
                     </Tag>
-                    <Tag size="small" type="info">
-                      {{ (subGroup as any)?.length || 0 }}个条件
+                    <Tag color="default">
+                      {{ (subGroup as any)?.length || 0 }} 个条件
                     </Tag>
                   </div>
                   <Button
                     danger
                     size="small"
-                    text
-                    @click="removeSubGroup(subGroupIndex)"
+                    type="link"
                     class="hover:bg-red-50"
+                    @click="removeSubGroup(subGroupIndex)"
                   >
                     <IconifyIcon icon="lucide:trash-2" />
                     删除组
@@ -225,7 +229,7 @@ function removeConditionGroup() {
                   @update:model-value="
                     (value) => updateSubGroup(subGroupIndex, value)
                   "
-                  :trigger-type="trigger.type as any"
+                  :trigger-type="trigger.type as number"
                   :max-conditions="maxConditionsPerGroup"
                 />
               </div>
@@ -233,35 +237,46 @@ function removeConditionGroup() {
               <!-- 子条件组间的'或'连接符 -->
               <div
                 v-if="subGroupIndex < trigger.conditionGroups!.length - 1"
-                class="py-12px flex items-center justify-center"
+                class="py-[12px] flex items-center justify-center"
               >
-                <div class="gap-8px flex items-center">
+                <div class="gap-[8px] flex items-center">
                   <!-- 连接线 -->
-                  <div class="w-32px h-1px bg-orange-300"></div>
+                  <div
+                    class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"
+                  ></div>
                   <!-- 或标签 -->
                   <div
-                    class="px-16px py-6px rounded-full border-2 border-orange-300 bg-orange-100"
+                    class="px-[14px] py-[3px] rounded-full border border-orange-300 bg-orange-100 dark:border-orange-800 dark:bg-orange-950/50"
                   >
-                    <span class="text-14px font-600 text-orange-600">或</span>
+                    <span
+                      class="text-[13px] font-semibold text-orange-600 dark:text-orange-300"
+                    >
+                      或
+                    </span>
                   </div>
                   <!-- 连接线 -->
-                  <div class="w-32px h-1px bg-orange-300"></div>
+                  <div
+                    class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"
+                  ></div>
                 </div>
               </div>
             </div>
           </div>
         </div>
 
-        <!-- 空状态 -->
+        <!-- 空状态（橙色主题） -->
         <div
           v-else
-          class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center"
+          class="p-[24px] rounded-[8px] border-2 border-dashed border-orange-200 bg-orange-50/40 text-center dark:border-orange-900/40 dark:bg-orange-950/10"
         >
-          <div class="gap-12px flex flex-col items-center">
-            <IconifyIcon icon="lucide:plus" class="text-32px text-orange-400" />
-            <div class="text-orange-600">
-              <p class="text-14px font-500 mb-4px">暂无子条件组</p>
-              <p class="text-12px">点击上方"添加子条件组"按钮开始配置</p>
+          <div class="gap-[10px] flex flex-col items-center">
+            <IconifyIcon
+              icon="lucide:plus"
+              class="text-[28px] text-orange-400 dark:text-orange-300"
+            />
+            <div class="text-orange-600 dark:text-orange-300">
+              <p class="text-[13px] font-medium mb-[2px]">暂无子条件组</p>
+              <p class="text-[12px]">点击上方「添加子条件组」按钮开始配置</p>
             </div>
           </div>
         </div>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
index 0032ab2ff..dffb75827 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Trigger } from '#/api/iot/rule/scene';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import { computed, ref } from 'vue';
 
@@ -12,7 +12,7 @@ import {
 } from '@vben/constants';
 
 import { useVModel } from '@vueuse/core';
-import { Col, Row, Select } from 'antdv-next';
+import { Col, Form, Input, Row, Select } from 'antdv-next';
 
 import JsonParamsInput from '../inputs/json-params-input.vue';
 import ValueInput from '../inputs/value-input.vue';
@@ -25,12 +25,12 @@ import PropertySelector from '../selectors/property-selector.vue';
 defineOptions({ name: 'MainConditionInnerConfig' });
 
 const props = defineProps<{
-  modelValue: Trigger;
+  modelValue: RuleSceneApi.Trigger;
   triggerType: number;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: Trigger): void;
+  (e: 'update:modelValue', value: RuleSceneApi.Trigger): void;
   (e: 'triggerTypeChange', value: number): void;
 }>();
 
@@ -105,22 +105,6 @@ const serviceConfig = computed(() => {
   return undefined;
 });
 
-// 计算属性：事件配置 - 用于 JsonParamsInput
-const eventConfig = computed(() => {
-  if (
-    propertyConfig.value &&
-    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
-  ) {
-    return {
-      event: {
-        name: propertyConfig.value.name || '事件',
-        outputParams: propertyConfig.value.outputParams || [],
-      },
-    };
-  }
-  return undefined;
-});
-
 /**
  * 更新条件字段
  * @param field 字段名
@@ -140,15 +124,24 @@ function handleTriggerTypeChange(type: number) {
 
 /** 处理产品变化事件 */
 function handleProductChange() {
-  // 产品变化时清空设备和属性
-  condition.value.deviceId = undefined;
-  condition.value.identifier = '';
+  const trigger = condition.value;
+  trigger.deviceId = undefined;
+  trigger.identifier = '';
+  trigger.operator = undefined;
+  // 主条件比较值字段是 Trigger.value（不是 TriggerCondition.param）
+  trigger.value = '';
+  propertyType.value = '';
+  propertyConfig.value = null;
 }
 
 /** 处理设备变化事件 */
 function handleDeviceChange() {
-  // 设备变化时清空属性
-  condition.value.identifier = '';
+  const trigger = condition.value;
+  trigger.identifier = '';
+  trigger.operator = undefined;
+  trigger.value = '';
+  propertyType.value = '';
+  propertyConfig.value = null;
 }
 
 /**
@@ -175,28 +168,29 @@ function handlePropertyChange(propertyInfo: any) {
 <template>
   <div class="space-y-4">
     <!-- 触发事件类型选择 -->
-    <FormItem label="触发事件类型" required>
+    <Form.Item label="触发事件类型" required>
       <Select
-        :model-value="triggerType"
-        @update:model-value="handleTriggerTypeChange"
+        :value="triggerType"
+        @change="(value: any) => handleTriggerTypeChange(value)"
         placeholder="请选择触发事件类型"
         class="w-full"
       >
-        <SelectOption
+        <Select.Option
           v-for="option in triggerTypeOptions"
           :key="option.value"
-          :label="option.label"
           :value="option.value"
-        />
+        >
+          {{ option.label }}
+        </Select.Option>
       </Select>
-    </FormItem>
+    </Form.Item>
 
     <!-- 设备属性条件配置 -->
     <div v-if="isDevicePropertyTrigger" class="space-y-4">
       <!-- 产品设备选择 -->
       <Row :gutter="16">
         <Col :span="12">
-          <FormItem label="产品" required>
+          <Form.Item label="产品" required>
             <ProductSelector
               :model-value="condition.productId"
               @update:model-value="
@@ -204,10 +198,10 @@ function handlePropertyChange(propertyInfo: any) {
               "
               @change="handleProductChange"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
         <Col :span="12">
-          <FormItem label="设备" required>
+          <Form.Item label="设备" required>
             <DeviceSelector
               :model-value="condition.deviceId"
               @update:model-value="
@@ -216,7 +210,7 @@ function handlePropertyChange(propertyInfo: any) {
               :product-id="condition.productId"
               @change="handleDeviceChange"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
       </Row>
 
@@ -224,7 +218,7 @@ function handlePropertyChange(propertyInfo: any) {
       <Row :gutter="16">
         <!-- 属性/事件/服务选择 -->
         <Col :span="6">
-          <FormItem label="监控项" required>
+          <Form.Item label="监控项" required>
             <PropertySelector
               :model-value="condition.identifier"
               @update:model-value="
@@ -235,12 +229,12 @@ function handlePropertyChange(propertyInfo: any) {
               :device-id="condition.deviceId"
               @change="handlePropertyChange"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
 
         <!-- 操作符选择 - 服务调用和事件上报不需要操作符 -->
         <Col v-if="needsOperatorSelector" :span="6">
-          <FormItem label="操作符" required>
+          <Form.Item label="操作符" required>
             <OperatorSelector
               :model-value="condition.operator"
               @update:model-value="
@@ -248,12 +242,12 @@ function handlePropertyChange(propertyInfo: any) {
               "
               :property-type="propertyType"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
 
         <!-- 值输入 -->
         <Col :span="isWideValueColumn ? 18 : 12">
-          <FormItem :label="valueInputLabel" required>
+          <Form.Item :label="valueInputLabel" required>
             <!-- 服务调用参数配置 -->
             <JsonParamsInput
               v-if="
@@ -265,15 +259,16 @@ function handlePropertyChange(propertyInfo: any) {
               :config="serviceConfig as any"
               placeholder="请输入 JSON 格式的服务参数"
             />
-            <!-- 事件上报参数配置 -->
-            <JsonParamsInput
+            <!-- 事件上报参数配置：源项目允许标量值或留空表示事件发生即匹配 -->
+            <Input
               v-else-if="
                 triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
               "
-              v-model="condition.value"
-              type="event"
-              :config="eventConfig as any"
-              placeholder="请输入 JSON 格式的事件参数"
+              :value="condition.value"
+              @update:value="
+                (value) => updateConditionField('value', value)
+              "
+              placeholder="留空则事件发生即匹配"
             />
             <!-- 普通值输入 -->
             <ValueInput
@@ -286,7 +281,7 @@ function handlePropertyChange(propertyInfo: any) {
               :operator="condition.operator"
               :property-config="propertyConfig"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
       </Row>
     </div>
@@ -296,7 +291,7 @@ function handlePropertyChange(propertyInfo: any) {
       <!-- 设备状态触发器使用简化的配置 -->
       <Row :gutter="16">
         <Col :span="12">
-          <FormItem label="产品" required>
+          <Form.Item label="产品" required>
             <ProductSelector
               :model-value="condition.productId"
               @update:model-value="
@@ -304,10 +299,10 @@ function handlePropertyChange(propertyInfo: any) {
               "
               @change="handleProductChange"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
         <Col :span="12">
-          <FormItem label="设备" required>
+          <Form.Item label="设备" required>
             <DeviceSelector
               :model-value="condition.deviceId"
               @update:model-value="
@@ -316,59 +311,59 @@ function handlePropertyChange(propertyInfo: any) {
               :product-id="condition.productId"
               @change="handleDeviceChange"
             />
-          </FormItem>
+          </Form.Item>
         </Col>
       </Row>
       <Row :gutter="16">
         <Col :span="6">
-          <FormItem label="操作符" required>
+          <Form.Item label="操作符" required>
             <Select
-              :model-value="condition.operator"
-              @update:model-value="
-                (value: any) => updateConditionField('operator', value)
-              "
+              :value="condition.operator"
+              @change="(value: any) => updateConditionField('operator', value)"
               placeholder="请选择操作符"
               class="w-full"
             >
-              <SelectOption
-                :label="
-                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
-                "
+              <Select.Option
                 :value="
                   IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
                 "
-              />
+              >
+                {{
+                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
+                }}
+              </Select.Option>
             </Select>
-          </FormItem>
+          </Form.Item>
         </Col>
         <Col :span="6">
-          <FormItem label="参数" required>
+          <Form.Item label="参数" required>
             <Select
-              :model-value="condition.value"
-              @update:model-value="
-                (value: any) => updateConditionField('value', value)
-              "
+              :value="condition.value"
+              @change="(value: any) => updateConditionField('value', value)"
               placeholder="请选择操作符"
               class="w-full"
             >
-              <SelectOption
+              <Select.Option
                 v-for="option in deviceStatusChangeOptions"
                 :key="option.value"
-                :label="option.label"
                 :value="option.value"
-              />
+              >
+                {{ option.label }}
+              </Select.Option>
             </Select>
-          </FormItem>
+          </Form.Item>
         </Col>
       </Row>
     </div>
 
     <!-- 其他触发类型的提示 -->
     <div v-else class="py-5 text-center">
-      <p class="mb-1 text-sm text-secondary">
+      <p class="mb-1 text-sm text-muted-foreground">
         当前触发事件类型：{{ getTriggerTypeLabel(triggerType) }}
       </p>
-      <p class="text-xs text-secondary">此触发类型暂不需要配置额外条件</p>
+      <p class="text-xs text-muted-foreground">
+        此触发类型暂不需要配置额外条件
+      </p>
     </div>
   </div>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
index f03de803a..8b80877d5 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { TriggerCondition } from '#/api/iot/rule/scene';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import { computed, nextTick } from 'vue';
 
@@ -8,6 +8,7 @@ import {
   IotRuleSceneTriggerConditionTypeEnum,
 } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
+import { getStableObjectKey } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
 import { Button } from 'antdv-next';
@@ -19,12 +20,12 @@ defineOptions({ name: 'SubConditionGroupConfig' });
 
 const props = defineProps<{
   maxConditions?: number;
-  modelValue: TriggerCondition[];
+  modelValue: RuleSceneApi.TriggerCondition[];
   triggerType: number;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: TriggerCondition[]): void;
+  (e: 'update:modelValue', value: RuleSceneApi.TriggerCondition[]): void;
 }>();
 
 const subGroup = useVModel(props, 'modelValue', emit);
@@ -43,8 +44,8 @@ async function addCondition() {
     return;
   }
 
-  const newCondition: TriggerCondition = {
-    type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString(), // 默认为设备属性
+  const newCondition: RuleSceneApi.TriggerCondition = {
+    type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
     productId: undefined,
     deviceId: undefined,
     identifier: '',
@@ -74,7 +75,10 @@ function removeCondition(index: number) {
  * @param index 条件索引
  * @param condition 条件对象
  */
-function updateCondition(index: number, condition: TriggerCondition) {
+function updateCondition(
+  index: number,
+  condition: RuleSceneApi.TriggerCondition,
+) {
   if (subGroup.value) {
     subGroup.value[index] = condition;
   }
@@ -86,8 +90,8 @@ function updateCondition(index: number, condition: TriggerCondition) {
     <!-- 空状态 -->
     <div v-if="!subGroup || subGroup.length === 0" class="py-6 text-center">
       <div class="flex flex-col items-center gap-3">
-        <IconifyIcon icon="lucide:plus" class="text-8 text-secondary" />
-        <div class="text-secondary">
+        <IconifyIcon icon="lucide:plus" class="text-8 text-muted-foreground" />
+        <div class="text-muted-foreground">
           <p class="mb-1 text-base font-bold">暂无条件</p>
           <p class="text-xs">点击下方按钮添加第一个条件</p>
         </div>
@@ -102,12 +106,12 @@ function updateCondition(index: number, condition: TriggerCondition) {
     <div v-else class="space-y-4">
       <div
         v-for="(condition, conditionIndex) in subGroup"
-        :key="`condition-${conditionIndex}`"
+        :key="getStableObjectKey(condition)"
         class="relative"
       >
         <!-- 条件配置 -->
         <div
-          class="rounded-3px bg-fill-color-blank border border-border shadow-sm"
+          class="rounded-[3px] bg-fill-color-blank border border-border shadow-sm"
         >
           <div
             class="rounded-t-1 bg-fill-color-blank flex items-center justify-between border-b border-border p-3"
@@ -118,17 +122,17 @@ function updateCondition(index: number, condition: TriggerCondition) {
               >
                 {{ conditionIndex + 1 }}
               </div>
-              <span class="text-base font-bold text-primary">
+              <span class="text-base font-bold text-foreground">
                 条件 {{ conditionIndex + 1 }}
               </span>
             </div>
             <Button
+              v-if="subGroup!.length > 1"
               danger
               size="small"
-              text
-              @click="removeCondition(conditionIndex)"
-              v-if="subGroup!.length > 1"
+              type="link"
               class="hover:bg-red-50"
+              @click="removeCondition(conditionIndex)"
             >
               <IconifyIcon icon="lucide:trash-2" />
             </Button>
@@ -138,7 +142,7 @@ function updateCondition(index: number, condition: TriggerCondition) {
             <ConditionConfig
               :model-value="condition"
               @update:model-value="
-                (value: TriggerCondition) =>
+                (value: RuleSceneApi.TriggerCondition) =>
                   updateCondition(conditionIndex, value)
               "
               :trigger-type="triggerType"
@@ -158,7 +162,7 @@ function updateCondition(index: number, condition: TriggerCondition) {
           <IconifyIcon icon="lucide:plus" />
           继续添加条件
         </Button>
-        <span class="mt-2 block text-xs text-secondary">
+        <span class="mt-2 block text-xs text-muted-foreground">
           最多可添加 {{ maxConditions }} 个条件
         </span>
       </div>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue
new file mode 100644
index 000000000..5026bc1ea
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue
@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { nextTick } from 'vue';
+
+import { IotRuleSceneTriggerTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { getStableObjectKey } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Tag } from 'antdv-next';
+
+import SubConditionGroupConfig from './sub-condition-group-config.vue';
+
+const props = defineProps<{
+  modelValue?: RuleSceneApi.TriggerCondition[][];
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RuleSceneApi.TriggerCondition[][]): void;
+}>();
+
+const conditionGroups = useVModel(props, 'modelValue', emit);
+
+const maxGroups = 3; // 最多 3 个条件组
+const maxConditionsPerGroup = 3; // 每组最多 3 个条件
+
+/** 添加条件组 */
+async function addConditionGroup() {
+  if (!conditionGroups.value) {
+    conditionGroups.value = [];
+  }
+  if (conditionGroups.value.length >= maxGroups) {
+    return;
+  }
+  await nextTick();
+  if (conditionGroups.value) {
+    conditionGroups.value.push([]);
+  }
+}
+
+/** 移除条件组 */
+function removeConditionGroup(index: number) {
+  if (conditionGroups.value) {
+    conditionGroups.value.splice(index, 1);
+  }
+}
+
+/** 更新条件组 */
+function updateConditionGroup(
+  index: number,
+  group: RuleSceneApi.TriggerCondition[],
+) {
+  if (conditionGroups.value) {
+    conditionGroups.value[index] = group;
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-[16px]">
+    <!-- 条件组容器头部（蓝色主题） -->
+    <div
+      class="px-[16px] py-[10px] rounded-[6px] flex items-center justify-between border border-blue-200 bg-gradient-to-r from-blue-50 to-cyan-50 dark:border-blue-900/40 dark:from-blue-950/30 dark:to-cyan-950/30"
+    >
+      <div class="gap-[10px] flex items-center">
+        <div
+          class="gap-[8px] text-[14px] font-semibold flex items-center text-blue-700 dark:text-blue-300"
+        >
+          <div
+            class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
+          >
+            组
+          </div>
+          <span>附加条件组</span>
+        </div>
+        <Tag color="processing">定时触发时需满足以下条件</Tag>
+        <Tag color="warning">
+          {{ conditionGroups?.length || 0 }} 个子条件组
+        </Tag>
+      </div>
+      <Button
+        type="primary"
+        size="small"
+        :disabled="(conditionGroups?.length || 0) >= maxGroups"
+        @click="addConditionGroup"
+      >
+        <IconifyIcon icon="lucide:plus" />
+        添加条件组
+      </Button>
+    </div>
+
+    <!-- 条件组列表 -->
+    <div
+      v-if="conditionGroups && conditionGroups.length > 0"
+      class="space-y-[16px]"
+    >
+      <div
+        v-for="(group, groupIndex) in conditionGroups"
+        :key="getStableObjectKey(group)"
+        class="relative"
+      >
+        <!-- 条件组容器（橙色主题） -->
+        <div
+          class="rounded-[8px] border border-orange-200 bg-orange-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-orange-900/40 dark:bg-orange-950/20"
+        >
+          <div
+            class="px-[16px] py-[10px] rounded-t-[8px] flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50 dark:border-orange-900/40 dark:from-orange-950/30 dark:to-yellow-950/30"
+          >
+            <div class="gap-[10px] flex items-center">
+              <div
+                class="gap-[8px] text-[14px] font-semibold flex items-center text-orange-700 dark:text-orange-300"
+              >
+                <div
+                  class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
+                >
+                  {{ groupIndex + 1 }}
+                </div>
+                <span>子条件组 {{ groupIndex + 1 }}</span>
+              </div>
+              <Tag color="warning" class="font-medium">
+                组内条件为「且」关系
+              </Tag>
+              <Tag color="default"> {{ group?.length || 0 }} 个条件 </Tag>
+            </div>
+            <Button
+              danger
+              size="small"
+              type="link"
+              class="hover:bg-red-50"
+              @click="removeConditionGroup(groupIndex)"
+            >
+              <IconifyIcon icon="lucide:trash-2" />
+              删除组
+            </Button>
+          </div>
+
+          <SubConditionGroupConfig
+            :model-value="group"
+            :trigger-type="IotRuleSceneTriggerTypeEnum.TIMER"
+            :max-conditions="maxConditionsPerGroup"
+            @update:model-value="
+              (value: RuleSceneApi.TriggerCondition[]) =>
+                updateConditionGroup(groupIndex, value)
+            "
+          />
+        </div>
+
+        <!-- 条件组间的「或」连接符 -->
+        <div
+          v-if="groupIndex < conditionGroups.length - 1"
+          class="py-[12px] flex items-center justify-center"
+        >
+          <div class="gap-[8px] flex items-center">
+            <div
+              class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"
+            ></div>
+            <div
+              class="px-[14px] py-[3px] rounded-full border border-orange-300 bg-orange-100 dark:border-orange-800 dark:bg-orange-950/50"
+            >
+              <span
+                class="text-[13px] font-semibold text-orange-600 dark:text-orange-300"
+              >
+                或
+              </span>
+            </div>
+            <div
+              class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 空状态（蓝色主题） -->
+    <div
+      v-else
+      class="p-[24px] rounded-[8px] border-2 border-dashed border-blue-200 bg-blue-50/40 text-center dark:border-blue-900/40 dark:bg-blue-950/10"
+    >
+      <div class="gap-[10px] flex flex-col items-center">
+        <IconifyIcon
+          icon="lucide:plus"
+          class="text-[28px] text-blue-400 dark:text-blue-300"
+        />
+        <div class="text-blue-600 dark:text-blue-300">
+          <p class="text-[13px] font-medium mb-[2px]">暂无附加条件</p>
+          <p class="text-[12px]">定时触发时将直接执行动作</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/json-params-input.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/json-params-input.vue
index fa886779e..0afa8f5cc 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/json-params-input.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/json-params-input.vue
@@ -12,6 +12,7 @@ import {
   JsonParamsInputTypeEnum,
 } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
+import { isEmptyVal } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
 import { Button, Input, Popover, Tag } from 'antdv-next';
@@ -219,39 +220,40 @@ const emptyMessage = computed(() => {
 
 /**
  * 处理参数变化事件
+ *
+ * 注意：必须在所有校验（合法 JSON / 必须是对象 / 必填参数）通过后再回写
+ * localValue，否则父表单仅校验非空时会先写入非法值再提示错误。
  */
 function handleParamsChange() {
   try {
-    jsonError.value = ''; // 清除之前的错误
+    jsonError.value = '';
 
-    if (paramsJson.value.trim()) {
-      const parsed = JSON.parse(paramsJson.value);
-      localValue.value = paramsJson.value;
-
-      // 额外的参数验证
-      if (typeof parsed !== 'object' || parsed === null) {
-        jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAMS_MUST_BE_OBJECT;
-        return;
-      }
-
-      // 验证必填参数
-      for (const param of paramsList.value) {
-        if (
-          param.required &&
-          (!parsed[param.identifier] || parsed[param.identifier] === '')
-        ) {
-          jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAM_REQUIRED_ERROR(
-            param.name,
-          );
-          return;
-        }
-      }
-    } else {
+    if (!paramsJson.value.trim()) {
       localValue.value = '';
+      return;
     }
 
-    // 验证通过
-    jsonError.value = '';
+    const parsed = JSON.parse(paramsJson.value);
+
+    // 必须是对象
+    if (typeof parsed !== 'object' || parsed === null) {
+      jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAMS_MUST_BE_OBJECT;
+      return;
+    }
+
+    // 必填参数校验
+    for (const param of paramsList.value) {
+      const value = parsed[param.identifier];
+      if (param.required && isEmptyVal(value)) {
+        jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.PARAM_REQUIRED_ERROR(
+          param.name,
+        );
+        return;
+      }
+    }
+
+    // 所有校验通过后才回写到父表单
+    localValue.value = paramsJson.value;
   } catch (error) {
     jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_ERROR(
       error instanceof Error
@@ -306,17 +308,17 @@ function getParamTypeName(dataType: string) {
  */
 function getParamTypeTag(dataType: string) {
   const tagMap: Record<string, string> = {
-    [IoTDataSpecsDataTypeEnum.INT]: 'primary',
+    [IoTDataSpecsDataTypeEnum.INT]: 'processing',
     [IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
     [IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
-    [IoTDataSpecsDataTypeEnum.TEXT]: 'info',
+    [IoTDataSpecsDataTypeEnum.TEXT]: 'default',
     [IoTDataSpecsDataTypeEnum.BOOL]: 'warning',
-    [IoTDataSpecsDataTypeEnum.ENUM]: 'danger',
-    [IoTDataSpecsDataTypeEnum.DATE]: 'primary',
-    [IoTDataSpecsDataTypeEnum.STRUCT]: 'info',
+    [IoTDataSpecsDataTypeEnum.ENUM]: 'error',
+    [IoTDataSpecsDataTypeEnum.DATE]: 'processing',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: 'default',
     [IoTDataSpecsDataTypeEnum.ARRAY]: 'warning',
   };
-  return tagMap[dataType] || 'info';
+  return tagMap[dataType] || 'default';
 }
 
 /**
@@ -383,6 +385,9 @@ watch(
 
     // 使用 nextTick 确保在下一个 tick 中处理数据
     await nextTick();
+    if ((newValue || '') === paramsJson.value) {
+      return;
+    }
     handleDataDisplay(newValue || '');
   },
   { immediate: true },
@@ -418,111 +423,102 @@ watch(
     <!-- JSON 输入框 -->
     <div class="relative">
       <Input.TextArea
-        v-model="paramsJson"
-        type="text"
+        v-model:value="paramsJson"
         :rows="4"
         :placeholder="placeholder"
-        @input="handleParamsChange"
         :class="{ 'is-error': jsonError }"
+        @input="handleParamsChange"
       />
       <!-- 查看详细示例弹出层 -->
       <div class="absolute right-2 top-2">
         <Popover
           placement="leftTop"
-          :width="450"
+          :overlay-style="{ width: '450px' }"
           trigger="click"
-          :show-arrow="true"
-          :offset="8"
-          popper-class="json-params-detail-popover"
+          :arrow="true"
+          overlay-class-name="json-params-detail-popover"
         >
-          <template #reference>
-            <Button
-              text
-              type="primary"
-              circle
-              size="small"
-              :title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE"
-            >
-              <IconifyIcon icon="ep:info-filled" />
-            </Button>
-          </template>
+          <template #content>
+            <!-- 弹出层内容 -->
+            <div class="json-params-detail-content">
+              <div class="mb-4 flex items-center gap-2">
+                <IconifyIcon :icon="titleIcon" class="text-lg text-primary" />
+                <span class="text-base font-bold text-foreground">
+                  {{ title }}
+                </span>
+              </div>
 
-          <!-- 弹出层内容 -->
-          <div class="json-params-detail-content">
-            <div class="mb-4 flex items-center gap-2">
-              <IconifyIcon :icon="titleIcon" class="text-lg text-primary" />
-              <span class="text-base font-bold text-primary">
-                {{ title }}
-              </span>
-            </div>
-
-            <div class="space-y-4">
-              <!-- 参数列表 -->
-              <div v-if="paramsList.length > 0">
-                <div class="mb-2 flex items-center gap-2">
-                  <IconifyIcon
-                    :icon="paramsIcon"
-                    class="text-base text-primary"
-                  />
-                  <span class="text-base font-bold text-primary">
-                    {{ paramsLabel }}
-                  </span>
-                </div>
-                <div class="ml-6 space-y-2">
-                  <div
-                    v-for="param in paramsList"
-                    :key="param.identifier"
-                    class="flex items-center justify-between rounded-lg bg-card p-2"
-                  >
-                    <div class="flex-1">
-                      <div class="text-base font-bold text-primary">
-                        {{ param.name }}
-                        <Tag
-                          v-if="param.required"
-                          size="small"
-                          type="danger"
-                          class="ml-1"
-                        >
-                          {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
+              <div class="space-y-4">
+                <!-- 参数列表 -->
+                <div v-if="paramsList.length > 0">
+                  <div class="mb-2 flex items-center gap-2">
+                    <IconifyIcon
+                      :icon="paramsIcon"
+                      class="text-base text-primary"
+                    />
+                    <span class="text-base font-bold text-foreground">
+                      {{ paramsLabel }}
+                    </span>
+                  </div>
+                  <div class="ml-6 space-y-2">
+                    <div
+                      v-for="param in paramsList"
+                      :key="param.identifier"
+                      class="flex items-center justify-between rounded-lg bg-card p-2"
+                    >
+                      <div class="flex-1">
+                        <div class="text-base font-bold text-foreground">
+                          {{ param.name }}
+                          <Tag v-if="param.required" color="error" class="ml-1">
+                            {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
+                          </Tag>
+                        </div>
+                        <div class="text-xs text-muted-foreground">
+                          {{ param.identifier }}
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-2">
+                        <Tag :color="getParamTypeTag(param.dataType)">
+                          {{ getParamTypeName(param.dataType) }}
                         </Tag>
+                        <span class="text-xs text-muted-foreground">
+                          {{ getExampleValue(param) }}
+                        </span>
                       </div>
-                      <div class="text-xs text-secondary">
-                        {{ param.identifier }}
-                      </div>
-                    </div>
-                    <div class="flex items-center gap-2">
-                      <Tag :type="getParamTypeTag(param.dataType)" size="small">
-                        {{ getParamTypeName(param.dataType) }}
-                      </Tag>
-                      <span class="text-xs text-secondary">
-                        {{ getExampleValue(param) }}
-                      </span>
                     </div>
                   </div>
-                </div>
 
-                <div class="ml-6 mt-3">
-                  <div class="mb-1 text-xs text-secondary">
-                    {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
-                  </div>
-                  <pre
-                    class="border-l-3px overflow-x-auto rounded-lg border-primary bg-card p-3 text-sm text-primary"
-                  >
+                  <div class="ml-6 mt-3">
+                    <div class="mb-1 text-xs text-muted-foreground">
+                      {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
+                    </div>
+                    <pre
+                      class="border-l-[3px] overflow-x-auto rounded-lg border-primary bg-card p-3 text-sm text-foreground"
+                    >
                       <code>{{ generateExampleJson() }}</code>
                     </pre>
+                  </div>
                 </div>
-              </div>
 
-              <!-- 无参数提示 -->
-              <div v-else>
-                <div class="py-4 text-center">
-                  <p class="text-sm text-secondary">
-                    {{ emptyMessage }}
-                  </p>
+                <!-- 无参数提示 -->
+                <div v-else>
+                  <div class="py-4 text-center">
+                    <p class="text-sm text-muted-foreground">
+                      {{ emptyMessage }}
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          </template>
+          <Button
+            type="link"
+            shape="circle"
+            size="small"
+            :title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE"
+          >
+            <IconifyIcon icon="ep:info-filled" />
+          </Button>
         </Popover>
       </div>
     </div>
@@ -549,7 +545,7 @@ watch(
 
       <!-- 快速填充按钮 -->
       <div v-if="paramsList.length > 0" class="flex items-center gap-2">
-        <span class="text-xs text-secondary">
+        <span class="text-xs text-muted-foreground">
           {{ JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL }}
         </span>
         <Button size="small" type="primary" plain @click="fillExampleJson">
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/value-input.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/value-input.vue
index 21fdd26f2..0605aef55 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/value-input.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/inputs/value-input.vue
@@ -6,9 +6,17 @@ import {
   IoTDataSpecsDataTypeEnum,
   IotRuleSceneTriggerConditionParameterOperatorEnum,
 } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
-import { DatePicker, Input, Select, Tag, Tooltip } from 'antdv-next';
+import {
+  DatePicker,
+  Input,
+  InputNumber,
+  Select,
+  Tag,
+  Tooltip,
+} from 'antdv-next';
 
 /** 值输入组件 */
 defineOptions({ name: 'ValueInput' });
@@ -132,15 +140,51 @@ function handleDateChange(value: any) {
   localValue.value = value || '';
 }
 
-/** 处理数字变化事件 */
-function handleNumberChange(value: number | undefined) {
-  localValue.value = value?.toString() || '';
+/** 处理数字变化事件 ；InputNumber 回调值类型为 ValueType（string | number） */
+function handleNumberChange(value: any) {
+  localValue.value = value === null ? '' : String(value);
+}
+
+/** 根据外部值同步内部输入态 */
+function syncInternalValue(value = '') {
+  const normalized = value;
+  if (
+    props.operator ===
+    IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value
+  ) {
+    const [start = '', end = ''] = normalized.split(',');
+    rangeStart.value = start;
+    rangeEnd.value = end;
+    numberValue.value = undefined;
+    dateValue.value = '';
+    return;
+  }
+  rangeStart.value = '';
+  rangeEnd.value = '';
+  if (props.propertyType === IoTDataSpecsDataTypeEnum.DATE) {
+    dateValue.value = normalized;
+    numberValue.value = undefined;
+    return;
+  }
+  if (isNumericType()) {
+    const parsed = Number(normalized);
+    numberValue.value =
+      normalized === '' || Number.isNaN(parsed) ? undefined : parsed;
+    dateValue.value = '';
+    return;
+  }
+  numberValue.value = undefined;
+  dateValue.value = '';
 }
 
 /** 监听操作符变化 */
 watch(
   () => props.operator,
-  () => {
+  (_operator, oldOperator) => {
+    if (oldOperator === undefined) {
+      syncInternalValue(props.modelValue);
+      return;
+    }
     localValue.value = '';
     rangeStart.value = '';
     rangeEnd.value = '';
@@ -148,6 +192,12 @@ watch(
     numberValue.value = undefined;
   },
 );
+
+watch(
+  () => [props.modelValue, props.propertyType] as const,
+  ([value]) => syncInternalValue(value),
+  { immediate: true },
+);
 </script>
 
 <template>
@@ -155,12 +205,12 @@ watch(
     <!-- 布尔值选择 -->
     <Select
       v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL"
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择布尔值"
       class="w-full!"
     >
-      <SelectOption label="真 (true)" :value="true" />
-      <SelectOption label="假 (false)" :value="false" />
+      <Select.Option value="true">真 (true)</Select.Option>
+      <Select.Option value="false">假 (false)</Select.Option>
     </Select>
 
     <!-- 枚举值选择 -->
@@ -168,16 +218,17 @@ watch(
       v-else-if="
         propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0
       "
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择枚举值"
       class="w-full!"
     >
-      <SelectOption
+      <Select.Option
         v-for="option in enumOptions"
         :key="option.value"
-        :label="option.label"
         :value="option.value"
-      />
+      >
+        {{ option.label }}
+      </Select.Option>
     </Select>
 
     <!-- 范围输入 (between 操作符) -->
@@ -189,16 +240,16 @@ watch(
       class="w-full! flex items-center gap-2"
     >
       <Input
-        v-model="rangeStart"
+        v-model:value="rangeStart"
         :type="getInputType()"
         placeholder="最小值"
         @input="handleRangeChange"
         class="min-w-0 flex-1"
         style="width: auto !important"
       />
-      <span class="whitespace-nowrap text-xs text-secondary"> 至 </span>
+      <span class="whitespace-nowrap text-xs text-muted-foreground"> 至 </span>
       <Input
-        v-model="rangeEnd"
+        v-model:value="rangeEnd"
         :type="getInputType()"
         placeholder="最大值"
         @input="handleRangeChange"
@@ -214,7 +265,7 @@ watch(
       class="w-full!"
     >
       <Input
-        v-model="localValue"
+        v-model:value="localValue"
         placeholder="请输入值列表，用逗号分隔"
         class="w-full!"
       >
@@ -231,13 +282,8 @@ watch(
         v-if="listPreview.length > 0"
         class="mt-2 flex flex-wrap items-center gap-1"
       >
-        <span class="text-xs text-secondary"> 解析结果： </span>
-        <Tag
-          v-for="(item, index) in listPreview"
-          :key="index"
-          size="small"
-          class="m-0"
-        >
+        <span class="text-xs text-muted-foreground"> 解析结果： </span>
+        <Tag v-for="(item, index) in listPreview" :key="index" class="m-0">
           {{ item }}
         </Tag>
       </div>
@@ -246,7 +292,7 @@ watch(
     <!-- 日期时间输入 -->
     <DatePicker
       v-else-if="propertyType === IoTDataSpecsDataTypeEnum.DATE"
-      v-model="dateValue"
+      v-model:value="dateValue"
       type="datetime"
       placeholder="请选择日期时间"
       format="YYYY-MM-DD HH:mm:ss"
@@ -256,9 +302,9 @@ watch(
     />
 
     <!-- 数字输入 -->
-    <Input.Number
+    <InputNumber
       v-else-if="isNumericType()"
-      v-model="numberValue"
+      v-model:value="numberValue"
       :precision="getPrecision()"
       :step="getStep()"
       :min="getMin()"
@@ -271,7 +317,7 @@ watch(
     <!-- 文本输入 -->
     <Input
       v-else
-      v-model="localValue"
+      v-model:value="localValue"
       :type="getInputType()"
       :placeholder="getPlaceholder()"
       class="w-full!"
@@ -282,7 +328,7 @@ watch(
           :content="`单位：${propertyConfig.unit}`"
           placement="top"
         >
-          <span class="px-1 text-xs text-secondary">
+          <span class="px-1 text-xs text-muted-foreground">
             {{ propertyConfig.unit }}
           </span>
         </Tooltip>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/rule-scene-form.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/rule-scene-form.vue
deleted file mode 100644
index 548315479..000000000
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/rule-scene-form.vue
+++ /dev/null
@@ -1,360 +0,0 @@
-<script setup lang="ts">
-import type { IotSceneRule } from '#/api/iot/rule/scene';
-
-import { computed, nextTick, reactive, ref, watch } from 'vue';
-
-import {
-  CommonStatusEnum,
-  IotRuleSceneActionTypeEnum,
-  IotRuleSceneTriggerTypeEnum,
-  isDeviceTrigger,
-} from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Drawer, Form, message } from 'antdv-next';
-
-import { createSceneRule, updateSceneRule } from '#/api/iot/rule/scene';
-
-import ActionSection from './sections/action-section.vue';
-import BasicInfoSection from './sections/basic-info-section.vue';
-import TriggerSection from './sections/trigger-section.vue';
-
-/** IoT 场景联动规则表单 - 主表单组件 */
-defineOptions({ name: 'RuleSceneForm' });
-
-/** 组件属性定义 */
-const props = defineProps<{
-  /** 抽屉显示状态 */
-  modelValue: boolean;
-  /** 编辑的场景联动规则数据 */
-  ruleScene?: IotSceneRule;
-}>();
-
-/** 组件事件定义 */
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: boolean): void;
-  (e: 'success'): void;
-}>();
-
-const drawerVisible = useVModel(props, 'modelValue', emit); // 抽屉显示状态
-
-/**
- * 创建默认的表单数据
- * @returns 默认表单数据对象
- */
-function createDefaultFormData(): IotSceneRule {
-  return {
-    name: '',
-    description: '',
-    status: CommonStatusEnum.ENABLE, // 默认启用状态
-    triggers: [
-      {
-        type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST.toString(),
-        productId: undefined,
-        deviceId: undefined,
-        identifier: undefined,
-        operator: undefined,
-        value: undefined,
-        cronExpression: undefined,
-        conditionGroups: [], // 空的条件组数组
-      },
-    ],
-    actions: [],
-  };
-}
-
-const formRef = ref(); // 表单引用
-const formData = ref<IotSceneRule>(createDefaultFormData()); // 表单数据
-
-/**
- * 触发器校验器
- * @param _rule 校验规则（未使用）
- * @param value 校验值
- * @param callback 回调函数
- */
-function validateTriggers(_rule: any, value: any, callback: any) {
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    callback(new Error('至少需要一个触发器'));
-    return;
-  }
-
-  for (const [i, trigger] of value.entries()) {
-    // 校验触发器类型
-    if (!trigger.type) {
-      callback(new Error(`触发器 ${i + 1}: 触发器类型不能为空`));
-      return;
-    }
-
-    // 校验设备触发器
-    if (isDeviceTrigger(trigger.type)) {
-      if (!trigger.productId) {
-        callback(new Error(`触发器 ${i + 1}: 产品不能为空`));
-        return;
-      }
-      if (!trigger.deviceId) {
-        callback(new Error(`触发器 ${i + 1}: 设备不能为空`));
-        return;
-      }
-      if (!trigger.identifier) {
-        callback(new Error(`触发器 ${i + 1}: 物模型标识符不能为空`));
-        return;
-      }
-      if (!trigger.operator) {
-        callback(new Error(`触发器 ${i + 1}: 操作符不能为空`));
-        return;
-      }
-      if (
-        trigger.value === undefined ||
-        trigger.value === null ||
-        trigger.value === ''
-      ) {
-        callback(new Error(`触发器 ${i + 1}: 参数值不能为空`));
-        return;
-      }
-    }
-
-    // 校验定时触发器
-    if (
-      trigger.type === IotRuleSceneTriggerTypeEnum.TIMER &&
-      !trigger.cronExpression
-    ) {
-      callback(new Error(`触发器 ${i + 1}: CRON表达式不能为空`));
-      return;
-    }
-  }
-
-  callback();
-}
-
-/**
- * 执行器校验器
- * @param _rule 校验规则（未使用）
- * @param value 校验值
- * @param callback 回调函数
- */
-function validateActions(_rule: any, value: any, callback: any) {
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    callback(new Error('至少需要一个执行器'));
-    return;
-  }
-
-  for (const [i, action] of value.entries()) {
-    // 校验执行器类型
-    if (!action.type) {
-      callback(new Error(`执行器 ${i + 1}: 执行器类型不能为空`));
-      return;
-    }
-
-    // 校验设备控制执行器
-    if (
-      action.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET ||
-      action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
-    ) {
-      if (!action.productId) {
-        callback(new Error(`执行器 ${i + 1}: 产品不能为空`));
-        return;
-      }
-      if (!action.deviceId) {
-        callback(new Error(`执行器 ${i + 1}: 设备不能为空`));
-        return;
-      }
-
-      // 服务调用需要验证服务标识符
-      if (
-        action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE &&
-        !action.identifier
-      ) {
-        callback(new Error(`执行器 ${i + 1}: 服务不能为空`));
-        return;
-      }
-
-      if (!action.params || Object.keys(action.params).length === 0) {
-        callback(new Error(`执行器 ${i + 1}: 参数配置不能为空`));
-        return;
-      }
-    }
-
-    // 校验告警执行器
-    if (
-      (action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER ||
-        action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER) &&
-      !action.alertConfigId
-    ) {
-      callback(new Error(`执行器 ${i + 1}: 告警配置不能为空`));
-      return;
-    }
-  }
-
-  callback();
-}
-
-const formRules = reactive({
-  name: [
-    { required: true, message: '场景名称不能为空', trigger: 'blur' },
-    {
-      type: 'string',
-      min: 1,
-      max: 50,
-      message: '场景名称长度应在1-50个字符之间',
-      trigger: 'blur',
-    },
-  ],
-  status: [
-    { required: true, message: '场景状态不能为空', trigger: 'change' },
-    {
-      type: 'enum',
-      enum: [CommonStatusEnum.ENABLE, CommonStatusEnum.DISABLE],
-      message: '状态值必须为启用或禁用',
-      trigger: 'change',
-    },
-  ],
-  description: [
-    {
-      type: 'string',
-      max: 200,
-      message: '场景描述不能超过200个字符',
-      trigger: 'blur',
-    },
-  ],
-  triggers: [
-    { required: true, validator: validateTriggers, trigger: 'change' },
-  ],
-  actions: [{ required: true, validator: validateActions, trigger: 'change' }],
-}); // 表单校验规则
-
-const submitLoading = ref(false); // 提交加载状态
-const isEdit = ref(false); // 是否为编辑模式
-const drawerTitle = computed(() =>
-  isEdit.value ? '编辑场景联动规则' : '新增场景联动规则',
-); // 抽屉标题
-
-/** 提交表单 */
-async function handleSubmit() {
-  // 校验表单
-  if (!formRef.value) return;
-  const valid = await formRef.value.validate();
-  if (!valid) {
-    return;
-  }
-
-  // 提交请求
-  submitLoading.value = true;
-  try {
-    if (isEdit.value) {
-      // 更新场景联动规则
-      await updateSceneRule(formData.value);
-      message.success('更新成功');
-    } else {
-      // 创建场景联动规则
-      await createSceneRule(formData.value);
-      message.success('创建成功');
-    }
-
-    // 关闭抽屉并触发成功事件
-    drawerVisible.value = false;
-    emit('success');
-  } catch (error) {
-    console.error('保存失败:', error);
-    message.error(isEdit.value ? '更新失败' : '创建失败');
-  } finally {
-    submitLoading.value = false;
-  }
-}
-
-/** 处理抽屉关闭事件 */
-const handleClose = () => {
-  drawerVisible.value = false;
-};
-
-/** 初始化表单数据 */
-function initFormData() {
-  if (props.ruleScene) {
-    // 编辑模式：数据结构已对齐，直接使用后端数据
-    isEdit.value = true;
-    formData.value = {
-      ...props.ruleScene,
-      // 确保触发器数组不为空
-      triggers: (props.ruleScene.triggers?.length as any)
-        ? props.ruleScene.triggers
-        : [
-            {
-              type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
-              productId: undefined,
-              deviceId: undefined,
-              identifier: undefined,
-              operator: undefined,
-              value: undefined,
-              cronExpression: undefined,
-              conditionGroups: [],
-            },
-          ],
-      // 确保执行器数组不为空
-      actions: props.ruleScene.actions || [],
-    };
-  } else {
-    // 新增模式：使用默认数据
-    isEdit.value = false;
-    formData.value = createDefaultFormData();
-  }
-}
-
-/** 监听抽屉显示 */
-watch(drawerVisible, async (visible) => {
-  if (visible) {
-    initFormData();
-    // 重置表单验证状态
-    await nextTick();
-    formRef.value?.clearValidate();
-  }
-});
-
-/** 监听编辑数据变化 */
-watch(
-  () => props.ruleScene,
-  () => {
-    if (drawerVisible.value) {
-      initFormData();
-    }
-  },
-  { deep: true },
-);
-</script>
-
-<template>
-  <Drawer
-    v-model="drawerVisible"
-    :title="drawerTitle"
-    width="80%"
-    direction="rtl"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    @close="handleClose"
-  >
-    <Form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules as any"
-      label-width="110px"
-    >
-      <!-- 基础信息配置 -->
-      <BasicInfoSection v-model="formData" :rules="formRules" />
-      <!-- 触发器配置 -->
-      <TriggerSection v-model:triggers="formData.triggers as any" />
-      <!-- 执行器配置 -->
-      <ActionSection v-model:actions="formData.actions as any" />
-    </Form>
-    <template #footer>
-      <div class="drawer-footer">
-        <Button :disabled="submitLoading" type="primary" @click="handleSubmit">
-          <IconifyIcon icon="ep:check" />
-          确 定
-        </Button>
-        <Button @click="handleClose">
-          <IconifyIcon icon="ep:close" />
-          取 消
-        </Button>
-      </div>
-    </template>
-  </Drawer>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/action-section.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/action-section.vue
index be82d35a9..31a5c0e11 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/action-section.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/action-section.vue
@@ -1,6 +1,6 @@
 <!-- 执行器配置组件 -->
 <script setup lang="ts">
-import type { Action } from '#/api/iot/rule/scene';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import {
   getActionTypeLabel,
@@ -8,9 +8,10 @@ import {
   IotRuleSceneActionTypeEnum,
 } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
+import { getStableObjectKey } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { Button, Card, Empty, Select, Tag } from 'antdv-next';
+import { Button, Card, Empty, Form, Select, Tag } from 'antdv-next';
 
 import AlertConfig from '../configs/alert-config.vue';
 import DeviceControlConfig from '../configs/device-control-config.vue';
@@ -19,29 +20,29 @@ import DeviceControlConfig from '../configs/device-control-config.vue';
 defineOptions({ name: 'ActionSection' });
 
 const props = defineProps<{
-  actions: Action[];
+  actions: RuleSceneApi.Action[];
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:actions', value: Action[]): void;
+  (e: 'update:actions', value: RuleSceneApi.Action[]): void;
 }>();
 
 const actions = useVModel(props, 'actions', emit);
 
-/** 获取执行器标签类型（用于 el-tag 的 type 属性） */
-function getActionTypeTag(
+/** 获取执行器标签颜色（antd Tag `color`） */
+function getActionTypeColor(
   type: number,
-): 'danger' | 'info' | 'primary' | 'success' | 'warning' {
+): 'default' | 'error' | 'processing' | 'success' | 'warning' {
   const actionTypeTags: Record<
     number,
-    'danger' | 'info' | 'primary' | 'success' | 'warning'
+    'default' | 'error' | 'processing' | 'success' | 'warning'
   > = {
-    [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary',
+    [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'processing',
     [IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
-    [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger',
+    [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'error',
     [IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning',
   } as const;
-  return actionTypeTags[type] || 'info';
+  return actionTypeTags[type] || 'default';
 }
 
 /** 判断是否为设备执行器类型 */
@@ -66,9 +67,9 @@ function isAlertAction(type: number): boolean {
  * 创建默认的执行器数据
  * @returns 默认执行器对象
  */
-function createDefaultActionData(): Action {
+function createDefaultActionData(): RuleSceneApi.Action {
   return {
-    type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET.toString(), // 默认为设备属性设置
+    type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置
     productId: undefined,
     deviceId: undefined,
     identifier: undefined, // 物模型标识符（服务调用时使用）
@@ -99,8 +100,9 @@ function removeAction(index: number) {
  * @param type 执行器类型
  */
 function updateActionType(index: number, type: number) {
-  actions.value[index]!.type = type.toString();
-  onActionTypeChange(actions.value[index] as Action, type);
+  const action = actions.value[index] as RuleSceneApi.Action;
+  onActionTypeChange(action, type); // 须在赋新值前调用 ，内部依赖 action.type 旧值
+  action.type = type;
 }
 
 /**
@@ -108,7 +110,7 @@ function updateActionType(index: number, type: number) {
  * @param index 执行器索引
  * @param action 执行器对象
  */
-function updateAction(index: number, action: Action) {
+function updateAction(index: number, action: RuleSceneApi.Action) {
   actions.value[index] = action;
 }
 
@@ -119,9 +121,6 @@ function updateAction(index: number, action: Action) {
  */
 function updateActionAlertConfig(index: number, alertConfigId?: number) {
   actions.value[index]!.alertConfigId = alertConfigId;
-  if (actions.value[index]) {
-    actions.value[index].alertConfigId = alertConfigId;
-  }
 }
 
 /**
@@ -129,22 +128,21 @@ function updateActionAlertConfig(index: number, alertConfigId?: number) {
  * @param action 执行器对象
  * @param type 执行器类型
  */
-function onActionTypeChange(action: Action, type: any) {
-  // 清理不相关的配置，确保数据结构干净
+function onActionTypeChange(action: RuleSceneApi.Action, type: number) {
   if (isDeviceAction(type)) {
     // 设备控制类型：清理告警配置，确保设备参数存在
     action.alertConfigId = undefined;
-    if (!(action as any).params) {
-      (action as any).params = '';
+    if (!action.params) {
+      action.params = '';
     }
-    // 如果从其他类型切换到设备控制类型，清空identifier（让用户重新选择）
-    if (action.identifier && type !== (action as any).type) {
+    // 切换到设备控制类型时清空 identifier，让用户重新选择
+    if (action.identifier) {
       action.identifier = undefined;
     }
   } else if (isAlertAction(type)) {
     action.productId = undefined;
     action.deviceId = undefined;
-    action.identifier = undefined; // 清理服务标识符
+    action.identifier = undefined;
     action.params = undefined;
     action.alertConfigId = undefined;
   }
@@ -155,12 +153,14 @@ function onActionTypeChange(action: Action, type: any) {
   <Card class="rounded-lg border border-primary" shadow="never">
     <template #title>
       <div class="flex items-center justify-between">
-        <div class="gap-8px flex items-center">
-          <IconifyIcon icon="ep:setting" class="text-18px text-primary" />
-          <span class="text-16px font-600 text-primary"> 执行器配置 </span>
-          <Tag size="small" type="info"> {{ actions.length }} 个执行器 </Tag>
+        <div class="gap-[8px] flex items-center">
+          <IconifyIcon icon="ep:setting" class="text-[18px] text-primary" />
+          <span class="text-[16px] font-semibold text-foreground">
+            执行器配置
+          </span>
+          <Tag color="default"> {{ actions.length }} 个执行器 </Tag>
         </div>
-        <div class="gap-8px flex items-center">
+        <div class="gap-[8px] flex items-center">
           <Button type="primary" size="small" @click="addAction">
             <IconifyIcon icon="ep:plus" />
             添加执行器
@@ -181,43 +181,42 @@ function onActionTypeChange(action: Action, type: any) {
       </div>
 
       <!-- 执行器列表 -->
-      <div v-else class="space-y-24px">
+      <div v-else class="space-y-[24px]">
         <div
           v-for="(action, index) in actions"
-          :key="`action-${index}`"
-          class="rounded-lg border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md"
+          :key="getStableObjectKey(action)"
+          class="rounded-lg border border-blue-200 bg-blue-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-blue-900/40 dark:bg-blue-950/20"
         >
-          <!-- 执行器头部 - 蓝色主题 -->
+          <!-- 执行器头部（蓝色主题） -->
           <div
-            class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4"
+            class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 px-4 py-[10px] dark:border-blue-900/40 dark:from-blue-950/30 dark:to-sky-950/30"
           >
-            <div class="gap-12px flex items-center">
+            <div class="gap-[10px] flex items-center">
               <div
-                class="font-600 flex items-center gap-2 text-base text-blue-700"
+                class="font-semibold flex items-center gap-2 text-sm text-blue-700 dark:text-blue-300"
               >
                 <div
-                  class="flex size-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
+                  class="flex w-[22px] h-[22px] items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
                 >
                   {{ index + 1 }}
                 </div>
                 <span>执行器 {{ index + 1 }}</span>
               </div>
               <Tag
-                :type="getActionTypeTag(action.type as any)"
-                size="small"
-                class="font-500"
+                :color="getActionTypeColor(action.type as number)"
+                class="font-medium"
               >
-                {{ getActionTypeLabel(action.type as any) }}
+                {{ getActionTypeLabel(action.type as number) }}
               </Tag>
             </div>
-            <div class="gap-8px flex items-center">
+            <div class="gap-[8px] flex items-center">
               <Button
                 v-if="actions.length > 1"
                 danger
                 size="small"
-                text
-                @click="removeAction(index)"
+                type="link"
                 class="hover:bg-red-50"
+                @click="removeAction(index)"
               >
                 <IconifyIcon icon="lucide:trash-2" />
                 删除
@@ -226,42 +225,37 @@ function onActionTypeChange(action: Action, type: any) {
           </div>
 
           <!-- 执行器内容区域 -->
-          <div class="p-16px space-y-16px">
+          <div class="p-[16px] space-y-[16px]">
             <!-- 执行类型选择 -->
             <div class="w-full">
-              <FormItem label="执行类型" required>
+              <Form.Item label="执行类型" required>
                 <Select
-                  :model-value="action.type"
-                  @update:model-value="
-                    (value: number) => updateActionType(index, value)
-                  "
-                  @change="(value) => onActionTypeChange(action, value)"
+                  :value="action.type"
+                  @change="(value) => updateActionType(index, value as number)"
                   placeholder="请选择执行类型"
                   class="w-full"
                 >
-                  <SelectOption
+                  <Select.Option
                     v-for="option in getActionTypeOptions()"
                     :key="option.value"
-                    :label="option.label"
                     :value="option.value"
-                  />
+                  >
+                    {{ option.label }}
+                  </Select.Option>
                 </Select>
-              </FormItem>
+              </Form.Item>
             </div>
 
             <!-- 设备控制配置 -->
             <DeviceControlConfig
-              v-if="isDeviceAction(action.type as any)"
+              v-if="isDeviceAction(action.type as number)"
               :model-value="action"
               @update:model-value="(value) => updateAction(index, value)"
             />
 
             <!-- 告警配置 - 只有恢复告警时才显示 -->
             <AlertConfig
-              v-if="
-                action.type ===
-                IotRuleSceneActionTypeEnum.ALERT_RECOVER.toString()
-              "
+              v-if="action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER"
               :model-value="action.alertConfigId"
               @update:model-value="
                 (value) => updateActionAlertConfig(index, value)
@@ -270,18 +264,17 @@ function onActionTypeChange(action: Action, type: any) {
 
             <!-- 触发告警提示 - 触发告警时显示 -->
             <div
-              v-if="
-                action.type ===
-                IotRuleSceneActionTypeEnum.ALERT_TRIGGER.toString()
-              "
+              v-if="action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER"
               class="bg-fill-color-blank rounded-lg border border-border p-4"
             >
               <div class="mb-2 flex items-center gap-2">
                 <IconifyIcon icon="ep:warning" class="text-base text-warning" />
-                <span class="font-600 text-sm text-primary">触发告警</span>
-                <Tag size="small" type="warning">自动执行</Tag>
+                <span class="font-semibold text-sm text-foreground">
+                  触发告警
+                </span>
+                <Tag color="warning">自动执行</Tag>
               </div>
-              <div class="text-xs leading-relaxed text-secondary">
+              <div class="text-xs leading-relaxed text-muted-foreground">
                 当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
                 告警配置] 管理。
               </div>
@@ -291,7 +284,7 @@ function onActionTypeChange(action: Action, type: any) {
       </div>
 
       <!-- 添加提示 -->
-      <div v-if="actions.length > 0" class="py-16px text-center">
+      <div v-if="actions.length > 0" class="py-[16px] text-center">
         <Button type="primary" plain @click="addAction">
           <IconifyIcon icon="ep:plus" />
           继续添加执行器
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/basic-info-section.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/basic-info-section.vue
index e0d4a1a1a..42c437a60 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/basic-info-section.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/basic-info-section.vue
@@ -1,13 +1,13 @@
 <!-- 基础信息配置组件 -->
 <script setup lang="ts">
-import type { IotSceneRule } from '#/api/iot/rule/scene';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
-import { Card, Col, Input, Radio, Row } from 'antdv-next';
+import { Card, Col, Form, Input, Radio, Row } from 'antdv-next';
 
 import { DictTag } from '#/components/dict-tag';
 
@@ -15,82 +15,82 @@ import { DictTag } from '#/components/dict-tag';
 defineOptions({ name: 'BasicInfoSection' });
 
 const props = defineProps<{
-  modelValue: IotSceneRule;
-  rules?: any;
+  modelValue: RuleSceneApi.SceneRule;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', value: IotSceneRule): void;
+  (e: 'update:modelValue', value: RuleSceneApi.SceneRule): void;
 }>();
 
 const formData = useVModel(props, 'modelValue', emit); // 表单数据
 </script>
 
 <template>
-  <Card class="rounded-8px mb-10px border border-primary" shadow="never">
+  <Card class="rounded-[8px] mb-[10px]! border border-primary" shadow="never">
     <template #title>
       <div class="flex items-center justify-between">
-        <div class="gap-8px flex items-center">
-          <IconifyIcon icon="ep:info-filled" class="text-18px text-primary" />
-          <span class="text-16px font-600 text-primary">基础信息</span>
+        <div class="gap-[8px] flex items-center">
+          <IconifyIcon icon="ep:info-filled" class="text-[18px] text-primary" />
+          <span class="text-[16px] font-semibold text-foreground">
+            基础信息
+          </span>
         </div>
-        <div class="gap-8px flex items-center">
+        <div class="gap-[8px] flex items-center">
           <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="formData.status" />
         </div>
       </div>
     </template>
 
     <div class="p-0">
-      <Row :gutter="24" class="mb-24px">
+      <Row :gutter="24" class="mb-[24px]">
         <Col :span="12">
-          <FormItem label="场景名称" prop="name" required>
+          <Form.Item label="场景名称" name="name" required>
             <Input
-              v-model="formData.name"
+              v-model:value="formData.name"
               placeholder="请输入场景名称"
               :maxlength="50"
               show-word-limit
-              clearable
+              allow-clear
             />
-          </FormItem>
+          </Form.Item>
         </Col>
         <Col :span="12">
-          <FormItem label="场景状态" prop="status" required>
-            <RadioGroup v-model="formData.status">
+          <Form.Item label="场景状态" name="status" required>
+            <Radio.Group v-model:value="formData.status">
               <Radio
                 v-for="(dict, index) in getDictOptions(
                   DICT_TYPE.COMMON_STATUS,
                   'number',
                 )"
                 :key="index"
-                :label="dict.value"
+                :value="dict.value"
               >
                 {{ dict.label }}
               </Radio>
-            </RadioGroup>
-          </FormItem>
+            </Radio.Group>
+          </Form.Item>
         </Col>
       </Row>
-      <FormItem label="场景描述" prop="description">
+      <Form.Item label="场景描述" name="description">
         <Input.TextArea
-          v-model="formData.description"
-          type="text"
+          v-model:value="formData.description"
           placeholder="请输入场景描述（可选）"
           :rows="3"
           :maxlength="200"
           show-word-limit
           resize="none"
         />
-      </FormItem>
+      </Form.Item>
     </div>
   </Card>
 </template>
 
 <style scoped>
-:deep(.el-form-item) {
+:deep(.ant-form-item) {
   margin-bottom: 20px;
 }
 
-:deep(.el-form-item:last-child) {
+:deep(.ant-form-item:last-child) {
   margin-bottom: 0;
 }
 </style>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/trigger-section.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/trigger-section.vue
index 882da116c..d40a716c5 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/trigger-section.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/sections/trigger-section.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Trigger } from '#/api/iot/rule/scene';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import { onMounted } from 'vue';
 
@@ -9,41 +9,43 @@ import {
   isDeviceTrigger,
 } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
+import { getStableObjectKey } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { Button, Card, Empty, Tag } from 'antdv-next';
+import { Button, Card, Empty, Form, Tag } from 'antdv-next';
 
 import { CronTab } from '#/components/cron-tab';
 
 import DeviceTriggerConfig from '../configs/device-trigger-config.vue';
+import TimerConditionGroupConfig from '../configs/timer-condition-group-config.vue';
 
 /** 触发器配置组件 */
 defineOptions({ name: 'TriggerSection' });
 
 const props = defineProps<{
-  triggers: Trigger[];
+  triggers: RuleSceneApi.Trigger[];
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:triggers', value: Trigger[]): void;
+  (e: 'update:triggers', value: RuleSceneApi.Trigger[]): void;
 }>();
 
 const triggers = useVModel(props, 'triggers', emit);
 
-/** 获取触发器标签类型（用于 el-tag 的 type 属性） */
-function getTriggerTagType(
+/** 获取触发器标签颜色（antd Tag `color`） */
+function getTriggerTagColor(
   type: number,
-): 'danger' | 'info' | 'primary' | 'success' | 'warning' {
+): 'default' | 'error' | 'processing' | 'success' | 'warning' {
   if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
     return 'warning';
   }
-  return isDeviceTrigger(type) ? 'success' : 'info';
+  return isDeviceTrigger(type) ? 'success' : 'default';
 }
 
 /** 添加触发器 */
 function addTrigger() {
-  const newTrigger: Trigger = {
-    type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE.toString(),
+  const newTrigger: RuleSceneApi.Trigger = {
+    type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
     productId: undefined,
     deviceId: undefined,
     identifier: undefined,
@@ -55,50 +57,42 @@ function addTrigger() {
   triggers.value.push(newTrigger);
 }
 
-/**
- * 删除触发器
- * @param index 触发器索引
- */
+/** 删除触发器 */
 function removeTrigger(index: number) {
   if (triggers.value.length > 1) {
     triggers.value.splice(index, 1);
   }
 }
 
-/**
- * 更新触发器类型
- * @param index 触发器索引
- * @param type 触发器类型
- */
+/** 更新触发器类型 */
 function updateTriggerType(index: number, type: number) {
-  triggers.value[index]!.type = type.toString();
-  onTriggerTypeChange(index, type);
+  triggers.value[index]!.type = type;
+  onTriggerTypeChange(index);
 }
 
-/**
- * 更新触发器设备配置
- * @param index 触发器索引
- * @param newTrigger 新的触发器对象
- */
-function updateTriggerDeviceConfig(index: number, newTrigger: Trigger) {
+/** 更新触发器设备配置 */
+function updateTriggerDeviceConfig(
+  index: number,
+  newTrigger: RuleSceneApi.Trigger,
+) {
   triggers.value[index] = newTrigger;
 }
 
-/**
- * 更新触发器 CRON 配置
- * @param index 触发器索引
- * @param cronExpression CRON 表达式
- */
+/** 更新触发器 CRON 配置 */
 function updateTriggerCronConfig(index: number, cronExpression?: string) {
   triggers.value[index]!.cronExpression = cronExpression;
 }
 
-/**
- * 处理触发器类型变化事件
- * @param index 触发器索引
- * @param _ 触发器类型（未使用）
- */
-function onTriggerTypeChange(index: number, _: number) {
+/** 更新触发器条件组配置 */
+function updateTriggerConditionGroups(
+  index: number,
+  conditionGroups: RuleSceneApi.TriggerCondition[][],
+) {
+  triggers.value[index]!.conditionGroups = conditionGroups;
+}
+
+/** 触发器类型切换后清空相关字段 */
+function onTriggerTypeChange(index: number) {
   const triggerItem = triggers.value[index]!;
   triggerItem.productId = undefined;
   triggerItem.deviceId = undefined;
@@ -118,13 +112,15 @@ onMounted(() => {
 </script>
 
 <template>
-  <Card class="rounded-8px mb-10px border border-primary" shadow="never">
+  <Card class="rounded-[8px] mb-[10px]! border border-primary" shadow="never">
     <template #title>
       <div class="flex items-center justify-between">
-        <div class="gap-8px flex items-center">
-          <IconifyIcon icon="ep:lightning" class="text-18px text-primary" />
-          <span class="text-16px font-600 text-primary">触发器配置</span>
-          <Tag size="small" type="info"> {{ triggers.length }} 个触发器 </Tag>
+        <div class="gap-[8px] flex items-center">
+          <IconifyIcon icon="ep:lightning" class="text-[18px] text-primary" />
+          <span class="text-[16px] font-semibold text-foreground">
+            触发器配置
+          </span>
+          <Tag color="default"> {{ triggers.length }} 个触发器 </Tag>
         </div>
         <Button type="primary" size="small" @click="addTrigger">
           <IconifyIcon icon="lucide:plus" />
@@ -133,45 +129,44 @@ onMounted(() => {
       </div>
     </template>
 
-    <div class="p-16px space-y-24px">
+    <div class="p-[16px] space-y-[24px]">
       <!-- 触发器列表 -->
-      <div v-if="triggers.length > 0" class="space-y-24px">
+      <div v-if="triggers.length > 0" class="space-y-[24px]">
         <div
           v-for="(triggerItem, index) in triggers"
-          :key="`trigger-${index}`"
-          class="rounded-8px border-2 border-green-200 bg-green-50 shadow-sm transition-shadow hover:shadow-md"
+          :key="getStableObjectKey(triggerItem)"
+          class="rounded-[8px] border border-green-200 bg-green-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-green-900/40 dark:bg-green-950/20"
         >
-          <!-- 触发器头部 - 绿色主题 -->
+          <!-- 触发器头部（绿色主题） -->
           <div
-            class="p-16px rounded-t-6px flex items-center justify-between border-b border-green-200 bg-gradient-to-r from-green-50 to-emerald-50"
+            class="px-[16px] py-[10px] rounded-t-[8px] flex items-center justify-between border-b border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 dark:border-green-900/40 dark:from-green-950/30 dark:to-emerald-950/30"
           >
-            <div class="gap-12px flex items-center">
+            <div class="gap-[12px] flex items-center">
               <div
-                class="gap-8px text-16px font-600 flex items-center text-green-700"
+                class="gap-[8px] text-[14px] font-semibold flex items-center text-green-700 dark:text-green-300"
               >
                 <div
-                  class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
+                  class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
                 >
                   {{ index + 1 }}
                 </div>
                 <span>触发器 {{ index + 1 }}</span>
               </div>
               <Tag
-                size="small"
-                :type="getTriggerTagType(triggerItem.type as any)"
-                class="font-500"
+                :color="getTriggerTagColor(triggerItem.type as number)"
+                class="font-medium"
               >
-                {{ getTriggerTypeLabel(triggerItem.type as any) }}
+                {{ getTriggerTypeLabel(triggerItem.type as number) }}
               </Tag>
             </div>
-            <div class="gap-8px flex items-center">
+            <div class="gap-[8px] flex items-center">
               <Button
                 v-if="triggers.length > 1"
                 danger
                 size="small"
-                text
-                @click="removeTrigger(index)"
+                type="link"
                 class="hover:bg-red-50"
+                @click="removeTrigger(index)"
               >
                 <IconifyIcon icon="lucide:trash-2" />
                 删除
@@ -180,10 +175,10 @@ onMounted(() => {
           </div>
 
           <!-- 触发器内容区域 -->
-          <div class="p-16px space-y-16px">
+          <div class="p-[16px] space-y-[16px]">
             <!-- 设备触发配置 -->
             <DeviceTriggerConfig
-              v-if="isDeviceTrigger(triggerItem.type as any)"
+              v-if="isDeviceTrigger(triggerItem.type as number)"
               :model-value="triggerItem"
               :index="index"
               @update:model-value="
@@ -194,49 +189,54 @@ onMounted(() => {
 
             <!-- 定时触发配置 -->
             <div
-              v-else-if="
-                triggerItem.type ===
-                IotRuleSceneTriggerTypeEnum.TIMER.toString()
-              "
-              class="gap-16px flex flex-col"
+              v-else-if="triggerItem.type === IotRuleSceneTriggerTypeEnum.TIMER"
+              class="gap-[16px] flex flex-col"
             >
               <div
-                class="gap-8px p-12px px-16px rounded-6px flex items-center border border-primary bg-background"
+                class="gap-[8px] p-[12px] px-[16px] rounded-[6px] flex items-center border border-primary bg-background"
               >
                 <IconifyIcon
                   icon="lucide:timer"
-                  class="text-18px text-danger"
+                  class="text-[18px] text-danger"
                 />
-                <span class="text-14px font-500 text-primary">
+                <span class="text-[14px] font-medium text-foreground">
                   定时触发配置
                 </span>
               </div>
 
               <!-- CRON 表达式配置 -->
               <div
-                class="p-16px rounded-6px border border-primary bg-background"
+                class="p-[16px] rounded-[6px] border border-primary bg-background"
               >
-                <FormItem label="CRON表达式" required>
+                <Form.Item label="CRON 表达式" required>
                   <CronTab
                     :model-value="triggerItem.cronExpression || '0 0 12 * * ?'"
                     @update:model-value="
                       (value) => updateTriggerCronConfig(index, value)
                     "
                   />
-                </FormItem>
+                </Form.Item>
               </div>
+
+              <!-- 附加条件组配置 -->
+              <TimerConditionGroupConfig
+                :model-value="triggerItem.conditionGroups"
+                @update:model-value="
+                  (value) => updateTriggerConditionGroups(index, value)
+                "
+              />
             </div>
           </div>
         </div>
       </div>
 
       <!-- 空状态 -->
-      <div v-else class="py-40px text-center">
+      <div v-else class="py-[40px] text-center">
         <Empty description="暂无触发器">
           <template #description>
-            <div class="space-y-8px">
-              <p class="text-secondary">暂无触发器配置</p>
-              <p class="text-12px text-primary">
+            <div class="space-y-[8px]">
+              <p class="text-muted-foreground">暂无触发器配置</p>
+              <p class="text-[12px] text-muted-foreground">
                 请使用上方的"添加触发器"按钮来设置触发规则
               </p>
             </div>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/device-selector.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/device-selector.vue
index 9660e788f..bf343edd1 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/device-selector.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/device-selector.vue
@@ -25,13 +25,10 @@ const emit = defineEmits<{
 const deviceLoading = ref(false); // 设备加载状态
 const deviceList = ref<any[]>([]); // 设备列表
 
-/**
- * 处理选择变化事件
- * @param value 选中的设备ID
- */
-function handleChange(value?: number) {
-  emit('update:modelValue', value);
-  emit('change', value);
+/** 处理选择变化事件 */
+function handleChange(value: any) {
+  emit('update:modelValue', value as number | undefined);
+  emit('change', value as number | undefined);
 }
 
 /**
@@ -45,13 +42,12 @@ async function getDeviceList() {
 
   try {
     deviceLoading.value = true;
-    const res = await getDeviceListByProductId(props.productId);
-    deviceList.value = res || [];
+    const data = await getDeviceListByProductId(props.productId);
+    deviceList.value = [DEVICE_SELECTOR_OPTIONS.ALL_DEVICES, ...(data || [])];
   } catch (error) {
-    console.error('获取设备列表失败:', error);
-    deviceList.value = [];
+    console.error('获取设备列表失败 ：', error);
+    deviceList.value = [DEVICE_SELECTOR_OPTIONS.ALL_DEVICES];
   } finally {
-    deviceList.value.unshift(DEVICE_SELECTOR_OPTIONS.ALL_DEVICES);
     deviceLoading.value = false;
   }
 }
@@ -59,16 +55,26 @@ async function getDeviceList() {
 // 监听产品变化
 watch(
   () => props.productId,
-  (newProductId) => {
-    if (newProductId) {
-      getDeviceList();
-    } else {
+  async (newProductId, oldProductId) => {
+    if (!newProductId) {
       deviceList.value = [];
-      // 清空当前选择的设备
-      if (props.modelValue) {
+      if (props.modelValue !== undefined && props.modelValue !== null) {
         emit('update:modelValue', undefined);
         emit('change', undefined);
       }
+      return;
+    }
+    await getDeviceList();
+    // 切换到新 productId 时，旧 deviceId 不在新列表里则清空
+    if (
+      oldProductId !== undefined &&
+      oldProductId !== newProductId &&
+      props.modelValue !== undefined &&
+      props.modelValue !== null &&
+      !deviceList.value.some((d: any) => d.id === props.modelValue)
+    ) {
+      emit('update:modelValue', undefined);
+      emit('change', undefined);
     }
   },
   { immediate: true },
@@ -77,34 +83,35 @@ watch(
 
 <template>
   <Select
-    :model-value="modelValue"
-    @update:model-value="handleChange"
+    :value="modelValue"
+    @change="handleChange"
     placeholder="请选择设备"
-    filterable
-    clearable
+    show-search
+    allow-clear
     class="w-full"
+    option-label-prop="label"
     :loading="deviceLoading"
     :disabled="!productId"
   >
-    <SelectOption
+    <Select.Option
       v-for="device in deviceList"
       :key="device.id"
       :label="device.deviceName"
       :value="device.id"
     >
-      <div class="py-4px flex w-full items-center justify-between">
+      <div class="py-[4px] flex w-full items-center justify-between">
         <div class="flex-1">
-          <div class="text-14px font-500 mb-2px text-primary">
+          <div class="text-[14px] font-medium mb-[2px] text-foreground">
             {{ device.deviceName }}
           </div>
-          <div class="text-12px text-primary">
+          <div class="text-[12px] text-muted-foreground">
             {{ device.deviceKey }}
           </div>
         </div>
-        <div class="gap-4px flex items-center" v-if="device.id > 0">
+        <div class="gap-[4px] flex items-center" v-if="device.id > 0">
           <DictTag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
         </div>
       </div>
-    </SelectOption>
+    </Select.Option>
   </Select>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/operator-selector.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/operator-selector.vue
index 0044e2d98..2e97aaee9 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/operator-selector.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/operator-selector.vue
@@ -239,39 +239,40 @@ watch(
 <template>
   <div class="w-full">
     <Select
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择操作符"
       @change="handleChange"
       class="w-full"
+      option-label-prop="label"
     >
-      <SelectOption
+      <Select.Option
         v-for="operator in availableOperators"
         :key="operator.value"
         :label="operator.label"
         :value="operator.value"
       >
-        <div class="py-4px flex w-full items-center justify-between">
-          <div class="gap-8px flex items-center">
-            <div class="text-14px font-500 text-primary">
+        <div class="py-[4px] flex w-full items-center justify-between">
+          <div class="gap-[8px] flex items-center">
+            <div class="text-[14px] font-medium text-foreground">
               {{ operator.label }}
             </div>
             <div
-              class="text-12px px-6px py-2px rounded-4px bg-primary-light-9 font-mono text-primary"
+              class="text-[12px] px-[6px] py-[2px] rounded-[4px] bg-primary-light-9 font-mono text-primary"
             >
               {{ operator.symbol }}
             </div>
           </div>
-          <div class="text-12px text-secondary">
+          <div class="text-[12px] text-muted-foreground">
             {{ operator.description }}
           </div>
         </div>
-      </SelectOption>
+      </Select.Option>
     </Select>
   </div>
 </template>
 
 <style scoped>
-:deep(.el-select-dropdown__item) {
+:deep(.ant-select-item-option-content) {
   height: auto;
   padding: 8px 20px;
 }
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/product-selector.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/product-selector.vue
index 418a6ede4..ee7177d16 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/product-selector.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/product-selector.vue
@@ -47,7 +47,7 @@ async function getProductList() {
   }
 }
 
-// 组件挂载时获取产品列表
+/** 组件挂载时获取产品列表 */
 onMounted(() => {
   getProductList();
 });
@@ -55,31 +55,32 @@ onMounted(() => {
 
 <template>
   <Select
-    :model-value="modelValue"
-    @update:model-value="handleChange"
+    :value="modelValue"
+    @change="(value: any) => handleChange(value)"
     placeholder="请选择产品"
-    filterable
-    clearable
+    show-search
+    allow-clear
     class="w-full"
+    option-label-prop="label"
     :loading="productLoading"
   >
-    <SelectOption
+    <Select.Option
       v-for="product in productList"
       :key="product.id"
       :label="product.name"
       :value="product.id"
     >
-      <div class="py-4px flex w-full items-center justify-between">
+      <div class="py-[4px] flex w-full items-center justify-between">
         <div class="flex-1">
-          <div class="text-14px font-500 mb-2px text-primary">
+          <div class="text-[14px] font-medium mb-[2px] text-foreground">
             {{ product.name }}
           </div>
-          <div class="text-12px text-secondary">
+          <div class="text-[12px] text-muted-foreground">
             {{ product.productKey }}
           </div>
         </div>
-        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="product.status" />
+        <DictTag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
       </div>
-    </SelectOption>
+    </Select.Option>
   </Select>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/property-selector.vue b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/property-selector.vue
index 802da3610..e16c1de5f 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/property-selector.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/form/selectors/property-selector.vue
@@ -1,18 +1,12 @@
 <!-- 属性选择器组件 -->
 <script setup lang="ts">
-import type {
-  ThingModelApi,
-  ThingModelEvent,
-  ThingModelProperty,
-  ThingModelService,
-} from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { computed, ref, watch } from 'vue';
 
 import {
   getAccessModeLabel,
   getDataTypeName,
-  getDataTypeTagType,
   getEventTypeLabel,
   getThingModelServiceCallTypeLabel,
   IotRuleSceneTriggerTypeEnum,
@@ -24,7 +18,7 @@ import { IconifyIcon } from '@vben/icons';
 import { useVModel } from '@vueuse/core';
 import { Button, Popover, Select, Tag } from 'antdv-next';
 
-import { getThingModelListByProductId } from '#/api/iot/thingmodel';
+import { getThingModelTSLByProductId } from '#/api/iot/thingmodel';
 
 /** 属性选择器组件 */
 defineOptions({ name: 'PropertySelector' });
@@ -41,7 +35,6 @@ const emit = defineEmits<{
   (e: 'change', value: { config: any; type: string }): void;
 }>();
 
-// TODO 芋艿
 /** 属性选择器内部使用的统一数据结构 */
 interface PropertySelectorItem {
   identifier: string;
@@ -55,204 +48,144 @@ interface PropertySelectorItem {
   range?: string;
   eventType?: string;
   callType?: string;
-  inputParams?: ThingModelParam[];
-  outputParams?: ThingModelParam[];
-  property?: ThingModelProperty;
-  event?: ThingModelEvent;
-  service?: ThingModelService;
+  inputParams?: ThingModelApi.Param[];
+  outputParams?: ThingModelApi.Param[];
+  property?: ThingModelApi.Property;
+  event?: ThingModelApi.Event;
+  service?: ThingModelApi.Service;
 }
 
 const localValue = useVModel(props, 'modelValue', emit);
 
-const loading = ref(false); // 加载状态
-const propertyList = ref<ThingModelApi.Property[]>([]); // 属性列表
-const thingModelTSL = ref<null | ThingModelApi.ThingModel>(null); // 物模型TSL数据
+const loading = ref(false);
+const propertyList = ref<PropertySelectorItem[]>([]);
 
-// 计算属性：属性分组
+/** 触发类型 → 物模型类型 + 分组标签 */
+const TRIGGER_TYPE_TO_GROUP: Record<
+  number,
+  { label: string; modelType: number }
+> = {
+  [IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST]: {
+    label: THING_MODEL_GROUP_LABELS.PROPERTY,
+    modelType: IoTThingModelTypeEnum.PROPERTY,
+  },
+  [IotRuleSceneTriggerTypeEnum.TIMER]: {
+    label: THING_MODEL_GROUP_LABELS.PROPERTY,
+    modelType: IoTThingModelTypeEnum.PROPERTY,
+  },
+  [IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST]: {
+    label: THING_MODEL_GROUP_LABELS.EVENT,
+    modelType: IoTThingModelTypeEnum.EVENT,
+  },
+  [IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE]: {
+    label: THING_MODEL_GROUP_LABELS.SERVICE,
+    modelType: IoTThingModelTypeEnum.SERVICE,
+  },
+};
+
+/** 属性分组：按触发类型筛选属性 / 事件 / 服务 */
 const propertyGroups = computed(() => {
-  const groups: { label: string; options: any[] }[] = [];
-
-  if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST) {
-    groups.push({
-      label: THING_MODEL_GROUP_LABELS.PROPERTY,
-      options: propertyList.value.filter(
-        (p) => p.type === IoTThingModelTypeEnum.PROPERTY,
-      ),
-    });
-  }
-
-  if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST) {
-    groups.push({
-      label: THING_MODEL_GROUP_LABELS.EVENT,
-      options: propertyList.value.filter(
-        (p) => p.type === IoTThingModelTypeEnum.EVENT,
-      ),
-    });
-  }
-
-  if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE) {
-    groups.push({
-      label: THING_MODEL_GROUP_LABELS.SERVICE,
-      options: propertyList.value.filter(
-        (p) => p.type === IoTThingModelTypeEnum.SERVICE,
-      ),
-    });
-  }
-
-  return groups.filter((group) => group.options.length > 0);
+  const config = TRIGGER_TYPE_TO_GROUP[props.triggerType];
+  if (!config) return [];
+  const options = propertyList.value.filter(
+    (item) => item.type === config.modelType,
+  );
+  return options.length > 0 ? [{ label: config.label, options }] : [];
 });
 
-// 计算属性：当前选中的属性
-const selectedProperty = computed(() => {
-  return propertyList.value.find((p) => p.identifier === localValue.value);
-});
+/** 当前选中的属性 */
+const selectedProperty = computed(() =>
+  propertyList.value.find(
+    (property) => property.identifier === localValue.value,
+  ),
+);
 
-/**
- * 处理选择变化事件
- * @param value 选中的属性标识符
- */
+/** 处理选择变化事件 */
 function handleChange(value: any) {
-  const property = propertyList.value.find((p) => p.identifier === value);
+  const property = propertyList.value.find((item) => item.identifier === value);
   if (property) {
-    emit('change', {
-      type: property.dataType,
-      config: property,
-    });
+    emit('change', { type: property.dataType, config: property });
   }
 }
 
-/**
- * 获取物模型TSL数据
- */
-async function getThingModelTSL() {
+/** 获取物模型 TSL 数据 */
+async function loadThingModelTSL() {
   if (!props.productId) {
-    thingModelTSL.value = null;
     propertyList.value = [];
     return;
   }
-
   loading.value = true;
   try {
-    const tslData = await getThingModelListByProductId(props.productId);
-
-    if (tslData) {
-      thingModelTSL.value = tslData;
-      parseThingModelData();
-    } else {
-      console.error('获取物模型TSL失败: 返回数据为空');
-      propertyList.value = [];
-    }
+    const tsl = await getThingModelTSLByProductId(props.productId);
+    propertyList.value = parseThingModelData(tsl);
   } catch (error) {
-    console.error('获取物模型TSL失败:', error);
+    console.error('获取物模型 TSL 失败 ：', error);
     propertyList.value = [];
   } finally {
     loading.value = false;
   }
 }
 
-/** 解析物模型 TSL 数据 */
-function parseThingModelData() {
-  const tsl = thingModelTSL.value;
-  const properties: PropertySelectorItem[] = [];
-
-  if (!tsl) {
-    propertyList.value = properties;
-    return;
-  }
-  // 解析属性
-  if (tsl.properties && Array.isArray(tsl.properties)) {
-    tsl.properties.forEach((prop) => {
-      properties.push({
-        identifier: prop.identifier,
-        name: prop.name,
-        description: prop.description,
-        dataType: prop.dataType,
-        type: IoTThingModelTypeEnum.PROPERTY,
-        accessMode: prop.accessMode,
-        required: prop.required,
-        unit: getPropertyUnit(prop),
-        range: getPropertyRange(prop),
-        property: prop,
-      });
-    });
-  }
-
-  // 解析事件
-  if (tsl.events && Array.isArray(tsl.events)) {
-    tsl.events.forEach((event) => {
-      properties.push({
-        identifier: event.identifier,
-        name: event.name,
-        description: event.description,
-        dataType: 'struct',
-        type: IoTThingModelTypeEnum.EVENT,
-        eventType: event.type,
-        required: event.required,
-        outputParams: event.outputParams,
-        event,
-      });
-    });
-  }
-
-  // 解析服务
-  if (tsl.services && Array.isArray(tsl.services)) {
-    tsl.services.forEach((service) => {
-      properties.push({
-        identifier: service.identifier,
-        name: service.name,
-        description: service.description,
-        dataType: 'struct',
-        type: IoTThingModelTypeEnum.SERVICE,
-        callType: service.callType,
-        required: service.required,
-        inputParams: service.inputParams,
-        outputParams: service.outputParams,
-        service,
-      });
-    });
-  }
-  propertyList.value = properties;
+/** 把 TSL 树展平为 PropertySelectorItem[] */
+function parseThingModelData(
+  tsl?: null | ThingModelApi.ThingModelTSL,
+): PropertySelectorItem[] {
+  if (!tsl) return [];
+  const properties = (tsl.properties ?? []).map<PropertySelectorItem>(
+    (prop) => ({
+      identifier: prop.identifier!,
+      name: prop.name!,
+      description: prop.description,
+      dataType: prop.dataType!,
+      type: IoTThingModelTypeEnum.PROPERTY,
+      accessMode: prop.accessMode,
+      required: prop.required,
+      unit: prop.dataSpecs?.unit,
+      range: getPropertyRange(prop),
+      property: prop,
+    }),
+  );
+  const events = (tsl.events ?? []).map<PropertySelectorItem>((event) => ({
+    identifier: event.identifier!,
+    name: event.name!,
+    description: event.description,
+    dataType: 'struct',
+    type: IoTThingModelTypeEnum.EVENT,
+    eventType: event.type,
+    required: event.required,
+    outputParams: event.outputParams,
+    event,
+  }));
+  const services = (tsl.services ?? []).map<PropertySelectorItem>(
+    (service) => ({
+      identifier: service.identifier!,
+      name: service.name!,
+      description: service.description,
+      dataType: 'struct',
+      type: IoTThingModelTypeEnum.SERVICE,
+      callType: service.callType,
+      required: service.required,
+      inputParams: service.inputParams,
+      outputParams: service.outputParams,
+      service,
+    }),
+  );
+  return [...properties, ...events, ...services];
 }
 
-/**
- * 获取属性单位
- * @param property 属性对象
- * @returns 属性单位
- */
-function getPropertyUnit(property: any) {
-  if (!property) return undefined;
-
-  // 数值型数据的单位
-  if (property.dataSpecs && property.dataSpecs.unit) {
-    return property.dataSpecs.unit;
+/** 获取属性取值范围：数值型给 min~max；枚举 / 布尔给选项列表 */
+function getPropertyRange(
+  property: ThingModelApi.Property,
+): string | undefined {
+  const specs = property.dataSpecs;
+  if (specs && specs.min !== undefined && specs.max !== undefined) {
+    return `${specs.min}~${specs.max}`;
   }
-
-  return undefined;
-}
-
-/**
- * 获取属性范围描述
- * @param property 属性对象
- * @returns 属性范围描述
- */
-function getPropertyRange(property: any) {
-  if (!property) return undefined;
-
-  // 数值型数据的范围
-  if (property.dataSpecs) {
-    const specs = property.dataSpecs;
-    if (specs.min !== undefined && specs.max !== undefined) {
-      return `${specs.min}~${specs.max}`;
-    }
-  }
-
-  // 枚举型和布尔型数据的选项
-  if (property.dataSpecsList && Array.isArray(property.dataSpecsList)) {
+  if (property.dataSpecsList?.length) {
     return property.dataSpecsList
       .map((item: any) => `${item.name}(${item.value})`)
       .join(', ');
   }
-
   return undefined;
 }
 
@@ -260,7 +193,7 @@ function getPropertyRange(property: any) {
 watch(
   () => props.productId,
   () => {
-    getThingModelTSL();
+    loadThingModelTSL();
   },
   { immediate: true },
 );
@@ -275,191 +208,202 @@ watch(
 </script>
 
 <template>
-  <div class="gap-8px flex items-center">
+  <div class="gap-[8px] flex items-center">
     <Select
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择监控项"
-      filterable
-      clearable
+      show-search
+      allow-clear
       @change="handleChange"
-      class="!w-150px"
+      class="!w-[150px]"
+      option-label-prop="label"
       :loading="loading"
     >
-      <SelectOptionGroup
+      <Select.OptGroup
         v-for="group in propertyGroups"
         :key="group.label"
         :label="group.label"
       >
-        <SelectOption
+        <Select.Option
           v-for="property in group.options"
           :key="property.identifier"
           :label="property.name"
           :value="property.identifier"
         >
-          <div class="py-2px flex w-full items-center justify-between">
-            <span class="text-14px font-500 flex-1 truncate text-primary">
+          <div class="py-[2px] flex w-full items-center justify-between">
+            <span
+              class="text-[14px] font-medium flex-1 truncate text-foreground"
+            >
               {{ property.name }}
             </span>
-            <Tag
-              :type="getDataTypeTagType(property.dataType)"
-              size="small"
-              class="ml-8px flex-shrink-0"
-            >
+            <Tag class="ml-[8px] flex-shrink-0">
               {{ property.identifier }}
             </Tag>
           </div>
-        </SelectOption>
-      </SelectOptionGroup>
+        </Select.Option>
+      </Select.OptGroup>
     </Select>
 
     <!-- 属性详情弹出层 -->
     <Popover
       v-if="selectedProperty"
       placement="rightTop"
-      :width="350"
+      :overlay-style="{ width: '350px' }"
       trigger="click"
-      :show-arrow="true"
-      :offset="8"
-      popper-class="property-detail-popover"
+      :arrow="true"
+      overlay-class-name="property-detail-popover"
     >
-      <template #reference>
-        <Button
-          type="primary"
-          text
-          circle
-          size="small"
-          class="flex-shrink-0"
-          title="查看属性详情"
-        >
-          <IconifyIcon icon="ep:info-filled" />
-        </Button>
+      <template #content>
+        <!-- 弹出层内容 -->
+        <div class="property-detail-content">
+          <div class="gap-[8px] mb-[12px] flex items-center">
+            <IconifyIcon icon="ep:info-filled" class="text-[16px] text-info" />
+            <span class="text-[14px] font-medium text-foreground">
+              {{ selectedProperty.name }}
+            </span>
+            <Tag>
+              {{ getDataTypeName(selectedProperty.dataType) }}
+            </Tag>
+          </div>
+
+          <div class="space-y-[8px] ml-[24px]">
+            <div class="gap-[8px] flex items-start">
+              <span
+                class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground"
+              >
+                标识符：
+              </span>
+              <span class="text-[12px] flex-1 text-foreground">
+                {{ selectedProperty.identifier }}
+              </span>
+            </div>
+
+            <div
+              v-if="selectedProperty.description"
+              class="gap-[8px] flex items-start"
+            >
+              <span
+                class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground"
+              >
+                描述：
+              </span>
+              <span class="text-[12px] flex-1 text-foreground">
+                {{ selectedProperty.description }}
+              </span>
+            </div>
+
+            <div
+              v-if="selectedProperty.unit"
+              class="gap-[8px] flex items-start"
+            >
+              <span
+                class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground"
+              >
+                单位：
+              </span>
+              <span class="text-[12px] flex-1 text-foreground">
+                {{ selectedProperty.unit }}
+              </span>
+            </div>
+
+            <div
+              v-if="selectedProperty.range"
+              class="gap-[8px] flex items-start"
+            >
+              <span
+                class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground"
+              >
+                取值范围：
+              </span>
+              <span class="text-[12px] flex-1 text-foreground">
+                {{ selectedProperty.range }}
+              </span>
+            </div>
+
+            <!-- 根据属性类型显示额外信息 -->
+            <div
+              v-if="
+                selectedProperty.type === IoTThingModelTypeEnum.PROPERTY &&
+                selectedProperty.accessMode
+              "
+              class="gap-[8px] flex items-start"
+            >
+              <span
+                class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground"
+              >
+                访问模式：
+              </span>
+              <span class="text-[12px] flex-1 text-foreground">
+                {{ getAccessModeLabel(selectedProperty.accessMode) }}
+              </span>
+            </div>
+
+            <div
+              v-if="
+                selectedProperty.type === IoTThingModelTypeEnum.EVENT &&
+                selectedProperty.eventType
+              "
+              class="gap-[8px] flex items-start"
+            >
+              <span
+                class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground"
+              >
+                事件类型：
+              </span>
+              <span class="text-[12px] flex-1 text-foreground">
+                {{ getEventTypeLabel(selectedProperty.eventType) }}
+              </span>
+            </div>
+
+            <div
+              v-if="
+                selectedProperty.type === IoTThingModelTypeEnum.SERVICE &&
+                selectedProperty.callType
+              "
+              class="gap-[8px] flex items-start"
+            >
+              <span
+                class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground"
+              >
+                调用类型：
+              </span>
+              <span class="text-[12px] flex-1 text-foreground">
+                {{
+                  getThingModelServiceCallTypeLabel(selectedProperty.callType)
+                }}
+              </span>
+            </div>
+          </div>
+        </div>
       </template>
-
-      <!-- 弹出层内容 -->
-      <div class="property-detail-content">
-        <div class="gap-8px mb-12px flex items-center">
-          <IconifyIcon icon="ep:info-filled" class="text-16px text-info" />
-          <span class="text-14px font-500 text-primary">
-            {{ selectedProperty.name }}
-          </span>
-          <Tag
-            :type="getDataTypeTagType(selectedProperty.dataType)"
-            size="small"
-          >
-            {{ getDataTypeName(selectedProperty.dataType) }}
-          </Tag>
-        </div>
-
-        <div class="space-y-8px ml-24px">
-          <div class="gap-8px flex items-start">
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
-              标识符：
-            </span>
-            <span class="text-12px flex-1 text-primary">
-              {{ selectedProperty.identifier }}
-            </span>
-          </div>
-
-          <div
-            v-if="selectedProperty.description"
-            class="gap-8px flex items-start"
-          >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
-              描述：
-            </span>
-            <span class="text-12px flex-1 text-primary">
-              {{ selectedProperty.description }}
-            </span>
-          </div>
-
-          <div v-if="selectedProperty.unit" class="gap-8px flex items-start">
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
-              单位：
-            </span>
-            <span class="text-12px flex-1 text-primary">
-              {{ selectedProperty.unit }}
-            </span>
-          </div>
-
-          <div v-if="selectedProperty.range" class="gap-8px flex items-start">
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
-              取值范围：
-            </span>
-            <span class="text-12px flex-1 text-primary">
-              {{ selectedProperty.range }}
-            </span>
-          </div>
-
-          <!-- 根据属性类型显示额外信息 -->
-          <div
-            v-if="
-              selectedProperty.type === IoTThingModelTypeEnum.PROPERTY &&
-              selectedProperty.accessMode
-            "
-            class="gap-8px flex items-start"
-          >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
-              访问模式：
-            </span>
-            <span class="text-12px flex-1 text-primary">
-              {{ getAccessModeLabel(selectedProperty.accessMode) }}
-            </span>
-          </div>
-
-          <div
-            v-if="
-              selectedProperty.type === IoTThingModelTypeEnum.EVENT &&
-              selectedProperty.eventType
-            "
-            class="gap-8px flex items-start"
-          >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
-              事件类型：
-            </span>
-            <span class="text-12px flex-1 text-primary">
-              {{ getEventTypeLabel(selectedProperty.eventType) }}
-            </span>
-          </div>
-
-          <div
-            v-if="
-              selectedProperty.type === IoTThingModelTypeEnum.SERVICE &&
-              selectedProperty.callType
-            "
-            class="gap-8px flex items-start"
-          >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
-              调用类型：
-            </span>
-            <span class="text-12px flex-1 text-primary">
-              {{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }}
-            </span>
-          </div>
-        </div>
-      </div>
+      <Button
+        type="link"
+        shape="circle"
+        size="small"
+        class="flex-shrink-0"
+        title="查看属性详情"
+      >
+        <IconifyIcon icon="ep:info-filled" />
+      </Button>
     </Popover>
   </div>
 </template>
 
 <style scoped>
-/* 下拉选项样式 */
-:deep(.el-select-dropdown__item) {
+:deep(.ant-select-item-option-content) {
   height: auto;
   padding: 6px 20px;
 }
 
-/* 弹出层内容样式 */
 .property-detail-content {
   padding: 4px 0;
 }
 
-/* 弹出层自定义样式 */
 :global(.property-detail-popover) {
-  /* 可以在这里添加全局弹出层样式 */
   max-width: 400px !important;
 }
 
-:global(.property-detail-popover .el-popover__content) {
+:global(.property-detail-popover .ant-popover-inner-content) {
   padding: 16px !important;
 }
 </style>
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/index.vue b/apps/web-antdv-next/src/views/iot/rule/scene/index.vue
index ce5b76bdf..7463c2e16 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/index.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/index.vue
@@ -2,9 +2,20 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
-import { Page, useVbenModal } from '@vben/common-ui';
+import { ref } from 'vue';
 
-import { message } from 'antdv-next';
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  getActionTypeLabel,
+  getTriggerTypeLabel,
+  IotRuleSceneTriggerTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { CronUtils, formatDateTime } from '@vben/utils';
+
+import { Card, Col, message, Row, Tag, Tooltip } from 'antdv-next';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -12,18 +23,24 @@ import {
   getSceneRulePage,
   updateSceneRuleStatus,
 } from '#/api/iot/rule/scene';
+import { DictTag } from '#/components/dict-tag';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
-defineOptions({ name: 'IoTRuleScene' });
-
-const [FormModal, formModalApi] = useVbenModal({
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
   connectedComponent: Form,
   destroyOnClose: true,
 });
 
+const statistics = ref({
+  total: 0,
+  enabled: 0,
+  disabled: 0,
+  timerRules: 0,
+}); // 统计数据
+
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
@@ -31,25 +48,29 @@ function handleRefresh() {
 
 /** 创建场景规则 */
 function handleCreate() {
-  formModalApi.setData(null).open();
+  formDrawerApi.setData(null).open();
 }
 
 /** 编辑场景规则 */
 function handleEdit(row: RuleSceneApi.SceneRule) {
-  formModalApi.setData(row).open();
+  formDrawerApi.setData(row).open();
 }
 
 /** 启用/停用场景规则 */
 async function handleToggleStatus(row: RuleSceneApi.SceneRule) {
-  const newStatus = row.status === 0 ? 1 : 0;
+  const newStatus =
+    row.status === CommonStatusEnum.ENABLE
+      ? CommonStatusEnum.DISABLE
+      : CommonStatusEnum.ENABLE;
   const hideLoading = message.loading({
-    content: newStatus === 0 ? '正在启用...' : '正在停用...',
+    content:
+      newStatus === CommonStatusEnum.ENABLE ? '正在启用...' : '正在停用...',
     duration: 0,
   });
   try {
     await updateSceneRuleStatus(row.id as number, newStatus);
     message.success({
-      content: newStatus === 0 ? '启用成功' : '停用成功',
+      content: newStatus === CommonStatusEnum.ENABLE ? '启用成功' : '停用成功',
     });
     handleRefresh();
   } finally {
@@ -74,6 +95,101 @@ async function handleDelete(row: RuleSceneApi.SceneRule) {
   }
 }
 
+/** 判断规则是否包含定时触发器 */
+function hasTimerTrigger(row: RuleSceneApi.SceneRule): boolean {
+  return (
+    row.triggers?.some(
+      (trigger) => trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
+    ) || false
+  );
+}
+
+/** 触发条件摘要文本（拼接所有触发器） */
+function getTriggerSummary(row: RuleSceneApi.SceneRule): string {
+  if (!row.triggers?.length) return '无触发器';
+  return row.triggers
+    .map((trigger) => {
+      const type = trigger.type ?? 0;
+      let description = getTriggerTypeLabel(type);
+      if (
+        (type === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
+          type === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+          type === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE) &&
+        trigger.identifier
+      ) {
+        description += ` (${trigger.identifier})`;
+      } else if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
+        description = `${getTriggerTypeLabel(type)} (${CronUtils.format(trigger.cronExpression || '')})`;
+      }
+      if (trigger.deviceId) {
+        description += ` [设备 ID: ${trigger.deviceId}]`;
+      } else if (trigger.productId) {
+        description += ` [产品 ID: ${trigger.productId}]`;
+      }
+      return description;
+    })
+    .join(', ');
+}
+
+/** 执行动作摘要文本（拼接所有动作） */
+function getActionSummary(row: RuleSceneApi.SceneRule): string {
+  if (!row.actions?.length) return '无执行器';
+  return row.actions
+    .map((action) => {
+      let description = getActionTypeLabel(action.type ?? 0);
+      if (action.deviceId) {
+        description += ` [设备 ID: ${action.deviceId}]`;
+      } else if (action.productId) {
+        description += ` [产品 ID: ${action.productId}]`;
+      }
+      if (action.alertConfigId) {
+        description += ` [告警配置 ID: ${action.alertConfigId}]`;
+      }
+      return description;
+    })
+    .join(', ');
+}
+
+/** 取定时触发器的 CRON 频率描述 */
+function getCronFrequency(row: RuleSceneApi.SceneRule): string {
+  const timerTrigger = row.triggers?.find(
+    (trigger) => trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
+  );
+  return timerTrigger?.cronExpression
+    ? CronUtils.getFrequencyDescription(timerTrigger.cronExpression)
+    : '';
+}
+
+/** 取定时触发器原始 CRON 表达式 */
+function getCronExpression(row: RuleSceneApi.SceneRule): string {
+  const timerTrigger = row.triggers?.find(
+    (trigger) => trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
+  );
+  return timerTrigger?.cronExpression || '';
+}
+
+/** 取定时触发器下次执行时间 */
+function getNextExecutionTime(row: RuleSceneApi.SceneRule): Date | null {
+  const timerTrigger = row.triggers?.find(
+    (trigger) => trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
+  );
+  return timerTrigger?.cronExpression
+    ? CronUtils.getNextExecutionTime(timerTrigger.cronExpression)
+    : null;
+}
+
+/** 刷新规则统计卡片数据 */
+function updateStatistics(rows: RuleSceneApi.SceneRule[], total?: number) {
+  statistics.value = {
+    total: total ?? rows.length,
+    enabled: rows.filter((item) => item.status === CommonStatusEnum.ENABLE)
+      .length,
+    disabled: rows.filter((item) => item.status === CommonStatusEnum.DISABLE)
+      .length,
+    timerRules: rows.filter((item) => hasTimerTrigger(item)).length,
+  };
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -85,11 +201,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await getSceneRulePage({
+          const result = await getSceneRulePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
           });
+          updateStatistics(result.list || [], result.total);
+          return result;
         },
       },
     },
@@ -107,7 +225,80 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormDrawer @success="handleRefresh" />
+
+    <!-- 统计卡片 -->
+    <Row :gutter="16" class="mb-4">
+      <Col :span="6">
+        <Card :body-style="{ padding: '12px 16px' }">
+          <div class="flex items-center">
+            <div
+              class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-indigo-500 to-purple-600"
+            >
+              <IconifyIcon icon="ant-design:file-text-outlined" />
+            </div>
+            <div class="leading-tight">
+              <div class="text-xl font-semibold">
+                {{ statistics.total }}
+              </div>
+              <div class="text-xs text-muted-foreground">总规则数</div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+      <Col :span="6">
+        <Card :body-style="{ padding: '12px 16px' }">
+          <div class="flex items-center">
+            <div
+              class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-pink-400 to-red-500"
+            >
+              <IconifyIcon icon="ant-design:check-outlined" />
+            </div>
+            <div class="leading-tight">
+              <div class="text-xl font-semibold">
+                {{ statistics.enabled }}
+              </div>
+              <div class="text-xs text-muted-foreground">启用规则</div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+      <Col :span="6">
+        <Card :body-style="{ padding: '12px 16px' }">
+          <div class="flex items-center">
+            <div
+              class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-cyan-400 to-blue-500"
+            >
+              <IconifyIcon icon="ant-design:close-outlined" />
+            </div>
+            <div class="leading-tight">
+              <div class="text-xl font-semibold">
+                {{ statistics.disabled }}
+              </div>
+              <div class="text-xs text-muted-foreground">禁用规则</div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+      <Col :span="6">
+        <Card :body-style="{ padding: '12px 16px' }">
+          <div class="flex items-center">
+            <div
+              class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-green-400 to-teal-400"
+            >
+              <IconifyIcon icon="lucide:timer" />
+            </div>
+            <div class="leading-tight">
+              <div class="text-xl font-semibold">
+                {{ statistics.timerRules }}
+              </div>
+              <div class="text-xs text-muted-foreground">定时规则</div>
+            </div>
+          </div>
+        </Card>
+      </Col>
+    </Row>
+
     <Grid table-title="场景规则列表">
       <template #toolbar-tools>
         <TableAction
@@ -121,19 +312,68 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-
-      <!-- 操作列 -->
+      <!-- 规则名称列：名称 + 状态 tag inline + 描述 -->
+      <template #name="{ row }">
+        <div class="flex items-center gap-2">
+          <span class="font-medium text-foreground">{{ row.name }}</span>
+          <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="row.status" />
+        </div>
+        <Tooltip
+          v-if="row.description"
+          :title="row.description"
+          placement="top"
+        >
+          <div
+            class="mt-1 max-w-[200px] truncate text-xs text-muted-foreground"
+          >
+            {{ row.description }}
+          </div>
+        </Tooltip>
+      </template>
+      <!-- 触发条件列：单 tag 汇总 + 定时触发额外信息 -->
+      <template #triggers="{ row }">
+        <div class="space-y-1">
+          <Tag color="processing" class="m-0">{{ getTriggerSummary(row) }}</Tag>
+          <Tooltip
+            v-if="hasTimerTrigger(row)"
+            :title="getCronExpression(row)"
+            placement="top"
+          >
+            <div class="text-xs text-muted-foreground">
+              <IconifyIcon icon="lucide:clock" class="mr-1 inline" />
+              {{ getCronFrequency(row) }}
+              <template v-if="getNextExecutionTime(row)">
+                · 下次 {{ formatDateTime(getNextExecutionTime(row) as Date) }}
+              </template>
+            </div>
+          </Tooltip>
+        </div>
+      </template>
+      <!-- 执行动作列：单 tag 汇总 -->
+      <template #actionsCol="{ row }">
+        <Tag color="success" class="m-0">{{ getActionSummary(row) }}</Tag>
+      </template>
+      <!-- 最近触发列 -->
+      <template #lastTriggeredTime="{ row }">
+        <span v-if="row.lastTriggeredTime">
+          {{ formatDateTime(row.lastTriggeredTime) }}
+        </span>
+        <span v-else class="text-muted-foreground">未触发</span>
+      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[
             {
-              label: row.status === 0 ? '停用' : '启用',
+              label: row.status === CommonStatusEnum.ENABLE ? '停用' : '启用',
               type: 'link',
               icon:
-                row.status === 0
+                row.status === CommonStatusEnum.ENABLE
                   ? 'ant-design:stop-outlined'
                   : 'ant-design:check-circle-outlined',
-              onClick: handleToggleStatus.bind(null, row),
+              popConfirm: {
+                title: `确认${row.status === CommonStatusEnum.ENABLE ? '停用' : '启用'}场景规则「${row.name}」吗？`,
+                confirm: handleToggleStatus.bind(null, row),
+              },
             },
             {
               label: $t('common.edit'),
diff --git a/apps/web-antdv-next/src/views/iot/rule/scene/modules/form.vue b/apps/web-antdv-next/src/views/iot/rule/scene/modules/form.vue
index bd4e1e559..32275b912 100644
--- a/apps/web-antdv-next/src/views/iot/rule/scene/modules/form.vue
+++ b/apps/web-antdv-next/src/views/iot/rule/scene/modules/form.vue
@@ -1,87 +1,185 @@
 <script lang="ts" setup>
 import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, reactive, ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
+import { useVbenDrawer } from '@vben/common-ui';
+import { CommonStatusEnum, IotRuleSceneTriggerTypeEnum } from '@vben/constants';
 
-import { message } from 'antdv-next';
+import { Form, message } from 'antdv-next';
 
-import { useVbenForm } from '#/adapter/form';
 import {
   createSceneRule,
   getSceneRule,
   updateSceneRule,
 } from '#/api/iot/rule/scene';
 import { $t } from '#/locales';
+import {
+  validateSceneRuleActions,
+  validateSceneRuleTriggers,
+} from '#/views/iot/utils/scene-rule';
 
-import { useFormSchema } from '../data';
+import ActionSection from '../form/sections/action-section.vue';
+import BasicInfoSection from '../form/sections/basic-info-section.vue';
+import TriggerSection from '../form/sections/trigger-section.vue';
+
+defineOptions({ name: 'IoTRuleSceneForm' });
 
 const emit = defineEmits(['success']);
-const formData = ref<RuleSceneApi.SceneRule>();
-const getTitle = computed(() => {
-  return formData.value?.id
+
+const formRef = ref();
+const formData = ref<RuleSceneApi.SceneRule>(buildEmptyFormData());
+
+const getTitle = computed(() =>
+  formData.value.id
     ? $t('ui.actionTitle.edit', ['场景规则'])
-    : $t('ui.actionTitle.create', ['场景规则']);
-});
+    : $t('ui.actionTitle.create', ['场景规则']),
+);
 
-const [Form, formApi] = useVbenForm({
-  commonConfig: {
-    componentProps: {
-      class: 'w-full',
-    },
-  },
-  wrapperClass: 'grid-cols-2',
-  layout: 'horizontal',
-  schema: useFormSchema(),
-  showDefaultActions: false,
-});
-
-const [Modal, modalApi] = useVbenModal({
+const [Drawer, drawerApi] = useVbenDrawer({
   async onConfirm() {
-    const { valid } = await formApi.validate();
-    if (!valid) {
+    try {
+      await formRef.value?.validate();
+    } catch {
       return;
     }
-    modalApi.lock();
-    // 提交表单
-    const data = (await formApi.getValues()) as RuleSceneApi.SceneRule;
+    const triggerError = validateSceneRuleTriggers(formData.value.triggers);
+    if (triggerError) {
+      message.error(triggerError);
+      return;
+    }
+    const actionError = validateSceneRuleActions(formData.value.actions);
+    if (actionError) {
+      message.error(actionError);
+      return;
+    }
+    drawerApi.lock();
     try {
-      await (formData.value?.id
-        ? updateSceneRule(data)
-        : createSceneRule(data));
-      // 关闭并提示
-      await modalApi.close();
+      const data = { ...formData.value } as RuleSceneApi.SceneRule;
+      await (data.id ? updateSceneRule(data) : createSceneRule(data));
+      await drawerApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
     } finally {
-      modalApi.unlock();
+      drawerApi.unlock();
     }
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
       return;
     }
-    // 加载数据
-    const data = modalApi.getData<RuleSceneApi.SceneRule>();
-    if (!data || !data.id) {
-      return;
-    }
-    modalApi.lock();
-    try {
-      formData.value = await getSceneRule(data.id);
-      // 设置到 values
-      await formApi.setValues(formData.value);
-    } finally {
-      modalApi.unlock();
+    const data = drawerApi.getData<RuleSceneApi.SceneRule>();
+    // 先用列表传入的数据立即回填，避免 await 期间表单显示空白
+    formData.value = data?.id ? normalizeFormData(data) : buildEmptyFormData();
+    await nextTick();
+    formRef.value?.clearValidate?.();
+    // 再异步拉取详情，覆盖以保证字段最新
+    if (data?.id) {
+      drawerApi.lock();
+      try {
+        const fresh = await getSceneRule(data.id);
+        formData.value = normalizeFormData(fresh);
+      } finally {
+        drawerApi.unlock();
+      }
     }
   },
 });
+
+/** 构造空白表单数据 */
+function buildEmptyFormData(): RuleSceneApi.SceneRule {
+  return {
+    name: '',
+    description: '',
+    status: CommonStatusEnum.ENABLE,
+    triggers: [
+      {
+        type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
+        productId: undefined,
+        deviceId: undefined,
+        identifier: undefined,
+        operator: undefined,
+        value: undefined,
+        cronExpression: undefined,
+        conditionGroups: [],
+      },
+    ],
+    actions: [],
+  };
+}
+
+/** 回显时兜底，保证触发器/执行器数组不为空 */
+function normalizeFormData(result: any): RuleSceneApi.SceneRule {
+  const triggers: RuleSceneApi.Trigger[] = result.triggers?.length
+    ? result.triggers
+    : buildEmptyFormData().triggers!;
+  const actions: RuleSceneApi.Action[] = result.actions || [];
+  return {
+    ...result,
+    triggers,
+    actions,
+  };
+}
+
+/** 触发器校验 */
+function validateTriggers(_rule: any, value: any, callback: any) {
+  const error = validateSceneRuleTriggers(value);
+  if (error) {
+    callback(new Error(error));
+    return;
+  }
+  callback();
+}
+
+/** 执行器校验 */
+function validateActions(_rule: any, value: any, callback: any) {
+  const error = validateSceneRuleActions(value);
+  if (error) {
+    callback(new Error(error));
+    return;
+  }
+  callback();
+}
+
+const formRules = reactive({
+  name: [
+    { required: true, message: '场景名称不能为空', trigger: 'blur' },
+    {
+      type: 'string',
+      min: 1,
+      max: 50,
+      message: '场景名称长度应在 1-50 个字符之间',
+      trigger: 'blur',
+    },
+  ],
+  status: [{ required: true, message: '场景状态不能为空', trigger: 'change' }],
+  description: [
+    {
+      type: 'string',
+      max: 200,
+      message: '场景描述不能超过 200 个字符',
+      trigger: 'blur',
+    },
+  ],
+  triggers: [
+    { required: true, validator: validateTriggers, trigger: 'change' },
+  ],
+  actions: [{ required: true, validator: validateActions, trigger: 'change' }],
+});
 </script>
 
 <template>
-  <Modal class="w-3/5" :title="getTitle">
-    <Form class="mx-4" />
-  </Modal>
+  <Drawer :title="getTitle" class="w-4/5">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules as any"
+      class="mx-4"
+      label-width="110px"
+    >
+      <BasicInfoSection v-model="formData" />
+      <TriggerSection v-model:triggers="formData.triggers as any" />
+      <ActionSection v-model:actions="formData.actions as any" />
+    </Form>
+  </Drawer>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/data.ts b/apps/web-antdv-next/src/views/iot/thingmodel/data.ts
index ec6072cf9..c682c64d2 100644
--- a/apps/web-antdv-next/src/views/iot/thingmodel/data.ts
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/data.ts
@@ -1,7 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
-import { DICT_TYPE } from '@vben/constants';
+import { DICT_TYPE, getDataTypeOptionsLabel } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 /** 列表的搜索表单 */
@@ -21,13 +22,13 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<ThingModelApi.ThingModel>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
       field: 'type',
       title: '功能类型',
-      minWidth: 20,
+      minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.IOT_THING_MODEL_TYPE },
@@ -41,17 +42,16 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'identifier',
       title: '标识符',
-      minWidth: 20,
+      minWidth: 120,
     },
     {
-      field: 'dataType',
       title: '数据类型',
-      minWidth: 50,
-      slots: { default: 'dataType' },
+      minWidth: 100,
+      formatter: ({ row }) =>
+        getDataTypeOptionsLabel(row.property?.dataType ?? '') || '-',
     },
     {
-      field: 'property',
-      title: '属性',
+      title: '数据定义',
       minWidth: 200,
       slots: { default: 'dataDefinition' },
     },
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/index.vue b/apps/web-antdv-next/src/views/iot/thingmodel/index.vue
index f5879ee6b..75a04bf6f 100644
--- a/apps/web-antdv-next/src/views/iot/thingmodel/index.vue
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/index.vue
@@ -1,99 +1,89 @@
-<script setup lang="ts">
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { IotProductApi } from '#/api/iot/product/product';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
-import { onMounted, provide, ref } from 'vue';
+import { computed, inject } from 'vue';
 
-import { Page } from '@vben/common-ui';
-import { getDataTypeOptionsLabel, IOT_PROVIDE_KEY } from '@vben/constants';
+import { Page, useVbenModal } from '@vben/common-ui';
+import { IOT_PROVIDE_KEY } from '@vben/constants';
 
 import { message } from 'antdv-next';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getProduct } from '#/api/iot/product/product';
 import { deleteThingModel, getThingModelPage } from '#/api/iot/thingmodel';
+import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
 import { DataDefinition } from './modules/components';
-import ThingModelForm from './modules/thing-model-form.vue';
-import ThingModelTsl from './modules/thing-model-tsl.vue';
+import Form from './modules/form.vue';
+import Tsl from './modules/tsl.vue';
 
-defineOptions({ name: 'IoTThingModel' });
+const product = inject<Ref<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT);
+const productId = computed(() => product?.value?.id);
 
-const props = defineProps<{
-  productId: number;
-}>();
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
 
-const product = ref<IotProductApi.Product>({} as IotProductApi.Product); // 产品信息
+const [TslModal, tslModalApi] = useVbenModal({
+  connectedComponent: Tsl,
+  destroyOnClose: true,
+});
 
-provide(IOT_PROVIDE_KEY.PRODUCT, product); // 提供产品信息给子组件
-
-// TODO @haohao：form 是不是用 web-antd/src/views/system/user/index.vue 里 open 的风格；
-const thingModelFormRef = ref();
-// TODO @haohao：thingModelTSLRef 应该是个 modal，也可以调整下风格；
-const thingModelTSLRef = ref();
-
-// TODO @haohao：方法的顺序、注释、调整的和别的模块一致。
-
-// 新增功能
-function handleCreate() {
-  thingModelFormRef.value?.open('create');
-}
-
-// 编辑功能
-function handleEdit(row: any) {
-  thingModelFormRef.value?.open('update', row.id);
-}
-
-// 删除功能
-async function handleDelete(row: any) {
-  // TODO @haohao：应该有个 loading，类似别的模块写法；
-  try {
-    await deleteThingModel(row.id);
-    message.success('删除成功');
-    gridApi.reload();
-  } catch (error) {
-    console.error('删除失败:', error);
-  }
-}
-
-// 打开 TSL
-function handleOpenTSL() {
-  thingModelTSLRef.value?.open();
-}
-
-// 获取数据类型标签
-// TODO @haohao：可以直接在 data.ts 就写掉这个逻辑；
-function getDataTypeLabel(row: any) {
-  return getDataTypeOptionsLabel(row.property?.dataType) || '-';
-}
-
-// 刷新表格
+/** 刷新表格 */
 function handleRefresh() {
-  gridApi.reload();
+  gridApi.query();
 }
 
-// 获取产品信息
-async function getProductData() {
+/** 新增物模型 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑物模型 */
+function handleEdit(row: ThingModelApi.ThingModel) {
+  formModalApi.setData({ id: row.id }).open();
+}
+
+/** 删除物模型 */
+async function handleDelete(row: ThingModelApi.ThingModel) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
   try {
-    product.value = await getProduct(props.productId);
-  } catch (error) {
-    console.error('获取产品信息失败:', error);
+    await deleteThingModel(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
   }
 }
 
-// TODO @haohao：字段的顺序，调整成别的模块一直；
+/** 打开 TSL 弹窗 */
+function handleOpenTsl() {
+  tslModalApi.open();
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
   gridOptions: {
     columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
       ajax: {
-        query: async ({ page }: any, formValues: any) => {
+        query: async ({ page }, formValues) => {
           return await getThingModelPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            productId: props.productId,
+            productId: productId.value,
             ...formValues,
           });
         },
@@ -107,65 +97,56 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  },
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
-});
-
-// 初始化
-onMounted(async () => {
-  await getProductData();
+  } as VxeTableGridOptions<ThingModelApi.ThingModel>,
 });
 </script>
 
 <template>
   <Page auto-content-height>
-    <Grid>
+    <FormModal @success="handleRefresh" />
+    <TslModal />
+
+    <Grid table-title="物模型列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: '添加功能',
+              label: $t('ui.actionTitle.create', ['物模型']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
+              auth: ['iot:thing-model:create'],
               onClick: handleCreate,
             },
             {
               label: 'TSL',
-              type: 'default',
-              color: 'success', // TODO @haohao：貌似 color 可以去掉？应该是不生效的哈。ps：另外，也给搞个 icon？
-              onClick: handleOpenTSL,
+              type: 'primary',
+              auth: ['iot:thing-model:query'],
+              onClick: handleOpenTsl,
             },
           ]"
         />
       </template>
-      <!-- 数据类型列 -->
-      <template #dataType="{ row }">
-        <span>{{ getDataTypeLabel(row) }}</span>
-      </template>
-      <!-- 数据定义列 -->
-      <!-- TODO @haohao：可以在 data.ts 就写掉这个逻辑； -->
       <template #dataDefinition="{ row }">
         <DataDefinition :data="row" />
       </template>
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[
             {
-              label: '编辑',
+              label: $t('common.edit'),
               type: 'link',
               icon: ACTION_ICON.EDIT,
+              auth: ['iot:thing-model:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
-              label: '删除',
+              label: $t('common.delete'),
               type: 'link',
               danger: true,
               icon: ACTION_ICON.DELETE,
+              auth: ['iot:thing-model:delete'],
               popConfirm: {
-                title: '确认删除该功能吗?',
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
               },
             },
@@ -173,10 +154,5 @@ onMounted(async () => {
         />
       </template>
     </Grid>
-
-    <!-- 物模型表单 -->
-    <ThingModelForm ref="thingModelFormRef" @success="handleRefresh" />
-    <!-- TSL 弹窗 -->
-    <ThingModelTsl ref="thingModelTSLRef" />
   </Page>
 </template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/components/data-definition.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/components/data-definition.vue
index ca969b1b8..19637601b 100644
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/components/data-definition.vue
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/components/data-definition.vue
@@ -1,8 +1,5 @@
-<!-- TODO @haohao：如果是模块内用的，就用 modules 里。（等后面点在看，优先级：低） -->
 <script lang="ts" setup>
-import type { ThingModelData } from '#/api/iot/thingmodel';
-
-import { computed } from 'vue';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import {
   getEventTypeLabel,
@@ -11,112 +8,58 @@ import {
   IoTThingModelTypeEnum,
 } from '@vben/constants';
 
-import { Tooltip } from 'antdv-next';
-
-/** 数据定义展示组件 */
-defineOptions({ name: 'DataDefinition' });
-
-const props = defineProps<{ data: ThingModelData }>();
-
-const formattedDataSpecsList = computed(() => {
-  if (
-    !props.data.property?.dataSpecsList ||
-    props.data.property.dataSpecsList.length === 0
-  ) {
-    return '';
-  }
-  return props.data.property.dataSpecsList
-    .map((item) => `${item.value}-${item.name}`)
-    .join('、');
-}); // 格式化布尔值和枚举值列表为字符串
-
-const shortText = computed(() => {
-  if (
-    !props.data.property?.dataSpecsList ||
-    props.data.property.dataSpecsList.length === 0
-  ) {
-    return '-';
-  }
-  const first = props.data.property.dataSpecsList[0];
-  const count = props.data.property.dataSpecsList.length;
-  return count > 1
-    ? `${first.value}-${first.name} 等${count}项`
-    : `${first.value}-${first.name}`;
-}); // 显示的简短文本（第一个值）
+defineProps<{ data: ThingModelApi.ThingModel }>();
+const NUMBER_TYPES = new Set<string>([
+  IoTDataSpecsDataTypeEnum.DOUBLE,
+  IoTDataSpecsDataTypeEnum.FLOAT,
+  IoTDataSpecsDataTypeEnum.INT,
+]);
+const PLACEHOLDER_TYPES = new Set<string>([
+  IoTDataSpecsDataTypeEnum.ARRAY,
+  IoTDataSpecsDataTypeEnum.DATE,
+  IoTDataSpecsDataTypeEnum.STRUCT,
+]);
+const LIST_TYPES = new Set<string>([
+  IoTDataSpecsDataTypeEnum.BOOL,
+  IoTDataSpecsDataTypeEnum.ENUM,
+]);
 </script>
 
 <template>
   <!-- 属性 -->
-  <template v-if="Number(data.type) === IoTThingModelTypeEnum.PROPERTY">
-    <!-- 非列表型：数值 -->
-    <div
-      v-if="
-        [
-          IoTDataSpecsDataTypeEnum.INT,
-          IoTDataSpecsDataTypeEnum.DOUBLE,
-          IoTDataSpecsDataTypeEnum.FLOAT,
-        ].includes(data.property?.dataType as any)
-      "
-    >
+  <template v-if="data.type === IoTThingModelTypeEnum.PROPERTY">
+    <div v-if="NUMBER_TYPES.has(data.property?.dataType as any)">
       取值范围：{{
         `${data.property?.dataSpecs?.min}~${data.property?.dataSpecs?.max}`
       }}
     </div>
-    <!-- 非列表型：文本 -->
-    <div v-if="IoTDataSpecsDataTypeEnum.TEXT === data.property?.dataType">
+    <div v-if="data.property?.dataType === IoTDataSpecsDataTypeEnum.TEXT">
       数据长度：{{ data.property?.dataSpecs?.length }}
     </div>
-    <!-- 列表型: 数组、结构、时间（特殊） -->
-    <div
-      v-if="
-        [
-          IoTDataSpecsDataTypeEnum.ARRAY,
-          IoTDataSpecsDataTypeEnum.STRUCT,
-          IoTDataSpecsDataTypeEnum.DATE,
-        ].includes(data.property?.dataType as any)
-      "
-    >
-      -
-    </div>
-    <!-- 列表型: 布尔值、枚举 -->
-    <div
-      v-if="
-        [IoTDataSpecsDataTypeEnum.BOOL, IoTDataSpecsDataTypeEnum.ENUM].includes(
-          data.property?.dataType as any,
-        )
-      "
-    >
-      <Tooltip :title="formattedDataSpecsList" placement="topLeft">
-        <span class="data-specs-text">
-          {{
-            IoTDataSpecsDataTypeEnum.BOOL === data.property?.dataType
-              ? '布尔值'
-              : '枚举值'
-          }}：{{ shortText }}
-        </span>
-      </Tooltip>
+    <div v-if="PLACEHOLDER_TYPES.has(data.property?.dataType as any)">-</div>
+    <div v-if="LIST_TYPES.has(data.property?.dataType as any)">
+      <div>
+        {{
+          data.property?.dataType === IoTDataSpecsDataTypeEnum.BOOL
+            ? '布尔值'
+            : '枚举值'
+        }}：
+      </div>
+      <div
+        v-for="item in data.property?.dataSpecsList || []"
+        :key="String(item.value)"
+      >
+        {{ item.name }}-{{ item.value }}
+      </div>
     </div>
   </template>
   <!-- 服务 -->
-  <div v-if="Number(data.type) === IoTThingModelTypeEnum.SERVICE">
+  <div v-if="data.type === IoTThingModelTypeEnum.SERVICE">
     调用方式：
     {{ getThingModelServiceCallTypeLabel(data.service?.callType as any) }}
   </div>
   <!-- 事件 -->
-  <div v-if="Number(data.type) === IoTThingModelTypeEnum.EVENT">
+  <div v-if="data.type === IoTThingModelTypeEnum.EVENT">
     事件类型：{{ getEventTypeLabel(data.event?.type as any) }}
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @haohao：tindwind */
-.data-specs-text {
-  cursor: help;
-  border-bottom: 1px dashed #d9d9d9;
-
-  &:hover {
-    color: #1890ff;
-    border-bottom-color: #1890ff;
-  }
-}
-</style>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/array.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/array.vue
new file mode 100644
index 000000000..6d80f95b4
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/array.vue
@@ -0,0 +1,69 @@
+<!-- dataType：array 数组类型 -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { getDataTypeOptions, IoTDataSpecsDataTypeEnum } from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { Form, Input, Radio } from 'antdv-next';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+
+import ThingModelStructDataSpecs from './struct.vue';
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+/** 数组元素禁止选择的类型 */
+const EXCLUDED_CHILD_TYPES = new Set<string>([
+  IoTDataSpecsDataTypeEnum.ARRAY,
+  IoTDataSpecsDataTypeEnum.DATE,
+  IoTDataSpecsDataTypeEnum.ENUM,
+]);
+const childDataTypeOptions = getDataTypeOptions().filter(
+  (item) => !EXCLUDED_CHILD_TYPES.has(item.value),
+);
+
+const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>;
+
+/** 元素类型切换时，清理旧子类型的结构体属性配置 */
+function handleChange(e: any) {
+  const val = e?.target?.value ?? e;
+  dataSpecs.value.dataSpecsList = [];
+  dataSpecs.value.childDataType = val;
+}
+</script>
+
+<template>
+  <Form.Item
+    :name="['property', 'dataSpecs', 'childDataType']"
+    :rules="ThingModelFormRules.childDataType"
+    label="元素类型"
+  >
+    <Radio.Group v-model:value="dataSpecs.childDataType" @change="handleChange">
+      <Radio
+        v-for="item in childDataTypeOptions"
+        :key="item.value"
+        :value="item.value"
+        class="w-1/3"
+      >
+        {{ `${item.value}(${item.label})` }}
+      </Radio>
+    </Radio.Group>
+  </Form.Item>
+  <Form.Item
+    :name="['property', 'dataSpecs', 'size']"
+    :rules="ThingModelFormRules.size"
+    label="元素个数"
+  >
+    <Input
+      v-model:value="dataSpecs.size"
+      placeholder="请输入数组中的元素个数"
+    />
+  </Form.Item>
+  <!-- Struct 型配置-->
+  <ThingModelStructDataSpecs
+    v-if="dataSpecs.childDataType === IoTDataSpecsDataTypeEnum.STRUCT"
+    v-model="dataSpecs.dataSpecsList"
+    :field-path="['property', 'dataSpecs', 'dataSpecsList']"
+  />
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/enum.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/enum.vue
new file mode 100644
index 000000000..65a3514b3
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/enum.vue
@@ -0,0 +1,140 @@
+<!-- dataType：enum 数组类型 -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { IoTDataSpecsDataTypeEnum } from '@vben/constants';
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Form, Input, message } from 'antdv-next';
+
+import { buildIdentifierLikeNameValidator } from '#/api/iot/thingmodel';
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>;
+
+const validateEnumName = buildIdentifierLikeNameValidator('枚举描述');
+
+/** 添加枚举项 */
+function addEnum() {
+  dataSpecsList.value.push({
+    dataType: IoTDataSpecsDataTypeEnum.ENUM,
+    name: '',
+    value: '',
+  } as any);
+}
+
+/** 删除枚举项 */
+function deleteEnum(index: number) {
+  if (dataSpecsList.value.length === 1) {
+    message.warning('至少需要一个枚举项');
+    return;
+  }
+  dataSpecsList.value.splice(index, 1);
+}
+
+/** 校验单项枚举值：必填、数字、不重复 */
+function validateEnumValue(_rule: any, value: any, callback: any) {
+  if (isEmpty(value)) {
+    callback(new Error('枚举值不能为空'));
+    return;
+  }
+  if (Number.isNaN(Number(value))) {
+    callback(new Error('枚举值必须是数字'));
+    return;
+  }
+  const sameCount = dataSpecsList.value.filter(
+    (it) => it.value === value,
+  ).length;
+  if (sameCount > 1) {
+    callback(new Error('枚举值不能重复'));
+    return;
+  }
+  callback();
+}
+
+/** 校验整个枚举列表：非空、无空项、无非法数字、无重复 */
+function validateEnumList(_rule: any, _value: any, callback: any) {
+  if (isEmpty(dataSpecsList.value)) {
+    callback(new Error('请至少添加一个枚举项'));
+    return;
+  }
+  const hasEmpty = dataSpecsList.value.some(
+    (item) => isEmpty(item.value) || isEmpty(item.name),
+  );
+  if (hasEmpty) {
+    callback(new Error('存在未填写的枚举值或描述'));
+    return;
+  }
+  const hasInvalidNumber = dataSpecsList.value.some((item) =>
+    Number.isNaN(Number(item.value)),
+  );
+  if (hasInvalidNumber) {
+    callback(new Error('存在非数字的枚举值'));
+    return;
+  }
+  const values = dataSpecsList.value.map((item) => item.value);
+  if (new Set(values).size !== values.length) {
+    callback(new Error('存在重复的枚举值'));
+    return;
+  }
+  callback();
+}
+</script>
+
+<template>
+  <Form.Item
+    :rules="[{ validator: validateEnumList, trigger: 'change' }]"
+    label="枚举项"
+  >
+    <div class="flex flex-col">
+      <div class="flex items-center">
+        <span class="flex-1"> 参数值 </span>
+        <span class="flex-1"> 参数描述 </span>
+      </div>
+      <div
+        v-for="(item, index) in dataSpecsList"
+        :key="index"
+        class="mb-[5px] flex items-center justify-between"
+      >
+        <Form.Item
+          :name="['property', 'dataSpecsList', index, 'value']"
+          :rules="[
+            { required: true, message: '枚举值不能为空', trigger: 'blur' },
+            { validator: validateEnumValue, trigger: 'blur' },
+          ]"
+          class="mb-0 flex-1"
+        >
+          <Input
+            v-model:value="item.value"
+            placeholder="请输入枚举值，如「0」"
+          />
+        </Form.Item>
+        <span class="mx-2">~</span>
+        <Form.Item
+          :name="['property', 'dataSpecsList', index, 'name']"
+          :rules="[
+            { required: true, message: '枚举描述不能为空', trigger: 'blur' },
+            { validator: validateEnumName, trigger: 'blur' },
+          ]"
+          class="mb-0 flex-1"
+        >
+          <Input v-model:value="item.name" placeholder="对该枚举项的描述" />
+        </Form.Item>
+        <Button class="ml-2.5" type="link" @click="deleteEnum(index)">
+          删除
+        </Button>
+      </div>
+      <Button type="link" @click="addEnum">+ 添加枚举项</Button>
+    </div>
+  </Form.Item>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-form-item) {
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/index.ts b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/index.ts
new file mode 100644
index 000000000..5b75f0a7f
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/index.ts
@@ -0,0 +1,4 @@
+export { default as ThingModelArrayDataSpecs } from './array.vue';
+export { default as ThingModelEnumDataSpecs } from './enum.vue';
+export { default as ThingModelNumberDataSpecs } from './number.vue';
+export { default as ThingModelStructDataSpecs } from './struct.vue';
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/number.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/number.vue
new file mode 100644
index 000000000..eca090ec3
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/number.vue
@@ -0,0 +1,154 @@
+<!-- dataType：number 数组类型 -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { useVModel } from '@vueuse/core';
+import { Form, Input, Select } from 'antdv-next';
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const dataSpecs = useVModel(
+  props,
+  'modelValue',
+  emits,
+) as Ref<ThingModelApi.DataSpecsNumberData>;
+
+/** 单位字典选项 */
+const unitOptions = computed(() =>
+  getDictOptions(DICT_TYPE.IOT_THING_MODEL_UNIT, 'string'),
+);
+
+/** 单位下拉变化时，拆出 unitName 与 unit 回写 */
+function unitChange(unitSpecs: any) {
+  if (!unitSpecs) {
+    return;
+  }
+  const [unitName, unit] = String(unitSpecs).split('-');
+  dataSpecs.value.unitName = unitName;
+  dataSpecs.value.unit = unit;
+}
+
+/** 校验最小值 */
+function validateMin(_rule: any, _value: any, callback: any) {
+  const min = Number(dataSpecs.value.min);
+  const max = Number(dataSpecs.value.max);
+  if (Number.isNaN(min)) {
+    callback(new Error('请输入有效的数值'));
+    return;
+  }
+  if (!Number.isNaN(max) && min >= max) {
+    callback(new Error('最小值必须小于最大值'));
+    return;
+  }
+  callback();
+}
+
+/** 校验最大值 */
+function validateMax(_rule: any, _value: any, callback: any) {
+  const min = Number(dataSpecs.value.min);
+  const max = Number(dataSpecs.value.max);
+  if (Number.isNaN(max)) {
+    callback(new Error('请输入有效的数值'));
+    return;
+  }
+  if (!Number.isNaN(min) && max <= min) {
+    callback(new Error('最大值必须大于最小值'));
+    return;
+  }
+  callback();
+}
+
+/** 校验步长 */
+function validateStep(_rule: any, _value: any, callback: any) {
+  const step = Number(dataSpecs.value.step);
+  if (Number.isNaN(step)) {
+    callback(new Error('请输入有效的数值'));
+    return;
+  }
+  if (step <= 0) {
+    callback(new Error('步长必须大于 0'));
+    return;
+  }
+  const min = Number(dataSpecs.value.min);
+  const max = Number(dataSpecs.value.max);
+  if (!Number.isNaN(min) && !Number.isNaN(max) && step > max - min) {
+    callback(new Error('步长不能大于最大值与最小值的差值'));
+    return;
+  }
+  callback();
+}
+</script>
+
+<template>
+  <Form.Item label="取值范围">
+    <div class="flex items-center justify-between">
+      <Form.Item
+        :name="['property', 'dataSpecs', 'min']"
+        :rules="[
+          { required: true, message: '最小值不能为空', trigger: 'blur' },
+          { validator: validateMin, trigger: 'blur' },
+        ]"
+        class="mb-0 flex-1"
+      >
+        <Input v-model:value="dataSpecs.min" placeholder="请输入最小值" />
+      </Form.Item>
+      <span class="mx-2">~</span>
+      <Form.Item
+        :name="['property', 'dataSpecs', 'max']"
+        :rules="[
+          { required: true, message: '最大值不能为空', trigger: 'blur' },
+          { validator: validateMax, trigger: 'blur' },
+        ]"
+        class="mb-0 flex-1"
+      >
+        <Input v-model:value="dataSpecs.max" placeholder="请输入最大值" />
+      </Form.Item>
+    </div>
+  </Form.Item>
+  <Form.Item
+    :name="['property', 'dataSpecs', 'step']"
+    :rules="[
+      { required: true, message: '步长不能为空', trigger: 'blur' },
+      { validator: validateStep, trigger: 'blur' },
+    ]"
+    label="步长"
+  >
+    <Input v-model:value="dataSpecs.step" placeholder="请输入步长" />
+  </Form.Item>
+  <Form.Item
+    :name="['property', 'dataSpecs', 'unit']"
+    :rules="[{ required: true, message: '请选择单位', trigger: 'change' }]"
+    label="单位"
+  >
+    <Select
+      :value="dataSpecs.unit ? `${dataSpecs.unitName}-${dataSpecs.unit}` : ''"
+      show-search
+      placeholder="请选择单位"
+      class="w-full"
+      @change="unitChange"
+    >
+      <Select.Option
+        v-for="(item, index) in unitOptions"
+        :key="index"
+        :value="`${item.label}-${item.value}`"
+      >
+        {{ `${item.label}-${item.value}` }}
+      </Select.Option>
+    </Select>
+  </Form.Item>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-form-item) {
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/struct.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/struct.vue
new file mode 100644
index 000000000..f0207f73a
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/data-specs/struct.vue
@@ -0,0 +1,178 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { onMounted, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IoTDataSpecsDataTypeEnum } from '@vben/constants';
+import { cloneDeep, isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Divider, Form, Input } from 'antdv-next';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+
+import ThingModelProperty from '../property.vue';
+
+const props = withDefaults(
+  defineProps<{
+    /** 父表单中 dataSpecsList 的 name 路径，默认 property.dataSpecsList；
+     * array 嵌套 struct 时父级需传 ['property', 'dataSpecs', 'dataSpecsList']，
+     * 否则父表单 validate() 无法定位该字段，非空校验不会触发。 */
+    fieldPath?: string[];
+    modelValue: any;
+  }>(),
+  {
+    fieldPath: () => ['property', 'dataSpecsList'],
+  },
+);
+const emits = defineEmits(['update:modelValue']);
+const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>;
+
+const structFormRef = ref();
+const formData = ref<any>(buildEmptyFormData());
+
+/** 校验结构体属性对象非空 */
+function validateStructSpecsList(_rule: any, _value: any, callback: any) {
+  if (isEmpty(dataSpecsList.value)) {
+    callback(new Error('请至少添加一个结构体属性对象'));
+    return;
+  }
+  callback();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    try {
+      await structFormRef.value?.validate();
+    } catch {
+      return;
+    }
+    const data = formData.value;
+    const item = {
+      identifier: data.identifier,
+      name: data.name,
+      description: data.description,
+      dataType: IoTDataSpecsDataTypeEnum.STRUCT,
+      childDataType: data.property.dataType,
+      dataSpecs:
+        !isEmpty(data.property.dataSpecs) &&
+        Object.keys(data.property.dataSpecs).length > 1
+          ? data.property.dataSpecs
+          : undefined,
+      dataSpecsList: isEmpty(data.property.dataSpecsList)
+        ? undefined
+        : data.property.dataSpecsList,
+    };
+    const existingIndex = dataSpecsList.value.findIndex(
+      (spec) => spec.identifier === data.identifier,
+    );
+    if (existingIndex === -1) {
+      dataSpecsList.value.push(item);
+    } else {
+      dataSpecsList.value[existingIndex] = item;
+    }
+    await modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    formData.value = buildEmptyFormData();
+    structFormRef.value?.clearValidate?.();
+    const data = modalApi.getData<any>();
+    if (isEmpty(data)) {
+      return;
+    }
+    // 编辑回显时 cloneDeep，避免弹窗 v-model 改到原始对象（用户取消时不污染外层 dataSpecsList）
+    formData.value = {
+      identifier: data.identifier ?? '',
+      name: data.name ?? '',
+      description: data.description ?? '',
+      property: {
+        dataType: data.childDataType ?? IoTDataSpecsDataTypeEnum.INT,
+        dataSpecs: data.dataSpecs ? cloneDeep(data.dataSpecs) : {},
+        dataSpecsList: data.dataSpecsList ? cloneDeep(data.dataSpecsList) : [],
+      },
+    };
+  },
+});
+
+/** 构造空白结构体表单 */
+function buildEmptyFormData() {
+  return {
+    identifier: '',
+    name: '',
+    description: '',
+    property: {
+      dataType: IoTDataSpecsDataTypeEnum.INT,
+      dataSpecs: { dataType: IoTDataSpecsDataTypeEnum.INT },
+      dataSpecsList: [],
+    },
+  };
+}
+
+/** 打开结构体表单 */
+function openStructForm(val: any) {
+  modalApi.setData(val).open();
+}
+
+/** 删除结构体项 */
+function deleteStructItem(index: number) {
+  dataSpecsList.value.splice(index, 1);
+}
+
+onMounted(() => {
+  if (isEmpty(dataSpecsList.value)) {
+    dataSpecsList.value = [];
+  }
+});
+</script>
+
+<template>
+  <Form.Item
+    :name="fieldPath"
+    :rules="[{ validator: validateStructSpecsList, trigger: 'change' }]"
+    label="属性对象"
+  >
+    <div
+      v-for="(item, index) in dataSpecsList"
+      :key="index"
+      class="mb-2.5 flex w-full justify-between bg-gray-100 px-2.5 dark:bg-gray-800"
+    >
+      <span>参数：{{ item.name }}</span>
+      <div>
+        <Button type="link" @click="openStructForm(item)">编辑</Button>
+        <Divider type="vertical" />
+        <Button danger type="link" @click="deleteStructItem(index)">
+          删除
+        </Button>
+      </div>
+    </div>
+    <Button type="link" @click="openStructForm(null)">+ 新增参数</Button>
+  </Form.Item>
+
+  <!-- 结构体参数表单 -->
+  <Modal class="w-2/5" title="结构体参数">
+    <Form
+      ref="structFormRef"
+      :label-col="{ span: 6 }"
+      :model="formData"
+      :wrapper-col="{ span: 18 }"
+      class="mx-4"
+    >
+      <Form.Item :rules="ThingModelFormRules.name" label="参数名称" name="name">
+        <Input v-model:value="formData.name" placeholder="请输入参数名称" />
+      </Form.Item>
+      <Form.Item
+        :rules="ThingModelFormRules.identifier"
+        label="标识符"
+        name="identifier"
+      >
+        <Input v-model:value="formData.identifier" placeholder="请输入标识符" />
+      </Form.Item>
+      <!-- 属性配置 -->
+      <ThingModelProperty v-model="formData.property" is-struct-data-specs />
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/index.ts b/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/index.ts
deleted file mode 100644
index 2aa250005..000000000
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as ThingModelArrayDataSpecs } from './thing-model-array-data-specs.vue';
-export { default as ThingModelEnumDataSpecs } from './thing-model-enum-data-specs.vue';
-export { default as ThingModelNumberDataSpecs } from './thing-model-number-data-specs.vue';
-export { default as ThingModelStructDataSpecs } from './thing-model-struct-data-specs.vue';
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-array-data-specs.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-array-data-specs.vue
deleted file mode 100644
index bbbd4dcf7..000000000
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-array-data-specs.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<!-- dataType：array 数组类型 -->
-<script lang="ts" setup>
-import type { Ref } from 'vue';
-
-import {
-  getDataTypeOptions,
-  IoTDataSpecsDataTypeEnum,
-} from '@vben/constants';
-
-import { useVModel } from '@vueuse/core';
-import { Input, Radio } from 'antdv-next';
-
-import ThingModelStructDataSpecs from './thing-model-struct-data-specs.vue';
-
-/** 数组型的 dataSpecs 配置组件 */
-defineOptions({ name: 'ThingModelArrayDataSpecs' });
-
-const props = defineProps<{ modelValue: any }>();
-const emits = defineEmits(['update:modelValue']);
-const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>;
-
-/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
-function handleChange(val: any) {
-  if (val !== IoTDataSpecsDataTypeEnum.STRUCT) {
-    return;
-  }
-  dataSpecs.value.dataSpecsList = [];
-}
-</script>
-
-<template>
-  <FormItem :name="['property', 'dataSpecs', 'childDataType']" label="元素类型">
-    <RadioGroup v-model:value="dataSpecs.childDataType" @change="handleChange">
-      <template v-for="item in getDataTypeOptions()" :key="item.value">
-        <Radio
-          v-if="
-            !(
-              [
-                IoTDataSpecsDataTypeEnum.ENUM,
-                IoTDataSpecsDataTypeEnum.ARRAY,
-                IoTDataSpecsDataTypeEnum.DATE,
-              ] as any[]
-            ).includes(item.value)
-          "
-          :value="item.value"
-          class="w-1/3"
-        >
-          {{ `${item.value}(${item.label})` }}
-        </Radio>
-      </template>
-    </RadioGroup>
-  </FormItem>
-  <FormItem :name="['property', 'dataSpecs', 'size']" label="元素个数">
-    <Input
-      v-model:value="dataSpecs.size"
-      placeholder="请输入数组中的元素个数"
-    />
-  </FormItem>
-  <!-- Struct 型配置-->
-  <ThingModelStructDataSpecs
-    v-if="dataSpecs.childDataType === IoTDataSpecsDataTypeEnum.STRUCT"
-    v-model="dataSpecs.dataSpecsList"
-  />
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-enum-data-specs.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-enum-data-specs.vue
deleted file mode 100644
index 701a609f9..000000000
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-enum-data-specs.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<!-- dataType：enum 数组类型 -->
-<script lang="ts" setup>
-import type { Ref } from 'vue';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Input, message } from 'antdv-next';
-
-/** 枚举型的 dataSpecs 配置组件 */
-defineOptions({ name: 'ThingModelEnumDataSpecs' });
-
-const props = defineProps<{ modelValue: any }>();
-const emits = defineEmits(['update:modelValue']);
-const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>;
-
-/** 添加枚举项 */
-function addEnum() {
-  dataSpecsList.value.push({
-    name: '', // 枚举项的名称
-    value: '', // 枚举值
-  } as any);
-}
-
-/** 删除枚举项 */
-function deleteEnum(index: number) {
-  if (dataSpecsList.value.length === 1) {
-    message.warning('至少需要一个枚举项');
-    return;
-  }
-  dataSpecsList.value.splice(index, 1);
-}
-</script>
-
-<template>
-  <FormItem label="枚举项">
-    <div class="flex flex-col">
-      <div class="flex items-center">
-        <span class="flex-1"> 参数值 </span>
-        <span class="flex-1"> 参数描述 </span>
-      </div>
-      <div
-        v-for="(item, index) in dataSpecsList"
-        :key="index"
-        class="mb-5px flex items-center justify-between"
-      >
-        <div class="flex-1">
-          <Input v-model:value="item.value" placeholder="请输入枚举值,如'0'" />
-        </div>
-        <span class="mx-2">~</span>
-        <div class="flex-1">
-          <Input v-model:value="item.name" placeholder="对该枚举项的描述" />
-        </div>
-        <Button class="ml-10px" type="link" @click="deleteEnum(index)">
-          删除
-        </Button>
-      </div>
-      <Button type="link" @click="addEnum">+添加枚举项</Button>
-    </div>
-  </FormItem>
-</template>
-
-<style lang="scss" scoped>
-:deep(.ant-form-item) {
-  .ant-form-item {
-    margin-bottom: 0;
-  }
-}
-</style>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-number-data-specs.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-number-data-specs.vue
deleted file mode 100644
index 73fec4f58..000000000
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-number-data-specs.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<!-- dataType：number 数组类型 -->
-<script lang="ts" setup>
-import type { Ref } from 'vue';
-
-import type { DataSpecsNumberData } from '#/api/iot/thingmodel';
-
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { useVModel } from '@vueuse/core';
-import { Input, Select } from 'antdv-next';
-
-/** 数值型的 dataSpecs 配置组件 */
-defineOptions({ name: 'ThingModelNumberDataSpecs' });
-
-const props = defineProps<{ modelValue: any }>();
-const emits = defineEmits(['update:modelValue']);
-const dataSpecs = useVModel(
-  props,
-  'modelValue',
-  emits,
-) as Ref<DataSpecsNumberData>;
-
-/** 单位发生变化时触发 */
-const unitChange = (UnitSpecs: any) => {
-  if (!UnitSpecs) return;
-  const [unitName, unit] = String(UnitSpecs).split('-');
-  dataSpecs.value.unitName = unitName;
-  dataSpecs.value.unit = unit;
-};
-</script>
-
-<template>
-  <FormItem label="取值范围">
-    <div class="flex items-center justify-between">
-      <div class="flex-1">
-        <Input v-model:value="dataSpecs.min" placeholder="请输入最小值" />
-      </div>
-      <span class="mx-2">~</span>
-      <div class="flex-1">
-        <Input v-model:value="dataSpecs.max" placeholder="请输入最大值" />
-      </div>
-    </div>
-  </FormItem>
-  <FormItem label="步长">
-    <Input v-model:value="dataSpecs.step" placeholder="请输入步长" />
-  </FormItem>
-  <FormItem label="单位">
-    <Select
-      :model-value="
-        dataSpecs.unit ? `${dataSpecs.unitName}-${dataSpecs.unit}` : ''
-      "
-      show-search
-      placeholder="请选择单位"
-      class="w-1/1"
-      @change="unitChange"
-    >
-      <SelectOption
-        v-for="(item, index) in getDictOptions(
-          DICT_TYPE.IOT_THING_MODEL_UNIT,
-          'string',
-        )"
-        :key="index"
-        :value="`${item.label}-${item.value}`"
-      >
-        {{ `${item.label}-${item.value}` }}
-      </SelectOption>
-    </Select>
-  </FormItem>
-</template>
-
-<style lang="scss" scoped>
-:deep(.ant-form-item) {
-  .ant-form-item {
-    margin-bottom: 0;
-  }
-}
-</style>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-struct-data-specs.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-struct-data-specs.vue
deleted file mode 100644
index 4b3b4a01d..000000000
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/dataSpecs/thing-model-struct-data-specs.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<!-- dataType：struct 数组类型 -->
-<script lang="ts" setup>
-import type { Ref } from 'vue';
-
-import { nextTick, onMounted, ref, unref } from 'vue';
-
-import { IoTDataSpecsDataTypeEnum } from '@vben/constants';
-import { isEmpty } from '@vben/utils';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Divider, Form, Input, Modal } from 'antdv-next';
-
-import ThingModelProperty from '../thing-model-property.vue';
-
-/** Struct 型的 dataSpecs 配置组件 */
-defineOptions({ name: 'ThingModelStructDataSpecs' });
-
-const props = defineProps<{ modelValue: any }>();
-const emits = defineEmits(['update:modelValue']);
-const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>;
-const dialogVisible = ref(false); // 弹窗的是否展示
-const dialogTitle = ref('新增参数'); // 弹窗的标题
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const structFormRef = ref(); // 表单 ref
-const formData = ref<any>({
-  property: {
-    dataType: IoTDataSpecsDataTypeEnum.INT,
-    dataSpecs: {
-      dataType: IoTDataSpecsDataTypeEnum.INT,
-    },
-    dataSpecsList: [],
-  },
-});
-
-/** 打开 struct 表单 */
-function openStructForm(val: any) {
-  dialogVisible.value = true;
-  resetForm();
-  if (isEmpty(val)) {
-    return;
-  }
-  // 编辑时回显数据
-  const valData = val as any;
-  formData.value = {
-    identifier: valData?.identifier || '',
-    name: valData?.name || '',
-    description: valData?.description || '',
-    property: {
-      dataType: valData?.childDataType || IoTDataSpecsDataTypeEnum.INT,
-      dataSpecs: valData?.dataSpecs ?? {},
-      dataSpecsList: valData?.dataSpecsList ?? [],
-    },
-  };
-
-  // 确保 property.dataType 有值
-  if (!formData.value.property.dataType) {
-    formData.value.property.dataType = IoTDataSpecsDataTypeEnum.INT;
-  }
-}
-
-/** 删除 struct 项 */
-function deleteStructItem(index: number) {
-  dataSpecsList.value.splice(index, 1);
-}
-
-/** 添加参数 */
-async function submitForm() {
-  await structFormRef.value.validate();
-
-  try {
-    const data = unref(formData);
-    // 构建数据对象
-    const item = {
-      identifier: data.identifier,
-      name: data.name,
-      description: data.description,
-      dataType: IoTDataSpecsDataTypeEnum.STRUCT,
-      childDataType: data.property.dataType,
-      dataSpecs:
-        !!data.property.dataSpecs &&
-        Object.keys(data.property.dataSpecs).length > 1
-          ? data.property.dataSpecs
-          : undefined,
-      dataSpecsList: isEmpty(data.property.dataSpecsList)
-        ? undefined
-        : data.property.dataSpecsList,
-    };
-
-    // 新增或修改同 identifier 的参数
-    const existingIndex = dataSpecsList.value.findIndex(
-      (spec) => spec.identifier === data.identifier,
-    );
-    if (existingIndex === -1) {
-      dataSpecsList.value.push(item);
-    } else {
-      dataSpecsList.value[existingIndex] = item;
-    }
-  } finally {
-    dialogVisible.value = false;
-  }
-}
-
-/** 重置表单 */
-function resetForm() {
-  formData.value = {
-    property: {
-      dataType: IoTDataSpecsDataTypeEnum.INT,
-      dataSpecs: {
-        dataType: IoTDataSpecsDataTypeEnum.INT,
-      },
-      dataSpecsList: [],
-    },
-  };
-  structFormRef.value?.resetFields();
-}
-
-/** 组件初始化 */
-onMounted(async () => {
-  await nextTick();
-  // 预防 dataSpecsList 空指针
-  isEmpty(dataSpecsList.value) && (dataSpecsList.value = []);
-});
-</script>
-
-<template>
-  <!-- struct 数据展示 -->
-  <FormItem label="属性对象">
-    <div
-      v-for="(item, index) in dataSpecsList"
-      :key="index"
-      class="px-10px mb-10px flex w-full justify-between bg-gray-100"
-    >
-      <span>参数：{{ item.name }}</span>
-      <div class="btn">
-        <Button type="link" @click="openStructForm(item)"> 编辑 </Button>
-        <Divider orientation="vertical" />
-        <Button type="link" danger @click="deleteStructItem(index)">
-          删除
-        </Button>
-      </div>
-    </div>
-    <Button type="link" @click="openStructForm(null)"> +新增参数 </Button>
-  </FormItem>
-
-  <!-- struct 表单 -->
-  <Modal
-    v-model:open="dialogVisible"
-    :title="dialogTitle"
-    :confirm-loading="formLoading"
-    @ok="submitForm"
-  >
-    <Form
-      ref="structFormRef"
-      :model="formData"
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
-    >
-      <FormItem label="参数名称" name="name">
-        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
-      </FormItem>
-      <FormItem label="标识符" name="identifier">
-        <Input v-model:value="formData.identifier" placeholder="请输入标识符" />
-      </FormItem>
-      <!-- 属性配置 -->
-      <ThingModelProperty v-model="formData.property" is-struct-data-specs />
-    </Form>
-  </Modal>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-event.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/event.vue
similarity index 71%
rename from apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-event.vue
rename to apps/web-antdv-next/src/views/iot/thingmodel/modules/event.vue
index fe4fe0360..1da6b9643 100644
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-event.vue
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/event.vue
@@ -11,14 +11,13 @@ import {
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { Radio } from 'antdv-next';
+import { Form, Radio } from 'antdv-next';
 
-import ThingModelInputOutputParam from './thing-model-input-output-param.vue';
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
 
-/** IoT 物模型事件 */
-defineOptions({ name: 'ThingModelEvent' });
+import ThingModelInputOutputParam from './input-output-param.vue';
 
-const props = defineProps<{ isStructDataSpecs?: boolean; modelValue: any }>();
+const props = defineProps<{ modelValue: any }>();
 const emits = defineEmits(['update:modelValue']);
 const thingModelEvent = useVModel(props, 'modelValue', emits) as Ref<any>;
 
@@ -33,12 +32,12 @@ watch(
 </script>
 
 <template>
-  <FormItem
+  <Form.Item
     :name="['event', 'type']"
-    :rules="[{ required: true, message: '请选择事件类型', trigger: 'change' }]"
+    :rules="ThingModelFormRules.eventType"
     label="事件类型"
   >
-    <RadioGroup v-model:value="thingModelEvent.type">
+    <Radio.Group v-model:value="thingModelEvent.type">
       <Radio
         v-for="eventType in Object.values(IoTThingModelEventTypeEnum)"
         :key="eventType.value"
@@ -46,14 +45,14 @@ watch(
       >
         {{ eventType.label }}
       </Radio>
-    </RadioGroup>
-  </FormItem>
-  <FormItem label="输出参数">
+    </Radio.Group>
+  </Form.Item>
+  <Form.Item label="输出参数">
     <ThingModelInputOutputParam
       v-model="thingModelEvent.outputParams"
       :direction="IoTThingModelParamDirectionEnum.OUTPUT"
     />
-  </FormItem>
+  </Form.Item>
 </template>
 
 <style lang="scss" scoped>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/form.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/form.vue
new file mode 100644
index 000000000..e5e16b954
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/form.vue
@@ -0,0 +1,249 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { IotProductApi } from '#/api/iot/product/product';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed, inject, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  DICT_TYPE,
+  IOT_PROVIDE_KEY,
+  IoTDataSpecsDataTypeEnum,
+  IoTThingModelTypeEnum,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { $t } from '@vben/locales';
+import { cloneDeep, isEmpty } from '@vben/utils';
+
+import { Form, Input, message, Radio } from 'antdv-next';
+
+import {
+  createThingModel,
+  getThingModel,
+  ThingModelFormRules,
+  updateThingModel,
+} from '#/api/iot/thingmodel';
+
+import ThingModelEvent from './event.vue';
+import ThingModelProperty from './property.vue';
+import ThingModelService from './service.vue';
+
+const emit = defineEmits(['success']);
+
+const product = inject<Ref<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT);
+
+const formRef = ref();
+const formData = ref<ThingModelApi.ThingModel>(buildEmptyFormData());
+
+const getTitle = computed(() =>
+  formData.value.id
+    ? $t('ui.actionTitle.edit', ['物模型'])
+    : $t('ui.actionTitle.create', ['物模型']),
+);
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    try {
+      await formRef.value?.validate();
+    } catch {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = cloneDeep(formData.value);
+    data.productId = product!.value.id;
+    data.productKey = product!.value.productKey;
+    fillExtraAttributes(data);
+    try {
+      await (data.id ? updateThingModel(data) : createThingModel(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 每次打开都重置；避免上一次的状态残留
+    formData.value = buildEmptyFormData();
+    formRef.value?.clearValidate?.();
+    // 加载数据
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const result = await getThingModel(data.id);
+      // 设置到 values
+      formData.value = normalizeFormData(result);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 构造空白表单数据 */
+function buildEmptyFormData(): ThingModelApi.ThingModel {
+  return {
+    type: IoTThingModelTypeEnum.PROPERTY,
+    dataType: IoTDataSpecsDataTypeEnum.INT,
+    property: {
+      dataType: IoTDataSpecsDataTypeEnum.INT,
+      dataSpecs: {
+        dataType: IoTDataSpecsDataTypeEnum.INT,
+      },
+    },
+    service: {
+      inputParams: [],
+      outputParams: [],
+    },
+    event: {
+      outputParams: [],
+    },
+  };
+}
+
+/** 回显数据时，规整各分支字段确保子表单可绑定 */
+function normalizeFormData(
+  result: ThingModelApi.ThingModel,
+): ThingModelApi.ThingModel {
+  const next: any = { ...result, type: Number(result.type) };
+  if (isEmpty(next.property)) {
+    next.dataType = IoTDataSpecsDataTypeEnum.INT;
+    next.property = {
+      dataType: IoTDataSpecsDataTypeEnum.INT,
+      dataSpecs: { dataType: IoTDataSpecsDataTypeEnum.INT },
+    };
+  } else {
+    next.property.dataSpecs ??= {};
+    next.property.dataSpecsList ??= [];
+    next.property.dataType ??= IoTDataSpecsDataTypeEnum.INT;
+  }
+  if (isEmpty(next.service)) {
+    next.service = { inputParams: [], outputParams: [] };
+  } else {
+    next.service.inputParams ??= [];
+    next.service.outputParams ??= [];
+  }
+  if (isEmpty(next.event)) {
+    next.event = { outputParams: [] };
+  } else {
+    next.event.outputParams ??= [];
+  }
+  return next;
+}
+
+/** 按功能类型将子表单数据回写到顶层，并清理无关分支 */
+function fillExtraAttributes(data: any) {
+  switch (data.type) {
+    case IoTThingModelTypeEnum.EVENT: {
+      removeDataSpecs(data.event);
+      data.dataType = data.event.dataType;
+      data.event.identifier = data.identifier;
+      data.event.name = data.name;
+      delete data.property;
+      delete data.service;
+
+      break;
+    }
+    case IoTThingModelTypeEnum.PROPERTY: {
+      removeDataSpecs(data.property);
+      data.dataType = data.property.dataType;
+      data.property.identifier = data.identifier;
+      data.property.name = data.name;
+      delete data.service;
+      delete data.event;
+
+      break;
+    }
+    case IoTThingModelTypeEnum.SERVICE: {
+      removeDataSpecs(data.service);
+      data.dataType = data.service.dataType;
+      data.service.identifier = data.identifier;
+      data.service.name = data.name;
+      delete data.property;
+      delete data.event;
+
+      break;
+    }
+    // No default
+  }
+}
+
+/** 清理空的 dataSpecs / dataSpecsList */
+function removeDataSpecs(val: any) {
+  if (isEmpty(val.dataSpecs)) {
+    delete val.dataSpecs;
+  }
+  if (isEmpty(val.dataSpecsList)) {
+    delete val.dataSpecsList;
+  }
+}
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <Form
+      ref="formRef"
+      :label-col="{ span: 6 }"
+      :model="formData"
+      :wrapper-col="{ span: 18 }"
+      class="mx-4"
+    >
+      <Form.Item :rules="ThingModelFormRules.type" label="功能类型" name="type">
+        <Radio.Group v-model:value="formData.type">
+          <Radio.Button
+            v-for="dict in getDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE)"
+            :key="String(dict.value)"
+            :value="Number(dict.value)"
+          >
+            {{ dict.label }}
+          </Radio.Button>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item :rules="ThingModelFormRules.name" label="功能名称" name="name">
+        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
+      </Form.Item>
+      <Form.Item
+        :rules="ThingModelFormRules.identifier"
+        label="标识符"
+        name="identifier"
+      >
+        <Input
+          v-model:value="formData.identifier"
+          placeholder="请输入标识符"
+        />
+      </Form.Item>
+      <!-- 属性配置 -->
+      <ThingModelProperty
+        v-if="formData.type === IoTThingModelTypeEnum.PROPERTY"
+        v-model="formData.property"
+      />
+      <!-- 服务配置 -->
+      <ThingModelService
+        v-if="formData.type === IoTThingModelTypeEnum.SERVICE"
+        v-model="formData.service"
+      />
+      <!-- 事件配置 -->
+      <ThingModelEvent
+        v-if="formData.type === IoTThingModelTypeEnum.EVENT"
+        v-model="formData.event"
+      />
+      <Form.Item label="描述" name="description">
+        <Input.TextArea
+          v-model:value="formData.description"
+          :maxlength="200"
+          :rows="3"
+          placeholder="请输入物模型描述"
+        />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/input-output-param.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/input-output-param.vue
new file mode 100644
index 000000000..285729645
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/input-output-param.vue
@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IoTDataSpecsDataTypeEnum } from '@vben/constants';
+import { cloneDeep, isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Divider, Form, Input, message } from 'antdv-next';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+
+import ThingModelProperty from './property.vue';
+
+const props = defineProps<{
+  direction: string;
+  existingIdentifiers?: string[];
+  modelValue: any;
+}>();
+const emits = defineEmits(['update:modelValue']);
+const thingModelParams = useVModel(props, 'modelValue', emits) as Ref<any[]>;
+
+const paramFormRef = ref();
+const formData = ref<any>(buildEmptyFormData());
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    try {
+      await paramFormRef.value?.validate();
+    } catch {
+      return;
+    }
+    if (!thingModelParams.value) {
+      thingModelParams.value = [];
+    }
+    // 组装表单
+    const data = formData.value;
+    if (
+      data.identifier &&
+      props.existingIdentifiers?.includes(data.identifier)
+    ) {
+      message.warning('输入参数和输出参数标识符不能重复');
+      return;
+    }
+    const item = {
+      identifier: data.identifier,
+      name: data.name,
+      description: data.description,
+      dataType: data.property.dataType,
+      paraOrder: 0,
+      direction: props.direction,
+      dataSpecs:
+        !isEmpty(data.property.dataSpecs) &&
+        Object.keys(data.property.dataSpecs).length > 1
+          ? data.property.dataSpecs
+          : undefined,
+      dataSpecsList: isEmpty(data.property.dataSpecsList)
+        ? undefined
+        : data.property.dataSpecsList,
+    };
+    // 按 identifier 去重；存在则更新，否则追加
+    const existingIndex = thingModelParams.value.findIndex(
+      (spec) => spec.identifier === data.identifier,
+    );
+    if (existingIndex === -1) {
+      thingModelParams.value.push(item);
+    } else {
+      thingModelParams.value[existingIndex] = item;
+    }
+    // 关闭
+    await modalApi.close();
+  },
+  onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    formData.value = buildEmptyFormData();
+    paramFormRef.value?.clearValidate?.();
+    // 加载数据
+    const data = modalApi.getData<any>();
+    if (isEmpty(data)) {
+      return;
+    }
+    // 编辑回显时 cloneDeep，避免弹窗 v-model 改到原始对象（用户取消时不污染外层 thingModelParams）
+    formData.value = {
+      identifier: data.identifier ?? '',
+      name: data.name ?? '',
+      description: data.description ?? '',
+      property: {
+        dataType: data.dataType ?? IoTDataSpecsDataTypeEnum.INT,
+        dataSpecs: data.dataSpecs ? cloneDeep(data.dataSpecs) : {},
+        dataSpecsList: data.dataSpecsList ? cloneDeep(data.dataSpecsList) : [],
+      },
+    };
+  },
+});
+
+/** 构造空白参数表单 */
+function buildEmptyFormData() {
+  return {
+    identifier: '',
+    name: '',
+    description: '',
+    property: {
+      dataType: IoTDataSpecsDataTypeEnum.INT,
+      dataSpecs: { dataType: IoTDataSpecsDataTypeEnum.INT },
+      dataSpecsList: [],
+    },
+  };
+}
+
+/** 打开参数表单（新增或编辑） */
+function openParamForm(val: any) {
+  modalApi.setData(val).open();
+}
+
+/** 删除参数项 */
+function deleteParamItem(index: number) {
+  thingModelParams.value.splice(index, 1);
+}
+</script>
+
+<template>
+  <div
+    v-for="(item, index) in thingModelParams"
+    :key="index"
+    class="mb-2.5 flex w-full justify-between bg-gray-100 px-2.5 dark:bg-gray-800"
+  >
+    <span>参数名称：{{ item.name }}</span>
+    <div>
+      <Button type="link" @click="openParamForm(item)">编辑</Button>
+      <Divider type="vertical" />
+      <Button danger type="link" @click="deleteParamItem(index)">删除</Button>
+    </div>
+  </div>
+  <Button type="link" @click="openParamForm(null)">+ 新增参数</Button>
+
+  <!-- 参数表单 -->
+  <Modal class="w-2/5" title="参数配置">
+    <Form
+      ref="paramFormRef"
+      :label-col="{ span: 6 }"
+      :model="formData"
+      :wrapper-col="{ span: 18 }"
+      class="mx-4"
+    >
+      <Form.Item :rules="ThingModelFormRules.name" label="参数名称" name="name">
+        <Input v-model:value="formData.name" placeholder="请输入参数名称" />
+      </Form.Item>
+      <Form.Item
+        :rules="ThingModelFormRules.identifier"
+        label="标识符"
+        name="identifier"
+      >
+        <Input v-model:value="formData.identifier" placeholder="请输入标识符" />
+      </Form.Item>
+      <!-- 属性配置 -->
+      <ThingModelProperty v-model="formData.property" is-params />
+    </Form>
+  </Modal>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-property.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/property.vue
similarity index 51%
rename from apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-property.vue
rename to apps/web-antdv-next/src/views/iot/thingmodel/modules/property.vue
index 342cf0cc2..a2094c2f4 100644
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-property.vue
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/property.vue
@@ -2,7 +2,7 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import type { ThingModelProperty } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { computed, watch } from 'vue';
 
@@ -14,17 +14,16 @@ import {
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { Input, Radio, Select } from 'antdv-next';
+import { Form, Input, Radio, Select } from 'antdv-next';
+
+import { ThingModelFormRules, validateBoolName } from '#/api/iot/thingmodel';
 
 import {
   ThingModelArrayDataSpecs,
   ThingModelEnumDataSpecs,
   ThingModelNumberDataSpecs,
   ThingModelStructDataSpecs,
-} from './dataSpecs';
-
-/** IoT 物模型属性 */
-defineOptions({ name: 'ThingModelProperty' });
+} from './data-specs';
 
 const props = defineProps<{
   isParams?: boolean;
@@ -32,98 +31,100 @@ const props = defineProps<{
   modelValue: any;
 }>();
 const emits = defineEmits(['update:modelValue']);
+/** 嵌套在结构体里时，禁止再选数组 / 结构体（最多支持两层嵌套） */
+const NESTED_EXCLUDED_TYPES = new Set<string>([
+  IoTDataSpecsDataTypeEnum.ARRAY,
+  IoTDataSpecsDataTypeEnum.STRUCT,
+]);
+const STRUCT_CHILD_OPTIONS = getDataTypeOptions().filter(
+  (item) => !NESTED_EXCLUDED_TYPES.has(item.value),
+);
+/** 数值型数据类型集合 */
+const NUMERIC_TYPES = new Set<string>([
+  IoTDataSpecsDataTypeEnum.DOUBLE,
+  IoTDataSpecsDataTypeEnum.FLOAT,
+  IoTDataSpecsDataTypeEnum.INT,
+]);
+
 const property = useVModel(
   props,
   'modelValue',
   emits,
-) as Ref<ThingModelProperty>;
-const getDataTypeOptions2 = computed(() => {
-  if (!props.isStructDataSpecs) {
-    return getDataTypeOptions();
-  }
-  const excludedTypes = new Set([
-    IoTDataSpecsDataTypeEnum.ARRAY,
-    IoTDataSpecsDataTypeEnum.STRUCT,
-  ]);
-  return getDataTypeOptions().filter(
-    (item: any) => !excludedTypes.has(item.value),
-  );
-}); // 获得数据类型列表
+) as Ref<ThingModelApi.Property>;
 
-/** 属性值的数据类型切换时初始化相关数据 */
+const dataTypeOptions = computed(() =>
+  props.isStructDataSpecs ? STRUCT_CHILD_OPTIONS : getDataTypeOptions(),
+);
+
+/** 数据类型切换时，重置 dataSpecs / dataSpecsList 并按新类型初始化 */
 function handleChange(dataType: any) {
   property.value.dataSpecs = {};
   property.value.dataSpecsList = [];
-  // 不是列表型数据才设置 dataSpecs.dataType
-  ![
+  // 数值 / 文本 / 时间 / 数组型把 dataType 同步到 dataSpecs；布尔 / 枚举 / 结构走 dataSpecsList
+  const listLike = [
     IoTDataSpecsDataTypeEnum.BOOL,
     IoTDataSpecsDataTypeEnum.ENUM,
     IoTDataSpecsDataTypeEnum.STRUCT,
-  ].includes(dataType) && (property.value.dataSpecs.dataType = dataType);
-  switch (dataType) {
-    case IoTDataSpecsDataTypeEnum.BOOL: {
-      for (let i = 0; i < 2; i++) {
-        property.value.dataSpecsList.push({
-          dataType: IoTDataSpecsDataTypeEnum.BOOL,
-          name: '', // 布尔值的名称
-          value: i, // 布尔值
-        });
-      }
-      break;
-    }
-    case IoTDataSpecsDataTypeEnum.ENUM: {
-      property.value.dataSpecsList.push({
-        dataType: IoTDataSpecsDataTypeEnum.ENUM,
-        name: '', // 枚举项的名称
-        value: undefined, // 枚举值
-      });
-      break;
-    }
+  ];
+  if (!listLike.includes(dataType)) {
+    property.value.dataSpecs.dataType = dataType;
+  }
+  if (dataType === IoTDataSpecsDataTypeEnum.BOOL) {
+    for (let i = 0; i < 2; i++) {
+      property.value.dataSpecsList.push({
+        dataType: IoTDataSpecsDataTypeEnum.BOOL,
+        name: '', // 布尔描述
+        value: i, // 布尔值
+      });
+    }
+  } else if (dataType === IoTDataSpecsDataTypeEnum.ENUM) {
+    property.value.dataSpecsList.push({
+      dataType: IoTDataSpecsDataTypeEnum.ENUM,
+      name: '', // 枚举项描述
+      value: undefined, // 枚举值
+    });
   }
-  // useVModel 会自动同步数据到父组件，不需要手动 emit
 }
 
-/** 默认选中读写 */
-watch(
-  () => property.value.accessMode,
-  (val: string | undefined) => {
-    if (props.isStructDataSpecs || props.isParams) {
-      return;
-    }
-    if (isEmpty(val)) {
-      property.value.accessMode = IoTThingModelAccessModeEnum.READ_WRITE.value;
-    }
-  },
-  { immediate: true },
-);
+/** 顶层属性表单首次进入时，默认选中「读写」 */
+if (!props.isStructDataSpecs && !props.isParams) {
+  watch(
+    () => property.value.accessMode,
+    (val: string | undefined) => {
+      if (isEmpty(val)) {
+        property.value.accessMode =
+          IoTThingModelAccessModeEnum.READ_WRITE.value;
+      }
+    },
+    { immediate: true },
+  );
+}
 </script>
 
 <template>
-  <FormItem label="数据类型">
+  <Form.Item
+    :name="['property', 'dataType']"
+    :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]"
+    label="数据类型"
+  >
     <Select
       v-model:value="property.dataType"
       placeholder="请选择数据类型"
       @change="handleChange"
     >
       <!-- ARRAY 和 STRUCT 类型数据相互嵌套时，最多支持递归嵌套 2 层（父和子） -->
-      <SelectOption
-        v-for="option in getDataTypeOptions2"
+      <Select.Option
+        v-for="option in dataTypeOptions"
         :key="option.value"
         :value="option.value"
       >
         {{ `${option.value}(${option.label})` }}
-      </SelectOption>
+      </Select.Option>
     </Select>
-  </FormItem>
+  </Form.Item>
   <!-- 数值型配置 -->
   <ThingModelNumberDataSpecs
-    v-if="
-      [
-        IoTDataSpecsDataTypeEnum.INT,
-        IoTDataSpecsDataTypeEnum.DOUBLE,
-        IoTDataSpecsDataTypeEnum.FLOAT,
-      ].includes(property.dataType || '')
-    "
+    v-if="NUMERIC_TYPES.has(property.dataType || '')"
     v-model="property.dataSpecs"
   />
   <!-- 枚举型配置 -->
@@ -132,50 +133,58 @@ watch(
     v-model="property.dataSpecsList"
   />
   <!-- 布尔型配置 -->
-  <FormItem
+  <Form.Item
     v-if="property.dataType === IoTDataSpecsDataTypeEnum.BOOL"
     label="布尔值"
   >
-    <template v-for="item in property.dataSpecsList" :key="item.value">
-      <div class="w-1/1 mb-5px flex items-center justify-start">
+    <template v-for="(item, index) in property.dataSpecsList" :key="item.value">
+      <div class="mb-[5px] flex w-full items-center justify-start">
         <span>{{ item.value }}</span>
         <span class="mx-2">-</span>
-        <div class="flex-1">
+        <Form.Item
+          :name="['property', 'dataSpecsList', index, 'name']"
+          :rules="[
+            { required: true, message: '布尔描述不能为空', trigger: 'blur' },
+            { validator: validateBoolName, trigger: 'blur' },
+          ]"
+          class="mb-0 flex-1"
+        >
           <Input
             v-model:value="item.name"
             :placeholder="`如：${item.value === 0 ? '关' : '开'}`"
-            class="w-255px!"
+            class="!w-[255px]"
           />
-        </div>
+        </Form.Item>
       </div>
     </template>
-  </FormItem>
+  </Form.Item>
   <!-- 文本型配置 -->
-  <FormItem
+  <Form.Item
     v-if="property.dataType === IoTDataSpecsDataTypeEnum.TEXT"
     :name="['property', 'dataSpecs', 'length']"
+    :rules="ThingModelFormRules.length"
     label="数据长度"
   >
     <Input
       v-model:value="property.dataSpecs.length"
-      class="w-255px!"
+      class="!w-[255px]"
       placeholder="请输入文本字节长度"
     >
       <template #addonAfter>字节</template>
     </Input>
-  </FormItem>
+  </Form.Item>
   <!-- 时间型配置 -->
-  <FormItem
+  <Form.Item
     v-if="property.dataType === IoTDataSpecsDataTypeEnum.DATE"
     label="时间格式"
     name="date"
   >
     <Input
-      class="w-255px!"
+      class="!w-[255px]"
       disabled
       placeholder="String 类型的 UTC 时间戳（毫秒）"
     />
-  </FormItem>
+  </Form.Item>
   <!-- 数组型配置-->
   <ThingModelArrayDataSpecs
     v-if="property.dataType === IoTDataSpecsDataTypeEnum.ARRAY"
@@ -186,12 +195,13 @@ watch(
     v-if="property.dataType === IoTDataSpecsDataTypeEnum.STRUCT"
     v-model="property.dataSpecsList"
   />
-  <FormItem
+  <Form.Item
     v-if="!isStructDataSpecs && !isParams"
     :name="['property', 'accessMode']"
+    :rules="ThingModelFormRules.accessMode"
     label="读写类型"
   >
-    <RadioGroup v-model:value="property.accessMode">
+    <Radio.Group v-model:value="property.accessMode">
       <Radio
         v-for="accessMode in Object.values(IoTThingModelAccessModeEnum)"
         :key="accessMode.value"
@@ -199,8 +209,8 @@ watch(
       >
         {{ accessMode.label }}
       </Radio>
-    </RadioGroup>
-  </FormItem>
+    </Radio.Group>
+  </Form.Item>
 </template>
 
 <style lang="scss" scoped>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-service.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/service.vue
similarity index 59%
rename from apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-service.vue
rename to apps/web-antdv-next/src/views/iot/thingmodel/modules/service.vue
index a9ed916ee..51200d361 100644
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-service.vue
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/service.vue
@@ -11,14 +11,13 @@ import {
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { Radio } from 'antdv-next';
+import { Form, Radio } from 'antdv-next';
 
-import ThingModelInputOutputParam from './thing-model-input-output-param.vue';
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
 
-/** IoT 物模型服务 */
-defineOptions({ name: 'ThingModelService' });
+import ThingModelInputOutputParam from './input-output-param.vue';
 
-const props = defineProps<{ isStructDataSpecs?: boolean; modelValue: any }>();
+const props = defineProps<{ modelValue: any }>();
 const emits = defineEmits(['update:modelValue']);
 const service = useVModel(props, 'modelValue', emits) as Ref<any>;
 
@@ -30,15 +29,26 @@ watch(
     (service.value.callType = IoTThingModelServiceCallTypeEnum.ASYNC.value),
   { immediate: true },
 );
+
+/** 提取参数标识符列表，用于输入 / 输出参数跨表去重 */
+function getParamIdentifiers(params?: any[]) {
+  const identifiers: string[] = [];
+  for (const item of params || []) {
+    if (item.identifier) {
+      identifiers.push(item.identifier);
+    }
+  }
+  return identifiers;
+}
 </script>
 
 <template>
-  <FormItem
+  <Form.Item
     :name="['service', 'callType']"
-    :rules="[{ required: true, message: '请选择调用方式', trigger: 'change' }]"
+    :rules="ThingModelFormRules.callType"
     label="调用方式"
   >
-    <RadioGroup v-model:value="service.callType">
+    <Radio.Group v-model:value="service.callType">
       <Radio
         v-for="callType in Object.values(IoTThingModelServiceCallTypeEnum)"
         :key="callType.value"
@@ -46,20 +56,22 @@ watch(
       >
         {{ callType.label }}
       </Radio>
-    </RadioGroup>
-  </FormItem>
-  <FormItem label="输入参数">
+    </Radio.Group>
+  </Form.Item>
+  <Form.Item label="输入参数">
     <ThingModelInputOutputParam
       v-model="service.inputParams"
       :direction="IoTThingModelParamDirectionEnum.INPUT"
+      :existing-identifiers="getParamIdentifiers(service.outputParams)"
     />
-  </FormItem>
-  <FormItem label="输出参数">
+  </Form.Item>
+  <Form.Item label="输出参数">
     <ThingModelInputOutputParam
       v-model="service.outputParams"
       :direction="IoTThingModelParamDirectionEnum.OUTPUT"
+      :existing-identifiers="getParamIdentifiers(service.inputParams)"
     />
-  </FormItem>
+  </Form.Item>
 </template>
 
 <style lang="scss" scoped>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-form.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-form.vue
deleted file mode 100644
index 8113810c7..000000000
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-form.vue
+++ /dev/null
@@ -1,298 +0,0 @@
-<!-- 产品的物模型表单 -->
-<script lang="ts" setup>
-import type { Ref } from 'vue';
-
-// TODO @haohao：使用 form.vue；
-import type { IotProductApi } from '#/api/iot/product/product';
-import type { ThingModelData } from '#/api/iot/thingmodel';
-
-import { inject, ref } from 'vue';
-
-import {
-  DICT_TYPE,
-  IOT_PROVIDE_KEY,
-  IoTDataSpecsDataTypeEnum,
-  IoTThingModelTypeEnum,
-} from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { Form, Input, message, Modal } from 'antdv-next';
-
-import {
-  createThingModel,
-  getThingModel,
-  updateThingModel,
-} from '#/api/iot/thingmodel';
-
-import ThingModelEvent from './thing-model-event.vue';
-import ThingModelProperty from './thing-model-property.vue';
-import ThingModelService from './thing-model-service.vue';
-
-/** IoT 物模型数据表单 */
-defineOptions({ name: 'IoTThingModelForm' });
-
-/** 提交表单 */
-const emit = defineEmits(['success']);
-const product = inject<Ref<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息
-
-const dialogVisible = ref(false); // 弹窗的是否展示
-const dialogTitle = ref(''); // 弹窗的标题
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref(''); // 表单的类型：create - 新增；update - 修改
-const formData = ref<any>({
-  type: IoTThingModelTypeEnum.PROPERTY,
-  dataType: IoTDataSpecsDataTypeEnum.INT,
-  property: {
-    dataType: IoTDataSpecsDataTypeEnum.INT,
-    dataSpecs: {
-      dataType: IoTDataSpecsDataTypeEnum.INT,
-    },
-  },
-  service: {
-    inputParams: [],
-    outputParams: [],
-  },
-  event: {
-    outputParams: [],
-  },
-});
-
-const formRef = ref(); // 表单 Ref
-
-/** 打开弹窗 */
-// TODO @haohao：Modal 的写法。
-async function open(type: string, id?: number) {
-  dialogVisible.value = true;
-  // 设置标题：create -> 新增，update -> 编辑
-  dialogTitle.value =
-    type === 'create' ? $t('page.action.add') : $t('page.action.edit');
-  formType.value = type;
-  resetForm();
-  if (id) {
-    formLoading.value = true;
-    try {
-      const result = await getThingModel(id);
-      // 转换类型为数字
-      formData.value = {
-        ...result,
-        type: Number(result.type),
-      };
-      // 情况一：属性初始化
-      if (
-        !formData.value.property ||
-        Object.keys(formData.value.property).length === 0
-      ) {
-        formData.value.dataType = IoTDataSpecsDataTypeEnum.INT;
-        formData.value.property = {
-          dataType: IoTDataSpecsDataTypeEnum.INT,
-          dataSpecs: {
-            dataType: IoTDataSpecsDataTypeEnum.INT,
-          },
-        };
-      } else {
-        // 确保 dataSpecs 和 dataSpecsList 存在
-        if (!formData.value.property.dataSpecs) {
-          formData.value.property.dataSpecs = {};
-        }
-        if (!formData.value.property.dataSpecsList) {
-          formData.value.property.dataSpecsList = [];
-        }
-        // 如果 property.dataType 不存在，设置为默认值
-        if (!formData.value.property.dataType) {
-          formData.value.property.dataType = IoTDataSpecsDataTypeEnum.INT;
-        }
-      }
-      // 情况二：服务初始化
-      if (
-        !formData.value.service ||
-        Object.keys(formData.value.service).length === 0
-      ) {
-        formData.value.service = {
-          inputParams: [],
-          outputParams: [],
-        };
-      } else {
-        // 确保参数数组存在
-        if (!formData.value.service.inputParams) {
-          formData.value.service.inputParams = [];
-        }
-        if (!formData.value.service.outputParams) {
-          formData.value.service.outputParams = [];
-        }
-      }
-      // 情况三：事件初始化
-      if (
-        !formData.value.event ||
-        Object.keys(formData.value.event).length === 0
-      ) {
-        formData.value.event = {
-          outputParams: [],
-        };
-      } else {
-        // 确保参数数组存在
-        if (!formData.value.event.outputParams) {
-          formData.value.event.outputParams = [];
-        }
-      }
-    } finally {
-      formLoading.value = false;
-    }
-  }
-}
-defineExpose({ open, close: () => (dialogVisible.value = false) });
-
-async function submitForm() {
-  await formRef.value.validate();
-  formLoading.value = true;
-  try {
-    const data = cloneDeep(formData.value) as ThingModelData;
-    // 信息补全
-    data.productId = product!.value.id;
-    data.productKey = product!.value.productKey;
-    fillExtraAttributes(data);
-    await (formType.value === 'create'
-      ? createThingModel(data)
-      : updateThingModel(data));
-    message.success($t('ui.actionMessage.operationSuccess'));
-    // 关闭弹窗
-    dialogVisible.value = false;
-    emit('success');
-  } finally {
-    formLoading.value = false;
-  }
-}
-
-/** 填写额外的属性（处理不同类型的情况） */
-function fillExtraAttributes(data: any) {
-  // 属性
-  if (data.type === IoTThingModelTypeEnum.PROPERTY) {
-    removeDataSpecs(data.property);
-    data.dataType = data.property.dataType;
-    data.property.identifier = data.identifier;
-    data.property.name = data.name;
-    delete data.service;
-    delete data.event;
-  }
-  // 服务
-  if (data.type === IoTThingModelTypeEnum.SERVICE) {
-    removeDataSpecs(data.service);
-    data.dataType = data.service.dataType;
-    data.service.identifier = data.identifier;
-    data.service.name = data.name;
-    // 保留输入输出参数，但如果为空数组则删除
-    if (!data.service.inputParams || data.service.inputParams.length === 0) {
-      delete data.service.inputParams;
-    }
-    if (!data.service.outputParams || data.service.outputParams.length === 0) {
-      delete data.service.outputParams;
-    }
-    delete data.property;
-    delete data.event;
-  }
-  // 事件
-  if (data.type === IoTThingModelTypeEnum.EVENT) {
-    removeDataSpecs(data.event);
-    data.dataType = data.event.dataType;
-    data.event.identifier = data.identifier;
-    data.event.name = data.name;
-    // 保留输出参数，但如果为空数组则删除
-    if (!data.event.outputParams || data.event.outputParams.length === 0) {
-      delete data.event.outputParams;
-    }
-    delete data.property;
-    delete data.service;
-  }
-}
-
-/** 处理 dataSpecs 为空的情况 */
-function removeDataSpecs(val: any) {
-  if (!val.dataSpecs || Object.keys(val.dataSpecs).length === 0) {
-    delete val.dataSpecs;
-  }
-  if (!val.dataSpecsList || val.dataSpecsList.length === 0) {
-    delete val.dataSpecsList;
-  }
-}
-
-/** 重置表单 */
-function resetForm() {
-  formData.value = {
-    type: IoTThingModelTypeEnum.PROPERTY,
-    dataType: IoTDataSpecsDataTypeEnum.INT,
-    property: {
-      dataType: IoTDataSpecsDataTypeEnum.INT,
-      dataSpecs: {
-        dataType: IoTDataSpecsDataTypeEnum.INT,
-      },
-    },
-    service: {
-      inputParams: [],
-      outputParams: [],
-    },
-    event: {
-      outputParams: [],
-    },
-  };
-  formRef.value?.resetFields();
-}
-</script>
-
-<template>
-  <Modal
-    v-model:open="dialogVisible"
-    :title="dialogTitle"
-    :confirm-loading="formLoading"
-    @ok="submitForm"
-  >
-    <!-- TODO @haohao：这个可以改造成 data.ts schema 形式么？可能是有一定成本，后续迁移 ele 版本，会容易很多。 -->
-    <Form
-      ref="formRef"
-      :model="formData"
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
-    >
-      <FormItem label="功能类型" name="type">
-        <RadioGroup v-model:value="formData.type">
-          <RadioButton
-            v-for="dict in getDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE)"
-            :key="String(dict.value)"
-            :value="Number(dict.value)"
-          >
-            {{ dict.label }}
-          </RadioButton>
-        </RadioGroup>
-      </FormItem>
-      <FormItem label="功能名称" name="name">
-        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
-      </FormItem>
-      <FormItem label="标识符" name="identifier">
-        <Input v-model:value="formData.identifier" placeholder="请输入标识符" />
-      </FormItem>
-      <!-- 属性配置 -->
-      <ThingModelProperty
-        v-if="formData.type === IoTThingModelTypeEnum.PROPERTY"
-        v-model="formData.property"
-      />
-      <!-- 服务配置 -->
-      <ThingModelService
-        v-if="formData.type === IoTThingModelTypeEnum.SERVICE"
-        v-model="formData.service"
-      />
-      <!-- 事件配置 -->
-      <ThingModelEvent
-        v-if="formData.type === IoTThingModelTypeEnum.EVENT"
-        v-model="formData.event"
-      />
-      <FormItem label="描述" name="desc">
-        <Input.TextArea
-          v-model:value="formData.desc"
-          :maxlength="200"
-          :rows="3"
-          placeholder="请输入属性描述"
-        />
-      </FormItem>
-    </Form>
-  </Modal>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-input-output-param.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-input-output-param.vue
deleted file mode 100644
index 4ea508bc5..000000000
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-input-output-param.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<!-- 产品的物模型表单（event、service 项里的参数） -->
-<script lang="ts" setup>
-import type { Ref } from 'vue';
-
-import { ref, unref } from 'vue';
-
-import { IoTDataSpecsDataTypeEnum } from '@vben/constants';
-import { isEmpty } from '@vben/utils';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Divider, Form, Input, Modal } from 'antdv-next';
-
-import ThingModelProperty from './thing-model-property.vue';
-
-/** 输入输出参数配置组件 */
-defineOptions({ name: 'ThingModelInputOutputParam' });
-
-const props = defineProps<{ direction: string; modelValue: any }>();
-const emits = defineEmits(['update:modelValue']);
-const thingModelParams = useVModel(props, 'modelValue', emits) as Ref<any[]>;
-const dialogVisible = ref(false); // 弹窗的是否展示
-const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const paramFormRef = ref(); // 表单 ref
-const formData = ref<any>({
-  dataType: IoTDataSpecsDataTypeEnum.INT,
-  property: {
-    dataType: IoTDataSpecsDataTypeEnum.INT,
-    dataSpecs: {
-      dataType: IoTDataSpecsDataTypeEnum.INT,
-    },
-    dataSpecsList: [],
-  },
-});
-
-/** 打开 param 表单 */
-function openParamForm(val: any) {
-  dialogVisible.value = true;
-  resetForm();
-  if (isEmpty(val)) {
-    return;
-  }
-  // 编辑时回显数据
-  const valData = val as any;
-  formData.value = {
-    identifier: valData?.identifier || '',
-    name: valData?.name || '',
-    description: valData?.description || '',
-    property: {
-      dataType: valData?.dataType || IoTDataSpecsDataTypeEnum.INT,
-      dataSpecs: valData?.dataSpecs ?? {},
-      dataSpecsList: valData?.dataSpecsList ?? [],
-    },
-  };
-
-  // 确保 property.dataType 有值
-  if (!formData.value.property.dataType) {
-    formData.value.property.dataType = IoTDataSpecsDataTypeEnum.INT;
-  }
-}
-
-/** 删除 param 项 */
-function deleteParamItem(index: number) {
-  thingModelParams.value.splice(index, 1);
-}
-
-/** 添加参数 */
-async function submitForm() {
-  // 初始化参数列表
-  if (isEmpty(thingModelParams.value)) {
-    thingModelParams.value = [];
-  }
-  // 校验参数
-  await paramFormRef.value.validate();
-  try {
-    // 构建数据对象
-    const data = unref(formData);
-    const item = {
-      identifier: data.identifier,
-      name: data.name,
-      description: data.description,
-      dataType: data.property.dataType,
-      paraOrder: 0, // TODO @puhui999: 先写死默认看看后续
-      direction: props.direction,
-      dataSpecs:
-        !!data.property.dataSpecs &&
-        Object.keys(data.property.dataSpecs).length > 1
-          ? data.property.dataSpecs
-          : undefined,
-      dataSpecsList: isEmpty(data.property.dataSpecsList)
-        ? undefined
-        : data.property.dataSpecsList,
-    };
-
-    // 新增或修改同 identifier 的参数
-    const existingIndex = thingModelParams.value.findIndex(
-      (spec) => spec.identifier === data.identifier,
-    );
-    if (existingIndex === -1) {
-      thingModelParams.value.push(item);
-    } else {
-      thingModelParams.value[existingIndex] = item;
-    }
-  } finally {
-    dialogVisible.value = false;
-  }
-}
-
-/** 重置表单 */
-function resetForm() {
-  formData.value = {
-    dataType: IoTDataSpecsDataTypeEnum.INT,
-    property: {
-      dataType: IoTDataSpecsDataTypeEnum.INT,
-      dataSpecs: {
-        dataType: IoTDataSpecsDataTypeEnum.INT,
-      },
-      dataSpecsList: [],
-    },
-  };
-  paramFormRef.value?.resetFields();
-}
-</script>
-
-<template>
-  <div
-    v-for="(item, index) in thingModelParams"
-    :key="index"
-    class="w-1/1 px-10px mb-10px flex justify-between bg-gray-100"
-  >
-    <span>参数名称：{{ item.name }}</span>
-    <div class="btn">
-      <Button type="link" @click="openParamForm(item)">编辑</Button>
-      <Divider orientation="vertical" />
-      <Button type="link" danger @click="deleteParamItem(index)">删除</Button>
-    </div>
-  </div>
-  <Button type="link" @click="openParamForm(null)">+新增参数</Button>
-
-  <!-- param 表单 -->
-  <Modal
-    v-model:open="dialogVisible"
-    title="新增参数"
-    :confirm-loading="formLoading"
-    @ok="submitForm"
-  >
-    <Form
-      ref="paramFormRef"
-      :model="formData"
-      :label-col="{ span: 6 }"
-      :wrapper-col="{ span: 18 }"
-    >
-      <FormItem label="参数名称" name="name">
-        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
-      </FormItem>
-      <FormItem label="标识符" name="identifier">
-        <Input v-model:value="formData.identifier" placeholder="请输入标识符" />
-      </FormItem>
-      <!-- 属性配置 -->
-      <ThingModelProperty v-model="formData.property" is-params />
-    </Form>
-  </Modal>
-</template>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-tsl.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-tsl.vue
deleted file mode 100644
index 72018cecd..000000000
--- a/apps/web-antdv-next/src/views/iot/thingmodel/modules/thing-model-tsl.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import type { Ref } from 'vue';
-
-import type { IotProductApi } from '#/api/iot/product/product';
-
-import { computed, inject, ref, watch } from 'vue';
-
-import { IOT_PROVIDE_KEY } from '@vben/constants';
-
-import { Modal, TextArea } from 'antdv-next';
-
-import { getThingModelTSL } from '#/api/iot/thingmodel';
-
-defineOptions({ name: 'ThingModelTsl' });
-
-const dialogVisible = ref(false); // 弹窗的是否展示
-const dialogTitle = ref('物模型 TSL'); // 弹窗的标题
-const product = inject<Ref<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息
-const viewMode = ref('view'); // 查看模式：view-代码视图，editor-编辑器视图
-
-/** 打开弹窗 */
-async function open() {
-  dialogVisible.value = true;
-  await getTsl();
-}
-defineExpose({ open });
-
-/** 获取 TSL */
-const thingModelTSL = ref<any>({});
-const tslString = ref(''); // 用于编辑器的字符串格式
-
-async function getTsl() {
-  try {
-    thingModelTSL.value = await getThingModelTSL(product?.value?.id || 0);
-    // 将对象转换为格式化的 JSON 字符串
-    tslString.value = JSON.stringify(thingModelTSL.value, null, 2);
-  } catch (error) {
-    console.error('获取 TSL 失败:', error);
-    thingModelTSL.value = {};
-    tslString.value = '{}';
-  }
-}
-
-/** 格式化的 TSL 用于只读展示 */
-const formattedTSL = computed(() => {
-  try {
-    if (typeof thingModelTSL.value === 'string') {
-      return JSON.stringify(JSON.parse(thingModelTSL.value), null, 2);
-    }
-    return JSON.stringify(thingModelTSL.value, null, 2);
-  } catch {
-    return JSON.stringify(thingModelTSL.value, null, 2);
-  }
-});
-
-/** 监听编辑器内容变化，实时更新数据 */
-watch(tslString, (newValue) => {
-  try {
-    thingModelTSL.value = JSON.parse(newValue);
-  } catch {
-    // JSON 解析失败时保持原值
-  }
-});
-</script>
-
-<template>
-  <Modal
-    v-model:open="dialogVisible"
-    :title="dialogTitle"
-    :footer="null"
-    width="800px"
-  >
-    <div class="mb-4">
-      <RadioGroup v-model:value="viewMode" size="small">
-        <RadioButton value="view">代码视图</RadioButton>
-        <RadioButton value="editor">编辑器视图</RadioButton>
-      </RadioGroup>
-    </div>
-    <!-- 代码视图 - 只读展示 -->
-    <div v-if="viewMode === 'view'" class="json-viewer-container">
-      <pre class="json-code"><code>{{ formattedTSL }}</code></pre>
-    </div>
-    <!-- 编辑器视图 - 可编辑 -->
-    <TextArea
-      v-else
-      v-model:value="tslString"
-      :rows="20"
-      placeholder="请输入 JSON 格式的物模型 TSL"
-      class="json-editor"
-    />
-  </Modal>
-</template>
-
-<style scoped>
-.json-viewer-container {
-  max-height: 600px;
-  padding: 12px;
-  overflow-y: auto;
-  background-color: #f5f5f5;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.json-code {
-  margin: 0;
-  font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.5;
-  color: #333;
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.json-editor {
-  font-family: Monaco, Menlo, 'Ubuntu Mono', Consolas, monospace;
-  font-size: 13px;
-}
-</style>
diff --git a/apps/web-antdv-next/src/views/iot/thingmodel/modules/tsl.vue b/apps/web-antdv-next/src/views/iot/thingmodel/modules/tsl.vue
new file mode 100644
index 000000000..c10a7ed91
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/thingmodel/modules/tsl.vue
@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { computed, inject, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IOT_PROVIDE_KEY } from '@vben/constants';
+
+import { Radio, TextArea } from 'antdv-next';
+
+import { getThingModelTSLByProductId } from '#/api/iot/thingmodel';
+
+const product = inject<Ref<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT);
+
+const viewMode = ref<'editor' | 'view'>('view');
+const thingModelTSL = ref<any>({});
+const tslString = ref('');
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      // 加载数据
+      thingModelTSL.value = await getThingModelTSLByProductId(
+        product?.value?.id || 0,
+      );
+      // 设置到 values
+      tslString.value = JSON.stringify(thingModelTSL.value, null, 2);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 只读视图下，格式化后的 TSL 字符串 */
+const formattedTSL = computed(() =>
+  JSON.stringify(thingModelTSL.value, null, 2),
+);
+
+/** 编辑器内容变化时，同步到数据对象；编辑过程中 JSON 可能是中间态，解析失败保留原值 */
+watch(tslString, (newValue) => {
+  try {
+    thingModelTSL.value = JSON.parse(newValue);
+  } catch {
+    // 中间态忽略
+  }
+});
+</script>
+
+<template>
+  <Modal :footer="false" class="w-3/5" title="物模型 TSL">
+    <div class="mx-4">
+      <div class="mb-4">
+        <Radio.Group v-model:value="viewMode" size="small">
+          <Radio.Button value="view">代码视图</Radio.Button>
+          <Radio.Button value="editor">编辑器视图</Radio.Button>
+        </Radio.Group>
+      </div>
+      <!-- 代码视图：只读展示（pre / code 必须紧贴，避免显示出空白） -->
+      <div
+        v-if="viewMode === 'view'"
+        class="max-h-[600px] overflow-y-auto rounded border border-gray-200 bg-gray-50 p-3 dark:border-gray-700 dark:bg-gray-800"
+      >
+        <pre
+          class="m-0 whitespace-pre-wrap break-words font-mono text-[13px] leading-normal"
+        ><code>{{ formattedTSL }}</code></pre>
+      </div>
+      <!-- 编辑器视图：可编辑 -->
+      <TextArea
+        v-else
+        v-model:value="tslString"
+        :rows="20"
+        class="font-mono text-[13px]"
+        placeholder="请输入 JSON 格式的物模型 TSL"
+      />
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antdv-next/src/views/iot/utils/scene-rule.ts b/apps/web-antdv-next/src/views/iot/utils/scene-rule.ts
new file mode 100644
index 000000000..9b038806f
--- /dev/null
+++ b/apps/web-antdv-next/src/views/iot/utils/scene-rule.ts
@@ -0,0 +1,401 @@
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import {
+  IotRuleSceneActionTypeEnum,
+  IotRuleSceneTriggerConditionTypeEnum,
+  IotRuleSceneTriggerTimeOperatorEnum,
+  IotRuleSceneTriggerTypeEnum,
+  isDeviceTrigger,
+} from '@vben/constants';
+import { CronUtils, isEmptyVal, isObject } from '@vben/utils';
+
+/**
+ * 判断普通 ID 选择值是否缺失。
+ *
+ * 产品、告警配置等普通业务 ID 应为正数；`0` 不代表有效业务数据。
+ *
+ * @param value 普通业务 ID
+ * @returns 是否缺失
+ */
+function isRequiredIdMissing(value: unknown): boolean {
+  return !value;
+}
+
+/**
+ * 判断设备 ID 选择值是否缺失。
+ *
+ * 场景联动的设备选择器中，`0` 表示「全部设备」，是合法值；因此这里只能把
+ * `undefined`、`null`、空字符串视为未选择，不能使用普通 falsy 判断。
+ *
+ * @param value 设备 ID
+ * @returns 是否缺失
+ */
+function isDeviceIdMissing(value: unknown): boolean {
+  return isEmptyVal(value);
+}
+
+/**
+ * 判断执行器参数是否为空。
+ *
+ * 参数配置当前以 JSON 字符串为主，同时兼容历史对象值：
+ * - 空字符串、空白字符串视为空；
+ * - 空对象 `{}` 视为空；
+ * - 非空 JSON 对象视为已配置；
+ * - 非法 JSON 不在这里判空，交给 JSON 格式校验返回更准确的错误。
+ *
+ * @param params 执行器参数
+ * @returns 是否为空
+ */
+export function isActionParamsEmpty(params?: unknown): boolean {
+  if (isEmptyVal(params)) {
+    return true;
+  }
+
+  if (typeof params === 'string') {
+    if (!params.trim()) {
+      return true;
+    }
+    try {
+      const parsed = JSON.parse(params);
+      if (isObject(parsed) && !Array.isArray(parsed)) {
+        return Object.keys(parsed).length === 0;
+      }
+    } catch {
+      return false;
+    }
+    return false;
+  }
+
+  if (isObject(params) && !Array.isArray(params)) {
+    return Object.keys(params).length === 0;
+  }
+
+  return false;
+}
+
+/**
+ * 判断执行器参数是否为合法 JSON。
+ *
+ * 参数编辑组件正常会保存 JSON 字符串；编辑旧数据时可能仍然是对象，对象可直接视为合法。
+ *
+ * @param params 执行器参数
+ * @returns 是否合法
+ */
+function isActionParamsJsonValid(params?: unknown): boolean {
+  if (isObject(params)) {
+    return true;
+  }
+  try {
+    JSON.parse(String(params));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * 校验单个附加子条件。
+ *
+ * 该方法用于提交前兜底校验，错误提示会带上 path，方便定位到第几个触发器、
+ * 第几个条件组和第几个条件。
+ *
+ * @param condition 子条件配置
+ * @param path 错误提示前缀
+ * @returns 错误信息，通过则返回 null
+ */
+export function validateTriggerCondition(
+  condition: RuleSceneApi.TriggerCondition,
+  path: string,
+): null | string {
+  if (!condition.type) {
+    return `${path}：条件类型不能为空`;
+  }
+
+  const isDeviceStatus =
+    condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS;
+  const isDeviceProperty =
+    condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY;
+
+  // 设备状态和设备属性都必须先选择产品、设备；deviceId = 0 表示全部设备。
+  if (isDeviceStatus || isDeviceProperty) {
+    if (isRequiredIdMissing(condition.productId)) {
+      return `${path}：产品不能为空`;
+    }
+    if (isDeviceIdMissing(condition.deviceId)) {
+      return `${path}：设备不能为空`;
+    }
+  }
+
+  // 设备状态只校验操作符和状态枚举值。
+  if (isDeviceStatus) {
+    if (!condition.operator) {
+      return `${path}：操作符不能为空`;
+    }
+    if (isEmptyVal(condition.param)) {
+      return `${path}：设备状态不能为空`;
+    }
+    return null;
+  }
+
+  // 设备属性需要校验物模型标识符、操作符和比较值。
+  if (isDeviceProperty) {
+    if (!condition.identifier) {
+      return `${path}：监控项不能为空`;
+    }
+    if (!condition.operator) {
+      return `${path}：操作符不能为空`;
+    }
+    if (isEmptyVal(condition.param)) {
+      return `${path}：比较值不能为空`;
+    }
+    return null;
+  }
+
+  // 当前时间按操作符动态判断 param 是否需要填写。
+  if (condition.type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME) {
+    if (!condition.operator) {
+      return `${path}：时间条件不能为空`;
+    }
+
+    if (
+      condition.operator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value
+    ) {
+      return null;
+    }
+
+    if (isEmptyVal(condition.param)) {
+      return `${path}：时间值不能为空`;
+    }
+
+    if (
+      condition.operator ===
+      IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value
+    ) {
+      const parts = String(condition.param).split(',');
+      if (!parts[0]?.trim() || !parts[1]?.trim()) {
+        return `${path}：开始和结束时间不能为空`;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 校验触发器的附加条件组。
+ *
+ * 条件组结构是二维数组：外层是 OR 关系的条件组，内层是 AND 关系的条件列表。
+ * 这里逐组、逐条件返回第一条错误，避免一次性弹出过多提示。
+ *
+ * @param groups 附加条件组
+ * @param triggerIndex 触发器在列表中的下标，用于生成可定位的错误提示
+ * @returns 错误信息，通过则返回 null
+ */
+export function validateTriggerConditionGroups(
+  groups: RuleSceneApi.TriggerCondition[][] | undefined,
+  triggerIndex: number,
+): null | string {
+  if (!groups?.length) {
+    return null;
+  }
+
+  for (const [groupIndex, group] of groups.entries()) {
+    // 空条件组没有实际过滤条件，提交后语义不明确，需要拦截。
+    if (!Array.isArray(group) || group.length === 0) {
+      return `触发器 ${triggerIndex + 1}：条件组 ${groupIndex + 1} 不能为空`;
+    }
+
+    for (const [conditionIndex, condition] of group.entries()) {
+      const error = validateTriggerCondition(
+        condition,
+        `触发器 ${triggerIndex + 1} 条件组 ${groupIndex + 1} 条件 ${
+          conditionIndex + 1
+        }`,
+      );
+      if (error) {
+        return error;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 校验单个触发器配置。
+ *
+ * 该方法用于场景联动表单提交前兜底校验，避免触发器配置没有独立表单项 prop 时漏掉必填项。
+ * 校验逻辑需要和触发器主条件 UI 保持一致，同时继续校验附加条件组。
+ *
+ * @param trigger 触发器配置
+ * @param index 触发器在列表中的下标，用于生成可定位的错误提示
+ * @returns 错误信息，通过则返回 null
+ */
+export function validateTriggerItem(
+  trigger: RuleSceneApi.Trigger,
+  index: number,
+): null | string {
+  const prefix = `触发器 ${index + 1}`;
+
+  if (!trigger.type) {
+    return `${prefix}：触发器类型不能为空`;
+  }
+
+  // 设备类触发器都有产品、设备两个基础字段；deviceId = 0 表示全部设备。
+  if (isDeviceTrigger(trigger.type)) {
+    if (isRequiredIdMissing(trigger.productId)) {
+      return `${prefix}：产品不能为空`;
+    }
+    if (isDeviceIdMissing(trigger.deviceId)) {
+      return `${prefix}：设备不能为空`;
+    }
+
+    // 设备状态变化不依赖物模型标识符，只校验操作符和状态值。
+    if (trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE) {
+      if (!trigger.operator) {
+        return `${prefix}：操作符不能为空`;
+      }
+      if (isEmptyVal(trigger.value)) {
+        return `${prefix}：设备状态不能为空`;
+      }
+    } else {
+      if (!trigger.identifier) {
+        return `${prefix}：监控项不能为空`;
+      }
+
+      // 事件上报和服务调用只监听是否发生，不需要额外的操作符和比较值。
+      const isEventOrService =
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE;
+      if (!isEventOrService) {
+        if (!trigger.operator) {
+          return `${prefix}：操作符不能为空`;
+        }
+        if (isEmptyVal(trigger.value)) {
+          return `${prefix}：参数值不能为空`;
+        }
+      }
+    }
+  }
+
+  // 定时触发器需要 CRON 表达式，并继续校验 CRON 格式。
+  if (trigger.type === IotRuleSceneTriggerTypeEnum.TIMER) {
+    if (!trigger.cronExpression) {
+      return `${prefix}：CRON 表达式不能为空`;
+    }
+    if (!CronUtils.validate(trigger.cronExpression)) {
+      return `${prefix}：CRON 表达式格式不正确`;
+    }
+  }
+
+  return validateTriggerConditionGroups(trigger.conditionGroups, index);
+}
+
+/**
+ * 校验触发器列表。
+ *
+ * 场景联动至少需要一个触发器；列表内逐条返回第一条错误，避免一次提交出现多条提示。
+ *
+ * @param triggers 触发器列表
+ * @returns 错误信息，通过则返回 null
+ */
+export function validateSceneRuleTriggers(
+  triggers?: RuleSceneApi.Trigger[],
+): null | string {
+  if (!triggers?.length) {
+    return '至少需要一个触发器';
+  }
+
+  for (const [index, trigger] of triggers.entries()) {
+    const error = validateTriggerItem(trigger, index);
+    if (error) {
+      return error;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 校验单个执行器配置。
+ *
+ * 该方法用于场景联动表单提交前兜底校验，避免执行器配置没有独立表单项 prop 时漏掉必填项。
+ * 校验逻辑需要和执行器 UI 保持一致。
+ *
+ * @param action 执行器配置
+ * @param index 执行器在列表中的下标，用于生成可定位的错误提示
+ * @returns 错误信息，通过则返回 null
+ */
+export function validateActionItem(
+  action: RuleSceneApi.Action,
+  index: number,
+): null | string {
+  const prefix = `执行器 ${index + 1}`;
+
+  if (!action.type) {
+    return `${prefix}：执行器类型不能为空`;
+  }
+
+  // 设备属性设置和设备服务调用都需要指定设备，并填写物模型参数。
+  if (
+    action.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET ||
+    action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
+  ) {
+    if (isRequiredIdMissing(action.productId)) {
+      return `${prefix}：产品不能为空`;
+    }
+    if (isDeviceIdMissing(action.deviceId)) {
+      return `${prefix}：设备不能为空`;
+    }
+    if (
+      action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE &&
+      !action.identifier
+    ) {
+      return `${prefix}：服务不能为空`;
+    }
+
+    if (isActionParamsEmpty(action.params)) {
+      return `${prefix}：参数配置不能为空`;
+    }
+    if (!isActionParamsJsonValid(action.params)) {
+      return `${prefix}：参数格式须为合法 JSON`;
+    }
+
+    return null;
+  }
+
+  // 告警恢复执行器需要绑定具体告警配置；触发告警不需要预选告警配置。
+  if (
+    action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER &&
+    !action.alertConfigId
+  ) {
+    return `${prefix}：告警配置不能为空`;
+  }
+
+  return null;
+}
+
+/**
+ * 校验执行器列表。
+ *
+ * 场景联动至少需要一个执行器；列表内逐条返回第一条错误，避免一次提交出现多条提示。
+ *
+ * @param actions 执行器列表
+ * @returns 错误信息，通过则返回 null
+ */
+export function validateSceneRuleActions(
+  actions?: RuleSceneApi.Action[],
+): null | string {
+  if (!actions?.length) {
+    return '至少需要一个执行器';
+  }
+
+  for (const [index, action] of actions.entries()) {
+    const error = validateActionItem(action, index);
+    if (error) {
+      return error;
+    }
+  }
+
+  return null;
+}
diff --git a/apps/web-antdv-next/src/views/system/mail/template/components/index.ts b/apps/web-antdv-next/src/views/system/mail/template/components/index.ts
new file mode 100644
index 000000000..4acfb35e7
--- /dev/null
+++ b/apps/web-antdv-next/src/views/system/mail/template/components/index.ts
@@ -0,0 +1 @@
+export { default as MailTemplateSelect } from './select.vue';
diff --git a/apps/web-antdv-next/src/views/system/mail/template/components/select.vue b/apps/web-antdv-next/src/views/system/mail/template/components/select.vue
new file mode 100644
index 000000000..5726714ae
--- /dev/null
+++ b/apps/web-antdv-next/src/views/system/mail/template/components/select.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { SelectValue } from 'antdv-next';
+
+import type { SystemMailTemplateApi } from '#/api/system/mail/template';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { Select } from 'antdv-next';
+
+import { getSimpleMailTemplateList } from '#/api/system/mail/template';
+
+defineOptions({ name: 'MailTemplateSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: string;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择邮件模板',
+  },
+);
+
+const emit = defineEmits<{
+  change: [template: SystemMailTemplateApi.MailTemplateSimple | undefined];
+  'update:modelValue': [value: string | undefined];
+}>();
+
+const loading = ref(false);
+const templateList = ref<SystemMailTemplateApi.MailTemplateSimple[]>([]);
+const options = computed(() =>
+  templateList.value.map((template) => ({
+    label: `${template.name}（${template.code}）`,
+    value: template.code,
+  })),
+);
+
+/** 选中变化 */
+function handleChange(value: SelectValue) {
+  const templateCode = typeof value === 'string' ? value : undefined;
+  emit('update:modelValue', templateCode);
+  emit(
+    'change',
+    templateList.value.find((template) => template.code === templateCode),
+  );
+}
+
+/** 查询邮件模板精简列表 */
+async function getList() {
+  try {
+    loading.value = true;
+    templateList.value = await getSimpleMailTemplateList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Select
+    v-bind="$attrs"
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    :loading="loading"
+    :options="options"
+    :placeholder="placeholder"
+    :value="props.modelValue"
+    class="w-full"
+    option-filter-prop="label"
+    show-search
+    @change="handleChange"
+  />
+</template>
diff --git a/apps/web-antdv-next/src/views/system/notify/template/components/index.ts b/apps/web-antdv-next/src/views/system/notify/template/components/index.ts
new file mode 100644
index 000000000..42715dfa6
--- /dev/null
+++ b/apps/web-antdv-next/src/views/system/notify/template/components/index.ts
@@ -0,0 +1 @@
+export { default as NotifyTemplateSelect } from './select.vue';
diff --git a/apps/web-antdv-next/src/views/system/notify/template/components/select.vue b/apps/web-antdv-next/src/views/system/notify/template/components/select.vue
new file mode 100644
index 000000000..ee0f70841
--- /dev/null
+++ b/apps/web-antdv-next/src/views/system/notify/template/components/select.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { SelectValue } from 'antdv-next';
+
+import type { SystemNotifyTemplateApi } from '#/api/system/notify/template';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { Select } from 'antdv-next';
+
+import { getSimpleNotifyTemplateList } from '#/api/system/notify/template';
+
+defineOptions({ name: 'NotifyTemplateSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: string;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择站内信模板',
+  },
+);
+
+const emit = defineEmits<{
+  change: [template: SystemNotifyTemplateApi.NotifyTemplateSimple | undefined];
+  'update:modelValue': [value: string | undefined];
+}>();
+
+const loading = ref(false);
+const templateList = ref<SystemNotifyTemplateApi.NotifyTemplateSimple[]>([]);
+const options = computed(() =>
+  templateList.value.map((template) => ({
+    label: `${template.name}（${template.code}）`,
+    value: template.code,
+  })),
+);
+
+/** 选中变化 */
+function handleChange(value: SelectValue) {
+  const templateCode = typeof value === 'string' ? value : undefined;
+  emit('update:modelValue', templateCode);
+  emit(
+    'change',
+    templateList.value.find((template) => template.code === templateCode),
+  );
+}
+
+/** 查询站内信模板精简列表 */
+async function getList() {
+  try {
+    loading.value = true;
+    templateList.value = await getSimpleNotifyTemplateList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Select
+    v-bind="$attrs"
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    :loading="loading"
+    :options="options"
+    :placeholder="placeholder"
+    :value="props.modelValue"
+    class="w-full"
+    option-filter-prop="label"
+    show-search
+    @change="handleChange"
+  />
+</template>
diff --git a/apps/web-antdv-next/src/views/system/sms/template/components/index.ts b/apps/web-antdv-next/src/views/system/sms/template/components/index.ts
new file mode 100644
index 000000000..0b1f9ad98
--- /dev/null
+++ b/apps/web-antdv-next/src/views/system/sms/template/components/index.ts
@@ -0,0 +1 @@
+export { default as SmsTemplateSelect } from './select.vue';
diff --git a/apps/web-antdv-next/src/views/system/sms/template/components/select.vue b/apps/web-antdv-next/src/views/system/sms/template/components/select.vue
new file mode 100644
index 000000000..98ccac44d
--- /dev/null
+++ b/apps/web-antdv-next/src/views/system/sms/template/components/select.vue
@@ -0,0 +1,82 @@
+<script lang="ts" setup>
+import type { SelectValue } from 'antdv-next';
+
+import type { SystemSmsTemplateApi } from '#/api/system/sms/template';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { Select } from 'antdv-next';
+
+import { getSimpleSmsTemplateList } from '#/api/system/sms/template';
+
+defineOptions({ name: 'SmsTemplateSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: string;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择短信模板',
+  },
+);
+
+const emit = defineEmits<{
+  change: [template: SystemSmsTemplateApi.SmsTemplateSimple | undefined];
+  'update:modelValue': [value: string | undefined];
+}>();
+
+const loading = ref(false);
+const templateList = ref<SystemSmsTemplateApi.SmsTemplateSimple[]>([]);
+const options = computed(() =>
+  templateList.value.map((template) => ({
+    label: `${template.name}（${template.code}）`,
+    value: template.code,
+  })),
+);
+
+/** 选中变化 */
+function handleChange(value: SelectValue) {
+  const templateCode = typeof value === 'string' ? value : undefined;
+  emit('update:modelValue', templateCode);
+  emit(
+    'change',
+    templateList.value.find((template) => template.code === templateCode),
+  );
+}
+
+/** 查询短信模板精简列表 */
+async function getList() {
+  try {
+    loading.value = true;
+    templateList.value = await getSimpleSmsTemplateList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Select
+    v-bind="$attrs"
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    :loading="loading"
+    :options="options"
+    :placeholder="placeholder"
+    :value="props.modelValue"
+    class="w-full"
+    option-filter-prop="label"
+    show-search
+    @change="handleChange"
+  />
+</template>