diff --git a/apps/web-antd/src/adapter/form.ts b/apps/web-antd/src/adapter/form.ts
index b386c3860..0d5bb167b 100644
--- a/apps/web-antd/src/adapter/form.ts
+++ b/apps/web-antd/src/adapter/form.ts
@@ -65,5 +65,6 @@ const useVbenForm = useForm<ComponentType, ComponentPropsMap>;
 
 export { initSetupVbenForm, useVbenForm, z };
 
+export type VbenFormApi = ReturnType<typeof useVbenForm>[1]; // add by 芋艿：用于 data.ts 表单 schema 内调用 setFieldValue
 export type VbenFormSchema = FormSchema<ComponentType, ComponentPropsMap>;
 export type VbenFormProps = FormProps<ComponentType, ComponentPropsMap>;
diff --git a/apps/web-antd/src/api/iot/alert/config/index.ts b/apps/web-antd/src/api/iot/alert/config/index.ts
index 26e114c0c..d419a5563 100644
--- a/apps/web-antd/src/api/iot/alert/config/index.ts
+++ b/apps/web-antd/src/api/iot/alert/config/index.ts
@@ -3,37 +3,21 @@ 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[];
     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 +33,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 +54,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-antd/src/api/iot/alert/record/index.ts b/apps/web-antd/src/api/iot/alert/record/index.ts
index 6d2afcfcf..fea6e17a4 100644
--- a/apps/web-antd/src/api/iot/alert/record/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/device/device/index.ts b/apps/web-antd/src/api/iot/device/device/index.ts
index ca2a17ada..a55b017d5 100644
--- a/apps/web-antd/src/api/iot/device/device/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/ota/firmware/index.ts b/apps/web-antd/src/api/iot/ota/firmware/index.ts
index 1b8ae5b69..7fd7469ca 100644
--- a/apps/web-antd/src/api/iot/ota/firmware/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/ota/task/index.ts b/apps/web-antd/src/api/iot/ota/task/index.ts
index 25ef2429f..7f4f5d6fb 100644
--- a/apps/web-antd/src/api/iot/ota/task/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/ota/task/record/index.ts b/apps/web-antd/src/api/iot/ota/task/record/index.ts
index 2d66a422f..29eada8b6 100644
--- a/apps/web-antd/src/api/iot/ota/task/record/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/product/category/index.ts b/apps/web-antd/src/api/iot/product/category/index.ts
index 24d02ed3b..45ce4ccdb 100644
--- a/apps/web-antd/src/api/iot/product/category/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/product/product/index.ts b/apps/web-antd/src/api/iot/product/product/index.ts
index f77255f4d..9b4a88ed6 100644
--- a/apps/web-antd/src/api/iot/product/product/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/rule/data/rule/index.ts b/apps/web-antd/src/api/iot/rule/data/rule/index.ts
index 55e50184a..e9ba120b2 100644
--- a/apps/web-antd/src/api/iot/rule/data/rule/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/rule/data/sink/index.ts b/apps/web-antd/src/api/iot/rule/data/sink/index.ts
index 4614c2a6e..c4d1429ce 100644
--- a/apps/web-antd/src/api/iot/rule/data/sink/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/rule/scene/index.ts b/apps/web-antd/src/api/iot/rule/scene/index.ts
index 9a8acf758..acbfbac42 100644
--- a/apps/web-antd/src/api/iot/rule/scene/index.ts
+++ b/apps/web-antd/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[][];
   }
 
   /**  场景联动规则的触发条件 */
@@ -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);
 }
 
@@ -136,7 +81,6 @@ export function deleteSceneRule(id: number) {
 }
 
 /** 批量删除场景联动规则 */
-// TODO @haohao：貌似用上。
 export function deleteSceneRuleList(ids: number[]) {
   return requestClient.delete('/iot/scene-rule/delete-list', {
     params: { ids: ids.join(',') },
diff --git a/apps/web-antd/src/api/iot/statistics/index.ts b/apps/web-antd/src/api/iot/statistics/index.ts
index a02b342d2..dc7971eb6 100644
--- a/apps/web-antd/src/api/iot/statistics/index.ts
+++ b/apps/web-antd/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-antd/src/api/iot/thingmodel/index.ts b/apps/web-antd/src/api/iot/thingmodel/index.ts
index 9e89b869c..dc42a85e9 100644
--- a/apps/web-antd/src/api/iot/thingmodel/index.ts
+++ b/apps/web-antd/src/api/iot/thingmodel/index.ts
@@ -1,126 +1,207 @@
+import type { Rule } from 'ant-design-vue/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: /^\w{1,50}$/,
+      message: '支持大小写字母、数字和下划线，不超过 50 个字符',
+      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 +222,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 +244,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-antd/src/api/mes/cal/calendar/index.ts b/apps/web-antd/src/api/mes/cal/calendar/index.ts
new file mode 100644
index 000000000..2ecff82bd
--- /dev/null
+++ b/apps/web-antd/src/api/mes/cal/calendar/index.ts
@@ -0,0 +1,24 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesCalCalendarApi {
+  /** 排班日历班组排班项 */
+  export interface CalendarTeamShiftItem {
+    teamId?: number; // 班组编号
+    teamName?: string; // 班组名称
+    shiftId?: number; // 班次编号
+    shiftName?: string; // 班次名称
+    sort?: number; // 排序
+  }
+
+  /** 排班日历天 */
+  export interface CalendarDay {
+    day?: string; // 日期
+    shiftType?: number; // 轮班方式
+    teamShifts?: CalendarTeamShiftItem[]; // 班组班次
+  }
+}
+
+/** 查询排班日历列表 */
+export function getCalendarList(params: any) {
+  return requestClient.get<MesCalCalendarApi.CalendarDay[]>('/mes/cal/calendar/list', { params });
+}
diff --git a/apps/web-antd/src/api/mes/cal/holiday/index.ts b/apps/web-antd/src/api/mes/cal/holiday/index.ts
new file mode 100644
index 000000000..846d7cf1f
--- /dev/null
+++ b/apps/web-antd/src/api/mes/cal/holiday/index.ts
@@ -0,0 +1,33 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesCalHolidayApi {
+  /** MES 假期设置 */
+  export interface Holiday {
+    id?: number; // 编号
+    day?: number | string; // 日期
+    type?: number; // 日期类型
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+
+  /** 假期查询参数 */
+  export interface HolidayQuery {
+    startDay?: string;
+    endDay?: string;
+  }
+}
+
+/** 查询假期设置列表 */
+export function getHolidayList(params?: MesCalHolidayApi.HolidayQuery) {
+  return requestClient.get<MesCalHolidayApi.Holiday[]>('/mes/cal/holiday/list', { params });
+}
+
+/** 根据日期查询假期设置 */
+export function getHolidayByDay(day: string) {
+  return requestClient.get<MesCalHolidayApi.Holiday>('/mes/cal/holiday/get-by-day', { params: { day } });
+}
+
+/** 保存假期设置 */
+export function saveHoliday(data: MesCalHolidayApi.Holiday) {
+  return requestClient.post('/mes/cal/holiday/save', data);
+}
diff --git a/apps/web-antd/src/api/mes/cal/plan/index.ts b/apps/web-antd/src/api/mes/cal/plan/index.ts
new file mode 100644
index 000000000..0d3d326ee
--- /dev/null
+++ b/apps/web-antd/src/api/mes/cal/plan/index.ts
@@ -0,0 +1,56 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesCalPlanApi {
+  /** MES 排班计划 */
+  export interface Plan {
+    id?: number; // 计划编号
+    code?: string; // 计划编码
+    name?: string; // 计划名称
+    calendarType?: number; // 班组类型
+    startDate?: number; // 开始日期
+    endDate?: number; // 结束日期
+    shiftType?: number; // 轮班方式
+    shiftMethod?: number; // 倒班方式
+    shiftCount?: number; // 倒班天数
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询排班计划分页 */
+export function getPlanPage(params: PageParam) {
+  return requestClient.get<PageResult<MesCalPlanApi.Plan>>('/mes/cal/plan/page', { params });
+}
+
+/** 查询排班计划详情 */
+export function getPlan(id: number) {
+  return requestClient.get<MesCalPlanApi.Plan>(`/mes/cal/plan/get?id=${id}`);
+}
+
+/** 新增排班计划 */
+export function createPlan(data: MesCalPlanApi.Plan) {
+  return requestClient.post<number>('/mes/cal/plan/create', data);
+}
+
+/** 修改排班计划 */
+export function updatePlan(data: MesCalPlanApi.Plan) {
+  return requestClient.put('/mes/cal/plan/update', data);
+}
+
+/** 确认排班计划 */
+export function confirmPlan(id: number) {
+  return requestClient.put(`/mes/cal/plan/confirm?id=${id}`);
+}
+
+/** 删除排班计划 */
+export function deletePlan(id: number) {
+  return requestClient.delete(`/mes/cal/plan/delete?id=${id}`);
+}
+
+/** 导出排班计划 */
+export function exportPlan(params: any) {
+  return requestClient.download('/mes/cal/plan/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/cal/plan/shift/index.ts b/apps/web-antd/src/api/mes/cal/plan/shift/index.ts
new file mode 100644
index 000000000..91a9c93e0
--- /dev/null
+++ b/apps/web-antd/src/api/mes/cal/plan/shift/index.ts
@@ -0,0 +1,34 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesCalPlanShiftApi {
+  /** MES 计划班次 */
+  export interface PlanShift {
+    id?: number; // 班次编号
+    planId?: number; // 排班计划编号
+    sort?: number; // 显示顺序
+    name?: string; // 班次名称
+    startTime?: string; // 开始时间
+    endTime?: string; // 结束时间
+    remark?: string; // 备注
+  }
+}
+
+/** 查询指定排班计划的班次列表 */
+export function getPlanShiftListByPlan(planId: number) {
+  return requestClient.get<MesCalPlanShiftApi.PlanShift[]>(`/mes/cal/plan-shift/list-by-plan?planId=${planId}`);
+}
+
+/** 新增计划班次 */
+export function createPlanShift(data: MesCalPlanShiftApi.PlanShift) {
+  return requestClient.post('/mes/cal/plan-shift/create', data);
+}
+
+/** 修改计划班次 */
+export function updatePlanShift(data: MesCalPlanShiftApi.PlanShift) {
+  return requestClient.put('/mes/cal/plan-shift/update', data);
+}
+
+/** 删除计划班次 */
+export function deletePlanShift(id: number) {
+  return requestClient.delete(`/mes/cal/plan-shift/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/cal/plan/team/index.ts b/apps/web-antd/src/api/mes/cal/plan/team/index.ts
new file mode 100644
index 000000000..334978bf7
--- /dev/null
+++ b/apps/web-antd/src/api/mes/cal/plan/team/index.ts
@@ -0,0 +1,28 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesCalPlanTeamApi {
+  /** MES 计划班组关联 */
+  export interface PlanTeam {
+    id?: number; // 关联编号
+    planId?: number; // 排班计划编号
+    teamId?: number; // 班组编号
+    teamCode?: string; // 班组编码
+    teamName?: string; // 班组名称
+    remark?: string; // 备注
+  }
+}
+
+/** 查询指定排班计划的班组列表 */
+export function getPlanTeamListByPlan(planId: number) {
+  return requestClient.get<MesCalPlanTeamApi.PlanTeam[]>(`/mes/cal/plan-team/list-by-plan?planId=${planId}`);
+}
+
+/** 新增计划班组关联 */
+export function createPlanTeam(data: MesCalPlanTeamApi.PlanTeam) {
+  return requestClient.post('/mes/cal/plan-team/create', data);
+}
+
+/** 删除计划班组关联 */
+export function deletePlanTeam(id: number) {
+  return requestClient.delete(`/mes/cal/plan-team/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/cal/team/index.ts b/apps/web-antd/src/api/mes/cal/team/index.ts
new file mode 100644
index 000000000..1bff23911
--- /dev/null
+++ b/apps/web-antd/src/api/mes/cal/team/index.ts
@@ -0,0 +1,50 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesCalTeamApi {
+  /** MES 班组 */
+  export interface Team {
+    id?: number; // 班组编号
+    code?: string; // 班组编码
+    name?: string; // 班组名称
+    calendarType?: number; // 班组类型
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询班组分页 */
+export function getTeamPage(params: PageParam) {
+  return requestClient.get<PageResult<MesCalTeamApi.Team>>('/mes/cal/team/page', { params });
+}
+
+/** 查询班组列表 */
+export function getTeamList() {
+  return requestClient.get<MesCalTeamApi.Team[]>('/mes/cal/team/list');
+}
+
+/** 查询班组详情 */
+export function getTeam(id: number) {
+  return requestClient.get<MesCalTeamApi.Team>(`/mes/cal/team/get?id=${id}`);
+}
+
+/** 新增班组 */
+export function createTeam(data: MesCalTeamApi.Team) {
+  return requestClient.post('/mes/cal/team/create', data);
+}
+
+/** 修改班组 */
+export function updateTeam(data: MesCalTeamApi.Team) {
+  return requestClient.put('/mes/cal/team/update', data);
+}
+
+/** 删除班组 */
+export function deleteTeam(id: number) {
+  return requestClient.delete(`/mes/cal/team/delete?id=${id}`);
+}
+
+/** 导出班组 */
+export function exportTeam(params: any) {
+  return requestClient.download('/mes/cal/team/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/cal/team/member/index.ts b/apps/web-antd/src/api/mes/cal/team/member/index.ts
new file mode 100644
index 000000000..f8caad493
--- /dev/null
+++ b/apps/web-antd/src/api/mes/cal/team/member/index.ts
@@ -0,0 +1,42 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesCalTeamMemberApi {
+  /** MES 班组成员 */
+  export interface TeamMember {
+    id?: number; // 成员编号
+    teamId?: number; // 班组编号
+    userId?: number; // 用户编号
+    nickname?: string; // 用户昵称
+    telephone?: string; // 用户手机号
+    remark?: string; // 备注
+  }
+}
+
+/** 创建班组成员 */
+export function createTeamMember(data: MesCalTeamMemberApi.TeamMember) {
+  return requestClient.post('/mes/cal/team-member/create', data);
+}
+
+/** 删除班组成员 */
+export function deleteTeamMember(id: number) {
+  return requestClient.delete(`/mes/cal/team-member/delete?id=${id}`);
+}
+
+/** 查询班组成员分页 */
+export function getTeamMemberPage(params: PageParam) {
+  return requestClient.get<PageResult<MesCalTeamMemberApi.TeamMember>>('/mes/cal/team-member/page', { params });
+}
+
+/** 查询指定班组的成员列表 */
+export function getTeamMemberListByTeam(teamId: number) {
+  return requestClient.get<MesCalTeamMemberApi.TeamMember[]>('/mes/cal/team-member/list-by-team', { params: { teamId } });
+}
+
+/** 查询多个班组的成员列表 */
+export function getTeamMemberListByTeamIds(teamIds: number[]) {
+  return requestClient.get<MesCalTeamMemberApi.TeamMember[]>('/mes/cal/team-member/list-by-team', {
+    params: { teamIds: teamIds.join(',') },
+  });
+}
diff --git a/apps/web-antd/src/api/mes/dv/checkplan/index.ts b/apps/web-antd/src/api/mes/dv/checkplan/index.ts
new file mode 100644
index 000000000..8f946f664
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/checkplan/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckPlanApi {
+  /** MES 点检保养方案 */
+  export interface CheckPlan {
+    id?: number; // 方案编号
+    code?: string; // 方案编码
+    name?: string; // 方案名称
+    type?: number; // 方案类型
+    startDate?: Date | number; // 开始日期
+    endDate?: Date | number; // 结束日期
+    cycleType?: number; // 周期类型
+    cycleCount?: number; // 周期数量
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询点检保养方案分页 */
+export function getCheckPlanPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvCheckPlanApi.CheckPlan>>('/mes/dv/check-plan/page', { params });
+}
+
+/** 查询点检保养方案详情 */
+export function getCheckPlan(id: number) {
+  return requestClient.get<MesDvCheckPlanApi.CheckPlan>(`/mes/dv/check-plan/get?id=${id}`);
+}
+
+/** 新增点检保养方案 */
+export function createCheckPlan(data: MesDvCheckPlanApi.CheckPlan) {
+  return requestClient.post<number>('/mes/dv/check-plan/create', data);
+}
+
+/** 修改点检保养方案 */
+export function updateCheckPlan(data: MesDvCheckPlanApi.CheckPlan) {
+  return requestClient.put('/mes/dv/check-plan/update', data);
+}
+
+/** 启用点检保养方案 */
+export function enableCheckPlan(id: number) {
+  return requestClient.put(`/mes/dv/check-plan/enable?id=${id}`);
+}
+
+/** 停用点检保养方案 */
+export function disableCheckPlan(id: number) {
+  return requestClient.put(`/mes/dv/check-plan/disable?id=${id}`);
+}
+
+/** 删除点检保养方案 */
+export function deleteCheckPlan(id: number) {
+  return requestClient.delete(`/mes/dv/check-plan/delete?id=${id}`);
+}
+
+/** 导出点检保养方案 */
+export function exportCheckPlan(params: any) {
+  return requestClient.download('/mes/dv/check-plan/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/dv/checkplan/machinery/index.ts b/apps/web-antd/src/api/mes/dv/checkplan/machinery/index.ts
new file mode 100644
index 000000000..7e4d517c7
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/checkplan/machinery/index.ts
@@ -0,0 +1,30 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckPlanMachineryApi {
+  /** MES 点检保养方案设备 */
+  export interface CheckPlanMachinery {
+    id?: number; // 关联编号
+    planId?: number; // 方案编号
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    machineryBrand?: string; // 品牌
+    machinerySpecification?: string; // 规格型号
+    remark?: string; // 备注
+  }
+}
+
+/** 查询指定方案的设备列表 */
+export function getCheckPlanMachineryListByPlan(planId: number) {
+  return requestClient.get<MesDvCheckPlanMachineryApi.CheckPlanMachinery[]>(`/mes/dv/check-plan-machinery/list-by-plan?planId=${planId}`);
+}
+
+/** 新增方案设备关联 */
+export function createCheckPlanMachinery(data: MesDvCheckPlanMachineryApi.CheckPlanMachinery) {
+  return requestClient.post('/mes/dv/check-plan-machinery/create', data);
+}
+
+/** 删除方案设备关联 */
+export function deleteCheckPlanMachinery(id: number) {
+  return requestClient.delete(`/mes/dv/check-plan-machinery/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/dv/checkplan/subject/index.ts b/apps/web-antd/src/api/mes/dv/checkplan/subject/index.ts
new file mode 100644
index 000000000..827228f50
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/checkplan/subject/index.ts
@@ -0,0 +1,31 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckPlanSubjectApi {
+  /** MES 点检保养方案项目 */
+  export interface CheckPlanSubject {
+    id?: number; // 关联编号
+    planId?: number; // 方案编号
+    subjectId?: number; // 项目编号
+    subjectCode?: string; // 项目编码
+    subjectName?: string; // 项目名称
+    subjectType?: number; // 项目类型
+    subjectContent?: string; // 项目内容
+    subjectStandard?: string; // 标准
+    remark?: string; // 备注
+  }
+}
+
+/** 查询指定方案的项目列表 */
+export function getCheckPlanSubjectListByPlan(planId: number) {
+  return requestClient.get<MesDvCheckPlanSubjectApi.CheckPlanSubject[]>(`/mes/dv/check-plan-subject/list-by-plan?planId=${planId}`);
+}
+
+/** 新增方案项目关联 */
+export function createCheckPlanSubject(data: MesDvCheckPlanSubjectApi.CheckPlanSubject) {
+  return requestClient.post('/mes/dv/check-plan-subject/create', data);
+}
+
+/** 删除方案项目关联 */
+export function deleteCheckPlanSubject(id: number) {
+  return requestClient.delete(`/mes/dv/check-plan-subject/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/dv/checkrecord/index.ts b/apps/web-antd/src/api/mes/dv/checkrecord/index.ts
new file mode 100644
index 000000000..27606f6e9
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/checkrecord/index.ts
@@ -0,0 +1,58 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckRecordApi {
+  /** MES 设备点检记录 */
+  export interface CheckRecord {
+    id?: number; // 记录编号
+    planId?: number; // 点检计划编号
+    planName?: string; // 计划名称
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    machineryBrand?: string; // 品牌
+    machinerySpecification?: string; // 规格型号
+    checkTime?: Date | number; // 点检时间
+    userId?: number; // 点检人编号
+    nickname?: string; // 点检人名称
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询设备点检记录分页 */
+export function getCheckRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvCheckRecordApi.CheckRecord>>('/mes/dv/check-record/page', { params });
+}
+
+/** 查询设备点检记录详情 */
+export function getCheckRecord(id: number) {
+  return requestClient.get<MesDvCheckRecordApi.CheckRecord>(`/mes/dv/check-record/get?id=${id}`);
+}
+
+/** 新增设备点检记录 */
+export function createCheckRecord(data: MesDvCheckRecordApi.CheckRecord) {
+  return requestClient.post<number>('/mes/dv/check-record/create', data);
+}
+
+/** 修改设备点检记录 */
+export function updateCheckRecord(data: MesDvCheckRecordApi.CheckRecord) {
+  return requestClient.put('/mes/dv/check-record/update', data);
+}
+
+/** 提交设备点检记录 */
+export function submitCheckRecord(id: number) {
+  return requestClient.put(`/mes/dv/check-record/submit?id=${id}`);
+}
+
+/** 删除设备点检记录 */
+export function deleteCheckRecord(id: number) {
+  return requestClient.delete(`/mes/dv/check-record/delete?id=${id}`);
+}
+
+/** 导出设备点检记录 */
+export function exportCheckRecord(params: any) {
+  return requestClient.download('/mes/dv/check-record/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/dv/checkrecord/line/index.ts b/apps/web-antd/src/api/mes/dv/checkrecord/line/index.ts
new file mode 100644
index 000000000..64490c6dc
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/checkrecord/line/index.ts
@@ -0,0 +1,44 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckRecordLineApi {
+  /** MES 设备点检记录明细 */
+  export interface CheckRecordLine {
+    id?: number; // 明细编号
+    recordId?: number; // 点检记录编号
+    subjectId?: number; // 点检项目编号
+    subjectCode?: string; // 项目编码
+    subjectName?: string; // 项目名称
+    subjectContent?: string; // 检查内容
+    subjectStandard?: string; // 检查标准
+    checkStatus?: number; // 点检结果
+    checkResult?: string; // 异常描述
+    remark?: string; // 备注
+  }
+}
+
+/** 查询设备点检记录明细分页 */
+export function getCheckRecordLinePage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvCheckRecordLineApi.CheckRecordLine>>('/mes/dv/check-record-line/page', { params });
+}
+
+/** 查询设备点检记录明细详情 */
+export function getCheckRecordLine(id: number) {
+  return requestClient.get<MesDvCheckRecordLineApi.CheckRecordLine>(`/mes/dv/check-record-line/get?id=${id}`);
+}
+
+/** 新增设备点检记录明细 */
+export function createCheckRecordLine(data: MesDvCheckRecordLineApi.CheckRecordLine) {
+  return requestClient.post('/mes/dv/check-record-line/create', data);
+}
+
+/** 修改设备点检记录明细 */
+export function updateCheckRecordLine(data: MesDvCheckRecordLineApi.CheckRecordLine) {
+  return requestClient.put('/mes/dv/check-record-line/update', data);
+}
+
+/** 删除设备点检记录明细 */
+export function deleteCheckRecordLine(id: number) {
+  return requestClient.delete(`/mes/dv/check-record-line/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/dv/machinery/index.ts b/apps/web-antd/src/api/mes/dv/machinery/index.ts
new file mode 100644
index 000000000..0ae46cb84
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/machinery/index.ts
@@ -0,0 +1,78 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvMachineryApi {
+  /** MES 设备台账 */
+  export interface Machinery {
+    id?: number; // 设备编号
+    code?: string; // 设备编码
+    name?: string; // 设备名称
+    brand?: string; // 品牌
+    specification?: string; // 规格型号
+    machineryTypeId?: number; // 设备类型编号
+    machineryTypeName?: string; // 设备类型名称
+    workshopId?: number; // 所属车间编号
+    workshopName?: string; // 所属车间名称
+    status?: number; // 设备状态
+    lastMaintenTime?: Date; // 最近保养时间
+    lastCheckTime?: Date; // 最近点检时间
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+
+  /** 设备导入结果 */
+  export interface MachineryImportRespVO {
+    createCodes?: string[]; // 新增成功的设备编码
+    updateCodes?: string[]; // 更新成功的设备编码
+    failureCodes?: Record<string, string>; // 导入失败的设备编码及原因
+  }
+}
+
+/** 查询设备分页 */
+export function getMachineryPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvMachineryApi.Machinery>>('/mes/dv/machinery/page', { params });
+}
+
+/** 查询设备精简列表 */
+export function getMachinerySimpleList() {
+  return requestClient.get<MesDvMachineryApi.Machinery[]>('/mes/dv/machinery/simple-list');
+}
+
+/** 查询设备详情 */
+export function getMachinery(id: number) {
+  return requestClient.get<MesDvMachineryApi.Machinery>(`/mes/dv/machinery/get?id=${id}`);
+}
+
+/** 新增设备 */
+export function createMachinery(data: MesDvMachineryApi.Machinery) {
+  return requestClient.post('/mes/dv/machinery/create', data);
+}
+
+/** 修改设备 */
+export function updateMachinery(data: MesDvMachineryApi.Machinery) {
+  return requestClient.put('/mes/dv/machinery/update', data);
+}
+
+/** 删除设备 */
+export function deleteMachinery(id: number) {
+  return requestClient.delete(`/mes/dv/machinery/delete?id=${id}`);
+}
+
+/** 导出设备 */
+export function exportMachinery(params: any) {
+  return requestClient.download('/mes/dv/machinery/export-excel', { params });
+}
+
+/** 下载设备导入模板 */
+export function importMachineryTemplate() {
+  return requestClient.download('/mes/dv/machinery/get-import-template');
+}
+
+/** 导入设备 */
+export function importMachinery(file: File, updateSupport: boolean) {
+  return requestClient.upload<MesDvMachineryApi.MachineryImportRespVO>(
+    '/mes/dv/machinery/import?updateSupport=' + updateSupport,
+    { file },
+  );
+}
diff --git a/apps/web-antd/src/api/mes/dv/machinery/type/index.ts b/apps/web-antd/src/api/mes/dv/machinery/type/index.ts
new file mode 100644
index 000000000..d7992fc63
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/machinery/type/index.ts
@@ -0,0 +1,46 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesDvMachineryTypeApi {
+  /** MES 设备类型 */
+  export interface MachineryType {
+    id?: number; // 设备类型编号
+    parentId?: number; // 父类型编号
+    code?: string; // 类型编码
+    name?: string; // 类型名称
+    sort?: number; // 显示排序
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    children?: MachineryType[]; // 子类型
+  }
+}
+
+/** 查询设备类型列表 */
+export function getMachineryTypeList(params?: any) {
+  return requestClient.get<MesDvMachineryTypeApi.MachineryType[]>('/mes/dv/machinery-type/list', { params });
+}
+
+/** 查询设备类型精简列表 */
+export function getMachineryTypeSimpleList() {
+  return requestClient.get<MesDvMachineryTypeApi.MachineryType[]>('/mes/dv/machinery-type/simple-list');
+}
+
+/** 查询设备类型详情 */
+export function getMachineryType(id: number) {
+  return requestClient.get<MesDvMachineryTypeApi.MachineryType>(`/mes/dv/machinery-type/get?id=${id}`);
+}
+
+/** 新增设备类型 */
+export function createMachineryType(data: MesDvMachineryTypeApi.MachineryType) {
+  return requestClient.post('/mes/dv/machinery-type/create', data);
+}
+
+/** 修改设备类型 */
+export function updateMachineryType(data: MesDvMachineryTypeApi.MachineryType) {
+  return requestClient.put('/mes/dv/machinery-type/update', data);
+}
+
+/** 删除设备类型 */
+export function deleteMachineryType(id: number) {
+  return requestClient.delete(`/mes/dv/machinery-type/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/dv/maintenrecord/index.ts b/apps/web-antd/src/api/mes/dv/maintenrecord/index.ts
new file mode 100644
index 000000000..68f86da7d
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/maintenrecord/index.ts
@@ -0,0 +1,58 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvMaintenRecordApi {
+  /** MES 设备保养记录 */
+  export interface MaintenRecord {
+    id?: number; // 记录编号
+    planId?: number; // 计划编号
+    planName?: string; // 计划名称
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    machineryBrand?: string; // 品牌
+    machinerySpecification?: string; // 规格型号
+    maintenTime?: Date | number; // 保养时间
+    userId?: number; // 用户编号
+    nickname?: string; // 保养人名称
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询设备保养记录分页 */
+export function getMaintenRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvMaintenRecordApi.MaintenRecord>>('/mes/dv/mainten-record/page', { params });
+}
+
+/** 查询设备保养记录详情 */
+export function getMaintenRecord(id: number) {
+  return requestClient.get<MesDvMaintenRecordApi.MaintenRecord>(`/mes/dv/mainten-record/get?id=${id}`);
+}
+
+/** 新增设备保养记录 */
+export function createMaintenRecord(data: MesDvMaintenRecordApi.MaintenRecord) {
+  return requestClient.post<number>('/mes/dv/mainten-record/create', data);
+}
+
+/** 修改设备保养记录 */
+export function updateMaintenRecord(data: MesDvMaintenRecordApi.MaintenRecord) {
+  return requestClient.put('/mes/dv/mainten-record/update', data);
+}
+
+/** 提交设备保养记录 */
+export function submitMaintenRecord(id: number) {
+  return requestClient.put(`/mes/dv/mainten-record/submit?id=${id}`);
+}
+
+/** 删除设备保养记录 */
+export function deleteMaintenRecord(id: number) {
+  return requestClient.delete(`/mes/dv/mainten-record/delete?id=${id}`);
+}
+
+/** 导出设备保养记录 */
+export function exportMaintenRecord(params: any) {
+  return requestClient.download('/mes/dv/mainten-record/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/dv/maintenrecord/line/index.ts b/apps/web-antd/src/api/mes/dv/maintenrecord/line/index.ts
new file mode 100644
index 000000000..36b45e57d
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/maintenrecord/line/index.ts
@@ -0,0 +1,43 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvMaintenRecordLineApi {
+  /** MES 设备保养记录明细 */
+  export interface MaintenRecordLine {
+    id?: number; // 明细编号
+    recordId?: number; // 保养记录编号
+    subjectId?: number; // 项目编号
+    subjectName?: string; // 项目名称
+    subjectContent?: string; // 项目内容
+    subjectStandard?: string; // 项目标准
+    status?: number; // 保养结果
+    result?: string; // 异常描述
+    remark?: string; // 备注
+  }
+}
+
+/** 查询设备保养记录明细分页 */
+export function getMaintenRecordLinePage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvMaintenRecordLineApi.MaintenRecordLine>>('/mes/dv/mainten-record-line/page', { params });
+}
+
+/** 查询设备保养记录明细详情 */
+export function getMaintenRecordLine(id: number) {
+  return requestClient.get<MesDvMaintenRecordLineApi.MaintenRecordLine>(`/mes/dv/mainten-record-line/get?id=${id}`);
+}
+
+/** 新增设备保养记录明细 */
+export function createMaintenRecordLine(data: MesDvMaintenRecordLineApi.MaintenRecordLine) {
+  return requestClient.post('/mes/dv/mainten-record-line/create', data);
+}
+
+/** 修改设备保养记录明细 */
+export function updateMaintenRecordLine(data: MesDvMaintenRecordLineApi.MaintenRecordLine) {
+  return requestClient.put('/mes/dv/mainten-record-line/update', data);
+}
+
+/** 删除设备保养记录明细 */
+export function deleteMaintenRecordLine(id: number) {
+  return requestClient.delete(`/mes/dv/mainten-record-line/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/dv/repair/index.ts b/apps/web-antd/src/api/mes/dv/repair/index.ts
new file mode 100644
index 000000000..1586ae02f
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/repair/index.ts
@@ -0,0 +1,76 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvRepairApi {
+  /** MES 维修工单 */
+  export interface Repair {
+    id?: number; // 工单编号
+    code?: string; // 维修工单编码
+    name?: string; // 维修工单名称
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    machineryBrand?: string; // 品牌
+    machinerySpecification?: string; // 规格型号
+    requireDate?: Date | number; // 报修日期
+    finishDate?: Date | number; // 维修完成日期
+    confirmDate?: Date | number; // 验收日期
+    result?: number; // 维修结果
+    acceptedUserId?: number; // 维修人编号
+    acceptedUserNickname?: string; // 维修人名称
+    confirmUserId?: number; // 验收人编号
+    confirmUserNickname?: string; // 验收人名称
+    sourceDocType?: number; // 来源单据类型
+    sourceDocId?: number; // 来源单据编号
+    sourceDocCode?: string; // 来源单据编码
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询维修工单分页 */
+export function getRepairPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvRepairApi.Repair>>('/mes/dv/repair/page', { params });
+}
+
+/** 查询维修工单详情 */
+export function getRepair(id: number) {
+  return requestClient.get<MesDvRepairApi.Repair>(`/mes/dv/repair/get?id=${id}`);
+}
+
+/** 新增维修工单 */
+export function createRepair(data: MesDvRepairApi.Repair) {
+  return requestClient.post<number>('/mes/dv/repair/create', data);
+}
+
+/** 修改维修工单 */
+export function updateRepair(data: MesDvRepairApi.Repair) {
+  return requestClient.put('/mes/dv/repair/update', data);
+}
+
+/** 删除维修工单 */
+export function deleteRepair(id: number) {
+  return requestClient.delete(`/mes/dv/repair/delete?id=${id}`);
+}
+
+/** 导出维修工单 */
+export function exportRepair(params: any) {
+  return requestClient.download('/mes/dv/repair/export-excel', { params });
+}
+
+/** 提交维修工单 */
+export function submitRepair(id: number) {
+  return requestClient.put(`/mes/dv/repair/submit?id=${id}`);
+}
+
+/** 确认维修完成 */
+export function confirmRepair(data: MesDvRepairApi.Repair) {
+  return requestClient.put('/mes/dv/repair/confirm', data);
+}
+
+/** 完成验收 */
+export function finishRepair(id: number, result: number) {
+  return requestClient.put(`/mes/dv/repair/finish?id=${id}&result=${result}`);
+}
diff --git a/apps/web-antd/src/api/mes/dv/repair/line/index.ts b/apps/web-antd/src/api/mes/dv/repair/line/index.ts
new file mode 100644
index 000000000..414b167e8
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/repair/line/index.ts
@@ -0,0 +1,44 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvRepairLineApi {
+  /** MES 维修工单行 */
+  export interface RepairLine {
+    id?: number; // 明细编号
+    repairId?: number; // 维修工单编号
+    subjectId?: number; // 项目编号
+    subjectName?: string; // 项目名称
+    subjectContent?: string; // 项目内容
+    subjectStandard?: string; // 项目标准
+    malfunction?: string; // 故障描述
+    malfunctionUrl?: string; // 故障图片 URL
+    description?: string; // 维修描述
+    remark?: string; // 备注
+  }
+}
+
+/** 查询维修工单行分页 */
+export function getRepairLinePage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvRepairLineApi.RepairLine>>('/mes/dv/repair-line/page', { params });
+}
+
+/** 查询维修工单行详情 */
+export function getRepairLine(id: number) {
+  return requestClient.get<MesDvRepairLineApi.RepairLine>(`/mes/dv/repair-line/get?id=${id}`);
+}
+
+/** 新增维修工单行 */
+export function createRepairLine(data: MesDvRepairLineApi.RepairLine) {
+  return requestClient.post('/mes/dv/repair-line/create', data);
+}
+
+/** 修改维修工单行 */
+export function updateRepairLine(data: MesDvRepairLineApi.RepairLine) {
+  return requestClient.put('/mes/dv/repair-line/update', data);
+}
+
+/** 删除维修工单行 */
+export function deleteRepairLine(id: number) {
+  return requestClient.delete(`/mes/dv/repair-line/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/dv/subject/index.ts b/apps/web-antd/src/api/mes/dv/subject/index.ts
new file mode 100644
index 000000000..85d21e92b
--- /dev/null
+++ b/apps/web-antd/src/api/mes/dv/subject/index.ts
@@ -0,0 +1,53 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvSubjectApi {
+  /** MES 点检保养项目 */
+  export interface Subject {
+    id?: number; // 项目编号
+    code?: string; // 项目编码
+    name?: string; // 项目名称
+    type?: number; // 项目类型
+    content?: string; // 项目内容
+    standard?: string; // 标准
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询点检保养项目分页 */
+export function getSubjectPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvSubjectApi.Subject>>('/mes/dv/subject/page', { params });
+}
+
+/** 查询点检保养项目精简列表 */
+export function getSubjectSimpleList() {
+  return requestClient.get<MesDvSubjectApi.Subject[]>('/mes/dv/subject/simple-list');
+}
+
+/** 查询点检保养项目详情 */
+export function getSubject(id: number) {
+  return requestClient.get<MesDvSubjectApi.Subject>(`/mes/dv/subject/get?id=${id}`);
+}
+
+/** 新增点检保养项目 */
+export function createSubject(data: MesDvSubjectApi.Subject) {
+  return requestClient.post('/mes/dv/subject/create', data);
+}
+
+/** 修改点检保养项目 */
+export function updateSubject(data: MesDvSubjectApi.Subject) {
+  return requestClient.put('/mes/dv/subject/update', data);
+}
+
+/** 删除点检保养项目 */
+export function deleteSubject(id: number) {
+  return requestClient.delete(`/mes/dv/subject/delete?id=${id}`);
+}
+
+/** 导出点检保养项目 */
+export function exportSubject(params: any) {
+  return requestClient.download('/mes/dv/subject/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/md/autocode/part/index.ts b/apps/web-antd/src/api/mes/md/autocode/part/index.ts
new file mode 100644
index 000000000..2962ae55e
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/autocode/part/index.ts
@@ -0,0 +1,53 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdAutoCodePartApi {
+  /** MES 编码规则分段 */
+  export interface AutoCodePart {
+    id?: number; // 分段编号
+    ruleId?: number; // 规则编号
+    sort?: number; // 排序
+    type?: number; // 分段类型
+    length?: number; // 长度
+    dateFormat?: string; // 日期格式
+    fixCharacter?: string; // 固定字符
+    serialStartNo?: number; // 流水号起始值
+    serialStep?: number; // 流水号步长
+    cycleFlag?: boolean; // 是否循环
+    cycleMethod?: number; // 循环方式
+    remark?: string; // 备注
+  }
+}
+
+/** 查询编码规则分段详情 */
+export function getAutoCodePart(id: number) {
+  return requestClient.get<MesMdAutoCodePartApi.AutoCodePart>(
+    `/mes/md/auto-code-part/get?id=${id}`,
+  );
+}
+
+/** 查询编码规则分段列表 */
+export function getAutoCodePartListByRuleId(ruleId: number) {
+  return requestClient.get<MesMdAutoCodePartApi.AutoCodePart[]>(
+    '/mes/md/auto-code-part/list-by-rule-id',
+    { params: { ruleId } },
+  );
+}
+
+/** 新增编码规则分段 */
+export function createAutoCodePart(
+  data: MesMdAutoCodePartApi.AutoCodePart,
+) {
+  return requestClient.post('/mes/md/auto-code-part/create', data);
+}
+
+/** 修改编码规则分段 */
+export function updateAutoCodePart(
+  data: MesMdAutoCodePartApi.AutoCodePart,
+) {
+  return requestClient.put('/mes/md/auto-code-part/update', data);
+}
+
+/** 删除编码规则分段 */
+export function deleteAutoCodePart(id: number) {
+  return requestClient.delete(`/mes/md/auto-code-part/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/md/autocode/record/index.ts b/apps/web-antd/src/api/mes/md/autocode/record/index.ts
new file mode 100644
index 000000000..6110249ee
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/autocode/record/index.ts
@@ -0,0 +1,9 @@
+import { requestClient } from '#/api/request';
+
+/** 生成 MES 编码 */
+export function generateAutoCode(ruleCode: string, inputChar?: string) {
+  return requestClient.post<string>('/mes/md/auto-code-record/generate', {
+    inputChar,
+    ruleCode,
+  });
+}
diff --git a/apps/web-antd/src/api/mes/md/autocode/rule/index.ts b/apps/web-antd/src/api/mes/md/autocode/rule/index.ts
new file mode 100644
index 000000000..be4d81f2f
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/autocode/rule/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdAutoCodeRuleApi {
+  /** MES 编码规则 */
+  export interface AutoCodeRule {
+    id?: number; // 规则编号
+    code?: string; // 规则编码
+    name?: string; // 规则名称
+    description?: string; // 规则描述
+    maxLength?: number; // 最大长度
+    padded?: boolean; // 是否补齐
+    paddedChar?: string; // 补齐字符
+    paddedMethod?: number; // 补齐方式
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询编码规则分页 */
+export function getAutoCodeRulePage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MesMdAutoCodeRuleApi.AutoCodeRule>
+  >('/mes/md/auto-code-rule/page', { params });
+}
+
+/** 查询编码规则详情 */
+export function getAutoCodeRule(id: number) {
+  return requestClient.get<MesMdAutoCodeRuleApi.AutoCodeRule>(
+    `/mes/md/auto-code-rule/get?id=${id}`,
+  );
+}
+
+/** 新增编码规则 */
+export function createAutoCodeRule(
+  data: MesMdAutoCodeRuleApi.AutoCodeRule,
+) {
+  return requestClient.post('/mes/md/auto-code-rule/create', data);
+}
+
+/** 修改编码规则 */
+export function updateAutoCodeRule(
+  data: MesMdAutoCodeRuleApi.AutoCodeRule,
+) {
+  return requestClient.put('/mes/md/auto-code-rule/update', data);
+}
+
+/** 删除编码规则 */
+export function deleteAutoCodeRule(id: number) {
+  return requestClient.delete(`/mes/md/auto-code-rule/delete?id=${id}`);
+}
+
+/** 导出编码规则 */
+export function exportAutoCodeRule(params: PageParam) {
+  return requestClient.download('/mes/md/auto-code-rule/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/mes/md/client/index.ts b/apps/web-antd/src/api/mes/md/client/index.ts
new file mode 100644
index 000000000..9be868d69
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/client/index.ts
@@ -0,0 +1,86 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdClientApi {
+  /** MES 客户 */
+  export interface Client {
+    id?: number; // 客户编号
+    code?: string; // 客户编码
+    name?: string; // 客户名称
+    nickname?: string; // 客户简称
+    englishName?: string; // 客户英文名称
+    description?: string; // 客户简介
+    logo?: string; // 客户 LOGO 地址
+    type?: number; // 客户类型
+    address?: string; // 客户地址
+    website?: string; // 客户官网地址
+    email?: string; // 客户邮箱地址
+    telephone?: string; // 客户电话
+    contact1Name?: string; // 联系人1
+    contact1Telephone?: string; // 联系人1电话
+    contact1Email?: string; // 联系人1邮箱
+    contact2Name?: string; // 联系人2
+    contact2Telephone?: string; // 联系人2电话
+    contact2Email?: string; // 联系人2邮箱
+    creditCode?: string; // 统一社会信用代码
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+
+  /** 客户导入结果 */
+  export interface ClientImportRespVO {
+    createCodes?: string[]; // 新增成功的客户编码
+    updateCodes?: string[]; // 更新成功的客户编码
+    failureCodes?: Record<string, string>; // 导入失败的客户编码及原因
+  }
+}
+
+/** 查询客户分页 */
+export function getClientPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdClientApi.Client>>(
+    '/mes/md-client/page',
+    { params },
+  );
+}
+
+/** 查询客户详情 */
+export function getClient(id: number) {
+  return requestClient.get<MesMdClientApi.Client>(
+    `/mes/md-client/get?id=${id}`,
+  );
+}
+
+/** 新增客户 */
+export function createClient(data: MesMdClientApi.Client) {
+  return requestClient.post('/mes/md-client/create', data);
+}
+
+/** 修改客户 */
+export function updateClient(data: MesMdClientApi.Client) {
+  return requestClient.put('/mes/md-client/update', data);
+}
+
+/** 删除客户 */
+export function deleteClient(id: number) {
+  return requestClient.delete(`/mes/md-client/delete?id=${id}`);
+}
+
+/** 导出客户 */
+export function exportClient(params: any) {
+  return requestClient.download('/mes/md-client/export-excel', { params });
+}
+
+/** 下载客户导入模板 */
+export function importClientTemplate() {
+  return requestClient.download('/mes/md-client/get-import-template');
+}
+
+/** 导入客户 */
+export function importClient(file: File, updateSupport: boolean) {
+  return requestClient.upload<MesMdClientApi.ClientImportRespVO>(
+    `/mes/md-client/import?updateSupport=${updateSupport}`,
+    { file },
+  );
+}
diff --git a/apps/web-antd/src/api/mes/md/item/batchConfig/index.ts b/apps/web-antd/src/api/mes/md/item/batchConfig/index.ts
new file mode 100644
index 000000000..29b48848c
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/item/batchConfig/index.ts
@@ -0,0 +1,37 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdItemBatchConfigApi {
+  /** MES 物料批次属性配置 */
+  export interface BatchConfig {
+    id?: number; // 编号
+    itemId?: number; // 物料编号
+    produceDateFlag?: boolean; // 批次属性-生产日期
+    expireDateFlag?: boolean; // 批次属性-有效期
+    receiptDateFlag?: boolean; // 批次属性-入库日期
+    vendorFlag?: boolean; // 批次属性-供应商
+    clientFlag?: boolean; // 批次属性-客户
+    salesOrderCodeFlag?: boolean; // 批次属性-销售订单编号
+    purchaseOrderCodeFlag?: boolean; // 批次属性-采购订单编号
+    workorderFlag?: boolean; // 批次属性-生产工单
+    taskFlag?: boolean; // 批次属性-生产任务
+    workstationFlag?: boolean; // 批次属性-工作站
+    toolFlag?: boolean; // 批次属性-工具
+    moldFlag?: boolean; // 批次属性-模具
+    lotNumberFlag?: boolean; // 批次属性-生产批号
+    qualityStatusFlag?: boolean; // 批次属性-质量状态
+  }
+}
+
+/** 根据物料编号获取批次属性配置 */
+export function getBatchConfigByItemId(itemId: number) {
+  return requestClient.get<MesMdItemBatchConfigApi.BatchConfig>(
+    `/mes/md/item-batch-config/get-by-item-id?itemId=${itemId}`,
+  );
+}
+
+/** 保存批次属性配置 */
+export function saveBatchConfig(
+  data: MesMdItemBatchConfigApi.BatchConfig,
+) {
+  return requestClient.post('/mes/md/item-batch-config/save', data);
+}
diff --git a/apps/web-antd/src/api/mes/md/item/index.ts b/apps/web-antd/src/api/mes/md/item/index.ts
new file mode 100644
index 000000000..f2a23c0e6
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/item/index.ts
@@ -0,0 +1,85 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdItemApi {
+  /** MES 物料产品 */
+  export interface Item {
+    id?: number; // 物料编号
+    code?: string; // 物料编码
+    name?: string; // 物料名称
+    specification?: string; // 规格型号
+    unitMeasureId?: number; // 计量单位编号
+    unitMeasureName?: string; // 计量单位名称
+    itemTypeId?: number; // 物料分类编号
+    itemTypeName?: string; // 物料分类名称
+    itemOrProduct?: string; // 物料/产品标识
+    status?: number; // 状态
+    safeStockFlag?: boolean; // 是否启用安全库存
+    minStock?: number; // 最低库存量
+    maxStock?: number; // 最高库存量
+    highValue?: boolean; // 是否高值物料
+    batchFlag?: boolean; // 是否启用批次管理
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+
+  /** 物料导入结果 */
+  export interface ItemImportRespVO {
+    createCodes?: string[]; // 新增成功的物料编码
+    updateCodes?: string[]; // 更新成功的物料编码
+    failureCodes?: Record<string, string>; // 导入失败的物料编码及原因
+  }
+}
+
+/** 查询物料产品分页 */
+export function getItemPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdItemApi.Item>>('/mes/md/item/page', {
+    params,
+  });
+}
+
+/** 查询物料产品详情 */
+export function getItem(id: number) {
+  return requestClient.get<MesMdItemApi.Item>(`/mes/md/item/get?id=${id}`);
+}
+
+/** 新增物料产品 */
+export function createItem(data: MesMdItemApi.Item) {
+  return requestClient.post<number>('/mes/md/item/create', data);
+}
+
+/** 修改物料产品 */
+export function updateItem(data: MesMdItemApi.Item) {
+  return requestClient.put('/mes/md/item/update', data);
+}
+
+/** 修改物料产品状态 */
+export function updateItemStatus(id: number, status: number) {
+  return requestClient.put('/mes/md/item/update-status', undefined, {
+    params: { id, status },
+  });
+}
+
+/** 删除物料产品 */
+export function deleteItem(id: number) {
+  return requestClient.delete(`/mes/md/item/delete?id=${id}`);
+}
+
+/** 导出物料产品 */
+export function exportItem(params: any) {
+  return requestClient.download('/mes/md/item/export-excel', { params });
+}
+
+/** 下载物料导入模板 */
+export function importItemTemplate() {
+  return requestClient.download('/mes/md/item/get-import-template');
+}
+
+/** 导入物料产品 */
+export function importItem(file: File, updateSupport: boolean) {
+  return requestClient.upload<MesMdItemApi.ItemImportRespVO>(
+    `/mes/md/item/import?updateSupport=${updateSupport}`,
+    { file },
+  );
+}
diff --git a/apps/web-antd/src/api/mes/md/item/productBom/index.ts b/apps/web-antd/src/api/mes/md/item/productBom/index.ts
new file mode 100644
index 000000000..27176a60a
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/item/productBom/index.ts
@@ -0,0 +1,58 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdProductBomApi {
+  /** MES 产品 BOM */
+  export interface ProductBom {
+    id?: number; // BOM 编号
+    itemId?: number; // 物料产品编号
+    bomItemId?: number; // BOM 物料编号
+    quantity?: number; // 物料使用比例
+    status?: number; // 是否启用
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    bomItemCode?: string; // BOM 物料编码
+    bomItemName?: string; // BOM 物料名称
+    bomItemSpecification?: string; // BOM 物料规格
+    unitMeasureName?: string; // 计量单位名称
+    itemOrProduct?: string; // 物料/产品标识
+  }
+}
+
+/** 新增产品 BOM */
+export function createProductBom(data: MesMdProductBomApi.ProductBom) {
+  return requestClient.post('/mes/md/product-bom/create', data);
+}
+
+/** 修改产品 BOM */
+export function updateProductBom(data: MesMdProductBomApi.ProductBom) {
+  return requestClient.put('/mes/md/product-bom/update', data);
+}
+
+/** 删除产品 BOM */
+export function deleteProductBom(id: number) {
+  return requestClient.delete(`/mes/md/product-bom/delete?id=${id}`);
+}
+
+/** 查询产品 BOM 详情 */
+export function getProductBom(id: number) {
+  return requestClient.get<MesMdProductBomApi.ProductBom>(
+    `/mes/md/product-bom/get?id=${id}`,
+  );
+}
+
+/** 查询产品 BOM 分页 */
+export function getProductBomPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdProductBomApi.ProductBom>>(
+    '/mes/md/product-bom/page',
+    { params },
+  );
+}
+
+/** 根据物料产品编号查询产品 BOM 列表 */
+export function getProductBomListByItemId(itemId: number) {
+  return requestClient.get<MesMdProductBomApi.ProductBom[]>(
+    `/mes/md/product-bom/list-by-item-id?itemId=${itemId}`,
+  );
+}
diff --git a/apps/web-antd/src/api/mes/md/item/productSip/index.ts b/apps/web-antd/src/api/mes/md/item/productSip/index.ts
new file mode 100644
index 000000000..eac5599d7
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/item/productSip/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdProductSipApi {
+  /** MES 产品 SIP */
+  export interface ProductSip {
+    id?: number; // SIP 编号
+    itemId?: number; // 物料产品编号
+    sort?: number; // 排列顺序
+    processId?: number; // 工序编号
+    title?: string; // 标题
+    description?: string; // 详细描述
+    url?: string; // 图片地址
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    processCode?: string; // 工序编码
+    processName?: string; // 工序名称
+  }
+}
+
+/** 新增产品 SIP */
+export function createProductSip(data: MesMdProductSipApi.ProductSip) {
+  return requestClient.post('/mes/md/product-sip/create', data);
+}
+
+/** 修改产品 SIP */
+export function updateProductSip(data: MesMdProductSipApi.ProductSip) {
+  return requestClient.put('/mes/md/product-sip/update', data);
+}
+
+/** 删除产品 SIP */
+export function deleteProductSip(id: number) {
+  return requestClient.delete(`/mes/md/product-sip/delete?id=${id}`);
+}
+
+/** 查询产品 SIP 详情 */
+export function getProductSip(id: number) {
+  return requestClient.get<MesMdProductSipApi.ProductSip>(
+    `/mes/md/product-sip/get?id=${id}`,
+  );
+}
+
+/** 查询产品 SIP 分页 */
+export function getProductSipPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdProductSipApi.ProductSip>>(
+    '/mes/md/product-sip/page',
+    { params },
+  );
+}
+
+/** 根据物料产品编号查询产品 SIP 列表 */
+export function getProductSipListByItemId(itemId: number) {
+  return requestClient.get<MesMdProductSipApi.ProductSip[]>(
+    `/mes/md/product-sip/list-by-item-id?itemId=${itemId}`,
+  );
+}
diff --git a/apps/web-antd/src/api/mes/md/item/productSop/index.ts b/apps/web-antd/src/api/mes/md/item/productSop/index.ts
new file mode 100644
index 000000000..554869a41
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/item/productSop/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdProductSopApi {
+  /** MES 产品 SOP */
+  export interface ProductSop {
+    id?: number; // SOP 编号
+    itemId?: number; // 物料产品编号
+    sort?: number; // 排列顺序
+    processId?: number; // 工序编号
+    title?: string; // 标题
+    description?: string; // 详细描述
+    url?: string; // 图片地址
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    processCode?: string; // 工序编码
+    processName?: string; // 工序名称
+  }
+}
+
+/** 新增产品 SOP */
+export function createProductSop(data: MesMdProductSopApi.ProductSop) {
+  return requestClient.post('/mes/md/product-sop/create', data);
+}
+
+/** 修改产品 SOP */
+export function updateProductSop(data: MesMdProductSopApi.ProductSop) {
+  return requestClient.put('/mes/md/product-sop/update', data);
+}
+
+/** 删除产品 SOP */
+export function deleteProductSop(id: number) {
+  return requestClient.delete(`/mes/md/product-sop/delete?id=${id}`);
+}
+
+/** 查询产品 SOP 详情 */
+export function getProductSop(id: number) {
+  return requestClient.get<MesMdProductSopApi.ProductSop>(
+    `/mes/md/product-sop/get?id=${id}`,
+  );
+}
+
+/** 查询产品 SOP 分页 */
+export function getProductSopPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdProductSopApi.ProductSop>>(
+    '/mes/md/product-sop/page',
+    { params },
+  );
+}
+
+/** 根据物料产品编号查询产品 SOP 列表 */
+export function getProductSopListByItemId(itemId: number) {
+  return requestClient.get<MesMdProductSopApi.ProductSop[]>(
+    `/mes/md/product-sop/list-by-item-id?itemId=${itemId}`,
+  );
+}
diff --git a/apps/web-antd/src/api/mes/md/item/type/index.ts b/apps/web-antd/src/api/mes/md/item/type/index.ts
new file mode 100644
index 000000000..e9367ee1f
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/item/type/index.ts
@@ -0,0 +1,54 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdItemTypeApi {
+  /** MES 物料产品分类 */
+  export interface ItemType {
+    id?: number; // 分类编号
+    parentId?: number; // 父分类编号
+    code?: string; // 分类编码
+    name?: string; // 分类名称
+    itemOrProduct?: string; // 物料/产品标识
+    sort?: number; // 显示排序
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    children?: ItemType[]; // 子分类
+  }
+}
+
+/** 查询物料产品分类列表 */
+export function getItemTypeList(params?: any) {
+  return requestClient.get<MesMdItemTypeApi.ItemType[]>(
+    '/mes/md/item-type/list',
+    { params },
+  );
+}
+
+/** 查询物料产品分类精简列表 */
+export function getItemTypeSimpleList() {
+  return requestClient.get<MesMdItemTypeApi.ItemType[]>(
+    '/mes/md/item-type/simple-list',
+  );
+}
+
+/** 查询物料产品分类详情 */
+export function getItemType(id: number) {
+  return requestClient.get<MesMdItemTypeApi.ItemType>(
+    `/mes/md/item-type/get?id=${id}`,
+  );
+}
+
+/** 新增物料产品分类 */
+export function createItemType(data: MesMdItemTypeApi.ItemType) {
+  return requestClient.post('/mes/md/item-type/create', data);
+}
+
+/** 修改物料产品分类 */
+export function updateItemType(data: MesMdItemTypeApi.ItemType) {
+  return requestClient.put('/mes/md/item-type/update', data);
+}
+
+/** 删除物料产品分类 */
+export function deleteItemType(id: number) {
+  return requestClient.delete(`/mes/md/item-type/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/md/unitmeasure/index.ts b/apps/web-antd/src/api/mes/md/unitmeasure/index.ts
new file mode 100644
index 000000000..5556a022a
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/unitmeasure/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdUnitMeasureApi {
+  /** MES 计量单位 */
+  export interface UnitMeasure {
+    id?: number; // 单位编号
+    code?: string; // 单位编码
+    name?: string; // 单位名称
+    primaryFlag?: boolean; // 是否主单位
+    primaryId?: number; // 主单位编号
+    changeRate?: number; // 与主单位换算比例
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询计量单位分页 */
+export function getUnitMeasurePage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdUnitMeasureApi.UnitMeasure>>(
+    '/mes/md/unit-measure/page',
+    { params },
+  );
+}
+
+/** 查询计量单位精简列表 */
+export function getUnitMeasureSimpleList() {
+  return requestClient.get<MesMdUnitMeasureApi.UnitMeasure[]>(
+    '/mes/md/unit-measure/simple-list',
+  );
+}
+
+/** 查询计量单位详情 */
+export function getUnitMeasure(id: number) {
+  return requestClient.get<MesMdUnitMeasureApi.UnitMeasure>(
+    `/mes/md/unit-measure/get?id=${id}`,
+  );
+}
+
+/** 新增计量单位 */
+export function createUnitMeasure(data: MesMdUnitMeasureApi.UnitMeasure) {
+  return requestClient.post('/mes/md/unit-measure/create', data);
+}
+
+/** 修改计量单位 */
+export function updateUnitMeasure(data: MesMdUnitMeasureApi.UnitMeasure) {
+  return requestClient.put('/mes/md/unit-measure/update', data);
+}
+
+/** 删除计量单位 */
+export function deleteUnitMeasure(id: number) {
+  return requestClient.delete(`/mes/md/unit-measure/delete?id=${id}`);
+}
+
+/** 导出计量单位 */
+export function exportUnitMeasure(params: PageParam) {
+  return requestClient.download('/mes/md/unit-measure/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/md/vendor/index.ts b/apps/web-antd/src/api/mes/md/vendor/index.ts
new file mode 100644
index 000000000..e64845f53
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/vendor/index.ts
@@ -0,0 +1,87 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdVendorApi {
+  /** MES 供应商 */
+  export interface Vendor {
+    id?: number; // 供应商编号
+    code?: string; // 供应商编码
+    name?: string; // 供应商名称
+    nickname?: string; // 供应商简称
+    englishName?: string; // 供应商英文名称
+    description?: string; // 供应商简介
+    logo?: string; // 供应商 LOGO 地址
+    level?: string; // 供应商等级
+    score?: number; // 供应商评分
+    address?: string; // 供应商地址
+    website?: string; // 供应商官网地址
+    email?: string; // 供应商邮箱地址
+    telephone?: string; // 供应商电话
+    contact1Name?: string; // 联系人1
+    contact1Telephone?: string; // 联系人1电话
+    contact1Email?: string; // 联系人1邮箱
+    contact2Name?: string; // 联系人2
+    contact2Telephone?: string; // 联系人2电话
+    contact2Email?: string; // 联系人2邮箱
+    creditCode?: string; // 统一社会信用代码
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+
+  /** 供应商导入结果 */
+  export interface VendorImportRespVO {
+    createCodes?: string[]; // 新增成功的供应商编码
+    updateCodes?: string[]; // 更新成功的供应商编码
+    failureCodes?: Record<string, string>; // 导入失败的供应商编码及原因
+  }
+}
+
+/** 查询供应商分页 */
+export function getVendorPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdVendorApi.Vendor>>(
+    '/mes/md-vendor/page',
+    { params },
+  );
+}
+
+/** 查询供应商详情 */
+export function getVendor(id: number) {
+  return requestClient.get<MesMdVendorApi.Vendor>(
+    `/mes/md-vendor/get?id=${id}`,
+  );
+}
+
+/** 新增供应商 */
+export function createVendor(data: MesMdVendorApi.Vendor) {
+  return requestClient.post('/mes/md-vendor/create', data);
+}
+
+/** 修改供应商 */
+export function updateVendor(data: MesMdVendorApi.Vendor) {
+  return requestClient.put('/mes/md-vendor/update', data);
+}
+
+/** 删除供应商 */
+export function deleteVendor(id: number) {
+  return requestClient.delete(`/mes/md-vendor/delete?id=${id}`);
+}
+
+/** 导出供应商 */
+export function exportVendor(params: any) {
+  return requestClient.download('/mes/md-vendor/export-excel', { params });
+}
+
+/** 下载供应商导入模板 */
+export function importVendorTemplate() {
+  return requestClient.download('/mes/md-vendor/get-import-template');
+}
+
+/** 导入供应商 */
+export function importVendor(file: File, updateSupport: boolean) {
+  return requestClient.upload<MesMdVendorApi.VendorImportRespVO>(
+    `/mes/md-vendor/import?updateSupport=${updateSupport}`,
+    { file },
+  );
+}
diff --git a/apps/web-antd/src/api/mes/md/workstation/index.ts b/apps/web-antd/src/api/mes/md/workstation/index.ts
new file mode 100644
index 000000000..4880f3bbe
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/workstation/index.ts
@@ -0,0 +1,58 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkstationApi {
+  /** MES 工作站 */
+  export interface Workstation {
+    id?: number; // 工作站编号
+    code?: string; // 工作站编码
+    name?: string; // 工作站名称
+    address?: string; // 工作站地点
+    workshopId?: number; // 所在车间编号
+    workshopName?: string; // 所在车间名称
+    processId?: number; // 工序编号
+    processName?: string; // 工序名称
+    warehouseId?: number; // 线边库编号
+    locationId?: number; // 库区编号
+    areaId?: number; // 库位编号
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工作站分页 */
+export function getWorkstationPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdWorkstationApi.Workstation>>(
+    '/mes/md-workstation/page',
+    { params },
+  );
+}
+
+/** 查询工作站详情 */
+export function getWorkstation(id: number) {
+  return requestClient.get<MesMdWorkstationApi.Workstation>(
+    `/mes/md-workstation/get?id=${id}`,
+  );
+}
+
+/** 新增工作站 */
+export function createWorkstation(data: MesMdWorkstationApi.Workstation) {
+  return requestClient.post<number>('/mes/md-workstation/create', data);
+}
+
+/** 修改工作站 */
+export function updateWorkstation(data: MesMdWorkstationApi.Workstation) {
+  return requestClient.put('/mes/md-workstation/update', data);
+}
+
+/** 删除工作站 */
+export function deleteWorkstation(id: number) {
+  return requestClient.delete(`/mes/md-workstation/delete?id=${id}`);
+}
+
+/** 导出工作站 */
+export function exportWorkstation(params: any) {
+  return requestClient.download('/mes/md-workstation/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/md/workstation/machine/index.ts b/apps/web-antd/src/api/mes/md/workstation/machine/index.ts
new file mode 100644
index 000000000..40dd8692b
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/workstation/machine/index.ts
@@ -0,0 +1,35 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkstationMachineApi {
+  /** MES 工作站设备资源 */
+  export interface WorkstationMachine {
+    id?: number; // 资源编号
+    workstationId?: number; // 工作站编号
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    quantity?: number; // 数量
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工作站设备资源列表 */
+export function getWorkstationMachineList(workstationId: number) {
+  return requestClient.get<MesMdWorkstationMachineApi.WorkstationMachine[]>(
+    '/mes/md-workstation-machine/list-by-workstation',
+    { params: { workstationId } },
+  );
+}
+
+/** 新增工作站设备资源 */
+export function createWorkstationMachine(
+  data: MesMdWorkstationMachineApi.WorkstationMachine,
+) {
+  return requestClient.post('/mes/md-workstation-machine/create', data);
+}
+
+/** 删除工作站设备资源 */
+export function deleteWorkstationMachine(id: number) {
+  return requestClient.delete(`/mes/md-workstation-machine/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/md/workstation/tool/index.ts b/apps/web-antd/src/api/mes/md/workstation/tool/index.ts
new file mode 100644
index 000000000..d98e5f122
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/workstation/tool/index.ts
@@ -0,0 +1,41 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkstationToolApi {
+  /** MES 工作站工装夹具资源 */
+  export interface WorkstationTool {
+    id?: number; // 资源编号
+    workstationId?: number; // 工作站编号
+    toolTypeId?: number; // 工具类型编号
+    toolTypeName?: string; // 工具类型名称
+    quantity?: number; // 数量
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工作站工装夹具资源列表 */
+export function getWorkstationToolList(workstationId: number) {
+  return requestClient.get<MesMdWorkstationToolApi.WorkstationTool[]>(
+    '/mes/md-workstation-tool/list-by-workstation',
+    { params: { workstationId } },
+  );
+}
+
+/** 新增工作站工装夹具资源 */
+export function createWorkstationTool(
+  data: MesMdWorkstationToolApi.WorkstationTool,
+) {
+  return requestClient.post('/mes/md-workstation-tool/create', data);
+}
+
+/** 修改工作站工装夹具资源 */
+export function updateWorkstationTool(
+  data: MesMdWorkstationToolApi.WorkstationTool,
+) {
+  return requestClient.put('/mes/md-workstation-tool/update', data);
+}
+
+/** 删除工作站工装夹具资源 */
+export function deleteWorkstationTool(id: number) {
+  return requestClient.delete(`/mes/md-workstation-tool/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/md/workstation/worker/index.ts b/apps/web-antd/src/api/mes/md/workstation/worker/index.ts
new file mode 100644
index 000000000..3bd4ab9ad
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/workstation/worker/index.ts
@@ -0,0 +1,41 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkstationWorkerApi {
+  /** MES 工作站人力资源 */
+  export interface WorkstationWorker {
+    id?: number; // 资源编号
+    workstationId?: number; // 工作站编号
+    postId?: number; // 岗位编号
+    postName?: string; // 岗位名称
+    quantity?: number; // 数量
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工作站人力资源列表 */
+export function getWorkstationWorkerList(workstationId: number) {
+  return requestClient.get<MesMdWorkstationWorkerApi.WorkstationWorker[]>(
+    '/mes/md-workstation-worker/list-by-workstation',
+    { params: { workstationId } },
+  );
+}
+
+/** 新增工作站人力资源 */
+export function createWorkstationWorker(
+  data: MesMdWorkstationWorkerApi.WorkstationWorker,
+) {
+  return requestClient.post('/mes/md-workstation-worker/create', data);
+}
+
+/** 修改工作站人力资源 */
+export function updateWorkstationWorker(
+  data: MesMdWorkstationWorkerApi.WorkstationWorker,
+) {
+  return requestClient.put('/mes/md-workstation-worker/update', data);
+}
+
+/** 删除工作站人力资源 */
+export function deleteWorkstationWorker(id: number) {
+  return requestClient.delete(`/mes/md-workstation-worker/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/mes/md/workstation/workshop/index.ts b/apps/web-antd/src/api/mes/md/workstation/workshop/index.ts
new file mode 100644
index 000000000..5a96399c9
--- /dev/null
+++ b/apps/web-antd/src/api/mes/md/workstation/workshop/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkshopApi {
+  /** MES 车间 */
+  export interface Workshop {
+    id?: number; // 车间编号
+    code?: string; // 车间编码
+    name?: string; // 车间名称
+    area?: number; // 面积
+    chargeUserId?: number; // 负责人用户编号
+    chargeUserName?: string; // 负责人名称
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询车间分页 */
+export function getWorkshopPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdWorkshopApi.Workshop>>(
+    '/mes/md-workshop/page',
+    { params },
+  );
+}
+
+/** 查询车间精简列表 */
+export function getWorkshopSimpleList() {
+  return requestClient.get<MesMdWorkshopApi.Workshop[]>(
+    '/mes/md-workshop/simple-list',
+  );
+}
+
+/** 查询车间详情 */
+export function getWorkshop(id: number) {
+  return requestClient.get<MesMdWorkshopApi.Workshop>(
+    `/mes/md-workshop/get?id=${id}`,
+  );
+}
+
+/** 新增车间 */
+export function createWorkshop(data: MesMdWorkshopApi.Workshop) {
+  return requestClient.post('/mes/md-workshop/create', data);
+}
+
+/** 修改车间 */
+export function updateWorkshop(data: MesMdWorkshopApi.Workshop) {
+  return requestClient.put('/mes/md-workshop/update', data);
+}
+
+/** 删除车间 */
+export function deleteWorkshop(id: number) {
+  return requestClient.delete(`/mes/md-workshop/delete?id=${id}`);
+}
+
+/** 导出车间 */
+export function exportWorkshop(params: any) {
+  return requestClient.download('/mes/md-workshop/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/pro/process/index.ts b/apps/web-antd/src/api/mes/pro/process/index.ts
new file mode 100644
index 000000000..5a3893b18
--- /dev/null
+++ b/apps/web-antd/src/api/mes/pro/process/index.ts
@@ -0,0 +1,38 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesProProcessApi {
+  /** MES 生产工序 */
+  export interface Process {
+    id: number;
+    code?: string;
+    name?: string;
+    attention?: string;
+    status?: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询生产工序分页 */
+export function getProcessPage(params: PageParam) {
+  return requestClient.get<PageResult<MesProProcessApi.Process>>(
+    '/mes/pro/process/page',
+    { params },
+  );
+}
+
+/** 查询生产工序精简列表 */
+export function getProcessSimpleList() {
+  return requestClient.get<MesProProcessApi.Process[]>(
+    '/mes/pro/process/simple-list',
+  );
+}
+
+/** 查询生产工序详情 */
+export function getProcess(id: number) {
+  return requestClient.get<MesProProcessApi.Process>(
+    `/mes/pro/process/get?id=${id}`,
+  );
+}
diff --git a/apps/web-antd/src/api/mes/tm/tool/index.ts b/apps/web-antd/src/api/mes/tm/tool/index.ts
new file mode 100644
index 000000000..80881aad3
--- /dev/null
+++ b/apps/web-antd/src/api/mes/tm/tool/index.ts
@@ -0,0 +1,59 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesTmToolApi {
+  /** MES 工具台账 */
+  export interface Tool {
+    id?: number; // 工具编号
+    code?: string; // 工具编码
+    name?: string; // 工具名称
+    brand?: string; // 品牌
+    specification?: string; // 型号规格
+    toolTypeId?: number; // 工具类型编号
+    toolTypeName?: string; // 工具类型名称
+    quantity?: number; // 数量
+    availableQuantity?: number; // 可用数量
+    maintenType?: number; // 保养维护类型
+    nextMaintenPeriod?: number; // 下次保养周期
+    nextMaintenDate?: Date | number; // 下次保养日期
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工具台账分页 */
+export function getToolPage(params: PageParam) {
+  return requestClient.get<PageResult<MesTmToolApi.Tool>>('/mes/tm/tool/page', { params });
+}
+
+/** 查询工具精简列表 */
+export function getToolSimpleList() {
+  return requestClient.get<MesTmToolApi.Tool[]>('/mes/tm/tool/simple-list');
+}
+
+/** 查询工具台账详情 */
+export function getTool(id: number) {
+  return requestClient.get<MesTmToolApi.Tool>(`/mes/tm/tool/get?id=${id}`);
+}
+
+/** 新增工具台账 */
+export function createTool(data: MesTmToolApi.Tool) {
+  return requestClient.post('/mes/tm/tool/create', data);
+}
+
+/** 修改工具台账 */
+export function updateTool(data: MesTmToolApi.Tool) {
+  return requestClient.put('/mes/tm/tool/update', data);
+}
+
+/** 删除工具台账 */
+export function deleteTool(id: number) {
+  return requestClient.delete(`/mes/tm/tool/delete?id=${id}`);
+}
+
+/** 导出工具台账 */
+export function exportTool(params: any) {
+  return requestClient.download('/mes/tm/tool/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/tm/tool/type/index.ts b/apps/web-antd/src/api/mes/tm/tool/type/index.ts
new file mode 100644
index 000000000..7ef6b2c59
--- /dev/null
+++ b/apps/web-antd/src/api/mes/tm/tool/type/index.ts
@@ -0,0 +1,52 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesTmToolTypeApi {
+  /** MES 工具类型 */
+  export interface ToolType {
+    id?: number; // 工具类型编号
+    code?: string; // 类型编码
+    name?: string; // 类型名称
+    codeFlag?: boolean; // 是否编码管理
+    maintenType?: number; // 保养维护类型
+    maintenPeriod?: number; // 保养周期
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工具类型分页 */
+export function getToolTypePage(params: PageParam) {
+  return requestClient.get<PageResult<MesTmToolTypeApi.ToolType>>('/mes/tm/tool-type/page', { params });
+}
+
+/** 查询工具类型精简列表 */
+export function getToolTypeSimpleList() {
+  return requestClient.get<MesTmToolTypeApi.ToolType[]>('/mes/tm/tool-type/simple-list');
+}
+
+/** 查询工具类型详情 */
+export function getToolType(id: number) {
+  return requestClient.get<MesTmToolTypeApi.ToolType>(`/mes/tm/tool-type/get?id=${id}`);
+}
+
+/** 新增工具类型 */
+export function createToolType(data: MesTmToolTypeApi.ToolType) {
+  return requestClient.post('/mes/tm/tool-type/create', data);
+}
+
+/** 修改工具类型 */
+export function updateToolType(data: MesTmToolTypeApi.ToolType) {
+  return requestClient.put('/mes/tm/tool-type/update', data);
+}
+
+/** 删除工具类型 */
+export function deleteToolType(id: number) {
+  return requestClient.delete(`/mes/tm/tool-type/delete?id=${id}`);
+}
+
+/** 导出工具类型 */
+export function exportToolType(params: any) {
+  return requestClient.download('/mes/tm/tool-type/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/mes/wm/barcode/index.ts b/apps/web-antd/src/api/mes/wm/barcode/index.ts
new file mode 100644
index 000000000..6cbf8a51e
--- /dev/null
+++ b/apps/web-antd/src/api/mes/wm/barcode/index.ts
@@ -0,0 +1,65 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmBarcodeApi {
+  /** MES 条码清单 */
+  export interface Barcode {
+    id?: number;
+    configId?: number;
+    format?: number;
+    bizType?: number;
+    content?: string;
+    bizId?: number;
+    bizCode?: string;
+    bizName?: string;
+    status?: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询条码分页 */
+export function getBarcodePage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmBarcodeApi.Barcode>>(
+    '/mes/wm/barcode/page',
+    { params },
+  );
+}
+
+/** 查询条码详情 */
+export function getBarcode(id: number) {
+  return requestClient.get<MesWmBarcodeApi.Barcode>(
+    `/mes/wm/barcode/get?id=${id}`,
+  );
+}
+
+/** 根据业务对象获取条码 */
+export function getBarcodeByBusiness(bizType: number, bizId: number) {
+  return requestClient.get<MesWmBarcodeApi.Barcode>(
+    '/mes/wm/barcode/get-by-business',
+    { params: { bizType, bizId } },
+  );
+}
+
+/** 新增条码 */
+export function createBarcode(data: MesWmBarcodeApi.Barcode) {
+  return requestClient.post('/mes/wm/barcode/create', data);
+}
+
+/** 修改条码 */
+export function updateBarcode(data: MesWmBarcodeApi.Barcode) {
+  return requestClient.put('/mes/wm/barcode/update', data);
+}
+
+/** 删除条码 */
+export function deleteBarcode(id: number) {
+  return requestClient.delete(`/mes/wm/barcode/delete?id=${id}`);
+}
+
+/** 生成条码内容 */
+export function generateBarcodeContent(bizType: number, bizCode: string) {
+  return requestClient.get<string>('/mes/wm/barcode/generate-content', {
+    params: { bizType, bizCode },
+  });
+}
diff --git a/apps/web-antd/src/api/mes/wm/itemreceipt/index.ts b/apps/web-antd/src/api/mes/wm/itemreceipt/index.ts
new file mode 100644
index 000000000..d7086de99
--- /dev/null
+++ b/apps/web-antd/src/api/mes/wm/itemreceipt/index.ts
@@ -0,0 +1,34 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesWmItemReceiptApi {
+  /** MES 采购入库单 */
+  export interface ItemReceipt {
+    id?: number; // 入库单编号
+    code?: string; // 入库单编码
+    name?: string; // 入库单名称
+    iqcId?: number; // 来料检验单编号
+    iqcCode?: string; // 来料检验单编码
+    noticeId?: number; // 到货通知单编号
+    noticeCode?: string; // 到货通知单编码
+    purchaseOrderCode?: string; // 采购订单号
+    vendorId?: number; // 供应商编号
+    vendorName?: string; // 供应商名称
+    warehouseId?: number; // 仓库编号
+    warehouseName?: string; // 仓库名称
+    locationId?: number; // 库区编号
+    locationName?: string; // 库区名称
+    areaId?: number; // 库位编号
+    areaName?: string; // 库位名称
+    receiptDate?: Date | number | string; // 入库日期
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询采购入库单详情 */
+export function getItemReceipt(id: number) {
+  return requestClient.get<MesWmItemReceiptApi.ItemReceipt>(
+    `/mes/wm/item-receipt/get?id=${id}`,
+  );
+}
diff --git a/apps/web-antd/src/api/mes/wm/itemreceipt/line/index.ts b/apps/web-antd/src/api/mes/wm/itemreceipt/line/index.ts
new file mode 100644
index 000000000..55562e84c
--- /dev/null
+++ b/apps/web-antd/src/api/mes/wm/itemreceipt/line/index.ts
@@ -0,0 +1,28 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmItemReceiptLineApi {
+  /** MES 物料接收单行 */
+  export interface ItemReceiptLine {
+    id?: number; // 行编号
+    receiptId?: number; // 入库单编号
+    receiptCode?: string; // 入库单编码
+    purchaseOrderCode?: string; // 采购订单号
+    itemId?: number; // 物料编号
+    itemCode?: string; // 物料编码
+    itemName?: string; // 物料名称
+    specification?: string; // 规格型号
+    unitMeasureName?: string; // 单位
+    receivedQuantity?: number; // 入库数量
+    batchCode?: string; // 批次号
+  }
+}
+
+/** 查询物料接收单行分页 */
+export function getItemReceiptLinePage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmItemReceiptLineApi.ItemReceiptLine>>(
+    '/mes/wm/item-receipt-line/page',
+    { params },
+  );
+}
diff --git a/apps/web-antd/src/api/mes/wm/productsales/index.ts b/apps/web-antd/src/api/mes/wm/productsales/index.ts
new file mode 100644
index 000000000..aa00d4556
--- /dev/null
+++ b/apps/web-antd/src/api/mes/wm/productsales/index.ts
@@ -0,0 +1,23 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmProductSalesApi {
+  /** MES 销售出库单 */
+  export interface ProductSales {
+    id?: number; // 销售出库单编号
+    code?: string; // 出库单编号
+    name?: string; // 出库单名称
+    salesOrderCode?: string; // 销售订单编号
+    salesDate?: Date; // 出库日期
+    status?: number; // 单据状态
+  }
+}
+
+/** 查询销售出库单分页 */
+export function getProductSalesPage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmProductSalesApi.ProductSales>>(
+    '/mes/wm/product-sales/page',
+    { params },
+  );
+}
diff --git a/apps/web-antd/src/api/mes/wm/productsales/line/index.ts b/apps/web-antd/src/api/mes/wm/productsales/line/index.ts
new file mode 100644
index 000000000..b66ef6ba7
--- /dev/null
+++ b/apps/web-antd/src/api/mes/wm/productsales/line/index.ts
@@ -0,0 +1,24 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmProductSalesLineApi {
+  /** MES 销售出库单行 */
+  export interface ProductSalesLine {
+    id?: number; // 行编号
+    itemId?: number; // 物料编号
+    itemCode?: string; // 物料编码
+    itemName?: string; // 物料名称
+    specification?: string; // 规格型号
+    unitMeasureName?: string; // 单位
+    quantity?: number; // 出库数量
+    batchCode?: string; // 批次号
+  }
+}
+
+/** 查询销售出库单行分页 */
+export function getProductSalesLinePage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MesWmProductSalesLineApi.ProductSalesLine>
+  >('/mes/wm/product-sales-line/page', { params });
+}
diff --git a/apps/web-antd/src/api/mes/wm/warehouse/area/index.ts b/apps/web-antd/src/api/mes/wm/warehouse/area/index.ts
new file mode 100644
index 000000000..cf5844ade
--- /dev/null
+++ b/apps/web-antd/src/api/mes/wm/warehouse/area/index.ts
@@ -0,0 +1,50 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmWarehouseAreaApi {
+  /** MES 库位 */
+  export interface WarehouseArea {
+    id?: number; // 库位编号
+    code?: string; // 库位编码
+    name?: string; // 库位名称
+    warehouseId?: number; // 仓库编号
+    warehouseName?: string; // 仓库名称
+    locationId?: number; // 库区编号
+    locationName?: string; // 库区名称
+    area?: number; // 面积
+    maxLoad?: number; // 最大载荷
+    positionX?: number; // X 坐标
+    positionY?: number; // Y 坐标
+    positionZ?: number; // Z 坐标
+    status?: number; // 状态
+    frozen?: boolean; // 是否冻结
+    allowItemMixing?: boolean; // 是否允许物料混放
+    allowBatchMixing?: boolean; // 是否允许批次混放
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询库位分页 */
+export function getWarehouseAreaPage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmWarehouseAreaApi.WarehouseArea>>(
+    '/mes/wm/warehouse-area/page',
+    { params },
+  );
+}
+
+/** 查询库位精简列表 */
+export function getWarehouseAreaSimpleList(locationId?: number) {
+  return requestClient.get<MesWmWarehouseAreaApi.WarehouseArea[]>(
+    '/mes/wm/warehouse-area/simple-list',
+    { params: { locationId } },
+  );
+}
+
+/** 查询库位详情 */
+export function getWarehouseArea(id: number) {
+  return requestClient.get<MesWmWarehouseAreaApi.WarehouseArea>(
+    `/mes/wm/warehouse-area/get?id=${id}`,
+  );
+}
diff --git a/apps/web-antd/src/api/mes/wm/warehouse/index.ts b/apps/web-antd/src/api/mes/wm/warehouse/index.ts
new file mode 100644
index 000000000..f68604790
--- /dev/null
+++ b/apps/web-antd/src/api/mes/wm/warehouse/index.ts
@@ -0,0 +1,40 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmWarehouseApi {
+  /** MES 仓库 */
+  export interface Warehouse {
+    id?: number; // 仓库编号
+    code?: string; // 仓库编码
+    name?: string; // 仓库名称
+    address?: string; // 地址
+    area?: number; // 面积
+    chargeUserId?: number; // 负责人
+    frozen?: boolean; // 是否冻结
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询仓库分页 */
+export function getWarehousePage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmWarehouseApi.Warehouse>>(
+    '/mes/wm/warehouse/page',
+    { params },
+  );
+}
+
+/** 查询仓库精简列表 */
+export function getWarehouseSimpleList() {
+  return requestClient.get<MesWmWarehouseApi.Warehouse[]>(
+    '/mes/wm/warehouse/simple-list',
+  );
+}
+
+/** 查询仓库详情 */
+export function getWarehouse(id: number) {
+  return requestClient.get<MesWmWarehouseApi.Warehouse>(
+    `/mes/wm/warehouse/get?id=${id}`,
+  );
+}
diff --git a/apps/web-antd/src/api/mes/wm/warehouse/location/index.ts b/apps/web-antd/src/api/mes/wm/warehouse/location/index.ts
new file mode 100644
index 000000000..e33fb180e
--- /dev/null
+++ b/apps/web-antd/src/api/mes/wm/warehouse/location/index.ts
@@ -0,0 +1,40 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmWarehouseLocationApi {
+  /** MES 库区 */
+  export interface WarehouseLocation {
+    id?: number; // 库区编号
+    code?: string; // 库区编码
+    name?: string; // 库区名称
+    warehouseId?: number; // 仓库编号
+    warehouseName?: string; // 仓库名称
+    area?: number; // 面积
+    frozen?: boolean; // 是否冻结
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询库区分页 */
+export function getWarehouseLocationPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MesWmWarehouseLocationApi.WarehouseLocation>
+  >('/mes/wm/warehouse-location/page', { params });
+}
+
+/** 查询库区精简列表 */
+export function getWarehouseLocationSimpleList(warehouseId?: number) {
+  return requestClient.get<MesWmWarehouseLocationApi.WarehouseLocation[]>(
+    '/mes/wm/warehouse-location/simple-list',
+    { params: { warehouseId } },
+  );
+}
+
+/** 查询库区详情 */
+export function getWarehouseLocation(id: number) {
+  return requestClient.get<MesWmWarehouseLocationApi.WarehouseLocation>(
+    `/mes/wm/warehouse-location/get?id=${id}`,
+  );
+}
diff --git a/apps/web-antd/src/api/wms/home/index.ts b/apps/web-antd/src/api/wms/home/index.ts
new file mode 100644
index 000000000..ae9577201
--- /dev/null
+++ b/apps/web-antd/src/api/wms/home/index.ts
@@ -0,0 +1,66 @@
+import { requestClient } from '#/api/request';
+
+export namespace WmsHomeStatisticsApi {
+  export interface StatisticsReq {
+    goodsLimit?: number;
+    warehouseId?: number;
+    warehouseLimit?: number;
+  }
+
+  export interface OrderStatus {
+    count: number;
+    status: number;
+  }
+
+  export interface OrderSummary {
+    statuses: OrderStatus[];
+    total: number;
+    type: number;
+  }
+
+  export interface OrderTrend {
+    checkCount: number;
+    movementCount: number;
+    receiptCount: number;
+    shipmentCount: number;
+    time: number | string;
+  }
+
+  export interface InventoryRankItem {
+    id: number;
+    name: string;
+    quantity: number;
+  }
+
+  export interface InventorySummary {
+    goodsShareList: InventoryRankItem[];
+    totalQuantity: number;
+    warehouseDistributionList: InventoryRankItem[];
+  }
+}
+
+export function getOrderSummary(params?: WmsHomeStatisticsApi.StatisticsReq) {
+  return requestClient.get<WmsHomeStatisticsApi.OrderSummary[]>(
+    '/wms/home-statistics/order-summary',
+    { params },
+  );
+}
+
+export function getOrderTrend(
+  days?: number,
+  params?: WmsHomeStatisticsApi.StatisticsReq,
+) {
+  return requestClient.get<WmsHomeStatisticsApi.OrderTrend[]>(
+    '/wms/home-statistics/order-trend',
+    { params: { ...params, days } },
+  );
+}
+
+export function getInventorySummary(
+  params?: WmsHomeStatisticsApi.StatisticsReq,
+) {
+  return requestClient.get<WmsHomeStatisticsApi.InventorySummary>(
+    '/wms/home-statistics/inventory-summary',
+    { params },
+  );
+}
diff --git a/apps/web-antd/src/api/wms/inventory/history/index.ts b/apps/web-antd/src/api/wms/inventory/history/index.ts
new file mode 100644
index 000000000..02f6bccd1
--- /dev/null
+++ b/apps/web-antd/src/api/wms/inventory/history/index.ts
@@ -0,0 +1,37 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsInventoryHistoryApi {
+  /** WMS 库存记录 */
+  export interface InventoryHistory {
+    id?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    quantity?: number;
+    beforeQuantity?: number;
+    afterQuantity?: number;
+    price?: number;
+    totalPrice?: number;
+    remark?: string;
+    orderId?: number;
+    orderNo?: string;
+    orderType?: number;
+    createTime?: Date;
+  }
+}
+
+/** 查询库存记录分页 */
+export function getInventoryHistoryPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsInventoryHistoryApi.InventoryHistory>>(
+    '/wms/inventory-history/page',
+    { params },
+  );
+}
diff --git a/apps/web-antd/src/api/wms/inventory/index.ts b/apps/web-antd/src/api/wms/inventory/index.ts
new file mode 100644
index 000000000..90ca4a11d
--- /dev/null
+++ b/apps/web-antd/src/api/wms/inventory/index.ts
@@ -0,0 +1,42 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsInventoryApi {
+  /** WMS 库存统计 */
+  export interface Inventory {
+    id?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    quantity?: number;
+    remark?: string;
+    createTime?: Date;
+  }
+
+  /** WMS 库存统计列表请求 */
+  export interface InventoryListReq {
+    warehouseId: number;
+  }
+}
+
+/** 查询库存统计分页 */
+export function getInventoryPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsInventoryApi.Inventory>>(
+    '/wms/inventory/page',
+    { params },
+  );
+}
+
+/** 查询库存统计列表 */
+export function getInventoryList(params: WmsInventoryApi.InventoryListReq) {
+  return requestClient.get<WmsInventoryApi.Inventory[]>('/wms/inventory/list', {
+    params,
+  });
+}
diff --git a/apps/web-antd/src/api/wms/md/item/brand/index.ts b/apps/web-antd/src/api/wms/md/item/brand/index.ts
new file mode 100644
index 000000000..a251b05ca
--- /dev/null
+++ b/apps/web-antd/src/api/wms/md/item/brand/index.ts
@@ -0,0 +1,55 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsItemBrandApi {
+  /** WMS 商品品牌 */
+  export interface ItemBrand {
+    id?: number;
+    code?: string;
+    name?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询商品品牌分页 */
+export function getItemBrandPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsItemBrandApi.ItemBrand>>(
+    '/wms/item-brand/page',
+    { params },
+  );
+}
+
+/** 查询商品品牌精简列表 */
+export function getItemBrandSimpleList() {
+  return requestClient.get<WmsItemBrandApi.ItemBrand[]>(
+    '/wms/item-brand/simple-list',
+  );
+}
+
+/** 查询商品品牌详情 */
+export function getItemBrand(id: number) {
+  return requestClient.get<WmsItemBrandApi.ItemBrand>(
+    `/wms/item-brand/get?id=${id}`,
+  );
+}
+
+/** 新增商品品牌 */
+export function createItemBrand(data: WmsItemBrandApi.ItemBrand) {
+  return requestClient.post('/wms/item-brand/create', data);
+}
+
+/** 修改商品品牌 */
+export function updateItemBrand(data: WmsItemBrandApi.ItemBrand) {
+  return requestClient.put('/wms/item-brand/update', data);
+}
+
+/** 删除商品品牌 */
+export function deleteItemBrand(id: number) {
+  return requestClient.delete(`/wms/item-brand/delete?id=${id}`);
+}
+
+/** 导出商品品牌 */
+export function exportItemBrand(params: any) {
+  return requestClient.download('/wms/item-brand/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/wms/md/item/category/index.ts b/apps/web-antd/src/api/wms/md/item/category/index.ts
new file mode 100644
index 000000000..be356f01e
--- /dev/null
+++ b/apps/web-antd/src/api/wms/md/item/category/index.ts
@@ -0,0 +1,52 @@
+import { requestClient } from '#/api/request';
+
+export namespace WmsItemCategoryApi {
+  /** WMS 商品分类 */
+  export interface ItemCategory {
+    id?: number;
+    parentId?: number;
+    code?: string;
+    name?: string;
+    sort?: number;
+    status?: number;
+    createTime?: Date;
+    children?: ItemCategory[];
+  }
+}
+
+/** 查询商品分类列表 */
+export function getItemCategoryList(params?: any) {
+  return requestClient.get<WmsItemCategoryApi.ItemCategory[]>(
+    '/wms/item-category/list',
+    { params },
+  );
+}
+
+/** 查询商品分类精简列表 */
+export function getItemCategorySimpleList() {
+  return requestClient.get<WmsItemCategoryApi.ItemCategory[]>(
+    '/wms/item-category/simple-list',
+  );
+}
+
+/** 查询商品分类详情 */
+export function getItemCategory(id: number) {
+  return requestClient.get<WmsItemCategoryApi.ItemCategory>(
+    `/wms/item-category/get?id=${id}`,
+  );
+}
+
+/** 新增商品分类 */
+export function createItemCategory(data: WmsItemCategoryApi.ItemCategory) {
+  return requestClient.post('/wms/item-category/create', data);
+}
+
+/** 修改商品分类 */
+export function updateItemCategory(data: WmsItemCategoryApi.ItemCategory) {
+  return requestClient.put('/wms/item-category/update', data);
+}
+
+/** 删除商品分类 */
+export function deleteItemCategory(id: number) {
+  return requestClient.delete(`/wms/item-category/delete?id=${id}`);
+}
diff --git a/apps/web-antd/src/api/wms/md/item/index.ts b/apps/web-antd/src/api/wms/md/item/index.ts
new file mode 100644
index 000000000..fda44706c
--- /dev/null
+++ b/apps/web-antd/src/api/wms/md/item/index.ts
@@ -0,0 +1,61 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsItemSkuApi } from './sku';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsItemApi {
+  /** WMS 商品 */
+  export interface Item {
+    id?: number;
+    code?: string;
+    name?: string;
+    categoryId?: number;
+    categoryName?: string;
+    unit?: string;
+    brandId?: number;
+    brandName?: string;
+    remark?: string;
+    skus?: WmsItemSkuApi.ItemSku[];
+    createTime?: Date;
+  }
+}
+
+/** 查询商品分页 */
+export function getItemPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsItemApi.Item>>('/wms/item/page', {
+    params,
+  });
+}
+
+/** 查询商品精简列表 */
+export function getItemSimpleList(params?: any) {
+  return requestClient.get<WmsItemApi.Item[]>('/wms/item/simple-list', {
+    params,
+  });
+}
+
+/** 查询商品详情 */
+export function getItem(id: number) {
+  return requestClient.get<WmsItemApi.Item>(`/wms/item/get?id=${id}`);
+}
+
+/** 新增商品 */
+export function createItem(data: WmsItemApi.Item) {
+  return requestClient.post('/wms/item/create', data);
+}
+
+/** 修改商品 */
+export function updateItem(data: WmsItemApi.Item) {
+  return requestClient.put('/wms/item/update', data);
+}
+
+/** 删除商品 */
+export function deleteItem(id: number) {
+  return requestClient.delete(`/wms/item/delete?id=${id}`);
+}
+
+/** 导出商品 */
+export function exportItem(params: any) {
+  return requestClient.download('/wms/item/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/wms/md/item/sku/index.ts b/apps/web-antd/src/api/wms/md/item/sku/index.ts
new file mode 100644
index 000000000..2296becf1
--- /dev/null
+++ b/apps/web-antd/src/api/wms/md/item/sku/index.ts
@@ -0,0 +1,37 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsItemSkuApi {
+  /** WMS 商品 SKU */
+  export interface ItemSku {
+    id?: number;
+    name?: string;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    categoryId?: number;
+    categoryName?: string;
+    unit?: string;
+    brandId?: number;
+    brandName?: string;
+    barCode?: string;
+    code?: string;
+    length?: number;
+    width?: number;
+    height?: number;
+    grossWeight?: number;
+    netWeight?: number;
+    costPrice?: number;
+    sellingPrice?: number;
+    createTime?: Date;
+  }
+}
+
+/** 按 SKU 维度分页（支持商品 / 品牌 / 分类多表联查筛选） */
+export function getItemSkuPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsItemSkuApi.ItemSku>>(
+    '/wms/item-sku/page',
+    { params },
+  );
+}
diff --git a/apps/web-antd/src/api/wms/md/merchant/index.ts b/apps/web-antd/src/api/wms/md/merchant/index.ts
new file mode 100644
index 000000000..93539f098
--- /dev/null
+++ b/apps/web-antd/src/api/wms/md/merchant/index.ts
@@ -0,0 +1,73 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsMerchantApi {
+  /** WMS 往来企业 */
+  export interface Merchant {
+    id?: number;
+    code?: string;
+    name?: string;
+    type?: number;
+    level?: string;
+    bankName?: string;
+    bankAccount?: string;
+    address?: string;
+    mobile?: string;
+    telephone?: string;
+    contact?: string;
+    email?: string;
+    remark?: string;
+    createTime?: Date;
+  }
+
+  /** WMS 往来企业精简列表请求 */
+  export interface MerchantSimpleListReq {
+    types?: number[];
+  }
+}
+
+/** 查询往来企业分页 */
+export function getMerchantPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsMerchantApi.Merchant>>(
+    '/wms/merchant/page',
+    { params },
+  );
+}
+
+/** 查询往来企业精简列表 */
+export function getMerchantSimpleList(
+  params?: WmsMerchantApi.MerchantSimpleListReq,
+) {
+  return requestClient.get<WmsMerchantApi.Merchant[]>(
+    '/wms/merchant/simple-list',
+    { params },
+  );
+}
+
+/** 查询往来企业详情 */
+export function getMerchant(id: number) {
+  return requestClient.get<WmsMerchantApi.Merchant>(
+    `/wms/merchant/get?id=${id}`,
+  );
+}
+
+/** 新增往来企业 */
+export function createMerchant(data: WmsMerchantApi.Merchant) {
+  return requestClient.post('/wms/merchant/create', data);
+}
+
+/** 修改往来企业 */
+export function updateMerchant(data: WmsMerchantApi.Merchant) {
+  return requestClient.put('/wms/merchant/update', data);
+}
+
+/** 删除往来企业 */
+export function deleteMerchant(id: number) {
+  return requestClient.delete(`/wms/merchant/delete?id=${id}`);
+}
+
+/** 导出往来企业 */
+export function exportMerchant(params: any) {
+  return requestClient.download('/wms/merchant/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/wms/md/warehouse/index.ts b/apps/web-antd/src/api/wms/md/warehouse/index.ts
new file mode 100644
index 000000000..2b99f3776
--- /dev/null
+++ b/apps/web-antd/src/api/wms/md/warehouse/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsWarehouseApi {
+  /** WMS 仓库 */
+  export interface Warehouse {
+    id?: number;
+    code?: string;
+    name?: string;
+    remark?: string;
+    sort?: number;
+    createTime?: Date;
+  }
+}
+
+/** 查询仓库分页 */
+export function getWarehousePage(params: PageParam) {
+  return requestClient.get<PageResult<WmsWarehouseApi.Warehouse>>(
+    '/wms/warehouse/page',
+    { params },
+  );
+}
+
+/** 查询仓库精简列表 */
+export function getWarehouseSimpleList() {
+  return requestClient.get<WmsWarehouseApi.Warehouse[]>(
+    '/wms/warehouse/simple-list',
+  );
+}
+
+/** 查询仓库详情 */
+export function getWarehouse(id: number) {
+  return requestClient.get<WmsWarehouseApi.Warehouse>(
+    `/wms/warehouse/get?id=${id}`,
+  );
+}
+
+/** 新增仓库 */
+export function createWarehouse(data: WmsWarehouseApi.Warehouse) {
+  return requestClient.post('/wms/warehouse/create', data);
+}
+
+/** 修改仓库 */
+export function updateWarehouse(data: WmsWarehouseApi.Warehouse) {
+  return requestClient.put('/wms/warehouse/update', data);
+}
+
+/** 删除仓库 */
+export function deleteWarehouse(id: number) {
+  return requestClient.delete(`/wms/warehouse/delete?id=${id}`);
+}
+
+/** 导出仓库 */
+export function exportWarehouse(params: any) {
+  return requestClient.download('/wms/warehouse/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/wms/order/check/detail/index.ts b/apps/web-antd/src/api/wms/order/check/detail/index.ts
new file mode 100644
index 000000000..ae34b2154
--- /dev/null
+++ b/apps/web-antd/src/api/wms/order/check/detail/index.ts
@@ -0,0 +1,23 @@
+export namespace WmsCheckOrderDetailApi {
+  /** WMS 盘库单明细 */
+  export interface CheckOrderDetail {
+    id?: number;
+    orderId?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    inventoryId?: number;
+    warehouseId?: number;
+    warehouseName?: string;
+    receiptTime?: Date;
+    quantity?: number;
+    checkQuantity?: number;
+    availableQuantity?: number;
+    price?: number;
+    createTime?: Date;
+  }
+}
diff --git a/apps/web-antd/src/api/wms/order/check/index.ts b/apps/web-antd/src/api/wms/order/check/index.ts
new file mode 100644
index 000000000..910c997d3
--- /dev/null
+++ b/apps/web-antd/src/api/wms/order/check/index.ts
@@ -0,0 +1,71 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsCheckOrderDetailApi } from './detail';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsCheckOrderApi {
+  /** WMS 盘库单 */
+  export interface CheckOrder {
+    id?: number;
+    no?: string;
+    orderTime?: string;
+    status?: number;
+    remark?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    totalQuantity?: number;
+    totalPrice?: number;
+    actualPrice?: number;
+    details?: WmsCheckOrderDetailApi.CheckOrderDetail[];
+    createTime?: Date;
+    creator?: string;
+    creatorName?: string;
+    updateTime?: Date;
+    updater?: string;
+    updaterName?: string;
+  }
+}
+
+export function getCheckOrderPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsCheckOrderApi.CheckOrder>>(
+    '/wms/check-order/page',
+    { params },
+  );
+}
+
+export function getCheckOrder(id: number) {
+  return requestClient.get<WmsCheckOrderApi.CheckOrder>(
+    `/wms/check-order/get?id=${id}`,
+  );
+}
+
+export function getCheckOrderDetailListByOrderId(orderId: number) {
+  return requestClient.get<WmsCheckOrderDetailApi.CheckOrderDetail[]>(
+    `/wms/check-order-detail/list-by-order-id?orderId=${orderId}`,
+  );
+}
+
+export function createCheckOrder(data: WmsCheckOrderApi.CheckOrder) {
+  return requestClient.post('/wms/check-order/create', data);
+}
+
+export function updateCheckOrder(data: WmsCheckOrderApi.CheckOrder) {
+  return requestClient.put('/wms/check-order/update', data);
+}
+
+export function completeCheckOrder(id: number) {
+  return requestClient.put(`/wms/check-order/complete?id=${id}`);
+}
+
+export function cancelCheckOrder(id: number) {
+  return requestClient.put(`/wms/check-order/cancel?id=${id}`);
+}
+
+export function deleteCheckOrder(id: number) {
+  return requestClient.delete(`/wms/check-order/delete?id=${id}`);
+}
+
+export function exportCheckOrder(params: any) {
+  return requestClient.download('/wms/check-order/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/wms/order/movement/detail/index.ts b/apps/web-antd/src/api/wms/order/movement/detail/index.ts
new file mode 100644
index 000000000..25a3aec6a
--- /dev/null
+++ b/apps/web-antd/src/api/wms/order/movement/detail/index.ts
@@ -0,0 +1,23 @@
+export namespace WmsMovementOrderDetailApi {
+  /** WMS 移库单明细 */
+  export interface MovementOrderDetail {
+    id?: number;
+    orderId?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    sourceWarehouseId?: number;
+    sourceWarehouseName?: string;
+    targetWarehouseId?: number;
+    targetWarehouseName?: string;
+    quantity?: number;
+    availableQuantity?: number;
+    price?: number;
+    totalPrice?: number;
+    createTime?: Date;
+  }
+}
diff --git a/apps/web-antd/src/api/wms/order/movement/index.ts b/apps/web-antd/src/api/wms/order/movement/index.ts
new file mode 100644
index 000000000..f6b9e3197
--- /dev/null
+++ b/apps/web-antd/src/api/wms/order/movement/index.ts
@@ -0,0 +1,72 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsMovementOrderDetailApi } from './detail';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsMovementOrderApi {
+  /** WMS 移库单 */
+  export interface MovementOrder {
+    id?: number;
+    no?: string;
+    orderTime?: string;
+    status?: number;
+    remark?: string;
+    sourceWarehouseId?: number;
+    sourceWarehouseName?: string;
+    targetWarehouseId?: number;
+    targetWarehouseName?: string;
+    totalQuantity?: number;
+    totalPrice?: number;
+    details?: WmsMovementOrderDetailApi.MovementOrderDetail[];
+    createTime?: Date;
+    creator?: string;
+    creatorName?: string;
+    updateTime?: Date;
+    updater?: string;
+    updaterName?: string;
+  }
+}
+
+export function getMovementOrderPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsMovementOrderApi.MovementOrder>>(
+    '/wms/movement-order/page',
+    { params },
+  );
+}
+
+export function getMovementOrder(id: number) {
+  return requestClient.get<WmsMovementOrderApi.MovementOrder>(
+    `/wms/movement-order/get?id=${id}`,
+  );
+}
+
+export function getMovementOrderDetailListByOrderId(orderId: number) {
+  return requestClient.get<WmsMovementOrderDetailApi.MovementOrderDetail[]>(
+    `/wms/movement-order-detail/list-by-order-id?orderId=${orderId}`,
+  );
+}
+
+export function createMovementOrder(data: WmsMovementOrderApi.MovementOrder) {
+  return requestClient.post('/wms/movement-order/create', data);
+}
+
+export function updateMovementOrder(data: WmsMovementOrderApi.MovementOrder) {
+  return requestClient.put('/wms/movement-order/update', data);
+}
+
+export function completeMovementOrder(id: number) {
+  return requestClient.put(`/wms/movement-order/complete?id=${id}`);
+}
+
+export function cancelMovementOrder(id: number) {
+  return requestClient.put(`/wms/movement-order/cancel?id=${id}`);
+}
+
+export function deleteMovementOrder(id: number) {
+  return requestClient.delete(`/wms/movement-order/delete?id=${id}`);
+}
+
+export function exportMovementOrder(params: any) {
+  return requestClient.download('/wms/movement-order/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/wms/order/receipt/detail/index.ts b/apps/web-antd/src/api/wms/order/receipt/detail/index.ts
new file mode 100644
index 000000000..0695c224d
--- /dev/null
+++ b/apps/web-antd/src/api/wms/order/receipt/detail/index.ts
@@ -0,0 +1,20 @@
+export namespace WmsReceiptOrderDetailApi {
+  /** WMS 入库单明细 */
+  export interface ReceiptOrderDetail {
+    id?: number;
+    orderId?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    quantity?: number;
+    price?: number;
+    totalPrice?: number;
+    createTime?: Date;
+  }
+}
diff --git a/apps/web-antd/src/api/wms/order/receipt/index.ts b/apps/web-antd/src/api/wms/order/receipt/index.ts
new file mode 100644
index 000000000..9c5a08a5e
--- /dev/null
+++ b/apps/web-antd/src/api/wms/order/receipt/index.ts
@@ -0,0 +1,74 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsReceiptOrderDetailApi } from './detail';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsReceiptOrderApi {
+  /** WMS 入库单 */
+  export interface ReceiptOrder {
+    id?: number;
+    no?: string;
+    type?: number;
+    orderTime?: string;
+    status?: number;
+    bizOrderNo?: string;
+    merchantId?: number;
+    merchantName?: string;
+    remark?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    totalQuantity?: number;
+    totalPrice?: number;
+    details?: WmsReceiptOrderDetailApi.ReceiptOrderDetail[];
+    createTime?: Date;
+    creator?: string;
+    creatorName?: string;
+    updateTime?: Date;
+    updater?: string;
+    updaterName?: string;
+  }
+}
+
+export function getReceiptOrderPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsReceiptOrderApi.ReceiptOrder>>(
+    '/wms/receipt-order/page',
+    { params },
+  );
+}
+
+export function getReceiptOrder(id: number) {
+  return requestClient.get<WmsReceiptOrderApi.ReceiptOrder>(
+    `/wms/receipt-order/get?id=${id}`,
+  );
+}
+
+export function getReceiptOrderDetailListByOrderId(orderId: number) {
+  return requestClient.get<WmsReceiptOrderDetailApi.ReceiptOrderDetail[]>(
+    `/wms/receipt-order-detail/list-by-order-id?orderId=${orderId}`,
+  );
+}
+
+export function createReceiptOrder(data: WmsReceiptOrderApi.ReceiptOrder) {
+  return requestClient.post('/wms/receipt-order/create', data);
+}
+
+export function updateReceiptOrder(data: WmsReceiptOrderApi.ReceiptOrder) {
+  return requestClient.put('/wms/receipt-order/update', data);
+}
+
+export function completeReceiptOrder(id: number) {
+  return requestClient.put(`/wms/receipt-order/complete?id=${id}`);
+}
+
+export function cancelReceiptOrder(id: number) {
+  return requestClient.put(`/wms/receipt-order/cancel?id=${id}`);
+}
+
+export function deleteReceiptOrder(id: number) {
+  return requestClient.delete(`/wms/receipt-order/delete?id=${id}`);
+}
+
+export function exportReceiptOrder(params: any) {
+  return requestClient.download('/wms/receipt-order/export-excel', { params });
+}
diff --git a/apps/web-antd/src/api/wms/order/shipment/detail/index.ts b/apps/web-antd/src/api/wms/order/shipment/detail/index.ts
new file mode 100644
index 000000000..17e796e18
--- /dev/null
+++ b/apps/web-antd/src/api/wms/order/shipment/detail/index.ts
@@ -0,0 +1,21 @@
+export namespace WmsShipmentOrderDetailApi {
+  /** WMS 出库单明细 */
+  export interface ShipmentOrderDetail {
+    id?: number;
+    orderId?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    quantity?: number;
+    availableQuantity?: number;
+    price?: number;
+    totalPrice?: number;
+    createTime?: Date;
+  }
+}
diff --git a/apps/web-antd/src/api/wms/order/shipment/index.ts b/apps/web-antd/src/api/wms/order/shipment/index.ts
new file mode 100644
index 000000000..b52dcdaca
--- /dev/null
+++ b/apps/web-antd/src/api/wms/order/shipment/index.ts
@@ -0,0 +1,74 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsShipmentOrderDetailApi } from './detail';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsShipmentOrderApi {
+  /** WMS 出库单 */
+  export interface ShipmentOrder {
+    id?: number;
+    no?: string;
+    type?: number;
+    orderTime?: string;
+    status?: number;
+    bizOrderNo?: string;
+    merchantId?: number;
+    merchantName?: string;
+    remark?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    totalQuantity?: number;
+    totalPrice?: number;
+    details?: WmsShipmentOrderDetailApi.ShipmentOrderDetail[];
+    createTime?: Date;
+    creator?: string;
+    creatorName?: string;
+    updateTime?: Date;
+    updater?: string;
+    updaterName?: string;
+  }
+}
+
+export function getShipmentOrderPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsShipmentOrderApi.ShipmentOrder>>(
+    '/wms/shipment-order/page',
+    { params },
+  );
+}
+
+export function getShipmentOrder(id: number) {
+  return requestClient.get<WmsShipmentOrderApi.ShipmentOrder>(
+    `/wms/shipment-order/get?id=${id}`,
+  );
+}
+
+export function getShipmentOrderDetailListByOrderId(orderId: number) {
+  return requestClient.get<WmsShipmentOrderDetailApi.ShipmentOrderDetail[]>(
+    `/wms/shipment-order-detail/list-by-order-id?orderId=${orderId}`,
+  );
+}
+
+export function createShipmentOrder(data: WmsShipmentOrderApi.ShipmentOrder) {
+  return requestClient.post('/wms/shipment-order/create', data);
+}
+
+export function updateShipmentOrder(data: WmsShipmentOrderApi.ShipmentOrder) {
+  return requestClient.put('/wms/shipment-order/update', data);
+}
+
+export function completeShipmentOrder(id: number) {
+  return requestClient.put(`/wms/shipment-order/complete?id=${id}`);
+}
+
+export function cancelShipmentOrder(id: number) {
+  return requestClient.put(`/wms/shipment-order/cancel?id=${id}`);
+}
+
+export function deleteShipmentOrder(id: number) {
+  return requestClient.delete(`/wms/shipment-order/delete?id=${id}`);
+}
+
+export function exportShipmentOrder(params: any) {
+  return requestClient.download('/wms/shipment-order/export-excel', { params });
+}
diff --git a/apps/web-antd/src/components/number-range-input/index.ts b/apps/web-antd/src/components/number-range-input/index.ts
new file mode 100644
index 000000000..f1647e75d
--- /dev/null
+++ b/apps/web-antd/src/components/number-range-input/index.ts
@@ -0,0 +1,39 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { markRaw } from 'vue';
+
+import NumberRangeInput from './number-range-input.vue';
+
+export { default as NumberRangeInput } from './number-range-input.vue';
+
+export type NumberRangeValue = [number | undefined, number | undefined];
+
+function splitNumberRange(minFieldName: string, maxFieldName: string) {
+  return (
+    value: NumberRangeValue | undefined,
+    setValue: (fieldName: string, value: number | undefined) => void,
+  ) => {
+    setValue(minFieldName, value?.[0]);
+    setValue(maxFieldName, value?.[1]);
+    return undefined;
+  };
+}
+
+export function buildNumberRangeSchema(
+  label: string,
+  fieldName: string,
+  minFieldName: string,
+  maxFieldName: string,
+  precision: number,
+): VbenFormSchema {
+  return {
+    component: markRaw(NumberRangeInput),
+    componentProps: {
+      min: 0,
+      precision,
+    },
+    fieldName,
+    label,
+    valueFormat: splitNumberRange(minFieldName, maxFieldName),
+  };
+}
diff --git a/apps/web-antd/src/components/number-range-input/number-range-input.vue b/apps/web-antd/src/components/number-range-input/number-range-input.vue
new file mode 100644
index 000000000..6ee67c046
--- /dev/null
+++ b/apps/web-antd/src/components/number-range-input/number-range-input.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { InputNumber } from 'ant-design-vue';
+
+type NumberRangeValue = [number | undefined, number | undefined];
+
+const props = withDefaults(
+  defineProps<{
+    maxPlaceholder?: string;
+    min?: number;
+    minPlaceholder?: string;
+    precision?: number;
+    value?: NumberRangeValue;
+  }>(),
+  {
+    maxPlaceholder: '最大值',
+    min: undefined,
+    minPlaceholder: '最小值',
+    precision: 2,
+    value: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  'update:value': [value: NumberRangeValue | undefined];
+}>();
+
+function normalizeValue(value: unknown) {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : undefined;
+  }
+  if (typeof value === 'string' && value.trim() !== '') {
+    const numberValue = Number(value);
+    return Number.isFinite(numberValue) ? numberValue : undefined;
+  }
+  return undefined;
+}
+
+function updateValue(index: 0 | 1, value: unknown) {
+  const next: NumberRangeValue = [
+    props.value?.[0] ?? undefined,
+    props.value?.[1] ?? undefined,
+  ];
+  next[index] = normalizeValue(value);
+  emit(
+    'update:value',
+    next[0] === undefined && next[1] === undefined ? undefined : next,
+  );
+}
+</script>
+
+<template>
+  <div class="flex w-full items-center gap-2">
+    <InputNumber
+      :controls="false"
+      :min="min"
+      :placeholder="minPlaceholder"
+      :precision="precision"
+      :value="value?.[0]"
+      class="min-w-0 flex-1"
+      @update:value="updateValue(0, $event)"
+    />
+    <span class="shrink-0 text-muted-foreground">至</span>
+    <InputNumber
+      :controls="false"
+      :min="min"
+      :placeholder="maxPlaceholder"
+      :precision="precision"
+      :value="value?.[1]"
+      class="min-w-0 flex-1"
+      @update:value="updateValue(1, $event)"
+    />
+  </div>
+</template>
diff --git a/apps/web-antd/src/router/routes/modules/iot.ts b/apps/web-antd/src/router/routes/modules/iot.ts
index 2bc6d32b2..ec0191863 100644
--- a/apps/web-antd/src/router/routes/modules/iot.ts
+++ b/apps/web-antd/src/router/routes/modules/iot.ts
@@ -37,7 +37,7 @@ const routes: RouteRecordRaw[] = [
           activePath: '/iot/ota',
         },
         component: () =>
-          import('#/views/iot/ota/modules/firmware-detail/index.vue'),
+          import('#/views/iot/ota/firmware/detail/index.vue'),
       },
     ],
   },
diff --git a/apps/web-antd/src/views/ai/chat/index/data.ts b/apps/web-antd/src/views/ai/chat/index/data.ts
index 3fa7928a6..e29d891f3 100644
--- a/apps/web-antd/src/views/ai/chat/index/data.ts
+++ b/apps/web-antd/src/views/ai/chat/index/data.ts
@@ -41,6 +41,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '温度参数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入温度参数',
         precision: 2,
         min: 0,
@@ -53,6 +54,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '回复数 Token 数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入回复数 Token 数',
         min: 0,
         max: 8192,
@@ -64,6 +66,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '上下文数量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入上下文数量',
         min: 0,
         max: 20,
diff --git a/apps/web-antd/src/views/ai/knowledge/document/data.ts b/apps/web-antd/src/views/ai/knowledge/document/data.ts
index 46f251a18..69ccd434e 100644
--- a/apps/web-antd/src/views/ai/knowledge/document/data.ts
+++ b/apps/web-antd/src/views/ai/knowledge/document/data.ts
@@ -52,6 +52,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '检索 topK',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入检索 topK',
         min: 0,
         max: 10,
@@ -63,6 +64,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '检索相似度阈值',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入检索相似度阈值',
         min: 0,
         max: 1,
diff --git a/apps/web-antd/src/views/ai/knowledge/knowledge/data.ts b/apps/web-antd/src/views/ai/knowledge/knowledge/data.ts
index fcfa96da2..6c4cd03dc 100644
--- a/apps/web-antd/src/views/ai/knowledge/knowledge/data.ts
+++ b/apps/web-antd/src/views/ai/knowledge/knowledge/data.ts
@@ -55,6 +55,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '检索 topK',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入检索 topK',
         min: 0,
         max: 10,
@@ -66,6 +67,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '检索相似度阈值',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入检索相似度阈值',
         min: 0,
         max: 1,
diff --git a/apps/web-antd/src/views/ai/model/chatRole/data.ts b/apps/web-antd/src/views/ai/model/chatRole/data.ts
index 81ea7e7c1..b57bf56f9 100644
--- a/apps/web-antd/src/views/ai/model/chatRole/data.ts
+++ b/apps/web-antd/src/views/ai/model/chatRole/data.ts
@@ -154,6 +154,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '角色排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入角色排序',
       },
       dependencies: {
diff --git a/apps/web-antd/src/views/ai/model/model/data.ts b/apps/web-antd/src/views/ai/model/model/data.ts
index 1ef554c59..8680a0c5b 100644
--- a/apps/web-antd/src/views/ai/model/model/data.ts
+++ b/apps/web-antd/src/views/ai/model/model/data.ts
@@ -84,6 +84,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '模型排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入模型排序',
       },
       rules: 'required',
@@ -104,6 +105,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '温度参数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入温度参数',
         min: 0,
         max: 2,
@@ -121,6 +123,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '回复数 Token 数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         max: 8192,
         placeholder: '请输入回复数 Token 数',
@@ -138,6 +141,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '上下文数量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         max: 20,
         placeholder: '请输入上下文数量',
diff --git a/apps/web-antd/src/views/bpm/category/data.ts b/apps/web-antd/src/views/bpm/category/data.ts
index 14b2b98ed..6407ada71 100644
--- a/apps/web-antd/src/views/bpm/category/data.ts
+++ b/apps/web-antd/src/views/bpm/category/data.ts
@@ -60,6 +60,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '分类排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入分类排序',
       },
diff --git a/apps/web-antd/src/views/crm/business/data.ts b/apps/web-antd/src/views/crm/business/data.ts
index ab71445ec..818f1a0af 100644
--- a/apps/web-antd/src/views/crm/business/data.ts
+++ b/apps/web-antd/src/views/crm/business/data.ts
@@ -118,6 +118,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '产品总金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         disabled: true,
@@ -130,6 +131,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '整单折扣（%）',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         placeholder: '请输入整单折扣',
@@ -141,6 +143,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '折扣后金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         disabled: true,
diff --git a/apps/web-antd/src/views/crm/contract/config/data.ts b/apps/web-antd/src/views/crm/contract/config/data.ts
index 2792b3601..ad6b5642c 100644
--- a/apps/web-antd/src/views/crm/contract/config/data.ts
+++ b/apps/web-antd/src/views/crm/contract/config/data.ts
@@ -17,6 +17,7 @@ export const schema: VbenFormSchema[] = [
     component: 'InputNumber',
     fieldName: 'notifyDays',
     componentProps: {
+      class: '!w-full',
       min: 0,
       precision: 0,
     },
diff --git a/apps/web-antd/src/views/crm/contract/data.ts b/apps/web-antd/src/views/crm/contract/data.ts
index 4289c6d1d..ffed30269 100644
--- a/apps/web-antd/src/views/crm/contract/data.ts
+++ b/apps/web-antd/src/views/crm/contract/data.ts
@@ -198,6 +198,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '产品总金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         placeholder: '请输入产品总金额',
@@ -209,6 +210,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '整单折扣（%）',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         placeholder: '请输入整单折扣',
@@ -220,6 +222,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '折扣后金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         disabled: true,
diff --git a/apps/web-antd/src/views/crm/customer/limitConfig/data.ts b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
index 914116b16..afcf66ce6 100644
--- a/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
+++ b/apps/web-antd/src/views/crm/customer/limitConfig/data.ts
@@ -65,6 +65,7 @@ export function useFormSchema(confType: LimitConfType): VbenFormSchema[] {
           : '锁定客户数上限',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: `请输入${
           LimitConfType.CUSTOMER_QUANTITY_LIMIT === confType
             ? '拥有客户数上限'
diff --git a/apps/web-antd/src/views/crm/customer/poolConfig/data.ts b/apps/web-antd/src/views/crm/customer/poolConfig/data.ts
index 86fd9f82f..8c5bbadf6 100644
--- a/apps/web-antd/src/views/crm/customer/poolConfig/data.ts
+++ b/apps/web-antd/src/views/crm/customer/poolConfig/data.ts
@@ -16,6 +16,7 @@ export const schema: VbenFormSchema[] = [
     component: 'InputNumber',
     fieldName: 'contactExpireDays',
     componentProps: {
+      class: '!w-full',
       min: 0,
       precision: 0,
     },
@@ -35,6 +36,7 @@ export const schema: VbenFormSchema[] = [
       addonAfter: () => '天未成交',
     }),
     componentProps: {
+      class: '!w-full',
       min: 0,
       precision: 0,
     },
@@ -63,6 +65,7 @@ export const schema: VbenFormSchema[] = [
     component: 'InputNumber',
     fieldName: 'notifyDays',
     componentProps: {
+      class: '!w-full',
       min: 0,
       precision: 0,
     },
diff --git a/apps/web-antd/src/views/crm/product/data.ts b/apps/web-antd/src/views/crm/product/data.ts
index 858b16908..5dd7d4565 100644
--- a/apps/web-antd/src/views/crm/product/data.ts
+++ b/apps/web-antd/src/views/crm/product/data.ts
@@ -92,6 +92,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '价格（元）',
       rules: 'required',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         step: 0.1,
diff --git a/apps/web-antd/src/views/crm/receivable/data.ts b/apps/web-antd/src/views/crm/receivable/data.ts
index f7f9c95d2..eacd97c34 100644
--- a/apps/web-antd/src/views/crm/receivable/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/data.ts
@@ -141,6 +141,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       rules: 'required',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入回款金额',
         min: 0,
         precision: 2,
diff --git a/apps/web-antd/src/views/crm/receivable/plan/data.ts b/apps/web-antd/src/views/crm/receivable/plan/data.ts
index b8e848493..bd5ef2212 100644
--- a/apps/web-antd/src/views/crm/receivable/plan/data.ts
+++ b/apps/web-antd/src/views/crm/receivable/plan/data.ts
@@ -96,6 +96,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       rules: 'required',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入计划回款金额',
         min: 0,
         precision: 2,
@@ -119,6 +120,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '提前几天提醒',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入提前几天提醒',
         min: 0,
       },
diff --git a/apps/web-antd/src/views/erp/finance/account/data.ts b/apps/web-antd/src/views/erp/finance/account/data.ts
index 0b4495b1a..5edc769fa 100644
--- a/apps/web-antd/src/views/erp/finance/account/data.ts
+++ b/apps/web-antd/src/views/erp/finance/account/data.ts
@@ -44,6 +44,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入排序',
         precision: 0,
       },
diff --git a/apps/web-antd/src/views/erp/finance/payment/data.ts b/apps/web-antd/src/views/erp/finance/payment/data.ts
index f4a9a61a9..cd8e32712 100644
--- a/apps/web-antd/src/views/erp/finance/payment/data.ts
+++ b/apps/web-antd/src/views/erp/finance/payment/data.ts
@@ -129,6 +129,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '合计付款',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '合计付款',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -140,6 +141,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         disabled: formType === 'detail',
         placeholder: '请输入优惠金额',
         precision: 2,
@@ -151,6 +153,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '实际付款',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '实际付款',
         precision: 2,
         formatter: erpPriceInputFormatter,
diff --git a/apps/web-antd/src/views/erp/finance/receipt/data.ts b/apps/web-antd/src/views/erp/finance/receipt/data.ts
index 774ddb0b1..4e325aa8b 100644
--- a/apps/web-antd/src/views/erp/finance/receipt/data.ts
+++ b/apps/web-antd/src/views/erp/finance/receipt/data.ts
@@ -129,6 +129,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '合计收款',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '合计收款',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -140,6 +141,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         disabled: formType === 'detail',
         placeholder: '请输入优惠金额',
         precision: 2,
@@ -151,6 +153,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '实际收款',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '实际收款',
         precision: 2,
         formatter: erpPriceInputFormatter,
diff --git a/apps/web-antd/src/views/erp/product/category/data.ts b/apps/web-antd/src/views/erp/product/category/data.ts
index 283566a25..d3e937247 100644
--- a/apps/web-antd/src/views/erp/product/category/data.ts
+++ b/apps/web-antd/src/views/erp/product/category/data.ts
@@ -65,6 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入显示顺序',
       },
diff --git a/apps/web-antd/src/views/erp/product/product/data.ts b/apps/web-antd/src/views/erp/product/product/data.ts
index 23664dd5e..7fbf70f52 100644
--- a/apps/web-antd/src/views/erp/product/product/data.ts
+++ b/apps/web-antd/src/views/erp/product/product/data.ts
@@ -92,6 +92,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '保质期天数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入保质期天数',
       },
     },
@@ -100,6 +101,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '重量（kg）',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入重量（kg）',
       },
     },
@@ -108,6 +110,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '采购价格',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入采购价格，单位：元',
         precision: 2,
         min: 0,
@@ -119,6 +122,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '销售价格',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入销售价格，单位：元',
         precision: 2,
         min: 0,
@@ -130,6 +134,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '最低价格',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入最低价格，单位：元',
         precision: 2,
         min: 0,
diff --git a/apps/web-antd/src/views/erp/purchase/in/data.ts b/apps/web-antd/src/views/erp/purchase/in/data.ts
index 2334ad260..e86c71a25 100644
--- a/apps/web-antd/src/views/erp/purchase/in/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/in/data.ts
@@ -117,6 +117,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠率(%)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入优惠率',
         min: 0,
         max: 100,
@@ -129,6 +130,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '付款优惠',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '付款优惠',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -140,6 +142,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠后金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '优惠后金额',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -160,6 +163,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '其他费用',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         disabled: formType === 'detail',
         placeholder: '请输入其他费用',
         precision: 2,
@@ -184,6 +188,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '应付金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         precision: 2,
         min: 0,
         disabled: true,
diff --git a/apps/web-antd/src/views/erp/purchase/order/data.ts b/apps/web-antd/src/views/erp/purchase/order/data.ts
index a8cb484e7..d57964b69 100644
--- a/apps/web-antd/src/views/erp/purchase/order/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/order/data.ts
@@ -103,6 +103,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠率(%)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入优惠率',
         min: 0,
         max: 100,
@@ -115,6 +116,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '付款优惠',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '付款优惠',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -126,6 +128,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠后金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '优惠后金额',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -148,6 +151,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
     {
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入支付订金',
         precision: 2,
         min: 0,
diff --git a/apps/web-antd/src/views/erp/purchase/return/data.ts b/apps/web-antd/src/views/erp/purchase/return/data.ts
index ca3697d87..db3dc016b 100644
--- a/apps/web-antd/src/views/erp/purchase/return/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/return/data.ts
@@ -117,6 +117,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠率(%)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入优惠率',
         min: 0,
         max: 100,
@@ -129,6 +130,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '退款优惠',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         precision: 2,
         formatter: erpPriceInputFormatter,
         disabled: true,
@@ -139,6 +141,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠后金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '优惠后金额',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -159,6 +162,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '其他费用',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         disabled: formType === 'detail',
         placeholder: '请输入其他费用',
         precision: 2,
@@ -183,6 +187,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '应退金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         precision: 2,
         min: 0,
         disabled: true,
diff --git a/apps/web-antd/src/views/erp/purchase/supplier/data.ts b/apps/web-antd/src/views/erp/purchase/supplier/data.ts
index a5edc25ef..7d4d1d29e 100644
--- a/apps/web-antd/src/views/erp/purchase/supplier/data.ts
+++ b/apps/web-antd/src/views/erp/purchase/supplier/data.ts
@@ -82,6 +82,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入排序',
       },
       rules: 'required',
@@ -99,6 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '税率(%)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入税率',
         min: 0,
         precision: 2,
diff --git a/apps/web-antd/src/views/erp/sale/customer/data.ts b/apps/web-antd/src/views/erp/sale/customer/data.ts
index b8327e0fb..eb3230ace 100644
--- a/apps/web-antd/src/views/erp/sale/customer/data.ts
+++ b/apps/web-antd/src/views/erp/sale/customer/data.ts
@@ -82,6 +82,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入排序',
         precision: 0,
       },
@@ -100,6 +101,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '税率(%)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入税率',
         precision: 2,
       },
diff --git a/apps/web-antd/src/views/erp/sale/order/data.ts b/apps/web-antd/src/views/erp/sale/order/data.ts
index 8764ce452..f6114e56d 100644
--- a/apps/web-antd/src/views/erp/sale/order/data.ts
+++ b/apps/web-antd/src/views/erp/sale/order/data.ts
@@ -116,6 +116,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠率(%)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入优惠率',
         min: 0,
         max: 100,
@@ -128,6 +129,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '付款优惠',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '收款优惠',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -139,6 +141,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠后金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '优惠后金额',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -161,6 +164,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
     {
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入收取订金',
         precision: 2,
         min: 0,
diff --git a/apps/web-antd/src/views/erp/sale/out/data.ts b/apps/web-antd/src/views/erp/sale/out/data.ts
index 9ad4cb2bb..ba1527b75 100644
--- a/apps/web-antd/src/views/erp/sale/out/data.ts
+++ b/apps/web-antd/src/views/erp/sale/out/data.ts
@@ -134,6 +134,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠率(%)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入优惠率',
         min: 0,
         max: 100,
@@ -146,6 +147,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '收款优惠',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '付款优惠',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -157,6 +159,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠后金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '优惠后金额',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -177,6 +180,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '其他费用',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         disabled: formType === 'detail',
         placeholder: '请输入其他费用',
         precision: 2,
@@ -204,6 +208,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '应收金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         precision: 2,
         min: 0,
         disabled: true,
diff --git a/apps/web-antd/src/views/erp/sale/return/data.ts b/apps/web-antd/src/views/erp/sale/return/data.ts
index d0ceeab47..d325cab83 100644
--- a/apps/web-antd/src/views/erp/sale/return/data.ts
+++ b/apps/web-antd/src/views/erp/sale/return/data.ts
@@ -130,6 +130,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠率(%)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入优惠率',
         min: 0,
         max: 100,
@@ -142,6 +143,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '退款优惠',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         precision: 2,
         formatter: erpPriceInputFormatter,
         disabled: true,
@@ -152,6 +154,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '优惠后金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '优惠后金额',
         precision: 2,
         formatter: erpPriceInputFormatter,
@@ -172,6 +175,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '其他费用',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         disabled: formType === 'detail',
         placeholder: '请输入其他费用',
         precision: 2,
@@ -197,6 +201,7 @@ export function useFormSchema(formType: string): VbenFormSchema[] {
       label: '应收金额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         precision: 2,
         min: 0,
         disabled: true,
diff --git a/apps/web-antd/src/views/erp/stock/warehouse/data.ts b/apps/web-antd/src/views/erp/stock/warehouse/data.ts
index ff8045b83..5fa2462e9 100644
--- a/apps/web-antd/src/views/erp/stock/warehouse/data.ts
+++ b/apps/web-antd/src/views/erp/stock/warehouse/data.ts
@@ -51,6 +51,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '仓储费(元)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入仓储费，单位：元/天/KG',
         min: 0,
         precision: 2,
@@ -61,6 +62,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '搬运费(元)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入搬运费，单位：元',
         min: 0,
         precision: 2,
@@ -79,6 +81,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入排序',
         precision: 0,
       },
diff --git a/apps/web-antd/src/views/infra/fileConfig/data.ts b/apps/web-antd/src/views/infra/fileConfig/data.ts
index b34729dd4..fade8bfd3 100644
--- a/apps/web-antd/src/views/infra/fileConfig/data.ts
+++ b/apps/web-antd/src/views/infra/fileConfig/data.ts
@@ -82,6 +82,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '主机端口',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入主机端口',
       },
diff --git a/apps/web-antd/src/views/infra/job/data.ts b/apps/web-antd/src/views/infra/job/data.ts
index 31811a055..44d4ec2b2 100644
--- a/apps/web-antd/src/views/infra/job/data.ts
+++ b/apps/web-antd/src/views/infra/job/data.ts
@@ -68,6 +68,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '重试次数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入重试次数。设置为 0 时，不进行重试',
         min: 0,
       },
@@ -78,6 +79,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '重试间隔',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入重试间隔，单位：毫秒。设置为 0 时，无需间隔',
         min: 0,
       },
@@ -88,6 +90,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '监控超时时间',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入监控超时时间，单位：毫秒',
         min: 0,
       },
diff --git a/apps/web-antd/src/views/iot/alert/config/data.ts b/apps/web-antd/src/views/iot/alert/config/data.ts
index c45a95a74..063de59b8 100644
--- a/apps/web-antd/src/views/iot/alert/config/data.ts
+++ b/apps/web-antd/src/views/iot/alert/config/data.ts
@@ -1,7 +1,8 @@
 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 { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getSimpleRuleSceneList } from '#/api/iot/rule/scene';
@@ -56,6 +57,7 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
+      defaultValue: CommonStatusEnum.ENABLE,
       rules: 'required',
     },
     {
@@ -69,6 +71,7 @@ export function useFormSchema(): VbenFormSchema[] {
         mode: 'multiple',
         placeholder: '请选择关联的场景联动规则',
       },
+      defaultValue: [],
       rules: 'required',
     },
     {
@@ -82,6 +85,7 @@ export function useFormSchema(): VbenFormSchema[] {
         mode: 'multiple',
         placeholder: '请选择接收的用户',
       },
+      defaultValue: [],
       rules: 'required',
     },
     {
@@ -93,6 +97,7 @@ export function useFormSchema(): VbenFormSchema[] {
         mode: 'multiple',
         placeholder: '请选择接收类型',
       },
+      defaultValue: [],
       rules: 'required',
     },
   ];
@@ -133,9 +138,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 +159,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 +177,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-antd/src/views/iot/alert/config/index.vue b/apps/web-antd/src/views/iot/alert/config/index.vue
index 0f23562bc..98cc61c27 100644
--- a/apps/web-antd/src/views/iot/alert/config/index.vue
+++ b/apps/web-antd/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 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 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-antd/src/views/iot/alert/modules/alert-config-form.vue b/apps/web-antd/src/views/iot/alert/config/modules/form.vue
similarity index 85%
rename from apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue
rename to apps/web-antd/src/views/iot/alert/config/modules/form.vue
index 76172f8f5..c91ef1c8b 100644
--- a/apps/web-antd/src/views/iot/alert/modules/alert-config-form.vue
+++ b/apps/web-antd/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-antd/src/views/iot/alert/record/data.ts b/apps/web-antd/src/views/iot/alert/record/data.ts
index 2c5ef9a84..3123c0188 100644
--- a/apps/web-antd/src/views/iot/alert/record/data.ts
+++ b/apps/web-antd/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 [
@@ -66,7 +75,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       label: '是否处理',
       component: 'Select',
       componentProps: {
-        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING),
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
         placeholder: '请选择是否处理',
         allowClear: true,
       },
@@ -84,9 +93,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 +109,25 @@ 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-antd/src/views/iot/alert/record/index.vue b/apps/web-antd/src/views/iot/alert/record/index.vue
index 64ba6cfac..7a01e04ac 100644
--- a/apps/web-antd/src/views/iot/alert/record/index.vue
+++ b/apps/web-antd/src/views/iot/alert/record/index.vue
@@ -1,110 +1,62 @@
-<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 'ant-design-vue';
+import { Button, Input, message, Modal, Popover } from 'ant-design-vue';
 
 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) {
+      if (!processRemark.value) {
         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 +64,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,35 +91,13 @@ 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"
@@ -215,7 +106,7 @@ onMounted(() => {
           :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 +115,6 @@ onMounted(() => {
         </Popover>
         <span v-else class="text-gray-400">-</span>
       </template>
-
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -233,16 +122,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-antd/src/views/iot/device/device/data.ts b/apps/web-antd/src/views/iot/device/device/data.ts
index c53c0e207..3eb5ebb1b 100644
--- a/apps/web-antd/src/views/iot/device/device/data.ts
+++ b/apps/web-antd/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';
@@ -122,8 +123,8 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
       label: '设备经度',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入设备经度',
-        class: 'w-full',
         min: -180,
         max: 180,
         precision: 6,
@@ -140,8 +141,8 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
       label: '设备纬度',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入设备纬度',
-        class: 'w-full',
         min: -90,
         max: 90,
         precision: 6,
@@ -268,7 +269,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<IotDeviceApi.Device>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
diff --git a/apps/web-antd/src/views/iot/device/device/detail/index.vue b/apps/web-antd/src/views/iot/device/device/detail/index.vue
index cbe9319e7..26457759e 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/index.vue
+++ b/apps/web-antd/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';
@@ -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) {
@@ -113,11 +111,11 @@ onMounted(async () => {
       </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"
         />
       </Tabs.TabPane>
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/config.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/config.vue
index 8f263d28c..b45349dda 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/config.vue
+++ b/apps/web-antd/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 'ant-design-vue';
+import { Alert, Button, message, Popconfirm, Textarea } from 'ant-design-vue';
 
 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-antd/src/views/iot/device/device/detail/modules/header.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/header.vue
index 8a739a180..89cc51d33 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/header.vue
+++ b/apps/web-antd/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']"
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/message.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/message.vue
index 04d07f3c0..965d5eb24 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/message.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/message.vue
@@ -24,16 +24,13 @@ 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; // 自动刷新定时器
 
 /** 消息方法选项 */
 const methodOptions = computed(() => {
@@ -44,7 +41,7 @@ const methodOptions = computed(() => {
 });
 
 /** Grid 列定义 */
-function useGridColumns(): VxeTableGridOptions['columns'] {
+function useGridColumns(): VxeTableGridOptions<Record<string, any>>['columns'] {
   return [
     {
       field: 'ts',
@@ -209,7 +206,7 @@ defineExpose({
       </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-antd/src/views/iot/device/device/detail/modules/modbus-config-form.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config-form.vue
index fb792d4e7..669b01fbf 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config-form.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config-form.vue
@@ -5,7 +5,12 @@ import type { IotDeviceModbusConfigApi } from '#/api/iot/device/modbus/config';
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  ModbusFrameFormatEnum,
+  ModbusModeEnum,
+} from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { message } from 'ant-design-vue';
@@ -14,12 +19,6 @@ import { useVbenForm, z } from '#/adapter/form';
 import { saveModbusConfig } from '#/api/iot/device/modbus/config';
 import { ProtocolTypeEnum } from '#/api/iot/product/product';
 import { $t } from '#/locales';
-import {
-  ModbusFrameFormatEnum,
-  ModbusModeEnum,
-} from '#/views/iot/utils/constants';
-
-defineOptions({ name: 'DeviceModbusConfigForm' });
 
 const emit = defineEmits(['success']);
 
@@ -70,6 +69,7 @@ const [Form, formApi] = useVbenForm({
       label: '端口',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入端口',
         min: 1,
         max: 65_535,
@@ -86,6 +86,7 @@ const [Form, formApi] = useVbenForm({
       label: '从站地址',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入从站地址，范围 1-247',
         min: 1,
         max: 247,
@@ -98,6 +99,7 @@ const [Form, formApi] = useVbenForm({
       label: '连接超时(ms)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入连接超时时间',
         min: 1000,
         step: 1000,
@@ -114,6 +116,7 @@ const [Form, formApi] = useVbenForm({
       label: '重试间隔(ms)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入重试间隔',
         min: 1000,
         step: 1000,
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config.vue
index 74f07130f..672915a01 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-config.vue
@@ -6,13 +6,13 @@ 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';
 
 import { confirm, useVbenModal } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
+import { DICT_TYPE, ModbusFunctionCodeOptions } from '@vben/constants';
 
 import { Button, message } from 'ant-design-vue';
 
@@ -25,17 +25,14 @@ import {
 import { ProtocolTypeEnum } from '#/api/iot/product/product';
 import { useDescription } from '#/components/description';
 import { DictTag } from '#/components/dict-tag';
-import { ModbusFunctionCodeOptions } from '#/views/iot/utils/constants';
 
 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[];
 }>();
 
 // ======================= 连接配置 =======================
@@ -174,7 +171,7 @@ function usePointFormSchema(): VbenFormSchema[] {
 }
 
 /** 点位列表列配置 */
-function usePointColumns(): VxeTableGridOptions['columns'] {
+function usePointColumns(): VxeTableGridOptions<IotDeviceModbusPointApi.ModbusPoint>['columns'] {
   return [
     { field: 'name', title: '属性名称', minWidth: 100 },
     {
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-point-form.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-point-form.vue
index db5fc0674..cce6c75f1 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-point-form.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/modbus-point-form.vue
@@ -2,12 +2,19 @@
 <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';
 
 import { useVbenModal } from '@vben/common-ui';
-import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  getByteOrderOptions,
+  IoTThingModelTypeEnum,
+  ModbusFunctionCodeOptions,
+  ModbusRawDataTypeOptions,
+} from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { message } from 'ant-design-vue';
@@ -19,14 +26,6 @@ import {
   updateModbusPoint,
 } from '#/api/iot/device/modbus/point';
 import { $t } from '#/locales';
-import {
-  getByteOrderOptions,
-  IoTThingModelTypeEnum,
-  ModbusFunctionCodeOptions,
-  ModbusRawDataTypeOptions,
-} from '#/views/iot/utils/constants';
-
-defineOptions({ name: 'DeviceModbusPointForm' });
 
 const emit = defineEmits(['success']);
 
@@ -35,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(() => {
@@ -111,6 +110,7 @@ function useFormSchema(): VbenFormSchema[] {
       label: '寄存器地址',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入寄存器地址',
         min: 0,
         max: 65_535,
@@ -133,6 +133,7 @@ function useFormSchema(): VbenFormSchema[] {
       label: '寄存器数量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入寄存器数量',
         min: 1,
         max: 125,
@@ -177,6 +178,7 @@ function useFormSchema(): VbenFormSchema[] {
       label: '缩放因子',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入缩放因子',
         precision: 6,
         step: 0.1,
@@ -188,6 +190,7 @@ function useFormSchema(): VbenFormSchema[] {
       label: '轮询间隔(ms)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入轮询间隔',
         min: 100,
         step: 1000,
@@ -220,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,
       );
@@ -234,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(
@@ -285,7 +288,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-antd/src/views/iot/device/device/detail/modules/simulator.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/simulator.vue
index ceb5b336a..3af6c6216 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/simulator.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/simulator.vue
@@ -4,12 +4,16 @@ import type { TableColumnType } from 'ant-design-vue';
 
 import type { IotDeviceApi } from '#/api/iot/device/device';
 import type { IotProductApi } from '#/api/iot/product/product';
-import type { ThingModelData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { computed, ref } from 'vue';
 
 import { ContentWrap } from '@vben/common-ui';
-import { IotDeviceMessageMethodEnum } from '@vben/constants';
+import {
+  DeviceStateEnum,
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import {
@@ -25,10 +29,6 @@ import {
 } from 'ant-design-vue';
 
 import { sendDeviceMessage } from '#/api/iot/device/device';
-import {
-  DeviceStateEnum,
-  IoTThingModelTypeEnum,
-} from '#/views/iot/utils/constants';
 
 import DataDefinition from '../../../../thingmodel/modules/components/data-definition.vue';
 import DeviceDetailsMessage from './message.vue';
@@ -36,7 +36,7 @@ import DeviceDetailsMessage from './message.vue';
 const props = defineProps<{
   device: IotDeviceApi.Device;
   product: IotProductApi.Product;
-  thingModelList: ThingModelData[];
+  thingModelList: ThingModelApi.ThingModel[];
 }>();
 
 // 消息弹窗
@@ -204,7 +204,7 @@ async function handlePropertyPost() {
     });
 
     if (Object.keys(params).length === 0) {
-      message.warning({ content: '请至少输入一个属性值' });
+      message.warning('请至少输入一个属性值');
       return;
     }
 
@@ -214,44 +214,46 @@ 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);
+        eventValue = JSON.parse(valueStr);
       } catch {
-        message.error({ content: '事件参数格式错误，请输入有效的JSON格式' });
+        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 +267,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);
   }
 }
@@ -286,7 +288,7 @@ async function handlePropertySet() {
     });
 
     if (Object.keys(params).length === 0) {
-      message.warning({ content: '请至少输入一个属性值' });
+      message.warning('请至少输入一个属性值');
       return;
     }
 
@@ -296,44 +298,45 @@ 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);
+        inputParams = JSON.parse(valueStr);
       } catch {
-        message.error({ content: '服务参数格式错误，请输入有效的JSON格式' });
+        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);
   }
 }
@@ -595,7 +598,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-antd/src/views/iot/device/device/detail/modules/sub-device.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/sub-device.vue
index 3c1da17c6..36d1fc372 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/sub-device.vue
+++ b/apps/web-antd/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 },
     {
@@ -190,7 +190,7 @@ function useAddGridFormSchema(): VbenFormSchema[] {
   ];
 }
 
-function useAddGridColumns(): VxeTableGridOptions['columns'] {
+function useAddGridColumns(): VxeTableGridOptions<IotDeviceApi.Device>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-event.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-event.vue
index 77e533e7e..52a175a06 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-event.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-event.vue
@@ -1,12 +1,16 @@
 <!-- 设备事件管理 -->
 <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 { Page } from '@vben/common-ui';
-import { IotDeviceMessageMethodEnum } from '@vben/constants';
+import {
+  getEventTypeLabel,
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
@@ -14,14 +18,10 @@ import { Button, RangePicker, Select, Space, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDeviceMessagePairPage } from '#/api/iot/device/device';
-import {
-  getEventTypeLabel,
-  IoTThingModelTypeEnum,
-} from '#/views/iot/utils/constants';
 
 const props = defineProps<{
   deviceId: number;
-  thingModelList: ThingModelData[];
+  thingModelList: ThingModelApi.ThingModel[];
 }>();
 
 /** 查询参数 */
@@ -33,13 +33,13 @@ const queryParams = reactive({
 /** 事件类型的物模型数据 */
 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 +123,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 +132,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) || '-';
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property-history.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
index 1cb400c34..73fc51173 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
@@ -8,9 +8,10 @@ import type { IotDeviceApi } from '#/api/iot/device/device';
 
 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,
@@ -26,16 +27,11 @@ import dayjs from 'dayjs';
 
 import { getHistoryDevicePropertyList } from '#/api/iot/device/device';
 import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
-import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
-
-/** IoT 设备属性历史数据详情 */
-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 total = ref(0); // 总数据量
@@ -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);
 });
 
@@ -155,11 +151,9 @@ const paginationConfig = computed(() => ({
 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 || []) as IotDeviceApi.DevicePropertyDetail[];
     total.value = list.value.length;
 
     // 如果是图表模式且支持图表展示，等待渲染图表
@@ -335,54 +329,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,18 +380,6 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
             刷新
           </Button>
 
-          <!-- 导出按钮 -->
-          <Button
-            :disabled="list.length === 0"
-            :loading="exporting"
-            @click="handleExport"
-          >
-            <template #icon>
-              <IconifyIcon icon="ant-design:export-outlined" />
-            </template>
-            导出
-          </Button>
-
           <!-- 视图切换 -->
           <Button.Group class="ml-auto">
             <Button
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property.vue
index b01765cff..c73ebe2d8 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-property.vue
+++ b/apps/web-antd/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',
@@ -286,7 +286,7 @@ onBeforeUnmount(() => {
         <Switch
           v-model:checked="autoRefresh"
           checked-children="定时刷新"
-          class="ml-20px"
+          class="ml-[20px]"
           un-checked-children="定时刷新"
         />
       </div>
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-service.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-service.vue
index 3971d00d9..693b65f9f 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-service.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model-service.vue
@@ -1,12 +1,16 @@
 <!-- 设备服务调用 -->
 <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 { Page } from '@vben/common-ui';
-import { IotDeviceMessageMethodEnum } from '@vben/constants';
+import {
+  getThingModelServiceCallTypeLabel,
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { formatDateTime } from '@vben/utils';
 
@@ -14,14 +18,10 @@ import { Button, RangePicker, Select, Space, Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDeviceMessagePairPage } from '#/api/iot/device/device';
-import {
-  getThingModelServiceCallTypeLabel,
-  IoTThingModelTypeEnum,
-} from '#/views/iot/utils/constants';
 
 const props = defineProps<{
   deviceId: number;
-  thingModelList: ThingModelData[];
+  thingModelList: ThingModelApi.ThingModel[];
 }>();
 
 /** 查询参数 */
@@ -33,13 +33,13 @@ const queryParams = reactive({
 /** 服务类型的物模型数据 */
 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 +136,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 +145,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) || '-';
diff --git a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model.vue b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model.vue
index 3862c6620..7c9643882 100644
--- a/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model.vue
+++ b/apps/web-antd/src/views/iot/device/device/detail/modules/thing-model.vue
@@ -1,6 +1,6 @@
 <!-- 设备物模型：设备属性、事件管理、服务调用 -->
 <script lang="ts" setup>
-import type { ThingModelData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { ref } from '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'); // 默认选中设备属性
diff --git a/apps/web-antd/src/views/iot/device/device/index.vue b/apps/web-antd/src/views/iot/device/device/index.vue
index 9b1d53e58..4d21ca3bf 100644
--- a/apps/web-antd/src/views/iot/device/device/index.vue
+++ b/apps/web-antd/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';
@@ -41,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[]>([]);
@@ -52,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,
@@ -284,7 +279,7 @@ onMounted(async () => {
     <DeviceImportFormModal @success="handleRefresh" />
 
     <!-- 统一搜索工具栏 -->
-    <Card :body-style="{ 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
@@ -400,7 +395,6 @@ onMounted(async () => {
               type: 'primary',
               icon: 'ant-design:folder-add-outlined',
               auth: ['iot:device:update'],
-              ifShow: isListView,
               disabled: isEmpty(checkedIds),
               onClick: handleAddToGroup,
             },
@@ -410,7 +404,6 @@ onMounted(async () => {
               danger: true,
               icon: ACTION_ICON.DELETE,
               auth: ['iot:device:delete'],
-              ifShow: isListView,
               disabled: isEmpty(checkedIds),
               onClick: handleDeleteBatch,
             },
@@ -441,7 +434,10 @@ onMounted(async () => {
           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 }">
@@ -452,7 +448,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>
@@ -463,17 +459,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:message-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),
             },
             {
@@ -481,6 +480,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-antd/src/views/iot/device/device/modules/card-view.vue b/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
index dca9b5968..6592a470f 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/card-view.vue
@@ -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
-            :body-style="{ 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,33 @@ 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>
+                <div class="flex items-center text-[13px]">
+                  <span class="mr-2 shrink-0 opacity-65 dark:text-white/65">
+                    Deviceid
+                  </span>
                   <Tooltip :title="String(item.id)" placement="top">
-                    <span class="info-value device-id 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.id }}
                     </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 +206,53 @@ 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:message-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 +276,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-antd/src/views/iot/device/device/modules/form.vue b/apps/web-antd/src/views/iot/device/device/modules/form.vue
index 7e452f523..12c4a2a52 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/form.vue
+++ b/apps/web-antd/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,26 @@ 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();
diff --git a/apps/web-antd/src/views/iot/device/device/modules/group-form.vue b/apps/web-antd/src/views/iot/device/device/modules/group-form.vue
index ee1ba20d6..7b0dff65d 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/group-form.vue
+++ b/apps/web-antd/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-antd/src/views/iot/device/device/modules/import-form.vue b/apps/web-antd/src/views/iot/device/device/modules/import-form.vue
index ca4c5d9ea..7bce20327 100644
--- a/apps/web-antd/src/views/iot/device/device/modules/import-form.vue
+++ b/apps/web-antd/src/views/iot/device/device/modules/import-form.vue
@@ -14,12 +14,13 @@ import { $t } from '#/locales';
 
 import { useImportFormSchema } from '../data';
 
-defineOptions({ name: 'IoTDeviceImportForm' });
-
 const emit = defineEmits(['success']);
 
 const [Form, formApi] = useVbenForm({
   commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
     formItemClass: 'col-span-2',
     labelWidth: 120,
   },
diff --git a/apps/web-antd/src/views/iot/device/group/data.ts b/apps/web-antd/src/views/iot/device/group/data.ts
index ca6a10a88..1c5b07380 100644
--- a/apps/web-antd/src/views/iot/device/group/data.ts
+++ b/apps/web-antd/src/views/iot/device/group/data.ts
@@ -1,5 +1,6 @@
 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 { getDictOptions } from '@vben/hooks';
@@ -78,7 +79,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-antd/src/views/iot/device/group/index.vue b/apps/web-antd/src/views/iot/device/group/index.vue
index 2ee40a18b..5815ac515 100644
--- a/apps/web-antd/src/views/iot/device/group/index.vue
+++ b/apps/web-antd/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,
@@ -42,7 +40,7 @@ async function handleDelete(row: IotDeviceGroupApi.DeviceGroup) {
     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-antd/src/views/iot/device/group/modules/form.vue b/apps/web-antd/src/views/iot/device/group/modules/form.vue
index 3e1a2d521..2bf605a1e 100644
--- a/apps/web-antd/src/views/iot/device/group/modules/form.vue
+++ b/apps/web-antd/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-antd/src/views/iot/home/chart-options.ts b/apps/web-antd/src/views/iot/home/chart-options.ts
index 902181505..8745452ec 100644
--- a/apps/web-antd/src/views/iot/home/chart-options.ts
+++ b/apps/web-antd/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-antd/src/views/iot/home/data.ts b/apps/web-antd/src/views/iot/home/data.ts
index 5a84bd8e9..433db75c7 100644
--- a/apps/web-antd/src/views/iot/home/data.ts
+++ b/apps/web-antd/src/views/iot/home/data.ts
@@ -3,12 +3,12 @@ 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,
+  productCategoryCount: -1,
+  productCount: -1,
+  deviceCount: -1,
+  deviceMessageCount: -1,
   productCategoryTodayCount: 0,
   productTodayCount: 0,
   deviceTodayCount: 0,
diff --git a/apps/web-antd/src/views/iot/home/index.vue b/apps/web-antd/src/views/iot/home/index.vue
index e05863fe9..9adcffaff 100644
--- a/apps/web-antd/src/views/iot/home/index.vue
+++ b/apps/web-antd/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-antd/src/views/iot/home/modules/device-count-card.vue b/apps/web-antd/src/views/iot/home/modules/device-count-card.vue
index 422f6e758..858990919 100644
--- a/apps/web-antd/src/views/iot/home/modules/device-count-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/device-count-card.vue
@@ -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-antd/src/views/iot/home/modules/device-map-card.vue b/apps/web-antd/src/views/iot/home/modules/device-map-card.vue
index baa2eec75..6f82c94da 100644
--- a/apps/web-antd/src/views/iot/home/modules/device-map-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/device-map-card.vue
@@ -1,22 +1,24 @@
 <script lang="ts" setup>
 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, DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
 import { Card, Empty, Spin } from 'ant-design-vue';
 
 import { getDeviceLocationList } from '#/api/iot/device/device';
 import { loadBaiduMapSdk } from '#/components/map';
-import { DeviceStateEnum } from '#/views/iot/utils/constants';
 
 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);
@@ -28,15 +30,10 @@ const stateColorMap: Record<number, string> = {
   [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',
   };
 }
@@ -118,7 +115,7 @@ function initMap() {
           if (link) {
             link.addEventListener('click', (e) => {
               e.preventDefault();
-              const deviceId = e.target as HTMLElement.dataset.id;
+              const deviceId = (e.target as HTMLElement).dataset.id;
               if (deviceId) {
                 router.push({
                   name: 'IoTDeviceDetail',
@@ -154,6 +151,8 @@ async function init() {
     return;
   }
   await loadBaiduMapSdk();
+  // 等待 v-show 容器渲染完成；SDK 缓存命中时上一行会同步 resolve，DOM 来不及切换
+  await nextTick();
   initMap();
 }
 
diff --git a/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue b/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue
index 3a93f21f0..65d823746 100644
--- a/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/device-state-count-card.vue
@@ -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-antd/src/views/iot/home/modules/message-trend-card.vue b/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
index f4a2a16cd..0a8a30e3c 100644
--- a/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
+++ b/apps/web-antd/src/views/iot/home/modules/message-trend-card.vue
@@ -1,9 +1,9 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { Dayjs } from 'dayjs';
 
 import type { IotStatisticsApi } from '#/api/iot/statistics';
 
-import { computed, nextTick, onMounted, reactive, ref } from 'vue';
+import { computed, nextTick, reactive, ref } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -22,10 +22,10 @@ defineOptions({ name: 'MessageTrendCard' });
 const messageChartRef = ref();
 const { renderEcharts } = useEcharts(messageChartRef);
 
-const loading = ref(false);
+const loading = ref(false); // 加载状态
 const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>(
   [],
-);
+); // 消息趋势数据
 
 /** 时间范围（仅日期，不包含时分秒） */
 const dateRange = ref<[string, string]>([
@@ -123,10 +123,6 @@ async function renderChartWhenReady() {
   initChart();
 }
 
-/** 组件挂载时查询数据 */
-onMounted(() => {
-  fetchMessageData();
-});
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/iot/ota/firmware/data.ts b/apps/web-antd/src/views/iot/ota/firmware/data.ts
index 7b684dba9..02dd85b8d 100644
--- a/apps/web-antd/src/views/iot/ota/firmware/data.ts
+++ b/apps/web-antd/src/views/iot/ota/firmware/data.ts
@@ -1,9 +1,42 @@
 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: '所属产品' },
+    { field: 'version', label: '固件版本' },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => (val ? (formatDateTime(val) as string) : '-'),
+    },
+    { field: 'description', label: '固件描述', span: 2 },
+  ];
+}
+
 /** 新增/修改固件的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -35,6 +68,10 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
       },
       rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
     },
     {
       fieldName: 'version',
@@ -44,6 +81,10 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入版本号',
       },
       rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
     },
     {
       fieldName: 'description',
@@ -65,6 +106,10 @@ export function useFormSchema(): VbenFormSchema[] {
         helpText: '支持上传 .bin、.hex、.zip 格式的固件文件，最大 50MB',
       },
       rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
     },
   ];
 }
@@ -108,7 +153,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
-    { type: 'checkbox', width: 40 },
     {
       field: 'id',
       title: '固件编号',
@@ -133,7 +177,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'productId',
       title: '所属产品',
       minWidth: 150,
-      slots: { default: 'product' },
+      slots: { default: 'productName' },
     },
     {
       field: 'fileUrl',
diff --git a/apps/web-antd/src/views/iot/ota/firmware/detail/index.vue b/apps/web-antd/src/views/iot/ota/firmware/detail/index.vue
new file mode 100644
index 000000000..7f9ff9a36
--- /dev/null
+++ b/apps/web-antd/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-antd/src/views/iot/ota/firmware/detail/modules/info.vue b/apps/web-antd/src/views/iot/ota/firmware/detail/modules/info.vue
new file mode 100644
index 000000000..f039587ac
--- /dev/null
+++ b/apps/web-antd/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 'ant-design-vue';
+
+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-antd/src/views/iot/ota/firmware/index.vue b/apps/web-antd/src/views/iot/ota/firmware/index.vue
index 8d19ad230..912af9c61 100644
--- a/apps/web-antd/src/views/iot/ota/firmware/index.vue
+++ b/apps/web-antd/src/views/iot/ota/firmware/index.vue
@@ -13,10 +13,8 @@ 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 +45,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 +60,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 +107,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"
+          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 +145,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
         </div>
         <span v-else class="text-gray-400">无文件</span>
       </template>
-
-      <!-- 操作列 -->
       <template #actions="{ row }">
         <TableAction
           :actions="[
@@ -145,12 +152,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 +167,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-antd/src/views/iot/ota/modules/ota-firmware-form.vue b/apps/web-antd/src/views/iot/ota/firmware/modules/form.vue
similarity index 77%
rename from apps/web-antd/src/views/iot/ota/modules/ota-firmware-form.vue
rename to apps/web-antd/src/views/iot/ota/firmware/modules/form.vue
index 896544c6f..9e76a44f6 100644
--- a/apps/web-antd/src/views/iot/ota/modules/ota-firmware-form.vue
+++ b/apps/web-antd/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-antd/src/views/iot/ota/modules/detail/index.vue b/apps/web-antd/src/views/iot/ota/modules/detail/index.vue
deleted file mode 100644
index c1dabcb1c..000000000
--- a/apps/web-antd/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 { formatDate } from '@vben/utils';
-
-import { Card, Col, Descriptions, Row } from 'ant-design-vue';
-
-import { getOtaFirmware } from '#/api/iot/ota/firmware';
-import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
-import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
-
-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">
-        <Descriptions.Item label="固件名称">
-          {{ firmware?.name }}
-        </Descriptions.Item>
-        <Descriptions.Item label="所属产品">
-          {{ firmware?.productName }}
-        </Descriptions.Item>
-        <Descriptions.Item label="固件版本">
-          {{ firmware?.version }}
-        </Descriptions.Item>
-        <Descriptions.Item label="创建时间">
-          {{
-            firmware?.createTime
-              ? formatDate(firmware.createTime, 'YYYY-MM-DD HH:mm:ss')
-              : '-'
-          }}
-        </Descriptions.Item>
-        <Descriptions.Item label="固件描述" :span="2">
-          {{ firmware?.description }}
-        </Descriptions.Item>
-      </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-antd/src/views/iot/ota/modules/firmware-detail/index.vue b/apps/web-antd/src/views/iot/ota/modules/firmware-detail/index.vue
deleted file mode 100644
index eb947ca89..000000000
--- a/apps/web-antd/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 { formatDate } from '@vben/utils';
-
-import { Card, Col, Descriptions, Row } from 'ant-design-vue';
-
-import { getOtaFirmware } from '#/api/iot/ota/firmware';
-import { getOtaTaskRecordStatusStatistics } from '#/api/iot/ota/task/record';
-import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
-
-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>
-        <Descriptions.Item label="固件名称">
-          {{ firmware?.name }}
-        </Descriptions.Item>
-        <Descriptions.Item label="所属产品">
-          {{ firmware?.productName }}
-        </Descriptions.Item>
-        <Descriptions.Item label="固件版本">
-          {{ firmware?.version }}
-        </Descriptions.Item>
-        <Descriptions.Item label="创建时间">
-          {{
-            firmware?.createTime
-              ? formatDate(firmware.createTime, 'YYYY-MM-DD HH:mm:ss')
-              : '-'
-          }}
-        </Descriptions.Item>
-        <Descriptions.Item label="固件描述" :span="2">
-          {{ firmware?.description }}
-        </Descriptions.Item>
-      </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-antd/src/views/iot/ota/modules/task/ota-task-detail.vue b/apps/web-antd/src/views/iot/ota/modules/task/ota-task-detail.vue
deleted file mode 100644
index 8768c2bf6..000000000
--- a/apps/web-antd/src/views/iot/ota/modules/task/ota-task-detail.vue
+++ /dev/null
@@ -1,415 +0,0 @@
-<script setup lang="ts">
-import type { TableColumnsType } from 'ant-design-vue';
-
-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 { formatDate } from '@vben/utils';
-
-import {
-  Card,
-  Col,
-  Descriptions,
-  message,
-  Modal,
-  Row,
-  Table,
-  Tabs,
-  Tag,
-} from 'ant-design-vue';
-
-import { getOtaTask } from '#/api/iot/ota/task';
-import {
-  cancelOtaTaskRecord,
-  getOtaTaskRecordPage,
-  getOtaTaskRecordStatusStatistics,
-} from '#/api/iot/ota/task/record';
-import { IoTOtaTaskRecordStatusEnum } from '#/views/iot/utils/constants';
-
-/** 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,
-    customRender: ({ 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>
-          <Descriptions.Item label="任务编号">{{ task.id }}</Descriptions.Item>
-          <Descriptions.Item label="任务名称">
-            {{ task.name }}
-          </Descriptions.Item>
-          <Descriptions.Item 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>
-          </Descriptions.Item>
-          <Descriptions.Item 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>
-          </Descriptions.Item>
-          <Descriptions.Item label="创建时间">
-            {{
-              task.createTime
-                ? formatDate(task.createTime, 'YYYY-MM-DD HH:mm:ss')
-                : '-'
-            }}
-          </Descriptions.Item>
-          <Descriptions.Item label="任务描述" :span="3">
-            {{ task.description }}
-          </Descriptions.Item>
-        </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"
-        >
-          <Tabs.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-antd/src/views/iot/ota/modules/task/ota-task-form.vue b/apps/web-antd/src/views/iot/ota/modules/task/ota-task-form.vue
deleted file mode 100644
index bb3818cc5..000000000
--- a/apps/web-antd/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 { Form, Input, message, Select, Spin } from 'ant-design-vue';
-
-import { getDeviceListByProductId } from '#/api/iot/device/device';
-import { createOtaTask } from '#/api/iot/ota/task';
-import { IoTOtaTaskDeviceScopeEnum } from '#/views/iot/utils/constants';
-
-/** 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"
-      >
-        <Form.Item label="任务名称" name="name">
-          <Input v-model:value="formData.name" placeholder="请输入任务名称" />
-        </Form.Item>
-        <Form.Item label="任务描述" name="description">
-          <Input.TextArea
-            v-model:value="formData.description"
-            :rows="3"
-            placeholder="请输入任务描述"
-          />
-        </Form.Item>
-        <Form.Item label="升级范围" name="deviceScope">
-          <Select
-            v-model:value="formData.deviceScope"
-            placeholder="请选择升级范围"
-            :options="deviceScopeOptions"
-          />
-        </Form.Item>
-        <Form.Item
-          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
-          />
-        </Form.Item>
-      </Form>
-    </Spin>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/iot/ota/modules/task/ota-task-list.vue b/apps/web-antd/src/views/iot/ota/modules/task/ota-task-list.vue
deleted file mode 100644
index a8a92762b..000000000
--- a/apps/web-antd/src/views/iot/ota/modules/task/ota-task-list.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<script setup lang="ts">
-import type { TableColumnsType } from 'ant-design-vue';
-
-import type { OtaTask } from '#/api/iot/ota/task';
-
-import { onMounted, reactive, ref } from 'vue';
-
-import { IconifyIcon } from '@vben/icons';
-import { formatDate } from '@vben/utils';
-
-import {
-  Button,
-  Card,
-  Input,
-  message,
-  Modal,
-  Space,
-  Table,
-  Tag,
-} from 'ant-design-vue';
-
-import { getOtaTaskPage } from '#/api/iot/ota/task';
-import { IoTOtaTaskStatusEnum } from '#/views/iot/utils/constants';
-
-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,
-    customRender: ({ 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-antd/src/views/iot/ota/task/data.ts b/apps/web-antd/src/views/iot/ota/task/data.ts
new file mode 100644
index 000000000..c0d2dfd13
--- /dev/null
+++ b/apps/web-antd/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-antd/src/views/iot/ota/task/modules/detail.vue b/apps/web-antd/src/views/iot/ota/task/modules/detail.vue
new file mode 100644
index 000000000..9e0492c1c
--- /dev/null
+++ b/apps/web-antd/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-antd/src/views/iot/ota/task/modules/form.vue b/apps/web-antd/src/views/iot/ota/task/modules/form.vue
new file mode 100644
index 000000000..68c2aaca2
--- /dev/null
+++ b/apps/web-antd/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 'ant-design-vue';
+
+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-antd/src/views/iot/ota/task/modules/info.vue b/apps/web-antd/src/views/iot/ota/task/modules/info.vue
new file mode 100644
index 000000000..a671ca776
--- /dev/null
+++ b/apps/web-antd/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 'ant-design-vue';
+
+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-antd/src/views/iot/ota/task/modules/list.vue b/apps/web-antd/src/views/iot/ota/task/modules/list.vue
new file mode 100644
index 000000000..b46a4a57f
--- /dev/null
+++ b/apps/web-antd/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 'ant-design-vue';
+
+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.query();
+}
+
+/** 新增任务 */
+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-antd/src/views/iot/ota/task/modules/statistics.vue b/apps/web-antd/src/views/iot/ota/task/modules/statistics.vue
new file mode 100644
index 000000000..c35b8ddc7
--- /dev/null
+++ b/apps/web-antd/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 'ant-design-vue';
+
+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-antd/src/views/iot/ota/task/record/data.ts b/apps/web-antd/src/views/iot/ota/task/record/data.ts
new file mode 100644
index 000000000..a07093b09
--- /dev/null
+++ b/apps/web-antd/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-antd/src/views/iot/ota/task/record/modules/list.vue b/apps/web-antd/src/views/iot/ota/task/record/modules/list.vue
new file mode 100644
index 000000000..151016ece
--- /dev/null
+++ b/apps/web-antd/src/views/iot/ota/task/record/modules/list.vue
@@ -0,0 +1,136 @@
+<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 'ant-design-vue';
+
+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.query();
+}
+
+/** 取消单条记录的升级 */
+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.query();
+    }
+  },
+);
+</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-antd/src/views/iot/product/category/data.ts b/apps/web-antd/src/views/iot/product/category/data.ts
index 57dcae56f..c5a147373 100644
--- a/apps/web-antd/src/views/iot/product/category/data.ts
+++ b/apps/web-antd/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,
       },
@@ -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-antd/src/views/iot/product/category/index.vue b/apps/web-antd/src/views/iot/product/category/index.vue
index 3dc7201b7..d6bbcd49b 100644
--- a/apps/web-antd/src/views/iot/product/category/index.vue
+++ b/apps/web-antd/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-antd/src/views/iot/product/category/modules/form.vue b/apps/web-antd/src/views/iot/product/category/modules/form.vue
index fc92904d0..8bd209645 100644
--- a/apps/web-antd/src/views/iot/product/category/modules/form.vue
+++ b/apps/web-antd/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-antd/src/views/iot/product/product/components/select.vue b/apps/web-antd/src/views/iot/product/product/components/select.vue
index 9e5d00702..b73a8b9ce 100644
--- a/apps/web-antd/src/views/iot/product/product/components/select.vue
+++ b/apps/web-antd/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-antd/src/views/iot/product/product/data.ts b/apps/web-antd/src/views/iot/product/product/data.ts
index f2c8fcb6c..4c8e797e6 100644
--- a/apps/web-antd/src/views/iot/product/product/data.ts
+++ b/apps/web-antd/src/views/iot/product/product/data.ts
@@ -1,10 +1,10 @@
 import type { 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 'ant-design-vue';
@@ -12,10 +12,6 @@ import { Button } from 'ant-design-vue';
 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,
@@ -114,6 +110,14 @@ export function useBasicFormSchema(
         buttonStyle: 'solid',
         optionType: 'button',
       },
+      defaultValue: DeviceTypeEnum.DEVICE,
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          // 编辑时设备类型不可改
+          disabled: !!values.id,
+        }),
+      },
       rules: 'required',
     },
     {
@@ -124,6 +128,11 @@ export function useBasicFormSchema(
         options: getDictOptions(DICT_TYPE.IOT_NET_TYPE, 'number'),
         placeholder: '请选择联网方式',
       },
+      // 网关子设备走网关联网，不需要联网方式
+      dependencies: {
+        triggerFields: ['deviceType'],
+        show: (values) => values.deviceType !== DeviceTypeEnum.GATEWAY,
+      },
       rules: 'required',
     },
     {
@@ -134,6 +143,7 @@ export function useBasicFormSchema(
         options: getDictOptions(DICT_TYPE.IOT_PROTOCOL_TYPE, 'string'),
         placeholder: '请选择协议类型',
       },
+      defaultValue: 'mqtt',
       rules: 'required',
     },
     {
@@ -144,22 +154,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 +178,7 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'icon',
       label: '产品图标',
-      component: 'IconPicker',
-      componentProps: {
-        placeholder: '请选择产品图标',
-        prefix: 'carbon',
-      },
+      component: 'ImageUpload',
     },
     {
       fieldName: 'picUrl',
@@ -204,7 +198,7 @@ export function useAdvancedFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<IotProductApi.Product>['columns'] {
   return [
     {
       field: 'id',
@@ -217,11 +211,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 +241,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-antd/src/views/iot/product/product/detail/index.vue b/apps/web-antd/src/views/iot/product/product/detail/index.vue
index 5fc1fc7bd..1981d4676 100644
--- a/apps/web-antd/src/views/iot/product/product/detail/index.vue
+++ b/apps/web-antd/src/views/iot/product/product/detail/index.vue
@@ -1,10 +1,11 @@
-<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, Tabs } from 'ant-design-vue';
 
@@ -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) {
@@ -82,10 +82,7 @@ onMounted(async () => {
         <ProductDetailsInfo v-if="activeTab === 'info'" :product="product" />
       </Tabs.TabPane>
       <Tabs.TabPane key="thingModel" tab="物模型（功能定义）">
-        <IoTProductThingModel
-          v-if="activeTab === 'thingModel'"
-          :product-id="id"
-        />
+        <IoTProductThingModel v-if="activeTab === 'thingModel'" />
       </Tabs.TabPane>
     </Tabs>
   </Page>
diff --git a/apps/web-antd/src/views/iot/product/product/detail/modules/header.vue b/apps/web-antd/src/views/iot/product/product/detail/modules/header.vue
index 864946721..c11137085 100644
--- a/apps/web-antd/src/views/iot/product/product/detail/modules/header.vue
+++ b/apps/web-antd/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 'ant-design-vue';
+import {
+  Button,
+  Card,
+  Descriptions,
+  message,
+  Popconfirm,
+} from 'ant-design-vue';
 
-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,27 +95,41 @@ 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>
 
diff --git a/apps/web-antd/src/views/iot/product/product/detail/modules/info.vue b/apps/web-antd/src/views/iot/product/product/detail/modules/info.vue
index 74f1156ac..adaa0986a 100644
--- a/apps/web-antd/src/views/iot/product/product/detail/modules/info.vue
+++ b/apps/web-antd/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');
 }
 
@@ -74,7 +76,7 @@ async function copyToClipboard(text: string) {
       </Descriptions.Item>
       <Descriptions.Item
         v-if="
-          [DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY].includes(
+          ([DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY] as number[]).includes(
             product.deviceType!,
           )
         "
diff --git a/apps/web-antd/src/views/iot/product/product/index.vue b/apps/web-antd/src/views/iot/product/product/index.vue
index 0e94d1adf..959280fbf 100644
--- a/apps/web-antd/src/views/iot/product/product/index.vue
+++ b/apps/web-antd/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');
@@ -175,7 +173,7 @@ onMounted(() => {
     <FormModal @success="handleRefresh" />
 
     <!-- 统一搜索工具栏 -->
-    <Card :body-style="{ 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-antd/src/views/iot/product/product/modules/card-view.vue b/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
index cde81f578..189f4bcd9 100644
--- a/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
+++ b/apps/web-antd/src/views/iot/product/product/modules/card-view.vue
@@ -1,7 +1,8 @@
 <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 {
@@ -37,6 +38,8 @@ const emit = defineEmits<{
   thingModel: [productId: number];
 }>();
 
+const { hasAccessByCodes } = useAccess();
+
 const loading = ref(false);
 const list = ref<any[]>([]);
 const total = ref(0);
@@ -88,7 +91,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,54 +104,70 @@ onMounted(() => {
           :lg="6"
         >
           <Card
-            :body-style="{ 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"
+              >
                 <IconifyIcon
                   :icon="item.icon || 'lucide:box'"
                   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">
+              <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.categoryId) }}
                   </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"
@@ -163,54 +182,67 @@ 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: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 +266,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-antd/src/views/iot/product/product/modules/form.vue b/apps/web-antd/src/views/iot/product/product/modules/form.vue
index b3cdd6365..eb5caddad 100644
--- a/apps/web-antd/src/views/iot/product/product/modules/form.vue
+++ b/apps/web-antd/src/views/iot/product/product/modules/form.vue
@@ -41,21 +41,23 @@ 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 */
diff --git a/apps/web-antd/src/views/iot/rule/data/index.vue b/apps/web-antd/src/views/iot/rule/data/index.vue
index f6eb38168..307072e9d 100644
--- a/apps/web-antd/src/views/iot/rule/data/index.vue
+++ b/apps/web-antd/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 'ant-design-vue';
+import { Tabs } from 'ant-design-vue';
 
-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({ type: 'create' }).open();
-}
-
-/** 编辑规则 */
-function handleEdit(row: any) {
-  formModalApi.setData({ type: 'update', 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-antd/src/views/iot/rule/data/rule/components/source-config-form.vue b/apps/web-antd/src/views/iot/rule/data/rule/components/source-config-form.vue
deleted file mode 100644
index 62e050486..000000000
--- a/apps/web-antd/src/views/iot/rule/data/rule/components/source-config-form.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue';
-
-import { IotDeviceMessageMethodEnum } from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
-
-import { Button, Form, Select, Table } from 'ant-design-vue';
-
-import { getSimpleDeviceList } from '#/api/iot/device/device';
-import { getSimpleProductList } from '#/api/iot/product/product';
-import { getThingModelListByProductId } from '#/api/iot/thingmodel';
-import { IoTThingModelTypeEnum } from '#/views/iot/utils/constants';
-
-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'">
-          <Form.Item
-            :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)"
-            />
-          </Form.Item>
-        </template>
-        <template v-else-if="column.dataIndex === 'deviceId'">
-          <Form.Item
-            :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,
-                })),
-              ]"
-            />
-          </Form.Item>
-        </template>
-        <template v-else-if="column.dataIndex === 'method'">
-          <Form.Item
-            :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)"
-            />
-          </Form.Item>
-        </template>
-        <template v-else-if="column.dataIndex === 'identifier'">
-          <Form.Item :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)"
-            />
-          </Form.Item>
-        </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-antd/src/views/iot/rule/data/rule/data.ts b/apps/web-antd/src/views/iot/rule/data/rule/data.ts
index d4e453b4b..fc496dc93 100644
--- a/apps/web-antd/src/views/iot/rule/data/rule/data.ts
+++ b/apps/web-antd/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,
       },
     },
     {
@@ -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-antd/src/views/iot/rule/data/rule/index.vue b/apps/web-antd/src/views/iot/rule/data/rule/index.vue
index 6ec2d00d4..6f6d87a0c 100644
--- a/apps/web-antd/src/views/iot/rule/data/rule/index.vue
+++ b/apps/web-antd/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,
 });
 
@@ -29,22 +25,22 @@ function handleRefresh() {
 
 /** 创建规则 */
 function handleCreate() {
-  formModalApi.setData({ type: 'create' }).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑规则 */
-function handleEdit(row: any) {
-  formModalApi.setData({ type: 'update', id: row.id }).open();
+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-antd/src/views/iot/rule/data/rule/data-rule-form.vue b/apps/web-antd/src/views/iot/rule/data/rule/modules/form.vue
similarity index 72%
rename from apps/web-antd/src/views/iot/rule/data/rule/data-rule-form.vue
rename to apps/web-antd/src/views/iot/rule/data/rule/modules/form.vue
index c0e939d53..3faafe325 100644
--- a/apps/web-antd/src/views/iot/rule/data/rule/data-rule-form.vue
+++ b/apps/web-antd/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));
       // 关闭并提示
@@ -70,26 +69,12 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      await formApi.resetForm();
       sourceConfigRef.value?.setData([]);
       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-antd/src/views/iot/rule/data/rule/modules/source-config-form.vue b/apps/web-antd/src/views/iot/rule/data/rule/modules/source-config-form.vue
new file mode 100644
index 000000000..533dc9ec1
--- /dev/null
+++ b/apps/web-antd/src/views/iot/rule/data/rule/modules/source-config-form.vue
@@ -0,0 +1,292 @@
+<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 'ant-design-vue';
+
+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();
+}
+
+/** 取当前所有行的值 */
+function getData() {
+  return formData.value;
+}
+
+/** 设置初始数据 */
+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
+          :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
+          :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
+          :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
+          :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-antd/src/views/iot/rule/data/sink/config/components/key-value-editor.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/components/key-value-editor.vue
index 2d33d8e1b..d8d7cdab7 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/config/components/key-value-editor.vue
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/components/key-value-editor.vue
@@ -64,14 +64,14 @@ watch(
 
 <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)">
+    <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-antd/src/views/iot/rule/data/sink/config/database-config-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/database-config-form.vue
new file mode 100644
index 000000000..5a20739b4
--- /dev/null
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/database-config-form.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import { 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 'ant-design-vue';
+
+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();
+
+async function handleCopySql() {
+  await copy(TABLE_SQL);
+  copied.value = true;
+  message.success('建表 SQL 已复制到剪贴板');
+  setTimeout(() => (copied.value = false), 2000);
+}
+
+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-antd/src/views/iot/rule/data/sink/config/http-config-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/http-config-form.vue
index bec6e969d..a064a3694 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/config/http-config-form.vue
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/http-config-form.vue
@@ -1,53 +1,46 @@
+<!--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 'ant-design-vue';
+import { Form, Input, Select } from 'ant-design-vue';
+
+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 : '',
+);
 
-/** 监听 URL 变化 */
 watch([urlPrefix, urlPath], () => {
   config.value.url = fullUrl.value;
 });
 
-/** 组件初始化 */
 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;
-      }
+    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 ?? '';
     }
     return;
   }
-
   config.value = {
+    type: `${IotDataSinkTypeEnum.HTTP}`,
     url: '',
     method: 'POST',
     headers: {},
@@ -55,51 +48,46 @@ 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-antd/src/views/iot/rule/data/sink/config/index.ts b/apps/web-antd/src/views/iot/rule/data/sink/config/index.ts
index 6fb57388c..d2967eafe 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/config/index.ts
+++ b/apps/web-antd/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-antd/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue
index 8a3616513..3810c9685 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue
@@ -1,25 +1,24 @@
 <script lang="ts" setup>
+
 import { onMounted } from 'vue';
 
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, Switch } from 'ant-design-vue';
+import { Form, Input, Switch } from 'ant-design-vue';
 
-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 +29,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-antd/src/views/iot/rule/data/sink/config/mqtt-config-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/mqtt-config-form.vue
index e903bc8f5..3ccf4fad6 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/config/mqtt-config-form.vue
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/mqtt-config-form.vue
@@ -1,25 +1,24 @@
 <script lang="ts" setup>
+
 import { onMounted } from 'vue';
 
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input } from 'ant-design-vue';
+import { Form, Input } from 'ant-design-vue';
 
-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 +29,42 @@ 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-antd/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue
index 7a3a3d50c..00cdf46c6 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue
@@ -1,30 +1,29 @@
 <script lang="ts" setup>
+
 import { onMounted } from 'vue';
 
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, InputNumber } from 'ant-design-vue';
+import { Form, Input, InputNumber } from 'ant-design-vue';
 
-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 +32,75 @@ 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-antd/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue
index 75f4e4c5d..4c840a45f 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue
@@ -1,58 +1,92 @@
 <script lang="ts" setup>
+
 import { onMounted } from 'vue';
 
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input, InputNumber } from 'ant-design-vue';
+import { Form, Input, InputNumber } from 'ant-design-vue';
 
-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);
 
-/** 组件初始化 */
 onMounted(() => {
   if (!isEmpty(config.value)) {
     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']" 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-antd/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue
index 384e7e0b4..862cfdf74 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue
@@ -1,25 +1,24 @@
 <script lang="ts" setup>
+
 import { onMounted } from 'vue';
 
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
-import { FormItem, Input } from 'ant-design-vue';
+import { Form, Input } from 'ant-design-vue';
 
-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 +30,48 @@ 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-antd/src/views/iot/rule/data/sink/config/tcp-config-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/tcp-config-form.vue
new file mode 100644
index 000000000..b04eaab3f
--- /dev/null
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/tcp-config-form.vue
@@ -0,0 +1,137 @@
+<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 'ant-design-vue';
+
+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-antd/src/views/iot/rule/data/sink/config/websocket-config-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/config/websocket-config-form.vue
new file mode 100644
index 000000000..802e449da
--- /dev/null
+++ b/apps/web-antd/src/views/iot/rule/data/sink/config/websocket-config-form.vue
@@ -0,0 +1,151 @@
+<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 'ant-design-vue';
+
+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-antd/src/views/iot/rule/data/sink/data-sink-form.vue b/apps/web-antd/src/views/iot/rule/data/sink/data-sink-form.vue
deleted file mode 100644
index 98ce5faf7..000000000
--- a/apps/web-antd/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 'ant-design-vue';
-
-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-antd/src/views/iot/rule/data/sink/data.ts b/apps/web-antd/src/views/iot/rule/data/sink/data.ts
index 9af434569..4d70695f2 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/data.ts
+++ b/apps/web-antd/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-antd/src/views/iot/rule/data/sink/index.vue b/apps/web-antd/src/views/iot/rule/data/sink/index.vue
index 8d81805c5..96dad2d3e 100644
--- a/apps/web-antd/src/views/iot/rule/data/sink/index.vue
+++ b/apps/web-antd/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,
 });
 
@@ -29,22 +25,22 @@ function handleRefresh() {
 
 /** 创建数据目的 */
 function handleCreate() {
-  formModalApi.setData({ type: 'create' }).open();
+  formModalApi.setData(null).open();
 }
 
 /** 编辑数据目的 */
-function handleEdit(row: any) {
-  formModalApi.setData({ type: 'update', id: row.id }).open();
+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-antd/src/views/iot/rule/data/sink/modules/form.vue b/apps/web-antd/src/views/iot/rule/data/sink/modules/form.vue
new file mode 100644
index 000000000..1e994a979
--- /dev/null
+++ b/apps/web-antd/src/views/iot/rule/data/sink/modules/form.vue
@@ -0,0 +1,185 @@
+<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 'ant-design-vue';
+
+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-antd/src/views/iot/rule/scene/data.ts b/apps/web-antd/src/views/iot/rule/scene/data.ts
index fd948f9bf..cb3a4b61e 100644
--- a/apps/web-antd/src/views/iot/rule/scene/data.ts
+++ b/apps/web-antd/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-antd/src/views/iot/rule/scene/form/configs/alert-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/alert-config.vue
index 1edf04e92..1cb57b0c8 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/alert-config.vue
+++ b/apps/web-antd/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 { Form, Select, Tag } from 'ant-design-vue';
+import { Form, Select } from 'ant-design-vue';
 
-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();
 });
@@ -58,10 +48,10 @@ onMounted(() => {
   <div class="w-full">
     <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"
@@ -71,14 +61,7 @@ onMounted(() => {
           :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>
-        </Select.Option>
+        />
       </Select>
     </Form.Item>
   </div>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
index 3879d0fa6..c71110ba0 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
@@ -1,18 +1,18 @@
 <!-- 单个条件配置组件 -->
 <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';
 
-import { useVModel } from '@vueuse/core';
-import { Col, Form, Row, Select } from 'ant-design-vue';
-
 import {
   getConditionTypeOptions,
   IoTDeviceStatusEnum,
   IotRuleSceneTriggerConditionParameterOperatorEnum,
   IotRuleSceneTriggerConditionTypeEnum,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { Col, Form, Row, Select } from 'ant-design-vue';
 
 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,26 +156,29 @@ function handleOperatorChange() {
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="gap-[16px] flex flex-col">
     <!-- 条件类型选择 -->
     <Row :gutter="16">
       <Col :span="8">
         <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"
           >
             <Select.Option
               v-for="option in getConditionTypeOptions()"
               :key="option.value"
-              :label="option.label"
               :value="option.value"
-            />
+            >
+              {{ option.label }}
+            </Select.Option>
           </Select>
         </Form.Item>
       </Col>
@@ -211,10 +214,9 @@ function handleOperatorChange() {
     <!-- 设备状态条件配置 -->
     <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">
@@ -222,19 +224,18 @@ function handleOperatorChange() {
         <Col :span="12">
           <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"
             >
               <Select.Option
                 v-for="option in statusOperatorOptions"
                 :key="option.value"
-                :label="option.label"
                 :value="option.value"
-              />
+              >
+                {{ option.label }}
+              </Select.Option>
             </Select>
           </Form.Item>
         </Col>
@@ -243,19 +244,18 @@ function handleOperatorChange() {
         <Col :span="12">
           <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"
             >
               <Select.Option
                 v-for="option in deviceStatusOptions"
                 :key="option.value"
-                :label="option.label"
                 :value="option.value"
-              />
+              >
+                {{ option.label }}
+              </Select.Option>
             </Select>
           </Form.Item>
         </Col>
@@ -265,10 +265,9 @@ 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">
@@ -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-antd/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
index af63c77a8..bbe7913c5 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
@@ -1,9 +1,10 @@
 <!-- 当前时间条件配置组件 -->
 <script setup lang="ts">
-import type { TriggerCondition } from '#/api/iot/rule/scene';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import { computed, watch } from 'vue';
 
+import { IotRuleSceneTriggerTimeOperatorEnum } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
@@ -17,17 +18,15 @@ import {
   TimePicker,
 } from 'ant-design-vue';
 
-import { IotRuleSceneTriggerTimeOperatorEnum } from '#/views/iot/utils/constants';
-
 /** 当前时间条件配置组件 */
 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);
@@ -39,7 +38,7 @@ const timeOperatorOptions = [
     label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
     icon: 'ep:arrow-left',
     iconClass: 'text-blue-500',
-    tag: 'primary',
+    tag: 'processing',
     category: '时间点',
   },
   {
@@ -63,7 +62,7 @@ const timeOperatorOptions = [
     label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
     icon: 'ep:position',
     iconClass: 'text-purple-500',
-    tag: 'info',
+    tag: 'default',
     category: '时间点',
   },
   {
@@ -71,7 +70,7 @@ const timeOperatorOptions = [
     label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
     icon: 'ep:calendar',
     iconClass: 'text-red-500',
-    tag: 'danger',
+    tag: 'error',
     category: '日期',
   },
 ];
@@ -87,9 +86,9 @@ const needsTimeInput = computed(() => {
   return timeOnlyOperators.includes(condition.value.operator as any);
 });
 
-// 计算属性：是否需要日期输入
+/** 是否需要日期输入：当前只支持时间维度的判断 */
 const needsDateInput = computed(() => {
-  return false; // 暂时不支持日期输入，只支持时间
+  return false;
 });
 
 // 计算属性：是否需要第二个时间输入
@@ -194,7 +193,7 @@ 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>
@@ -225,7 +224,7 @@ watch(
             value-format="YYYY-MM-DD HH:mm:ss"
             class="w-full"
           />
-          <div v-else class="text-sm text-secondary">无需设置时间值</div>
+          <div v-else class="text-sm text-muted-foreground">无需设置时间值</div>
         </Form.Item>
       </Col>
 
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue
index 28bef096c..5156739d5 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue
@@ -1,24 +1,21 @@
 <!-- 设备控制配置组件 -->
 <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';
 
+import {
+  IoTDataSpecsDataTypeEnum,
+  IotRuleSceneActionTypeEnum,
+  IoTThingModelAccessModeEnum,
+} from '@vben/constants';
 import { isObject } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
 import { Col, Form, Row, Select, Tag } from 'ant-design-vue';
 
-import { getThingModelListByProductId } from '#/api/iot/thingmodel';
-import {
-  IoTDataSpecsDataTypeEnum,
-  IotRuleSceneActionTypeEnum,
-  IoTThingModelAccessModeEnum,
-} from '#/views/iot/utils/constants';
+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,24 +52,18 @@ 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;
 });
 
 /**
@@ -84,7 +75,7 @@ function handleProductChange(productId?: number) {
   if (action.value.productId !== productId) {
     action.value.deviceId = undefined;
     action.value.identifier = undefined; // 清空服务标识符
-    action.value.params = ''; // 清空参数，保存为空字符串
+    action.value.params = '' as any; // 清空参数，保存为空字符串
     selectedService.value = null; // 清空选中的服务
     serviceList.value = []; // 清空服务列表
   }
@@ -106,7 +97,7 @@ function handleProductChange(productId?: number) {
 function handleDeviceChange(deviceId?: number) {
   // 当设备变化时，清空参数配置
   if (action.value.deviceId !== deviceId) {
-    action.value.params = ''; // 清空参数，保存为空字符串
+    action.value.params = '' as any; // 清空参数，保存为空字符串
   }
 }
 
@@ -117,35 +108,32 @@ 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 +150,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 +159,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 +184,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 +193,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 +201,8 @@ async function loadServiceList(productId: number) {
 }
 
 /**
- * 从TSL加载服务信息（用于编辑模式回显）
- * @param productId 产品ID
+ * 从 TSL 加载服务信息（用于编辑模式回显）
+ * @param productId 产品 ID
  * @param serviceIdentifier 服务标识符
  */
 async function loadServiceFromTSL(
@@ -338,7 +326,7 @@ watch(
 </script>
 
 <template>
-  <div class="gap-16px flex flex-col">
+  <div class="gap-[16px] flex flex-col">
     <!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 -->
     <Row :gutter="16">
       <Col :span="12">
@@ -361,13 +349,16 @@ watch(
     </Row>
 
     <!-- 服务选择 - 服务调用类型时显示 -->
-    <div v-if="action.productId && isServiceInvokeAction" class="space-y-16px">
+    <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"
@@ -381,8 +372,7 @@ 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>
@@ -392,7 +382,7 @@ watch(
       </Form.Item>
 
       <!-- 服务参数配置 -->
-      <div v-if="action.identifier" class="space-y-16px">
+      <div v-if="action.identifier" class="space-y-[16px]">
         <Form.Item label="服务参数" required>
           <JsonParamsInput
             v-model="paramsValue"
@@ -405,7 +395,7 @@ watch(
     </div>
 
     <!-- 控制参数配置 - 属性设置类型时显示 -->
-    <div v-if="action.productId && isPropertySetAction" class="space-y-16px">
+    <div v-if="action.productId && isPropertySetAction" class="space-y-[16px]">
       <!-- 参数配置 -->
       <Form.Item label="参数" required>
         <JsonParamsInput
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
index b3f9ad675..7ccd55651 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
@@ -43,7 +43,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 +93,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 +123,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 +131,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 +162,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,7 +177,7 @@ function removeConditionGroup() {
         <!-- 子条件组列表 -->
         <div
           v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
-          class="space-y-16px"
+          class="space-y-[16px]"
         >
           <!-- 逻辑关系说明 -->
           <div class="relative">
@@ -183,37 +186,37 @@ function removeConditionGroup() {
               :key="`sub-group-${subGroupIndex}`"
               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 +228,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 +236,35 @@ 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-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
index 59f72afe5..c29b2e84d 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
@@ -1,18 +1,18 @@
 <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';
 
-import { useVModel } from '@vueuse/core';
-import { Col, Form, Row, Select } from 'ant-design-vue';
-
 import {
   getTriggerTypeLabel,
   IoTDeviceStatusEnum,
   IotRuleSceneTriggerConditionParameterOperatorEnum,
   IotRuleSceneTriggerTypeEnum,
   triggerTypeOptions,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { Col, Form, Row, Select } from 'ant-design-vue';
 
 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;
 }>();
 
@@ -177,17 +177,18 @@ function handlePropertyChange(propertyInfo: any) {
     <!-- 触发事件类型选择 -->
     <Form.Item label="触发事件类型" required>
       <Select
-        :model-value="triggerType"
-        @update:model-value="handleTriggerTypeChange"
+        :value="triggerType"
+        @change="(value: any) => handleTriggerTypeChange(value)"
         placeholder="请选择触发事件类型"
         class="w-full"
       >
         <Select.Option
           v-for="option in triggerTypeOptions"
           :key="option.value"
-          :label="option.label"
           :value="option.value"
-        />
+        >
+          {{ option.label }}
+        </Select.Option>
       </Select>
     </Form.Item>
 
@@ -323,40 +324,38 @@ function handlePropertyChange(propertyInfo: any) {
         <Col :span="6">
           <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"
             >
               <Select.Option
-                :label="
-                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
-                "
                 :value="
                   IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
                 "
-              />
+              >
+                {{
+                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
+                }}
+              </Select.Option>
             </Select>
           </Form.Item>
         </Col>
         <Col :span="6">
           <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"
             >
               <Select.Option
                 v-for="option in deviceStatusChangeOptions"
                 :key="option.value"
-                :label="option.label"
                 :value="option.value"
-              />
+              >
+                {{ option.label }}
+              </Select.Option>
             </Select>
           </Form.Item>
         </Col>
@@ -365,10 +364,12 @@ function handlePropertyChange(propertyInfo: any) {
 
     <!-- 其他触发类型的提示 -->
     <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-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
index 9fcd86514..0c9ca2ae5 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
@@ -1,17 +1,16 @@
 <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';
 
-import { IconifyIcon } from '@vben/icons';
-
-import { useVModel } from '@vueuse/core';
-import { Button } from 'ant-design-vue';
-
 import {
   IotRuleSceneTriggerConditionParameterOperatorEnum,
   IotRuleSceneTriggerConditionTypeEnum,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import { Button } from 'ant-design-vue';
 
 import ConditionConfig from './condition-config.vue';
 
@@ -20,12 +19,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);
@@ -44,8 +43,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: '',
@@ -75,7 +74,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;
   }
@@ -87,8 +89,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>
@@ -108,7 +110,7 @@ function updateCondition(index: number, condition: TriggerCondition) {
       >
         <!-- 条件配置 -->
         <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"
@@ -119,17 +121,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>
@@ -139,7 +141,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"
@@ -159,7 +161,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-antd/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue b/apps/web-antd/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue
new file mode 100644
index 000000000..c2e5e6745
--- /dev/null
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue
@@ -0,0 +1,189 @@
+<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 { useVModel } from '@vueuse/core';
+import { Button, Tag } from 'ant-design-vue';
+
+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="`group-${groupIndex}`"
+        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-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue b/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
index 6097c911c..f801a9f6f 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
@@ -1,21 +1,20 @@
 <!-- JSON参数输入组件 - 通用版本 -->
 <script setup lang="ts">
-import type { JsonParamsInputType } from '#/views/iot/utils/constants';
+import type { JsonParamsInputType } from '@vben/constants';
 
 import { computed, nextTick, onMounted, ref, watch } from 'vue';
 
-import { IconifyIcon } from '@vben/icons';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Input, Popover, Tag } from 'ant-design-vue';
-
 import {
   IoTDataSpecsDataTypeEnum,
   JSON_PARAMS_EXAMPLE_VALUES,
   JSON_PARAMS_INPUT_CONSTANTS,
   JSON_PARAMS_INPUT_ICONS,
   JsonParamsInputTypeEnum,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Input, Popover, Tag } from 'ant-design-vue';
 
 /** JSON参数输入组件 - 通用版本 */
 defineOptions({ name: 'JsonParamsInput' });
@@ -307,17 +306,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';
 }
 
 /**
@@ -419,40 +418,27 @@ 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>
-
-          <!-- 弹出层内容 -->
-          <div class="json-params-detail-content">
+          <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-primary">
+              <span class="text-base font-bold text-foreground">
                 {{ title }}
               </span>
             </div>
@@ -465,7 +451,7 @@ watch(
                     :icon="paramsIcon"
                     class="text-base text-primary"
                   />
-                  <span class="text-base font-bold text-primary">
+                  <span class="text-base font-bold text-foreground">
                     {{ paramsLabel }}
                   </span>
                 </div>
@@ -476,26 +462,25 @@ watch(
                     class="flex items-center justify-between rounded-lg bg-card p-2"
                   >
                     <div class="flex-1">
-                      <div class="text-base font-bold text-primary">
+                      <div class="text-base font-bold text-foreground">
                         {{ param.name }}
                         <Tag
                           v-if="param.required"
-                          size="small"
-                          type="danger"
+                          color="error"
                           class="ml-1"
                         >
                           {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
                         </Tag>
                       </div>
-                      <div class="text-xs text-secondary">
+                      <div class="text-xs text-muted-foreground">
                         {{ param.identifier }}
                       </div>
                     </div>
                     <div class="flex items-center gap-2">
-                      <Tag :type="getParamTypeTag(param.dataType)" size="small">
+                      <Tag :color="getParamTypeTag(param.dataType)">
                         {{ getParamTypeName(param.dataType) }}
                       </Tag>
-                      <span class="text-xs text-secondary">
+                      <span class="text-xs text-muted-foreground">
                         {{ getExampleValue(param) }}
                       </span>
                     </div>
@@ -503,11 +488,11 @@ watch(
                 </div>
 
                 <div class="ml-6 mt-3">
-                  <div class="mb-1 text-xs text-secondary">
+                  <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-primary"
+                    class="border-l-[3px] overflow-x-auto rounded-lg border-primary bg-card p-3 text-sm text-foreground"
                   >
                       <code>{{ generateExampleJson() }}</code>
                     </pre>
@@ -517,13 +502,22 @@ watch(
               <!-- 无参数提示 -->
               <div v-else>
                 <div class="py-4 text-center">
-                  <p class="text-sm text-secondary">
+                  <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>
@@ -550,7 +544,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-antd/src/views/iot/rule/scene/form/inputs/value-input.vue b/apps/web-antd/src/views/iot/rule/scene/form/inputs/value-input.vue
index c17a8b3f6..5f1cf6ed3 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/inputs/value-input.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/inputs/value-input.vue
@@ -2,13 +2,13 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 
-import { useVModel } from '@vueuse/core';
-import { DatePicker, Input, Select, Tag, Tooltip } from 'ant-design-vue';
-
 import {
   IoTDataSpecsDataTypeEnum,
   IotRuleSceneTriggerConditionParameterOperatorEnum,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { DatePicker, Input, InputNumber, Select, Tag, Tooltip } from 'ant-design-vue';
 
 /** 值输入组件 */
 defineOptions({ name: 'ValueInput' });
@@ -132,9 +132,9 @@ 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);
 }
 
 /** 监听操作符变化 */
@@ -155,12 +155,12 @@ watch(
     <!-- 布尔值选择 -->
     <Select
       v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL"
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择布尔值"
       class="w-full!"
     >
-      <Select.Option label="真 (true)" :value="true" />
-      <Select.Option label="假 (false)" :value="false" />
+      <Select.Option :value="true">真 (true)</Select.Option>
+      <Select.Option :value="false">假 (false)</Select.Option>
     </Select>
 
     <!-- 枚举值选择 -->
@@ -168,16 +168,17 @@ watch(
       v-else-if="
         propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0
       "
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择枚举值"
       class="w-full!"
     >
       <Select.Option
         v-for="option in enumOptions"
         :key="option.value"
-        :label="option.label"
         :value="option.value"
-      />
+      >
+        {{ option.label }}
+      </Select.Option>
     </Select>
 
     <!-- 范围输入 (between 操作符) -->
@@ -189,16 +190,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 +215,7 @@ watch(
       class="w-full!"
     >
       <Input
-        v-model="localValue"
+        v-model:value="localValue"
         placeholder="请输入值列表，用逗号分隔"
         class="w-full!"
       >
@@ -231,11 +232,10 @@ watch(
         v-if="listPreview.length > 0"
         class="mt-2 flex flex-wrap items-center gap-1"
       >
-        <span class="text-xs text-secondary"> 解析结果： </span>
+        <span class="text-xs text-muted-foreground"> 解析结果： </span>
         <Tag
           v-for="(item, index) in listPreview"
           :key="index"
-          size="small"
           class="m-0"
         >
           {{ item }}
@@ -246,7 +246,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 +256,9 @@ watch(
     />
 
     <!-- 数字输入 -->
-    <Input.Number
+    <InputNumber
       v-else-if="isNumericType()"
-      v-model="numberValue"
+      v-model:value="numberValue"
       :precision="getPrecision()"
       :step="getStep()"
       :min="getMin()"
@@ -271,7 +271,7 @@ watch(
     <!-- 文本输入 -->
     <Input
       v-else
-      v-model="localValue"
+      v-model:value="localValue"
       :type="getInputType()"
       :placeholder="getPlaceholder()"
       class="w-full!"
@@ -282,7 +282,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-antd/src/views/iot/rule/scene/form/rule-scene-form.vue b/apps/web-antd/src/views/iot/rule/scene/form/rule-scene-form.vue
deleted file mode 100644
index bd1d85135..000000000
--- a/apps/web-antd/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 } from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Drawer, Form, message } from 'ant-design-vue';
-
-import { createSceneRule, updateSceneRule } from '#/api/iot/rule/scene';
-import {
-  IotRuleSceneActionTypeEnum,
-  IotRuleSceneTriggerTypeEnum,
-  isDeviceTrigger,
-} from '#/views/iot/utils/constants';
-
-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-antd/src/views/iot/rule/scene/form/sections/action-section.vue b/apps/web-antd/src/views/iot/rule/scene/form/sections/action-section.vue
index 12e2d5c07..a9d149abf 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/sections/action-section.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/sections/action-section.vue
@@ -1,17 +1,16 @@
 <!-- 执行器配置组件 -->
 <script setup lang="ts">
-import type { Action } from '#/api/iot/rule/scene';
-
-import { IconifyIcon } from '@vben/icons';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Card, Empty, Form, Select, Tag } from 'ant-design-vue';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import {
   getActionTypeLabel,
   getActionTypeOptions,
   IotRuleSceneActionTypeEnum,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Card, Empty, Form, Select, Tag } from 'ant-design-vue';
 
 import AlertConfig from '../configs/alert-config.vue';
 import DeviceControlConfig from '../configs/device-control-config.vue';
@@ -20,29 +19,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';
 }
 
 /** 判断是否为设备执行器类型 */
@@ -67,9 +66,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, // 物模型标识符（服务调用时使用）
@@ -100,8 +99,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;
 }
 
 /**
@@ -109,7 +109,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;
 }
 
@@ -120,9 +120,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;
-  }
 }
 
 /**
@@ -130,22 +127,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;
   }
@@ -156,12 +152,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" />
             添加执行器
@@ -182,43 +180,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"
+          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" />
                 删除
@@ -227,42 +224,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">
               <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"
                 >
                   <Select.Option
                     v-for="option in getActionTypeOptions()"
                     :key="option.value"
-                    :label="option.label"
                     :value="option.value"
-                  />
+                  >
+                    {{ option.label }}
+                  </Select.Option>
                 </Select>
               </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)
@@ -271,18 +263,15 @@ 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>
@@ -292,7 +281,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-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue b/apps/web-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue
index 034cb6bbe..4998e42b3 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue
@@ -1,6 +1,6 @@
 <!-- 基础信息配置组件 -->
 <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';
@@ -15,54 +15,53 @@ 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">
-          <Form.Item 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
             />
           </Form.Item>
         </Col>
         <Col :span="12">
-          <Form.Item label="场景状态" prop="status" required>
-            <Radio.Group 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>
@@ -70,10 +69,9 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
           </Form.Item>
         </Col>
       </Row>
-      <Form.Item 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"
@@ -86,11 +84,11 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
 </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-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue b/apps/web-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue
index 2087030ce..bcd6d372b 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue
@@ -1,49 +1,50 @@
 <script setup lang="ts">
-import type { Trigger } from '#/api/iot/rule/scene';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
 
 import { onMounted } from 'vue';
 
+import {
+  getTriggerTypeLabel,
+  IotRuleSceneTriggerTypeEnum,
+  isDeviceTrigger,
+} from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { useVModel } from '@vueuse/core';
 import { Button, Card, Empty, Form, Tag } from 'ant-design-vue';
 
 import { CronTab } from '#/components/cron-tab';
-import {
-  getTriggerTypeLabel,
-  IotRuleSceneTriggerTypeEnum,
-  isDeviceTrigger,
-} from '#/views/iot/utils/constants';
 
 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 +56,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 +111,13 @@ 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 +126,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"
+          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 +172,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,29 +186,26 @@ 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"
               >
-                <Form.Item label="CRON表达式" required>
+                <Form.Item label="CRON 表达式" required>
                   <CronTab
                     :model-value="triggerItem.cronExpression || '0 0 12 * * ?'"
                     @update:model-value="
@@ -225,18 +214,26 @@ onMounted(() => {
                   />
                 </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-antd/src/views/iot/rule/scene/form/selectors/device-selector.vue b/apps/web-antd/src/views/iot/rule/scene/form/selectors/device-selector.vue
index 303eade75..ceefc0ab0 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/selectors/device-selector.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/selectors/device-selector.vue
@@ -2,13 +2,12 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 
-import { DICT_TYPE } from '@vben/constants';
+import { DEVICE_SELECTOR_OPTIONS, DICT_TYPE } from '@vben/constants';
 
 import { Select } from 'ant-design-vue';
 
 import { getDeviceListByProductId } from '#/api/iot/device/device';
 import { DictTag } from '#/components/dict-tag';
-import { DEVICE_SELECTOR_OPTIONS } from '#/views/iot/utils/constants';
 
 /** 设备选择器组件 */
 defineOptions({ name: 'DeviceSelector' });
@@ -26,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);
 }
 
 /**
@@ -46,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;
   }
 }
@@ -78,12 +73,13 @@ 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"
   >
@@ -93,16 +89,16 @@ watch(
       :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>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/selectors/operator-selector.vue b/apps/web-antd/src/views/iot/rule/scene/form/selectors/operator-selector.vue
index 1cab17955..b924db42a 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/selectors/operator-selector.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/selectors/operator-selector.vue
@@ -2,13 +2,13 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue';
 
-import { useVModel } from '@vueuse/core';
-import { Select } from 'ant-design-vue';
-
 import {
   IoTDataSpecsDataTypeEnum,
   IotRuleSceneTriggerConditionParameterOperatorEnum,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { Select } from 'ant-design-vue';
 
 /** 操作符选择器组件 */
 defineOptions({ name: 'OperatorSelector' });
@@ -239,10 +239,11 @@ watch(
 <template>
   <div class="w-full">
     <Select
-      v-model="localValue"
+      v-model:value="localValue"
       placeholder="请选择操作符"
       @change="handleChange"
       class="w-full"
+      option-label-prop="label"
     >
       <Select.Option
         v-for="operator in availableOperators"
@@ -250,18 +251,18 @@ watch(
         :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>
@@ -271,7 +272,7 @@ watch(
 </template>
 
 <style scoped>
-:deep(.el-select-dropdown__item) {
+:deep(.ant-select-item-option-content) {
   height: auto;
   padding: 8px 20px;
 }
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue b/apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue
index 51588298e..0a8977eef 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue
@@ -47,7 +47,7 @@ async function getProductList() {
   }
 }
 
-// 组件挂载时获取产品列表
+/** 组件挂载时获取产品列表 */
 onMounted(() => {
   getProductList();
 });
@@ -55,12 +55,13 @@ 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"
   >
     <Select.Option
@@ -69,12 +70,12 @@ onMounted(() => {
       :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>
diff --git a/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue b/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue
index 31bf39012..893c20a29 100644
--- a/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue
@@ -1,30 +1,24 @@
 <!-- 属性选择器组件 -->
 <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 { IconifyIcon } from '@vben/icons';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Popover, Select, Tag } from 'ant-design-vue';
-
-import { getThingModelListByProductId } from '#/api/iot/thingmodel';
 import {
   getAccessModeLabel,
   getDataTypeName,
-  getDataTypeTagType,
   getEventTypeLabel,
   getThingModelServiceCallTypeLabel,
   IotRuleSceneTriggerTypeEnum,
   IoTThingModelTypeEnum,
   THING_MODEL_GROUP_LABELS,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Popover, Select, Tag } from 'ant-design-vue';
+
+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,138 @@ 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.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 +187,7 @@ function getPropertyRange(property: any) {
 watch(
   () => props.productId,
   () => {
-    getThingModelTSL();
+    loadThingModelTSL();
   },
   { immediate: true },
 );
@@ -275,17 +202,18 @@ 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"
     >
-      <Select.OptionGroup
+      <Select.OptGroup
         v-for="group in propertyGroups"
         :key="group.label"
         :label="group.label"
@@ -296,96 +224,76 @@ watch(
           :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>
         </Select.Option>
-      </Select.OptionGroup>
+      </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>
-
-      <!-- 弹出层内容 -->
-      <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">
+      <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
-            :type="getDataTypeTagType(selectedProperty.dataType)"
-            size="small"
-          >
+          <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-secondary">
+        <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-primary">
+            <span class="text-[12px] flex-1 text-foreground">
               {{ selectedProperty.identifier }}
             </span>
           </div>
 
           <div
             v-if="selectedProperty.description"
-            class="gap-8px flex items-start"
+            class="gap-[8px] flex items-start"
           >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground">
               描述：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <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-secondary">
+          <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-primary">
+            <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-secondary">
+          <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-primary">
+            <span class="text-[12px] flex-1 text-foreground">
               {{ selectedProperty.range }}
             </span>
           </div>
@@ -396,12 +304,12 @@ watch(
               selectedProperty.type === IoTThingModelTypeEnum.PROPERTY &&
               selectedProperty.accessMode
             "
-            class="gap-8px flex items-start"
+            class="gap-[8px] flex items-start"
           >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground">
               访问模式：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-foreground">
               {{ getAccessModeLabel(selectedProperty.accessMode) }}
             </span>
           </div>
@@ -411,12 +319,12 @@ watch(
               selectedProperty.type === IoTThingModelTypeEnum.EVENT &&
               selectedProperty.eventType
             "
-            class="gap-8px flex items-start"
+            class="gap-[8px] flex items-start"
           >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground">
               事件类型：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-foreground">
               {{ getEventTypeLabel(selectedProperty.eventType) }}
             </span>
           </div>
@@ -426,40 +334,46 @@ watch(
               selectedProperty.type === IoTThingModelTypeEnum.SERVICE &&
               selectedProperty.callType
             "
-            class="gap-8px flex items-start"
+            class="gap-[8px] flex items-start"
           >
-            <span class="text-12px min-w-60px flex-shrink-0 text-secondary">
+            <span class="text-[12px] min-w-[60px] flex-shrink-0 text-muted-foreground">
               调用类型：
             </span>
-            <span class="text-12px flex-1 text-primary">
+            <span class="text-[12px] flex-1 text-foreground">
               {{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }}
             </span>
           </div>
         </div>
-      </div>
+        </div>
+      </template>
+      <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-antd/src/views/iot/rule/scene/index.vue b/apps/web-antd/src/views/iot/rule/scene/index.vue
index a81ba6d55..3260bea5e 100644
--- a/apps/web-antd/src/views/iot/rule/scene/index.vue
+++ b/apps/web-antd/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 'ant-design-vue';
+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 'ant-design-vue';
 
 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,105 @@ 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[]) {
+  statistics.value = {
+    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 +205,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 || []);
+          return result;
         },
       },
     },
@@ -107,7 +229,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 +316,66 @@ 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-antd/src/views/iot/rule/scene/modules/form.vue b/apps/web-antd/src/views/iot/rule/scene/modules/form.vue
index 7a2de11bf..f7e575811 100644
--- a/apps/web-antd/src/views/iot/rule/scene/modules/form.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/modules/form.vue
@@ -1,13 +1,18 @@
 <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,
+  IotRuleSceneActionTypeEnum,
+  IotRuleSceneTriggerTypeEnum,
+  isDeviceTrigger,
+} from '@vben/constants';
 
-import { message } from 'ant-design-vue';
+import { Form, message } from 'ant-design-vue';
 
-import { useVbenForm } from '#/adapter/form';
 import {
   createSceneRule,
   getSceneRule,
@@ -15,73 +20,236 @@ import {
 } from '#/api/iot/rule/scene';
 import { $t } from '#/locales';
 
-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;
+    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 {
+  return {
+    ...result,
+    triggers: result.triggers?.length
+      ? result.triggers
+      : buildEmptyFormData().triggers,
+    actions: result.actions || [],
+  };
+}
+
+/** 触发器校验 */
+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;
+      }
+      // 事件上报 / 服务调用：operator 由前端自动设为 '='，参数值留空表示「事件 / 调用发生即匹配」
+      const isEventOrService =
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE;
+      if (!isEventOrService) {
+        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();
+}
+
+/** 执行器校验 */
+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' }],
+  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-antd/src/views/iot/thingmodel/data.ts b/apps/web-antd/src/views/iot/thingmodel/data.ts
index ec6072cf9..283477a77 100644
--- a/apps/web-antd/src/views/iot/thingmodel/data.ts
+++ b/apps/web-antd/src/views/iot/thingmodel/data.ts
@@ -1,9 +1,11 @@
 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';
 
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -21,13 +23,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 +43,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-antd/src/views/iot/thingmodel/index.vue b/apps/web-antd/src/views/iot/thingmodel/index.vue
index 2486a2590..34b727910 100644
--- a/apps/web-antd/src/views/iot/thingmodel/index.vue
+++ b/apps/web-antd/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 { Page, useVbenModal } from '@vben/common-ui';
+import { IOT_PROVIDE_KEY } from '@vben/constants';
 
 import { message } from 'ant-design-vue';
 
 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 { getDataTypeOptionsLabel, IOT_PROVIDE_KEY } from '../utils/constants';
 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-antd/src/views/iot/thingmodel/modules/components/data-definition.vue b/apps/web-antd/src/views/iot/thingmodel/modules/components/data-definition.vue
index 192819d5a..9878e0ec2 100644
--- a/apps/web-antd/src/views/iot/thingmodel/modules/components/data-definition.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/components/data-definition.vue
@@ -1,95 +1,73 @@
-<!-- TODO @haohao：如果是模块内用的，就用 modules 里。（等后面点在看，优先级：低） -->
 <script lang="ts" setup>
-import type { ThingModelData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
 
 import { computed } from 'vue';
 
-import { Tooltip } from 'ant-design-vue';
-
 import {
   getEventTypeLabel,
   getThingModelServiceCallTypeLabel,
   IoTDataSpecsDataTypeEnum,
   IoTThingModelTypeEnum,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
 
-/** 数据定义展示组件 */
-defineOptions({ name: 'DataDefinition' });
+import { Tooltip } from 'ant-design-vue';
 
-const props = defineProps<{ data: ThingModelData }>();
+const props = 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,
+]);
 
 const formattedDataSpecsList = computed(() => {
-  if (
-    !props.data.property?.dataSpecsList ||
-    props.data.property.dataSpecsList.length === 0
-  ) {
+  if (!props.data.property?.dataSpecsList?.length) {
     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
-  ) {
+  const list = props.data.property?.dataSpecsList;
+  if (!list?.length) {
     return '-';
   }
-  const first = props.data.property.dataSpecsList[0];
-  const count = props.data.property.dataSpecsList.length;
-  return count > 1
-    ? `${first.value}-${first.name} 等${count}项`
+  const first = list[0];
+  return list.length > 1
+    ? `${first.value}-${first.name} 等 ${list.length} 项`
     : `${first.value}-${first.name}`;
-}); // 显示的简短文本（第一个值）
+});
 </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,
-        )
-      "
-    >
+    <div v-if="PLACEHOLDER_TYPES.has(data.property?.dataType as any)">-</div>
+    <div v-if="LIST_TYPES.has(data.property?.dataType as any)">
       <Tooltip :title="formattedDataSpecsList" placement="topLeft">
-        <span class="data-specs-text">
+        <span
+          class="cursor-help border-b border-dashed border-gray-300 hover:border-blue-500 hover:text-blue-500"
+        >
           {{
-            IoTDataSpecsDataTypeEnum.BOOL === data.property?.dataType
+            data.property?.dataType === IoTDataSpecsDataTypeEnum.BOOL
               ? '布尔值'
               : '枚举值'
           }}：{{ shortText }}
@@ -98,25 +76,12 @@ const shortText = computed(() => {
     </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-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-array-data-specs.vue b/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/array.vue
similarity index 55%
rename from apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-array-data-specs.vue
rename to apps/web-antd/src/views/iot/thingmodel/modules/data-specs/array.vue
index 114e1fde2..4ab4ba7e1 100644
--- a/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-array-data-specs.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/array.vue
@@ -2,24 +2,33 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import { useVModel } from '@vueuse/core';
-import { Form, Input, Radio } from 'ant-design-vue';
-
 import {
   getDataTypeOptions,
   IoTDataSpecsDataTypeEnum,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
 
-import ThingModelStructDataSpecs from './thing-model-struct-data-specs.vue';
+import { useVModel } from '@vueuse/core';
+import { Form, Input, Radio } from 'ant-design-vue';
 
-/** 数组型的 dataSpecs 配置组件 */
-defineOptions({ name: 'ThingModelArrayDataSpecs' });
+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>;
 
-/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
+/** 元素类型切到 struct 时，初始化 dataSpecsList 占位 */
 function handleChange(val: any) {
   if (val !== IoTDataSpecsDataTypeEnum.STRUCT) {
     return;
@@ -31,29 +40,25 @@ function handleChange(val: any) {
 <template>
   <Form.Item
     :name="['property', 'dataSpecs', 'childDataType']"
+    :rules="ThingModelFormRules.childDataType"
     label="元素类型"
   >
     <Radio.Group 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>
+      <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']" label="元素个数">
+  <Form.Item
+    :name="['property', 'dataSpecs', 'size']"
+    :rules="ThingModelFormRules.size"
+    label="元素个数"
+  >
     <Input
       v-model:value="dataSpecs.size"
       placeholder="请输入数组中的元素个数"
diff --git a/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/enum.vue b/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/enum.vue
new file mode 100644
index 000000000..aca1e5fc5
--- /dev/null
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/enum.vue
@@ -0,0 +1,131 @@
+<!-- dataType：enum 数组类型 -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Form, Input, message } from 'ant-design-vue';
+
+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({ 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-antd/src/views/iot/thingmodel/modules/data-specs/index.ts b/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/index.ts
new file mode 100644
index 000000000..5b75f0a7f
--- /dev/null
+++ b/apps/web-antd/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-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-number-data-specs.vue b/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/number.vue
similarity index 74%
rename from apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-number-data-specs.vue
rename to apps/web-antd/src/views/iot/thingmodel/modules/data-specs/number.vue
index 024d91c55..6ebe07267 100644
--- a/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-number-data-specs.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/number.vue
@@ -2,7 +2,9 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import type { DataSpecsNumberData } from '#/api/iot/thingmodel';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -10,24 +12,28 @@ import { getDictOptions } from '@vben/hooks';
 import { useVModel } from '@vueuse/core';
 import { Form, Input, Select } from 'ant-design-vue';
 
-/** 数值型的 dataSpecs 配置组件 */
-defineOptions({ name: 'ThingModelNumberDataSpecs' });
-
 const props = defineProps<{ modelValue: any }>();
 const emits = defineEmits(['update:modelValue']);
 const dataSpecs = useVModel(
   props,
   'modelValue',
   emits,
-) as Ref<DataSpecsNumberData>;
+) as Ref<ThingModelApi.DataSpecsNumberData>;
 
-/** 单位发生变化时触发 */
-const unitChange = (UnitSpecs: any) => {
-  if (!UnitSpecs) return;
-  const [unitName, unit] = String(UnitSpecs).split('-');
+/** 单位字典选项 */
+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;
-};
+}
 </script>
 
 <template>
@@ -47,19 +53,16 @@ const unitChange = (UnitSpecs: any) => {
   </Form.Item>
   <Form.Item label="单位">
     <Select
-      :model-value="
+      :value="
         dataSpecs.unit ? `${dataSpecs.unitName}-${dataSpecs.unit}` : ''
       "
       show-search
       placeholder="请选择单位"
-      class="w-1/1"
+      class="w-full"
       @change="unitChange"
     >
       <Select.Option
-        v-for="(item, index) in getDictOptions(
-          DICT_TYPE.IOT_THING_MODEL_UNIT,
-          'string',
-        )"
+        v-for="(item, index) in unitOptions"
         :key="index"
         :value="`${item.label}-${item.value}`"
       >
diff --git a/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/struct.vue b/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/struct.vue
new file mode 100644
index 000000000..3f569c5ea
--- /dev/null
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/data-specs/struct.vue
@@ -0,0 +1,157 @@
+<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 { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Divider, Form, Input } from 'ant-design-vue';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+
+import ThingModelProperty from '../property.vue';
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>;
+
+const structFormRef = ref();
+const formData = ref<any>(buildEmptyFormData());
+
+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;
+    }
+    formData.value = {
+      identifier: data.identifier ?? '',
+      name: data.name ?? '',
+      description: data.description ?? '',
+      property: {
+        dataType: data.childDataType ?? IoTDataSpecsDataTypeEnum.INT,
+        dataSpecs: data.dataSpecs ?? {},
+        dataSpecsList: 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 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-antd/src/views/iot/thingmodel/modules/dataSpecs/index.ts b/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/index.ts
deleted file mode 100644
index 2aa250005..000000000
--- a/apps/web-antd/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-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-enum-data-specs.vue b/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-enum-data-specs.vue
deleted file mode 100644
index 9d2a6a03c..000000000
--- a/apps/web-antd/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, Form, Input, message } from 'ant-design-vue';
-
-/** 枚举型的 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>
-  <Form.Item 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>
-  </Form.Item>
-</template>
-
-<style lang="scss" scoped>
-:deep(.ant-form-item) {
-  .ant-form-item {
-    margin-bottom: 0;
-  }
-}
-</style>
diff --git a/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-struct-data-specs.vue b/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-struct-data-specs.vue
deleted file mode 100644
index ca866d072..000000000
--- a/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/thing-model-struct-data-specs.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<!-- dataType：struct 数组类型 -->
-<script lang="ts" setup>
-import type { Ref } from 'vue';
-
-import { nextTick, onMounted, ref, unref } from 'vue';
-
-import { isEmpty } from '@vben/utils';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Divider, Form, Input, Modal } from 'ant-design-vue';
-
-import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
-
-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 数据展示 -->
-  <Form.Item 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 type="vertical" />
-        <Button type="link" danger @click="deleteStructItem(index)">
-          删除
-        </Button>
-      </div>
-    </div>
-    <Button type="link" @click="openStructForm(null)"> +新增参数 </Button>
-  </Form.Item>
-
-  <!-- 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 }"
-    >
-      <Form.Item label="参数名称" name="name">
-        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
-      </Form.Item>
-      <Form.Item 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-antd/src/views/iot/thingmodel/modules/thing-model-event.vue b/apps/web-antd/src/views/iot/thingmodel/modules/event.vue
similarity index 79%
rename from apps/web-antd/src/views/iot/thingmodel/modules/thing-model-event.vue
rename to apps/web-antd/src/views/iot/thingmodel/modules/event.vue
index b8b44fce2..a53f6bcfa 100644
--- a/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-event.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/event.vue
@@ -4,22 +4,20 @@ import type { Ref } from 'vue';
 
 import { watch } from 'vue';
 
+import {
+  IoTThingModelEventTypeEnum,
+  IoTThingModelParamDirectionEnum,
+} from '@vben/constants';
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
 import { Form, Radio } from 'ant-design-vue';
 
-import {
-  IoTThingModelEventTypeEnum,
-  IoTThingModelParamDirectionEnum,
-} from '#/views/iot/utils/constants';
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
 
-import ThingModelInputOutputParam from './thing-model-input-output-param.vue';
+import ThingModelInputOutputParam from './input-output-param.vue';
 
-/** IoT 物模型事件 */
-defineOptions({ name: 'ThingModelEvent' });
-
-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>;
 
@@ -36,7 +34,7 @@ watch(
 <template>
   <Form.Item
     :name="['event', 'type']"
-    :rules="[{ required: true, message: '请选择事件类型', trigger: 'change' }]"
+    :rules="ThingModelFormRules.eventType"
     label="事件类型"
   >
     <Radio.Group v-model:value="thingModelEvent.type">
diff --git a/apps/web-antd/src/views/iot/thingmodel/modules/form.vue b/apps/web-antd/src/views/iot/thingmodel/modules/form.vue
new file mode 100644
index 000000000..581946898
--- /dev/null
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/form.vue
@@ -0,0 +1,261 @@
+<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 'ant-design-vue';
+
+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;
+    if (isEmpty(data.event.outputParams)) {
+      delete data.event.outputParams;
+    }
+    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;
+    if (isEmpty(data.service.inputParams)) {
+      delete data.service.inputParams;
+    }
+    if (isEmpty(data.service.outputParams)) {
+      delete data.service.outputParams;
+    }
+    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-antd/src/views/iot/thingmodel/modules/input-output-param.vue b/apps/web-antd/src/views/iot/thingmodel/modules/input-output-param.vue
new file mode 100644
index 000000000..648df2082
--- /dev/null
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/input-output-param.vue
@@ -0,0 +1,156 @@
+<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 { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Button, Divider, Form, Input } from 'ant-design-vue';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+
+import ThingModelProperty from './property.vue';
+
+const props = defineProps<{ direction: 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;
+    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;
+    }
+    // 设置到 values
+    formData.value = {
+      identifier: data.identifier ?? '',
+      name: data.name ?? '',
+      description: data.description ?? '',
+      property: {
+        dataType: data.dataType ?? IoTDataSpecsDataTypeEnum.INT,
+        dataSpecs: data.dataSpecs ?? {},
+        dataSpecsList: 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-antd/src/views/iot/thingmodel/modules/thing-model-property.vue b/apps/web-antd/src/views/iot/thingmodel/modules/property.vue
similarity index 55%
rename from apps/web-antd/src/views/iot/thingmodel/modules/thing-model-property.vue
rename to apps/web-antd/src/views/iot/thingmodel/modules/property.vue
index 579f62b88..85ac7b322 100644
--- a/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-property.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/property.vue
@@ -2,30 +2,28 @@
 <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';
 
-import { isEmpty } from '@vben/utils';
-
-import { useVModel } from '@vueuse/core';
-import { Form, Input, Radio, Select } from 'ant-design-vue';
-
 import {
   getDataTypeOptions,
   IoTDataSpecsDataTypeEnum,
   IoTThingModelAccessModeEnum,
-} from '#/views/iot/utils/constants';
+} from '@vben/constants';
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { Form, Input, Radio, Select } from 'ant-design-vue';
+
+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;
@@ -33,74 +31,82 @@ 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>
-  <Form.Item label="数据类型">
+  <Form.Item
+    :name="['property', 'dataType']"
+    :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]"
+    label="数据类型"
+  >
     <Select
       v-model:value="property.dataType"
       placeholder="请选择数据类型"
@@ -108,7 +114,7 @@ watch(
     >
       <!-- ARRAY 和 STRUCT 类型数据相互嵌套时，最多支持递归嵌套 2 层（父和子） -->
       <Select.Option
-        v-for="option in getDataTypeOptions2"
+        v-for="option in dataTypeOptions"
         :key="option.value"
         :value="option.value"
       >
@@ -118,13 +124,7 @@ watch(
   </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"
   />
   <!-- 枚举型配置 -->
@@ -137,17 +137,27 @@ watch(
     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>
   </Form.Item>
@@ -155,11 +165,12 @@ watch(
   <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>
@@ -172,7 +183,7 @@ watch(
     name="date"
   >
     <Input
-      class="w-255px!"
+      class="!w-[255px]"
       disabled
       placeholder="String 类型的 UTC 时间戳（毫秒）"
     />
@@ -190,6 +201,7 @@ watch(
   <Form.Item
     v-if="!isStructDataSpecs && !isParams"
     :name="['property', 'accessMode']"
+    :rules="ThingModelFormRules.accessMode"
     label="读写类型"
   >
     <Radio.Group v-model:value="property.accessMode">
diff --git a/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-service.vue b/apps/web-antd/src/views/iot/thingmodel/modules/service.vue
similarity index 81%
rename from apps/web-antd/src/views/iot/thingmodel/modules/thing-model-service.vue
rename to apps/web-antd/src/views/iot/thingmodel/modules/service.vue
index 2f2cffd92..dc0ab038a 100644
--- a/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-service.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/service.vue
@@ -4,22 +4,20 @@ import type { Ref } from 'vue';
 
 import { watch } from 'vue';
 
+import {
+  IoTThingModelParamDirectionEnum,
+  IoTThingModelServiceCallTypeEnum,
+} from '@vben/constants';
 import { isEmpty } from '@vben/utils';
 
 import { useVModel } from '@vueuse/core';
 import { Form, Radio } from 'ant-design-vue';
 
-import {
-  IoTThingModelParamDirectionEnum,
-  IoTThingModelServiceCallTypeEnum,
-} from '#/views/iot/utils/constants';
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
 
-import ThingModelInputOutputParam from './thing-model-input-output-param.vue';
+import ThingModelInputOutputParam from './input-output-param.vue';
 
-/** IoT 物模型服务 */
-defineOptions({ name: 'ThingModelService' });
-
-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>;
 
@@ -36,7 +34,7 @@ watch(
 <template>
   <Form.Item
     :name="['service', 'callType']"
-    :rules="[{ required: true, message: '请选择调用方式', trigger: 'change' }]"
+    :rules="ThingModelFormRules.callType"
     label="调用方式"
   >
     <Radio.Group v-model:value="service.callType">
diff --git a/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-form.vue b/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-form.vue
deleted file mode 100644
index 5b048bcf9..000000000
--- a/apps/web-antd/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 } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-import { $t } from '@vben/locales';
-import { cloneDeep } from '@vben/utils';
-
-import { Form, Input, message, Modal, Radio } from 'ant-design-vue';
-
-import {
-  createThingModel,
-  getThingModel,
-  updateThingModel,
-} from '#/api/iot/thingmodel';
-import {
-  IOT_PROVIDE_KEY,
-  IoTDataSpecsDataTypeEnum,
-  IoTThingModelTypeEnum,
-} from '#/views/iot/utils/constants';
-
-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 }"
-    >
-      <Form.Item 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 label="功能名称" name="name">
-        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
-      </Form.Item>
-      <Form.Item 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="desc">
-        <Input.TextArea
-          v-model:value="formData.desc"
-          :maxlength="200"
-          :rows="3"
-          placeholder="请输入属性描述"
-        />
-      </Form.Item>
-    </Form>
-  </Modal>
-</template>
diff --git a/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-input-output-param.vue b/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-input-output-param.vue
deleted file mode 100644
index 10ddd7339..000000000
--- a/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-input-output-param.vue
+++ /dev/null
@@ -1,163 +0,0 @@
-<!-- 产品的物模型表单（event、service 项里的参数） -->
-<script lang="ts" setup>
-import type { Ref } from 'vue';
-
-import { ref, unref } from 'vue';
-
-import { isEmpty } from '@vben/utils';
-
-import { useVModel } from '@vueuse/core';
-import { Button, Divider, Form, Input, Modal } from 'ant-design-vue';
-
-import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
-
-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 type="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 }"
-    >
-      <Form.Item label="参数名称" name="name">
-        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
-      </Form.Item>
-      <Form.Item 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-antd/src/views/iot/thingmodel/modules/thing-model-tsl.vue b/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-tsl.vue
deleted file mode 100644
index b8bb84005..000000000
--- a/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-tsl.vue
+++ /dev/null
@@ -1,117 +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 { Modal, Radio, Textarea } from 'ant-design-vue';
-
-import { getThingModelTSL } from '#/api/iot/thingmodel';
-import { IOT_PROVIDE_KEY } from '#/views/iot/utils/constants';
-
-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">
-      <Radio.Group v-model:value="viewMode" size="small">
-        <Radio.Button value="view">代码视图</Radio.Button>
-        <Radio.Button value="editor">编辑器视图</Radio.Button>
-      </Radio.Group>
-    </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-antd/src/views/iot/thingmodel/modules/tsl.vue b/apps/web-antd/src/views/iot/thingmodel/modules/tsl.vue
new file mode 100644
index 000000000..8e37ef16f
--- /dev/null
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/tsl.vue
@@ -0,0 +1,79 @@
+<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 'ant-design-vue';
+
+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-antd/src/views/iot/utils/constants.ts b/apps/web-antd/src/views/iot/utils/constants.ts
deleted file mode 100644
index e5c6b5db2..000000000
--- a/apps/web-antd/src/views/iot/utils/constants.ts
+++ /dev/null
@@ -1,656 +0,0 @@
-// TODO @AI：感觉这块，放到 biz-iot-enum 里好点。
-
-/** 检查值是否为空 */
-const isEmpty = (value: any): boolean => {
-  return value === null || value === undefined || value === '';
-};
-
-/** IoT 依赖注入 KEY */
-export const IOT_PROVIDE_KEY = {
-  PRODUCT: 'IOT_PRODUCT',
-};
-
-/** IoT 设备状态枚举 */
-export enum DeviceStateEnum {
-  INACTIVE = 0, // 未激活
-  ONLINE = 1, // 在线
-  OFFLINE = 2, // 离线
-}
-
-/** IoT 产品物模型类型枚举类 */
-export const IoTThingModelTypeEnum = {
-  PROPERTY: 1, // 属性
-  SERVICE: 2, // 服务
-  EVENT: 3, // 事件
-};
-
-// IoT 产品物模型服务调用方式枚举
-export const IoTThingModelServiceCallTypeEnum = {
-  ASYNC: {
-    label: '异步',
-    value: 'async',
-  },
-  SYNC: {
-    label: '同步',
-    value: 'sync',
-  },
-};
-export const getThingModelServiceCallTypeLabel = (
-  value: string,
-): string | undefined =>
-  Object.values(IoTThingModelServiceCallTypeEnum).find(
-    (type) => type.value === value,
-  )?.label;
-
-// IoT 产品物模型事件类型枚举
-export const IoTThingModelEventTypeEnum = {
-  INFO: {
-    label: '信息',
-    value: 'info',
-  },
-  ALERT: {
-    label: '告警',
-    value: 'alert',
-  },
-  ERROR: {
-    label: '故障',
-    value: 'error',
-  },
-};
-export const getEventTypeLabel = (value: string): string | undefined =>
-  Object.values(IoTThingModelEventTypeEnum).find((type) => type.value === value)
-    ?.label;
-
-// IoT 产品物模型参数是输入参数还是输出参数
-export const IoTThingModelParamDirectionEnum = {
-  INPUT: 'input', // 输入参数
-  OUTPUT: 'output', // 输出参数
-};
-
-// IoT 产品物模型访问模式枚举类
-export const IoTThingModelAccessModeEnum = {
-  READ_WRITE: {
-    label: '读写',
-    value: 'rw',
-  },
-  READ_ONLY: {
-    label: '只读',
-    value: 'r',
-  },
-  WRITE_ONLY: {
-    label: '只写',
-    value: 'w',
-  },
-};
-
-/** 获取访问模式标签 */
-export const getAccessModeLabel = (value: string): string => {
-  const mode = Object.values(IoTThingModelAccessModeEnum).find(
-    (mode) => mode.value === value,
-  );
-  return mode?.label || value;
-};
-
-/** 属性值的数据类型 */
-export const IoTDataSpecsDataTypeEnum = {
-  INT: 'int',
-  FLOAT: 'float',
-  DOUBLE: 'double',
-  ENUM: 'enum',
-  BOOL: 'bool',
-  TEXT: 'text',
-  DATE: 'date',
-  STRUCT: 'struct',
-  ARRAY: 'array',
-};
-
-export const getDataTypeOptions = () => {
-  return [
-    { value: IoTDataSpecsDataTypeEnum.INT, label: '整数型' },
-    { value: IoTDataSpecsDataTypeEnum.FLOAT, label: '单精度浮点型' },
-    { value: IoTDataSpecsDataTypeEnum.DOUBLE, label: '双精度浮点型' },
-    { value: IoTDataSpecsDataTypeEnum.ENUM, label: '枚举型' },
-    { value: IoTDataSpecsDataTypeEnum.BOOL, label: '布尔型' },
-    { value: IoTDataSpecsDataTypeEnum.TEXT, label: '文本型' },
-    { value: IoTDataSpecsDataTypeEnum.DATE, label: '时间型' },
-    { value: IoTDataSpecsDataTypeEnum.STRUCT, label: '结构体' },
-    { value: IoTDataSpecsDataTypeEnum.ARRAY, label: '数组' },
-  ];
-};
-
-/** 获得物体模型数据类型配置项名称 */
-export const getDataTypeOptionsLabel = (value: string) => {
-  if (isEmpty(value)) {
-    return value;
-  }
-  const dataType = getDataTypeOptions().find(
-    (option) => option.value === value,
-  );
-  return dataType && `${dataType.value}(${dataType.label})`;
-};
-
-/** 获取数据类型显示名称（用于属性选择器） */
-export const getDataTypeName = (dataType: string): string => {
-  const typeMap: Record<string, string> = {
-    [IoTDataSpecsDataTypeEnum.INT]: '整数',
-    [IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数',
-    [IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度',
-    [IoTDataSpecsDataTypeEnum.TEXT]: '字符串',
-    [IoTDataSpecsDataTypeEnum.BOOL]: '布尔值',
-    [IoTDataSpecsDataTypeEnum.ENUM]: '枚举',
-    [IoTDataSpecsDataTypeEnum.DATE]: '日期',
-    [IoTDataSpecsDataTypeEnum.STRUCT]: '结构体',
-    [IoTDataSpecsDataTypeEnum.ARRAY]: '数组',
-  };
-  return typeMap[dataType] || dataType;
-};
-
-/** 获取数据类型标签类型（用于 tag 的 type 属性） */
-export const getDataTypeTagType = (
-  dataType: string,
-): 'danger' | 'info' | 'primary' | 'success' | 'warning' => {
-  const tagMap: Record<
-    string,
-    'danger' | 'info' | 'primary' | 'success' | 'warning'
-  > = {
-    [IoTDataSpecsDataTypeEnum.INT]: 'primary',
-    [IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
-    [IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
-    [IoTDataSpecsDataTypeEnum.TEXT]: 'info',
-    [IoTDataSpecsDataTypeEnum.BOOL]: 'warning',
-    [IoTDataSpecsDataTypeEnum.ENUM]: 'danger',
-    [IoTDataSpecsDataTypeEnum.DATE]: 'primary',
-    [IoTDataSpecsDataTypeEnum.STRUCT]: 'info',
-    [IoTDataSpecsDataTypeEnum.ARRAY]: 'warning',
-  };
-  return tagMap[dataType] || 'info';
-};
-
-/** 物模型组标签常量 */
-export const THING_MODEL_GROUP_LABELS = {
-  PROPERTY: '设备属性',
-  EVENT: '设备事件',
-  SERVICE: '设备服务',
-};
-
-// IoT OTA 任务设备范围枚举
-export const IoTOtaTaskDeviceScopeEnum = {
-  ALL: {
-    label: '全部设备',
-    value: 1,
-  },
-  SELECT: {
-    label: '指定设备',
-    value: 2,
-  },
-};
-
-// IoT OTA 任务状态枚举
-export const IoTOtaTaskStatusEnum = {
-  IN_PROGRESS: {
-    label: '进行中',
-    value: 10,
-  },
-  END: {
-    label: '已结束',
-    value: 20,
-  },
-  CANCELED: {
-    label: '已取消',
-    value: 30,
-  },
-};
-
-// IoT OTA 升级记录状态枚举
-export const IoTOtaTaskRecordStatusEnum = {
-  PENDING: {
-    label: '待推送',
-    value: 0,
-  },
-  PUSHED: {
-    label: '已推送',
-    value: 10,
-  },
-  UPGRADING: {
-    label: '升级中',
-    value: 20,
-  },
-  SUCCESS: {
-    label: '升级成功',
-    value: 30,
-  },
-  FAILURE: {
-    label: '升级失败',
-    value: 40,
-  },
-  CANCELED: {
-    label: '升级取消',
-    value: 50,
-  },
-};
-
-// ========== 场景联动规则相关常量 ==========
-
-/** IoT 场景联动触发器类型枚举 */
-export const IotRuleSceneTriggerTypeEnum = {
-  DEVICE_STATE_UPDATE: 1, // 设备上下线变更
-  DEVICE_PROPERTY_POST: 2, // 物模型属性上报
-  DEVICE_EVENT_POST: 3, // 设备事件上报
-  DEVICE_SERVICE_INVOKE: 4, // 设备服务调用
-  TIMER: 100, // 定时触发
-};
-
-/** 触发器类型选项配置 */
-export const triggerTypeOptions = [
-  {
-    value: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
-    label: '设备状态变更',
-  },
-  {
-    value: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
-    label: '设备属性上报',
-  },
-  {
-    value: IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST,
-    label: '设备事件上报',
-  },
-  {
-    value: IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
-    label: '设备服务调用',
-  },
-  {
-    value: IotRuleSceneTriggerTypeEnum.TIMER,
-    label: '定时触发',
-  },
-];
-
-/** 判断是否为设备触发器类型 */
-export function isDeviceTrigger(type: number): boolean {
-  const deviceTriggerTypes = [
-    IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
-    IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
-    IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST,
-    IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
-  ] as number[];
-  return deviceTriggerTypes.includes(type);
-}
-
-// ========== 场景联动规则执行器相关常量 ==========
-
-/** IoT 场景联动执行器类型枚举 */
-export const IotRuleSceneActionTypeEnum = {
-  DEVICE_PROPERTY_SET: 1, // 设备属性设置
-  DEVICE_SERVICE_INVOKE: 2, // 设备服务调用
-  ALERT_TRIGGER: 100, // 告警触发
-  ALERT_RECOVER: 101, // 告警恢复
-};
-
-/** 执行器类型选项配置 */
-export const getActionTypeOptions = () => [
-  {
-    value: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET,
-    label: '设备属性设置',
-  },
-  {
-    value: IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE,
-    label: '设备服务调用',
-  },
-  {
-    value: IotRuleSceneActionTypeEnum.ALERT_TRIGGER,
-    label: '触发告警',
-  },
-  {
-    value: IotRuleSceneActionTypeEnum.ALERT_RECOVER,
-    label: '恢复告警',
-  },
-];
-
-/** 获取执行器类型标签 */
-export const getActionTypeLabel = (type: number): string => {
-  const option = getActionTypeOptions().find((opt) => opt.value === type);
-  return option?.label || '未知类型';
-};
-
-/** IoT 场景联动触发条件参数操作符枚举 */
-export const IotRuleSceneTriggerConditionParameterOperatorEnum = {
-  EQUALS: { name: '等于', value: '=' }, // 等于
-  NOT_EQUALS: { name: '不等于', value: '!=' }, // 不等于
-  GREATER_THAN: { name: '大于', value: '>' }, // 大于
-  GREATER_THAN_OR_EQUALS: { name: '大于等于', value: '>=' }, // 大于等于
-  LESS_THAN: { name: '小于', value: '<' }, // 小于
-  LESS_THAN_OR_EQUALS: { name: '小于等于', value: '<=' }, // 小于等于
-  IN: { name: '在...之中', value: 'in' }, // 在...之中
-  NOT_IN: { name: '不在...之中', value: 'not in' }, // 不在...之中
-  BETWEEN: { name: '在...之间', value: 'between' }, // 在...之间
-  NOT_BETWEEN: { name: '不在...之间', value: 'not between' }, // 不在...之间
-  LIKE: { name: '字符串匹配', value: 'like' }, // 字符串匹配
-  NOT_NULL: { name: '非空', value: 'not null' }, // 非空
-};
-
-/** IoT 场景联动触发条件类型枚举 */
-export const IotRuleSceneTriggerConditionTypeEnum = {
-  DEVICE_STATUS: 1, // 设备状态
-  DEVICE_PROPERTY: 2, // 设备属性
-  CURRENT_TIME: 3, // 当前时间
-};
-
-/** 获取条件类型选项 */
-export const getConditionTypeOptions = () => [
-  {
-    value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS,
-    label: '设备状态',
-  },
-  {
-    value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY,
-    label: '设备属性',
-  },
-  {
-    value: IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME,
-    label: '当前时间',
-  },
-];
-
-/** 设备状态枚举 - 统一的设备状态管理 */
-export const IoTDeviceStatusEnum = {
-  // 在线状态
-  ONLINE: {
-    label: '在线',
-    value: 'online',
-    tagType: 'success',
-  },
-  OFFLINE: {
-    label: '离线',
-    value: 'offline',
-    tagType: 'danger',
-  },
-  // 启用状态
-  ENABLED: {
-    label: '正常',
-    value: 0,
-    value2: 'enabled',
-    tagType: 'success',
-  },
-  DISABLED: {
-    label: '禁用',
-    value: 1,
-    value2: 'disabled',
-    tagType: 'danger',
-  },
-  // 激活状态
-  ACTIVATED: {
-    label: '已激活',
-    value2: 'activated',
-    tagType: 'success',
-  },
-  NOT_ACTIVATED: {
-    label: '未激活',
-    value2: 'not_activated',
-    tagType: 'info',
-  },
-};
-
-/** 设备选择器特殊选项 */
-export const DEVICE_SELECTOR_OPTIONS = {
-  ALL_DEVICES: {
-    id: 0,
-    deviceName: '全部设备',
-  },
-};
-
-/** IoT 场景联动触发时间操作符枚举 */
-export const IotRuleSceneTriggerTimeOperatorEnum = {
-  BEFORE_TIME: { name: '在时间之前', value: 'before_time' }, // 在时间之前
-  AFTER_TIME: { name: '在时间之后', value: 'after_time' }, // 在时间之后
-  BETWEEN_TIME: { name: '在时间之间', value: 'between_time' }, // 在时间之间
-  AT_TIME: { name: '在指定时间', value: 'at_time' }, // 在指定时间
-  BEFORE_TODAY: { name: '在今日之前', value: 'before_today' }, // 在今日之前
-  AFTER_TODAY: { name: '在今日之后', value: 'after_today' }, // 在今日之后
-  TODAY: { name: '在今日之间', value: 'today' }, // 在今日之间
-};
-
-/** 获取触发器类型标签 */
-export const getTriggerTypeLabel = (type: number): string => {
-  const option = triggerTypeOptions.find((item) => item.value === type);
-  return option?.label || '未知类型';
-};
-
-// ========== JSON 参数输入组件相关常量 ==========
-
-/** JSON 参数输入组件类型枚举 */
-export const JsonParamsInputTypeEnum = {
-  SERVICE: 'service',
-  EVENT: 'event',
-  PROPERTY: 'property',
-  CUSTOM: 'custom',
-};
-
-/** JSON 参数输入组件类型 */
-export type JsonParamsInputType =
-  (typeof JsonParamsInputTypeEnum)[keyof typeof JsonParamsInputTypeEnum];
-
-/** JSON 参数输入组件文本常量 */
-export const JSON_PARAMS_INPUT_CONSTANTS = {
-  // 基础文本
-  PLACEHOLDER: '请输入JSON格式的参数',
-  JSON_FORMAT_CORRECT: 'JSON 格式正确',
-  QUICK_FILL_LABEL: '快速填充：',
-  EXAMPLE_DATA_BUTTON: '示例数据',
-  CLEAR_BUTTON: '清空',
-  VIEW_EXAMPLE_TITLE: '查看参数示例',
-  COMPLETE_JSON_FORMAT: '完整 JSON 格式：',
-  REQUIRED_TAG: '必填',
-
-  // 错误信息
-  PARAMS_MUST_BE_OBJECT: '参数必须是一个有效的 JSON 对象',
-  PARAM_REQUIRED_ERROR: (paramName: string) => `参数 ${paramName} 为必填项`,
-  JSON_FORMAT_ERROR: (error: string) => `JSON格式错误: ${error}`,
-  UNKNOWN_ERROR: '未知错误',
-
-  // 类型相关标题
-  TITLES: {
-    SERVICE: (name?: string) => `${name || '服务'} - 输入参数示例`,
-    EVENT: (name?: string) => `${name || '事件'} - 输出参数示例`,
-    PROPERTY: '属性设置 - 参数示例',
-    CUSTOM: (name?: string) => `${name || '自定义'} - 参数示例`,
-    DEFAULT: '参数示例',
-  },
-
-  // 参数标签
-  PARAMS_LABELS: {
-    SERVICE: '输入参数',
-    EVENT: '输出参数',
-    PROPERTY: '属性参数',
-    CUSTOM: '参数列表',
-    DEFAULT: '参数',
-  },
-
-  // 空状态消息
-  EMPTY_MESSAGES: {
-    SERVICE: '此服务无需输入参数',
-    EVENT: '此事件无输出参数',
-    PROPERTY: '无可设置的属性',
-    CUSTOM: '无参数配置',
-    DEFAULT: '无参数',
-  },
-
-  // 无配置消息
-  NO_CONFIG_MESSAGES: {
-    SERVICE: '请先选择服务',
-    EVENT: '请先选择事件',
-    PROPERTY: '请先选择产品',
-    CUSTOM: '请先进行配置',
-    DEFAULT: '请先进行配置',
-  },
-};
-
-/** JSON 参数输入组件图标常量 */
-export const JSON_PARAMS_INPUT_ICONS = {
-  // 标题图标
-  TITLE_ICONS: {
-    SERVICE: 'ep:service',
-    EVENT: 'ep:bell',
-    PROPERTY: 'ep:edit',
-    CUSTOM: 'ep:document',
-    DEFAULT: 'ep:document',
-  },
-
-  // 参数图标
-  PARAMS_ICONS: {
-    SERVICE: 'ep:edit',
-    EVENT: 'ep:upload',
-    PROPERTY: 'ep:setting',
-    CUSTOM: 'ep:list',
-    DEFAULT: 'ep:edit',
-  },
-
-  // 状态图标
-  STATUS_ICONS: {
-    ERROR: 'ep:warning',
-    SUCCESS: 'ep:circle-check',
-  },
-};
-
-/** JSON 参数输入组件示例值常量 */
-export const JSON_PARAMS_EXAMPLE_VALUES: Record<string, any> = {
-  [IoTDataSpecsDataTypeEnum.INT]: { display: '25', value: 25 },
-  [IoTDataSpecsDataTypeEnum.FLOAT]: { display: '25.5', value: 25.5 },
-  [IoTDataSpecsDataTypeEnum.DOUBLE]: { display: '25.5', value: 25.5 },
-  [IoTDataSpecsDataTypeEnum.BOOL]: { display: 'false', value: false },
-  [IoTDataSpecsDataTypeEnum.TEXT]: { display: '"auto"', value: 'auto' },
-  [IoTDataSpecsDataTypeEnum.ENUM]: { display: '"option1"', value: 'option1' },
-  [IoTDataSpecsDataTypeEnum.STRUCT]: { display: '{}', value: {} },
-  [IoTDataSpecsDataTypeEnum.ARRAY]: { display: '[]', value: [] },
-  DEFAULT: { display: '""', value: '' },
-};
-
-// ========== Modbus 通用常量 ==========
-
-/** Modbus 模式枚举 */
-export const ModbusModeEnum = {
-  POLLING: 1, // 云端轮询
-  ACTIVE_REPORT: 2, // 主动上报
-} as const;
-
-/** Modbus 帧格式枚举 */
-export const ModbusFrameFormatEnum = {
-  MODBUS_TCP: 1, // Modbus TCP
-  MODBUS_RTU: 2, // Modbus RTU
-} as const;
-
-/** Modbus 功能码枚举 */
-export const ModbusFunctionCodeEnum = {
-  READ_COILS: 1, // 读线圈
-  READ_DISCRETE_INPUTS: 2, // 读离散输入
-  READ_HOLDING_REGISTERS: 3, // 读保持寄存器
-  READ_INPUT_REGISTERS: 4, // 读输入寄存器
-} as const;
-
-/** Modbus 功能码选项 */
-export const ModbusFunctionCodeOptions = [
-  { value: 1, label: '01 - 读线圈 (Coils)', description: '可读写布尔值' },
-  {
-    value: 2,
-    label: '02 - 读离散输入 (Discrete Inputs)',
-    description: '只读布尔值',
-  },
-  {
-    value: 3,
-    label: '03 - 读保持寄存器 (Holding Registers)',
-    description: '可读写 16 位数据',
-  },
-  {
-    value: 4,
-    label: '04 - 读输入寄存器 (Input Registers)',
-    description: '只读 16 位数据',
-  },
-];
-
-/** Modbus 原始数据类型枚举 */
-export const ModbusRawDataTypeEnum = {
-  INT16: 'INT16',
-  UINT16: 'UINT16',
-  INT32: 'INT32',
-  UINT32: 'UINT32',
-  FLOAT: 'FLOAT',
-  DOUBLE: 'DOUBLE',
-  BOOLEAN: 'BOOLEAN',
-  STRING: 'STRING',
-} as const;
-
-/** Modbus 原始数据类型选项 */
-export const ModbusRawDataTypeOptions = [
-  {
-    value: 'INT16',
-    label: 'INT16',
-    description: '有符号16位整数',
-    registerCount: 1,
-  },
-  {
-    value: 'UINT16',
-    label: 'UINT16',
-    description: '无符号16位整数',
-    registerCount: 1,
-  },
-  {
-    value: 'INT32',
-    label: 'INT32',
-    description: '有符号32位整数',
-    registerCount: 2,
-  },
-  {
-    value: 'UINT32',
-    label: 'UINT32',
-    description: '无符号32位整数',
-    registerCount: 2,
-  },
-  {
-    value: 'FLOAT',
-    label: 'FLOAT',
-    description: '32位浮点数',
-    registerCount: 2,
-  },
-  {
-    value: 'DOUBLE',
-    label: 'DOUBLE',
-    description: '64位浮点数',
-    registerCount: 4,
-  },
-  {
-    value: 'BOOLEAN',
-    label: 'BOOLEAN',
-    description: '布尔值',
-    registerCount: 1,
-  },
-  {
-    value: 'STRING',
-    label: 'STRING',
-    description: '字符串',
-    registerCount: 0,
-  },
-];
-
-/** Modbus 字节序选项 - 16位 */
-export const ModbusByteOrder16Options = [
-  { value: 'AB', label: 'AB', description: '大端序' },
-  { value: 'BA', label: 'BA', description: '小端序' },
-];
-
-/** Modbus 字节序选项 - 32位 */
-export const ModbusByteOrder32Options = [
-  { value: 'ABCD', label: 'ABCD', description: '大端序' },
-  { value: 'CDAB', label: 'CDAB', description: '大端字交换' },
-  { value: 'DCBA', label: 'DCBA', description: '小端序' },
-  { value: 'BADC', label: 'BADC', description: '小端字交换' },
-];
-
-/** 根据数据类型获取字节序选项 */
-export const getByteOrderOptions = (rawDataType: string) => {
-  if (['FLOAT', 'INT32', 'UINT32'].includes(rawDataType)) {
-    return ModbusByteOrder32Options;
-  }
-  if (rawDataType === 'DOUBLE') {
-    // 64 位暂时复用 32 位字节序
-    return ModbusByteOrder32Options;
-  }
-  return ModbusByteOrder16Options;
-};
diff --git a/apps/web-antd/src/views/mall/product/brand/data.ts b/apps/web-antd/src/views/mall/product/brand/data.ts
index f9cfa10c0..4d1b02c87 100644
--- a/apps/web-antd/src/views/mall/product/brand/data.ts
+++ b/apps/web-antd/src/views/mall/product/brand/data.ts
@@ -41,6 +41,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '品牌排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入品牌排序',
       },
diff --git a/apps/web-antd/src/views/mall/product/category/data.ts b/apps/web-antd/src/views/mall/product/category/data.ts
index 6e1e1de3b..86456b05e 100644
--- a/apps/web-antd/src/views/mall/product/category/data.ts
+++ b/apps/web-antd/src/views/mall/product/category/data.ts
@@ -65,6 +65,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '分类排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入分类排序',
       },
diff --git a/apps/web-antd/src/views/mall/product/spu/form/data.ts b/apps/web-antd/src/views/mall/product/spu/form/data.ts
index d2ff7eeb5..7d53a2736 100644
--- a/apps/web-antd/src/views/mall/product/spu/form/data.ts
+++ b/apps/web-antd/src/views/mall/product/spu/form/data.ts
@@ -281,6 +281,7 @@ export function useOtherFormSchema(): VbenFormSchema[] {
       label: '商品排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
       },
       rules: 'required',
@@ -290,6 +291,7 @@ export function useOtherFormSchema(): VbenFormSchema[] {
       label: '赠送积分',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
       },
       rules: 'required',
@@ -299,6 +301,7 @@ export function useOtherFormSchema(): VbenFormSchema[] {
       label: '虚拟销量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
       },
       rules: 'required',
diff --git a/apps/web-antd/src/views/mall/promotion/article/category/data.ts b/apps/web-antd/src/views/mall/promotion/article/category/data.ts
index 3929ecb8e..4db06dffe 100644
--- a/apps/web-antd/src/views/mall/promotion/article/category/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/article/category/data.ts
@@ -40,6 +40,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入显示顺序',
       },
diff --git a/apps/web-antd/src/views/mall/promotion/article/data.ts b/apps/web-antd/src/views/mall/promotion/article/data.ts
index 5af659775..f007898e5 100644
--- a/apps/web-antd/src/views/mall/promotion/article/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/article/data.ts
@@ -106,6 +106,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入排序',
       },
diff --git a/apps/web-antd/src/views/mall/promotion/banner/data.ts b/apps/web-antd/src/views/mall/promotion/banner/data.ts
index 0490be5dd..71adda1ae 100644
--- a/apps/web-antd/src/views/mall/promotion/banner/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/banner/data.ts
@@ -62,6 +62,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入排序',
       },
diff --git a/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts b/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
index d7474eeb5..72a4bf171 100644
--- a/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/bargain/activity/data.ts
@@ -55,6 +55,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '助力人数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 1,
         placeholder: '达到该人数才能砍到低价',
       },
@@ -65,6 +66,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '砍价次数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 1,
         placeholder: '最大帮砍次数',
       },
@@ -75,6 +77,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '购买限制',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 1,
         placeholder: '最大购买次数',
       },
@@ -85,6 +88,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '最小砍价金额(元)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         step: 0.01,
@@ -96,6 +100,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '最大砍价金额(元)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         step: 0.01,
diff --git a/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts b/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
index 8891f892c..8c46b0fff 100644
--- a/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/combination/activity/data.ts
@@ -55,6 +55,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '拼团人数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '达到该人数即成团',
         min: 2,
       },
@@ -65,6 +66,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '限制时长',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '限制时长(小时)',
         min: 0,
       },
@@ -75,6 +77,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '总限购数量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入总限购数量',
         min: 0,
       },
@@ -84,6 +87,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '单次限购数量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入单次限购数量',
         min: 0,
       },
diff --git a/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts b/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts
index 11f86c422..26a3f987f 100644
--- a/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts
@@ -122,6 +122,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '优惠券面额',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         placeholder: '请输入优惠金额，单位：元',
@@ -139,6 +140,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '优惠券折扣',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 1,
         max: 9.9,
         precision: 1,
@@ -157,6 +159,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '最多优惠',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         placeholder: '请输入最多优惠',
@@ -174,6 +177,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '满多少元可以使用',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         placeholder: '无门槛请设为 0',
@@ -196,6 +200,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '发放数量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: -1,
         placeholder: '发放数量，没有之后不能领取或发放，-1 为不限制',
         addonAfter: '张',
@@ -212,6 +217,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '每人限领个数',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: -1,
         placeholder: '设置为 -1 时，可无限领取',
         addonAfter: '张',
@@ -255,6 +261,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '领取日期',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '第 0 为今天生效',
         addonBefore: '第',
@@ -271,6 +278,7 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'fixedEndTerm',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入结束天数',
         addonBefore: '至',
diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
index 9b2abb065..7366c1300 100644
--- a/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/data.ts
@@ -109,9 +109,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入排序',
-        class: '!w-full',
       },
       defaultValue: 0,
       rules: 'required',
diff --git a/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts b/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
index 2ebb63de5..090a5ec64 100644
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
@@ -99,9 +99,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '总限购数量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入总限购数量',
         min: 0,
-        class: 'w-full',
       },
       rules: z.number().min(0).default(0),
     },
@@ -110,9 +110,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '单次限购数量',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入单次限购数量',
         min: 0,
-        class: 'w-full',
       },
       rules: z.number().min(0).default(0),
     },
@@ -121,9 +121,9 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入排序',
         min: 0,
-        class: 'w-full',
       },
       rules: z.number().min(0).default(0),
     },
diff --git a/apps/web-antd/src/views/mall/trade/config/data.ts b/apps/web-antd/src/views/mall/trade/config/data.ts
index 564f9722c..557a9c657 100644
--- a/apps/web-antd/src/views/mall/trade/config/data.ts
+++ b/apps/web-antd/src/views/mall/trade/config/data.ts
@@ -63,10 +63,10 @@ export const schema: VbenFormSchema[] = [
     label: '满额包邮',
     component: 'InputNumber',
     componentProps: {
+      class: '!w-full',
       min: 0,
       precision: 2,
       placeholder: '请输入满额包邮金额',
-      class: 'w-full',
     },
     rules: 'required',
     dependencies: {
@@ -145,10 +145,10 @@ export const schema: VbenFormSchema[] = [
     label: '一级返佣比例（%）',
     component: 'InputNumber',
     componentProps: {
+      class: '!w-full',
       min: 0,
       max: 100,
       placeholder: '请输入一级返佣比例',
-      class: 'w-full',
     },
     rules: 'required',
     dependencies: {
@@ -162,10 +162,10 @@ export const schema: VbenFormSchema[] = [
     label: '二级返佣比例（%）',
     component: 'InputNumber',
     componentProps: {
+      class: '!w-full',
       min: 0,
       max: 100,
       placeholder: '请输入二级返佣比例',
-      class: 'w-full',
     },
     rules: 'required',
     dependencies: {
@@ -179,9 +179,9 @@ export const schema: VbenFormSchema[] = [
     label: '佣金冻结天数',
     component: 'InputNumber',
     componentProps: {
+      class: '!w-full',
       min: 0,
       placeholder: '请输入佣金冻结天数',
-      class: 'w-full',
     },
     rules: 'required',
     dependencies: {
@@ -195,10 +195,10 @@ export const schema: VbenFormSchema[] = [
     label: '提现最低金额（元）',
     component: 'InputNumber',
     componentProps: {
+      class: '!w-full',
       min: 0,
       precision: 2,
       placeholder: '请输入提现最低金额',
-      class: 'w-full',
     },
     rules: 'required',
     dependencies: {
@@ -212,11 +212,11 @@ export const schema: VbenFormSchema[] = [
     label: '提现手续费（%）',
     component: 'InputNumber',
     componentProps: {
+      class: '!w-full',
       min: 0,
       max: 100,
       precision: 2,
       placeholder: '请输入提现手续费百分比',
-      class: 'w-full',
     },
     rules: 'required',
     dependencies: {
diff --git a/apps/web-antd/src/views/mall/trade/delivery/express/data.ts b/apps/web-antd/src/views/mall/trade/delivery/express/data.ts
index 7b3fe0512..279f8a898 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/express/data.ts
+++ b/apps/web-antd/src/views/mall/trade/delivery/express/data.ts
@@ -47,6 +47,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入显示顺序',
       },
diff --git a/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/data.ts b/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/data.ts
index 0a63d725c..641054a95 100644
--- a/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/data.ts
+++ b/apps/web-antd/src/views/mall/trade/delivery/expressTemplate/data.ts
@@ -140,6 +140,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入显示顺序',
         min: 0,
       },
diff --git a/apps/web-antd/src/views/mall/trade/order/data.ts b/apps/web-antd/src/views/mall/trade/order/data.ts
index 4eb98df87..9b38da130 100644
--- a/apps/web-antd/src/views/mall/trade/order/data.ts
+++ b/apps/web-antd/src/views/mall/trade/order/data.ts
@@ -306,6 +306,7 @@ export function usePriceFormSchema(): VbenFormSchema[] {
       label: '订单调价',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入订单调价',
         step: 0.1,
         precision: 2,
diff --git a/apps/web-antd/src/views/member/config/data.ts b/apps/web-antd/src/views/member/config/data.ts
index 7f168418c..179467bba 100644
--- a/apps/web-antd/src/views/member/config/data.ts
+++ b/apps/web-antd/src/views/member/config/data.ts
@@ -21,9 +21,9 @@ export const schema: VbenFormSchema[] = [
     label: '积分抵扣',
     help: '积分抵用比例(1 积分抵多少金额)，单位：元',
     componentProps: {
+      class: '!w-full',
       min: 0,
       precision: 2,
-      class: 'w-full',
       placeholder: '请输入积分抵扣单价',
     },
   },
@@ -33,8 +33,8 @@ export const schema: VbenFormSchema[] = [
     label: '积分抵扣最大值',
     help: '单次下单积分使用上限，0 不限制',
     componentProps: {
+      class: '!w-full',
       min: 0,
-      class: 'w-full',
       placeholder: '请输入积分抵扣最大值',
     },
   },
@@ -44,8 +44,8 @@ export const schema: VbenFormSchema[] = [
     label: '1 元赠送多少分',
     help: '下单支付金额按比例赠送积分（实际支付 1 元赠送多少积分）',
     componentProps: {
+      class: '!w-full',
       min: 0,
-      class: 'w-full',
       placeholder: '请输入赠送积分比例',
     },
   },
diff --git a/apps/web-antd/src/views/member/level/data.ts b/apps/web-antd/src/views/member/level/data.ts
index 979ed9a1b..c6a4b4167 100644
--- a/apps/web-antd/src/views/member/level/data.ts
+++ b/apps/web-antd/src/views/member/level/data.ts
@@ -32,6 +32,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '等级',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 0,
         placeholder: '请输入等级',
@@ -43,6 +44,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '升级经验',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 0,
         placeholder: '请输入升级经验',
@@ -54,6 +56,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '享受折扣(%)',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         max: 100,
         precision: 0,
diff --git a/apps/web-antd/src/views/member/signin/config/data.ts b/apps/web-antd/src/views/member/signin/config/data.ts
index 2b28d2fc9..44017bf7d 100644
--- a/apps/web-antd/src/views/member/signin/config/data.ts
+++ b/apps/web-antd/src/views/member/signin/config/data.ts
@@ -23,6 +23,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '签到天数',
       help: '只允许设置 1-7，默认签到 7 天为一个周期',
       componentProps: {
+        class: '!w-full',
         min: 1,
         max: 7,
         precision: 0,
@@ -35,6 +36,7 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'point',
       label: '获得积分',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 0,
         placeholder: '请输入获得积分',
@@ -46,6 +48,7 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'experience',
       label: '奖励经验',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 0,
         placeholder: '请输入奖励经验',
diff --git a/apps/web-antd/src/views/member/user/data.ts b/apps/web-antd/src/views/member/user/data.ts
index 295b23e89..d9a37cd45 100644
--- a/apps/web-antd/src/views/member/user/data.ts
+++ b/apps/web-antd/src/views/member/user/data.ts
@@ -396,6 +396,7 @@ export function useBalanceFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       rules: 'required',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         step: 0.1,
@@ -471,6 +472,7 @@ export function usePointFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       rules: 'required',
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 0,
         placeholder: '请输入变动积分',
diff --git a/apps/web-antd/src/views/mes/md/autocode/data.ts b/apps/web-antd/src/views/mes/md/autocode/data.ts
new file mode 100644
index 000000000..ce59ec37d
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/autocode/data.ts
@@ -0,0 +1,472 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdAutoCodePartApi } from '#/api/mes/md/autocode/part';
+import type { MesMdAutoCodeRuleApi } from '#/api/mes/md/autocode/rule';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { MesAutoCodePartTypeEnum } from '#/views/mes/utils/constants';
+
+/** 新增/修改编码规则的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '规则编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '规则描述',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则描述',
+      },
+    },
+    {
+      fieldName: 'maxLength',
+      label: '最大长度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        max: 100,
+        min: 1,
+        precision: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'padded',
+      label: '是否补齐',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'paddedChar',
+      label: '补齐字符',
+      component: 'Input',
+      componentProps: {
+        maxLength: 1,
+        placeholder: '请输入补齐字符',
+      },
+      dependencies: {
+        triggerFields: ['padded'],
+        show: (values) => values.padded === true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'paddedMethod',
+      label: '补齐方式',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(
+          DICT_TYPE.MES_MD_AUTO_CODE_PADDED_METHOD,
+          'number',
+        ),
+      },
+      dependencies: {
+        triggerFields: ['padded'],
+        show: (values) => values.padded === true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '规则编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规则编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规则名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdAutoCodeRuleApi.AutoCodeRule>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '规则编码',
+      width: 150,
+    },
+    {
+      field: 'name',
+      title: '规则名称',
+      width: 200,
+    },
+    {
+      field: 'description',
+      title: '规则描述',
+      minWidth: 180,
+    },
+    {
+      field: 'maxLength',
+      title: '最大长度',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'padded',
+      title: '是否补齐',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 160,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 新增/修改编码规则分段的表单 */
+export function usePartFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'ruleId',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '分段排序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'length',
+      label: '分段长度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        max: 50,
+        min: 1,
+        precision: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '分段类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(
+          DICT_TYPE.MES_MD_AUTO_CODE_PART_TYPE,
+          'number',
+        ),
+        placeholder: '请选择分段类型',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'dateFormat',
+      label: '日期格式',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: 'yyyy', value: 'yyyy' },
+          { label: 'yyyyMM', value: 'yyyyMM' },
+          { label: 'yyyyMMdd', value: 'yyyyMMdd' },
+          { label: 'yyyyMMddHH', value: 'yyyyMMddHH' },
+          { label: 'yyyyMMddHHmm', value: 'yyyyMMddHHmm' },
+        ],
+        placeholder: '请选择日期格式',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.DATE,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'fixCharacter',
+      label: '固定字符',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入固定字符',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.FIX,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'serialStartNo',
+      label: '流水号起始值',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.SERIAL,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'serialStep',
+      label: '流水号步长',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.SERIAL,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'cycleFlag',
+      label: '是否循环',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.SERIAL,
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'cycleMethod',
+      label: '循环方式',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(
+          DICT_TYPE.MES_MD_AUTO_CODE_CYCLE_METHOD,
+          'number',
+        ),
+        placeholder: '请选择循环方式',
+      },
+      dependencies: {
+        triggerFields: ['type', 'cycleFlag'],
+        show: (values) =>
+          values.type === MesAutoCodePartTypeEnum.SERIAL &&
+          values.cycleFlag === true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 编码规则分段的字段 */
+export function usePartGridColumns(): VxeTableGridOptions<MesMdAutoCodePartApi.AutoCodePart>['columns'] {
+  return [
+    {
+      field: 'sort',
+      title: '分段排序',
+      width: 90,
+      align: 'center',
+    },
+    {
+      field: 'type',
+      title: '分段类型',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_AUTO_CODE_PART_TYPE },
+      },
+    },
+    {
+      field: 'length',
+      title: '分段长度',
+      width: 90,
+      align: 'center',
+    },
+    {
+      field: 'dateFormat',
+      title: '日期格式',
+      width: 150,
+      align: 'center',
+    },
+    {
+      field: 'fixCharacter',
+      title: '固定字符',
+      width: 120,
+      align: 'center',
+    },
+    {
+      field: 'serialStartNo',
+      title: '流水号起始',
+      width: 110,
+      align: 'center',
+    },
+    {
+      field: 'serialStep',
+      title: '流水号步长',
+      width: 110,
+      align: 'center',
+    },
+    {
+      field: 'cycleFlag',
+      title: '是否循环',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'cycleMethod',
+      title: '循环方式',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_AUTO_CODE_CYCLE_METHOD },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 160,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/md/autocode/index.vue b/apps/web-antd/src/views/mes/md/autocode/index.vue
new file mode 100644
index 000000000..1eeefc0b0
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/autocode/index.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdAutoCodeRuleApi } from '#/api/mes/md/autocode/rule';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteAutoCodeRule,
+  exportAutoCodeRule,
+  getAutoCodeRulePage,
+} from '#/api/mes/md/autocode/rule';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建编码规则 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑编码规则 */
+function handleEdit(row: MesMdAutoCodeRuleApi.AutoCodeRule) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除编码规则 */
+async function handleDelete(row: MesMdAutoCodeRuleApi.AutoCodeRule) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteAutoCodeRule(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出编码规则 */
+async function handleExport() {
+  const data = await exportAutoCodeRule(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '编码规则.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAutoCodeRulePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdAutoCodeRuleApi.AutoCodeRule>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】编码规则"
+        url="https://doc.iocoder.cn/mes/md/autocode/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="编码规则列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['编码规则']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:auto-code-rule:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:auto-code-rule:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:auto-code-rule:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:auto-code-rule:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/autocode/modules/form.vue b/apps/web-antd/src/views/mes/md/autocode/modules/form.vue
new file mode 100644
index 000000000..b1ba5fdf2
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/autocode/modules/form.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { MesMdAutoCodeRuleApi } from '#/api/mes/md/autocode/rule';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createAutoCodeRule,
+  getAutoCodeRule,
+  updateAutoCodeRule,
+} from '#/api/mes/md/autocode/rule';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import PartList from './part-list.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesMdAutoCodeRuleApi.AutoCodeRule>();
+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: useFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 清理未启用补齐时的补齐字段 */
+function normalizeRuleData(data: MesMdAutoCodeRuleApi.AutoCodeRule) {
+  if (!data.padded) {
+    data.paddedChar = undefined;
+    data.paddedMethod = undefined;
+  }
+  return data;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = normalizeRuleData(
+      (await formApi.getValues()) as MesMdAutoCodeRuleApi.AutoCodeRule,
+    );
+    try {
+      await (formData.value?.id
+        ? updateAutoCodeRule(data)
+        : createAutoCodeRule(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;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<MesMdAutoCodeRuleApi.AutoCodeRule>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getAutoCodeRule(data.id);
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <template v-if="formData?.id">
+      <div class="mx-4 mt-4">
+        <PartList :rule-id="formData.id" />
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/autocode/modules/part-form.vue b/apps/web-antd/src/views/mes/md/autocode/modules/part-form.vue
new file mode 100644
index 000000000..538f594cc
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/autocode/modules/part-form.vue
@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import type { MesMdAutoCodePartApi } from '#/api/mes/md/autocode/part';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createAutoCodePart,
+  getAutoCodePart,
+  updateAutoCodePart,
+} from '#/api/mes/md/autocode/part';
+import { $t } from '#/locales';
+import { MesAutoCodePartTypeEnum } from '#/views/mes/utils/constants';
+
+import { usePartFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesMdAutoCodePartApi.AutoCodePart>();
+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: usePartFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 清理当前分段类型不需要的字段 */
+function normalizePartData(data: MesMdAutoCodePartApi.AutoCodePart) {
+  if (data.type !== MesAutoCodePartTypeEnum.DATE) {
+    data.dateFormat = undefined;
+  }
+  if (data.type !== MesAutoCodePartTypeEnum.FIX) {
+    data.fixCharacter = undefined;
+  }
+  if (data.type !== MesAutoCodePartTypeEnum.SERIAL) {
+    data.serialStartNo = undefined;
+    data.serialStep = undefined;
+    data.cycleFlag = false;
+    data.cycleMethod = undefined;
+  } else if (!data.cycleFlag) {
+    data.cycleMethod = undefined;
+  }
+  return data;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = normalizePartData(
+      (await formApi.getValues()) as MesMdAutoCodePartApi.AutoCodePart,
+    );
+    try {
+      await (formData.value?.id
+        ? updateAutoCodePart(data)
+        : createAutoCodePart(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;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      maxSort?: number;
+      ruleId: number;
+    }>();
+    if (!data?.id) {
+      await formApi.setValues({
+        ruleId: data.ruleId,
+        sort: (data.maxSort || 0) + 1,
+      });
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getAutoCodePart(data.id);
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/autocode/modules/part-list.vue b/apps/web-antd/src/views/mes/md/autocode/modules/part-list.vue
new file mode 100644
index 000000000..8107f808b
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/autocode/modules/part-list.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdAutoCodePartApi } from '#/api/mes/md/autocode/part';
+
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteAutoCodePart,
+  getAutoCodePartListByRuleId,
+} from '#/api/mes/md/autocode/part';
+import { $t } from '#/locales';
+
+import { usePartGridColumns } from '../data';
+import PartForm from './part-form.vue';
+
+const props = defineProps<{
+  ruleId: number;
+}>();
+
+const list = ref<MesMdAutoCodePartApi.AutoCodePart[]>([]);
+
+const [PartFormModal, partFormModalApi] = useVbenModal({
+  connectedComponent: PartForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: usePartGridColumns(),
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdAutoCodePartApi.AutoCodePart>,
+});
+
+/** 加载编码规则分段 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getAutoCodePartListByRuleId(props.ruleId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 创建编码规则分段 */
+function handleCreate() {
+  const maxSort =
+    list.value.length > 0
+      ? Math.max(...list.value.map((item) => item.sort || 0))
+      : 0;
+  partFormModalApi.setData({ maxSort, ruleId: props.ruleId }).open();
+}
+
+/** 编辑编码规则分段 */
+function handleEdit(row: MesMdAutoCodePartApi.AutoCodePart) {
+  partFormModalApi.setData({ id: row.id, ruleId: props.ruleId }).open();
+}
+
+/** 删除编码规则分段 */
+async function handleDelete(row: MesMdAutoCodePartApi.AutoCodePart) {
+  await deleteAutoCodePart(row.id!);
+  message.success($t('ui.actionMessage.deleteSuccess', ['编码规则分段']));
+  await getList();
+}
+
+watch(
+  () => props.ruleId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <PartFormModal @success="getList" />
+  <div class="mb-3 flex items-center justify-start">
+    <TableAction
+      :actions="[
+        {
+          label: $t('ui.actionTitle.create', ['分段']),
+          type: 'primary',
+          onClick: handleCreate,
+        },
+      ]"
+    />
+  </div>
+  <Grid class="w-full" table-title="规则组成">
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.edit'),
+            type: 'link',
+            onClick: handleEdit.bind(null, row),
+          },
+          {
+            label: $t('common.delete'),
+            type: 'link',
+            danger: true,
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', ['编码规则分段']),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/client/components/md-client-select-dialog.vue b/apps/web-antd/src/views/mes/md/client/components/md-client-select-dialog.vue
new file mode 100644
index 000000000..c90d1cc42
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/client/components/md-client-select-dialog.vue
@@ -0,0 +1,217 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { nextTick, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getClientPage } from '#/api/mes/md/client';
+
+import {
+  useClientSelectGridColumns,
+  useClientSelectGridFormSchema,
+} from '../data';
+
+const emit = defineEmits<{
+  selected: [rows: MesMdClientApi.Client[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const selectedRows = ref<MesMdClientApi.Client[]>([]); // 已选客户列表
+const preSelectedIds = ref<number[]>([]); // 预选客户编号列表
+const latestQueryRows = ref<MesMdClientApi.Client[]>([]); // 最近一次查询返回的客户列表
+const queryFinished = ref(false); // 最近一次查询是否完成
+
+// TODO @芋艿：是否有必要搞的这么复杂？？？后续测试看看。
+const MAX_TABLE_READY_FRAMES = 60;
+
+/** 等待下一帧 */
+function waitNextFrame(): Promise<void> {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => resolve());
+  });
+}
+
+/** 获取当前表格数据 */
+function getTableRows() {
+  return gridApi.grid.getTableData().fullData as MesMdClientApi.Client[];
+}
+
+/** 等待 VXE 将当前查询结果写入表格数据后再回显选中 */
+async function waitTableReady(): Promise<void> {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 处理勾选变化 */
+function handleCheckboxSelectChange() {
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选变化 */
+function handleRadioChange(row: MesMdClientApi.Client) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesMdClientApi.Client) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击 */
+async function handleCellDblclick({ row }: { row: MesMdClientApi.Client }) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
+    return;
+  }
+  selectedRows.value = [row];
+  await gridApi.grid.setRadioRow(row);
+  handleConfirm();
+}
+
+/** 回显预选客户 */
+async function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  // proxy 表格回显选中时要读取 fullData，否则首次打开可能读不到刚查询出的数据。
+  const rows = getTableRows();
+  for (const row of rows) {
+    if (row.id == null || !preSelectedIds.value.includes(row.id)) {
+      continue;
+    }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useClientSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useClientSelectGridColumns(true),
+    height: 520,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getClientPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            status: CommonStatusEnum.ENABLE,
+          });
+          latestQueryRows.value = data.list || [];
+          queryFinished.value = true;
+          return data;
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdClientApi.Client>,
+  gridEvents: {
+    cellDblclick: handleCellDblclick,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesMdClientApi.Client }) => {
+      handleRadioChange(row);
+    },
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
+  await gridApi.formApi.resetForm();
+}
+
+/** 打开客户选择弹窗 */
+async function openModal(selectedIds?: number[], options?: { multiple?: boolean }) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  latestQueryRows.value = [];
+  queryFinished.value = false;
+  await nextTick();
+  gridApi.setGridOptions({ columns: useClientSelectGridColumns(multiple.value) });
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  await waitTableReady();
+  await applyPreSelection();
+}
+
+/** 关闭客户选择弹窗 */
+function closeModal() {
+  open.value = false;
+}
+
+/** 确认选择客户 */
+function handleConfirm() {
+  const rows = multiple.value ? getMultipleSelectedRows() : selectedRows.value;
+  if (rows.length === 0) {
+    message.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? rows : [rows[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="客户选择"
+    width="70%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <Grid table-title="客户列表" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/client/components/md-client-select.vue b/apps/web-antd/src/views/mes/md/client/components/md-client-select.vue
new file mode 100644
index 000000000..a53b3757d
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/client/components/md-client-select.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input, Tooltip } from 'ant-design-vue';
+
+import { getClient } from '#/api/mes/md/client';
+
+import MdClientSelectDialog from './md-client-select-dialog.vue';
+
+defineOptions({ name: 'MdClientSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择客户',
+  },
+);
+const emit = defineEmits<{
+  change: [item: MesMdClientApi.Client | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdClientSelectDialog>>(); // 客户选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedItem = ref<MesMdClientApi.Client>(); // 当前选中客户
+
+const displayLabel = computed(() => selectedItem.value?.name ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () => props.allowClear && !props.disabled && hovering.value && props.modelValue != null,
+);
+
+/** 根据客户编号回显选择器 */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getClient(id);
+  } catch (error) {
+    console.error('[MdClientSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveItemById(value);
+  },
+  { immediate: true },
+);
+
+/** 清空已选客户 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开客户选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.ant-input-suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 回填选中的客户 */
+function handleSelected(rows: MesMdClientApi.Client[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+      <template #title>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编码：{{ selectedItem.code || '-' }}</div>
+          <div>名称：{{ selectedItem.name || '-' }}</div>
+          <div>简称：{{ selectedItem.nickname || '-' }}</div>
+          <div>电话：{{ selectedItem.telephone || '-' }}</div>
+        </div>
+      </template>
+      <Input
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="displayLabel"
+        readonly
+      >
+        <template #suffix>
+          <IconifyIcon
+            class="size-4"
+            :icon="showClear ? 'lucide:circle-x' : 'lucide:search'"
+          />
+        </template>
+      </Input>
+    </Tooltip>
+  </div>
+  <MdClientSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
diff --git a/apps/web-antd/src/views/mes/md/client/data.ts b/apps/web-antd/src/views/mes/md/client/data.ts
new file mode 100644
index 000000000..11b04c915
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/client/data.ts
@@ -0,0 +1,481 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+/** 新增/修改客户的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '客户编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          Button,
+          {
+            type: 'default',
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_CLIENT_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '自动生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '客户名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户名称',
+      },
+      rules: z.string().min(1, '客户名称不能为空').max(100),
+    },
+    {
+      fieldName: 'nickname',
+      label: '客户简称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '客户英文名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户英文名称',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '客户类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_CLIENT_TYPE, 'number'),
+        placeholder: '请选择客户类型',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'description',
+      label: '客户简介',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入客户简介',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'address',
+      label: '客户地址',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入客户地址',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'website',
+      label: '客户官网地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户官网地址',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: '客户邮箱地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户邮箱地址',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'telephone',
+      label: '客户电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户电话',
+      },
+    },
+    {
+      fieldName: 'logo',
+      label: '客户 LOGO',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户 LOGO 地址',
+      },
+    },
+    {
+      fieldName: 'contact1Name',
+      label: '联系人1',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1',
+      },
+    },
+    {
+      fieldName: 'contact1Telephone',
+      label: '联系人1电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1电话',
+      },
+    },
+    {
+      fieldName: 'contact1Email',
+      label: '联系人1邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'contact2Name',
+      label: '联系人2',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2',
+      },
+    },
+    {
+      fieldName: 'contact2Telephone',
+      label: '联系人2电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2电话',
+      },
+    },
+    {
+      fieldName: 'contact2Email',
+      label: '联系人2邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'creditCode',
+      label: '社会信用代码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入统一社会信用代码',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 导入客户的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '客户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的客户数据',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '客户编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入客户编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '客户名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入客户名称',
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '客户简称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入客户简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入客户英文名称',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '客户类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_CLIENT_TYPE, 'number'),
+        placeholder: '请选择客户类型',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdClientApi.Client>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '客户编码',
+      minWidth: 150,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '客户名称',
+      minWidth: 160,
+    },
+    {
+      field: 'nickname',
+      title: '客户简称',
+      minWidth: 130,
+    },
+    {
+      field: 'type',
+      title: '客户类型',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_CLIENT_TYPE },
+      },
+    },
+    {
+      field: 'telephone',
+      title: '客户电话',
+      minWidth: 140,
+    },
+    {
+      field: 'contact1Name',
+      title: '联系人1',
+      width: 120,
+    },
+    {
+      field: 'contact1Telephone',
+      title: '联系人1电话',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 客户选择弹窗的搜索表单 */
+export function useClientSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '客户编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入客户编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '客户名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入客户名称',
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '客户简称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入客户简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入客户英文名称',
+      },
+    },
+  ];
+}
+
+/** 客户选择弹窗的字段 */
+export function useClientSelectGridColumns(
+  multiple = true,
+): VxeTableGridOptions<MesMdClientApi.Client>['columns'] {
+  return [
+    { type: multiple ? 'checkbox' : 'radio', width: 50 },
+    {
+      field: 'code',
+      title: '客户编码',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '客户名称',
+      minWidth: 160,
+    },
+    {
+      field: 'nickname',
+      title: '客户简称',
+      width: 120,
+    },
+    {
+      field: 'type',
+      title: '客户类型',
+      width: 110,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_CLIENT_TYPE },
+      },
+    },
+    {
+      field: 'contact1Name',
+      title: '联系人',
+      width: 120,
+    },
+    {
+      field: 'telephone',
+      title: '联系电话',
+      width: 140,
+    },
+    {
+      field: 'contact1Telephone',
+      title: '联系人电话',
+      width: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/md/client/index.vue b/apps/web-antd/src/views/mes/md/client/index.vue
new file mode 100644
index 000000000..d1d2b0b25
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/client/index.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteClient, exportClient, getClientPage } from '#/api/mes/md/client';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建客户 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看客户 */
+function handleDetail(row: MesMdClientApi.Client) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑客户 */
+function handleEdit(row: MesMdClientApi.Client) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除客户 */
+async function handleDelete(row: MesMdClientApi.Client) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteClient(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportClient(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '客户.xls', source: data });
+}
+
+/** 导入客户 */
+function handleImport() {
+  importModalApi.open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getClientPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdClientApi.Client>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】客户管理、供应商管理"
+        url="https://doc.iocoder.cn/mes/md/client-vendor/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
+
+    <Grid table-title="客户列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['客户']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-client:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.import', ['客户']),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['mes:md-client:import'],
+              onClick: handleImport,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:md-client:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.code }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-client:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-client:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/client/modules/form.vue b/apps/web-antd/src/views/mes/md/client/modules/form.vue
new file mode 100644
index 000000000..5b4cc4fee
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/client/modules/form.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message, Tabs } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createClient, getClient, updateClient } from '#/api/mes/md/client';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import ClientProductSalesLineList from './product-sales-line-list.vue';
+import ClientProductSalesList from './product-sales-list.vue';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const subTabsName = ref('productSalesLine'); // 当前子表页签
+const formData = ref<MesMdClientApi.Client>();
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  const titles: Record<FormMode, string> = {
+    create: '新增客户',
+    update: '修改客户',
+    detail: '查看客户',
+  };
+  return titles[formMode.value];
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdClientApi.Client;
+    try {
+      await (formData.value?.id ? updateClient(data) : createClient(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;
+    }
+    await formApi.resetForm();
+    subTabsName.value = 'productSalesLine';
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getClient(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <Tabs
+      v-if="formMode !== 'create' && formData?.id"
+      v-model:active-key="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <Tabs.TabPane key="productSalesLine" tab="产品清单">
+        <ClientProductSalesLineList :client-id="formData.id" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="productSales" tab="销售记录">
+        <ClientProductSalesList :client-id="formData.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/client/modules/import-form.vue b/apps/web-antd/src/views/mes/md/client/modules/import-form.vue
new file mode 100644
index 000000000..05db5d089
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/client/modules/import-form.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { importClient, importClientTemplate } from '#/api/mes/md/client';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importClient(data.file, data.updateSupport);
+      const importData = result as MesMdClientApi.ClientImportRespVO;
+      let text = `上传成功数量：${importData.createCodes?.length || 0};`;
+      for (const code of importData.createCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新成功数量：${importData.updateCodes?.length || 0};`;
+      for (const code of importData.updateCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新失败数量：${Object.keys(importData.failureCodes || {}).length};`;
+      for (const code in importData.failureCodes || {}) {
+        text += `< ${code}: ${importData.failureCodes?.[code]} >`;
+      }
+      message.info(text);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模板 */
+async function handleDownload() {
+  const data = await importClientTemplate();
+  downloadFileFromBlobPart({ fileName: '客户导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.import', ['客户'])" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload
+            :before-upload="beforeUpload"
+            :max-count="1"
+            accept=".xls,.xlsx"
+          >
+            <Button type="primary">选择 Excel 文件</Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload">下载导入模板</Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/client/modules/product-sales-line-list.vue b/apps/web-antd/src/views/mes/md/client/modules/product-sales-line-list.vue
new file mode 100644
index 000000000..849d5d304
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/client/modules/product-sales-line-list.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmProductSalesLineApi } from '#/api/mes/wm/productsales/line';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSalesLinePage } from '#/api/mes/wm/productsales/line';
+import ItemForm from '#/views/mes/md/item/modules/form.vue';
+
+const props = defineProps<{
+  clientId: number;
+}>();
+
+const [ItemFormModal, itemFormModalApi] = useVbenModal({
+  connectedComponent: ItemForm,
+  destroyOnClose: true,
+});
+
+/** 查看物料详情 */
+function handleViewItem(row: MesWmProductSalesLineApi.ProductSalesLine) {
+  itemFormModalApi.setData({ id: row.itemId, type: 'detail' }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'itemCode',
+        title: '物料编码',
+        width: 140,
+        slots: { default: 'itemCode' },
+      },
+      { field: 'itemName', title: '物料名称', minWidth: 150 },
+      { field: 'specification', title: '规格型号', minWidth: 140 },
+      { field: 'unitMeasureName', title: '单位', width: 100 },
+      { field: 'quantity', title: '出库数量', width: 120 },
+      { field: 'batchCode', title: '批次号', minWidth: 140 },
+    ],
+    height: 320,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getProductSalesLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            clientId: props.clientId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmProductSalesLineApi.ProductSalesLine>,
+});
+</script>
+
+<template>
+  <ItemFormModal />
+  <Grid table-title="产品清单">
+    <template #itemCode="{ row }">
+      <Button type="link" @click="handleViewItem(row)">
+        {{ row.itemCode }}
+      </Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/client/modules/product-sales-list.vue b/apps/web-antd/src/views/mes/md/client/modules/product-sales-list.vue
new file mode 100644
index 000000000..0f7b55f8c
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/client/modules/product-sales-list.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmProductSalesApi } from '#/api/mes/wm/productsales';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSalesPage } from '#/api/mes/wm/productsales';
+
+const props = defineProps<{
+  clientId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'code', title: '出库单编号', minWidth: 160 },
+      { field: 'name', title: '出库单名称', minWidth: 150 },
+      { field: 'salesOrderCode', title: '销售订单编号', minWidth: 140 },
+      {
+        field: 'salesDate',
+        title: '出库日期',
+        width: 180,
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'status',
+        title: '单据状态',
+        width: 120,
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.MES_WM_PRODUCT_SALES_STATUS },
+        },
+      },
+    ],
+    height: 320,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getProductSalesPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            clientId: props.clientId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmProductSalesApi.ProductSales>,
+});
+</script>
+
+<template>
+  <Grid table-title="销售记录" />
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/components/index.ts b/apps/web-antd/src/views/mes/md/item/components/index.ts
new file mode 100644
index 000000000..348ae8798
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/components/index.ts
@@ -0,0 +1,4 @@
+export { default as MdItemSelectDialog } from './md-item-select-dialog.vue';
+export { default as MdItemSelect } from './md-item-select.vue';
+export { default as MdProductBomSelectDialog } from './md-product-bom-select-dialog.vue';
+export { default as MdProductBomSelect } from './md-product-bom-select.vue';
diff --git a/apps/web-antd/src/views/mes/md/item/components/md-item-select-dialog.vue b/apps/web-antd/src/views/mes/md/item/components/md-item-select-dialog.vue
new file mode 100644
index 000000000..2e6a07a9a
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/components/md-item-select-dialog.vue
@@ -0,0 +1,195 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemApi } from '#/api/mes/md/item';
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { nextTick, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+
+import { Card, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemPage } from '#/api/mes/md/item';
+import { MdItemTypeTree } from '#/views/mes/md/item/type/components';
+
+import { useItemSelectGridColumns, useItemSelectGridFormSchema } from '../data';
+
+defineOptions({ name: 'MdItemSelectDialog' });
+
+const emit = defineEmits<{
+  selected: [rows: MesMdItemApi.Item[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
+const selectedRows = ref<MesMdItemApi.Item[]>([]); // 已选物料列表
+const selectedItemTypeId = ref<number>(); // 当前筛选分类编号
+const preSelectedIds = ref<number[]>([]); // 预选物料编号列表
+const typeTreeRef = ref<InstanceType<typeof MdItemTypeTree>>(); // 物料分类树
+
+/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+async function syncSingleSelection(row?: MesMdItemApi.Item) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条 */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: MesMdItemApi.Item[];
+  row?: MesMdItemApi.Item;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 处理全选变化 */
+function handleCheckboxAll({ records }: { records: MesMdItemApi.Item[] }) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 按分类筛选物料 */
+function handleItemTypeNodeClick(row: MesMdItemTypeApi.ItemType | undefined) {
+  selectedItemTypeId.value = row?.id;
+  gridApi.query();
+}
+
+/** 回显预选物料 */
+function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesMdItemApi.Item[];
+  for (const row of rows) {
+    if (row.id && preSelectedIds.value.includes(row.id)) {
+      gridApi.grid.setCheckboxRow(row, true);
+      if (!multiple.value) {
+        selectedRows.value = [row];
+      }
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useItemSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useItemSelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            itemTypeId: selectedItemTypeId.value,
+            status: CommonStatusEnum.ENABLE,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdItemApi.Item>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedItemTypeId.value = undefined;
+  selectedRows.value = [];
+  typeTreeRef.value?.reset();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+}
+
+/** 打开物料选择弹窗 */
+async function openModal(selectedIds?: number[], options?: { multiple?: boolean }) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  applyPreSelection();
+}
+
+/** 关闭物料选择弹窗 */
+async function closeModal() {
+  open.value = false;
+  await resetQueryState();
+}
+
+/** 确认选择物料 */
+function handleConfirm() {
+  if (selectedRows.value.length === 0) {
+    message.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? selectedRows.value : [selectedRows.value[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="物料产品选择"
+    width="80%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <div class="flex h-full w-full">
+      <Card class="mr-4 h-full w-1/5">
+        <MdItemTypeTree ref="typeTreeRef" @node-click="handleItemTypeNodeClick" />
+      </Card>
+      <div class="w-4/5">
+        <Grid table-title="物料产品列表" />
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/components/md-item-select.vue b/apps/web-antd/src/views/mes/md/item/components/md-item-select.vue
new file mode 100644
index 000000000..006277683
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/components/md-item-select.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import type { MesMdItemApi } from '#/api/mes/md/item';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input, Tooltip } from 'ant-design-vue';
+
+import { getItem } from '#/api/mes/md/item';
+
+import MdItemSelectDialog from './md-item-select-dialog.vue';
+
+defineOptions({ name: 'MdItemSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择产品物料',
+  },
+);
+const emit = defineEmits<{
+  change: [item: MesMdItemApi.Item | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdItemSelectDialog>>(); // 物料选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedItem = ref<MesMdItemApi.Item>(); // 当前选中物料
+
+const displayLabel = computed(() => selectedItem.value?.name ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () => props.allowClear && !props.disabled && hovering.value && props.modelValue != null,
+);
+
+/** 根据物料编号回显选择器 */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getItem(id);
+  } catch (error) {
+    console.error('[MdItemSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveItemById(value);
+  },
+  { immediate: true },
+);
+
+/** 清空已选物料 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开物料选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.ant-input-suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 回填选中的物料 */
+function handleSelected(rows: MesMdItemApi.Item[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+      <template #title>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编码：{{ selectedItem.code || '-' }}</div>
+          <div>名称：{{ selectedItem.name || '-' }}</div>
+          <div>规格：{{ selectedItem.specification || '-' }}</div>
+          <div>单位：{{ selectedItem.unitMeasureName || '-' }}</div>
+        </div>
+      </template>
+      <Input
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="displayLabel"
+        readonly
+      >
+        <template #suffix>
+          <IconifyIcon
+            class="size-4"
+            :icon="showClear ? 'lucide:circle-x' : 'lucide:search'"
+          />
+        </template>
+      </Input>
+    </Tooltip>
+  </div>
+  <MdItemSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/components/md-product-bom-select-dialog.vue b/apps/web-antd/src/views/mes/md/item/components/md-product-bom-select-dialog.vue
new file mode 100644
index 000000000..90ae85a32
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/components/md-product-bom-select-dialog.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+
+import { nextTick, ref } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductBomListByItemId } from '#/api/mes/md/item/productBom';
+
+import { useProductBomGridColumns } from '../data';
+
+defineOptions({ name: 'MdProductBomSelectDialog' });
+
+const emit = defineEmits<{
+  selected: [row: MesMdProductBomApi.ProductBom];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const list = ref<MesMdProductBomApi.ProductBom[]>([]); // BOM 子物料列表
+const selectedRow = ref<MesMdProductBomApi.ProductBom>(); // 当前选中的 BOM 行
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: [
+      { type: 'radio', width: 55, align: 'center' },
+      ...(useProductBomGridColumns(true) || []),
+    ],
+    data: list.value,
+    height: 500,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
+    rowConfig: {
+      keyField: 'bomItemId',
+      isHover: true,
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdProductBomApi.ProductBom>,
+  gridEvents: {
+    cellDblclick: ({ row }: { row: MesMdProductBomApi.ProductBom }) => {
+      selectedRow.value = row;
+      gridApi.grid.setRadioRow(row);
+      handleConfirm();
+    },
+    radioChange: ({ row }: { row: MesMdProductBomApi.ProductBom }) => {
+      selectedRow.value = row;
+    },
+  },
+});
+
+/** 打开 BOM 物料选择弹窗 */
+async function openModal(itemId: number, selectedBomItemId?: number) {
+  open.value = true;
+  selectedRow.value = undefined;
+  gridApi.setLoading(true);
+  try {
+    list.value = await getProductBomListByItemId(itemId);
+    gridApi.setGridOptions({ data: list.value });
+    await nextTick();
+    if (selectedBomItemId != null) {
+      const match = list.value.find(
+        (row) => row.bomItemId === selectedBomItemId,
+      );
+      if (match) {
+        selectedRow.value = match;
+        gridApi.grid.setRadioRow(match);
+      }
+    }
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 关闭 BOM 物料选择弹窗 */
+async function closeModal() {
+  open.value = false;
+  selectedRow.value = undefined;
+  await gridApi.grid.clearRadioRow();
+}
+
+/** 确认选择 BOM 物料 */
+function handleConfirm() {
+  if (!selectedRow.value) {
+    message.warning('请选择一条数据');
+    return;
+  }
+  emit('selected', selectedRow.value);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="产品 BOM 物料选择"
+    width="800px"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <Grid table-title="BOM 子物料列表" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/components/md-product-bom-select.vue b/apps/web-antd/src/views/mes/md/item/components/md-product-bom-select.vue
new file mode 100644
index 000000000..12d7185aa
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/components/md-product-bom-select.vue
@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input, Tooltip } from 'ant-design-vue';
+
+import { getProductBomListByItemId } from '#/api/mes/md/item/productBom';
+
+import MdProductBomSelectDialog from './md-product-bom-select-dialog.vue';
+
+defineOptions({ name: 'MdProductBomSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    itemId?: number;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    itemId: undefined,
+    modelValue: undefined,
+    placeholder: '请选择 BOM 物料',
+  },
+);
+const emit = defineEmits<{
+  change: [bom: MesMdProductBomApi.ProductBom | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdProductBomSelectDialog>>(); // BOM 物料选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedBom = ref<MesMdProductBomApi.ProductBom>(); // 当前选中的 BOM 物料
+
+const displayLabel = computed(() => selectedBom.value?.bomItemName ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () =>
+    props.allowClear &&
+    !props.disabled &&
+    hovering.value &&
+    props.modelValue != null,
+);
+
+/** 根据 BOM 子物料编号回显选择器 */
+async function resolveBomById(bomItemId: number | undefined) {
+  if (bomItemId == null || props.itemId == null) {
+    selectedBom.value = undefined;
+    return;
+  }
+  if (selectedBom.value?.bomItemId === bomItemId) {
+    return;
+  }
+  try {
+    const list = await getProductBomListByItemId(props.itemId);
+    selectedBom.value = list.find((item) => item.bomItemId === bomItemId);
+  } catch (error) {
+    console.error('[MdProductBomSelect] resolveBomById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveBomById(value);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.itemId,
+  () => {
+    selectedBom.value = undefined;
+    emit('update:modelValue', undefined);
+    emit('change', undefined);
+  },
+);
+
+/** 清空已选 BOM 物料 */
+function clearSelected() {
+  selectedBom.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开 BOM 物料选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled || props.itemId == null) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.ant-input-suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  dialogRef.value?.open(props.itemId, props.modelValue);
+}
+
+/** 回填选中的 BOM 物料 */
+function handleSelected(row: MesMdProductBomApi.ProductBom) {
+  selectedBom.value = row;
+  emit('update:modelValue', row.bomItemId);
+  emit('change', row);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <Tooltip :mouse-enter-delay="0.5" :open="selectedBom ? undefined : false">
+      <template #title>
+        <div v-if="selectedBom" class="leading-6">
+          <div>编码：{{ selectedBom.bomItemCode || '-' }}</div>
+          <div>名称：{{ selectedBom.bomItemName || '-' }}</div>
+          <div>规格：{{ selectedBom.bomItemSpecification || '-' }}</div>
+          <div>单位：{{ selectedBom.unitMeasureName || '-' }}</div>
+          <div>用量比例：{{ selectedBom.quantity ?? '-' }}</div>
+        </div>
+      </template>
+      <Input
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="displayLabel"
+        readonly
+      >
+        <template #suffix>
+          <IconifyIcon
+            class="size-4"
+            :icon="showClear ? 'lucide:circle-x' : 'lucide:search'"
+          />
+        </template>
+      </Input>
+    </Tooltip>
+  </div>
+  <MdProductBomSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/data.ts b/apps/web-antd/src/views/mes/md/item/data.ts
new file mode 100644
index 000000000..794221710
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/data.ts
@@ -0,0 +1,474 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemApi } from '#/api/mes/md/item';
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+
+import { h, markRaw } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { MdItemTypeSelect } from '#/views/mes/md/item/type/components';
+import { MdUnitMeasureSelect } from '#/views/mes/md/unitmeasure/components';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+/** 新增/修改物料产品的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '物料编码',
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入物料编码',
+      },
+      rules: z.string().min(1, '物料编码不能为空').max(64),
+      suffix: () =>
+        h(
+          Button,
+          {
+            type: 'default',
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_ITEM_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '物料名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入物料名称',
+      },
+      rules: z.string().min(1, '物料名称不能为空').max(255),
+    },
+    {
+      fieldName: 'specification',
+      label: '规格型号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入规格型号',
+      },
+    },
+    {
+      fieldName: 'unitMeasureId',
+      label: '单位',
+      component: markRaw(MdUnitMeasureSelect),
+      componentProps: {
+        placeholder: '请选择计量单位',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'itemTypeId',
+      label: '物料分类',
+      component: markRaw(MdItemTypeSelect),
+      componentProps: {
+        onChange: async (itemType: any) => {
+          await formApi?.setFieldValue('itemOrProduct', itemType?.itemOrProduct);
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        disabled: true,
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.DISABLE),
+    },
+    {
+      fieldName: 'highValue',
+      label: '高值物料',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'batchFlag',
+      label: '批次管理',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(true),
+    },
+    {
+      fieldName: 'safeStockFlag',
+      label: '安全库存',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'minStock',
+      label: '最低库存量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        precision: 2,
+      },
+      dependencies: {
+        triggerFields: ['safeStockFlag'],
+        show: (values) => Boolean(values.safeStockFlag),
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'maxStock',
+      label: '最高库存量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        precision: 2,
+      },
+      dependencies: {
+        triggerFields: ['safeStockFlag'],
+        show: (values) => Boolean(values.safeStockFlag),
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'itemOrProduct',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '物料编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入物料编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '物料名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入物料名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 物料导入表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '物料数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的物料数据',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: MesMdItemApi.Item,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions<MesMdItemApi.Item>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '物料编码',
+      minWidth: 160,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '物料名称',
+      minWidth: 160,
+    },
+    {
+      field: 'specification',
+      title: '规格型号',
+      minWidth: 160,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'itemTypeName',
+      title: '物料分类',
+      minWidth: 140,
+      align: 'center',
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'safeStockFlag',
+      title: '安全库存',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: CommonStatusEnum.ENABLE,
+          unCheckedValue: CommonStatusEnum.DISABLE,
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 物料选择弹窗搜索表单 */
+export function useItemSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '物料编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入物料编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '物料名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入物料名称',
+      },
+    },
+  ];
+}
+
+/** 物料选择弹窗列表字段 */
+export function useItemSelectGridColumns(): VxeTableGridOptions<MesMdItemApi.Item>['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'code',
+      title: '物料编码',
+      width: 180,
+    },
+    {
+      field: 'name',
+      title: '物料名称',
+      minWidth: 160,
+      align: 'left',
+    },
+    {
+      field: 'specification',
+      title: '规格型号',
+      minWidth: 140,
+      align: 'left',
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 90,
+      align: 'center',
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 110,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'itemTypeName',
+      title: '所属分类',
+      width: 140,
+      align: 'center',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
+
+/** 产品 BOM 子表字段 */
+export function useProductBomGridColumns(
+  isReadOnly = false,
+): VxeTableGridOptions<MesMdProductBomApi.ProductBom>['columns'] {
+  const columns: VxeTableGridOptions<MesMdProductBomApi.ProductBom>['columns'] = [
+    {
+      field: 'bomItemCode',
+      title: '物料编码',
+      minWidth: 160,
+      align: 'center',
+    },
+    {
+      field: 'bomItemName',
+      title: '物料名称',
+      minWidth: 160,
+      align: 'center',
+    },
+    {
+      field: 'bomItemSpecification',
+      title: '规格型号',
+      minWidth: 140,
+      align: 'center',
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+      align: 'center',
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 110,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'quantity',
+      title: '用量比例',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 140,
+      align: 'center',
+    },
+  ];
+
+  if (!isReadOnly) {
+    columns.push({
+      field: 'actions',
+      title: '操作',
+      width: 120,
+      align: 'center',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    });
+  }
+
+  return columns;
+}
diff --git a/apps/web-antd/src/views/mes/md/item/index.vue b/apps/web-antd/src/views/mes/md/item/index.vue
new file mode 100644
index 000000000..da93b46b7
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/index.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemApi } from '#/api/mes/md/item';
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, Card, message, Modal } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteItem,
+  exportItem,
+  getItemPage,
+  updateItemStatus,
+} from '#/api/mes/md/item';
+import { $t } from '#/locales';
+import { MdItemTypeTree } from '#/views/mes/md/item/type/components';
+import { PrinterLabel } from '#/views/mes/wm/barcode/components';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
+
+const selectedItemTypeId = ref<number>(); // 当前选中的物料分类编号
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建物料 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看物料 */
+function handleDetail(row: MesMdItemApi.Item) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑物料 */
+function handleEdit(row: MesMdItemApi.Item) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除物料 */
+async function handleDelete(row: MesMdItemApi.Item) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteItem(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出物料 */
+async function handleExport() {
+  const data = await exportItem(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '物料产品.xls', source: data });
+}
+
+/** 导入物料 */
+function handleImport() {
+  importModalApi.open();
+}
+
+/** 分类树点击 */
+function handleTypeNodeClick(row: MesMdItemTypeApi.ItemType | undefined) {
+  selectedItemTypeId.value = row?.id;
+  handleRefresh();
+}
+
+/** 更新物料状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: MesMdItemApi.Item,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    Modal.confirm({
+      content: `确认要将“${row.name}”物料切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+      async onOk() {
+        await updateItemStatus(row.id!, newStatus);
+        message.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      },
+      onCancel() {
+        reject(new Error('取消操作'));
+      },
+    });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            itemTypeId: selectedItemTypeId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdItemApi.Item>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】物料产品、分类、计量单位"
+        url="https://doc.iocoder.cn/mes/md/product/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
+
+    <div class="flex h-full w-full">
+      <Card class="mr-4 h-full w-1/6">
+        <MdItemTypeTree @node-click="handleTypeNodeClick" />
+      </Card>
+      <div class="w-5/6">
+        <Grid table-title="物料产品列表">
+          <template #toolbar-tools>
+            <TableAction
+              :actions="[
+                {
+                  label: $t('ui.actionTitle.create', ['物料']),
+                  type: 'primary',
+                  icon: ACTION_ICON.ADD,
+                  auth: ['mes:md-item:create'],
+                  onClick: handleCreate,
+                },
+                {
+                  label: $t('ui.actionTitle.import'),
+                  type: 'primary',
+                  icon: ACTION_ICON.UPLOAD,
+                  auth: ['mes:md-item:import'],
+                  onClick: handleImport,
+                },
+                {
+                  label: $t('ui.actionTitle.export'),
+                  type: 'primary',
+                  icon: ACTION_ICON.DOWNLOAD,
+                  auth: ['mes:md-item:export'],
+                  onClick: handleExport,
+                },
+              ]"
+            />
+          </template>
+          <template #code="{ row }">
+            <Button type="link" @click="handleDetail(row)">
+              {{ row.code }}
+            </Button>
+          </template>
+          <template #actions="{ row }">
+            <div class="flex items-center justify-center">
+              <TableAction
+                :actions="[
+                  {
+                    label: $t('common.edit'),
+                    type: 'link',
+                    icon: ACTION_ICON.EDIT,
+                    auth: ['mes:md-item:update'],
+                    onClick: handleEdit.bind(null, row),
+                  },
+                  {
+                    label: $t('common.delete'),
+                    type: 'link',
+                    danger: true,
+                    icon: ACTION_ICON.DELETE,
+                    auth: ['mes:md-item:delete'],
+                    popConfirm: {
+                      title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                      confirm: handleDelete.bind(null, row),
+                    },
+                  },
+                ]"
+              />
+              <PrinterLabel
+                :biz-id="row.id"
+                :biz-code="row.code"
+                biz-type="ITEM"
+              />
+            </div>
+          </template>
+        </Grid>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/modules/form.vue b/apps/web-antd/src/views/mes/md/item/modules/form.vue
new file mode 100644
index 000000000..e38404bdd
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/modules/form.vue
@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import type { MesMdItemApi } from '#/api/mes/md/item';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, Empty, message, Tabs } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createItem, getItem, updateItem } from '#/api/mes/md/item';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+import ItemBatchConfigForm from './item-batch-config-form.vue';
+import ProductBomForm from './product-bom-form.vue';
+import ProductSipForm from './product-sip-form.vue';
+import ProductSopForm from './product-sop-form.vue';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const subTabsName = ref('bom'); // 当前子表页签
+const formData = ref<MesMdItemApi.Item>();
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  const titles: Record<FormMode, string> = {
+    create: '新增物料/产品',
+    update: '修改物料/产品',
+    detail: '查看物料/产品',
+  };
+  return titles[formMode.value];
+});
+const currentItemOrProduct = computed(() => formData.value?.itemOrProduct || ''); // 当前物料/产品标识
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+/** 查看物料条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.ITEM,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdItemApi.Item;
+    try {
+      if (formMode.value === 'create') {
+        const id = await createItem(data);
+        formData.value = { ...data, id };
+        await formApi.setFieldValue('id', id);
+        formMode.value = 'update';
+        message.success($t('ui.actionMessage.operationSuccess'));
+      } else {
+        await updateItem(data);
+        formData.value = { ...formData.value, ...data };
+        message.success($t('ui.actionMessage.operationSuccess'));
+      }
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    subTabsName.value = 'bom';
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getItem(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <Tabs
+      v-if="formMode !== 'create' && formData?.id"
+      v-model:active-key="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <Tabs.TabPane key="bom" tab="BOM 组成">
+        <ProductBomForm :form-type="formMode" :item-id="formData.id" />
+      </Tabs.TabPane>
+      <Tabs.TabPane v-if="formData.batchFlag" key="batch" tab="批次属性">
+        <ItemBatchConfigForm
+          :form-type="formMode"
+          :item-id="formData.id"
+          :item-or-product="currentItemOrProduct"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="substitute" tab="替代品">
+        <Empty description="替代品（待实现）" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="sip" tab="SIP">
+        <ProductSipForm :form-type="formMode" :item-id="formData.id" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="sop" tab="SOP">
+        <ProductSopForm :form-type="formMode" :item-id="formData.id" />
+      </Tabs.TabPane>
+    </Tabs>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button
+          v-if="isDetail && formData?.id"
+          type="primary"
+          @click="handleBarcode"
+        >
+          查看条码
+        </Button>
+      </div>
+    </template>
+    <BarcodeDetail ref="barcodeDetailRef" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/modules/import-form.vue b/apps/web-antd/src/views/mes/md/item/modules/import-form.vue
new file mode 100644
index 000000000..ff4718bd9
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/modules/import-form.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import type { MesMdItemApi } from '#/api/mes/md/item';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { importItem, importItemTemplate } from '#/api/mes/md/item';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importItem(data.file, data.updateSupport);
+      const importData = result as MesMdItemApi.ItemImportRespVO;
+      let text = `上传成功数量：${importData.createCodes?.length || 0};`;
+      for (const code of importData.createCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新成功数量：${importData.updateCodes?.length || 0};`;
+      for (const code of importData.updateCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新失败数量：${Object.keys(importData.failureCodes || {}).length};`;
+      for (const code in importData.failureCodes || {}) {
+        text += `< ${code}: ${importData.failureCodes?.[code]} >`;
+      }
+      message.info(text);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importItemTemplate();
+  downloadFileFromBlobPart({ fileName: '物料导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.import', ['物料'])" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload
+            :before-upload="beforeUpload"
+            :max-count="1"
+            accept=".xls,.xlsx"
+          >
+            <Button type="primary">选择 Excel 文件</Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload">下载导入模板</Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/modules/item-batch-config-form.vue b/apps/web-antd/src/views/mes/md/item/modules/item-batch-config-form.vue
new file mode 100644
index 000000000..6c8bf9975
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/modules/item-batch-config-form.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import type { MesMdItemBatchConfigApi } from '#/api/mes/md/item/batchConfig';
+
+import { computed, ref, watch } from 'vue';
+
+import { Button, Checkbox, message, Spin } from 'ant-design-vue';
+
+import {
+  getBatchConfigByItemId,
+  saveBatchConfig,
+} from '#/api/mes/md/item/batchConfig';
+import { MesItemOrProductEnum } from '#/views/mes/utils/constants';
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    itemId: number;
+    itemOrProduct?: string;
+  }>(),
+  {
+    formType: 'update',
+    itemOrProduct: '',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const loading = ref(false); // 批次属性加载/保存中
+const formData = ref<MesMdItemBatchConfigApi.BatchConfig>(buildDefaultData());
+
+/** 构建批次属性默认值 */
+function buildDefaultData(): MesMdItemBatchConfigApi.BatchConfig {
+  return {
+    itemId: props.itemId,
+    produceDateFlag: false,
+    expireDateFlag: false,
+    receiptDateFlag: false,
+    vendorFlag: false,
+    clientFlag: false,
+    salesOrderCodeFlag: false,
+    purchaseOrderCodeFlag: false,
+    workorderFlag: false,
+    taskFlag: false,
+    workstationFlag: false,
+    toolFlag: false,
+    moldFlag: false,
+    lotNumberFlag: false,
+    qualityStatusFlag: false,
+  };
+}
+
+/** 加载批次属性配置 */
+async function loadData() {
+  loading.value = true;
+  try {
+    const data = await getBatchConfigByItemId(props.itemId);
+    formData.value = { ...buildDefaultData(), ...data };
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 判断是否已选择批次属性 */
+function hasAnySelected() {
+  return Object.entries(formData.value).some(
+    ([key, value]) => key.endsWith('Flag') && value === true,
+  );
+}
+
+/** 保存批次属性配置 */
+async function handleSave() {
+  if (!hasAnySelected()) {
+    message.warning('至少选择一个批次属性');
+    return;
+  }
+  loading.value = true;
+  try {
+    await saveBatchConfig({ ...formData.value, itemId: props.itemId });
+    message.success('保存成功');
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => props.itemId,
+  (value) => {
+    if (value) {
+      loadData();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Spin :spinning="loading">
+    <div v-if="!isReadOnly" class="mb-3 flex justify-end">
+      <Button type="primary" @click="handleSave">保存批次属性</Button>
+    </div>
+    <div class="grid grid-cols-5 gap-x-5 gap-y-3">
+      <Checkbox v-model:checked="formData.produceDateFlag" :disabled="isReadOnly">生产日期</Checkbox>
+      <Checkbox v-model:checked="formData.qualityStatusFlag" :disabled="isReadOnly">质量状态</Checkbox>
+
+      <template v-if="itemOrProduct === MesItemOrProductEnum.ITEM.value">
+        <Checkbox v-model:checked="formData.vendorFlag" :disabled="isReadOnly">供应商</Checkbox>
+        <Checkbox v-model:checked="formData.purchaseOrderCodeFlag" :disabled="isReadOnly">
+          采购订单编号
+        </Checkbox>
+        <Checkbox v-model:checked="formData.lotNumberFlag" :disabled="isReadOnly">生产批号</Checkbox>
+        <Checkbox v-model:checked="formData.expireDateFlag" :disabled="isReadOnly">有效期</Checkbox>
+        <Checkbox v-model:checked="formData.receiptDateFlag" :disabled="isReadOnly">入库日期</Checkbox>
+      </template>
+
+      <template v-if="itemOrProduct === MesItemOrProductEnum.PRODUCT.value">
+        <Checkbox v-model:checked="formData.clientFlag" :disabled="isReadOnly">客户</Checkbox>
+        <Checkbox v-model:checked="formData.salesOrderCodeFlag" :disabled="isReadOnly">
+          销售订单编号
+        </Checkbox>
+        <Checkbox v-model:checked="formData.workorderFlag" :disabled="isReadOnly">生产工单</Checkbox>
+        <Checkbox v-model:checked="formData.taskFlag" :disabled="isReadOnly">生产任务</Checkbox>
+        <Checkbox v-model:checked="formData.workstationFlag" :disabled="isReadOnly">工作站</Checkbox>
+        <Checkbox v-model:checked="formData.toolFlag" :disabled="isReadOnly">工具</Checkbox>
+        <Checkbox v-model:checked="formData.moldFlag" :disabled="isReadOnly">模具</Checkbox>
+      </template>
+    </div>
+  </Spin>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/modules/product-bom-form.vue b/apps/web-antd/src/views/mes/md/item/modules/product-bom-form.vue
new file mode 100644
index 000000000..ba0de60c6
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/modules/product-bom-form.vue
@@ -0,0 +1,242 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemApi } from '#/api/mes/md/item';
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+
+import { computed, ref, watch } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createProductBom,
+  deleteProductBom,
+  getProductBomListByItemId,
+  updateProductBom,
+} from '#/api/mes/md/item/productBom';
+import { $t } from '#/locales';
+
+import { MdItemSelectDialog } from '../components';
+import { useProductBomGridColumns } from '../data';
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    itemId: number;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const formOpen = ref(false); // BOM 表单是否打开
+const formLoading = ref(false); // BOM 表单提交中
+const formData = ref<MesMdProductBomApi.ProductBom>();
+const list = ref<MesMdProductBomApi.ProductBom[]>([]); // 产品 BOM 列表
+const itemSelectRef = ref<InstanceType<typeof MdItemSelectDialog>>(); // 物料选择弹窗
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'id', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'itemId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'bomItemId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'bomItemCode',
+      label: 'BOM 物料编码',
+      component: 'Input',
+      componentProps: { disabled: true },
+    },
+    {
+      fieldName: 'bomItemName',
+      label: 'BOM 物料名称',
+      component: 'Input',
+      componentProps: { disabled: true },
+    },
+    {
+      fieldName: 'bomItemSpecification',
+      label: '规格型号',
+      component: 'Input',
+      componentProps: { disabled: true },
+    },
+    {
+      fieldName: 'unitMeasureName',
+      label: '单位',
+      component: 'Input',
+      componentProps: { disabled: true },
+    },
+    {
+      fieldName: 'quantity',
+      label: '用量比例',
+      component: 'InputNumber',
+      componentProps: { class: '!w-full', min: 0, precision: 4, step: 0.1 },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: useProductBomGridColumns(isReadOnly.value),
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdProductBomApi.ProductBom>,
+});
+
+/** 加载产品 BOM 列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getProductBomListByItemId(props.itemId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 打开 BOM 物料选择弹窗 */
+function handleAdd() {
+  itemSelectRef.value?.open(undefined, { multiple: true });
+}
+
+/** 添加选中的 BOM 物料 */
+async function handleItemSelected(rows: MesMdItemApi.Item[]) {
+  if (rows.length === 0) {
+    return;
+  }
+  for (const item of rows) {
+    await createProductBom({
+      bomItemId: item.id,
+      itemId: props.itemId,
+      quantity: 1,
+    });
+  }
+  message.success($t('ui.actionMessage.operationSuccess'));
+  await getList();
+}
+
+/** 打开 BOM 编辑弹窗 */
+async function openForm(row: MesMdProductBomApi.ProductBom) {
+  formOpen.value = true;
+  formData.value = row;
+  await formApi.resetForm();
+  await formApi.setValues({
+    ...row,
+    itemId: props.itemId,
+  });
+}
+
+/** 提交 BOM 表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MesMdProductBomApi.ProductBom;
+    await (formData.value?.id ? updateProductBom(data) : createProductBom(data));
+    formOpen.value = false;
+    message.success($t('ui.actionMessage.operationSuccess'));
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除 BOM 物料 */
+async function handleDelete(id: number) {
+  await deleteProductBom(id);
+  message.success($t('ui.actionMessage.deleteSuccess', ['BOM']));
+  await getList();
+}
+
+watch(
+  () => props.itemId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="!isReadOnly" class="mb-3 flex items-center justify-start">
+      <TableAction
+        :actions="[
+          {
+            label: '添加 BOM 物料',
+            type: 'primary',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              onClick: openForm.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              popConfirm: {
+                title: '确认删除该 BOM 吗？',
+                confirm: handleDelete.bind(null, row.id!),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <Modal
+      v-model:open="formOpen"
+      title="编辑 BOM"
+      width="600px"
+      :confirm-loading="formLoading"
+      @ok="submitForm"
+    >
+      <Form class="mx-4" />
+    </Modal>
+
+    <MdItemSelectDialog ref="itemSelectRef" @selected="handleItemSelected" />
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/modules/product-media-list.vue b/apps/web-antd/src/views/mes/md/item/modules/product-media-list.vue
new file mode 100644
index 000000000..e61c61772
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/modules/product-media-list.vue
@@ -0,0 +1,239 @@
+<script lang="ts" setup>
+import type { MesMdProductSipApi } from '#/api/mes/md/item/productSip';
+import type { MesMdProductSopApi } from '#/api/mes/md/item/productSop';
+
+import { computed, markRaw, ref, watch } from 'vue';
+
+import { Button, Card, Empty, Image, message, Modal, Popconfirm, Spin } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import {
+  createProductSip,
+  deleteProductSip,
+  getProductSipListByItemId,
+  updateProductSip,
+} from '#/api/mes/md/item/productSip';
+import {
+  createProductSop,
+  deleteProductSop,
+  getProductSopListByItemId,
+  updateProductSop,
+} from '#/api/mes/md/item/productSop';
+import { ImageUpload } from '#/components/upload';
+import { ProProcessSelect } from '#/views/mes/pro/process/components';
+
+type MediaKind = 'SIP' | 'SOP';
+type MediaItem =
+  | MesMdProductSipApi.ProductSip
+  | MesMdProductSopApi.ProductSop;
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    itemId: number;
+    kind: MediaKind;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const title = computed(() => props.kind); // 当前媒体类型标题
+const loading = ref(false); // SIP/SOP 列表加载中
+const formOpen = ref(false); // SIP/SOP 表单是否打开
+const formLoading = ref(false); // SIP/SOP 表单提交中
+const formData = ref<MediaItem>();
+const list = ref<MediaItem[]>([]); // SIP/SOP 列表
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'id', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'itemId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'title',
+      label: '标题',
+      component: 'Input',
+      componentProps: { placeholder: '请输入标题' },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '展示顺序',
+      component: 'InputNumber',
+      componentProps: { class: '!w-full', min: 0, precision: 0 },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'description',
+      label: '内容说明',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入详细描述', rows: 3 },
+    },
+    {
+      fieldName: 'processId',
+      label: '所属工序',
+      component: markRaw(ProProcessSelect),
+    },
+    {
+      fieldName: 'url',
+      label: '图片',
+      component: markRaw(ImageUpload),
+      componentProps: { maxNumber: 1, showDescription: false },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+/** 获取当前媒体类型的列表接口 */
+function getListApi() {
+  return props.kind === 'SIP'
+    ? getProductSipListByItemId
+    : getProductSopListByItemId;
+}
+
+/** 获取当前媒体类型的新增接口 */
+function createApi() {
+  return props.kind === 'SIP' ? createProductSip : createProductSop;
+}
+
+/** 获取当前媒体类型的修改接口 */
+function updateApi() {
+  return props.kind === 'SIP' ? updateProductSip : updateProductSop;
+}
+
+/** 获取当前媒体类型的删除接口 */
+function deleteApi() {
+  return props.kind === 'SIP' ? deleteProductSip : deleteProductSop;
+}
+
+/** 加载 SIP/SOP 列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    list.value = await getListApi()(props.itemId);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 打开 SIP/SOP 表单 */
+async function openForm(row?: MediaItem) {
+  formOpen.value = true;
+  formData.value = row;
+  await formApi.resetForm();
+  await formApi.setValues({
+    itemId: props.itemId,
+    sort: 0,
+    ...row,
+  });
+}
+
+/** 提交 SIP/SOP 表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MediaItem;
+    await (formData.value?.id ? updateApi()(data as any) : createApi()(data as any));
+    formOpen.value = false;
+    message.success('保存成功');
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除 SIP/SOP */
+async function handleDelete(id: number) {
+  await deleteApi()(id);
+  message.success('删除成功');
+  await getList();
+}
+
+watch(
+  () => props.itemId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <Button
+      v-if="!isReadOnly"
+      class="mb-3"
+      type="primary"
+      @click="openForm()"
+    >
+      添加 {{ title }}
+    </Button>
+    <Spin :spinning="loading">
+      <div v-if="list.length > 0" class="grid grid-cols-4 gap-3">
+        <Card
+          v-for="item in list"
+          :key="item.id"
+          hoverable
+          :body-style="{ padding: '0px' }"
+        >
+          <Image
+            v-if="item.url"
+            :src="item.url"
+            class="block h-40 w-full object-cover"
+            :preview="{ src: item.url }"
+          />
+          <div
+            v-else
+            class="flex h-40 w-full items-center justify-center bg-gray-100 text-gray-400"
+          >
+            暂无图片
+          </div>
+          <div class="p-3">
+            <div class="mb-1 truncate text-sm font-bold">{{ item.title }}</div>
+            <div v-if="item.description" class="truncate text-xs text-gray-500">
+              {{ item.description }}
+            </div>
+            <div v-if="!isReadOnly" class="mt-2 flex justify-end">
+              <Button type="link" size="small" @click="openForm(item)">编辑</Button>
+              <Popconfirm title="确认删除该数据吗？" @confirm="handleDelete(item.id!)">
+                <Button danger type="link" size="small">删除</Button>
+              </Popconfirm>
+            </div>
+          </div>
+        </Card>
+      </div>
+      <Empty v-else :description="`暂无 ${title} 数据`" />
+    </Spin>
+
+    <Modal
+      v-model:open="formOpen"
+      :title="`${formData?.id ? '编辑' : '新增'} ${title}`"
+      width="500px"
+      :confirm-loading="formLoading"
+      @ok="submitForm"
+    >
+      <Form class="mx-4" />
+    </Modal>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/modules/product-sip-form.vue b/apps/web-antd/src/views/mes/md/item/modules/product-sip-form.vue
new file mode 100644
index 000000000..a37cdcaec
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/modules/product-sip-form.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import ProductMediaList from './product-media-list.vue';
+
+defineProps<{
+  formType?: string;
+  itemId: number;
+}>();
+</script>
+
+<template>
+  <ProductMediaList :form-type="formType" :item-id="itemId" kind="SIP" />
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/modules/product-sop-form.vue b/apps/web-antd/src/views/mes/md/item/modules/product-sop-form.vue
new file mode 100644
index 000000000..93a73a9b3
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/modules/product-sop-form.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import ProductMediaList from './product-media-list.vue';
+
+defineProps<{
+  formType?: string;
+  itemId: number;
+}>();
+</script>
+
+<template>
+  <ProductMediaList :form-type="formType" :item-id="itemId" kind="SOP" />
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/type/components/index.ts b/apps/web-antd/src/views/mes/md/item/type/components/index.ts
new file mode 100644
index 000000000..c5d4dd2c4
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/type/components/index.ts
@@ -0,0 +1,2 @@
+export { default as MdItemTypeSelect } from './md-item-type-select.vue';
+export { default as MdItemTypeTree } from './md-item-type-tree.vue';
diff --git a/apps/web-antd/src/views/mes/md/item/type/components/md-item-type-select.vue b/apps/web-antd/src/views/mes/md/item/type/components/md-item-type-select.vue
new file mode 100644
index 000000000..d3e6527e1
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/type/components/md-item-type-select.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { Tooltip, TreeSelect } from 'ant-design-vue';
+
+import { getItemTypeSimpleList } from '#/api/mes/md/item/type';
+
+defineOptions({ name: 'MdItemTypeSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择物料分类',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesMdItemTypeApi.ItemType | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+type ItemTypeNode = MesMdItemTypeApi.ItemType & {
+  children?: ItemTypeNode[];
+  disabled?: boolean;
+};
+
+const allList = ref<MesMdItemTypeApi.ItemType[]>([]); // 物料分类列表
+const itemTypeTree = ref<ItemTypeNode[]>([]); // 物料分类树
+const selectedItem = ref<MesMdItemTypeApi.ItemType>(); // 当前选中分类
+
+const selectValue = computed({ // 选择器绑定值
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+/** 递归将有子节点的分支节点标记为 disabled */
+function markParentsDisabled(nodes: MesMdItemTypeApi.ItemType[]): ItemTypeNode[] {
+  return nodes.map((node) => {
+    const children = node.children?.length
+      ? markParentsDisabled(node.children)
+      : undefined;
+    return {
+      ...node,
+      children,
+      disabled: Boolean(children?.length),
+    };
+  });
+}
+
+/** 根据当前值同步 tooltip 展示的分类详情 */
+function syncSelectedItem(value: number | undefined) {
+  selectedItem.value =
+    value === undefined ? undefined : allList.value.find((item) => item.id === value);
+}
+
+/** 除 v-model 外，额外抛出完整分类对象给业务表单使用 */
+function handleChange(value: number | undefined) {
+  syncSelectedItem(value);
+  emit('change', selectedItem.value);
+}
+
+/** 查询物料分类树 */
+async function getItemTypeTree() {
+  allList.value = await getItemTypeSimpleList();
+  itemTypeTree.value = markParentsDisabled(handleTree(allList.value));
+  syncSelectedItem(props.modelValue);
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncSelectedItem(value);
+  },
+);
+
+/** 初始化 */
+onMounted(() => {
+  getItemTypeTree();
+});
+</script>
+
+<template>
+  <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+    <template #title>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>备注：{{ selectedItem.remark || '-' }}</div>
+      </div>
+    </template>
+    <TreeSelect
+      v-bind="$attrs"
+      v-model:value="selectValue"
+      :allow-clear="allowClear"
+      :disabled="disabled"
+      :field-names="{ children: 'children', label: 'name', value: 'id' }"
+      :placeholder="placeholder"
+      :tree-data="itemTypeTree"
+      class="w-full"
+      show-search
+      tree-default-expand-all
+      tree-node-filter-prop="name"
+      @change="handleChange"
+    />
+  </Tooltip>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/type/components/md-item-type-tree.vue b/apps/web-antd/src/views/mes/md/item/type/components/md-item-type-tree.vue
new file mode 100644
index 000000000..eeb7d926b
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/type/components/md-item-type-tree.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { Input, Spin, Tree } from 'ant-design-vue';
+
+import { getItemTypeSimpleList } from '#/api/mes/md/item/type';
+
+defineOptions({ name: 'MdItemTypeTree' });
+
+withDefaults(
+  defineProps<{
+    filterPlaceholder?: string;
+  }>(),
+  {
+    filterPlaceholder: '搜索分类',
+  },
+);
+
+const emit = defineEmits<{
+  nodeClick: [itemType: MesMdItemTypeApi.ItemType | undefined];
+}>();
+
+const loading = ref(false); // 分类树加载中
+const filterText = ref(''); // 分类搜索关键字
+const currentNodeId = ref<number>(); // 当前选中分类编号
+const selectedKeys = ref<number[]>([]); // 当前选中节点 key 列表
+const itemTypeList = ref<MesMdItemTypeApi.ItemType[]>([]); // 物料分类列表
+const itemTypeTree = ref<any[]>([]); // 物料分类树
+
+/** 加载分类树 */
+async function loadTree() {
+  loading.value = true;
+  try {
+    const data = await getItemTypeSimpleList();
+    itemTypeList.value = data;
+    itemTypeTree.value = handleTree(data, 'id', 'parentId');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 处理搜索逻辑 */
+function handleSearch(value: string) {
+  filterText.value = value;
+  const filteredList = value
+    ? itemTypeList.value.filter((item) => item.name?.includes(value))
+    : itemTypeList.value;
+  itemTypeTree.value = handleTree(filteredList, 'id', 'parentId');
+}
+
+/** 处理节点点击：支持点击同一节点取消选中 */
+function handleSelect(_selectedKeys: any[], info: any) {
+  const row = info.node.dataRef as MesMdItemTypeApi.ItemType;
+  if (currentNodeId.value === row.id) {
+    currentNodeId.value = undefined;
+    selectedKeys.value = [];
+    emit('nodeClick', undefined);
+    return;
+  }
+  currentNodeId.value = row.id;
+  selectedKeys.value = row.id === undefined ? [] : [row.id];
+  emit('nodeClick', row);
+}
+
+/** 清空选中状态 */
+function clearCurrent() {
+  currentNodeId.value = undefined;
+  selectedKeys.value = [];
+}
+
+/** 重置整个树状态 */
+function reset() {
+  clearCurrent();
+  filterText.value = '';
+  itemTypeTree.value = handleTree(itemTypeList.value, 'id', 'parentId');
+}
+
+/** 设置当前选中分类 */
+function setCurrent(itemTypeId: number) {
+  currentNodeId.value = itemTypeId;
+  selectedKeys.value = [itemTypeId];
+}
+
+watch(filterText, (value) => {
+  handleSearch(value);
+});
+
+defineExpose({ clearCurrent, loadTree, reset, setCurrent });
+
+/** 初始化 */
+onMounted(() => {
+  loadTree();
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <Input
+      v-model:value="filterText"
+      :placeholder="filterPlaceholder"
+      allow-clear
+      class="w-full"
+    >
+      <template #prefix>
+        <IconifyIcon class="size-4" icon="lucide:search" />
+      </template>
+    </Input>
+    <Spin :spinning="loading" wrapper-class-name="w-full">
+      <Tree
+        v-if="itemTypeTree.length > 0"
+        :default-expand-all="true"
+        :field-names="{ title: 'name', key: 'id', children: 'children' }"
+        :selected-keys="selectedKeys"
+        :tree-data="itemTypeTree"
+        class="pt-2"
+        @select="handleSelect"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无数据
+      </div>
+    </Spin>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/type/data.ts b/apps/web-antd/src/views/mes/md/item/type/data.ts
new file mode 100644
index 000000000..12b29f67c
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/type/data.ts
@@ -0,0 +1,219 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getItemTypeList } from '#/api/mes/md/item/type';
+import {
+  MesAutoCodeRuleCode,
+  MesItemOrProductEnum,
+} from '#/views/mes/utils/constants';
+
+/** 新增/修改物料分类的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getItemTypeList();
+          return [
+            {
+              id: 0,
+              name: '顶级分类',
+              children: handleTree(data),
+            },
+          ];
+        },
+        childrenField: 'children',
+        labelField: 'name',
+        placeholder: '请选择上级分类',
+        treeDefaultExpandAll: true,
+        treeNodeFilterProp: 'name',
+        valueField: 'id',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'code',
+      label: '分类编码',
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入分类编码',
+      },
+      rules: z.string().min(1, '分类编码不能为空').max(64),
+      suffix: () =>
+        h(
+          Button,
+          {
+            type: 'default',
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_ITEM_TYPE_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '自动生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'itemOrProduct',
+      label: '物料/产品标识',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.MES_MD_ITEM_OR_PRODUCT),
+      },
+      rules: z.string().default(MesItemOrProductEnum.ITEM.value),
+    },
+    {
+      fieldName: 'sort',
+      label: '显示排序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        precision: 0,
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入分类名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdItemTypeApi.ItemType>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      minWidth: 200,
+      align: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'code',
+      title: '分类编码',
+      width: 160,
+      align: 'center',
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 130,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/md/item/type/index.vue b/apps/web-antd/src/views/mes/md/item/type/index.vue
new file mode 100644
index 000000000..c7f2333b1
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/type/index.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteItemType, getItemTypeList } from '#/api/mes/md/item/type';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const isExpanded = ref(true); // 树形表格是否展开
+
+/** 切换树形展开/收缩状态 */
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级分类 */
+function handleAppend(row: MesMdItemTypeApi.ItemType) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: MesMdItemTypeApi.ItemType) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: MesMdItemTypeApi.ItemType) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteItemType(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,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getItemTypeList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<MesMdItemTypeApi.ItemType>,
+});
+</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: ['mes:md-item-type:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增子分类',
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-item-type:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-item-type:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-item-type:delete'],
+              ifShow: row.parentId !== 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/item/type/modules/form.vue b/apps/web-antd/src/views/mes/md/item/type/modules/form.vue
new file mode 100644
index 000000000..9d59b4646
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/item/type/modules/form.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createItemType,
+  getItemType,
+  updateItemType,
+} from '#/api/mes/md/item/type';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesMdItemTypeApi.ItemType>();
+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: 110,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdItemTypeApi.ItemType;
+    try {
+      await (formData.value?.id ? updateItemType(data) : createItemType(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;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<MesMdItemTypeApi.ItemType>();
+    if (!data || !data.id) {
+      formData.value = data || undefined;
+      if (data) {
+        // 设置上级分类
+        await formApi.setValues(data);
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getItemType(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/unitmeasure/components/index.ts b/apps/web-antd/src/views/mes/md/unitmeasure/components/index.ts
new file mode 100644
index 000000000..59e066096
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/unitmeasure/components/index.ts
@@ -0,0 +1 @@
+export { default as MdUnitMeasureSelect } from './md-unit-measure-select.vue';
diff --git a/apps/web-antd/src/views/mes/md/unitmeasure/components/md-unit-measure-select.vue b/apps/web-antd/src/views/mes/md/unitmeasure/components/md-unit-measure-select.vue
new file mode 100644
index 000000000..9238115b5
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/unitmeasure/components/md-unit-measure-select.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { MesMdUnitMeasureApi } from '#/api/mes/md/unitmeasure';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Select, Tag, Tooltip } from 'ant-design-vue';
+
+import { getUnitMeasureSimpleList } from '#/api/mes/md/unitmeasure';
+
+defineOptions({ name: 'MdUnitMeasureSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择计量单位',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesMdUnitMeasureApi.UnitMeasure | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const allList = ref<MesMdUnitMeasureApi.UnitMeasure[]>([]); // 计量单位列表
+const filteredList = ref<MesMdUnitMeasureApi.UnitMeasure[]>([]); // 过滤后的计量单位列表
+const selectedItem = ref<MesMdUnitMeasureApi.UnitMeasure>(); // 当前选中计量单位
+
+const selectValue = computed({ // 选择器绑定值
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+/** 前端按名称和编码过滤计量单位 */
+function handleFilter(input: string, option: any) {
+  const keyword = input.toLowerCase();
+  const item = option?.item as MesMdUnitMeasureApi.UnitMeasure | undefined;
+  return Boolean(
+    item?.name?.toLowerCase().includes(keyword) ||
+      item?.code?.toLowerCase().includes(keyword),
+  );
+}
+
+/** 根据当前值同步 tooltip 展示的计量单位详情 */
+function syncSelectedItem(value: number | undefined) {
+  selectedItem.value =
+    value === undefined ? undefined : allList.value.find((item) => item.id === value);
+}
+
+/** 除 v-model 外，额外抛出完整计量单位对象给业务表单使用 */
+function handleChange(value: any) {
+  const nextValue = value === undefined ? undefined : Number(value);
+  syncSelectedItem(nextValue);
+  emit('change', selectedItem.value);
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncSelectedItem(value);
+  },
+);
+
+onMounted(async () => {
+  allList.value = await getUnitMeasureSimpleList();
+  filteredList.value = allList.value;
+  syncSelectedItem(props.modelValue);
+});
+</script>
+
+<template>
+  <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+    <template #title>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>是否主单位：{{ selectedItem.primaryFlag ? '是' : '否' }}</div>
+        <div v-if="!selectedItem.primaryFlag && selectedItem.changeRate != null">
+          换算比例：{{ selectedItem.changeRate }}
+        </div>
+        <div v-if="selectedItem.remark">备注：{{ selectedItem.remark }}</div>
+      </div>
+    </template>
+    <Select
+      v-bind="$attrs"
+      v-model:value="selectValue"
+      :allow-clear="allowClear"
+      :disabled="disabled"
+      :filter-option="handleFilter"
+      :placeholder="placeholder"
+      class="w-full"
+      show-search
+      @change="handleChange"
+    >
+      <Select.Option
+        v-for="item in filteredList"
+        :key="item.id"
+        :item="item"
+        :value="item.id"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ item.name }}</span>
+          <Tag v-if="item.code" color="default">编号: {{ item.code }}</Tag>
+        </div>
+      </Select.Option>
+    </Select>
+  </Tooltip>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/unitmeasure/data.ts b/apps/web-antd/src/views/mes/md/unitmeasure/data.ts
new file mode 100644
index 000000000..8352d9c10
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/unitmeasure/data.ts
@@ -0,0 +1,196 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdUnitMeasureApi } from '#/api/mes/md/unitmeasure';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getUnitMeasureSimpleList } from '#/api/mes/md/unitmeasure';
+
+/** 新增/修改计量单位的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '单位编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入单位编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '单位名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入单位名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'primaryFlag',
+      label: '是否主单位',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+      rules: z.boolean().default(true),
+    },
+    {
+      fieldName: 'primaryId',
+      label: '主单位',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const list = await getUnitMeasureSimpleList();
+          return list.filter((item) => item.primaryFlag === true);
+        },
+        labelField: 'name',
+        placeholder: '请选择主单位',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['primaryFlag'],
+        show: (values) => values.primaryFlag === false,
+      },
+    },
+    {
+      fieldName: 'changeRate',
+      label: '与主单位换算比例',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        precision: 4,
+        step: 1,
+      },
+      dependencies: {
+        triggerFields: ['primaryFlag'],
+        show: (values) => values.primaryFlag === false,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '单位编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入单位编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '单位名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入单位名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdUnitMeasureApi.UnitMeasure>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '单位编码',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '单位名称',
+      minWidth: 160,
+    },
+    {
+      field: 'primaryFlag',
+      title: '是否主单位',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'changeRate',
+      title: '与主单位换算比例',
+      minWidth: 150,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/md/unitmeasure/index.vue b/apps/web-antd/src/views/mes/md/unitmeasure/index.vue
new file mode 100644
index 000000000..c40727b32
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/unitmeasure/index.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdUnitMeasureApi } from '#/api/mes/md/unitmeasure';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteUnitMeasure,
+  exportUnitMeasure,
+  getUnitMeasurePage,
+} from '#/api/mes/md/unitmeasure';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportUnitMeasure(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '计量单位.xls', source: data });
+}
+
+/** 创建计量单位 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑计量单位 */
+function handleEdit(row: MesMdUnitMeasureApi.UnitMeasure) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除计量单位 */
+async function handleDelete(row: MesMdUnitMeasureApi.UnitMeasure) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteUnitMeasure(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 getUnitMeasurePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdUnitMeasureApi.UnitMeasure>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】物料产品、分类、计量单位"
+        url="https://doc.iocoder.cn/mes/md/product/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="计量单位列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['计量单位']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-unit-measure:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:md-unit-measure:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-unit-measure:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-unit-measure:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/unitmeasure/modules/form.vue b/apps/web-antd/src/views/mes/md/unitmeasure/modules/form.vue
new file mode 100644
index 000000000..cfd906fc8
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/unitmeasure/modules/form.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { MesMdUnitMeasureApi } from '#/api/mes/md/unitmeasure';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createUnitMeasure,
+  getUnitMeasure,
+  updateUnitMeasure,
+} from '#/api/mes/md/unitmeasure';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesMdUnitMeasureApi.UnitMeasure>();
+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: 140,
+  },
+  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 MesMdUnitMeasureApi.UnitMeasure;
+    if (data.primaryFlag) {
+      data.primaryId = undefined;
+      data.changeRate = undefined;
+    }
+    try {
+      await (formData.value?.id
+        ? updateUnitMeasure(data)
+        : createUnitMeasure(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;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<MesMdUnitMeasureApi.UnitMeasure>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUnitMeasure(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/vendor/components/md-vendor-select-dialog.vue b/apps/web-antd/src/views/mes/md/vendor/components/md-vendor-select-dialog.vue
new file mode 100644
index 000000000..c3bcba5a9
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/vendor/components/md-vendor-select-dialog.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { nextTick, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getVendorPage } from '#/api/mes/md/vendor';
+
+import {
+  useVendorSelectGridColumns,
+  useVendorSelectGridFormSchema,
+} from '../data';
+
+const emit = defineEmits<{
+  selected: [rows: MesMdVendorApi.Vendor[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
+const selectedRows = ref<MesMdVendorApi.Vendor[]>([]); // 已选供应商列表
+const preSelectedIds = ref<number[]>([]); // 预选供应商编号列表
+
+/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+async function syncSingleSelection(row?: MesMdVendorApi.Vendor) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条 */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: MesMdVendorApi.Vendor[];
+  row?: MesMdVendorApi.Vendor;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 处理全选变化 */
+function handleCheckboxAll({ records }: { records: MesMdVendorApi.Vendor[] }) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 回显预选供应商 */
+function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesMdVendorApi.Vendor[];
+  for (const row of rows) {
+    if (row.id && preSelectedIds.value.includes(row.id)) {
+      gridApi.grid.setCheckboxRow(row, true);
+      if (!multiple.value) {
+        selectedRows.value = [row];
+      }
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useVendorSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useVendorSelectGridColumns(),
+    height: 520,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getVendorPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            status: CommonStatusEnum.ENABLE,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdVendorApi.Vendor>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+}
+
+/** 打开供应商选择弹窗 */
+async function openModal(selectedIds?: number[], options?: { multiple?: boolean }) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  applyPreSelection();
+}
+
+/** 关闭供应商选择弹窗 */
+async function closeModal() {
+  open.value = false;
+  await resetQueryState();
+}
+
+/** 确认选择供应商 */
+function handleConfirm() {
+  if (selectedRows.value.length === 0) {
+    message.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? selectedRows.value : [selectedRows.value[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="供应商选择"
+    width="70%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <Grid table-title="供应商列表" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/vendor/components/md-vendor-select.vue b/apps/web-antd/src/views/mes/md/vendor/components/md-vendor-select.vue
new file mode 100644
index 000000000..5f0746bab
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/vendor/components/md-vendor-select.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input, Tooltip } from 'ant-design-vue';
+
+import { getVendor } from '#/api/mes/md/vendor';
+
+import MdVendorSelectDialog from './md-vendor-select-dialog.vue';
+
+defineOptions({ name: 'MdVendorSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择供应商',
+  },
+);
+const emit = defineEmits<{
+  change: [item: MesMdVendorApi.Vendor | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdVendorSelectDialog>>(); // 供应商选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedItem = ref<MesMdVendorApi.Vendor>(); // 当前选中供应商
+
+const displayLabel = computed(() => selectedItem.value?.name ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () => props.allowClear && !props.disabled && hovering.value && props.modelValue != null,
+);
+
+/** 根据供应商编号回显选择器 */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getVendor(id);
+  } catch (error) {
+    console.error('[MdVendorSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveItemById(value);
+  },
+  { immediate: true },
+);
+
+/** 清空已选供应商 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开供应商选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.ant-input-suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 回填选中的供应商 */
+function handleSelected(rows: MesMdVendorApi.Vendor[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+      <template #title>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编码：{{ selectedItem.code || '-' }}</div>
+          <div>名称：{{ selectedItem.name || '-' }}</div>
+          <div>简称：{{ selectedItem.nickname || '-' }}</div>
+          <div>电话：{{ selectedItem.telephone || '-' }}</div>
+        </div>
+      </template>
+      <Input
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="displayLabel"
+        readonly
+      >
+        <template #suffix>
+          <IconifyIcon
+            class="size-4"
+            :icon="showClear ? 'lucide:circle-x' : 'lucide:search'"
+          />
+        </template>
+      </Input>
+    </Tooltip>
+  </div>
+  <MdVendorSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
diff --git a/apps/web-antd/src/views/mes/md/vendor/data.ts b/apps/web-antd/src/views/mes/md/vendor/data.ts
new file mode 100644
index 000000000..5f31bcf79
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/vendor/data.ts
@@ -0,0 +1,473 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+/** 新增/修改供应商的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '供应商编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          Button,
+          {
+            type: 'default',
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_VENDOR_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '自动生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商名称',
+      },
+      rules: z.string().min(1, '供应商名称不能为空').max(100),
+    },
+    {
+      fieldName: 'nickname',
+      label: '供应商简称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商英文名称',
+      },
+    },
+    {
+      fieldName: 'level',
+      label: '供应商等级',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.MES_VENDOR_LEVEL),
+        placeholder: '请选择供应商等级',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '供应商简介',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入供应商简介',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'address',
+      label: '供应商地址',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入供应商地址',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'website',
+      label: '官网地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商官网地址',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: '邮箱地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商邮箱地址',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'telephone',
+      label: '供应商电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商电话',
+      },
+    },
+    {
+      fieldName: 'score',
+      label: '供应商评分',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        max: 100,
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      fieldName: 'contact1Name',
+      label: '联系人1',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1',
+      },
+    },
+    {
+      fieldName: 'contact1Telephone',
+      label: '联系人1电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1电话',
+      },
+    },
+    {
+      fieldName: 'contact1Email',
+      label: '联系人1邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'contact2Name',
+      label: '联系人2',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2',
+      },
+    },
+    {
+      fieldName: 'contact2Telephone',
+      label: '联系人2电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2电话',
+      },
+    },
+    {
+      fieldName: 'contact2Email',
+      label: '联系人2邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'creditCode',
+      label: '社会信用代码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入统一社会信用代码',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'logo',
+      label: '供应商 LOGO',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商 LOGO 地址',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 导入供应商的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '供应商数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        checkedChildren: '是',
+        unCheckedChildren: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的供应商数据',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '供应商编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入供应商编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入供应商名称',
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '供应商简称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入供应商简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入英文名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdVendorApi.Vendor>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '供应商编码',
+      minWidth: 150,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '供应商名称',
+      minWidth: 180,
+    },
+    {
+      field: 'nickname',
+      title: '供应商简称',
+      width: 120,
+    },
+    {
+      field: 'level',
+      title: '供应商等级',
+      width: 130,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_VENDOR_LEVEL },
+      },
+    },
+    {
+      field: 'score',
+      title: '供应商评分',
+      width: 120,
+    },
+    {
+      field: 'telephone',
+      title: '供应商电话',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 供应商选择弹窗的搜索表单 */
+export function useVendorSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '供应商编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入供应商编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入供应商名称',
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '供应商简称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入供应商简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入英文名称',
+      },
+    },
+  ];
+}
+
+/** 供应商选择弹窗的字段 */
+export function useVendorSelectGridColumns(): VxeTableGridOptions<MesMdVendorApi.Vendor>['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'code',
+      title: '供应商编码',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '供应商名称',
+      minWidth: 170,
+    },
+    {
+      field: 'nickname',
+      title: '供应商简称',
+      width: 120,
+    },
+    {
+      field: 'level',
+      title: '供应商等级',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_VENDOR_LEVEL },
+      },
+    },
+    {
+      field: 'score',
+      title: '供应商评分',
+      width: 110,
+    },
+    {
+      field: 'telephone',
+      title: '联系电话',
+      width: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 140,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/md/vendor/index.vue b/apps/web-antd/src/views/mes/md/vendor/index.vue
new file mode 100644
index 000000000..e33be1f86
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/vendor/index.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteVendor, exportVendor, getVendorPage } from '#/api/mes/md/vendor';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建供应商 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看供应商 */
+function handleDetail(row: MesMdVendorApi.Vendor) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑供应商 */
+function handleEdit(row: MesMdVendorApi.Vendor) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除供应商 */
+async function handleDelete(row: MesMdVendorApi.Vendor) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteVendor(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportVendor(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '供应商.xls', source: data });
+}
+
+/** 导入供应商 */
+function handleImport() {
+  importModalApi.open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getVendorPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdVendorApi.Vendor>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】客户管理、供应商管理"
+        url="https://doc.iocoder.cn/mes/md/client-vendor/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
+
+    <Grid table-title="供应商列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['供应商']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-vendor:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.import', ['供应商']),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['mes:md-vendor:import'],
+              onClick: handleImport,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:md-vendor:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.code }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-vendor:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-vendor:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/vendor/modules/form.vue b/apps/web-antd/src/views/mes/md/vendor/modules/form.vue
new file mode 100644
index 000000000..b45af94bb
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/vendor/modules/form.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message, Tabs } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createVendor, getVendor, updateVendor } from '#/api/mes/md/vendor';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import VendorItemReceiptLineList from './item-receipt-line-list.vue';
+import VendorItemReceiptList from './item-receipt-list.vue';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const subTabsName = ref('itemReceiptLine'); // 当前子表页签
+const formData = ref<MesMdVendorApi.Vendor>();
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  if (formMode.value === 'detail') {
+    return $t('ui.actionTitle.view', ['供应商']);
+  }
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['供应商'])
+    : $t('ui.actionTitle.create', ['供应商']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdVendorApi.Vendor;
+    try {
+      await (formData.value?.id ? updateVendor(data) : createVendor(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;
+    }
+    await formApi.resetForm();
+    subTabsName.value = 'itemReceiptLine';
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getVendor(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <Tabs
+      v-if="formMode !== 'create' && formData?.id"
+      v-model:active-key="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <Tabs.TabPane key="itemReceiptLine" tab="物料清单">
+        <VendorItemReceiptLineList :vendor-id="formData.id" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="itemReceipt" tab="采购记录">
+        <VendorItemReceiptList :vendor-id="formData.id" />
+      </Tabs.TabPane>
+    </Tabs>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/vendor/modules/import-form.vue b/apps/web-antd/src/views/mes/md/vendor/modules/import-form.vue
new file mode 100644
index 000000000..25fe54399
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/vendor/modules/import-form.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { FileType } from 'ant-design-vue/es/upload/interface';
+
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { importVendor, importVendorTemplate } from '#/api/mes/md/vendor';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importVendor(data.file, data.updateSupport);
+      const importData = result as MesMdVendorApi.VendorImportRespVO;
+      let text = `上传成功数量：${importData.createCodes?.length || 0};`;
+      for (const code of importData.createCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新成功数量：${importData.updateCodes?.length || 0};`;
+      for (const code of importData.updateCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新失败数量：${Object.keys(importData.failureCodes || {}).length};`;
+      for (const code in importData.failureCodes || {}) {
+        text += `< ${code}: ${importData.failureCodes?.[code]} >`;
+      }
+      message.info(text);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: FileType) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模板 */
+async function handleDownload() {
+  const data = await importVendorTemplate();
+  downloadFileFromBlobPart({ fileName: '供应商导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.import', ['供应商'])" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <Upload
+            :before-upload="beforeUpload"
+            :max-count="1"
+            accept=".xls,.xlsx"
+          >
+            <Button type="primary">选择 Excel 文件</Button>
+          </Upload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleDownload">下载导入模板</Button>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/vendor/modules/item-receipt-detail.vue b/apps/web-antd/src/views/mes/md/vendor/modules/item-receipt-detail.vue
new file mode 100644
index 000000000..e9cd9f261
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/vendor/modules/item-receipt-detail.vue
@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmItemReceiptApi } from '#/api/mes/wm/itemreceipt';
+import type { MesWmItemReceiptLineApi } from '#/api/mes/wm/itemreceipt/line';
+
+import { nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { Descriptions, Spin } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemReceipt } from '#/api/mes/wm/itemreceipt';
+import { getItemReceiptLinePage } from '#/api/mes/wm/itemreceipt/line';
+
+const loading = ref(false); // 详情加载状态
+const receiptId = ref<number>(); // 当前采购入库单编号
+const receipt = ref<MesWmItemReceiptApi.ItemReceipt>(); // 当前采购入库单详情
+
+/** 格式化空值 */
+function formatEmpty(value: null | number | string | undefined) {
+  return value ?? '-';
+}
+
+/** 格式化日期 */
+function formatDate(value: Date | number | string | undefined) {
+  return value ? (formatDateTime(value) as string) : '-';
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'itemCode', title: '物料编码', width: 140 },
+      { field: 'itemName', title: '物料名称', minWidth: 150 },
+      { field: 'specification', title: '规格型号', minWidth: 140 },
+      { field: 'unitMeasureName', title: '单位', width: 100 },
+      { field: 'receivedQuantity', title: '入库数量', width: 120 },
+      { field: 'batchCode', title: '批次号', minWidth: 140 },
+    ],
+    height: 280,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!receiptId.value) {
+            return { list: [], total: 0 };
+          }
+          return await getItemReceiptLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            receiptId: receiptId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmItemReceiptLineApi.ItemReceiptLine>,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      receiptId.value = undefined;
+      receipt.value = undefined;
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    receiptId.value = data.id;
+    loading.value = true;
+    modalApi.lock();
+    try {
+      receipt.value = await getItemReceipt(data.id);
+      await nextTick();
+      await gridApi.query();
+    } finally {
+      loading.value = false;
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="采购入库单详情"
+    class="w-[900px]"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <Spin :spinning="loading">
+      <Descriptions bordered size="small" :column="3">
+        <Descriptions.Item label="入库单编号">
+          {{ formatEmpty(receipt?.code) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="入库单名称">
+          {{ formatEmpty(receipt?.name) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="入库日期">
+          {{ formatDate(receipt?.receiptDate) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="到货通知单">
+          {{ formatEmpty(receipt?.noticeCode) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="供应商">
+          {{ formatEmpty(receipt?.vendorName) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="采购订单号">
+          {{ formatEmpty(receipt?.purchaseOrderCode) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="仓库">
+          {{ formatEmpty(receipt?.warehouseName) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="库区">
+          {{ formatEmpty(receipt?.locationName) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="库位">
+          {{ formatEmpty(receipt?.areaName) }}
+        </Descriptions.Item>
+        <Descriptions.Item label="备注" :span="3">
+          {{ formatEmpty(receipt?.remark) }}
+        </Descriptions.Item>
+      </Descriptions>
+      <div class="mt-4">
+        <Grid table-title="入库物料" />
+      </div>
+    </Spin>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/vendor/modules/item-receipt-line-list.vue b/apps/web-antd/src/views/mes/md/vendor/modules/item-receipt-line-list.vue
new file mode 100644
index 000000000..c1d536884
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/vendor/modules/item-receipt-line-list.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmItemReceiptLineApi } from '#/api/mes/wm/itemreceipt/line';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemReceiptLinePage } from '#/api/mes/wm/itemreceipt/line';
+import ItemForm from '#/views/mes/md/item/modules/form.vue';
+
+const props = defineProps<{
+  vendorId: number;
+}>();
+
+const [ItemFormModal, itemFormModalApi] = useVbenModal({
+  connectedComponent: ItemForm,
+  destroyOnClose: true,
+});
+
+/** 查看物料详情 */
+function handleViewItem(row: MesWmItemReceiptLineApi.ItemReceiptLine) {
+  itemFormModalApi.setData({ id: row.itemId, type: 'detail' }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'itemCode',
+        title: '物料编码',
+        width: 140,
+        slots: { default: 'itemCode' },
+      },
+      { field: 'itemName', title: '物料名称', minWidth: 150 },
+      { field: 'specification', title: '规格型号', minWidth: 140 },
+      { field: 'unitMeasureName', title: '单位', width: 100 },
+      { field: 'receivedQuantity', title: '入库数量', width: 120 },
+      { field: 'batchCode', title: '批次号', minWidth: 140 },
+    ],
+    height: 320,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getItemReceiptLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            vendorId: props.vendorId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmItemReceiptLineApi.ItemReceiptLine>,
+});
+</script>
+
+<template>
+  <ItemFormModal />
+  <Grid table-title="物料清单">
+    <template #itemCode="{ row }">
+      <Button type="link" @click="handleViewItem(row)">
+        {{ row.itemCode }}
+      </Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/vendor/modules/item-receipt-list.vue b/apps/web-antd/src/views/mes/md/vendor/modules/item-receipt-list.vue
new file mode 100644
index 000000000..579b4db05
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/vendor/modules/item-receipt-list.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmItemReceiptLineApi } from '#/api/mes/wm/itemreceipt/line';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemReceiptLinePage } from '#/api/mes/wm/itemreceipt/line';
+
+import ItemReceiptDetail from './item-receipt-detail.vue';
+
+const props = defineProps<{
+  vendorId: number;
+}>();
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: ItemReceiptDetail,
+  destroyOnClose: true,
+});
+
+/** 查看采购入库单详情 */
+function handleViewReceipt(row: MesWmItemReceiptLineApi.ItemReceiptLine) {
+  if (row.receiptId) {
+    detailModalApi.setData({ id: row.receiptId }).open();
+  }
+}
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'receiptCode',
+        title: '入库单编号',
+        minWidth: 160,
+        slots: { default: 'receiptCode' },
+      },
+      { field: 'purchaseOrderCode', title: '采购订单号', minWidth: 150 },
+      { field: 'itemCode', title: '物料编码', width: 140 },
+      { field: 'itemName', title: '物料名称', minWidth: 150 },
+      { field: 'specification', title: '规格型号', minWidth: 140 },
+      { field: 'unitMeasureName', title: '单位', width: 100 },
+      { field: 'receivedQuantity', title: '入库数量', width: 120 },
+    ],
+    height: 320,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getItemReceiptLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            vendorId: props.vendorId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmItemReceiptLineApi.ItemReceiptLine>,
+});
+</script>
+
+<template>
+  <DetailModal />
+  <Grid table-title="采购记录">
+    <template #receiptCode="{ row }">
+      <Button type="link" @click="handleViewReceipt(row)">
+        {{ row.receiptCode }}
+      </Button>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/components/index.ts b/apps/web-antd/src/views/mes/md/workstation/components/index.ts
new file mode 100644
index 000000000..b5855ec6f
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/components/index.ts
@@ -0,0 +1,3 @@
+export { default as MdWorkshopSelect } from './md-workshop-select.vue';
+export { default as MdWorkstationSelectDialog } from './md-workstation-select-dialog.vue';
+export { default as MdWorkstationSelect } from './md-workstation-select.vue';
diff --git a/apps/web-antd/src/views/mes/md/workstation/components/md-workshop-select.vue b/apps/web-antd/src/views/mes/md/workstation/components/md-workshop-select.vue
new file mode 100644
index 000000000..b76b9c92a
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/components/md-workshop-select.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { MesMdWorkshopApi } from '#/api/mes/md/workstation/workshop';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Select, Tag, Tooltip } from 'ant-design-vue';
+
+import { getWorkshopSimpleList } from '#/api/mes/md/workstation/workshop';
+
+defineOptions({ name: 'MdWorkshopSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择车间',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesMdWorkshopApi.Workshop | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const allList = ref<MesMdWorkshopApi.Workshop[]>([]);
+const selectedItem = ref<MesMdWorkshopApi.Workshop>();
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+function handleFilter(input: string, option: any) {
+  const keyword = input.toLowerCase();
+  const item = option?.item as MesMdWorkshopApi.Workshop | undefined;
+  return Boolean(
+    item?.name?.toLowerCase().includes(keyword) ||
+      item?.code?.toLowerCase().includes(keyword),
+  );
+}
+
+/** 根据当前值同步 tooltip 展示的车间详情 */
+function syncSelectedItem(value: number | undefined) {
+  selectedItem.value =
+    value === undefined ? undefined : allList.value.find((item) => item.id === value);
+}
+
+/** 除 v-model 外，额外抛出完整车间对象给业务表单使用 */
+function handleChange(value: any) {
+  const nextValue = value === undefined ? undefined : Number(value);
+  syncSelectedItem(nextValue);
+  emit('change', selectedItem.value);
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncSelectedItem(value);
+  },
+);
+
+onMounted(async () => {
+  allList.value = await getWorkshopSimpleList();
+  syncSelectedItem(props.modelValue);
+});
+</script>
+
+<template>
+  <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+    <template #title>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>面积：{{ selectedItem.area != null ? `${selectedItem.area} ㎡` : '-' }}</div>
+        <div>负责人：{{ selectedItem.chargeUserName || '-' }}</div>
+      </div>
+    </template>
+    <Select
+      v-bind="$attrs"
+      v-model:value="selectValue"
+      :allow-clear="allowClear"
+      :disabled="disabled"
+      :filter-option="handleFilter"
+      :placeholder="placeholder"
+      class="w-full"
+      show-search
+      @change="handleChange"
+    >
+      <Select.Option
+        v-for="item in allList"
+        :key="item.id"
+        :item="item"
+        :value="item.id"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ item.name }}</span>
+          <Tag v-if="item.code" color="default">{{ item.code }}</Tag>
+        </div>
+      </Select.Option>
+    </Select>
+  </Tooltip>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/components/md-workstation-select-dialog.vue b/apps/web-antd/src/views/mes/md/workstation/components/md-workstation-select-dialog.vue
new file mode 100644
index 000000000..182e47285
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/components/md-workstation-select-dialog.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { nextTick, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWorkstationPage } from '#/api/mes/md/workstation';
+
+import {
+  useWorkstationSelectGridColumns,
+  useWorkstationSelectGridFormSchema,
+} from '../data';
+
+const props = withDefaults(
+  defineProps<{
+    processId?: number;
+  }>(),
+  {
+    processId: undefined,
+  },
+);
+const emit = defineEmits<{
+  selected: [rows: MesMdWorkstationApi.Workstation[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
+const selectedRows = ref<MesMdWorkstationApi.Workstation[]>([]); // 已选工作站列表
+const preSelectedIds = ref<number[]>([]); // 预选工作站编号列表
+
+/** 单选模式下同步 VXE 勾选状态 */
+async function syncSingleSelection(row?: MesMdWorkstationApi.Workstation) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条 */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: MesMdWorkstationApi.Workstation[];
+  row?: MesMdWorkstationApi.Workstation;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 处理全选变化 */
+function handleCheckboxAll({ records }: { records: MesMdWorkstationApi.Workstation[] }) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 回显预选工作站 */
+function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesMdWorkstationApi.Workstation[];
+  for (const row of rows) {
+    if (row.id && preSelectedIds.value.includes(row.id)) {
+      gridApi.grid.setCheckboxRow(row, true);
+      if (!multiple.value) {
+        selectedRows.value = [row];
+      }
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useWorkstationSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useWorkstationSelectGridColumns(),
+    height: 520,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkstationPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            status: CommonStatusEnum.ENABLE,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationApi.Workstation>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+  if (props.processId) {
+    await gridApi.formApi.setFieldValue('processId', props.processId);
+  }
+}
+
+/** 打开工作站选择弹窗 */
+async function openModal(selectedIds?: number[], options?: { multiple?: boolean }) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  applyPreSelection();
+}
+
+/** 关闭工作站选择弹窗 */
+async function closeModal() {
+  open.value = false;
+  await resetQueryState();
+}
+
+/** 确认选择工作站 */
+function handleConfirm() {
+  if (selectedRows.value.length === 0) {
+    message.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? selectedRows.value : [selectedRows.value[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="工作站选择"
+    width="70%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <Grid table-title="工作站列表" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/components/md-workstation-select.vue b/apps/web-antd/src/views/mes/md/workstation/components/md-workstation-select.vue
new file mode 100644
index 000000000..a7d2886ed
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/components/md-workstation-select.vue
@@ -0,0 +1,143 @@
+<script lang="ts" setup>
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Input, Tooltip } from 'ant-design-vue';
+
+import { getWorkstation } from '#/api/mes/md/workstation';
+
+import MdWorkstationSelectDialog from './md-workstation-select-dialog.vue';
+
+defineOptions({ name: 'MdWorkstationSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+    processId?: number;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择工作站',
+    processId: undefined,
+  },
+);
+const emit = defineEmits<{
+  change: [item: MesMdWorkstationApi.Workstation | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdWorkstationSelectDialog>>(); // 工作站选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedItem = ref<MesMdWorkstationApi.Workstation>(); // 选中的工作站
+
+const displayLabel = computed(() => selectedItem.value?.name ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () => props.allowClear && !props.disabled && hovering.value && props.modelValue != null,
+);
+
+/** 根据工作站编号回显选择器 */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getWorkstation(id);
+  } catch (error) {
+    console.error('[MdWorkstationSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveItemById(value);
+  },
+  { immediate: true },
+);
+
+/** 清空已选工作站 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开工作站选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.ant-input-suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 回填选中的工作站 */
+function handleSelected(rows: MesMdWorkstationApi.Workstation[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+      <template #title>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编码：{{ selectedItem.code || '-' }}</div>
+          <div>名称：{{ selectedItem.name || '-' }}</div>
+          <div>所在车间：{{ selectedItem.workshopName || '-' }}</div>
+          <div>所属工序：{{ selectedItem.processName || '-' }}</div>
+          <div>地点：{{ selectedItem.address || '-' }}</div>
+        </div>
+      </template>
+      <Input
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="displayLabel"
+        readonly
+      >
+        <template #suffix>
+          <IconifyIcon
+            class="size-4"
+            :icon="showClear ? 'lucide:circle-x' : 'lucide:search'"
+          />
+        </template>
+      </Input>
+    </Tooltip>
+  </div>
+  <MdWorkstationSelectDialog
+    ref="dialogRef"
+    :process-id="processId"
+    @selected="handleSelected"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/data.ts b/apps/web-antd/src/views/mes/md/workstation/data.ts
new file mode 100644
index 000000000..74bdec3c6
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/data.ts
@@ -0,0 +1,359 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { h, markRaw } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getWarehouseSimpleList } from '#/api/mes/wm/warehouse';
+import { getWarehouseAreaSimpleList } from '#/api/mes/wm/warehouse/area';
+import { getWarehouseLocationSimpleList } from '#/api/mes/wm/warehouse/location';
+import { ProProcessSelect } from '#/views/mes/pro/process/components';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+import { MdWorkshopSelect } from './components';
+
+/** 新增/修改工作站的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '工作站编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工作站编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          Button,
+          {
+            type: 'default',
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_WORKSTATION_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '工作站名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工作站名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'workshopId',
+      label: '所在车间',
+      component: markRaw(MdWorkshopSelect),
+      componentProps: {
+        placeholder: '请选择车间',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'address',
+      label: '工作站地点',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工作站地点',
+      },
+    },
+    {
+      fieldName: 'processId',
+      label: '所属工序',
+      component: markRaw(ProProcessSelect),
+      componentProps: {
+        placeholder: '请选择所属工序',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        onChange: async () => {
+          await formApi?.setFieldValue('locationId', undefined);
+          await formApi?.setFieldValue('areaId', undefined);
+        },
+        placeholder: '请选择仓库',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'locationId',
+      label: '库区',
+      component: 'Select',
+      dependencies: {
+        triggerFields: ['warehouseId'],
+        disabled: (values) => !values.warehouseId,
+        async componentProps(values) {
+          const list = values.warehouseId
+            ? await getWarehouseLocationSimpleList(values.warehouseId)
+            : [];
+          return {
+            allowClear: true,
+            onChange: async () => {
+              await formApi?.setFieldValue('areaId', undefined);
+            },
+            options: list.map((item) => ({
+              label: item.name,
+              value: item.id,
+            })),
+            placeholder: '请选择库区',
+          };
+        },
+      },
+    },
+    {
+      fieldName: 'areaId',
+      label: '库位',
+      component: 'Select',
+      dependencies: {
+        triggerFields: ['locationId'],
+        disabled: (values) => !values.locationId,
+        async componentProps(values) {
+          const list = values.locationId
+            ? await getWarehouseAreaSimpleList(values.locationId)
+            : [];
+          return {
+            allowClear: true,
+            options: list.map((item) => ({
+              label: item.name,
+              value: item.id,
+            })),
+            placeholder: '请选择库位',
+          };
+        },
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工作站编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入工作站编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '工作站名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入工作站名称',
+      },
+    },
+    {
+      fieldName: 'workshopId',
+      label: '所在车间',
+      component: markRaw(MdWorkshopSelect),
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择车间',
+      },
+    },
+    {
+      fieldName: 'processId',
+      label: '所属工序',
+      component: markRaw(ProProcessSelect),
+      componentProps: {
+        allowClear: true,
+        placeholder: '请选择工序',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '工作站编码',
+      minWidth: 150,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '工作站名称',
+      minWidth: 150,
+    },
+    {
+      field: 'address',
+      title: '工作站地点',
+      minWidth: 150,
+    },
+    {
+      field: 'workshopName',
+      title: '所在车间',
+      width: 140,
+    },
+    {
+      field: 'processName',
+      title: '所属工序',
+      width: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 210,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 工作站选择弹窗的搜索表单 */
+export function useWorkstationSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工作站编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入工作站编码',
+      },
+    },
+    {
+      fieldName: 'processId',
+      label: '所属工序',
+      component: markRaw(ProProcessSelect),
+      componentProps: {
+        placeholder: '请选择工序',
+      },
+    },
+    {
+      fieldName: 'workshopId',
+      label: '所在车间',
+      component: markRaw(MdWorkshopSelect),
+      componentProps: {
+        placeholder: '请选择车间',
+      },
+    },
+  ];
+}
+
+/** 工作站选择弹窗的字段 */
+export function useWorkstationSelectGridColumns(): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'code',
+      title: '工作站编码',
+      width: 150,
+    },
+    {
+      field: 'name',
+      title: '工作站名称',
+      minWidth: 160,
+    },
+    {
+      field: 'address',
+      title: '工作站地点',
+      minWidth: 140,
+    },
+    {
+      field: 'workshopName',
+      title: '所在车间',
+      width: 130,
+    },
+    {
+      field: 'processName',
+      title: '所属工序',
+      width: 130,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 140,
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/md/workstation/index.vue b/apps/web-antd/src/views/mes/md/workstation/index.vue
new file mode 100644
index 000000000..4af64d70d
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/index.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWorkstation,
+  exportWorkstation,
+  getWorkstationPage,
+} from '#/api/mes/md/workstation';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工作站 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看工作站 */
+function handleDetail(row: MesMdWorkstationApi.Workstation) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑工作站 */
+function handleEdit(row: MesMdWorkstationApi.Workstation) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除工作站 */
+async function handleDelete(row: MesMdWorkstationApi.Workstation) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteWorkstation(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 查看工作站条码 */
+function handleBarcode(row: MesMdWorkstationApi.Workstation) {
+  if (!row.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    row.id,
+    BarcodeBizTypeEnum.WORKSTATION,
+    row.code,
+    row.name,
+  );
+}
+
+/** 导出工作站 */
+async function handleExport() {
+  const data = await exportWorkstation(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '工作站.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkstationPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationApi.Workstation>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】车间设置、工作站设置"
+        url="https://doc.iocoder.cn/mes/md/workshop/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <BarcodeDetail ref="barcodeDetailRef" />
+
+    <Grid table-title="工作站列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['工作站']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-workstation:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:md-workstation:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.code }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-workstation:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-workstation:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '条码',
+              type: 'link',
+              auth: ['mes:md-workstation:query'],
+              onClick: handleBarcode.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/modules/form.vue b/apps/web-antd/src/views/mes/md/workstation/modules/form.vue
new file mode 100644
index 000000000..b8983ebd3
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/modules/form.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, message, Tabs } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWorkstation,
+  getWorkstation,
+  updateWorkstation,
+} from '#/api/mes/md/workstation';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+import MachineList from './machine-list.vue';
+import ToolList from './tool-list.vue';
+import WorkerList from './worker-list.vue';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const subTabsName = ref('machine'); // 当前资源页签
+const formData = ref<MesMdWorkstationApi.Workstation>();
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  const titles: Record<FormMode, string> = {
+    create: '新增工作站',
+    update: '修改工作站',
+    detail: '查看工作站',
+  };
+  return titles[formMode.value];
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+/** 查看工作站条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.WORKSTATION,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdWorkstationApi.Workstation;
+    try {
+      if (formMode.value === 'create') {
+        const id = await createWorkstation(data);
+        formData.value = { ...data, id };
+        await formApi.setFieldValue('id', id);
+        formMode.value = 'update';
+      } else {
+        await updateWorkstation(data);
+        formData.value = { ...formData.value, ...data };
+      }
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    subTabsName.value = 'machine';
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getWorkstation(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <Tabs
+      v-if="formMode !== 'create' && formData?.id"
+      v-model:active-key="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <Tabs.TabPane key="machine" tab="设备资源">
+        <MachineList :form-type="formMode" :workstation-id="formData.id" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="tool" tab="工装夹具">
+        <ToolList :form-type="formMode" :workstation-id="formData.id" />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="worker" tab="人力资源">
+        <WorkerList :form-type="formMode" :workstation-id="formData.id" />
+      </Tabs.TabPane>
+    </Tabs>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button
+          v-if="isDetail && formData?.id"
+          type="primary"
+          @click="handleBarcode"
+        >
+          查看条码
+        </Button>
+      </div>
+    </template>
+    <BarcodeDetail ref="barcodeDetailRef" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/modules/machine-list.vue b/apps/web-antd/src/views/mes/md/workstation/modules/machine-list.vue
new file mode 100644
index 000000000..23b4b85f6
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/modules/machine-list.vue
@@ -0,0 +1,212 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationMachineApi } from '#/api/mes/md/workstation/machine';
+
+import { computed, ref, watch } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getMachinerySimpleList } from '#/api/mes/dv/machinery';
+import {
+  createWorkstationMachine,
+  deleteWorkstationMachine,
+  getWorkstationMachineList,
+} from '#/api/mes/md/workstation/machine';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'MesMdWorkstationMachineList' });
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    workstationId: number;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const formOpen = ref(false); // 设备资源表单是否打开
+const formLoading = ref(false); // 设备资源表单提交中
+const list = ref<MesMdWorkstationMachineApi.WorkstationMachine[]>([]); // 设备资源列表
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'workstationId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'machineryId',
+      label: '设备',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getMachinerySimpleList,
+        labelField: 'name',
+        placeholder: '请选择设备',
+        valueField: 'id',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: [
+      { field: 'machineryCode', title: '设备编码', width: 140 },
+      { field: 'machineryName', title: '设备名称', minWidth: 160 },
+      { field: 'quantity', title: '数量', width: 100 },
+      { field: 'remark', title: '备注', minWidth: 160 },
+      {
+        title: '操作',
+        width: 90,
+        fixed: 'right',
+        slots: { default: 'actions' },
+        visible: !isReadOnly.value,
+      },
+    ],
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationMachineApi.WorkstationMachine>,
+});
+
+/** 加载设备资源列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getWorkstationMachineList(props.workstationId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 打开设备资源表单 */
+async function openForm() {
+  formOpen.value = true;
+  await formApi.resetForm();
+  await formApi.setValues({
+    quantity: 1,
+    workstationId: props.workstationId,
+  });
+}
+
+/** 提交设备资源表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MesMdWorkstationMachineApi.WorkstationMachine;
+    await createWorkstationMachine(data);
+    formOpen.value = false;
+    message.success($t('ui.actionMessage.operationSuccess'));
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除设备资源 */
+async function handleDelete(id: number) {
+  await deleteWorkstationMachine(id);
+  message.success($t('ui.actionMessage.deleteSuccess', ['设备资源']));
+  await getList();
+}
+
+watch(
+  () => props.workstationId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="!isReadOnly" class="mb-3 flex items-center justify-start">
+      <TableAction
+        :actions="[
+          {
+            label: '添加设备',
+            type: 'primary',
+            onClick: openForm,
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              popConfirm: {
+                title: '确认删除该设备资源吗？',
+                confirm: handleDelete.bind(null, row.id!),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <Modal
+      v-model:open="formOpen"
+      title="添加设备"
+      width="520px"
+      :confirm-loading="formLoading"
+      @ok="submitForm"
+    >
+      <Form class="mx-4" />
+    </Modal>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/modules/tool-list.vue b/apps/web-antd/src/views/mes/md/workstation/modules/tool-list.vue
new file mode 100644
index 000000000..74f07d0fd
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/modules/tool-list.vue
@@ -0,0 +1,226 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationToolApi } from '#/api/mes/md/workstation/tool';
+
+import { computed, ref, watch } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createWorkstationTool,
+  deleteWorkstationTool,
+  getWorkstationToolList,
+  updateWorkstationTool,
+} from '#/api/mes/md/workstation/tool';
+import { getToolTypeSimpleList } from '#/api/mes/tm/tool/type';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'MesMdWorkstationToolList' });
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    workstationId: number;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const formOpen = ref(false); // 工装夹具表单是否打开
+const formLoading = ref(false); // 工装夹具表单提交中
+const formData = ref<MesMdWorkstationToolApi.WorkstationTool>();
+const list = ref<MesMdWorkstationToolApi.WorkstationTool[]>([]); // 工装夹具列表
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'id', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'workstationId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'toolTypeId',
+      label: '工具类型',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getToolTypeSimpleList,
+        labelField: 'name',
+        placeholder: '请选择工具类型',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => !!values.id,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: [
+      { field: 'toolTypeId', title: '工具类型编号', width: 140 },
+      { field: 'toolTypeName', title: '工具类型名称', minWidth: 160 },
+      { field: 'quantity', title: '数量', width: 100 },
+      { field: 'remark', title: '备注', minWidth: 160 },
+      {
+        title: '操作',
+        width: 130,
+        fixed: 'right',
+        slots: { default: 'actions' },
+        visible: !isReadOnly.value,
+      },
+    ],
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationToolApi.WorkstationTool>,
+});
+
+/** 加载工装夹具列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getWorkstationToolList(props.workstationId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 打开工装夹具表单 */
+async function openForm(row?: MesMdWorkstationToolApi.WorkstationTool) {
+  formOpen.value = true;
+  formData.value = row;
+  await formApi.resetForm();
+  await formApi.setValues({
+    quantity: 1,
+    workstationId: props.workstationId,
+    ...row,
+  });
+}
+
+/** 提交工装夹具表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MesMdWorkstationToolApi.WorkstationTool;
+    await (formData.value?.id ? updateWorkstationTool(data) : createWorkstationTool(data));
+    formOpen.value = false;
+    message.success($t('ui.actionMessage.operationSuccess'));
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除工装夹具 */
+async function handleDelete(id: number) {
+  await deleteWorkstationTool(id);
+  message.success($t('ui.actionMessage.deleteSuccess', ['工装夹具']));
+  await getList();
+}
+
+watch(
+  () => props.workstationId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="!isReadOnly" class="mb-3 flex items-center justify-start">
+      <TableAction
+        :actions="[
+          {
+            label: '添加工具',
+            type: 'primary',
+            onClick: openForm.bind(null, undefined),
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              onClick: openForm.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              popConfirm: {
+                title: '确认删除该工装夹具吗？',
+                confirm: handleDelete.bind(null, row.id!),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <Modal
+      v-model:open="formOpen"
+      :title="formData?.id ? '编辑工具' : '添加工具'"
+      width="520px"
+      :confirm-loading="formLoading"
+      @ok="submitForm"
+    >
+      <Form class="mx-4" />
+    </Modal>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/modules/worker-list.vue b/apps/web-antd/src/views/mes/md/workstation/modules/worker-list.vue
new file mode 100644
index 000000000..033c4c410
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/modules/worker-list.vue
@@ -0,0 +1,222 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationWorkerApi } from '#/api/mes/md/workstation/worker';
+
+import { computed, ref, watch } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createWorkstationWorker,
+  deleteWorkstationWorker,
+  getWorkstationWorkerList,
+  updateWorkstationWorker,
+} from '#/api/mes/md/workstation/worker';
+import { getSimplePostList } from '#/api/system/post';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'MesMdWorkstationWorkerList' });
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    workstationId: number;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const formOpen = ref(false); // 人力资源表单是否打开
+const formLoading = ref(false); // 人力资源表单提交中
+const formData = ref<MesMdWorkstationWorkerApi.WorkstationWorker>();
+const list = ref<MesMdWorkstationWorkerApi.WorkstationWorker[]>([]); // 人力资源列表
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'id', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'workstationId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'postId',
+      label: '岗位',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimplePostList,
+        labelField: 'name',
+        placeholder: '请选择岗位',
+        valueField: 'id',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 1,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: [
+      { field: 'postId', title: '岗位编号', width: 140 },
+      { field: 'postName', title: '岗位名称', minWidth: 160 },
+      { field: 'quantity', title: '数量', width: 100 },
+      { field: 'remark', title: '备注', minWidth: 160 },
+      {
+        title: '操作',
+        width: 130,
+        fixed: 'right',
+        slots: { default: 'actions' },
+        visible: !isReadOnly.value,
+      },
+    ],
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationWorkerApi.WorkstationWorker>,
+});
+
+/** 加载人力资源列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getWorkstationWorkerList(props.workstationId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 打开人力资源表单 */
+async function openForm(row?: MesMdWorkstationWorkerApi.WorkstationWorker) {
+  formOpen.value = true;
+  formData.value = row;
+  await formApi.resetForm();
+  await formApi.setValues({
+    quantity: 1,
+    workstationId: props.workstationId,
+    ...row,
+  });
+}
+
+/** 提交人力资源表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MesMdWorkstationWorkerApi.WorkstationWorker;
+    await (formData.value?.id ? updateWorkstationWorker(data) : createWorkstationWorker(data));
+    formOpen.value = false;
+    message.success($t('ui.actionMessage.operationSuccess'));
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除人力资源 */
+async function handleDelete(id: number) {
+  await deleteWorkstationWorker(id);
+  message.success($t('ui.actionMessage.deleteSuccess', ['人力资源']));
+  await getList();
+}
+
+watch(
+  () => props.workstationId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="!isReadOnly" class="mb-3 flex items-center justify-start">
+      <TableAction
+        :actions="[
+          {
+            label: '添加人员',
+            type: 'primary',
+            onClick: openForm.bind(null, undefined),
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              onClick: openForm.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              popConfirm: {
+                title: '确认删除该人力资源吗？',
+                confirm: handleDelete.bind(null, row.id!),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <Modal
+      v-model:open="formOpen"
+      :title="formData?.id ? '编辑人员' : '添加人员'"
+      width="520px"
+      :confirm-loading="formLoading"
+      @ok="submitForm"
+    >
+      <Form class="mx-4" />
+    </Modal>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/workshop/data.ts b/apps/web-antd/src/views/mes/md/workstation/workshop/data.ts
new file mode 100644
index 000000000..e0e03b258
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/workshop/data.ts
@@ -0,0 +1,195 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkshopApi } from '#/api/mes/md/workstation/workshop';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getSimpleUserList } from '#/api/system/user';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+/** 新增/修改车间的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '车间编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入车间编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          Button,
+          {
+            type: 'default',
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_WORKSHOP_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '车间名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入车间名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'area',
+      label: '面积',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'chargeUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择负责人',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '车间编码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入车间编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '车间名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入车间名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdWorkshopApi.Workshop>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '车间编码',
+      minWidth: 150,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '车间名称',
+      minWidth: 150,
+    },
+    {
+      field: 'area',
+      title: '面积',
+      width: 120,
+    },
+    {
+      field: 'chargeUserName',
+      title: '负责人',
+      width: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mes/md/workstation/workshop/index.vue b/apps/web-antd/src/views/mes/md/workstation/workshop/index.vue
new file mode 100644
index 000000000..9e12e4af5
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/workshop/index.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkshopApi } from '#/api/mes/md/workstation/workshop';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWorkshop,
+  getWorkshopPage,
+} from '#/api/mes/md/workstation/workshop';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建车间 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看车间 */
+function handleDetail(row: MesMdWorkshopApi.Workshop) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑车间 */
+function handleEdit(row: MesMdWorkshopApi.Workshop) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除车间 */
+async function handleDelete(row: MesMdWorkshopApi.Workshop) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteWorkshop(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 getWorkshopPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdWorkshopApi.Workshop>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】车间设置、工作站设置"
+        url="https://doc.iocoder.cn/mes/md/workshop/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="车间列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['车间']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-workshop:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <Button type="link" @click="handleDetail(row)">
+          {{ row.code }}
+        </Button>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-workshop:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-workshop:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/mes/md/workstation/workshop/modules/form.vue b/apps/web-antd/src/views/mes/md/workstation/workshop/modules/form.vue
new file mode 100644
index 000000000..b6c39452f
--- /dev/null
+++ b/apps/web-antd/src/views/mes/md/workstation/workshop/modules/form.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { MesMdWorkshopApi } from '#/api/mes/md/workstation/workshop';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWorkshop,
+  getWorkshop,
+  updateWorkshop,
+} from '#/api/mes/md/workstation/workshop';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const formData = ref<MesMdWorkshopApi.Workshop>();
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  const titles: Record<FormMode, string> = {
+    create: '新增车间',
+    update: '修改车间',
+    detail: '查看车间',
+  };
+  return titles[formMode.value];
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+/** 查看车间条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.WORKSHOP,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdWorkshopApi.Workshop;
+    try {
+      await (formData.value?.id ? updateWorkshop(data) : createWorkshop(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;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getWorkshop(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+    <template v-if="isDetail && formData?.id" #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <Button @click="handleBarcode">查看条码</Button>
+      </div>
+    </template>
+  </Modal>
+  <BarcodeDetail ref="barcodeDetailRef" />
+</template>
diff --git a/apps/web-antd/src/views/mes/pro/process/components/index.ts b/apps/web-antd/src/views/mes/pro/process/components/index.ts
new file mode 100644
index 000000000..e0cca7d22
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/process/components/index.ts
@@ -0,0 +1 @@
+export { default as ProProcessSelect } from './pro-process-select.vue';
diff --git a/apps/web-antd/src/views/mes/pro/process/components/pro-process-select.vue b/apps/web-antd/src/views/mes/pro/process/components/pro-process-select.vue
new file mode 100644
index 000000000..5f2d8e8b0
--- /dev/null
+++ b/apps/web-antd/src/views/mes/pro/process/components/pro-process-select.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { MesProProcessApi } from '#/api/mes/pro/process';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Select, Tag, Tooltip } from 'ant-design-vue';
+
+import { getProcessSimpleList } from '#/api/mes/pro/process';
+
+defineOptions({ name: 'ProProcessSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择工序',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesProProcessApi.Process | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const allList = ref<MesProProcessApi.Process[]>([]);
+const selectedItem = ref<MesProProcessApi.Process>();
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+function handleFilter(input: string, option: any) {
+  const keyword = input.toLowerCase();
+  const item = option?.item as MesProProcessApi.Process | undefined;
+  return Boolean(
+    item?.name?.toLowerCase().includes(keyword) ||
+      item?.code?.toLowerCase().includes(keyword),
+  );
+}
+
+/** 根据当前值同步 tooltip 展示的工序详情 */
+function syncSelectedItem(value: number | undefined) {
+  selectedItem.value =
+    value === undefined ? undefined : allList.value.find((item) => item.id === value);
+}
+
+/** 除 v-model 外，额外抛出完整工序对象给业务表单使用 */
+function handleChange(value: any) {
+  const nextValue = value === undefined ? undefined : Number(value);
+  syncSelectedItem(nextValue);
+  emit('change', selectedItem.value);
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncSelectedItem(value);
+  },
+);
+
+onMounted(async () => {
+  allList.value = await getProcessSimpleList();
+  syncSelectedItem(props.modelValue);
+});
+</script>
+
+<template>
+  <Tooltip :mouse-enter-delay="0.5" :open="selectedItem ? undefined : false">
+    <template #title>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>工艺要求：{{ selectedItem.attention || '-' }}</div>
+        <div>备注：{{ selectedItem.remark || '-' }}</div>
+      </div>
+    </template>
+    <Select
+      v-bind="$attrs"
+      v-model:value="selectValue"
+      :allow-clear="allowClear"
+      :disabled="disabled"
+      :filter-option="handleFilter"
+      :placeholder="placeholder"
+      class="w-full"
+      show-search
+      @change="handleChange"
+    >
+      <Select.Option
+        v-for="item in allList"
+        :key="item.id"
+        :item="item"
+        :value="item.id"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ item.name }}</span>
+          <Tag v-if="item.code" color="default">{{ item.code }}</Tag>
+        </div>
+      </Select.Option>
+    </Select>
+  </Tooltip>
+</template>
diff --git a/apps/web-antd/src/views/mes/utils/constants.ts b/apps/web-antd/src/views/mes/utils/constants.ts
new file mode 100644
index 000000000..bc7a2a5fe
--- /dev/null
+++ b/apps/web-antd/src/views/mes/utils/constants.ts
@@ -0,0 +1,67 @@
+/** MES 物料/产品标识枚举 */
+export const MesItemOrProductEnum = {
+  ITEM: {
+    label: '物料',
+    value: 'ITEM',
+  },
+  PRODUCT: {
+    label: '产品',
+    value: 'PRODUCT',
+  },
+} as const;
+
+/** MES 自动编码规则 Code 枚举 */
+export const MesAutoCodeRuleCode = {
+  MD_CLIENT_CODE: 'MD_CLIENT_CODE',
+  MD_ITEM_TYPE_CODE: 'MD_ITEM_TYPE_CODE',
+  MD_ITEM_CODE: 'MD_ITEM_CODE',
+  MD_VENDOR_CODE: 'MD_VENDOR_CODE',
+  MD_WORKSTATION_CODE: 'MD_WORKSTATION_CODE',
+  MD_WORKSHOP_CODE: 'MD_WORKSHOP_CODE',
+} as const;
+
+/** MES 编码规则分段类型枚举 */
+export const MesAutoCodePartTypeEnum = {
+  INPUT: 1,
+  DATE: 2,
+  FIX: 3,
+  SERIAL: 4,
+} as const;
+
+/** MES 条码格式枚举 */
+export enum BarcodeFormatEnum {
+  QR_CODE = 1,
+  EAN13 = 2,
+  CODE39 = 3,
+  UPC_A = 4,
+}
+
+/** 条码格式映射表（枚举值 -> JsBarcode 格式名） */
+export const BARCODE_FORMAT_MAP: Record<BarcodeFormatEnum, string> = {
+  [BarcodeFormatEnum.QR_CODE]: 'QR_CODE',
+  [BarcodeFormatEnum.EAN13]: 'EAN13',
+  [BarcodeFormatEnum.CODE39]: 'CODE39',
+  [BarcodeFormatEnum.UPC_A]: 'UPC_A',
+};
+
+/** MES 条码业务类型枚举 */
+export enum BarcodeBizTypeEnum {
+  WAREHOUSE = 102,
+  LOCATION = 103,
+  AREA = 104,
+  PACKAGE = 105,
+  STOCK = 106,
+  BATCH = 107,
+  PROCARD = 300,
+  WORKORDER = 301,
+  TRANSORDER = 302,
+  TASK = 303,
+  MACHINERY = 400,
+  TOOL = 500,
+  ITEM = 600,
+  VENDOR = 601,
+  WORKSTATION = 602,
+  WORKSHOP = 603,
+  USER = 604,
+  CLIENT = 605,
+}
diff --git a/apps/web-antd/src/views/mes/wm/barcode/components/barcode-detail.vue b/apps/web-antd/src/views/mes/wm/barcode/components/barcode-detail.vue
new file mode 100644
index 000000000..885756ac3
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/barcode/components/barcode-detail.vue
@@ -0,0 +1,174 @@
+<script lang="ts" setup>
+import type Barcode from './barcode.vue';
+
+import type { MesWmBarcodeApi } from '#/api/mes/wm/barcode';
+
+import { ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import {
+  Button,
+  Descriptions,
+  Empty,
+  message,
+  Modal,
+  Tooltip,
+} from 'ant-design-vue';
+
+import {
+  createBarcode,
+  getBarcodeByBusiness,
+} from '#/api/mes/wm/barcode';
+import { DictTag } from '#/components/dict-tag';
+
+import MesWmBarcode from './barcode.vue';
+
+defineOptions({ name: 'MesWmBarcodeDetail' });
+
+const open = ref(false);
+const barcodeRef = ref<InstanceType<typeof Barcode>>();
+const barcodeData = ref<Partial<MesWmBarcodeApi.Barcode>>({});
+
+function openModal(row: Partial<MesWmBarcodeApi.Barcode>) {
+  open.value = true;
+  barcodeData.value = { ...row };
+}
+
+async function openByBusiness(
+  bizId: number,
+  bizType: number,
+  bizCode?: string,
+  bizName?: string,
+) {
+  open.value = true;
+  try {
+    const data = await getBarcodeByBusiness(bizType, bizId);
+    barcodeData.value = data || { bizCode, bizId, bizName, bizType, content: '' };
+    if (!data) {
+      message.warning('未找到对应条码数据');
+    }
+  } catch {
+    barcodeData.value = { bizCode, bizId, bizName, bizType, content: '' };
+    message.error('加载条码数据失败');
+  }
+}
+
+defineExpose({ open: openModal, openByBusiness });
+
+function escapeHtml(value: string) {
+  return value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+
+function handlePrint() {
+  const base64 = barcodeRef.value?.getImageBase64();
+  if (!base64) {
+    message.warning('条码生成失败，无法打印');
+    return;
+  }
+  const printWindow = window.open('', '_blank');
+  if (!printWindow) {
+    message.error('无法打开打印窗口，请检查浏览器设置');
+    return;
+  }
+  printWindow.document.write(`<!DOCTYPE html>
+<html><head><meta charset="UTF-8"><title>打印条码</title>
+<style>*{margin:0;padding:0}body{font-family:Arial,sans-serif;padding:20px}.print-container{text-align:center}.barcode-img{max-width:100%;margin:20px 0}.info{margin-top:20px;text-align:left;font-size:12px}.info p{margin:5px 0}@media print{body{padding:0}.print-container{padding:20px}}</style>
+</head><body><div class="print-container">
+<img src="${base64}" class="barcode-img" alt="条码" />
+<div class="info">
+<p><strong>业务编码:</strong> ${escapeHtml(barcodeData.value.bizCode || '')}</p>
+<p><strong>业务名称:</strong> ${escapeHtml(barcodeData.value.bizName || '')}</p>
+<p><strong>条码内容:</strong> ${escapeHtml(barcodeData.value.content || '')}</p>
+</div></div></body></html>`);
+  printWindow.document.close();
+  printWindow.addEventListener('load', () => {
+    setTimeout(() => printWindow.print(), 500);
+  });
+}
+
+function handleDownload() {
+  const base64 = barcodeRef.value?.getImageBase64();
+  if (!base64) {
+    message.warning('条码生成失败，无法下载');
+    return;
+  }
+  const link = document.createElement('a');
+  link.href = base64;
+  link.download = `barcode_${barcodeData.value.bizCode || 'unknown'}_${Date.now()}.png`;
+  link.click();
+  message.success('下载成功');
+}
+
+async function handleGenerate() {
+  const { bizCode, bizId, bizName, bizType } = barcodeData.value;
+  if (!bizType || !bizId) {
+    message.warning('缺少业务类型或业务编号，无法生成条码');
+    return;
+  }
+  await createBarcode({ bizCode: bizCode || '', bizId, bizName: bizName || '', bizType });
+  message.success('条码生成成功');
+  const data = await getBarcodeByBusiness(bizType, bizId);
+  if (data) {
+    barcodeData.value = { ...data };
+  }
+}
+</script>
+
+<template>
+  <Modal v-model:open="open" title="查看条码" width="500px">
+    <div>
+      <div class="mb-5 flex min-h-50 items-center justify-center rounded bg-gray-100 p-5">
+        <div v-if="barcodeData.content" class="flex items-center justify-center">
+          <MesWmBarcode
+            ref="barcodeRef"
+            :content="barcodeData.content"
+            :format="barcodeData.format"
+            :height="150"
+            :width="400"
+          />
+        </div>
+        <Empty v-else description="暂无条码数据" />
+      </div>
+      <Descriptions :column="1" bordered>
+        <Descriptions.Item label="条码格式">
+          <DictTag
+            v-if="barcodeData.format"
+            :type="DICT_TYPE.MES_WM_BARCODE_FORMAT"
+            :value="barcodeData.format"
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="业务类型">
+          <DictTag
+            v-if="barcodeData.bizType"
+            :type="DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE"
+            :value="barcodeData.bizType"
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="条码内容">
+          <Tooltip :title="barcodeData.content">
+            <span class="inline-block max-w-75 overflow-hidden text-ellipsis whitespace-nowrap">
+              {{ barcodeData.content }}
+            </span>
+          </Tooltip>
+        </Descriptions.Item>
+        <Descriptions.Item label="业务编码">{{ barcodeData.bizCode || '-' }}</Descriptions.Item>
+        <Descriptions.Item label="业务名称">{{ barcodeData.bizName || '-' }}</Descriptions.Item>
+        <Descriptions.Item label="状态">
+          <DictTag
+            v-if="barcodeData.status !== undefined"
+            :type="DICT_TYPE.COMMON_STATUS"
+            :value="barcodeData.status"
+          />
+        </Descriptions.Item>
+        <Descriptions.Item label="创建时间">{{ barcodeData.createTime || '-' }}</Descriptions.Item>
+      </Descriptions>
+    </div>
+    <template #footer>
+      <Button v-if="!barcodeData.content" @click="handleGenerate">生成</Button>
+      <Button type="primary" @click="handlePrint">打印</Button>
+      <Button @click="handleDownload">下载</Button>
+      <Button @click="open = false">关闭</Button>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/barcode/components/barcode.vue b/apps/web-antd/src/views/mes/wm/barcode/components/barcode.vue
new file mode 100644
index 000000000..ab8f78649
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/barcode/components/barcode.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { BarcodeFormat } from '@vben/common-ui';
+
+import { computed, ref } from 'vue';
+
+import {
+  BarcodeFormatEnum,
+  Barcode as CommonBarcode,
+} from '@vben/common-ui';
+
+defineOptions({ name: 'MesWmBarcode' });
+
+const props = withDefaults(
+  defineProps<{
+    content?: string;
+    displayValue?: boolean;
+    format?: number;
+    height?: number;
+    width?: number;
+  }>(),
+  {
+    content: '',
+    displayValue: true,
+    format: BarcodeFormatEnum.QR_CODE,
+    height: 100,
+    width: 200,
+  },
+);
+
+const emit = defineEmits<{ done: [value: string] }>();
+
+const barcodeRef = ref<InstanceType<typeof CommonBarcode>>();
+const commonFormat = computed<BarcodeFormat>(
+  () => (props.format || BarcodeFormatEnum.QR_CODE) as BarcodeFormat,
+);
+
+function getImageBase64() {
+  return barcodeRef.value?.getImageBase64() || '';
+}
+
+defineExpose({ getImageBase64 });
+</script>
+
+<template>
+  <CommonBarcode
+    ref="barcodeRef"
+    :content="content"
+    :display-value="displayValue"
+    :format="commonFormat"
+    :height="height"
+    :width="width"
+    @done="emit('done', $event)"
+  />
+</template>
diff --git a/apps/web-antd/src/views/mes/wm/barcode/components/index.ts b/apps/web-antd/src/views/mes/wm/barcode/components/index.ts
new file mode 100644
index 000000000..87168be0a
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/barcode/components/index.ts
@@ -0,0 +1,3 @@
+export { default as BarcodeDetail } from './barcode-detail.vue';
+export { default as Barcode } from './barcode.vue';
+export { default as PrinterLabel } from './printer-label.vue';
diff --git a/apps/web-antd/src/views/mes/wm/barcode/components/printer-label.vue b/apps/web-antd/src/views/mes/wm/barcode/components/printer-label.vue
new file mode 100644
index 000000000..52218299c
--- /dev/null
+++ b/apps/web-antd/src/views/mes/wm/barcode/components/printer-label.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { Button, message } from 'ant-design-vue';
+
+defineOptions({ name: 'MesWmPrinterLabel' });
+
+withDefaults(
+  defineProps<{
+    bizCode?: string;
+    bizId?: number;
+    bizType?: string;
+    labelText?: string;
+  }>(),
+  {
+    bizCode: undefined,
+    bizId: undefined,
+    bizType: undefined,
+    labelText: '标签打印',
+  },
+);
+
+function handlePrint() {
+  message.warning('标签打印功能暂未实现，敬请期待');
+}
+</script>
+
+<template>
+  <Button type="link" @click="handlePrint">
+    {{ labelText }}
+  </Button>
+</template>
diff --git a/apps/web-antd/src/views/pay/app/data.ts b/apps/web-antd/src/views/pay/app/data.ts
index d46607ca3..da9ae43b9 100644
--- a/apps/web-antd/src/views/pay/app/data.ts
+++ b/apps/web-antd/src/views/pay/app/data.ts
@@ -291,6 +291,7 @@ export function useChannelFormSchema(formType: string = ''): VbenFormSchema[] {
       component: 'InputNumber',
       rules: 'required',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入渠道费率',
         addonAfter: '%',
       },
diff --git a/apps/web-antd/src/views/pay/demo/withdraw/data.ts b/apps/web-antd/src/views/pay/demo/withdraw/data.ts
index 8b2c1b547..82df4da31 100644
--- a/apps/web-antd/src/views/pay/demo/withdraw/data.ts
+++ b/apps/web-antd/src/views/pay/demo/withdraw/data.ts
@@ -29,6 +29,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       rules: 'required',
       componentProps: {
+        class: '!w-full',
         min: 1,
         precision: 2,
         step: 0.01,
diff --git a/apps/web-antd/src/views/pay/wallet/rechargePackage/data.ts b/apps/web-antd/src/views/pay/wallet/rechargePackage/data.ts
index 22010869e..c72590c07 100644
--- a/apps/web-antd/src/views/pay/wallet/rechargePackage/data.ts
+++ b/apps/web-antd/src/views/pay/wallet/rechargePackage/data.ts
@@ -33,6 +33,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       rules: z.number().min(0, '支付金额不能小于0'),
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         step: 0.01,
@@ -45,6 +46,7 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       rules: z.number().min(0, '赠送金额不能小于0'),
       componentProps: {
+        class: '!w-full',
         min: 0,
         precision: 2,
         step: 0.01,
diff --git a/apps/web-antd/src/views/system/dept/data.ts b/apps/web-antd/src/views/system/dept/data.ts
index f5421c429..d111330d0 100644
--- a/apps/web-antd/src/views/system/dept/data.ts
+++ b/apps/web-antd/src/views/system/dept/data.ts
@@ -62,6 +62,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入显示顺序',
       },
diff --git a/apps/web-antd/src/views/system/dict/data.ts b/apps/web-antd/src/views/system/dict/data.ts
index a2c6ede66..cfa455a7d 100644
--- a/apps/web-antd/src/views/system/dict/data.ts
+++ b/apps/web-antd/src/views/system/dict/data.ts
@@ -222,6 +222,7 @@ export function useDataFormSchema(): VbenFormSchema[] {
       label: '显示排序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入显示排序',
       },
       rules: 'required',
diff --git a/apps/web-antd/src/views/system/mail/account/data.ts b/apps/web-antd/src/views/system/mail/account/data.ts
index 2a00f39e4..d3f5470de 100644
--- a/apps/web-antd/src/views/system/mail/account/data.ts
+++ b/apps/web-antd/src/views/system/mail/account/data.ts
@@ -58,6 +58,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: 'SMTP 服务器端口',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入 SMTP 服务器端口',
         min: 0,
         max: 65_535,
diff --git a/apps/web-antd/src/views/system/menu/data.ts b/apps/web-antd/src/views/system/menu/data.ts
index d7cfa104e..c0c32c87f 100644
--- a/apps/web-antd/src/views/system/menu/data.ts
+++ b/apps/web-antd/src/views/system/menu/data.ts
@@ -201,6 +201,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入显示顺序',
       },
diff --git a/apps/web-antd/src/views/system/oauth2/client/data.ts b/apps/web-antd/src/views/system/oauth2/client/data.ts
index b5bc683c0..d5ad7078d 100644
--- a/apps/web-antd/src/views/system/oauth2/client/data.ts
+++ b/apps/web-antd/src/views/system/oauth2/client/data.ts
@@ -74,6 +74,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '访问令牌的有效期',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入访问令牌的有效期，单位：秒',
         min: 0,
       },
@@ -84,6 +85,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '刷新令牌的有效期',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入刷新令牌的有效期，单位：秒',
         min: 0,
       },
diff --git a/apps/web-antd/src/views/system/post/data.ts b/apps/web-antd/src/views/system/post/data.ts
index 2d1715389..3c66ebccf 100644
--- a/apps/web-antd/src/views/system/post/data.ts
+++ b/apps/web-antd/src/views/system/post/data.ts
@@ -40,6 +40,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入显示顺序',
       },
diff --git a/apps/web-antd/src/views/system/role/data.ts b/apps/web-antd/src/views/system/role/data.ts
index 48630c86e..b8efae8b3 100644
--- a/apps/web-antd/src/views/system/role/data.ts
+++ b/apps/web-antd/src/views/system/role/data.ts
@@ -45,6 +45,7 @@ export function useFormSchema(): VbenFormSchema[] {
       label: '显示顺序',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         min: 0,
         placeholder: '请输入显示顺序',
       },
diff --git a/apps/web-antd/src/views/system/tenant/data.ts b/apps/web-antd/src/views/system/tenant/data.ts
index 4fca673bc..b05e63803 100644
--- a/apps/web-antd/src/views/system/tenant/data.ts
+++ b/apps/web-antd/src/views/system/tenant/data.ts
@@ -91,6 +91,7 @@ export function useFormSchema(): VbenFormSchema[] {
       fieldName: 'accountCount',
       component: 'InputNumber',
       componentProps: {
+        class: '!w-full',
         placeholder: '请输入账号额度',
       },
       rules: 'required',
diff --git a/apps/web-antd/src/views/wms/home/index.vue b/apps/web-antd/src/views/wms/home/index.vue
new file mode 100644
index 000000000..2a5114961
--- /dev/null
+++ b/apps/web-antd/src/views/wms/home/index.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { Button, Card } from 'ant-design-vue';
+
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+
+import WmsHomeInventoryCharts from './modules/wms-home-inventory-charts.vue';
+import WmsHomeOrderSummaryCards from './modules/wms-home-order-summary-cards.vue';
+import WmsHomeOrderTrendChart from './modules/wms-home-order-trend-chart.vue';
+
+defineOptions({ name: 'WmsHome' });
+
+const loading = ref(false);
+const warehouseId = ref<number>();
+const statTime = ref(formatDateTime(new Date()));
+const orderSummaryCardsRef = ref<InstanceType<typeof WmsHomeOrderSummaryCards>>();
+const orderTrendChartRef = ref<InstanceType<typeof WmsHomeOrderTrendChart>>();
+const inventoryChartsRef = ref<InstanceType<typeof WmsHomeInventoryCharts>>();
+
+async function refresh() {
+  loading.value = true;
+  try {
+    await Promise.all([
+      orderSummaryCardsRef.value?.load(warehouseId.value),
+      orderTrendChartRef.value?.load(warehouseId.value),
+      inventoryChartsRef.value?.load(warehouseId.value),
+    ]);
+    statTime.value = formatDateTime(new Date());
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  refresh();
+});
+</script>
+
+<template>
+  <Page>
+    <template #doc>
+      <DocAlert title="WMS 手册（功能开启）" url="https://doc.iocoder.cn/wms/build/" />
+    </template>
+    <div class="flex flex-col gap-2">
+      <Card :body-style="{ padding: '16px' }">
+        <div class="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <div class="text-xl font-semibold">WMS 首页</div>
+            <div class="text-sm text-muted-foreground">单据工作台 / 库存概览</div>
+          </div>
+          <div class="flex items-center gap-2">
+            <WmsWarehouseSelect
+              v-model="warehouseId"
+              class="!w-[220px]"
+              placeholder="全部仓库"
+              @change="refresh"
+            />
+            <Button :loading="loading" @click="refresh">刷新</Button>
+          </div>
+        </div>
+      </Card>
+      <WmsHomeOrderSummaryCards ref="orderSummaryCardsRef" />
+      <WmsHomeOrderTrendChart ref="orderTrendChartRef" />
+      <WmsHomeInventoryCharts ref="inventoryChartsRef" />
+      <div class="text-center text-sm text-muted-foreground">
+        统计时间：{{ statTime }}
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/home/modules/wms-home-inventory-chart-options.ts b/apps/web-antd/src/views/wms/home/modules/wms-home-inventory-chart-options.ts
new file mode 100644
index 000000000..ce4ac4555
--- /dev/null
+++ b/apps/web-antd/src/views/wms/home/modules/wms-home-inventory-chart-options.ts
@@ -0,0 +1,120 @@
+import type { useEcharts } from '@vben/plugins/echarts';
+
+import type { WmsHomeStatisticsApi } from '#/api/wms/home';
+
+import { formatQuantity } from '#/views/wms/utils/format';
+
+type WmsHomeChartOption = Parameters<
+  ReturnType<typeof useEcharts>['renderEcharts']
+>[0];
+
+export interface InventoryChartItem {
+  name: string;
+  value: number;
+}
+
+/** 格式化库存数量展示文本 */
+export function formatQuantityText(value?: number) {
+  return formatQuantity(value || 0) || '0.00';
+}
+
+/** 转换库存排行接口数据为 ECharts 可消费的 name/value 数据 */
+export function buildInventoryChartItemList(
+  list: undefined | WmsHomeStatisticsApi.InventoryRankItem[],
+  emptyName: string,
+) {
+  return (list || [])
+    .map((item) => ({
+      name: item.name || emptyName,
+      value: Number(item.quantity || 0),
+    }))
+    .filter((item) => item.value > 0);
+}
+
+/** 格式化货物占比图例，补充当前商品库存占比 */
+function formatGoodsLegend(name: string, goodsShareList: InventoryChartItem[]) {
+  const total = goodsShareList.reduce((sum, item) => sum + item.value, 0);
+  const item = goodsShareList.find((goods) => goods.name === name);
+  if (!total || !item) {
+    return name;
+  }
+  return `${name}  ${((item.value / total) * 100).toFixed(1)}%`;
+}
+
+/** 货物占比图表配置 */
+export function getGoodsShareChartOptions(
+  goodsShareList: InventoryChartItem[],
+): WmsHomeChartOption {
+  return {
+    color: ['#2f7df6', '#18a058', '#f59e0b', '#7c3aed', '#14b8a6'],
+    legend: {
+      formatter: (name: string) => formatGoodsLegend(name, goodsShareList),
+      itemHeight: 10,
+      itemWidth: 10,
+      orient: 'vertical',
+      right: 10,
+      top: 'middle',
+      type: 'scroll',
+    },
+    series: [
+      {
+        avoidLabelOverlap: true,
+        center: ['34%', '52%'],
+        data: goodsShareList,
+        label: { show: false },
+        labelLine: { show: false },
+        name: '货物占比',
+        radius: ['48%', '70%'],
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      formatter: '{b}<br/>库存：{c} ({d}%)',
+      trigger: 'item',
+    },
+  };
+}
+
+/** 库存分布图表配置 */
+export function getWarehouseDistributionChartOptions(
+  warehouseDistributionList: InventoryChartItem[],
+): WmsHomeChartOption {
+  const sortedList = warehouseDistributionList.toReversed();
+  return {
+    color: ['#2f7df6'],
+    grid: { bottom: 16, containLabel: true, left: 24, right: 40, top: 12 },
+    series: [
+      {
+        barMaxWidth: 16,
+        data: sortedList.map((item) => item.value),
+        label: {
+          formatter: ({ value }) => formatQuantityText(Number(value || 0)),
+          position: 'right',
+          show: true,
+        },
+        name: '库存',
+        type: 'bar',
+      },
+    ],
+    tooltip: {
+      formatter: (params: unknown) => {
+        const item = (Array.isArray(params) ? params[0] : params) as {
+          name?: string;
+          value?: number;
+        };
+        return `${item.name || '-'}<br/>库存：${formatQuantityText(item.value)}`;
+      },
+      trigger: 'axis',
+    },
+    xAxis: {
+      splitLine: { lineStyle: { color: '#eef2f7' } },
+      type: 'value',
+    },
+    yAxis: {
+      axisLine: { show: false },
+      axisTick: { show: false },
+      data: sortedList.map((item) => item.name),
+      type: 'category',
+    },
+  };
+}
diff --git a/apps/web-antd/src/views/wms/home/modules/wms-home-inventory-charts.vue b/apps/web-antd/src/views/wms/home/modules/wms-home-inventory-charts.vue
new file mode 100644
index 000000000..42908dcda
--- /dev/null
+++ b/apps/web-antd/src/views/wms/home/modules/wms-home-inventory-charts.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { nextTick, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Card } from 'ant-design-vue';
+
+import { getInventorySummary } from '#/api/wms/home';
+
+import {
+  buildInventoryChartItemList,
+  formatQuantityText,
+  getGoodsShareChartOptions,
+  getWarehouseDistributionChartOptions,
+  type InventoryChartItem,
+} from './wms-home-inventory-chart-options';
+
+defineOptions({ name: 'WmsHomeInventoryCharts' });
+
+const GOODS_SHARE_LIMIT = 5;
+const WAREHOUSE_DISTRIBUTION_LIMIT = 8;
+
+const loading = ref(false);
+const totalQuantity = ref(0);
+const goodsShareList = ref<InventoryChartItem[]>([]);
+const warehouseDistributionList = ref<InventoryChartItem[]>([]);
+const goodsShareChartRef = ref<EchartsUIType>();
+const warehouseDistributionChartRef = ref<EchartsUIType>();
+const { renderEcharts: renderGoodsShareEcharts } = useEcharts(goodsShareChartRef);
+const { renderEcharts: renderWarehouseDistributionEcharts } = useEcharts(
+  warehouseDistributionChartRef,
+);
+
+/** 使用最新库存汇总数据渲染首页库存图表 */
+async function renderCharts() {
+  await nextTick();
+  await Promise.all([
+    renderGoodsShareEcharts(getGoodsShareChartOptions(goodsShareList.value)),
+    renderWarehouseDistributionEcharts(
+      getWarehouseDistributionChartOptions(warehouseDistributionList.value),
+    ),
+  ]);
+}
+
+/** 加载指定仓库的库存汇总和排行数据 */
+async function load(warehouseId?: number) {
+  loading.value = true;
+  try {
+    const data = await getInventorySummary({
+      ...(warehouseId ? { warehouseId } : {}),
+      goodsLimit: GOODS_SHARE_LIMIT,
+      warehouseLimit: WAREHOUSE_DISTRIBUTION_LIMIT,
+    });
+    totalQuantity.value = Number(data.totalQuantity || 0);
+    goodsShareList.value = buildInventoryChartItemList(data.goodsShareList, '未命名商品');
+    warehouseDistributionList.value = buildInventoryChartItemList(
+      data.warehouseDistributionList,
+      '未指定仓库',
+    );
+    await renderCharts();
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({ load });
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
+    <Card :body-style="{ padding: '12px 16px 16px' }">
+      <div class="mb-3">
+        <div class="font-semibold">货物占比</div>
+        <div class="text-sm text-muted-foreground">按商品库存数量汇总 Top 5</div>
+      </div>
+      <div class="relative min-h-[300px]">
+        <EchartsUI ref="goodsShareChartRef" height="300px" />
+        <div
+          v-if="loading"
+          class="absolute inset-0 flex items-center justify-center bg-card/70 text-sm text-muted-foreground"
+        >
+          加载中
+        </div>
+      </div>
+    </Card>
+    <Card :body-style="{ padding: '12px 16px 16px' }">
+      <div class="mb-3 flex justify-between">
+        <div>
+          <div class="font-semibold">库存分布</div>
+          <div class="text-sm text-muted-foreground">按仓库库存数量汇总</div>
+        </div>
+        <span class="font-semibold">总库存 {{ formatQuantityText(totalQuantity) }}</span>
+      </div>
+      <div class="relative min-h-[300px]">
+        <EchartsUI ref="warehouseDistributionChartRef" height="300px" />
+        <div
+          v-if="loading"
+          class="absolute inset-0 flex items-center justify-center bg-card/70 text-sm text-muted-foreground"
+        >
+          加载中
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/wms/home/modules/wms-home-order-summary-cards.vue b/apps/web-antd/src/views/wms/home/modules/wms-home-order-summary-cards.vue
new file mode 100644
index 000000000..d42a8a843
--- /dev/null
+++ b/apps/web-antd/src/views/wms/home/modules/wms-home-order-summary-cards.vue
@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import type { WmsHomeStatisticsApi } from '#/api/wms/home';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
+import { Button, Card, message } from 'ant-design-vue';
+
+import { getOrderSummary } from '#/api/wms/home';
+import { OrderStatusEnum, OrderTypeEnum } from '#/views/wms/utils/constants';
+
+defineOptions({ name: 'WmsHomeOrderSummaryCards' });
+
+interface StatusItem {
+  color: string;
+  label: string;
+  value: number;
+}
+
+interface OrderSummaryItem {
+  color: string;
+  routeName: string;
+  statuses?: WmsHomeStatisticsApi.OrderStatus[];
+  title: string;
+  total?: number;
+  type: number;
+}
+
+const router = useRouter();
+
+const orderDefinitions: OrderSummaryItem[] = [
+  {
+    color: '#2f7df6',
+    routeName: 'WmsReceiptOrder',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.RECEIPT).replace(/单$/, ''),
+    type: OrderTypeEnum.RECEIPT,
+  },
+  {
+    color: '#18a058',
+    routeName: 'WmsShipmentOrder',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.SHIPMENT).replace(/单$/, ''),
+    type: OrderTypeEnum.SHIPMENT,
+  },
+  {
+    color: '#f59e0b',
+    routeName: 'WmsMovementOrder',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.MOVEMENT).replace(/单$/, ''),
+    type: OrderTypeEnum.MOVEMENT,
+  },
+  {
+    color: '#7c3aed',
+    routeName: 'WmsCheckOrder',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.CHECK).replace(/单$/, ''),
+    type: OrderTypeEnum.CHECK,
+  },
+];
+
+const statusList: StatusItem[] = [
+  {
+    color: '#409eff',
+    label: getDictLabel(DICT_TYPE.WMS_ORDER_STATUS, OrderStatusEnum.PREPARE) || '草稿',
+    value: OrderStatusEnum.PREPARE,
+  },
+  {
+    color: '#67c23a',
+    label: getDictLabel(DICT_TYPE.WMS_ORDER_STATUS, OrderStatusEnum.FINISHED) || '已完成',
+    value: OrderStatusEnum.FINISHED,
+  },
+  {
+    color: '#909399',
+    label: getDictLabel(DICT_TYPE.WMS_ORDER_STATUS, OrderStatusEnum.CANCELED) || '已作废',
+    value: OrderStatusEnum.CANCELED,
+  },
+];
+
+const loading = ref(false);
+const summaryList = ref<OrderSummaryItem[]>(orderDefinitions);
+
+function getStatusCount(item: OrderSummaryItem, status: number) {
+  return item.statuses?.find((row) => row.status === status)?.count ?? 0;
+}
+
+function getStatusPercent(item: OrderSummaryItem, status: number) {
+  const total = item.total ?? 0;
+  if (total <= 0) {
+    return '0%';
+  }
+  return `${(getStatusCount(item, status) / total) * 100}%`;
+}
+
+async function handleNavigate(routeName: string) {
+  try {
+    await router.push({ name: routeName });
+  } catch {
+    message.warning('当前菜单尚未加载，请从左侧菜单进入对应页面');
+  }
+}
+
+async function load(warehouseId?: number) {
+  loading.value = true;
+  try {
+    const data = await getOrderSummary(warehouseId ? { warehouseId } : {});
+    summaryList.value = orderDefinitions.map((definition) => {
+      const summary = data.find((item) => item.type === definition.type);
+      return {
+        ...definition,
+        statuses: summary?.statuses,
+        total: summary?.total,
+      };
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({ load });
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-4 max-xl:grid-cols-2 max-sm:grid-cols-1">
+    <Card
+      v-for="item in summaryList"
+      :key="item.type"
+      :body-style="{ padding: '12px 16px 16px' }"
+      class="h-full shadow-sm"
+      :loading="loading"
+      :style="{ borderTop: `3px solid ${item.color}` }"
+    >
+      <div class="mb-3 flex items-center justify-between">
+        <div class="flex items-center gap-2 font-semibold">
+          <span class="h-2 w-2 rounded-full" :style="{ backgroundColor: item.color }"></span>
+          {{ item.title }}
+        </div>
+        <Button size="small" type="link" @click="handleNavigate(item.routeName)">
+          查看
+        </Button>
+      </div>
+      <div class="mb-1 flex items-baseline gap-2">
+        <span class="text-muted-foreground">合计</span>
+        <span class="text-3xl font-bold leading-9">
+          {{ item.total?.toLocaleString() ?? 0 }}
+        </span>
+        <span class="text-muted-foreground">单</span>
+      </div>
+      <div class="my-3 flex h-2 overflow-hidden rounded-full bg-muted">
+        <span
+          v-for="status in statusList"
+          :key="status.value"
+          class="h-full"
+          :style="{
+            backgroundColor: status.color,
+            width: getStatusPercent(item, status.value),
+          }"
+        ></span>
+      </div>
+      <div class="grid grid-cols-3 gap-2 text-sm">
+        <div v-for="status in statusList" :key="status.value">
+          <div class="truncate text-muted-foreground">{{ status.label }}</div>
+          <div class="font-semibold" :style="{ color: status.color }">
+            {{ getStatusCount(item, status.value).toLocaleString() }}
+          </div>
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/wms/home/modules/wms-home-order-trend-chart-options.ts b/apps/web-antd/src/views/wms/home/modules/wms-home-order-trend-chart-options.ts
new file mode 100644
index 000000000..c08df0b9f
--- /dev/null
+++ b/apps/web-antd/src/views/wms/home/modules/wms-home-order-trend-chart-options.ts
@@ -0,0 +1,88 @@
+import type { useEcharts } from '@vben/plugins/echarts';
+
+import type { WmsHomeStatisticsApi } from '#/api/wms/home';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate } from '@vben/utils';
+
+import { OrderTypeEnum } from '#/views/wms/utils/constants';
+
+type WmsHomeChartOption = Parameters<
+  ReturnType<typeof useEcharts>['renderEcharts']
+>[0];
+
+interface OrderDefinition {
+  color: string;
+  title: string;
+  trendField: keyof Pick<
+    WmsHomeStatisticsApi.OrderTrend,
+    'checkCount' | 'movementCount' | 'receiptCount' | 'shipmentCount'
+  >;
+  type: number;
+}
+
+const orderDefinitions: OrderDefinition[] = [
+  {
+    color: '#2f7df6',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.RECEIPT).replace(/单$/, ''),
+    trendField: 'receiptCount',
+    type: OrderTypeEnum.RECEIPT,
+  },
+  {
+    color: '#18a058',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.SHIPMENT).replace(/单$/, ''),
+    trendField: 'shipmentCount',
+    type: OrderTypeEnum.SHIPMENT,
+  },
+  {
+    color: '#f59e0b',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.MOVEMENT).replace(/单$/, ''),
+    trendField: 'movementCount',
+    type: OrderTypeEnum.MOVEMENT,
+  },
+  {
+    color: '#7c3aed',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.CHECK).replace(/单$/, ''),
+    trendField: 'checkCount',
+    type: OrderTypeEnum.CHECK,
+  },
+];
+
+/** 格式化趋势接口返回的时间戳为图表横轴日期 */
+function formatTrendTime(time: number | string) {
+  const date = new Date(time);
+  return Number.isNaN(date.getTime()) ? `${time}` : (formatDate(date, 'MM-DD') as string);
+}
+
+/** 单据趋势图表配置 */
+export function getOrderTrendChartOptions(
+  list: WmsHomeStatisticsApi.OrderTrend[],
+): WmsHomeChartOption {
+  const labels = list.map((item) => formatTrendTime(item.time));
+  return {
+    color: orderDefinitions.map((item) => item.color),
+    grid: { bottom: 24, containLabel: true, left: 28, right: 24, top: 48 },
+    legend: { itemHeight: 10, itemWidth: 10, top: 6 },
+    series: orderDefinitions.map((item) => ({
+      barMaxWidth: 18,
+      data: list.map((row) => Number(row[item.trendField] || 0)),
+      emphasis: { focus: 'series' },
+      name: item.title,
+      type: 'bar',
+    })),
+    tooltip: { axisPointer: { type: 'shadow' }, trigger: 'axis' },
+    xAxis: {
+      axisLine: { lineStyle: { color: '#dcdfe6' } },
+      axisTick: { show: false },
+      data: labels,
+      type: 'category',
+    },
+    yAxis: {
+      minInterval: 1,
+      name: '单据数',
+      splitLine: { lineStyle: { color: '#eef2f7' } },
+      type: 'value',
+    },
+  };
+}
diff --git a/apps/web-antd/src/views/wms/home/modules/wms-home-order-trend-chart.vue b/apps/web-antd/src/views/wms/home/modules/wms-home-order-trend-chart.vue
new file mode 100644
index 000000000..e33e89f52
--- /dev/null
+++ b/apps/web-antd/src/views/wms/home/modules/wms-home-order-trend-chart.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { nextTick, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { Card, Segmented } from 'ant-design-vue';
+
+import { getOrderTrend, type WmsHomeStatisticsApi } from '#/api/wms/home';
+
+import { getOrderTrendChartOptions } from './wms-home-order-trend-chart-options';
+
+defineOptions({ name: 'WmsHomeOrderTrendChart' });
+
+const loading = ref(false);
+const warehouseId = ref<number>();
+const trendDays = ref(7);
+const trendList = ref<WmsHomeStatisticsApi.OrderTrend[]>([]);
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const trendDayOptions = [
+  { label: '近7天', value: 7 },
+  { label: '近30天', value: 30 },
+];
+
+/** 使用最新趋势数据渲染单据趋势图 */
+async function renderChart() {
+  await nextTick();
+  await renderEcharts(getOrderTrendChartOptions(trendList.value));
+}
+
+/** 加载指定仓库的单据趋势数据 */
+async function load(selectedWarehouseId?: number) {
+  warehouseId.value = selectedWarehouseId;
+  loading.value = true;
+  try {
+    trendList.value = await getOrderTrend(
+      trendDays.value,
+      selectedWarehouseId ? { warehouseId: selectedWarehouseId } : {},
+    );
+    await renderChart();
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 切换趋势统计时间范围并刷新图表 */
+async function handleTrendDaysChange(value: number | string) {
+  trendDays.value = Number(value);
+  await load(warehouseId.value);
+}
+
+defineExpose({ load });
+</script>
+
+<template>
+  <Card :body-style="{ padding: '12px 16px 16px' }">
+    <div class="mb-3 flex items-center justify-between">
+      <div>
+        <div class="font-semibold">单据趋势</div>
+        <div class="text-sm text-muted-foreground">入库、出库、移库、盘库单据数量</div>
+      </div>
+      <Segmented
+        :options="trendDayOptions"
+        :value="trendDays"
+        @change="handleTrendDaysChange"
+      />
+    </div>
+    <div class="relative min-h-[330px]">
+      <EchartsUI ref="chartRef" height="330px" />
+      <div
+        v-if="loading"
+        class="absolute inset-0 flex items-center justify-center bg-card/70 text-sm text-muted-foreground"
+      >
+        加载中
+      </div>
+    </div>
+  </Card>
+</template>
diff --git a/apps/web-antd/src/views/wms/inventory/components/index.ts b/apps/web-antd/src/views/wms/inventory/components/index.ts
new file mode 100644
index 000000000..31806be2a
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsInventorySelect } from './inventory-select.vue';
diff --git a/apps/web-antd/src/views/wms/inventory/components/inventory-select.vue b/apps/web-antd/src/views/wms/inventory/components/inventory-select.vue
new file mode 100644
index 000000000..1b9f0e9b2
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/components/inventory-select.vue
@@ -0,0 +1,208 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+
+import { nextTick, ref } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryPage } from '#/api/wms/inventory';
+import { formatQuantity } from '#/views/wms/utils/format';
+
+import {
+  useInventorySelectGridColumns,
+  useInventorySelectGridFormSchema,
+} from '../index/data';
+
+export interface InventorySelectRow extends WmsInventoryApi.Inventory {
+  availableQuantity?: number;
+  price?: number;
+}
+
+defineOptions({ name: 'WmsInventorySelect' });
+
+const props = defineProps<{
+  warehouseId?: number;
+}>();
+
+const emit = defineEmits<{
+  change: [list: InventorySelectRow[]];
+}>();
+
+const open = ref(false);
+const disabledInventoryKeys = ref<Set<string>>(new Set());
+
+interface CellDblclickEvent {
+  row: InventorySelectRow;
+}
+
+/** 获得行唯一标识 */
+function getRowKey(row: InventorySelectRow) {
+  return `inventory-${row.id || `${row.skuId}-${row.warehouseId}`}`;
+}
+
+/** 获得业务库存标识 */
+function getInventoryKey(row: Pick<InventorySelectRow, 'skuId' | 'warehouseId'>) {
+  return row.skuId && row.warehouseId
+    ? `${row.skuId}-${row.warehouseId}`
+    : undefined;
+}
+
+/** 判断库存是否可选 */
+function isInventorySelectable(row: InventorySelectRow) {
+  const key = getInventoryKey(row);
+  return !key || !disabledInventoryKeys.value.has(key);
+}
+
+/** 合并当前页和跨页保留的选择记录 */
+function mergeSelectedRows(rows: InventorySelectRow[]) {
+  const selectedMap = new Map<string, InventorySelectRow>();
+  rows
+    .filter((row) => isInventorySelectable(row))
+    .forEach((row) => selectedMap.set(getRowKey(row), row));
+  return [...selectedMap.values()];
+}
+
+/** 获取 VXE 当前页和 reserve 中的完整选择 */
+function getSelectedRows() {
+  const records =
+    (gridApi.grid.getCheckboxRecords?.() as InventorySelectRow[] | undefined) ||
+    [];
+  const reserves =
+    (gridApi.grid.getCheckboxReserveRecords?.() as
+      | InventorySelectRow[]
+      | undefined) || [];
+  return mergeSelectedRows([...reserves, ...records]);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useInventorySelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useInventorySelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    showOverflow: false,
+    checkboxConfig: {
+      checkMethod: ({ row }: { row: InventorySelectRow }) =>
+        isInventorySelectable(row),
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getInventoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: 'warehouse',
+            warehouseId: props.warehouseId,
+            onlyPositiveQuantity: true,
+            ...formValues,
+          });
+          return {
+            ...data,
+            list: (data.list || []).map((inventory) => ({
+              ...inventory,
+              availableQuantity: inventory.quantity,
+            })),
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InventorySelectRow>,
+  gridEvents: {
+    cellDblclick: handleCellDblclick,
+  },
+});
+
+async function openModal(selectedInventoryKeys: string[] = []) {
+  if (!props.warehouseId) {
+    message.warning('请先选择仓库');
+    return;
+  }
+  open.value = true;
+  disabledInventoryKeys.value = new Set(selectedInventoryKeys);
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.formApi.resetForm();
+  await gridApi.query();
+}
+
+async function closeModal() {
+  open.value = false;
+  disabledInventoryKeys.value = new Set();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+}
+
+function confirmSelectedRows(rows: InventorySelectRow[]) {
+  const selectedList = mergeSelectedRows(rows);
+  if (selectedList.length === 0) {
+    message.warning('请选择库存');
+    return;
+  }
+  emit('change', selectedList);
+  closeModal();
+}
+
+function handleConfirm() {
+  confirmSelectedRows(getSelectedRows());
+}
+
+/** 双击行直接选择并确认 */
+function handleCellDblclick({ row }: CellDblclickEvent) {
+  if (!isInventorySelectable(row)) {
+    message.warning('该库存已添加');
+    return;
+  }
+  confirmSelectedRows(mergeSelectedRows([...getSelectedRows(), row]));
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="库存选择"
+    width="80%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <Grid table-title="库存列表">
+      <template #itemInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div>{{ row.itemName || '-' }}</div>
+          <div v-if="row.itemCode" class="text-xs text-gray-500">
+            商品编号：{{ row.itemCode }}
+          </div>
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div>{{ row.skuName || '-' }}</div>
+          <div v-if="row.skuCode" class="text-xs text-gray-500">
+            规格编号：{{ row.skuCode }}
+          </div>
+        </div>
+      </template>
+      <template #availableQuantity="{ row }">
+        {{ formatQuantity(row.availableQuantity) }}
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/inventory/history/data.ts b/apps/web-antd/src/views/wms/inventory/history/data.ts
new file mode 100644
index 000000000..02c33d7fb
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/history/data.ts
@@ -0,0 +1,159 @@
+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 { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'orderType',
+      label: '单据类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_TYPE, 'number'),
+        placeholder: '请选择单据类型',
+      },
+    },
+    {
+      fieldName: 'orderNo',
+      label: '单据号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入单据号',
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        placeholder: '请选择仓库',
+        showSearch: true,
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '操作时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 库存流水列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'orderNo',
+      title: '单据号',
+      width: 180,
+      fixed: 'left',
+    },
+    {
+      field: 'orderType',
+      title: '单据类型',
+      width: 110,
+      fixed: 'left',
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_TYPE },
+      },
+    },
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 220,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      minWidth: 160,
+    },
+    {
+      field: 'beforeQuantity',
+      title: '操作前',
+      align: 'right',
+      minWidth: 110,
+      slots: { default: 'beforeQuantity' },
+    },
+    {
+      field: 'afterQuantity',
+      title: '操作后',
+      align: 'right',
+      minWidth: 110,
+      slots: { default: 'afterQuantity' },
+    },
+    {
+      field: 'quantityPrice',
+      title: '数量/金额(元)',
+      minWidth: 180,
+      slots: { default: 'quantityPrice' },
+    },
+    {
+      field: 'createTime',
+      title: '操作时间',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/inventory/history/index.vue b/apps/web-antd/src/views/wms/inventory/history/index.vue
new file mode 100644
index 000000000..bdb911c05
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/history/index.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryHistoryApi } from '#/api/wms/inventory/history';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryHistoryPage } from '#/api/wms/inventory/history';
+import { formatPrice, formatQuantity } from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'WmsInventoryHistory' });
+
+function hasValue(value: unknown) {
+  return value !== undefined && value !== null;
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    showOverflow: false,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getInventoryHistoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsInventoryHistoryApi.InventoryHistory>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】库存记录、流水、统计"
+        url="https://doc.iocoder.cn/wms/inventory/"
+      />
+    </template>
+
+    <Grid table-title="库存流水">
+      <template #itemInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div class="text-sm">{{ row.itemName || '-' }}</div>
+          <div v-if="row.itemCode" class="break-all text-xs text-gray-500">
+            商品编号：{{ row.itemCode }}
+          </div>
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div class="text-sm">{{ row.skuName || '-' }}</div>
+          <div v-if="row.skuCode" class="break-all text-xs text-gray-500">
+            规格编号：{{ row.skuCode }}
+          </div>
+        </div>
+      </template>
+      <template #beforeQuantity="{ row }">
+        {{ formatQuantity(row.beforeQuantity) || '-' }}
+      </template>
+      <template #afterQuantity="{ row }">
+        {{ formatQuantity(row.afterQuantity) || '-' }}
+      </template>
+      <template #quantityPrice="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div class="flex justify-between gap-2">
+            <span class="shrink-0">数量：</span>
+            <span>{{ formatQuantity(row.quantity) }}</span>
+          </div>
+          <div v-if="hasValue(row.price)" class="flex justify-between gap-2">
+            <span class="shrink-0">单价：</span>
+            <span>{{ formatPrice(row.price) }}</span>
+          </div>
+          <div
+            v-if="hasValue(row.totalPrice)"
+            class="flex justify-between gap-2"
+          >
+            <span class="shrink-0">金额：</span>
+            <span>{{ formatPrice(row.totalPrice) }}</span>
+          </div>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/inventory/index/data.ts b/apps/web-antd/src/views/wms/inventory/index/data.ts
new file mode 100644
index 000000000..40cfa3acf
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/index/data.ts
@@ -0,0 +1,249 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
+
+export const INVENTORY_DIMENSION = {
+  ITEM: 'item',
+  WAREHOUSE: 'warehouse',
+} as const;
+
+export type InventoryDimension =
+  (typeof INVENTORY_DIMENSION)[keyof typeof INVENTORY_DIMENSION];
+
+const dimensionOptions = [
+  { label: '仓库', value: INVENTORY_DIMENSION.WAREHOUSE },
+  { label: '商品', value: INVENTORY_DIMENSION.ITEM },
+];
+
+interface DimensionChangeEvent {
+  target?: {
+    value?: InventoryDimension;
+  };
+}
+
+type DimensionChangeHandler = (
+  dimension: InventoryDimension,
+) => Promise<void> | void;
+
+/** 统一解析 antd 事件对象和原始维度值 */
+function getDimensionChangeValue(
+  value?: DimensionChangeEvent | InventoryDimension,
+): InventoryDimension {
+  if (
+    value === INVENTORY_DIMENSION.ITEM ||
+    value === INVENTORY_DIMENSION.WAREHOUSE
+  ) {
+    return value;
+  }
+  return value?.target?.value ?? INVENTORY_DIMENSION.WAREHOUSE;
+}
+
+/** 搜索表单 */
+export function useGridFormSchema(
+  onDimensionChange: DimensionChangeHandler,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '统计维度',
+      component: 'RadioGroup',
+      defaultValue: INVENTORY_DIMENSION.WAREHOUSE,
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: dimensionOptions,
+        onChange: (value: DimensionChangeEvent | InventoryDimension) => {
+          void onDimensionChange(getDimensionChangeValue(value));
+        },
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getWarehouseSimpleList,
+        labelField: 'name',
+        placeholder: '请选择仓库',
+        showSearch: true,
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+  ];
+}
+
+const warehouseDimensionColumns: VxeTableGridOptions['columns'] = [
+  {
+    field: 'warehouseId',
+    title: '仓库',
+    minWidth: 160,
+    slots: { default: 'warehouseName' },
+  },
+  {
+    field: 'warehouseItemId',
+    title: '商品信息',
+    minWidth: 240,
+    slots: { default: 'itemInfo' },
+  },
+  {
+    field: 'skuId',
+    title: '规格信息',
+    minWidth: 220,
+    slots: { default: 'skuInfo' },
+  },
+  {
+    field: 'quantity',
+    title: '库存',
+    align: 'right',
+    minWidth: 130,
+    slots: { default: 'quantity' },
+  },
+];
+
+const itemDimensionColumns: VxeTableGridOptions['columns'] = [
+  {
+    field: 'itemId',
+    title: '商品信息',
+    minWidth: 240,
+    slots: { default: 'itemInfo' },
+  },
+  {
+    field: 'skuId',
+    title: '规格信息',
+    minWidth: 220,
+    slots: { default: 'skuInfo' },
+  },
+  {
+    field: 'skuWarehouseId',
+    title: '仓库',
+    minWidth: 160,
+    slots: { default: 'warehouseName' },
+  },
+  {
+    field: 'quantity',
+    title: '库存',
+    align: 'right',
+    minWidth: 130,
+    slots: { default: 'quantity' },
+  },
+];
+
+/** 库存统计列表字段 */
+export function useGridColumns(
+  dimension: InventoryDimension = INVENTORY_DIMENSION.WAREHOUSE,
+): VxeTableGridOptions['columns'] {
+  return dimension === INVENTORY_DIMENSION.ITEM
+    ? itemDimensionColumns
+    : warehouseDimensionColumns;
+}
+
+/** 库存选择弹窗搜索表单 */
+export function useInventorySelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+  ];
+}
+
+/** 库存选择弹窗列表字段 */
+export function useInventorySelectGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 220,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      minWidth: 180,
+    },
+    {
+      field: 'availableQuantity',
+      title: '可用库存',
+      align: 'right',
+      width: 130,
+      slots: { default: 'availableQuantity' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/inventory/index/index.vue b/apps/web-antd/src/views/wms/inventory/index/index.vue
new file mode 100644
index 000000000..64d6fcf14
--- /dev/null
+++ b/apps/web-antd/src/views/wms/inventory/index/index.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { Checkbox } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryPage } from '#/api/wms/inventory';
+import { formatQuantity } from '#/views/wms/utils/format';
+
+import {
+  INVENTORY_DIMENSION,
+  type InventoryDimension,
+  useGridColumns,
+  useGridFormSchema,
+} from './data';
+
+interface InventoryRow extends WmsInventoryApi.Inventory {
+  skuWarehouseId?: string;
+  warehouseItemId?: string;
+}
+
+defineOptions({ name: 'WmsInventory' });
+
+const currentRows = ref<InventoryRow[]>([]);
+const currentDimension = ref<InventoryDimension>(INVENTORY_DIMENSION.WAREHOUSE);
+const filterZero = ref(false);
+
+/** 补充合并单元格需要的复合 key */
+function buildRows(items: WmsInventoryApi.Inventory[]) {
+  return items.map((item) => ({
+    ...item,
+    skuWarehouseId: `${item.skuId || 0}-${item.warehouseId || 0}`,
+    warehouseItemId: `${item.warehouseId || 0}-${item.itemId || 0}`,
+  }));
+}
+
+/** 切换统计维度时同步表单、表头和查询参数 */
+async function handleDimensionChange(dimension: InventoryDimension) {
+  // spanMethod 依赖当前维度判断合并字段，先更新本地状态。
+  currentDimension.value = dimension;
+  // 表头结构需要立即跟随维度切换，避免请求完成前仍显示旧列。
+  await gridApi.grid.reloadColumn(useGridColumns(dimension) || []);
+  // VXE proxy 查询会合并最近提交值，这里显式写入新 type 并刷新提交快照。
+  await gridApi.formApi.setFieldValue('type', dimension);
+  const formValues = await gridApi.formApi.getValues();
+  gridApi.formApi.setLatestSubmissionValues(formValues);
+  // 带上最新表单值重新加载，确保本次请求使用切换后的统计维度。
+  await gridApi.reload(formValues);
+}
+
+/** 切换零库存过滤时按当前搜索条件重新查询 */
+function handleFilterZeroChange() {
+  gridApi.query();
+}
+
+/** 按列字段读取行值，兼容 VXE 的 field/property */
+function getRowPropertyValue(row: InventoryRow | undefined, property: string) {
+  return row?.[property as keyof InventoryRow];
+}
+
+/** 根据统计维度返回需要合并单元格的字段 */
+function getRowSpanProperties() {
+  if (currentDimension.value === INVENTORY_DIMENSION.ITEM) {
+    return ['itemId', 'skuId', 'skuWarehouseId'];
+  }
+  return ['warehouseId', 'warehouseItemId'];
+}
+
+/** 合并库存统计的维度单元格 */
+function handleSpanMethod({
+  column,
+  rowIndex,
+}: {
+  column: { field?: string; property?: string };
+  rowIndex: number;
+}) {
+  const property = column.field || column.property;
+  if (!property || !getRowSpanProperties().includes(property)) {
+    return { colspan: 1, rowspan: 1 };
+  }
+  const row = currentRows.value[rowIndex];
+  if (
+    rowIndex > 0 &&
+    getRowPropertyValue(currentRows.value[rowIndex - 1], property) ===
+      getRowPropertyValue(row, property)
+  ) {
+    return { colspan: 0, rowspan: 0 };
+  }
+  let rowspan = 1;
+  for (let index = rowIndex + 1; index < currentRows.value.length; index += 1) {
+    if (
+      getRowPropertyValue(currentRows.value[index], property) !==
+      getRowPropertyValue(row, property)
+    ) {
+      break;
+    }
+    rowspan += 1;
+  }
+  return { colspan: 1, rowspan };
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(handleDimensionChange),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 维度切换会通过 reload(formValues) 传入新 type，刷新场景用当前维度兜底。
+          const nextDimension = (formValues.type ||
+            currentDimension.value ||
+            INVENTORY_DIMENSION.WAREHOUSE) as InventoryDimension;
+          currentDimension.value = nextDimension;
+          await gridApi.grid.reloadColumn(useGridColumns(nextDimension) || []);
+
+          // type 是后端聚合维度参数，普通搜索参数里移除，避免重复透传旧值。
+          const queryParams = { ...formValues };
+          Reflect.deleteProperty(queryParams, 'type');
+          const data = await getInventoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...queryParams,
+            type: nextDimension,
+            onlyPositiveQuantity: filterZero.value ? true : undefined,
+          });
+
+          // spanMethod 依赖当前页数据计算 rowspan，需要保存构造后的行。
+          currentRows.value = buildRows(data.list || []);
+          return {
+            ...data,
+            list: currentRows.value,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    spanMethod: handleSpanMethod,
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InventoryRow>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】库存记录、流水、统计"
+        url="https://doc.iocoder.cn/wms/inventory/"
+      />
+    </template>
+
+    <Grid table-title="库存统计">
+      <template #toolbar-tools>
+        <Checkbox v-model:checked="filterZero" @change="handleFilterZeroChange">
+          过滤掉库存为 0 的商品
+        </Checkbox>
+      </template>
+      <template #warehouseName="{ row }">
+        {{ row.warehouseName || '-' }}
+      </template>
+      <template #itemInfo="{ row }">
+        <div>{{ row.itemName || '-' }}</div>
+        <div v-if="row.itemCode" class="text-xs text-gray-500">
+          商品编号：{{ row.itemCode }}
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div>{{ row.skuName || '-' }}</div>
+        <div v-if="row.skuCode" class="text-xs text-gray-500">
+          规格编号：{{ row.skuCode }}
+        </div>
+      </template>
+      <template #quantity="{ row }">
+        {{ formatQuantity(row.quantity) }}
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/brand/components/index.ts b/apps/web-antd/src/views/wms/md/item/brand/components/index.ts
new file mode 100644
index 000000000..98419d2fc
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/brand/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsItemBrandSelect } from './item-brand-select.vue';
diff --git a/apps/web-antd/src/views/wms/md/item/brand/components/item-brand-select.vue b/apps/web-antd/src/views/wms/md/item/brand/components/item-brand-select.vue
new file mode 100644
index 000000000..65b240468
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/brand/components/item-brand-select.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import type { WmsItemBrandApi } from '#/api/wms/md/item/brand';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { Select } from 'ant-design-vue';
+
+import { getItemBrandSimpleList } from '#/api/wms/md/item/brand';
+
+defineOptions({ name: 'WmsItemBrandSelect', inheritAttrs: false });
+
+withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择商品品牌',
+  },
+);
+
+const emit = defineEmits<{
+  change: [brand: undefined | WmsItemBrandApi.ItemBrand];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const loading = ref(false);
+const brandList = ref<WmsItemBrandApi.ItemBrand[]>([]);
+
+const options = computed(() =>
+  brandList.value
+    .filter((brand) => brand.id !== undefined)
+    .map((brand) => ({
+      label: brand.name,
+      value: brand.id,
+    })),
+);
+
+/** 选中变化 */
+function handleChange(value: SelectValue) {
+  const brandId = typeof value === 'number' ? value : undefined;
+  emit('update:modelValue', brandId);
+  emit(
+    'change',
+    brandList.value.find((brand) => brand.id === brandId),
+  );
+}
+
+/** 查询商品品牌精简列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    brandList.value = await getItemBrandSimpleList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Select
+    v-bind="$attrs"
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    :loading="loading"
+    :options="options"
+    :placeholder="placeholder"
+    :value="modelValue"
+    class="w-full"
+    option-filter-prop="label"
+    show-search
+    @change="handleChange"
+  />
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/brand/data.ts b/apps/web-antd/src/views/wms/md/item/brand/data.ts
new file mode 100644
index 000000000..5865a1215
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/brand/data.ts
@@ -0,0 +1,107 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+/** 新增/修改商品品牌的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '品牌编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入品牌编号',
+      },
+      rules: z.string().min(1, '品牌编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          Button,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('B'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '品牌名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 30,
+        placeholder: '请输入品牌名称',
+      },
+      rules: z.string().min(1, '品牌名称不能为空').max(30),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '品牌编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入品牌编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '品牌名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入品牌名称',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '品牌编号',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '品牌名称',
+      minWidth: 160,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/md/item/brand/index.vue b/apps/web-antd/src/views/wms/md/item/brand/index.vue
new file mode 100644
index 000000000..867620990
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/brand/index.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemBrandApi } from '#/api/wms/md/item/brand';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteItemBrand,
+  exportItemBrand,
+  getItemBrandPage,
+} from '#/api/wms/md/item/brand';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'WmsItemBrand' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建商品品牌 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑商品品牌 */
+function handleEdit(row: WmsItemBrandApi.ItemBrand) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除商品品牌 */
+async function handleDelete(row: WmsItemBrandApi.ItemBrand) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteItemBrand(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出商品品牌 */
+async function handleExport() {
+  const data = await exportItemBrand(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '商品品牌.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemBrandPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsItemBrandApi.ItemBrand>,
+});
+</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: ['wms:item-brand:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:item-brand:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['wms:item-brand:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['wms:item-brand:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/brand/modules/form.vue b/apps/web-antd/src/views/wms/md/item/brand/modules/form.vue
new file mode 100644
index 000000000..8b69b50be
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/brand/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { WmsItemBrandApi } from '#/api/wms/md/item/brand';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createItemBrand,
+  getItemBrand,
+  updateItemBrand,
+} from '#/api/wms/md/item/brand';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'WmsItemBrandForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsItemBrandApi.ItemBrand>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['商品品牌'])
+    : $t('ui.actionTitle.create', ['商品品牌']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = (await formApi.getValues()) as WmsItemBrandApi.ItemBrand;
+    try {
+      await (formData.value?.id
+        ? updateItemBrand(data)
+        : createItemBrand(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;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<WmsItemBrandApi.ItemBrand>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getItemBrand(data.id);
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/category/components/index.ts b/apps/web-antd/src/views/wms/md/item/category/components/index.ts
new file mode 100644
index 000000000..13cd052aa
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/category/components/index.ts
@@ -0,0 +1,2 @@
+export { default as WmsItemCategorySelect } from './item-category-select.vue';
+export { default as WmsItemCategoryTree } from './item-category-tree.vue';
diff --git a/apps/web-antd/src/views/wms/md/item/category/components/item-category-select.vue b/apps/web-antd/src/views/wms/md/item/category/components/item-category-select.vue
new file mode 100644
index 000000000..3a14eb00f
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/category/components/item-category-select.vue
@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { TreeSelect } from 'ant-design-vue';
+
+import { getItemCategorySimpleList } from '#/api/wms/md/item/category';
+
+/** WMS 商品分类选择器 */
+defineOptions({ name: 'WmsItemCategorySelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择商品分类',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const categoryTree = ref<WmsItemCategoryApi.ItemCategory[]>([]);
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+/** 查询商品分类树 */
+async function getCategoryTree() {
+  const data = await getItemCategorySimpleList();
+  categoryTree.value = handleTree(data, 'id', 'parentId');
+}
+
+onMounted(() => {
+  getCategoryTree();
+});
+</script>
+
+<template>
+  <TreeSelect
+    v-bind="$attrs"
+    v-model:value="selectValue"
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    :field-names="{ children: 'children', label: 'name', value: 'id' }"
+    :placeholder="placeholder"
+    :tree-data="categoryTree"
+    class="w-full"
+    tree-default-expand-all
+    tree-node-filter-prop="name"
+    show-search
+  />
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/category/components/item-category-tree.vue b/apps/web-antd/src/views/wms/md/item/category/components/item-category-tree.vue
new file mode 100644
index 000000000..50635802a
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/category/components/item-category-tree.vue
@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { Input, Spin, Tree } from 'ant-design-vue';
+
+import { getItemCategorySimpleList } from '#/api/wms/md/item/category';
+
+/** WMS 商品分类树组件 */
+defineOptions({ name: 'WmsItemCategoryTree' });
+
+withDefaults(
+  defineProps<{
+    filterPlaceholder?: string;
+  }>(),
+  {
+    filterPlaceholder: '请输入分类名称',
+  },
+);
+
+const emit = defineEmits<{
+  nodeClick: [categoryId: number | undefined];
+}>();
+
+const loading = ref(false);
+const filterText = ref('');
+const currentNodeId = ref<number>();
+const selectedKeys = ref<number[]>([]);
+const categoryList = ref<WmsItemCategoryApi.ItemCategory[]>([]);
+const categoryTree = ref<any[]>([]);
+
+/** 加载分类树 */
+async function loadTree() {
+  loading.value = true;
+  try {
+    const data = await getItemCategorySimpleList();
+    categoryList.value = data;
+    categoryTree.value = handleTree(data, 'id', 'parentId');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 处理搜索逻辑 */
+function handleSearch(value: string) {
+  filterText.value = value;
+  const filteredList = value
+    ? categoryList.value.filter((item) => item.name?.includes(value))
+    : categoryList.value;
+  categoryTree.value = handleTree(filteredList, 'id', 'parentId');
+}
+
+/** 处理节点点击：支持点击同一节点取消选中 */
+function handleSelect(_selectedKeys: any[], info: any) {
+  const row = info.node.dataRef as WmsItemCategoryApi.ItemCategory;
+  if (currentNodeId.value === row.id) {
+    currentNodeId.value = undefined;
+    selectedKeys.value = [];
+    emit('nodeClick', undefined);
+    return;
+  }
+  currentNodeId.value = row.id;
+  selectedKeys.value = row.id === undefined ? [] : [row.id];
+  emit('nodeClick', row.id);
+}
+
+/** 清空选中状态 */
+function reset() {
+  currentNodeId.value = undefined;
+  filterText.value = '';
+  selectedKeys.value = [];
+  categoryTree.value = handleTree(categoryList.value, 'id', 'parentId');
+}
+
+/** 设置当前选中分类 */
+function setCurrent(categoryId: number) {
+  currentNodeId.value = categoryId;
+  selectedKeys.value = [categoryId];
+}
+
+watch(filterText, (value) => {
+  handleSearch(value);
+});
+
+defineExpose({ reset, setCurrent });
+
+onMounted(() => {
+  loadTree();
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <Input
+      v-model:value="filterText"
+      :placeholder="filterPlaceholder"
+      allow-clear
+      class="w-full"
+    >
+      <template #prefix>
+        <IconifyIcon class="size-4" icon="lucide:search" />
+      </template>
+    </Input>
+    <Spin :spinning="loading" wrapper-class-name="w-full">
+      <Tree
+        v-if="categoryTree.length > 0"
+        :default-expand-all="true"
+        :field-names="{ title: 'name', key: 'id', children: 'children' }"
+        :selected-keys="selectedKeys"
+        :tree-data="categoryTree"
+        class="pt-2"
+        @select="handleSelect"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无数据
+      </div>
+    </Spin>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/category/data.ts b/apps/web-antd/src/views/wms/md/item/category/data.ts
new file mode 100644
index 000000000..12169a006
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/category/data.ts
@@ -0,0 +1,187 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { getItemCategorySimpleList } from '#/api/wms/md/item/category';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+/** 新增/修改商品分类的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        allowClear: true,
+        api: async () => {
+          const data = await getItemCategorySimpleList();
+          return [
+            {
+              id: 0,
+              name: '顶级分类',
+              children: handleTree(data),
+            },
+          ];
+        },
+        childrenField: 'children',
+        labelField: 'name',
+        placeholder: '请选择上级分类',
+        treeDefaultExpandAll: true,
+        treeNodeFilterProp: 'name',
+        valueField: 'id',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'code',
+      label: '分类编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入分类编号',
+      },
+      rules: z.string().min(1, '分类编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          Button,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('C'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示排序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        optionType: 'button',
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '分类编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入分类编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入分类名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '分类状态',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择分类状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<WmsItemCategoryApi.ItemCategory>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      minWidth: 200,
+      align: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'code',
+      title: '分类编号',
+      width: 160,
+      align: 'center',
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 120,
+      align: 'center',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/md/item/category/index.vue b/apps/web-antd/src/views/wms/md/item/category/index.vue
new file mode 100644
index 000000000..a2f60f6e4
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/category/index.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteItemCategory,
+  getItemCategoryList,
+} from '#/api/wms/md/item/category';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'WmsItemCategory' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级分类 */
+function handleAppend(row: WmsItemCategoryApi.ItemCategory) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: WmsItemCategoryApi.ItemCategory) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: WmsItemCategoryApi.ItemCategory) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteItemCategory(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,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getItemCategoryList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<WmsItemCategoryApi.ItemCategory>,
+});
+</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: ['wms:item-category:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'link',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:item-category:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['wms:item-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['wms:item-category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/category/modules/form.vue b/apps/web-antd/src/views/wms/md/item/category/modules/form.vue
new file mode 100644
index 000000000..ba32854e5
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/category/modules/form.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createItemCategory,
+  getItemCategory,
+  updateItemCategory,
+} from '#/api/wms/md/item/category';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'WmsItemCategoryForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsItemCategoryApi.ItemCategory>();
+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: 80,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as WmsItemCategoryApi.ItemCategory;
+    try {
+      await (formData.value?.id
+        ? updateItemCategory(data)
+        : createItemCategory(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;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<WmsItemCategoryApi.ItemCategory>();
+    if (!data || !data.id) {
+      formData.value = data;
+      await formApi.setValues({
+        sort: 0,
+        status: CommonStatusEnum.ENABLE,
+        ...data,
+      });
+      return;
+    }
+    // 加载数据
+    modalApi.lock();
+    try {
+      formData.value = await getItemCategory(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/4">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/data.ts b/apps/web-antd/src/views/wms/md/item/data.ts
new file mode 100644
index 000000000..9b4a4e555
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/data.ts
@@ -0,0 +1,260 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h, markRaw } from 'vue';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { getItemBrandSimpleList } from '#/api/wms/md/item/brand';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+import { WmsItemBrandSelect } from './brand/components';
+import { WmsItemCategorySelect } from './category/components';
+
+/** 新增/修改商品的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 60,
+        placeholder: '请输入商品名称',
+      },
+      rules: z.string().min(1, '商品名称不能为空').max(60),
+    },
+    {
+      fieldName: 'categoryId',
+      label: '商品分类',
+      component: markRaw(WmsItemCategorySelect),
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入商品编号',
+      },
+      rules: z.string().min(1, '商品编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          Button,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('I'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'unit',
+      label: '商品单位',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入单位',
+      },
+    },
+    {
+      fieldName: 'brandId',
+      label: '商品品牌',
+      component: markRaw(WmsItemBrandSelect),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'brandId',
+      label: '商品品牌',
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getItemBrandSimpleList,
+        labelField: 'name',
+        placeholder: '请选择商品品牌',
+        showSearch: true,
+        valueField: 'id',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 180,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'priceInfo',
+      title: '金额(元)',
+      minWidth: 140,
+      slots: { default: 'priceInfo' },
+    },
+    {
+      field: 'weightInfo',
+      title: '重量(kg)',
+      minWidth: 140,
+      slots: { default: 'weightInfo' },
+    },
+    {
+      field: 'dimensionInfo',
+      title: '长宽高(cm)',
+      minWidth: 180,
+      align: 'right',
+      slots: { default: 'dimensionInfo' },
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** SKU 选择弹窗搜索表单 */
+export function useSkuSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+    {
+      fieldName: 'barCode',
+      label: '条码',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入条码',
+      },
+    },
+  ];
+}
+
+/** SKU 选择弹窗列表字段 */
+export function useSkuSelectGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 220,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'priceInfo',
+      title: '金额(元)',
+      minWidth: 160,
+      slots: { default: 'priceInfo' },
+    },
+    {
+      field: 'weightInfo',
+      title: '重量(kg)',
+      minWidth: 160,
+      slots: { default: 'weightInfo' },
+    },
+    {
+      field: 'dimensionInfo',
+      title: '长宽高(cm)',
+      minWidth: 180,
+      align: 'right',
+      slots: { default: 'dimensionInfo' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/md/item/index.vue b/apps/web-antd/src/views/wms/md/item/index.vue
new file mode 100644
index 000000000..a9dde980e
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/index.vue
@@ -0,0 +1,283 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemApi } from '#/api/wms/md/item';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { Card, message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteItem, exportItem, getItemPage } from '#/api/wms/md/item';
+import { $t } from '#/locales';
+import { WmsItemCategoryTree } from '#/views/wms/md/item/category/components';
+import {
+  formatDimensionText,
+  formatPrice,
+  formatWeight,
+} from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+type ItemSkuRow = WmsItemSkuApi.ItemSku;
+
+defineOptions({ name: 'WmsItem' });
+
+const currentRows = ref<ItemSkuRow[]>([]);
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 展开商品 SKU 列表 */
+function buildItemSkuRows(items: WmsItemApi.Item[]) {
+  return items.flatMap((item) => {
+    const skus = item.skus?.length ? item.skus : [{}];
+    return skus.map((sku) => ({
+      ...sku,
+      itemId: item.id,
+      itemCode: item.code,
+      itemName: item.name,
+      categoryId: item.categoryId,
+      categoryName: item.categoryName,
+      unit: item.unit,
+      brandId: item.brandId,
+      brandName: item.brandName,
+    }));
+  });
+}
+
+/** 创建商品 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑商品 */
+function handleEdit(row: ItemSkuRow) {
+  formModalApi.setData({ id: row.itemId }).open();
+}
+
+/** 删除商品 */
+async function handleDelete(row: ItemSkuRow) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.itemName]),
+    duration: 0,
+  });
+  try {
+    await deleteItem(row.itemId!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出商品 */
+async function handleExport() {
+  const data = await exportItem(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '商品.xls', source: data });
+}
+
+/** 分类树点击 */
+const searchCategoryId = ref<number | undefined>(undefined);
+function handleCategoryNodeClick(categoryId: number | undefined) {
+  searchCategoryId.value = categoryId;
+  handleRefresh();
+}
+
+/** 合并商品维度的重复单元格 */
+function handleSpanMethod({
+  column,
+  rowIndex,
+}: {
+  column: { field?: string; property?: string };
+  rowIndex: number;
+}) {
+  const field = column.field || column.property;
+  if (!['actions', 'itemInfo'].includes(field || '')) {
+    return { colspan: 1, rowspan: 1 };
+  }
+  const row = currentRows.value[rowIndex];
+  if (
+    rowIndex > 0 &&
+    currentRows.value[rowIndex - 1]?.itemId === row?.itemId
+  ) {
+    return { colspan: 0, rowspan: 0 };
+  }
+  let rowspan = 1;
+  for (let index = rowIndex + 1; index < currentRows.value.length; index += 1) {
+    if (currentRows.value[index]?.itemId !== row?.itemId) {
+      break;
+    }
+    rowspan += 1;
+  }
+  return { colspan: 1, rowspan };
+}
+
+function hasValue(value: unknown) {
+  return value !== undefined && value !== null;
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    showOverflow: false,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getItemPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            categoryId: searchCategoryId.value,
+          });
+          currentRows.value = buildItemSkuRows(data.list || []);
+          return {
+            ...data,
+            list: currentRows.value,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    spanMethod: handleSpanMethod,
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ItemSkuRow>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】商品、SKU、分类、品牌"
+        url="https://doc.iocoder.cn/wms/md/item/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+
+    <div class="flex h-full w-full">
+      <Card class="mr-4 h-full w-1/6">
+        <WmsItemCategoryTree @node-click="handleCategoryNodeClick" />
+      </Card>
+      <div class="w-5/6">
+        <Grid table-title="商品列表">
+          <template #toolbar-tools>
+            <TableAction
+              :actions="[
+                {
+                  label: $t('ui.actionTitle.create', ['商品']),
+                  type: 'primary',
+                  icon: ACTION_ICON.ADD,
+                  auth: ['wms:item:create'],
+                  onClick: handleCreate,
+                },
+                {
+                  label: $t('ui.actionTitle.export'),
+                  type: 'primary',
+                  icon: ACTION_ICON.DOWNLOAD,
+                  auth: ['wms:item:export'],
+                  onClick: handleExport,
+                },
+              ]"
+            />
+          </template>
+          <template #itemInfo="{ row }">
+            <div class="flex flex-col gap-1 py-1 leading-5">
+              <div class="text-sm">{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                {{ row.itemCode }}
+              </div>
+              <div v-if="row.brandName" class="text-xs text-gray-500">
+                品牌：{{ row.brandName }}
+              </div>
+              <div v-if="row.categoryName" class="text-xs text-gray-500">
+                分类：{{ row.categoryName }}
+              </div>
+            </div>
+          </template>
+          <template #skuInfo="{ row }">
+            <div class="flex flex-col gap-1 py-1 leading-5">
+              <div class="text-sm">{{ row.name || '-' }}</div>
+              <div v-if="row.code" class="text-xs text-gray-500">
+                编号：{{ row.code }}
+              </div>
+              <div v-if="row.barCode" class="text-xs text-gray-500">
+                条码：{{ row.barCode }}
+              </div>
+            </div>
+          </template>
+          <template #priceInfo="{ row }">
+            <div class="flex flex-col gap-1 py-1 leading-5">
+              <div v-if="hasValue(row.costPrice)">
+                成本价：{{ formatPrice(row.costPrice) }}
+              </div>
+              <div v-if="hasValue(row.sellingPrice)">
+                销售价：{{ formatPrice(row.sellingPrice) }}
+              </div>
+            </div>
+          </template>
+          <template #weightInfo="{ row }">
+            <div class="flex flex-col gap-1 py-1 leading-5">
+              <div v-if="hasValue(row.netWeight)">
+                净重：{{ formatWeight(row.netWeight) }}
+              </div>
+              <div v-if="hasValue(row.grossWeight)">
+                毛重：{{ formatWeight(row.grossWeight) }}
+              </div>
+            </div>
+          </template>
+          <template #dimensionInfo="{ row }">
+            {{ formatDimensionText(row.length, row.width, row.height) || '-' }}
+          </template>
+          <template #actions="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: $t('common.edit'),
+                  type: 'link',
+                  icon: ACTION_ICON.EDIT,
+                  auth: ['wms:item:update'],
+                  onClick: handleEdit.bind(null, row),
+                },
+                {
+                  label: $t('common.delete'),
+                  type: 'link',
+                  danger: true,
+                  icon: ACTION_ICON.DELETE,
+                  auth: ['wms:item:delete'],
+                  popConfirm: {
+                    title: `确认删除商品【${row.itemName}】吗？`,
+                    confirm: handleDelete.bind(null, row),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </Grid>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/modules/form.vue b/apps/web-antd/src/views/wms/md/item/modules/form.vue
new file mode 100644
index 000000000..ccc707efd
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/modules/form.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { WmsItemApi } from '#/api/wms/md/item';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createItem, getItem, updateItem } from '#/api/wms/md/item';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import SkuForm from './sku-form.vue';
+
+defineOptions({ name: 'WmsItemForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsItemApi.Item>();
+const skuFormRef = 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',
+    },
+    labelWidth: 88,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+async function resetSkuForm(item?: WmsItemApi.Item) {
+  await nextTick();
+  await skuFormRef.value?.setRows(item?.skus);
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    try {
+      skuFormRef.value?.validate();
+    } catch (error) {
+      message.warning((error as Error).message);
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as WmsItemApi.Item;
+    data.skus = skuFormRef.value?.getRows() || [];
+    try {
+      await (formData.value?.id ? updateItem(data) : createItem(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;
+    }
+    await formApi.resetForm();
+    await resetSkuForm();
+    // 加载数据
+    const data = modalApi.getData<WmsItemApi.Item>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getItem(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+      await resetSkuForm(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/4">
+    <Form class="mx-4" />
+    <SkuForm ref="skuFormRef" class="mx-4 mt-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/modules/sku-form.vue b/apps/web-antd/src/views/wms/md/item/modules/sku-form.vue
new file mode 100644
index 000000000..f706e1f3e
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/modules/sku-form.vue
@@ -0,0 +1,299 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+
+import { nextTick, ref } from 'vue';
+
+import { Button, Input, InputNumber, message } from 'ant-design-vue';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+import {
+  DIMENSION_PRECISION,
+  PRICE_PRECISION,
+  WEIGHT_PRECISION,
+} from '#/views/wms/utils/format';
+
+interface SkuRow extends WmsItemSkuApi.ItemSku {
+  seq: number;
+}
+
+let skuSeq = 0; // SKU 行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+const tableData = ref<SkuRow[]>([]);
+
+function nextSkuSeq() {
+  skuSeq += 1;
+  return skuSeq;
+}
+
+function buildEmptySku(): SkuRow {
+  return {
+    seq: nextSkuSeq(),
+    id: undefined,
+    name: undefined,
+    barCode: undefined,
+    code: undefined,
+    length: undefined,
+    width: undefined,
+    height: undefined,
+    grossWeight: undefined,
+    netWeight: undefined,
+    costPrice: undefined,
+    sellingPrice: undefined,
+  };
+}
+
+function toSkuRow(sku: WmsItemSkuApi.ItemSku): SkuRow {
+  return {
+    ...sku,
+    seq: nextSkuSeq(),
+  };
+}
+
+function toSku(row: SkuRow): WmsItemSkuApi.ItemSku {
+  const { seq: _seq, ...sku } = row;
+  return sku;
+}
+
+async function reloadGrid() {
+  await nextTick();
+  await gridApi.grid.reloadData(tableData.value);
+}
+
+async function setRows(skus?: WmsItemSkuApi.ItemSku[]) {
+  skuSeq = 0;
+  tableData.value = skus?.length
+    ? skus.map((sku) => toSkuRow(sku))
+    : [buildEmptySku()];
+  await reloadGrid();
+}
+
+function getRows() {
+  return tableData.value.map((row) => toSku(row));
+}
+
+function validate() {
+  if (tableData.value.length === 0) {
+    throw new Error('至少包含一个商品规格');
+  }
+  for (let index = 0; index < tableData.value.length; index += 1) {
+    const row = tableData.value[index];
+    if (!row?.name) {
+      throw new Error(`第 ${index + 1} 行：规格名称不能为空`);
+    }
+  }
+}
+
+async function handleAddSku() {
+  tableData.value.push(buildEmptySku());
+  await reloadGrid();
+}
+
+async function handleDeleteSku(row: SkuRow) {
+  if (tableData.value.length <= 1) {
+    message.error('至少包含一个商品规格');
+    return;
+  }
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  await reloadGrid();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'name',
+        title: '规格名称',
+        minWidth: 180,
+        slots: { default: 'name' },
+      },
+      {
+        field: 'codeBarCode',
+        title: '编号/条码',
+        width: 300,
+        slots: { default: 'codeBarCode' },
+      },
+      {
+        field: 'dimension',
+        title: '长/宽/高(cm)',
+        width: 300,
+        slots: { default: 'dimension' },
+      },
+      {
+        field: 'weight',
+        title: '净重/毛重(kg)',
+        width: 200,
+        slots: { default: 'weight' },
+      },
+      {
+        field: 'price',
+        title: '成本价/销售价',
+        width: 200,
+        slots: { default: 'price' },
+      },
+      {
+        field: 'actions',
+        title: '操作',
+        align: 'center',
+        width: 80,
+        slots: { default: 'actions' },
+      },
+    ],
+    data: tableData.value,
+    minHeight: 260,
+    autoResize: true,
+    border: true,
+    showOverflow: false,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<SkuRow>,
+});
+
+defineExpose({
+  getRows,
+  setRows,
+  validate,
+});
+</script>
+
+<template>
+  <div>
+    <div class="mb-3 flex items-center justify-between">
+      <span class="text-sm font-semibold">规格</span>
+      <TableAction
+        :actions="[
+          {
+            label: '新增规格',
+            type: 'primary',
+            onClick: handleAddSku,
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #name="{ row }">
+        <Input
+          v-model:value="row.name"
+          class="w-full"
+          :maxlength="255"
+          placeholder="请输入规格名称"
+        />
+      </template>
+      <template #codeBarCode="{ row }">
+        <div class="flex flex-col gap-2 py-1">
+          <Input
+            v-model:value="row.code"
+            class="w-full"
+            :maxlength="64"
+            placeholder="编号"
+          >
+            <template #addonAfter>
+              <Button @click="row.code = generateWmsCode('S')">生成</Button>
+            </template>
+          </Input>
+          <Input
+            v-model:value="row.barCode"
+            class="w-full"
+            :maxlength="64"
+            placeholder="条码"
+          >
+            <template #addonAfter>
+              <Button @click="row.barCode = generateWmsCode()">生成</Button>
+            </template>
+          </Input>
+        </div>
+      </template>
+      <template #dimension="{ row }">
+        <div class="flex w-full gap-1">
+          <InputNumber
+            v-model:value="row.length"
+            :controls="false"
+            :min="0"
+            :precision="DIMENSION_PRECISION"
+            class="!w-1/3"
+            placeholder="长"
+          />
+          <InputNumber
+            v-model:value="row.width"
+            :controls="false"
+            :min="0"
+            :precision="DIMENSION_PRECISION"
+            class="!w-1/3"
+            placeholder="宽"
+          />
+          <InputNumber
+            v-model:value="row.height"
+            :controls="false"
+            :min="0"
+            :precision="DIMENSION_PRECISION"
+            class="!w-1/3"
+            placeholder="高"
+          />
+        </div>
+      </template>
+      <template #weight="{ row }">
+        <div class="flex flex-col gap-2 py-1">
+          <InputNumber
+            v-model:value="row.netWeight"
+            :controls="false"
+            :min="0"
+            :precision="WEIGHT_PRECISION"
+            class="!w-full"
+            placeholder="净重"
+          />
+          <InputNumber
+            v-model:value="row.grossWeight"
+            :controls="false"
+            :min="0"
+            :precision="WEIGHT_PRECISION"
+            class="!w-full"
+            placeholder="毛重"
+          />
+        </div>
+      </template>
+      <template #price="{ row }">
+        <div class="flex flex-col gap-2 py-1">
+          <InputNumber
+            v-model:value="row.costPrice"
+            :controls="false"
+            :min="0"
+            :precision="PRICE_PRECISION"
+            class="!w-full"
+            placeholder="成本价"
+          />
+          <InputNumber
+            v-model:value="row.sellingPrice"
+            :controls="false"
+            :min="0"
+            :precision="PRICE_PRECISION"
+            class="!w-full"
+            placeholder="销售价"
+          />
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              onClick: handleDeleteSku.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/item/sku/components/index.ts b/apps/web-antd/src/views/wms/md/item/sku/components/index.ts
new file mode 100644
index 000000000..040fe7a2d
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/sku/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsItemSkuSelect } from './item-sku-select.vue';
diff --git a/apps/web-antd/src/views/wms/md/item/sku/components/item-sku-select.vue b/apps/web-antd/src/views/wms/md/item/sku/components/item-sku-select.vue
new file mode 100644
index 000000000..6d2af008c
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/item/sku/components/item-sku-select.vue
@@ -0,0 +1,225 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+
+import { nextTick, ref } from 'vue';
+
+import { message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemSkuPage } from '#/api/wms/md/item/sku';
+import {
+  formatDimensionText,
+  formatPrice,
+  formatWeight,
+} from '#/views/wms/utils/format';
+
+import { useSkuSelectGridColumns, useSkuSelectGridFormSchema } from '../../data';
+
+defineOptions({ name: 'WmsItemSkuSelect' });
+
+const emit = defineEmits<{
+  change: [list: WmsItemSkuApi.ItemSku[]];
+}>();
+
+const open = ref(false);
+const multiple = ref(true);
+const syncingSingleSelection = ref(false);
+const selectedRows = ref<WmsItemSkuApi.ItemSku[]>([]);
+const disabledSelectedIds = ref<Set<number>>(new Set());
+
+/** 判断 SKU 是否可勾选，已传入的业务明细 SKU 需要禁选 */
+function isRowSelectable({ row }: { row: WmsItemSkuApi.ItemSku }) {
+  return row.id === undefined || !disabledSelectedIds.value.has(row.id);
+}
+
+/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+async function syncSingleSelection(row?: WmsItemSkuApi.ItemSku) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条可选 SKU */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: WmsItemSkuApi.ItemSku[];
+  row?: WmsItemSkuApi.ItemSku;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records.filter(
+    (item) => item.id === undefined || !disabledSelectedIds.value.has(item.id),
+  );
+}
+
+/** 处理全选变化，过滤掉已禁选的 SKU */
+function handleCheckboxAll({
+  records,
+}: {
+  records: WmsItemSkuApi.ItemSku[];
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records.filter(
+    (item) => item.id === undefined || !disabledSelectedIds.value.has(item.id),
+  );
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSkuSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useSkuSelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    showOverflow: false,
+    checkboxConfig: {
+      checkMethod: isRowSelectable,
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemSkuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsItemSkuApi.ItemSku>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 打开 SKU 选择弹窗 */
+async function openModal(
+  selectedIds?: number[],
+  options?: { multiple?: boolean; preselectDisabled?: boolean },
+) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  selectedRows.value = [];
+  disabledSelectedIds.value =
+    options?.preselectDisabled === false
+      ? new Set()
+      : new Set(selectedIds || []);
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+  await gridApi.query();
+}
+
+/** 关闭 SKU 选择弹窗并清空临时选择 */
+async function closeModal() {
+  open.value = false;
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+}
+
+/** 确认选择并返回新增的 SKU 列表 */
+function handleConfirm() {
+  const list = selectedRows.value.filter(
+    (sku) => sku.id !== undefined && !disabledSelectedIds.value.has(sku.id),
+  );
+  if (list.length === 0) {
+    message.warning('请至少选择一条数据');
+    return;
+  }
+  emit('change', list);
+  closeModal();
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <Modal
+    v-model:open="open"
+    title="商品选择"
+    width="80%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
+    <Grid table-title="商品 SKU 列表">
+      <template #itemInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div>{{ row.itemName || '-' }}</div>
+          <div v-if="row.itemCode" class="text-xs text-gray-500">
+            商品编号：{{ row.itemCode }}
+          </div>
+          <div v-if="row.brandName" class="text-xs text-gray-500">
+            品牌：{{ row.brandName }}
+          </div>
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div>{{ row.name || '-' }}</div>
+          <div v-if="row.code" class="text-xs text-gray-500">
+            编号：{{ row.code }}
+          </div>
+          <div v-if="row.barCode" class="text-xs text-gray-500">
+            条码：{{ row.barCode }}
+          </div>
+        </div>
+      </template>
+      <template #priceInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div v-if="row.costPrice !== undefined">
+            成本价：{{ formatPrice(row.costPrice) }}
+          </div>
+          <div v-if="row.sellingPrice !== undefined">
+            销售价：{{ formatPrice(row.sellingPrice) }}
+          </div>
+        </div>
+      </template>
+      <template #weightInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div v-if="row.netWeight !== undefined">
+            净重：{{ formatWeight(row.netWeight) }}
+          </div>
+          <div v-if="row.grossWeight !== undefined">
+            毛重：{{ formatWeight(row.grossWeight) }}
+          </div>
+        </div>
+      </template>
+      <template #dimensionInfo="{ row }">
+        {{ formatDimensionText(row.length, row.width, row.height) || '-' }}
+      </template>
+    </Grid>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/merchant/components/index.ts b/apps/web-antd/src/views/wms/md/merchant/components/index.ts
new file mode 100644
index 000000000..c6a83bd0e
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/merchant/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsMerchantSelect } from './merchant-select.vue';
diff --git a/apps/web-antd/src/views/wms/md/merchant/components/merchant-select.vue b/apps/web-antd/src/views/wms/md/merchant/components/merchant-select.vue
new file mode 100644
index 000000000..be64fddcc
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/merchant/components/merchant-select.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import type { WmsMerchantApi } from '#/api/wms/md/merchant';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { Select } from 'ant-design-vue';
+
+import { getMerchantSimpleList } from '#/api/wms/md/merchant';
+import {
+  CustomerMerchantTypeList,
+  SupplierMerchantTypeList,
+} from '#/views/wms/utils/constants';
+
+defineOptions({ name: 'WmsMerchantSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    customer?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+    supplier?: boolean;
+  }>(),
+  {
+    allowClear: true,
+    customer: false,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择往来企业',
+    supplier: false,
+  },
+);
+
+const emit = defineEmits<{
+  change: [merchant: undefined | WmsMerchantApi.Merchant];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const loading = ref(false);
+const merchantList = ref<WmsMerchantApi.Merchant[]>([]);
+
+const options = computed(() =>
+  merchantList.value
+    .filter((merchant) => merchant.id !== undefined)
+    .map((merchant) => ({
+      label: merchant.name,
+      value: merchant.id,
+    })),
+);
+
+/** 选中变化 */
+function handleChange(value: SelectValue) {
+  const merchantId = typeof value === 'number' ? value : undefined;
+  emit('update:modelValue', merchantId);
+  emit(
+    'change',
+    merchantList.value.find((merchant) => merchant.id === merchantId),
+  );
+}
+
+/** 查询往来企业精简列表 */
+async function getList() {
+  let types: number[] | undefined;
+  if (props.supplier) {
+    types = SupplierMerchantTypeList;
+  } else if (props.customer) {
+    types = CustomerMerchantTypeList;
+  }
+  loading.value = true;
+  try {
+    merchantList.value = await getMerchantSimpleList(
+      types ? { types } : undefined,
+    );
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => [props.supplier, props.customer],
+  () => {
+    getList();
+  },
+);
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Select
+    v-bind="$attrs"
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    :loading="loading"
+    :options="options"
+    :placeholder="placeholder"
+    :value="modelValue"
+    class="w-full"
+    option-filter-prop="label"
+    show-search
+    @change="handleChange"
+  />
+</template>
diff --git a/apps/web-antd/src/views/wms/md/merchant/data.ts b/apps/web-antd/src/views/wms/md/merchant/data.ts
new file mode 100644
index 000000000..5f76f7387
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/merchant/data.ts
@@ -0,0 +1,232 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+/** 新增/修改往来企业的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '往来企业编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入往来企业编号',
+      },
+      rules: z.string().min(1, '往来企业编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          Button,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('M'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '往来企业名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 60,
+        placeholder: '请输入往来企业名称',
+      },
+      rules: z.string().min(1, '往来企业名称不能为空').max(60),
+    },
+    {
+      fieldName: 'type',
+      label: '往来企业类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_MERCHANT_TYPE, 'number'),
+        placeholder: '请选择往来企业类型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'level',
+      label: '级别',
+      component: 'Input',
+      componentProps: {
+        maxLength: 10,
+        placeholder: '请输入级别',
+      },
+    },
+    {
+      fieldName: 'bankName',
+      label: '开户行',
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入开户行',
+      },
+    },
+    {
+      fieldName: 'bankAccount',
+      label: '银行账户',
+      component: 'Input',
+      componentProps: {
+        maxLength: 40,
+        placeholder: '请输入银行账户',
+      },
+    },
+    {
+      fieldName: 'address',
+      label: '地址',
+      component: 'Input',
+      componentProps: {
+        maxLength: 200,
+        placeholder: '请输入地址',
+      },
+    },
+    {
+      fieldName: 'contact',
+      label: '联系人',
+      component: 'Input',
+      componentProps: {
+        maxLength: 30,
+        placeholder: '请输入联系人',
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 13,
+        placeholder: '请输入手机号',
+      },
+    },
+    {
+      fieldName: 'telephone',
+      label: '座机号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 13,
+        placeholder: '请输入座机号',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: 'Email',
+      component: 'Input',
+      componentProps: {
+        maxLength: 50,
+        placeholder: '请输入 Email',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '往来企业编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入往来企业编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '往来企业名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入往来企业名称',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '往来企业类型',
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_MERCHANT_TYPE, 'number'),
+        placeholder: '请选择往来企业类型',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '往来企业编号',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '往来企业名称',
+      minWidth: 160,
+    },
+    {
+      field: 'type',
+      title: '往来企业类型',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_MERCHANT_TYPE },
+      },
+    },
+    {
+      field: 'level',
+      title: '级别',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'contact',
+      title: '联系人',
+      width: 120,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 160,
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/md/merchant/index.vue b/apps/web-antd/src/views/wms/md/merchant/index.vue
new file mode 100644
index 000000000..1e98f3e93
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/merchant/index.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsMerchantApi } from '#/api/wms/md/merchant';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteMerchant,
+  exportMerchant,
+  getMerchantPage,
+} from '#/api/wms/md/merchant';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'WmsMerchant' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建往来企业 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑往来企业 */
+function handleEdit(row: WmsMerchantApi.Merchant) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除往来企业 */
+async function handleDelete(row: WmsMerchantApi.Merchant) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteMerchant(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出往来企业 */
+async function handleExport() {
+  const data = await exportMerchant(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '往来企业.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMerchantPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsMerchantApi.Merchant>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】往来企业（供应商、客户）"
+        url="https://doc.iocoder.cn/wms/md/merchant/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="往来企业列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['往来企业']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:merchant:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:merchant:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['wms:merchant:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['wms:merchant:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/merchant/modules/form.vue b/apps/web-antd/src/views/wms/md/merchant/modules/form.vue
new file mode 100644
index 000000000..99038a69e
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/merchant/modules/form.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { WmsMerchantApi } from '#/api/wms/md/merchant';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createMerchant,
+  getMerchant,
+  updateMerchant,
+} from '#/api/wms/md/merchant';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'WmsMerchantForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsMerchantApi.Merchant>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['往来企业'])
+    : $t('ui.actionTitle.create', ['往来企业']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as WmsMerchantApi.Merchant;
+    try {
+      await (formData.value?.id
+        ? updateMerchant(data)
+        : createMerchant(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;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<WmsMerchantApi.Merchant>();
+    if (!data || !data.id) {
+      return;
+    }
+    // 加载数据
+    modalApi.lock();
+    try {
+      formData.value = await getMerchant(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/warehouse/components/index.ts b/apps/web-antd/src/views/wms/md/warehouse/components/index.ts
new file mode 100644
index 000000000..38d2851c3
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/warehouse/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsWarehouseSelect } from './warehouse-select.vue';
diff --git a/apps/web-antd/src/views/wms/md/warehouse/components/warehouse-select.vue b/apps/web-antd/src/views/wms/md/warehouse/components/warehouse-select.vue
new file mode 100644
index 000000000..19ef2e417
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/warehouse/components/warehouse-select.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { Select } from 'ant-design-vue';
+
+import { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
+
+defineOptions({ name: 'WmsWarehouseSelect', inheritAttrs: false });
+
+withDefaults(
+  defineProps<{
+    allowClear?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    allowClear: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择仓库',
+  },
+);
+
+const emit = defineEmits<{
+  change: [warehouse: undefined | WmsWarehouseApi.Warehouse];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const loading = ref(false);
+const warehouseList = ref<WmsWarehouseApi.Warehouse[]>([]);
+
+const options = computed(() =>
+  warehouseList.value
+    .filter((warehouse) => warehouse.id !== undefined)
+    .map((warehouse) => ({
+      label: warehouse.name,
+      value: warehouse.id,
+    })),
+);
+
+/** 选中变化 */
+function handleChange(value: SelectValue) {
+  const warehouseId = typeof value === 'number' ? value : undefined;
+  emit('update:modelValue', warehouseId);
+  emit(
+    'change',
+    warehouseList.value.find((warehouse) => warehouse.id === warehouseId),
+  );
+}
+
+/** 查询仓库精简列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    warehouseList.value = await getWarehouseSimpleList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <Select
+    v-bind="$attrs"
+    :allow-clear="allowClear"
+    :disabled="disabled"
+    :loading="loading"
+    :options="options"
+    :placeholder="placeholder"
+    :value="modelValue"
+    class="w-full"
+    option-filter-prop="label"
+    show-search
+    @change="handleChange"
+  />
+</template>
diff --git a/apps/web-antd/src/views/wms/md/warehouse/data.ts b/apps/web-antd/src/views/wms/md/warehouse/data.ts
new file mode 100644
index 000000000..e64ccecd3
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/warehouse/data.ts
@@ -0,0 +1,138 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { Button } from 'ant-design-vue';
+
+import { z } from '#/adapter/form';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+/** 新增/修改仓库的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '仓库名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 50,
+        placeholder: '请输入仓库名称',
+      },
+      rules: z.string().min(1, '仓库名称不能为空').max(50),
+    },
+    {
+      fieldName: 'code',
+      label: '仓库编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入仓库编号',
+      },
+      rules: z.string().min(1, '仓库编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          Button,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('W'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        min: 0,
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '仓库名称',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入仓库名称',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '仓库编号',
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入仓库编号',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '仓库名称',
+      minWidth: 160,
+    },
+    {
+      field: 'code',
+      title: '仓库编号',
+      minWidth: 140,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 220,
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/md/warehouse/index.vue b/apps/web-antd/src/views/wms/md/warehouse/index.vue
new file mode 100644
index 000000000..f4810f920
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/warehouse/index.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWarehouse,
+  exportWarehouse,
+  getWarehousePage,
+} from '#/api/wms/md/warehouse';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'WmsWarehouse' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建仓库 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑仓库 */
+function handleEdit(row: WmsWarehouseApi.Warehouse) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除仓库 */
+async function handleDelete(row: WmsWarehouseApi.Warehouse) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+  });
+  try {
+    await deleteWarehouse(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出仓库 */
+async function handleExport() {
+  const data = await exportWarehouse(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '仓库.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWarehousePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsWarehouseApi.Warehouse>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】仓库"
+        url="https://doc.iocoder.cn/wms/md/warehouse/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="仓库列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['仓库']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:warehouse:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:warehouse:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['wms:warehouse:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['wms:warehouse:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/md/warehouse/modules/form.vue b/apps/web-antd/src/views/wms/md/warehouse/modules/form.vue
new file mode 100644
index 000000000..95d3e7eaa
--- /dev/null
+++ b/apps/web-antd/src/views/wms/md/warehouse/modules/form.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWarehouse,
+  getWarehouse,
+  updateWarehouse,
+} from '#/api/wms/md/warehouse';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'WmsWarehouseForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsWarehouseApi.Warehouse>();
+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: 80,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as WmsWarehouseApi.Warehouse;
+    try {
+      await (formData.value?.id
+        ? updateWarehouse(data)
+        : createWarehouse(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<WmsWarehouseApi.Warehouse>();
+    if (!data || !data.id) {
+      await formApi.setValues({ sort: 0 });
+      return;
+    }
+    // 加载数据
+    modalApi.lock();
+    try {
+      formData.value = await getWarehouse(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/check/data.ts b/apps/web-antd/src/views/wms/order/check/data.ts
new file mode 100644
index 000000000..c5c305432
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/check/data.ts
@@ -0,0 +1,483 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+import type { NumberRangeValue } from '#/components/number-range-input';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import {
+  buildNumberRangeSchema,
+  NumberRangeInput,
+} from '#/components/number-range-input';
+import { getRangePickerDefaultProps } from '#/utils';
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  getLossClass,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+  roundPrice,
+  sumPrice,
+  sumQuantity,
+} from '#/views/wms/utils/format';
+
+/** 拆分数量/金额区间字段，适配后端 Min/Max 查询参数 */
+function splitNumberRange(minFieldName: string, maxFieldName: string) {
+  return (
+    value: NumberRangeValue | undefined,
+    setValue: (fieldName: string, value: number | undefined) => void,
+  ) => {
+    setValue(minFieldName, value?.[0]);
+    setValue(maxFieldName, value?.[1]);
+    return undefined;
+  };
+}
+
+/** 构建允许负数的区间搜索项，盘库盈亏数量需要支持盘亏 */
+function buildSignedNumberRangeSchema(
+  label: string,
+  fieldName: string,
+  minFieldName: string,
+  maxFieldName: string,
+  precision: number,
+): VbenFormSchema {
+  return {
+    component: markRaw(NumberRangeInput),
+    componentProps: {
+      precision,
+    },
+    fieldName,
+    label,
+    valueFormat: splitNumberRange(minFieldName, maxFieldName),
+  };
+}
+
+/** 计算单据盈亏金额 */
+export function getOrderDifferencePrice(order: {
+  actualPrice?: number;
+  totalPrice?: number;
+}) {
+  return roundPrice(Number(order.actualPrice || 0) - Number(order.totalPrice || 0));
+}
+
+/** 计算明细盈亏数量 */
+export function getDetailDifferenceQuantity(detail: {
+  checkQuantity?: number;
+  quantity?: number;
+}) {
+  return Number(detail.checkQuantity || 0) - Number(detail.quantity || 0);
+}
+
+/** 计算明细实际金额 */
+export function getDetailActualPrice(detail: {
+  checkQuantity?: number;
+  price?: number;
+}) {
+  if (
+    detail.checkQuantity === undefined ||
+    detail.checkQuantity === null ||
+    detail.price === undefined ||
+    detail.price === null
+  ) {
+    return undefined;
+  }
+  return roundPrice(Number(detail.checkQuantity) * Number(detail.price));
+}
+
+/** 计算明细盈亏金额 */
+export function getDetailDifferencePrice(detail: {
+  checkQuantity?: number;
+  price?: number;
+  quantity?: number;
+}) {
+  if (detail.price === undefined || detail.price === null) {
+    return undefined;
+  }
+  return roundPrice(getDetailDifferenceQuantity(detail) * Number(detail.price));
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入盘库单号',
+      },
+      fieldName: 'no',
+      label: '盘库单号',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_STATUS, 'number'),
+        placeholder: '请选择单据状态',
+      },
+      fieldName: 'status',
+      label: '单据状态',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'warehouseId',
+      label: '仓库',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+    },
+    buildSignedNumberRangeSchema(
+      '盈亏数量',
+      'totalQuantityRange',
+      'totalQuantityMin',
+      'totalQuantityMax',
+      QUANTITY_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '总金额',
+      'totalPriceRange',
+      'totalPriceMin',
+      'totalPriceMax',
+      PRICE_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '实际金额',
+      'actualPriceRange',
+      'actualPriceMin',
+      'actualPriceMax',
+      PRICE_PRECISION,
+    ),
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择创建用户',
+        showSearch: true,
+        valueField: 'id',
+      },
+      fieldName: 'creator',
+      label: '创建用户',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择更新用户',
+        showSearch: true,
+        valueField: 'id',
+      },
+      fieldName: 'updater',
+      label: '更新用户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'updateTime',
+      label: '更新时间',
+    },
+  ];
+}
+
+/** 列表表格列 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      fixed: 'left',
+      slots: { content: 'expand_content' },
+      type: 'expand',
+      width: 48,
+    },
+    {
+      field: 'no',
+      fixed: 'left',
+      slots: { default: 'no' },
+      title: '单号',
+      width: 210,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_STATUS },
+      },
+      field: 'status',
+      fixed: 'left',
+      title: '盘库状态',
+      width: 110,
+    },
+    {
+      field: 'warehouseName',
+      minWidth: 180,
+      title: '仓库',
+    },
+    {
+      field: 'quantityAmount',
+      minWidth: 200,
+      slots: { default: 'quantityAmount' },
+      title: '盈亏/金额(元)',
+    },
+    {
+      field: 'operateInfo',
+      minWidth: 280,
+      slots: { default: 'operateInfo' },
+      title: '操作信息',
+    },
+    {
+      field: 'remark',
+      minWidth: 160,
+      title: '备注',
+    },
+    {
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+      title: '操作',
+      width: 220,
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '盘库单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'warehouseName',
+      label: '仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'orderTime',
+      label: '单据日期',
+      render: (val) => formatDate(val, 'YYYY-MM-DD') || '-',
+    },
+    {
+      field: 'status',
+      label: '单据状态',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_ORDER_STATUS,
+              value: val,
+            }),
+    },
+    {
+      field: 'totalQuantity',
+      label: '盈亏数量',
+      render: (val) =>
+        h('span', { class: getLossClass(val) }, formatQuantity(val) || '-'),
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'actualPrice',
+      label: '实际金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'differencePrice',
+      label: '实际盈亏金额',
+      render: (_val, data) => {
+        const differencePrice = getOrderDifferencePrice(data || {});
+        return h(
+          'span',
+          { class: getLossClass(differencePrice) },
+          formatPrice(differencePrice) || '-',
+        );
+      },
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+      render: (val, data) => val || data?.creator || '-',
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'updaterName',
+      label: '更新人',
+      render: (val, data) => val || data?.updater || '-',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      render: (val) => val || '-',
+      span: 2,
+    },
+  ];
+}
+
+/** 表单的配置项 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入盘库单号',
+      },
+      fieldName: 'no',
+      label: '盘库单号',
+      rules: z.string().min(1, '盘库单号不能为空').max(64),
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        disabled: true,
+      },
+      fieldName: 'warehouseId',
+      label: '仓库',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择单据日期',
+        valueFormat: 'x',
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      fieldName: 'actualPrice',
+      label: '实际金额',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+      fieldName: 'remark',
+      formItemClass: 'col-span-2',
+      label: '备注',
+    },
+  ];
+}
+
+/** 选择盘库仓库表单的配置项 */
+export function useWarehouseFormSchema(
+  onWarehouseChange: (warehouse: unknown) => void,
+): VbenFormSchema[] {
+  return [
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        onChange: onWarehouseChange,
+      },
+      fieldName: 'warehouseId',
+      label: '仓库',
+      rules: 'required',
+    },
+  ];
+}
+
+interface CheckOrderDetailFooterRow {
+  actualPrice?: number;
+  checkQuantity?: number;
+  differencePrice?: number;
+  differenceQuantity?: number;
+  quantity?: number;
+}
+type CheckOrderDetailFooterColumn = Pick<
+  NonNullable<NonNullable<VxeTableGridOptions['columns']>[number]>,
+  'field'
+>;
+
+/** 明细表格的合计行 */
+export function getCheckDetailFooter({
+  columns,
+  data,
+}: {
+  columns: CheckOrderDetailFooterColumn[];
+  data: CheckOrderDetailFooterRow[];
+}) {
+  return [
+    columns.map((column, index) => {
+      if (index === 0) {
+        return '合计';
+      }
+      if (column.field === 'quantity') {
+        return formatSumQuantity(data, (detail) => detail.quantity);
+      }
+      if (column.field === 'checkQuantity') {
+        return formatSumQuantity(data, (detail) => detail.checkQuantity);
+      }
+      if (column.field === 'actualPrice') {
+        return formatSumPrice(data, (detail) => detail.actualPrice);
+      }
+      if (column.field === 'differenceQuantity') {
+        return formatQuantity(
+          sumQuantity(data, (detail) => detail.differenceQuantity),
+        );
+      }
+      if (column.field === 'differencePrice') {
+        return formatPrice(sumPrice(data, (detail) => detail.differencePrice));
+      }
+      return '';
+    }),
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/order/check/index.vue b/apps/web-antd/src/views/wms/order/check/index.vue
new file mode 100644
index 000000000..56d2daa7b
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/check/index.vue
@@ -0,0 +1,377 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsCheckOrderApi } from '#/api/wms/order/check';
+import type { WmsCheckOrderDetailApi } from '#/api/wms/order/check/detail';
+
+import { reactive, ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import {
+  ACTION_ICON,
+  TableAction,
+  useVbenVxeGrid,
+  VxeColumn,
+  VxeTable,
+} from '#/adapter/vxe-table';
+import {
+  deleteCheckOrder,
+  exportCheckOrder,
+  getCheckOrderDetailListByOrderId,
+  getCheckOrderPage,
+} from '#/api/wms/order/check';
+import { $t } from '#/locales';
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  formatPrice,
+  formatQuantity,
+  getLossClass,
+} from '#/views/wms/utils/format';
+
+import {
+  getDetailActualPrice,
+  getDetailDifferencePrice,
+  getDetailDifferenceQuantity,
+  getOrderDifferencePrice,
+  useGridColumns,
+  useGridFormSchema,
+} from './data';
+import CheckOrderDetail from './modules/detail.vue';
+import CheckOrderForm from './modules/form.vue';
+import CheckOrderPrint from './modules/print.vue';
+
+defineOptions({ name: 'WmsCheckOrder' });
+
+const printRef = ref<InstanceType<typeof CheckOrderPrint>>();
+const detailMap = reactive<Record<number, WmsCheckOrderDetailApi.CheckOrderDetail[]>>(
+  {},
+);
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: CheckOrderForm,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: CheckOrderDetail,
+  destroyOnClose: true,
+});
+
+/** 清空展开明细缓存 */
+function clearDetailMap() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  clearDetailMap();
+  gridApi.query();
+}
+
+/** 创建盘库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑盘库单 */
+function handleEdit(row: WmsCheckOrderApi.CheckOrder) {
+  formModalApi.setData({ id: row.id!, type: 'update' }).open();
+}
+
+/** 查看盘库单详情 */
+function handleDetail(row: WmsCheckOrderApi.CheckOrder) {
+  detailModalApi.setData({ id: row.id! }).open();
+}
+
+/** 获取已展开行的明细 */
+function getExpandedDetails(row: WmsCheckOrderApi.CheckOrder) {
+  return detailMap[row.id!] || [];
+}
+
+/** 展开列表行时懒加载盘库明细 */
+async function handleExpandChange(
+  row: WmsCheckOrderApi.CheckOrder,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  delete detailMap[row.id!];
+  detailMap[row.id!] = await getCheckOrderDetailListByOrderId(row.id!);
+}
+
+/** 判断盘库单是否可修改 */
+function canUpdateCheckOrder(status?: number) {
+  return status !== undefined && OrderUpdateStatusList.includes(status);
+}
+
+/** 判断盘库单是否可删除 */
+function canDeleteCheckOrder(status?: number) {
+  return status !== undefined && OrderDeleteStatusList.includes(status);
+}
+
+/** 获取修改按钮禁用提示 */
+function getCheckOrderUpdateTip(status?: number) {
+  if (canUpdateCheckOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已盘库，无法修改';
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改';
+  }
+  return '当前状态无法修改';
+}
+
+/** 获取删除按钮禁用提示 */
+function getCheckOrderDeleteTip(status?: number) {
+  if (canDeleteCheckOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已盘库，无法删除';
+  }
+  return '当前状态无法删除';
+}
+
+/** 删除盘库单 */
+async function handleDelete(row: WmsCheckOrderApi.CheckOrder) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.no]),
+    duration: 0,
+  });
+  try {
+    await deleteCheckOrder(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出盘库单 */
+async function handleExport() {
+  const data = await exportCheckOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '盘库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    expandConfig: {
+      padding: true,
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCheckOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsCheckOrderApi.CheckOrder>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: WmsCheckOrderApi.CheckOrder;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="【单据】盘库" url="https://doc.iocoder.cn/wms/order/check/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <CheckOrderPrint ref="printRef" />
+
+    <Grid table-title="盘库单列表">
+      <template #expand_content="{ row }">
+        <VxeTable
+          :data="getExpandedDetails(row)"
+          border
+          :show-overflow="true"
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ detail.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ detail.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="账面数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.quantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="实盘数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.checkQuantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="单价(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(detail.price) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="实际金额(元)" align="right" width="140">
+            <template #default="{ row: detail }">
+              {{ formatPrice(getDetailActualPrice(detail)) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="盈亏数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              <span :class="getLossClass(getDetailDifferenceQuantity(detail))">
+                {{ formatQuantity(getDetailDifferenceQuantity(detail)) }}
+              </span>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="实际盈亏金额(元)" align="right" width="160">
+            <template #default="{ row: detail }">
+              <span :class="getLossClass(getDetailDifferencePrice(detail))">
+                {{ formatPrice(getDetailDifferencePrice(detail)) || '-' }}
+              </span>
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['盘库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:check-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:check-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div>
+          单号：
+          <a class="text-primary" @click="handleDetail(row)">{{ row.no }}</a>
+        </div>
+      </template>
+      <template #quantityAmount="{ row }">
+        <div class="flex items-center justify-between">
+          <span>盈亏数：</span>
+          <span :class="getLossClass(row.totalQuantity)">
+            {{ formatQuantity(row.totalQuantity) }}
+          </span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>总金额：</span>
+          <span>{{ formatPrice(row.totalPrice) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>实际金额：</span>
+          <span>{{ formatPrice(row.actualPrice) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>盈亏金额：</span>
+          <span :class="getLossClass(getOrderDifferencePrice(row))">
+            {{ formatPrice(getOrderDifferencePrice(row)) }}
+          </span>
+        </div>
+      </template>
+      <template #operateInfo="{ row }">
+        <div>
+          创建：{{ formatDateTime(row.createTime) || '-' }} /
+          {{ row.creatorName || row.creator || '-' }}
+        </div>
+        <div>
+          更新：{{ formatDateTime(row.updateTime) || '-' }} /
+          {{ row.updaterName || row.updater || '-' }}
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              disabled: !canUpdateCheckOrder(row.status),
+              tooltip: getCheckOrderUpdateTip(row.status),
+              auth: ['wms:check-order:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: !canDeleteCheckOrder(row.status),
+              tooltip: getCheckOrderDeleteTip(row.status),
+              auth: ['wms:check-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '打印',
+              type: 'link',
+              auth: ['wms:check-order:query'],
+              onClick: () => printRef?.print(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/check/modules/detail.vue b/apps/web-antd/src/views/wms/order/check/modules/detail.vue
new file mode 100644
index 000000000..bc1f67482
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/check/modules/detail.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { WmsCheckOrderApi } from '#/api/wms/order/check';
+import type { WmsCheckOrderDetailApi } from '#/api/wms/order/check/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  getCheckOrder,
+  getCheckOrderDetailListByOrderId,
+} from '#/api/wms/order/check';
+import { useDescription } from '#/components/description';
+import {
+  formatPrice,
+  formatQuantity,
+  getLossClass,
+} from '#/views/wms/utils/format';
+
+import {
+  getCheckDetailFooter,
+  getDetailActualPrice,
+  getDetailDifferencePrice,
+  getDetailDifferenceQuantity,
+  useDetailSchema,
+} from '../data';
+
+interface DetailRow extends WmsCheckOrderDetailApi.CheckOrderDetail {
+  actualPrice?: number;
+  differencePrice?: number;
+  differenceQuantity?: number;
+}
+
+defineOptions({ name: 'WmsCheckOrderDetail' });
+
+const detailData = ref<WmsCheckOrderApi.CheckOrder>({});
+
+/** 详情明细补齐实际金额和盈亏字段，便于表格与 footer 统一渲染 */
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    actualPrice: getDetailActualPrice(detail),
+    differencePrice: getDetailDifferencePrice(detail),
+    differenceQuantity: getDetailDifferenceQuantity(detail),
+  })),
+);
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: useDetailSchema(),
+  useCard: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      detailData.value = {};
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const order = await getCheckOrder(data.id);
+      const details =
+        order.details || (await getCheckOrderDetailListByOrderId(data.id));
+      detailData.value = { ...order, details };
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="盘库单详情"
+    class="w-2/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mx-4 space-y-4">
+      <Descriptions :data="detailData" />
+      <VxeTable
+        :data="detailRows"
+        border
+        empty-text="暂无商品明细"
+        :footer-method="getCheckDetailFooter"
+        :show-overflow="true"
+        show-footer
+        size="small"
+      >
+        <VxeColumn title="商品信息" min-width="200">
+          <template #default="{ row }">
+            <div>{{ row.itemName || '-' }}</div>
+            <div v-if="row.itemCode" class="text-xs text-gray-500">
+              商品编号：{{ row.itemCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="规格信息" min-width="200">
+          <template #default="{ row }">
+            <div>{{ row.skuName || '-' }}</div>
+            <div v-if="row.skuCode" class="text-xs text-gray-500">
+              规格编号：{{ row.skuCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="quantity" title="账面数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.quantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn title="单价(元)" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatPrice(row.price) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="checkQuantity" title="实盘数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.checkQuantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="actualPrice" title="实际金额(元)" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.actualPrice) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn
+          field="differenceQuantity"
+          title="盈亏数量"
+          align="right"
+          width="120"
+        >
+          <template #default="{ row }">
+            <span :class="getLossClass(row.differenceQuantity)">
+              {{ formatQuantity(row.differenceQuantity) || '-' }}
+            </span>
+          </template>
+        </VxeColumn>
+        <VxeColumn
+          field="differencePrice"
+          title="实际盈亏金额(元)"
+          align="right"
+          width="160"
+        >
+          <template #default="{ row }">
+            <span :class="getLossClass(row.differencePrice)">
+              {{ formatPrice(row.differencePrice) || '-' }}
+            </span>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/check/modules/form.vue b/apps/web-antd/src/views/wms/order/check/modules/form.vue
new file mode 100644
index 000000000..c59edbfc1
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/check/modules/form.vue
@@ -0,0 +1,733 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { WmsCheckOrderApi } from '#/api/wms/order/check';
+import type { WmsCheckOrderDetailApi } from '#/api/wms/order/check/detail';
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEqual } from '@vben/utils';
+
+import { InputNumber, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { TableAction, VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getInventoryList } from '#/api/wms/inventory';
+import {
+  cancelCheckOrder,
+  completeCheckOrder,
+  createCheckOrder,
+  getCheckOrder,
+  getCheckOrderDetailListByOrderId,
+  updateCheckOrder,
+} from '#/api/wms/order/check';
+import { $t } from '#/locales';
+import { WmsItemSkuSelect } from '#/views/wms/md/item/sku/components';
+import {
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  dividePrice,
+  formatPrice,
+  formatQuantity,
+  getLossClass,
+  multiplyPrice,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+  sumPrice,
+} from '#/views/wms/utils/format';
+import { generateOrderNo } from '#/views/wms/utils/order';
+
+import {
+  getCheckDetailFooter,
+  getDetailDifferencePrice,
+  getDetailDifferenceQuantity,
+  useFormSchema,
+  useWarehouseFormSchema,
+} from '../data';
+
+interface CheckInventoryRow extends WmsInventoryApi.Inventory {
+  availableQuantity?: number;
+  price?: number;
+}
+
+interface DetailRow extends WmsCheckOrderDetailApi.CheckOrderDetail {
+  actualPrice?: number;
+  differencePrice?: number;
+  differenceQuantity?: number;
+  seq: number;
+}
+
+defineOptions({ name: 'WmsCheckOrderForm' });
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const formData = ref<WmsCheckOrderApi.CheckOrder>({});
+const formMode = ref('create');
+const originalSubmitData = ref<WmsCheckOrderApi.CheckOrder>();
+const details = ref<DetailRow[]>([]);
+const detailTableRef = ref<VxeTableInstance>();
+const skuSelectRef = ref<InstanceType<typeof WmsItemSkuSelect>>();
+const selectingWarehouse = ref(false);
+const warehouseName = ref<string>();
+let detailSeq = 0; // 明细行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+
+const getTitle = computed(() => {
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['盘库单'])
+    : $t('ui.actionTitle.create', ['盘库单']);
+});
+
+const modalTitle = computed(() => {
+  return selectingWarehouse.value ? '选择盘库仓库' : getTitle.value;
+});
+const modalClass = computed(() => {
+  return selectingWarehouse.value ? 'w-[420px]' : 'w-3/4';
+});
+
+const isPrepareOrder = computed(() => {
+  return (
+    !formData.value?.id ||
+    (formData.value.status !== undefined &&
+      OrderUpdateStatusList.includes(formData.value.status))
+  );
+});
+const isSavedPrepareOrder = computed(() => {
+  return (
+    !!formData.value?.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+  );
+});
+
+/** 表单顶部实际金额来自明细合计，保持和 vue3 的只读汇总字段一致 */
+const actualPrice = computed(() =>
+  sumPrice(details.value, (detail) => getDetailActualPrice(detail)),
+);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+const [WarehouseForm, warehouseFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useWarehouseFormSchema(handleWarehouseSelect),
+  showDefaultActions: false,
+});
+
+/** 记录新增盘库单前置选择的仓库名称 */
+function handleWarehouseSelect(warehouse: unknown) {
+  warehouseName.value = (warehouse as undefined | WmsWarehouseApi.Warehouse)
+    ?.name;
+}
+
+/** 初始化新增盘库单草稿 */
+async function initCreateForm(warehouse: {
+  warehouseId?: number;
+  warehouseName?: string;
+}) {
+  formData.value = {
+    details: [],
+    no: generateOrderNo('PK'),
+    status: OrderStatusEnum.PREPARE,
+    warehouseId: warehouse.warehouseId,
+    warehouseName: warehouse.warehouseName,
+  };
+  setDetails([]);
+  await formApi.resetForm();
+  await formApi.setValues(formData.value);
+  await nextTick();
+  syncActualPriceField();
+  originalSubmitData.value = await buildSubmitData();
+}
+
+/** 确认前置选择仓库，进入主表单 */
+async function handleWarehouseConfirm() {
+  const { valid } = await warehouseFormApi.validate();
+  if (!valid) {
+    return;
+  }
+  const values = (await warehouseFormApi.getValues()) as {
+    warehouseId?: number;
+  };
+  selectingWarehouse.value = false;
+  await nextTick();
+  await initCreateForm({
+    warehouseId: values.warehouseId,
+    warehouseName: warehouseName.value,
+  });
+}
+
+/** 同步表单顶部只读实际金额 */
+function syncActualPriceField() {
+  void formApi.setFieldValue(
+    'actualPrice',
+    formatPrice(actualPrice.value) || '0.00',
+  );
+}
+
+watch(actualPrice, syncActualPriceField);
+
+/** 计算明细实际金额 */
+function getDetailActualPrice(detail: DetailRow) {
+  return detail.actualPrice ?? multiplyPrice(detail.checkQuantity, detail.price);
+}
+
+/** 刷新明细行的盈亏数据 */
+function refreshDetailCalculatedFields(detail: DetailRow) {
+  detail.differenceQuantity = getDetailDifferenceQuantity(detail);
+  detail.differencePrice = getDetailDifferencePrice(detail);
+}
+
+/** 标准化明细行，补齐本地序号和计算字段 */
+function normalizeDetail(
+  detail: WmsCheckOrderDetailApi.CheckOrderDetail & { actualPrice?: number },
+): DetailRow {
+  detailSeq += 1;
+  const row: DetailRow = {
+    ...detail,
+    actualPrice:
+      detail.actualPrice ?? multiplyPrice(detail.checkQuantity, detail.price),
+    seq: detailSeq,
+  };
+  refreshDetailCalculatedFields(row);
+  return row;
+}
+
+/** 根据库存构建盘库明细 */
+function buildDetail(inventory: CheckInventoryRow): DetailRow {
+  return normalizeDetail({
+    actualPrice: multiplyPrice(inventory.availableQuantity, inventory.price),
+    availableQuantity: inventory.availableQuantity,
+    checkQuantity: inventory.availableQuantity,
+    id: undefined,
+    inventoryId: inventory.id,
+    itemCode: inventory.itemCode,
+    itemId: inventory.itemId,
+    itemName: inventory.itemName,
+    price: inventory.price,
+    quantity: inventory.availableQuantity,
+    skuCode: inventory.skuCode,
+    skuId: inventory.skuId,
+    skuName: inventory.skuName,
+    unit: inventory.unit,
+    warehouseId: inventory.warehouseId,
+    warehouseName: inventory.warehouseName,
+  });
+}
+
+/** 构建零库存盘库明细，用于盘点仓库内暂无库存的商品 */
+function buildZeroInventoryDetail(sku: WmsItemSkuApi.ItemSku): DetailRow {
+  return normalizeDetail({
+    actualPrice: 0,
+    availableQuantity: 0,
+    checkQuantity: 0,
+    id: undefined,
+    inventoryId: undefined,
+    itemCode: sku.itemCode,
+    itemId: sku.itemId,
+    itemName: sku.itemName,
+    price: sku.costPrice,
+    quantity: 0,
+    skuCode: sku.code,
+    skuId: sku.id,
+    skuName: sku.name,
+    unit: sku.unit,
+    warehouseId: formData.value.warehouseId,
+    warehouseName: formData.value.warehouseName,
+  });
+}
+
+/** 设置盘库明细 */
+function setDetails(list?: WmsCheckOrderDetailApi.CheckOrderDetail[]) {
+  detailSeq = 0;
+  details.value = (list || []).map((detail) => normalizeDetail(detail));
+  void refreshDetailFooter();
+}
+
+/** 刷新明细合计行 */
+async function refreshDetailFooter() {
+  await nextTick();
+  await detailTableRef.value?.updateFooter();
+}
+
+/** 导入当前仓库的全部库存余额 */
+async function handleImportAllInventory() {
+  if (!formData.value.warehouseId) {
+    message.warning('请先选择仓库');
+    return;
+  }
+  if (details.value.length > 0) {
+    await confirm('导入仓库库存会覆盖当前盘库明细，是否继续？');
+  }
+  modalApi.lock();
+  try {
+    const inventories = await loadWarehouseInventoryList();
+    details.value = inventories.map((inventory) =>
+      buildDetail({ ...inventory, availableQuantity: inventory.quantity }),
+    );
+    await refreshDetailFooter();
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 打开盘点商品添加弹窗，已导入/已添加 SKU 在选择器内禁选 */
+function handleAddSkuInventory() {
+  if (!formData.value.warehouseId) {
+    message.warning('请先选择仓库');
+    return;
+  }
+  skuSelectRef.value?.open(getSelectedSkuIds(), {
+    multiple: false,
+  });
+}
+
+/** 选择商品 SKU */
+async function handleSelectSku(skus: WmsItemSkuApi.ItemSku[]) {
+  if (skus.length === 0) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const warehouseInventoryMap = await getWarehouseInventoryMap();
+    const selectedSkuIds = new Set(getSelectedSkuIds());
+    let changed = false;
+    for (const sku of skus) {
+      if (!sku.id || selectedSkuIds.has(sku.id)) {
+        continue;
+      }
+      const inventory = warehouseInventoryMap.get(sku.id);
+      details.value.push(
+        inventory
+          ? buildDetail({ ...inventory, availableQuantity: inventory.quantity })
+          : buildZeroInventoryDetail(sku),
+      );
+      selectedSkuIds.add(sku.id);
+      changed = true;
+    }
+    if (changed) {
+      await refreshDetailFooter();
+    }
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 获得已导入/已添加 SKU 编号，避免重复盘点同一规格 */
+function getSelectedSkuIds() {
+  return details.value
+    .map((detail) => detail.skuId)
+    .filter((id): id is number => id !== undefined);
+}
+
+/** 查询当前仓库全部库存余额 */
+async function loadWarehouseInventoryList(): Promise<CheckInventoryRow[]> {
+  return (await getInventoryList({
+    warehouseId: formData.value.warehouseId!,
+  })) as CheckInventoryRow[];
+}
+
+/** 获得当前仓库 SKU 对应库存余额，用于添加单个 SKU 时带入账面库存 */
+async function getWarehouseInventoryMap(): Promise<Map<number, CheckInventoryRow>> {
+  const inventories = await loadWarehouseInventoryList();
+  return new Map(
+    inventories
+      .filter((inventory) => !!inventory.skuId)
+      .map((inventory) => [inventory.skuId!, inventory] as const),
+  );
+}
+
+/** 删除商品明细 */
+function handleDeleteDetail(row: DetailRow) {
+  const index = details.value.findIndex((detail) => detail.seq === row.seq);
+  if (index !== -1) {
+    details.value.splice(index, 1);
+    void refreshDetailFooter();
+  }
+}
+
+/** 明细实盘数量变化 */
+function handleDetailCheckQuantityChange(detail: DetailRow) {
+  if (detail.price !== undefined && detail.price !== null) {
+    detail.actualPrice = multiplyPrice(detail.checkQuantity, detail.price);
+  } else {
+    detail.price = dividePrice(detail.actualPrice, detail.checkQuantity);
+  }
+  refreshDetailCalculatedFields(detail);
+  void refreshDetailFooter();
+}
+
+/** 明细单价变化 */
+function handleDetailPriceChange(detail: DetailRow) {
+  detail.actualPrice = multiplyPrice(detail.checkQuantity, detail.price);
+  refreshDetailCalculatedFields(detail);
+  void refreshDetailFooter();
+}
+
+/** 明细实际金额变化 */
+function handleDetailActualPriceChange(detail: DetailRow) {
+  detail.price = dividePrice(detail.actualPrice, detail.checkQuantity);
+  refreshDetailCalculatedFields(detail);
+  void refreshDetailFooter();
+}
+
+/** 校验商品明细 */
+function validateDetails(required = false) {
+  if (details.value.length === 0) {
+    if (required) {
+      message.error('至少包含一条盘库明细');
+      return false;
+    }
+    return true;
+  }
+  for (let index = 0; index < details.value.length; index += 1) {
+    const detail = details.value[index]!;
+    if (
+      detail.checkQuantity === undefined ||
+      detail.checkQuantity === null ||
+      detail.checkQuantity < 0
+    ) {
+      message.error(`第 ${index + 1} 行明细实盘数量不能小于 0`);
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 构建提交用的明细数据 */
+function buildSubmitDetails() {
+  return details.value.map((row) => {
+    const {
+      actualPrice: _actualPrice,
+      availableQuantity: _availableQuantity,
+      differencePrice: _differencePrice,
+      differenceQuantity: _differenceQuantity,
+      seq: _seq,
+      ...detail
+    } = row;
+    return detail;
+  });
+}
+
+/** 构建提交用的单据数据 */
+async function buildSubmitData(): Promise<WmsCheckOrderApi.CheckOrder> {
+  const values = (await formApi.getValues()) as WmsCheckOrderApi.CheckOrder;
+  const {
+    actualPrice: _formActualPrice,
+    details: _formDetails,
+    totalPrice: _formTotalPrice,
+    totalQuantity: _formTotalQuantity,
+    ...submitValues
+  } = values;
+  const {
+    actualPrice: _actualPrice,
+    details: _details,
+    totalPrice: _totalPrice,
+    totalQuantity: _totalQuantity,
+    ...order
+  } = formData.value;
+  return {
+    ...order,
+    ...submitValues,
+    details: buildSubmitDetails(),
+  };
+}
+
+/** 完成盘库 */
+async function handleFormComplete() {
+  const { valid } = await formApi.validate();
+  if (!valid || !validateDetails(true) || !formData.value?.id) {
+    return;
+  }
+  await confirm('确认完成盘库？完成后将更新库存。');
+  modalApi.lock();
+  try {
+    const data = await buildSubmitData();
+    if (!isEqual(data, originalSubmitData.value)) {
+      await updateCheckOrder(data);
+    }
+    await completeCheckOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('盘库成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 作废盘库单 */
+async function handleFormCancel() {
+  if (!formData.value?.id) {
+    return;
+  }
+  await confirm('确认作废该盘库单？作废后不可恢复。');
+  modalApi.lock();
+  try {
+    await cancelCheckOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('作废成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (selectingWarehouse.value) {
+      await handleWarehouseConfirm();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid || !validateDetails(false) || !isPrepareOrder.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await buildSubmitData();
+    try {
+      await (formMode.value === 'update'
+        ? updateCheckOrder(data)
+        : createCheckOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {};
+      originalSubmitData.value = undefined;
+      selectingWarehouse.value = false;
+      warehouseName.value = undefined;
+      setDetails([]);
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      type?: string;
+    }>();
+    formMode.value = data?.type || (data?.id ? 'update' : 'create');
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        // 加载数据
+        const order = await getCheckOrder(data.id);
+        const orderDetails =
+          order.details || (await getCheckOrderDetailListByOrderId(data.id));
+        formData.value = { ...order, details: orderDetails };
+        setDetails(orderDetails);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+        await nextTick();
+        syncActualPriceField();
+        originalSubmitData.value = await buildSubmitData();
+      } finally {
+        modalApi.unlock();
+      }
+      return;
+    }
+    // 新增时先选择盘库仓库，再进入主表单
+    selectingWarehouse.value = true;
+    warehouseName.value = undefined;
+    formData.value = {};
+    setDetails([]);
+    await warehouseFormApi.resetForm();
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="modalTitle"
+    :class="modalClass"
+    :show-confirm-button="selectingWarehouse || isPrepareOrder"
+  >
+    <template v-if="selectingWarehouse" #confirmText>开始盘库</template>
+    <WarehouseForm v-if="selectingWarehouse" class="mx-4" />
+    <div v-else class="mx-4">
+      <Form />
+      <div class="mt-4">
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-semibold">盘库明细</span>
+          <TableAction
+            :actions="[
+              {
+                label: '导入仓库库存',
+                disabled: !formData.warehouseId,
+                onClick: handleImportAllInventory,
+                type: 'primary',
+              },
+              {
+                label: '添加盘点商品',
+                disabled: !formData.warehouseId,
+                onClick: handleAddSkuInventory,
+                type: 'primary',
+              },
+            ]"
+          />
+        </div>
+        <VxeTable
+          ref="detailTableRef"
+          :data="details"
+          border
+          empty-text="暂无商品明细"
+          :footer-method="getCheckDetailFooter"
+          :show-overflow="true"
+          show-footer
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="210">
+            <template #default="{ row }">
+              <div>{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ row.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="210">
+            <template #default="{ row }">
+              <div>{{ row.skuName || '-' }}</div>
+              <div v-if="row.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ row.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn field="quantity" title="账面库存" align="right" width="120">
+            <template #default="{ row }">
+              {{ formatQuantity(row.quantity) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn field="price" title="单价(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.price"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="单价"
+                @change="handleDetailPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="checkQuantity" title="实际库存" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.checkQuantity"
+                :controls="false"
+                :min="0"
+                :precision="QUANTITY_PRECISION"
+                class="!w-full"
+                placeholder="数量"
+                @change="handleDetailCheckQuantityChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="actualPrice" title="实际金额(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.actualPrice"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="金额"
+                @change="handleDetailActualPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn
+            field="differenceQuantity"
+            title="盈亏数"
+            align="right"
+            width="120"
+          >
+            <template #default="{ row }">
+              <span :class="getLossClass(row.differenceQuantity)">
+                {{ formatQuantity(row.differenceQuantity) }}
+              </span>
+            </template>
+          </VxeColumn>
+          <VxeColumn
+            field="differencePrice"
+            title="实际盈亏金额(元)"
+            align="right"
+            width="160"
+          >
+            <template #default="{ row }">
+              <span :class="getLossClass(row.differencePrice)">
+                {{ formatPrice(row.differencePrice) || '-' }}
+              </span>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="操作" align="center" fixed="right" width="90">
+            <template #default="{ row }">
+              <TableAction
+                :actions="[
+                  {
+                    label: '删除',
+                    type: 'link',
+                    danger: true,
+                    onClick: handleDeleteDetail.bind(null, row),
+                  },
+                ]"
+              />
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <div
+        v-if="!selectingWarehouse && isSavedPrepareOrder"
+        class="flex flex-auto items-center gap-2"
+      >
+        <TableAction
+          :actions="[
+            {
+              label: '完成盘库',
+              type: 'primary',
+              auth: ['wms:check-order:complete'],
+              onClick: handleFormComplete,
+            },
+            {
+              label: '作废',
+              type: 'primary',
+              danger: true,
+              auth: ['wms:check-order:cancel'],
+              onClick: handleFormCancel,
+            },
+          ]"
+        />
+      </div>
+    </template>
+    <WmsItemSkuSelect ref="skuSelectRef" @change="handleSelectSku" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/check/modules/print.vue b/apps/web-antd/src/views/wms/order/check/modules/print.vue
new file mode 100644
index 000000000..9676fe385
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/check/modules/print.vue
@@ -0,0 +1,296 @@
+<script lang="ts" setup>
+import type { WmsCheckOrderApi } from '#/api/wms/order/check';
+import type { WmsCheckOrderDetailApi } from '#/api/wms/order/check/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Barcode, BarcodeFormatEnum } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import {
+  getCheckOrder,
+  getCheckOrderDetailListByOrderId,
+} from '#/api/wms/order/check';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  getLossClass,
+  sumPrice,
+  sumQuantity,
+} from '#/views/wms/utils/format';
+
+import {
+  getDetailActualPrice,
+  getDetailDifferencePrice,
+  getDetailDifferenceQuantity,
+  getOrderDifferencePrice,
+} from '../data';
+
+interface PrintRow extends WmsCheckOrderDetailApi.CheckOrderDetail {
+  actualPrice?: number;
+  differencePrice?: number;
+  differenceQuantity?: number;
+}
+
+defineOptions({ name: 'WmsCheckOrderPrint' });
+
+const printData = ref<WmsCheckOrderApi.CheckOrder>({});
+const tableColumnCount = 8;
+
+/** 打印明细补齐实际金额和盈亏字段，避免模板重复计算 */
+const printRows = computed<PrintRow[]>(() =>
+  (printData.value.details || []).map((detail) => ({
+    ...detail,
+    actualPrice: getDetailActualPrice(detail),
+    differencePrice: getDetailDifferencePrice(detail),
+    differenceQuantity: getDetailDifferenceQuantity(detail),
+  })),
+);
+
+/** 打印合计盈亏数量 */
+const totalDifferenceQuantity = computed(() =>
+  sumQuantity(printRows.value, (detail) => detail.differenceQuantity),
+);
+/** 打印合计盈亏金额 */
+const totalDifferencePrice = computed(() =>
+  sumPrice(printRows.value, (detail) => detail.differencePrice),
+);
+
+/** 等待条码和打印 DOM 完成绘制，避免浏览器打印到旧内容 */
+function waitForPaint() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+/** 退出打印模式，恢复当前页面显示 */
+function removePrintMode() {
+  document.body.classList.remove('wms-check-order-printing');
+}
+
+/** 获取打印用字典文案，空值统一显示为横杠 */
+function getPrintDictLabel(dictType: string, value?: number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  return getDictLabel(dictType, value) || '-';
+}
+
+/** 打印盘库单：加载数据后只展示打印区域，再调用浏览器打印 */
+async function print(id: number) {
+  const order = await getCheckOrder(id);
+  const details = order.details || (await getCheckOrderDetailListByOrderId(id));
+  printData.value = { ...order, details };
+  await nextTick();
+  await waitForPaint();
+  document.body.classList.add('wms-check-order-printing');
+  window.addEventListener('afterprint', removePrintMode, { once: true });
+  window.print();
+}
+
+defineExpose({ print });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      id="wmsCheckOrderPrint"
+      class="wms-check-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white text-[#303133] opacity-0"
+    >
+      <div class="relative mb-2">
+        <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
+          盘库单
+        </h2>
+        <div v-if="printData.no" class="absolute right-0 top-0">
+          <Barcode
+            :content="printData.no"
+            :display-value="false"
+            :format="BarcodeFormatEnum.CODE39"
+            :height="40"
+            :width="180"
+          />
+        </div>
+      </div>
+      <div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
+        <div>盘库单号：{{ printData.no || '-' }}</div>
+        <div>仓库：{{ printData.warehouseName || '-' }}</div>
+        <div>
+          盘库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
+        </div>
+        <div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
+        <div>
+          盈亏数量：
+          <span :class="getLossClass(printData.totalQuantity)">
+            {{ formatQuantity(printData.totalQuantity) || '-' }}
+          </span>
+        </div>
+        <div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
+        <div>实际金额：{{ formatPrice(printData.actualPrice) || '-' }}</div>
+        <div>
+          实际盈亏金额：
+          <span :class="getLossClass(getOrderDifferencePrice(printData))">
+            {{ formatPrice(getOrderDifferencePrice(printData)) || '-' }}
+          </span>
+        </div>
+        <div class="col-span-3 grid grid-cols-2 gap-x-6">
+          <div>
+            创建：{{ formatDateTime(printData.createTime) || '-' }} /
+            {{ printData.creatorName || printData.creator || '-' }}
+          </div>
+          <div>
+            更新：{{ formatDateTime(printData.updateTime) || '-' }} /
+            {{ printData.updaterName || printData.updater || '-' }}
+          </div>
+        </div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-[13px] leading-[1.5]">
+        <thead>
+          <tr>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              商品信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              规格信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              账面库存
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              单价(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              实际库存
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              实际金额(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              盈亏数
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              实际盈亏金额(元)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printRows" :key="detail.id || detail.skuId">
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs">
+                编号：{{ detail.itemCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs">
+                编号：{{ detail.skuCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.price) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.checkQuantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.actualPrice) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              <span :class="getLossClass(detail.differenceQuantity)">
+                {{ formatQuantity(detail.differenceQuantity) || '-' }}
+              </span>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              <span :class="getLossClass(detail.differencePrice)">
+                {{ formatPrice(detail.differencePrice) || '-' }}
+              </span>
+            </td>
+          </tr>
+          <tr v-if="printRows.length > 0">
+            <td
+              class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
+              colspan="2"
+            >
+              合计
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.checkQuantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumPrice(printRows, (detail) => detail.actualPrice) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              <span :class="getLossClass(totalDifferenceQuantity)">
+                {{ formatQuantity(totalDifferenceQuantity) }}
+              </span>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              <span :class="getLossClass(totalDifferencePrice)">
+                {{ formatPrice(totalDifferencePrice) }}
+              </span>
+            </td>
+          </tr>
+          <tr v-if="printRows.length === 0">
+            <td
+              class="border border-solid border-[#dcdfe6] p-2 text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+@page {
+  margin: 8mm 10mm;
+}
+
+@media print {
+  :global(body.wms-check-order-printing) {
+    -webkit-print-color-adjust: exact;
+    margin: 0 !important;
+    padding: 0 !important;
+    print-color-adjust: exact;
+  }
+
+  :global(body.wms-check-order-printing *) {
+    visibility: hidden !important;
+  }
+
+  :global(body.wms-check-order-printing .wms-check-order-print),
+  :global(body.wms-check-order-printing .wms-check-order-print *) {
+    visibility: visible !important;
+  }
+
+  :global(body.wms-check-order-printing .wms-check-order-print) {
+    pointer-events: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: auto;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/wms/order/movement/data.ts b/apps/web-antd/src/views/wms/order/movement/data.ts
new file mode 100644
index 000000000..42a6b9be7
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/movement/data.ts
@@ -0,0 +1,369 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { buildNumberRangeSchema } from '#/components/number-range-input';
+import { getRangePickerDefaultProps } from '#/utils';
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入移库单号',
+      },
+      fieldName: 'no',
+      label: '移库单号',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_STATUS, 'number'),
+        placeholder: '请选择单据状态',
+      },
+      fieldName: 'status',
+      label: '单据状态',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'sourceWarehouseId',
+      label: '来源仓库',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'targetWarehouseId',
+      label: '目标仓库',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+    },
+    buildNumberRangeSchema(
+      '数量',
+      'totalQuantityRange',
+      'totalQuantityMin',
+      'totalQuantityMax',
+      QUANTITY_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '总金额',
+      'totalPriceRange',
+      'totalPriceMin',
+      'totalPriceMax',
+      PRICE_PRECISION,
+    ),
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择创建用户',
+        showSearch: true,
+        valueField: 'id',
+      },
+      fieldName: 'creator',
+      label: '创建用户',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择更新用户',
+        showSearch: true,
+        valueField: 'id',
+      },
+      fieldName: 'updater',
+      label: '更新用户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'updateTime',
+      label: '更新时间',
+    },
+  ];
+}
+
+/** 列表表格列 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      fixed: 'left',
+      slots: { content: 'expand_content' },
+      type: 'expand',
+      width: 48,
+    },
+    {
+      field: 'no',
+      fixed: 'left',
+      slots: { default: 'no' },
+      title: '单号',
+      width: 210,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_STATUS },
+      },
+      field: 'status',
+      fixed: 'left',
+      title: '移库状态',
+      width: 110,
+    },
+    {
+      field: 'sourceWarehouseName',
+      minWidth: 180,
+      title: '来源仓库',
+    },
+    {
+      field: 'targetWarehouseName',
+      minWidth: 180,
+      title: '目标仓库',
+    },
+    {
+      field: 'quantityAmount',
+      minWidth: 180,
+      slots: { default: 'quantityAmount' },
+      title: '总数量/总金额(元)',
+    },
+    {
+      field: 'operateInfo',
+      minWidth: 260,
+      slots: { default: 'operateInfo' },
+      title: '操作信息',
+    },
+    {
+      field: 'remark',
+      minWidth: 160,
+      title: '备注',
+    },
+    {
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+      title: '操作',
+      width: 220,
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '移库单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'sourceWarehouseName',
+      label: '来源仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'targetWarehouseName',
+      label: '目标仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'status',
+      label: '单据状态',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_ORDER_STATUS,
+              value: val,
+            }),
+    },
+    {
+      field: 'orderTime',
+      label: '单据日期',
+      render: (val) => formatDate(val, 'YYYY-MM-DD') || '-',
+    },
+    {
+      field: 'totalQuantity',
+      label: '总数量',
+      render: (val) => formatQuantity(val) || '-',
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+      render: (val, data) => val || data?.creator || '-',
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'updaterName',
+      label: '更新人',
+      render: (val, data) => val || data?.updater || '-',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      render: (val) => val || '-',
+      span: 2,
+    },
+  ];
+}
+
+interface MovementFormSchemaOptions {
+  onSourceWarehouseChange: (warehouse?: WmsWarehouseApi.Warehouse) => void;
+  onTargetWarehouseChange: (warehouse?: WmsWarehouseApi.Warehouse) => void;
+}
+
+/** 表单的配置项 */
+export function useFormSchema({
+  onSourceWarehouseChange,
+  onTargetWarehouseChange,
+}: MovementFormSchemaOptions): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入移库单号',
+      },
+      fieldName: 'no',
+      label: '移库单号',
+      rules: z.string().min(1, '移库单号不能为空').max(64),
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        onChange: onSourceWarehouseChange,
+      },
+      fieldName: 'sourceWarehouseId',
+      label: '来源仓库',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        onChange: onTargetWarehouseChange,
+      },
+      fieldName: 'targetWarehouseId',
+      label: '目标仓库',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择单据日期',
+        valueFormat: 'x',
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+      fieldName: 'remark',
+      formItemClass: 'col-span-2',
+      label: '备注',
+    },
+  ];
+}
+
+interface MovementOrderDetailFooterRow {
+  quantity?: number;
+  totalPrice?: number;
+}
+type MovementOrderDetailFooterColumn = Pick<
+  NonNullable<NonNullable<VxeTableGridOptions['columns']>[number]>,
+  'field'
+>;
+
+/** 明细表格的合计行 */
+export function getDetailFooter({
+  columns,
+  data,
+}: {
+  columns: MovementOrderDetailFooterColumn[];
+  data: MovementOrderDetailFooterRow[];
+}) {
+  return [
+    columns.map((column, index) => {
+      if (index === 0) {
+        return '合计';
+      }
+      if (column.field === 'quantity') {
+        return formatSumQuantity(data, (detail) => detail.quantity);
+      }
+      if (column.field === 'totalPrice') {
+        return formatSumPrice(data, (detail) => detail.totalPrice);
+      }
+      return '';
+    }),
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/order/movement/index.vue b/apps/web-antd/src/views/wms/order/movement/index.vue
new file mode 100644
index 000000000..e0bd9545c
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/movement/index.vue
@@ -0,0 +1,342 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsMovementOrderApi } from '#/api/wms/order/movement';
+import type { WmsMovementOrderDetailApi } from '#/api/wms/order/movement/detail';
+
+import { reactive, ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import {
+  ACTION_ICON,
+  TableAction,
+  useVbenVxeGrid,
+  VxeColumn,
+  VxeTable,
+} from '#/adapter/vxe-table';
+import {
+  deleteMovementOrder,
+  exportMovementOrder,
+  getMovementOrderDetailListByOrderId,
+  getMovementOrderPage,
+} from '#/api/wms/order/movement';
+import { $t } from '#/locales';
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import { formatPrice, formatQuantity, multiplyPrice } from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import MovementOrderDetail from './modules/detail.vue';
+import MovementOrderForm from './modules/form.vue';
+import MovementOrderPrint from './modules/print.vue';
+
+defineOptions({ name: 'WmsMovementOrder' });
+
+const printRef = ref<InstanceType<typeof MovementOrderPrint>>();
+const detailMap = reactive<
+  Record<number, WmsMovementOrderDetailApi.MovementOrderDetail[]>
+>({});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: MovementOrderForm,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: MovementOrderDetail,
+  destroyOnClose: true,
+});
+
+/** 清空展开明细缓存 */
+function clearDetailMap() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  clearDetailMap();
+  gridApi.query();
+}
+
+/** 创建移库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑移库单 */
+function handleEdit(row: WmsMovementOrderApi.MovementOrder) {
+  formModalApi.setData({ id: row.id!, type: 'update' }).open();
+}
+
+/** 查看移库单详情 */
+function handleDetail(row: WmsMovementOrderApi.MovementOrder) {
+  detailModalApi.setData({ id: row.id! }).open();
+}
+
+/** 计算单据明细金额 */
+function getDetailTotalPrice(
+  detail: WmsMovementOrderDetailApi.MovementOrderDetail,
+) {
+  return detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price);
+}
+
+/** 获取已展开行的明细 */
+function getExpandedDetails(row: WmsMovementOrderApi.MovementOrder) {
+  return detailMap[row.id!] || [];
+}
+
+/** 展开列表行时懒加载移库明细 */
+async function handleExpandChange(
+  row: WmsMovementOrderApi.MovementOrder,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  delete detailMap[row.id!];
+  detailMap[row.id!] = await getMovementOrderDetailListByOrderId(row.id!);
+}
+
+/** 判断移库单是否可修改 */
+function canUpdateMovementOrder(status?: number) {
+  return status !== undefined && OrderUpdateStatusList.includes(status);
+}
+
+/** 判断移库单是否可删除 */
+function canDeleteMovementOrder(status?: number) {
+  return status !== undefined && OrderDeleteStatusList.includes(status);
+}
+
+/** 获取修改按钮禁用提示 */
+function getMovementOrderUpdateTip(status?: number) {
+  if (canUpdateMovementOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已移库，无法修改';
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改';
+  }
+  return '当前状态无法修改';
+}
+
+/** 获取删除按钮禁用提示 */
+function getMovementOrderDeleteTip(status?: number) {
+  if (canDeleteMovementOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已移库，无法删除';
+  }
+  return '当前状态无法删除';
+}
+
+/** 删除移库单 */
+async function handleDelete(row: WmsMovementOrderApi.MovementOrder) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.no]),
+    duration: 0,
+  });
+  try {
+    await deleteMovementOrder(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出移库单 */
+async function handleExport() {
+  const data = await exportMovementOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '移库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    expandConfig: {
+      padding: true,
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMovementOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsMovementOrderApi.MovementOrder>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: WmsMovementOrderApi.MovementOrder;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="【单据】移库" url="https://doc.iocoder.cn/wms/order/movement/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <MovementOrderPrint ref="printRef" />
+
+    <Grid table-title="移库单列表">
+      <template #expand_content="{ row }">
+        <VxeTable
+          :data="getExpandedDetails(row)"
+          border
+          :show-overflow="true"
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ detail.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ detail.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="移库数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.quantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="单价(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(detail.price) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="金额(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(getDetailTotalPrice(detail)) || '-' }}
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['移库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:movement-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:movement-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div>
+          单号：
+          <a class="text-primary" @click="handleDetail(row)">{{ row.no }}</a>
+        </div>
+      </template>
+      <template #quantityAmount="{ row }">
+        <div class="flex items-center justify-between">
+          <span>数量：</span>
+          <span>{{ formatQuantity(row.totalQuantity) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>金额：</span>
+          <span>{{ formatPrice(row.totalPrice) }}</span>
+        </div>
+      </template>
+      <template #operateInfo="{ row }">
+        <div>
+          创建：{{ formatDateTime(row.createTime) || '-' }} /
+          {{ row.creatorName || row.creator || '-' }}
+        </div>
+        <div>
+          更新：{{ formatDateTime(row.updateTime) || '-' }} /
+          {{ row.updaterName || row.updater || '-' }}
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              disabled: !canUpdateMovementOrder(row.status),
+              tooltip: getMovementOrderUpdateTip(row.status),
+              auth: ['wms:movement-order:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: !canDeleteMovementOrder(row.status),
+              tooltip: getMovementOrderDeleteTip(row.status),
+              auth: ['wms:movement-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '打印',
+              type: 'link',
+              auth: ['wms:movement-order:query'],
+              onClick: () => printRef?.print(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/movement/modules/detail.vue b/apps/web-antd/src/views/wms/order/movement/modules/detail.vue
new file mode 100644
index 000000000..b4d066295
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/movement/modules/detail.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { WmsMovementOrderApi } from '#/api/wms/order/movement';
+import type { WmsMovementOrderDetailApi } from '#/api/wms/order/movement/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  getMovementOrder,
+  getMovementOrderDetailListByOrderId,
+} from '#/api/wms/order/movement';
+import { useDescription } from '#/components/description';
+import {
+  formatPrice,
+  formatQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+import { getDetailFooter, useDetailSchema } from '../data';
+
+interface DetailRow extends WmsMovementOrderDetailApi.MovementOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsMovementOrderDetail' });
+
+const detailData = ref<WmsMovementOrderApi.MovementOrder>({});
+
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: useDetailSchema(),
+  useCard: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      detailData.value = {};
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const order = await getMovementOrder(data.id);
+      const details =
+        order.details || (await getMovementOrderDetailListByOrderId(data.id));
+      detailData.value = { ...order, details };
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="移库单详情"
+    class="w-2/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mx-4 space-y-4">
+      <Descriptions :data="detailData" />
+      <VxeTable
+        :data="detailRows"
+        border
+        empty-text="暂无商品明细"
+        :footer-method="getDetailFooter"
+        :show-overflow="true"
+        show-footer
+        size="small"
+      >
+        <VxeColumn title="商品信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.itemName || '-' }}</div>
+            <div v-if="row.itemCode" class="text-xs text-gray-500">
+              商品编号：{{ row.itemCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="规格信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.skuName || '-' }}</div>
+            <div v-if="row.skuCode" class="text-xs text-gray-500">
+              规格编号：{{ row.skuCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="quantity" title="数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.quantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn title="单价(元)" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.price) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="totalPrice" title="金额(元)" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.totalPrice) || '-' }}
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/movement/modules/form.vue b/apps/web-antd/src/views/wms/order/movement/modules/form.vue
new file mode 100644
index 000000000..711f2ac40
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/movement/modules/form.vue
@@ -0,0 +1,543 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { WmsMovementOrderApi } from '#/api/wms/order/movement';
+import type { WmsMovementOrderDetailApi } from '#/api/wms/order/movement/detail';
+import type { InventorySelectRow } from '#/views/wms/inventory/components/inventory-select.vue';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEqual } from '@vben/utils';
+
+import { InputNumber, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { TableAction, VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  cancelMovementOrder,
+  completeMovementOrder,
+  createMovementOrder,
+  getMovementOrder,
+  getMovementOrderDetailListByOrderId,
+  updateMovementOrder,
+} from '#/api/wms/order/movement';
+import { $t } from '#/locales';
+import { WmsInventorySelect } from '#/views/wms/inventory/components';
+import {
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  dividePrice,
+  formatQuantity,
+  multiplyPrice,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+import { generateOrderNo } from '#/views/wms/utils/order';
+
+import { getDetailFooter, useFormSchema } from '../data';
+
+interface DetailRow extends WmsMovementOrderDetailApi.MovementOrderDetail {
+  seq: number;
+}
+
+defineOptions({ name: 'WmsMovementOrderForm' });
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const formData = ref<WmsMovementOrderApi.MovementOrder>({});
+const formMode = ref('create');
+const originalSubmitData = ref<WmsMovementOrderApi.MovementOrder>();
+const details = ref<DetailRow[]>([]);
+const detailTableRef = ref<VxeTableInstance>();
+const inventorySelectRef = ref<InstanceType<typeof WmsInventorySelect>>();
+let detailSeq = 0; // 明细行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+
+const getTitle = computed(() => {
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['移库单'])
+    : $t('ui.actionTitle.create', ['移库单']);
+});
+
+const isPrepareOrder = computed(() => {
+  return (
+    !formData.value?.id ||
+    (formData.value.status !== undefined &&
+      OrderUpdateStatusList.includes(formData.value.status))
+  );
+});
+const isSavedPrepareOrder = computed(() => {
+  return (
+    !!formData.value?.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+  );
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema({
+    onSourceWarehouseChange: handleSourceWarehouseChange,
+    onTargetWarehouseChange: handleTargetWarehouseChange,
+  }),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 标准化明细行，补齐本地序号和金额 */
+function normalizeDetail(
+  detail: WmsMovementOrderDetailApi.MovementOrderDetail,
+): DetailRow {
+  detailSeq += 1;
+  return {
+    ...detail,
+    seq: detailSeq,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  };
+}
+
+/** 根据库存构建新的移库明细 */
+function buildDetail(inventory: InventorySelectRow): DetailRow {
+  return normalizeDetail({
+    availableQuantity: inventory.availableQuantity,
+    id: undefined,
+    itemCode: inventory.itemCode,
+    itemId: inventory.itemId,
+    itemName: inventory.itemName,
+    price: undefined,
+    quantity: undefined,
+    skuCode: inventory.skuCode,
+    skuId: inventory.skuId,
+    skuName: inventory.skuName,
+    sourceWarehouseId: inventory.warehouseId,
+    sourceWarehouseName: inventory.warehouseName,
+    targetWarehouseId: formData.value.targetWarehouseId,
+    targetWarehouseName: formData.value.targetWarehouseName,
+    totalPrice: undefined,
+    unit: inventory.unit,
+  });
+}
+
+/** 设置移库明细 */
+function setDetails(list?: WmsMovementOrderDetailApi.MovementOrderDetail[]) {
+  detailSeq = 0;
+  details.value = (list || []).map((detail) => normalizeDetail(detail));
+  void refreshDetailFooter();
+}
+
+/** 刷新明细合计行 */
+async function refreshDetailFooter() {
+  await nextTick();
+  await detailTableRef.value?.updateFooter();
+}
+
+/** 添加商品明细 */
+async function handleAddDetail() {
+  const values = (await formApi.getValues()) as WmsMovementOrderApi.MovementOrder;
+  if (!values.sourceWarehouseId || !values.targetWarehouseId) {
+    message.warning('请先选择来源仓库和目标仓库');
+    return;
+  }
+  formData.value.sourceWarehouseId = values.sourceWarehouseId;
+  await nextTick();
+  inventorySelectRef.value?.open(getSelectedInventoryKeys());
+}
+
+/** 选择库存 */
+function handleSelectInventory(inventories: InventorySelectRow[]) {
+  if (inventories.length === 0) {
+    return;
+  }
+  let changed = false;
+  for (const inventory of inventories) {
+    if (!inventory.skuId || isInventorySelected(inventory)) {
+      continue;
+    }
+    details.value.push(buildDetail(inventory));
+    changed = true;
+  }
+  if (changed) {
+    void refreshDetailFooter();
+  }
+}
+
+/** 判断库存是否已选择 */
+function isInventorySelected(inventory: InventorySelectRow) {
+  return details.value.some((detail) => {
+    return (
+      detail.skuId === inventory.skuId &&
+      detail.sourceWarehouseId === inventory.warehouseId
+    );
+  });
+}
+
+/** 获得已选择的库存标识 */
+function getSelectedInventoryKeys() {
+  return details.value
+    .map((detail) =>
+      detail.skuId && detail.sourceWarehouseId
+        ? `${detail.skuId}-${detail.sourceWarehouseId}`
+        : undefined,
+    )
+    .filter((key): key is string => !!key);
+}
+
+/** 删除商品明细 */
+function handleDeleteDetail(row: DetailRow) {
+  const index = details.value.findIndex((detail) => detail.seq === row.seq);
+  if (index !== -1) {
+    details.value.splice(index, 1);
+    void refreshDetailFooter();
+  }
+}
+
+/** 来源仓库变化时清空移库明细 */
+function handleSourceWarehouseChange(warehouse?: WmsWarehouseApi.Warehouse) {
+  formData.value.sourceWarehouseId = warehouse?.id;
+  formData.value.sourceWarehouseName = warehouse?.name;
+  setDetails([]);
+}
+
+/** 目标仓库变化时同步到移库明细 */
+function handleTargetWarehouseChange(warehouse?: WmsWarehouseApi.Warehouse) {
+  formData.value.targetWarehouseId = warehouse?.id;
+  formData.value.targetWarehouseName = warehouse?.name;
+  for (const detail of details.value) {
+    detail.targetWarehouseId = warehouse?.id;
+    detail.targetWarehouseName = warehouse?.name;
+  }
+}
+
+/** 明细数量变化 */
+function handleDetailQuantityChange(detail: DetailRow) {
+  if (detail.price !== undefined && detail.price !== null) {
+    detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+    void refreshDetailFooter();
+    return;
+  }
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 明细单价变化 */
+function handleDetailPriceChange(detail: DetailRow) {
+  detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+  void refreshDetailFooter();
+}
+
+/** 明细金额变化 */
+function handleDetailTotalPriceChange(detail: DetailRow) {
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 校验商品明细 */
+async function validateDetails(required = false) {
+  const values = (await formApi.getValues()) as WmsMovementOrderApi.MovementOrder;
+  if (values.sourceWarehouseId === values.targetWarehouseId) {
+    message.error('来源仓库和目标仓库不能相同');
+    return false;
+  }
+  if (details.value.length === 0) {
+    if (required) {
+      message.error('至少包含一条移库明细');
+      return false;
+    }
+    return true;
+  }
+  for (let index = 0; index < details.value.length; index += 1) {
+    const detail = details.value[index]!;
+    if (!detail.skuId) {
+      message.error(`第 ${index + 1} 行明细请选择商品规格`);
+      return false;
+    }
+    if (!detail.quantity || detail.quantity <= 0) {
+      message.error(`第 ${index + 1} 行明细移库数量必须大于 0`);
+      return false;
+    }
+    if (
+      detail.availableQuantity !== undefined &&
+      detail.quantity > detail.availableQuantity
+    ) {
+      message.error(`第 ${index + 1} 行明细移库数量不能大于可用库存`);
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 构建提交用的明细数据 */
+function buildSubmitDetails() {
+  return details.value.map((row) => {
+    const { seq: _seq, ...detail } = row;
+    return detail;
+  });
+}
+
+/** 构建提交用的单据数据 */
+async function buildSubmitData(): Promise<WmsMovementOrderApi.MovementOrder> {
+  const values = (await formApi.getValues()) as WmsMovementOrderApi.MovementOrder;
+  const {
+    details: _details,
+    totalPrice: _totalPrice,
+    totalQuantity: _totalQuantity,
+    ...order
+  } = formData.value;
+  return {
+    ...order,
+    ...values,
+    details: buildSubmitDetails(),
+  };
+}
+
+/** 完成移库 */
+async function handleFormComplete() {
+  const { valid } = await formApi.validate();
+  if (!valid || !(await validateDetails(true)) || !formData.value?.id) {
+    return;
+  }
+  await confirm('确认完成移库？完成后将更新库存。');
+  modalApi.lock();
+  try {
+    const data = await buildSubmitData();
+    if (!isEqual(data, originalSubmitData.value)) {
+      await updateMovementOrder(data);
+    }
+    await completeMovementOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('移库成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 作废移库单 */
+async function handleFormCancel() {
+  if (!formData.value?.id) {
+    return;
+  }
+  await confirm('确认作废该移库单？作废后不可恢复。');
+  modalApi.lock();
+  try {
+    await cancelMovementOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('作废成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid || !(await validateDetails(false)) || !isPrepareOrder.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await buildSubmitData();
+    try {
+      await (formMode.value === 'update'
+        ? updateMovementOrder(data)
+        : createMovementOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {};
+      originalSubmitData.value = undefined;
+      setDetails([]);
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      type?: string;
+    }>();
+    formMode.value = data?.type || (data?.id ? 'update' : 'create');
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        // 加载数据
+        const order = await getMovementOrder(data.id);
+        const orderDetails =
+          order.details || (await getMovementOrderDetailListByOrderId(data.id));
+        formData.value = { ...order, details: orderDetails };
+        setDetails(orderDetails);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+        await nextTick();
+        originalSubmitData.value = await buildSubmitData();
+      } finally {
+        modalApi.unlock();
+      }
+      return;
+    }
+    // 初始化新增表单
+    formData.value = {
+      details: [],
+      no: generateOrderNo('YK'),
+      status: OrderStatusEnum.PREPARE,
+    };
+    setDetails([]);
+    await formApi.setValues(formData.value);
+    await nextTick();
+    originalSubmitData.value = await buildSubmitData();
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="isPrepareOrder"
+  >
+    <div class="mx-4">
+      <Form />
+      <div class="mt-4">
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-semibold">移库明细</span>
+          <TableAction
+            :actions="[
+              {
+                label: '添加商品',
+                onClick: handleAddDetail,
+                type: 'primary',
+              },
+            ]"
+          />
+        </div>
+        <VxeTable
+          ref="detailTableRef"
+          :data="details"
+          border
+          empty-text="暂无商品明细"
+          :footer-method="getDetailFooter"
+          :show-overflow="true"
+          show-footer
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="210">
+            <template #default="{ row }">
+              <div>{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ row.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="210">
+            <template #default="{ row }">
+              <div>{{ row.skuName || '-' }}</div>
+              <div v-if="row.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ row.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn field="availableQuantity" title="可用库存" align="right" width="120">
+            <template #default="{ row }">
+              {{ formatQuantity(row.availableQuantity) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn field="quantity" title="移库数量" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.quantity"
+                :controls="false"
+                :min="0"
+                :precision="QUANTITY_PRECISION"
+                class="!w-full"
+                placeholder="数量"
+                @change="handleDetailQuantityChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="price" title="单价(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.price"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="单价"
+                @change="handleDetailPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="totalPrice" title="金额(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.totalPrice"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="金额"
+                @change="handleDetailTotalPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn title="操作" align="center" fixed="right" width="90">
+            <template #default="{ row }">
+              <TableAction
+                :actions="[
+                  {
+                    label: '删除',
+                    type: 'link',
+                    danger: true,
+                    onClick: handleDeleteDetail.bind(null, row),
+                  },
+                ]"
+              />
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <div v-if="isSavedPrepareOrder" class="flex flex-auto items-center gap-2">
+        <TableAction
+          :actions="[
+            {
+              label: '完成移库',
+              type: 'primary',
+              auth: ['wms:movement-order:complete'],
+              onClick: handleFormComplete,
+            },
+            {
+              label: '作废',
+              type: 'primary',
+              danger: true,
+              auth: ['wms:movement-order:cancel'],
+              onClick: handleFormCancel,
+            },
+          ]"
+        />
+      </div>
+    </template>
+    <WmsInventorySelect
+      ref="inventorySelectRef"
+      :warehouse-id="formData.sourceWarehouseId"
+      @change="handleSelectInventory"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/movement/modules/print.vue b/apps/web-antd/src/views/wms/order/movement/modules/print.vue
new file mode 100644
index 000000000..455bcc3ad
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/movement/modules/print.vue
@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import type { WmsMovementOrderApi } from '#/api/wms/order/movement';
+import type { WmsMovementOrderDetailApi } from '#/api/wms/order/movement/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Barcode, BarcodeFormatEnum } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import {
+  getMovementOrder,
+  getMovementOrderDetailListByOrderId,
+} from '#/api/wms/order/movement';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+interface PrintRow extends WmsMovementOrderDetailApi.MovementOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsMovementOrderPrint' });
+
+const printData = ref<WmsMovementOrderApi.MovementOrder>({});
+const tableColumnCount = 5;
+
+const printRows = computed<PrintRow[]>(() =>
+  (printData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+/** 等待条码和打印 DOM 完成绘制，避免浏览器打印到旧内容 */
+function waitForPaint() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+/** 退出打印模式，恢复当前页面显示 */
+function removePrintMode() {
+  document.body.classList.remove('wms-movement-order-printing');
+}
+
+/** 获取打印用字典文案，空值统一显示为横杠 */
+function getPrintDictLabel(dictType: string, value?: number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  return getDictLabel(dictType, value) || '-';
+}
+
+/** 打印移库单：加载数据后只展示打印区域，再调用浏览器打印 */
+async function print(id: number) {
+  const order = await getMovementOrder(id);
+  const details = order.details || (await getMovementOrderDetailListByOrderId(id));
+  printData.value = { ...order, details };
+  await nextTick();
+  await waitForPaint();
+  document.body.classList.add('wms-movement-order-printing');
+  window.addEventListener('afterprint', removePrintMode, { once: true });
+  window.print();
+}
+
+defineExpose({ print });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      id="wmsMovementOrderPrint"
+      class="wms-movement-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white text-[#303133] opacity-0"
+    >
+      <div class="relative mb-2">
+        <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
+          移库单
+        </h2>
+        <div v-if="printData.no" class="absolute right-0 top-0">
+          <Barcode
+            :content="printData.no"
+            :display-value="false"
+            :format="BarcodeFormatEnum.CODE39"
+            :height="40"
+            :width="180"
+          />
+        </div>
+      </div>
+      <div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
+        <div>移库单号：{{ printData.no || '-' }}</div>
+        <div>来源仓库：{{ printData.sourceWarehouseName || '-' }}</div>
+        <div>目标仓库：{{ printData.targetWarehouseName || '-' }}</div>
+        <div>
+          移库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
+        </div>
+        <div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
+        <div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
+        <div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
+        <div class="col-span-3 grid grid-cols-2 gap-x-6">
+          <div>
+            创建：{{ formatDateTime(printData.createTime) || '-' }} /
+            {{ printData.creatorName || printData.creator || '-' }}
+          </div>
+          <div>
+            更新：{{ formatDateTime(printData.updateTime) || '-' }} /
+            {{ printData.updaterName || printData.updater || '-' }}
+          </div>
+        </div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-[13px] leading-[1.5]">
+        <thead>
+          <tr>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              商品信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              规格信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              数量
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              单价(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              金额(元)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printRows" :key="detail.id || detail.skuId">
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs">
+                编号：{{ detail.itemCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs">
+                编号：{{ detail.skuCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.price) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.totalPrice) || '-' }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length > 0">
+            <td
+              class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
+              colspan="2"
+            >
+              合计
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumPrice(printRows, (detail) => detail.totalPrice) }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length === 0">
+            <td
+              class="border border-solid border-[#dcdfe6] p-2 text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+@page {
+  margin: 8mm 10mm;
+}
+
+@media print {
+  :global(body.wms-movement-order-printing) {
+    -webkit-print-color-adjust: exact;
+    margin: 0 !important;
+    padding: 0 !important;
+    print-color-adjust: exact;
+  }
+
+  :global(body.wms-movement-order-printing *) {
+    visibility: hidden !important;
+  }
+
+  :global(body.wms-movement-order-printing .wms-movement-order-print),
+  :global(body.wms-movement-order-printing .wms-movement-order-print *) {
+    visibility: visible !important;
+  }
+
+  :global(body.wms-movement-order-printing .wms-movement-order-print) {
+    pointer-events: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: auto;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/wms/order/receipt/data.ts b/apps/web-antd/src/views/wms/order/receipt/data.ts
new file mode 100644
index 000000000..ad6cc502f
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/receipt/data.ts
@@ -0,0 +1,427 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { buildNumberRangeSchema } from '#/components/number-range-input';
+import { getRangePickerDefaultProps } from '#/utils';
+import { WmsMerchantSelect } from '#/views/wms/md/merchant/components';
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入入库单号',
+      },
+      fieldName: 'no',
+      label: '入库单号',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入业务单号',
+      },
+      fieldName: 'bizOrderNo',
+      label: '业务单号',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_STATUS, 'number'),
+        placeholder: '请选择单据状态',
+      },
+      fieldName: 'status',
+      label: '单据状态',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'warehouseId',
+      label: '仓库',
+    },
+    {
+      component: markRaw(WmsMerchantSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+        supplier: true,
+      },
+      fieldName: 'merchantId',
+      label: '供应商',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+    },
+    buildNumberRangeSchema(
+      '数量',
+      'totalQuantityRange',
+      'totalQuantityMin',
+      'totalQuantityMax',
+      QUANTITY_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '总金额',
+      'totalPriceRange',
+      'totalPriceMin',
+      'totalPriceMax',
+      PRICE_PRECISION,
+    ),
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, 'number'),
+        placeholder: '请选择入库类型',
+      },
+      fieldName: 'type',
+      label: '入库类型',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择创建用户',
+        showSearch: true,
+        valueField: 'id',
+      },
+      fieldName: 'creator',
+      label: '创建用户',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择更新用户',
+        showSearch: true,
+        valueField: 'id',
+      },
+      fieldName: 'updater',
+      label: '更新用户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'updateTime',
+      label: '更新时间',
+    },
+  ];
+}
+
+/** 列表表格列 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      fixed: 'left',
+      slots: { content: 'expand_content' },
+      type: 'expand',
+      width: 48,
+    },
+    {
+      field: 'no',
+      fixed: 'left',
+      slots: { default: 'no' },
+      title: '单号/业务单号',
+      width: 260,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_STATUS },
+      },
+      field: 'status',
+      fixed: 'left',
+      title: '入库状态',
+      width: 110,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_RECEIPT_ORDER_TYPE },
+      },
+      field: 'type',
+      title: '入库类型',
+      width: 120,
+    },
+    {
+      field: 'warehouseName',
+      minWidth: 180,
+      title: '仓库',
+    },
+    {
+      field: 'quantityAmount',
+      minWidth: 180,
+      slots: { default: 'quantityAmount' },
+      title: '总数量/总金额(元)',
+    },
+    {
+      field: 'merchantName',
+      minWidth: 160,
+      title: '供应商',
+    },
+    {
+      field: 'operateInfo',
+      minWidth: 260,
+      slots: { default: 'operateInfo' },
+      title: '操作信息',
+    },
+    {
+      field: 'remark',
+      minWidth: 160,
+      title: '备注',
+    },
+    {
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+      title: '操作',
+      width: 220,
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '入库单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'type',
+      label: '入库类型',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_RECEIPT_ORDER_TYPE,
+              value: val,
+            }),
+    },
+    {
+      field: 'warehouseName',
+      label: '仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'status',
+      label: '单据状态',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_ORDER_STATUS,
+              value: val,
+            }),
+    },
+    {
+      field: 'orderTime',
+      label: '单据日期',
+      render: (val) => formatDate(val, 'YYYY-MM-DD') || '-',
+    },
+    {
+      field: 'merchantName',
+      label: '供应商',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'bizOrderNo',
+      label: '业务单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'totalQuantity',
+      label: '总数量',
+      render: (val) => formatQuantity(val) || '-',
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+      render: (val, data) => val || data?.creator || '-',
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'updaterName',
+      label: '更新人',
+      render: (val, data) => val || data?.updater || '-',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      render: (val) => val || '-',
+      span: 2,
+    },
+  ];
+}
+
+/** 表单的配置项 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入入库单号',
+      },
+      fieldName: 'no',
+      label: '入库单号',
+      rules: z.string().min(1, '入库单号不能为空').max(64),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, 'number'),
+        placeholder: '请选择入库类型',
+      },
+      fieldName: 'type',
+      label: '入库类型',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'warehouseId',
+      label: '仓库',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择单据日期',
+        valueFormat: 'x',
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsMerchantSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+        supplier: true,
+      },
+      fieldName: 'merchantId',
+      label: '供应商',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入业务单号',
+      },
+      fieldName: 'bizOrderNo',
+      label: '业务单号',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+      fieldName: 'remark',
+      formItemClass: 'col-span-2',
+      label: '备注',
+    },
+  ];
+}
+
+interface ReceiptOrderDetailFooterRow {
+  quantity?: number;
+  totalPrice?: number;
+}
+type ReceiptOrderDetailFooterColumn = Pick<
+  NonNullable<NonNullable<VxeTableGridOptions['columns']>[number]>,
+  'field'
+>;
+
+/** 明细表格的合计行 */
+export function getDetailFooter({
+  columns,
+  data,
+}: {
+  columns: ReceiptOrderDetailFooterColumn[];
+  data: ReceiptOrderDetailFooterRow[];
+}) {
+  return [
+    columns.map((column, index) => {
+      if (index === 0) {
+        return '合计';
+      }
+      if (column.field === 'quantity') {
+        return formatSumQuantity(data, (detail) => detail.quantity);
+      }
+      if (column.field === 'totalPrice') {
+        return formatSumPrice(data, (detail) => detail.totalPrice);
+      }
+      return '';
+    }),
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/order/receipt/index.vue b/apps/web-antd/src/views/wms/order/receipt/index.vue
new file mode 100644
index 000000000..ea12bf79b
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/receipt/index.vue
@@ -0,0 +1,345 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { reactive, ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import {
+  ACTION_ICON,
+  TableAction,
+  useVbenVxeGrid,
+  VxeColumn,
+  VxeTable,
+} from '#/adapter/vxe-table';
+import {
+  deleteReceiptOrder,
+  exportReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+  getReceiptOrderPage,
+} from '#/api/wms/order/receipt';
+import { $t } from '#/locales';
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import { formatPrice, formatQuantity, multiplyPrice } from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import ReceiptOrderDetail from './modules/detail.vue';
+import ReceiptOrderForm from './modules/form.vue';
+import ReceiptOrderPrint from './modules/print.vue';
+
+defineOptions({ name: 'WmsReceiptOrder' });
+
+const printRef = ref<InstanceType<typeof ReceiptOrderPrint>>();
+const detailMap = reactive<
+  Record<number, WmsReceiptOrderDetailApi.ReceiptOrderDetail[]>
+>({});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ReceiptOrderForm,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: ReceiptOrderDetail,
+  destroyOnClose: true,
+});
+
+/** 清空展开明细缓存 */
+function clearDetailMap() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  clearDetailMap();
+  gridApi.query();
+}
+
+/** 创建入库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑入库单 */
+function handleEdit(row: WmsReceiptOrderApi.ReceiptOrder) {
+  formModalApi.setData({ id: row.id!, type: 'update' }).open();
+}
+
+/** 查看入库单详情 */
+function handleDetail(row: WmsReceiptOrderApi.ReceiptOrder) {
+  detailModalApi.setData({ id: row.id! }).open();
+}
+
+/** 计算单据明细金额 */
+function getDetailTotalPrice(
+  detail: WmsReceiptOrderDetailApi.ReceiptOrderDetail,
+) {
+  return detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price);
+}
+
+/** 获取已展开行的明细 */
+function getExpandedDetails(row: WmsReceiptOrderApi.ReceiptOrder) {
+  return detailMap[row.id!] || [];
+}
+
+/** 展开列表行时懒加载入库明细 */
+async function handleExpandChange(
+  row: WmsReceiptOrderApi.ReceiptOrder,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  delete detailMap[row.id!];
+  detailMap[row.id!] = await getReceiptOrderDetailListByOrderId(row.id!);
+}
+
+/** 判断入库单是否可修改 */
+function canUpdateReceiptOrder(status?: number) {
+  return status !== undefined && OrderUpdateStatusList.includes(status);
+}
+
+/** 判断入库单是否可删除 */
+function canDeleteReceiptOrder(status?: number) {
+  return status !== undefined && OrderDeleteStatusList.includes(status);
+}
+
+/** 获取修改按钮禁用提示 */
+function getReceiptOrderUpdateTip(status?: number) {
+  if (canUpdateReceiptOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已入库，无法修改';
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改';
+  }
+  return '当前状态无法修改';
+}
+
+/** 获取删除按钮禁用提示 */
+function getReceiptOrderDeleteTip(status?: number) {
+  if (canDeleteReceiptOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已入库，无法删除';
+  }
+  return '当前状态无法删除';
+}
+
+/** 删除入库单 */
+async function handleDelete(row: WmsReceiptOrderApi.ReceiptOrder) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.no]),
+    duration: 0,
+  });
+  try {
+    await deleteReceiptOrder(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出入库单 */
+async function handleExport() {
+  const data = await exportReceiptOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '入库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    expandConfig: {
+      padding: true,
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceiptOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsReceiptOrderApi.ReceiptOrder>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: WmsReceiptOrderApi.ReceiptOrder;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="【单据】入库" url="https://doc.iocoder.cn/wms/order/receipt/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <ReceiptOrderPrint ref="printRef" />
+
+    <Grid table-title="入库单列表">
+      <template #expand_content="{ row }">
+        <VxeTable
+          :data="getExpandedDetails(row)"
+          border
+          :show-overflow="true"
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ detail.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ detail.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="入库数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.quantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="单价(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(detail.price) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="金额(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(getDetailTotalPrice(detail)) || '-' }}
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['入库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:receipt-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:receipt-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div>
+          单号：
+          <a class="text-primary" @click="handleDetail(row)">{{ row.no }}</a>
+        </div>
+        <div v-if="row.bizOrderNo" class="text-xs text-gray-500">
+          业务：{{ row.bizOrderNo }}
+        </div>
+      </template>
+      <template #quantityAmount="{ row }">
+        <div class="flex items-center justify-between">
+          <span>数量：</span>
+          <span>{{ formatQuantity(row.totalQuantity) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>金额：</span>
+          <span>{{ formatPrice(row.totalPrice) }}</span>
+        </div>
+      </template>
+      <template #operateInfo="{ row }">
+        <div>
+          创建：{{ formatDateTime(row.createTime) || '-' }} /
+          {{ row.creatorName || row.creator || '-' }}
+        </div>
+        <div>
+          更新：{{ formatDateTime(row.updateTime) || '-' }} /
+          {{ row.updaterName || row.updater || '-' }}
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              disabled: !canUpdateReceiptOrder(row.status),
+              tooltip: getReceiptOrderUpdateTip(row.status),
+              auth: ['wms:receipt-order:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: !canDeleteReceiptOrder(row.status),
+              tooltip: getReceiptOrderDeleteTip(row.status),
+              auth: ['wms:receipt-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '打印',
+              type: 'link',
+              auth: ['wms:receipt-order:query'],
+              onClick: () => printRef?.print(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/receipt/modules/detail.vue b/apps/web-antd/src/views/wms/order/receipt/modules/detail.vue
new file mode 100644
index 000000000..5fbe78a1a
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/receipt/modules/detail.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  getReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+} from '#/api/wms/order/receipt';
+import { useDescription } from '#/components/description';
+import {
+  formatPrice,
+  formatQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+import { getDetailFooter, useDetailSchema } from '../data';
+
+interface DetailRow extends WmsReceiptOrderDetailApi.ReceiptOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsReceiptOrderDetail' });
+
+const detailData = ref<WmsReceiptOrderApi.ReceiptOrder>({});
+
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: useDetailSchema(),
+  useCard: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      detailData.value = {};
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const order = await getReceiptOrder(data.id);
+      const details =
+        order.details || (await getReceiptOrderDetailListByOrderId(data.id));
+      detailData.value = { ...order, details };
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="入库单详情"
+    class="w-2/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mx-4 space-y-4">
+      <Descriptions :data="detailData" />
+      <VxeTable
+        :data="detailRows"
+        border
+        empty-text="暂无商品明细"
+        :footer-method="getDetailFooter"
+        :show-overflow="true"
+        show-footer
+        size="small"
+      >
+        <VxeColumn title="商品信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.itemName || '-' }}</div>
+            <div v-if="row.itemCode" class="text-xs text-gray-500">
+              商品编号：{{ row.itemCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="规格信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.skuName || '-' }}</div>
+            <div v-if="row.skuCode" class="text-xs text-gray-500">
+              规格编号：{{ row.skuCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="quantity" title="数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.quantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="unit" title="单位" align="center" width="100" />
+        <VxeColumn title="单价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.price) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="totalPrice" title="总价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.totalPrice) || '-' }}
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/receipt/modules/form.vue b/apps/web-antd/src/views/wms/order/receipt/modules/form.vue
new file mode 100644
index 000000000..00d53560b
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/receipt/modules/form.vue
@@ -0,0 +1,481 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEqual } from '@vben/utils';
+
+import { InputNumber, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { TableAction, VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  cancelReceiptOrder,
+  completeReceiptOrder,
+  createReceiptOrder,
+  getReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+  updateReceiptOrder,
+} from '#/api/wms/order/receipt';
+import { $t } from '#/locales';
+import { WmsItemSkuSelect } from '#/views/wms/md/item/sku/components';
+import {
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  dividePrice,
+  multiplyPrice,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+import { generateOrderNo } from '#/views/wms/utils/order';
+
+import { getDetailFooter, useFormSchema } from '../data';
+
+interface DetailRow extends WmsReceiptOrderDetailApi.ReceiptOrderDetail {
+  seq: number;
+}
+
+defineOptions({ name: 'WmsReceiptOrderForm' });
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const formData = ref<WmsReceiptOrderApi.ReceiptOrder>({});
+const formMode = ref('create');
+const originalSubmitData = ref<WmsReceiptOrderApi.ReceiptOrder>();
+const details = ref<DetailRow[]>([]);
+const detailTableRef = ref<VxeTableInstance>();
+const skuSelectRef = ref<InstanceType<typeof WmsItemSkuSelect>>();
+let detailSeq = 0; // 明细行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+
+const getTitle = computed(() => {
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['入库单'])
+    : $t('ui.actionTitle.create', ['入库单']);
+});
+
+const isPrepareOrder = computed(() => {
+  return (
+    !formData.value?.id ||
+    (formData.value.status !== undefined &&
+      OrderUpdateStatusList.includes(formData.value.status))
+  );
+});
+const isSavedPrepareOrder = computed(() => {
+  return (
+    !!formData.value?.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+  );
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 标准化明细行，补齐本地序号和金额 */
+function normalizeDetail(
+  detail: WmsReceiptOrderDetailApi.ReceiptOrderDetail,
+): DetailRow {
+  detailSeq += 1;
+  return {
+    ...detail,
+    seq: detailSeq,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  };
+}
+
+/** 根据商品 SKU 构建新的入库明细 */
+function buildDetail(sku: WmsItemSkuApi.ItemSku): DetailRow {
+  return normalizeDetail({
+    id: undefined,
+    itemCode: sku.itemCode,
+    itemId: sku.itemId,
+    itemName: sku.itemName,
+    price: undefined,
+    quantity: undefined,
+    skuCode: sku.code,
+    skuId: sku.id,
+    skuName: sku.name,
+    totalPrice: undefined,
+    unit: sku.unit,
+  });
+}
+
+/** 设置入库明细 */
+function setDetails(list?: WmsReceiptOrderDetailApi.ReceiptOrderDetail[]) {
+  detailSeq = 0;
+  details.value = (list || []).map((detail) => normalizeDetail(detail));
+  void refreshDetailFooter();
+}
+
+/** 刷新明细合计行 */
+async function refreshDetailFooter() {
+  await nextTick();
+  await detailTableRef.value?.updateFooter();
+}
+
+/** 获取已选择的 SKU 编号，避免重复选择 */
+function getSelectedSkuIds() {
+  return details.value
+    .map((detail) => detail.skuId)
+    .filter((id): id is number => !!id);
+}
+
+/** 添加商品明细 */
+async function handleAddDetail() {
+  const values = (await formApi.getValues()) as WmsReceiptOrderApi.ReceiptOrder;
+  if (!values.warehouseId) {
+    message.warning('请先选择仓库');
+    return;
+  }
+  skuSelectRef.value?.open(getSelectedSkuIds());
+}
+
+/** 选择商品 SKU */
+function handleSelectSku(skus: WmsItemSkuApi.ItemSku[]) {
+  if (skus.length === 0) {
+    return;
+  }
+  const selectedSkuIds = new Set(getSelectedSkuIds());
+  let changed = false;
+  for (const sku of skus) {
+    if (!sku.id || selectedSkuIds.has(sku.id)) {
+      continue;
+    }
+    details.value.push(buildDetail(sku));
+    selectedSkuIds.add(sku.id);
+    changed = true;
+  }
+  if (changed) {
+    void refreshDetailFooter();
+  }
+}
+
+/** 删除商品明细 */
+function handleDeleteDetail(row: DetailRow) {
+  const index = details.value.findIndex((detail) => detail.seq === row.seq);
+  if (index !== -1) {
+    details.value.splice(index, 1);
+    void refreshDetailFooter();
+  }
+}
+
+/** 明细数量变化 */
+function handleDetailQuantityChange(detail: DetailRow) {
+  if (detail.price !== undefined && detail.price !== null) {
+    detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+    void refreshDetailFooter();
+    return;
+  }
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 明细单价变化 */
+function handleDetailPriceChange(detail: DetailRow) {
+  detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+  void refreshDetailFooter();
+}
+
+/** 明细金额变化 */
+function handleDetailTotalPriceChange(detail: DetailRow) {
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 校验商品明细 */
+function validateDetails(required = false) {
+  if (details.value.length === 0) {
+    if (required) {
+      message.error('至少包含一条入库明细');
+      return false;
+    }
+    return true;
+  }
+  for (let index = 0; index < details.value.length; index += 1) {
+    const detail = details.value[index]!;
+    if (!detail.skuId) {
+      message.error(`第 ${index + 1} 行明细请选择商品规格`);
+      return false;
+    }
+    if (!detail.quantity || detail.quantity <= 0) {
+      message.error(`第 ${index + 1} 行明细入库数量必须大于 0`);
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 构建提交用的明细数据 */
+function buildSubmitDetails() {
+  return details.value.map((row) => {
+    const { seq: _seq, ...detail } = row;
+    return detail;
+  });
+}
+
+/** 构建提交用的单据数据 */
+async function buildSubmitData(): Promise<WmsReceiptOrderApi.ReceiptOrder> {
+  const values = (await formApi.getValues()) as WmsReceiptOrderApi.ReceiptOrder;
+  const {
+    details: _details,
+    totalPrice: _totalPrice,
+    totalQuantity: _totalQuantity,
+    ...order
+  } = formData.value;
+  return {
+    ...order,
+    ...values,
+    details: buildSubmitDetails(),
+  };
+}
+
+/** 完成入库 */
+async function handleFormComplete() {
+  const { valid } = await formApi.validate();
+  if (!valid || !validateDetails(true) || !formData.value?.id) {
+    return;
+  }
+  await confirm('确认完成入库？完成后将更新库存。');
+  modalApi.lock();
+  try {
+    const data = await buildSubmitData();
+    if (!isEqual(data, originalSubmitData.value)) {
+      await updateReceiptOrder(data);
+    }
+    await completeReceiptOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('入库成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 作废入库单 */
+async function handleFormCancel() {
+  if (!formData.value?.id) {
+    return;
+  }
+  await confirm('确认作废该入库单？作废后不可恢复。');
+  modalApi.lock();
+  try {
+    await cancelReceiptOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('作废成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid || !validateDetails(false) || !isPrepareOrder.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await buildSubmitData();
+    try {
+      await (formMode.value === 'update'
+        ? updateReceiptOrder(data)
+        : createReceiptOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {};
+      originalSubmitData.value = undefined;
+      setDetails([]);
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      type?: string;
+    }>();
+    formMode.value = data?.type || (data?.id ? 'update' : 'create');
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        // 加载数据
+        const order = await getReceiptOrder(data.id);
+        const orderDetails =
+          order.details || (await getReceiptOrderDetailListByOrderId(data.id));
+        formData.value = { ...order, details: orderDetails };
+        setDetails(orderDetails);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+        await nextTick();
+        originalSubmitData.value = await buildSubmitData();
+      } finally {
+        modalApi.unlock();
+      }
+      return;
+    }
+    // 初始化新增表单
+    formData.value = {
+      details: [],
+      no: generateOrderNo('RK'),
+      status: OrderStatusEnum.PREPARE,
+    };
+    setDetails([]);
+    await formApi.setValues(formData.value);
+    await nextTick();
+    originalSubmitData.value = await buildSubmitData();
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="isPrepareOrder"
+  >
+    <div class="mx-4">
+      <Form />
+      <div class="mt-4">
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-semibold">入库明细</span>
+          <TableAction
+            :actions="[
+              {
+                label: '添加商品',
+                onClick: handleAddDetail,
+                type: 'primary',
+              },
+            ]"
+          />
+        </div>
+        <VxeTable
+          ref="detailTableRef"
+          :data="details"
+          border
+          empty-text="暂无商品明细"
+          :footer-method="getDetailFooter"
+          :show-overflow="true"
+          show-footer
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ row.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.skuName || '-' }}</div>
+              <div v-if="row.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ row.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn field="quantity" title="入库数量" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.quantity"
+                :controls="false"
+                :min="0"
+                :precision="QUANTITY_PRECISION"
+                class="!w-full"
+                placeholder="数量"
+                @change="handleDetailQuantityChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="price" title="单价(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.price"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="单价"
+                @change="handleDetailPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="totalPrice" title="金额(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.totalPrice"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="金额"
+                @change="handleDetailTotalPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn title="操作" align="center" fixed="right" width="90">
+            <template #default="{ row }">
+              <TableAction
+                :actions="[
+                  {
+                    label: '删除',
+                    type: 'link',
+                    danger: true,
+                    onClick: handleDeleteDetail.bind(null, row),
+                  },
+                ]"
+              />
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <div v-if="isSavedPrepareOrder" class="flex flex-auto items-center gap-2">
+        <TableAction
+          :actions="[
+            {
+              label: '完成入库',
+              type: 'primary',
+              auth: ['wms:receipt-order:complete'],
+              onClick: handleFormComplete,
+            },
+            {
+              label: '作废',
+              type: 'primary',
+              danger: true,
+              auth: ['wms:receipt-order:cancel'],
+              onClick: handleFormCancel,
+            },
+          ]"
+        />
+      </div>
+    </template>
+    <WmsItemSkuSelect ref="skuSelectRef" @change="handleSelectSku" />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/receipt/modules/print.vue b/apps/web-antd/src/views/wms/order/receipt/modules/print.vue
new file mode 100644
index 000000000..4bb43a4a1
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/receipt/modules/print.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Barcode, BarcodeFormatEnum } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import {
+  getReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+} from '#/api/wms/order/receipt';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+interface PrintRow extends WmsReceiptOrderDetailApi.ReceiptOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsReceiptOrderPrint' });
+
+const printData = ref<WmsReceiptOrderApi.ReceiptOrder>({});
+const tableColumnCount = 5;
+
+const printRows = computed<PrintRow[]>(() =>
+  (printData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+/** 等待条码和打印 DOM 完成绘制，避免浏览器打印到旧内容 */
+function waitForPaint() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+/** 退出打印模式，恢复当前页面显示 */
+function removePrintMode() {
+  document.body.classList.remove('wms-receipt-order-printing');
+}
+
+/** 获取打印用字典文案，空值统一显示为横杠 */
+function getPrintDictLabel(dictType: string, value?: number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  return getDictLabel(dictType, value) || '-';
+}
+
+/** 打印入库单：加载数据后只展示打印区域，再调用浏览器打印 */
+async function print(id: number) {
+  const order = await getReceiptOrder(id);
+  const details = order.details || (await getReceiptOrderDetailListByOrderId(id));
+  printData.value = { ...order, details };
+  await nextTick();
+  await waitForPaint();
+  document.body.classList.add('wms-receipt-order-printing');
+  window.addEventListener('afterprint', removePrintMode, { once: true });
+  window.print();
+}
+
+defineExpose({ print });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      id="wmsReceiptOrderPrint"
+      class="wms-receipt-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white text-[#303133] opacity-0"
+    >
+      <div class="relative mb-2">
+        <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
+          入库单
+        </h2>
+        <div v-if="printData.no" class="absolute right-0 top-0">
+          <Barcode
+            :content="printData.no"
+            :display-value="false"
+            :format="BarcodeFormatEnum.CODE39"
+            :height="40"
+            :width="180"
+          />
+        </div>
+      </div>
+      <div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
+        <div>入库单号：{{ printData.no || '-' }}</div>
+        <div>
+          入库类型：{{ getPrintDictLabel(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, printData.type) }}
+        </div>
+        <div>仓库：{{ printData.warehouseName || '-' }}</div>
+        <div>
+          入库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
+        </div>
+        <div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
+        <div>供应商：{{ printData.merchantName || '-' }}</div>
+        <div>业务单号：{{ printData.bizOrderNo || '-' }}</div>
+        <div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
+        <div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
+        <div class="col-span-3 grid grid-cols-2 gap-x-6">
+          <div>
+            创建：{{ formatDateTime(printData.createTime) || '-' }} /
+            {{ printData.creatorName || printData.creator || '-' }}
+          </div>
+          <div>
+            更新：{{ formatDateTime(printData.updateTime) || '-' }} /
+            {{ printData.updaterName || printData.updater || '-' }}
+          </div>
+        </div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-[13px] leading-[1.5]">
+        <thead>
+          <tr>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              商品信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              规格信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              数量
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              单价(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              金额(元)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printRows" :key="detail.id || detail.skuId">
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs">
+                编号：{{ detail.itemCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs">
+                编号：{{ detail.skuCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.price) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.totalPrice) || '-' }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length > 0">
+            <td
+              class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
+              colspan="2"
+            >
+              合计
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumPrice(printRows, (detail) => detail.totalPrice) }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length === 0">
+            <td
+              class="border border-solid border-[#dcdfe6] p-2 text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+@page {
+  margin: 8mm 10mm;
+}
+
+@media print {
+  :global(body.wms-receipt-order-printing) {
+    -webkit-print-color-adjust: exact;
+    margin: 0 !important;
+    padding: 0 !important;
+    print-color-adjust: exact;
+  }
+
+  :global(body.wms-receipt-order-printing *) {
+    visibility: hidden !important;
+  }
+
+  :global(body.wms-receipt-order-printing .wms-receipt-order-print),
+  :global(body.wms-receipt-order-printing .wms-receipt-order-print *) {
+    visibility: visible !important;
+  }
+
+  :global(body.wms-receipt-order-printing .wms-receipt-order-print) {
+    pointer-events: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: auto;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/wms/order/shipment/data.ts b/apps/web-antd/src/views/wms/order/shipment/data.ts
new file mode 100644
index 000000000..eac4d1b10
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/shipment/data.ts
@@ -0,0 +1,437 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { buildNumberRangeSchema } from '#/components/number-range-input';
+import { getRangePickerDefaultProps } from '#/utils';
+import { WmsMerchantSelect } from '#/views/wms/md/merchant/components';
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入出库单号',
+      },
+      fieldName: 'no',
+      label: '出库单号',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        allowClear: true,
+        placeholder: '请输入业务单号',
+      },
+      fieldName: 'bizOrderNo',
+      label: '业务单号',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_STATUS, 'number'),
+        placeholder: '请选择单据状态',
+      },
+      fieldName: 'status',
+      label: '单据状态',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'warehouseId',
+      label: '仓库',
+    },
+    {
+      component: markRaw(WmsMerchantSelect),
+      componentProps: {
+        customer: true,
+        placeholder: '请选择客户',
+      },
+      fieldName: 'merchantId',
+      label: '客户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+    },
+    buildNumberRangeSchema(
+      '数量',
+      'totalQuantityRange',
+      'totalQuantityMin',
+      'totalQuantityMax',
+      QUANTITY_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '总金额',
+      'totalPriceRange',
+      'totalPriceMin',
+      'totalPriceMax',
+      PRICE_PRECISION,
+    ),
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE, 'number'),
+        placeholder: '请选择出库类型',
+      },
+      fieldName: 'type',
+      label: '出库类型',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择创建用户',
+        showSearch: true,
+        valueField: 'id',
+      },
+      fieldName: 'creator',
+      label: '创建用户',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        placeholder: '请选择更新用户',
+        showSearch: true,
+        valueField: 'id',
+      },
+      fieldName: 'updater',
+      label: '更新用户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+      fieldName: 'updateTime',
+      label: '更新时间',
+    },
+  ];
+}
+
+/** 列表表格列 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      fixed: 'left',
+      slots: { content: 'expand_content' },
+      type: 'expand',
+      width: 48,
+    },
+    {
+      field: 'no',
+      fixed: 'left',
+      slots: { default: 'no' },
+      title: '单号/业务单号',
+      width: 260,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_STATUS },
+      },
+      field: 'status',
+      fixed: 'left',
+      title: '出库状态',
+      width: 110,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE },
+      },
+      field: 'type',
+      title: '出库类型',
+      width: 120,
+    },
+    {
+      field: 'warehouseName',
+      minWidth: 180,
+      title: '仓库',
+    },
+    {
+      field: 'quantityAmount',
+      minWidth: 180,
+      slots: { default: 'quantityAmount' },
+      title: '总数量/总金额(元)',
+    },
+    {
+      field: 'merchantName',
+      minWidth: 160,
+      title: '客户',
+    },
+    {
+      field: 'operateInfo',
+      minWidth: 260,
+      slots: { default: 'operateInfo' },
+      title: '操作信息',
+    },
+    {
+      field: 'remark',
+      minWidth: 160,
+      title: '备注',
+    },
+    {
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+      title: '操作',
+      width: 220,
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '出库单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'type',
+      label: '出库类型',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE,
+              value: val,
+            }),
+    },
+    {
+      field: 'warehouseName',
+      label: '仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'status',
+      label: '单据状态',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_ORDER_STATUS,
+              value: val,
+            }),
+    },
+    {
+      field: 'orderTime',
+      label: '单据日期',
+      render: (val) => formatDate(val, 'YYYY-MM-DD') || '-',
+    },
+    {
+      field: 'merchantName',
+      label: '客户',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'bizOrderNo',
+      label: '业务单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'totalQuantity',
+      label: '总数量',
+      render: (val) => formatQuantity(val) || '-',
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+      render: (val, data) => val || data?.creator || '-',
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'updaterName',
+      label: '更新人',
+      render: (val, data) => val || data?.updater || '-',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      render: (val) => val || '-',
+      span: 2,
+    },
+  ];
+}
+
+interface ShipmentFormSchemaOptions {
+  onWarehouseChange: (warehouse?: WmsWarehouseApi.Warehouse) => void;
+}
+
+/** 表单的配置项 */
+export function useFormSchema({
+  onWarehouseChange,
+}: ShipmentFormSchemaOptions): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入出库单号',
+      },
+      fieldName: 'no',
+      label: '出库单号',
+      rules: z.string().min(1, '出库单号不能为空').max(64),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: getDictOptions(DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE, 'number'),
+        placeholder: '请选择出库类型',
+      },
+      fieldName: 'type',
+      label: '出库类型',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        onChange: onWarehouseChange,
+      },
+      fieldName: 'warehouseId',
+      label: '仓库',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择单据日期',
+        valueFormat: 'x',
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsMerchantSelect),
+      componentProps: {
+        customer: true,
+        placeholder: '请选择客户',
+      },
+      fieldName: 'merchantId',
+      label: '客户',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入业务单号',
+      },
+      fieldName: 'bizOrderNo',
+      label: '业务单号',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+      fieldName: 'remark',
+      formItemClass: 'col-span-2',
+      label: '备注',
+    },
+  ];
+}
+
+interface ShipmentOrderDetailFooterRow {
+  quantity?: number;
+  totalPrice?: number;
+}
+type ShipmentOrderDetailFooterColumn = Pick<
+  NonNullable<NonNullable<VxeTableGridOptions['columns']>[number]>,
+  'field'
+>;
+
+/** 明细表格的合计行 */
+export function getDetailFooter({
+  columns,
+  data,
+}: {
+  columns: ShipmentOrderDetailFooterColumn[];
+  data: ShipmentOrderDetailFooterRow[];
+}) {
+  return [
+    columns.map((column, index) => {
+      if (index === 0) {
+        return '合计';
+      }
+      if (column.field === 'quantity') {
+        return formatSumQuantity(data, (detail) => detail.quantity);
+      }
+      if (column.field === 'totalPrice') {
+        return formatSumPrice(data, (detail) => detail.totalPrice);
+      }
+      return '';
+    }),
+  ];
+}
diff --git a/apps/web-antd/src/views/wms/order/shipment/index.vue b/apps/web-antd/src/views/wms/order/shipment/index.vue
new file mode 100644
index 000000000..5598b7cef
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/shipment/index.vue
@@ -0,0 +1,345 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsShipmentOrderApi } from '#/api/wms/order/shipment';
+import type { WmsShipmentOrderDetailApi } from '#/api/wms/order/shipment/detail';
+
+import { reactive, ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
+
+import { message } from 'ant-design-vue';
+
+import {
+  ACTION_ICON,
+  TableAction,
+  useVbenVxeGrid,
+  VxeColumn,
+  VxeTable,
+} from '#/adapter/vxe-table';
+import {
+  deleteShipmentOrder,
+  exportShipmentOrder,
+  getShipmentOrderDetailListByOrderId,
+  getShipmentOrderPage,
+} from '#/api/wms/order/shipment';
+import { $t } from '#/locales';
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import { formatPrice, formatQuantity, multiplyPrice } from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import ShipmentOrderDetail from './modules/detail.vue';
+import ShipmentOrderForm from './modules/form.vue';
+import ShipmentOrderPrint from './modules/print.vue';
+
+defineOptions({ name: 'WmsShipmentOrder' });
+
+const printRef = ref<InstanceType<typeof ShipmentOrderPrint>>();
+const detailMap = reactive<
+  Record<number, WmsShipmentOrderDetailApi.ShipmentOrderDetail[]>
+>({});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ShipmentOrderForm,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: ShipmentOrderDetail,
+  destroyOnClose: true,
+});
+
+/** 清空展开明细缓存 */
+function clearDetailMap() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  clearDetailMap();
+  gridApi.query();
+}
+
+/** 创建出库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑出库单 */
+function handleEdit(row: WmsShipmentOrderApi.ShipmentOrder) {
+  formModalApi.setData({ id: row.id!, type: 'update' }).open();
+}
+
+/** 查看出库单详情 */
+function handleDetail(row: WmsShipmentOrderApi.ShipmentOrder) {
+  detailModalApi.setData({ id: row.id! }).open();
+}
+
+/** 计算单据明细金额 */
+function getDetailTotalPrice(
+  detail: WmsShipmentOrderDetailApi.ShipmentOrderDetail,
+) {
+  return detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price);
+}
+
+/** 获取已展开行的明细 */
+function getExpandedDetails(row: WmsShipmentOrderApi.ShipmentOrder) {
+  return detailMap[row.id!] || [];
+}
+
+/** 展开列表行时懒加载出库明细 */
+async function handleExpandChange(
+  row: WmsShipmentOrderApi.ShipmentOrder,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  delete detailMap[row.id!];
+  detailMap[row.id!] = await getShipmentOrderDetailListByOrderId(row.id!);
+}
+
+/** 判断出库单是否可修改 */
+function canUpdateShipmentOrder(status?: number) {
+  return status !== undefined && OrderUpdateStatusList.includes(status);
+}
+
+/** 判断出库单是否可删除 */
+function canDeleteShipmentOrder(status?: number) {
+  return status !== undefined && OrderDeleteStatusList.includes(status);
+}
+
+/** 获取修改按钮禁用提示 */
+function getShipmentOrderUpdateTip(status?: number) {
+  if (canUpdateShipmentOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已出库，无法修改';
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改';
+  }
+  return '当前状态无法修改';
+}
+
+/** 获取删除按钮禁用提示 */
+function getShipmentOrderDeleteTip(status?: number) {
+  if (canDeleteShipmentOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已出库，无法删除';
+  }
+  return '当前状态无法删除';
+}
+
+/** 删除出库单 */
+async function handleDelete(row: WmsShipmentOrderApi.ShipmentOrder) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.no]),
+    duration: 0,
+  });
+  try {
+    await deleteShipmentOrder(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 导出出库单 */
+async function handleExport() {
+  const data = await exportShipmentOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '出库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    expandConfig: {
+      padding: true,
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getShipmentOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsShipmentOrderApi.ShipmentOrder>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: WmsShipmentOrderApi.ShipmentOrder;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="【单据】出库" url="https://doc.iocoder.cn/wms/order/shipment/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <ShipmentOrderPrint ref="printRef" />
+
+    <Grid table-title="出库单列表">
+      <template #expand_content="{ row }">
+        <VxeTable
+          :data="getExpandedDetails(row)"
+          border
+          :show-overflow="true"
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ detail.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ detail.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="出库数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.quantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="单价(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(detail.price) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="金额(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(getDetailTotalPrice(detail)) || '-' }}
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['出库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:shipment-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:shipment-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div>
+          单号：
+          <a class="text-primary" @click="handleDetail(row)">{{ row.no }}</a>
+        </div>
+        <div v-if="row.bizOrderNo" class="text-xs text-gray-500">
+          业务：{{ row.bizOrderNo }}
+        </div>
+      </template>
+      <template #quantityAmount="{ row }">
+        <div class="flex items-center justify-between">
+          <span>数量：</span>
+          <span>{{ formatQuantity(row.totalQuantity) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>金额：</span>
+          <span>{{ formatPrice(row.totalPrice) }}</span>
+        </div>
+      </template>
+      <template #operateInfo="{ row }">
+        <div>
+          创建：{{ formatDateTime(row.createTime) || '-' }} /
+          {{ row.creatorName || row.creator || '-' }}
+        </div>
+        <div>
+          更新：{{ formatDateTime(row.updateTime) || '-' }} /
+          {{ row.updaterName || row.updater || '-' }}
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              disabled: !canUpdateShipmentOrder(row.status),
+              tooltip: getShipmentOrderUpdateTip(row.status),
+              auth: ['wms:shipment-order:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: !canDeleteShipmentOrder(row.status),
+              tooltip: getShipmentOrderDeleteTip(row.status),
+              auth: ['wms:shipment-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '打印',
+              type: 'link',
+              auth: ['wms:shipment-order:query'],
+              onClick: () => printRef?.print(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/shipment/modules/detail.vue b/apps/web-antd/src/views/wms/order/shipment/modules/detail.vue
new file mode 100644
index 000000000..891af12cf
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/shipment/modules/detail.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import type { WmsShipmentOrderApi } from '#/api/wms/order/shipment';
+import type { WmsShipmentOrderDetailApi } from '#/api/wms/order/shipment/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  getShipmentOrder,
+  getShipmentOrderDetailListByOrderId,
+} from '#/api/wms/order/shipment';
+import { useDescription } from '#/components/description';
+import {
+  formatPrice,
+  formatQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+import { getDetailFooter, useDetailSchema } from '../data';
+
+interface DetailRow extends WmsShipmentOrderDetailApi.ShipmentOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsShipmentOrderDetail' });
+
+const detailData = ref<WmsShipmentOrderApi.ShipmentOrder>({});
+
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+const [Descriptions] = useDescription({
+  bordered: true,
+  column: 2,
+  schema: useDetailSchema(),
+  useCard: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      detailData.value = {};
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const order = await getShipmentOrder(data.id);
+      const details =
+        order.details || (await getShipmentOrderDetailListByOrderId(data.id));
+      detailData.value = { ...order, details };
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="出库单详情"
+    class="w-2/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mx-4 space-y-4">
+      <Descriptions :data="detailData" />
+      <VxeTable
+        :data="detailRows"
+        border
+        empty-text="暂无商品明细"
+        :footer-method="getDetailFooter"
+        :show-overflow="true"
+        show-footer
+        size="small"
+      >
+        <VxeColumn title="商品信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.itemName || '-' }}</div>
+            <div v-if="row.itemCode" class="text-xs text-gray-500">
+              商品编号：{{ row.itemCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="规格信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.skuName || '-' }}</div>
+            <div v-if="row.skuCode" class="text-xs text-gray-500">
+              规格编号：{{ row.skuCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="quantity" title="数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.quantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="unit" title="单位" align="center" width="100" />
+        <VxeColumn title="单价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.price) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="totalPrice" title="总价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.totalPrice) || '-' }}
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/shipment/modules/form.vue b/apps/web-antd/src/views/wms/order/shipment/modules/form.vue
new file mode 100644
index 000000000..e2198392d
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/shipment/modules/form.vue
@@ -0,0 +1,535 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { WmsShipmentOrderApi } from '#/api/wms/order/shipment';
+import type { WmsShipmentOrderDetailApi } from '#/api/wms/order/shipment/detail';
+import type { InventorySelectRow } from '#/views/wms/inventory/components/inventory-select.vue';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEqual } from '@vben/utils';
+
+import { InputNumber, message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { TableAction, VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  cancelShipmentOrder,
+  completeShipmentOrder,
+  createShipmentOrder,
+  getShipmentOrder,
+  getShipmentOrderDetailListByOrderId,
+  updateShipmentOrder,
+} from '#/api/wms/order/shipment';
+import { $t } from '#/locales';
+import { WmsInventorySelect } from '#/views/wms/inventory/components';
+import {
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  dividePrice,
+  formatQuantity,
+  multiplyPrice,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+import { generateOrderNo } from '#/views/wms/utils/order';
+
+import { getDetailFooter, useFormSchema } from '../data';
+
+interface DetailRow extends WmsShipmentOrderDetailApi.ShipmentOrderDetail {
+  seq: number;
+}
+
+defineOptions({ name: 'WmsShipmentOrderForm' });
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const formData = ref<WmsShipmentOrderApi.ShipmentOrder>({});
+const formMode = ref('create');
+const originalSubmitData = ref<WmsShipmentOrderApi.ShipmentOrder>();
+const details = ref<DetailRow[]>([]);
+const detailTableRef = ref<VxeTableInstance>();
+const inventorySelectRef = ref<InstanceType<typeof WmsInventorySelect>>();
+const currentWarehouseId = ref<number>();
+const initializing = ref(false);
+let detailSeq = 0; // 明细行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+
+const getTitle = computed(() => {
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['出库单'])
+    : $t('ui.actionTitle.create', ['出库单']);
+});
+
+const isPrepareOrder = computed(() => {
+  return (
+    !formData.value?.id ||
+    (formData.value.status !== undefined &&
+      OrderUpdateStatusList.includes(formData.value.status))
+  );
+});
+const isSavedPrepareOrder = computed(() => {
+  return (
+    !!formData.value?.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+  );
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema({ onWarehouseChange: handleWarehouseChange }),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 标准化明细行，补齐本地序号和金额 */
+function normalizeDetail(
+  detail: WmsShipmentOrderDetailApi.ShipmentOrderDetail,
+): DetailRow {
+  detailSeq += 1;
+  return {
+    ...detail,
+    seq: detailSeq,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  };
+}
+
+/** 根据库存构建新的出库明细 */
+function buildDetail(inventory: InventorySelectRow): DetailRow {
+  return normalizeDetail({
+    availableQuantity: inventory.availableQuantity,
+    id: undefined,
+    itemCode: inventory.itemCode,
+    itemId: inventory.itemId,
+    itemName: inventory.itemName,
+    price: undefined,
+    quantity: undefined,
+    skuCode: inventory.skuCode,
+    skuId: inventory.skuId,
+    skuName: inventory.skuName,
+    totalPrice: undefined,
+    unit: inventory.unit,
+    warehouseId: inventory.warehouseId,
+    warehouseName: inventory.warehouseName,
+  });
+}
+
+/** 设置出库明细 */
+function setDetails(list?: WmsShipmentOrderDetailApi.ShipmentOrderDetail[]) {
+  detailSeq = 0;
+  details.value = (list || []).map((detail) => normalizeDetail(detail));
+  void refreshDetailFooter();
+}
+
+/** 刷新明细合计行 */
+async function refreshDetailFooter() {
+  await nextTick();
+  await detailTableRef.value?.updateFooter();
+}
+
+/** 添加商品明细 */
+async function handleAddDetail() {
+  const values = (await formApi.getValues()) as WmsShipmentOrderApi.ShipmentOrder;
+  if (!values.warehouseId) {
+    message.warning('请先选择仓库');
+    return;
+  }
+  currentWarehouseId.value = values.warehouseId;
+  await nextTick();
+  inventorySelectRef.value?.open(getSelectedInventoryKeys());
+}
+
+/** 选择库存 */
+function handleSelectInventory(inventories: InventorySelectRow[]) {
+  if (inventories.length === 0) {
+    return;
+  }
+  let changed = false;
+  for (const inventory of inventories) {
+    if (!inventory.skuId || isInventorySelected(inventory)) {
+      continue;
+    }
+    details.value.push(buildDetail(inventory));
+    changed = true;
+  }
+  if (changed) {
+    void refreshDetailFooter();
+  }
+}
+
+/** 判断库存是否已选择 */
+function isInventorySelected(inventory: InventorySelectRow) {
+  return details.value.some((detail) => {
+    return (
+      detail.skuId === inventory.skuId &&
+      detail.warehouseId === inventory.warehouseId
+    );
+  });
+}
+
+/** 获得已选择的库存标识 */
+function getSelectedInventoryKeys() {
+  return details.value
+    .map((detail) =>
+      detail.skuId && detail.warehouseId
+        ? `${detail.skuId}-${detail.warehouseId}`
+        : undefined,
+    )
+    .filter((key): key is string => !!key);
+}
+
+/** 删除商品明细 */
+function handleDeleteDetail(row: DetailRow) {
+  const index = details.value.findIndex((detail) => detail.seq === row.seq);
+  if (index !== -1) {
+    details.value.splice(index, 1);
+    void refreshDetailFooter();
+  }
+}
+
+/** 仓库变化时清空出库明细 */
+function handleWarehouseChange(warehouse?: WmsWarehouseApi.Warehouse) {
+  if (initializing.value) {
+    return;
+  }
+  formData.value.warehouseId = warehouse?.id;
+  formData.value.warehouseName = warehouse?.name;
+  currentWarehouseId.value = warehouse?.id;
+  setDetails([]);
+}
+
+/** 明细数量变化 */
+function handleDetailQuantityChange(detail: DetailRow) {
+  if (detail.price !== undefined && detail.price !== null) {
+    detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+    void refreshDetailFooter();
+    return;
+  }
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 明细单价变化 */
+function handleDetailPriceChange(detail: DetailRow) {
+  detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+  void refreshDetailFooter();
+}
+
+/** 明细金额变化 */
+function handleDetailTotalPriceChange(detail: DetailRow) {
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 校验商品明细 */
+function validateDetails(required = false) {
+  if (details.value.length === 0) {
+    if (required) {
+      message.error('至少包含一条出库明细');
+      return false;
+    }
+    return true;
+  }
+  for (let index = 0; index < details.value.length; index += 1) {
+    const detail = details.value[index]!;
+    if (!detail.skuId) {
+      message.error(`第 ${index + 1} 行明细请选择商品规格`);
+      return false;
+    }
+    if (!detail.quantity || detail.quantity <= 0) {
+      message.error(`第 ${index + 1} 行明细出库数量必须大于 0`);
+      return false;
+    }
+    if (
+      detail.availableQuantity !== undefined &&
+      detail.quantity > detail.availableQuantity
+    ) {
+      message.error(`第 ${index + 1} 行明细出库数量不能大于可用库存`);
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 构建提交用的明细数据 */
+function buildSubmitDetails() {
+  return details.value.map((row) => {
+    const { seq: _seq, ...detail } = row;
+    return detail;
+  });
+}
+
+/** 构建提交用的单据数据 */
+async function buildSubmitData(): Promise<WmsShipmentOrderApi.ShipmentOrder> {
+  const values = (await formApi.getValues()) as WmsShipmentOrderApi.ShipmentOrder;
+  const {
+    details: _details,
+    totalPrice: _totalPrice,
+    totalQuantity: _totalQuantity,
+    ...order
+  } = formData.value;
+  return {
+    ...order,
+    ...values,
+    details: buildSubmitDetails(),
+  };
+}
+
+/** 完成出库 */
+async function handleFormComplete() {
+  const { valid } = await formApi.validate();
+  if (!valid || !validateDetails(true) || !formData.value?.id) {
+    return;
+  }
+  await confirm('确认完成出库？完成后将更新库存。');
+  modalApi.lock();
+  try {
+    const data = await buildSubmitData();
+    if (!isEqual(data, originalSubmitData.value)) {
+      await updateShipmentOrder(data);
+    }
+    await completeShipmentOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('出库成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 作废出库单 */
+async function handleFormCancel() {
+  if (!formData.value?.id) {
+    return;
+  }
+  await confirm('确认作废该出库单？作废后不可恢复。');
+  modalApi.lock();
+  try {
+    await cancelShipmentOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    message.success('作废成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid || !validateDetails(false) || !isPrepareOrder.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await buildSubmitData();
+    try {
+      await (formMode.value === 'update'
+        ? updateShipmentOrder(data)
+        : createShipmentOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {};
+      originalSubmitData.value = undefined;
+      currentWarehouseId.value = undefined;
+      setDetails([]);
+      return;
+    }
+    initializing.value = true;
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      type?: string;
+    }>();
+    formMode.value = data?.type || (data?.id ? 'update' : 'create');
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        // 加载数据
+        const order = await getShipmentOrder(data.id);
+        const orderDetails =
+          order.details || (await getShipmentOrderDetailListByOrderId(data.id));
+        formData.value = { ...order, details: orderDetails };
+        currentWarehouseId.value = order.warehouseId;
+        setDetails(orderDetails);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+        await nextTick();
+        originalSubmitData.value = await buildSubmitData();
+      } finally {
+        initializing.value = false;
+        modalApi.unlock();
+      }
+      return;
+    }
+    // 初始化新增表单
+    formData.value = {
+      details: [],
+      no: generateOrderNo('CK'),
+      status: OrderStatusEnum.PREPARE,
+    };
+    currentWarehouseId.value = undefined;
+    setDetails([]);
+    await formApi.setValues(formData.value);
+    await nextTick();
+    originalSubmitData.value = await buildSubmitData();
+    initializing.value = false;
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="isPrepareOrder"
+  >
+    <div class="mx-4">
+      <Form />
+      <div class="mt-4">
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-semibold">出库明细</span>
+          <TableAction
+            :actions="[
+              {
+                label: '添加商品',
+                onClick: handleAddDetail,
+                type: 'primary',
+              },
+            ]"
+          />
+        </div>
+        <VxeTable
+          ref="detailTableRef"
+          :data="details"
+          border
+          empty-text="暂无商品明细"
+          :footer-method="getDetailFooter"
+          :show-overflow="true"
+          show-footer
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ row.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.skuName || '-' }}</div>
+              <div v-if="row.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ row.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn field="availableQuantity" title="可用库存" align="right" width="120">
+            <template #default="{ row }">
+              {{ formatQuantity(row.availableQuantity) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn field="quantity" title="出库数量" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.quantity"
+                :controls="false"
+                :min="0"
+                :precision="QUANTITY_PRECISION"
+                class="!w-full"
+                placeholder="数量"
+                @change="handleDetailQuantityChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="price" title="单价(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.price"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="单价"
+                @change="handleDetailPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="totalPrice" title="金额(元)" width="150">
+            <template #default="{ row }">
+              <InputNumber
+                v-model:value="row.totalPrice"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="金额"
+                @change="handleDetailTotalPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn title="操作" align="center" fixed="right" width="90">
+            <template #default="{ row }">
+              <TableAction
+                :actions="[
+                  {
+                    label: '删除',
+                    type: 'link',
+                    danger: true,
+                    onClick: handleDeleteDetail.bind(null, row),
+                  },
+                ]"
+              />
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <div v-if="isSavedPrepareOrder" class="flex flex-auto items-center gap-2">
+        <TableAction
+          :actions="[
+            {
+              label: '完成出库',
+              type: 'primary',
+              auth: ['wms:shipment-order:complete'],
+              onClick: handleFormComplete,
+            },
+            {
+              label: '作废',
+              type: 'primary',
+              danger: true,
+              auth: ['wms:shipment-order:cancel'],
+              onClick: handleFormCancel,
+            },
+          ]"
+        />
+      </div>
+    </template>
+    <WmsInventorySelect
+      ref="inventorySelectRef"
+      :warehouse-id="currentWarehouseId"
+      @change="handleSelectInventory"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-antd/src/views/wms/order/shipment/modules/print.vue b/apps/web-antd/src/views/wms/order/shipment/modules/print.vue
new file mode 100644
index 000000000..89670420c
--- /dev/null
+++ b/apps/web-antd/src/views/wms/order/shipment/modules/print.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { WmsShipmentOrderApi } from '#/api/wms/order/shipment';
+import type { WmsShipmentOrderDetailApi } from '#/api/wms/order/shipment/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Barcode, BarcodeFormatEnum } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import {
+  getShipmentOrder,
+  getShipmentOrderDetailListByOrderId,
+} from '#/api/wms/order/shipment';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+interface PrintRow extends WmsShipmentOrderDetailApi.ShipmentOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsShipmentOrderPrint' });
+
+const printData = ref<WmsShipmentOrderApi.ShipmentOrder>({});
+const tableColumnCount = 5;
+
+const printRows = computed<PrintRow[]>(() =>
+  (printData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+/** 等待条码和打印 DOM 完成绘制，避免浏览器打印到旧内容 */
+function waitForPaint() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+/** 退出打印模式，恢复当前页面显示 */
+function removePrintMode() {
+  document.body.classList.remove('wms-shipment-order-printing');
+}
+
+/** 获取打印用字典文案，空值统一显示为横杠 */
+function getPrintDictLabel(dictType: string, value?: number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  return getDictLabel(dictType, value) || '-';
+}
+
+/** 打印出库单：加载数据后只展示打印区域，再调用浏览器打印 */
+async function print(id: number) {
+  const order = await getShipmentOrder(id);
+  const details = order.details || (await getShipmentOrderDetailListByOrderId(id));
+  printData.value = { ...order, details };
+  await nextTick();
+  await waitForPaint();
+  document.body.classList.add('wms-shipment-order-printing');
+  window.addEventListener('afterprint', removePrintMode, { once: true });
+  window.print();
+}
+
+defineExpose({ print });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      id="wmsShipmentOrderPrint"
+      class="wms-shipment-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white text-[#303133] opacity-0"
+    >
+      <div class="relative mb-2">
+        <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
+          出库单
+        </h2>
+        <div v-if="printData.no" class="absolute right-0 top-0">
+          <Barcode
+            :content="printData.no"
+            :display-value="false"
+            :format="BarcodeFormatEnum.CODE39"
+            :height="40"
+            :width="180"
+          />
+        </div>
+      </div>
+      <div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
+        <div>出库单号：{{ printData.no || '-' }}</div>
+        <div>
+          出库类型：{{ getPrintDictLabel(DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE, printData.type) }}
+        </div>
+        <div>仓库：{{ printData.warehouseName || '-' }}</div>
+        <div>
+          出库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
+        </div>
+        <div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
+        <div>客户：{{ printData.merchantName || '-' }}</div>
+        <div>业务单号：{{ printData.bizOrderNo || '-' }}</div>
+        <div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
+        <div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
+        <div class="col-span-3 grid grid-cols-2 gap-x-6">
+          <div>
+            创建：{{ formatDateTime(printData.createTime) || '-' }} /
+            {{ printData.creatorName || printData.creator || '-' }}
+          </div>
+          <div>
+            更新：{{ formatDateTime(printData.updateTime) || '-' }} /
+            {{ printData.updaterName || printData.updater || '-' }}
+          </div>
+        </div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-[13px] leading-[1.5]">
+        <thead>
+          <tr>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              商品信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              规格信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              数量
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              单价(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              金额(元)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printRows" :key="detail.id || detail.skuId">
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs">
+                编号：{{ detail.itemCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs">
+                编号：{{ detail.skuCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.price) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.totalPrice) || '-' }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length > 0">
+            <td
+              class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
+              colspan="2"
+            >
+              合计
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumPrice(printRows, (detail) => detail.totalPrice) }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length === 0">
+            <td
+              class="border border-solid border-[#dcdfe6] p-2 text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+@page {
+  margin: 8mm 10mm;
+}
+
+@media print {
+  :global(body.wms-shipment-order-printing) {
+    -webkit-print-color-adjust: exact;
+    margin: 0 !important;
+    padding: 0 !important;
+    print-color-adjust: exact;
+  }
+
+  :global(body.wms-shipment-order-printing *) {
+    visibility: hidden !important;
+  }
+
+  :global(body.wms-shipment-order-printing .wms-shipment-order-print),
+  :global(body.wms-shipment-order-printing .wms-shipment-order-print *) {
+    visibility: visible !important;
+  }
+
+  :global(body.wms-shipment-order-printing .wms-shipment-order-print) {
+    pointer-events: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: auto;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/wms/utils/constants.ts b/apps/web-antd/src/views/wms/utils/constants.ts
new file mode 100644
index 000000000..aedddcade
--- /dev/null
+++ b/apps/web-antd/src/views/wms/utils/constants.ts
@@ -0,0 +1,58 @@
+/** 单据状态枚举 */
+export const OrderStatusEnum = {
+  PREPARE: 0, // 草稿
+  FINISHED: 4, // 已完成
+  CANCELED: 5, // 已作废
+} as const;
+
+/** 单据类型枚举 */
+export const OrderTypeEnum = {
+  RECEIPT: 1, // 入库
+  SHIPMENT: 2, // 出库
+  MOVEMENT: 3, // 移库
+  CHECK: 4, // 盘库
+} as const;
+
+export type OrderType = (typeof OrderTypeEnum)[keyof typeof OrderTypeEnum];
+
+/** 可修改的单据状态 */
+export const OrderUpdateStatusList: number[] = [OrderStatusEnum.PREPARE];
+
+/** 可删除的单据状态 */
+export const OrderDeleteStatusList: number[] = [
+  OrderStatusEnum.PREPARE,
+  OrderStatusEnum.CANCELED,
+];
+
+/** 往来企业类型枚举 */
+export const MerchantTypeEnum = {
+  CUSTOMER: 1, // 客户
+  SUPPLIER: 2, // 供应商
+  CUSTOMER_SUPPLIER: 3, // 客户/供应商
+} as const;
+
+/** 供应商类型的往来企业 */
+export const SupplierMerchantTypeList = [
+  MerchantTypeEnum.SUPPLIER,
+  MerchantTypeEnum.CUSTOMER_SUPPLIER,
+];
+
+/** 客户类型的往来企业 */
+export const CustomerMerchantTypeList = [
+  MerchantTypeEnum.CUSTOMER,
+  MerchantTypeEnum.CUSTOMER_SUPPLIER,
+];
+
+/**
+ * 生成 WMS 编号 / 条码。
+ *
+ * @param prefix 可选前缀，按业务域区分编号种类。
+ * @returns 前缀 + 8 位随机数字串。
+ */
+export function generateWmsCode(prefix = ''): string {
+  let result = '';
+  for (let i = 0; i < 8; i++) {
+    result += Math.floor(Math.random() * 10).toString();
+  }
+  return prefix + result;
+}
diff --git a/apps/web-antd/src/views/wms/utils/format.ts b/apps/web-antd/src/views/wms/utils/format.ts
new file mode 100644
index 000000000..e02b28e1b
--- /dev/null
+++ b/apps/web-antd/src/views/wms/utils/format.ts
@@ -0,0 +1,153 @@
+/**
+ * WMS 展示格式化和表单配置
+ */
+
+type DecimalValue = null | number | string | undefined;
+
+/** 数量小数位 */
+export const QUANTITY_PRECISION = 2;
+/** 金额小数位 */
+export const PRICE_PRECISION = 2;
+/** 重量小数位 */
+export const WEIGHT_PRECISION = 3;
+/** 长宽高小数位 */
+export const DIMENSION_PRECISION = 1;
+
+function isNullOrUndefined(value: unknown) {
+  return value === null || value === undefined;
+}
+
+function toFiniteDecimal(value: DecimalValue) {
+  if (isNullOrUndefined(value)) {
+    return undefined;
+  }
+  if (typeof value === 'string' && value.trim() === '') {
+    return undefined;
+  }
+  const decimalValue = typeof value === 'string' ? Number(value) : value;
+  if (!Number.isFinite(decimalValue)) {
+    return undefined;
+  }
+  return decimalValue;
+}
+
+function sumDecimal<T>(list: T[], getter: (item: T) => DecimalValue) {
+  let sum = 0;
+  for (const item of list) {
+    const decimalValue = toFiniteDecimal(getter(item));
+    if (decimalValue !== undefined) {
+      sum += decimalValue;
+    }
+  }
+  return sum;
+}
+
+/** 格式化数量 */
+export function formatQuantity(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue === undefined
+    ? ''
+    : decimalValue.toFixed(QUANTITY_PRECISION);
+}
+
+/** 格式化金额 */
+export function formatPrice(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue === undefined ? '' : decimalValue.toFixed(PRICE_PRECISION);
+}
+
+/** 金额四舍五入 */
+export function roundPrice(value: number) {
+  return Number.isFinite(value) ? Number(value.toFixed(PRICE_PRECISION)) : undefined;
+}
+
+/** 亏损数字样式 */
+export function getLossClass(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue !== undefined && decimalValue < 0 ? 'text-red-500' : '';
+}
+
+/** 数量 * 单价，计算金额 */
+export function multiplyPrice(quantity?: number, price?: number) {
+  if (
+    quantity === undefined ||
+    quantity === null ||
+    price === undefined ||
+    price === null
+  ) {
+    return undefined;
+  }
+  return roundPrice(Number(quantity) * Number(price));
+}
+
+/** 金额 / 数量，反算单价 */
+export function dividePrice(totalPrice?: number, quantity?: number) {
+  if (totalPrice === undefined || totalPrice === null || !quantity) {
+    return undefined;
+  }
+  return roundPrice(Number(totalPrice) / Number(quantity));
+}
+
+/** 汇总数量 */
+export function sumQuantity<T>(list: T[], getter: (item: T) => DecimalValue) {
+  return sumDecimal(list, getter);
+}
+
+/** 汇总金额 */
+export function sumPrice<T>(list: T[], getter: (item: T) => DecimalValue) {
+  return sumDecimal(list, getter);
+}
+
+/** 格式化汇总数量 */
+export function formatSumQuantity<T>(
+  list: T[],
+  getter: (item: T) => DecimalValue,
+) {
+  return formatQuantity(sumQuantity(list, getter));
+}
+
+/** 格式化汇总金额 */
+export function formatSumPrice<T>(
+  list: T[],
+  getter: (item: T) => DecimalValue,
+) {
+  return formatPrice(sumPrice(list, getter));
+}
+
+/** 格式化重量 */
+export function formatWeight(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue === undefined ? '' : decimalValue.toFixed(WEIGHT_PRECISION);
+}
+
+/** 格式化长宽高 */
+export function formatDimension(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue === undefined
+    ? ''
+    : decimalValue.toFixed(DIMENSION_PRECISION);
+}
+
+/** 格式化长宽高组合 */
+export function formatDimensionText(
+  length?: null | number | string,
+  width?: null | number | string,
+  height?: null | number | string,
+) {
+  if (
+    !isNullOrUndefined(length) &&
+    !isNullOrUndefined(width) &&
+    !isNullOrUndefined(height)
+  ) {
+    return [formatDimension(length), formatDimension(width), formatDimension(height)].join(
+      ' * ',
+    );
+  }
+  return [
+    isNullOrUndefined(length) ? undefined : `长：${formatDimension(length)}`,
+    isNullOrUndefined(width) ? undefined : `宽：${formatDimension(width)}`,
+    isNullOrUndefined(height) ? undefined : `高：${formatDimension(height)}`,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
diff --git a/apps/web-antd/src/views/wms/utils/order.ts b/apps/web-antd/src/views/wms/utils/order.ts
new file mode 100644
index 000000000..5f31136c3
--- /dev/null
+++ b/apps/web-antd/src/views/wms/utils/order.ts
@@ -0,0 +1,12 @@
+/**
+ * WMS 订单工具
+ */
+
+/** 生成业务单号：前缀 + 月日 + 4 位随机数 */
+export function generateOrderNo(prefix: string) {
+  const now = new Date();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  const randomNo = String(Math.floor(Math.random() * 10_000)).padStart(4, '0');
+  return `${prefix}${month}${day}${randomNo}`;
+}
diff --git a/apps/web-ele/.env b/apps/web-ele/.env
index eca5ebda5..b24f7d289 100644
--- a/apps/web-ele/.env
+++ b/apps/web-ele/.env
@@ -22,6 +22,9 @@ VITE_APP_DOCALERT_ENABLE=true
 # 百度统计
 VITE_APP_BAIDU_CODE = b79d8f49e2d38b26503b92810b740f45
 
+# 百度地图
+VITE_BAIDU_MAP_KEY=Y2aJXiswwPxy6mwFs1z9c7U5gwX9WfUN
+
 # GoView域名
 VITE_GOVIEW_URL='http://127.0.0.1:3000'
 
diff --git a/apps/web-ele/src/adapter/form.ts b/apps/web-ele/src/adapter/form.ts
index caa797b5e..84064847d 100644
--- a/apps/web-ele/src/adapter/form.ts
+++ b/apps/web-ele/src/adapter/form.ts
@@ -57,5 +57,6 @@ const useVbenForm = useForm<ComponentType, ComponentPropsMap>;
 
 export { initSetupVbenForm, useVbenForm, z };
 
+export type VbenFormApi = ReturnType<typeof useVbenForm>[1]; // add by 芋艿：用于 data.ts 表单 schema 内调用 setFieldValue
 export type VbenFormSchema = FormSchema<ComponentType, ComponentPropsMap>;
 export type VbenFormProps = FormProps<ComponentType, ComponentPropsMap>;
diff --git a/apps/web-ele/src/api/iot/alert/config/index.ts b/apps/web-ele/src/api/iot/alert/config/index.ts
new file mode 100644
index 000000000..d419a5563
--- /dev/null
+++ b/apps/web-ele/src/api/iot/alert/config/index.ts
@@ -0,0 +1,56 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AlertConfigApi {
+  /** IoT 告警配置 */
+  export interface AlertConfig {
+    id?: number;
+    name?: string;
+    description?: string;
+    level?: number;
+    status?: number;
+    sceneRuleIds?: number[];
+    receiveUserIds?: number[];
+    receiveUserNames?: string[];
+    receiveTypes?: number[];
+    createTime?: Date;
+  }
+}
+
+/** 查询告警配置分页 */
+export function getAlertConfigPage(params: PageParam) {
+  return requestClient.get<PageResult<AlertConfigApi.AlertConfig>>(
+    '/iot/alert-config/page',
+    { params },
+  );
+}
+
+/** 查询告警配置详情 */
+export function getAlertConfig(id: number) {
+  return requestClient.get<AlertConfigApi.AlertConfig>(
+    `/iot/alert-config/get?id=${id}`,
+  );
+}
+
+/** 获取告警配置简单列表 */
+export function getSimpleAlertConfigList() {
+  return requestClient.get<AlertConfigApi.AlertConfig[]>(
+    '/iot/alert-config/simple-list',
+  );
+}
+
+/** 新增告警配置 */
+export function createAlertConfig(data: AlertConfigApi.AlertConfig) {
+  return requestClient.post('/iot/alert-config/create', data);
+}
+
+/** 修改告警配置 */
+export function updateAlertConfig(data: AlertConfigApi.AlertConfig) {
+  return requestClient.put('/iot/alert-config/update', data);
+}
+
+/** 删除告警配置 */
+export function deleteAlertConfig(id: number) {
+  return requestClient.delete(`/iot/alert-config/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/iot/alert/record/index.ts b/apps/web-ele/src/api/iot/alert/record/index.ts
new file mode 100644
index 000000000..fea6e17a4
--- /dev/null
+++ b/apps/web-ele/src/api/iot/alert/record/index.ts
@@ -0,0 +1,42 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace AlertRecordApi {
+  /** IoT 告警记录 */
+  export interface AlertRecord {
+    id?: number;
+    configId?: number;
+    configName?: string;
+    configLevel?: number;
+    deviceId?: number;
+    productId?: number;
+    deviceMessage?: any;
+    processStatus?: boolean;
+    processRemark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询告警记录分页 */
+export function getAlertRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<AlertRecordApi.AlertRecord>>(
+    '/iot/alert-record/page',
+    { params },
+  );
+}
+
+/** 查询告警记录详情 */
+export function getAlertRecord(id: number) {
+  return requestClient.get<AlertRecordApi.AlertRecord>(
+    `/iot/alert-record/get?id=${id}`,
+  );
+}
+
+/** 处理告警记录 */
+export function processAlertRecord(id: number, processRemark?: string) {
+  return requestClient.put('/iot/alert-record/process', {
+    id,
+    processRemark,
+  });
+}
diff --git a/apps/web-ele/src/api/iot/device/device/index.ts b/apps/web-ele/src/api/iot/device/device/index.ts
new file mode 100644
index 000000000..a55b017d5
--- /dev/null
+++ b/apps/web-ele/src/api/iot/device/device/index.ts
@@ -0,0 +1,231 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace IotDeviceApi {
+  /** 设备 */
+  export interface Device {
+    id?: number; // 设备编号
+    deviceName: string; // 设备名称
+    nickname?: string; // 备注名称
+    serialNumber?: string; // 设备序列号
+    picUrl?: string; // 设备图片
+    groupIds?: number[]; // 设备分组编号数组
+    productId: number; // 产品编号
+    productKey?: string; // 产品标识
+    productName?: string; // 产品名称（只有部分接口返回，例如 getDeviceLocationList）
+    deviceType?: number; // 设备类型
+    gatewayId?: number; // 网关设备 ID
+    state?: number; // 设备状态
+    onlineTime?: Date; // 最后上线时间
+    offlineTime?: Date; // 最后离线时间
+    activeTime?: Date; // 设备激活时间
+    deviceSecret?: string; // 设备密钥，用于设备认证
+    config?: string; // 设备配置
+    latitude?: number; // 设备位置的纬度
+    longitude?: number; // 设备位置的经度
+    createTime?: Date; // 创建时间
+  }
+
+  /** 设备更新分组 Request VO */
+  export interface DeviceUpdateGroupReqVO {
+    ids: number[]; // 设备编号列表（必填）
+    groupIds: number[]; // 分组编号列表（必填）
+  }
+
+  /** 设备认证信息 Response VO */
+  export interface DeviceAuthInfoRespVO {
+    clientId: string; // 客户端 ID
+    username: string; // 用户名
+    password: string; // 密码
+  }
+
+  /** 设备导入 Response VO */
+  export interface DeviceImportRespVO {
+    createDeviceNames?: string[]; // 创建成功的设备名称列表
+    updateDeviceNames?: string[]; // 更新成功的设备名称列表
+    failureDeviceNames?: Record<string, string>; // 失败的设备名称及原因
+  }
+
+  /** IoT 设备属性详细 VO */
+  export interface DevicePropertyDetail {
+    identifier: string; // 属性标识符
+    value: string; // 最新值
+    updateTime: Date; // 更新时间
+    name: string; // 属性名称
+    dataType: string; // 数据类型
+    dataSpecs: any; // 数据定义
+    dataSpecsList: any[]; // 数据定义列表
+  }
+
+  /** 设备属性 VO */
+  export interface DeviceProperty {
+    identifier: string; // 属性标识符
+    value: string; // 最新值
+    updateTime: Date; // 更新时间
+  }
+
+  /** 设备发送消息 Request VO */
+  export interface DeviceMessageSendReq {
+    deviceId: number; // 设备编号
+    method: string; // 请求方法
+    params?: any; // 请求参数
+  }
+}
+
+/** 查询设备分页 */
+export function getDevicePage(params: PageParam) {
+  return requestClient.get<PageResult<IotDeviceApi.Device>>(
+    '/iot/device/page',
+    { params },
+  );
+}
+
+/** 查询设备详情 */
+export function getDevice(id: number) {
+  return requestClient.get<IotDeviceApi.Device>(`/iot/device/get?id=${id}`);
+}
+
+/** 新增设备 */
+export function createDevice(data: IotDeviceApi.Device) {
+  return requestClient.post<number>('/iot/device/create', data);
+}
+
+/** 修改设备 */
+export function updateDevice(data: IotDeviceApi.Device) {
+  return requestClient.put<boolean>('/iot/device/update', data);
+}
+
+/** 修改设备分组 */
+export function updateDeviceGroup(data: IotDeviceApi.DeviceUpdateGroupReqVO) {
+  return requestClient.put<boolean>('/iot/device/update-group', data);
+}
+
+/** 删除单个设备 */
+export function deleteDevice(id: number) {
+  return requestClient.delete<boolean>(`/iot/device/delete?id=${id}`);
+}
+
+/** 删除多个设备 */
+export function deleteDeviceList(ids: number[]) {
+  return requestClient.delete<boolean>('/iot/device/delete-list', {
+    params: { ids: ids.join(',') },
+  });
+}
+
+/** 导出设备 */
+export function exportDeviceExcel(params: PageParam) {
+  return requestClient.download('/iot/device/export-excel', { params });
+}
+
+/** 获取设备数量 */
+export function getDeviceCount(productId: number) {
+  return requestClient.get<number>(`/iot/device/count?productId=${productId}`);
+}
+
+/** 获取设备的精简信息列表 */
+export function getSimpleDeviceList(deviceType?: number, productId?: number) {
+  return requestClient.get<IotDeviceApi.Device[]>('/iot/device/simple-list', {
+    params: { deviceType, productId },
+  });
+}
+
+/** 根据产品编号，获取设备的精简信息列表 */
+export function getDeviceListByProductId(productId: number) {
+  return requestClient.get<IotDeviceApi.Device[]>('/iot/device/simple-list', {
+    params: { productId },
+  });
+}
+
+/** 获取设备位置列表（用于地图展示） */
+export function getDeviceLocationList() {
+  return requestClient.get<IotDeviceApi.Device[]>('/iot/device/location-list');
+}
+
+/** 获取导入模板 */
+export function importDeviceTemplate() {
+  return requestClient.download('/iot/device/get-import-template');
+}
+
+/** 导入设备 */
+export function importDevice(file: File, updateSupport: boolean) {
+  return requestClient.upload<IotDeviceApi.DeviceImportRespVO>(
+    `/iot/device/import?updateSupport=${updateSupport}`,
+    { file },
+  );
+}
+
+/** 获取设备属性最新数据 */
+export function getLatestDeviceProperties(params: any) {
+  return requestClient.get<IotDeviceApi.DevicePropertyDetail[]>(
+    '/iot/device/property/get-latest',
+    { params },
+  );
+}
+
+/** 获取设备属性历史数据 */
+export function getHistoryDevicePropertyList(params: any) {
+  return requestClient.get<IotDeviceApi.DeviceProperty[]>(
+    '/iot/device/property/history-list',
+    { params },
+  );
+}
+
+/** 获取设备认证信息 */
+export function getDeviceAuthInfo(id: number) {
+  return requestClient.get<IotDeviceApi.DeviceAuthInfoRespVO>(
+    '/iot/device/get-auth-info',
+    { params: { id } },
+  );
+}
+
+/** 查询设备消息分页 */
+export function getDeviceMessagePage(params: PageParam) {
+  return requestClient.get<PageResult<any>>('/iot/device/message/page', {
+    params,
+  });
+}
+
+/** 查询设备消息配对分页 */
+export function getDeviceMessagePairPage(params: PageParam) {
+  return requestClient.get<PageResult<any>>('/iot/device/message/pair-page', {
+    params,
+  });
+}
+
+/** 发送设备消息 */
+export function sendDeviceMessage(params: IotDeviceApi.DeviceMessageSendReq) {
+  return requestClient.post('/iot/device/message/send', params);
+}
+
+/** 绑定子设备到网关设备 */
+export function bindDeviceGateway(gatewayId: number, subIds: number[]) {
+  return requestClient.put<boolean>('/iot/device/bind-gateway', {
+    gatewayId,
+    subIds,
+  });
+}
+
+/** 解绑子设备与网关设备 */
+export function unbindDeviceGateway(gatewayId: number, subIds: number[]) {
+  return requestClient.put<boolean>('/iot/device/unbind-gateway', {
+    gatewayId,
+    subIds,
+  });
+}
+
+/** 获取网关设备的子设备列表 */
+export function getSubDeviceList(gatewayId: number) {
+  return requestClient.get<IotDeviceApi.Device[]>(
+    '/iot/device/sub-device-list',
+    { params: { gatewayId } },
+  );
+}
+
+/** 获取未绑定的子设备分页 */
+export function getUnboundSubDevicePage(params: PageParam) {
+  return requestClient.get<PageResult<IotDeviceApi.Device>>(
+    '/iot/device/unbound-sub-device-page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/iot/device/group/index.ts b/apps/web-ele/src/api/iot/device/group/index.ts
new file mode 100644
index 000000000..2c11411ae
--- /dev/null
+++ b/apps/web-ele/src/api/iot/device/group/index.ts
@@ -0,0 +1,51 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace IotDeviceGroupApi {
+  /** 设备分组 */
+  export interface DeviceGroup {
+    id?: number; // 分组 ID
+    name: string; // 分组名字
+    status?: number; // 分组状态
+    description?: string; // 分组描述
+    deviceCount?: number; // 设备数量
+  }
+}
+
+/** 查询设备分组分页 */
+export function getDeviceGroupPage(params: PageParam) {
+  return requestClient.get<PageResult<IotDeviceGroupApi.DeviceGroup>>(
+    '/iot/device-group/page',
+    { params },
+  );
+}
+
+/** 查询设备分组详情 */
+export function getDeviceGroup(id: number) {
+  return requestClient.get<IotDeviceGroupApi.DeviceGroup>(
+    `/iot/device-group/get?id=${id}`,
+  );
+}
+
+/** 新增设备分组 */
+export function createDeviceGroup(data: IotDeviceGroupApi.DeviceGroup) {
+  return requestClient.post('/iot/device-group/create', data);
+}
+
+/** 修改设备分组 */
+export function updateDeviceGroup(data: IotDeviceGroupApi.DeviceGroup) {
+  return requestClient.put('/iot/device-group/update', data);
+}
+
+/** 删除设备分组 */
+export function deleteDeviceGroup(id: number) {
+  return requestClient.delete(`/iot/device-group/delete?id=${id}`);
+}
+
+/** 获取设备分组的精简信息列表 */
+export function getSimpleDeviceGroupList() {
+  return requestClient.get<IotDeviceGroupApi.DeviceGroup[]>(
+    '/iot/device-group/simple-list',
+  );
+}
diff --git a/apps/web-ele/src/api/iot/device/modbus/config/index.ts b/apps/web-ele/src/api/iot/device/modbus/config/index.ts
new file mode 100644
index 000000000..3ee1e4f10
--- /dev/null
+++ b/apps/web-ele/src/api/iot/device/modbus/config/index.ts
@@ -0,0 +1,30 @@
+import { requestClient } from '#/api/request';
+
+export namespace IotDeviceModbusConfigApi {
+  /** Modbus 连接配置 VO */
+  export interface ModbusConfig {
+    id?: number; // 主键
+    deviceId: number; // 设备编号
+    ip: string; // Modbus 服务器 IP 地址
+    port: number; // Modbus 服务器端口
+    slaveId: number; // 从站地址
+    timeout: number; // 连接超时时间，单位：毫秒
+    retryInterval: number; // 重试间隔，单位：毫秒
+    mode: number; // 模式
+    frameFormat: number; // 帧格式
+    status: number; // 状态
+  }
+}
+
+/** 获取设备的 Modbus 连接配置 */
+export function getModbusConfig(deviceId: number) {
+  return requestClient.get<IotDeviceModbusConfigApi.ModbusConfig>(
+    '/iot/device-modbus-config/get',
+    { params: { deviceId } },
+  );
+}
+
+/** 保存 Modbus 连接配置 */
+export function saveModbusConfig(data: IotDeviceModbusConfigApi.ModbusConfig) {
+  return requestClient.post('/iot/device-modbus-config/save', data);
+}
diff --git a/apps/web-ele/src/api/iot/device/modbus/point/index.ts b/apps/web-ele/src/api/iot/device/modbus/point/index.ts
new file mode 100644
index 000000000..11b440fae
--- /dev/null
+++ b/apps/web-ele/src/api/iot/device/modbus/point/index.ts
@@ -0,0 +1,52 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace IotDeviceModbusPointApi {
+  /** Modbus 点位配置 VO */
+  export interface ModbusPoint {
+    id?: number; // 主键
+    deviceId: number; // 设备编号
+    thingModelId?: number; // 物模型属性编号
+    identifier: string; // 属性标识符
+    name: string; // 属性名称
+    functionCode?: number; // Modbus 功能码
+    registerAddress?: number; // 寄存器起始地址
+    registerCount?: number; // 寄存器数量
+    byteOrder?: string; // 字节序
+    rawDataType?: string; // 原始数据类型
+    scale: number; // 缩放因子
+    pollInterval: number; // 轮询间隔，单位：毫秒
+    status: number; // 状态
+  }
+}
+
+/** 获取设备的 Modbus 点位分页 */
+export function getModbusPointPage(params: PageParam) {
+  return requestClient.get<PageResult<IotDeviceModbusPointApi.ModbusPoint>>(
+    '/iot/device-modbus-point/page',
+    { params },
+  );
+}
+
+/** 获取 Modbus 点位详情 */
+export function getModbusPoint(id: number) {
+  return requestClient.get<IotDeviceModbusPointApi.ModbusPoint>(
+    `/iot/device-modbus-point/get?id=${id}`,
+  );
+}
+
+/** 创建 Modbus 点位配置 */
+export function createModbusPoint(data: IotDeviceModbusPointApi.ModbusPoint) {
+  return requestClient.post('/iot/device-modbus-point/create', data);
+}
+
+/** 更新 Modbus 点位配置 */
+export function updateModbusPoint(data: IotDeviceModbusPointApi.ModbusPoint) {
+  return requestClient.put('/iot/device-modbus-point/update', data);
+}
+
+/** 删除 Modbus 点位配置 */
+export function deleteModbusPoint(id: number) {
+  return requestClient.delete(`/iot/device-modbus-point/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/iot/ota/firmware/index.ts b/apps/web-ele/src/api/iot/ota/firmware/index.ts
new file mode 100644
index 000000000..7fd7469ca
--- /dev/null
+++ b/apps/web-ele/src/api/iot/ota/firmware/index.ts
@@ -0,0 +1,50 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace IoTOtaFirmwareApi {
+  /** IoT OTA 固件信息 */
+  export interface Firmware {
+    id?: number;
+    name?: string;
+    description?: string;
+    version?: string;
+    productId?: number;
+    productName?: string;
+    fileUrl?: string;
+    fileSize?: number;
+    fileDigestAlgorithm?: string;
+    fileDigestValue?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询 OTA 固件分页 */
+export function getOtaFirmwarePage(params: PageParam) {
+  return requestClient.get<PageResult<IoTOtaFirmwareApi.Firmware>>(
+    '/iot/ota/firmware/page',
+    { params },
+  );
+}
+
+/** 查询 OTA 固件详情 */
+export function getOtaFirmware(id: number) {
+  return requestClient.get<IoTOtaFirmwareApi.Firmware>(
+    `/iot/ota/firmware/get?id=${id}`,
+  );
+}
+
+/** 新增 OTA 固件 */
+export function createOtaFirmware(data: IoTOtaFirmwareApi.Firmware) {
+  return requestClient.post('/iot/ota/firmware/create', data);
+}
+
+/** 修改 OTA 固件 */
+export function updateOtaFirmware(data: IoTOtaFirmwareApi.Firmware) {
+  return requestClient.put('/iot/ota/firmware/update', data);
+}
+
+/** 删除 OTA 固件 */
+export function deleteOtaFirmware(id: number) {
+  return requestClient.delete(`/iot/ota/firmware/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/iot/ota/task/index.ts b/apps/web-ele/src/api/iot/ota/task/index.ts
new file mode 100644
index 000000000..7f4f5d6fb
--- /dev/null
+++ b/apps/web-ele/src/api/iot/ota/task/index.ts
@@ -0,0 +1,42 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace IoTOtaTaskApi {
+  /** IoT OTA 升级任务 */
+  export interface Task {
+    id?: number;
+    name?: string;
+    description?: string;
+    firmwareId?: number;
+    status?: number;
+    deviceScope?: number;
+    deviceIds?: number[];
+    deviceTotalCount?: number;
+    deviceSuccessCount?: number;
+    createTime?: Date;
+  }
+}
+
+/** 查询 OTA 升级任务分页 */
+export function getOtaTaskPage(params: PageParam) {
+  return requestClient.get<PageResult<IoTOtaTaskApi.Task>>(
+    '/iot/ota/task/page',
+    { params },
+  );
+}
+
+/** 查询 OTA 升级任务详情 */
+export function getOtaTask(id: number) {
+  return requestClient.get<IoTOtaTaskApi.Task>(`/iot/ota/task/get?id=${id}`);
+}
+
+/** 新增 OTA 升级任务 */
+export function createOtaTask(data: IoTOtaTaskApi.Task) {
+  return requestClient.post('/iot/ota/task/create', data);
+}
+
+/** 取消 OTA 升级任务 */
+export function cancelOtaTask(id: number) {
+  return requestClient.post(`/iot/ota/task/cancel?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/iot/ota/task/record/index.ts b/apps/web-ele/src/api/iot/ota/task/record/index.ts
new file mode 100644
index 000000000..29eada8b6
--- /dev/null
+++ b/apps/web-ele/src/api/iot/ota/task/record/index.ts
@@ -0,0 +1,46 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace IoTOtaTaskRecordApi {
+  /** IoT OTA 升级任务记录 */
+  export interface TaskRecord {
+    id?: number;
+    firmwareId?: number;
+    firmwareVersion?: string;
+    taskId?: number;
+    deviceId?: string;
+    deviceName?: string;
+    currentVersion?: string;
+    fromFirmwareId?: number;
+    fromFirmwareVersion?: string;
+    status?: number;
+    progress?: number;
+    description?: string;
+    updateTime?: Date;
+  }
+}
+
+/** 查询 OTA 升级任务记录分页 */
+export function getOtaTaskRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<IoTOtaTaskRecordApi.TaskRecord>>(
+    '/iot/ota/task/record/page',
+    { params },
+  );
+}
+
+/** 取消 OTA 升级任务记录 */
+export function cancelOtaTaskRecord(id: number) {
+  return requestClient.put(`/iot/ota/task/record/cancel?id=${id}`);
+}
+
+/** 获取 OTA 升级任务记录状态统计 */
+export function getOtaTaskRecordStatusStatistics(
+  firmwareId?: number,
+  taskId?: number,
+) {
+  return requestClient.get<Record<string, number>>(
+    '/iot/ota/task/record/get-status-statistics',
+    { params: { firmwareId, taskId } },
+  );
+}
diff --git a/apps/web-ele/src/api/iot/product/category/index.ts b/apps/web-ele/src/api/iot/product/category/index.ts
new file mode 100644
index 000000000..45ce4ccdb
--- /dev/null
+++ b/apps/web-ele/src/api/iot/product/category/index.ts
@@ -0,0 +1,56 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace IotProductCategoryApi {
+  /** 产品分类 */
+  export interface ProductCategory {
+    id?: number; // 分类 ID
+    name: string; // 分类名称
+    sort?: number; // 分类排序
+    status?: number; // 分类状态
+    description?: string; // 分类描述
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询产品分类分页 */
+export function getProductCategoryPage(params: PageParam) {
+  return requestClient.get<PageResult<IotProductCategoryApi.ProductCategory>>(
+    '/iot/product-category/page',
+    { params },
+  );
+}
+
+/** 查询产品分类详情 */
+export function getProductCategory(id: number) {
+  return requestClient.get<IotProductCategoryApi.ProductCategory>(
+    `/iot/product-category/get?id=${id}`,
+  );
+}
+
+/** 新增产品分类 */
+export function createProductCategory(
+  data: IotProductCategoryApi.ProductCategory,
+) {
+  return requestClient.post('/iot/product-category/create', data);
+}
+
+/** 修改产品分类 */
+export function updateProductCategory(
+  data: IotProductCategoryApi.ProductCategory,
+) {
+  return requestClient.put('/iot/product-category/update', data);
+}
+
+/** 刪除产品分类 */
+export function deleteProductCategory(id: number) {
+  return requestClient.delete(`/iot/product-category/delete?id=${id}`);
+}
+
+/** 获取产品分类精简列表 */
+export function getSimpleProductCategoryList() {
+  return requestClient.get<IotProductCategoryApi.ProductCategory[]>(
+    '/iot/product-category/simple-list',
+  );
+}
diff --git a/apps/web-ele/src/api/iot/product/product/index.ts b/apps/web-ele/src/api/iot/product/product/index.ts
new file mode 100644
index 000000000..9b4a88ed6
--- /dev/null
+++ b/apps/web-ele/src/api/iot/product/product/index.ts
@@ -0,0 +1,110 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace IotProductApi {
+  /** 产品 */
+  export interface Product {
+    id?: number; // 产品编号
+    name: string; // 产品名称
+    productKey?: string; // 产品标识
+    productSecret?: string; // 产品密钥
+    protocolId?: number; // 协议编号
+    protocolType?: string; // 协议类型
+    categoryId?: number; // 产品所属品类标识符
+    categoryName?: string; // 产品所属品类名称
+    icon?: string; // 产品图标
+    picUrl?: string; // 产品图片
+    description?: string; // 产品描述
+    status?: number; // 产品状态
+    deviceType?: number; // 设备类型
+    netType?: number; // 联网方式
+    serializeType?: string; // 序列化类型
+    registerEnabled?: boolean; // 是否开启动态注册
+    deviceCount?: number; // 设备数量
+    createTime?: Date; // 创建时间
+  }
+}
+
+// IoT 协议类型枚举
+export enum ProtocolTypeEnum {
+  COAP = 'coap',
+  EMQX = 'emqx',
+  HTTP = 'http',
+  MODBUS_TCP_CLIENT = 'modbus_tcp_client',
+  MODBUS_TCP_SERVER = 'modbus_tcp_server',
+  MQTT = 'mqtt',
+  TCP = 'tcp',
+  UDP = 'udp',
+  WEBSOCKET = 'websocket',
+}
+
+// IoT 序列化类型枚举
+export enum SerializeTypeEnum {
+  BINARY = 'binary',
+  JSON = 'json',
+}
+
+/** 查询产品分页 */
+export function getProductPage(params: PageParam) {
+  return requestClient.get<PageResult<IotProductApi.Product>>(
+    '/iot/product/page',
+    { params },
+  );
+}
+
+/** 查询产品详情 */
+export function getProduct(id: number) {
+  return requestClient.get<IotProductApi.Product>(`/iot/product/get?id=${id}`);
+}
+
+/** 新增产品 */
+export function createProduct(data: IotProductApi.Product) {
+  return requestClient.post('/iot/product/create', data);
+}
+
+/** 修改产品 */
+export function updateProduct(data: IotProductApi.Product) {
+  return requestClient.put('/iot/product/update', data);
+}
+
+/** 删除产品 */
+export function deleteProduct(id: number) {
+  return requestClient.delete(`/iot/product/delete?id=${id}`);
+}
+
+/** 导出产品 Excel */
+export function exportProduct(params: any) {
+  return requestClient.download('/iot/product/export-excel', { params });
+}
+
+/** 更新产品状态 */
+export function updateProductStatus(id: number, status: number) {
+  return requestClient.put(
+    `/iot/product/update-status?id=${id}&status=${status}`,
+  );
+}
+
+/** 查询产品（精简）列表 */
+export function getSimpleProductList(deviceType?: number) {
+  return requestClient.get<IotProductApi.Product[]>(
+    '/iot/product/simple-list',
+    {
+      params: { deviceType },
+    },
+  );
+}
+
+/** 根据 ProductKey 获取产品信息 */
+export function getProductByKey(productKey: string) {
+  return requestClient.get<IotProductApi.Product>('/iot/product/get-by-key', {
+    params: { productKey },
+  });
+}
+
+/** 同步产品物模型 TDengine 超级表结构 */
+export function syncProductPropertyTable(productId: number) {
+  return requestClient.post(
+    `/iot/product/sync-property-table?productId=${productId}`,
+  );
+}
diff --git a/apps/web-ele/src/api/iot/rule/data/rule/index.ts b/apps/web-ele/src/api/iot/rule/data/rule/index.ts
new file mode 100644
index 000000000..e9ba120b2
--- /dev/null
+++ b/apps/web-ele/src/api/iot/rule/data/rule/index.ts
@@ -0,0 +1,44 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace DataRuleApi {
+  /** IoT 数据流转规则 */
+  export interface DataRule {
+    id?: number;
+    name?: string;
+    description?: string;
+    status?: number;
+    sourceConfigs?: any[];
+    sinkIds?: number[];
+    createTime?: Date;
+  }
+}
+
+/** 查询数据流转规则分页 */
+export function getDataRulePage(params: PageParam) {
+  return requestClient.get<PageResult<DataRuleApi.DataRule>>(
+    '/iot/data-rule/page',
+    { params },
+  );
+}
+
+/** 查询数据流转规则详情 */
+export function getDataRule(id: number) {
+  return requestClient.get<DataRuleApi.DataRule>(`/iot/data-rule/get?id=${id}`);
+}
+
+/** 新增数据流转规则 */
+export function createDataRule(data: DataRuleApi.DataRule) {
+  return requestClient.post('/iot/data-rule/create', data);
+}
+
+/** 修改数据流转规则 */
+export function updateDataRule(data: DataRuleApi.DataRule) {
+  return requestClient.put('/iot/data-rule/update', data);
+}
+
+/** 删除数据流转规则 */
+export function deleteDataRule(id: number) {
+  return requestClient.delete(`/iot/data-rule/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/iot/rule/data/sink/index.ts b/apps/web-ele/src/api/iot/rule/data/sink/index.ts
new file mode 100644
index 000000000..c4d1429ce
--- /dev/null
+++ b/apps/web-ele/src/api/iot/rule/data/sink/index.ts
@@ -0,0 +1,176 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+interface BaseConfig {
+  type: string;
+}
+
+export namespace DataSinkApi {
+  /** IoT 数据流转目的 VO */
+  export interface DataSink {
+    id?: number;
+    name?: string;
+    description?: string;
+    status?: number;
+    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;
+  }
+}
+
+/** 数据流转目的类型 */
+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.DataSink>>(
+    '/iot/data-sink/page',
+    { params },
+  );
+}
+
+/** 查询数据流转目的详情 */
+export function getDataSink(id: number) {
+  return requestClient.get<DataSinkApi.DataSink>(
+    `/iot/data-sink/get?id=${id}`,
+  );
+}
+
+/** 查询数据流转目的（精简）列表 */
+export function getDataSinkSimpleList() {
+  return requestClient.get<DataSinkApi.DataSink[]>('/iot/data-sink/simple-list');
+}
+
+/** 新增数据流转目的 */
+export function createDataSink(data: DataSinkApi.DataSink) {
+  return requestClient.post('/iot/data-sink/create', data);
+}
+
+/** 修改数据流转目的 */
+export function updateDataSink(data: DataSinkApi.DataSink) {
+  return requestClient.put('/iot/data-sink/update', data);
+}
+
+/** 删除数据流转目的 */
+export function deleteDataSink(id: number) {
+  return requestClient.delete(`/iot/data-sink/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/iot/rule/scene/index.ts b/apps/web-ele/src/api/iot/rule/scene/index.ts
new file mode 100644
index 000000000..f09519f06
--- /dev/null
+++ b/apps/web-ele/src/api/iot/rule/scene/index.ts
@@ -0,0 +1,104 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace RuleSceneApi {
+  /** 场景联动规则 */
+  export interface SceneRule {
+    id?: number;
+    name: string;
+    description?: string;
+    status?: number;
+    triggers?: Trigger[];
+    actions?: Action[];
+    lastTriggeredTime?: Date;
+    createTime?: Date;
+  }
+
+  /** 场景联动规则的触发器 */
+  export interface Trigger {
+    type?: number;
+    productId?: number;
+    deviceId?: number;
+    identifier?: string;
+    operator?: string;
+    value?: any;
+    cronExpression?: string;
+    // 后端结构：List<List<TriggerCondition>>；外层「或」、组内「且」
+    conditionGroups?: TriggerCondition[][];
+  }
+
+  /**  场景联动规则的触发条件 */
+  export interface TriggerCondition {
+    productId?: number;
+    deviceId?: number;
+    identifier?: string;
+    operator?: string;
+    value?: any;
+    type?: number;
+    param?: string;
+  }
+
+  /** 场景联动规则的动作 */
+  export interface Action {
+    type?: number;
+    productId?: number;
+    deviceId?: number;
+    identifier?: string;
+    value?: any;
+    alertConfigId?: number;
+    params?: string;
+  }
+}
+
+/** 查询场景联动规则分页 */
+export function getSceneRulePage(params: PageParam) {
+  return requestClient.get<PageResult<RuleSceneApi.SceneRule>>(
+    '/iot/scene-rule/page',
+    { params },
+  );
+}
+
+/** 查询场景联动规则详情 */
+export function getSceneRule(id: number) {
+  return requestClient.get<RuleSceneApi.SceneRule>(
+    `/iot/scene-rule/get?id=${id}`,
+  );
+}
+
+/** 新增场景联动规则 */
+export function createSceneRule(data: RuleSceneApi.SceneRule) {
+  return requestClient.post('/iot/scene-rule/create', data);
+}
+
+/** 修改场景联动规则 */
+export function updateSceneRule(data: RuleSceneApi.SceneRule) {
+  return requestClient.put('/iot/scene-rule/update', data);
+}
+
+/** 删除场景联动规则 */
+export function deleteSceneRule(id: number) {
+  return requestClient.delete(`/iot/scene-rule/delete?id=${id}`);
+}
+
+/** 批量删除场景联动规则 */
+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`, {
+    id,
+    status,
+  });
+}
+
+/** 获取场景联动规则简单列表 */
+export function getSimpleRuleSceneList() {
+  return requestClient.get<RuleSceneApi.SceneRule[]>(
+    '/iot/scene-rule/simple-list',
+  );
+}
diff --git a/apps/web-ele/src/api/iot/statistics/index.ts b/apps/web-ele/src/api/iot/statistics/index.ts
new file mode 100644
index 000000000..dc7971eb6
--- /dev/null
+++ b/apps/web-ele/src/api/iot/statistics/index.ts
@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+export namespace IotStatisticsApi {
+  /** 统计摘要数据 */
+  export interface StatisticsSummaryRespVO {
+    productCategoryCount: number; // 品类数量
+    productCount: number; // 产品数量
+    deviceCount: number; // 设备数量
+    deviceMessageCount: number; // 上报数量
+    productCategoryTodayCount: number; // 今日新增品类数量
+    productTodayCount: number; // 今日新增产品数量
+    deviceTodayCount: number; // 今日新增设备数量
+    deviceMessageTodayCount: number; // 今日新增上报数量
+    deviceOnlineCount: number; // 在线数量
+    deviceOfflineCount: number; // 离线数量
+    deviceInactiveCount: number; // 待激活设备数量
+    productCategoryDeviceCounts: Record<string, number>; // 按品类统计的设备数量
+  }
+
+  /** 设备消息数量统计（按日期） */
+  export interface DeviceMessageSummaryByDateRespVO {
+    time: string; // 时间轴
+    upstreamCount: number; // 上行消息数量
+    downstreamCount: number; // 下行消息数量
+  }
+
+  /** 设备消息统计请求 */
+  export interface DeviceMessageReqVO {
+    interval: number;
+    times?: string[];
+  }
+}
+
+/** 获取 IoT 统计摘要数据 */
+export function getStatisticsSummary() {
+  return requestClient.get<IotStatisticsApi.StatisticsSummaryRespVO>(
+    '/iot/statistics/get-summary',
+  );
+}
+
+/** 获取设备消息的数据统计（按日期） */
+export function getDeviceMessageSummaryByDate(
+  params: IotStatisticsApi.DeviceMessageReqVO,
+) {
+  return requestClient.get<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>(
+    '/iot/statistics/get-device-message-summary-by-date',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/iot/thingmodel/index.ts b/apps/web-ele/src/api/iot/thingmodel/index.ts
new file mode 100644
index 000000000..210e8d08b
--- /dev/null
+++ b/apps/web-ele/src/api/iot/thingmodel/index.ts
@@ -0,0 +1,256 @@
+import type { FormItemRule } from 'element-plus';
+
+import type { PageParam, PageResult } from '@vben/request';
+
+import { isEmpty } from '@vben/utils';
+
+import { requestClient } from '#/api/request';
+
+export namespace ThingModelApi {
+  /** IoT 物模型数据 */
+  export interface ThingModel {
+    id?: number;
+    productId?: number;
+    productKey?: string;
+    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;
+    required?: boolean;
+    dataType?: string;
+    description?: string;
+    dataSpecs?: any;
+    dataSpecsList?: any[];
+  }
+
+  /** IoT 物模型服务 */
+  export interface Service {
+    identifier?: string;
+    name?: string;
+    required?: boolean;
+    callType?: string;
+    description?: string;
+    inputParams?: Param[];
+    outputParams?: Param[];
+    method?: string;
+  }
+
+  /** IoT 物模型事件 */
+  export interface Event {
+    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;
+  }
+}
+
+/** 生成「必填 + 数字」类校验器：拼到 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();
+  };
+}
+
+/** 生成「标识符样式」名称校验器：开头需为中文 / 英文 / 数字，整体仅允许中文、英文、数字、下划线、短划线，长度 ≤ 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 const ThingModelFormRules: Record<string, FormItemRule[]> = {
+  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: /^\w{1,50}$/,
+      message: '支持大小写字母、数字和下划线，不超过 50 个字符',
+      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 const validateBoolName = buildIdentifierLikeNameValidator('布尔值名称');
+
+/** 查询产品物模型分页 */
+export function getThingModelPage(params: PageParam) {
+  return requestClient.get<PageResult<ThingModelApi.ThingModel>>(
+    '/iot/thing-model/page',
+    { params },
+  );
+}
+
+/** 查询产品物模型详情 */
+export function getThingModel(id: number) {
+  return requestClient.get<ThingModelApi.ThingModel>(
+    `/iot/thing-model/get?id=${id}`,
+  );
+}
+
+/** 根据产品 ID 查询物模型列表 */
+export function getThingModelListByProductId(productId: number) {
+  return requestClient.get<ThingModelApi.ThingModel[]>(
+    '/iot/thing-model/list',
+    {
+      params: { productId },
+    },
+  );
+}
+
+/** 新增物模型 */
+export function createThingModel(data: ThingModelApi.ThingModel) {
+  return requestClient.post('/iot/thing-model/create', data);
+}
+
+/** 修改物模型 */
+export function updateThingModel(data: ThingModelApi.ThingModel) {
+  return requestClient.put('/iot/thing-model/update', data);
+}
+
+/** 删除物模型 */
+export function deleteThingModel(id: number) {
+  return requestClient.delete(`/iot/thing-model/delete?id=${id}`);
+}
+
+/** 获取物模型 TSL */
+export function getThingModelTSLByProductId(productId: number) {
+  return requestClient.get<ThingModelApi.ThingModelTSL>(
+    '/iot/thing-model/get-tsl',
+    {
+      params: { productId },
+    },
+  );
+}
diff --git a/apps/web-ele/src/api/mes/cal/calendar/index.ts b/apps/web-ele/src/api/mes/cal/calendar/index.ts
new file mode 100644
index 000000000..2ecff82bd
--- /dev/null
+++ b/apps/web-ele/src/api/mes/cal/calendar/index.ts
@@ -0,0 +1,24 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesCalCalendarApi {
+  /** 排班日历班组排班项 */
+  export interface CalendarTeamShiftItem {
+    teamId?: number; // 班组编号
+    teamName?: string; // 班组名称
+    shiftId?: number; // 班次编号
+    shiftName?: string; // 班次名称
+    sort?: number; // 排序
+  }
+
+  /** 排班日历天 */
+  export interface CalendarDay {
+    day?: string; // 日期
+    shiftType?: number; // 轮班方式
+    teamShifts?: CalendarTeamShiftItem[]; // 班组班次
+  }
+}
+
+/** 查询排班日历列表 */
+export function getCalendarList(params: any) {
+  return requestClient.get<MesCalCalendarApi.CalendarDay[]>('/mes/cal/calendar/list', { params });
+}
diff --git a/apps/web-ele/src/api/mes/cal/holiday/index.ts b/apps/web-ele/src/api/mes/cal/holiday/index.ts
new file mode 100644
index 000000000..846d7cf1f
--- /dev/null
+++ b/apps/web-ele/src/api/mes/cal/holiday/index.ts
@@ -0,0 +1,33 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesCalHolidayApi {
+  /** MES 假期设置 */
+  export interface Holiday {
+    id?: number; // 编号
+    day?: number | string; // 日期
+    type?: number; // 日期类型
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+
+  /** 假期查询参数 */
+  export interface HolidayQuery {
+    startDay?: string;
+    endDay?: string;
+  }
+}
+
+/** 查询假期设置列表 */
+export function getHolidayList(params?: MesCalHolidayApi.HolidayQuery) {
+  return requestClient.get<MesCalHolidayApi.Holiday[]>('/mes/cal/holiday/list', { params });
+}
+
+/** 根据日期查询假期设置 */
+export function getHolidayByDay(day: string) {
+  return requestClient.get<MesCalHolidayApi.Holiday>('/mes/cal/holiday/get-by-day', { params: { day } });
+}
+
+/** 保存假期设置 */
+export function saveHoliday(data: MesCalHolidayApi.Holiday) {
+  return requestClient.post('/mes/cal/holiday/save', data);
+}
diff --git a/apps/web-ele/src/api/mes/cal/plan/index.ts b/apps/web-ele/src/api/mes/cal/plan/index.ts
new file mode 100644
index 000000000..0d3d326ee
--- /dev/null
+++ b/apps/web-ele/src/api/mes/cal/plan/index.ts
@@ -0,0 +1,56 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesCalPlanApi {
+  /** MES 排班计划 */
+  export interface Plan {
+    id?: number; // 计划编号
+    code?: string; // 计划编码
+    name?: string; // 计划名称
+    calendarType?: number; // 班组类型
+    startDate?: number; // 开始日期
+    endDate?: number; // 结束日期
+    shiftType?: number; // 轮班方式
+    shiftMethod?: number; // 倒班方式
+    shiftCount?: number; // 倒班天数
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询排班计划分页 */
+export function getPlanPage(params: PageParam) {
+  return requestClient.get<PageResult<MesCalPlanApi.Plan>>('/mes/cal/plan/page', { params });
+}
+
+/** 查询排班计划详情 */
+export function getPlan(id: number) {
+  return requestClient.get<MesCalPlanApi.Plan>(`/mes/cal/plan/get?id=${id}`);
+}
+
+/** 新增排班计划 */
+export function createPlan(data: MesCalPlanApi.Plan) {
+  return requestClient.post<number>('/mes/cal/plan/create', data);
+}
+
+/** 修改排班计划 */
+export function updatePlan(data: MesCalPlanApi.Plan) {
+  return requestClient.put('/mes/cal/plan/update', data);
+}
+
+/** 确认排班计划 */
+export function confirmPlan(id: number) {
+  return requestClient.put(`/mes/cal/plan/confirm?id=${id}`);
+}
+
+/** 删除排班计划 */
+export function deletePlan(id: number) {
+  return requestClient.delete(`/mes/cal/plan/delete?id=${id}`);
+}
+
+/** 导出排班计划 */
+export function exportPlan(params: any) {
+  return requestClient.download('/mes/cal/plan/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/cal/plan/shift/index.ts b/apps/web-ele/src/api/mes/cal/plan/shift/index.ts
new file mode 100644
index 000000000..91a9c93e0
--- /dev/null
+++ b/apps/web-ele/src/api/mes/cal/plan/shift/index.ts
@@ -0,0 +1,34 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesCalPlanShiftApi {
+  /** MES 计划班次 */
+  export interface PlanShift {
+    id?: number; // 班次编号
+    planId?: number; // 排班计划编号
+    sort?: number; // 显示顺序
+    name?: string; // 班次名称
+    startTime?: string; // 开始时间
+    endTime?: string; // 结束时间
+    remark?: string; // 备注
+  }
+}
+
+/** 查询指定排班计划的班次列表 */
+export function getPlanShiftListByPlan(planId: number) {
+  return requestClient.get<MesCalPlanShiftApi.PlanShift[]>(`/mes/cal/plan-shift/list-by-plan?planId=${planId}`);
+}
+
+/** 新增计划班次 */
+export function createPlanShift(data: MesCalPlanShiftApi.PlanShift) {
+  return requestClient.post('/mes/cal/plan-shift/create', data);
+}
+
+/** 修改计划班次 */
+export function updatePlanShift(data: MesCalPlanShiftApi.PlanShift) {
+  return requestClient.put('/mes/cal/plan-shift/update', data);
+}
+
+/** 删除计划班次 */
+export function deletePlanShift(id: number) {
+  return requestClient.delete(`/mes/cal/plan-shift/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/cal/plan/team/index.ts b/apps/web-ele/src/api/mes/cal/plan/team/index.ts
new file mode 100644
index 000000000..334978bf7
--- /dev/null
+++ b/apps/web-ele/src/api/mes/cal/plan/team/index.ts
@@ -0,0 +1,28 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesCalPlanTeamApi {
+  /** MES 计划班组关联 */
+  export interface PlanTeam {
+    id?: number; // 关联编号
+    planId?: number; // 排班计划编号
+    teamId?: number; // 班组编号
+    teamCode?: string; // 班组编码
+    teamName?: string; // 班组名称
+    remark?: string; // 备注
+  }
+}
+
+/** 查询指定排班计划的班组列表 */
+export function getPlanTeamListByPlan(planId: number) {
+  return requestClient.get<MesCalPlanTeamApi.PlanTeam[]>(`/mes/cal/plan-team/list-by-plan?planId=${planId}`);
+}
+
+/** 新增计划班组关联 */
+export function createPlanTeam(data: MesCalPlanTeamApi.PlanTeam) {
+  return requestClient.post('/mes/cal/plan-team/create', data);
+}
+
+/** 删除计划班组关联 */
+export function deletePlanTeam(id: number) {
+  return requestClient.delete(`/mes/cal/plan-team/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/cal/team/index.ts b/apps/web-ele/src/api/mes/cal/team/index.ts
new file mode 100644
index 000000000..1bff23911
--- /dev/null
+++ b/apps/web-ele/src/api/mes/cal/team/index.ts
@@ -0,0 +1,50 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesCalTeamApi {
+  /** MES 班组 */
+  export interface Team {
+    id?: number; // 班组编号
+    code?: string; // 班组编码
+    name?: string; // 班组名称
+    calendarType?: number; // 班组类型
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询班组分页 */
+export function getTeamPage(params: PageParam) {
+  return requestClient.get<PageResult<MesCalTeamApi.Team>>('/mes/cal/team/page', { params });
+}
+
+/** 查询班组列表 */
+export function getTeamList() {
+  return requestClient.get<MesCalTeamApi.Team[]>('/mes/cal/team/list');
+}
+
+/** 查询班组详情 */
+export function getTeam(id: number) {
+  return requestClient.get<MesCalTeamApi.Team>(`/mes/cal/team/get?id=${id}`);
+}
+
+/** 新增班组 */
+export function createTeam(data: MesCalTeamApi.Team) {
+  return requestClient.post('/mes/cal/team/create', data);
+}
+
+/** 修改班组 */
+export function updateTeam(data: MesCalTeamApi.Team) {
+  return requestClient.put('/mes/cal/team/update', data);
+}
+
+/** 删除班组 */
+export function deleteTeam(id: number) {
+  return requestClient.delete(`/mes/cal/team/delete?id=${id}`);
+}
+
+/** 导出班组 */
+export function exportTeam(params: any) {
+  return requestClient.download('/mes/cal/team/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/cal/team/member/index.ts b/apps/web-ele/src/api/mes/cal/team/member/index.ts
new file mode 100644
index 000000000..f8caad493
--- /dev/null
+++ b/apps/web-ele/src/api/mes/cal/team/member/index.ts
@@ -0,0 +1,42 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesCalTeamMemberApi {
+  /** MES 班组成员 */
+  export interface TeamMember {
+    id?: number; // 成员编号
+    teamId?: number; // 班组编号
+    userId?: number; // 用户编号
+    nickname?: string; // 用户昵称
+    telephone?: string; // 用户手机号
+    remark?: string; // 备注
+  }
+}
+
+/** 创建班组成员 */
+export function createTeamMember(data: MesCalTeamMemberApi.TeamMember) {
+  return requestClient.post('/mes/cal/team-member/create', data);
+}
+
+/** 删除班组成员 */
+export function deleteTeamMember(id: number) {
+  return requestClient.delete(`/mes/cal/team-member/delete?id=${id}`);
+}
+
+/** 查询班组成员分页 */
+export function getTeamMemberPage(params: PageParam) {
+  return requestClient.get<PageResult<MesCalTeamMemberApi.TeamMember>>('/mes/cal/team-member/page', { params });
+}
+
+/** 查询指定班组的成员列表 */
+export function getTeamMemberListByTeam(teamId: number) {
+  return requestClient.get<MesCalTeamMemberApi.TeamMember[]>('/mes/cal/team-member/list-by-team', { params: { teamId } });
+}
+
+/** 查询多个班组的成员列表 */
+export function getTeamMemberListByTeamIds(teamIds: number[]) {
+  return requestClient.get<MesCalTeamMemberApi.TeamMember[]>('/mes/cal/team-member/list-by-team', {
+    params: { teamIds: teamIds.join(',') },
+  });
+}
diff --git a/apps/web-ele/src/api/mes/dv/checkplan/index.ts b/apps/web-ele/src/api/mes/dv/checkplan/index.ts
new file mode 100644
index 000000000..8f946f664
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/checkplan/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckPlanApi {
+  /** MES 点检保养方案 */
+  export interface CheckPlan {
+    id?: number; // 方案编号
+    code?: string; // 方案编码
+    name?: string; // 方案名称
+    type?: number; // 方案类型
+    startDate?: Date | number; // 开始日期
+    endDate?: Date | number; // 结束日期
+    cycleType?: number; // 周期类型
+    cycleCount?: number; // 周期数量
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询点检保养方案分页 */
+export function getCheckPlanPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvCheckPlanApi.CheckPlan>>('/mes/dv/check-plan/page', { params });
+}
+
+/** 查询点检保养方案详情 */
+export function getCheckPlan(id: number) {
+  return requestClient.get<MesDvCheckPlanApi.CheckPlan>(`/mes/dv/check-plan/get?id=${id}`);
+}
+
+/** 新增点检保养方案 */
+export function createCheckPlan(data: MesDvCheckPlanApi.CheckPlan) {
+  return requestClient.post<number>('/mes/dv/check-plan/create', data);
+}
+
+/** 修改点检保养方案 */
+export function updateCheckPlan(data: MesDvCheckPlanApi.CheckPlan) {
+  return requestClient.put('/mes/dv/check-plan/update', data);
+}
+
+/** 启用点检保养方案 */
+export function enableCheckPlan(id: number) {
+  return requestClient.put(`/mes/dv/check-plan/enable?id=${id}`);
+}
+
+/** 停用点检保养方案 */
+export function disableCheckPlan(id: number) {
+  return requestClient.put(`/mes/dv/check-plan/disable?id=${id}`);
+}
+
+/** 删除点检保养方案 */
+export function deleteCheckPlan(id: number) {
+  return requestClient.delete(`/mes/dv/check-plan/delete?id=${id}`);
+}
+
+/** 导出点检保养方案 */
+export function exportCheckPlan(params: any) {
+  return requestClient.download('/mes/dv/check-plan/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/dv/checkplan/machinery/index.ts b/apps/web-ele/src/api/mes/dv/checkplan/machinery/index.ts
new file mode 100644
index 000000000..7e4d517c7
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/checkplan/machinery/index.ts
@@ -0,0 +1,30 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckPlanMachineryApi {
+  /** MES 点检保养方案设备 */
+  export interface CheckPlanMachinery {
+    id?: number; // 关联编号
+    planId?: number; // 方案编号
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    machineryBrand?: string; // 品牌
+    machinerySpecification?: string; // 规格型号
+    remark?: string; // 备注
+  }
+}
+
+/** 查询指定方案的设备列表 */
+export function getCheckPlanMachineryListByPlan(planId: number) {
+  return requestClient.get<MesDvCheckPlanMachineryApi.CheckPlanMachinery[]>(`/mes/dv/check-plan-machinery/list-by-plan?planId=${planId}`);
+}
+
+/** 新增方案设备关联 */
+export function createCheckPlanMachinery(data: MesDvCheckPlanMachineryApi.CheckPlanMachinery) {
+  return requestClient.post('/mes/dv/check-plan-machinery/create', data);
+}
+
+/** 删除方案设备关联 */
+export function deleteCheckPlanMachinery(id: number) {
+  return requestClient.delete(`/mes/dv/check-plan-machinery/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/dv/checkplan/subject/index.ts b/apps/web-ele/src/api/mes/dv/checkplan/subject/index.ts
new file mode 100644
index 000000000..827228f50
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/checkplan/subject/index.ts
@@ -0,0 +1,31 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckPlanSubjectApi {
+  /** MES 点检保养方案项目 */
+  export interface CheckPlanSubject {
+    id?: number; // 关联编号
+    planId?: number; // 方案编号
+    subjectId?: number; // 项目编号
+    subjectCode?: string; // 项目编码
+    subjectName?: string; // 项目名称
+    subjectType?: number; // 项目类型
+    subjectContent?: string; // 项目内容
+    subjectStandard?: string; // 标准
+    remark?: string; // 备注
+  }
+}
+
+/** 查询指定方案的项目列表 */
+export function getCheckPlanSubjectListByPlan(planId: number) {
+  return requestClient.get<MesDvCheckPlanSubjectApi.CheckPlanSubject[]>(`/mes/dv/check-plan-subject/list-by-plan?planId=${planId}`);
+}
+
+/** 新增方案项目关联 */
+export function createCheckPlanSubject(data: MesDvCheckPlanSubjectApi.CheckPlanSubject) {
+  return requestClient.post('/mes/dv/check-plan-subject/create', data);
+}
+
+/** 删除方案项目关联 */
+export function deleteCheckPlanSubject(id: number) {
+  return requestClient.delete(`/mes/dv/check-plan-subject/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/dv/checkrecord/index.ts b/apps/web-ele/src/api/mes/dv/checkrecord/index.ts
new file mode 100644
index 000000000..27606f6e9
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/checkrecord/index.ts
@@ -0,0 +1,58 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckRecordApi {
+  /** MES 设备点检记录 */
+  export interface CheckRecord {
+    id?: number; // 记录编号
+    planId?: number; // 点检计划编号
+    planName?: string; // 计划名称
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    machineryBrand?: string; // 品牌
+    machinerySpecification?: string; // 规格型号
+    checkTime?: Date | number; // 点检时间
+    userId?: number; // 点检人编号
+    nickname?: string; // 点检人名称
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询设备点检记录分页 */
+export function getCheckRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvCheckRecordApi.CheckRecord>>('/mes/dv/check-record/page', { params });
+}
+
+/** 查询设备点检记录详情 */
+export function getCheckRecord(id: number) {
+  return requestClient.get<MesDvCheckRecordApi.CheckRecord>(`/mes/dv/check-record/get?id=${id}`);
+}
+
+/** 新增设备点检记录 */
+export function createCheckRecord(data: MesDvCheckRecordApi.CheckRecord) {
+  return requestClient.post<number>('/mes/dv/check-record/create', data);
+}
+
+/** 修改设备点检记录 */
+export function updateCheckRecord(data: MesDvCheckRecordApi.CheckRecord) {
+  return requestClient.put('/mes/dv/check-record/update', data);
+}
+
+/** 提交设备点检记录 */
+export function submitCheckRecord(id: number) {
+  return requestClient.put(`/mes/dv/check-record/submit?id=${id}`);
+}
+
+/** 删除设备点检记录 */
+export function deleteCheckRecord(id: number) {
+  return requestClient.delete(`/mes/dv/check-record/delete?id=${id}`);
+}
+
+/** 导出设备点检记录 */
+export function exportCheckRecord(params: any) {
+  return requestClient.download('/mes/dv/check-record/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/dv/checkrecord/line/index.ts b/apps/web-ele/src/api/mes/dv/checkrecord/line/index.ts
new file mode 100644
index 000000000..64490c6dc
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/checkrecord/line/index.ts
@@ -0,0 +1,44 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvCheckRecordLineApi {
+  /** MES 设备点检记录明细 */
+  export interface CheckRecordLine {
+    id?: number; // 明细编号
+    recordId?: number; // 点检记录编号
+    subjectId?: number; // 点检项目编号
+    subjectCode?: string; // 项目编码
+    subjectName?: string; // 项目名称
+    subjectContent?: string; // 检查内容
+    subjectStandard?: string; // 检查标准
+    checkStatus?: number; // 点检结果
+    checkResult?: string; // 异常描述
+    remark?: string; // 备注
+  }
+}
+
+/** 查询设备点检记录明细分页 */
+export function getCheckRecordLinePage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvCheckRecordLineApi.CheckRecordLine>>('/mes/dv/check-record-line/page', { params });
+}
+
+/** 查询设备点检记录明细详情 */
+export function getCheckRecordLine(id: number) {
+  return requestClient.get<MesDvCheckRecordLineApi.CheckRecordLine>(`/mes/dv/check-record-line/get?id=${id}`);
+}
+
+/** 新增设备点检记录明细 */
+export function createCheckRecordLine(data: MesDvCheckRecordLineApi.CheckRecordLine) {
+  return requestClient.post('/mes/dv/check-record-line/create', data);
+}
+
+/** 修改设备点检记录明细 */
+export function updateCheckRecordLine(data: MesDvCheckRecordLineApi.CheckRecordLine) {
+  return requestClient.put('/mes/dv/check-record-line/update', data);
+}
+
+/** 删除设备点检记录明细 */
+export function deleteCheckRecordLine(id: number) {
+  return requestClient.delete(`/mes/dv/check-record-line/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/dv/machinery/index.ts b/apps/web-ele/src/api/mes/dv/machinery/index.ts
new file mode 100644
index 000000000..e4c02f1c4
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/machinery/index.ts
@@ -0,0 +1,45 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvMachineryApi {
+  /** MES 设备台账 */
+  export interface Machinery {
+    id?: number; // 设备编号
+    code?: string; // 设备编码
+    name?: string; // 设备名称
+    brand?: string; // 品牌
+    specification?: string; // 规格型号
+    machineryTypeId?: number; // 设备类型编号
+    machineryTypeName?: string; // 设备类型名称
+    workshopId?: number; // 所属车间编号
+    workshopName?: string; // 所属车间名称
+    status?: number; // 设备状态
+    lastMaintenTime?: Date; // 最近保养时间
+    lastCheckTime?: Date; // 最近点检时间
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询设备分页 */
+export function getMachineryPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvMachineryApi.Machinery>>(
+    '/mes/dv/machinery/page',
+    { params },
+  );
+}
+
+/** 查询设备精简列表 */
+export function getMachinerySimpleList() {
+  return requestClient.get<MesDvMachineryApi.Machinery[]>(
+    '/mes/dv/machinery/simple-list',
+  );
+}
+
+/** 查询设备详情 */
+export function getMachinery(id: number) {
+  return requestClient.get<MesDvMachineryApi.Machinery>(
+    `/mes/dv/machinery/get?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mes/dv/machinery/type/index.ts b/apps/web-ele/src/api/mes/dv/machinery/type/index.ts
new file mode 100644
index 000000000..d7992fc63
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/machinery/type/index.ts
@@ -0,0 +1,46 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesDvMachineryTypeApi {
+  /** MES 设备类型 */
+  export interface MachineryType {
+    id?: number; // 设备类型编号
+    parentId?: number; // 父类型编号
+    code?: string; // 类型编码
+    name?: string; // 类型名称
+    sort?: number; // 显示排序
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    children?: MachineryType[]; // 子类型
+  }
+}
+
+/** 查询设备类型列表 */
+export function getMachineryTypeList(params?: any) {
+  return requestClient.get<MesDvMachineryTypeApi.MachineryType[]>('/mes/dv/machinery-type/list', { params });
+}
+
+/** 查询设备类型精简列表 */
+export function getMachineryTypeSimpleList() {
+  return requestClient.get<MesDvMachineryTypeApi.MachineryType[]>('/mes/dv/machinery-type/simple-list');
+}
+
+/** 查询设备类型详情 */
+export function getMachineryType(id: number) {
+  return requestClient.get<MesDvMachineryTypeApi.MachineryType>(`/mes/dv/machinery-type/get?id=${id}`);
+}
+
+/** 新增设备类型 */
+export function createMachineryType(data: MesDvMachineryTypeApi.MachineryType) {
+  return requestClient.post('/mes/dv/machinery-type/create', data);
+}
+
+/** 修改设备类型 */
+export function updateMachineryType(data: MesDvMachineryTypeApi.MachineryType) {
+  return requestClient.put('/mes/dv/machinery-type/update', data);
+}
+
+/** 删除设备类型 */
+export function deleteMachineryType(id: number) {
+  return requestClient.delete(`/mes/dv/machinery-type/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/dv/maintenrecord/index.ts b/apps/web-ele/src/api/mes/dv/maintenrecord/index.ts
new file mode 100644
index 000000000..68f86da7d
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/maintenrecord/index.ts
@@ -0,0 +1,58 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvMaintenRecordApi {
+  /** MES 设备保养记录 */
+  export interface MaintenRecord {
+    id?: number; // 记录编号
+    planId?: number; // 计划编号
+    planName?: string; // 计划名称
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    machineryBrand?: string; // 品牌
+    machinerySpecification?: string; // 规格型号
+    maintenTime?: Date | number; // 保养时间
+    userId?: number; // 用户编号
+    nickname?: string; // 保养人名称
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询设备保养记录分页 */
+export function getMaintenRecordPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvMaintenRecordApi.MaintenRecord>>('/mes/dv/mainten-record/page', { params });
+}
+
+/** 查询设备保养记录详情 */
+export function getMaintenRecord(id: number) {
+  return requestClient.get<MesDvMaintenRecordApi.MaintenRecord>(`/mes/dv/mainten-record/get?id=${id}`);
+}
+
+/** 新增设备保养记录 */
+export function createMaintenRecord(data: MesDvMaintenRecordApi.MaintenRecord) {
+  return requestClient.post<number>('/mes/dv/mainten-record/create', data);
+}
+
+/** 修改设备保养记录 */
+export function updateMaintenRecord(data: MesDvMaintenRecordApi.MaintenRecord) {
+  return requestClient.put('/mes/dv/mainten-record/update', data);
+}
+
+/** 提交设备保养记录 */
+export function submitMaintenRecord(id: number) {
+  return requestClient.put(`/mes/dv/mainten-record/submit?id=${id}`);
+}
+
+/** 删除设备保养记录 */
+export function deleteMaintenRecord(id: number) {
+  return requestClient.delete(`/mes/dv/mainten-record/delete?id=${id}`);
+}
+
+/** 导出设备保养记录 */
+export function exportMaintenRecord(params: any) {
+  return requestClient.download('/mes/dv/mainten-record/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/dv/maintenrecord/line/index.ts b/apps/web-ele/src/api/mes/dv/maintenrecord/line/index.ts
new file mode 100644
index 000000000..36b45e57d
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/maintenrecord/line/index.ts
@@ -0,0 +1,43 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvMaintenRecordLineApi {
+  /** MES 设备保养记录明细 */
+  export interface MaintenRecordLine {
+    id?: number; // 明细编号
+    recordId?: number; // 保养记录编号
+    subjectId?: number; // 项目编号
+    subjectName?: string; // 项目名称
+    subjectContent?: string; // 项目内容
+    subjectStandard?: string; // 项目标准
+    status?: number; // 保养结果
+    result?: string; // 异常描述
+    remark?: string; // 备注
+  }
+}
+
+/** 查询设备保养记录明细分页 */
+export function getMaintenRecordLinePage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvMaintenRecordLineApi.MaintenRecordLine>>('/mes/dv/mainten-record-line/page', { params });
+}
+
+/** 查询设备保养记录明细详情 */
+export function getMaintenRecordLine(id: number) {
+  return requestClient.get<MesDvMaintenRecordLineApi.MaintenRecordLine>(`/mes/dv/mainten-record-line/get?id=${id}`);
+}
+
+/** 新增设备保养记录明细 */
+export function createMaintenRecordLine(data: MesDvMaintenRecordLineApi.MaintenRecordLine) {
+  return requestClient.post('/mes/dv/mainten-record-line/create', data);
+}
+
+/** 修改设备保养记录明细 */
+export function updateMaintenRecordLine(data: MesDvMaintenRecordLineApi.MaintenRecordLine) {
+  return requestClient.put('/mes/dv/mainten-record-line/update', data);
+}
+
+/** 删除设备保养记录明细 */
+export function deleteMaintenRecordLine(id: number) {
+  return requestClient.delete(`/mes/dv/mainten-record-line/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/dv/repair/index.ts b/apps/web-ele/src/api/mes/dv/repair/index.ts
new file mode 100644
index 000000000..1586ae02f
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/repair/index.ts
@@ -0,0 +1,76 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvRepairApi {
+  /** MES 维修工单 */
+  export interface Repair {
+    id?: number; // 工单编号
+    code?: string; // 维修工单编码
+    name?: string; // 维修工单名称
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    machineryBrand?: string; // 品牌
+    machinerySpecification?: string; // 规格型号
+    requireDate?: Date | number; // 报修日期
+    finishDate?: Date | number; // 维修完成日期
+    confirmDate?: Date | number; // 验收日期
+    result?: number; // 维修结果
+    acceptedUserId?: number; // 维修人编号
+    acceptedUserNickname?: string; // 维修人名称
+    confirmUserId?: number; // 验收人编号
+    confirmUserNickname?: string; // 验收人名称
+    sourceDocType?: number; // 来源单据类型
+    sourceDocId?: number; // 来源单据编号
+    sourceDocCode?: string; // 来源单据编码
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询维修工单分页 */
+export function getRepairPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvRepairApi.Repair>>('/mes/dv/repair/page', { params });
+}
+
+/** 查询维修工单详情 */
+export function getRepair(id: number) {
+  return requestClient.get<MesDvRepairApi.Repair>(`/mes/dv/repair/get?id=${id}`);
+}
+
+/** 新增维修工单 */
+export function createRepair(data: MesDvRepairApi.Repair) {
+  return requestClient.post<number>('/mes/dv/repair/create', data);
+}
+
+/** 修改维修工单 */
+export function updateRepair(data: MesDvRepairApi.Repair) {
+  return requestClient.put('/mes/dv/repair/update', data);
+}
+
+/** 删除维修工单 */
+export function deleteRepair(id: number) {
+  return requestClient.delete(`/mes/dv/repair/delete?id=${id}`);
+}
+
+/** 导出维修工单 */
+export function exportRepair(params: any) {
+  return requestClient.download('/mes/dv/repair/export-excel', { params });
+}
+
+/** 提交维修工单 */
+export function submitRepair(id: number) {
+  return requestClient.put(`/mes/dv/repair/submit?id=${id}`);
+}
+
+/** 确认维修完成 */
+export function confirmRepair(data: MesDvRepairApi.Repair) {
+  return requestClient.put('/mes/dv/repair/confirm', data);
+}
+
+/** 完成验收 */
+export function finishRepair(id: number, result: number) {
+  return requestClient.put(`/mes/dv/repair/finish?id=${id}&result=${result}`);
+}
diff --git a/apps/web-ele/src/api/mes/dv/repair/line/index.ts b/apps/web-ele/src/api/mes/dv/repair/line/index.ts
new file mode 100644
index 000000000..414b167e8
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/repair/line/index.ts
@@ -0,0 +1,44 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvRepairLineApi {
+  /** MES 维修工单行 */
+  export interface RepairLine {
+    id?: number; // 明细编号
+    repairId?: number; // 维修工单编号
+    subjectId?: number; // 项目编号
+    subjectName?: string; // 项目名称
+    subjectContent?: string; // 项目内容
+    subjectStandard?: string; // 项目标准
+    malfunction?: string; // 故障描述
+    malfunctionUrl?: string; // 故障图片 URL
+    description?: string; // 维修描述
+    remark?: string; // 备注
+  }
+}
+
+/** 查询维修工单行分页 */
+export function getRepairLinePage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvRepairLineApi.RepairLine>>('/mes/dv/repair-line/page', { params });
+}
+
+/** 查询维修工单行详情 */
+export function getRepairLine(id: number) {
+  return requestClient.get<MesDvRepairLineApi.RepairLine>(`/mes/dv/repair-line/get?id=${id}`);
+}
+
+/** 新增维修工单行 */
+export function createRepairLine(data: MesDvRepairLineApi.RepairLine) {
+  return requestClient.post('/mes/dv/repair-line/create', data);
+}
+
+/** 修改维修工单行 */
+export function updateRepairLine(data: MesDvRepairLineApi.RepairLine) {
+  return requestClient.put('/mes/dv/repair-line/update', data);
+}
+
+/** 删除维修工单行 */
+export function deleteRepairLine(id: number) {
+  return requestClient.delete(`/mes/dv/repair-line/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/dv/subject/index.ts b/apps/web-ele/src/api/mes/dv/subject/index.ts
new file mode 100644
index 000000000..85d21e92b
--- /dev/null
+++ b/apps/web-ele/src/api/mes/dv/subject/index.ts
@@ -0,0 +1,53 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesDvSubjectApi {
+  /** MES 点检保养项目 */
+  export interface Subject {
+    id?: number; // 项目编号
+    code?: string; // 项目编码
+    name?: string; // 项目名称
+    type?: number; // 项目类型
+    content?: string; // 项目内容
+    standard?: string; // 标准
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询点检保养项目分页 */
+export function getSubjectPage(params: PageParam) {
+  return requestClient.get<PageResult<MesDvSubjectApi.Subject>>('/mes/dv/subject/page', { params });
+}
+
+/** 查询点检保养项目精简列表 */
+export function getSubjectSimpleList() {
+  return requestClient.get<MesDvSubjectApi.Subject[]>('/mes/dv/subject/simple-list');
+}
+
+/** 查询点检保养项目详情 */
+export function getSubject(id: number) {
+  return requestClient.get<MesDvSubjectApi.Subject>(`/mes/dv/subject/get?id=${id}`);
+}
+
+/** 新增点检保养项目 */
+export function createSubject(data: MesDvSubjectApi.Subject) {
+  return requestClient.post('/mes/dv/subject/create', data);
+}
+
+/** 修改点检保养项目 */
+export function updateSubject(data: MesDvSubjectApi.Subject) {
+  return requestClient.put('/mes/dv/subject/update', data);
+}
+
+/** 删除点检保养项目 */
+export function deleteSubject(id: number) {
+  return requestClient.delete(`/mes/dv/subject/delete?id=${id}`);
+}
+
+/** 导出点检保养项目 */
+export function exportSubject(params: any) {
+  return requestClient.download('/mes/dv/subject/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/md/autocode/part/index.ts b/apps/web-ele/src/api/mes/md/autocode/part/index.ts
new file mode 100644
index 000000000..c64684c9b
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/autocode/part/index.ts
@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdAutoCodePartApi {
+  /** MES 编码规则分段 */
+  export interface AutoCodePart {
+    id?: number; // 分段编号
+    ruleId?: number; // 规则编号
+    sort?: number; // 排序
+    type?: number; // 分段类型
+    length?: number; // 长度
+    dateFormat?: string; // 日期格式
+    fixCharacter?: string; // 固定字符
+    serialStartNo?: number; // 流水号起始值
+    serialStep?: number; // 流水号步长
+    cycleFlag?: boolean; // 是否循环
+    cycleMethod?: number; // 循环方式
+    remark?: string; // 备注
+  }
+}
+
+/** 查询编码规则分段详情 */
+export function getAutoCodePart(id: number) {
+  return requestClient.get<MesMdAutoCodePartApi.AutoCodePart>(
+    `/mes/md/auto-code-part/get?id=${id}`,
+  );
+}
+
+/** 查询编码规则分段列表 */
+export function getAutoCodePartListByRuleId(ruleId: number) {
+  return requestClient.get<MesMdAutoCodePartApi.AutoCodePart[]>(
+    '/mes/md/auto-code-part/list-by-rule-id',
+    { params: { ruleId } },
+  );
+}
+
+/** 新增编码规则分段 */
+export function createAutoCodePart(data: MesMdAutoCodePartApi.AutoCodePart) {
+  return requestClient.post('/mes/md/auto-code-part/create', data);
+}
+
+/** 修改编码规则分段 */
+export function updateAutoCodePart(data: MesMdAutoCodePartApi.AutoCodePart) {
+  return requestClient.put('/mes/md/auto-code-part/update', data);
+}
+
+/** 删除编码规则分段 */
+export function deleteAutoCodePart(id: number) {
+  return requestClient.delete(`/mes/md/auto-code-part/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/md/autocode/record/index.ts b/apps/web-ele/src/api/mes/md/autocode/record/index.ts
new file mode 100644
index 000000000..6110249ee
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/autocode/record/index.ts
@@ -0,0 +1,9 @@
+import { requestClient } from '#/api/request';
+
+/** 生成 MES 编码 */
+export function generateAutoCode(ruleCode: string, inputChar?: string) {
+  return requestClient.post<string>('/mes/md/auto-code-record/generate', {
+    inputChar,
+    ruleCode,
+  });
+}
diff --git a/apps/web-ele/src/api/mes/md/autocode/rule/index.ts b/apps/web-ele/src/api/mes/md/autocode/rule/index.ts
new file mode 100644
index 000000000..d33e6e0fc
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/autocode/rule/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdAutoCodeRuleApi {
+  /** MES 编码规则 */
+  export interface AutoCodeRule {
+    id?: number; // 规则编号
+    code?: string; // 规则编码
+    name?: string; // 规则名称
+    description?: string; // 规则描述
+    maxLength?: number; // 最大长度
+    padded?: boolean; // 是否补齐
+    paddedChar?: string; // 补齐字符
+    paddedMethod?: number; // 补齐方式
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询编码规则分页 */
+export function getAutoCodeRulePage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdAutoCodeRuleApi.AutoCodeRule>>(
+    '/mes/md/auto-code-rule/page',
+    { params },
+  );
+}
+
+/** 查询编码规则详情 */
+export function getAutoCodeRule(id: number) {
+  return requestClient.get<MesMdAutoCodeRuleApi.AutoCodeRule>(
+    `/mes/md/auto-code-rule/get?id=${id}`,
+  );
+}
+
+/** 新增编码规则 */
+export function createAutoCodeRule(data: MesMdAutoCodeRuleApi.AutoCodeRule) {
+  return requestClient.post('/mes/md/auto-code-rule/create', data);
+}
+
+/** 修改编码规则 */
+export function updateAutoCodeRule(data: MesMdAutoCodeRuleApi.AutoCodeRule) {
+  return requestClient.put('/mes/md/auto-code-rule/update', data);
+}
+
+/** 删除编码规则 */
+export function deleteAutoCodeRule(id: number) {
+  return requestClient.delete(`/mes/md/auto-code-rule/delete?id=${id}`);
+}
+
+/** 导出编码规则 */
+export function exportAutoCodeRule(params: PageParam) {
+  return requestClient.download('/mes/md/auto-code-rule/export-excel', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/mes/md/client/index.ts b/apps/web-ele/src/api/mes/md/client/index.ts
new file mode 100644
index 000000000..9be868d69
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/client/index.ts
@@ -0,0 +1,86 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdClientApi {
+  /** MES 客户 */
+  export interface Client {
+    id?: number; // 客户编号
+    code?: string; // 客户编码
+    name?: string; // 客户名称
+    nickname?: string; // 客户简称
+    englishName?: string; // 客户英文名称
+    description?: string; // 客户简介
+    logo?: string; // 客户 LOGO 地址
+    type?: number; // 客户类型
+    address?: string; // 客户地址
+    website?: string; // 客户官网地址
+    email?: string; // 客户邮箱地址
+    telephone?: string; // 客户电话
+    contact1Name?: string; // 联系人1
+    contact1Telephone?: string; // 联系人1电话
+    contact1Email?: string; // 联系人1邮箱
+    contact2Name?: string; // 联系人2
+    contact2Telephone?: string; // 联系人2电话
+    contact2Email?: string; // 联系人2邮箱
+    creditCode?: string; // 统一社会信用代码
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+
+  /** 客户导入结果 */
+  export interface ClientImportRespVO {
+    createCodes?: string[]; // 新增成功的客户编码
+    updateCodes?: string[]; // 更新成功的客户编码
+    failureCodes?: Record<string, string>; // 导入失败的客户编码及原因
+  }
+}
+
+/** 查询客户分页 */
+export function getClientPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdClientApi.Client>>(
+    '/mes/md-client/page',
+    { params },
+  );
+}
+
+/** 查询客户详情 */
+export function getClient(id: number) {
+  return requestClient.get<MesMdClientApi.Client>(
+    `/mes/md-client/get?id=${id}`,
+  );
+}
+
+/** 新增客户 */
+export function createClient(data: MesMdClientApi.Client) {
+  return requestClient.post('/mes/md-client/create', data);
+}
+
+/** 修改客户 */
+export function updateClient(data: MesMdClientApi.Client) {
+  return requestClient.put('/mes/md-client/update', data);
+}
+
+/** 删除客户 */
+export function deleteClient(id: number) {
+  return requestClient.delete(`/mes/md-client/delete?id=${id}`);
+}
+
+/** 导出客户 */
+export function exportClient(params: any) {
+  return requestClient.download('/mes/md-client/export-excel', { params });
+}
+
+/** 下载客户导入模板 */
+export function importClientTemplate() {
+  return requestClient.download('/mes/md-client/get-import-template');
+}
+
+/** 导入客户 */
+export function importClient(file: File, updateSupport: boolean) {
+  return requestClient.upload<MesMdClientApi.ClientImportRespVO>(
+    `/mes/md-client/import?updateSupport=${updateSupport}`,
+    { file },
+  );
+}
diff --git a/apps/web-ele/src/api/mes/md/item/batchConfig/index.ts b/apps/web-ele/src/api/mes/md/item/batchConfig/index.ts
new file mode 100644
index 000000000..29b48848c
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/item/batchConfig/index.ts
@@ -0,0 +1,37 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdItemBatchConfigApi {
+  /** MES 物料批次属性配置 */
+  export interface BatchConfig {
+    id?: number; // 编号
+    itemId?: number; // 物料编号
+    produceDateFlag?: boolean; // 批次属性-生产日期
+    expireDateFlag?: boolean; // 批次属性-有效期
+    receiptDateFlag?: boolean; // 批次属性-入库日期
+    vendorFlag?: boolean; // 批次属性-供应商
+    clientFlag?: boolean; // 批次属性-客户
+    salesOrderCodeFlag?: boolean; // 批次属性-销售订单编号
+    purchaseOrderCodeFlag?: boolean; // 批次属性-采购订单编号
+    workorderFlag?: boolean; // 批次属性-生产工单
+    taskFlag?: boolean; // 批次属性-生产任务
+    workstationFlag?: boolean; // 批次属性-工作站
+    toolFlag?: boolean; // 批次属性-工具
+    moldFlag?: boolean; // 批次属性-模具
+    lotNumberFlag?: boolean; // 批次属性-生产批号
+    qualityStatusFlag?: boolean; // 批次属性-质量状态
+  }
+}
+
+/** 根据物料编号获取批次属性配置 */
+export function getBatchConfigByItemId(itemId: number) {
+  return requestClient.get<MesMdItemBatchConfigApi.BatchConfig>(
+    `/mes/md/item-batch-config/get-by-item-id?itemId=${itemId}`,
+  );
+}
+
+/** 保存批次属性配置 */
+export function saveBatchConfig(
+  data: MesMdItemBatchConfigApi.BatchConfig,
+) {
+  return requestClient.post('/mes/md/item-batch-config/save', data);
+}
diff --git a/apps/web-ele/src/api/mes/md/item/index.ts b/apps/web-ele/src/api/mes/md/item/index.ts
new file mode 100644
index 000000000..f2a23c0e6
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/item/index.ts
@@ -0,0 +1,85 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdItemApi {
+  /** MES 物料产品 */
+  export interface Item {
+    id?: number; // 物料编号
+    code?: string; // 物料编码
+    name?: string; // 物料名称
+    specification?: string; // 规格型号
+    unitMeasureId?: number; // 计量单位编号
+    unitMeasureName?: string; // 计量单位名称
+    itemTypeId?: number; // 物料分类编号
+    itemTypeName?: string; // 物料分类名称
+    itemOrProduct?: string; // 物料/产品标识
+    status?: number; // 状态
+    safeStockFlag?: boolean; // 是否启用安全库存
+    minStock?: number; // 最低库存量
+    maxStock?: number; // 最高库存量
+    highValue?: boolean; // 是否高值物料
+    batchFlag?: boolean; // 是否启用批次管理
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+
+  /** 物料导入结果 */
+  export interface ItemImportRespVO {
+    createCodes?: string[]; // 新增成功的物料编码
+    updateCodes?: string[]; // 更新成功的物料编码
+    failureCodes?: Record<string, string>; // 导入失败的物料编码及原因
+  }
+}
+
+/** 查询物料产品分页 */
+export function getItemPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdItemApi.Item>>('/mes/md/item/page', {
+    params,
+  });
+}
+
+/** 查询物料产品详情 */
+export function getItem(id: number) {
+  return requestClient.get<MesMdItemApi.Item>(`/mes/md/item/get?id=${id}`);
+}
+
+/** 新增物料产品 */
+export function createItem(data: MesMdItemApi.Item) {
+  return requestClient.post<number>('/mes/md/item/create', data);
+}
+
+/** 修改物料产品 */
+export function updateItem(data: MesMdItemApi.Item) {
+  return requestClient.put('/mes/md/item/update', data);
+}
+
+/** 修改物料产品状态 */
+export function updateItemStatus(id: number, status: number) {
+  return requestClient.put('/mes/md/item/update-status', undefined, {
+    params: { id, status },
+  });
+}
+
+/** 删除物料产品 */
+export function deleteItem(id: number) {
+  return requestClient.delete(`/mes/md/item/delete?id=${id}`);
+}
+
+/** 导出物料产品 */
+export function exportItem(params: any) {
+  return requestClient.download('/mes/md/item/export-excel', { params });
+}
+
+/** 下载物料导入模板 */
+export function importItemTemplate() {
+  return requestClient.download('/mes/md/item/get-import-template');
+}
+
+/** 导入物料产品 */
+export function importItem(file: File, updateSupport: boolean) {
+  return requestClient.upload<MesMdItemApi.ItemImportRespVO>(
+    `/mes/md/item/import?updateSupport=${updateSupport}`,
+    { file },
+  );
+}
diff --git a/apps/web-ele/src/api/mes/md/item/productBom/index.ts b/apps/web-ele/src/api/mes/md/item/productBom/index.ts
new file mode 100644
index 000000000..27176a60a
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/item/productBom/index.ts
@@ -0,0 +1,58 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdProductBomApi {
+  /** MES 产品 BOM */
+  export interface ProductBom {
+    id?: number; // BOM 编号
+    itemId?: number; // 物料产品编号
+    bomItemId?: number; // BOM 物料编号
+    quantity?: number; // 物料使用比例
+    status?: number; // 是否启用
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    bomItemCode?: string; // BOM 物料编码
+    bomItemName?: string; // BOM 物料名称
+    bomItemSpecification?: string; // BOM 物料规格
+    unitMeasureName?: string; // 计量单位名称
+    itemOrProduct?: string; // 物料/产品标识
+  }
+}
+
+/** 新增产品 BOM */
+export function createProductBom(data: MesMdProductBomApi.ProductBom) {
+  return requestClient.post('/mes/md/product-bom/create', data);
+}
+
+/** 修改产品 BOM */
+export function updateProductBom(data: MesMdProductBomApi.ProductBom) {
+  return requestClient.put('/mes/md/product-bom/update', data);
+}
+
+/** 删除产品 BOM */
+export function deleteProductBom(id: number) {
+  return requestClient.delete(`/mes/md/product-bom/delete?id=${id}`);
+}
+
+/** 查询产品 BOM 详情 */
+export function getProductBom(id: number) {
+  return requestClient.get<MesMdProductBomApi.ProductBom>(
+    `/mes/md/product-bom/get?id=${id}`,
+  );
+}
+
+/** 查询产品 BOM 分页 */
+export function getProductBomPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdProductBomApi.ProductBom>>(
+    '/mes/md/product-bom/page',
+    { params },
+  );
+}
+
+/** 根据物料产品编号查询产品 BOM 列表 */
+export function getProductBomListByItemId(itemId: number) {
+  return requestClient.get<MesMdProductBomApi.ProductBom[]>(
+    `/mes/md/product-bom/list-by-item-id?itemId=${itemId}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mes/md/item/productSip/index.ts b/apps/web-ele/src/api/mes/md/item/productSip/index.ts
new file mode 100644
index 000000000..eac5599d7
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/item/productSip/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdProductSipApi {
+  /** MES 产品 SIP */
+  export interface ProductSip {
+    id?: number; // SIP 编号
+    itemId?: number; // 物料产品编号
+    sort?: number; // 排列顺序
+    processId?: number; // 工序编号
+    title?: string; // 标题
+    description?: string; // 详细描述
+    url?: string; // 图片地址
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    processCode?: string; // 工序编码
+    processName?: string; // 工序名称
+  }
+}
+
+/** 新增产品 SIP */
+export function createProductSip(data: MesMdProductSipApi.ProductSip) {
+  return requestClient.post('/mes/md/product-sip/create', data);
+}
+
+/** 修改产品 SIP */
+export function updateProductSip(data: MesMdProductSipApi.ProductSip) {
+  return requestClient.put('/mes/md/product-sip/update', data);
+}
+
+/** 删除产品 SIP */
+export function deleteProductSip(id: number) {
+  return requestClient.delete(`/mes/md/product-sip/delete?id=${id}`);
+}
+
+/** 查询产品 SIP 详情 */
+export function getProductSip(id: number) {
+  return requestClient.get<MesMdProductSipApi.ProductSip>(
+    `/mes/md/product-sip/get?id=${id}`,
+  );
+}
+
+/** 查询产品 SIP 分页 */
+export function getProductSipPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdProductSipApi.ProductSip>>(
+    '/mes/md/product-sip/page',
+    { params },
+  );
+}
+
+/** 根据物料产品编号查询产品 SIP 列表 */
+export function getProductSipListByItemId(itemId: number) {
+  return requestClient.get<MesMdProductSipApi.ProductSip[]>(
+    `/mes/md/product-sip/list-by-item-id?itemId=${itemId}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mes/md/item/productSop/index.ts b/apps/web-ele/src/api/mes/md/item/productSop/index.ts
new file mode 100644
index 000000000..554869a41
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/item/productSop/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdProductSopApi {
+  /** MES 产品 SOP */
+  export interface ProductSop {
+    id?: number; // SOP 编号
+    itemId?: number; // 物料产品编号
+    sort?: number; // 排列顺序
+    processId?: number; // 工序编号
+    title?: string; // 标题
+    description?: string; // 详细描述
+    url?: string; // 图片地址
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    processCode?: string; // 工序编码
+    processName?: string; // 工序名称
+  }
+}
+
+/** 新增产品 SOP */
+export function createProductSop(data: MesMdProductSopApi.ProductSop) {
+  return requestClient.post('/mes/md/product-sop/create', data);
+}
+
+/** 修改产品 SOP */
+export function updateProductSop(data: MesMdProductSopApi.ProductSop) {
+  return requestClient.put('/mes/md/product-sop/update', data);
+}
+
+/** 删除产品 SOP */
+export function deleteProductSop(id: number) {
+  return requestClient.delete(`/mes/md/product-sop/delete?id=${id}`);
+}
+
+/** 查询产品 SOP 详情 */
+export function getProductSop(id: number) {
+  return requestClient.get<MesMdProductSopApi.ProductSop>(
+    `/mes/md/product-sop/get?id=${id}`,
+  );
+}
+
+/** 查询产品 SOP 分页 */
+export function getProductSopPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdProductSopApi.ProductSop>>(
+    '/mes/md/product-sop/page',
+    { params },
+  );
+}
+
+/** 根据物料产品编号查询产品 SOP 列表 */
+export function getProductSopListByItemId(itemId: number) {
+  return requestClient.get<MesMdProductSopApi.ProductSop[]>(
+    `/mes/md/product-sop/list-by-item-id?itemId=${itemId}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mes/md/item/type/index.ts b/apps/web-ele/src/api/mes/md/item/type/index.ts
new file mode 100644
index 000000000..e9367ee1f
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/item/type/index.ts
@@ -0,0 +1,54 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdItemTypeApi {
+  /** MES 物料产品分类 */
+  export interface ItemType {
+    id?: number; // 分类编号
+    parentId?: number; // 父分类编号
+    code?: string; // 分类编码
+    name?: string; // 分类名称
+    itemOrProduct?: string; // 物料/产品标识
+    sort?: number; // 显示排序
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+    children?: ItemType[]; // 子分类
+  }
+}
+
+/** 查询物料产品分类列表 */
+export function getItemTypeList(params?: any) {
+  return requestClient.get<MesMdItemTypeApi.ItemType[]>(
+    '/mes/md/item-type/list',
+    { params },
+  );
+}
+
+/** 查询物料产品分类精简列表 */
+export function getItemTypeSimpleList() {
+  return requestClient.get<MesMdItemTypeApi.ItemType[]>(
+    '/mes/md/item-type/simple-list',
+  );
+}
+
+/** 查询物料产品分类详情 */
+export function getItemType(id: number) {
+  return requestClient.get<MesMdItemTypeApi.ItemType>(
+    `/mes/md/item-type/get?id=${id}`,
+  );
+}
+
+/** 新增物料产品分类 */
+export function createItemType(data: MesMdItemTypeApi.ItemType) {
+  return requestClient.post('/mes/md/item-type/create', data);
+}
+
+/** 修改物料产品分类 */
+export function updateItemType(data: MesMdItemTypeApi.ItemType) {
+  return requestClient.put('/mes/md/item-type/update', data);
+}
+
+/** 删除物料产品分类 */
+export function deleteItemType(id: number) {
+  return requestClient.delete(`/mes/md/item-type/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/md/unitmeasure/index.ts b/apps/web-ele/src/api/mes/md/unitmeasure/index.ts
new file mode 100644
index 000000000..5556a022a
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/unitmeasure/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdUnitMeasureApi {
+  /** MES 计量单位 */
+  export interface UnitMeasure {
+    id?: number; // 单位编号
+    code?: string; // 单位编码
+    name?: string; // 单位名称
+    primaryFlag?: boolean; // 是否主单位
+    primaryId?: number; // 主单位编号
+    changeRate?: number; // 与主单位换算比例
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询计量单位分页 */
+export function getUnitMeasurePage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdUnitMeasureApi.UnitMeasure>>(
+    '/mes/md/unit-measure/page',
+    { params },
+  );
+}
+
+/** 查询计量单位精简列表 */
+export function getUnitMeasureSimpleList() {
+  return requestClient.get<MesMdUnitMeasureApi.UnitMeasure[]>(
+    '/mes/md/unit-measure/simple-list',
+  );
+}
+
+/** 查询计量单位详情 */
+export function getUnitMeasure(id: number) {
+  return requestClient.get<MesMdUnitMeasureApi.UnitMeasure>(
+    `/mes/md/unit-measure/get?id=${id}`,
+  );
+}
+
+/** 新增计量单位 */
+export function createUnitMeasure(data: MesMdUnitMeasureApi.UnitMeasure) {
+  return requestClient.post('/mes/md/unit-measure/create', data);
+}
+
+/** 修改计量单位 */
+export function updateUnitMeasure(data: MesMdUnitMeasureApi.UnitMeasure) {
+  return requestClient.put('/mes/md/unit-measure/update', data);
+}
+
+/** 删除计量单位 */
+export function deleteUnitMeasure(id: number) {
+  return requestClient.delete(`/mes/md/unit-measure/delete?id=${id}`);
+}
+
+/** 导出计量单位 */
+export function exportUnitMeasure(params: PageParam) {
+  return requestClient.download('/mes/md/unit-measure/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/md/vendor/index.ts b/apps/web-ele/src/api/mes/md/vendor/index.ts
new file mode 100644
index 000000000..e64845f53
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/vendor/index.ts
@@ -0,0 +1,87 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdVendorApi {
+  /** MES 供应商 */
+  export interface Vendor {
+    id?: number; // 供应商编号
+    code?: string; // 供应商编码
+    name?: string; // 供应商名称
+    nickname?: string; // 供应商简称
+    englishName?: string; // 供应商英文名称
+    description?: string; // 供应商简介
+    logo?: string; // 供应商 LOGO 地址
+    level?: string; // 供应商等级
+    score?: number; // 供应商评分
+    address?: string; // 供应商地址
+    website?: string; // 供应商官网地址
+    email?: string; // 供应商邮箱地址
+    telephone?: string; // 供应商电话
+    contact1Name?: string; // 联系人1
+    contact1Telephone?: string; // 联系人1电话
+    contact1Email?: string; // 联系人1邮箱
+    contact2Name?: string; // 联系人2
+    contact2Telephone?: string; // 联系人2电话
+    contact2Email?: string; // 联系人2邮箱
+    creditCode?: string; // 统一社会信用代码
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+
+  /** 供应商导入结果 */
+  export interface VendorImportRespVO {
+    createCodes?: string[]; // 新增成功的供应商编码
+    updateCodes?: string[]; // 更新成功的供应商编码
+    failureCodes?: Record<string, string>; // 导入失败的供应商编码及原因
+  }
+}
+
+/** 查询供应商分页 */
+export function getVendorPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdVendorApi.Vendor>>(
+    '/mes/md-vendor/page',
+    { params },
+  );
+}
+
+/** 查询供应商详情 */
+export function getVendor(id: number) {
+  return requestClient.get<MesMdVendorApi.Vendor>(
+    `/mes/md-vendor/get?id=${id}`,
+  );
+}
+
+/** 新增供应商 */
+export function createVendor(data: MesMdVendorApi.Vendor) {
+  return requestClient.post('/mes/md-vendor/create', data);
+}
+
+/** 修改供应商 */
+export function updateVendor(data: MesMdVendorApi.Vendor) {
+  return requestClient.put('/mes/md-vendor/update', data);
+}
+
+/** 删除供应商 */
+export function deleteVendor(id: number) {
+  return requestClient.delete(`/mes/md-vendor/delete?id=${id}`);
+}
+
+/** 导出供应商 */
+export function exportVendor(params: any) {
+  return requestClient.download('/mes/md-vendor/export-excel', { params });
+}
+
+/** 下载供应商导入模板 */
+export function importVendorTemplate() {
+  return requestClient.download('/mes/md-vendor/get-import-template');
+}
+
+/** 导入供应商 */
+export function importVendor(file: File, updateSupport: boolean) {
+  return requestClient.upload<MesMdVendorApi.VendorImportRespVO>(
+    `/mes/md-vendor/import?updateSupport=${updateSupport}`,
+    { file },
+  );
+}
diff --git a/apps/web-ele/src/api/mes/md/workstation/index.ts b/apps/web-ele/src/api/mes/md/workstation/index.ts
new file mode 100644
index 000000000..4880f3bbe
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/workstation/index.ts
@@ -0,0 +1,58 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkstationApi {
+  /** MES 工作站 */
+  export interface Workstation {
+    id?: number; // 工作站编号
+    code?: string; // 工作站编码
+    name?: string; // 工作站名称
+    address?: string; // 工作站地点
+    workshopId?: number; // 所在车间编号
+    workshopName?: string; // 所在车间名称
+    processId?: number; // 工序编号
+    processName?: string; // 工序名称
+    warehouseId?: number; // 线边库编号
+    locationId?: number; // 库区编号
+    areaId?: number; // 库位编号
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工作站分页 */
+export function getWorkstationPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdWorkstationApi.Workstation>>(
+    '/mes/md-workstation/page',
+    { params },
+  );
+}
+
+/** 查询工作站详情 */
+export function getWorkstation(id: number) {
+  return requestClient.get<MesMdWorkstationApi.Workstation>(
+    `/mes/md-workstation/get?id=${id}`,
+  );
+}
+
+/** 新增工作站 */
+export function createWorkstation(data: MesMdWorkstationApi.Workstation) {
+  return requestClient.post<number>('/mes/md-workstation/create', data);
+}
+
+/** 修改工作站 */
+export function updateWorkstation(data: MesMdWorkstationApi.Workstation) {
+  return requestClient.put('/mes/md-workstation/update', data);
+}
+
+/** 删除工作站 */
+export function deleteWorkstation(id: number) {
+  return requestClient.delete(`/mes/md-workstation/delete?id=${id}`);
+}
+
+/** 导出工作站 */
+export function exportWorkstation(params: any) {
+  return requestClient.download('/mes/md-workstation/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/md/workstation/machine/index.ts b/apps/web-ele/src/api/mes/md/workstation/machine/index.ts
new file mode 100644
index 000000000..40dd8692b
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/workstation/machine/index.ts
@@ -0,0 +1,35 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkstationMachineApi {
+  /** MES 工作站设备资源 */
+  export interface WorkstationMachine {
+    id?: number; // 资源编号
+    workstationId?: number; // 工作站编号
+    machineryId?: number; // 设备编号
+    machineryCode?: string; // 设备编码
+    machineryName?: string; // 设备名称
+    quantity?: number; // 数量
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工作站设备资源列表 */
+export function getWorkstationMachineList(workstationId: number) {
+  return requestClient.get<MesMdWorkstationMachineApi.WorkstationMachine[]>(
+    '/mes/md-workstation-machine/list-by-workstation',
+    { params: { workstationId } },
+  );
+}
+
+/** 新增工作站设备资源 */
+export function createWorkstationMachine(
+  data: MesMdWorkstationMachineApi.WorkstationMachine,
+) {
+  return requestClient.post('/mes/md-workstation-machine/create', data);
+}
+
+/** 删除工作站设备资源 */
+export function deleteWorkstationMachine(id: number) {
+  return requestClient.delete(`/mes/md-workstation-machine/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/md/workstation/tool/index.ts b/apps/web-ele/src/api/mes/md/workstation/tool/index.ts
new file mode 100644
index 000000000..d98e5f122
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/workstation/tool/index.ts
@@ -0,0 +1,41 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkstationToolApi {
+  /** MES 工作站工装夹具资源 */
+  export interface WorkstationTool {
+    id?: number; // 资源编号
+    workstationId?: number; // 工作站编号
+    toolTypeId?: number; // 工具类型编号
+    toolTypeName?: string; // 工具类型名称
+    quantity?: number; // 数量
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工作站工装夹具资源列表 */
+export function getWorkstationToolList(workstationId: number) {
+  return requestClient.get<MesMdWorkstationToolApi.WorkstationTool[]>(
+    '/mes/md-workstation-tool/list-by-workstation',
+    { params: { workstationId } },
+  );
+}
+
+/** 新增工作站工装夹具资源 */
+export function createWorkstationTool(
+  data: MesMdWorkstationToolApi.WorkstationTool,
+) {
+  return requestClient.post('/mes/md-workstation-tool/create', data);
+}
+
+/** 修改工作站工装夹具资源 */
+export function updateWorkstationTool(
+  data: MesMdWorkstationToolApi.WorkstationTool,
+) {
+  return requestClient.put('/mes/md-workstation-tool/update', data);
+}
+
+/** 删除工作站工装夹具资源 */
+export function deleteWorkstationTool(id: number) {
+  return requestClient.delete(`/mes/md-workstation-tool/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/md/workstation/worker/index.ts b/apps/web-ele/src/api/mes/md/workstation/worker/index.ts
new file mode 100644
index 000000000..3bd4ab9ad
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/workstation/worker/index.ts
@@ -0,0 +1,41 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkstationWorkerApi {
+  /** MES 工作站人力资源 */
+  export interface WorkstationWorker {
+    id?: number; // 资源编号
+    workstationId?: number; // 工作站编号
+    postId?: number; // 岗位编号
+    postName?: string; // 岗位名称
+    quantity?: number; // 数量
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工作站人力资源列表 */
+export function getWorkstationWorkerList(workstationId: number) {
+  return requestClient.get<MesMdWorkstationWorkerApi.WorkstationWorker[]>(
+    '/mes/md-workstation-worker/list-by-workstation',
+    { params: { workstationId } },
+  );
+}
+
+/** 新增工作站人力资源 */
+export function createWorkstationWorker(
+  data: MesMdWorkstationWorkerApi.WorkstationWorker,
+) {
+  return requestClient.post('/mes/md-workstation-worker/create', data);
+}
+
+/** 修改工作站人力资源 */
+export function updateWorkstationWorker(
+  data: MesMdWorkstationWorkerApi.WorkstationWorker,
+) {
+  return requestClient.put('/mes/md-workstation-worker/update', data);
+}
+
+/** 删除工作站人力资源 */
+export function deleteWorkstationWorker(id: number) {
+  return requestClient.delete(`/mes/md-workstation-worker/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/mes/md/workstation/workshop/index.ts b/apps/web-ele/src/api/mes/md/workstation/workshop/index.ts
new file mode 100644
index 000000000..5a96399c9
--- /dev/null
+++ b/apps/web-ele/src/api/mes/md/workstation/workshop/index.ts
@@ -0,0 +1,60 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesMdWorkshopApi {
+  /** MES 车间 */
+  export interface Workshop {
+    id?: number; // 车间编号
+    code?: string; // 车间编码
+    name?: string; // 车间名称
+    area?: number; // 面积
+    chargeUserId?: number; // 负责人用户编号
+    chargeUserName?: string; // 负责人名称
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询车间分页 */
+export function getWorkshopPage(params: PageParam) {
+  return requestClient.get<PageResult<MesMdWorkshopApi.Workshop>>(
+    '/mes/md-workshop/page',
+    { params },
+  );
+}
+
+/** 查询车间精简列表 */
+export function getWorkshopSimpleList() {
+  return requestClient.get<MesMdWorkshopApi.Workshop[]>(
+    '/mes/md-workshop/simple-list',
+  );
+}
+
+/** 查询车间详情 */
+export function getWorkshop(id: number) {
+  return requestClient.get<MesMdWorkshopApi.Workshop>(
+    `/mes/md-workshop/get?id=${id}`,
+  );
+}
+
+/** 新增车间 */
+export function createWorkshop(data: MesMdWorkshopApi.Workshop) {
+  return requestClient.post('/mes/md-workshop/create', data);
+}
+
+/** 修改车间 */
+export function updateWorkshop(data: MesMdWorkshopApi.Workshop) {
+  return requestClient.put('/mes/md-workshop/update', data);
+}
+
+/** 删除车间 */
+export function deleteWorkshop(id: number) {
+  return requestClient.delete(`/mes/md-workshop/delete?id=${id}`);
+}
+
+/** 导出车间 */
+export function exportWorkshop(params: any) {
+  return requestClient.download('/mes/md-workshop/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/pro/process/index.ts b/apps/web-ele/src/api/mes/pro/process/index.ts
new file mode 100644
index 000000000..5a3893b18
--- /dev/null
+++ b/apps/web-ele/src/api/mes/pro/process/index.ts
@@ -0,0 +1,38 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesProProcessApi {
+  /** MES 生产工序 */
+  export interface Process {
+    id: number;
+    code?: string;
+    name?: string;
+    attention?: string;
+    status?: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询生产工序分页 */
+export function getProcessPage(params: PageParam) {
+  return requestClient.get<PageResult<MesProProcessApi.Process>>(
+    '/mes/pro/process/page',
+    { params },
+  );
+}
+
+/** 查询生产工序精简列表 */
+export function getProcessSimpleList() {
+  return requestClient.get<MesProProcessApi.Process[]>(
+    '/mes/pro/process/simple-list',
+  );
+}
+
+/** 查询生产工序详情 */
+export function getProcess(id: number) {
+  return requestClient.get<MesProProcessApi.Process>(
+    `/mes/pro/process/get?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mes/tm/tool/index.ts b/apps/web-ele/src/api/mes/tm/tool/index.ts
new file mode 100644
index 000000000..80881aad3
--- /dev/null
+++ b/apps/web-ele/src/api/mes/tm/tool/index.ts
@@ -0,0 +1,59 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesTmToolApi {
+  /** MES 工具台账 */
+  export interface Tool {
+    id?: number; // 工具编号
+    code?: string; // 工具编码
+    name?: string; // 工具名称
+    brand?: string; // 品牌
+    specification?: string; // 型号规格
+    toolTypeId?: number; // 工具类型编号
+    toolTypeName?: string; // 工具类型名称
+    quantity?: number; // 数量
+    availableQuantity?: number; // 可用数量
+    maintenType?: number; // 保养维护类型
+    nextMaintenPeriod?: number; // 下次保养周期
+    nextMaintenDate?: Date | number; // 下次保养日期
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工具台账分页 */
+export function getToolPage(params: PageParam) {
+  return requestClient.get<PageResult<MesTmToolApi.Tool>>('/mes/tm/tool/page', { params });
+}
+
+/** 查询工具精简列表 */
+export function getToolSimpleList() {
+  return requestClient.get<MesTmToolApi.Tool[]>('/mes/tm/tool/simple-list');
+}
+
+/** 查询工具台账详情 */
+export function getTool(id: number) {
+  return requestClient.get<MesTmToolApi.Tool>(`/mes/tm/tool/get?id=${id}`);
+}
+
+/** 新增工具台账 */
+export function createTool(data: MesTmToolApi.Tool) {
+  return requestClient.post('/mes/tm/tool/create', data);
+}
+
+/** 修改工具台账 */
+export function updateTool(data: MesTmToolApi.Tool) {
+  return requestClient.put('/mes/tm/tool/update', data);
+}
+
+/** 删除工具台账 */
+export function deleteTool(id: number) {
+  return requestClient.delete(`/mes/tm/tool/delete?id=${id}`);
+}
+
+/** 导出工具台账 */
+export function exportTool(params: any) {
+  return requestClient.download('/mes/tm/tool/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/mes/tm/tool/type/index.ts b/apps/web-ele/src/api/mes/tm/tool/type/index.ts
new file mode 100644
index 000000000..cced608cc
--- /dev/null
+++ b/apps/web-ele/src/api/mes/tm/tool/type/index.ts
@@ -0,0 +1,39 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesTmToolTypeApi {
+  /** MES 工具类型 */
+  export interface ToolType {
+    id?: number; // 工具类型编号
+    code?: string; // 类型编码
+    name?: string; // 类型名称
+    codeFlag?: boolean; // 是否编码管理
+    maintenType?: number; // 保养维护类型
+    maintenPeriod?: number; // 保养周期
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询工具类型分页 */
+export function getToolTypePage(params: PageParam) {
+  return requestClient.get<PageResult<MesTmToolTypeApi.ToolType>>(
+    '/mes/tm/tool-type/page',
+    { params },
+  );
+}
+
+/** 查询工具类型精简列表 */
+export function getToolTypeSimpleList() {
+  return requestClient.get<MesTmToolTypeApi.ToolType[]>(
+    '/mes/tm/tool-type/simple-list',
+  );
+}
+
+/** 查询工具类型详情 */
+export function getToolType(id: number) {
+  return requestClient.get<MesTmToolTypeApi.ToolType>(
+    `/mes/tm/tool-type/get?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mes/wm/barcode/index.ts b/apps/web-ele/src/api/mes/wm/barcode/index.ts
new file mode 100644
index 000000000..6cbf8a51e
--- /dev/null
+++ b/apps/web-ele/src/api/mes/wm/barcode/index.ts
@@ -0,0 +1,65 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmBarcodeApi {
+  /** MES 条码清单 */
+  export interface Barcode {
+    id?: number;
+    configId?: number;
+    format?: number;
+    bizType?: number;
+    content?: string;
+    bizId?: number;
+    bizCode?: string;
+    bizName?: string;
+    status?: number;
+    remark?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询条码分页 */
+export function getBarcodePage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmBarcodeApi.Barcode>>(
+    '/mes/wm/barcode/page',
+    { params },
+  );
+}
+
+/** 查询条码详情 */
+export function getBarcode(id: number) {
+  return requestClient.get<MesWmBarcodeApi.Barcode>(
+    `/mes/wm/barcode/get?id=${id}`,
+  );
+}
+
+/** 根据业务对象获取条码 */
+export function getBarcodeByBusiness(bizType: number, bizId: number) {
+  return requestClient.get<MesWmBarcodeApi.Barcode>(
+    '/mes/wm/barcode/get-by-business',
+    { params: { bizType, bizId } },
+  );
+}
+
+/** 新增条码 */
+export function createBarcode(data: MesWmBarcodeApi.Barcode) {
+  return requestClient.post('/mes/wm/barcode/create', data);
+}
+
+/** 修改条码 */
+export function updateBarcode(data: MesWmBarcodeApi.Barcode) {
+  return requestClient.put('/mes/wm/barcode/update', data);
+}
+
+/** 删除条码 */
+export function deleteBarcode(id: number) {
+  return requestClient.delete(`/mes/wm/barcode/delete?id=${id}`);
+}
+
+/** 生成条码内容 */
+export function generateBarcodeContent(bizType: number, bizCode: string) {
+  return requestClient.get<string>('/mes/wm/barcode/generate-content', {
+    params: { bizType, bizCode },
+  });
+}
diff --git a/apps/web-ele/src/api/mes/wm/itemreceipt/index.ts b/apps/web-ele/src/api/mes/wm/itemreceipt/index.ts
new file mode 100644
index 000000000..d7086de99
--- /dev/null
+++ b/apps/web-ele/src/api/mes/wm/itemreceipt/index.ts
@@ -0,0 +1,34 @@
+import { requestClient } from '#/api/request';
+
+export namespace MesWmItemReceiptApi {
+  /** MES 采购入库单 */
+  export interface ItemReceipt {
+    id?: number; // 入库单编号
+    code?: string; // 入库单编码
+    name?: string; // 入库单名称
+    iqcId?: number; // 来料检验单编号
+    iqcCode?: string; // 来料检验单编码
+    noticeId?: number; // 到货通知单编号
+    noticeCode?: string; // 到货通知单编码
+    purchaseOrderCode?: string; // 采购订单号
+    vendorId?: number; // 供应商编号
+    vendorName?: string; // 供应商名称
+    warehouseId?: number; // 仓库编号
+    warehouseName?: string; // 仓库名称
+    locationId?: number; // 库区编号
+    locationName?: string; // 库区名称
+    areaId?: number; // 库位编号
+    areaName?: string; // 库位名称
+    receiptDate?: Date | number | string; // 入库日期
+    status?: number; // 状态
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询采购入库单详情 */
+export function getItemReceipt(id: number) {
+  return requestClient.get<MesWmItemReceiptApi.ItemReceipt>(
+    `/mes/wm/item-receipt/get?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mes/wm/itemreceipt/line/index.ts b/apps/web-ele/src/api/mes/wm/itemreceipt/line/index.ts
new file mode 100644
index 000000000..55562e84c
--- /dev/null
+++ b/apps/web-ele/src/api/mes/wm/itemreceipt/line/index.ts
@@ -0,0 +1,28 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmItemReceiptLineApi {
+  /** MES 物料接收单行 */
+  export interface ItemReceiptLine {
+    id?: number; // 行编号
+    receiptId?: number; // 入库单编号
+    receiptCode?: string; // 入库单编码
+    purchaseOrderCode?: string; // 采购订单号
+    itemId?: number; // 物料编号
+    itemCode?: string; // 物料编码
+    itemName?: string; // 物料名称
+    specification?: string; // 规格型号
+    unitMeasureName?: string; // 单位
+    receivedQuantity?: number; // 入库数量
+    batchCode?: string; // 批次号
+  }
+}
+
+/** 查询物料接收单行分页 */
+export function getItemReceiptLinePage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmItemReceiptLineApi.ItemReceiptLine>>(
+    '/mes/wm/item-receipt-line/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/mes/wm/productsales/index.ts b/apps/web-ele/src/api/mes/wm/productsales/index.ts
new file mode 100644
index 000000000..aa00d4556
--- /dev/null
+++ b/apps/web-ele/src/api/mes/wm/productsales/index.ts
@@ -0,0 +1,23 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmProductSalesApi {
+  /** MES 销售出库单 */
+  export interface ProductSales {
+    id?: number; // 销售出库单编号
+    code?: string; // 出库单编号
+    name?: string; // 出库单名称
+    salesOrderCode?: string; // 销售订单编号
+    salesDate?: Date; // 出库日期
+    status?: number; // 单据状态
+  }
+}
+
+/** 查询销售出库单分页 */
+export function getProductSalesPage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmProductSalesApi.ProductSales>>(
+    '/mes/wm/product-sales/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/mes/wm/productsales/line/index.ts b/apps/web-ele/src/api/mes/wm/productsales/line/index.ts
new file mode 100644
index 000000000..b66ef6ba7
--- /dev/null
+++ b/apps/web-ele/src/api/mes/wm/productsales/line/index.ts
@@ -0,0 +1,24 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmProductSalesLineApi {
+  /** MES 销售出库单行 */
+  export interface ProductSalesLine {
+    id?: number; // 行编号
+    itemId?: number; // 物料编号
+    itemCode?: string; // 物料编码
+    itemName?: string; // 物料名称
+    specification?: string; // 规格型号
+    unitMeasureName?: string; // 单位
+    quantity?: number; // 出库数量
+    batchCode?: string; // 批次号
+  }
+}
+
+/** 查询销售出库单行分页 */
+export function getProductSalesLinePage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MesWmProductSalesLineApi.ProductSalesLine>
+  >('/mes/wm/product-sales-line/page', { params });
+}
diff --git a/apps/web-ele/src/api/mes/wm/warehouse/area/index.ts b/apps/web-ele/src/api/mes/wm/warehouse/area/index.ts
new file mode 100644
index 000000000..cf5844ade
--- /dev/null
+++ b/apps/web-ele/src/api/mes/wm/warehouse/area/index.ts
@@ -0,0 +1,50 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmWarehouseAreaApi {
+  /** MES 库位 */
+  export interface WarehouseArea {
+    id?: number; // 库位编号
+    code?: string; // 库位编码
+    name?: string; // 库位名称
+    warehouseId?: number; // 仓库编号
+    warehouseName?: string; // 仓库名称
+    locationId?: number; // 库区编号
+    locationName?: string; // 库区名称
+    area?: number; // 面积
+    maxLoad?: number; // 最大载荷
+    positionX?: number; // X 坐标
+    positionY?: number; // Y 坐标
+    positionZ?: number; // Z 坐标
+    status?: number; // 状态
+    frozen?: boolean; // 是否冻结
+    allowItemMixing?: boolean; // 是否允许物料混放
+    allowBatchMixing?: boolean; // 是否允许批次混放
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询库位分页 */
+export function getWarehouseAreaPage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmWarehouseAreaApi.WarehouseArea>>(
+    '/mes/wm/warehouse-area/page',
+    { params },
+  );
+}
+
+/** 查询库位精简列表 */
+export function getWarehouseAreaSimpleList(locationId?: number) {
+  return requestClient.get<MesWmWarehouseAreaApi.WarehouseArea[]>(
+    '/mes/wm/warehouse-area/simple-list',
+    { params: { locationId } },
+  );
+}
+
+/** 查询库位详情 */
+export function getWarehouseArea(id: number) {
+  return requestClient.get<MesWmWarehouseAreaApi.WarehouseArea>(
+    `/mes/wm/warehouse-area/get?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mes/wm/warehouse/index.ts b/apps/web-ele/src/api/mes/wm/warehouse/index.ts
new file mode 100644
index 000000000..f68604790
--- /dev/null
+++ b/apps/web-ele/src/api/mes/wm/warehouse/index.ts
@@ -0,0 +1,40 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmWarehouseApi {
+  /** MES 仓库 */
+  export interface Warehouse {
+    id?: number; // 仓库编号
+    code?: string; // 仓库编码
+    name?: string; // 仓库名称
+    address?: string; // 地址
+    area?: number; // 面积
+    chargeUserId?: number; // 负责人
+    frozen?: boolean; // 是否冻结
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询仓库分页 */
+export function getWarehousePage(params: PageParam) {
+  return requestClient.get<PageResult<MesWmWarehouseApi.Warehouse>>(
+    '/mes/wm/warehouse/page',
+    { params },
+  );
+}
+
+/** 查询仓库精简列表 */
+export function getWarehouseSimpleList() {
+  return requestClient.get<MesWmWarehouseApi.Warehouse[]>(
+    '/mes/wm/warehouse/simple-list',
+  );
+}
+
+/** 查询仓库详情 */
+export function getWarehouse(id: number) {
+  return requestClient.get<MesWmWarehouseApi.Warehouse>(
+    `/mes/wm/warehouse/get?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/mes/wm/warehouse/location/index.ts b/apps/web-ele/src/api/mes/wm/warehouse/location/index.ts
new file mode 100644
index 000000000..e33fb180e
--- /dev/null
+++ b/apps/web-ele/src/api/mes/wm/warehouse/location/index.ts
@@ -0,0 +1,40 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace MesWmWarehouseLocationApi {
+  /** MES 库区 */
+  export interface WarehouseLocation {
+    id?: number; // 库区编号
+    code?: string; // 库区编码
+    name?: string; // 库区名称
+    warehouseId?: number; // 仓库编号
+    warehouseName?: string; // 仓库名称
+    area?: number; // 面积
+    frozen?: boolean; // 是否冻结
+    remark?: string; // 备注
+    createTime?: Date; // 创建时间
+  }
+}
+
+/** 查询库区分页 */
+export function getWarehouseLocationPage(params: PageParam) {
+  return requestClient.get<
+    PageResult<MesWmWarehouseLocationApi.WarehouseLocation>
+  >('/mes/wm/warehouse-location/page', { params });
+}
+
+/** 查询库区精简列表 */
+export function getWarehouseLocationSimpleList(warehouseId?: number) {
+  return requestClient.get<MesWmWarehouseLocationApi.WarehouseLocation[]>(
+    '/mes/wm/warehouse-location/simple-list',
+    { params: { warehouseId } },
+  );
+}
+
+/** 查询库区详情 */
+export function getWarehouseLocation(id: number) {
+  return requestClient.get<MesWmWarehouseLocationApi.WarehouseLocation>(
+    `/mes/wm/warehouse-location/get?id=${id}`,
+  );
+}
diff --git a/apps/web-ele/src/api/wms/home/index.ts b/apps/web-ele/src/api/wms/home/index.ts
new file mode 100644
index 000000000..ae9577201
--- /dev/null
+++ b/apps/web-ele/src/api/wms/home/index.ts
@@ -0,0 +1,66 @@
+import { requestClient } from '#/api/request';
+
+export namespace WmsHomeStatisticsApi {
+  export interface StatisticsReq {
+    goodsLimit?: number;
+    warehouseId?: number;
+    warehouseLimit?: number;
+  }
+
+  export interface OrderStatus {
+    count: number;
+    status: number;
+  }
+
+  export interface OrderSummary {
+    statuses: OrderStatus[];
+    total: number;
+    type: number;
+  }
+
+  export interface OrderTrend {
+    checkCount: number;
+    movementCount: number;
+    receiptCount: number;
+    shipmentCount: number;
+    time: number | string;
+  }
+
+  export interface InventoryRankItem {
+    id: number;
+    name: string;
+    quantity: number;
+  }
+
+  export interface InventorySummary {
+    goodsShareList: InventoryRankItem[];
+    totalQuantity: number;
+    warehouseDistributionList: InventoryRankItem[];
+  }
+}
+
+export function getOrderSummary(params?: WmsHomeStatisticsApi.StatisticsReq) {
+  return requestClient.get<WmsHomeStatisticsApi.OrderSummary[]>(
+    '/wms/home-statistics/order-summary',
+    { params },
+  );
+}
+
+export function getOrderTrend(
+  days?: number,
+  params?: WmsHomeStatisticsApi.StatisticsReq,
+) {
+  return requestClient.get<WmsHomeStatisticsApi.OrderTrend[]>(
+    '/wms/home-statistics/order-trend',
+    { params: { ...params, days } },
+  );
+}
+
+export function getInventorySummary(
+  params?: WmsHomeStatisticsApi.StatisticsReq,
+) {
+  return requestClient.get<WmsHomeStatisticsApi.InventorySummary>(
+    '/wms/home-statistics/inventory-summary',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/wms/inventory/history/index.ts b/apps/web-ele/src/api/wms/inventory/history/index.ts
new file mode 100644
index 000000000..02f6bccd1
--- /dev/null
+++ b/apps/web-ele/src/api/wms/inventory/history/index.ts
@@ -0,0 +1,37 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsInventoryHistoryApi {
+  /** WMS 库存记录 */
+  export interface InventoryHistory {
+    id?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    quantity?: number;
+    beforeQuantity?: number;
+    afterQuantity?: number;
+    price?: number;
+    totalPrice?: number;
+    remark?: string;
+    orderId?: number;
+    orderNo?: string;
+    orderType?: number;
+    createTime?: Date;
+  }
+}
+
+/** 查询库存记录分页 */
+export function getInventoryHistoryPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsInventoryHistoryApi.InventoryHistory>>(
+    '/wms/inventory-history/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/wms/inventory/index.ts b/apps/web-ele/src/api/wms/inventory/index.ts
new file mode 100644
index 000000000..90ca4a11d
--- /dev/null
+++ b/apps/web-ele/src/api/wms/inventory/index.ts
@@ -0,0 +1,42 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsInventoryApi {
+  /** WMS 库存统计 */
+  export interface Inventory {
+    id?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    quantity?: number;
+    remark?: string;
+    createTime?: Date;
+  }
+
+  /** WMS 库存统计列表请求 */
+  export interface InventoryListReq {
+    warehouseId: number;
+  }
+}
+
+/** 查询库存统计分页 */
+export function getInventoryPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsInventoryApi.Inventory>>(
+    '/wms/inventory/page',
+    { params },
+  );
+}
+
+/** 查询库存统计列表 */
+export function getInventoryList(params: WmsInventoryApi.InventoryListReq) {
+  return requestClient.get<WmsInventoryApi.Inventory[]>('/wms/inventory/list', {
+    params,
+  });
+}
diff --git a/apps/web-ele/src/api/wms/md/item/brand/index.ts b/apps/web-ele/src/api/wms/md/item/brand/index.ts
new file mode 100644
index 000000000..a251b05ca
--- /dev/null
+++ b/apps/web-ele/src/api/wms/md/item/brand/index.ts
@@ -0,0 +1,55 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsItemBrandApi {
+  /** WMS 商品品牌 */
+  export interface ItemBrand {
+    id?: number;
+    code?: string;
+    name?: string;
+    createTime?: Date;
+  }
+}
+
+/** 查询商品品牌分页 */
+export function getItemBrandPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsItemBrandApi.ItemBrand>>(
+    '/wms/item-brand/page',
+    { params },
+  );
+}
+
+/** 查询商品品牌精简列表 */
+export function getItemBrandSimpleList() {
+  return requestClient.get<WmsItemBrandApi.ItemBrand[]>(
+    '/wms/item-brand/simple-list',
+  );
+}
+
+/** 查询商品品牌详情 */
+export function getItemBrand(id: number) {
+  return requestClient.get<WmsItemBrandApi.ItemBrand>(
+    `/wms/item-brand/get?id=${id}`,
+  );
+}
+
+/** 新增商品品牌 */
+export function createItemBrand(data: WmsItemBrandApi.ItemBrand) {
+  return requestClient.post('/wms/item-brand/create', data);
+}
+
+/** 修改商品品牌 */
+export function updateItemBrand(data: WmsItemBrandApi.ItemBrand) {
+  return requestClient.put('/wms/item-brand/update', data);
+}
+
+/** 删除商品品牌 */
+export function deleteItemBrand(id: number) {
+  return requestClient.delete(`/wms/item-brand/delete?id=${id}`);
+}
+
+/** 导出商品品牌 */
+export function exportItemBrand(params: any) {
+  return requestClient.download('/wms/item-brand/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/wms/md/item/category/index.ts b/apps/web-ele/src/api/wms/md/item/category/index.ts
new file mode 100644
index 000000000..be356f01e
--- /dev/null
+++ b/apps/web-ele/src/api/wms/md/item/category/index.ts
@@ -0,0 +1,52 @@
+import { requestClient } from '#/api/request';
+
+export namespace WmsItemCategoryApi {
+  /** WMS 商品分类 */
+  export interface ItemCategory {
+    id?: number;
+    parentId?: number;
+    code?: string;
+    name?: string;
+    sort?: number;
+    status?: number;
+    createTime?: Date;
+    children?: ItemCategory[];
+  }
+}
+
+/** 查询商品分类列表 */
+export function getItemCategoryList(params?: any) {
+  return requestClient.get<WmsItemCategoryApi.ItemCategory[]>(
+    '/wms/item-category/list',
+    { params },
+  );
+}
+
+/** 查询商品分类精简列表 */
+export function getItemCategorySimpleList() {
+  return requestClient.get<WmsItemCategoryApi.ItemCategory[]>(
+    '/wms/item-category/simple-list',
+  );
+}
+
+/** 查询商品分类详情 */
+export function getItemCategory(id: number) {
+  return requestClient.get<WmsItemCategoryApi.ItemCategory>(
+    `/wms/item-category/get?id=${id}`,
+  );
+}
+
+/** 新增商品分类 */
+export function createItemCategory(data: WmsItemCategoryApi.ItemCategory) {
+  return requestClient.post('/wms/item-category/create', data);
+}
+
+/** 修改商品分类 */
+export function updateItemCategory(data: WmsItemCategoryApi.ItemCategory) {
+  return requestClient.put('/wms/item-category/update', data);
+}
+
+/** 删除商品分类 */
+export function deleteItemCategory(id: number) {
+  return requestClient.delete(`/wms/item-category/delete?id=${id}`);
+}
diff --git a/apps/web-ele/src/api/wms/md/item/index.ts b/apps/web-ele/src/api/wms/md/item/index.ts
new file mode 100644
index 000000000..fda44706c
--- /dev/null
+++ b/apps/web-ele/src/api/wms/md/item/index.ts
@@ -0,0 +1,61 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsItemSkuApi } from './sku';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsItemApi {
+  /** WMS 商品 */
+  export interface Item {
+    id?: number;
+    code?: string;
+    name?: string;
+    categoryId?: number;
+    categoryName?: string;
+    unit?: string;
+    brandId?: number;
+    brandName?: string;
+    remark?: string;
+    skus?: WmsItemSkuApi.ItemSku[];
+    createTime?: Date;
+  }
+}
+
+/** 查询商品分页 */
+export function getItemPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsItemApi.Item>>('/wms/item/page', {
+    params,
+  });
+}
+
+/** 查询商品精简列表 */
+export function getItemSimpleList(params?: any) {
+  return requestClient.get<WmsItemApi.Item[]>('/wms/item/simple-list', {
+    params,
+  });
+}
+
+/** 查询商品详情 */
+export function getItem(id: number) {
+  return requestClient.get<WmsItemApi.Item>(`/wms/item/get?id=${id}`);
+}
+
+/** 新增商品 */
+export function createItem(data: WmsItemApi.Item) {
+  return requestClient.post('/wms/item/create', data);
+}
+
+/** 修改商品 */
+export function updateItem(data: WmsItemApi.Item) {
+  return requestClient.put('/wms/item/update', data);
+}
+
+/** 删除商品 */
+export function deleteItem(id: number) {
+  return requestClient.delete(`/wms/item/delete?id=${id}`);
+}
+
+/** 导出商品 */
+export function exportItem(params: any) {
+  return requestClient.download('/wms/item/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/wms/md/item/sku/index.ts b/apps/web-ele/src/api/wms/md/item/sku/index.ts
new file mode 100644
index 000000000..2296becf1
--- /dev/null
+++ b/apps/web-ele/src/api/wms/md/item/sku/index.ts
@@ -0,0 +1,37 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsItemSkuApi {
+  /** WMS 商品 SKU */
+  export interface ItemSku {
+    id?: number;
+    name?: string;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    categoryId?: number;
+    categoryName?: string;
+    unit?: string;
+    brandId?: number;
+    brandName?: string;
+    barCode?: string;
+    code?: string;
+    length?: number;
+    width?: number;
+    height?: number;
+    grossWeight?: number;
+    netWeight?: number;
+    costPrice?: number;
+    sellingPrice?: number;
+    createTime?: Date;
+  }
+}
+
+/** 按 SKU 维度分页（支持商品 / 品牌 / 分类多表联查筛选） */
+export function getItemSkuPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsItemSkuApi.ItemSku>>(
+    '/wms/item-sku/page',
+    { params },
+  );
+}
diff --git a/apps/web-ele/src/api/wms/md/merchant/index.ts b/apps/web-ele/src/api/wms/md/merchant/index.ts
new file mode 100644
index 000000000..93539f098
--- /dev/null
+++ b/apps/web-ele/src/api/wms/md/merchant/index.ts
@@ -0,0 +1,73 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsMerchantApi {
+  /** WMS 往来企业 */
+  export interface Merchant {
+    id?: number;
+    code?: string;
+    name?: string;
+    type?: number;
+    level?: string;
+    bankName?: string;
+    bankAccount?: string;
+    address?: string;
+    mobile?: string;
+    telephone?: string;
+    contact?: string;
+    email?: string;
+    remark?: string;
+    createTime?: Date;
+  }
+
+  /** WMS 往来企业精简列表请求 */
+  export interface MerchantSimpleListReq {
+    types?: number[];
+  }
+}
+
+/** 查询往来企业分页 */
+export function getMerchantPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsMerchantApi.Merchant>>(
+    '/wms/merchant/page',
+    { params },
+  );
+}
+
+/** 查询往来企业精简列表 */
+export function getMerchantSimpleList(
+  params?: WmsMerchantApi.MerchantSimpleListReq,
+) {
+  return requestClient.get<WmsMerchantApi.Merchant[]>(
+    '/wms/merchant/simple-list',
+    { params },
+  );
+}
+
+/** 查询往来企业详情 */
+export function getMerchant(id: number) {
+  return requestClient.get<WmsMerchantApi.Merchant>(
+    `/wms/merchant/get?id=${id}`,
+  );
+}
+
+/** 新增往来企业 */
+export function createMerchant(data: WmsMerchantApi.Merchant) {
+  return requestClient.post('/wms/merchant/create', data);
+}
+
+/** 修改往来企业 */
+export function updateMerchant(data: WmsMerchantApi.Merchant) {
+  return requestClient.put('/wms/merchant/update', data);
+}
+
+/** 删除往来企业 */
+export function deleteMerchant(id: number) {
+  return requestClient.delete(`/wms/merchant/delete?id=${id}`);
+}
+
+/** 导出往来企业 */
+export function exportMerchant(params: any) {
+  return requestClient.download('/wms/merchant/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/wms/md/warehouse/index.ts b/apps/web-ele/src/api/wms/md/warehouse/index.ts
new file mode 100644
index 000000000..2b99f3776
--- /dev/null
+++ b/apps/web-ele/src/api/wms/md/warehouse/index.ts
@@ -0,0 +1,57 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsWarehouseApi {
+  /** WMS 仓库 */
+  export interface Warehouse {
+    id?: number;
+    code?: string;
+    name?: string;
+    remark?: string;
+    sort?: number;
+    createTime?: Date;
+  }
+}
+
+/** 查询仓库分页 */
+export function getWarehousePage(params: PageParam) {
+  return requestClient.get<PageResult<WmsWarehouseApi.Warehouse>>(
+    '/wms/warehouse/page',
+    { params },
+  );
+}
+
+/** 查询仓库精简列表 */
+export function getWarehouseSimpleList() {
+  return requestClient.get<WmsWarehouseApi.Warehouse[]>(
+    '/wms/warehouse/simple-list',
+  );
+}
+
+/** 查询仓库详情 */
+export function getWarehouse(id: number) {
+  return requestClient.get<WmsWarehouseApi.Warehouse>(
+    `/wms/warehouse/get?id=${id}`,
+  );
+}
+
+/** 新增仓库 */
+export function createWarehouse(data: WmsWarehouseApi.Warehouse) {
+  return requestClient.post('/wms/warehouse/create', data);
+}
+
+/** 修改仓库 */
+export function updateWarehouse(data: WmsWarehouseApi.Warehouse) {
+  return requestClient.put('/wms/warehouse/update', data);
+}
+
+/** 删除仓库 */
+export function deleteWarehouse(id: number) {
+  return requestClient.delete(`/wms/warehouse/delete?id=${id}`);
+}
+
+/** 导出仓库 */
+export function exportWarehouse(params: any) {
+  return requestClient.download('/wms/warehouse/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/wms/order/check/detail/index.ts b/apps/web-ele/src/api/wms/order/check/detail/index.ts
new file mode 100644
index 000000000..ae34b2154
--- /dev/null
+++ b/apps/web-ele/src/api/wms/order/check/detail/index.ts
@@ -0,0 +1,23 @@
+export namespace WmsCheckOrderDetailApi {
+  /** WMS 盘库单明细 */
+  export interface CheckOrderDetail {
+    id?: number;
+    orderId?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    inventoryId?: number;
+    warehouseId?: number;
+    warehouseName?: string;
+    receiptTime?: Date;
+    quantity?: number;
+    checkQuantity?: number;
+    availableQuantity?: number;
+    price?: number;
+    createTime?: Date;
+  }
+}
diff --git a/apps/web-ele/src/api/wms/order/check/index.ts b/apps/web-ele/src/api/wms/order/check/index.ts
new file mode 100644
index 000000000..910c997d3
--- /dev/null
+++ b/apps/web-ele/src/api/wms/order/check/index.ts
@@ -0,0 +1,71 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsCheckOrderDetailApi } from './detail';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsCheckOrderApi {
+  /** WMS 盘库单 */
+  export interface CheckOrder {
+    id?: number;
+    no?: string;
+    orderTime?: string;
+    status?: number;
+    remark?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    totalQuantity?: number;
+    totalPrice?: number;
+    actualPrice?: number;
+    details?: WmsCheckOrderDetailApi.CheckOrderDetail[];
+    createTime?: Date;
+    creator?: string;
+    creatorName?: string;
+    updateTime?: Date;
+    updater?: string;
+    updaterName?: string;
+  }
+}
+
+export function getCheckOrderPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsCheckOrderApi.CheckOrder>>(
+    '/wms/check-order/page',
+    { params },
+  );
+}
+
+export function getCheckOrder(id: number) {
+  return requestClient.get<WmsCheckOrderApi.CheckOrder>(
+    `/wms/check-order/get?id=${id}`,
+  );
+}
+
+export function getCheckOrderDetailListByOrderId(orderId: number) {
+  return requestClient.get<WmsCheckOrderDetailApi.CheckOrderDetail[]>(
+    `/wms/check-order-detail/list-by-order-id?orderId=${orderId}`,
+  );
+}
+
+export function createCheckOrder(data: WmsCheckOrderApi.CheckOrder) {
+  return requestClient.post('/wms/check-order/create', data);
+}
+
+export function updateCheckOrder(data: WmsCheckOrderApi.CheckOrder) {
+  return requestClient.put('/wms/check-order/update', data);
+}
+
+export function completeCheckOrder(id: number) {
+  return requestClient.put(`/wms/check-order/complete?id=${id}`);
+}
+
+export function cancelCheckOrder(id: number) {
+  return requestClient.put(`/wms/check-order/cancel?id=${id}`);
+}
+
+export function deleteCheckOrder(id: number) {
+  return requestClient.delete(`/wms/check-order/delete?id=${id}`);
+}
+
+export function exportCheckOrder(params: any) {
+  return requestClient.download('/wms/check-order/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/wms/order/movement/detail/index.ts b/apps/web-ele/src/api/wms/order/movement/detail/index.ts
new file mode 100644
index 000000000..25a3aec6a
--- /dev/null
+++ b/apps/web-ele/src/api/wms/order/movement/detail/index.ts
@@ -0,0 +1,23 @@
+export namespace WmsMovementOrderDetailApi {
+  /** WMS 移库单明细 */
+  export interface MovementOrderDetail {
+    id?: number;
+    orderId?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    sourceWarehouseId?: number;
+    sourceWarehouseName?: string;
+    targetWarehouseId?: number;
+    targetWarehouseName?: string;
+    quantity?: number;
+    availableQuantity?: number;
+    price?: number;
+    totalPrice?: number;
+    createTime?: Date;
+  }
+}
diff --git a/apps/web-ele/src/api/wms/order/movement/index.ts b/apps/web-ele/src/api/wms/order/movement/index.ts
new file mode 100644
index 000000000..f6b9e3197
--- /dev/null
+++ b/apps/web-ele/src/api/wms/order/movement/index.ts
@@ -0,0 +1,72 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsMovementOrderDetailApi } from './detail';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsMovementOrderApi {
+  /** WMS 移库单 */
+  export interface MovementOrder {
+    id?: number;
+    no?: string;
+    orderTime?: string;
+    status?: number;
+    remark?: string;
+    sourceWarehouseId?: number;
+    sourceWarehouseName?: string;
+    targetWarehouseId?: number;
+    targetWarehouseName?: string;
+    totalQuantity?: number;
+    totalPrice?: number;
+    details?: WmsMovementOrderDetailApi.MovementOrderDetail[];
+    createTime?: Date;
+    creator?: string;
+    creatorName?: string;
+    updateTime?: Date;
+    updater?: string;
+    updaterName?: string;
+  }
+}
+
+export function getMovementOrderPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsMovementOrderApi.MovementOrder>>(
+    '/wms/movement-order/page',
+    { params },
+  );
+}
+
+export function getMovementOrder(id: number) {
+  return requestClient.get<WmsMovementOrderApi.MovementOrder>(
+    `/wms/movement-order/get?id=${id}`,
+  );
+}
+
+export function getMovementOrderDetailListByOrderId(orderId: number) {
+  return requestClient.get<WmsMovementOrderDetailApi.MovementOrderDetail[]>(
+    `/wms/movement-order-detail/list-by-order-id?orderId=${orderId}`,
+  );
+}
+
+export function createMovementOrder(data: WmsMovementOrderApi.MovementOrder) {
+  return requestClient.post('/wms/movement-order/create', data);
+}
+
+export function updateMovementOrder(data: WmsMovementOrderApi.MovementOrder) {
+  return requestClient.put('/wms/movement-order/update', data);
+}
+
+export function completeMovementOrder(id: number) {
+  return requestClient.put(`/wms/movement-order/complete?id=${id}`);
+}
+
+export function cancelMovementOrder(id: number) {
+  return requestClient.put(`/wms/movement-order/cancel?id=${id}`);
+}
+
+export function deleteMovementOrder(id: number) {
+  return requestClient.delete(`/wms/movement-order/delete?id=${id}`);
+}
+
+export function exportMovementOrder(params: any) {
+  return requestClient.download('/wms/movement-order/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/wms/order/receipt/detail/index.ts b/apps/web-ele/src/api/wms/order/receipt/detail/index.ts
new file mode 100644
index 000000000..0695c224d
--- /dev/null
+++ b/apps/web-ele/src/api/wms/order/receipt/detail/index.ts
@@ -0,0 +1,20 @@
+export namespace WmsReceiptOrderDetailApi {
+  /** WMS 入库单明细 */
+  export interface ReceiptOrderDetail {
+    id?: number;
+    orderId?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    quantity?: number;
+    price?: number;
+    totalPrice?: number;
+    createTime?: Date;
+  }
+}
diff --git a/apps/web-ele/src/api/wms/order/receipt/index.ts b/apps/web-ele/src/api/wms/order/receipt/index.ts
new file mode 100644
index 000000000..9c5a08a5e
--- /dev/null
+++ b/apps/web-ele/src/api/wms/order/receipt/index.ts
@@ -0,0 +1,74 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsReceiptOrderDetailApi } from './detail';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsReceiptOrderApi {
+  /** WMS 入库单 */
+  export interface ReceiptOrder {
+    id?: number;
+    no?: string;
+    type?: number;
+    orderTime?: string;
+    status?: number;
+    bizOrderNo?: string;
+    merchantId?: number;
+    merchantName?: string;
+    remark?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    totalQuantity?: number;
+    totalPrice?: number;
+    details?: WmsReceiptOrderDetailApi.ReceiptOrderDetail[];
+    createTime?: Date;
+    creator?: string;
+    creatorName?: string;
+    updateTime?: Date;
+    updater?: string;
+    updaterName?: string;
+  }
+}
+
+export function getReceiptOrderPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsReceiptOrderApi.ReceiptOrder>>(
+    '/wms/receipt-order/page',
+    { params },
+  );
+}
+
+export function getReceiptOrder(id: number) {
+  return requestClient.get<WmsReceiptOrderApi.ReceiptOrder>(
+    `/wms/receipt-order/get?id=${id}`,
+  );
+}
+
+export function getReceiptOrderDetailListByOrderId(orderId: number) {
+  return requestClient.get<WmsReceiptOrderDetailApi.ReceiptOrderDetail[]>(
+    `/wms/receipt-order-detail/list-by-order-id?orderId=${orderId}`,
+  );
+}
+
+export function createReceiptOrder(data: WmsReceiptOrderApi.ReceiptOrder) {
+  return requestClient.post('/wms/receipt-order/create', data);
+}
+
+export function updateReceiptOrder(data: WmsReceiptOrderApi.ReceiptOrder) {
+  return requestClient.put('/wms/receipt-order/update', data);
+}
+
+export function completeReceiptOrder(id: number) {
+  return requestClient.put(`/wms/receipt-order/complete?id=${id}`);
+}
+
+export function cancelReceiptOrder(id: number) {
+  return requestClient.put(`/wms/receipt-order/cancel?id=${id}`);
+}
+
+export function deleteReceiptOrder(id: number) {
+  return requestClient.delete(`/wms/receipt-order/delete?id=${id}`);
+}
+
+export function exportReceiptOrder(params: any) {
+  return requestClient.download('/wms/receipt-order/export-excel', { params });
+}
diff --git a/apps/web-ele/src/api/wms/order/shipment/detail/index.ts b/apps/web-ele/src/api/wms/order/shipment/detail/index.ts
new file mode 100644
index 000000000..17e796e18
--- /dev/null
+++ b/apps/web-ele/src/api/wms/order/shipment/detail/index.ts
@@ -0,0 +1,21 @@
+export namespace WmsShipmentOrderDetailApi {
+  /** WMS 出库单明细 */
+  export interface ShipmentOrderDetail {
+    id?: number;
+    orderId?: number;
+    itemId?: number;
+    itemCode?: string;
+    itemName?: string;
+    unit?: string;
+    skuId?: number;
+    skuCode?: string;
+    skuName?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    quantity?: number;
+    availableQuantity?: number;
+    price?: number;
+    totalPrice?: number;
+    createTime?: Date;
+  }
+}
diff --git a/apps/web-ele/src/api/wms/order/shipment/index.ts b/apps/web-ele/src/api/wms/order/shipment/index.ts
new file mode 100644
index 000000000..b52dcdaca
--- /dev/null
+++ b/apps/web-ele/src/api/wms/order/shipment/index.ts
@@ -0,0 +1,74 @@
+import type { PageParam, PageResult } from '@vben/request';
+
+import type { WmsShipmentOrderDetailApi } from './detail';
+
+import { requestClient } from '#/api/request';
+
+export namespace WmsShipmentOrderApi {
+  /** WMS 出库单 */
+  export interface ShipmentOrder {
+    id?: number;
+    no?: string;
+    type?: number;
+    orderTime?: string;
+    status?: number;
+    bizOrderNo?: string;
+    merchantId?: number;
+    merchantName?: string;
+    remark?: string;
+    warehouseId?: number;
+    warehouseName?: string;
+    totalQuantity?: number;
+    totalPrice?: number;
+    details?: WmsShipmentOrderDetailApi.ShipmentOrderDetail[];
+    createTime?: Date;
+    creator?: string;
+    creatorName?: string;
+    updateTime?: Date;
+    updater?: string;
+    updaterName?: string;
+  }
+}
+
+export function getShipmentOrderPage(params: PageParam) {
+  return requestClient.get<PageResult<WmsShipmentOrderApi.ShipmentOrder>>(
+    '/wms/shipment-order/page',
+    { params },
+  );
+}
+
+export function getShipmentOrder(id: number) {
+  return requestClient.get<WmsShipmentOrderApi.ShipmentOrder>(
+    `/wms/shipment-order/get?id=${id}`,
+  );
+}
+
+export function getShipmentOrderDetailListByOrderId(orderId: number) {
+  return requestClient.get<WmsShipmentOrderDetailApi.ShipmentOrderDetail[]>(
+    `/wms/shipment-order-detail/list-by-order-id?orderId=${orderId}`,
+  );
+}
+
+export function createShipmentOrder(data: WmsShipmentOrderApi.ShipmentOrder) {
+  return requestClient.post('/wms/shipment-order/create', data);
+}
+
+export function updateShipmentOrder(data: WmsShipmentOrderApi.ShipmentOrder) {
+  return requestClient.put('/wms/shipment-order/update', data);
+}
+
+export function completeShipmentOrder(id: number) {
+  return requestClient.put(`/wms/shipment-order/complete?id=${id}`);
+}
+
+export function cancelShipmentOrder(id: number) {
+  return requestClient.put(`/wms/shipment-order/cancel?id=${id}`);
+}
+
+export function deleteShipmentOrder(id: number) {
+  return requestClient.delete(`/wms/shipment-order/delete?id=${id}`);
+}
+
+export function exportShipmentOrder(params: any) {
+  return requestClient.download('/wms/shipment-order/export-excel', { params });
+}
diff --git a/apps/web-ele/src/components/map/index.ts b/apps/web-ele/src/components/map/index.ts
new file mode 100644
index 000000000..c8b84da5a
--- /dev/null
+++ b/apps/web-ele/src/components/map/index.ts
@@ -0,0 +1,3 @@
+export { default as MapDialog } from './src/map-dialog.vue';
+
+export { loadBaiduMapSdk } from './src/utils';
diff --git a/apps/web-ele/src/components/map/src/map-dialog.vue b/apps/web-ele/src/components/map/src/map-dialog.vue
new file mode 100644
index 000000000..9bc34790b
--- /dev/null
+++ b/apps/web-ele/src/components/map/src/map-dialog.vue
@@ -0,0 +1,290 @@
+<!-- 地图选择弹窗组件：基于百度地图 GL 实现 -->
+<script lang="ts" setup>
+import { nextTick, reactive, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+import { loadBaiduMapSdk } from './utils';
+
+const emit = defineEmits<{
+  confirm: [
+    data: {
+      address: string;
+      latitude: string;
+      longitude: string;
+    },
+  ];
+}>();
+
+const mapContainerRef = ref<HTMLElement>();
+const state = reactive({
+  lonLat: '', // 经纬度字符串，格式为 "经度,纬度"
+  address: '', // 地址信息
+  loading: false, // 地址搜索加载状态
+  latitude: '', // 纬度
+  longitude: '', // 经度
+  map: null as any, // 百度地图实例
+  mapAddressOptions: [] as any[], // 地址搜索选项
+  mapMarker: null as any, // 地图标记点
+  geocoder: null as any, // 地理编码器实例
+  mapContainerReady: false, // 地图容器是否准备好
+});
+
+// 初始经纬度（打开弹窗时传入）
+const initLongitude = ref<number | undefined>();
+const initLatitude = ref<number | undefined>();
+
+/** 弹窗打开动画完成后初始化地图 */
+async function handleDialogOpened() {
+  // 先显示地图容器
+  state.mapContainerReady = true;
+
+  // 等待下一个 DOM 更新周期，确保地图容器已渲染
+  await nextTick();
+  // 加载百度地图 SDK
+  await loadBaiduMapSdk();
+  initMapInstance();
+}
+
+/** 弹窗关闭后清理地图 */
+function handleDialogClosed() {
+  // 销毁地图实例
+  if (state.map) {
+    state.map.destroy?.();
+    state.map = null;
+  }
+  state.mapMarker = null;
+  state.geocoder = null;
+  state.mapContainerReady = false;
+}
+
+/** 初始化地图实例 */
+function initMapInstance() {
+  if (!mapContainerRef.value) {
+    return;
+  }
+
+  // 初始化地图和地理编码器
+  initMap();
+  initGeocoder();
+
+  // 监听地图点击事件
+  state.map.addEventListener('click', (e: any) => {
+    const point = e.latlng;
+    state.lonLat = `${point.lng},${point.lat}`;
+    regeoCode(state.lonLat);
+  });
+
+  // 如果有初始经纬度，加载标记点
+  if (initLongitude.value && initLatitude.value) {
+    const lonLat = `${initLongitude.value},${initLatitude.value}`;
+    regeoCode(lonLat);
+  }
+}
+
+/** 初始化地图 */
+function initMap() {
+  state.map = new window.BMapGL.Map(mapContainerRef.value);
+  state.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11);
+  state.map.enableScrollWheelZoom();
+  state.map.disableDoubleClickZoom();
+
+  state.map.addControl(new window.BMapGL.NavigationControl());
+  state.map.addControl(new window.BMapGL.ScaleControl());
+  state.map.addControl(new window.BMapGL.ZoomControl());
+}
+
+/** 初始化地理编码器 */
+function initGeocoder() {
+  state.geocoder = new window.BMapGL.Geocoder();
+}
+
+/** 搜索地址 */
+function autoSearch(queryValue: string) {
+  if (!queryValue) {
+    state.mapAddressOptions = [];
+    return;
+  }
+
+  state.loading = true;
+
+  // noinspection JSUnusedGlobalSymbols
+  const localSearch = new window.BMapGL.LocalSearch(state.map, {
+    onSearchComplete: (results: any) => {
+      state.loading = false;
+      const temp: any[] = [];
+
+      if (results && results._pois) {
+        results._pois.forEach((p: any) => {
+          const point = p.point;
+          if (point && point.lng && point.lat) {
+            temp.push({
+              name: p.title,
+              value: `${point.lng},${point.lat}`,
+            });
+          }
+        });
+      }
+
+      state.mapAddressOptions = temp;
+    },
+  });
+
+  localSearch.search(queryValue);
+}
+
+/** 处理地址选择 */
+function handleAddressSelect(value: string) {
+  if (value) {
+    regeoCode(value);
+  }
+}
+
+/** 添加标记点 */
+function setMarker(lnglat: string[]) {
+  if (!lnglat) {
+    return;
+  }
+
+  if (state.mapMarker !== null) {
+    state.map.removeOverlay(state.mapMarker);
+  }
+
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1]);
+  state.mapMarker = new window.BMapGL.Marker(point);
+
+  state.map.addOverlay(state.mapMarker);
+  state.map.centerAndZoom(point, 16);
+}
+
+/** 经纬度转地址、添加标记点 */
+function regeoCode(lonLat: string) {
+  if (!lonLat) {
+    return;
+  }
+  const lnglat = lonLat.split(',');
+  if (lnglat.length !== 2) {
+    return;
+  }
+
+  state.longitude = lnglat[0]!;
+  state.latitude = lnglat[1]!;
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1]);
+  state.map.centerAndZoom(point, 16);
+
+  setMarker(lnglat);
+  getAddress(lnglat);
+}
+
+/** 根据经纬度获取地址信息 */
+function getAddress(lnglat: string[]) {
+  const point = new window.BMapGL.Point(lnglat[0], lnglat[1]);
+  state.geocoder.getLocation(point, (result: any) => {
+    if (result && result.address) {
+      state.address = result.address;
+    }
+  });
+}
+
+/** 确认选择 */
+function handleConfirm() {
+  if (state.longitude && state.latitude) {
+    emit('confirm', {
+      longitude: state.longitude,
+      latitude: state.latitude,
+      address: state.address,
+    });
+  }
+  modalApi.close();
+}
+
+const [Modal, modalApi] = useVbenModal({
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      handleDialogOpened();
+    } else {
+      handleDialogClosed();
+    }
+  },
+});
+
+/** 打开弹窗 */
+function open(longitude?: number, latitude?: number) {
+  initLongitude.value = longitude;
+  initLatitude.value = latitude;
+  state.longitude = longitude ? String(longitude) : '';
+  state.latitude = latitude ? String(latitude) : '';
+  state.address = '';
+  state.mapAddressOptions = [];
+  modalApi.open();
+}
+
+defineExpose({ open });
+</script>
+
+<template>
+  <Modal :footer="false" class="w-[700px]" title="百度地图">
+    <div class="w-full">
+      <!-- 第一行：位置搜索 -->
+      <ElForm label-width="80px">
+        <ElFormItem label="定位位置">
+          <ElSelect
+            v-model="state.address"
+            :filter-method="autoSearch"
+            :loading="state.loading"
+            class="w-full"
+            clearable
+            filterable
+            placeholder="可输入地址查询经纬度"
+            remote
+            @change="handleAddressSelect"
+          >
+            <ElOption
+              v-for="item in state.mapAddressOptions"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+        <!-- 第二行：坐标显示 -->
+        <ElFormItem label="当前坐标">
+          <div class="flex gap-2">
+            <ElInput
+              :model-value="state.longitude"
+              disabled
+              style="width: 200px"
+            >
+              <template #prepend>经度</template>
+            </ElInput>
+            <ElInput
+              :model-value="state.latitude"
+              disabled
+              style="width: 200px"
+            >
+              <template #prepend>纬度</template>
+            </ElInput>
+          </div>
+        </ElFormItem>
+      </ElForm>
+      <!-- 第三行：地图 -->
+      <div
+        v-if="state.mapContainerReady"
+        ref="mapContainerRef"
+        class="mt-[10px] h-[400px] w-full"
+      ></div>
+      <div
+        v-else
+        class="mt-[10px] flex h-[400px] w-full items-center justify-center"
+      >
+        <span class="text-gray-400">地图加载中...</span>
+      </div>
+    </div>
+    <div class="mt-4 flex justify-end gap-2">
+      <ElButton type="primary" @click="handleConfirm">确 定</ElButton>
+      <ElButton @click="modalApi.close()">取 消</ElButton>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/components/map/src/utils.ts b/apps/web-ele/src/components/map/src/utils.ts
new file mode 100644
index 000000000..c5ff378e1
--- /dev/null
+++ b/apps/web-ele/src/components/map/src/utils.ts
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-dynamic-delete */
+/**
+ * 百度地图 SDK 加载工具
+ */
+
+// 扩展 Window 接口以包含百度地图 GL API
+declare global {
+  interface Window {
+    BMapGL: any;
+  }
+}
+
+// 全局回调名称
+const CALLBACK_NAME = '__BAIDU_MAP_LOAD_CALLBACK__';
+
+// SDK 加载状态
+let loadPromise: null | Promise<void> = null;
+
+/**
+ * 加载百度地图 GL SDK
+ * @param timeout 超时时间（毫秒），默认 10000
+ * @returns Promise<void>
+ */
+export const loadBaiduMapSdk = (timeout = 10_000): Promise<void> => {
+  // 已加载完成
+  if (window.BMapGL) {
+    return Promise.resolve();
+  }
+
+  // 正在加载中，返回同一个 Promise
+  if (loadPromise) {
+    return loadPromise;
+  }
+
+  loadPromise = new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      loadPromise = null;
+      reject(new Error('百度地图 SDK 加载超时'));
+    }, timeout);
+
+    // 全局回调
+    (window as any)[CALLBACK_NAME] = () => {
+      clearTimeout(timeoutId);
+      delete (window as any)[CALLBACK_NAME];
+      resolve();
+    };
+
+    // 创建 script 标签
+    const script = document.createElement('script');
+    script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${
+      import.meta.env.VITE_BAIDU_MAP_KEY
+    }&callback=${CALLBACK_NAME}`;
+    script.addEventListener('onerror', () => {
+      clearTimeout(timeoutId);
+      loadPromise = null;
+      delete (window as any)[CALLBACK_NAME];
+      reject(new Error('百度地图 SDK 加载失败'));
+    });
+    document.body.append(script);
+  });
+
+  return loadPromise;
+};
diff --git a/apps/web-ele/src/components/number-range-input/index.ts b/apps/web-ele/src/components/number-range-input/index.ts
new file mode 100644
index 000000000..f1647e75d
--- /dev/null
+++ b/apps/web-ele/src/components/number-range-input/index.ts
@@ -0,0 +1,39 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { markRaw } from 'vue';
+
+import NumberRangeInput from './number-range-input.vue';
+
+export { default as NumberRangeInput } from './number-range-input.vue';
+
+export type NumberRangeValue = [number | undefined, number | undefined];
+
+function splitNumberRange(minFieldName: string, maxFieldName: string) {
+  return (
+    value: NumberRangeValue | undefined,
+    setValue: (fieldName: string, value: number | undefined) => void,
+  ) => {
+    setValue(minFieldName, value?.[0]);
+    setValue(maxFieldName, value?.[1]);
+    return undefined;
+  };
+}
+
+export function buildNumberRangeSchema(
+  label: string,
+  fieldName: string,
+  minFieldName: string,
+  maxFieldName: string,
+  precision: number,
+): VbenFormSchema {
+  return {
+    component: markRaw(NumberRangeInput),
+    componentProps: {
+      min: 0,
+      precision,
+    },
+    fieldName,
+    label,
+    valueFormat: splitNumberRange(minFieldName, maxFieldName),
+  };
+}
diff --git a/apps/web-ele/src/components/number-range-input/number-range-input.vue b/apps/web-ele/src/components/number-range-input/number-range-input.vue
new file mode 100644
index 000000000..b5ee5391c
--- /dev/null
+++ b/apps/web-ele/src/components/number-range-input/number-range-input.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import { ElInputNumber } from 'element-plus';
+
+type NumberRangeValue = [number | undefined, number | undefined];
+
+const props = withDefaults(
+  defineProps<{
+    maxPlaceholder?: string;
+    min?: number;
+    minPlaceholder?: string;
+    modelValue?: NumberRangeValue;
+    precision?: number;
+  }>(),
+  {
+    maxPlaceholder: '最大值',
+    min: undefined,
+    minPlaceholder: '最小值',
+    modelValue: undefined,
+    precision: 2,
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: NumberRangeValue | undefined];
+}>();
+
+function normalizeValue(value: unknown) {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : undefined;
+  }
+  if (typeof value === 'string' && value.trim() !== '') {
+    const numberValue = Number(value);
+    return Number.isFinite(numberValue) ? numberValue : undefined;
+  }
+  return undefined;
+}
+
+function updateValue(index: 0 | 1, value: unknown) {
+  const next: NumberRangeValue = [
+    props.modelValue?.[0] ?? undefined,
+    props.modelValue?.[1] ?? undefined,
+  ];
+  next[index] = normalizeValue(value);
+  emit(
+    'update:modelValue',
+    next[0] === undefined && next[1] === undefined ? undefined : next,
+  );
+}
+</script>
+
+<template>
+  <div class="flex w-full items-center gap-2">
+    <ElInputNumber
+      :controls="false"
+      :min="min"
+      :model-value="modelValue?.[0]"
+      :placeholder="minPlaceholder"
+      :precision="precision"
+      class="min-w-0 flex-1"
+      @update:model-value="updateValue(0, $event)"
+    />
+    <span class="shrink-0 text-muted-foreground">至</span>
+    <ElInputNumber
+      :controls="false"
+      :min="min"
+      :model-value="modelValue?.[1]"
+      :placeholder="maxPlaceholder"
+      :precision="precision"
+      class="min-w-0 flex-1"
+      @update:model-value="updateValue(1, $event)"
+    />
+  </div>
+</template>
diff --git a/apps/web-ele/src/router/routes/modules/iot.ts b/apps/web-ele/src/router/routes/modules/iot.ts
new file mode 100644
index 000000000..ec0191863
--- /dev/null
+++ b/apps/web-ele/src/router/routes/modules/iot.ts
@@ -0,0 +1,46 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/iot',
+    name: 'IoTCenter',
+    meta: {
+      title: 'IoT 物联网',
+      icon: 'lucide:cpu',
+      keepAlive: true,
+      hideInMenu: true,
+    },
+    children: [
+      {
+        path: 'product/detail/:id',
+        name: 'IoTProductDetail',
+        meta: {
+          title: '产品详情',
+          activePath: '/iot/device/product',
+        },
+        component: () => import('#/views/iot/product/product/detail/index.vue'),
+      },
+      {
+        path: 'device/detail/:id',
+        name: 'IoTDeviceDetail',
+        meta: {
+          title: '设备详情',
+          activePath: '/iot/device/device',
+        },
+        component: () => import('#/views/iot/device/device/detail/index.vue'),
+      },
+      {
+        path: 'ota/firmware/detail/:id',
+        name: 'IoTOtaFirmwareDetail',
+        meta: {
+          title: '固件详情',
+          activePath: '/iot/ota',
+        },
+        component: () =>
+          import('#/views/iot/ota/firmware/detail/index.vue'),
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/web-ele/src/views/iot/alert/config/data.ts b/apps/web-ele/src/views/iot/alert/config/data.ts
new file mode 100644
index 000000000..7508f4471
--- /dev/null
+++ b/apps/web-ele/src/views/iot/alert/config/data.ts
@@ -0,0 +1,204 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AlertConfigApi } from '#/api/iot/alert/config';
+
+import { CommonStatusEnum, DICT_TYPE } 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';
+
+/** 新增/修改告警配置的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '配置名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入配置名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '配置描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入配置描述',
+        rows: 3,
+      },
+    },
+    {
+      fieldName: 'level',
+      label: '告警级别',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_ALERT_LEVEL, 'number'),
+        placeholder: '请选择告警级别',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '配置状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      defaultValue: CommonStatusEnum.ENABLE,
+      rules: 'required',
+    },
+    {
+      fieldName: 'sceneRuleIds',
+      label: '关联场景联动规则',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleRuleSceneList,
+        labelField: 'name',
+        valueField: 'id',
+        multiple: true,
+        placeholder: '请选择关联的场景联动规则',
+      },
+      defaultValue: [],
+      rules: 'required',
+    },
+    {
+      fieldName: 'receiveUserIds',
+      label: '接收的用户',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        labelField: 'nickname',
+        valueField: 'id',
+        multiple: true,
+        placeholder: '请选择接收的用户',
+      },
+      defaultValue: [],
+      rules: 'required',
+    },
+    {
+      fieldName: 'receiveTypes',
+      label: '接收类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_ALERT_RECEIVE_TYPE, 'number'),
+        multiple: true,
+        placeholder: '请选择接收类型',
+      },
+      defaultValue: [],
+      rules: 'required',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '配置名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入配置名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '配置状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择配置状态',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<AlertConfigApi.AlertConfig>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '配置编号',
+      minWidth: 80,
+    },
+    {
+      field: 'name',
+      title: '配置名称',
+      minWidth: 150,
+    },
+    {
+      field: 'description',
+      title: '配置描述',
+      minWidth: 200,
+    },
+    {
+      field: 'level',
+      title: '告警级别',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_ALERT_LEVEL },
+      },
+    },
+    {
+      field: 'status',
+      title: '配置状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'sceneRuleIds',
+      title: '关联场景联动规则',
+      minWidth: 150,
+      formatter: ({ cellValue }) => `${cellValue?.length || 0} 条`,
+    },
+    {
+      field: 'receiveUserNames',
+      title: '接收人',
+      minWidth: 150,
+    },
+    {
+      field: 'receiveTypes',
+      title: '接收类型',
+      minWidth: 150,
+      slots: { default: 'receiveTypes' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/iot/alert/config/index.vue b/apps/web-ele/src/views/iot/alert/config/index.vue
new file mode 100644
index 000000000..198d7d0db
--- /dev/null
+++ b/apps/web-ele/src/views/iot/alert/config/index.vue
@@ -0,0 +1,136 @@
+<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 { ElLoading, ElMessage } from 'element-plus';
+
+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 { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建告警配置 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑告警配置 */
+function handleEdit(row: AlertConfigApi.AlertConfig) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除告警配置 */
+async function handleDelete(row: AlertConfigApi.AlertConfig) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteAlertConfig(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAlertConfigPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AlertConfigApi.AlertConfig>,
+});
+</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:alert-config:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #receiveTypes="{ row }">
+        <DictTag
+          v-for="(type, index) in row.receiveTypes"
+          :key="index"
+          :type="DICT_TYPE.IOT_ALERT_RECEIVE_TYPE"
+          :value="type"
+          class="mr-1"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:alert-config:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:alert-config:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/alert/config/modules/form.vue b/apps/web-ele/src/views/iot/alert/config/modules/form.vue
new file mode 100644
index 000000000..42da09ba6
--- /dev/null
+++ b/apps/web-ele/src/views/iot/alert/config/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { AlertConfigApi } from '#/api/iot/alert/config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createAlertConfig,
+  getAlertConfig,
+  updateAlertConfig,
+} from '#/api/iot/alert/config';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<AlertConfigApi.AlertConfig>();
+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: 140,
+  },
+  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 AlertConfigApi.AlertConfig;
+    try {
+      await (formData.value?.id
+        ? updateAlertConfig(data)
+        : createAlertConfig(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<AlertConfigApi.AlertConfig>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getAlertConfig(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-3/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/alert/record/data.ts b/apps/web-ele/src/views/iot/alert/record/data.ts
new file mode 100644
index 000000000..6cdc9a76e
--- /dev/null
+++ b/apps/web-ele/src/views/iot/alert/record/data.ts
@@ -0,0 +1,165 @@
+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';
+
+import { getSimpleAlertConfigList } from '#/api/iot/alert/config';
+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 [
+    {
+      fieldName: 'configId',
+      label: '告警配置',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleAlertConfigList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择告警配置',
+        clearable: true,
+        filterable: true,
+      },
+    },
+    {
+      fieldName: 'configLevel',
+      label: '告警级别',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_ALERT_LEVEL, 'number'),
+        placeholder: '请选择告警级别',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleProductList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择产品',
+        clearable: true,
+        filterable: true,
+      },
+    },
+    {
+      fieldName: 'deviceId',
+      label: '设备',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeviceList,
+        labelField: 'deviceName',
+        valueField: 'id',
+        placeholder: '请选择设备',
+        clearable: true,
+        filterable: true,
+      },
+    },
+    {
+      fieldName: 'processStatus',
+      label: '是否处理',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+        placeholder: '请选择是否处理',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<AlertRecordApi.AlertRecord>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '记录编号',
+      minWidth: 80,
+    },
+    {
+      field: 'configName',
+      title: '告警名称',
+      minWidth: 150,
+    },
+    {
+      field: 'configLevel',
+      title: '告警级别',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_ALERT_LEVEL },
+      },
+    },
+    {
+      field: 'productId',
+      title: '产品名称',
+      minWidth: 120,
+      formatter: ({ cellValue }) =>
+        productList.find((product) => product.id === cellValue)?.name || '-',
+    },
+    {
+      field: 'deviceId',
+      title: '设备名称',
+      minWidth: 120,
+      formatter: ({ cellValue }) =>
+        deviceList.find((device) => device.id === cellValue)?.deviceName ||
+        '-',
+    },
+    {
+      field: 'deviceMessage',
+      title: '触发的设备消息',
+      minWidth: 150,
+      slots: { default: 'deviceMessage' },
+    },
+    {
+      field: 'processStatus',
+      title: '是否处理',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'processRemark',
+      title: '处理结果',
+      minWidth: 150,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/iot/alert/record/index.vue b/apps/web-ele/src/views/iot/alert/record/index.vue
new file mode 100644
index 000000000..5356009ec
--- /dev/null
+++ b/apps/web-ele/src/views/iot/alert/record/index.vue
@@ -0,0 +1,136 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { AlertRecordApi } from '#/api/iot/alert/record';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElPopover,
+} from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getAlertRecordPage, processAlertRecord } from '#/api/iot/alert/record';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 把设备消息序列化成可读字符串 */
+function stringifyDeviceMessage(deviceMessage: any) {
+  if (!deviceMessage) {
+    return '';
+  }
+  return typeof deviceMessage === 'object'
+    ? JSON.stringify(deviceMessage, null, 2)
+    : String(deviceMessage);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 处理告警记录 */
+async function handleProcess(row: AlertRecordApi.AlertRecord) {
+  try {
+    const { value: processRemark } = await ElMessageBox.prompt(
+      '请输入处理原因：',
+      '处理告警记录',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        inputType: 'textarea',
+        inputPlaceholder: '请输入处理原因',
+        inputValidator: (value: string) => {
+          if (!value) {
+            return '请输入处理原因';
+          }
+          return true;
+        },
+      },
+    );
+    const loadingInstance = ElLoading.service({ text: '正在处理...' });
+    try {
+      await processAlertRecord(row.id!, processRemark);
+      ElMessage.success('处理成功');
+      handleRefresh();
+    } finally {
+      loadingInstance.close();
+    }
+  } catch {
+    // 用户取消
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAlertRecordPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<AlertRecordApi.AlertRecord>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <Grid table-title="告警记录列表">
+      <template #deviceMessage="{ row }">
+        <ElPopover
+          v-if="row.deviceMessage"
+          placement="top-start"
+          trigger="hover"
+          :popper-style="{ maxWidth: '600px' }"
+        >
+          <template #reference>
+            <ElButton size="small" type="primary" link>
+              <IconifyIcon icon="ant-design:eye-outlined" class="mr-1" />
+              查看消息
+            </ElButton>
+          </template>
+          <pre class="text-xs">{{ stringifyDeviceMessage(row.deviceMessage) }}</pre>
+        </ElPopover>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '处理',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:alert-record:process'],
+              onClick: handleProcess.bind(null, row),
+              ifShow: !row.processStatus,
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/data.ts b/apps/web-ele/src/views/iot/device/device/data.ts
new file mode 100644
index 000000000..a2ee12b7c
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/data.ts
@@ -0,0 +1,336 @@
+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';
+
+import { z } from '#/adapter/form';
+import { getSimpleDeviceGroupList } from '#/api/iot/device/group';
+import { getSimpleProductList } from '#/api/iot/product/product';
+
+/** 基础表单字段 */
+export function useBasicFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleProductList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择产品',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values: any) => !!values?.id,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'deviceType',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'deviceName',
+      label: 'DeviceName',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 DeviceName',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values: any) => !!values?.id,
+      },
+      rules: z
+        .string()
+        .min(4, 'DeviceName 长度不能少于 4 个字符')
+        .max(32, 'DeviceName 长度不能超过 32 个字符')
+        .regex(
+          /^[\w.\-:@]{4,32}$/,
+          '支持英文字母、数字、下划线（_）、中划线（-）、点号（.）、半角冒号（:）和特殊字符@',
+        ),
+    },
+  ];
+}
+
+/** 高级设置表单字段（更多设置） */
+export function useAdvancedFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'nickname',
+      label: '备注名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注名称',
+      },
+      rules: z
+        .string()
+        .min(4, '备注名称长度限制为 4~64 个字符')
+        .max(64, '备注名称长度限制为 4~64 个字符')
+        .regex(
+          /^[\u4E00-\u9FA5\u3040-\u30FF\w]+$/,
+          '备注名称只能包含中文、英文字母、日文、数字和下划线（_）',
+        )
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      fieldName: 'picUrl',
+      label: '设备图片',
+      component: 'ImageUpload',
+    },
+    {
+      fieldName: 'groupIds',
+      label: '设备分组',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeviceGroupList,
+        labelField: 'name',
+        valueField: 'id',
+        multiple: true,
+        placeholder: '请选择设备分组',
+      },
+    },
+    {
+      fieldName: 'serialNumber',
+      label: '设备序列号',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入设备序列号',
+      },
+      rules: z
+        .string()
+        .regex(/^[\w-]+$/, '序列号只能包含字母、数字、中划线和下划线')
+        .optional()
+        .or(z.literal('')),
+    },
+    {
+      fieldName: 'longitude',
+      label: '设备经度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入设备经度',
+        min: -180,
+        max: 180,
+        precision: 6,
+      },
+      rules: z
+        .number()
+        .min(-180, '经度范围为 -180 到 180')
+        .max(180, '经度范围为 -180 到 180')
+        .optional()
+        .nullable(),
+    },
+    {
+      fieldName: 'latitude',
+      label: '设备纬度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入设备纬度',
+        min: -90,
+        max: 90,
+        precision: 6,
+      },
+      rules: z
+        .number()
+        .min(-90, '纬度范围为 -90 到 90')
+        .max(90, '纬度范围为 -90 到 90')
+        .optional()
+        .nullable(),
+    },
+  ];
+}
+
+/** 设备分组表单 */
+export function useGroupFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'groupIds',
+      label: '设备分组',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeviceGroupList,
+        labelField: 'name',
+        valueField: 'id',
+        multiple: true,
+        placeholder: '请选择设备分组',
+      },
+      rules: 'required',
+    },
+  ];
+}
+
+/** 设备导入表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '设备数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        activeText: '是',
+        inactiveText: '否',
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的设备数据',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleProductList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择产品',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'deviceName',
+      label: 'DeviceName',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 DeviceName',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '备注名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入备注名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'deviceType',
+      label: '设备类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE, 'number'),
+        placeholder: '请选择设备类型',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '设备状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number'),
+        placeholder: '请选择设备状态',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'groupId',
+      label: '设备分组',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleDeviceGroupList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择设备分组',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<IotDeviceApi.Device>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'deviceName',
+      title: 'DeviceName',
+      minWidth: 150,
+    },
+    {
+      field: 'nickname',
+      title: '备注名称',
+      minWidth: 120,
+    },
+    {
+      field: 'picUrl',
+      title: '设备图片',
+      width: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'productId',
+      title: '所属产品',
+      minWidth: 120,
+      slots: { default: 'product' },
+    },
+    {
+      field: 'deviceType',
+      title: '设备类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE },
+      },
+    },
+    {
+      field: 'groupIds',
+      title: '所属分组',
+      minWidth: 150,
+      slots: { default: 'groups' },
+    },
+    {
+      field: 'state',
+      title: '设备状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_DEVICE_STATE },
+      },
+    },
+    {
+      field: 'onlineTime',
+      title: '最后上线时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/iot/device/device/detail/index.vue b/apps/web-ele/src/views/iot/device/device/detail/index.vue
new file mode 100644
index 000000000..7173de87b
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/index.vue
@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import type { IotDeviceApi } from '#/api/iot/device/device';
+import type { IotProductApi } from '#/api/iot/product/product';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page } from '@vben/common-ui';
+import { DeviceTypeEnum } from '@vben/constants';
+
+import { ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { getDevice } from '#/api/iot/device/device';
+import { getProduct, ProtocolTypeEnum } from '#/api/iot/product/product';
+import { getThingModelListByProductId } from '#/api/iot/thingmodel';
+
+import DeviceDetailConfig from './modules/config.vue';
+import DeviceDetailsHeader from './modules/header.vue';
+import DeviceDetailsInfo from './modules/info.vue';
+import DeviceDetailsMessage from './modules/message.vue';
+import DeviceModbusConfig from './modules/modbus-config.vue';
+import DeviceDetailsSimulator from './modules/simulator.vue';
+import DeviceDetailsSubDevice from './modules/sub-device.vue';
+import DeviceDetailsThingModel from './modules/thing-model.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const id = Number(route.params.id);
+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<ThingModelApi.ThingModel[]>([]);
+
+/** 获取设备详情 */
+async function getDeviceData(deviceId: number) {
+  loading.value = true;
+  try {
+    device.value = await getDevice(deviceId);
+    await getProductData(device.value.productId);
+    await getThingModelList(device.value.productId);
+  } catch {
+    ElMessage.error('获取设备详情失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 获取产品详情 */
+async function getProductData(productId: number) {
+  try {
+    product.value = await getProduct(productId);
+  } catch {
+    ElMessage.error('获取产品详情失败');
+  }
+}
+
+/** 获取物模型列表 */
+async function getThingModelList(productId: number) {
+  try {
+    const data = await getThingModelListByProductId(productId);
+    thingModelList.value = data || [];
+  } catch {
+    ElMessage.error('获取物模型列表失败');
+    thingModelList.value = [];
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  if (!id) {
+    ElMessage.warning('参数错误，设备不能为空！');
+    router.back();
+    return;
+  }
+
+  await getDeviceData(id);
+
+  // 处理 tab 参数
+  const { tab } = route.query;
+  if (tab) {
+    activeTab.value = tab as string;
+  }
+});
+</script>
+<template>
+  <Page>
+    <DeviceDetailsHeader
+      :device="device"
+      :loading="loading"
+      :product="product"
+      @refresh="() => getDeviceData(id)"
+    />
+
+    <ElTabs v-model="activeTab" class="mt-4">
+      <ElTabPane name="info" label="设备信息">
+        <DeviceDetailsInfo
+          v-if="activeTab === 'info'"
+          :device="device"
+          :product="product"
+        />
+      </ElTabPane>
+      <ElTabPane name="model" label="物模型数据">
+        <DeviceDetailsThingModel
+          v-if="activeTab === 'model' && device.id"
+          :device-id="device.id"
+          :thing-model-list="thingModelList"
+        />
+      </ElTabPane>
+      <ElTabPane
+        v-if="product.deviceType === DeviceTypeEnum.GATEWAY"
+        name="subDevice"
+        label="子设备管理"
+      >
+        <DeviceDetailsSubDevice
+          v-if="activeTab === 'subDevice' && device.id"
+          :device-id="device.id"
+        />
+      </ElTabPane>
+      <ElTabPane name="log" label="设备消息">
+        <DeviceDetailsMessage
+          v-if="activeTab === 'log' && device.id"
+          :device-id="device.id"
+        />
+      </ElTabPane>
+      <ElTabPane name="simulator" label="模拟设备">
+        <DeviceDetailsSimulator
+          v-if="activeTab === 'simulator'"
+          :device="device"
+          :product="product"
+          :thing-model-list="thingModelList"
+        />
+      </ElTabPane>
+      <ElTabPane name="config" label="设备配置">
+        <DeviceDetailConfig
+          v-if="activeTab === 'config'"
+          :device="device"
+          @success="() => getDeviceData(id)"
+        />
+      </ElTabPane>
+      <ElTabPane
+        v-if="
+          [
+            ProtocolTypeEnum.MODBUS_TCP_CLIENT,
+            ProtocolTypeEnum.MODBUS_TCP_SERVER,
+          ].includes(product.protocolType as ProtocolTypeEnum)
+        "
+        name="modbus"
+        label="Modbus 配置"
+      >
+        <DeviceModbusConfig
+          v-if="activeTab === 'modbus'"
+          :device="device"
+          :product="product"
+          :thing-model-list="thingModelList"
+        />
+      </ElTabPane>
+    </ElTabs>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/config.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/config.vue
new file mode 100644
index 000000000..3e4105851
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/config.vue
@@ -0,0 +1,186 @@
+<!-- 设备配置 -->
+<script lang="ts" setup>
+import type { IotDeviceApi } from '#/api/iot/device/device';
+
+import { computed, ref, watchEffect } from 'vue';
+
+import { IotDeviceMessageMethodEnum } from '@vben/constants';
+
+import {
+  ElAlert,
+  ElButton,
+  ElInput,
+  ElMessage,
+  ElPopconfirm,
+} from 'element-plus';
+
+import { sendDeviceMessage, updateDevice } from '#/api/iot/device/device';
+
+const props = defineProps<{
+  device: IotDeviceApi.Device;
+}>();
+
+const emit = defineEmits<{
+  (e: 'success'): void; // 定义 success 事件，不需要参数
+}>();
+
+const loading = ref(false); // 加载中
+const pushLoading = ref(false); // 推送加载中
+const saveLoading = ref(false); // 保存加载中
+const config = ref<any>({}); // 只存储 config 字段
+const configString = ref(''); // 用于编辑器的字符串格式
+
+/** 监听 props.device 的变化，只更新 config 字段 */
+watchEffect(() => {
+  try {
+    config.value = props.device.config ? JSON.parse(props.device.config) : {};
+    // 将对象转换为格式化的 JSON 字符串
+    configString.value = JSON.stringify(config.value, null, 2);
+  } catch {
+    config.value = {};
+    configString.value = '{}';
+  }
+});
+
+const isEditing = ref(false); // 编辑状态
+
+/** 格式化的配置用于只读展示 */
+const formattedConfig = computed(() => {
+  try {
+    if (typeof config.value === 'string') {
+      return JSON.stringify(JSON.parse(config.value), null, 2);
+    }
+    return JSON.stringify(config.value, null, 2);
+  } catch {
+    return JSON.stringify(config.value, null, 2);
+  }
+});
+
+/** 启用编辑模式的函数 */
+function handleEdit() {
+  isEditing.value = true;
+  // 重新同步编辑器内容
+  configString.value = JSON.stringify(config.value, null, 2);
+}
+
+/** 取消编辑的函数 */
+function handleCancelEdit() {
+  try {
+    config.value = props.device.config ? JSON.parse(props.device.config) : {};
+    configString.value = JSON.stringify(config.value, null, 2);
+  } catch {
+    config.value = {};
+    configString.value = '{}';
+  }
+  isEditing.value = false;
+}
+
+/** 保存配置的函数 */
+async function saveConfig() {
+  // 验证 JSON 格式
+  try {
+    config.value = JSON.parse(configString.value);
+  } catch (error) {
+    console.error('JSON格式错误:', error);
+    ElMessage.error('JSON格式错误，请修正后再提交！');
+    return;
+  }
+  saveLoading.value = true;
+  try {
+    await updateDeviceConfig();
+    isEditing.value = false;
+  } finally {
+    saveLoading.value = false;
+  }
+}
+
+/** 配置推送处理函数 */
+async function handleConfigPush() {
+  pushLoading.value = true;
+  try {
+    // 调用配置推送接口
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.CONFIG_PUSH.method,
+      params: config.value,
+    });
+    // 提示成功
+    ElMessage.success('配置推送成功！');
+  } finally {
+    pushLoading.value = false;
+  }
+}
+
+/** 更新设备配置 */
+async function updateDeviceConfig() {
+  try {
+    // 提交请求
+    loading.value = true;
+    await updateDevice({
+      id: props.device.id,
+      config: JSON.stringify(config.value),
+    } as IotDeviceApi.Device);
+    ElMessage.success('更新成功！');
+    // 触发 success 事件
+    emit('success');
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <!-- 使用说明提示 -->
+    <ElAlert
+      class="!mb-4"
+      description="如需编辑文件，请点击下方编辑按钮"
+      title="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「配置推送」按钮，设备即可进行远程配置。"
+      show-icon
+      :closable="false"
+      type="info"
+    />
+
+    <!-- 代码视图 - 只读展示 -->
+    <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>
+
+    <!-- 编辑器视图 - 可编辑 -->
+    <ElInput
+      v-else
+      v-model="configString"
+      type="textarea"
+      :autosize="{ minRows: 20, maxRows: 20 }"
+      class="!h-[460px] font-mono text-[13px]"
+      placeholder="请输入 JSON 格式的配置信息"
+    />
+
+    <!-- 操作按钮 -->
+    <div class="mt-4 flex justify-center gap-2">
+      <ElButton v-if="isEditing" @click="handleCancelEdit">取消</ElButton>
+      <ElButton
+        v-if="isEditing"
+        :loading="saveLoading"
+        type="primary"
+        @click="saveConfig"
+      >
+        保存
+      </ElButton>
+      <ElButton v-else @click="handleEdit">编辑</ElButton>
+      <ElPopconfirm
+        v-if="!isEditing"
+        title="确定要推送配置到设备吗？此操作将远程更新设备配置。"
+        @confirm="handleConfigPush"
+      >
+        <template #reference>
+          <ElButton :loading="pushLoading" type="primary">
+            配置推送
+          </ElButton>
+        </template>
+      </ElPopconfirm>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/header.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/header.vue
new file mode 100644
index 000000000..fcb1587e0
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/header.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { IotDeviceApi } from '#/api/iot/device/device';
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { useRouter } from 'vue-router';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import {
+  ElButton,
+  ElCard,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElMessage,
+} from 'element-plus';
+
+import DeviceForm from '../../modules/form.vue';
+
+interface Props {
+  product: IotProductApi.Product;
+  device: IotDeviceApi.Device;
+  loading?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  loading: false,
+});
+
+const emit = defineEmits<{
+  refresh: [];
+}>();
+
+const router = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: DeviceForm,
+  destroyOnClose: true,
+});
+
+/** 复制到剪贴板 */
+async function copyToClipboard(text: string | undefined) {
+  if (!text) return;
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage.success('复制成功');
+  } catch {
+    ElMessage.error('复制失败');
+  }
+}
+
+/** 跳转到产品详情页面 */
+function goToProductDetail(productId: number | undefined) {
+  if (productId) {
+    router.push({ name: 'IoTProductDetail', params: { id: productId } });
+  }
+}
+
+/** 打开编辑表单 */
+function openEditForm(row: IotDeviceApi.Device) {
+  formModalApi.setData(row).open();
+}
+</script>
+<template>
+  <div class="mb-4">
+    <FormModal @success="emit('refresh')" />
+
+    <div class="flex items-start justify-between">
+      <div>
+        <h2 class="text-xl font-bold">{{ device.deviceName }}</h2>
+      </div>
+      <div class="flex gap-2">
+        <ElButton
+          v-if="product.status === 0"
+          v-access:code="['iot:device:update']"
+          @click="openEditForm(device)"
+        >
+          编辑
+        </ElButton>
+      </div>
+    </div>
+
+    <ElCard class="mt-4">
+      <ElDescriptions :column="2">
+        <ElDescriptionsItem label="产品">
+          <a
+            class="cursor-pointer text-blue-600"
+            @click="goToProductDetail(product.id)"
+          >
+            {{ product.name }}
+          </a>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="ProductKey">
+          {{ product.productKey }}
+          <ElButton
+            class="ml-2"
+            size="small"
+            @click="copyToClipboard(product.productKey)"
+          >
+            复制
+          </ElButton>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ElCard>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/info.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/info.vue
new file mode 100644
index 000000000..769eea473
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/info.vue
@@ -0,0 +1,195 @@
+<script lang="ts" setup>
+import type { IotDeviceApi } from '#/api/iot/device/device';
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { computed, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+} from 'element-plus';
+
+import { getDeviceAuthInfo } from '#/api/iot/device/device';
+import { DictTag } from '#/components/dict-tag';
+import { MapDialog } from '#/components/map';
+
+interface Props {
+  device: IotDeviceApi.Device;
+  product: IotProductApi.Product;
+}
+
+const props = defineProps<Props>();
+
+const authDialogVisible = ref(false);
+const authPasswordVisible = ref(false);
+const authInfo = ref<IotDeviceApi.DeviceAuthInfoRespVO>(
+  {} as IotDeviceApi.DeviceAuthInfoRespVO,
+);
+const mapDialogRef = ref<InstanceType<typeof MapDialog>>();
+
+/** 是否有位置信息 */
+const hasLocation = computed(() => {
+  return !!(props.device.longitude && props.device.latitude);
+});
+
+/** 打开地图弹窗 */
+function openMapDialog() {
+  mapDialogRef.value?.open(props.device.longitude, props.device.latitude);
+}
+
+/** 复制到剪贴板 */
+async function copyToClipboard(text: string) {
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage.success('复制成功');
+  } catch {
+    ElMessage.error('复制失败');
+  }
+}
+
+/** 打开设备认证信息弹框 */
+async function handleAuthInfoDialogOpen() {
+  if (!props.device.id) return;
+  try {
+    authInfo.value = await getDeviceAuthInfo(props.device.id);
+    authDialogVisible.value = true;
+  } catch {
+    ElMessage.error('获取设备认证信息失败，请检查网络连接或联系管理员');
+  }
+}
+
+/** 关闭设备认证信息弹框 */
+function handleAuthInfoDialogClose() {
+  authDialogVisible.value = false;
+}
+</script>
+
+<template>
+  <div>
+    <ElCard>
+      <template #header>设备信息</template>
+      <ElDescriptions :column="3" border size="small">
+        <ElDescriptionsItem label="产品名称">
+          {{ product.name }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="ProductKey">
+          {{ product.productKey }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="设备类型">
+          <DictTag
+            :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
+            :value="product.deviceType"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="DeviceName">
+          {{ device.deviceName }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="备注名称">
+          {{ device.nickname || '--' }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="当前状态">
+          <DictTag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="创建时间">
+          {{ formatDateTime(device.createTime) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="激活时间">
+          {{ formatDateTime(device.activeTime) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="最后上线时间">
+          {{ formatDateTime(device.onlineTime) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="最后离线时间">
+          {{ formatDateTime(device.offlineTime) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="设备位置">
+          <template v-if="hasLocation">
+            <span class="mr-2">
+              {{ device.longitude }}, {{ device.latitude }}
+            </span>
+            <ElButton type="primary" link size="small" @click="openMapDialog">
+              <IconifyIcon icon="lucide:map-pin" class="mr-1" />
+              查看地图
+            </ElButton>
+          </template>
+          <span v-else class="text-gray-400">暂无位置信息</span>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="MQTT 连接参数">
+          <ElButton
+            size="small"
+            type="primary"
+            link
+            @click="handleAuthInfoDialogOpen"
+          >
+            查看
+          </ElButton>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ElCard>
+
+    <!-- 认证信息弹框 -->
+    <ElDialog
+      v-model="authDialogVisible"
+      title="MQTT 连接参数"
+      width="640px"
+      :show-close="true"
+    >
+      <ElForm label-width="120px">
+        <ElFormItem label="clientId">
+          <div class="flex w-full gap-1">
+            <ElInput v-model="authInfo.clientId" readonly class="flex-1" />
+            <ElButton type="primary" @click="copyToClipboard(authInfo.clientId)">
+              <IconifyIcon icon="lucide:copy" />
+            </ElButton>
+          </div>
+        </ElFormItem>
+        <ElFormItem label="username">
+          <div class="flex w-full gap-1">
+            <ElInput v-model="authInfo.username" readonly class="flex-1" />
+            <ElButton type="primary" @click="copyToClipboard(authInfo.username)">
+              <IconifyIcon icon="lucide:copy" />
+            </ElButton>
+          </div>
+        </ElFormItem>
+        <ElFormItem label="password">
+          <div class="flex w-full gap-1">
+            <ElInput
+              v-model="authInfo.password"
+              :type="authPasswordVisible ? 'text' : 'password'"
+              readonly
+              class="flex-1"
+            />
+            <ElButton
+              type="primary"
+              @click="authPasswordVisible = !authPasswordVisible"
+            >
+              <IconifyIcon
+                :icon="authPasswordVisible ? 'lucide:eye-off' : 'lucide:eye'"
+              />
+            </ElButton>
+            <ElButton type="primary" @click="copyToClipboard(authInfo.password)">
+              <IconifyIcon icon="lucide:copy" />
+            </ElButton>
+          </div>
+        </ElFormItem>
+      </ElForm>
+      <template #footer>
+        <ElButton @click="handleAuthInfoDialogClose">关闭</ElButton>
+      </template>
+    </ElDialog>
+
+    <!-- 地图弹窗 -->
+    <MapDialog ref="mapDialogRef" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/message.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/message.vue
new file mode 100644
index 000000000..b992b9fe9
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/message.vue
@@ -0,0 +1,244 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { DICT_TYPE, IotDeviceMessageMethodEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  ElButton,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+  ElTag,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDeviceMessagePage } from '#/api/iot/device/device';
+
+const props = defineProps<{
+  deviceId: number;
+}>();
+
+const queryParams = reactive({
+  method: undefined,
+  upstream: undefined,
+}); // 查询参数
+
+const autoRefresh = ref(false); // 自动刷新开关
+let autoRefreshTimer: any = null; // 自动刷新定时器
+
+/** 消息方法选项 */
+const methodOptions = computed(() => {
+  return Object.values(IotDeviceMessageMethodEnum).map((item) => ({
+    label: item.name,
+    value: item.method,
+  }));
+});
+
+/** Grid 列定义 */
+function useGridColumns(): VxeTableGridOptions<Record<string, any>>['columns'] {
+  return [
+    {
+      field: 'ts',
+      title: '时间',
+      width: 160,
+      slots: { default: 'ts' },
+    },
+    {
+      field: 'upstream',
+      title: '上行/下行',
+      width: 100,
+      slots: { default: 'upstream' },
+    },
+    {
+      field: 'reply',
+      title: '是否回复',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'requestId',
+      title: '请求编号',
+      width: 280,
+      showOverflow: 'tooltip',
+    },
+    {
+      field: 'method',
+      title: '请求方法',
+      width: 120,
+      slots: { default: 'method' },
+    },
+    {
+      field: 'params',
+      title: '请求/响应数据',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+      slots: { default: 'params' },
+    },
+  ];
+}
+
+/** 创建 Grid 实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.deviceId) {
+            return { list: [], total: 0 };
+          }
+          return await getDeviceMessagePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            deviceId: props.deviceId,
+            method: queryParams.method,
+            upstream: queryParams.upstream,
+          });
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: false,
+      search: false,
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+/** 搜索操作 */
+function handleQuery() {
+  gridApi.query();
+}
+
+/** 监听自动刷新 */
+watch(autoRefresh, (newValue) => {
+  if (newValue) {
+    autoRefreshTimer = setInterval(() => {
+      gridApi.query();
+    }, 5000);
+  } else {
+    clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+});
+
+/** 监听设备标识变化 */
+watch(
+  () => props.deviceId,
+  (newValue) => {
+    if (newValue) {
+      handleQuery();
+    }
+  },
+);
+
+/** 组件卸载时清除定时器 */
+onBeforeUnmount(() => {
+  if (autoRefreshTimer) {
+    clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+});
+
+/** 初始化 */
+onMounted(() => {
+  if (props.deviceId) {
+    handleQuery();
+  }
+});
+
+/** 刷新消息列表 */
+function refresh(delay = 0) {
+  if (delay > 0) {
+    setTimeout(() => {
+      gridApi.query();
+    }, delay);
+  } else {
+    gridApi.query();
+  }
+}
+
+/** 暴露方法给父组件 */
+defineExpose({
+  refresh,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 搜索区域 -->
+    <div class="mb-4 flex flex-wrap items-center gap-3">
+      <ElSelect
+        v-model="queryParams.method"
+        clearable
+        placeholder="所有方法"
+        style="width: 160px"
+      >
+        <ElOption
+          v-for="item in methodOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </ElSelect>
+      <ElSelect
+        v-model="queryParams.upstream"
+        clearable
+        placeholder="上行/下行"
+        style="width: 160px"
+      >
+        <ElOption label="上行" value="true" />
+        <ElOption label="下行" value="false" />
+      </ElSelect>
+      <div class="flex gap-1">
+        <ElButton type="primary" @click="handleQuery">
+          <IconifyIcon icon="ep:search" class="mr-[5px]" /> 搜索
+        </ElButton>
+        <ElSwitch
+          v-model="autoRefresh"
+          active-text="定时刷新"
+          inactive-text="定时刷新"
+        />
+      </div>
+    </div>
+
+    <!-- 消息列表 -->
+    <Grid>
+      <template #ts="{ row }">
+        {{ formatDateTime(row.ts) }}
+      </template>
+      <template #upstream="{ row }">
+        <ElTag :type="row.upstream ? 'primary' : 'success'">
+          {{ row.upstream ? '上行' : '下行' }}
+        </ElTag>
+      </template>
+      <template #method="{ row }">
+        {{ methodOptions.find((item) => item.value === row.method)?.label }}
+      </template>
+      <template #params="{ row }">
+        <span v-if="row.reply">
+          {{ `{"code":${row.code},"msg":"${row.msg}","data":${row.data}\}` }}
+        </span>
+        <span v-else>{{ row.params }}</span>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/modbus-config-form.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/modbus-config-form.vue
new file mode 100644
index 000000000..d060e07b8
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/modbus-config-form.vue
@@ -0,0 +1,223 @@
+<!-- Modbus 连接配置弹窗 -->
+<script lang="ts" setup>
+import type { IotDeviceModbusConfigApi } from '#/api/iot/device/modbus/config';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  ModbusFrameFormatEnum,
+  ModbusModeEnum,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { saveModbusConfig } from '#/api/iot/device/modbus/config';
+import { ProtocolTypeEnum } from '#/api/iot/product/product';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<IotDeviceModbusConfigApi.ModbusConfig>();
+const deviceId = ref<number>(0);
+const protocolType = ref<string>('');
+
+const isClient = computed(
+  () => protocolType.value === ProtocolTypeEnum.MODBUS_TCP_CLIENT,
+); // 是否为 Client 模式
+const isServer = computed(
+  () => protocolType.value === ProtocolTypeEnum.MODBUS_TCP_SERVER,
+); // 是否为 Server 模式
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'ip',
+      label: 'IP 地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 Modbus 服务器 IP 地址',
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => isClient.value, // Client 模式专有字段：IP 地址
+      },
+      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 模式专有字段：端口
+      },
+      rules: z.number().min(1).max(65_535).optional(),
+      defaultValue: 502,
+    },
+    {
+      fieldName: 'slaveId',
+      label: '从站地址',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入从站地址，范围 1-247',
+        min: 1,
+        max: 247,
+      },
+      rules: z.number().min(1, '请输入从站地址').max(247),
+      defaultValue: 1,
+    },
+    {
+      fieldName: 'timeout',
+      label: '连接超时(ms)',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入连接超时时间',
+        min: 1000,
+        step: 1000,
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => isClient.value, // Client 模式专有字段：连接超时
+      },
+      rules: z.number().min(1000).optional(),
+      defaultValue: 3000,
+    },
+    {
+      fieldName: 'retryInterval',
+      label: '重试间隔(ms)',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入重试间隔',
+        min: 1000,
+        step: 1000,
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => isClient.value, // Client 模式专有字段：重试间隔
+      },
+      rules: z.number().min(1000).optional(),
+      defaultValue: 10_000,
+    },
+    {
+      fieldName: 'mode',
+      label: '工作模式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_MODBUS_MODE, 'number'),
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => isServer.value, // Server 模式专有字段：工作模式
+      },
+      rules: 'required',
+      defaultValue: ModbusModeEnum.POLLING,
+    },
+    {
+      fieldName: 'frameFormat',
+      label: '帧格式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_MODBUS_FRAME_FORMAT, 'number'),
+      },
+      dependencies: {
+        triggerFields: [''],
+        show: () => isServer.value, // Server 模式专有字段：帧格式
+      },
+      rules: 'required',
+      defaultValue: ModbusFrameFormatEnum.MODBUS_TCP,
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as IotDeviceModbusConfigApi.ModbusConfig;
+    try {
+      data.deviceId = deviceId.value;
+      await saveModbusConfig(data);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      config?: IotDeviceModbusConfigApi.ModbusConfig;
+      deviceId: number;
+      protocolType: string;
+    }>();
+    if (!data) {
+      return;
+    }
+    deviceId.value = data.deviceId;
+    protocolType.value = data.protocolType;
+    if (!data.config) {
+      return;
+    }
+    // 设置到 values
+    formData.value = { ...data.config };
+    await formApi.setValues(formData.value);
+  },
+});
+</script>
+
+<template>
+  <Modal title="编辑 Modbus 连接配置" class="w-[600px]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/modbus-config.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/modbus-config.vue
new file mode 100644
index 000000000..8d6afdd1d
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/modbus-config.vue
@@ -0,0 +1,357 @@
+<!-- Modbus 配置 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+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 { ThingModelApi } from '#/api/iot/thingmodel';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { computed, h, onMounted, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE, ModbusFunctionCodeOptions } from '@vben/constants';
+
+import { ElButton, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getModbusConfig } from '#/api/iot/device/modbus/config';
+import {
+  deleteModbusPoint,
+  getModbusPointPage,
+} from '#/api/iot/device/modbus/point';
+import { ProtocolTypeEnum } from '#/api/iot/product/product';
+import { useDescription } from '#/components/description';
+import { DictTag } from '#/components/dict-tag';
+
+import DeviceModbusConfigForm from './modbus-config-form.vue';
+import DeviceModbusPointForm from './modbus-point-form.vue';
+
+const props = defineProps<{
+  device: IotDeviceApi.Device;
+  product: IotProductApi.Product;
+  thingModelList: ThingModelApi.ThingModel[];
+}>();
+
+// ======================= 连接配置 =======================
+
+const isClient = computed(
+  () => props.product.protocolType === ProtocolTypeEnum.MODBUS_TCP_CLIENT,
+); // 是否为 Client 模式
+const isServer = computed(
+  () => props.product.protocolType === ProtocolTypeEnum.MODBUS_TCP_SERVER,
+); // 是否为 Server 模式
+const modbusConfig = ref<IotDeviceModbusConfigApi.ModbusConfig>(
+  {} as IotDeviceModbusConfigApi.ModbusConfig,
+); // 连接配置
+
+/** 连接配置 Description Schema */
+function useConfigDescriptionSchema(): DescriptionItemSchema[] {
+  return [
+    // Client 模式专有字段
+    {
+      field: 'ip',
+      label: 'IP 地址',
+      show: () => isClient.value,
+    },
+    {
+      field: 'port',
+      label: '端口',
+      show: () => isClient.value,
+    },
+    // 公共字段
+    {
+      field: 'slaveId',
+      label: '从站地址',
+    },
+    // Client 模式专有字段
+    {
+      field: 'timeout',
+      label: '连接超时',
+      show: () => isClient.value,
+      render: (val) => (val ? `${val} ms` : '-'),
+    },
+    {
+      field: 'retryInterval',
+      label: '重试间隔',
+      show: () => isClient.value,
+      render: (val) => (val ? `${val} ms` : '-'),
+    },
+    // Server 模式专有字段
+    {
+      field: 'mode',
+      label: '工作模式',
+      show: () => isServer.value,
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.IOT_MODBUS_MODE, value: val }),
+    },
+    {
+      field: 'frameFormat',
+      label: '帧格式',
+      show: () => isServer.value,
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.IOT_MODBUS_FRAME_FORMAT, value: val }),
+    },
+    // 公共字段
+    {
+      field: 'status',
+      label: '状态',
+      render: (val) =>
+        h(DictTag, { type: DICT_TYPE.COMMON_STATUS, value: val }),
+    },
+  ];
+}
+
+const [ConfigDescriptions] = useDescription({
+  title: '连接配置',
+  column: 3,
+  border: true,
+  schema: useConfigDescriptionSchema(),
+});
+
+/** 获取连接配置 */
+async function loadModbusConfig() {
+  modbusConfig.value = await getModbusConfig(props.device.id!);
+}
+
+/** 编辑连接配置 - 使用 useVbenModal */
+const [ConfigFormModal, configFormModalApi] = useVbenModal({
+  connectedComponent: DeviceModbusConfigForm,
+  destroyOnClose: true,
+});
+
+/** 打开编辑连接配置弹窗 */
+function handleEditConfig() {
+  configFormModalApi
+    .setData({
+      config: modbusConfig.value,
+      deviceId: props.device.id!,
+      protocolType: props.product.protocolType!,
+    })
+    .open();
+}
+
+// ======================= 点位配置 =======================
+
+/** 格式化功能码 */
+function formatFunctionCode(code: number) {
+  const option = ModbusFunctionCodeOptions.find((item) => item.value === code);
+  return option ? option.label : `${code}`;
+}
+
+/** 格式化寄存器地址为十六进制 */
+function formatRegisterAddress(address: number) {
+  return `0x${address.toString(16).toUpperCase().padStart(4, '0')}`;
+}
+
+/** 点位搜索表单 Schema */
+function usePointFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '属性名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入属性名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'identifier',
+      label: '标识符',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入标识符',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 点位列表列配置 */
+function usePointColumns(): VxeTableGridOptions<IotDeviceModbusPointApi.ModbusPoint>['columns'] {
+  return [
+    { field: 'name', title: '属性名称', minWidth: 100 },
+    {
+      field: 'identifier',
+      title: '标识符',
+      minWidth: 100,
+      cellRender: { name: 'CellTag', props: { color: 'blue' } },
+    },
+    {
+      field: 'functionCode',
+      title: '功能码',
+      minWidth: 140,
+      formatter: ({ cellValue }) => formatFunctionCode(cellValue),
+    },
+    {
+      field: 'registerAddress',
+      title: '寄存器地址',
+      minWidth: 100,
+      formatter: ({ cellValue }) => formatRegisterAddress(cellValue),
+    },
+    { field: 'registerCount', title: '寄存器数量', minWidth: 90 },
+    {
+      field: 'rawDataType',
+      title: '数据类型',
+      minWidth: 90,
+      cellRender: { name: 'CellTag' },
+    },
+    { field: 'byteOrder', title: '字节序', minWidth: 80 },
+    { field: 'scale', title: '缩放因子', minWidth: 80 },
+    {
+      field: 'pollInterval',
+      title: '轮询间隔',
+      minWidth: 90,
+      formatter: ({ cellValue }) => `${cellValue} ms`,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      minWidth: 80,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: usePointFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: usePointColumns(),
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getModbusPointPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            deviceId: props.device.id,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<IotDeviceModbusPointApi.ModbusPoint>,
+});
+
+/** 新增点位 - 使用 useVbenModal */
+const [PointFormModal, pointFormModalApi] = useVbenModal({
+  connectedComponent: DeviceModbusPointForm,
+  destroyOnClose: true,
+});
+
+/** 打开新增点位弹窗 */
+function handleAddPoint() {
+  pointFormModalApi
+    .setData({
+      deviceId: props.device.id!,
+      thingModelList: props.thingModelList,
+    })
+    .open();
+}
+
+/** 编辑点位 */
+function handleEditPoint(row: IotDeviceModbusPointApi.ModbusPoint) {
+  pointFormModalApi
+    .setData({
+      id: row.id,
+      deviceId: props.device.id!,
+      thingModelList: props.thingModelList,
+    })
+    .open();
+}
+
+/** 删除点位 */
+async function handleDeletePoint(row: IotDeviceModbusPointApi.ModbusPoint) {
+  await confirm({ content: `确定要删除点位【${row.name}】吗？` });
+  await deleteModbusPoint(row.id!);
+  ElMessage.success('删除成功');
+  await gridApi.query();
+}
+
+/** 刷新点位列表 */
+function handlePointSuccess() {
+  gridApi.query();
+}
+
+/** 初始化 */
+onMounted(async () => {
+  await loadModbusConfig();
+});
+</script>
+
+<template>
+  <div>
+    <!-- 连接配置区域 -->
+    <ConfigDescriptions :data="modbusConfig" class="mb-4">
+      <template #extra>
+        <ElButton type="primary" @click="handleEditConfig">编辑</ElButton>
+      </template>
+    </ConfigDescriptions>
+
+    <!-- 点位配置区域 -->
+    <Grid table-title="点位配置" class="h-[600px] overflow-auto">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '新增点位',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleAddPoint,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'primary',
+              link: true,
+              onClick: () => handleEditPoint(row),
+            },
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              popConfirm: {
+                title: `确定要删除点位【${row.name}】吗？`,
+                confirm: () => handleDeletePoint(row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 连接配置弹窗 -->
+    <ConfigFormModal @success="loadModbusConfig" />
+
+    <!-- 点位表单弹窗 -->
+    <PointFormModal @success="handlePointSuccess" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/modbus-point-form.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/modbus-point-form.vue
new file mode 100644
index 000000000..c1d5ec35e
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/modbus-point-form.vue
@@ -0,0 +1,312 @@
+<!-- Modbus 点位表单弹窗 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { IotDeviceModbusPointApi } from '#/api/iot/device/modbus/point';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed, h, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import {
+  CommonStatusEnum,
+  DICT_TYPE,
+  getByteOrderOptions,
+  IoTThingModelTypeEnum,
+  ModbusFunctionCodeOptions,
+  ModbusRawDataTypeOptions,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm, z } from '#/adapter/form';
+import {
+  createModbusPoint,
+  getModbusPoint,
+  updateModbusPoint,
+} from '#/api/iot/device/modbus/point';
+import { $t } from '#/locales';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<IotDeviceModbusPointApi.ModbusPoint>();
+const getTitle = computed(() => {
+  return formData.value?.id ? '编辑点位' : '新增点位';
+});
+const deviceId = ref<number>(0);
+const thingModelList = ref<ThingModelApi.ThingModel[]>([]);
+
+/** 筛选属性类型的物模型 */
+const propertyList = computed(() => {
+  return thingModelList.value.filter(
+    (item) => Number(item.type) === IoTThingModelTypeEnum.PROPERTY,
+  );
+});
+
+/** 表单 Schema */
+function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'identifier',
+      dependencies: {
+        triggerFields: [''], // 隐藏字段：identifier（由物模型属性选择自动填充）
+        show: () => false,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'name',
+      dependencies: {
+        triggerFields: [''], // 隐藏字段：name（由物模型属性选择自动填充）
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'thingModelId',
+      label: '物模型属性',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择物模型属性',
+        filterable: true,
+      },
+      dependencies: {
+        triggerFields: [''],
+        componentProps: () => ({
+          options: propertyList.value.map((item) => ({
+            value: item.id,
+            label: `${item.name} (${item.identifier})`,
+          })),
+        }),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'functionCode',
+      label: '功能码',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择功能码',
+        options: ModbusFunctionCodeOptions.map((item) => ({
+          value: item.value,
+          label: item.label,
+        })),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'registerAddress',
+      label: '寄存器地址',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入寄存器地址',
+        min: 0,
+        max: 65_535,
+      },
+      rules: 'required',
+      suffix: () => {
+        const addr = formApi.form.values?.registerAddress;
+        if (addr === null || addr === undefined) {
+          return '';
+        }
+        return h(
+          'span',
+          { class: 'text-gray-400' },
+          `0x${Number(addr).toString(16).toUpperCase().padStart(4, '0')}`,
+        );
+      },
+    },
+    {
+      fieldName: 'registerCount',
+      label: '寄存器数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入寄存器数量',
+        min: 1,
+        max: 125,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'rawDataType',
+      label: '原始数据类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择数据类型',
+        options: ModbusRawDataTypeOptions.map((item) => ({
+          value: item.value,
+          label: `${item.label} - ${item.description}`,
+        })),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'byteOrder',
+      label: '字节序',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择字节序',
+      },
+      dependencies: {
+        triggerFields: ['rawDataType'],
+        componentProps: (values) => ({
+          options: values.rawDataType
+            ? getByteOrderOptions(values.rawDataType).map((item) => ({
+                value: item.value,
+                label: `${item.label} - ${item.description}`,
+              }))
+            : [],
+        }),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'scale',
+      label: '缩放因子',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入缩放因子',
+        precision: 6,
+        step: 0.1,
+      },
+      defaultValue: 1,
+    },
+    {
+      fieldName: 'pollInterval',
+      label: '轮询间隔(ms)',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入轮询间隔',
+        min: 100,
+        step: 1000,
+      },
+      rules: z.number().min(100, '请输入轮询间隔'),
+      defaultValue: 5000,
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+  handleValuesChange: async (values, changedFields) => {
+    // 物模型属性变化：自动填充 identifier 和 name
+    if (changedFields.includes('thingModelId')) {
+      const thingModelId = values.thingModelId;
+      const thingModel = thingModelList.value.find(
+        (item) => item.id === thingModelId,
+      );
+      if (thingModel) {
+        await formApi.setFieldValue('identifier', thingModel.identifier);
+        await formApi.setFieldValue('name', thingModel.name);
+      }
+    }
+    // 数据类型变化：自动设置寄存器数量和字节序
+    if (changedFields.includes('rawDataType')) {
+      const rawDataType = values.rawDataType;
+      if (rawDataType) {
+        // 根据数据类型自动设置寄存器数量
+        const option = ModbusRawDataTypeOptions.find(
+          (item) => item.value === rawDataType,
+        );
+        if (option && option.registerCount > 0) {
+          await formApi.setFieldValue('registerCount', option.registerCount);
+        }
+        // 重置字节序为第一个选项
+        const byteOrderOptions = getByteOrderOptions(rawDataType);
+        if (byteOrderOptions.length > 0) {
+          await formApi.setFieldValue('byteOrder', byteOrderOptions[0]!.value);
+        }
+      }
+    }
+  },
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as IotDeviceModbusPointApi.ModbusPoint;
+    try {
+      data.deviceId = deviceId.value;
+      await (formData.value?.id
+        ? updateModbusPoint(data)
+        : createModbusPoint(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      deviceId: number;
+      id?: number;
+      thingModelList: ThingModelApi.ThingModel[];
+    }>();
+    if (!data) {
+      return;
+    }
+    deviceId.value = data.deviceId;
+    thingModelList.value = data.thingModelList || [];
+    if (!data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getModbusPoint(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-[600px]">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/simulator.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/simulator.vue
new file mode 100644
index 000000000..e8fa02872
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/simulator.vue
@@ -0,0 +1,569 @@
+<!-- 模拟设备 -->
+<script lang="ts" setup>
+import type { IotDeviceApi } from '#/api/iot/device/device';
+import type { IotProductApi } from '#/api/iot/product/product';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed, ref } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+import {
+  DeviceStateEnum,
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElInput,
+  ElMessage,
+  ElRow,
+  ElTable,
+  ElTableColumn,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { sendDeviceMessage } from '#/api/iot/device/device';
+
+import DataDefinition from '../../../../thingmodel/modules/components/data-definition.vue';
+import DeviceDetailsMessage from './message.vue';
+
+const props = defineProps<{
+  device: IotDeviceApi.Device;
+  product: IotProductApi.Product;
+  thingModelList: ThingModelApi.ThingModel[];
+}>();
+
+// 消息弹窗
+const activeTab = ref('upstream'); // 上行upstream、下行downstream
+const upstreamTab = ref(IotDeviceMessageMethodEnum.PROPERTY_POST.method); // 上行子标签
+const downstreamTab = ref(IotDeviceMessageMethodEnum.PROPERTY_SET.method); // 下行子标签
+const deviceMessageRef = ref(); // 设备消息组件引用
+const deviceMessageRefreshDelay = 2000; // 延迟 N 秒，保证模拟上行的消息被处理
+
+// 折叠状态
+const debugCollapsed = ref(false); // 指令调试区域折叠状态
+const messageCollapsed = ref(false); // 设备消息区域折叠状态
+
+// 表单数据：存储用户输入的模拟值
+const formData = ref<Record<string, string>>({});
+
+// 根据类型过滤物模型数据
+const getFilteredThingModelList = (type: number) => {
+  return props.thingModelList.filter(
+    (item) => String(item.type) === String(type),
+  );
+};
+
+// 计算属性：属性列表
+const propertyList = computed(() =>
+  getFilteredThingModelList(IoTThingModelTypeEnum.PROPERTY),
+);
+
+// 计算属性：事件列表
+const eventList = computed(() =>
+  getFilteredThingModelList(IoTThingModelTypeEnum.EVENT),
+);
+
+// 计算属性：服务列表
+const serviceList = computed(() =>
+  getFilteredThingModelList(IoTThingModelTypeEnum.SERVICE),
+);
+
+// 获取表单值
+function getFormValue(identifier: string) {
+  return formData.value[identifier] || '';
+}
+
+// 设置表单值
+function setFormValue(identifier: string, value: string) {
+  formData.value[identifier] = value;
+}
+
+// 属性上报
+async function handlePropertyPost() {
+  try {
+    const params: Record<string, any> = {};
+    propertyList.value.forEach((item) => {
+      const value = formData.value[item.identifier!];
+      if (value) {
+        params[item.identifier!] = value;
+      }
+    });
+
+    if (Object.keys(params).length === 0) {
+      ElMessage.warning('请至少输入一个属性值');
+      return;
+    }
+
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.PROPERTY_POST.method,
+      params,
+    });
+
+    ElMessage.success('属性上报成功');
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    ElMessage.error('属性上报失败');
+    console.error(error);
+  }
+}
+
+// 事件上报
+async function handleEventPost(row: ThingModelApi.ThingModel) {
+  try {
+    const valueStr = formData.value[row.identifier!];
+    let eventValue: any;
+
+    if (valueStr) {
+      try {
+        eventValue = JSON.parse(valueStr);
+      } catch {
+        ElMessage.error('事件参数格式错误，请输入有效的JSON格式');
+        return;
+      }
+    }
+
+    // 与后端 IotDeviceEventPostReqDTO 对齐 ：{ identifier, value, time }
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.EVENT_POST.method,
+      params: {
+        identifier: row.identifier,
+        value: eventValue,
+        time: Date.now(),
+      },
+    });
+
+    ElMessage.success('事件上报成功');
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    ElMessage.error('事件上报失败');
+    console.error(error);
+  }
+}
+
+// 状态变更
+async function handleDeviceState(state: number) {
+  try {
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.STATE_UPDATE.method,
+      params: { state },
+    });
+
+    ElMessage.success('状态变更成功');
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    ElMessage.error('状态变更失败');
+    console.error(error);
+  }
+}
+
+// 属性设置
+async function handlePropertySet() {
+  try {
+    const params: Record<string, any> = {};
+    propertyList.value.forEach((item) => {
+      const value = formData.value[item.identifier!];
+      if (value) {
+        params[item.identifier!] = value;
+      }
+    });
+
+    if (Object.keys(params).length === 0) {
+      ElMessage.warning('请至少输入一个属性值');
+      return;
+    }
+
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.PROPERTY_SET.method,
+      params,
+    });
+
+    ElMessage.success('属性设置成功');
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    ElMessage.error('属性设置失败');
+    console.error(error);
+  }
+}
+
+// 服务调用
+async function handleServiceInvoke(row: ThingModelApi.ThingModel) {
+  try {
+    const valueStr = formData.value[row.identifier!];
+    let inputParams: any = {};
+
+    if (valueStr) {
+      try {
+        inputParams = JSON.parse(valueStr);
+      } catch {
+        ElMessage.error('服务参数格式错误，请输入有效的JSON格式');
+        return;
+      }
+    }
+
+    // 与后端 IotDeviceServiceInvokeReqDTO 对齐 ：{ identifier, inputParams }
+    await sendDeviceMessage({
+      deviceId: props.device.id!,
+      method: IotDeviceMessageMethodEnum.SERVICE_INVOKE.method,
+      params: {
+        identifier: row.identifier,
+        inputParams,
+      },
+    });
+
+    ElMessage.success('服务调用成功');
+    // 延迟刷新设备消息列表
+    deviceMessageRef.value?.refresh(deviceMessageRefreshDelay);
+  } catch (error) {
+    ElMessage.error('服务调用失败');
+    console.error(error);
+  }
+}
+</script>
+
+<template>
+  <ContentWrap>
+    <ElRow :gutter="16">
+      <!-- 左侧：指令调试区域 -->
+      <ElCol :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
+        <ElCard class="simulator-tabs h-full">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span>指令调试</span>
+              <ElButton
+                size="small"
+                text
+                @click="debugCollapsed = !debugCollapsed"
+              >
+                <IconifyIcon v-if="!debugCollapsed" icon="lucide:chevron-up" />
+                <IconifyIcon v-if="debugCollapsed" icon="lucide:chevron-down" />
+              </ElButton>
+            </div>
+          </template>
+          <div v-show="!debugCollapsed">
+            <ElTabs v-model="activeTab" size="small">
+              <!-- 上行指令调试 -->
+              <ElTabPane name="upstream" label="上行指令调试">
+                <ElTabs
+                  v-if="activeTab === 'upstream'"
+                  v-model="upstreamTab"
+                  size="small"
+                >
+                  <!-- 属性上报 -->
+                  <ElTabPane
+                    :name="IotDeviceMessageMethodEnum.PROPERTY_POST.method"
+                    label="属性上报"
+                  >
+                    <ContentWrap>
+                      <ElTable
+                        :data="propertyList"
+                        :max-height="300"
+                        size="small"
+                      >
+                        <ElTableColumn
+                          label="功能名称"
+                          prop="name"
+                          width="100"
+                          fixed="left"
+                        />
+                        <ElTableColumn
+                          label="标识符"
+                          prop="identifier"
+                          width="120"
+                          fixed="left"
+                        />
+                        <ElTableColumn label="数据类型" width="90">
+                          <template #default="{ row }">
+                            {{ row.property?.dataType ?? '-' }}
+                          </template>
+                        </ElTableColumn>
+                        <ElTableColumn label="数据定义" min-width="150">
+                          <template #default="{ row }">
+                            <DataDefinition :data="row" />
+                          </template>
+                        </ElTableColumn>
+                        <ElTableColumn label="值" width="180" fixed="right">
+                          <template #default="{ row }">
+                            <ElInput
+                              :model-value="getFormValue(row.identifier)"
+                              placeholder="输入值"
+                              size="small"
+                              @update:model-value="
+                                setFormValue(row.identifier, $event)
+                              "
+                            />
+                          </template>
+                        </ElTableColumn>
+                      </ElTable>
+                      <div class="mt-4 flex items-center justify-between">
+                        <span class="text-sm text-gray-600">
+                          设置属性值后，点击「发送属性上报」按钮
+                        </span>
+                        <ElButton type="primary" @click="handlePropertyPost">
+                          发送属性上报
+                        </ElButton>
+                      </div>
+                    </ContentWrap>
+                  </ElTabPane>
+
+                  <!-- 事件上报 -->
+                  <ElTabPane
+                    :name="IotDeviceMessageMethodEnum.EVENT_POST.method"
+                    label="事件上报"
+                  >
+                    <ContentWrap>
+                      <ElTable
+                        :data="eventList"
+                        :max-height="300"
+                        size="small"
+                      >
+                        <ElTableColumn
+                          label="功能名称"
+                          prop="name"
+                          width="100"
+                          fixed="left"
+                        />
+                        <ElTableColumn
+                          label="标识符"
+                          prop="identifier"
+                          width="120"
+                          fixed="left"
+                        />
+                        <ElTableColumn label="数据类型" width="90">
+                          <template #default="{ row }">
+                            {{ row.event?.dataType ?? '-' }}
+                          </template>
+                        </ElTableColumn>
+                        <ElTableColumn label="数据定义" min-width="150">
+                          <template #default="{ row }">
+                            <DataDefinition :data="row" />
+                          </template>
+                        </ElTableColumn>
+                        <ElTableColumn label="值" width="180">
+                          <template #default="{ row }">
+                            <ElInput
+                              type="textarea"
+                              :rows="3"
+                              :model-value="getFormValue(row.identifier)"
+                              placeholder="输入事件参数（JSON格式）"
+                              size="small"
+                              @update:model-value="
+                                setFormValue(row.identifier, $event)
+                              "
+                            />
+                          </template>
+                        </ElTableColumn>
+                        <ElTableColumn label="操作" width="100" fixed="right">
+                          <template #default="{ row }">
+                            <ElButton
+                              size="small"
+                              type="primary"
+                              @click="handleEventPost(row)"
+                            >
+                              上报事件
+                            </ElButton>
+                          </template>
+                        </ElTableColumn>
+                      </ElTable>
+                    </ContentWrap>
+                  </ElTabPane>
+
+                  <!-- 状态变更 -->
+                  <ElTabPane
+                    :name="IotDeviceMessageMethodEnum.STATE_UPDATE.method"
+                    label="状态变更"
+                  >
+                    <ContentWrap>
+                      <div class="flex gap-4">
+                        <ElButton
+                          type="primary"
+                          @click="handleDeviceState(DeviceStateEnum.ONLINE)"
+                        >
+                          设备上线
+                        </ElButton>
+                        <ElButton
+                          type="danger"
+                          @click="handleDeviceState(DeviceStateEnum.OFFLINE)"
+                        >
+                          设备下线
+                        </ElButton>
+                      </div>
+                    </ContentWrap>
+                  </ElTabPane>
+                </ElTabs>
+              </ElTabPane>
+
+              <!-- 下行指令调试 -->
+              <ElTabPane name="downstream" label="下行指令调试">
+                <ElTabs
+                  v-if="activeTab === 'downstream'"
+                  v-model="downstreamTab"
+                  size="small"
+                >
+                  <!-- 属性调试 -->
+                  <ElTabPane
+                    :name="IotDeviceMessageMethodEnum.PROPERTY_SET.method"
+                    label="属性设置"
+                  >
+                    <ContentWrap>
+                      <ElTable
+                        :data="propertyList"
+                        :max-height="300"
+                        size="small"
+                      >
+                        <ElTableColumn
+                          label="功能名称"
+                          prop="name"
+                          width="100"
+                          fixed="left"
+                        />
+                        <ElTableColumn
+                          label="标识符"
+                          prop="identifier"
+                          width="120"
+                          fixed="left"
+                        />
+                        <ElTableColumn label="数据类型" width="90">
+                          <template #default="{ row }">
+                            {{ row.property?.dataType ?? '-' }}
+                          </template>
+                        </ElTableColumn>
+                        <ElTableColumn label="数据定义" min-width="150">
+                          <template #default="{ row }">
+                            <DataDefinition :data="row" />
+                          </template>
+                        </ElTableColumn>
+                        <ElTableColumn label="值" width="180" fixed="right">
+                          <template #default="{ row }">
+                            <ElInput
+                              :model-value="getFormValue(row.identifier)"
+                              placeholder="输入值"
+                              size="small"
+                              @update:model-value="
+                                setFormValue(row.identifier, $event)
+                              "
+                            />
+                          </template>
+                        </ElTableColumn>
+                      </ElTable>
+                      <div class="mt-4 flex items-center justify-between">
+                        <span class="text-sm text-gray-600">
+                          设置属性值后，点击「发送属性设置」按钮
+                        </span>
+                        <ElButton type="primary" @click="handlePropertySet">
+                          发送属性设置
+                        </ElButton>
+                      </div>
+                    </ContentWrap>
+                  </ElTabPane>
+
+                  <!-- 服务调用 -->
+                  <ElTabPane
+                    :name="IotDeviceMessageMethodEnum.SERVICE_INVOKE.method"
+                    label="设备服务调用"
+                  >
+                    <ContentWrap>
+                      <ElTable
+                        :data="serviceList"
+                        :max-height="300"
+                        size="small"
+                      >
+                        <ElTableColumn
+                          label="服务名称"
+                          prop="name"
+                          width="100"
+                          fixed="left"
+                        />
+                        <ElTableColumn
+                          label="标识符"
+                          prop="identifier"
+                          width="120"
+                          fixed="left"
+                        />
+                        <ElTableColumn label="输入参数" min-width="150">
+                          <template #default="{ row }">
+                            <DataDefinition :data="row" />
+                          </template>
+                        </ElTableColumn>
+                        <ElTableColumn label="参数值" width="180">
+                          <template #default="{ row }">
+                            <ElInput
+                              type="textarea"
+                              :rows="3"
+                              :model-value="getFormValue(row.identifier)"
+                              placeholder="输入服务参数（JSON格式）"
+                              size="small"
+                              @update:model-value="
+                                setFormValue(row.identifier, $event)
+                              "
+                            />
+                          </template>
+                        </ElTableColumn>
+                        <ElTableColumn label="操作" width="100" fixed="right">
+                          <template #default="{ row }">
+                            <ElButton
+                              size="small"
+                              type="primary"
+                              @click="handleServiceInvoke(row)"
+                            >
+                              服务调用
+                            </ElButton>
+                          </template>
+                        </ElTableColumn>
+                      </ElTable>
+                    </ContentWrap>
+                  </ElTabPane>
+                </ElTabs>
+              </ElTabPane>
+            </ElTabs>
+          </div>
+        </ElCard>
+      </ElCol>
+
+      <!-- 右侧：设备消息区域 -->
+      <ElCol :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
+        <ElCard class="h-full">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span>设备消息</span>
+              <ElButton
+                size="small"
+                text
+                @click="messageCollapsed = !messageCollapsed"
+              >
+                <IconifyIcon
+                  v-if="!messageCollapsed"
+                  icon="lucide:chevron-up"
+                />
+                <IconifyIcon
+                  v-if="messageCollapsed"
+                  icon="lucide:chevron-down"
+                />
+              </ElButton>
+            </div>
+          </template>
+          <div v-show="!messageCollapsed">
+            <DeviceDetailsMessage
+              v-if="device.id"
+              ref="deviceMessageRef"
+              :device-id="device.id"
+            />
+          </div>
+        </ElCard>
+      </ElCol>
+    </ElRow>
+  </ContentWrap>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/sub-device.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/sub-device.vue
new file mode 100644
index 000000000..e5ab5c716
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/sub-device.vue
@@ -0,0 +1,355 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotDeviceApi } from '#/api/iot/device/device';
+
+import { ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { confirm, Page, useVbenModal } from '@vben/common-ui';
+import { DeviceTypeEnum, DICT_TYPE } from '@vben/constants';
+import { formatDateTime, isEmpty } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  bindDeviceGateway,
+  getSubDeviceList,
+  getUnboundSubDevicePage,
+  unbindDeviceGateway,
+} from '#/api/iot/device/device';
+import { getSimpleProductList } from '#/api/iot/product/product';
+
+interface Props {
+  deviceId: number;
+}
+
+const props = defineProps<Props>();
+const router = useRouter();
+
+/** 子设备列表表格列配置 */
+function useGridColumns(): VxeTableGridOptions<IotDeviceApi.Device>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'deviceName',
+      title: 'DeviceName',
+      minWidth: 150,
+    },
+    {
+      field: 'nickname',
+      title: '备注名称',
+      minWidth: 120,
+    },
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 120,
+    },
+    {
+      field: 'state',
+      title: '设备状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_DEVICE_STATE },
+      },
+    },
+    {
+      field: 'onlineTime',
+      title: '最后上线时间',
+      minWidth: 160,
+      formatter: ({ cellValue }) => formatDateTime(cellValue),
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          if (!props.deviceId) {
+            return [];
+          }
+          return await getSubDeviceList(props.deviceId);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<IotDeviceApi.Device>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 获取子设备列表 */
+function getList() {
+  gridApi.query();
+}
+
+/** 打开设备详情 */
+function openDeviceDetail(id: number) {
+  router.push({ name: 'IoTDeviceDetail', params: { id } });
+}
+
+/** 多选框选中数据 */
+const checkedIds = ref<number[]>([]);
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: IotDeviceApi.Device[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+/** 解绑单个设备 */
+async function handleUnbind(row: IotDeviceApi.Device) {
+  await confirm({ content: `确定要解绑子设备【${row.deviceName}】吗？` });
+  const loadingInstance = ElLoading.service({
+    text: `正在解绑【${row.deviceName}】...`,
+  });
+  try {
+    await unbindDeviceGateway(props.deviceId, [row.id!]);
+    ElMessage.success('解绑成功');
+    getList();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 批量解绑 */
+async function handleUnbindBatch() {
+  await confirm({
+    content: `确定要解绑选中的 ${checkedIds.value.length} 个子设备吗？`,
+  });
+  const loadingInstance = ElLoading.service({
+    text: '正在批量解绑...',
+  });
+  try {
+    await unbindDeviceGateway(props.deviceId, checkedIds.value);
+    checkedIds.value = [];
+    ElMessage.success('批量解绑成功');
+    getList();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+// ===================== 添加子设备弹窗 =====================
+
+const addSelectedRowKeys = ref<number[]>([]);
+
+/** 添加弹窗搜索表单 schema */
+function useAddGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'productId',
+      label: '产品',
+      component: 'ApiSelect',
+      componentProps: {
+        api: () => getSimpleProductList(DeviceTypeEnum.GATEWAY_SUB),
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择产品',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'deviceName',
+      label: 'DeviceName',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 DeviceName',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+function useAddGridColumns(): VxeTableGridOptions<IotDeviceApi.Device>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'deviceName',
+      title: 'DeviceName',
+      minWidth: 150,
+    },
+    {
+      field: 'nickname',
+      title: '备注名称',
+      minWidth: 120,
+    },
+    {
+      field: 'productName',
+      title: '产品名称',
+      minWidth: 120,
+    },
+    {
+      field: 'state',
+      title: '设备状态',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_DEVICE_STATE },
+      },
+    },
+  ];
+}
+
+const [AddGrid, addGridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useAddGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useAddGridColumns(),
+    height: 400,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUnboundSubDevicePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<IotDeviceApi.Device>,
+  gridEvents: {
+    checkboxAll: handleAddSelectionChange,
+    checkboxChange: handleAddSelectionChange,
+  },
+});
+
+/** 处理添加弹窗表格选择变化 */
+function handleAddSelectionChange() {
+  const records = addGridApi.grid?.getCheckboxRecords() || [];
+  addSelectedRowKeys.value = records.map(
+    (record: IotDeviceApi.Device) => record.id!,
+  );
+}
+
+const [AddModal, addModalApi] = useVbenModal({
+  async onConfirm() {
+    if (addSelectedRowKeys.value.length === 0) {
+      ElMessage.warning('请先选择要添加的子设备');
+      return;
+    }
+    addModalApi.lock();
+    try {
+      await bindDeviceGateway(props.deviceId, addSelectedRowKeys.value);
+      ElMessage.success('绑定成功');
+      await addModalApi.close();
+      addSelectedRowKeys.value = [];
+      getList();
+    } finally {
+      addModalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      addSelectedRowKeys.value = [];
+      await addGridApi.formApi?.resetForm();
+      await addGridApi.query();
+    }
+  },
+});
+
+/** 打开添加子设备弹窗 */
+function openAddModal() {
+  addModalApi.open();
+}
+
+/** 监听 deviceId 变化 */
+watch(
+  () => props.deviceId,
+  (newVal) => {
+    if (newVal) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 子设备列表 -->
+    <Grid table-title="子设备列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '添加子设备',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: openAddModal,
+            },
+            {
+              label: '批量解绑',
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              disabled: isEmpty(checkedIds),
+              onClick: handleUnbindBatch,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '查看',
+              type: 'primary',
+              link: true,
+              onClick: () => openDeviceDetail(row.id!),
+            },
+            {
+              label: '解绑',
+              type: 'danger',
+              link: true,
+              onClick: () => handleUnbind(row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 添加子设备弹窗 -->
+    <AddModal title="添加子设备" class="w-3/5">
+      <AddGrid />
+    </AddModal>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-event.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-event.vue
new file mode 100644
index 000000000..37a6a440e
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-event.vue
@@ -0,0 +1,260 @@
+<!-- 设备事件管理 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed, onMounted, reactive, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import {
+  getEventTypeLabel,
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  ElButton,
+  ElDatePicker,
+  ElOption,
+  ElSelect,
+  ElTag,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDeviceMessagePairPage } from '#/api/iot/device/device';
+
+const props = defineProps<{
+  deviceId: number;
+  thingModelList: ThingModelApi.ThingModel[];
+}>();
+
+/** 查询参数 */
+const queryParams = reactive({
+  identifier: '',
+  times: undefined as [string, string] | undefined,
+});
+
+/** 事件类型的物模型数据 */
+const eventThingModels = computed(() => {
+  return props.thingModelList.filter(
+    (item: ThingModelApi.ThingModel) =>
+      String(item.type) === String(IoTThingModelTypeEnum.EVENT),
+  );
+});
+
+/** Grid 列定义 */
+function useGridColumns(): VxeTableGridOptions<Record<string, any>>['columns'] {
+  return [
+    {
+      field: 'reportTime',
+      title: '上报时间',
+      width: 180,
+      slots: { default: 'reportTime' },
+    },
+    {
+      field: 'identifier',
+      title: '标识符',
+      width: 160,
+      slots: { default: 'identifier' },
+    },
+    {
+      field: 'eventName',
+      title: '事件名称',
+      width: 160,
+      slots: { default: 'eventName' },
+    },
+    {
+      field: 'eventType',
+      title: '事件类型',
+      width: 100,
+      slots: { default: 'eventType' },
+    },
+    {
+      field: 'params',
+      title: '输入参数',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+      slots: { default: 'params' },
+    },
+  ];
+}
+
+/** 创建 Grid 实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.deviceId) {
+            return { list: [], total: 0 };
+          }
+          return await getDeviceMessagePairPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            deviceId: props.deviceId,
+            method: IotDeviceMessageMethodEnum.EVENT_POST.method,
+            identifier: queryParams.identifier || undefined,
+            times: queryParams.times,
+          });
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: false,
+      search: false,
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  gridApi.query();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryParams.identifier = '';
+  queryParams.times = undefined;
+  handleQuery();
+}
+
+/** 获取事件名称 */
+function getEventName(identifier: string | undefined) {
+  if (!identifier) return '-';
+  const event = eventThingModels.value.find(
+    (item: ThingModelApi.ThingModel) => item.identifier === identifier,
+  );
+  return event?.name || identifier;
+}
+
+/** 获取事件类型 */
+function getEventType(identifier: string | undefined) {
+  if (!identifier) return '-';
+  const event = eventThingModels.value.find(
+    (item: ThingModelApi.ThingModel) => item.identifier === identifier,
+  );
+  if (!event?.event?.type) return '-';
+  return getEventTypeLabel(event.event.type) || '-';
+}
+
+/** 解析参数 */
+function parseParams(params: string) {
+  try {
+    const parsed = JSON.parse(params);
+    if (parsed.params) {
+      return parsed.params;
+    }
+    return parsed;
+  } catch {
+    return {};
+  }
+}
+
+/** 刷新列表 */
+function refresh(delay = 0) {
+  if (delay > 0) {
+    setTimeout(() => gridApi.query(), delay);
+  } else {
+    gridApi.query();
+  }
+}
+
+/** 监听设备标识变化 */
+watch(
+  () => props.deviceId,
+  (newValue) => {
+    if (newValue) {
+      handleQuery();
+    }
+  },
+);
+
+/** 初始化 */
+onMounted(() => {
+  if (props.deviceId) {
+    handleQuery();
+  }
+});
+
+/** 暴露方法给父组件 */
+defineExpose({
+  refresh,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 搜索区域 -->
+    <div class="mb-4 flex flex-wrap items-center gap-3">
+      <div class="flex items-center gap-2">
+        <span>标识符：</span>
+        <ElSelect
+          v-model="queryParams.identifier"
+          clearable
+          placeholder="请选择事件标识符"
+          style="width: 240px"
+        >
+          <ElOption
+            v-for="event in eventThingModels"
+            :key="event.identifier"
+            :value="event.identifier!"
+            :label="`${event.name}(${event.identifier})`"
+          />
+        </ElSelect>
+      </div>
+      <div class="flex items-center gap-2">
+        <span>时间范围：</span>
+        <ElDatePicker
+          v-model="queryParams.times"
+          type="datetimerange"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          style="width: 360px"
+        />
+      </div>
+      <div class="flex gap-1">
+        <ElButton type="primary" @click="handleQuery">
+          <IconifyIcon icon="ep:search" class="mr-1" />
+          搜索
+        </ElButton>
+        <ElButton @click="resetQuery">
+          <IconifyIcon icon="ep:refresh" class="mr-1" />
+          重置
+        </ElButton>
+      </div>
+    </div>
+
+    <!-- 事件列表 -->
+    <Grid>
+      <template #reportTime="{ row }">
+        {{
+          row.request?.reportTime ? formatDateTime(row.request.reportTime) : '-'
+        }}
+      </template>
+      <template #identifier="{ row }">
+        <ElTag type="primary" size="small">
+          {{ row.request?.identifier }}
+        </ElTag>
+      </template>
+      <template #eventName="{ row }">
+        {{ getEventName(row.request?.identifier) }}
+      </template>
+      <template #eventType="{ row }">
+        {{ getEventType(row.request?.identifier) }}
+      </template>
+      <template #params="{ row }">
+        {{ parseParams(row.request?.params) }}
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-property-history.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
new file mode 100644
index 000000000..1a5fedde3
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-property-history.vue
@@ -0,0 +1,453 @@
+<!-- 设备物模型 -> 运行状态 -> 查看数据（设备的属性值历史）-->
+<script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import type { IotDeviceApi } from '#/api/iot/device/device';
+
+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 } from '@vben/utils';
+
+import dayjs from 'dayjs';
+import {
+  ElButton,
+  ElButtonGroup,
+  ElDialog,
+  ElEmpty,
+  ElMessage,
+  ElTable,
+  ElTableColumn,
+  ElTag,
+} from 'element-plus';
+
+import { getHistoryDevicePropertyList } from '#/api/iot/device/device';
+import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
+
+defineProps<{ deviceId: number }>();
+
+const dialogVisible = ref(false); // 弹窗的是否展示
+const loading = ref(false);
+const viewMode = ref<'chart' | 'list'>('chart'); // 视图模式状态
+const list = ref<IotDeviceApi.DevicePropertyDetail[]>([]); // 列表的数据
+const total = ref(0); // 总数据量
+const thingModelDataType = ref<string>(''); // 物模型数据类型
+const propertyIdentifier = ref<string>(''); // 属性标识符
+
+const dateRange = ref<[string, string]>([
+  dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
+  dayjs().format('YYYY-MM-DD'),
+]); // 时间范围（仅日期，不包含时分秒）
+
+const queryParams = reactive({
+  deviceId: -1,
+  identifier: '',
+  times: formatDateRangeWithTime(dateRange.value),
+});
+
+// Echarts 相关
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+
+/** 不支持图表展示的数据类型列表 */
+const CHART_DISABLED_DATA_TYPES = [
+  IoTDataSpecsDataTypeEnum.ARRAY, // 数组
+  IoTDataSpecsDataTypeEnum.STRUCT, // 结构体
+  IoTDataSpecsDataTypeEnum.TEXT, // 文本型
+  IoTDataSpecsDataTypeEnum.BOOL, // 布尔型
+  IoTDataSpecsDataTypeEnum.ENUM, // 枚举型
+  IoTDataSpecsDataTypeEnum.DATE, // 时间型
+] as const;
+
+/** 判断是否支持图表展示（仅数值类型支持：int、float、double） */
+const canShowChart = computed(() => {
+  if (!thingModelDataType.value) return false;
+  return !CHART_DISABLED_DATA_TYPES.includes(
+    thingModelDataType.value as (typeof CHART_DISABLED_DATA_TYPES)[number],
+  );
+});
+
+/** 判断是否为复杂数据类型（用于格式化显示） */
+const isComplexDataType = computed(() => {
+  if (!thingModelDataType.value) return false;
+  return (
+    thingModelDataType.value === IoTDataSpecsDataTypeEnum.ARRAY ||
+    thingModelDataType.value === IoTDataSpecsDataTypeEnum.STRUCT
+  );
+});
+
+/** 最大值统计 */
+const maxValue = computed(() => {
+  if (!canShowChart.value || list.value.length === 0) return '-';
+  const values = list.value
+    .map((item) => Number(item.value))
+    .filter((value) => !Number.isNaN(value));
+  return values.length > 0 ? Math.max(...values).toFixed(2) : '-';
+});
+
+/** 最小值统计 */
+const minValue = computed(() => {
+  if (!canShowChart.value || list.value.length === 0) return '-';
+  const values = list.value
+    .map((item) => Number(item.value))
+    .filter((value) => !Number.isNaN(value));
+  return values.length > 0 ? Math.min(...values).toFixed(2) : '-';
+});
+
+/** 平均值统计 */
+const avgValue = computed(() => {
+  if (!canShowChart.value || list.value.length === 0) return '-';
+  const values = list.value
+    .map((item) => Number(item.value))
+    .filter((value) => !Number.isNaN(value));
+  if (values.length === 0) return '-';
+  const sum = values.reduce((total, value) => total + value, 0);
+  return (sum / values.length).toFixed(2);
+});
+
+/** 将日期范围转换为带时分秒的格式 */
+function formatDateRangeWithTime(dates: [string, string]): [string, string] {
+  return [`${dates[0]} 00:00:00`, `${dates[1]} 23:59:59`];
+}
+
+/** 获得设备历史数据 */
+async function getList() {
+  loading.value = true;
+  try {
+    // 后端直接返回数组
+    const data = await getHistoryDevicePropertyList(queryParams);
+    list.value = (data || []) as IotDeviceApi.DevicePropertyDetail[];
+    total.value = list.value.length;
+
+    // 如果是图表模式且支持图表展示，等待渲染图表
+    if (
+      viewMode.value === 'chart' &&
+      canShowChart.value &&
+      list.value.length > 0
+    ) {
+      await renderChartWhenReady();
+    }
+  } catch {
+    ElMessage.error('获取数据失败');
+    list.value = [];
+    total.value = 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 确保图表容器已经可见后再渲染 */
+async function renderChartWhenReady() {
+  if (!list.value || list.value.length === 0) {
+    return;
+  }
+  // 等待 Modal、Card loading 状态、v-show 等 DOM 更新完成
+  await nextTick();
+  await nextTick();
+  renderChart();
+}
+
+/** 渲染图表 */
+function renderChart() {
+  if (!list.value || list.value.length === 0) {
+    return;
+  }
+
+  const times = list.value.map((item) =>
+    formatDate(new Date(item.updateTime), 'YYYY-MM-DD HH:mm:ss'),
+  );
+  const values = list.value.map((item) => Number(item.value));
+
+  renderEcharts({
+    title: {
+      text: '属性值趋势',
+      left: 'center',
+      textStyle: {
+        fontSize: 16,
+        fontWeight: 'normal',
+      },
+    },
+    grid: {
+      left: 60,
+      right: 60,
+      bottom: 100,
+      top: 80,
+      containLabel: true,
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+      },
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      name: '时间',
+      nameTextStyle: {
+        padding: [10, 0, 0, 0],
+      },
+      data: times,
+    },
+    yAxis: {
+      type: 'value',
+      name: '属性值',
+      nameTextStyle: {
+        padding: [0, 0, 10, 0],
+      },
+    },
+    series: [
+      {
+        name: '属性值',
+        type: 'line',
+        smooth: true,
+        symbol: 'circle',
+        symbolSize: 6,
+        lineStyle: {
+          width: 2,
+          color: '#1890FF',
+        },
+        itemStyle: {
+          color: '#1890FF',
+        },
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: 'rgba(24, 144, 255, 0.3)',
+              },
+              {
+                offset: 1,
+                color: 'rgba(24, 144, 255, 0.05)',
+              },
+            ],
+          },
+        },
+        data: values,
+      },
+    ],
+    dataZoom: [
+      {
+        type: 'inside',
+        start: 0,
+        end: 100,
+      },
+      {
+        type: 'slider',
+        height: 30,
+        bottom: 20,
+      },
+    ],
+  });
+}
+
+/** 打开弹窗 */
+async function open(deviceId: number, identifier: string, dataType: string) {
+  dialogVisible.value = true;
+  queryParams.deviceId = deviceId;
+  queryParams.identifier = identifier;
+  propertyIdentifier.value = identifier;
+  thingModelDataType.value = dataType;
+
+  // 重置时间范围为最近7天
+  dateRange.value = [
+    dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
+    dayjs().format('YYYY-MM-DD'),
+  ];
+
+  // 更新查询参数的时间
+  queryParams.times = formatDateRangeWithTime(dateRange.value);
+
+  // 如果不支持图表展示，默认使用列表模式
+  viewMode.value = canShowChart.value ? 'chart' : 'list';
+
+  // 等待弹窗完全渲染后再获取数据
+  await nextTick();
+  await nextTick(); // 双重 nextTick 确保 Modal 完全渲染
+  await getList();
+}
+
+/** 处理时间范围变化 */
+function handleDateRangeChange(times?: [Dayjs, Dayjs]) {
+  if (!times || times.length !== 2) {
+    return;
+  }
+  dateRange.value = [
+    dayjs(times[0]).format('YYYY-MM-DD'),
+    dayjs(times[1]).format('YYYY-MM-DD'),
+  ];
+  // 将选择的日期转换为带时分秒的格式（开始日期 00:00:00，结束日期 23:59:59）
+  queryParams.times = formatDateRangeWithTime(dateRange.value);
+  getList();
+}
+
+/** 刷新数据 */
+function handleRefresh() {
+  getList();
+}
+
+/** 关闭弹窗 */
+function handleClose() {
+  dialogVisible.value = false;
+  list.value = [];
+  total.value = 0;
+}
+
+/** 格式化复杂数据类型 */
+function formatComplexValue(value: any) {
+  if (typeof value === 'object') {
+    return JSON.stringify(value);
+  }
+  return String(value);
+}
+
+/** 监听视图模式变化，重新渲染图表 */
+watch(viewMode, async (newMode) => {
+  if (newMode === 'chart' && canShowChart.value && list.value.length > 0) {
+    await renderChartWhenReady();
+  }
+});
+
+defineExpose({ open }); // 提供 open 方法，用于打开弹窗
+</script>
+<template>
+  <ElDialog
+    v-model="dialogVisible"
+    title="查看数据"
+    width="1200px"
+    @close="handleClose"
+  >
+    <div class="property-history-container">
+      <!-- 工具栏 -->
+      <div class="toolbar-wrapper mb-4">
+        <div class="flex w-full flex-wrap items-center gap-3">
+          <!-- 时间选择 -->
+          <div class="flex items-center gap-3">
+            <span class="whitespace-nowrap text-sm text-gray-500">
+              时间范围
+            </span>
+            <ShortcutDateRangePicker @change="handleDateRangeChange" />
+          </div>
+
+          <!-- 刷新按钮 -->
+          <ElButton :loading="loading" @click="handleRefresh">
+            <IconifyIcon icon="ant-design:reload-outlined" class="mr-1" />
+            刷新
+          </ElButton>
+
+          <!-- 视图切换 -->
+          <ElButtonGroup class="ml-auto">
+            <ElButton
+              :disabled="!canShowChart"
+              :type="viewMode === 'chart' ? 'primary' : 'default'"
+              @click="viewMode = 'chart'"
+            >
+              <IconifyIcon icon="ant-design:line-chart-outlined" class="mr-1" />
+              图表
+            </ElButton>
+            <ElButton
+              :type="viewMode === 'list' ? 'primary' : 'default'"
+              @click="viewMode = 'list'"
+            >
+              <IconifyIcon icon="ant-design:table-outlined" class="mr-1" />
+              列表
+            </ElButton>
+          </ElButtonGroup>
+        </div>
+
+        <!-- 数据统计信息 -->
+        <div v-if="list.length > 0" class="mt-3 text-sm text-gray-600">
+          <div class="flex flex-wrap gap-4">
+            <span>共 {{ total }} 条数据</span>
+            <span v-if="viewMode === 'chart' && canShowChart">
+              最大值: {{ maxValue }} | 最小值: {{ minValue }} | 平均值:
+              {{ avgValue }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- 数据展示区域 -->
+      <div v-loading="loading">
+        <!-- 图表模式 - 使用 v-show 确保图表组件始终挂载 -->
+        <div v-show="viewMode === 'chart'" class="chart-container">
+          <ElEmpty
+            v-if="list.length === 0"
+            class="py-20"
+            :description="$t('common.noData')"
+          />
+          <div v-show="list.length > 0">
+            <EchartsUI ref="chartRef" height="500px" />
+          </div>
+        </div>
+
+        <!-- 表格模式 -->
+        <div v-show="viewMode === 'list'" class="table-container">
+          <ElTable
+            :data="list"
+            :max-height="500"
+            row-key="updateTime"
+            size="small"
+          >
+            <ElTableColumn label="序号" width="80" align="center" type="index" />
+            <ElTableColumn
+              label="时间"
+              prop="updateTime"
+              width="200"
+              align="center"
+            >
+              <template #default="{ row }">
+                {{ formatDate(new Date(row.updateTime)) }}
+              </template>
+            </ElTableColumn>
+            <ElTableColumn label="属性值" prop="value" align="center">
+              <template #default="{ row }">
+                <ElTag v-if="isComplexDataType" type="primary">
+                  {{ formatComplexValue(row.value) }}
+                </ElTag>
+                <span v-else class="font-medium">{{ row.value }}</span>
+              </template>
+            </ElTableColumn>
+          </ElTable>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <ElButton @click="handleClose">关闭</ElButton>
+    </template>
+  </ElDialog>
+</template>
+
+<style lang="scss" scoped>
+/** 同别的地方，将 style 改成 unocss 的诉求。如果不好改，就注释说明； */
+.property-history-container {
+  max-height: 70vh;
+  overflow: auto;
+
+  .toolbar-wrapper {
+    padding: 16px;
+    background-color: hsl(var(--card) / 90%);
+    border: 1px solid hsl(var(--border) / 60%);
+    border-radius: 8px;
+  }
+
+  .chart-container,
+  .table-container {
+    padding: 16px;
+    background-color: hsl(var(--card) / 100%);
+    border: 1px solid hsl(var(--border) / 60%);
+    border-radius: 8px;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-property.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-property.vue
new file mode 100644
index 000000000..60f54682a
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-property.vue
@@ -0,0 +1,421 @@
+<!-- 设备属性管理 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotDeviceApi } from '#/api/iot/device/device';
+
+import {
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  ElButton,
+  ElButtonGroup,
+  ElCard,
+  ElCol,
+  ElDivider,
+  ElInput,
+  ElRow,
+  ElSwitch,
+  ElTag,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getLatestDeviceProperties } from '#/api/iot/device/device';
+
+import DeviceDetailsThingModelPropertyHistory from './thing-model-property-history.vue';
+
+const props = defineProps<{ deviceId: number }>();
+
+const loading = ref(true); // 列表的加载中
+const list = ref<IotDeviceApi.DevicePropertyDetail[]>([]); // 显示的列表数据
+const filterList = ref<IotDeviceApi.DevicePropertyDetail[]>([]); // 完整的数据列表
+const queryParams = reactive({
+  keyword: '' as string,
+}); // 查询参数
+const autoRefresh = ref(false); // 自动刷新开关
+let autoRefreshTimer: any = null; // 定时器
+const viewMode = ref<'card' | 'list'>('card'); // 视图模式状态
+
+/** Grid 列定义 */
+function useGridColumns(): VxeTableGridOptions<IotDeviceApi.DevicePropertyDetail>['columns'] {
+  return [
+    {
+      field: 'identifier',
+      title: '属性标识符',
+    },
+    {
+      field: 'name',
+      title: '属性名称',
+    },
+    {
+      field: 'dataType',
+      title: '数据类型',
+    },
+    {
+      field: 'value',
+      title: '属性值',
+      slots: { default: 'value' },
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      width: 180,
+      slots: { default: 'updateTime' },
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 创建 Grid 实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    rowConfig: {
+      keyField: 'identifier',
+      isHover: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          if (!props.deviceId) {
+            return { list: [], total: 0 };
+          }
+          const data = await getLatestDeviceProperties({
+            deviceId: props.deviceId,
+            identifier: undefined,
+            name: undefined,
+          });
+          // 筛选数据
+          let filteredData = data;
+          if (queryParams.keyword.trim()) {
+            const keyword = queryParams.keyword.toLowerCase();
+            filteredData = data.filter(
+              (item: IotDeviceApi.DevicePropertyDetail) =>
+                item.identifier?.toLowerCase().includes(keyword) ||
+                item.name?.toLowerCase().includes(keyword),
+            );
+          }
+          // 更新本地列表用于卡片视图
+          filterList.value = data;
+          list.value = filteredData;
+          return {
+            list: filteredData,
+            total: filteredData.length,
+          };
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: false,
+      search: false,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<IotDeviceApi.DevicePropertyDetail>,
+});
+
+// 包装 gridApi.query() 方法，统一列表视图和卡片视图的查询接口
+gridApi.query = async () => {
+  if (viewMode.value === 'list') {
+    // 列表视图：手动获取数据并加载到 Grid
+    if (!props.deviceId) {
+      return;
+    }
+    const data = await getLatestDeviceProperties({
+      deviceId: props.deviceId,
+      identifier: undefined,
+      name: undefined,
+    });
+    const dataArray = Array.isArray(data) ? data : [];
+    let filteredData = dataArray;
+    if (queryParams.keyword.trim()) {
+      const keyword = queryParams.keyword.toLowerCase();
+      filteredData = dataArray.filter(
+        (item: IotDeviceApi.DevicePropertyDetail) =>
+          item.identifier?.toLowerCase().includes(keyword) ||
+          item.name?.toLowerCase().includes(keyword),
+      );
+    }
+    filterList.value = dataArray;
+    list.value = filteredData;
+    // 直接加载数据到 Grid
+    if (gridApi.grid) {
+      gridApi.grid.loadData(filteredData);
+    }
+  } else {
+    // 卡片视图：调用 getList 方法
+    await getList();
+  }
+};
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    if (viewMode.value === 'list') {
+      await gridApi.query();
+    } else {
+      // 卡片视图：手动获取数据
+      const params = {
+        deviceId: props.deviceId,
+        identifier: undefined as string | undefined,
+        name: undefined as string | undefined,
+      };
+      filterList.value = await getLatestDeviceProperties(params);
+      handleFilter();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 前端筛选数据 */
+function handleFilter() {
+  if (queryParams.keyword.trim()) {
+    const keyword = queryParams.keyword.toLowerCase();
+    list.value = filterList.value.filter(
+      (item: IotDeviceApi.DevicePropertyDetail) =>
+        item.identifier?.toLowerCase().includes(keyword) ||
+        item.name?.toLowerCase().includes(keyword),
+    );
+  } else {
+    list.value = filterList.value;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  if (viewMode.value === 'list') {
+    gridApi.query();
+  } else {
+    handleFilter();
+  }
+}
+
+/** 视图切换 */
+async function handleViewModeChange(mode: 'card' | 'list') {
+  if (viewMode.value === mode) {
+    return;
+  }
+  viewMode.value = mode;
+  await nextTick();
+  gridApi.query();
+}
+
+/** 历史操作 */
+const historyRef = ref();
+function openHistory(deviceId: number, identifier: string, dataType: string) {
+  historyRef.value.open(deviceId, identifier, dataType);
+}
+
+/** 格式化属性值和单位 */
+function formatValueWithUnit(item: IotDeviceApi.DevicePropertyDetail) {
+  if (item.value === null || item.value === undefined || item.value === '') {
+    return '-';
+  }
+  const unitName = item.dataSpecs?.unitName;
+  return unitName ? `${item.value} ${unitName}` : item.value;
+}
+
+/** 监听自动刷新 */
+watch(autoRefresh, (newValue) => {
+  if (newValue) {
+    autoRefreshTimer = setInterval(() => {
+      gridApi.query();
+    }, 5000);
+  } else {
+    clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+});
+
+/** 监听设备标识变化 */
+watch(
+  () => props.deviceId,
+  (newValue) => {
+    if (newValue) {
+      gridApi.query();
+    }
+  },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  if (props.deviceId) {
+    await nextTick();
+    gridApi.query();
+  }
+});
+
+/** 组件卸载时清除定时器 */
+onBeforeUnmount(() => {
+  if (autoRefreshTimer) {
+    clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 搜索工作栏 -->
+    <div class="flex items-center justify-between" style="margin-bottom: 16px">
+      <div class="flex items-center" style="gap: 16px">
+        <ElInput
+          v-model="queryParams.keyword"
+          clearable
+          placeholder="请输入属性名称、标识符"
+          style="width: 240px"
+          @keyup.enter="handleQuery"
+        />
+        <ElSwitch
+          v-model="autoRefresh"
+          active-text="定时刷新"
+          class="ml-[20px]"
+          inactive-text="定时刷新"
+        />
+      </div>
+      <ElButtonGroup>
+        <ElButton
+          :type="viewMode === 'card' ? 'primary' : 'default'"
+          @click="handleViewModeChange('card')"
+        >
+          <IconifyIcon icon="ep:grid" />
+        </ElButton>
+        <ElButton
+          :type="viewMode === 'list' ? 'primary' : 'default'"
+          @click="handleViewModeChange('list')"
+        >
+          <IconifyIcon icon="ep:list" />
+        </ElButton>
+      </ElButtonGroup>
+    </div>
+
+    <!-- 分隔线 -->
+    <ElDivider style="margin: 16px 0" />
+
+    <!-- 卡片视图 -->
+    <template v-if="viewMode === 'card'">
+      <ElRow v-loading="loading" :gutter="16">
+        <ElCol
+          v-for="item in list"
+          :key="item.identifier"
+          :lg="6"
+          :md="12"
+          :sm="12"
+          :xs="24"
+          class="mb-4"
+        >
+          <ElCard
+            class="relative h-full overflow-hidden transition-colors"
+            body-class="!p-0"
+          >
+            <!-- 添加渐变背景层 -->
+            <div
+              class="pointer-events-none absolute left-0 right-0 top-0 h-12 bg-gradient-to-b from-muted to-transparent"
+            ></div>
+            <div class="relative p-4">
+              <!-- 标题区域 -->
+              <div class="mb-3 flex items-center">
+                <div class="mr-2.5 flex items-center">
+                  <IconifyIcon class="text-lg text-[var(--el-color-primary)]" icon="ep:cpu" />
+                </div>
+                <div class="flex-1 text-base font-bold">{{ item.name }}</div>
+                <!-- 标识符 -->
+                <div class="mr-2 inline-flex items-center">
+                  <ElTag type="primary" size="small">
+                    {{ item.identifier }}
+                  </ElTag>
+                </div>
+                <!-- 数据类型标签 -->
+                <div class="mr-2 inline-flex items-center">
+                  <ElTag size="small">
+                    {{ item.dataType }}
+                  </ElTag>
+                </div>
+                <!-- 数据图标 - 可点击 -->
+                <div
+                  class="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-blue-50"
+                  @click="
+                    openHistory(props.deviceId, item.identifier, item.dataType)
+                  "
+                >
+                  <IconifyIcon
+                    class="text-lg text-[var(--el-color-primary)]"
+                    icon="ep:data-line"
+                  />
+                </div>
+              </div>
+
+              <!-- 信息区域 -->
+              <div class="text-sm">
+                <div class="mb-2.5 last:mb-0">
+                  <span class="mr-2.5 text-muted-foreground">属性值</span>
+                  <span class="font-bold text-foreground">
+                    {{ formatValueWithUnit(item) }}
+                  </span>
+                </div>
+                <div class="mb-2.5 last:mb-0">
+                  <span class="mr-2.5 text-muted-foreground">更新时间</span>
+                  <span class="text-sm text-foreground">
+                    {{
+                      item.updateTime ? formatDateTime(item.updateTime) : '-'
+                    }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </ElCard>
+        </ElCol>
+      </ElRow>
+    </template>
+
+    <!-- 列表视图 -->
+    <Grid v-show="viewMode === 'list'">
+      <template #value="{ row }">
+        {{ formatValueWithUnit(row) }}
+      </template>
+      <template #updateTime="{ row }">
+        {{ row.updateTime ? formatDateTime(row.updateTime) : '-' }}
+      </template>
+      <template #actions="{ row }">
+        <ElButton
+          type="primary"
+          link
+          @click="openHistory(props.deviceId, row.identifier, row.dataType)"
+        >
+          查看数据
+        </ElButton>
+      </template>
+    </Grid>
+
+    <!-- 表单弹窗：添加/修改 -->
+    <DeviceDetailsThingModelPropertyHistory
+      ref="historyRef"
+      :device-id="props.deviceId"
+    />
+  </Page>
+</template>
+<style scoped>
+/* 移除 row 的额外边距 */
+:deep(.el-row) {
+  margin-right: -8px !important;
+  margin-left: -8px !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-service.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-service.vue
new file mode 100644
index 000000000..160c3ab39
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model-service.vue
@@ -0,0 +1,285 @@
+<!-- 设备服务调用 -->
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed, onMounted, reactive, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import {
+  getThingModelServiceCallTypeLabel,
+  IotDeviceMessageMethodEnum,
+  IoTThingModelTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  ElButton,
+  ElDatePicker,
+  ElOption,
+  ElSelect,
+  ElTag,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getDeviceMessagePairPage } from '#/api/iot/device/device';
+
+const props = defineProps<{
+  deviceId: number;
+  thingModelList: ThingModelApi.ThingModel[];
+}>();
+
+/** 查询参数 */
+const queryParams = reactive({
+  identifier: '',
+  times: undefined as [string, string] | undefined,
+});
+
+/** 服务类型的物模型数据 */
+const serviceThingModels = computed(() => {
+  return props.thingModelList.filter(
+    (item: ThingModelApi.ThingModel) =>
+      String(item.type) === String(IoTThingModelTypeEnum.SERVICE),
+  );
+});
+
+/** Grid 列定义 */
+function useGridColumns(): VxeTableGridOptions<Record<string, any>>['columns'] {
+  return [
+    {
+      field: 'requestTime',
+      title: '调用时间',
+      width: 180,
+      slots: { default: 'requestTime' },
+    },
+    {
+      field: 'responseTime',
+      title: '响应时间',
+      width: 180,
+      slots: { default: 'responseTime' },
+    },
+    {
+      field: 'identifier',
+      title: '标识符',
+      width: 160,
+      slots: { default: 'identifier' },
+    },
+    {
+      field: 'serviceName',
+      title: '服务名称',
+      width: 160,
+      slots: { default: 'serviceName' },
+    },
+    {
+      field: 'callType',
+      title: '调用方式',
+      width: 100,
+      slots: { default: 'callType' },
+    },
+    {
+      field: 'inputParams',
+      title: '输入参数',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+      slots: { default: 'inputParams' },
+    },
+    {
+      field: 'outputParams',
+      title: '输出参数',
+      minWidth: 200,
+      showOverflow: 'tooltip',
+      slots: { default: 'outputParams' },
+    },
+  ];
+}
+
+/** 创建 Grid 实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!props.deviceId) {
+            return { list: [], total: 0 };
+          }
+          return await getDeviceMessagePairPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            deviceId: props.deviceId,
+            method: IotDeviceMessageMethodEnum.SERVICE_INVOKE.method,
+            identifier: queryParams.identifier || undefined,
+            times: queryParams.times,
+          });
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: false,
+      search: false,
+    },
+    pagerConfig: {
+      enabled: true,
+    },
+  } as VxeTableGridOptions,
+});
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  gridApi.query();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryParams.identifier = '';
+  queryParams.times = undefined;
+  handleQuery();
+}
+
+/** 获取服务名称 */
+function getServiceName(identifier: string | undefined) {
+  if (!identifier) return '-';
+  const service = serviceThingModels.value.find(
+    (item: ThingModelApi.ThingModel) => item.identifier === identifier,
+  );
+  return service?.name || identifier;
+}
+
+/** 获取调用方式 */
+function getCallType(identifier: string | undefined) {
+  if (!identifier) return '-';
+  const service = serviceThingModels.value.find(
+    (item: ThingModelApi.ThingModel) => item.identifier === identifier,
+  );
+  if (!service?.service?.callType) return '-';
+  return getThingModelServiceCallTypeLabel(service.service.callType) || '-';
+}
+
+/** 解析参数 */
+function parseParams(params: string) {
+  if (!params) return '-';
+  try {
+    const parsed = JSON.parse(params);
+    if (parsed.params) {
+      return JSON.stringify(parsed.params, null, 2);
+    }
+    return JSON.stringify(parsed, null, 2);
+  } catch {
+    return params;
+  }
+}
+
+/** 刷新列表 */
+function refresh(delay = 0) {
+  if (delay > 0) {
+    setTimeout(() => gridApi.query(), delay);
+  } else {
+    gridApi.query();
+  }
+}
+
+/** 监听设备标识变化 */
+watch(
+  () => props.deviceId,
+  (newValue) => {
+    if (newValue) {
+      handleQuery();
+    }
+  },
+);
+
+/** 初始化 */
+onMounted(() => {
+  if (props.deviceId) {
+    handleQuery();
+  }
+});
+
+/** 暴露方法给父组件 */
+defineExpose({
+  refresh,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <!-- 搜索区域 -->
+    <div class="mb-4 flex flex-wrap items-center gap-3">
+      <div class="flex items-center gap-2">
+        <span>标识符：</span>
+        <ElSelect
+          v-model="queryParams.identifier"
+          clearable
+          placeholder="请选择服务标识符"
+          style="width: 240px"
+        >
+          <ElOption
+            v-for="service in serviceThingModels"
+            :key="service.identifier"
+            :value="service.identifier!"
+            :label="`${service.name}(${service.identifier})`"
+          />
+        </ElSelect>
+      </div>
+      <div class="flex items-center gap-2">
+        <span>时间范围：</span>
+        <ElDatePicker
+          v-model="queryParams.times"
+          type="datetimerange"
+          format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          range-separator="至"
+          start-placeholder="开始时间"
+          end-placeholder="结束时间"
+          style="width: 360px"
+        />
+      </div>
+      <div class="flex gap-1">
+        <ElButton type="primary" @click="handleQuery">
+          <IconifyIcon icon="ep:search" class="mr-1" />
+          搜索
+        </ElButton>
+        <ElButton @click="resetQuery">
+          <IconifyIcon icon="ep:refresh" class="mr-1" />
+          重置
+        </ElButton>
+      </div>
+    </div>
+
+    <!-- 服务调用列表 -->
+    <Grid>
+      <template #requestTime="{ row }">
+        {{
+          row.request?.reportTime ? formatDateTime(row.request.reportTime) : '-'
+        }}
+      </template>
+      <template #responseTime="{ row }">
+        {{ row.reply?.reportTime ? formatDateTime(row.reply.reportTime) : '-' }}
+      </template>
+      <template #identifier="{ row }">
+        <ElTag type="primary" size="small">
+          {{ row.request?.identifier }}
+        </ElTag>
+      </template>
+      <template #serviceName="{ row }">
+        {{ getServiceName(row.request?.identifier) }}
+      </template>
+      <template #callType="{ row }">
+        {{ getCallType(row.request?.identifier) }}
+      </template>
+      <template #inputParams="{ row }">
+        {{ parseParams(row.request?.params) }}
+      </template>
+      <template #outputParams="{ row }">
+        <span v-if="row.reply">
+          {{
+            `{"code":${row.reply.code},"msg":"${row.reply.msg}","data":${row.reply.data}\}`
+          }}
+        </span>
+        <span v-else>-</span>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model.vue b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model.vue
new file mode 100644
index 000000000..cf520a98e
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/detail/modules/thing-model.vue
@@ -0,0 +1,47 @@
+<!-- 设备物模型：设备属性、事件管理、服务调用 -->
+<script lang="ts" setup>
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { ref } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+
+import { ElTabPane, ElTabs } from 'element-plus';
+
+import DeviceDetailsThingModelEvent from './thing-model-event.vue';
+import DeviceDetailsThingModelProperty from './thing-model-property.vue';
+import DeviceDetailsThingModelService from './thing-model-service.vue';
+
+const props = defineProps<{
+  deviceId: number;
+  thingModelList: ThingModelApi.ThingModel[];
+}>();
+
+const activeTab = ref('property'); // 默认选中设备属性
+</script>
+<template>
+  <ContentWrap>
+    <ElTabs v-model="activeTab" class="!h-auto !p-0">
+      <ElTabPane name="property" label="设备属性（运行状态）">
+        <DeviceDetailsThingModelProperty
+          v-if="activeTab === 'property'"
+          :device-id="deviceId"
+        />
+      </ElTabPane>
+      <ElTabPane name="event" label="设备事件上报">
+        <DeviceDetailsThingModelEvent
+          v-if="activeTab === 'event'"
+          :device-id="props.deviceId"
+          :thing-model-list="props.thingModelList"
+        />
+      </ElTabPane>
+      <ElTabPane name="service" label="设备服务调用">
+        <DeviceDetailsThingModelService
+          v-if="activeTab === 'service'"
+          :device-id="deviceId"
+          :thing-model-list="props.thingModelList"
+        />
+      </ElTabPane>
+    </ElTabs>
+  </ContentWrap>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/index.vue b/apps/web-ele/src/views/iot/device/device/index.vue
new file mode 100644
index 000000000..4a9dbf41b
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/index.vue
@@ -0,0 +1,520 @@
+<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';
+
+import { nextTick, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+import { downloadFileFromBlobPart, isEmpty } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElInput,
+  ElLoading,
+  ElMessage,
+  ElOption,
+  ElSelect,
+  ElTag,
+} from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteDevice,
+  deleteDeviceList,
+  exportDeviceExcel,
+  getDevicePage,
+} from '#/api/iot/device/device';
+import { getSimpleDeviceGroupList } from '#/api/iot/device/group';
+import { getSimpleProductList } from '#/api/iot/product/product';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import DeviceCardView from './modules/card-view.vue';
+import DeviceForm from './modules/form.vue';
+import DeviceGroupForm from './modules/group-form.vue';
+import DeviceImportForm from './modules/import-form.vue';
+
+const route = useRoute();
+const router = useRouter();
+const products = ref<IotProductApi.Product[]>([]);
+const deviceGroups = ref<IotDeviceGroupApi.DeviceGroup[]>([]);
+const viewMode = ref<'card' | 'list'>('card');
+const cardViewRef = ref();
+const checkedIds = ref<number[]>([]);
+
+const [DeviceFormModal, deviceFormModalApi] = useVbenModal({
+  connectedComponent: DeviceForm,
+  destroyOnClose: true,
+});
+
+const [DeviceGroupFormModal, deviceGroupFormModalApi] = useVbenModal({
+  connectedComponent: DeviceGroupForm,
+  destroyOnClose: true,
+});
+
+const [DeviceImportFormModal, deviceImportFormModalApi] = useVbenModal({
+  connectedComponent: DeviceImportForm,
+  destroyOnClose: true,
+});
+
+const queryParams = ref<Partial<PageParam>>({
+  deviceName: '',
+  nickname: '',
+  productId: undefined,
+  deviceType: undefined,
+  status: undefined,
+  groupId: undefined,
+}); // 搜索参数
+
+/** 搜索 */
+function handleSearch() {
+  if (viewMode.value === 'list') {
+    gridApi.formApi.setValues(queryParams.value);
+  }
+  gridApi.query();
+}
+
+/** 重置搜索 */
+function handleReset() {
+  queryParams.value.deviceName = '';
+  queryParams.value.nickname = '';
+  queryParams.value.productId = undefined;
+  queryParams.value.deviceType = undefined;
+  queryParams.value.status = undefined;
+  queryParams.value.groupId = undefined;
+  handleSearch();
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 视图切换 */
+async function handleViewModeChange(mode: 'card' | 'list') {
+  if (viewMode.value === mode) {
+    return; // 如果已经是目标视图，不需要切换
+  }
+  viewMode.value = mode;
+  // 等待视图更新后再触发查询
+  await nextTick();
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportDeviceExcel({
+    ...queryParams.value,
+    pageNo: 1,
+    pageSize: 999_999,
+  } as PageParam);
+  downloadFileFromBlobPart({ fileName: '物联网设备.xls', source: data });
+}
+
+/** 打开设备详情 */
+function openDetail(id: number) {
+  router.push({ name: 'IoTDeviceDetail', params: { id } });
+}
+
+/** 跳转到产品详情页面 */
+function openProductDetail(productId: number) {
+  router.push({ name: 'IoTProductDetail', params: { id: productId } });
+}
+
+/** 打开物模型数据 */
+function openModel(id: number) {
+  router.push({
+    name: 'IoTDeviceDetail',
+    params: { id },
+    query: { tab: 'model' },
+  });
+}
+
+/** 新增设备 */
+function handleCreate() {
+  deviceFormModalApi.setData(null).open();
+}
+
+/** 编辑设备 */
+function handleEdit(row: IotDeviceApi.Device) {
+  deviceFormModalApi.setData(row).open();
+}
+
+/** 删除设备 */
+async function handleDelete(row: IotDeviceApi.Device) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.deviceName]),
+  });
+  try {
+    await deleteDevice(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.deviceName]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 批量删除设备 */
+async function handleDeleteBatch() {
+  if (checkedIds.value.length === 0) {
+    ElMessage.warning('请选择要删除的设备');
+    return;
+  }
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deletingBatch'),
+  });
+  try {
+    await deleteDeviceList(checkedIds.value);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
+    checkedIds.value = [];
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 添加到分组 */
+function handleAddToGroup() {
+  if (checkedIds.value.length === 0) {
+    ElMessage.warning('请选择要添加到分组的设备');
+    return;
+  }
+  deviceGroupFormModalApi.setData(checkedIds.value).open();
+}
+
+/** 设备导入 */
+function handleImport() {
+  deviceImportFormModalApi.open();
+}
+
+function handleRowCheckboxChange({
+  records,
+}: {
+  records: IotDeviceApi.Device[];
+}) {
+  checkedIds.value = records.map((item) => item.id!);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    checkboxConfig: {
+      highlight: true,
+      reserve: true,
+    },
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({
+          page,
+        }: {
+          page: { currentPage: number; pageSize: number };
+        }) => {
+          return await getDevicePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...queryParams.value,
+          } as PageParam);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<IotDeviceApi.Device>,
+  gridEvents: {
+    checkboxAll: handleRowCheckboxChange,
+    checkboxChange: handleRowCheckboxChange,
+  },
+});
+
+/** 包装 gridApi.query() 方法，统一列表视图和卡片视图的查询接口 */
+const originalQuery = gridApi.query.bind(gridApi);
+gridApi.query = async (params?: Record<string, any>) => {
+  if (viewMode.value === 'list') {
+    return await originalQuery(params);
+  } else {
+    // 卡片视图：调用卡片组件的 query 方法
+    cardViewRef.value?.query();
+  }
+};
+
+/** 初始化 */
+onMounted(async () => {
+  // 获取产品列表
+  products.value = await getSimpleProductList();
+  // 获取分组列表
+  deviceGroups.value = await getSimpleDeviceGroupList();
+
+  // 处理 productId 参数
+  const { productId } = route.query;
+  if (productId) {
+    queryParams.value.productId = Number(productId);
+    // 自动触发搜索
+    handleSearch();
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DeviceFormModal @success="handleRefresh" />
+    <DeviceGroupFormModal @success="handleRefresh" />
+    <DeviceImportFormModal @success="handleRefresh" />
+
+    <!-- 统一搜索工具栏 -->
+    <ElCard class="!mb-2">
+      <!-- 搜索表单 -->
+      <div class="mb-3 flex flex-wrap items-center gap-3">
+        <ElSelect
+          v-model="queryParams.productId"
+          placeholder="请选择产品"
+          clearable
+          style="width: 200px"
+        >
+          <ElOption
+            v-for="product in products"
+            :key="product.id!"
+            :value="product.id!"
+            :label="product.name"
+          />
+        </ElSelect>
+        <ElInput
+          v-model="queryParams.deviceName"
+          placeholder="请输入 DeviceName"
+          clearable
+          style="width: 200px"
+          @keyup.enter="handleSearch"
+        />
+        <ElInput
+          v-model="queryParams.nickname"
+          placeholder="请输入备注名称"
+          clearable
+          style="width: 200px"
+          @keyup.enter="handleSearch"
+        />
+        <ElSelect
+          v-model="queryParams.deviceType"
+          placeholder="请选择设备类型"
+          clearable
+          style="width: 200px"
+        >
+          <ElOption
+            v-for="dict in getDictOptions(
+              DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE,
+              'number',
+            )"
+            :key="String(dict.value)"
+            :value="dict.value as number"
+            :label="dict.label"
+          />
+        </ElSelect>
+        <ElSelect
+          v-model="queryParams.status"
+          placeholder="请选择设备状态"
+          clearable
+          style="width: 200px"
+        >
+          <ElOption
+            v-for="dict in getDictOptions(DICT_TYPE.IOT_DEVICE_STATE, 'number')"
+            :key="String(dict.value)"
+            :value="dict.value as number"
+            :label="dict.label"
+          />
+        </ElSelect>
+        <ElSelect
+          v-model="queryParams.groupId"
+          placeholder="请选择设备分组"
+          clearable
+          style="width: 200px"
+        >
+          <ElOption
+            v-for="group in deviceGroups"
+            :key="group.id!"
+            :value="group.id!"
+            :label="group.name"
+          />
+        </ElSelect>
+        <ElButton type="primary" @click="handleSearch">
+          <IconifyIcon icon="ant-design:search-outlined" class="mr-1" />
+          {{ $t('common.search') }}
+        </ElButton>
+        <ElButton @click="handleReset">
+          <IconifyIcon icon="ant-design:reload-outlined" class="mr-1" />
+          {{ $t('common.reset') }}
+        </ElButton>
+      </div>
+
+      <!-- 操作按钮 -->
+      <div class="flex items-center justify-between">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['设备']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['iot:device:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['iot:device:export'],
+              onClick: handleExport,
+            },
+            {
+              label: $t('ui.actionTitle.import'),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['iot:device:import'],
+              onClick: handleImport,
+            },
+            {
+              label: '添加到分组',
+              type: 'primary',
+              icon: 'ant-design:folder-add-outlined',
+              auth: ['iot:device:update'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleAddToGroup,
+            },
+            {
+              label: $t('ui.actionTitle.deleteBatch'),
+              type: 'danger',
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:device:delete'],
+              disabled: isEmpty(checkedIds),
+              onClick: handleDeleteBatch,
+            },
+          ]"
+        />
+        <!-- 视图切换 -->
+        <div class="flex gap-1">
+          <ElButton
+            :type="viewMode === 'card' ? 'primary' : 'default'"
+            @click="handleViewModeChange('card')"
+          >
+            <IconifyIcon icon="ant-design:appstore-outlined" />
+          </ElButton>
+          <ElButton
+            :type="viewMode === 'list' ? 'primary' : 'default'"
+            @click="handleViewModeChange('list')"
+          >
+            <IconifyIcon icon="ant-design:unordered-list-outlined" />
+          </ElButton>
+        </div>
+      </div>
+    </ElCard>
+
+    <!-- 列表视图 -->
+    <Grid table-title="设备列表" v-show="viewMode === 'list'">
+      <template #product="{ row }">
+        <a
+          class="cursor-pointer text-[var(--el-color-primary)]"
+          @click="openProductDetail(row.productId)"
+        >
+          {{
+            products.find((product) => product.id === row.productId)?.name ||
+            '-'
+          }}
+        </a>
+      </template>
+      <template #groups="{ row }">
+        <template v-if="row.groupIds?.length">
+          <ElTag
+            v-for="groupId in row.groupIds"
+            :key="groupId"
+            size="small"
+            class="mr-1"
+          >
+            {{ deviceGroups.find((group) => group.id === groupId)?.name }}
+          </ElTag>
+        </template>
+        <span v-else>-</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              auth: ['iot:device:query'],
+              onClick: openDetail.bind(null, row.id!),
+            },
+            {
+              label: '日志',
+              type: 'primary',
+              link: true,
+              auth: ['iot:device:message-query'],
+              onClick: openModel.bind(null, row.id!),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:device:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:device:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.deviceName]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 卡片视图 -->
+    <DeviceCardView
+      v-show="viewMode === 'card'"
+      ref="cardViewRef"
+      :products="products"
+      :device-groups="deviceGroups"
+      :search-params="{
+        deviceName: queryParams.deviceName || '',
+        nickname: queryParams.nickname || '',
+        productId: queryParams.productId,
+        deviceType: queryParams.deviceType,
+        status: queryParams.status,
+        groupId: queryParams.groupId,
+      }"
+      @create="handleCreate"
+      @edit="handleEdit"
+      @delete="handleDelete"
+      @detail="openDetail"
+      @model="openModel"
+      @product-detail="openProductDetail"
+    />
+  </Page>
+</template>
+
+<style scoped>
+/* 隐藏 VxeGrid 自带的搜索表单区域 */
+:deep(.vxe-grid--form-wrapper) {
+  display: none !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/device/device/modules/card-view.vue b/apps/web-ele/src/views/iot/device/device/modules/card-view.vue
new file mode 100644
index 000000000..7d9fa06e8
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/modules/card-view.vue
@@ -0,0 +1,271 @@
+<script lang="ts" setup>
+import type { PageParam } from '@vben/request';
+
+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';
+
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElEmpty,
+  ElImage,
+  ElPagination,
+  ElPopconfirm,
+  ElRow,
+  ElTooltip,
+} from 'element-plus';
+
+import { getDevicePage } from '#/api/iot/device/device';
+import { DictTag } from '#/components/dict-tag';
+
+interface Props {
+  products: any[];
+  deviceGroups: any[];
+  searchParams?: {
+    deviceName: string;
+    deviceType?: number;
+    groupId?: number;
+    nickname: string;
+    productId?: number;
+    status?: number;
+  };
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  create: [];
+  delete: [row: any];
+  detail: [id: number];
+  edit: [row: any];
+  model: [id: number];
+  productDetail: [productId: number];
+}>();
+
+const { hasAccessByCodes } = useAccess();
+
+const loading = ref(false);
+const list = ref<IotDeviceApi.Device[]>([]);
+const total = ref(0);
+const queryParams = ref<Partial<PageParam>>({
+  pageNo: 1,
+  pageSize: 12,
+});
+
+/** 获取产品名称 */
+function getProductName(productId: number) {
+  const product = props.products.find((p: any) => p.id === productId);
+  return product?.name || '-';
+}
+
+/** 获取设备列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await getDevicePage({
+      ...queryParams.value,
+      ...props.searchParams,
+    } as PageParam);
+    list.value = data.list || [];
+    total.value = data.total || 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 处理页码变化 */
+function handlePageChange(page: number, pageSize: number) {
+  queryParams.value.pageNo = page;
+  queryParams.value.pageSize = pageSize;
+  getList();
+}
+
+defineExpose({
+  reload: getList,
+  search: () => {
+    queryParams.value.pageNo = 1;
+    getList();
+  },
+  query: () => {
+    queryParams.value.pageNo = 1;
+    getList();
+  },
+});
+
+/** 初始化 */
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div>
+    <!-- 设备卡片列表 -->
+    <div v-loading="loading" class="min-h-96">
+      <ElRow v-if="list.length > 0" :gutter="16">
+        <ElCol
+          v-for="item in list"
+          :key="item.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="6"
+          class="mb-4"
+        >
+          <ElCard
+            body-class="!p-4 !flex !flex-col !h-full"
+            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="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="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="text-xs"
+              />
+            </div>
+            <!-- 内容区域 -->
+            <div class="mb-3 flex items-start">
+              <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="cursor-pointer truncate font-medium text-[var(--el-color-primary)]"
+                    @click="
+                      (e) => {
+                        e.stopPropagation();
+                        emit('productDetail', item.productId);
+                      }
+                    "
+                  >
+                    {{ getProductName(item.productId) }}
+                  </a>
+                </div>
+                <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="m-0 text-xs"
+                  />
+                </div>
+                <div class="flex items-center text-[13px]">
+                  <span class="mr-2 shrink-0 opacity-65 dark:text-white/65">
+                    Deviceid
+                  </span>
+                  <ElTooltip :content="String(item.id)" placement="top">
+                    <span
+                      class="inline-block max-w-[150px] cursor-pointer truncate align-middle font-mono text-xs opacity-85 dark:text-white/75"
+                    >
+                      {{ item.id }}
+                    </span>
+                  </ElTooltip>
+                </div>
+              </div>
+              <!-- 设备图片 -->
+              <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]"
+              >
+                <ElImage
+                  v-if="item.picUrl"
+                  :src="item.picUrl"
+                  :preview-src-list="[item.picUrl]"
+                  class="size-full rounded object-cover"
+                />
+                <IconifyIcon
+                  v-else
+                  icon="lucide:image"
+                  class="text-2xl opacity-50"
+                />
+              </div>
+            </div>
+            <!-- 按钮组 -->
+            <div
+              class="mt-auto flex gap-2 border-t border-border pt-3"
+            >
+              <ElButton
+                v-if="hasAccessByCodes(['iot:device:update'])"
+                size="small"
+                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" />
+                编辑
+              </ElButton>
+              <ElButton
+                v-if="hasAccessByCodes(['iot:device:query'])"
+                size="small"
+                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" />
+                详情
+              </ElButton>
+              <ElButton
+                v-if="hasAccessByCodes(['iot:device:message-query'])"
+                size="small"
+                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" />
+                数据
+              </ElButton>
+              <ElPopconfirm
+                v-if="hasAccessByCodes(['iot:device:delete'])"
+                :title="`确认删除设备 ${item.deviceName} 吗?`"
+                @confirm="emit('delete', item)"
+              >
+                <template #reference>
+                  <ElButton
+                    size="small"
+                    type="danger"
+                    class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                  >
+                    <IconifyIcon icon="lucide:trash-2" class="text-sm" />
+                  </ElButton>
+                </template>
+              </ElPopconfirm>
+            </div>
+          </ElCard>
+        </ElCol>
+      </ElRow>
+      <!-- 空状态 -->
+      <ElEmpty v-else description="暂无设备数据" class="my-20" />
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="list.length > 0" class="mt-3 flex justify-end">
+      <ElPagination
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :total="total"
+        :page-sizes="[12, 24, 36, 48]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @current-change="(page: number) => handlePageChange(page, queryParams.pageSize!)"
+        @size-change="(size: number) => handlePageChange(queryParams.pageNo!, size)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/modules/form.vue b/apps/web-ele/src/views/iot/device/device/modules/form.vue
new file mode 100644
index 000000000..5d517ba05
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/modules/form.vue
@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import type { IotDeviceApi } from '#/api/iot/device/device';
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import {
+  ElButton,
+  ElCollapse,
+  ElCollapseItem,
+  ElMessage,
+} from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createDevice, getDevice, updateDevice } from '#/api/iot/device/device';
+import { getSimpleProductList } from '#/api/iot/product/product';
+import { MapDialog } from '#/components/map';
+import { $t } from '#/locales';
+
+import { useAdvancedFormSchema, useBasicFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<IotDeviceApi.Device>();
+const products = ref<IotProductApi.Product[]>([]);
+const activeKey = ref<string[]>([]);
+const mapDialogRef = ref<InstanceType<typeof MapDialog>>();
+
+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: 100,
+  },
+  layout: 'horizontal',
+  schema: useBasicFormSchema(),
+  showDefaultActions: false,
+  handleValuesChange: async (values, changedFields) => {
+    // 当产品 ProductId 变化时，自动设置设备类型
+    if (changedFields.includes('productId')) {
+      const productId = values.productId;
+      if (!productId) {
+        await formApi.setFieldValue('deviceType', undefined);
+        return;
+      }
+      // 从产品列表中查找产品
+      const product = products.value.find((item) => item.id === productId);
+      if (product?.deviceType !== undefined) {
+        await formApi.setFieldValue('deviceType', product.deviceType);
+      }
+    }
+  },
+});
+
+const [AdvancedForm, advancedFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useAdvancedFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 获取高级表单的值（如果表单未挂载，则从 formData 中获取） */
+async function getAdvancedFormValues() {
+  if (advancedFormApi.isMounted) {
+    return await advancedFormApi.getValues();
+  }
+  // 表单未挂载（折叠状态），从 formData 中获取
+  return {
+    nickname: formData.value?.nickname,
+    picUrl: formData.value?.picUrl,
+    groupIds: formData.value?.groupIds,
+    serialNumber: formData.value?.serialNumber,
+    longitude: formData.value?.longitude,
+    latitude: formData.value?.latitude,
+  };
+}
+
+/** 打开地图选择弹窗 */
+async function openMapDialog() {
+  // 如果高级表单未挂载，先展开 Collapse
+  if (!advancedFormApi.isMounted) {
+    activeKey.value = ['advanced'];
+    await nextTick();
+    await nextTick();
+  }
+  const values = await advancedFormApi.getValues();
+  mapDialogRef.value?.open(
+    values.longitude ? Number(values.longitude) : undefined,
+    values.latitude ? Number(values.latitude) : undefined,
+  );
+}
+
+/** 处理地图选择确认 */
+async function handleMapConfirm(data: {
+  address: string;
+  latitude: string;
+  longitude: string;
+}) {
+  if (advancedFormApi.isMounted) {
+    await advancedFormApi.setFieldValue('longitude', Number(data.longitude));
+    await advancedFormApi.setFieldValue('latitude', Number(data.latitude));
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    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) {
+        ElMessage.warning(
+          hasLongitude ? '请同时填写设备纬度' : '请同时填写设备经度',
+        );
+        return;
+      }
+    }
+    modalApi.lock();
+    // 合并两个表单的值（字段不冲突，可直接合并）
+    const basicValues = await formApi.getValues();
+    const advancedValues = await getAdvancedFormValues();
+    const data = {
+      ...basicValues,
+      ...advancedValues,
+    } as IotDeviceApi.Device;
+    try {
+      await (formData.value?.id ? updateDevice(data) : createDevice(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      activeKey.value = [];
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<IotDeviceApi.Device>();
+    if (!data || !data.id) {
+      return;
+    }
+    // 编辑模式：加载数据
+    modalApi.lock();
+    try {
+      formData.value = await getDevice(data.id);
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 监听 Collapse 展开，自动设置高级表单的值 */
+watch(
+  activeKey,
+  async (newKeys) => {
+    // 当用户手动展开 Collapse 且存在表单数据时，设置高级表单的值
+    if (newKeys.includes('advanced') && formData.value) {
+      // 等待表单挂载
+      await nextTick();
+      await nextTick();
+      if (advancedFormApi.isMounted) {
+        await advancedFormApi.setValues(formData.value);
+      }
+    }
+  },
+  { immediate: false },
+);
+
+/** 初始化产品列表 */
+onMounted(async () => {
+  products.value = await getSimpleProductList();
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <div class="mx-4">
+      <Form />
+      <ElCollapse v-model="activeKey" class="mt-4">
+        <ElCollapseItem name="advanced" title="更多设置">
+          <AdvancedForm />
+          <div class="mt-2 flex gap-1">
+            <ElButton type="primary" @click="openMapDialog">坐标拾取</ElButton>
+          </div>
+        </ElCollapseItem>
+      </ElCollapse>
+    </div>
+  </Modal>
+  <!-- 地图选择弹窗 -->
+  <MapDialog ref="mapDialogRef" @confirm="handleMapConfirm" />
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/modules/group-form.vue b/apps/web-ele/src/views/iot/device/device/modules/group-form.vue
new file mode 100644
index 000000000..a6a2d1242
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/modules/group-form.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { IotDeviceApi } from '#/api/iot/device/device';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { updateDeviceGroup } from '#/api/iot/device/device';
+import { $t } from '#/locales';
+
+import { useGroupFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const deviceIds = ref<number[]>([]);
+const getTitle = computed(() => '添加设备到分组');
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useGroupFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      await updateDeviceGroup({
+        ids: deviceIds.value,
+        groupIds: data.groupIds as number[],
+      } as IotDeviceApi.DeviceUpdateGroupReqVO);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      deviceIds.value = [];
+      return;
+    }
+    // 加载数据
+    const ids = modalApi.getData<number[]>();
+    if (ids) {
+      deviceIds.value = ids;
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/device/modules/import-form.vue b/apps/web-ele/src/views/iot/device/device/modules/import-form.vue
new file mode 100644
index 000000000..82fe188a6
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/device/modules/import-form.vue
@@ -0,0 +1,109 @@
+<script lang="ts" setup>
+import type { IotDeviceApi } from '#/api/iot/device/device';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElMessage, ElUpload } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { importDevice, importDeviceTemplate } from '#/api/iot/device/device';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importDevice(data.file, data.updateSupport);
+      // 处理导入结果提示
+      const importData = result as IotDeviceApi.DeviceImportRespVO;
+      if (importData) {
+        let text = `上传成功数量：${importData.createDeviceNames?.length || 0};`;
+        if (importData.createDeviceNames?.length) {
+          for (const deviceName of importData.createDeviceNames) {
+            text += `< ${deviceName} >`;
+          }
+        }
+        text += `更新成功数量：${importData.updateDeviceNames?.length || 0};`;
+        if (importData.updateDeviceNames?.length) {
+          for (const deviceName of importData.updateDeviceNames) {
+            text += `< ${deviceName} >`;
+          }
+        }
+        text += `更新失败数量：${Object.keys(importData.failureDeviceNames || {}).length};`;
+        if (importData.failureDeviceNames) {
+          for (const deviceName in importData.failureDeviceNames) {
+            text += `< ${deviceName}: ${importData.failureDeviceNames[deviceName]} >`;
+          }
+        }
+        ElMessage.info(text);
+      }
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 上传前 */
+function beforeUpload(file: File) {
+  formApi.setFieldValue('file', file);
+  return false;
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importDeviceTemplate();
+  downloadFileFromBlobPart({ fileName: '设备导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.import', ['设备'])" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <ElUpload
+            :before-upload="beforeUpload"
+            :limit="1"
+            accept=".xls,.xlsx"
+            :show-file-list="false"
+          >
+            <ElButton type="primary">选择 Excel 文件</ElButton>
+          </ElUpload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <ElButton @click="handleDownload">下载导入模板</ElButton>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/device/group/data.ts b/apps/web-ele/src/views/iot/device/group/data.ts
new file mode 100644
index 000000000..5463262c9
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/group/data.ts
@@ -0,0 +1,124 @@
+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 { 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,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '分组名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分组名称',
+      },
+      rules: z
+        .string()
+        .min(1, '分组名称不能为空')
+        .max(64, '分组名称长度不能超过 64 个字符'),
+    },
+    {
+      fieldName: 'status',
+      label: '分组状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'description',
+      label: '分组描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入分组描述',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分组名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分组名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<IotDeviceGroupApi.DeviceGroup>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: 'ID',
+      minWidth: 100,
+    },
+    {
+      field: 'name',
+      title: '分组名称',
+      minWidth: 200,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'description',
+      title: '分组描述',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'deviceCount',
+      title: '设备数量',
+      minWidth: 100,
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/iot/ota/index.vue b/apps/web-ele/src/views/iot/device/group/index.vue
similarity index 62%
rename from apps/web-antd/src/views/iot/ota/index.vue
rename to apps/web-ele/src/views/iot/device/group/index.vue
index 6b0a148a6..ad64bdad5 100644
--- a/apps/web-antd/src/views/iot/ota/index.vue
+++ b/apps/web-ele/src/views/iot/device/group/index.vue
@@ -1,22 +1,20 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
+import type { IotDeviceGroupApi } from '#/api/iot/device/group';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteOtaFirmware, getOtaFirmwarePage } from '#/api/iot/ota/firmware';
+import { deleteDeviceGroup, getDeviceGroupPage } from '#/api/iot/device/group';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import OtaFirmwareForm from './modules/ota-firmware-form.vue';
-
-defineOptions({ name: 'IoTOtaFirmware' });
+import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: OtaFirmwareForm,
+  connectedComponent: Form,
   destroyOnClose: true,
 });
 
@@ -25,30 +23,27 @@ function handleRefresh() {
   gridApi.query();
 }
 
-/** 创建固件 */
+/** 创建设备分组 */
 function handleCreate() {
   formModalApi.setData(null).open();
 }
 
-/** 编辑固件 */
-function handleEdit(row: IoTOtaFirmwareApi.Firmware) {
+/** 编辑设备分组 */
+function handleEdit(row: IotDeviceGroupApi.DeviceGroup) {
   formModalApi.setData(row).open();
 }
 
-/** 删除固件 */
-async function handleDelete(row: IoTOtaFirmwareApi.Firmware) {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
+/** 删除设备分组 */
+async function handleDelete(row: IotDeviceGroupApi.DeviceGroup) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteOtaFirmware(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteDeviceGroup(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
-    hideLoading();
+    loadingInstance.close();
   }
 }
 
@@ -63,7 +58,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
-          return await getOtaFirmwarePage({
+          return await getDeviceGroupPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             ...formValues,
@@ -79,22 +74,22 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<IoTOtaFirmwareApi.Firmware>,
+  } as VxeTableGridOptions<IotDeviceGroupApi.DeviceGroup>,
 });
 </script>
 
 <template>
   <Page auto-content-height>
     <FormModal @success="handleRefresh" />
-    <Grid table-title="OTA 固件列表">
+    <Grid table-title="设备分组列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
             {
-              label: $t('ui.actionTitle.create', ['固件']),
+              label: $t('ui.actionTitle.create', ['设备分组']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
-              auth: ['iot:ota-firmware:create'],
+              auth: ['iot:device-group:create'],
               onClick: handleCreate,
             },
           ]"
@@ -105,17 +100,18 @@ const [Grid, gridApi] = useVbenVxeGrid({
           :actions="[
             {
               label: $t('common.edit'),
-              type: 'link',
+              type: 'primary',
+              link: true,
               icon: ACTION_ICON.EDIT,
-              auth: ['iot:ota-firmware:update'],
+              auth: ['iot:device-group:update'],
               onClick: handleEdit.bind(null, row),
             },
             {
               label: $t('common.delete'),
-              type: 'link',
-              danger: true,
+              type: 'danger',
+              link: true,
               icon: ACTION_ICON.DELETE,
-              auth: ['iot:ota-firmware:delete'],
+              auth: ['iot:device-group:delete'],
               popConfirm: {
                 title: $t('ui.actionMessage.deleteConfirm', [row.name]),
                 confirm: handleDelete.bind(null, row),
diff --git a/apps/web-ele/src/views/iot/device/group/modules/form.vue b/apps/web-ele/src/views/iot/device/group/modules/form.vue
new file mode 100644
index 000000000..ca0edc48b
--- /dev/null
+++ b/apps/web-ele/src/views/iot/device/group/modules/form.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { IotDeviceGroupApi } from '#/api/iot/device/group';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createDeviceGroup,
+  getDeviceGroup,
+  updateDeviceGroup,
+} from '#/api/iot/device/group';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<IotDeviceGroupApi.DeviceGroup>();
+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: 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 IotDeviceGroupApi.DeviceGroup;
+    try {
+      await (formData.value?.id
+        ? updateDeviceGroup(data)
+        : createDeviceGroup(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<IotDeviceGroupApi.DeviceGroup>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDeviceGroup(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/home/chart-options.ts b/apps/web-ele/src/views/iot/home/chart-options.ts
new file mode 100644
index 000000000..8745452ec
--- /dev/null
+++ b/apps/web-ele/src/views/iot/home/chart-options.ts
@@ -0,0 +1,212 @@
+/** 消息趋势图表配置 */
+export function getMessageTrendChartOptions(
+  times: string[],
+  upstreamData: number[],
+  downstreamData: number[],
+): any {
+  return {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    legend: {
+      data: ['上行消息量', '下行消息量'],
+      top: '5%',
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: times,
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: '消息数量',
+      },
+    ],
+    series: [
+      {
+        name: '上行消息量',
+        type: 'line',
+        smooth: true,
+        areaStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: 'rgba(24, 144, 255, 0.3)' },
+              { offset: 1, color: 'rgba(24, 144, 255, 0)' },
+            ],
+          },
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: upstreamData,
+        itemStyle: {
+          color: '#1890ff',
+        },
+      },
+      {
+        name: '下行消息量',
+        type: 'line',
+        smooth: true,
+        areaStyle: {
+          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',
+        },
+        data: downstreamData,
+        itemStyle: {
+          color: '#52c41a',
+        },
+      },
+    ],
+  };
+}
+
+/** 设备状态仪表盘图表配置 */
+export function getDeviceStateGaugeChartOptions(
+  value: number,
+  max: number,
+  color: string,
+  title: string,
+): any {
+  return {
+    series: [
+      {
+        type: 'gauge',
+        startAngle: 360,
+        endAngle: 0,
+        min: 0,
+        max,
+        center: ['50%', '50%'],
+        radius: '80%',
+        progress: {
+          show: true,
+          width: 12,
+          itemStyle: {
+            color,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            width: 12,
+            color: [[1, '#E5E7EB']] as [number, string][],
+          },
+        },
+        axisTick: { show: false },
+        splitLine: { show: false },
+        axisLabel: { show: false },
+        pointer: { show: false },
+        title: {
+          show: true,
+          offsetCenter: [0, '80%'],
+          fontSize: 14,
+          color: '#666',
+        },
+        detail: {
+          valueAnimation: true,
+          fontSize: 32,
+          fontWeight: 'bold',
+          color,
+          offsetCenter: [0, '10%'],
+          formatter: (val: number) => `${val} 个`,
+        },
+        data: [{ value, name: title }],
+      },
+    ],
+  };
+}
+
+/** 设备数量饼图配置 */
+export function getDeviceCountPieChartOptions(
+  data: Array<{ name: string; value: number }>,
+): any {
+  return {
+    tooltip: {
+      trigger: 'item',
+      formatter: '{b}: {c} 个 ({d}%)',
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'horizontal',
+      bottom: '10px',
+      left: 'center',
+      icon: 'circle',
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 12,
+      textStyle: {
+        fontSize: 12,
+      },
+      pageButtonPosition: 'end',
+      pageIconSize: 12,
+      pageTextStyle: {
+        fontSize: 12,
+      },
+      pageFormatter: '{current}/{total}',
+    },
+    series: [
+      {
+        name: '设备数量',
+        type: 'pie',
+        radius: ['35%', '55%'],
+        center: ['50%', '40%'],
+        avoidLabelOverlap: false,
+        itemStyle: {
+          borderRadius: 8,
+          borderColor: '#fff',
+          borderWidth: 2,
+        },
+        label: {
+          show: false,
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 16,
+            fontWeight: 'bold',
+          },
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: 'rgba(0, 0, 0, 0.5)',
+          },
+        },
+        labelLine: {
+          show: false,
+        },
+        data,
+      },
+    ],
+  };
+}
diff --git a/apps/web-ele/src/views/iot/home/data.ts b/apps/web-ele/src/views/iot/home/data.ts
new file mode 100644
index 000000000..433db75c7
--- /dev/null
+++ b/apps/web-ele/src/views/iot/home/data.ts
@@ -0,0 +1,20 @@
+import type { IotStatisticsApi } from '#/api/iot/statistics';
+
+/** 统计数据 */
+export type StatsData = IotStatisticsApi.StatisticsSummaryRespVO;
+
+/** 默认统计数据；用 -1 作为「未加载」哨兵，避免与「真 0 设备」混淆 */
+export const defaultStatsData: StatsData = {
+  productCategoryCount: -1,
+  productCount: -1,
+  deviceCount: -1,
+  deviceMessageCount: -1,
+  productCategoryTodayCount: 0,
+  productTodayCount: 0,
+  deviceTodayCount: 0,
+  deviceMessageTodayCount: 0,
+  deviceOnlineCount: 0,
+  deviceOfflineCount: 0,
+  deviceInactiveCount: 0,
+  productCategoryDeviceCounts: {},
+};
diff --git a/apps/web-ele/src/views/iot/home/index.vue b/apps/web-ele/src/views/iot/home/index.vue
new file mode 100644
index 000000000..3e384ab2e
--- /dev/null
+++ b/apps/web-ele/src/views/iot/home/index.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { StatsData } from './data';
+
+import { onMounted, ref } from 'vue';
+
+import { ComparisonCard, Page } from '@vben/common-ui';
+
+import { ElCol, ElRow } from 'element-plus';
+
+import { getStatisticsSummary } from '#/api/iot/statistics';
+
+import { defaultStatsData } from './data';
+import DeviceCountCard from './modules/device-count-card.vue';
+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';
+
+const loading = ref(true);
+const statsData = ref<StatsData>(defaultStatsData);
+
+/** 加载数据 */
+async function loadData() {
+  loading.value = true;
+  try {
+    statsData.value = await getStatisticsSummary();
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<template>
+  <Page>
+    <!-- 第一行：统计卡片 -->
+    <ElRow :gutter="16" class="mb-4">
+      <ElCol :span="6">
+        <ComparisonCard
+          title="分类数量"
+          :value="statsData.productCategoryCount"
+          :today-count="statsData.productCategoryTodayCount"
+          icon="menu"
+          icon-color="text-blue-500"
+          :loading="loading"
+        />
+      </ElCol>
+      <ElCol :span="6">
+        <ComparisonCard
+          title="产品数量"
+          :value="statsData.productCount"
+          :today-count="statsData.productTodayCount"
+          icon="box"
+          icon-color="text-orange-500"
+          :loading="loading"
+        />
+      </ElCol>
+      <ElCol :span="6">
+        <ComparisonCard
+          title="设备数量"
+          :value="statsData.deviceCount"
+          :today-count="statsData.deviceTodayCount"
+          icon="cpu"
+          icon-color="text-purple-500"
+          :loading="loading"
+        />
+      </ElCol>
+      <ElCol :span="6">
+        <ComparisonCard
+          title="设备消息数"
+          :value="statsData.deviceMessageCount"
+          :today-count="statsData.deviceMessageTodayCount"
+          icon="message"
+          icon-color="text-teal-500"
+          :loading="loading"
+        />
+      </ElCol>
+    </ElRow>
+
+    <!-- 第二行：图表 -->
+    <ElRow :gutter="16" class="mb-4">
+      <ElCol :span="12">
+        <DeviceCountCard :stats-data="statsData" :loading="loading" />
+      </ElCol>
+      <ElCol :span="12">
+        <DeviceStateCountCard :stats-data="statsData" :loading="loading" />
+      </ElCol>
+    </ElRow>
+
+    <!-- 第三行：消息统计 -->
+    <ElRow :gutter="16" class="mb-4">
+      <ElCol :span="24">
+        <MessageTrendCard />
+      </ElCol>
+    </ElRow>
+
+    <!-- 第四行：设备分布地图 -->
+    <ElRow :gutter="16">
+      <ElCol :span="24">
+        <DeviceMapCard />
+      </ElCol>
+    </ElRow>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/home/modules/device-count-card.vue b/apps/web-ele/src/views/iot/home/modules/device-count-card.vue
new file mode 100644
index 000000000..d2a48c144
--- /dev/null
+++ b/apps/web-ele/src/views/iot/home/modules/device-count-card.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { IotStatisticsApi } from '#/api/iot/statistics';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { ElCard, ElEmpty } from 'element-plus';
+
+import { getDeviceCountPieChartOptions } from '../chart-options';
+
+defineOptions({ name: 'DeviceCountCard' });
+
+const props = defineProps<{
+  loading?: boolean;
+  statsData: IotStatisticsApi.StatisticsSummaryRespVO;
+}>();
+
+const deviceCountChartRef = ref();
+const { renderEcharts } = useEcharts(deviceCountChartRef);
+
+/** 是否有数据 */
+const hasData = computed(() => {
+  if (!props.statsData) {
+    return false;
+  }
+  const categories = Object.entries(
+    props.statsData.productCategoryDeviceCounts || {},
+  );
+  return categories.length > 0 && props.statsData.deviceCount !== -1;
+});
+
+/** 初始化图表 */
+async function initChart() {
+  if (!hasData.value) {
+    return;
+  }
+
+  await nextTick();
+  const data = Object.entries(props.statsData.productCategoryDeviceCounts).map(
+    ([name, value]) => ({ name, value }),
+  );
+  await renderEcharts(getDeviceCountPieChartOptions(data));
+}
+
+/** 监听数据变化 */
+watch(
+  () => props.statsData,
+  () => {
+    initChart();
+  },
+  { deep: true },
+);
+
+/** 组件挂载时初始化图表 */
+onMounted(() => {
+  initChart();
+});
+</script>
+
+<template>
+  <ElCard header="设备数量统计" v-loading="loading" class="h-full">
+    <div
+      v-if="loading && !hasData"
+      class="flex h-[300px] items-center justify-center"
+    >
+      <ElEmpty description="加载中..." />
+    </div>
+    <div
+      v-else-if="!hasData"
+      class="flex h-[300px] items-center justify-center"
+    >
+      <ElEmpty description="暂无数据" />
+    </div>
+    <div v-else>
+      <EchartsUI ref="deviceCountChartRef" class="h-[400px] w-full" />
+    </div>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/home/modules/device-map-card.vue b/apps/web-ele/src/views/iot/home/modules/device-map-card.vue
new file mode 100644
index 000000000..5e8cec8ae
--- /dev/null
+++ b/apps/web-ele/src/views/iot/home/modules/device-map-card.vue
@@ -0,0 +1,221 @@
+<script lang="ts" setup>
+import type { IotDeviceApi } from '#/api/iot/device/device';
+
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DeviceStateEnum, DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
+import { ElCard, ElEmpty } from 'element-plus';
+
+import { getDeviceLocationList } from '#/api/iot/device/device';
+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 hasData = computed(() => deviceList.value.length > 0);
+
+/** 设备状态颜色映射 */
+const stateColorMap: Record<number, string> = {
+  [DeviceStateEnum.INACTIVE]: '#EAB308', // 待激活 - 黄色
+  [DeviceStateEnum.ONLINE]: '#22C55E', // 在线 - 绿色
+  [DeviceStateEnum.OFFLINE]: '#9CA3AF', // 离线 - 灰色
+};
+
+/** 获取设备状态配置；名称走字典，颜色用本地映射 */
+function getStateConfig(state: number): { color: string; name: string } {
+  return {
+    name: getDictLabel(DICT_TYPE.IOT_DEVICE_STATE, state) || '未知',
+    color: stateColorMap[state] || '#909399',
+  };
+}
+
+/** 创建自定义标记点图标 */
+function createMarkerIcon(color: string, isOnline: boolean) {
+  const size = isOnline ? 24 : 20;
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24">
+      <circle cx="12" cy="12" r="8" fill="${color}" stroke="white" stroke-width="2"/>
+      ${isOnline ? `<circle cx="12" cy="12" r="10" fill="none" stroke="${color}" stroke-width="2" opacity="0.5"/>` : ''}
+    </svg>
+  `;
+  const blob = new Blob([svg], { type: 'image/svg+xml' });
+  const url = URL.createObjectURL(blob);
+  return new window.BMapGL.Icon(url, new window.BMapGL.Size(size, size), {
+    anchor: new window.BMapGL.Size(size / 2, size / 2),
+  });
+}
+
+/** 初始化地图 */
+function initMap() {
+  if (!mapContainerRef.value || !window.BMapGL) {
+    return;
+  }
+
+  // 销毁旧实例
+  if (mapInstance) {
+    mapInstance.destroy?.();
+    mapInstance = null;
+  }
+
+  // 创建地图实例，默认以中国为中心
+  mapInstance = new window.BMapGL.Map(mapContainerRef.value);
+  mapInstance.centerAndZoom(new window.BMapGL.Point(106, 37.5), 5);
+  mapInstance.enableScrollWheelZoom();
+
+  // 添加控件
+  mapInstance.addControl(new window.BMapGL.ScaleControl());
+  mapInstance.addControl(new window.BMapGL.ZoomControl());
+
+  // 添加设备标记点
+  deviceList.value.forEach((device) => {
+    const config = getStateConfig(device.state!);
+    const isOnline = device.state === DeviceStateEnum.ONLINE;
+    const point = new window.BMapGL.Point(device.longitude, device.latitude);
+
+    // 创建标记
+    const marker = new window.BMapGL.Marker(point, {
+      icon: createMarkerIcon(config.color, isOnline),
+    });
+
+    // 创建信息窗口内容
+    const infoContent = `
+      <div style="padding: 8px; min-width: 180px;">
+        <div style="font-weight: bold; margin-bottom: 8px; font-size: 14px;">${device.nickname || device.deviceName}</div>
+        <div style="color: #666; font-size: 12px; line-height: 1.8;">
+          <div>产品: ${device.productName || '-'}</div>
+          <div>状态: <span style="color: ${config.color}; font-weight: 500;">${config.name}</span></div>
+        </div>
+        <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee;">
+          <a href="javascript:void(0)" class="device-link" data-id="${device.id}" style="color: #1890ff; font-size: 12px; text-decoration: none;">点击查看详情 →</a>
+        </div>
+      </div>
+    `;
+
+    // 点击标记显示信息窗口
+    marker.addEventListener('click', () => {
+      const infoWindow = new window.BMapGL.InfoWindow(infoContent, {
+        width: 220,
+        height: 140,
+        title: '',
+      });
+
+      // 信息窗口打开后绑定链接点击事件
+      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 },
+                });
+              }
+            });
+          }
+        }, 100);
+      });
+
+      mapInstance.openInfoWindow(infoWindow, point);
+    });
+
+    mapInstance.addOverlay(marker);
+  });
+}
+
+/** 加载设备数据 */
+async function loadDeviceData() {
+  loading.value = true;
+  try {
+    deviceList.value = await getDeviceLocationList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 初始化 */
+async function init() {
+  await loadDeviceData();
+  if (!hasData.value) {
+    return;
+  }
+  await loadBaiduMapSdk();
+  // 等待 v-show 容器渲染完成；SDK 缓存命中时上一行会同步 resolve，DOM 来不及切换
+  await nextTick();
+  initMap();
+}
+
+/** 组件挂载时初始化 */
+onMounted(() => {
+  init();
+});
+
+/** 组件卸载时销毁地图实例 */
+onUnmounted(() => {
+  if (mapInstance) {
+    mapInstance.destroy?.();
+    mapInstance = null;
+  }
+});
+</script>
+
+<template>
+  <ElCard class="h-full">
+    <template #header>
+      <div class="flex items-center justify-between">
+        <span>设备分布地图</span>
+        <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
+              class="inline-block h-3 w-3 rounded-full"
+              :style="{
+                backgroundColor: stateColorMap[DeviceStateEnum.INACTIVE],
+              }"
+            ></span>
+            <span class="text-gray-500">待激活</span>
+          </span>
+        </div>
+      </div>
+    </template>
+    <div
+      v-if="loading"
+      v-loading="loading"
+      class="flex h-[500px] items-center justify-center"
+    ></div>
+    <ElEmpty
+      v-else-if="!hasData"
+      class="h-[500px]"
+      description="暂无设备位置数据"
+    />
+    <div
+      v-show="hasData && !loading"
+      ref="mapContainerRef"
+      class="h-[500px] w-full"
+    ></div>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/home/modules/device-state-count-card.vue b/apps/web-ele/src/views/iot/home/modules/device-state-count-card.vue
new file mode 100644
index 000000000..b27dc2ac5
--- /dev/null
+++ b/apps/web-ele/src/views/iot/home/modules/device-state-count-card.vue
@@ -0,0 +1,113 @@
+<script lang="ts" setup>
+import type { IotStatisticsApi } from '#/api/iot/statistics';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { ElCard, ElCol, ElEmpty, ElRow } from 'element-plus';
+
+import { getDeviceStateGaugeChartOptions } from '../chart-options';
+
+defineOptions({ name: 'DeviceStateCountCard' });
+
+const props = defineProps<{
+  loading?: boolean;
+  statsData: IotStatisticsApi.StatisticsSummaryRespVO;
+}>();
+
+const deviceOnlineChartRef = ref();
+const deviceOfflineChartRef = ref();
+const deviceInactiveChartRef = ref();
+
+const { renderEcharts: renderOnlineChart } = useEcharts(deviceOnlineChartRef);
+const { renderEcharts: renderOfflineChart } = useEcharts(deviceOfflineChartRef);
+const { renderEcharts: renderInactiveChart } = useEcharts(
+  deviceInactiveChartRef,
+);
+
+/** 是否有数据 */
+const hasData = computed(() => {
+  if (!props.statsData) return false;
+  return props.statsData.deviceCount !== -1;
+});
+
+/** 初始化图表 */
+async function initCharts() {
+  if (!hasData.value) {
+    return;
+  }
+
+  await nextTick();
+  const max = props.statsData.deviceCount || 100;
+  // 在线设备
+  await renderOnlineChart(
+    getDeviceStateGaugeChartOptions(
+      props.statsData.deviceOnlineCount,
+      max,
+      '#52c41a',
+      '在线设备',
+    ),
+  );
+  // 离线设备
+  await renderOfflineChart(
+    getDeviceStateGaugeChartOptions(
+      props.statsData.deviceOfflineCount,
+      max,
+      '#ff4d4f',
+      '离线设备',
+    ),
+  );
+  // 待激活设备
+  await renderInactiveChart(
+    getDeviceStateGaugeChartOptions(
+      props.statsData.deviceInactiveCount,
+      max,
+      '#1890ff',
+      '待激活设备',
+    ),
+  );
+}
+
+/** 监听数据变化 */
+watch(
+  () => props.statsData,
+  () => {
+    initCharts();
+  },
+  { deep: true },
+);
+
+/** 组件挂载时初始化图表 */
+onMounted(() => {
+  initCharts();
+});
+</script>
+
+<template>
+  <ElCard header="设备状态统计" v-loading="loading" class="h-full">
+    <div
+      v-if="loading && !hasData"
+      class="flex h-[300px] items-center justify-center"
+    >
+      <ElEmpty description="加载中..." />
+    </div>
+    <div
+      v-else-if="!hasData"
+      class="flex h-[300px] items-center justify-center"
+    >
+      <ElEmpty description="暂无数据" />
+    </div>
+    <ElRow v-else class="h-[280px]">
+      <ElCol :span="8" class="flex items-center justify-center">
+        <EchartsUI ref="deviceOnlineChartRef" class="h-[250px] w-full" />
+      </ElCol>
+      <ElCol :span="8" class="flex items-center justify-center">
+        <EchartsUI ref="deviceOfflineChartRef" class="h-[250px] w-full" />
+      </ElCol>
+      <ElCol :span="8" class="flex items-center justify-center">
+        <EchartsUI ref="deviceInactiveChartRef" class="h-[250px] w-full" />
+      </ElCol>
+    </ElRow>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/home/modules/message-trend-card.vue b/apps/web-ele/src/views/iot/home/modules/message-trend-card.vue
new file mode 100644
index 000000000..352429057
--- /dev/null
+++ b/apps/web-ele/src/views/iot/home/modules/message-trend-card.vue
@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import type { Dayjs } from 'dayjs';
+
+import type { IotStatisticsApi } from '#/api/iot/statistics';
+
+import { computed, nextTick, reactive, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import dayjs from 'dayjs';
+import { ElCard, ElEmpty, ElOption, ElSelect } from 'element-plus';
+
+import { getDeviceMessageSummaryByDate } from '#/api/iot/statistics';
+import ShortcutDateRangePicker from '#/components/shortcut-date-range-picker/shortcut-date-range-picker.vue';
+
+import { getMessageTrendChartOptions } from '../chart-options';
+
+defineOptions({ name: 'MessageTrendCard' });
+
+const messageChartRef = ref();
+const { renderEcharts } = useEcharts(messageChartRef);
+
+const loading = ref(false); // 加载状态
+const messageData = ref<IotStatisticsApi.DeviceMessageSummaryByDateRespVO[]>(
+  [],
+); // 消息趋势数据
+
+/** 时间范围（仅日期，不包含时分秒） */
+const dateRange = ref<[string, string]>([
+  // 默认显示最近一周的数据（包含今天和前六天）
+  dayjs().subtract(6, 'day').format('YYYY-MM-DD'),
+  dayjs().format('YYYY-MM-DD'),
+]);
+
+/** 将日期范围转换为带时分秒的格式 */
+function formatDateRangeWithTime(dates: [string, string]): [string, string] {
+  return [`${dates[0]} 00:00:00`, `${dates[1]} 23:59:59`];
+}
+
+/** 查询参数 */
+const queryParams = reactive<IotStatisticsApi.DeviceMessageReqVO>({
+  interval: 1, // 默认按天
+  times: formatDateRangeWithTime(dateRange.value),
+});
+
+/** 是否有数据 */
+const hasData = computed(() => {
+  return messageData.value && messageData.value.length > 0;
+});
+
+/** 时间间隔字典选项 */
+const intervalOptions = computed(() =>
+  getDictOptions(DICT_TYPE.DATE_INTERVAL, 'number').map((item) => ({
+    label: item.label,
+    value: item.value as number,
+  })),
+);
+
+/** 处理查询操作 */
+function handleQuery() {
+  fetchMessageData();
+}
+
+/** 处理时间范围变化 */
+function handleDateRangeChange(times?: [Dayjs, Dayjs]) {
+  if (!times || times.length !== 2) {
+    return;
+  }
+  dateRange.value = [
+    dayjs(times[0]).format('YYYY-MM-DD'),
+    dayjs(times[1]).format('YYYY-MM-DD'),
+  ];
+  // 将选择的日期转换为带时分秒的格式（开始日期 00:00:00，结束日期 23:59:59）
+  queryParams.times = formatDateRangeWithTime(dateRange.value);
+  handleQuery();
+}
+
+/** 处理时间间隔变化 */
+function handleIntervalChange() {
+  handleQuery();
+}
+
+/** 获取消息统计数据 */
+async function fetchMessageData() {
+  if (!queryParams.times || queryParams.times.length !== 2) {
+    return;
+  }
+
+  loading.value = true;
+  try {
+    messageData.value = await getDeviceMessageSummaryByDate(queryParams);
+  } finally {
+    loading.value = false;
+    await renderChartWhenReady();
+  }
+}
+
+/** 初始化图表 */
+function initChart() {
+  // 检查数据是否存在
+  if (!hasData.value) {
+    return;
+  }
+
+  const times = messageData.value.map((item) => item.time);
+  const upstreamData = messageData.value.map((item) => item.upstreamCount);
+  const downstreamData = messageData.value.map((item) => item.downstreamCount);
+  renderEcharts(
+    getMessageTrendChartOptions(times, upstreamData, downstreamData),
+  );
+}
+
+/** 确保图表容器已经可见后再渲染 */
+async function renderChartWhenReady() {
+  if (!hasData.value) {
+    return;
+  }
+  // 等待 Card loading 状态、v-show 等 DOM 更新完成
+  await nextTick();
+  await nextTick();
+  initChart();
+}
+
+</script>
+
+<template>
+  <ElCard class="h-full">
+    <template #header>
+      <div class="flex flex-wrap items-center justify-between gap-4">
+        <span class="text-base font-medium text-gray-600">消息量统计</span>
+        <div class="flex flex-wrap items-center gap-4">
+          <div class="flex items-center gap-3">
+            <span class="whitespace-nowrap text-sm text-gray-500">
+              时间范围
+            </span>
+            <ShortcutDateRangePicker @change="handleDateRangeChange" />
+          </div>
+          <div class="flex items-center gap-2">
+            <span class="text-sm text-gray-500">时间间隔</span>
+            <ElSelect
+              v-model="queryParams.interval"
+              placeholder="间隔类型"
+              :style="{ width: '80px' }"
+              @change="handleIntervalChange"
+            >
+              <ElOption
+                v-for="opt in intervalOptions"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </ElSelect>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- 加载中状态 -->
+    <div
+      v-show="loading && !hasData"
+      class="flex h-[300px] items-center justify-center"
+    >
+      <ElEmpty description="加载中..." />
+    </div>
+    <!-- 无数据状态 -->
+    <div
+      v-show="!loading && !hasData"
+      class="flex h-[300px] items-center justify-center"
+    >
+      <ElEmpty description="暂无数据" />
+    </div>
+    <!-- 图表容器 - 使用 v-show 而非 v-if，确保组件始终挂载 -->
+    <div v-show="hasData">
+      <EchartsUI ref="messageChartRef" class="h-[300px] w-full" />
+    </div>
+  </ElCard>
+</template>
diff --git a/apps/web-antd/src/views/iot/ota/data.ts b/apps/web-ele/src/views/iot/ota/firmware/data.ts
similarity index 61%
rename from apps/web-antd/src/views/iot/ota/data.ts
rename to apps/web-ele/src/views/iot/ota/firmware/data.ts
index ff9ba6ee1..a8795a911 100644
--- a/apps/web-antd/src/views/iot/ota/data.ts
+++ b/apps/web-ele/src/views/iot/ota/firmware/data.ts
@@ -1,9 +1,42 @@
 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: '所属产品' },
+    { field: 'version', label: '固件版本' },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => (val ? (formatDateTime(val) as string) : '-'),
+    },
+    { field: 'description', label: '固件描述', span: 2 },
+  ];
+}
+
 /** 新增/修改固件的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -35,6 +68,10 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请选择产品',
       },
       rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
     },
     {
       fieldName: 'version',
@@ -44,6 +81,10 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入版本号',
       },
       rules: 'required',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
     },
     {
       fieldName: 'description',
@@ -57,13 +98,18 @@ export function useFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'fileUrl',
       label: '固件文件',
-      component: 'Upload',
+      component: 'FileUpload',
       componentProps: {
-        maxCount: 1,
-        accept: '.bin,.hex,.zip',
+        maxNumber: 1,
+        accept: ['bin', 'hex', 'zip'],
+        maxSize: 50,
+        helpText: '支持上传 .bin、.hex、.zip 格式的固件文件，最大 50MB',
       },
       rules: 'required',
-      help: '支持上传 .bin、.hex、.zip 格式的固件文件',
+      dependencies: {
+        triggerFields: ['id'],
+        show: (values) => !values.id,
+      },
     },
   ];
 }
@@ -77,7 +123,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入固件名称',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -89,7 +135,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         labelField: 'name',
         valueField: 'id',
         placeholder: '请选择产品',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -98,7 +144,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];
@@ -107,15 +153,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
-    {
-      type: 'checkbox',
-      width: 50,
-      fixed: 'left',
-    },
     {
       field: 'id',
       title: '固件编号',
-      width: 100,
+      minWidth: 80,
     },
     {
       field: 'name',
@@ -125,47 +166,34 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'version',
       title: '版本号',
-      width: 120,
-    },
-    {
-      field: 'productName',
-      title: '所属产品',
-      minWidth: 150,
+      minWidth: 120,
     },
     {
       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: 'productId',
+      title: '所属产品',
+      minWidth: 150,
+      slots: { default: 'productName' },
     },
     {
-      field: 'status',
-      title: '状态',
-      width: 100,
-      formatter: ({ cellValue }) => {
-        return cellValue === 1 ? '启用' : '禁用';
-      },
+      field: 'fileUrl',
+      title: '固件文件',
+      minWidth: 120,
+      slots: { default: 'fileUrl' },
     },
     {
       field: 'createTime',
       title: '创建时间',
-      width: 180,
+      minWidth: 180,
       formatter: 'formatDateTime',
     },
     {
       title: '操作',
-      width: 160,
+      width: 200,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-ele/src/views/iot/ota/firmware/detail/index.vue b/apps/web-ele/src/views/iot/ota/firmware/detail/index.vue
new file mode 100644
index 000000000..7f9ff9a36
--- /dev/null
+++ b/apps/web-ele/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-ele/src/views/iot/ota/firmware/detail/modules/info.vue b/apps/web-ele/src/views/iot/ota/firmware/detail/modules/info.vue
new file mode 100644
index 000000000..c89254324
--- /dev/null
+++ b/apps/web-ele/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 { ElCard } from 'element-plus';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../../data';
+
+defineProps<{
+  firmware?: IoTOtaFirmwareApi.Firmware;
+  loading?: boolean;
+}>();
+
+const [Description] = useDescription({
+  border: true,
+  column: 3,
+  schema: useDetailSchema(),
+});
+</script>
+
+<template>
+  <ElCard v-loading="loading" header="固件信息">
+    <Description :data="firmware" />
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/ota/firmware/index.vue b/apps/web-ele/src/views/iot/ota/firmware/index.vue
new file mode 100644
index 000000000..a504d4d0f
--- /dev/null
+++ b/apps/web-ele/src/views/iot/ota/firmware/index.vue
@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
+
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteOtaFirmware, getOtaFirmwarePage } from '#/api/iot/ota/firmware';
+import { $t } from '#/locales';
+
+import { getProductName, useGridColumns, useGridFormSchema } from './data';
+import OtaFirmwareForm from './modules/form.vue';
+
+const { push } = useRouter();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: OtaFirmwareForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建固件 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑固件 */
+function handleEdit(row: IoTOtaFirmwareApi.Firmware) {
+  formModalApi.setData({ type: 'update', id: row.id }).open();
+}
+
+/** 删除固件 */
+async function handleDelete(row: IoTOtaFirmwareApi.Firmware) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteOtaFirmware(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 查看固件详情 */
+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(),
+  },
+  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="固件列表">
+      <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 #productName="{ row }">
+        <a
+          v-if="row.productId"
+          class="cursor-pointer text-[var(--el-color-primary)] hover:underline"
+          @click="handleOpenProductDetail(row.productId)"
+        >
+          {{ getProductName(row.productId) }}
+        </a>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+      <!-- 固件文件列 -->
+      <template #fileUrl="{ row }">
+        <div
+          v-if="row.fileUrl"
+          class="inline-flex items-center gap-1.5 align-middle leading-none"
+        >
+          <IconifyIcon
+            icon="ant-design:download-outlined"
+            class="shrink-0 align-middle text-base text-[var(--el-color-primary)]"
+          />
+          <a
+            :href="row.fileUrl"
+            target="_blank"
+            download
+            class="cursor-pointer align-middle text-[var(--el-color-primary)] hover:underline"
+          >
+            下载固件
+          </a>
+        </div>
+        <span v-else class="text-gray-400">无文件</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['iot:ota-firmware:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:ota-firmware:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: 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-ele/src/views/iot/ota/firmware/modules/form.vue b/apps/web-ele/src/views/iot/ota/firmware/modules/form.vue
new file mode 100644
index 000000000..d4b14fee1
--- /dev/null
+++ b/apps/web-ele/src/views/iot/ota/firmware/modules/form.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+import type { IoTOtaFirmwareApi } from '#/api/iot/ota/firmware';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createOtaFirmware,
+  getOtaFirmware,
+  updateOtaFirmware,
+} from '#/api/iot/ota/firmware';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<IoTOtaFirmwareApi.Firmware>();
+
+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: 80,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单：编辑态只提交 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)
+        : createOtaFirmware(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<IoTOtaFirmwareApi.Firmware>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getOtaFirmware(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/ota/task/data.ts b/apps/web-ele/src/views/iot/ota/task/data.ts
new file mode 100644
index 000000000..f5c19a47f
--- /dev/null
+++ b/apps/web-ele/src/views/iot/ota/task/data.ts
@@ -0,0 +1,162 @@
+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: {
+        multiple: true,
+        placeholder: '请选择设备',
+        filterable: true,
+      },
+      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-ele/src/views/iot/ota/task/modules/detail.vue b/apps/web-ele/src/views/iot/ota/task/modules/detail.vue
new file mode 100644
index 000000000..9e0492c1c
--- /dev/null
+++ b/apps/web-ele/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-ele/src/views/iot/ota/task/modules/form.vue b/apps/web-ele/src/views/iot/ota/task/modules/form.vue
new file mode 100644
index 000000000..2d7cf85c9
--- /dev/null
+++ b/apps/web-ele/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 { ElMessage } from 'element-plus';
+
+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');
+      ElMessage.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-ele/src/views/iot/ota/task/modules/info.vue b/apps/web-ele/src/views/iot/ota/task/modules/info.vue
new file mode 100644
index 000000000..fd3504678
--- /dev/null
+++ b/apps/web-ele/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 { ElCard } from 'element-plus';
+
+import { useDescription } from '#/components/description';
+
+import { useDetailSchema } from '../data';
+
+defineProps<{
+  loading?: boolean;
+  task?: IoTOtaTaskApi.Task;
+}>();
+
+const [Description] = useDescription({
+  border: true,
+  column: 3,
+  schema: useDetailSchema(),
+});
+</script>
+
+<template>
+  <ElCard v-loading="loading" header="任务信息">
+    <Description :data="task" />
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/ota/task/modules/list.vue b/apps/web-ele/src/views/iot/ota/task/modules/list.vue
new file mode 100644
index 000000000..9c13079f9
--- /dev/null
+++ b/apps/web-ele/src/views/iot/ota/task/modules/list.vue
@@ -0,0 +1,160 @@
+<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 { ElInput, ElMessage } from 'element-plus';
+
+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.query();
+}
+
+/** 新增任务 */
+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!);
+  ElMessage.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">
+          <ElInput
+            v-model="searchName"
+            placeholder="请输入任务名称"
+            clearable
+            style="width: 200px"
+            @keyup.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: 'primary',
+              link: true,
+              icon: ACTION_ICON.VIEW,
+              auth: ['iot:ota-task:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.cancel'),
+              type: 'danger',
+              link: 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-ele/src/views/iot/ota/task/modules/statistics.vue b/apps/web-ele/src/views/iot/ota/task/modules/statistics.vue
new file mode 100644
index 000000000..eb573ad0a
--- /dev/null
+++ b/apps/web-ele/src/views/iot/ota/task/modules/statistics.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { DICT_TYPE, IoTOtaTaskRecordStatusEnum } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
+import { ElCard, ElCol, ElRow } from 'element-plus';
+
+
+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>
+  <ElCard v-loading="loading" header="升级设备统计">
+    <ElRow :gutter="20" class="py-5">
+      <ElCol 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>
+      </ElCol>
+    </ElRow>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/ota/task/record/data.ts b/apps/web-ele/src/views/iot/ota/task/record/data.ts
new file mode 100644
index 000000000..a07093b09
--- /dev/null
+++ b/apps/web-ele/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-ele/src/views/iot/ota/task/record/modules/list.vue b/apps/web-ele/src/views/iot/ota/task/record/modules/list.vue
new file mode 100644
index 000000000..7e6abd376
--- /dev/null
+++ b/apps/web-ele/src/views/iot/ota/task/record/modules/list.vue
@@ -0,0 +1,133 @@
+<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 { ElCard, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+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.query();
+}
+
+/** 取消单条记录的升级 */
+async function handleCancelUpgrade(record: IoTOtaTaskRecordApi.TaskRecord) {
+  await cancelOtaTaskRecord(record.id!);
+  ElMessage.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.query();
+    }
+  },
+);
+</script>
+
+<template>
+  <ElCard header="升级设备记录">
+    <ElTabs v-model="activeTab" @tab-change="handleTabChange" class="mb-4">
+      <ElTabPane
+        v-for="tab in statusTabs"
+        :key="tab.key"
+        :name="tab.key"
+        :label="tab.label"
+      />
+    </ElTabs>
+    <Grid>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.cancel'),
+              type: 'danger',
+              link: 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>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/product/category/data.ts b/apps/web-ele/src/views/iot/product/category/data.ts
new file mode 100644
index 000000000..cb972ae0b
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/category/data.ts
@@ -0,0 +1,137 @@
+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';
+
+import { z } from '#/adapter/form';
+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: z
+        .string()
+        .min(1, '分类名字不能为空')
+        .max(64, '分类名字长度不能超过 64 个字符'),
+    },
+    {
+      fieldName: 'sort',
+      label: '分类排序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        placeholder: '请输入分类排序',
+        min: 0,
+        precision: 0,
+      },
+      defaultValue: 0,
+      rules: z.number().min(0, '分类排序不能小于 0'),
+    },
+    {
+      fieldName: 'status',
+      label: '分类状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'description',
+      label: '描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入分类描述',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名字',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<IotProductCategoryApi.ProductCategory>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: 'ID',
+      width: 80,
+    },
+    {
+      field: 'name',
+      title: '名字',
+      minWidth: 200,
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 100,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'description',
+      title: '描述',
+      minWidth: 200,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/iot/product/category/index.vue b/apps/web-ele/src/views/iot/product/category/index.vue
new file mode 100644
index 000000000..cb246d716
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/category/index.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotProductCategoryApi } from '#/api/iot/product/category';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteProductCategory,
+  getProductCategoryPage,
+} from '#/api/iot/product/category';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: IotProductCategoryApi.ProductCategory) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: IotProductCategoryApi.ProductCategory) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProductCategory(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProductCategoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<IotProductCategoryApi.ProductCategory>,
+});
+</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:product-category:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:product-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:product-category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/product/category/modules/form.vue b/apps/web-ele/src/views/iot/product/category/modules/form.vue
new file mode 100644
index 000000000..688abb982
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/category/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { IotProductCategoryApi } from '#/api/iot/product/category';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProductCategory,
+  getProductCategory,
+  updateProductCategory,
+} from '#/api/iot/product/category';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<IotProductCategoryApi.ProductCategory>();
+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: 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 IotProductCategoryApi.ProductCategory;
+    try {
+      await (formData.value?.id
+        ? updateProductCategory(data)
+        : createProductCategory(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<IotProductCategoryApi.ProductCategory>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getProductCategory(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-2/5" :title="getTitle">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/product/product/components/index.ts b/apps/web-ele/src/views/iot/product/product/components/index.ts
new file mode 100644
index 000000000..5ddac0c31
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/product/components/index.ts
@@ -0,0 +1 @@
+export { default as ProductSelect } from './select.vue';
diff --git a/apps/web-ele/src/views/iot/product/product/components/select.vue b/apps/web-ele/src/views/iot/product/product/components/select.vue
new file mode 100644
index 000000000..895858700
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/product/components/select.vue
@@ -0,0 +1,64 @@
+<script lang="ts" setup>
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { onMounted, ref } from 'vue';
+
+import { ElOption, ElSelect } from 'element-plus';
+
+import { getSimpleProductList } from '#/api/iot/product/product';
+
+/** 产品下拉选择器组件 */
+defineOptions({ name: 'ProductSelect' });
+
+const props = defineProps<{
+  deviceType?: number; // 设备类型过滤
+  modelValue?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: number): void;
+  (e: 'change', value?: number): void;
+}>();
+
+const loading = ref(false);
+const productList = ref<IotProductApi.Product[]>([]);
+
+/** 处理选择变化 */
+function handleChange(value: any) {
+  emit('update:modelValue', value as number | undefined);
+  emit('change', value as number | undefined);
+}
+
+/** 获取产品列表 */
+async function getProductList() {
+  try {
+    loading.value = true;
+    productList.value = (await getSimpleProductList(props.deviceType)) || [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getProductList();
+});
+</script>
+
+<template>
+  <ElSelect
+    :model-value="modelValue"
+    :loading="loading"
+    placeholder="请选择产品"
+    clearable
+    filterable
+    class="w-full"
+    @change="handleChange"
+  >
+    <ElOption
+      v-for="p in productList"
+      :key="p.id!"
+      :label="p.name"
+      :value="p.id!"
+    />
+  </ElSelect>
+</template>
diff --git a/apps/web-ele/src/views/iot/product/product/data.ts b/apps/web-ele/src/views/iot/product/product/data.ts
new file mode 100644
index 000000000..52f8b75d2
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/product/data.ts
@@ -0,0 +1,254 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { h } from 'vue';
+
+import { DeviceTypeEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { getSimpleProductCategoryList } from '#/api/iot/product/category';
+
+/** 基础表单字段（不含图标、图片、描述） */
+export function useBasicFormSchema(
+  formApi?: any,
+  generateProductKey?: () => string,
+): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'productKey',
+      label: 'ProductKey',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 ProductKey',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        if(values) {
+          return !values.id;
+        },
+      },
+      rules: z
+        .string()
+        .min(1, 'ProductKey 不能为空')
+        .max(32, 'ProductKey 长度不能超过 32 个字符'),
+      suffix: () => {
+        return h(
+          ElButton,
+          {
+            onClick: () => {
+              if (generateProductKey) {
+                formApi?.setFieldValue('productKey', generateProductKey());
+              }
+            },
+          },
+          { default: () => '重新生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'productKey',
+      label: 'ProductKey',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入 ProductKey',
+        disabled: true,
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        if(values) {
+          return !!values.id;
+        },
+      },
+      rules: z
+        .string()
+        .min(1, 'ProductKey 不能为空')
+        .max(32, 'ProductKey 长度不能超过 32 个字符'),
+    },
+    {
+      fieldName: 'name',
+      label: '产品名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入产品名称',
+      },
+      rules: z
+        .string()
+        .min(1, '产品名称不能为空')
+        .max(64, '产品名称长度不能超过 64 个字符'),
+    },
+    {
+      fieldName: 'categoryId',
+      label: '产品分类',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleProductCategoryList,
+        labelField: 'name',
+        valueField: 'id',
+        placeholder: '请选择产品分类',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'deviceType',
+      label: '设备类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE, 'number'),
+      },
+      defaultValue: DeviceTypeEnum.DEVICE,
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          // 编辑时设备类型不可改
+          disabled: !!values.id,
+        }),
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'netType',
+      label: '联网方式',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_NET_TYPE, 'number'),
+        placeholder: '请选择联网方式',
+      },
+      // 网关子设备走网关联网，不需要联网方式
+      dependencies: {
+        triggerFields: ['deviceType'],
+        show: (values) => values.deviceType !== DeviceTypeEnum.GATEWAY,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'protocolType',
+      label: '协议类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_PROTOCOL_TYPE, 'string'),
+        placeholder: '请选择协议类型',
+      },
+      defaultValue: 'mqtt',
+      rules: 'required',
+    },
+    {
+      fieldName: 'serializeType',
+      label: '序列化类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_SERIALIZE_TYPE, 'string'),
+        placeholder: '请选择序列化类型',
+      },
+      defaultValue: 'json',
+      help: 'iot-gateway-server 默认根据接入的协议类型确定数据格式，仅 MQTT、EMQX 协议支持自定义序列化类型',
+      rules: 'required',
+    },
+  ];
+}
+
+/** 高级设置表单字段（图标、图片、产品描述、动态注册） */
+export function useAdvancedFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'registerEnabled',
+      label: '动态注册',
+      component: 'Switch',
+      componentProps: {
+        activeText: '开',
+        inactiveText: '关',
+      },
+      defaultValue: false,
+      help: '设备动态注册无需一一烧录设备证书（DeviceSecret），每台设备烧录相同的产品证书，即 ProductKey 和 ProductSecret ，云端鉴权通过后下发设备证书，您可以根据需要开启或关闭动态注册，保障安全性。',
+    },
+    {
+      fieldName: 'icon',
+      label: '产品图标',
+      component: 'ImageUpload',
+    },
+    {
+      fieldName: 'picUrl',
+      label: '产品图片',
+      component: 'ImageUpload',
+    },
+    {
+      fieldName: 'description',
+      label: '产品描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入产品描述',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<IotProductApi.Product>['columns'] {
+  return [
+    {
+      field: 'id',
+      title: 'ID',
+      width: 80,
+    },
+    {
+      field: 'productKey',
+      title: 'ProductKey',
+      minWidth: 150,
+    },
+    {
+      field: 'categoryName',
+      title: '品类',
+      minWidth: 120,
+      formatter: ({ row }) => row.categoryName || '未分类',
+    },
+    {
+      field: 'deviceType',
+      title: '设备类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE },
+      },
+    },
+    {
+      field: 'icon',
+      title: '产品图标',
+      width: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'picUrl',
+      title: '产品图片',
+      width: 100,
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/iot/product/product/detail/index.vue b/apps/web-ele/src/views/iot/product/product/detail/index.vue
new file mode 100644
index 000000000..21a4bfd05
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/product/detail/index.vue
@@ -0,0 +1,89 @@
+<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 { ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { getDeviceCount } from '#/api/iot/device/device';
+import { getProduct } from '#/api/iot/product/product';
+import IoTProductThingModel from '#/views/iot/thingmodel/index.vue';
+
+import ProductDetailsHeader from './modules/header.vue';
+import ProductDetailsInfo from './modules/info.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const id = Number(route.params.id);
+const loading = ref(true);
+const product = ref<IotProductApi.Product>({} as IotProductApi.Product);
+const activeTab = ref('info');
+
+/** 向子组件提供产品信息 */
+provide(IOT_PROVIDE_KEY.PRODUCT, product);
+
+/** 获取产品详情 */
+async function getProductData(productId: number) {
+  loading.value = true;
+  try {
+    product.value = await getProduct(productId);
+  } catch {
+    ElMessage.error('获取产品详情失败');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 查询设备数量 */
+async function getDeviceCountData(productId: number) {
+  try {
+    return await getDeviceCount(productId);
+  } catch {
+    ElMessage.error('获取设备数量失败');
+    return 0;
+  }
+}
+
+/** 初始化 */
+onMounted(async () => {
+  if (!id) {
+    ElMessage.warning('参数错误，产品不能为空！');
+    router.back();
+    return;
+  }
+  await getProductData(id);
+
+  // 处理 tab 参数
+  const { tab } = route.query;
+  if (tab) {
+    activeTab.value = tab as string;
+  }
+  // 查询设备数量
+  if (product.value.id) {
+    product.value.deviceCount = await getDeviceCountData(product.value.id);
+  }
+});
+</script>
+
+<template>
+  <Page>
+    <ProductDetailsHeader
+      :loading="loading"
+      :product="product"
+      @refresh="() => getProductData(id)"
+    />
+    <ElTabs v-model="activeTab" class="mt-4">
+      <ElTabPane name="info" label="产品信息">
+        <ProductDetailsInfo v-if="activeTab === 'info'" :product="product" />
+      </ElTabPane>
+      <ElTabPane name="thingModel" label="物模型（功能定义）">
+        <IoTProductThingModel v-if="activeTab === 'thingModel'" />
+      </ElTabPane>
+    </ElTabs>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/product/product/detail/modules/header.vue b/apps/web-ele/src/views/iot/product/product/detail/modules/header.vue
new file mode 100644
index 000000000..b974bda1a
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/product/detail/modules/header.vue
@@ -0,0 +1,166 @@
+<script lang="ts" setup>
+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 {
+  ElButton,
+  ElCard,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElMessage,
+  ElPopconfirm,
+} from 'element-plus';
+
+import {
+  syncProductPropertyTable,
+  updateProductStatus,
+} from '#/api/iot/product/product';
+
+import Form from '../../modules/form.vue';
+
+interface Props {
+  product: IotProductApi.Product;
+  loading?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  loading: false,
+});
+
+const emit = defineEmits<{
+  refresh: [];
+}>();
+
+const router = useRouter();
+const { hasAccessByCodes } = useAccess();
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 复制到剪贴板 */
+async function copyToClipboard(text: string) {
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage.success('复制成功');
+  } catch {
+    ElMessage.error('复制失败');
+  }
+}
+
+/** 跳转到设备管理 */
+function goToDeviceList(productId: number) {
+  router.push({
+    name: 'IoTDevice',
+    query: { productId: String(productId) },
+  });
+}
+
+/** 打开编辑表单 */
+function openEditForm(row: IotProductApi.Product) {
+  formModalApi.setData(row).open();
+}
+
+/** 发布产品 */
+async function handlePublish(product: IotProductApi.Product) {
+  await updateProductStatus(product.id!, ProductStatusEnum.PUBLISHED);
+  ElMessage.success('发布成功');
+  emit('refresh');
+}
+
+/** 撤销发布 */
+async function handleUnpublish(product: IotProductApi.Product) {
+  await updateProductStatus(product.id!, ProductStatusEnum.UNPUBLISHED);
+  ElMessage.success('撤销发布成功');
+  emit('refresh');
+}
+
+/** 同步物模型超级表结构 */
+async function handleSyncPropertyTable(product: IotProductApi.Product) {
+  await syncProductPropertyTable(product.id!);
+  ElMessage.success('同步成功');
+}
+</script>
+
+<template>
+  <div class="mb-4">
+    <FormModal @success="emit('refresh')" />
+
+    <div class="flex items-start justify-between">
+      <div>
+        <h2 class="text-xl font-bold">{{ product.name }}</h2>
+      </div>
+      <div class="flex gap-2">
+        <ElButton
+          v-if="hasAccessByCodes(['iot:product:update'])"
+          :disabled="product.status === ProductStatusEnum.PUBLISHED"
+          @click="openEditForm(product)"
+        >
+          编辑
+        </ElButton>
+        <ElPopconfirm
+          v-if="
+            product.status === ProductStatusEnum.UNPUBLISHED &&
+            hasAccessByCodes(['iot:product:update'])
+          "
+          :title="`确认要发布产品「${product.name}」吗？`"
+          @confirm="handlePublish(product)"
+        >
+          <template #reference>
+            <ElButton type="primary">发布</ElButton>
+          </template>
+        </ElPopconfirm>
+        <ElPopconfirm
+          v-if="
+            product.status === ProductStatusEnum.PUBLISHED &&
+            hasAccessByCodes(['iot:product:update'])
+          "
+          :title="`确认要撤销发布产品「${product.name}」吗？`"
+          @confirm="handleUnpublish(product)"
+        >
+          <template #reference>
+            <ElButton type="danger">撤销发布</ElButton>
+          </template>
+        </ElPopconfirm>
+        <ElPopconfirm
+          v-if="hasAccessByCodes(['iot:product:update'])"
+          :title="`确认要同步产品「${product.name}」的物模型超级表结构吗？`"
+          @confirm="handleSyncPropertyTable(product)"
+        >
+          <template #reference>
+            <ElButton>同步物模型表结构</ElButton>
+          </template>
+        </ElPopconfirm>
+      </div>
+    </div>
+
+    <ElCard class="mt-4">
+      <ElDescriptions :column="1">
+        <ElDescriptionsItem label="ProductKey">
+          {{ product.productKey }}
+          <ElButton
+            class="ml-2"
+            size="small"
+            @click="copyToClipboard(product.productKey || '')"
+          >
+            复制
+          </ElButton>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="设备总数">
+          <span class="ml-5 mr-2">
+            {{ product.deviceCount ?? '加载中...' }}
+          </span>
+          <ElButton size="small" @click="goToDeviceList(product.id!)">
+            前往管理
+          </ElButton>
+        </ElDescriptionsItem>
+      </ElDescriptions>
+    </ElCard>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/product/product/detail/modules/info.vue b/apps/web-ele/src/views/iot/product/product/detail/modules/info.vue
new file mode 100644
index 000000000..b83d66bfc
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/product/detail/modules/info.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { ref } from 'vue';
+
+import { DeviceTypeEnum, DICT_TYPE } from '@vben/constants';
+
+import {
+  ElButton,
+  ElCard,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElMessage,
+} from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+
+interface Props {
+  product: IotProductApi.Product;
+}
+
+defineProps<Props>();
+
+const showProductSecret = ref(false); // 是否显示产品密钥
+
+/** 格式化日期 */
+function formatDate(date?: Date | string) {
+  if (!date) {
+    return '-';
+  }
+  return new Date(date).toLocaleString('zh-CN');
+}
+
+/** 切换产品密钥显示状态 */
+function toggleProductSecretVisible() {
+  showProductSecret.value = !showProductSecret.value;
+}
+
+/** 复制到剪贴板 */
+async function copyToClipboard(text: string) {
+  try {
+    await navigator.clipboard.writeText(text);
+    ElMessage.success('复制成功');
+  } catch {
+    ElMessage.error('复制失败');
+  }
+}
+</script>
+
+<template>
+  <ElCard>
+    <template #header>产品信息</template>
+    <ElDescriptions :column="3" border size="small">
+      <ElDescriptionsItem label="产品名称">
+        {{ product.name }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="所属分类">
+        {{ product.categoryName || '-' }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="设备类型">
+        <DictTag
+          :type="DICT_TYPE.IOT_PRODUCT_DEVICE_TYPE"
+          :value="product.deviceType"
+        />
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="创建时间">
+        {{ formatDate(product.createTime) }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="协议类型">
+        <DictTag
+          :type="DICT_TYPE.IOT_PROTOCOL_TYPE"
+          :value="product.protocolType"
+        />
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="序列化类型">
+        <DictTag
+          :type="DICT_TYPE.IOT_SERIALIZE_TYPE"
+          :value="product.serializeType"
+        />
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="产品状态">
+        <DictTag :type="DICT_TYPE.IOT_PRODUCT_STATUS" :value="product.status" />
+      </ElDescriptionsItem>
+      <ElDescriptionsItem
+        v-if="
+          ([DeviceTypeEnum.DEVICE, DeviceTypeEnum.GATEWAY] as number[]).includes(
+            product.deviceType!,
+          )
+        "
+        label="联网方式"
+      >
+        <DictTag :type="DICT_TYPE.IOT_NET_TYPE" :value="product.netType" />
+      </ElDescriptionsItem>
+      <ElDescriptionsItem v-if="product.productSecret" label="ProductSecret">
+        <span v-if="showProductSecret">{{ product.productSecret }}</span>
+        <span v-else>********</span>
+        <ElButton class="ml-2" size="small" @click="toggleProductSecretVisible">
+          {{ showProductSecret ? '隐藏' : '显示' }}
+        </ElButton>
+        <ElButton
+          class="ml-2"
+          size="small"
+          @click="copyToClipboard(product.productSecret || '')"
+        >
+          复制
+        </ElButton>
+      </ElDescriptionsItem>
+      <ElDescriptionsItem label="动态注册">
+        {{ product.registerEnabled ? '已开启' : '未开启' }}
+      </ElDescriptionsItem>
+      <ElDescriptionsItem :span="3" label="产品描述">
+        {{ product.description || '-' }}
+      </ElDescriptionsItem>
+    </ElDescriptions>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/product/product/index.vue b/apps/web-ele/src/views/iot/product/product/index.vue
new file mode 100644
index 000000000..d34f1f5fd
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/product/index.vue
@@ -0,0 +1,309 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { IotProductCategoryApi } from '#/api/iot/product/category';
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { nextTick, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { ProductStatusEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElInput,
+  ElLoading,
+  ElMessage,
+} from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getSimpleProductCategoryList } from '#/api/iot/product/category';
+import {
+  deleteProduct,
+  exportProduct,
+  getProductPage,
+} from '#/api/iot/product/product';
+import { $t } from '#/locales';
+
+import { useGridColumns } from './data';
+import ProductCardView from './modules/card-view.vue';
+import Form from './modules/form.vue';
+
+const router = useRouter();
+const categoryList = ref<IotProductCategoryApi.ProductCategory[]>([]);
+const viewMode = ref<'card' | 'list'>('card');
+const cardViewRef = ref();
+const queryParams = ref({
+  name: '',
+  productKey: '',
+}); // 搜索参数
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 加载产品分类列表 */
+async function loadCategories() {
+  categoryList.value = await getSimpleProductCategoryList();
+}
+
+/** 搜索产品 */
+function handleSearch() {
+  if (viewMode.value === 'list') {
+    gridApi.formApi.setValues(queryParams.value);
+  }
+  gridApi.query();
+}
+
+/** 重置搜索 */
+function handleReset() {
+  queryParams.value.name = '';
+  queryParams.value.productKey = '';
+  handleSearch();
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 视图切换 */
+async function handleViewModeChange(mode: 'card' | 'list') {
+  if (viewMode.value === mode) {
+    return; // 如果已经是目标视图，不需要切换
+  }
+  viewMode.value = mode;
+  // 等待视图更新后再触发查询
+  await nextTick();
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportProduct(queryParams.value);
+  downloadFileFromBlobPart({ fileName: '产品列表.xls', source: data });
+}
+
+/** 打开产品详情 */
+function openProductDetail(productId: number) {
+  router.push({
+    name: 'IoTProductDetail',
+    params: { id: productId },
+  });
+}
+
+/** 打开物模型管理 */
+function openThingModel(productId: number) {
+  router.push({
+    name: 'IoTProductDetail',
+    params: { id: productId },
+    query: { tab: 'thingModel' },
+  });
+}
+
+/** 新增产品 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑产品 */
+function handleEdit(row: IotProductApi.Product) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除产品 */
+async function handleDelete(row: IotProductApi.Product) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteProduct(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getProductPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...queryParams.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<IotProductApi.Product>,
+});
+
+/** 包装 gridApi.query() 方法，统一列表视图和卡片视图的查询接口 */
+const originalQuery = gridApi.query.bind(gridApi);
+gridApi.query = async (params?: Record<string, any>) => {
+  if (viewMode.value === 'list') {
+    return await originalQuery(params);
+  } else {
+    // 卡片视图：调用卡片组件的 query 方法
+    cardViewRef.value?.query();
+  }
+};
+
+/** 初始化 */
+onMounted(() => {
+  loadCategories();
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+
+    <!-- 统一搜索工具栏 -->
+    <ElCard body-class="!p-4" class="!mb-2">
+      <!-- 搜索表单 -->
+      <div class="mb-3 flex items-center gap-3">
+        <ElInput
+          v-model="queryParams.name"
+          clearable
+          class="w-[220px]"
+          placeholder="请输入产品名称"
+          @keyup.enter="handleSearch"
+        >
+          <template #prefix>
+            <span class="text-gray-400">产品名称</span>
+          </template>
+        </ElInput>
+        <ElInput
+          v-model="queryParams.productKey"
+          clearable
+          class="w-[220px]"
+          placeholder="请输入产品标识"
+          @keyup.enter="handleSearch"
+        >
+          <template #prefix>
+            <span class="text-gray-400">ProductKey</span>
+          </template>
+        </ElInput>
+        <ElButton type="primary" @click="handleSearch">
+          <IconifyIcon class="mr-1" icon="ant-design:search-outlined" />
+          搜索
+        </ElButton>
+        <ElButton @click="handleReset">
+          <IconifyIcon class="mr-1" icon="ant-design:reload-outlined" />
+          重置
+        </ElButton>
+      </div>
+      <!-- 操作按钮 -->
+      <div class="flex items-center justify-between">
+        <TableAction
+          :actions="[
+            {
+              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,
+            },
+          ]"
+        />
+        <!-- 视图切换 -->
+        <div class="flex gap-1">
+          <ElButton
+            :type="viewMode === 'card' ? 'primary' : 'default'"
+            @click="handleViewModeChange('card')"
+          >
+            <IconifyIcon icon="ant-design:appstore-outlined" />
+          </ElButton>
+          <ElButton
+            :type="viewMode === 'list' ? 'primary' : 'default'"
+            @click="handleViewModeChange('list')"
+          >
+            <IconifyIcon icon="ant-design:unordered-list-outlined" />
+          </ElButton>
+        </div>
+      </div>
+    </ElCard>
+
+    <Grid v-show="viewMode === 'list'" table-title="产品列表">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'primary',
+              link: true,
+              auth: ['iot:product:query'],
+              onClick: openProductDetail.bind(null, row.id!),
+            },
+            {
+              label: '物模型',
+              type: 'primary',
+              link: true,
+              auth: ['iot:thing-model:query'],
+              onClick: openThingModel.bind(null, row.id!),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:product:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:product:delete'],
+              disabled: row.status === ProductStatusEnum.PUBLISHED,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <!-- 卡片视图 -->
+    <ProductCardView
+      v-show="viewMode === 'card'"
+      ref="cardViewRef"
+      :category-list="categoryList"
+      :search-params="queryParams"
+      @create="handleCreate"
+      @delete="handleDelete"
+      @detail="openProductDetail"
+      @edit="handleEdit"
+      @thing-model="openThingModel"
+    />
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/product/product/modules/card-view.vue b/apps/web-ele/src/views/iot/product/product/modules/card-view.vue
new file mode 100644
index 000000000..48e820adc
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/product/modules/card-view.vue
@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { DICT_TYPE, ProductStatusEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElCard,
+  ElCol,
+  ElEmpty,
+  ElImage,
+  ElPagination,
+  ElPopconfirm,
+  ElRow,
+  ElTooltip,
+} from 'element-plus';
+
+import { getProductPage } from '#/api/iot/product/product';
+import { DictTag } from '#/components/dict-tag';
+
+interface Props {
+  categoryList: any[];
+  searchParams?: {
+    name: string;
+    productKey: string;
+  };
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  create: [];
+  delete: [row: any];
+  detail: [productId: number];
+  edit: [row: any];
+  thingModel: [productId: number];
+}>();
+
+const { hasAccessByCodes } = useAccess();
+
+const loading = ref(false);
+const list = ref<any[]>([]);
+const total = ref(0);
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 12,
+});
+
+/** 获取分类名称 */
+function getCategoryName(categoryId: number) {
+  const category = props.categoryList.find((c: any) => c.id === categoryId);
+  return category?.name || '未分类';
+}
+
+/** 获取产品列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await getProductPage({
+      ...queryParams.value,
+      ...props.searchParams,
+    });
+    list.value = data.list || [];
+    total.value = data.total || 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 处理分页变化 */
+function handlePageChange() {
+  getList();
+}
+
+defineExpose({
+  reload: getList,
+  query: () => {
+    queryParams.value.pageNo = 1;
+    getList();
+  },
+});
+
+/** 初始化 */
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div>
+    <!-- 产品卡片列表 -->
+    <div v-loading="loading" class="min-h-96">
+      <ElRow v-if="list.length > 0" :gutter="16">
+        <ElCol
+          v-for="item in list"
+          :key="item.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="6"
+          class="mb-4"
+        >
+          <ElCard
+            body-class="!p-4 !flex !flex-col !h-full"
+            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="flex size-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-[#40a9ff] to-[#1890ff] text-white"
+              >
+                <IconifyIcon
+                  :icon="item.icon || 'lucide:box'"
+                  class="text-xl"
+                />
+              </div>
+              <div class="ml-3 min-w-0 flex-1">
+                <div
+                  class="truncate text-[15px] font-semibold leading-9 dark:text-white/85"
+                >
+                  {{ item.name }}
+                </div>
+              </div>
+            </div>
+            <!-- 内容区域 -->
+            <div class="mb-3 flex items-start">
+              <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-foreground">
+                    {{ getCategoryName(item.categoryId) }}
+                  </span>
+                </div>
+                <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="m-0 text-xs"
+                  />
+                </div>
+                <div class="flex items-center text-[13px]">
+                  <span class="mr-2 shrink-0 opacity-65 dark:text-white/65">
+                    产品标识
+                  </span>
+                  <ElTooltip
+                    :content="item.productKey || item.id"
+                    placement="top"
+                  >
+                    <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>
+                  </ElTooltip>
+                </div>
+              </div>
+              <!-- 产品图片 -->
+              <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]"
+              >
+                <ElImage
+                  v-if="item.picUrl"
+                  :src="item.picUrl"
+                  :preview-src-list="[item.picUrl]"
+                  class="size-full rounded object-cover"
+                />
+                <IconifyIcon
+                  v-else
+                  icon="lucide:image"
+                  class="text-2xl opacity-50"
+                />
+              </div>
+            </div>
+            <!-- 按钮组 -->
+            <div
+              class="mt-auto flex gap-2 border-t border-border pt-3"
+            >
+              <ElButton
+                v-if="hasAccessByCodes(['iot:product:update'])"
+                size="small"
+                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" />
+                编辑
+              </ElButton>
+              <ElButton
+                v-if="hasAccessByCodes(['iot:product:query'])"
+                size="small"
+                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" />
+                详情
+              </ElButton>
+              <ElButton
+                v-if="hasAccessByCodes(['iot:thing-model:query'])"
+                size="small"
+                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" />
+                物模型
+              </ElButton>
+              <template v-if="hasAccessByCodes(['iot:product:delete'])">
+                <ElTooltip
+                  v-if="item.status === ProductStatusEnum.PUBLISHED"
+                  content="已发布的产品不能删除"
+                >
+                  <ElButton
+                    size="small"
+                    type="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" />
+                  </ElButton>
+                </ElTooltip>
+                <ElPopconfirm
+                  v-else
+                  :title="`确认删除产品 ${item.name} 吗?`"
+                  @confirm="emit('delete', item)"
+                >
+                  <template #reference>
+                    <ElButton
+                      size="small"
+                      type="danger"
+                      class="!h-8 rounded-md p-0 text-[13px] transition-all duration-200 !w-8"
+                    >
+                      <IconifyIcon icon="lucide:trash-2" class="text-sm" />
+                    </ElButton>
+                  </template>
+                </ElPopconfirm>
+              </template>
+            </div>
+          </ElCard>
+        </ElCol>
+      </ElRow>
+      <!-- 空状态 -->
+      <ElEmpty v-else description="暂无产品数据" class="my-20" />
+    </div>
+
+    <!-- 分页 -->
+    <div v-if="list.length > 0" class="mt-3 flex justify-end">
+      <ElPagination
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :total="total"
+        :page-sizes="[12, 24, 36, 48]"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handlePageChange"
+        @current-change="handlePageChange"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/product/product/modules/form.vue b/apps/web-ele/src/views/iot/product/product/modules/form.vue
new file mode 100644
index 000000000..58c9186a5
--- /dev/null
+++ b/apps/web-ele/src/views/iot/product/product/modules/form.vue
@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import type { IotProductApi } from '#/api/iot/product/product';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElCollapse, ElCollapseItem, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createProduct,
+  getProduct,
+  updateProduct,
+} from '#/api/iot/product/product';
+import { $t } from '#/locales';
+
+import { useAdvancedFormSchema, useBasicFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+/** 生成 ProductKey（包含大小写字母和数字） */
+function generateProductKey(): string {
+  const chars =
+    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  for (let i = 0; i < 16; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}
+
+const formData = ref<IotProductApi.Product>();
+const activeKey = ref<string[]>([]);
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['产品'])
+    : $t('ui.actionTitle.create', ['产品']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: { class: 'w-full' },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+const [AdvancedForm, advancedFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: { class: 'w-full' },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useAdvancedFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 基础表单需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useBasicFormSchema(formApi, generateProductKey) });
+
+/** 获取高级表单的值（如果表单未挂载，则从 formData 中获取） */
+async function getAdvancedFormValues() {
+  if (advancedFormApi.isMounted) {
+    return await advancedFormApi.getValues();
+  }
+  // 表单未挂载（折叠状态），从 formData 中获取
+  return {
+    registerEnabled: formData.value?.registerEnabled,
+    icon: formData.value?.icon,
+    picUrl: formData.value?.picUrl,
+    description: formData.value?.description,
+  };
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 合并两个表单的值（字段不冲突，可直接合并）
+    const basicValues = await formApi.getValues();
+    const advancedValues = await getAdvancedFormValues();
+    const data = {
+      ...basicValues,
+      ...advancedValues,
+    } as IotProductApi.Product;
+    try {
+      await (formData.value?.id ? updateProduct(data) : createProduct(data));
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      activeKey.value = [];
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<IotProductApi.Product>();
+    if (!data || !data.id) {
+      // 新增：确保 Collapse 折叠，并设置默认值
+      activeKey.value = [];
+      await formApi.setValues({
+        productKey: generateProductKey(),
+      });
+      return;
+    }
+    // 编辑：加载数据
+    modalApi.lock();
+    try {
+      formData.value = await getProduct(data.id);
+      await formApi.setValues(formData.value);
+      // 如果存在高级字段数据，自动展开 Collapse
+      if (
+        formData.value?.registerEnabled ||
+        formData.value?.icon ||
+        formData.value?.picUrl ||
+        formData.value?.description
+      ) {
+        activeKey.value = ['advanced'];
+        // 等待 Collapse 展开后表单挂载
+        await nextTick();
+        await nextTick();
+        if (advancedFormApi.isMounted) {
+          await advancedFormApi.setValues(formData.value);
+        }
+      }
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-2/5">
+    <div class="mx-4">
+      <Form />
+      <ElCollapse v-model="activeKey" class="mt-4">
+        <ElCollapseItem name="advanced" title="更多设置">
+          <AdvancedForm />
+        </ElCollapseItem>
+      </ElCollapse>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/index.vue b/apps/web-ele/src/views/iot/rule/data/index.vue
new file mode 100644
index 000000000..213688717
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/index.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+
+import { ElTabPane, ElTabs } from 'element-plus';
+
+import DataRuleList from './rule/index.vue';
+import DataSinkList from './sink/index.vue';
+
+const activeTabName = ref('rule');
+</script>
+
+<template>
+  <Page auto-content-height>
+    <ElTabs v-model="activeTabName">
+      <ElTabPane name="rule" label="规则">
+        <DataRuleList />
+      </ElTabPane>
+      <ElTabPane name="sink" label="目的">
+        <DataSinkList />
+      </ElTabPane>
+    </ElTabs>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/rule/data.ts b/apps/web-ele/src/views/iot/rule/data/rule/data.ts
new file mode 100644
index 000000000..353dfc097
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/rule/data.ts
@@ -0,0 +1,190 @@
+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';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '规则状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 规则表单 Schema */
+export function useRuleFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '规则描述',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入规则描述',
+        rows: 3,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '规则状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      defaultValue: 0,
+      rules: 'required',
+    },
+    {
+      fieldName: 'sinkIds',
+      label: '数据目的',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getDataSinkSimpleList,
+        labelField: 'name',
+        valueField: 'id',
+        multiple: true,
+        clearable: true,
+        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<DataRuleApi.DataRule>['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 },
+      },
+    },
+    {
+      field: 'sourceConfigs',
+      title: '数据源',
+      minWidth: 100,
+      formatter: ({ cellValue }) => `${cellValue?.length || 0} 个`,
+    },
+    {
+      field: 'sinkIds',
+      title: '数据目的',
+      minWidth: 100,
+      formatter: ({ cellValue }) => `${cellValue?.length || 0} 个`,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/iot/rule/data/rule/index.vue b/apps/web-ele/src/views/iot/rule/data/rule/index.vue
new file mode 100644
index 000000000..709ba89e0
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/rule/index.vue
@@ -0,0 +1,125 @@
+<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';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDataRule, getDataRulePage } from '#/api/iot/rule/data/rule';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建规则 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑规则 */
+function handleEdit(row: DataRuleApi.DataRule) {
+  formModalApi.setData({ id: row.id }).open();
+}
+
+/** 删除规则 */
+async function handleDelete(row: DataRuleApi.DataRule) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteDataRule(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+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<DataRuleApi.DataRule>,
+});
+</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: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:data-rule:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: 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>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/rule/modules/form.vue b/apps/web-ele/src/views/iot/rule/data/rule/modules/form.vue
new file mode 100644
index 000000000..7f4adf27e
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/rule/modules/form.vue
@@ -0,0 +1,104 @@
+<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';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createDataRule,
+  getDataRule,
+  updateDataRule,
+} from '#/api/iot/rule/data/rule';
+import { $t } from '#/locales';
+
+import { useRuleFormSchema } from '../data';
+import SourceConfigForm from './source-config-form.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<DataRuleApi.DataRule>();
+const sourceConfigRef = ref<InstanceType<typeof SourceConfigForm>>();
+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: 100,
+  },
+  layout: 'horizontal',
+  schema: useRuleFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    // 校验数据源配置
+    try {
+      await sourceConfigRef.value?.validate();
+    } catch {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as DataRuleApi.DataRule;
+    data.sourceConfigs = sourceConfigRef.value?.getData() || [];
+    try {
+      await (formData.value?.id ? updateDataRule(data) : createDataRule(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      await formApi.resetForm();
+      sourceConfigRef.value?.setData([]);
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<DataRuleApi.DataRule>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getDataRule(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+      // 设置数据源配置
+      await nextTick();
+      sourceConfigRef.value?.setData(formData.value.sourceConfigs || []);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal class="w-4/5" :title="getTitle">
+    <Form class="mx-4" />
+    <div class="mx-4 mt-4">
+      <div class="mb-2 text-sm font-medium">数据源配置</div>
+      <SourceConfigForm ref="sourceConfigRef" />
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/rule/modules/source-config-form.vue b/apps/web-ele/src/views/iot/rule/data/rule/modules/source-config-form.vue
new file mode 100644
index 000000000..7015b9ba6
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/rule/modules/source-config-form.vue
@@ -0,0 +1,288 @@
+<script lang="ts" setup>
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import { IotDeviceMessageMethodEnum, IoTThingModelTypeEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { ElButton, ElMessage, ElOption, ElSelect } from 'element-plus';
+
+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) {
+    ElMessage.error('请至少添加一条数据源配置');
+    return Promise.reject(new Error('数据源配置不能为空'));
+  }
+  for (let i = 0; i < formData.value.length; i++) {
+    const row = formData.value[i];
+    if (!row.productId) {
+      ElMessage.error(`第 ${i + 1} 行：产品不能为空`);
+      return Promise.reject(new Error('产品不能为空'));
+    }
+    if (row.deviceId === undefined || row.deviceId === null) {
+      ElMessage.error(`第 ${i + 1} 行：设备不能为空`);
+      return Promise.reject(new Error('设备不能为空'));
+    }
+    if (!row.method) {
+      ElMessage.error(`第 ${i + 1} 行：消息方法不能为空`);
+      return Promise.reject(new Error('消息方法不能为空'));
+    }
+  }
+  return Promise.resolve();
+}
+
+/** 取当前所有行的值 */
+function getData() {
+  return formData.value;
+}
+
+/** 设置初始数据 */
+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 }">
+        <ElSelect
+          v-model="formData[rowIndex].productId"
+          placeholder="请选择产品"
+          filterable
+          class="w-full"
+          @change="() => handleProductChange(rowIndex)"
+        >
+          <ElOption
+            v-for="p in productList"
+            :key="p.id"
+            :label="p.name"
+            :value="p.id"
+          />
+        </ElSelect>
+      </template>
+      <template #deviceId="{ rowIndex }">
+        <ElSelect
+          v-model="formData[rowIndex].deviceId"
+          placeholder="请选择设备"
+          filterable
+          class="w-full"
+        >
+          <ElOption label="全部设备" :value="0" />
+          <ElOption
+            v-for="d in getFilteredDevices(formData[rowIndex].productId)"
+            :key="d.id"
+            :label="d.deviceName"
+            :value="d.id"
+          />
+        </ElSelect>
+      </template>
+      <template #method="{ rowIndex }">
+        <ElSelect
+          v-model="formData[rowIndex].method"
+          placeholder="请选择消息"
+          filterable
+          class="w-full"
+          @change="() => handleMethodChange(rowIndex)"
+        >
+          <ElOption
+            v-for="m in upstreamMethods"
+            :key="m.method"
+            :label="m.name"
+            :value="m.method"
+          />
+        </ElSelect>
+      </template>
+      <template #identifier="{ rowIndex }">
+        <ElSelect
+          v-if="shouldShowIdentifierSelect(formData[rowIndex])"
+          v-model="formData[rowIndex].identifier"
+          placeholder="请选择标识符"
+          filterable
+          :loading="formData[rowIndex].identifierLoading"
+          class="w-full"
+        >
+          <ElOption
+            v-for="option in getThingModelOptions(formData[rowIndex])"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </ElSelect>
+        <span v-else class="text-xs text-muted-foreground">-</span>
+      </template>
+      <template #actions="{ rowIndex }">
+        <ElButton type="danger" link @click="handleDelete(rowIndex)">
+          删除
+        </ElButton>
+      </template>
+    </Grid>
+    <div class="mt-3 text-center">
+      <ElButton type="primary" @click="handleAdd">
+        <IconifyIcon icon="ant-design:plus-outlined" class="mr-1" />
+        添加数据源
+      </ElButton>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/config/components/key-value-editor.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/components/key-value-editor.vue
new file mode 100644
index 000000000..1982a009b
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/components/key-value-editor.vue
@@ -0,0 +1,78 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
+
+import { ElButton, ElInput } from 'element-plus';
+
+defineOptions({ name: 'KeyValueEditor' });
+
+const props = defineProps<{
+  addButtonText: string;
+  modelValue: Record<string, string>;
+}>();
+
+const emit = defineEmits(['update:modelValue']);
+
+interface KeyValueItem {
+  key: string;
+  value: string;
+}
+
+const items = ref<KeyValueItem[]>([]); // 内部 key-value 项列表
+
+/** 添加项目 */
+function addItem() {
+  items.value.push({ key: '', value: '' });
+  updateModelValue();
+}
+
+/** 移除项目 */
+function removeItem(index: number) {
+  items.value.splice(index, 1);
+  updateModelValue();
+}
+
+/** 更新 modelValue */
+function updateModelValue() {
+  const result: Record<string, string> = {};
+  items.value.forEach((item) => {
+    if (item.key) {
+      result[item.key] = item.value;
+    }
+  });
+  emit('update:modelValue', result);
+}
+
+/** 监听项目变化 */
+watch(items, updateModelValue, { deep: true });
+watch(
+  () => props.modelValue,
+  (val) => {
+    // 列表有值后以列表中的值为准
+    if (isEmpty(val) || !isEmpty(items.value)) {
+      return;
+    }
+    items.value = Object.entries(props.modelValue).map(([key, value]) => ({
+      key,
+      value,
+    }));
+  },
+);
+</script>
+
+<template>
+  <div v-for="(item, index) in items" :key="index" class="mb-2 flex w-full">
+    <ElInput v-model="item.key" class="mr-2" placeholder="键" />
+    <ElInput v-model="item.value" placeholder="值" />
+    <ElButton class="ml-2" type="danger" link @click="removeItem(index)">
+      <IconifyIcon icon="ant-design:delete-outlined" />
+      删除
+    </ElButton>
+  </div>
+  <ElButton type="primary" link @click="addItem">
+    <IconifyIcon icon="ant-design:plus-outlined" />
+    {{ addButtonText }}
+  </ElButton>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/config/database-config-form.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/database-config-form.vue
new file mode 100644
index 000000000..4e2e8c4a6
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/database-config-form.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { isEmpty } from '@vben/utils';
+
+import { useClipboard, useVModel } from '@vueuse/core';
+import { ElButton, ElFormItem, ElInput, ElMessage } from 'element-plus';
+
+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();
+
+async function handleCopySql() {
+  await copy(TABLE_SQL);
+  copied.value = true;
+  ElMessage.success('建表 SQL 已复制到剪贴板');
+  setTimeout(() => (copied.value = false), 2000);
+}
+
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    return;
+  }
+  config.value = {
+    type: `${IotDataSinkTypeEnum.DATABASE}`,
+    jdbcUrl: '',
+    username: '',
+    password: '',
+    tableName: 'iot_device_message_sink',
+  };
+});
+</script>
+
+<template>
+  <ElFormItem
+    prop="config.jdbcUrl"
+    :rules="[{ required: true, message: 'JDBC 连接地址不能为空', trigger: 'blur' }]"
+    label="JDBC 地址"
+  >
+    <ElInput
+      v-model="config.jdbcUrl"
+      placeholder="请输入 JDBC 连接地址，如：jdbc:mysql://localhost:3306/iot_data"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.username"
+    :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
+    label="用户名"
+  >
+    <ElInput v-model="config.username" placeholder="请输入数据库用户名" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.password"
+    :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]"
+    label="密码"
+  >
+    <ElInput
+      v-model="config.password"
+      type="password"
+      show-password
+      placeholder="请输入数据库密码"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.tableName"
+    :rules="[{ required: true, message: '目标表名不能为空', trigger: 'blur' }]"
+    label="目标表名"
+  >
+    <div class="flex items-center gap-3">
+      <ElInput
+        v-model="config.tableName"
+        placeholder="目标表名"
+        class="w-[240px]"
+      />
+      <ElButton type="primary" link @click="showSqlTip = !showSqlTip">
+        <IconifyIcon
+          :icon="showSqlTip ? 'lucide:chevron-up' : 'lucide:file-text'"
+          class="mr-1"
+        />
+        {{ showSqlTip ? '收起表结构提示' : '查看表结构提示' }}
+      </ElButton>
+    </div>
+  </ElFormItem>
+  <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>
+      <ElButton size="small" @click="handleCopySql">
+        <IconifyIcon
+          :icon="copied ? 'lucide:check' : 'lucide:copy'"
+          class="mr-1"
+        />
+        {{ copied ? '已复制' : '复制 SQL' }}
+      </ElButton>
+    </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-ele/src/views/iot/rule/data/sink/config/http-config-form.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/http-config-form.vue
new file mode 100644
index 000000000..ba1909b83
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/http-config-form.vue
@@ -0,0 +1,94 @@
+<!--suppress HttpUrlsUsage -->
+<script lang="ts" setup>
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+import { IotDataSinkTypeEnum } from '#/api/iot/rule/data/sink';
+
+import KeyValueEditor from './components/key-value-editor.vue';
+
+const props = defineProps<{ modelValue: any }>();
+const emit = defineEmits(['update:modelValue']);
+const config = useVModel(props, 'modelValue', emit);
+
+const urlPrefix = ref<'http://' | 'https://'>('http://');
+const urlPath = ref('');
+const fullUrl = computed(() =>
+  urlPath.value ? urlPrefix.value + urlPath.value : '',
+);
+
+watch([urlPrefix, urlPath], () => {
+  config.value.url = fullUrl.value;
+});
+
+onMounted(() => {
+  if (!isEmpty(config.value)) {
+    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 ?? '';
+    }
+    return;
+  }
+  config.value = {
+    type: `${IotDataSinkTypeEnum.HTTP}`,
+    url: '',
+    method: 'POST',
+    headers: {},
+    query: {},
+    body: '',
+  };
+});
+</script>
+
+<template>
+  <ElFormItem
+    prop="config.url"
+    :rules="[{ required: true, message: '请求地址不能为空', trigger: 'blur' }]"
+    label="请求地址"
+  >
+    <ElInput v-model="urlPath" placeholder="请输入请求地址">
+      <template #prepend>
+        <ElSelect v-model="urlPrefix" class="w-[100px]">
+          <ElOption label="http://" value="http://" />
+          <ElOption label="https://" value="https://" />
+        </ElSelect>
+      </template>
+    </ElInput>
+  </ElFormItem>
+  <ElFormItem
+    prop="config.method"
+    :rules="[{ required: true, message: '请求方法不能为空', trigger: 'change' }]"
+    label="请求方法"
+  >
+    <ElSelect v-model="config.method" placeholder="请选择请求方法">
+      <ElOption label="GET" value="GET" />
+      <ElOption label="POST" value="POST" />
+      <ElOption label="PUT" value="PUT" />
+      <ElOption label="DELETE" value="DELETE" />
+    </ElSelect>
+  </ElFormItem>
+  <ElFormItem label="请求头">
+    <KeyValueEditor v-model="config.headers" add-button-text="添加请求头" />
+  </ElFormItem>
+  <ElFormItem label="请求参数">
+    <KeyValueEditor v-model="config.query" add-button-text="添加参数" />
+  </ElFormItem>
+  <ElFormItem label="请求体">
+    <ElInput
+      v-model="config.body"
+      type="textarea"
+      placeholder="请输入内容"
+      :rows="4"
+    />
+  </ElFormItem>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/config/index.ts b/apps/web-ele/src/views/iot/rule/data/sink/config/index.ts
new file mode 100644
index 000000000..d2967eafe
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/index.ts
@@ -0,0 +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-ele/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue
new file mode 100644
index 000000000..f0ef0eb9e
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/kafka-mq-config-form.vue
@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+
+import { onMounted } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElInput, ElSwitch } from 'element-plus';
+
+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.KAFKA}`,
+    bootstrapServers: '',
+    username: '',
+    password: '',
+    ssl: false,
+    topic: '',
+  };
+});
+</script>
+
+<template>
+  <ElFormItem
+    prop="config.bootstrapServers"
+    :rules="[{ required: true, message: '服务地址不能为空', trigger: 'blur' }]"
+    label="服务地址"
+  >
+    <ElInput
+      v-model="config.bootstrapServers"
+      placeholder="请输入服务地址，如：localhost:9092"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.username"
+    :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
+    label="用户名"
+  >
+    <ElInput v-model="config.username" placeholder="请输入用户名" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.password"
+    :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]"
+    label="密码"
+  >
+    <ElInput
+      v-model="config.password"
+      type="password"
+      show-password
+      placeholder="请输入密码"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.ssl" label="启用 SSL">
+    <ElSwitch v-model="config.ssl" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.topic"
+    :rules="[{ required: true, message: '主题不能为空', trigger: 'blur' }]"
+    label="主题"
+  >
+    <ElInput v-model="config.topic" placeholder="请输入主题" />
+  </ElFormItem>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/config/mqtt-config-form.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/mqtt-config-form.vue
new file mode 100644
index 000000000..6f5d778df
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/mqtt-config-form.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+
+import { onMounted } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElInput } from 'element-plus';
+
+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.MQTT}`,
+    url: '',
+    username: '',
+    password: '',
+    clientId: '',
+    topic: '',
+  };
+});
+</script>
+
+<template>
+  <ElFormItem
+    prop="config.url"
+    :rules="[{ required: true, message: '服务地址不能为空', trigger: 'blur' }]"
+    label="服务地址"
+  >
+    <ElInput
+      v-model="config.url"
+      placeholder="请输入 MQTT 服务地址，如：mqtt://localhost:1883"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.username"
+    :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
+    label="用户名"
+  >
+    <ElInput v-model="config.username" placeholder="请输入用户名" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.password"
+    :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]"
+    label="密码"
+  >
+    <ElInput
+      v-model="config.password"
+      type="password"
+      show-password
+      placeholder="请输入密码"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.clientId"
+    :rules="[{ required: true, message: '客户端 ID 不能为空', trigger: 'blur' }]"
+    label="客户端 ID"
+  >
+    <ElInput v-model="config.clientId" placeholder="请输入客户端 ID" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.topic"
+    :rules="[{ required: true, message: '主题不能为空', trigger: 'blur' }]"
+    label="主题"
+  >
+    <ElInput v-model="config.topic" placeholder="请输入主题" />
+  </ElFormItem>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue
new file mode 100644
index 000000000..b45848e09
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/rabbit-mq-config-form.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+
+import { onMounted } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElInput, ElInputNumber } from 'element-plus';
+
+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.RABBITMQ}`,
+    host: '',
+    port: 5672,
+    virtualHost: '/',
+    username: '',
+    password: '',
+    exchange: '',
+    routingKey: '',
+    queue: '',
+  };
+});
+</script>
+
+<template>
+  <ElFormItem
+    prop="config.host"
+    :rules="[{ required: true, message: '主机地址不能为空', trigger: 'blur' }]"
+    label="主机地址"
+  >
+    <ElInput v-model="config.host" placeholder="请输入主机地址，如：localhost" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.port"
+    :rules="[
+      { required: true, message: '端口不能为空', trigger: 'blur' },
+      {
+        type: 'number',
+        min: 1,
+        max: 65_535,
+        message: '端口号范围 1-65535',
+        trigger: 'blur',
+      },
+    ]"
+    label="端口"
+  >
+    <ElInputNumber
+      v-model="config.port"
+      :max="65535"
+      :min="1"
+      placeholder="请输入端口"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.virtualHost"
+    :rules="[{ required: true, message: '虚拟主机不能为空', trigger: 'blur' }]"
+    label="虚拟主机"
+  >
+    <ElInput v-model="config.virtualHost" placeholder="请输入虚拟主机" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.username"
+    :rules="[{ required: true, message: '用户名不能为空', trigger: 'blur' }]"
+    label="用户名"
+  >
+    <ElInput v-model="config.username" placeholder="请输入用户名" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.password"
+    :rules="[{ required: true, message: '密码不能为空', trigger: 'blur' }]"
+    label="密码"
+  >
+    <ElInput
+      v-model="config.password"
+      type="password"
+      show-password
+      placeholder="请输入密码"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.exchange"
+    :rules="[{ required: true, message: '交换机不能为空', trigger: 'blur' }]"
+    label="交换机"
+  >
+    <ElInput v-model="config.exchange" placeholder="请输入交换机" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.routingKey"
+    :rules="[{ required: true, message: '路由键不能为空', trigger: 'blur' }]"
+    label="路由键"
+  >
+    <ElInput v-model="config.routingKey" placeholder="请输入路由键" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.queue"
+    :rules="[{ required: true, message: '队列不能为空', trigger: 'blur' }]"
+    label="队列"
+  >
+    <ElInput v-model="config.queue" placeholder="请输入队列" />
+  </ElFormItem>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue
new file mode 100644
index 000000000..dd743e711
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/redis-stream-config-form.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+
+import { onMounted } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElInput, ElInputNumber } from 'element-plus';
+
+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.REDIS_STREAM}`,
+    host: '',
+    port: 6379,
+    password: '',
+    database: 0,
+    topic: '',
+  };
+});
+</script>
+
+<template>
+  <ElFormItem
+    prop="config.host"
+    :rules="[{ required: true, message: '主机地址不能为空', trigger: 'blur' }]"
+    label="主机地址"
+  >
+    <ElInput v-model="config.host" placeholder="请输入主机地址，如：localhost" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.port"
+    :rules="[
+      { required: true, message: '端口不能为空', trigger: 'blur' },
+      {
+        type: 'number',
+        min: 1,
+        max: 65_535,
+        message: '端口号范围 1-65535',
+        trigger: 'blur',
+      },
+    ]"
+    label="端口"
+  >
+    <ElInputNumber
+      v-model="config.port"
+      :max="65535"
+      :min="1"
+      placeholder="请输入端口"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.password" label="密码">
+    <ElInput
+      v-model="config.password"
+      type="password"
+      show-password
+      placeholder="请输入密码"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.database"
+    :rules="[
+      { required: true, message: '数据库索引不能为空', trigger: 'blur' },
+      {
+        type: 'number',
+        min: 0,
+        message: '数据库索引必须是非负整数',
+        trigger: 'blur',
+      },
+    ]"
+    label="数据库"
+  >
+    <ElInputNumber
+      v-model="config.database"
+      :max="15"
+      :min="0"
+      placeholder="请输入数据库索引"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.topic"
+    :rules="[{ required: true, message: '主题不能为空', trigger: 'blur' }]"
+    label="主题"
+  >
+    <ElInput v-model="config.topic" placeholder="请输入主题" />
+  </ElFormItem>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue
new file mode 100644
index 000000000..82874ea26
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/rocket-mq-config-form.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+
+import { onMounted } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElInput } from 'element-plus';
+
+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.ROCKETMQ}`,
+    nameServer: '',
+    accessKey: '',
+    secretKey: '',
+    group: '',
+    topic: '',
+    tags: '',
+  };
+});
+</script>
+
+<template>
+  <ElFormItem
+    prop="config.nameServer"
+    :rules="[{ required: true, message: 'NameServer 地址不能为空', trigger: 'blur' }]"
+    label="NameServer"
+  >
+    <ElInput
+      v-model="config.nameServer"
+      placeholder="请输入 NameServer 地址，如：127.0.0.1:9876"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.accessKey"
+    :rules="[{ required: true, message: 'AccessKey 不能为空', trigger: 'blur' }]"
+    label="AccessKey"
+  >
+    <ElInput v-model="config.accessKey" placeholder="请输入 AccessKey" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.secretKey"
+    :rules="[{ required: true, message: 'SecretKey 不能为空', trigger: 'blur' }]"
+    label="SecretKey"
+  >
+    <ElInput
+      v-model="config.secretKey"
+      type="password"
+      show-password
+      placeholder="请输入 SecretKey"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.group"
+    :rules="[{ required: true, message: '消费组不能为空', trigger: 'blur' }]"
+    label="消费组"
+  >
+    <ElInput v-model="config.group" placeholder="请输入消费组" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.topic"
+    :rules="[{ required: true, message: '主题不能为空', trigger: 'blur' }]"
+    label="主题"
+  >
+    <ElInput v-model="config.topic" placeholder="请输入主题" />
+  </ElFormItem>
+  <ElFormItem prop="config.tags" label="标签">
+    <ElInput v-model="config.tags" placeholder="请输入标签" />
+  </ElFormItem>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/config/tcp-config-form.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/tcp-config-form.vue
new file mode 100644
index 000000000..51e823a8b
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/tcp-config-form.vue
@@ -0,0 +1,144 @@
+<script lang="ts" setup>
+
+import { onMounted } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus';
+
+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>
+  <ElFormItem
+    prop="config.host"
+    :rules="[{ required: true, message: '主机地址不能为空', trigger: 'blur' }]"
+    label="服务器地址"
+  >
+    <ElInput
+      v-model="config.host"
+      placeholder="请输入 TCP 服务器地址，如：localhost"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.port"
+    :rules="[
+      { required: true, message: '端口不能为空', trigger: 'blur' },
+      {
+        type: 'number',
+        min: 1,
+        max: 65_535,
+        message: '端口号范围 1-65535',
+        trigger: 'blur',
+      },
+    ]"
+    label="端口"
+  >
+    <ElInputNumber
+      v-model="config.port"
+      :max="65535"
+      :min="1"
+      placeholder="请输入端口"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.connectTimeoutMs"
+    :rules="[{ required: true, message: '连接超时时间不能为空', trigger: 'blur' }]"
+    label="连接超时(ms)"
+  >
+    <ElInputNumber
+      v-model="config.connectTimeoutMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.readTimeoutMs"
+    :rules="[{ required: true, message: '读取超时时间不能为空', trigger: 'blur' }]"
+    label="读取超时(ms)"
+  >
+    <ElInputNumber
+      v-model="config.readTimeoutMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.ssl" label="启用 SSL">
+    <ElSwitch v-model="config.ssl" />
+  </ElFormItem>
+  <ElFormItem
+    v-if="config.ssl"
+    prop="config.sslCertPath"
+    label="SSL 证书路径"
+  >
+    <ElInput v-model="config.sslCertPath" placeholder="请输入 SSL 证书路径" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.dataFormat"
+    :rules="[{ required: true, message: '数据格式不能为空', trigger: 'change' }]"
+    label="数据格式"
+  >
+    <ElSelect v-model="config.dataFormat" placeholder="请选择数据格式">
+      <ElOption label="JSON" value="JSON" />
+      <ElOption label="BINARY" value="BINARY" />
+    </ElSelect>
+  </ElFormItem>
+  <ElFormItem prop="config.heartbeatIntervalMs" label="心跳间隔(ms)">
+    <ElInputNumber
+      v-model="config.heartbeatIntervalMs"
+      :min="0"
+      :step="1000"
+      placeholder="0 表示不启用心跳"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.reconnectIntervalMs" label="重连间隔(ms)">
+    <ElInputNumber
+      v-model="config.reconnectIntervalMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.maxReconnectAttempts" label="最大重连次数">
+    <ElInputNumber
+      v-model="config.maxReconnectAttempts"
+      :min="0"
+      class="w-full"
+    />
+  </ElFormItem>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/config/websocket-config-form.vue b/apps/web-ele/src/views/iot/rule/data/sink/config/websocket-config-form.vue
new file mode 100644
index 000000000..d68f15eeb
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/config/websocket-config-form.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+
+import { onMounted } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElFormItem,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElSelect,
+  ElSwitch,
+} from 'element-plus';
+
+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>
+  <ElFormItem
+    prop="config.serverUrl"
+    :rules="[
+      { required: true, message: 'WebSocket 服务器地址不能为空', trigger: 'blur' },
+    ]"
+    label="服务器地址"
+  >
+    <ElInput
+      v-model="config.serverUrl"
+      placeholder="请输入 WebSocket 地址，如：ws://localhost:8080/ws"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.connectTimeoutMs"
+    :rules="[{ required: true, message: '连接超时时间不能为空', trigger: 'blur' }]"
+    label="连接超时(ms)"
+  >
+    <ElInputNumber
+      v-model="config.connectTimeoutMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.sendTimeoutMs"
+    :rules="[{ required: true, message: '发送超时时间不能为空', trigger: 'blur' }]"
+    label="发送超时(ms)"
+  >
+    <ElInputNumber
+      v-model="config.sendTimeoutMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.heartbeatIntervalMs" label="心跳间隔(ms)">
+    <ElInputNumber
+      v-model="config.heartbeatIntervalMs"
+      :min="0"
+      :step="1000"
+      placeholder="0 表示不启用心跳"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.heartbeatMessage" label="心跳消息">
+    <ElInput
+      v-model="config.heartbeatMessage"
+      placeholder="请输入心跳消息内容（JSON 格式）"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.subprotocols" label="子协议">
+    <ElInput
+      v-model="config.subprotocols"
+      placeholder="请输入子协议列表，多个用逗号分隔"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.customHeaders" label="自定义请求头">
+    <ElInput
+      v-model="config.customHeaders"
+      type="textarea"
+      placeholder="请输入自定义请求头（JSON 格式）"
+      :rows="3"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.verifySslCert" label="验证 SSL 证书">
+    <ElSwitch v-model="config.verifySslCert" />
+  </ElFormItem>
+  <ElFormItem
+    prop="config.dataFormat"
+    :rules="[{ required: true, message: '数据格式不能为空', trigger: 'change' }]"
+    label="数据格式"
+  >
+    <ElSelect v-model="config.dataFormat" placeholder="请选择数据格式">
+      <ElOption label="JSON" value="JSON" />
+      <ElOption label="TEXT" value="TEXT" />
+    </ElSelect>
+  </ElFormItem>
+  <ElFormItem prop="config.reconnectIntervalMs" label="重连间隔(ms)">
+    <ElInputNumber
+      v-model="config.reconnectIntervalMs"
+      :min="1000"
+      :step="1000"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.maxReconnectAttempts" label="最大重连次数">
+    <ElInputNumber
+      v-model="config.maxReconnectAttempts"
+      :min="0"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.enableCompression" label="启用压缩">
+    <ElSwitch v-model="config.enableCompression" />
+  </ElFormItem>
+  <ElFormItem prop="config.sendRetryCount" label="发送重试次数">
+    <ElInputNumber
+      v-model="config.sendRetryCount"
+      :min="0"
+      class="w-full"
+    />
+  </ElFormItem>
+  <ElFormItem prop="config.sendRetryIntervalMs" label="重试间隔(ms)">
+    <ElInputNumber
+      v-model="config.sendRetryIntervalMs"
+      :min="100"
+      :step="500"
+      class="w-full"
+    />
+  </ElFormItem>
+</template>
diff --git a/apps/web-antd/src/views/iot/rule/data/data.ts b/apps/web-ele/src/views/iot/rule/data/sink/data.ts
similarity index 63%
rename from apps/web-antd/src/views/iot/rule/data/data.ts
rename to apps/web-ele/src/views/iot/rule/data/sink/data.ts
index efebb92d0..557759602 100644
--- a/apps/web-antd/src/views/iot/rule/data/data.ts
+++ b/apps/web-ele/src/views/iot/rule/data/sink/data.ts
@@ -1,10 +1,10 @@
 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';
 
-import { getSimpleProductList } from '#/api/iot/product/product';
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -12,33 +12,31 @@ export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'name',
-      label: '规则名称',
+      label: '目的名称',
       component: 'Input',
       componentProps: {
-        placeholder: '请输入规则名称',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'productId',
-      label: '产品',
-      component: 'ApiSelect',
-      componentProps: {
-        api: getSimpleProductList,
-        labelField: 'name',
-        valueField: 'id',
-        placeholder: '请选择产品',
-        allowClear: true,
+        placeholder: '请输入目的名称',
+        clearable: true,
       },
     },
     {
       fieldName: 'status',
-      label: '规则状态',
+      label: '目的状态',
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择状态',
-        allowClear: true,
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '目的类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_DATA_SINK_TYPE_ENUM, 'number'),
+        placeholder: '请选择目的类型',
+        clearable: true,
       },
     },
     {
@@ -47,45 +45,48 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions<DataSinkApi.DataSink>['columns'] {
   return [
     { type: 'checkbox', width: 40 },
     {
       field: 'id',
-      title: '规则编号',
+      title: '目的编号',
       minWidth: 80,
     },
     {
       field: 'name',
-      title: '规则名称',
+      title: '目的名称',
       minWidth: 150,
     },
     {
       field: 'description',
-      title: '规则描述',
+      title: '目的描述',
       minWidth: 200,
     },
     {
       field: 'status',
-      title: '规则状态',
+      title: '目的状态',
       minWidth: 100,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
-    // TODO @haohao：这里是【数据源】【数据目的】
     {
-      field: 'sinkCount',
-      title: '数据流转数',
-      minWidth: 100,
+      field: 'type',
+      title: '目的类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_DATA_SINK_TYPE_ENUM },
+      },
     },
     {
       field: 'createTime',
@@ -95,7 +96,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     },
     {
       title: '操作',
-      width: 240,
+      width: 160,
       fixed: 'right',
       slots: { default: 'actions' },
     },
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/index.vue b/apps/web-ele/src/views/iot/rule/data/sink/index.vue
new file mode 100644
index 000000000..b66daba5a
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/index.vue
@@ -0,0 +1,125 @@
+<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';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteDataSink, getDataSinkPage } from '#/api/iot/rule/data/sink';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建数据目的 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑数据目的 */
+function handleEdit(row: DataSinkApi.DataSink) {
+  formModalApi.setData({ id: row.id }).open();
+}
+
+/** 删除数据目的 */
+async function handleDelete(row: DataSinkApi.DataSink) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteDataSink(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getDataSinkPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<DataSinkApi.DataSink>,
+});
+</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-sink:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:data-sink:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:data-sink:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/data/sink/modules/form.vue b/apps/web-ele/src/views/iot/rule/data/sink/modules/form.vue
new file mode 100644
index 000000000..d3fd29bd8
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/data/sink/modules/form.vue
@@ -0,0 +1,200 @@
+<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 {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+} from 'element-plus';
+
+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');
+      ElMessage.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">
+    <ElForm
+      ref="formRef"
+      :model="formData"
+      class="mx-4"
+      label-width="100px"
+    >
+      <ElFormItem
+        :rules="[{ required: true, message: '目的名称不能为空', trigger: 'blur' }]"
+        label="目的名称"
+        prop="name"
+      >
+        <ElInput v-model="formData.name" placeholder="请输入目的名称" />
+      </ElFormItem>
+      <ElFormItem label="目的描述" prop="description">
+        <ElInput
+          v-model="formData.description"
+          placeholder="请输入目的描述"
+          type="textarea"
+          :rows="3"
+        />
+      </ElFormItem>
+      <ElFormItem
+        :rules="[{ required: true, message: '目的类型不能为空', trigger: 'change' }]"
+        label="目的类型"
+        prop="type"
+      >
+        <ElSelect
+          :model-value="formData.type"
+          placeholder="请选择目的类型"
+          @change="(value: any) => handleTypeChange(value as number)"
+        >
+          <ElOption
+            v-for="dict in getDictOptions(DICT_TYPE.IOT_DATA_SINK_TYPE_ENUM, 'number')"
+            :key="String(dict.value)"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <!-- 配置项：按目的类型分支 -->
+      <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"
+      />
+      <ElFormItem
+        :rules="[{ required: true, message: '目的状态不能为空', trigger: 'change' }]"
+        label="目的状态"
+        prop="status"
+      >
+        <ElRadioGroup v-model="formData.status">
+          <ElRadio
+            v-for="dict in getDictOptions(DICT_TYPE.COMMON_STATUS, 'number')"
+            :key="String(dict.value)"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </ElRadio>
+        </ElRadioGroup>
+      </ElFormItem>
+    </ElForm>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/data.ts b/apps/web-ele/src/views/iot/rule/scene/data.ts
new file mode 100644
index 000000000..85436e941
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/data.ts
@@ -0,0 +1,90 @@
+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 { getRangePickerDefaultProps } from '#/utils';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '规则状态',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'name',
+      title: '规则名称',
+      minWidth: 200,
+      align: 'left',
+      showOverflow: false,
+      slots: { default: 'name' },
+    },
+    {
+      field: 'triggers',
+      title: '触发条件',
+      minWidth: 280,
+      align: 'left',
+      showOverflow: false,
+      slots: { default: 'triggers' },
+    },
+    {
+      field: 'actions',
+      title: '执行动作',
+      minWidth: 250,
+      align: 'left',
+      showOverflow: false,
+      slots: { default: 'actionsCol' },
+    },
+    {
+      field: 'lastTriggeredTime',
+      title: '最近触发',
+      width: 180,
+      slots: { default: 'lastTriggeredTime' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 210,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/configs/alert-config.vue b/apps/web-ele/src/views/iot/rule/scene/form/configs/alert-config.vue
new file mode 100644
index 000000000..04d2643e5
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/configs/alert-config.vue
@@ -0,0 +1,71 @@
+<!-- 告警配置组件 -->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElOption, ElSelect } from 'element-plus';
+
+import { getSimpleAlertConfigList } from '#/api/iot/alert/config';
+
+/** 告警配置组件 */
+defineOptions({ name: 'AlertConfig' });
+
+const props = defineProps<{
+  modelValue?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: number): void;
+}>();
+
+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 {
+    alertConfigs.value = (await getSimpleAlertConfigList()) || [];
+  } finally {
+    loading.value = false;
+  }
+}
+
+// 组件挂载时加载数据
+onMounted(() => {
+  loadAlertConfigs();
+});
+</script>
+
+<template>
+  <div class="w-full">
+    <ElFormItem label="告警配置" required>
+      <ElSelect
+        v-model="localValue"
+        placeholder="请选择告警配置"
+        filterable
+        clearable
+        @change="handleChange"
+        class="w-full"
+        :loading="loading"
+      >
+        <ElOption
+          v-for="config in alertConfigs"
+          :key="config.id"
+          :label="config.name"
+          :value="config.id"
+        />
+      </ElSelect>
+    </ElFormItem>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/configs/condition-config.vue b/apps/web-ele/src/views/iot/rule/scene/form/configs/condition-config.vue
new file mode 100644
index 000000000..4bd91f70c
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/configs/condition-config.vue
@@ -0,0 +1,335 @@
+<!-- 单个条件配置组件 -->
+<script setup lang="ts">
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { computed, ref } from 'vue';
+
+import {
+  getConditionTypeOptions,
+  IoTDeviceStatusEnum,
+  IotRuleSceneTriggerConditionParameterOperatorEnum,
+  IotRuleSceneTriggerConditionTypeEnum,
+} from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { ElCol, ElFormItem, ElOption, ElRow, ElSelect } from 'element-plus';
+
+import ValueInput from '../inputs/value-input.vue';
+import DeviceSelector from '../selectors/device-selector.vue';
+import OperatorSelector from '../selectors/operator-selector.vue';
+import ProductSelector from '../selectors/product-selector.vue';
+import PropertySelector from '../selectors/property-selector.vue';
+import CurrentTimeConditionConfig from './current-time-condition-config.vue';
+
+/** 单个条件配置组件 */
+defineOptions({ name: 'ConditionConfig' });
+
+const props = defineProps<{
+  modelValue: RuleSceneApi.TriggerCondition;
+  triggerType: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RuleSceneApi.TriggerCondition): void;
+}>();
+
+/** 获取设备状态选项 */
+const deviceStatusOptions = [
+  {
+    value: IoTDeviceStatusEnum.ONLINE.value,
+    label: IoTDeviceStatusEnum.ONLINE.label,
+  },
+  {
+    value: IoTDeviceStatusEnum.OFFLINE.value,
+    label: IoTDeviceStatusEnum.OFFLINE.label,
+  },
+];
+
+/** 获取状态操作符选项 */
+const statusOperatorOptions = [
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name,
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.name,
+  },
+];
+
+const condition = useVModel(props, 'modelValue', emit);
+
+const propertyType = ref<string>('string'); // 属性类型
+const propertyConfig = ref<any>(null); // 属性配置
+const isDeviceCondition = computed(() => {
+  return (
+    condition.value.type ===
+      IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS ||
+    condition.value.type ===
+      IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
+  );
+}); // 计算属性：判断是否为设备相关条件
+
+/**
+ * 更新条件字段
+ * @param field 字段名
+ * @param value 字段值
+ */
+function updateConditionField(field: any, value: any) {
+  (condition.value as any)[field] = value;
+  emit('update:modelValue', condition.value);
+}
+
+/**
+ * 更新整个条件对象
+ * @param newCondition 新的条件对象
+ */
+function updateCondition(newCondition: RuleSceneApi.TriggerCondition) {
+  condition.value = newCondition;
+  emit('update:modelValue', condition.value);
+}
+
+/**
+ * 处理条件类型变化事件
+ * @param type 条件类型
+ */
+function handleConditionTypeChange(type: any) {
+  // 根据条件类型清理字段
+  const isCurrentTime =
+    type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME;
+  const isDeviceStatus =
+    type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS;
+
+  // 清理标识符字段（时间条件和设备状态条件都不需要）
+  if (isCurrentTime || isDeviceStatus) {
+    condition.value.identifier = undefined;
+  }
+
+  // 清理设备相关字段（仅时间条件需要）
+  if (isCurrentTime) {
+    condition.value.productId = undefined;
+    condition.value.deviceId = undefined;
+  }
+
+  // 设置默认操作符
+  condition.value.operator = isCurrentTime
+    ? 'at_time'
+    : IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value;
+
+  // 清空参数值
+  condition.value.param = '';
+}
+
+/** 处理产品变化事件 */
+function handleProductChange(_: any) {
+  // 产品变化时清空设备和属性
+  condition.value.deviceId = undefined;
+  condition.value.identifier = '';
+}
+
+/** 处理设备变化事件 */
+function handleDeviceChange(_: any) {
+  // 设备变化时清空属性
+  condition.value.identifier = '';
+}
+
+/**
+ * 处理属性变化事件
+ * @param propertyInfo.config - 属性配置
+ * @param propertyInfo.type - 属性类型
+ */
+function handlePropertyChange(propertyInfo: { config: any; type: string }) {
+  propertyType.value = propertyInfo.type;
+  propertyConfig.value = propertyInfo.config;
+
+  // 重置操作符和值
+  condition.value.operator =
+    IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value;
+  condition.value.param = '';
+}
+
+/** 处理操作符变化事件 */
+function handleOperatorChange() {
+  // 重置值
+  condition.value.param = '';
+}
+</script>
+
+<template>
+  <div class="gap-[16px] flex flex-col">
+    <!-- 条件类型选择 -->
+    <ElRow :gutter="16">
+      <ElCol :span="8">
+        <ElFormItem label="条件类型" required>
+          <ElSelect
+            :model-value="condition.type"
+            @update:model-value="
+              (value: any) => updateConditionField('type', value)
+            "
+            @change="handleConditionTypeChange"
+            placeholder="请选择条件类型"
+            class="w-full"
+          >
+            <ElOption
+              v-for="option in getConditionTypeOptions()"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            />
+          </ElSelect>
+        </ElFormItem>
+      </ElCol>
+    </ElRow>
+
+    <!-- 产品设备选择 - 设备相关条件的公共部分 -->
+    <ElRow v-if="isDeviceCondition" :gutter="16">
+      <ElCol :span="12">
+        <ElFormItem label="产品" required>
+          <ProductSelector
+            :model-value="condition.productId"
+            @update:model-value="
+              (value) => updateConditionField('productId', value)
+            "
+            @change="handleProductChange"
+          />
+        </ElFormItem>
+      </ElCol>
+      <ElCol :span="12">
+        <ElFormItem label="设备" required>
+          <DeviceSelector
+            :model-value="condition.deviceId"
+            @update:model-value="
+              (value) => updateConditionField('deviceId', value)
+            "
+            :product-id="condition.productId"
+            @change="handleDeviceChange"
+          />
+        </ElFormItem>
+      </ElCol>
+    </ElRow>
+
+    <!-- 设备状态条件配置 -->
+    <div
+      v-if="
+        condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS
+      "
+      class="gap-[16px] flex flex-col"
+    >
+      <!-- 状态和操作符选择 -->
+      <ElRow :gutter="16">
+        <!-- 操作符选择 -->
+        <ElCol :span="12">
+          <ElFormItem label="操作符" required>
+            <ElSelect
+              :model-value="condition.operator"
+              @update:model-value="
+                (value: any) => updateConditionField('operator', value)
+              "
+              placeholder="请选择操作符"
+              class="w-full"
+            >
+              <ElOption
+                v-for="option in statusOperatorOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </ElSelect>
+          </ElFormItem>
+        </ElCol>
+
+        <!-- 状态选择 -->
+        <ElCol :span="12">
+          <ElFormItem label="设备状态" required>
+            <ElSelect
+              :model-value="condition.param"
+              @update:model-value="
+                (value: any) => updateConditionField('param', value)
+              "
+              placeholder="请选择设备状态"
+              class="w-full"
+            >
+              <ElOption
+                v-for="option in deviceStatusOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </ElSelect>
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+    </div>
+
+    <!-- 设备属性条件配置 -->
+    <div
+      v-else-if="
+        condition.type === IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
+      "
+      class="space-y-[16px]"
+    >
+      <!-- 属性配置 -->
+      <ElRow :gutter="16">
+        <!-- 属性/事件/服务选择 -->
+        <ElCol :span="6">
+          <ElFormItem label="监控项" required>
+            <PropertySelector
+              :model-value="condition.identifier"
+              @update:model-value="
+                (value) => updateConditionField('identifier', value)
+              "
+              :trigger-type="triggerType"
+              :product-id="condition.productId"
+              :device-id="condition.deviceId"
+              @change="handlePropertyChange"
+            />
+          </ElFormItem>
+        </ElCol>
+
+        <!-- 操作符选择 -->
+        <ElCol :span="6">
+          <ElFormItem label="操作符" required>
+            <OperatorSelector
+              :model-value="condition.operator"
+              @update:model-value="
+                (value) => updateConditionField('operator', value)
+              "
+              :property-type="propertyType"
+              @change="handleOperatorChange"
+            />
+          </ElFormItem>
+        </ElCol>
+
+        <!-- 值输入 -->
+        <ElCol :span="12">
+          <ElFormItem label="比较值" required>
+            <ValueInput
+              :model-value="condition.param"
+              @update:model-value="
+                (value) => updateConditionField('param', value)
+              "
+              :property-type="propertyType"
+              :operator="condition.operator"
+              :property-config="propertyConfig"
+            />
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+    </div>
+
+    <!-- 当前时间条件配置 -->
+    <CurrentTimeConditionConfig
+      v-else-if="
+        condition.type === IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME
+      "
+      :model-value="condition"
+      @update:model-value="updateCondition"
+    />
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-form-item) {
+  margin-bottom: 0;
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue b/apps/web-ele/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
new file mode 100644
index 000000000..f6c40e784
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
@@ -0,0 +1,258 @@
+<!-- 当前时间条件配置组件 -->
+<script setup lang="ts">
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { computed, watch } from 'vue';
+
+import { IotRuleSceneTriggerTimeOperatorEnum } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCol,
+  ElDatePicker,
+  ElFormItem,
+  ElOption,
+  ElRow,
+  ElSelect,
+  ElTag,
+  ElTimePicker,
+} from 'element-plus';
+
+/** 当前时间条件配置组件 */
+defineOptions({ name: 'CurrentTimeConditionConfig' });
+
+const props = defineProps<{
+  modelValue: RuleSceneApi.TriggerCondition;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RuleSceneApi.TriggerCondition): void;
+}>();
+
+const condition = useVModel(props, 'modelValue', emit);
+
+// 时间操作符选项
+const timeOperatorOptions = [
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
+    icon: 'ep:arrow-left',
+    iconClass: 'text-blue-500',
+    tag: 'primary',
+    category: '时间点',
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.name,
+    icon: 'ep:arrow-right',
+    iconClass: 'text-green-500',
+    tag: 'success',
+    category: '时间点',
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.name,
+    icon: 'ep:sort',
+    iconClass: 'text-orange-500',
+    tag: 'warning',
+    category: '时间段',
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
+    icon: 'ep:position',
+    iconClass: 'text-purple-500',
+    tag: 'info',
+    category: '时间点',
+  },
+  {
+    value: IotRuleSceneTriggerTimeOperatorEnum.TODAY.value,
+    label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
+    icon: 'ep:calendar',
+    iconClass: 'text-red-500',
+    tag: 'danger',
+    category: '日期',
+  },
+];
+
+// 计算属性：是否需要时间输入
+const needsTimeInput = computed(() => {
+  const timeOnlyOperators = [
+    IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.value,
+    IotRuleSceneTriggerTimeOperatorEnum.AFTER_TIME.value,
+    IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value,
+    IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.value,
+  ];
+  return timeOnlyOperators.includes(condition.value.operator as any);
+});
+
+/** 是否需要日期输入 ；当前仅支持时间 */
+const needsDateInput = computed(() => {
+  return false;
+});
+
+// 计算属性：是否需要第二个时间输入
+const needsSecondTimeInput = computed(() => {
+  return (
+    condition.value.operator ===
+    IotRuleSceneTriggerTimeOperatorEnum.BETWEEN_TIME.value
+  );
+});
+
+// 计算属性：从 param 中解析时间值
+const timeValue = computed(() => {
+  if (!condition.value.param) return '';
+  const params = condition.value.param.split(',');
+  return params[0] || '';
+});
+
+// 计算属性：从 param 中解析第二个时间值
+const timeValue2 = computed(() => {
+  if (!condition.value.param) return '';
+  const params = condition.value.param.split(',');
+  return params[1] || '';
+});
+
+/**
+ * 更新条件字段
+ * @param field 字段名
+ * @param value 字段值
+ */
+function updateConditionField(field: any, value: any) {
+  (condition.value as any)[field] = value;
+}
+
+/**
+ * 处理第一个时间值变化
+ * @param value 时间值
+ */
+function handleTimeValueChange(value: string) {
+  const currentParams = condition.value.param
+    ? condition.value.param.split(',')
+    : [];
+  currentParams[0] = value || '';
+
+  // 如果是范围条件，保留第二个值；否则只保留第一个值
+  condition.value.param = needsSecondTimeInput.value
+    ? currentParams.slice(0, 2).join(',')
+    : currentParams[0];
+}
+
+/**
+ * 处理第二个时间值变化
+ * @param value 时间值
+ */
+function handleTimeValue2Change(value: string) {
+  const currentParams = condition.value.param
+    ? condition.value.param.split(',')
+    : [''];
+  currentParams[1] = value || '';
+  condition.value.param = currentParams.slice(0, 2).join(',');
+}
+
+/** 监听操作符变化，清理不相关的时间值 */
+watch(
+  () => condition.value.operator,
+  (newOperator) => {
+    if (newOperator === IotRuleSceneTriggerTimeOperatorEnum.TODAY.value) {
+      // 今日条件不需要时间参数
+      condition.value.param = '';
+    } else if (!needsSecondTimeInput.value) {
+      // 非范围条件只保留第一个时间值
+      const currentParams = condition.value.param
+        ? condition.value.param.split(',')
+        : [];
+      condition.value.param = currentParams[0] || '';
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <ElRow :gutter="16">
+      <!-- 时间操作符选择 -->
+      <ElCol :span="8">
+        <ElFormItem label="时间条件" required>
+          <ElSelect
+            :model-value="condition.operator"
+            @update:model-value="
+              (value: any) => updateConditionField('operator', value)
+            "
+            placeholder="请选择时间条件"
+            class="w-full"
+          >
+            <ElOption
+              v-for="option in timeOperatorOptions"
+              :key="option.value"
+              :label="option.label"
+              :value="option.value"
+            >
+              <div class="flex w-full items-center justify-between">
+                <div class="flex items-center gap-2">
+                  <IconifyIcon :icon="option.icon" :class="option.iconClass" />
+                  <span>{{ option.label }}</span>
+                </div>
+                <ElTag :type="option.tag as any" size="small">
+                  {{ option.category }}
+                </ElTag>
+              </div>
+            </ElOption>
+          </ElSelect>
+        </ElFormItem>
+      </ElCol>
+
+      <!-- 时间值输入 -->
+      <ElCol :span="8">
+        <ElFormItem label="时间值" required>
+          <ElTimePicker
+            v-if="needsTimeInput"
+            :model-value="timeValue"
+            @update:model-value="handleTimeValueChange"
+            placeholder="请选择时间"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
+            class="w-full"
+          />
+          <ElDatePicker
+            v-else-if="needsDateInput"
+            :model-value="timeValue"
+            @update:model-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-[var(--el-text-color-secondary)]">无需设置时间值</div>
+        </ElFormItem>
+      </ElCol>
+
+      <!-- 第二个时间值（范围条件） -->
+      <ElCol :span="8" v-if="needsSecondTimeInput">
+        <ElFormItem label="结束时间" required>
+          <ElTimePicker
+            v-if="needsTimeInput"
+            :model-value="timeValue2"
+            @update:model-value="handleTimeValue2Change"
+            placeholder="请选择结束时间"
+            format="HH:mm:ss"
+            value-format="HH:mm:ss"
+            class="w-full"
+          />
+          <ElDatePicker
+            v-else
+            :model-value="timeValue2"
+            @update:model-value="handleTimeValue2Change"
+            type="datetime"
+            placeholder="请选择结束日期时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            class="w-full"
+          />
+        </ElFormItem>
+      </ElCol>
+    </ElRow>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/configs/device-control-config.vue b/apps/web-ele/src/views/iot/rule/scene/form/configs/device-control-config.vue
new file mode 100644
index 000000000..68386645f
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/configs/device-control-config.vue
@@ -0,0 +1,421 @@
+<!-- 设备控制配置组件 -->
+<script setup lang="ts">
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import {
+  IoTDataSpecsDataTypeEnum,
+  IotRuleSceneActionTypeEnum,
+  IoTThingModelAccessModeEnum,
+} from '@vben/constants';
+import { isObject } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElCol,
+  ElFormItem,
+  ElOption,
+  ElRow,
+  ElSelect,
+  ElTag,
+} from 'element-plus';
+
+import { getThingModelTSLByProductId } from '#/api/iot/thingmodel';
+
+import JsonParamsInput from '../inputs/json-params-input.vue';
+import DeviceSelector from '../selectors/device-selector.vue';
+import ProductSelector from '../selectors/product-selector.vue';
+
+/** 设备控制配置组件 */
+defineOptions({ name: 'DeviceControlConfig' });
+
+const props = defineProps<{
+  modelValue: RuleSceneApi.Action;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RuleSceneApi.Action): void;
+}>();
+
+const action = useVModel(props, 'modelValue', emit);
+
+const thingModelProperties = ref<ThingModelApi.Property[]>([]); // 物模型属性列表
+const loadingThingModel = ref(false); // 物模型加载状态
+const selectedService = ref<null | ThingModelApi.Service>(null); // 选中的服务对象
+const serviceList = ref<ThingModelApi.Service[]>([]); // 服务列表
+const loadingServices = ref(false); // 服务加载状态
+
+// 参数值的计算属性，用于双向绑定
+const paramsValue = computed({
+  get: () => {
+    // 如果 params 是对象，转换为 JSON 字符串（兼容旧数据）
+    if (action.value.params && isObject(action.value.params)) {
+      return JSON.stringify(action.value.params, null, 2);
+    }
+    // 如果 params 已经是字符串，直接返回
+    return action.value.params || '';
+  },
+  set: (value: string) => {
+    // 直接保存为 JSON 字符串，不进行解析转换
+    action.value.params = value.trim() || '';
+  },
+});
+
+// 计算属性：是否为属性设置类型
+const isPropertySetAction = computed(() => {
+  return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET;
+});
+
+// 计算属性：是否为服务调用类型
+const isServiceInvokeAction = computed(() => {
+  return action.value.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE;
+});
+
+/**
+ * 处理产品变化事件
+ * @param productId 产品 ID
+ */
+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 = []; // 清空服务列表
+  }
+
+  // 加载新产品的物模型属性或服务列表
+  if (productId) {
+    if (isPropertySetAction.value) {
+      loadThingModelProperties(productId);
+    } else if (isServiceInvokeAction.value) {
+      loadServiceList(productId);
+    }
+  }
+}
+
+/**
+ * 处理设备变化事件
+ * @param deviceId 设备 ID
+ */
+function handleDeviceChange(deviceId?: number) {
+  // 当设备变化时，清空参数配置
+  if (action.value.deviceId !== deviceId) {
+    action.value.params = ''; // 清空参数，保存为空字符串
+  }
+}
+
+/**
+ * 处理服务变化事件
+ * @param serviceIdentifier 服务标识符
+ */
+function handleServiceChange(serviceIdentifier?: any) {
+  // 根据服务标识符找到对应的服务对象
+  const service =
+    serviceList.value.find(
+      (item) => item.identifier === serviceIdentifier,
+    ) || null;
+  selectedService.value = service;
+
+  // 当服务变化时，清空参数配置
+  action.value.params = '';
+
+  // 如果选择了服务且有输入参数，生成默认参数结构
+  if (service && service.inputParams && service.inputParams.length > 0) {
+    const defaultParams: Record<string, any> = {};
+    service.inputParams.forEach((param) => {
+      if (!param.identifier) return;
+      defaultParams[param.identifier] = getDefaultValueForParam(param);
+    });
+    // 将默认参数转换为 JSON 字符串保存
+    action.value.params = JSON.stringify(defaultParams, null, 2);
+  }
+}
+
+/**
+ * 获取物模型TSL数据
+ * @param productId 产品ID
+ * @returns 物模型TSL数据
+ */
+async function fetchThingModelTSL(productId: number) {
+  if (!productId) return null;
+
+  try {
+    return await getThingModelTSLByProductId(productId);
+  } catch (error) {
+    console.error('获取物模型 TSL 数据失败:', error);
+    return null;
+  }
+}
+
+/**
+ * 加载物模型属性（可写属性）
+ * @param productId 产品ID
+ */
+async function loadThingModelProperties(productId: number) {
+  if (!productId) {
+    thingModelProperties.value = [];
+    return;
+  }
+
+  try {
+    loadingThingModel.value = true;
+    const tslData = await fetchThingModelTSL(productId);
+
+    if (!tslData?.properties) {
+      thingModelProperties.value = [];
+      return;
+    }
+
+    // 过滤出可写的属性（accessMode 包含 'w'）
+    thingModelProperties.value = tslData.properties.filter(
+      (property: ThingModelApi.Property) =>
+        property.accessMode &&
+        (property.accessMode === IoTThingModelAccessModeEnum.READ_WRITE.value ||
+          property.accessMode === IoTThingModelAccessModeEnum.WRITE_ONLY.value),
+    );
+  } catch (error) {
+    console.error('加载物模型属性失败 ：', error);
+    thingModelProperties.value = [];
+  } finally {
+    loadingThingModel.value = false;
+  }
+}
+
+/**
+ * 加载服务列表
+ * @param productId 产品ID
+ */
+async function loadServiceList(productId: number) {
+  if (!productId) {
+    serviceList.value = [];
+    return;
+  }
+
+  try {
+    loadingServices.value = true;
+    const tslData = await fetchThingModelTSL(productId);
+
+    if (!tslData?.services) {
+      serviceList.value = [];
+      return;
+    }
+
+    serviceList.value = tslData.services;
+  } catch (error) {
+    console.error('加载服务列表失败 ：', error);
+    serviceList.value = [];
+  } finally {
+    loadingServices.value = false;
+  }
+}
+
+/**
+ * 从TSL加载服务信息（用于编辑模式回显）
+ * @param productId 产品ID
+ * @param serviceIdentifier 服务标识符
+ */
+async function loadServiceFromTSL(
+  productId: number,
+  serviceIdentifier: string,
+) {
+  // 先加载服务列表
+  await loadServiceList(productId);
+
+  // 然后设置选中的服务
+  const service = serviceList.value.find(
+    (s: any) => s.identifier === serviceIdentifier,
+  );
+  if (service) {
+    selectedService.value = service;
+  }
+}
+
+/**
+ * 根据参数类型获取默认值
+ * @param param 参数对象
+ * @returns 默认值
+ */
+function getDefaultValueForParam(param: any) {
+  switch (param.dataType) {
+    case IoTDataSpecsDataTypeEnum.BOOL: {
+      return false;
+    }
+    case IoTDataSpecsDataTypeEnum.DOUBLE:
+    case IoTDataSpecsDataTypeEnum.FLOAT: {
+      return 0;
+    }
+    case IoTDataSpecsDataTypeEnum.ENUM: {
+      // 如果有枚举值，使用第一个
+      if (
+        param.dataSpecs?.dataSpecsList &&
+        param.dataSpecs.dataSpecsList.length > 0
+      ) {
+        return param.dataSpecs.dataSpecsList[0].value;
+      }
+      return '';
+    }
+    case IoTDataSpecsDataTypeEnum.INT: {
+      return 0;
+    }
+    case IoTDataSpecsDataTypeEnum.TEXT: {
+      return '';
+    }
+    default: {
+      return '';
+    }
+  }
+}
+
+const isInitialized = ref(false); // 防止重复初始化的标志
+
+/**
+ * 初始化组件数据
+ */
+async function initializeComponent() {
+  if (isInitialized.value) return;
+
+  const currentAction = action.value;
+  if (!currentAction) return;
+
+  // 如果已经选择了产品且是属性设置类型，加载物模型
+  if (currentAction.productId && isPropertySetAction.value) {
+    await loadThingModelProperties(currentAction.productId);
+  }
+
+  // 如果是服务调用类型且已有标识符，初始化服务选择
+  if (
+    currentAction.productId &&
+    isServiceInvokeAction.value &&
+    currentAction.identifier
+  ) {
+    // 加载物模型TSL以获取服务信息
+    await loadServiceFromTSL(currentAction.productId, currentAction.identifier);
+  }
+
+  isInitialized.value = true;
+}
+
+/** 组件初始化 */
+onMounted(() => {
+  initializeComponent();
+});
+
+/** 监听关键字段的变化，避免深度监听导致的性能问题 */
+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) {
+        await loadThingModelProperties(newProductId as number);
+      } else if (newProductId && isServiceInvokeAction.value) {
+        await loadServiceList(newProductId as number);
+      }
+    }
+
+    // 服务标识符变化时更新选中的服务
+    if (
+      newIdentifier !== oldIdentifier &&
+      newProductId &&
+      isServiceInvokeAction.value &&
+      newIdentifier
+    ) {
+      const service = serviceList.value.find(
+        (s: any) => s.identifier === newIdentifier,
+      );
+      if (service) {
+        selectedService.value = service;
+      }
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="gap-[16px] flex flex-col">
+    <!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 -->
+    <ElRow :gutter="16">
+      <ElCol :span="12">
+        <ElFormItem label="产品" required>
+          <ProductSelector
+            v-model="action.productId"
+            @change="handleProductChange"
+          />
+        </ElFormItem>
+      </ElCol>
+      <ElCol :span="12">
+        <ElFormItem label="设备" required>
+          <DeviceSelector
+            v-model="action.deviceId"
+            :product-id="action.productId"
+            @change="handleDeviceChange"
+          />
+        </ElFormItem>
+      </ElCol>
+    </ElRow>
+
+    <!-- 服务选择 - 服务调用类型时显示 -->
+    <div v-if="action.productId && isServiceInvokeAction" class="space-y-[16px]">
+      <ElFormItem label="服务" required>
+        <ElSelect
+          v-model="action.identifier"
+          placeholder="请选择服务"
+          filterable
+          clearable
+          class="w-full"
+          :loading="loadingServices"
+          @change="handleServiceChange"
+        >
+          <ElOption
+            v-for="service in serviceList"
+            :key="service.identifier"
+            :label="service.name"
+            :value="service.identifier!"
+          >
+            <div class="flex items-center justify-between">
+              <span>{{ service.name }}</span>
+              <ElTag
+                :type="service.callType === 'sync' ? 'primary' : 'success'"
+                size="small"
+              >
+                {{ service.callType === 'sync' ? '同步' : '异步' }}
+              </ElTag>
+            </div>
+          </ElOption>
+        </ElSelect>
+      </ElFormItem>
+
+      <!-- 服务参数配置 -->
+      <div v-if="action.identifier" class="space-y-[16px]">
+        <ElFormItem label="服务参数" required>
+          <JsonParamsInput
+            v-model="paramsValue"
+            type="service"
+            :config="{ service: selectedService } as any"
+            placeholder="请输入 JSON 格式的服务参数"
+          />
+        </ElFormItem>
+      </div>
+    </div>
+
+    <!-- 控制参数配置 - 属性设置类型时显示 -->
+    <div v-if="action.productId && isPropertySetAction" class="space-y-[16px]">
+      <!-- 参数配置 -->
+      <ElFormItem label="参数" required>
+        <JsonParamsInput
+          v-model="paramsValue"
+          type="property"
+          :config="{ properties: thingModelProperties }"
+          placeholder="请输入 JSON 格式的控制参数"
+        />
+      </ElFormItem>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/configs/device-trigger-config.vue b/apps/web-ele/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
new file mode 100644
index 000000000..b9a774f3b
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
@@ -0,0 +1,271 @@
+<!-- 设备触发配置组件 -->
+<script setup lang="ts">
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { nextTick } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import { ElButton, ElTag } from 'element-plus';
+
+import MainConditionInnerConfig from './main-condition-inner-config.vue';
+import SubConditionGroupConfig from './sub-condition-group-config.vue';
+
+/** 设备触发配置组件 */
+defineOptions({ name: 'DeviceTriggerConfig' });
+
+const props = defineProps<{
+  index: number;
+  modelValue: RuleSceneApi.Trigger;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RuleSceneApi.Trigger): void;
+  (e: 'triggerTypeChange', type: number): void;
+}>();
+
+const trigger = useVModel(props, 'modelValue', emit);
+
+const maxSubGroups = 3; // 最多 3 个子条件组
+const maxConditionsPerGroup = 3; // 每组最多 3 个条件
+
+/**
+ * 更新条件
+ * @param condition 条件对象
+ */
+function updateCondition(condition: RuleSceneApi.Trigger) {
+  trigger.value = condition;
+}
+
+/**
+ * 处理触发器类型变化事件
+ * @param type 触发器类型
+ */
+function handleTriggerTypeChange(type: number) {
+  trigger.value.type = type;
+  emit('triggerTypeChange', type);
+}
+
+/** 添加子条件组 */
+async function addSubGroup() {
+  if (!trigger.value.conditionGroups) {
+    trigger.value.conditionGroups = [];
+  }
+
+  // 检查是否达到最大子组数量限制
+  if (trigger.value.conditionGroups?.length >= maxSubGroups) {
+    return;
+  }
+
+  // 使用 nextTick 确保响应式更新完成后再添加新的子组
+  await nextTick();
+  if (trigger.value.conditionGroups) {
+    trigger.value.conditionGroups.push([] as any);
+  }
+}
+
+/**
+ * 移除子条件组
+ * @param index 子条件组索引
+ */
+function removeSubGroup(index: number) {
+  if (trigger.value.conditionGroups) {
+    trigger.value.conditionGroups.splice(index, 1);
+  }
+}
+
+/**
+ * 更新子条件组
+ * @param index 子条件组索引
+ * @param subGroup 子条件组数据
+ */
+function updateSubGroup(index: number, subGroup: any) {
+  if (trigger.value.conditionGroups) {
+    trigger.value.conditionGroups[index] = subGroup;
+  }
+}
+
+/** 移除整个条件组 */
+function removeConditionGroup() {
+  trigger.value.conditionGroups = undefined;
+}
+</script>
+
+<template>
+  <div class="gap-[16px] flex flex-col">
+    <!-- 主条件配置 - 默认直接展示 -->
+    <div class="space-y-[16px]">
+      <!-- 主条件配置 -->
+      <div class="gap-[16px] flex flex-col">
+        <!-- 主条件配置 -->
+        <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"
+          >
+            <div class="gap-[12px] flex items-center">
+              <div
+                class="gap-[8px] text-[16px] font-600 flex items-center text-green-700"
+              >
+                <div
+                  class="w-[24px] h-[24px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
+                >
+                  主
+                </div>
+                <span>主条件</span>
+              </div>
+              <ElTag size="small" type="success">必须满足</ElTag>
+            </div>
+          </div>
+
+          <!-- 主条件内容配置 -->
+          <MainConditionInnerConfig
+            :model-value="trigger"
+            @update:model-value="updateCondition"
+            :trigger-type="trigger.type as any"
+            @trigger-type-change="handleTriggerTypeChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <!-- 条件组配置 -->
+    <div class="space-y-[16px]">
+      <!-- 条件组配置 -->
+      <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"
+        >
+          <div class="gap-[12px] flex items-center">
+            <div
+              class="gap-[8px] text-[16px] font-600 flex items-center text-green-700"
+            >
+              <div
+                class="w-[24px] h-[24px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
+              >
+                组
+              </div>
+              <span>附加条件组</span>
+            </div>
+            <ElTag size="small" type="success">与"主条件"为且关系</ElTag>
+            <ElTag size="small" type="info">
+              {{ trigger.conditionGroups?.length || 0 }} 个子条件组
+            </ElTag>
+          </div>
+          <div class="gap-[8px] flex items-center">
+            <ElButton
+              type="primary"
+              size="small"
+              @click="addSubGroup"
+              :disabled="(trigger.conditionGroups?.length || 0) >= maxSubGroups"
+            >
+              <IconifyIcon icon="lucide:plus" />
+              添加子条件组
+            </ElButton>
+            <ElButton type="danger" size="small" link @click="removeConditionGroup">
+              <IconifyIcon icon="lucide:trash-2" />
+              删除条件组
+            </ElButton>
+          </div>
+        </div>
+
+        <!-- 子条件组列表 -->
+        <div
+          v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
+          class="space-y-[16px]"
+        >
+          <!-- 逻辑关系说明 -->
+          <div class="relative">
+            <div
+              v-for="(subGroup, subGroupIndex) in trigger.conditionGroups"
+              :key="`sub-group-${subGroupIndex}`"
+              class="relative"
+            >
+              <!-- 子条件组容器 -->
+              <div
+                class="rounded-[8px] border-2 border-orange-200 bg-orange-50 shadow-sm transition-shadow hover:shadow-md"
+              >
+                <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"
+                >
+                  <div class="gap-[12px] flex items-center">
+                    <div
+                      class="gap-[8px] text-[16px] font-600 flex items-center text-orange-700"
+                    >
+                      <div
+                        class="w-[24px] h-[24px] text-[12px] flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
+                      >
+                        {{ subGroupIndex + 1 }}
+                      </div>
+                      <span>子条件组 {{ subGroupIndex + 1 }}</span>
+                    </div>
+                    <ElTag size="small" type="warning" class="font-500">
+                      组内条件为"且"关系
+                    </ElTag>
+                    <ElTag size="small" type="info">
+                      {{ (subGroup as any)?.length || 0 }}个条件
+                    </ElTag>
+                  </div>
+                  <ElButton
+                    type="danger"
+                    size="small"
+                    link
+                    @click="removeSubGroup(subGroupIndex)"
+                    class="hover:bg-red-50"
+                  >
+                    <IconifyIcon icon="lucide:trash-2" />
+                    删除组
+                  </ElButton>
+                </div>
+
+                <SubConditionGroupConfig
+                  :model-value="subGroup as any"
+                  @update:model-value="
+                    (value) => updateSubGroup(subGroupIndex, value)
+                  "
+                  :trigger-type="trigger.type as any"
+                  :max-conditions="maxConditionsPerGroup"
+                />
+              </div>
+
+              <!-- 子条件组间的'或'连接符 -->
+              <div
+                v-if="subGroupIndex < trigger.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"></div>
+                  <!-- 或标签 -->
+                  <div
+                    class="px-[16px] py-[6px] rounded-full border-2 border-orange-300 bg-orange-100"
+                  >
+                    <span class="text-[14px] font-600 text-orange-600">或</span>
+                  </div>
+                  <!-- 连接线 -->
+                  <div class="w-[32px] h-[1px] bg-orange-300"></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"
+        >
+          <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue b/apps/web-ele/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
new file mode 100644
index 000000000..a1107a7ab
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { computed, ref } from 'vue';
+
+import {
+  getTriggerTypeLabel,
+  IoTDeviceStatusEnum,
+  IotRuleSceneTriggerConditionParameterOperatorEnum,
+  IotRuleSceneTriggerTypeEnum,
+  triggerTypeOptions,
+} from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { ElCol, ElFormItem, ElOption, ElRow, ElSelect } from 'element-plus';
+
+import JsonParamsInput from '../inputs/json-params-input.vue';
+import ValueInput from '../inputs/value-input.vue';
+import DeviceSelector from '../selectors/device-selector.vue';
+import OperatorSelector from '../selectors/operator-selector.vue';
+import ProductSelector from '../selectors/product-selector.vue';
+import PropertySelector from '../selectors/property-selector.vue';
+
+/** 主条件内部配置组件 */
+defineOptions({ name: 'MainConditionInnerConfig' });
+
+const props = defineProps<{
+  modelValue: RuleSceneApi.Trigger;
+  triggerType: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RuleSceneApi.Trigger): void;
+  (e: 'triggerTypeChange', value: number): void;
+}>();
+
+/** 获取设备状态变更选项（用于触发器配置） */
+const deviceStatusChangeOptions = [
+  {
+    label: IoTDeviceStatusEnum.ONLINE.label,
+    value: IoTDeviceStatusEnum.ONLINE.value,
+  },
+  {
+    label: IoTDeviceStatusEnum.OFFLINE.label,
+    value: IoTDeviceStatusEnum.OFFLINE.value,
+  },
+];
+
+const condition = useVModel(props, 'modelValue', emit);
+const propertyType = ref(''); // 属性类型
+const propertyConfig = ref<any>(null); // 属性配置
+
+// 计算属性：是否为设备属性触发器
+const isDevicePropertyTrigger = computed(() => {
+  return (
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+  );
+});
+
+// 计算属性：是否为设备状态触发器
+const isDeviceStatusTrigger = computed(() => {
+  return props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE;
+});
+
+// 计算属性：是否需要操作符选择（服务调用和事件上报不需要操作符）
+const needsOperatorSelector = computed(() => {
+  const noOperatorTriggerTypes = [
+    IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
+    IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST,
+  ] as number[];
+  return !noOperatorTriggerTypes.includes(props.triggerType);
+});
+
+// 计算属性：是否需要宽列布局（服务调用和事件上报不需要操作符列，所以值输入列更宽）
+const isWideValueColumn = computed(() => {
+  const wideColumnTriggerTypes = [
+    IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
+    IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST,
+  ] as number[];
+  return wideColumnTriggerTypes.includes(props.triggerType);
+});
+
+// 计算属性：值输入字段的标签文本
+const valueInputLabel = computed(() => {
+  return props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+    ? '服务参数'
+    : '比较值';
+});
+
+// 计算属性：服务配置 - 用于 JsonParamsInput
+const serviceConfig = computed(() => {
+  if (
+    propertyConfig.value &&
+    props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+  ) {
+    return {
+      service: {
+        name: propertyConfig.value.name || '服务',
+        inputParams: propertyConfig.value.inputParams || [],
+      },
+    };
+  }
+  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 字段名
+ * @param value 字段值
+ */
+function updateConditionField(field: any, value: any) {
+  (condition.value as any)[field] = value;
+}
+
+/**
+ * 处理触发器类型变化事件
+ * @param type 触发器类型
+ */
+function handleTriggerTypeChange(type: number) {
+  emit('triggerTypeChange', type);
+}
+
+/** 处理产品变化事件 */
+function handleProductChange() {
+  // 产品变化时清空设备和属性
+  condition.value.deviceId = undefined;
+  condition.value.identifier = '';
+}
+
+/** 处理设备变化事件 */
+function handleDeviceChange() {
+  // 设备变化时清空属性
+  condition.value.identifier = '';
+}
+
+/**
+ * 处理属性变化事件
+ * @param propertyInfo 属性信息对象
+ */
+function handlePropertyChange(propertyInfo: any) {
+  if (propertyInfo) {
+    propertyType.value = propertyInfo.type;
+    propertyConfig.value = propertyInfo.config;
+
+    // 对于事件上报和服务调用，自动设置操作符为 '='
+    if (
+      props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+      props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+    ) {
+      condition.value.operator =
+        IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value;
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- 触发事件类型选择 -->
+    <ElFormItem label="触发事件类型" required>
+      <ElSelect
+        :model-value="triggerType"
+        @update:model-value="handleTriggerTypeChange"
+        placeholder="请选择触发事件类型"
+        class="w-full"
+      >
+        <ElOption
+          v-for="option in triggerTypeOptions"
+          :key="option.value"
+          :label="option.label"
+          :value="option.value"
+        />
+      </ElSelect>
+    </ElFormItem>
+
+    <!-- 设备属性条件配置 -->
+    <div v-if="isDevicePropertyTrigger" class="space-y-4">
+      <!-- 产品设备选择 -->
+      <ElRow :gutter="16">
+        <ElCol :span="12">
+          <ElFormItem label="产品" required>
+            <ProductSelector
+              :model-value="condition.productId"
+              @update:model-value="
+                (value) => updateConditionField('productId', value)
+              "
+              @change="handleProductChange"
+            />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="设备" required>
+            <DeviceSelector
+              :model-value="condition.deviceId"
+              @update:model-value="
+                (value) => updateConditionField('deviceId', value)
+              "
+              :product-id="condition.productId"
+              @change="handleDeviceChange"
+            />
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+
+      <!-- 属性配置 -->
+      <ElRow :gutter="16">
+        <!-- 属性/事件/服务选择 -->
+        <ElCol :span="6">
+          <ElFormItem label="监控项" required>
+            <PropertySelector
+              :model-value="condition.identifier"
+              @update:model-value="
+                (value) => updateConditionField('identifier', value)
+              "
+              :trigger-type="triggerType"
+              :product-id="condition.productId"
+              :device-id="condition.deviceId"
+              @change="handlePropertyChange"
+            />
+          </ElFormItem>
+        </ElCol>
+
+        <!-- 操作符选择 - 服务调用和事件上报不需要操作符 -->
+        <ElCol v-if="needsOperatorSelector" :span="6">
+          <ElFormItem label="操作符" required>
+            <OperatorSelector
+              :model-value="condition.operator"
+              @update:model-value="
+                (value) => updateConditionField('operator', value)
+              "
+              :property-type="propertyType"
+            />
+          </ElFormItem>
+        </ElCol>
+
+        <!-- 值输入 -->
+        <ElCol :span="isWideValueColumn ? 18 : 12">
+          <ElFormItem :label="valueInputLabel" required>
+            <!-- 服务调用参数配置 -->
+            <JsonParamsInput
+              v-if="
+                triggerType ===
+                IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
+              "
+              v-model="condition.value"
+              type="service"
+              :config="serviceConfig as any"
+              placeholder="请输入 JSON 格式的服务参数"
+            />
+            <!-- 事件上报参数配置 -->
+            <JsonParamsInput
+              v-else-if="
+                triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
+              "
+              v-model="condition.value"
+              type="event"
+              :config="eventConfig as any"
+              placeholder="请输入 JSON 格式的事件参数"
+            />
+            <!-- 普通值输入 -->
+            <ValueInput
+              v-else
+              :model-value="condition.value"
+              @update:model-value="
+                (value) => updateConditionField('value', value)
+              "
+              :property-type="propertyType"
+              :operator="condition.operator"
+              :property-config="propertyConfig"
+            />
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+    </div>
+
+    <!-- 设备状态条件配置 -->
+    <div v-else-if="isDeviceStatusTrigger" class="space-y-4">
+      <!-- 设备状态触发器使用简化的配置 -->
+      <ElRow :gutter="16">
+        <ElCol :span="12">
+          <ElFormItem label="产品" required>
+            <ProductSelector
+              :model-value="condition.productId"
+              @update:model-value="
+                (value) => updateConditionField('productId', value)
+              "
+              @change="handleProductChange"
+            />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="设备" required>
+            <DeviceSelector
+              :model-value="condition.deviceId"
+              @update:model-value="
+                (value) => updateConditionField('deviceId', value)
+              "
+              :product-id="condition.productId"
+              @change="handleDeviceChange"
+            />
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+      <ElRow :gutter="16">
+        <ElCol :span="6">
+          <ElFormItem label="操作符" required>
+            <ElSelect
+              :model-value="condition.operator"
+              @update:model-value="
+                (value: any) => updateConditionField('operator', value)
+              "
+              placeholder="请选择操作符"
+              class="w-full"
+            >
+              <ElOption
+                :label="
+                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
+                "
+                :value="
+                  IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
+                "
+              />
+            </ElSelect>
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="6">
+          <ElFormItem label="参数" required>
+            <ElSelect
+              :model-value="condition.value"
+              @update:model-value="
+                (value: any) => updateConditionField('value', value)
+              "
+              placeholder="请选择操作符"
+              class="w-full"
+            >
+              <ElOption
+                v-for="option in deviceStatusChangeOptions"
+                :key="option.value"
+                :label="option.label"
+                :value="option.value"
+              />
+            </ElSelect>
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+    </div>
+
+    <!-- 其他触发类型的提示 -->
+    <div v-else class="py-5 text-center">
+      <p class="mb-1 text-sm text-[var(--el-text-color-secondary)]">
+        当前触发事件类型：{{ getTriggerTypeLabel(triggerType) }}
+      </p>
+      <p class="text-xs text-[var(--el-text-color-secondary)]">此触发类型暂不需要配置额外条件</p>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue b/apps/web-ele/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
new file mode 100644
index 000000000..40c1bb942
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { computed, nextTick } from 'vue';
+
+import {
+  IotRuleSceneTriggerConditionParameterOperatorEnum,
+  IotRuleSceneTriggerConditionTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import { ElButton } from 'element-plus';
+
+import ConditionConfig from './condition-config.vue';
+
+/** 子条件组配置组件 */
+defineOptions({ name: 'SubConditionGroupConfig' });
+
+const props = defineProps<{
+  maxConditions?: number;
+  modelValue: RuleSceneApi.TriggerCondition[];
+  triggerType: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RuleSceneApi.TriggerCondition[]): void;
+}>();
+
+const subGroup = useVModel(props, 'modelValue', emit);
+
+const maxConditions = computed(() => props.maxConditions || 3); // 最大条件数量
+
+/** 添加条件 */
+async function addCondition() {
+  // 确保 subGroup.value 是一个数组
+  if (!subGroup.value) {
+    subGroup.value = [];
+  }
+
+  // 检查是否达到最大条件数量限制
+  if (subGroup.value?.length >= maxConditions.value) {
+    return;
+  }
+
+  const newCondition: RuleSceneApi.TriggerCondition = {
+    type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
+    productId: undefined,
+    deviceId: undefined,
+    identifier: '',
+    operator: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value, // 使用枚举默认值
+    param: '',
+  };
+
+  // 使用 nextTick 确保响应式更新完成后再添加新条件
+  await nextTick();
+  if (subGroup.value) {
+    subGroup.value.push(newCondition);
+  }
+}
+
+/**
+ * 移除条件
+ * @param index 条件索引
+ */
+function removeCondition(index: number) {
+  if (subGroup.value) {
+    subGroup.value.splice(index, 1);
+  }
+}
+
+/**
+ * 更新条件
+ * @param index 条件索引
+ * @param condition 条件对象
+ */
+function updateCondition(
+  index: number,
+  condition: RuleSceneApi.TriggerCondition,
+) {
+  if (subGroup.value) {
+    subGroup.value[index] = condition;
+  }
+}
+</script>
+
+<template>
+  <div class="p-4">
+    <!-- 空状态 -->
+    <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-[var(--el-text-color-secondary)]" />
+        <div class="text-[var(--el-text-color-secondary)]">
+          <p class="mb-1 text-base font-bold">暂无条件</p>
+          <p class="text-xs">点击下方按钮添加第一个条件</p>
+        </div>
+        <ElButton type="primary" @click="addCondition">
+          <IconifyIcon icon="lucide:plus" />
+          添加条件
+        </ElButton>
+      </div>
+    </div>
+
+    <!-- 条件列表 -->
+    <div v-else class="space-y-4">
+      <div
+        v-for="(condition, conditionIndex) in subGroup"
+        :key="`condition-${conditionIndex}`"
+        class="relative"
+      >
+        <!-- 条件配置 -->
+        <div
+          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"
+          >
+            <div class="flex items-center gap-2">
+              <div
+                class="flex size-5 items-center justify-center rounded-full bg-primary text-xs font-bold text-white"
+              >
+                {{ conditionIndex + 1 }}
+              </div>
+              <span class="text-base font-bold text-[var(--el-text-color-primary)]">
+                条件 {{ conditionIndex + 1 }}
+              </span>
+            </div>
+            <ElButton
+              type="danger"
+              size="small"
+              link
+              @click="removeCondition(conditionIndex)"
+              v-if="subGroup!.length > 1"
+              class="hover:bg-red-50"
+            >
+              <IconifyIcon icon="lucide:trash-2" />
+            </ElButton>
+          </div>
+
+          <div class="p-3">
+            <ConditionConfig
+              :model-value="condition"
+              @update:model-value="
+                (value: RuleSceneApi.TriggerCondition) =>
+                  updateCondition(conditionIndex, value)
+              "
+              :trigger-type="triggerType"
+            />
+          </div>
+        </div>
+      </div>
+
+      <!-- 添加条件按钮 -->
+      <div
+        v-if="
+          subGroup && subGroup.length > 0 && subGroup.length < maxConditions
+        "
+        class="py-4 text-center"
+      >
+        <ElButton type="primary" plain @click="addCondition">
+          <IconifyIcon icon="lucide:plus" />
+          继续添加条件
+        </ElButton>
+        <span class="mt-2 block text-xs text-[var(--el-text-color-secondary)]">
+          最多可添加 {{ maxConditions }} 个条件
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue b/apps/web-ele/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue
new file mode 100644
index 000000000..25665f795
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue
@@ -0,0 +1,189 @@
+<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 { useVModel } from '@vueuse/core';
+import { ElButton, ElTag } from 'element-plus';
+
+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>
+        <ElTag type="primary">定时触发时需满足以下条件</ElTag>
+        <ElTag type="warning">
+          {{ conditionGroups?.length || 0 }} 个子条件组
+        </ElTag>
+      </div>
+      <ElButton
+        type="primary"
+        size="small"
+        :disabled="(conditionGroups?.length || 0) >= maxGroups"
+        @click="addConditionGroup"
+      >
+        <IconifyIcon icon="lucide:plus" />
+        添加条件组
+      </ElButton>
+    </div>
+
+    <!-- 条件组列表 -->
+    <div
+      v-if="conditionGroups && conditionGroups.length > 0"
+      class="space-y-[16px]"
+    >
+      <div
+        v-for="(group, groupIndex) in conditionGroups"
+        :key="`group-${groupIndex}`"
+        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>
+              <ElTag type="warning" class="font-medium">
+                组内条件为「且」关系
+              </ElTag>
+              <ElTag type="info"> {{ group?.length || 0 }} 个条件 </ElTag>
+            </div>
+            <ElButton
+              link
+              type="danger"
+              size="small"
+              class="hover:bg-red-50"
+              @click="removeConditionGroup(groupIndex)"
+            >
+              <IconifyIcon icon="lucide:trash-2" />
+              删除组
+            </ElButton>
+          </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-ele/src/views/iot/rule/scene/form/inputs/json-params-input.vue b/apps/web-ele/src/views/iot/rule/scene/form/inputs/json-params-input.vue
new file mode 100644
index 000000000..39218020b
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/inputs/json-params-input.vue
@@ -0,0 +1,590 @@
+<!-- JSON参数输入组件 - 通用版本 -->
+<script setup lang="ts">
+import type { JsonParamsInputType } from '@vben/constants';
+
+import { computed, nextTick, onMounted, ref, watch } from 'vue';
+
+import {
+  IoTDataSpecsDataTypeEnum,
+  JSON_PARAMS_EXAMPLE_VALUES,
+  JSON_PARAMS_INPUT_CONSTANTS,
+  JSON_PARAMS_INPUT_ICONS,
+  JsonParamsInputTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import { ElButton, ElInput, ElPopover, ElTag } from 'element-plus';
+
+/** JSON参数输入组件 - 通用版本 */
+defineOptions({ name: 'JsonParamsInput' });
+
+const props = withDefaults(defineProps<Props>(), {
+  type: JsonParamsInputTypeEnum.SERVICE,
+  placeholder: JSON_PARAMS_INPUT_CONSTANTS.PLACEHOLDER,
+});
+
+const emit = defineEmits<Emits>();
+
+interface JsonParamsConfig {
+  // 服务配置
+  service?: {
+    inputParams?: any[];
+    name: string;
+  };
+  // 事件配置
+  event?: {
+    name: string;
+    outputParams?: any[];
+  };
+  // 属性配置
+  properties?: any[];
+  // 自定义配置
+  custom?: {
+    name: string;
+    params: any[];
+  };
+}
+
+interface Props {
+  modelValue: string;
+  config: JsonParamsConfig;
+  type?: JsonParamsInputType;
+  placeholder?: string;
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void;
+}
+
+const localValue = useVModel(props, 'modelValue', emit, {
+  defaultValue: '',
+});
+
+const paramsJson = ref(''); // JSON参数字符串
+const jsonError = ref(''); // JSON验证错误信息
+
+// 计算属性：参数列表
+const paramsList = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.CUSTOM: {
+      return props.config?.custom?.params || [];
+    }
+    case JsonParamsInputTypeEnum.EVENT: {
+      return props.config?.event?.outputParams || [];
+    }
+    case JsonParamsInputTypeEnum.PROPERTY: {
+      return props.config?.properties || [];
+    }
+    case JsonParamsInputTypeEnum.SERVICE: {
+      return props.config?.service?.inputParams || [];
+    }
+    default: {
+      return [];
+    }
+  }
+});
+
+// 计算属性：标题
+const title = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.CUSTOM: {
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.CUSTOM(
+        props.config?.custom?.name,
+      );
+    }
+    case JsonParamsInputTypeEnum.EVENT: {
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.EVENT(
+        props.config?.event?.name,
+      );
+    }
+    case JsonParamsInputTypeEnum.PROPERTY: {
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.PROPERTY;
+    }
+    case JsonParamsInputTypeEnum.SERVICE: {
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.SERVICE(
+        props.config?.service?.name,
+      );
+    }
+    default: {
+      return JSON_PARAMS_INPUT_CONSTANTS.TITLES.DEFAULT;
+    }
+  }
+});
+
+// 计算属性：标题图标
+const titleIcon = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.CUSTOM: {
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.CUSTOM;
+    }
+    case JsonParamsInputTypeEnum.EVENT: {
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.EVENT;
+    }
+    case JsonParamsInputTypeEnum.PROPERTY: {
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.PROPERTY;
+    }
+    case JsonParamsInputTypeEnum.SERVICE: {
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.SERVICE;
+    }
+    default: {
+      return JSON_PARAMS_INPUT_ICONS.TITLE_ICONS.DEFAULT;
+    }
+  }
+});
+
+// 计算属性：参数图标
+const paramsIcon = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.CUSTOM: {
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.CUSTOM;
+    }
+    case JsonParamsInputTypeEnum.EVENT: {
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.EVENT;
+    }
+    case JsonParamsInputTypeEnum.PROPERTY: {
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.PROPERTY;
+    }
+    case JsonParamsInputTypeEnum.SERVICE: {
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.SERVICE;
+    }
+    default: {
+      return JSON_PARAMS_INPUT_ICONS.PARAMS_ICONS.DEFAULT;
+    }
+  }
+});
+
+// 计算属性：参数标签
+const paramsLabel = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.CUSTOM: {
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.CUSTOM;
+    }
+    case JsonParamsInputTypeEnum.EVENT: {
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.EVENT;
+    }
+    case JsonParamsInputTypeEnum.PROPERTY: {
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.PROPERTY;
+    }
+    case JsonParamsInputTypeEnum.SERVICE: {
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.SERVICE;
+    }
+    default: {
+      return JSON_PARAMS_INPUT_CONSTANTS.PARAMS_LABELS.DEFAULT;
+    }
+  }
+});
+
+// 计算属性：空状态消息
+const emptyMessage = computed(() => {
+  switch (props.type) {
+    case JsonParamsInputTypeEnum.CUSTOM: {
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.CUSTOM;
+    }
+    case JsonParamsInputTypeEnum.EVENT: {
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.EVENT;
+    }
+    case JsonParamsInputTypeEnum.PROPERTY: {
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.PROPERTY;
+    }
+    case JsonParamsInputTypeEnum.SERVICE: {
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.SERVICE;
+    }
+    default: {
+      return JSON_PARAMS_INPUT_CONSTANTS.EMPTY_MESSAGES.DEFAULT;
+    }
+  }
+});
+
+// 计算属性：无配置消息
+// const noConfigMessage = computed(() => {
+//   switch (props.type) {
+//     case JsonParamsInputTypeEnum.CUSTOM: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
+//     }
+//     case JsonParamsInputTypeEnum.EVENT: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
+//     }
+//     case JsonParamsInputTypeEnum.PROPERTY: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
+//     }
+//     case JsonParamsInputTypeEnum.SERVICE: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
+//     }
+//     default: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
+//     }
+//   }
+// });
+
+/**
+ * 处理参数变化事件
+ */
+function handleParamsChange() {
+  try {
+    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 {
+      localValue.value = '';
+    }
+
+    // 验证通过
+    jsonError.value = '';
+  } catch (error) {
+    jsonError.value = JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_ERROR(
+      error instanceof Error
+        ? error.message
+        : JSON_PARAMS_INPUT_CONSTANTS.UNKNOWN_ERROR,
+    );
+  }
+}
+
+/**
+ * 快速填充示例数据
+ */
+function fillExampleJson() {
+  paramsJson.value = generateExampleJson();
+  handleParamsChange();
+}
+
+/**
+ * 清空参数
+ */
+function clearParams() {
+  paramsJson.value = '';
+  localValue.value = '';
+  jsonError.value = '';
+}
+
+/**
+ * 获取参数类型名称
+ * @param dataType 数据类型
+ * @returns 类型名称
+ */
+function getParamTypeName(dataType: string) {
+  // 使用 constants.ts 中已有的 getDataTypeName 函数逻辑
+  const typeMap: Record<string, string> = {
+    [IoTDataSpecsDataTypeEnum.INT]: '整数',
+    [IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数',
+    [IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度',
+    [IoTDataSpecsDataTypeEnum.TEXT]: '字符串',
+    [IoTDataSpecsDataTypeEnum.BOOL]: '布尔值',
+    [IoTDataSpecsDataTypeEnum.ENUM]: '枚举',
+    [IoTDataSpecsDataTypeEnum.DATE]: '日期',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: '结构体',
+    [IoTDataSpecsDataTypeEnum.ARRAY]: '数组',
+  };
+  return typeMap[dataType] || dataType;
+}
+
+/**
+ * 获取参数类型标签样式
+ * @param dataType 数据类型
+ * @returns 标签样式
+ */
+function getParamTypeTag(dataType: string) {
+  const tagMap = {
+    [IoTDataSpecsDataTypeEnum.INT]: 'primary',
+    [IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
+    [IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
+    [IoTDataSpecsDataTypeEnum.TEXT]: 'info',
+    [IoTDataSpecsDataTypeEnum.BOOL]: 'warning',
+    [IoTDataSpecsDataTypeEnum.ENUM]: 'danger',
+    [IoTDataSpecsDataTypeEnum.DATE]: 'primary',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: 'info',
+    [IoTDataSpecsDataTypeEnum.ARRAY]: 'warning',
+  } as const;
+  return tagMap[dataType as keyof typeof tagMap] || 'info';
+}
+
+/**
+ * 获取示例值
+ * @param param 参数对象
+ * @returns 示例值
+ */
+function getExampleValue(param: any) {
+  const exampleConfig: any =
+    JSON_PARAMS_EXAMPLE_VALUES[param.dataType] ||
+    JSON_PARAMS_EXAMPLE_VALUES.DEFAULT;
+  return exampleConfig.display;
+}
+
+/**
+ * 生成示例JSON
+ * @returns JSON字符串
+ */
+function generateExampleJson() {
+  if (paramsList.value.length === 0) {
+    return '{}';
+  }
+
+  const example: Record<string, any> = {};
+  paramsList.value.forEach((param) => {
+    const exampleConfig: any =
+      JSON_PARAMS_EXAMPLE_VALUES[param.dataType] ||
+      JSON_PARAMS_EXAMPLE_VALUES.DEFAULT;
+    example[param.identifier] = exampleConfig.value;
+  });
+
+  return JSON.stringify(example, null, 2);
+}
+
+/**
+ * 处理数据回显
+ * @param value 值字符串
+ */
+function handleDataDisplay(value: string) {
+  if (!value || !value.trim()) {
+    paramsJson.value = '';
+    jsonError.value = '';
+    return;
+  }
+
+  try {
+    // 尝试解析JSON，如果成功则格式化
+    const parsed = JSON.parse(value);
+    paramsJson.value = JSON.stringify(parsed, null, 2);
+    jsonError.value = '';
+  } catch {
+    // 如果不是有效的JSON，直接使用原字符串
+    paramsJson.value = value;
+    jsonError.value = '';
+  }
+}
+
+// 监听外部值变化（编辑模式数据回显）
+watch(
+  () => localValue.value,
+  async (newValue, oldValue) => {
+    // 避免循环更新
+    if (newValue === oldValue) return;
+
+    // 使用 nextTick 确保在下一个 tick 中处理数据
+    await nextTick();
+    handleDataDisplay(newValue || '');
+  },
+  { immediate: true },
+);
+
+// 组件挂载后也尝试处理一次数据回显
+onMounted(async () => {
+  await nextTick();
+  if (localValue.value) {
+    handleDataDisplay(localValue.value);
+  }
+});
+
+// 监听配置变化
+watch(
+  () => props.config,
+  (newConfig, oldConfig) => {
+    // 只有在配置真正变化时才清空数据
+    if (
+      JSON.stringify(newConfig) !== JSON.stringify(oldConfig) && // 如果没有外部传入的值，才清空数据
+      !localValue.value
+    ) {
+      paramsJson.value = '';
+      jsonError.value = '';
+    }
+  },
+);
+</script>
+
+<template>
+  <!-- 参数配置 -->
+  <div class="w-full space-y-3">
+    <!-- JSON 输入框 -->
+    <div class="relative">
+      <ElInput
+        v-model="paramsJson"
+        type="textarea"
+        :rows="4"
+        :placeholder="placeholder"
+        @input="handleParamsChange"
+        :class="{ 'is-error': jsonError }"
+      />
+      <!-- 查看详细示例弹出层 -->
+      <div class="absolute right-2 top-2">
+        <ElPopover
+          placement="left-start"
+          :width="450"
+          trigger="click"
+          :offset="8"
+          popper-class="json-params-detail-popover"
+        >
+          <template #reference>
+            <ElButton
+              link
+              type="primary"
+              circle
+              size="small"
+              :title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE"
+            >
+              <IconifyIcon icon="ep:info-filled" />
+            </ElButton>
+          </template>
+
+          <template #default>
+            <!-- 弹出层内容 -->
+            <div class="json-params-detail-content">
+              <div class="mb-4 flex items-center gap-2">
+                <IconifyIcon
+                  :icon="titleIcon"
+                  class="text-lg text-[var(--el-color-primary)]"
+                />
+                <span class="text-base font-bold text-[var(--el-text-color-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-[var(--el-color-primary)]"
+                    />
+                    <span class="text-base font-bold text-[var(--el-text-color-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-[var(--el-text-color-primary)]">
+                          {{ param.name }}
+                          <ElTag
+                            v-if="param.required"
+                            size="small"
+                            type="danger"
+                            class="ml-1"
+                          >
+                            {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
+                          </ElTag>
+                        </div>
+                        <div class="text-xs text-[var(--el-text-color-secondary)]">
+                          {{ param.identifier }}
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-2">
+                        <ElTag :type="getParamTypeTag(param.dataType)" size="small">
+                          {{ getParamTypeName(param.dataType) }}
+                        </ElTag>
+                        <span class="text-xs text-[var(--el-text-color-secondary)]">
+                          {{ getExampleValue(param) }}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="ml-6 mt-3">
+                    <div class="mb-1 text-xs text-[var(--el-text-color-secondary)]">
+                      {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
+                    </div>
+                    <pre
+                      class="border-l-3px overflow-x-auto rounded-lg border-[var(--el-color-primary)] bg-[var(--el-fill-color-light)] p-3 text-sm text-[var(--el-text-color-primary)]"
+                    >
+                      <code>{{ generateExampleJson() }}</code>
+                    </pre>
+                  </div>
+                </div>
+
+                <!-- 无参数提示 -->
+                <div v-else>
+                  <div class="py-4 text-center">
+                    <p class="text-sm text-[var(--el-text-color-secondary)]">
+                      {{ emptyMessage }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </template>
+        </ElPopover>
+      </div>
+    </div>
+
+    <!-- 验证状态和错误提示 -->
+    <div class="flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <IconifyIcon
+          :icon="
+            jsonError
+              ? JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.ERROR
+              : JSON_PARAMS_INPUT_ICONS.STATUS_ICONS.SUCCESS
+          "
+          :class="jsonError ? 'text-danger' : 'text-success'"
+          class="text-sm"
+        />
+        <span
+          :class="jsonError ? 'text-danger' : 'text-success'"
+          class="text-xs"
+        >
+          {{ jsonError || JSON_PARAMS_INPUT_CONSTANTS.JSON_FORMAT_CORRECT }}
+        </span>
+      </div>
+
+      <!-- 快速填充按钮 -->
+      <div v-if="paramsList.length > 0" class="flex items-center gap-2">
+        <span class="text-xs text-[var(--el-text-color-secondary)]">
+          {{ JSON_PARAMS_INPUT_CONSTANTS.QUICK_FILL_LABEL }}
+        </span>
+        <ElButton size="small" type="primary" plain @click="fillExampleJson">
+          {{ JSON_PARAMS_INPUT_CONSTANTS.EXAMPLE_DATA_BUTTON }}
+        </ElButton>
+        <ElButton size="small" type="danger" @click="clearParams">
+          {{ JSON_PARAMS_INPUT_CONSTANTS.CLEAR_BUTTON }}
+        </ElButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 弹出层内容样式 */
+.json-params-detail-content {
+  padding: 4px 0;
+}
+
+/* 弹出层自定义样式 */
+:global(.json-params-detail-popover) {
+  max-width: 500px !important;
+}
+
+:global(.json-params-detail-popover .el-popover__content) {
+  padding: 16px !important;
+}
+
+/* JSON 代码块样式 */
+.json-params-detail-content pre {
+  max-height: 200px;
+  overflow-y: auto;
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/inputs/value-input.vue b/apps/web-ele/src/views/iot/rule/scene/form/inputs/value-input.vue
new file mode 100644
index 000000000..78ed75a2b
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/inputs/value-input.vue
@@ -0,0 +1,302 @@
+<!-- 值输入组件 -->
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+
+import {
+  IoTDataSpecsDataTypeEnum,
+  IotRuleSceneTriggerConditionParameterOperatorEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElDatePicker,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElSelect,
+  ElTag,
+  ElTooltip,
+} from 'element-plus';
+
+/** 值输入组件 */
+defineOptions({ name: 'ValueInput' });
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
+
+interface Props {
+  modelValue?: string;
+  propertyType?: string;
+  operator?: string;
+  propertyConfig?: any;
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void;
+}
+
+const localValue = useVModel(props, 'modelValue', emit, {
+  defaultValue: '',
+});
+
+const rangeStart = ref(''); // 范围开始值
+const rangeEnd = ref(''); // 范围结束值
+const dateValue = ref(''); // 日期值
+const numberValue = ref<number>(); // 数字值
+
+/** 计算属性：枚举选项 */
+const enumOptions = computed(() => {
+  if (props.propertyConfig?.enum) {
+    return props.propertyConfig.enum.map((item: any) => ({
+      label: item.name || item.label || item.value,
+      value: item.value,
+    }));
+  }
+  return [];
+});
+
+/** 计算属性：列表预览 */
+const listPreview = computed(() => {
+  if (
+    props.operator ===
+      IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value &&
+    localValue.value
+  ) {
+    return localValue.value
+      .split(',')
+      .map((item) => item.trim())
+      .filter(Boolean);
+  }
+  return [];
+});
+
+/** 判断是否为数字类型 */
+function isNumericType() {
+  return [
+    IoTDataSpecsDataTypeEnum.DOUBLE,
+    IoTDataSpecsDataTypeEnum.FLOAT,
+    IoTDataSpecsDataTypeEnum.INT,
+  ].includes((props.propertyType || '') as any);
+}
+
+/** 获取输入框类型 */
+function getInputType() {
+  switch (props.propertyType) {
+    case IoTDataSpecsDataTypeEnum.DOUBLE:
+    case IoTDataSpecsDataTypeEnum.FLOAT:
+    case IoTDataSpecsDataTypeEnum.INT: {
+      return 'number';
+    }
+    default: {
+      return 'text';
+    }
+  }
+}
+
+/** 获取占位符文本 */
+function getPlaceholder() {
+  const typeMap: Record<string, string> = {
+    [IoTDataSpecsDataTypeEnum.TEXT]: '请输入字符串',
+    [IoTDataSpecsDataTypeEnum.INT]: '请输入整数',
+    [IoTDataSpecsDataTypeEnum.FLOAT]: '请输入浮点数',
+    [IoTDataSpecsDataTypeEnum.DOUBLE]: '请输入双精度数',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: '请输入 JSON 格式数据',
+    [IoTDataSpecsDataTypeEnum.ARRAY]: '请输入数组格式数据',
+  };
+  return typeMap[props.propertyType || ''] || '请输入值';
+}
+
+/** 获取数字精度 */
+function getPrecision() {
+  return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 0 : 2;
+}
+
+/** 获取数字步长 */
+function getStep() {
+  return props.propertyType === IoTDataSpecsDataTypeEnum.INT ? 1 : 0.1;
+}
+
+/** 获取最小值 */
+function getMin() {
+  return props.propertyConfig?.min || undefined;
+}
+
+/** 获取最大值 */
+function getMax() {
+  return props.propertyConfig?.max || undefined;
+}
+
+/** 处理范围变化事件 */
+function handleRangeChange() {
+  localValue.value =
+    rangeStart.value && rangeEnd.value
+      ? `${rangeStart.value},${rangeEnd.value}`
+      : '';
+}
+
+/** 处理日期变化事件 */
+function handleDateChange(value: any) {
+  localValue.value = value || '';
+}
+
+/** 处理数字变化事件 */
+function handleNumberChange(value: number | undefined) {
+  localValue.value = value?.toString() || '';
+}
+
+/** 监听操作符变化 */
+watch(
+  () => props.operator,
+  () => {
+    localValue.value = '';
+    rangeStart.value = '';
+    rangeEnd.value = '';
+    dateValue.value = '';
+    numberValue.value = undefined;
+  },
+);
+</script>
+
+<template>
+  <div class="w-full min-w-0">
+    <!-- 布尔值选择 -->
+    <ElSelect
+      v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL"
+      v-model="localValue"
+      placeholder="请选择布尔值"
+      class="w-full!"
+    >
+      <ElOption label="真 (true)" :value="true" />
+      <ElOption label="假 (false)" :value="false" />
+    </ElSelect>
+
+    <!-- 枚举值选择 -->
+    <ElSelect
+      v-else-if="
+        propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0
+      "
+      v-model="localValue"
+      placeholder="请选择枚举值"
+      class="w-full!"
+    >
+      <ElOption
+        v-for="option in enumOptions"
+        :key="option.value"
+        :label="option.label"
+        :value="option.value"
+      />
+    </ElSelect>
+
+    <!-- 范围输入 (between 操作符) -->
+    <div
+      v-else-if="
+        operator ===
+        IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value
+      "
+      class="w-full! flex items-center gap-2"
+    >
+      <ElInput
+        v-model="rangeStart"
+        :type="getInputType()"
+        placeholder="最小值"
+        @input="handleRangeChange"
+        class="min-w-0 flex-1"
+        style="width: auto !important"
+      />
+      <span class="whitespace-nowrap text-xs text-[var(--el-text-color-secondary)]"> 至 </span>
+      <ElInput
+        v-model="rangeEnd"
+        :type="getInputType()"
+        placeholder="最大值"
+        @input="handleRangeChange"
+        class="min-w-0 flex-1"
+      />
+    </div>
+
+    <!-- 列表输入 (in 操作符) -->
+    <div
+      v-else-if="
+        operator === IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value
+      "
+      class="w-full!"
+    >
+      <ElInput
+        v-model="localValue"
+        placeholder="请输入值列表，用逗号分隔"
+        class="w-full!"
+      >
+        <template #suffix>
+          <ElTooltip content="多个值用逗号分隔，如：1,2,3" placement="top">
+            <IconifyIcon
+              icon="ep:question-filled"
+              class="cursor-help text-gray-400"
+            />
+          </ElTooltip>
+        </template>
+      </ElInput>
+      <div
+        v-if="listPreview.length > 0"
+        class="mt-2 flex flex-wrap items-center gap-1"
+      >
+        <span class="text-xs text-[var(--el-text-color-secondary)]"> 解析结果： </span>
+        <ElTag
+          v-for="(item, index) in listPreview"
+          :key="index"
+          size="small"
+          class="m-0"
+        >
+          {{ item }}
+        </ElTag>
+      </div>
+    </div>
+
+    <!-- 日期时间输入 -->
+    <ElDatePicker
+      v-else-if="propertyType === IoTDataSpecsDataTypeEnum.DATE"
+      v-model="dateValue"
+      type="datetime"
+      placeholder="请选择日期时间"
+      format="YYYY-MM-DD HH:mm:ss"
+      value-format="YYYY-MM-DD HH:mm:ss"
+      @change="handleDateChange"
+      class="w-full!"
+    />
+
+    <!-- 数字输入 -->
+    <ElInputNumber
+      v-else-if="isNumericType()"
+      v-model="numberValue"
+      :precision="getPrecision()"
+      :step="getStep()"
+      :min="getMin()"
+      :max="getMax()"
+      :controls="false"
+      placeholder="请输入数值"
+      @change="handleNumberChange"
+      class="w-full!"
+    />
+
+    <!-- 文本输入 -->
+    <ElInput
+      v-else
+      v-model="localValue"
+      :type="getInputType()"
+      :placeholder="getPlaceholder()"
+      class="w-full!"
+    >
+      <template #suffix>
+        <ElTooltip
+          v-if="propertyConfig?.unit"
+          :content="`单位：${propertyConfig.unit}`"
+          placement="top"
+        >
+          <span class="px-1 text-xs text-[var(--el-text-color-secondary)]">
+            {{ propertyConfig.unit }}
+          </span>
+        </ElTooltip>
+      </template>
+    </ElInput>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/sections/action-section.vue b/apps/web-ele/src/views/iot/rule/scene/form/sections/action-section.vue
new file mode 100644
index 000000000..b100b0211
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/sections/action-section.vue
@@ -0,0 +1,313 @@
+<!-- 执行器配置组件 -->
+<script setup lang="ts">
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import {
+  getActionTypeLabel,
+  getActionTypeOptions,
+  IotRuleSceneActionTypeEnum,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElButton,
+  ElCard,
+  ElEmpty,
+  ElFormItem,
+  ElOption,
+  ElSelect,
+  ElTag,
+} from 'element-plus';
+
+import AlertConfig from '../configs/alert-config.vue';
+import DeviceControlConfig from '../configs/device-control-config.vue';
+
+/** 执行器配置组件 */
+defineOptions({ name: 'ActionSection' });
+
+const props = defineProps<{
+  actions: RuleSceneApi.Action[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:actions', value: RuleSceneApi.Action[]): void;
+}>();
+
+const actions = useVModel(props, 'actions', emit);
+
+/** 获取执行器标签类型（用于 el-tag 的 type 属性） */
+function getActionTypeTag(
+  type: number,
+): 'danger' | 'info' | 'primary' | 'success' | 'warning' {
+  const actionTypeTags: Record<
+    number,
+    'danger' | 'info' | 'primary' | 'success' | 'warning'
+  > = {
+    [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary',
+    [IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
+    [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger',
+    [IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning',
+  } as const;
+  return actionTypeTags[type] || 'info';
+}
+
+/** 判断是否为设备执行器类型 */
+function isDeviceAction(type: number): boolean {
+  const deviceActionTypes = [
+    IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET,
+    IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE,
+  ] as number[];
+  return deviceActionTypes.includes(type);
+}
+
+/** 判断是否为告警执行器类型 */
+function isAlertAction(type: number): boolean {
+  const alertActionTypes = [
+    IotRuleSceneActionTypeEnum.ALERT_TRIGGER,
+    IotRuleSceneActionTypeEnum.ALERT_RECOVER,
+  ] as number[];
+  return alertActionTypes.includes(type);
+}
+
+/**
+ * 创建默认的执行器数据
+ * @returns 默认执行器对象
+ */
+function createDefaultActionData(): RuleSceneApi.Action {
+  return {
+    type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置
+    productId: undefined,
+    deviceId: undefined,
+    identifier: undefined, // 物模型标识符（服务调用时使用）
+    params: undefined,
+    alertConfigId: undefined,
+  };
+}
+
+/**
+ * 添加执行器
+ */
+function addAction() {
+  const newAction = createDefaultActionData();
+  actions.value.push(newAction);
+}
+
+/**
+ * 删除执行器
+ * @param index 执行器索引
+ */
+function removeAction(index: number) {
+  actions.value.splice(index, 1);
+}
+
+/**
+ * 更新执行器类型
+ * @param index 执行器索引
+ * @param type 执行器类型
+ */
+function updateActionType(index: number, type: number) {
+  const action = actions.value[index] as RuleSceneApi.Action;
+  onActionTypeChange(action, type); // 须在赋新值前调用 ，内部依赖 action.type 旧值
+  action.type = type;
+}
+
+/**
+ * 更新执行器
+ * @param index 执行器索引
+ * @param action 执行器对象
+ */
+function updateAction(index: number, action: RuleSceneApi.Action) {
+  actions.value[index] = action;
+}
+
+/**
+ * 更新告警配置
+ * @param index 执行器索引
+ * @param alertConfigId 告警配置 ID
+ */
+function updateActionAlertConfig(index: number, alertConfigId?: number) {
+  actions.value[index]!.alertConfigId = alertConfigId;
+}
+
+/**
+ * 监听执行器类型变化
+ * @param action 执行器对象
+ * @param type 执行器类型
+ */
+function onActionTypeChange(action: RuleSceneApi.Action, type: number) {
+  if (isDeviceAction(type)) {
+    // 设备控制类型：清理告警配置，确保设备参数存在
+    action.alertConfigId = undefined;
+    if (!action.params) {
+      action.params = '';
+    }
+    // 切换到设备控制类型时清空 identifier，让用户重新选择
+    if (action.identifier) {
+      action.identifier = undefined;
+    }
+  } else if (isAlertAction(type)) {
+    action.productId = undefined;
+    action.deviceId = undefined;
+    action.identifier = undefined;
+    action.params = undefined;
+    action.alertConfigId = undefined;
+  }
+}
+</script>
+
+<template>
+  <ElCard
+    class="rounded-[8px] border border-[var(--el-border-color-light)]"
+    shadow="never"
+  >
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="gap-[8px] flex items-center">
+          <IconifyIcon
+            icon="ep:setting"
+            class="text-[18px] text-[var(--el-color-primary)]"
+          />
+          <span class="text-[16px] font-600 text-[var(--el-text-color-primary)]">
+            执行器配置
+          </span>
+          <ElTag size="small" type="info">
+            {{ actions.length }} 个执行器
+          </ElTag>
+        </div>
+        <div class="gap-[8px] flex items-center">
+          <ElButton type="primary" size="small" @click="addAction">
+            <IconifyIcon icon="ep:plus" />
+            添加执行器
+          </ElButton>
+        </div>
+      </div>
+    </template>
+
+    <div class="p-0">
+      <!-- 空状态 -->
+      <div v-if="actions.length === 0">
+        <ElEmpty description="暂无执行器配置">
+          <ElButton type="primary" @click="addAction">
+            <IconifyIcon icon="ep:plus" />
+            添加第一个执行器
+          </ElButton>
+        </ElEmpty>
+      </div>
+
+      <!-- 执行器列表 -->
+      <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"
+        >
+          <!-- 执行器头部 - 蓝色主题 -->
+          <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"
+          >
+            <div class="gap-[12px] flex items-center">
+              <div
+                class="font-600 flex items-center gap-2 text-base text-blue-700"
+              >
+                <div
+                  class="flex size-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
+                >
+                  {{ index + 1 }}
+                </div>
+                <span>执行器 {{ index + 1 }}</span>
+              </div>
+              <ElTag
+                :type="getActionTypeTag(action.type as number)"
+                size="small"
+                class="font-500"
+              >
+                {{ getActionTypeLabel(action.type as number) }}
+              </ElTag>
+            </div>
+            <div class="gap-[8px] flex items-center">
+              <ElButton
+                v-if="actions.length > 1"
+                type="danger"
+                size="small"
+                link
+                @click="removeAction(index)"
+                class="hover:bg-red-50"
+              >
+                <IconifyIcon icon="lucide:trash-2" />
+                删除
+              </ElButton>
+            </div>
+          </div>
+
+          <!-- 执行器内容区域 -->
+          <div class="p-[16px] space-y-[16px]">
+            <!-- 执行类型选择 -->
+            <div class="w-full">
+              <ElFormItem label="执行类型" required>
+                <ElSelect
+                  :model-value="action.type"
+                  @change="(value: any) => updateActionType(index, value)"
+                  placeholder="请选择执行类型"
+                  class="w-full"
+                >
+                  <ElOption
+                    v-for="option in getActionTypeOptions()"
+                    :key="option.value"
+                    :label="option.label"
+                    :value="option.value"
+                  />
+                </ElSelect>
+              </ElFormItem>
+            </div>
+
+            <!-- 设备控制配置 -->
+            <DeviceControlConfig
+              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"
+              :model-value="action.alertConfigId"
+              @update:model-value="
+                (value) => updateActionAlertConfig(index, value)
+              "
+            />
+
+            <!-- 触发告警提示 - 触发告警时显示 -->
+            <div
+              v-if="action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER"
+              class="rounded-[6px] border border-[var(--el-border-color-light)] bg-[var(--el-fill-color-blank)] p-4"
+            >
+              <div class="mb-2 flex items-center gap-2">
+                <IconifyIcon
+                  icon="ep:warning"
+                  class="text-base text-[var(--el-color-warning)]"
+                />
+                <span class="font-600 text-sm text-[var(--el-text-color-primary)]">
+                  触发告警
+                </span>
+                <ElTag size="small" type="warning">自动执行</ElTag>
+              </div>
+              <div class="text-xs leading-relaxed text-[var(--el-text-color-secondary)]">
+                当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
+                告警配置] 管理。
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 添加提示 -->
+      <div v-if="actions.length > 0" class="py-[16px] text-center">
+        <ElButton type="primary" plain @click="addAction">
+          <IconifyIcon icon="ep:plus" />
+          继续添加执行器
+        </ElButton>
+      </div>
+    </div>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/sections/basic-info-section.vue b/apps/web-ele/src/views/iot/rule/scene/form/sections/basic-info-section.vue
new file mode 100644
index 000000000..0ac39be79
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/sections/basic-info-section.vue
@@ -0,0 +1,111 @@
+<!-- 基础信息配置组件 -->
+<script setup lang="ts">
+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 {
+  ElCard,
+  ElCol,
+  ElFormItem,
+  ElInput,
+  ElRadio,
+  ElRadioGroup,
+  ElRow,
+} from 'element-plus';
+
+import { DictTag } from '#/components/dict-tag';
+
+/** 基础信息配置组件 */
+defineOptions({ name: 'BasicInfoSection' });
+
+const props = defineProps<{
+  modelValue: RuleSceneApi.SceneRule;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: RuleSceneApi.SceneRule): void;
+}>();
+
+const formData = useVModel(props, 'modelValue', emit); // 表单数据
+</script>
+
+<template>
+  <ElCard
+    class="rounded-[8px] mb-[10px] border border-[var(--el-border-color-light)]"
+    shadow="never"
+  >
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="gap-[8px] flex items-center">
+          <IconifyIcon
+            icon="ep:info-filled"
+            class="text-[18px] text-[var(--el-color-primary)]"
+          />
+          <span class="text-[16px] font-600 text-[var(--el-text-color-primary)]">
+            基础信息
+          </span>
+        </div>
+        <div class="gap-[8px] flex items-center">
+          <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="formData.status" />
+        </div>
+      </div>
+    </template>
+
+    <div class="p-0">
+      <ElRow :gutter="24" class="mb-[24px]">
+        <ElCol :span="12">
+          <ElFormItem label="场景名称" prop="name" required>
+            <ElInput
+              v-model="formData.name"
+              placeholder="请输入场景名称"
+              :maxlength="50"
+              show-word-limit
+              clearable
+            />
+          </ElFormItem>
+        </ElCol>
+        <ElCol :span="12">
+          <ElFormItem label="场景状态" prop="status" required>
+            <ElRadioGroup v-model="formData.status">
+              <ElRadio
+                v-for="(dict, index) in getDictOptions(
+                  DICT_TYPE.COMMON_STATUS,
+                  'number',
+                )"
+                :key="index"
+                :label="dict.value"
+              >
+                {{ dict.label }}
+              </ElRadio>
+            </ElRadioGroup>
+          </ElFormItem>
+        </ElCol>
+      </ElRow>
+      <ElFormItem label="场景描述" prop="description">
+        <ElInput
+          v-model="formData.description"
+          type="textarea"
+          placeholder="请输入场景描述（可选）"
+          :rows="3"
+          :maxlength="200"
+          show-word-limit
+          resize="none"
+        />
+      </ElFormItem>
+    </div>
+  </ElCard>
+</template>
+
+<style scoped>
+:deep(.el-form-item) {
+  margin-bottom: 20px;
+}
+
+:deep(.el-form-item:last-child) {
+  margin-bottom: 0;
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/sections/trigger-section.vue b/apps/web-ele/src/views/iot/rule/scene/form/sections/trigger-section.vue
new file mode 100644
index 000000000..3fb6058cb
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/sections/trigger-section.vue
@@ -0,0 +1,281 @@
+<script setup lang="ts">
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { onMounted } from 'vue';
+
+import {
+  getTriggerTypeLabel,
+  IotRuleSceneTriggerTypeEnum,
+  isDeviceTrigger,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import { ElButton, ElCard, ElEmpty, ElFormItem, ElTag } from 'element-plus';
+
+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: RuleSceneApi.Trigger[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:triggers', value: RuleSceneApi.Trigger[]): void;
+}>();
+
+const triggers = useVModel(props, 'triggers', emit);
+
+/** 获取触发器标签类型（用于 el-tag 的 type 属性） */
+function getTriggerTagType(
+  type: number,
+): 'danger' | 'info' | 'primary' | 'success' | 'warning' {
+  if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
+    return 'warning';
+  }
+  return isDeviceTrigger(type) ? 'success' : 'info';
+}
+
+/** 添加触发器 */
+function addTrigger() {
+  const newTrigger: RuleSceneApi.Trigger = {
+    type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
+    productId: undefined,
+    deviceId: undefined,
+    identifier: undefined,
+    operator: undefined,
+    value: undefined,
+    cronExpression: undefined,
+    conditionGroups: [], // 空的条件组数组
+  };
+  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;
+  onTriggerTypeChange(index, type);
+}
+
+/**
+ * 更新触发器设备配置
+ * @param index 触发器索引
+ * @param newTrigger 新的触发器对象
+ */
+function updateTriggerDeviceConfig(
+  index: number,
+  newTrigger: RuleSceneApi.Trigger,
+) {
+  triggers.value[index] = newTrigger;
+}
+
+/**
+ * 更新触发器 CRON 配置
+ * @param index 触发器索引
+ * @param cronExpression CRON 表达式
+ */
+function updateTriggerCronConfig(index: number, cronExpression?: string) {
+  triggers.value[index]!.cronExpression = cronExpression;
+}
+
+/**
+ * 更新触发器条件组配置
+ * @param index 触发器索引
+ * @param conditionGroups 条件组
+ */
+function updateTriggerConditionGroups(
+  index: number,
+  conditionGroups: RuleSceneApi.TriggerCondition[][],
+) {
+  triggers.value[index]!.conditionGroups = conditionGroups;
+}
+
+/**
+ * 处理触发器类型变化事件
+ * @param index 触发器索引
+ * @param _ 触发器类型（未使用）
+ */
+function onTriggerTypeChange(index: number, _: number) {
+  const triggerItem = triggers.value[index]!;
+  triggerItem.productId = undefined;
+  triggerItem.deviceId = undefined;
+  triggerItem.identifier = undefined;
+  triggerItem.operator = undefined;
+  triggerItem.value = undefined;
+  triggerItem.cronExpression = undefined;
+  triggerItem.conditionGroups = [];
+}
+
+/** 初始化：确保至少有一个触发器 */
+onMounted(() => {
+  if (triggers.value.length === 0) {
+    addTrigger();
+  }
+});
+</script>
+
+<template>
+  <ElCard
+    class="rounded-[8px] mb-[10px] border border-[var(--el-border-color-light)]"
+    shadow="never"
+  >
+    <template #header>
+      <div class="flex items-center justify-between">
+        <div class="gap-[8px] flex items-center">
+          <IconifyIcon
+            icon="ep:lightning"
+            class="text-[18px] text-[var(--el-color-primary)]"
+          />
+          <span class="text-[16px] font-600 text-[var(--el-text-color-primary)]">
+            触发器配置
+          </span>
+          <ElTag size="small" type="info">
+            {{ triggers.length }} 个触发器
+          </ElTag>
+        </div>
+        <ElButton type="primary" size="small" @click="addTrigger">
+          <IconifyIcon icon="lucide:plus" />
+          添加触发器
+        </ElButton>
+      </div>
+    </template>
+
+    <div class="p-[16px] 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"
+        >
+          <!-- 触发器头部 - 绿色主题 -->
+          <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"
+          >
+            <div class="gap-[12px] flex items-center">
+              <div
+                class="gap-[8px] text-[16px] font-600 flex items-center text-green-700"
+              >
+                <div
+                  class="w-[24px] h-[24px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
+                >
+                  {{ index + 1 }}
+                </div>
+                <span>触发器 {{ index + 1 }}</span>
+              </div>
+              <ElTag
+                size="small"
+                :type="getTriggerTagType(triggerItem.type as number)"
+                class="font-500"
+              >
+                {{ getTriggerTypeLabel(triggerItem.type as number) }}
+              </ElTag>
+            </div>
+            <div class="gap-[8px] flex items-center">
+              <ElButton
+                v-if="triggers.length > 1"
+                type="danger"
+                size="small"
+                link
+                @click="removeTrigger(index)"
+                class="hover:bg-red-50"
+              >
+                <IconifyIcon icon="lucide:trash-2" />
+                删除
+              </ElButton>
+            </div>
+          </div>
+
+          <!-- 触发器内容区域 -->
+          <div class="p-[16px] space-y-[16px]">
+            <!-- 设备触发配置 -->
+            <DeviceTriggerConfig
+              v-if="isDeviceTrigger(triggerItem.type as number)"
+              :model-value="triggerItem"
+              :index="index"
+              @update:model-value="
+                (value) => updateTriggerDeviceConfig(index, value)
+              "
+              @trigger-type-change="(type) => updateTriggerType(index, type)"
+            />
+
+            <!-- 定时触发配置 -->
+            <div
+              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-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-light)]"
+              >
+                <IconifyIcon
+                  icon="lucide:timer"
+                  class="text-[18px] text-[var(--el-color-danger)]"
+                />
+                <span
+                  class="text-[14px] font-500 text-[var(--el-text-color-primary)]"
+                >
+                  定时触发配置
+                </span>
+              </div>
+
+              <!-- CRON 表达式配置 -->
+              <div
+                class="p-[16px] rounded-[6px] border border-[var(--el-border-color-lighter)] bg-[var(--el-fill-color-blank)]"
+              >
+                <ElFormItem label="CRON 表达式" required>
+                  <CronTab
+                    :model-value="triggerItem.cronExpression || '0 0 12 * * ?'"
+                    @update:model-value="
+                      (value) => updateTriggerCronConfig(index, value)
+                    "
+                  />
+                </ElFormItem>
+              </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">
+        <ElEmpty description="暂无触发器">
+          <template #description>
+            <div class="space-y-[8px]">
+              <p class="text-[var(--el-text-color-secondary)]">暂无触发器配置</p>
+              <p class="text-[12px] text-[var(--el-text-color-placeholder)]">
+                请使用上方的「添加触发器」按钮来设置触发规则
+              </p>
+            </div>
+          </template>
+        </ElEmpty>
+      </div>
+    </div>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/selectors/device-selector.vue b/apps/web-ele/src/views/iot/rule/scene/form/selectors/device-selector.vue
new file mode 100644
index 000000000..e7da76d00
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/selectors/device-selector.vue
@@ -0,0 +1,113 @@
+<!-- 设备选择器组件 -->
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { DEVICE_SELECTOR_OPTIONS } from '@vben/constants';
+
+import { ElOption, ElSelect } from 'element-plus';
+
+import { getDeviceListByProductId } from '#/api/iot/device/device';
+import { DictTag } from '#/components/dict-tag';
+
+/** 设备选择器组件 */
+defineOptions({ name: 'DeviceSelector' });
+
+const props = defineProps<{
+  modelValue?: number;
+  productId?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: number): void;
+  (e: 'change', value?: number): void;
+}>();
+
+const deviceLoading = ref(false); // 设备加载状态
+const deviceList = ref<any[]>([]); // 设备列表
+
+/**
+ * 处理选择变化事件
+ * @param value 选中的设备ID
+ */
+function handleChange(value?: number) {
+  emit('update:modelValue', value);
+  emit('change', value);
+}
+
+/**
+ * 获取设备列表
+ */
+async function getDeviceList() {
+  if (!props.productId) {
+    deviceList.value = [];
+    return;
+  }
+
+  try {
+    deviceLoading.value = true;
+    const data = await getDeviceListByProductId(props.productId);
+    deviceList.value = data || [];
+  } catch (error) {
+    console.error('获取设备列表失败 ：', error);
+    deviceList.value = [];
+  } finally {
+    deviceList.value.unshift(DEVICE_SELECTOR_OPTIONS.ALL_DEVICES);
+    deviceLoading.value = false;
+  }
+}
+
+// 监听产品变化
+watch(
+  () => props.productId,
+  (newProductId) => {
+    if (newProductId) {
+      getDeviceList();
+    } else {
+      deviceList.value = [];
+      // 清空当前选择的设备
+      if (props.modelValue) {
+        emit('update:modelValue', undefined);
+        emit('change', undefined);
+      }
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <ElSelect
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+    placeholder="请选择设备"
+    filterable
+    clearable
+    class="w-full"
+    :loading="deviceLoading"
+    :disabled="!productId"
+  >
+    <ElOption
+      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="flex-1">
+          <div
+            class="text-[14px] font-500 mb-[2px] text-[var(--el-text-color-primary)]"
+          >
+            {{ device.deviceName }}
+          </div>
+          <div class="text-[12px] text-[var(--el-text-color-secondary)]">
+            {{ device.deviceKey }}
+          </div>
+        </div>
+        <div class="gap-[4px] flex items-center" v-if="device.id > 0">
+          <DictTag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
+        </div>
+      </div>
+    </ElOption>
+  </ElSelect>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/selectors/operator-selector.vue b/apps/web-ele/src/views/iot/rule/scene/form/selectors/operator-selector.vue
new file mode 100644
index 000000000..79b4df192
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/selectors/operator-selector.vue
@@ -0,0 +1,278 @@
+<!-- 操作符选择器组件 -->
+<script setup lang="ts">
+import { computed, watch } from 'vue';
+
+import {
+  IoTDataSpecsDataTypeEnum,
+  IotRuleSceneTriggerConditionParameterOperatorEnum,
+} from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { ElOption, ElSelect } from 'element-plus';
+
+/** 操作符选择器组件 */
+defineOptions({ name: 'OperatorSelector' });
+
+const props = defineProps<{
+  modelValue?: string;
+  propertyType?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'change', value: string): void;
+}>();
+
+const localValue = useVModel(props, 'modelValue', emit);
+
+// 基于枚举的操作符定义
+const allOperators = [
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name,
+    symbol: '=',
+    description: '值完全相等时触发',
+    example: 'temperature = 25',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.BOOL,
+      IoTDataSpecsDataTypeEnum.ENUM,
+    ],
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_EQUALS.name,
+    symbol: '≠',
+    description: '值不相等时触发',
+    example: 'power != false',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.BOOL,
+      IoTDataSpecsDataTypeEnum.ENUM,
+    ],
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN.name,
+    symbol: '>',
+    description: '值大于指定值时触发',
+    example: 'temperature > 30',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE,
+    ],
+  },
+  {
+    value:
+      IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS
+        .value,
+    label:
+      IotRuleSceneTriggerConditionParameterOperatorEnum.GREATER_THAN_OR_EQUALS
+        .name,
+    symbol: '≥',
+    description: '值大于或等于指定值时触发',
+    example: 'humidity >= 80',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE,
+    ],
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN.name,
+    symbol: '<',
+    description: '值小于指定值时触发',
+    example: 'temperature < 10',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE,
+    ],
+  },
+  {
+    value:
+      IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS
+        .value,
+    label:
+      IotRuleSceneTriggerConditionParameterOperatorEnum.LESS_THAN_OR_EQUALS
+        .name,
+    symbol: '≤',
+    description: '值小于或等于指定值时触发',
+    example: 'battery <= 20',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE,
+    ],
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.IN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.IN.name,
+    symbol: '∈',
+    description: '值在指定列表中时触发',
+    example: 'status in [1,2,3]',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.ENUM,
+    ],
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_IN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_IN.name,
+    symbol: '∉',
+    description: '值不在指定列表中时触发',
+    example: 'status not in [1,2,3]',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.ENUM,
+    ],
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.BETWEEN.name,
+    symbol: '⊆',
+    description: '值在指定范围内时触发',
+    example: 'temperature between 20,30',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE,
+    ],
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_BETWEEN.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_BETWEEN.name,
+    symbol: '⊄',
+    description: '值不在指定范围内时触发',
+    example: 'temperature not between 20,30',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.DATE,
+    ],
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.LIKE.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.LIKE.name,
+    symbol: '≈',
+    description: '字符串匹配指定模式时触发',
+    example: 'message like "%error%"',
+    supportedTypes: [IoTDataSpecsDataTypeEnum.TEXT],
+  },
+  {
+    value: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_NULL.value,
+    label: IotRuleSceneTriggerConditionParameterOperatorEnum.NOT_NULL.name,
+    symbol: '≠∅',
+    description: '值非空时触发',
+    example: 'data not null',
+    supportedTypes: [
+      IoTDataSpecsDataTypeEnum.INT,
+      IoTDataSpecsDataTypeEnum.FLOAT,
+      IoTDataSpecsDataTypeEnum.DOUBLE,
+      IoTDataSpecsDataTypeEnum.TEXT,
+      IoTDataSpecsDataTypeEnum.BOOL,
+      IoTDataSpecsDataTypeEnum.ENUM,
+      IoTDataSpecsDataTypeEnum.DATE,
+    ],
+  },
+];
+
+// 计算属性：可用的操作符
+const availableOperators = computed(() => {
+  if (!props.propertyType) {
+    return allOperators;
+  }
+  return allOperators.filter((op) =>
+    (op.supportedTypes as any[]).includes(props.propertyType || ''),
+  );
+});
+
+// 计算属性：当前选中的操作符
+const selectedOperator = computed(() => {
+  return allOperators.find((op) => op.value === localValue.value);
+});
+
+/**
+ * 处理选择变化事件
+ * @param value 选中的操作符值
+ */
+function handleChange(value: any) {
+  emit('change', value);
+}
+
+/** 监听属性类型变化 */
+watch(
+  () => props.propertyType,
+  () => {
+    // 如果当前选择的操作符不支持新的属性类型，则清空选择
+    if (
+      localValue.value &&
+      selectedOperator.value &&
+      !(selectedOperator.value.supportedTypes as any[]).includes(
+        props.propertyType || '',
+      )
+    ) {
+      localValue.value = '';
+    }
+  },
+);
+</script>
+
+<template>
+  <div class="w-full">
+    <ElSelect
+      v-model="localValue"
+      placeholder="请选择操作符"
+      @change="handleChange"
+      class="w-full"
+    >
+      <ElOption
+        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-[var(--el-text-color-primary)]">
+              {{ operator.label }}
+            </div>
+            <div
+              class="text-[12px] px-[6px] py-[2px] rounded-[4px] bg-[var(--el-color-primary-light-9)] font-mono text-[var(--el-color-primary)]"
+            >
+              {{ operator.symbol }}
+            </div>
+          </div>
+          <div class="text-[12px] text-[var(--el-text-color-secondary)]">
+            {{ operator.description }}
+          </div>
+        </div>
+      </ElOption>
+    </ElSelect>
+  </div>
+</template>
+
+<style scoped>
+:deep(.el-select-dropdown__item) {
+  height: auto;
+  padding: 8px 20px;
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/selectors/product-selector.vue b/apps/web-ele/src/views/iot/rule/scene/form/selectors/product-selector.vue
new file mode 100644
index 000000000..5b81d0e8d
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/selectors/product-selector.vue
@@ -0,0 +1,87 @@
+<!-- 产品选择器组件 -->
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { ElOption, ElSelect } from 'element-plus';
+
+import { getSimpleProductList } from '#/api/iot/product/product';
+import { DictTag } from '#/components/dict-tag';
+
+/** 产品选择器组件 */
+defineOptions({ name: 'ProductSelector' });
+
+defineProps<{
+  modelValue?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value?: number): void;
+  (e: 'change', value?: number): void;
+}>();
+
+const productLoading = ref(false); // 产品加载状态
+const productList = ref<any[]>([]); // 产品列表
+
+/**
+ * 处理选择变化事件
+ * @param value 选中的产品 ID
+ */
+function handleChange(value?: number) {
+  emit('update:modelValue', value);
+  emit('change', value);
+}
+
+/** 获取产品列表 */
+async function getProductList() {
+  try {
+    productLoading.value = true;
+    const data = await getSimpleProductList();
+    productList.value = data || [];
+  } catch (error) {
+    console.error('获取产品列表失败:', error);
+    productList.value = [];
+  } finally {
+    productLoading.value = false;
+  }
+}
+
+// 组件挂载时获取产品列表
+onMounted(() => {
+  getProductList();
+});
+</script>
+
+<template>
+  <ElSelect
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+    placeholder="请选择产品"
+    filterable
+    clearable
+    class="w-full"
+    :loading="productLoading"
+  >
+    <ElOption
+      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="flex-1">
+          <div
+            class="text-[14px] font-500 mb-[2px] text-[var(--el-text-color-primary)]"
+          >
+            {{ product.name }}
+          </div>
+          <div class="text-[12px] text-[var(--el-text-color-secondary)]">
+            {{ product.productKey }}
+          </div>
+        </div>
+        <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="product.status" />
+      </div>
+    </ElOption>
+  </ElSelect>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/form/selectors/property-selector.vue b/apps/web-ele/src/views/iot/rule/scene/form/selectors/property-selector.vue
new file mode 100644
index 000000000..ea71568ea
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/form/selectors/property-selector.vue
@@ -0,0 +1,466 @@
+<!-- 属性选择器组件 -->
+<script setup lang="ts">
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed, ref, watch } from 'vue';
+
+import {
+  getAccessModeLabel,
+  getDataTypeName,
+  getEventTypeLabel,
+  getThingModelServiceCallTypeLabel,
+  IotRuleSceneTriggerTypeEnum,
+  IoTThingModelTypeEnum,
+  THING_MODEL_GROUP_LABELS,
+} from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElButton,
+  ElOption,
+  ElOptionGroup,
+  ElPopover,
+  ElSelect,
+  ElTag,
+} from 'element-plus';
+
+import { getThingModelTSLByProductId } from '#/api/iot/thingmodel';
+
+/** 属性选择器组件 */
+defineOptions({ name: 'PropertySelector' });
+
+const props = defineProps<{
+  deviceId?: number;
+  modelValue?: string;
+  productId?: number;
+  triggerType: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'change', value: { config: any; type: string }): void;
+}>();
+
+// TODO 芋艿
+/** 属性选择器内部使用的统一数据结构 */
+interface PropertySelectorItem {
+  identifier: string;
+  name: string;
+  description?: string;
+  dataType: string;
+  type: number; // IoTThingModelTypeEnum
+  accessMode?: string;
+  required?: boolean;
+  unit?: string;
+  range?: string;
+  eventType?: string;
+  callType?: string;
+  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<PropertySelectorItem[]>([]); // 属性列表
+const thingModelTSL = ref<null | ThingModelApi.ThingModelTSL>(null); // 物模型 TSL 数据
+
+// 计算属性：属性分组
+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 selectedProperty = computed(() => {
+  return propertyList.value.find(
+    (property) => property.identifier === localValue.value,
+  );
+});
+
+/**
+ * 处理选择变化事件
+ * @param value 选中的属性标识符
+ */
+function handleChange(value: any) {
+  const property = propertyList.value.find(
+    (item) => item.identifier === value,
+  );
+  if (property) {
+    emit('change', {
+      type: property.dataType,
+      config: property,
+    });
+  }
+}
+
+/**
+ * 获取物模型 TSL 数据
+ */
+async function fetchThingModelTSL() {
+  if (!props.productId) {
+    thingModelTSL.value = null;
+    propertyList.value = [];
+    return;
+  }
+
+  loading.value = true;
+  try {
+    const tslData = await getThingModelTSLByProductId(props.productId);
+
+    if (tslData) {
+      thingModelTSL.value = tslData;
+      parseThingModelData();
+    } else {
+      console.error('获取物模型 TSL 失败 ：返回数据为空');
+      propertyList.value = [];
+    }
+  } catch (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;
+}
+
+/**
+ * 获取属性单位
+ * @param property 属性对象
+ * @returns 属性单位
+ */
+function getPropertyUnit(property: any) {
+  if (!property) return undefined;
+
+  // 数值型数据的单位
+  if (property.dataSpecs && property.dataSpecs.unit) {
+    return property.dataSpecs.unit;
+  }
+
+  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)) {
+    return property.dataSpecsList
+      .map((item: any) => `${item.name}(${item.value})`)
+      .join(', ');
+  }
+
+  return undefined;
+}
+
+/** 监听产品变化 */
+watch(
+  () => props.productId,
+  () => {
+    fetchThingModelTSL();
+  },
+  { immediate: true },
+);
+
+/** 监听触发类型变化 */
+watch(
+  () => props.triggerType,
+  () => {
+    localValue.value = '';
+  },
+);
+</script>
+
+<template>
+  <div class="gap-[8px] flex items-center">
+    <ElSelect
+      v-model="localValue"
+      placeholder="请选择监控项"
+      filterable
+      clearable
+      @change="handleChange"
+      class="!w-[150px]"
+      :loading="loading"
+    >
+      <ElOptionGroup
+        v-for="group in propertyGroups"
+        :key="group.label"
+        :label="group.label"
+      >
+        <ElOption
+          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-[var(--el-text-color-primary)]">
+              {{ property.name }}
+            </span>
+            <ElTag size="small" class="ml-[8px] flex-shrink-0">
+              {{ property.identifier }}
+            </ElTag>
+          </div>
+        </ElOption>
+      </ElOptionGroup>
+    </ElSelect>
+
+    <!-- 属性详情弹出层 -->
+    <ElPopover
+      v-if="selectedProperty"
+      placement="right-start"
+      :width="350"
+      trigger="click"
+      :offset="8"
+      popper-class="property-detail-popover"
+    >
+      <template #reference>
+        <ElButton
+          type="primary"
+          link
+          circle
+          size="small"
+          class="flex-shrink-0"
+          title="查看属性详情"
+        >
+          <IconifyIcon icon="ep:info-filled" />
+        </ElButton>
+      </template>
+
+      <template #default>
+        <!-- 弹出层内容 -->
+        <div class="property-detail-content">
+          <div class="gap-[8px] mb-[12px] flex items-center">
+            <IconifyIcon icon="ep:info-filled" class="text-[16px] text-[var(--el-color-info)]" />
+            <span class="text-[14px] font-500 text-[var(--el-text-color-primary)]">
+              {{ selectedProperty.name }}
+            </span>
+            <ElTag size="small">
+              {{ getDataTypeName(selectedProperty.dataType) }}
+            </ElTag>
+          </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-[var(--el-text-color-secondary)]">
+                标识符：
+              </span>
+              <span class="text-[12px] flex-1 text-[var(--el-text-color-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-[var(--el-text-color-secondary)]">
+                描述：
+              </span>
+              <span class="text-[12px] flex-1 text-[var(--el-text-color-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-[var(--el-text-color-secondary)]">
+                单位：
+              </span>
+              <span class="text-[12px] flex-1 text-[var(--el-text-color-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-[var(--el-text-color-secondary)]">
+                取值范围：
+              </span>
+              <span class="text-[12px] flex-1 text-[var(--el-text-color-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-[var(--el-text-color-secondary)]">
+                访问模式：
+              </span>
+              <span class="text-[12px] flex-1 text-[var(--el-text-color-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-[var(--el-text-color-secondary)]">
+                事件类型：
+              </span>
+              <span class="text-[12px] flex-1 text-[var(--el-text-color-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-[var(--el-text-color-secondary)]">
+                调用类型：
+              </span>
+              <span class="text-[12px] flex-1 text-[var(--el-text-color-primary)]">
+                {{
+                  getThingModelServiceCallTypeLabel(selectedProperty.callType)
+                }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </ElPopover>
+  </div>
+</template>
+
+<style scoped>
+/* 下拉选项样式 */
+:deep(.el-select-dropdown__item) {
+  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) {
+  padding: 16px !important;
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/rule/scene/index.vue b/apps/web-ele/src/views/iot/rule/scene/index.vue
new file mode 100644
index 000000000..d6b85d2f8
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/index.vue
@@ -0,0 +1,407 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { ref } from 'vue';
+
+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 {
+  ElCard,
+  ElCol,
+  ElLoading,
+  ElMessage,
+  ElRow,
+  ElTag,
+  ElTooltip,
+} from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteSceneRule,
+  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';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const statistics = ref({
+  total: 0,
+  enabled: 0,
+  disabled: 0,
+  timerRules: 0,
+}); // 统计数据
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建场景规则 */
+function handleCreate() {
+  formDrawerApi.setData(null).open();
+}
+
+/** 编辑场景规则 */
+function handleEdit(row: RuleSceneApi.SceneRule) {
+  formDrawerApi.setData(row).open();
+}
+
+/** 启用/停用场景规则 */
+async function handleToggleStatus(row: RuleSceneApi.SceneRule) {
+  const newStatus =
+    row.status === CommonStatusEnum.ENABLE
+      ? CommonStatusEnum.DISABLE
+      : CommonStatusEnum.ENABLE;
+  const loadingInstance = ElLoading.service({
+    text:
+      newStatus === CommonStatusEnum.ENABLE ? '正在启用...' : '正在停用...',
+  });
+  try {
+    await updateSceneRuleStatus(row.id as number, newStatus);
+    ElMessage.success(
+      newStatus === CommonStatusEnum.ENABLE ? '启用成功' : '停用成功',
+    );
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 删除场景规则 */
+async function handleDelete(row: RuleSceneApi.SceneRule) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteSceneRule(row.id as number);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 判断规则是否包含定时触发器 */
+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[]) {
+  statistics.value = {
+    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(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const result = await getSceneRulePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          updateStatistics(result.list || []);
+          return result;
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<RuleSceneApi.SceneRule>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormDrawer @success="handleRefresh" />
+
+    <!-- 统计卡片 -->
+    <ElRow :gutter="16" class="mb-4">
+      <ElCol :span="6">
+        <ElCard body-class="!p-3">
+          <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>
+        </ElCard>
+      </ElCol>
+      <ElCol :span="6">
+        <ElCard body-class="!p-3">
+          <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>
+        </ElCard>
+      </ElCol>
+      <ElCol :span="6">
+        <ElCard body-class="!p-3">
+          <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>
+        </ElCard>
+      </ElCol>
+      <ElCol :span="6">
+        <ElCard body-class="!p-3">
+          <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>
+        </ElCard>
+      </ElCol>
+    </ElRow>
+
+    <Grid table-title="场景规则列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['场景规则']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </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>
+        <ElTooltip
+          v-if="row.description"
+          :content="row.description"
+          placement="top"
+        >
+          <div class="mt-1 max-w-[200px] truncate text-xs text-muted-foreground">
+            {{ row.description }}
+          </div>
+        </ElTooltip>
+      </template>
+      <!-- 触发条件列：单 tag 汇总 + 定时触发额外信息 -->
+      <template #triggers="{ row }">
+        <div class="space-y-1">
+          <ElTag type="primary" class="m-0">{{ getTriggerSummary(row) }}</ElTag>
+          <ElTooltip
+            v-if="hasTimerTrigger(row)"
+            :content="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>
+          </ElTooltip>
+        </div>
+      </template>
+      <!-- 执行动作列：单 tag 汇总 -->
+      <template #actionsCol="{ row }">
+        <ElTag type="success" class="m-0">{{ getActionSummary(row) }}</ElTag>
+      </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 === CommonStatusEnum.ENABLE ? '停用' : '启用',
+              type: 'primary',
+              link: true,
+              icon:
+                row.status === CommonStatusEnum.ENABLE
+                  ? 'ant-design:stop-outlined'
+                  : 'ant-design:check-circle-outlined',
+              popConfirm: {
+                title: `确认${row.status === CommonStatusEnum.ENABLE ? '停用' : '启用'}场景规则「${row.name}」吗？`,
+                confirm: handleToggleStatus.bind(null, row),
+              },
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/rule/scene/modules/form.vue b/apps/web-ele/src/views/iot/rule/scene/modules/form.vue
new file mode 100644
index 000000000..26dfd1575
--- /dev/null
+++ b/apps/web-ele/src/views/iot/rule/scene/modules/form.vue
@@ -0,0 +1,255 @@
+<script lang="ts" setup>
+import type { RuleSceneApi } from '#/api/iot/rule/scene';
+
+import { computed, nextTick, reactive, ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+import {
+  CommonStatusEnum,
+  IotRuleSceneActionTypeEnum,
+  IotRuleSceneTriggerTypeEnum,
+  isDeviceTrigger,
+} from '@vben/constants';
+
+import { ElForm, ElMessage } from 'element-plus';
+
+import {
+  createSceneRule,
+  getSceneRule,
+  updateSceneRule,
+} from '#/api/iot/rule/scene';
+import { $t } from '#/locales';
+
+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 formRef = ref();
+const formData = ref<RuleSceneApi.SceneRule>(buildEmptyFormData());
+
+const getTitle = computed(() =>
+  formData.value.id
+    ? $t('ui.actionTitle.edit', ['场景规则'])
+    : $t('ui.actionTitle.create', ['场景规则']),
+);
+
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    try {
+      await formRef.value?.validate();
+    } catch {
+      return;
+    }
+    drawerApi.lock();
+    try {
+      const data = { ...formData.value } as RuleSceneApi.SceneRule;
+      await (data.id ? updateSceneRule(data) : createSceneRule(data));
+      await drawerApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      drawerApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    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 {
+  return {
+    ...result,
+    triggers: result.triggers?.length
+      ? result.triggers
+      : buildEmptyFormData().triggers,
+    actions: result.actions || [],
+  };
+}
+
+/** 触发器校验 */
+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;
+      }
+      // 事件上报 / 服务调用：operator 由前端自动设为 '='，参数值留空表示「事件 / 调用发生即匹配」
+      const isEventOrService =
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
+        trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE;
+      if (!isEventOrService) {
+        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();
+}
+
+/** 执行器校验 */
+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' }],
+  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>
+  <Drawer :title="getTitle" class="w-4/5">
+    <ElForm
+      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" />
+    </ElForm>
+  </Drawer>
+</template>
diff --git a/apps/web-ele/src/views/iot/thingmodel/data.ts b/apps/web-ele/src/views/iot/thingmodel/data.ts
new file mode 100644
index 000000000..00e3eefb5
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/data.ts
@@ -0,0 +1,66 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { DICT_TYPE, getDataTypeOptionsLabel } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '功能类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE, 'number'),
+        placeholder: '请选择功能类型',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<ThingModelApi.ThingModel>['columns'] {
+  return [
+    { type: 'checkbox', width: 40 },
+    {
+      field: 'type',
+      title: '功能类型',
+      minWidth: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.IOT_THING_MODEL_TYPE },
+      },
+    },
+    {
+      field: 'name',
+      title: '功能名称',
+      minWidth: 150,
+    },
+    {
+      field: 'identifier',
+      title: '标识符',
+      minWidth: 120,
+    },
+    {
+      title: '数据类型',
+      minWidth: 100,
+      formatter: ({ row }) =>
+        getDataTypeOptionsLabel(row.property?.dataType ?? '') || '-',
+    },
+    {
+      title: '数据定义',
+      minWidth: 200,
+      slots: { default: 'dataDefinition' },
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/iot/thingmodel/index.vue b/apps/web-ele/src/views/iot/thingmodel/index.vue
new file mode 100644
index 000000000..0004e03f2
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/index.vue
@@ -0,0 +1,158 @@
+<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 { computed, inject } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { IOT_PROVIDE_KEY } from '@vben/constants';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteThingModel, getThingModelPage } from '#/api/iot/thingmodel';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import { DataDefinition } from './modules/components';
+import Form from './modules/form.vue';
+import Tsl from './modules/tsl.vue';
+
+const product = inject<Ref<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT);
+const productId = computed(() => product?.value?.id);
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [TslModal, tslModalApi] = useVbenModal({
+  connectedComponent: Tsl,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 新增物模型 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑物模型 */
+function handleEdit(row: ThingModelApi.ThingModel) {
+  formModalApi.setData({ id: row.id }).open();
+}
+
+/** 删除物模型 */
+async function handleDelete(row: ThingModelApi.ThingModel) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteThingModel(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 打开 TSL 弹窗 */
+function handleOpenTsl() {
+  tslModalApi.open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getThingModelPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            productId: productId.value,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ThingModelApi.ThingModel>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <FormModal @success="handleRefresh" />
+    <TslModal />
+
+    <Grid table-title="物模型列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['物模型']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['iot:thing-model:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: 'TSL',
+              type: 'primary',
+              auth: ['iot:thing-model:query'],
+              onClick: handleOpenTsl,
+            },
+          ]"
+        />
+      </template>
+      <template #dataDefinition="{ row }">
+        <DataDefinition :data="row" />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['iot:thing-model:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['iot:thing-model:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/components/data-definition.vue b/apps/web-ele/src/views/iot/thingmodel/modules/components/data-definition.vue
new file mode 100644
index 000000000..e8990dff3
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/components/data-definition.vue
@@ -0,0 +1,87 @@
+<script lang="ts" setup>
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed } from 'vue';
+
+import {
+  getEventTypeLabel,
+  getThingModelServiceCallTypeLabel,
+  IoTDataSpecsDataTypeEnum,
+  IoTThingModelTypeEnum,
+} from '@vben/constants';
+
+import { ElTooltip } from 'element-plus';
+
+const props = 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,
+]);
+
+const formattedDataSpecsList = computed(() => {
+  if (!props.data.property?.dataSpecsList?.length) {
+    return '';
+  }
+  return props.data.property.dataSpecsList
+    .map((item) => `${item.value}-${item.name}`)
+    .join('、');
+});
+
+const shortText = computed(() => {
+  const list = props.data.property?.dataSpecsList;
+  if (!list?.length) {
+    return '-';
+  }
+  const first = list[0];
+  return list.length > 1
+    ? `${first.value}-${first.name} 等 ${list.length} 项`
+    : `${first.value}-${first.name}`;
+});
+</script>
+
+<template>
+  <!-- 属性 -->
+  <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="data.property?.dataType === IoTDataSpecsDataTypeEnum.TEXT">
+      数据长度：{{ data.property?.dataSpecs?.length }}
+    </div>
+    <div v-if="PLACEHOLDER_TYPES.has(data.property?.dataType as any)">-</div>
+    <div v-if="LIST_TYPES.has(data.property?.dataType as any)">
+      <ElTooltip :content="formattedDataSpecsList" placement="top-start">
+        <span
+          class="cursor-help border-b border-dashed border-gray-300 hover:border-blue-500 hover:text-blue-500"
+        >
+          {{
+            data.property?.dataType === IoTDataSpecsDataTypeEnum.BOOL
+              ? '布尔值'
+              : '枚举值'
+          }}：{{ shortText }}
+        </span>
+      </ElTooltip>
+    </div>
+  </template>
+  <!-- 服务 -->
+  <div v-if="data.type === IoTThingModelTypeEnum.SERVICE">
+    调用方式：
+    {{ getThingModelServiceCallTypeLabel(data.service?.callType as any) }}
+  </div>
+  <!-- 事件 -->
+  <div v-if="data.type === IoTThingModelTypeEnum.EVENT">
+    事件类型：{{ getEventTypeLabel(data.event?.type as any) }}
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/components/index.ts b/apps/web-ele/src/views/iot/thingmodel/modules/components/index.ts
new file mode 100644
index 000000000..d6316d657
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/components/index.ts
@@ -0,0 +1 @@
+export { default as DataDefinition } from './data-definition.vue';
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/array.vue b/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/array.vue
new file mode 100644
index 000000000..903ac2e97
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/array.vue
@@ -0,0 +1,72 @@
+<!-- dataType：array 数组类型 -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import {
+  getDataTypeOptions,
+  IoTDataSpecsDataTypeEnum,
+} from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElInput, ElRadio, ElRadioGroup } from 'element-plus';
+
+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>;
+
+/** 元素类型切到 struct 时，初始化 dataSpecsList 占位 */
+function handleChange(val: any) {
+  if (val !== IoTDataSpecsDataTypeEnum.STRUCT) {
+    return;
+  }
+  dataSpecs.value.dataSpecsList = [];
+}
+</script>
+
+<template>
+  <ElFormItem
+    :rules="ThingModelFormRules.childDataType"
+    label="元素类型"
+    prop="property.dataSpecs.childDataType"
+  >
+    <ElRadioGroup v-model="dataSpecs.childDataType" @change="handleChange">
+      <ElRadio
+        v-for="item in childDataTypeOptions"
+        :key="item.value"
+        :value="item.value"
+        class="w-1/3"
+      >
+        {{ `${item.value}(${item.label})` }}
+      </ElRadio>
+    </ElRadioGroup>
+  </ElFormItem>
+  <ElFormItem
+    :rules="ThingModelFormRules.size"
+    label="元素个数"
+    prop="property.dataSpecs.size"
+  >
+    <ElInput
+      v-model="dataSpecs.size"
+      placeholder="请输入数组中的元素个数"
+    />
+  </ElFormItem>
+  <!-- Struct 型配置-->
+  <ThingModelStructDataSpecs
+    v-if="dataSpecs.childDataType === IoTDataSpecsDataTypeEnum.STRUCT"
+    v-model="dataSpecs.dataSpecsList"
+  />
+</template>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/enum.vue b/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/enum.vue
new file mode 100644
index 000000000..22030d2ce
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/enum.vue
@@ -0,0 +1,131 @@
+<!-- dataType：enum 数组类型 -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { ElButton, ElFormItem, ElInput, ElMessage } from 'element-plus';
+
+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({ name: '', value: '' } as any);
+}
+
+/** 删除枚举项 */
+function deleteEnum(index: number) {
+  if (dataSpecsList.value.length === 1) {
+    ElMessage.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>
+  <ElFormItem
+    :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"
+      >
+        <ElFormItem
+          :prop="`property.dataSpecsList.${index}.value`"
+          :rules="[
+            { required: true, message: '枚举值不能为空', trigger: 'blur' },
+            { validator: validateEnumValue, trigger: 'blur' },
+          ]"
+          class="mb-0 flex-1"
+        >
+          <ElInput v-model="item.value" placeholder="请输入枚举值，如「0」" />
+        </ElFormItem>
+        <span class="mx-2">~</span>
+        <ElFormItem
+          :prop="`property.dataSpecsList.${index}.name`"
+          :rules="[
+            { required: true, message: '枚举描述不能为空', trigger: 'blur' },
+            { validator: validateEnumName, trigger: 'blur' },
+          ]"
+          class="mb-0 flex-1"
+        >
+          <ElInput v-model="item.name" placeholder="对该枚举项的描述" />
+        </ElFormItem>
+        <ElButton class="ml-2.5" link type="primary" @click="deleteEnum(index)">
+          删除
+        </ElButton>
+      </div>
+      <ElButton link type="primary" @click="addEnum">+ 添加枚举项</ElButton>
+    </div>
+  </ElFormItem>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/index.ts b/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/index.ts
new file mode 100644
index 000000000..5b75f0a7f
--- /dev/null
+++ b/apps/web-ele/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-ele/src/views/iot/thingmodel/modules/data-specs/number.vue b/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/number.vue
new file mode 100644
index 000000000..0a8706e69
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/number.vue
@@ -0,0 +1,76 @@
+<!-- dataType：number 数组类型 -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const dataSpecs = useVModel(
+  props,
+  'modelValue',
+  emits,
+) as Ref<ThingModelApi.DataSpecsNumberData>;
+
+/** 单位下拉变化时，拆出 unitName 与 unit 回写 */
+function unitChange(unitSpecs: any) {
+  if (!unitSpecs) {
+    return;
+  }
+  const [unitName, unit] = String(unitSpecs).split('-');
+  dataSpecs.value.unitName = unitName;
+  dataSpecs.value.unit = unit;
+}
+</script>
+
+<template>
+  <ElFormItem label="取值范围">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <ElInput v-model="dataSpecs.min" placeholder="请输入最小值" />
+      </div>
+      <span class="mx-2">~</span>
+      <div class="flex-1">
+        <ElInput v-model="dataSpecs.max" placeholder="请输入最大值" />
+      </div>
+    </div>
+  </ElFormItem>
+  <ElFormItem label="步长">
+    <ElInput v-model="dataSpecs.step" placeholder="请输入步长" />
+  </ElFormItem>
+  <ElFormItem label="单位">
+    <ElSelect
+      :model-value="
+        dataSpecs.unit ? `${dataSpecs.unitName}-${dataSpecs.unit}` : ''
+      "
+      class="w-full"
+      filterable
+      placeholder="请选择单位"
+      @change="unitChange"
+    >
+      <ElOption
+        v-for="(item, index) in getDictOptions(
+          DICT_TYPE.IOT_THING_MODEL_UNIT,
+          'string',
+        )"
+        :key="index"
+        :label="`${item.label}-${item.value}`"
+        :value="`${item.label}-${item.value}`"
+      />
+    </ElSelect>
+  </ElFormItem>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/struct.vue b/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/struct.vue
new file mode 100644
index 000000000..df46e7197
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/data-specs/struct.vue
@@ -0,0 +1,162 @@
+<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 { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElButton,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+} from 'element-plus';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+
+import ThingModelProperty from '../property.vue';
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>;
+
+const structFormRef = ref();
+const formData = ref<any>(buildEmptyFormData());
+
+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;
+    }
+    formData.value = {
+      identifier: data.identifier ?? '',
+      name: data.name ?? '',
+      description: data.description ?? '',
+      property: {
+        dataType: data.childDataType ?? IoTDataSpecsDataTypeEnum.INT,
+        dataSpecs: data.dataSpecs ?? {},
+        dataSpecsList: 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>
+  <ElFormItem 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>
+        <ElButton link type="primary" @click="openStructForm(item)">编辑</ElButton>
+        <ElDivider direction="vertical" />
+        <ElButton link type="danger" @click="deleteStructItem(index)">
+          删除
+        </ElButton>
+      </div>
+    </div>
+    <ElButton link type="primary" @click="openStructForm(null)">+ 新增参数</ElButton>
+  </ElFormItem>
+
+  <!-- 结构体参数表单 -->
+  <Modal class="w-2/5" title="结构体参数">
+    <ElForm
+      ref="structFormRef"
+      :model="formData"
+      class="mx-4"
+      label-width="140px"
+    >
+      <ElFormItem
+        :rules="ThingModelFormRules.name"
+        label="参数名称"
+        prop="name"
+      >
+        <ElInput v-model="formData.name" placeholder="请输入参数名称" />
+      </ElFormItem>
+      <ElFormItem
+        :rules="ThingModelFormRules.identifier"
+        label="标识符"
+        prop="identifier"
+      >
+        <ElInput v-model="formData.identifier" placeholder="请输入标识符" />
+      </ElFormItem>
+      <!-- 属性配置 -->
+      <ThingModelProperty v-model="formData.property" is-struct-data-specs />
+    </ElForm>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/event.vue b/apps/web-ele/src/views/iot/thingmodel/modules/event.vue
new file mode 100644
index 000000000..f242cf51d
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/event.vue
@@ -0,0 +1,64 @@
+<!-- 产品的物模型表单（event 项） -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { watch } from 'vue';
+
+import {
+  IoTThingModelEventTypeEnum,
+  IoTThingModelParamDirectionEnum,
+} from '@vben/constants';
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElRadio, ElRadioGroup } from 'element-plus';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+
+import ThingModelInputOutputParam from './input-output-param.vue';
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const thingModelEvent = useVModel(props, 'modelValue', emits) as Ref<any>;
+
+/** 默认选中，INFO 信息 */
+watch(
+  () => thingModelEvent.value.type,
+  (val: string | undefined) =>
+    isEmpty(val) &&
+    (thingModelEvent.value.type = IoTThingModelEventTypeEnum.INFO.value),
+  { immediate: true },
+);
+</script>
+
+<template>
+  <ElFormItem
+    :rules="ThingModelFormRules.eventType"
+    label="事件类型"
+    prop="event.type"
+  >
+    <ElRadioGroup v-model="thingModelEvent.type">
+      <ElRadio
+        v-for="eventType in Object.values(IoTThingModelEventTypeEnum)"
+        :key="eventType.value"
+        :value="eventType.value"
+      >
+        {{ eventType.label }}
+      </ElRadio>
+    </ElRadioGroup>
+  </ElFormItem>
+  <ElFormItem label="输出参数">
+    <ThingModelInputOutputParam
+      v-model="thingModelEvent.outputParams"
+      :direction="IoTThingModelParamDirectionEnum.OUTPUT"
+    />
+  </ElFormItem>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/form.vue b/apps/web-ele/src/views/iot/thingmodel/modules/form.vue
new file mode 100644
index 000000000..bc38954a5
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/form.vue
@@ -0,0 +1,268 @@
+<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 {
+  ElForm,
+  ElFormItem,
+  ElInput,
+  ElMessage,
+  ElRadioButton,
+  ElRadioGroup,
+} from 'element-plus';
+
+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');
+      ElMessage.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;
+    if (isEmpty(data.event.outputParams)) {
+      delete data.event.outputParams;
+    }
+    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;
+    if (isEmpty(data.service.inputParams)) {
+      delete data.service.inputParams;
+    }
+    if (isEmpty(data.service.outputParams)) {
+      delete data.service.outputParams;
+    }
+    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">
+    <ElForm
+      ref="formRef"
+      :model="formData"
+      class="mx-4"
+      label-width="140px"
+    >
+      <ElFormItem
+        :rules="ThingModelFormRules.type"
+        label="功能类型"
+        prop="type"
+      >
+        <ElRadioGroup v-model="formData.type">
+          <ElRadioButton
+            v-for="dict in getDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE)"
+            :key="String(dict.value)"
+            :value="Number(dict.value)"
+          >
+            {{ dict.label }}
+          </ElRadioButton>
+        </ElRadioGroup>
+      </ElFormItem>
+      <ElFormItem
+        :rules="ThingModelFormRules.name"
+        label="功能名称"
+        prop="name"
+      >
+        <ElInput v-model="formData.name" placeholder="请输入功能名称" />
+      </ElFormItem>
+      <ElFormItem
+        :rules="ThingModelFormRules.identifier"
+        label="标识符"
+        prop="identifier"
+      >
+        <ElInput v-model="formData.identifier" placeholder="请输入标识符" />
+      </ElFormItem>
+      <!-- 属性配置 -->
+      <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"
+      />
+      <ElFormItem label="描述" prop="description">
+        <ElInput
+          v-model="formData.description"
+          :maxlength="200"
+          :rows="3"
+          placeholder="请输入物模型描述"
+          type="textarea"
+        />
+      </ElFormItem>
+    </ElForm>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/input-output-param.vue b/apps/web-ele/src/views/iot/thingmodel/modules/input-output-param.vue
new file mode 100644
index 000000000..5a3d419b2
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/input-output-param.vue
@@ -0,0 +1,161 @@
+<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 { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElButton,
+  ElDivider,
+  ElForm,
+  ElFormItem,
+  ElInput,
+} from 'element-plus';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+
+import ThingModelProperty from './property.vue';
+
+const props = defineProps<{ direction: 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;
+    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;
+    }
+    // 设置到 values
+    formData.value = {
+      identifier: data.identifier ?? '',
+      name: data.name ?? '',
+      description: data.description ?? '',
+      property: {
+        dataType: data.dataType ?? IoTDataSpecsDataTypeEnum.INT,
+        dataSpecs: data.dataSpecs ?? {},
+        dataSpecsList: 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>
+      <ElButton link type="primary" @click="openParamForm(item)">编辑</ElButton>
+      <ElDivider direction="vertical" />
+      <ElButton link type="danger" @click="deleteParamItem(index)">删除</ElButton>
+    </div>
+  </div>
+  <ElButton link type="primary" @click="openParamForm(null)">+ 新增参数</ElButton>
+
+  <!-- 参数表单 -->
+  <Modal class="w-2/5" title="参数配置">
+    <ElForm
+      ref="paramFormRef"
+      :model="formData"
+      class="mx-4"
+      label-width="140px"
+    >
+      <ElFormItem
+        :rules="ThingModelFormRules.name"
+        label="参数名称"
+        prop="name"
+      >
+        <ElInput v-model="formData.name" placeholder="请输入参数名称" />
+      </ElFormItem>
+      <ElFormItem
+        :rules="ThingModelFormRules.identifier"
+        label="标识符"
+        prop="identifier"
+      >
+        <ElInput v-model="formData.identifier" placeholder="请输入标识符" />
+      </ElFormItem>
+      <!-- 属性配置 -->
+      <ThingModelProperty v-model="formData.property" is-params />
+    </ElForm>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/property.vue b/apps/web-ele/src/views/iot/thingmodel/modules/property.vue
new file mode 100644
index 000000000..f5bd532ef
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/property.vue
@@ -0,0 +1,231 @@
+<!-- 产品的物模型表单（property 项） -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { ThingModelApi } from '#/api/iot/thingmodel';
+
+import { computed, watch } from 'vue';
+
+import {
+  getDataTypeOptions,
+  IoTDataSpecsDataTypeEnum,
+  IoTThingModelAccessModeEnum,
+} from '@vben/constants';
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import {
+  ElFormItem,
+  ElInput,
+  ElOption,
+  ElRadio,
+  ElRadioGroup,
+  ElSelect,
+} from 'element-plus';
+
+import { ThingModelFormRules, validateBoolName } from '#/api/iot/thingmodel';
+
+import {
+  ThingModelArrayDataSpecs,
+  ThingModelEnumDataSpecs,
+  ThingModelNumberDataSpecs,
+  ThingModelStructDataSpecs,
+} from './data-specs';
+
+const props = defineProps<{
+  isParams?: boolean;
+  isStructDataSpecs?: boolean;
+  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<ThingModelApi.Property>;
+
+const dataTypeOptions = computed(() =>
+  props.isStructDataSpecs ? STRUCT_CHILD_OPTIONS : getDataTypeOptions(),
+);
+
+/** 数据类型切换时，重置 dataSpecs / dataSpecsList 并按新类型初始化 */
+function handleChange(dataType: any) {
+  property.value.dataSpecs = {};
+  property.value.dataSpecsList = [];
+  // 数值 / 文本 / 时间 / 数组型把 dataType 同步到 dataSpecs；布尔 / 枚举 / 结构走 dataSpecsList
+  const listLike = [
+    IoTDataSpecsDataTypeEnum.BOOL,
+    IoTDataSpecsDataTypeEnum.ENUM,
+    IoTDataSpecsDataTypeEnum.STRUCT,
+  ];
+  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, // 枚举值
+    });
+  }
+}
+
+/** 顶层属性表单首次进入时，默认选中「读写」 */
+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>
+  <ElFormItem
+    :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]"
+    label="数据类型"
+    prop="property.dataType"
+  >
+    <ElSelect
+      v-model="property.dataType"
+      placeholder="请选择数据类型"
+      @change="handleChange"
+    >
+      <!-- ARRAY 和 STRUCT 类型数据相互嵌套时，最多支持递归嵌套 2 层（父和子） -->
+      <ElOption
+        v-for="option in dataTypeOptions"
+        :key="option.value"
+        :label="`${option.value}(${option.label})`"
+        :value="option.value"
+      />
+    </ElSelect>
+  </ElFormItem>
+  <!-- 数值型配置 -->
+  <ThingModelNumberDataSpecs
+    v-if="NUMERIC_TYPES.has(property.dataType || '')"
+    v-model="property.dataSpecs"
+  />
+  <!-- 枚举型配置 -->
+  <ThingModelEnumDataSpecs
+    v-if="property.dataType === IoTDataSpecsDataTypeEnum.ENUM"
+    v-model="property.dataSpecsList"
+  />
+  <!-- 布尔型配置 -->
+  <ElFormItem
+    v-if="property.dataType === IoTDataSpecsDataTypeEnum.BOOL"
+    label="布尔值"
+  >
+    <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>
+        <ElFormItem
+          :prop="`property.dataSpecsList.${index}.name`"
+          :rules="[
+            { required: true, message: '布尔描述不能为空', trigger: 'blur' },
+            { validator: validateBoolName, trigger: 'blur' },
+          ]"
+          class="mb-0 flex-1"
+        >
+          <ElInput
+            v-model="item.name"
+            :placeholder="`如：${item.value === 0 ? '关' : '开'}`"
+            class="!w-[255px]"
+          />
+        </ElFormItem>
+      </div>
+    </template>
+  </ElFormItem>
+  <!-- 文本型配置 -->
+  <ElFormItem
+    v-if="property.dataType === IoTDataSpecsDataTypeEnum.TEXT"
+    :rules="ThingModelFormRules.length"
+    label="数据长度"
+    prop="property.dataSpecs.length"
+  >
+    <ElInput
+      v-model="property.dataSpecs.length"
+      class="!w-[255px]"
+      placeholder="请输入文本字节长度"
+    >
+      <template #append>字节</template>
+    </ElInput>
+  </ElFormItem>
+  <!-- 时间型配置 -->
+  <ElFormItem
+    v-if="property.dataType === IoTDataSpecsDataTypeEnum.DATE"
+    label="时间格式"
+    prop="date"
+  >
+    <ElInput
+      class="!w-[255px]"
+      disabled
+      placeholder="String 类型的 UTC 时间戳（毫秒）"
+    />
+  </ElFormItem>
+  <!-- 数组型配置-->
+  <ThingModelArrayDataSpecs
+    v-if="property.dataType === IoTDataSpecsDataTypeEnum.ARRAY"
+    v-model="property.dataSpecs"
+  />
+  <!-- Struct 型配置-->
+  <ThingModelStructDataSpecs
+    v-if="property.dataType === IoTDataSpecsDataTypeEnum.STRUCT"
+    v-model="property.dataSpecsList"
+  />
+  <ElFormItem
+    v-if="!isStructDataSpecs && !isParams"
+    :rules="ThingModelFormRules.accessMode"
+    label="读写类型"
+    prop="property.accessMode"
+  >
+    <ElRadioGroup v-model="property.accessMode">
+      <ElRadio
+        v-for="accessMode in Object.values(IoTThingModelAccessModeEnum)"
+        :key="accessMode.value"
+        :value="accessMode.value"
+      >
+        {{ accessMode.label }}
+      </ElRadio>
+    </ElRadioGroup>
+  </ElFormItem>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/service.vue b/apps/web-ele/src/views/iot/thingmodel/modules/service.vue
new file mode 100644
index 000000000..4dd5ec47a
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/service.vue
@@ -0,0 +1,70 @@
+<!-- 产品的物模型表单（service 项） -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import { watch } from 'vue';
+
+import {
+  IoTThingModelParamDirectionEnum,
+  IoTThingModelServiceCallTypeEnum,
+} from '@vben/constants';
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+import { ElFormItem, ElRadio, ElRadioGroup } from 'element-plus';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+
+import ThingModelInputOutputParam from './input-output-param.vue';
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const service = useVModel(props, 'modelValue', emits) as Ref<any>;
+
+/** 默认选中，ASYNC 异步 */
+watch(
+  () => service.value.callType,
+  (val: string | undefined) =>
+    isEmpty(val) &&
+    (service.value.callType = IoTThingModelServiceCallTypeEnum.ASYNC.value),
+  { immediate: true },
+);
+</script>
+
+<template>
+  <ElFormItem
+    :rules="ThingModelFormRules.callType"
+    label="调用方式"
+    prop="service.callType"
+  >
+    <ElRadioGroup v-model="service.callType">
+      <ElRadio
+        v-for="callType in Object.values(IoTThingModelServiceCallTypeEnum)"
+        :key="callType.value"
+        :value="callType.value"
+      >
+        {{ callType.label }}
+      </ElRadio>
+    </ElRadioGroup>
+  </ElFormItem>
+  <ElFormItem label="输入参数">
+    <ThingModelInputOutputParam
+      v-model="service.inputParams"
+      :direction="IoTThingModelParamDirectionEnum.INPUT"
+    />
+  </ElFormItem>
+  <ElFormItem label="输出参数">
+    <ThingModelInputOutputParam
+      v-model="service.outputParams"
+      :direction="IoTThingModelParamDirectionEnum.OUTPUT"
+    />
+  </ElFormItem>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-form-item) {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/iot/thingmodel/modules/tsl.vue b/apps/web-ele/src/views/iot/thingmodel/modules/tsl.vue
new file mode 100644
index 000000000..f7d487b21
--- /dev/null
+++ b/apps/web-ele/src/views/iot/thingmodel/modules/tsl.vue
@@ -0,0 +1,80 @@
+<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 { ElInput, ElRadioButton, ElRadioGroup } from 'element-plus';
+
+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">
+        <ElRadioGroup v-model="viewMode" size="small">
+          <ElRadioButton value="view">代码视图</ElRadioButton>
+          <ElRadioButton value="editor">编辑器视图</ElRadioButton>
+        </ElRadioGroup>
+      </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>
+      <!-- 编辑器视图：可编辑 -->
+      <ElInput
+        v-else
+        v-model="tslString"
+        :rows="20"
+        class="font-mono text-[13px]"
+        placeholder="请输入 JSON 格式的物模型 TSL"
+        type="textarea"
+      />
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/autocode/data.ts b/apps/web-ele/src/views/mes/md/autocode/data.ts
new file mode 100644
index 000000000..50eb09b59
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/autocode/data.ts
@@ -0,0 +1,472 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdAutoCodePartApi } from '#/api/mes/md/autocode/part';
+import type { MesMdAutoCodeRuleApi } from '#/api/mes/md/autocode/rule';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { MesAutoCodePartTypeEnum } from '#/views/mes/utils/constants';
+
+/** 新增/修改编码规则的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '规则编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'description',
+      label: '规则描述',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入规则描述',
+      },
+    },
+    {
+      fieldName: 'maxLength',
+      label: '最大长度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        max: 100,
+        min: 1,
+        precision: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'padded',
+      label: '是否补齐',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'paddedChar',
+      label: '补齐字符',
+      component: 'Input',
+      componentProps: {
+        maxLength: 1,
+        placeholder: '请输入补齐字符',
+      },
+      dependencies: {
+        triggerFields: ['padded'],
+        show: (values) => values.padded === true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'paddedMethod',
+      label: '补齐方式',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(
+          DICT_TYPE.MES_MD_AUTO_CODE_PADDED_METHOD,
+          'number',
+        ),
+      },
+      dependencies: {
+        triggerFields: ['padded'],
+        show: (values) => values.padded === true,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '规则编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规则编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '规则名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规则名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdAutoCodeRuleApi.AutoCodeRule>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '规则编码',
+      width: 150,
+    },
+    {
+      field: 'name',
+      title: '规则名称',
+      width: 200,
+    },
+    {
+      field: 'description',
+      title: '规则描述',
+      minWidth: 180,
+    },
+    {
+      field: 'maxLength',
+      title: '最大长度',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'padded',
+      title: '是否补齐',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 160,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 150,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 新增/修改编码规则分段的表单 */
+export function usePartFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'ruleId',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '分段排序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 1,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'length',
+      label: '分段长度',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        max: 50,
+        min: 1,
+        precision: 0,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'type',
+      label: '分段类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(
+          DICT_TYPE.MES_MD_AUTO_CODE_PART_TYPE,
+          'number',
+        ),
+        placeholder: '请选择分段类型',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'dateFormat',
+      label: '日期格式',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: [
+          { label: 'yyyy', value: 'yyyy' },
+          { label: 'yyyyMM', value: 'yyyyMM' },
+          { label: 'yyyyMMdd', value: 'yyyyMMdd' },
+          { label: 'yyyyMMddHH', value: 'yyyyMMddHH' },
+          { label: 'yyyyMMddHHmm', value: 'yyyyMMddHHmm' },
+        ],
+        placeholder: '请选择日期格式',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.DATE,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'fixCharacter',
+      label: '固定字符',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入固定字符',
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.FIX,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'serialStartNo',
+      label: '流水号起始值',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 1,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.SERIAL,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'serialStep',
+      label: '流水号步长',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 1,
+        precision: 0,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.SERIAL,
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'cycleFlag',
+      label: '是否循环',
+      component: 'Switch',
+      componentProps: {
+        activeText: '是',
+        inactiveText: '否',
+        inlinePrompt: true,
+      },
+      dependencies: {
+        triggerFields: ['type'],
+        show: (values) => values.type === MesAutoCodePartTypeEnum.SERIAL,
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'cycleMethod',
+      label: '循环方式',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(
+          DICT_TYPE.MES_MD_AUTO_CODE_CYCLE_METHOD,
+          'number',
+        ),
+        placeholder: '请选择循环方式',
+      },
+      dependencies: {
+        triggerFields: ['type', 'cycleFlag'],
+        show: (values) =>
+          values.type === MesAutoCodePartTypeEnum.SERIAL &&
+          values.cycleFlag === true,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 编码规则分段的字段 */
+export function usePartGridColumns(): VxeTableGridOptions<MesMdAutoCodePartApi.AutoCodePart>['columns'] {
+  return [
+    {
+      field: 'sort',
+      title: '分段排序',
+      width: 90,
+      align: 'center',
+    },
+    {
+      field: 'type',
+      title: '分段类型',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_AUTO_CODE_PART_TYPE },
+      },
+    },
+    {
+      field: 'length',
+      title: '分段长度',
+      width: 90,
+      align: 'center',
+    },
+    {
+      field: 'dateFormat',
+      title: '日期格式',
+      width: 150,
+      align: 'center',
+    },
+    {
+      field: 'fixCharacter',
+      title: '固定字符',
+      width: 120,
+      align: 'center',
+    },
+    {
+      field: 'serialStartNo',
+      title: '流水号起始',
+      width: 110,
+      align: 'center',
+    },
+    {
+      field: 'serialStep',
+      title: '流水号步长',
+      width: 110,
+      align: 'center',
+    },
+    {
+      field: 'cycleFlag',
+      title: '是否循环',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'cycleMethod',
+      title: '循环方式',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_AUTO_CODE_CYCLE_METHOD },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 160,
+    },
+    {
+      title: '操作',
+      width: 130,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/md/autocode/index.vue b/apps/web-ele/src/views/mes/md/autocode/index.vue
new file mode 100644
index 000000000..abf27be5a
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/autocode/index.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdAutoCodeRuleApi } from '#/api/mes/md/autocode/rule';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteAutoCodeRule,
+  exportAutoCodeRule,
+  getAutoCodeRulePage,
+} from '#/api/mes/md/autocode/rule';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建编码规则 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑编码规则 */
+function handleEdit(row: MesMdAutoCodeRuleApi.AutoCodeRule) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除编码规则 */
+async function handleDelete(row: MesMdAutoCodeRuleApi.AutoCodeRule) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteAutoCodeRule(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出编码规则 */
+async function handleExport() {
+  const data = await exportAutoCodeRule(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '编码规则.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getAutoCodeRulePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdAutoCodeRuleApi.AutoCodeRule>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】编码规则"
+        url="https://doc.iocoder.cn/mes/md/autocode/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="编码规则列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['编码规则']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:auto-code-rule:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:auto-code-rule:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:auto-code-rule:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:auto-code-rule:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/autocode/modules/form.vue b/apps/web-ele/src/views/mes/md/autocode/modules/form.vue
new file mode 100644
index 000000000..e99f2b3ee
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/autocode/modules/form.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { MesMdAutoCodeRuleApi } from '#/api/mes/md/autocode/rule';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createAutoCodeRule,
+  getAutoCodeRule,
+  updateAutoCodeRule,
+} from '#/api/mes/md/autocode/rule';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import PartList from './part-list.vue';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesMdAutoCodeRuleApi.AutoCodeRule>();
+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: useFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 清理未启用补齐时的补齐字段 */
+function normalizeRuleData(data: MesMdAutoCodeRuleApi.AutoCodeRule) {
+  if (!data.padded) {
+    data.paddedChar = undefined;
+    data.paddedMethod = undefined;
+  }
+  return data;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = normalizeRuleData(
+      (await formApi.getValues()) as MesMdAutoCodeRuleApi.AutoCodeRule,
+    );
+    try {
+      await (formData.value?.id
+        ? updateAutoCodeRule(data)
+        : createAutoCodeRule(data));
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<MesMdAutoCodeRuleApi.AutoCodeRule>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getAutoCodeRule(data.id);
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/5">
+    <Form class="mx-4" />
+    <template v-if="formData?.id">
+      <div class="mx-4 mt-4">
+        <PartList :rule-id="formData.id" />
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/autocode/modules/part-form.vue b/apps/web-ele/src/views/mes/md/autocode/modules/part-form.vue
new file mode 100644
index 000000000..87da800ba
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/autocode/modules/part-form.vue
@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import type { MesMdAutoCodePartApi } from '#/api/mes/md/autocode/part';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createAutoCodePart,
+  getAutoCodePart,
+  updateAutoCodePart,
+} from '#/api/mes/md/autocode/part';
+import { $t } from '#/locales';
+import { MesAutoCodePartTypeEnum } from '#/views/mes/utils/constants';
+
+import { usePartFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesMdAutoCodePartApi.AutoCodePart>();
+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: usePartFormSchema(),
+  showDefaultActions: false,
+});
+
+/** 清理当前分段类型不需要的字段 */
+function normalizePartData(data: MesMdAutoCodePartApi.AutoCodePart) {
+  if (data.type !== MesAutoCodePartTypeEnum.DATE) {
+    data.dateFormat = undefined;
+  }
+  if (data.type !== MesAutoCodePartTypeEnum.FIX) {
+    data.fixCharacter = undefined;
+  }
+  if (data.type !== MesAutoCodePartTypeEnum.SERIAL) {
+    data.serialStartNo = undefined;
+    data.serialStep = undefined;
+    data.cycleFlag = false;
+    data.cycleMethod = undefined;
+  } else if (!data.cycleFlag) {
+    data.cycleMethod = undefined;
+  }
+  return data;
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = normalizePartData(
+      (await formApi.getValues()) as MesMdAutoCodePartApi.AutoCodePart,
+    );
+    try {
+      await (formData.value?.id
+        ? updateAutoCodePart(data)
+        : createAutoCodePart(data));
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      maxSort?: number;
+      ruleId: number;
+    }>();
+    if (!data?.id) {
+      await formApi.setValues({
+        ruleId: data.ruleId,
+        sort: (data.maxSort || 0) + 1,
+      });
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getAutoCodePart(data.id);
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/autocode/modules/part-list.vue b/apps/web-ele/src/views/mes/md/autocode/modules/part-list.vue
new file mode 100644
index 000000000..87775ec2a
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/autocode/modules/part-list.vue
@@ -0,0 +1,132 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdAutoCodePartApi } from '#/api/mes/md/autocode/part';
+
+import { ref, watch } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteAutoCodePart,
+  getAutoCodePartListByRuleId,
+} from '#/api/mes/md/autocode/part';
+import { $t } from '#/locales';
+
+import { usePartGridColumns } from '../data';
+import PartForm from './part-form.vue';
+
+const props = defineProps<{
+  ruleId: number;
+}>();
+
+const list = ref<MesMdAutoCodePartApi.AutoCodePart[]>([]);
+
+const [PartFormModal, partFormModalApi] = useVbenModal({
+  connectedComponent: PartForm,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: usePartGridColumns(),
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdAutoCodePartApi.AutoCodePart>,
+});
+
+/** 加载编码规则分段 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getAutoCodePartListByRuleId(props.ruleId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 创建编码规则分段 */
+function handleCreate() {
+  const maxSort =
+    list.value.length > 0
+      ? Math.max(...list.value.map((item) => item.sort || 0))
+      : 0;
+  partFormModalApi.setData({ maxSort, ruleId: props.ruleId }).open();
+}
+
+/** 编辑编码规则分段 */
+function handleEdit(row: MesMdAutoCodePartApi.AutoCodePart) {
+  partFormModalApi.setData({ id: row.id, ruleId: props.ruleId }).open();
+}
+
+/** 删除编码规则分段 */
+async function handleDelete(row: MesMdAutoCodePartApi.AutoCodePart) {
+  await deleteAutoCodePart(row.id!);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', ['编码规则分段']));
+  await getList();
+}
+
+watch(
+  () => props.ruleId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <PartFormModal @success="getList" />
+  <div class="mb-3 flex items-center justify-start">
+    <TableAction
+      :actions="[
+        {
+          label: $t('ui.actionTitle.create', ['分段']),
+          type: 'primary',
+          onClick: handleCreate,
+        },
+      ]"
+    />
+  </div>
+  <Grid class="w-full" table-title="规则组成">
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: $t('common.edit'),
+            type: 'primary',
+            link: true,
+            onClick: handleEdit.bind(null, row),
+          },
+          {
+            label: $t('common.delete'),
+            type: 'danger',
+            link: true,
+            popConfirm: {
+              title: $t('ui.actionMessage.deleteConfirm', ['编码规则分段']),
+              confirm: handleDelete.bind(null, row),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/client/components/md-client-select-dialog.vue b/apps/web-ele/src/views/mes/md/client/components/md-client-select-dialog.vue
new file mode 100644
index 000000000..ca48c71fd
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/client/components/md-client-select-dialog.vue
@@ -0,0 +1,240 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { nextTick, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getClientPage } from '#/api/mes/md/client';
+
+import {
+  useClientSelectGridColumns,
+  useClientSelectGridFormSchema,
+} from '../data';
+
+const emit = defineEmits<{
+  selected: [rows: MesMdClientApi.Client[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const selectedRows = ref<MesMdClientApi.Client[]>([]); // 已选客户列表
+const preSelectedIds = ref<number[]>([]); // 预选客户编号列表
+const latestQueryRows = ref<MesMdClientApi.Client[]>([]); // 最近一次查询返回的客户列表
+const queryFinished = ref(false); // 最近一次查询是否完成
+
+// TODO @芋艿：是否有必要搞的这么复杂？？？后续测试看看。
+const MAX_TABLE_READY_FRAMES = 60;
+
+/** 等待下一帧 */
+function waitNextFrame(): Promise<void> {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => resolve());
+  });
+}
+
+/** 获取当前表格数据 */
+function getTableRows() {
+  return gridApi.grid.getTableData().fullData as MesMdClientApi.Client[];
+}
+
+/** 等待 VXE 将当前查询结果写入表格数据后再回显选中 */
+async function waitTableReady(): Promise<void> {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  for (let index = 0; index < MAX_TABLE_READY_FRAMES; index += 1) {
+    if (queryFinished.value) {
+      const rows = getTableRows();
+      if (latestQueryRows.value.length === 0 && rows.length === 0) {
+        return;
+      }
+      if (latestQueryRows.value.length > 0 && rows.length > 0) {
+        return;
+      }
+    }
+    await waitNextFrame();
+  }
+}
+
+/** 获取多选记录，包含 VXE reserve 跨页记录 */
+function getMultipleSelectedRows() {
+  const selectedMap = new Map<number, MesMdClientApi.Client>();
+  const records = [
+    ...(gridApi.grid.getCheckboxReserveRecords?.() ?? []),
+    ...(gridApi.grid.getCheckboxRecords?.() ?? []),
+  ] as MesMdClientApi.Client[];
+  records.forEach((row) => {
+    if (row.id != null) {
+      selectedMap.set(row.id, row);
+    }
+  });
+  return [...selectedMap.values()];
+}
+
+/** 处理勾选变化 */
+function handleCheckboxSelectChange() {
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理单选变化 */
+function handleRadioChange(row: MesMdClientApi.Client) {
+  selectedRows.value = [row];
+}
+
+/** 多选模式下切换行勾选 */
+async function toggleMultipleRow(row: MesMdClientApi.Client) {
+  const selected = gridApi.grid.isCheckedByCheckboxRow(row);
+  await gridApi.grid.setCheckboxRow(row, !selected);
+  selectedRows.value = getMultipleSelectedRows();
+}
+
+/** 处理行双击 */
+async function handleCellDblclick({ row }: { row: MesMdClientApi.Client }) {
+  if (multiple.value) {
+    await toggleMultipleRow(row);
+    return;
+  }
+  selectedRows.value = [row];
+  await gridApi.grid.setRadioRow(row);
+  handleConfirm();
+}
+
+/** 回显预选客户 */
+async function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  // proxy 表格回显选中时要读取 fullData，否则首次打开可能读不到刚查询出的数据。
+  const rows = getTableRows();
+  for (const row of rows) {
+    if (row.id == null || !preSelectedIds.value.includes(row.id)) {
+      continue;
+    }
+    if (multiple.value) {
+      await gridApi.grid.setCheckboxRow(row, true);
+    } else {
+      await gridApi.grid.setRadioRow(row);
+      selectedRows.value = [row];
+      return;
+    }
+  }
+  if (multiple.value) {
+    selectedRows.value = getMultipleSelectedRows();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useClientSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useClientSelectGridColumns(true),
+    height: 520,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getClientPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            status: CommonStatusEnum.ENABLE,
+          });
+          latestQueryRows.value = data.list || [];
+          queryFinished.value = true;
+          return data;
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdClientApi.Client>,
+  gridEvents: {
+    cellDblclick: handleCellDblclick,
+    checkboxAll: handleCheckboxSelectChange,
+    checkboxChange: handleCheckboxSelectChange,
+    radioChange: ({ row }: { row: MesMdClientApi.Client }) => {
+      handleRadioChange(row);
+    },
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.grid.clearRadioRow();
+  await gridApi.formApi.resetForm();
+}
+
+/** 打开客户选择弹窗 */
+async function openModal(selectedIds?: number[], options?: { multiple?: boolean }) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  latestQueryRows.value = [];
+  queryFinished.value = false;
+  await nextTick();
+  gridApi.setGridOptions({ columns: useClientSelectGridColumns(multiple.value) });
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  await waitTableReady();
+  await applyPreSelection();
+}
+
+/** 关闭客户选择弹窗 */
+function closeModal() {
+  open.value = false;
+}
+
+/** 确认选择客户 */
+function handleConfirm() {
+  const rows = multiple.value ? getMultipleSelectedRows() : selectedRows.value;
+  if (rows.length === 0) {
+    ElMessage.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? rows : [rows[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    title="客户选择"
+    width="70%"
+    destroy-on-close
+    @close="closeModal"
+  >
+    <Grid table-title="客户列表" />
+    <template #footer>
+      <ElButton @click="closeModal">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/client/components/md-client-select.vue b/apps/web-ele/src/views/mes/md/client/components/md-client-select.vue
new file mode 100644
index 000000000..707c54373
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/client/components/md-client-select.vue
@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { CircleX, Search } from '@vben/icons';
+
+import { ElInput, ElTooltip } from 'element-plus';
+
+import { getClient } from '#/api/mes/md/client';
+
+import MdClientSelectDialog from './md-client-select-dialog.vue';
+
+defineOptions({ name: 'MdClientSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择客户',
+  },
+);
+const emit = defineEmits<{
+  change: [item: MesMdClientApi.Client | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdClientSelectDialog>>(); // 客户选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedItem = ref<MesMdClientApi.Client>(); // 当前选中客户
+
+const displayLabel = computed(() => selectedItem.value?.name ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () => props.clearable && !props.disabled && hovering.value && props.modelValue != null,
+);
+
+/** 根据客户编号回显选择器 */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getClient(id);
+  } catch (error) {
+    console.error('[MdClientSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveItemById(value);
+  },
+  { immediate: true },
+);
+
+/** 清空已选客户 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开客户选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.el-input__suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 回填选中的客户 */
+function handleSelected(rows: MesMdClientApi.Client[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <ElTooltip :disabled="!selectedItem" placement="top" :show-after="500">
+      <template #content>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编码：{{ selectedItem.code || '-' }}</div>
+          <div>名称：{{ selectedItem.name || '-' }}</div>
+          <div>简称：{{ selectedItem.nickname || '-' }}</div>
+          <div>电话：{{ selectedItem.telephone || '-' }}</div>
+        </div>
+      </template>
+      <ElInput
+        :disabled="disabled"
+        :model-value="displayLabel"
+        :placeholder="placeholder"
+        readonly
+      >
+        <template #suffix>
+          <CircleX v-if="showClear" class="size-4" />
+          <Search v-else class="size-4" />
+        </template>
+      </ElInput>
+    </ElTooltip>
+  </div>
+  <MdClientSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
diff --git a/apps/web-ele/src/views/mes/md/client/data.ts b/apps/web-ele/src/views/mes/md/client/data.ts
new file mode 100644
index 000000000..0a7597229
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/client/data.ts
@@ -0,0 +1,479 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+/** 新增/修改客户的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '客户编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          ElButton,
+          {
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_CLIENT_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '自动生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '客户名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户名称',
+      },
+      rules: z.string().min(1, '客户名称不能为空').max(100),
+    },
+    {
+      fieldName: 'nickname',
+      label: '客户简称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '客户英文名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户英文名称',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '客户类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.MES_CLIENT_TYPE, 'number'),
+        placeholder: '请选择客户类型',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'description',
+      label: '客户简介',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入客户简介',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'address',
+      label: '客户地址',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入客户地址',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'website',
+      label: '客户官网地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户官网地址',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: '客户邮箱地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户邮箱地址',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'telephone',
+      label: '客户电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户电话',
+      },
+    },
+    {
+      fieldName: 'logo',
+      label: '客户 LOGO',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入客户 LOGO 地址',
+      },
+    },
+    {
+      fieldName: 'contact1Name',
+      label: '联系人1',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1',
+      },
+    },
+    {
+      fieldName: 'contact1Telephone',
+      label: '联系人1电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1电话',
+      },
+    },
+    {
+      fieldName: 'contact1Email',
+      label: '联系人1邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'contact2Name',
+      label: '联系人2',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2',
+      },
+    },
+    {
+      fieldName: 'contact2Telephone',
+      label: '联系人2电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2电话',
+      },
+    },
+    {
+      fieldName: 'contact2Email',
+      label: '联系人2邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'creditCode',
+      label: '社会信用代码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入统一社会信用代码',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 导入客户的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '客户数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        activeText: '是',
+        inactiveText: '否',
+        inlinePrompt: true,
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的客户数据',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '客户编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入客户编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '客户名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入客户名称',
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '客户简称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入客户简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入客户英文名称',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '客户类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.MES_CLIENT_TYPE, 'number'),
+        placeholder: '请选择客户类型',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdClientApi.Client>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '客户编码',
+      minWidth: 150,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '客户名称',
+      minWidth: 160,
+    },
+    {
+      field: 'nickname',
+      title: '客户简称',
+      minWidth: 130,
+    },
+    {
+      field: 'type',
+      title: '客户类型',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_CLIENT_TYPE },
+      },
+    },
+    {
+      field: 'telephone',
+      title: '客户电话',
+      minWidth: 140,
+    },
+    {
+      field: 'contact1Name',
+      title: '联系人1',
+      width: 120,
+    },
+    {
+      field: 'contact1Telephone',
+      title: '联系人1电话',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 客户选择弹窗的搜索表单 */
+export function useClientSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '客户编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入客户编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '客户名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入客户名称',
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '客户简称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入客户简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入客户英文名称',
+      },
+    },
+  ];
+}
+
+/** 客户选择弹窗的字段 */
+export function useClientSelectGridColumns(
+  multiple = true,
+): VxeTableGridOptions<MesMdClientApi.Client>['columns'] {
+  return [
+    { type: multiple ? 'checkbox' : 'radio', width: 50 },
+    {
+      field: 'code',
+      title: '客户编码',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '客户名称',
+      minWidth: 160,
+    },
+    {
+      field: 'nickname',
+      title: '客户简称',
+      width: 120,
+    },
+    {
+      field: 'type',
+      title: '客户类型',
+      width: 110,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_CLIENT_TYPE },
+      },
+    },
+    {
+      field: 'contact1Name',
+      title: '联系人',
+      width: 120,
+    },
+    {
+      field: 'telephone',
+      title: '联系电话',
+      width: 140,
+    },
+    {
+      field: 'contact1Telephone',
+      title: '联系人电话',
+      width: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/md/client/index.vue b/apps/web-ele/src/views/mes/md/client/index.vue
new file mode 100644
index 000000000..b7250ddb9
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/client/index.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteClient, exportClient, getClientPage } from '#/api/mes/md/client';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建客户 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看客户 */
+function handleDetail(row: MesMdClientApi.Client) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑客户 */
+function handleEdit(row: MesMdClientApi.Client) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除客户 */
+async function handleDelete(row: MesMdClientApi.Client) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteClient(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportClient(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '客户.xls', source: data });
+}
+
+/** 导入客户 */
+function handleImport() {
+  importModalApi.open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getClientPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdClientApi.Client>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】客户管理、供应商管理"
+        url="https://doc.iocoder.cn/mes/md/client-vendor/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
+
+    <Grid table-title="客户列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['客户']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-client:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.import', ['客户']),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['mes:md-client:import'],
+              onClick: handleImport,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:md-client:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <ElButton link type="primary" @click="handleDetail(row)">
+          {{ row.code }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-client:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-client:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/client/modules/form.vue b/apps/web-ele/src/views/mes/md/client/modules/form.vue
new file mode 100644
index 000000000..1c003ef0c
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/client/modules/form.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createClient, getClient, updateClient } from '#/api/mes/md/client';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import ClientProductSalesLineList from './product-sales-line-list.vue';
+import ClientProductSalesList from './product-sales-list.vue';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const subTabsName = ref('productSalesLine'); // 当前子表页签
+const formData = ref<MesMdClientApi.Client>();
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  const titles: Record<FormMode, string> = {
+    create: '新增客户',
+    update: '修改客户',
+    detail: '查看客户',
+  };
+  return titles[formMode.value];
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdClientApi.Client;
+    try {
+      await (formData.value?.id ? updateClient(data) : createClient(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    subTabsName.value = 'productSalesLine';
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getClient(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <ElTabs
+      v-if="formMode !== 'create' && formData?.id"
+      v-model="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <ElTabPane label="产品清单" name="productSalesLine">
+        <ClientProductSalesLineList :client-id="formData.id" />
+      </ElTabPane>
+      <ElTabPane label="销售记录" name="productSales">
+        <ClientProductSalesList :client-id="formData.id" />
+      </ElTabPane>
+    </ElTabs>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/client/modules/import-form.vue b/apps/web-ele/src/views/mes/md/client/modules/import-form.vue
new file mode 100644
index 000000000..894fc93ca
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/client/modules/import-form.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { MesMdClientApi } from '#/api/mes/md/client';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElMessage, ElUpload } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { importClient, importClientTemplate } from '#/api/mes/md/client';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importClient(data.file, data.updateSupport);
+      const importData = result as MesMdClientApi.ClientImportRespVO;
+      let text = `上传成功数量：${importData.createCodes?.length || 0};`;
+      for (const code of importData.createCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新成功数量：${importData.updateCodes?.length || 0};`;
+      for (const code of importData.updateCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新失败数量：${Object.keys(importData.failureCodes || {}).length};`;
+      for (const code in importData.failureCodes || {}) {
+        text += `< ${code}: ${importData.failureCodes?.[code]} >`;
+      }
+      ElMessage.info(text);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 文件改变时 */
+function handleChange(file: any) {
+  if (file.raw) {
+    formApi.setFieldValue('file', file.raw);
+  }
+}
+
+/** 下载模板 */
+async function handleDownload() {
+  const data = await importClientTemplate();
+  downloadFileFromBlobPart({ fileName: '客户导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.import', ['客户'])" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <ElUpload
+            :auto-upload="false"
+            :limit="1"
+            :on-change="handleChange"
+            accept=".xls,.xlsx"
+          >
+            <ElButton type="primary">选择 Excel 文件</ElButton>
+          </ElUpload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <ElButton @click="handleDownload">下载导入模板</ElButton>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/client/modules/product-sales-line-list.vue b/apps/web-ele/src/views/mes/md/client/modules/product-sales-line-list.vue
new file mode 100644
index 000000000..8ddb50d30
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/client/modules/product-sales-line-list.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmProductSalesLineApi } from '#/api/mes/wm/productsales/line';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSalesLinePage } from '#/api/mes/wm/productsales/line';
+import ItemForm from '#/views/mes/md/item/modules/form.vue';
+
+const props = defineProps<{
+  clientId: number;
+}>();
+
+const [ItemFormModal, itemFormModalApi] = useVbenModal({
+  connectedComponent: ItemForm,
+  destroyOnClose: true,
+});
+
+/** 查看物料详情 */
+function handleViewItem(row: MesWmProductSalesLineApi.ProductSalesLine) {
+  itemFormModalApi.setData({ id: row.itemId, type: 'detail' }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'itemCode',
+        title: '物料编码',
+        width: 140,
+        slots: { default: 'itemCode' },
+      },
+      { field: 'itemName', title: '物料名称', minWidth: 150 },
+      { field: 'specification', title: '规格型号', minWidth: 140 },
+      { field: 'unitMeasureName', title: '单位', width: 100 },
+      { field: 'quantity', title: '出库数量', width: 120 },
+      { field: 'batchCode', title: '批次号', minWidth: 140 },
+    ],
+    height: 320,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getProductSalesLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            clientId: props.clientId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmProductSalesLineApi.ProductSalesLine>,
+});
+</script>
+
+<template>
+  <ItemFormModal />
+  <Grid table-title="产品清单">
+    <template #itemCode="{ row }">
+      <ElButton link type="primary" @click="handleViewItem(row)">
+        {{ row.itemCode }}
+      </ElButton>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/client/modules/product-sales-list.vue b/apps/web-ele/src/views/mes/md/client/modules/product-sales-list.vue
new file mode 100644
index 000000000..0f7b55f8c
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/client/modules/product-sales-list.vue
@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmProductSalesApi } from '#/api/mes/wm/productsales';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductSalesPage } from '#/api/mes/wm/productsales';
+
+const props = defineProps<{
+  clientId: number;
+}>();
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'code', title: '出库单编号', minWidth: 160 },
+      { field: 'name', title: '出库单名称', minWidth: 150 },
+      { field: 'salesOrderCode', title: '销售订单编号', minWidth: 140 },
+      {
+        field: 'salesDate',
+        title: '出库日期',
+        width: 180,
+        formatter: 'formatDateTime',
+      },
+      {
+        field: 'status',
+        title: '单据状态',
+        width: 120,
+        cellRender: {
+          name: 'CellDict',
+          props: { type: DICT_TYPE.MES_WM_PRODUCT_SALES_STATUS },
+        },
+      },
+    ],
+    height: 320,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getProductSalesPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            clientId: props.clientId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmProductSalesApi.ProductSales>,
+});
+</script>
+
+<template>
+  <Grid table-title="销售记录" />
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/components/index.ts b/apps/web-ele/src/views/mes/md/item/components/index.ts
new file mode 100644
index 000000000..348ae8798
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/components/index.ts
@@ -0,0 +1,4 @@
+export { default as MdItemSelectDialog } from './md-item-select-dialog.vue';
+export { default as MdItemSelect } from './md-item-select.vue';
+export { default as MdProductBomSelectDialog } from './md-product-bom-select-dialog.vue';
+export { default as MdProductBomSelect } from './md-product-bom-select.vue';
diff --git a/apps/web-ele/src/views/mes/md/item/components/md-item-select-dialog.vue b/apps/web-ele/src/views/mes/md/item/components/md-item-select-dialog.vue
new file mode 100644
index 000000000..a811d5121
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/components/md-item-select-dialog.vue
@@ -0,0 +1,198 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemApi } from '#/api/mes/md/item';
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { nextTick, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+
+import { ElButton, ElCard, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemPage } from '#/api/mes/md/item';
+import { MdItemTypeTree } from '#/views/mes/md/item/type/components';
+
+import { useItemSelectGridColumns, useItemSelectGridFormSchema } from '../data';
+
+defineOptions({ name: 'MdItemSelectDialog' });
+
+const emit = defineEmits<{
+  selected: [rows: MesMdItemApi.Item[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
+const selectedRows = ref<MesMdItemApi.Item[]>([]); // 已选物料列表
+const selectedItemTypeId = ref<number>(); // 当前筛选分类编号
+const preSelectedIds = ref<number[]>([]); // 预选物料编号列表
+const typeTreeRef = ref<InstanceType<typeof MdItemTypeTree>>(); // 物料分类树
+
+/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+async function syncSingleSelection(row?: MesMdItemApi.Item) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条 */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: MesMdItemApi.Item[];
+  row?: MesMdItemApi.Item;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 处理全选变化 */
+function handleCheckboxAll({ records }: { records: MesMdItemApi.Item[] }) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 按分类筛选物料 */
+function handleItemTypeNodeClick(row: MesMdItemTypeApi.ItemType | undefined) {
+  selectedItemTypeId.value = row?.id;
+  gridApi.query();
+}
+
+/** 回显预选物料 */
+function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesMdItemApi.Item[];
+  for (const row of rows) {
+    if (row.id && preSelectedIds.value.includes(row.id)) {
+      gridApi.grid.setCheckboxRow(row, true);
+      if (!multiple.value) {
+        selectedRows.value = [row];
+      }
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useItemSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useItemSelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            itemTypeId: selectedItemTypeId.value,
+            status: CommonStatusEnum.ENABLE,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdItemApi.Item>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedItemTypeId.value = undefined;
+  selectedRows.value = [];
+  typeTreeRef.value?.reset();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+}
+
+/** 打开物料选择弹窗 */
+async function openModal(selectedIds?: number[], options?: { multiple?: boolean }) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  applyPreSelection();
+}
+
+/** 关闭物料选择弹窗 */
+async function closeModal() {
+  open.value = false;
+  await resetQueryState();
+}
+
+/** 确认选择物料 */
+function handleConfirm() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? selectedRows.value : [selectedRows.value[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    title="物料产品选择"
+    width="80%"
+    destroy-on-close
+    @close="closeModal"
+  >
+    <div class="flex h-full w-full">
+      <ElCard class="mr-4 h-full w-1/5">
+        <MdItemTypeTree ref="typeTreeRef" @node-click="handleItemTypeNodeClick" />
+      </ElCard>
+      <div class="w-4/5">
+        <Grid table-title="物料产品列表" />
+      </div>
+    </div>
+    <template #footer>
+      <ElButton @click="closeModal">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/components/md-item-select.vue b/apps/web-ele/src/views/mes/md/item/components/md-item-select.vue
new file mode 100644
index 000000000..eb4e48560
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/components/md-item-select.vue
@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import type { MesMdItemApi } from '#/api/mes/md/item';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { CircleX, Search } from '@vben/icons';
+
+import { ElInput, ElTooltip } from 'element-plus';
+
+import { getItem } from '#/api/mes/md/item';
+
+import MdItemSelectDialog from './md-item-select-dialog.vue';
+
+defineOptions({ name: 'MdItemSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择产品物料',
+  },
+);
+const emit = defineEmits<{
+  change: [item: MesMdItemApi.Item | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdItemSelectDialog>>(); // 物料选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedItem = ref<MesMdItemApi.Item>(); // 当前选中物料
+
+const displayLabel = computed(() => selectedItem.value?.name ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () => props.clearable && !props.disabled && hovering.value && props.modelValue != null,
+);
+
+/** 根据物料编号回显选择器 */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getItem(id);
+  } catch (error) {
+    console.error('[MdItemSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveItemById(value);
+  },
+  { immediate: true },
+);
+
+/** 清空已选物料 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开物料选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.el-input__suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 回填选中的物料 */
+function handleSelected(rows: MesMdItemApi.Item[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <ElTooltip :disabled="!selectedItem" placement="top" :show-after="500">
+      <template #content>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编码：{{ selectedItem.code || '-' }}</div>
+          <div>名称：{{ selectedItem.name || '-' }}</div>
+          <div>规格：{{ selectedItem.specification || '-' }}</div>
+          <div>单位：{{ selectedItem.unitMeasureName || '-' }}</div>
+        </div>
+      </template>
+      <ElInput
+        :disabled="disabled"
+        :model-value="displayLabel"
+        :placeholder="placeholder"
+        readonly
+      >
+        <template #suffix>
+          <CircleX v-if="showClear" class="size-4" />
+          <Search v-else class="size-4" />
+        </template>
+      </ElInput>
+    </ElTooltip>
+  </div>
+  <MdItemSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/components/md-product-bom-select-dialog.vue b/apps/web-ele/src/views/mes/md/item/components/md-product-bom-select-dialog.vue
new file mode 100644
index 000000000..0938dc898
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/components/md-product-bom-select-dialog.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+
+import { nextTick, ref } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getProductBomListByItemId } from '#/api/mes/md/item/productBom';
+
+import { useProductBomGridColumns } from '../data';
+
+defineOptions({ name: 'MdProductBomSelectDialog' });
+
+const emit = defineEmits<{
+  selected: [row: MesMdProductBomApi.ProductBom];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const list = ref<MesMdProductBomApi.ProductBom[]>([]); // BOM 子物料列表
+const selectedRow = ref<MesMdProductBomApi.ProductBom>(); // 当前选中的 BOM 行
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: [
+      { type: 'radio', width: 55, align: 'center' },
+      ...(useProductBomGridColumns(true) || []),
+    ],
+    data: list.value,
+    height: 500,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    radioConfig: {
+      highlight: true,
+      trigger: 'row',
+    },
+    rowConfig: {
+      keyField: 'bomItemId',
+      isHover: true,
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdProductBomApi.ProductBom>,
+  gridEvents: {
+    cellDblclick: ({ row }: { row: MesMdProductBomApi.ProductBom }) => {
+      selectedRow.value = row;
+      gridApi.grid.setRadioRow(row);
+      handleConfirm();
+    },
+    radioChange: ({ row }: { row: MesMdProductBomApi.ProductBom }) => {
+      selectedRow.value = row;
+    },
+  },
+});
+
+/** 打开 BOM 物料选择弹窗 */
+async function openModal(itemId: number, selectedBomItemId?: number) {
+  open.value = true;
+  selectedRow.value = undefined;
+  gridApi.setLoading(true);
+  try {
+    list.value = await getProductBomListByItemId(itemId);
+    gridApi.setGridOptions({ data: list.value });
+    await nextTick();
+    if (selectedBomItemId != null) {
+      const match = list.value.find(
+        (row) => row.bomItemId === selectedBomItemId,
+      );
+      if (match) {
+        selectedRow.value = match;
+        gridApi.grid.setRadioRow(match);
+      }
+    }
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 关闭 BOM 物料选择弹窗 */
+async function closeModal() {
+  open.value = false;
+  selectedRow.value = undefined;
+  await gridApi.grid.clearRadioRow();
+}
+
+/** 确认选择 BOM 物料 */
+function handleConfirm() {
+  if (!selectedRow.value) {
+    ElMessage.warning('请选择一条数据');
+    return;
+  }
+  emit('selected', selectedRow.value);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    title="产品 BOM 物料选择"
+    width="800px"
+    destroy-on-close
+    @close="closeModal"
+  >
+    <Grid table-title="BOM 子物料列表" />
+    <template #footer>
+      <ElButton @click="closeModal">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/components/md-product-bom-select.vue b/apps/web-ele/src/views/mes/md/item/components/md-product-bom-select.vue
new file mode 100644
index 000000000..c400b15b2
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/components/md-product-bom-select.vue
@@ -0,0 +1,146 @@
+<script lang="ts" setup>
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { CircleX, Search } from '@vben/icons';
+
+import { ElInput, ElTooltip } from 'element-plus';
+
+import { getProductBomListByItemId } from '#/api/mes/md/item/productBom';
+
+import MdProductBomSelectDialog from './md-product-bom-select-dialog.vue';
+
+defineOptions({ name: 'MdProductBomSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    itemId?: number;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    itemId: undefined,
+    modelValue: undefined,
+    placeholder: '请选择 BOM 物料',
+  },
+);
+const emit = defineEmits<{
+  change: [bom: MesMdProductBomApi.ProductBom | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdProductBomSelectDialog>>(); // BOM 物料选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedBom = ref<MesMdProductBomApi.ProductBom>(); // 当前选中的 BOM 物料
+
+const displayLabel = computed(() => selectedBom.value?.bomItemName ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () =>
+    props.clearable &&
+    !props.disabled &&
+    hovering.value &&
+    props.modelValue != null,
+);
+
+/** 根据 BOM 子物料编号回显选择器 */
+async function resolveBomById(bomItemId: number | undefined) {
+  if (bomItemId == null || props.itemId == null) {
+    selectedBom.value = undefined;
+    return;
+  }
+  if (selectedBom.value?.bomItemId === bomItemId) {
+    return;
+  }
+  try {
+    const list = await getProductBomListByItemId(props.itemId);
+    selectedBom.value = list.find((item) => item.bomItemId === bomItemId);
+  } catch (error) {
+    console.error('[MdProductBomSelect] resolveBomById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveBomById(value);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.itemId,
+  () => {
+    selectedBom.value = undefined;
+    emit('update:modelValue', undefined);
+    emit('change', undefined);
+  },
+);
+
+/** 清空已选 BOM 物料 */
+function clearSelected() {
+  selectedBom.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开 BOM 物料选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled || props.itemId == null) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.el-input__suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  dialogRef.value?.open(props.itemId, props.modelValue);
+}
+
+/** 回填选中的 BOM 物料 */
+function handleSelected(row: MesMdProductBomApi.ProductBom) {
+  selectedBom.value = row;
+  emit('update:modelValue', row.bomItemId);
+  emit('change', row);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <ElTooltip :disabled="!selectedBom" placement="top" :show-after="500">
+      <template #content>
+        <div v-if="selectedBom" class="leading-6">
+          <div>编码：{{ selectedBom.bomItemCode || '-' }}</div>
+          <div>名称：{{ selectedBom.bomItemName || '-' }}</div>
+          <div>规格：{{ selectedBom.bomItemSpecification || '-' }}</div>
+          <div>单位：{{ selectedBom.unitMeasureName || '-' }}</div>
+          <div>用量比例：{{ selectedBom.quantity ?? '-' }}</div>
+        </div>
+      </template>
+      <ElInput
+        :disabled="disabled"
+        :model-value="displayLabel"
+        :placeholder="placeholder"
+        readonly
+      >
+        <template #suffix>
+          <CircleX v-if="showClear" class="size-4" />
+          <Search v-else class="size-4" />
+        </template>
+      </ElInput>
+    </ElTooltip>
+  </div>
+  <MdProductBomSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/data.ts b/apps/web-ele/src/views/mes/md/item/data.ts
new file mode 100644
index 000000000..060fa0990
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/data.ts
@@ -0,0 +1,478 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemApi } from '#/api/mes/md/item';
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+
+import { h, markRaw } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { MdItemTypeSelect } from '#/views/mes/md/item/type/components';
+import { MdUnitMeasureSelect } from '#/views/mes/md/unitmeasure/components';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+/** 新增/修改物料产品的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '物料编码',
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入物料编码',
+      },
+      rules: z.string().min(1, '物料编码不能为空').max(64),
+      suffix: () =>
+        h(
+          ElButton,
+          {
+            type: 'default',
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_ITEM_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '物料名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入物料名称',
+      },
+      rules: z.string().min(1, '物料名称不能为空').max(255),
+    },
+    {
+      fieldName: 'specification',
+      label: '规格型号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入规格型号',
+      },
+    },
+    {
+      fieldName: 'unitMeasureId',
+      label: '单位',
+      component: markRaw(MdUnitMeasureSelect),
+      componentProps: {
+        placeholder: '请选择计量单位',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'itemTypeId',
+      label: '物料分类',
+      component: markRaw(MdItemTypeSelect),
+      componentProps: {
+        onChange: async (itemType: any) => {
+          await formApi?.setFieldValue('itemOrProduct', itemType?.itemOrProduct);
+        },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        disabled: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.DISABLE),
+    },
+    {
+      fieldName: 'highValue',
+      label: '高值物料',
+      component: 'Switch',
+      componentProps: {
+        activeText: '是',
+        inactiveText: '否',
+        inlinePrompt: true,
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'batchFlag',
+      label: '批次管理',
+      component: 'Switch',
+      componentProps: {
+        activeText: '是',
+        inactiveText: '否',
+        inlinePrompt: true,
+      },
+      rules: z.boolean().default(true),
+    },
+    {
+      fieldName: 'safeStockFlag',
+      label: '安全库存',
+      component: 'Switch',
+      componentProps: {
+        activeText: '是',
+        inactiveText: '否',
+        inlinePrompt: true,
+      },
+      rules: z.boolean().default(false),
+    },
+    {
+      fieldName: 'minStock',
+      label: '最低库存量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        precision: 2,
+      },
+      dependencies: {
+        triggerFields: ['safeStockFlag'],
+        show: (values) => Boolean(values.safeStockFlag),
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'maxStock',
+      label: '最高库存量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        precision: 2,
+      },
+      dependencies: {
+        triggerFields: ['safeStockFlag'],
+        show: (values) => Boolean(values.safeStockFlag),
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+      formItemClass: 'col-span-3',
+    },
+    {
+      fieldName: 'itemOrProduct',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '物料编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入物料编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '物料名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入物料名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 物料导入表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '物料数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        activeText: '是',
+        inactiveText: '否',
+        inlinePrompt: true,
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的物料数据',
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(
+  onStatusChange?: (
+    newStatus: number,
+    row: MesMdItemApi.Item,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions<MesMdItemApi.Item>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '物料编码',
+      minWidth: 160,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '物料名称',
+      minWidth: 160,
+    },
+    {
+      field: 'specification',
+      title: '规格型号',
+      minWidth: 160,
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'itemTypeName',
+      title: '物料分类',
+      minWidth: 140,
+      align: 'center',
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'safeStockFlag',
+      title: '安全库存',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: 'CellSwitch',
+        props: {
+          inactiveValue: CommonStatusEnum.DISABLE,
+          activeValue: CommonStatusEnum.ENABLE,
+        },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 220,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 物料选择弹窗搜索表单 */
+export function useItemSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '物料编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入物料编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '物料名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入物料名称',
+      },
+    },
+  ];
+}
+
+/** 物料选择弹窗列表字段 */
+export function useItemSelectGridColumns(): VxeTableGridOptions<MesMdItemApi.Item>['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'code',
+      title: '物料编码',
+      width: 180,
+    },
+    {
+      field: 'name',
+      title: '物料名称',
+      minWidth: 160,
+      align: 'left',
+    },
+    {
+      field: 'specification',
+      title: '规格型号',
+      minWidth: 140,
+      align: 'left',
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 90,
+      align: 'center',
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 110,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'itemTypeName',
+      title: '所属分类',
+      width: 140,
+      align: 'center',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+  ];
+}
+
+/** 产品 BOM 子表字段 */
+export function useProductBomGridColumns(
+  isReadOnly = false,
+): VxeTableGridOptions<MesMdProductBomApi.ProductBom>['columns'] {
+  const columns: VxeTableGridOptions<MesMdProductBomApi.ProductBom>['columns'] = [
+    {
+      field: 'bomItemCode',
+      title: '物料编码',
+      minWidth: 160,
+      align: 'center',
+    },
+    {
+      field: 'bomItemName',
+      title: '物料名称',
+      minWidth: 160,
+      align: 'center',
+    },
+    {
+      field: 'bomItemSpecification',
+      title: '规格型号',
+      minWidth: 140,
+      align: 'center',
+    },
+    {
+      field: 'unitMeasureName',
+      title: '单位',
+      width: 80,
+      align: 'center',
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 110,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'quantity',
+      title: '用量比例',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 140,
+      align: 'center',
+    },
+  ];
+
+  if (!isReadOnly) {
+    columns.push({
+      field: 'actions',
+      title: '操作',
+      width: 120,
+      align: 'center',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    });
+  }
+
+  return columns;
+}
diff --git a/apps/web-ele/src/views/mes/md/item/index.vue b/apps/web-ele/src/views/mes/md/item/index.vue
new file mode 100644
index 000000000..c20c756d0
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/index.vue
@@ -0,0 +1,239 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemApi } from '#/api/mes/md/item';
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import {
+  ElButton,
+  ElCard,
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+} from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteItem,
+  exportItem,
+  getItemPage,
+  updateItemStatus,
+} from '#/api/mes/md/item';
+import { $t } from '#/locales';
+import { MdItemTypeTree } from '#/views/mes/md/item/type/components';
+import { PrinterLabel } from '#/views/mes/wm/barcode/components';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
+
+const selectedItemTypeId = ref<number>(); // 当前选中的物料分类编号
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建物料 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看物料 */
+function handleDetail(row: MesMdItemApi.Item) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑物料 */
+function handleEdit(row: MesMdItemApi.Item) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除物料 */
+async function handleDelete(row: MesMdItemApi.Item) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteItem(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出物料 */
+async function handleExport() {
+  const data = await exportItem(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '物料产品.xls', source: data });
+}
+
+/** 导入物料 */
+function handleImport() {
+  importModalApi.open();
+}
+
+/** 分类树点击 */
+function handleTypeNodeClick(row: MesMdItemTypeApi.ItemType | undefined) {
+  selectedItemTypeId.value = row?.id;
+  handleRefresh();
+}
+
+/** 更新物料状态 */
+async function handleStatusChange(
+  newStatus: number,
+  row: MesMdItemApi.Item,
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    ElMessageBox.confirm(
+      `确认要将“${row.name}”物料切换为【${getDictLabel(DICT_TYPE.COMMON_STATUS, newStatus)}】吗？`,
+      '提示',
+      { type: 'warning' },
+    )
+      .then(async () => {
+        await updateItemStatus(row.id!, newStatus);
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+        resolve(true);
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(handleStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            itemTypeId: selectedItemTypeId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdItemApi.Item>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】物料产品、分类、计量单位"
+        url="https://doc.iocoder.cn/mes/md/product/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
+
+    <div class="flex h-full w-full">
+      <ElCard class="mr-4 h-full w-1/6">
+        <MdItemTypeTree @node-click="handleTypeNodeClick" />
+      </ElCard>
+      <div class="w-5/6">
+        <Grid table-title="物料产品列表">
+          <template #toolbar-tools>
+            <TableAction
+              :actions="[
+                {
+                  label: $t('ui.actionTitle.create', ['物料']),
+                  type: 'primary',
+                  icon: ACTION_ICON.ADD,
+                  auth: ['mes:md-item:create'],
+                  onClick: handleCreate,
+                },
+                {
+                  label: $t('ui.actionTitle.import'),
+                  type: 'primary',
+                  icon: ACTION_ICON.UPLOAD,
+                  auth: ['mes:md-item:import'],
+                  onClick: handleImport,
+                },
+                {
+                  label: $t('ui.actionTitle.export'),
+                  type: 'primary',
+                  icon: ACTION_ICON.DOWNLOAD,
+                  auth: ['mes:md-item:export'],
+                  onClick: handleExport,
+                },
+              ]"
+            />
+          </template>
+          <template #code="{ row }">
+            <ElButton link type="primary" @click="handleDetail(row)">
+              {{ row.code }}
+            </ElButton>
+          </template>
+          <template #actions="{ row }">
+            <div class="flex items-center justify-center">
+              <TableAction
+                :actions="[
+                  {
+                    label: $t('common.edit'),
+                  type: 'primary',
+                  link: true,
+                    icon: ACTION_ICON.EDIT,
+                    auth: ['mes:md-item:update'],
+                    onClick: handleEdit.bind(null, row),
+                  },
+                  {
+                    label: $t('common.delete'),
+                  type: 'danger',
+                  link: true,
+                    icon: ACTION_ICON.DELETE,
+                    auth: ['mes:md-item:delete'],
+                    popConfirm: {
+                      title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                      confirm: handleDelete.bind(null, row),
+                    },
+                  },
+                ]"
+              />
+              <PrinterLabel
+                :biz-id="row.id"
+                :biz-code="row.code"
+                biz-type="ITEM"
+              />
+            </div>
+          </template>
+        </Grid>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/modules/form.vue b/apps/web-ele/src/views/mes/md/item/modules/form.vue
new file mode 100644
index 000000000..ab2b7692a
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/modules/form.vue
@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import type { MesMdItemApi } from '#/api/mes/md/item';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElEmpty, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createItem, getItem, updateItem } from '#/api/mes/md/item';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+import ItemBatchConfigForm from './item-batch-config-form.vue';
+import ProductBomForm from './product-bom-form.vue';
+import ProductSipForm from './product-sip-form.vue';
+import ProductSopForm from './product-sop-form.vue';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const subTabsName = ref('bom'); // 当前子表页签
+const formData = ref<MesMdItemApi.Item>();
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  const titles: Record<FormMode, string> = {
+    create: '新增物料/产品',
+    update: '修改物料/产品',
+    detail: '查看物料/产品',
+  };
+  return titles[formMode.value];
+});
+const currentItemOrProduct = computed(() => formData.value?.itemOrProduct || ''); // 当前物料/产品标识
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+/** 查看物料条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.ITEM,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdItemApi.Item;
+    try {
+      if (formMode.value === 'create') {
+        const id = await createItem(data);
+        formData.value = { ...data, id };
+        await formApi.setFieldValue('id', id);
+        formMode.value = 'update';
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+      } else {
+        await updateItem(data);
+        formData.value = { ...formData.value, ...data };
+        ElMessage.success($t('ui.actionMessage.operationSuccess'));
+      }
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    subTabsName.value = 'bom';
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getItem(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <ElTabs
+      v-if="formMode !== 'create' && formData?.id"
+      v-model="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <ElTabPane name="bom" label="BOM 组成">
+        <ProductBomForm :form-type="formMode" :item-id="formData.id" />
+      </ElTabPane>
+      <ElTabPane v-if="formData.batchFlag" name="batch" label="批次属性">
+        <ItemBatchConfigForm
+          :form-type="formMode"
+          :item-id="formData.id"
+          :item-or-product="currentItemOrProduct"
+        />
+      </ElTabPane>
+      <ElTabPane name="substitute" label="替代品">
+        <ElEmpty description="替代品（待实现）" />
+      </ElTabPane>
+      <ElTabPane name="sip" label="SIP">
+        <ProductSipForm :form-type="formMode" :item-id="formData.id" />
+      </ElTabPane>
+      <ElTabPane name="sop" label="SOP">
+        <ProductSopForm :form-type="formMode" :item-id="formData.id" />
+      </ElTabPane>
+    </ElTabs>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <ElButton
+          v-if="isDetail && formData?.id"
+          type="primary"
+          @click="handleBarcode"
+        >
+          查看条码
+        </ElButton>
+      </div>
+    </template>
+    <BarcodeDetail ref="barcodeDetailRef" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/modules/import-form.vue b/apps/web-ele/src/views/mes/md/item/modules/import-form.vue
new file mode 100644
index 000000000..6c0eb7703
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/modules/import-form.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { MesMdItemApi } from '#/api/mes/md/item';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElMessage, ElUpload } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { importItem, importItemTemplate } from '#/api/mes/md/item';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importItem(data.file, data.updateSupport);
+      const importData = result as MesMdItemApi.ItemImportRespVO;
+      let text = `上传成功数量：${importData.createCodes?.length || 0};`;
+      for (const code of importData.createCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新成功数量：${importData.updateCodes?.length || 0};`;
+      for (const code of importData.updateCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新失败数量：${Object.keys(importData.failureCodes || {}).length};`;
+      for (const code in importData.failureCodes || {}) {
+        text += `< ${code}: ${importData.failureCodes?.[code]} >`;
+      }
+      ElMessage.info(text);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 文件改变时 */
+function handleChange(file: any) {
+  if (file.raw) {
+    formApi.setFieldValue('file', file.raw);
+  }
+}
+
+/** 下载模版 */
+async function handleDownload() {
+  const data = await importItemTemplate();
+  downloadFileFromBlobPart({ fileName: '物料导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.import', ['物料'])" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <ElUpload
+            :auto-upload="false"
+            :limit="1"
+            :on-change="handleChange"
+            accept=".xls,.xlsx"
+          >
+            <ElButton type="primary">选择 Excel 文件</ElButton>
+          </ElUpload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <ElButton @click="handleDownload">下载导入模板</ElButton>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/modules/item-batch-config-form.vue b/apps/web-ele/src/views/mes/md/item/modules/item-batch-config-form.vue
new file mode 100644
index 000000000..8af9e64f3
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/modules/item-batch-config-form.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import type { MesMdItemBatchConfigApi } from '#/api/mes/md/item/batchConfig';
+
+import { computed, ref, watch } from 'vue';
+
+import { ElButton, ElCheckbox, ElMessage } from 'element-plus';
+
+import {
+  getBatchConfigByItemId,
+  saveBatchConfig,
+} from '#/api/mes/md/item/batchConfig';
+import { MesItemOrProductEnum } from '#/views/mes/utils/constants';
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    itemId: number;
+    itemOrProduct?: string;
+  }>(),
+  {
+    formType: 'update',
+    itemOrProduct: '',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const loading = ref(false); // 批次属性加载/保存中
+const formData = ref<MesMdItemBatchConfigApi.BatchConfig>(buildDefaultData());
+
+/** 构建批次属性默认值 */
+function buildDefaultData(): MesMdItemBatchConfigApi.BatchConfig {
+  return {
+    itemId: props.itemId,
+    produceDateFlag: false,
+    expireDateFlag: false,
+    receiptDateFlag: false,
+    vendorFlag: false,
+    clientFlag: false,
+    salesOrderCodeFlag: false,
+    purchaseOrderCodeFlag: false,
+    workorderFlag: false,
+    taskFlag: false,
+    workstationFlag: false,
+    toolFlag: false,
+    moldFlag: false,
+    lotNumberFlag: false,
+    qualityStatusFlag: false,
+  };
+}
+
+/** 加载批次属性配置 */
+async function loadData() {
+  loading.value = true;
+  try {
+    const data = await getBatchConfigByItemId(props.itemId);
+    formData.value = { ...buildDefaultData(), ...data };
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 判断是否已选择批次属性 */
+function hasAnySelected() {
+  return Object.entries(formData.value).some(
+    ([key, value]) => key.endsWith('Flag') && value === true,
+  );
+}
+
+/** 保存批次属性配置 */
+async function handleSave() {
+  if (!hasAnySelected()) {
+    ElMessage.warning('至少选择一个批次属性');
+    return;
+  }
+  loading.value = true;
+  try {
+    await saveBatchConfig({ ...formData.value, itemId: props.itemId });
+    ElMessage.success('保存成功');
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => props.itemId,
+  (value) => {
+    if (value) {
+      loadData();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div v-loading="loading">
+    <div v-if="!isReadOnly" class="mb-3 flex justify-end">
+      <ElButton type="primary" @click="handleSave">保存批次属性</ElButton>
+    </div>
+    <div class="grid grid-cols-5 gap-x-5 gap-y-3">
+      <ElCheckbox v-model="formData.produceDateFlag" :disabled="isReadOnly">生产日期</ElCheckbox>
+      <ElCheckbox v-model="formData.qualityStatusFlag" :disabled="isReadOnly">质量状态</ElCheckbox>
+
+      <template v-if="itemOrProduct === MesItemOrProductEnum.ITEM.value">
+        <ElCheckbox v-model="formData.vendorFlag" :disabled="isReadOnly">供应商</ElCheckbox>
+        <ElCheckbox v-model="formData.purchaseOrderCodeFlag" :disabled="isReadOnly">
+          采购订单编号
+        </ElCheckbox>
+        <ElCheckbox v-model="formData.lotNumberFlag" :disabled="isReadOnly">生产批号</ElCheckbox>
+        <ElCheckbox v-model="formData.expireDateFlag" :disabled="isReadOnly">有效期</ElCheckbox>
+        <ElCheckbox v-model="formData.receiptDateFlag" :disabled="isReadOnly">入库日期</ElCheckbox>
+      </template>
+
+      <template v-if="itemOrProduct === MesItemOrProductEnum.PRODUCT.value">
+        <ElCheckbox v-model="formData.clientFlag" :disabled="isReadOnly">客户</ElCheckbox>
+        <ElCheckbox v-model="formData.salesOrderCodeFlag" :disabled="isReadOnly">
+          销售订单编号
+        </ElCheckbox>
+        <ElCheckbox v-model="formData.workorderFlag" :disabled="isReadOnly">生产工单</ElCheckbox>
+        <ElCheckbox v-model="formData.taskFlag" :disabled="isReadOnly">生产任务</ElCheckbox>
+        <ElCheckbox v-model="formData.workstationFlag" :disabled="isReadOnly">工作站</ElCheckbox>
+        <ElCheckbox v-model="formData.toolFlag" :disabled="isReadOnly">工具</ElCheckbox>
+        <ElCheckbox v-model="formData.moldFlag" :disabled="isReadOnly">模具</ElCheckbox>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/modules/product-bom-form.vue b/apps/web-ele/src/views/mes/md/item/modules/product-bom-form.vue
new file mode 100644
index 000000000..7069d308a
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/modules/product-bom-form.vue
@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemApi } from '#/api/mes/md/item';
+import type { MesMdProductBomApi } from '#/api/mes/md/item/productBom';
+
+import { computed, ref, watch } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createProductBom,
+  deleteProductBom,
+  getProductBomListByItemId,
+  updateProductBom,
+} from '#/api/mes/md/item/productBom';
+import { $t } from '#/locales';
+
+import { MdItemSelectDialog } from '../components';
+import { useProductBomGridColumns } from '../data';
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    itemId: number;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const formOpen = ref(false); // BOM 表单是否打开
+const formLoading = ref(false); // BOM 表单提交中
+const formData = ref<MesMdProductBomApi.ProductBom>();
+const list = ref<MesMdProductBomApi.ProductBom[]>([]); // 产品 BOM 列表
+const itemSelectRef = ref<InstanceType<typeof MdItemSelectDialog>>(); // 物料选择弹窗
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'id', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'itemId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'bomItemId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'bomItemCode',
+      label: 'BOM 物料编码',
+      component: 'Input',
+      componentProps: { disabled: true },
+    },
+    {
+      fieldName: 'bomItemName',
+      label: 'BOM 物料名称',
+      component: 'Input',
+      componentProps: { disabled: true },
+    },
+    {
+      fieldName: 'bomItemSpecification',
+      label: '规格型号',
+      component: 'Input',
+      componentProps: { disabled: true },
+    },
+    {
+      fieldName: 'unitMeasureName',
+      label: '单位',
+      component: 'Input',
+      componentProps: { disabled: true },
+    },
+    {
+      fieldName: 'quantity',
+      label: '用量比例',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        precision: 4,
+        step: 0.1,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: useProductBomGridColumns(isReadOnly.value),
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdProductBomApi.ProductBom>,
+});
+
+/** 加载产品 BOM 列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getProductBomListByItemId(props.itemId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 打开 BOM 物料选择弹窗 */
+function handleAdd() {
+  itemSelectRef.value?.open(undefined, { multiple: true });
+}
+
+/** 添加选中的 BOM 物料 */
+async function handleItemSelected(rows: MesMdItemApi.Item[]) {
+  if (rows.length === 0) {
+    return;
+  }
+  for (const item of rows) {
+    await createProductBom({
+      bomItemId: item.id,
+      itemId: props.itemId,
+      quantity: 1,
+    });
+  }
+  ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  await getList();
+}
+
+/** 打开 BOM 编辑弹窗 */
+async function openForm(row: MesMdProductBomApi.ProductBom) {
+  formOpen.value = true;
+  formData.value = row;
+  await formApi.resetForm();
+  await formApi.setValues({
+    ...row,
+    itemId: props.itemId,
+  });
+}
+
+/** 提交 BOM 表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MesMdProductBomApi.ProductBom;
+    await (formData.value?.id ? updateProductBom(data) : createProductBom(data));
+    formOpen.value = false;
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除 BOM 物料 */
+async function handleDelete(id: number) {
+  await deleteProductBom(id);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', ['BOM']));
+  await getList();
+}
+
+watch(
+  () => props.itemId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="!isReadOnly" class="mb-3 flex items-center justify-start">
+      <TableAction
+        :actions="[
+          {
+            label: '添加 BOM 物料',
+            type: 'primary',
+            onClick: handleAdd,
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'primary',
+              link: true,
+              onClick: openForm.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              popConfirm: {
+                title: '确认删除该 BOM 吗？',
+                confirm: handleDelete.bind(null, row.id!),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <ElDialog
+      v-model="formOpen"
+      title="编辑 BOM"
+      width="600px"
+    >
+      <Form class="mx-4" />
+      <template #footer>
+        <ElButton @click="formOpen = false">取消</ElButton>
+        <ElButton type="primary" :loading="formLoading" @click="submitForm">
+          确定
+        </ElButton>
+      </template>
+    </ElDialog>
+
+    <MdItemSelectDialog ref="itemSelectRef" @selected="handleItemSelected" />
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/modules/product-media-list.vue b/apps/web-ele/src/views/mes/md/item/modules/product-media-list.vue
new file mode 100644
index 000000000..cf6dc1191
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/modules/product-media-list.vue
@@ -0,0 +1,259 @@
+<script lang="ts" setup>
+import type { MesMdProductSipApi } from '#/api/mes/md/item/productSip';
+import type { MesMdProductSopApi } from '#/api/mes/md/item/productSop';
+
+import { computed, markRaw, ref, watch } from 'vue';
+
+import {
+  ElButton,
+  ElCard,
+  ElDialog,
+  ElEmpty,
+  ElImage,
+  ElMessage,
+  ElPopconfirm,
+} from 'element-plus';
+
+import { useVbenForm, z } from '#/adapter/form';
+import {
+  createProductSip,
+  deleteProductSip,
+  getProductSipListByItemId,
+  updateProductSip,
+} from '#/api/mes/md/item/productSip';
+import {
+  createProductSop,
+  deleteProductSop,
+  getProductSopListByItemId,
+  updateProductSop,
+} from '#/api/mes/md/item/productSop';
+import { ImageUpload } from '#/components/upload';
+import { ProProcessSelect } from '#/views/mes/pro/process/components';
+
+type MediaKind = 'SIP' | 'SOP';
+type MediaItem =
+  | MesMdProductSipApi.ProductSip
+  | MesMdProductSopApi.ProductSop;
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    itemId: number;
+    kind: MediaKind;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const title = computed(() => props.kind); // 当前媒体类型标题
+const loading = ref(false); // SIP/SOP 列表加载中
+const formOpen = ref(false); // SIP/SOP 表单是否打开
+const formLoading = ref(false); // SIP/SOP 表单提交中
+const formData = ref<MediaItem>();
+const list = ref<MediaItem[]>([]); // SIP/SOP 列表
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'id', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'itemId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'title',
+      label: '标题',
+      component: 'Input',
+      componentProps: { placeholder: '请输入标题' },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '展示顺序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        precision: 0,
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'description',
+      label: '内容说明',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入详细描述', rows: 3 },
+    },
+    {
+      fieldName: 'processId',
+      label: '所属工序',
+      component: markRaw(ProProcessSelect),
+    },
+    {
+      fieldName: 'url',
+      label: '图片',
+      component: markRaw(ImageUpload),
+      componentProps: { maxNumber: 1, showDescription: false },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+/** 获取当前媒体类型的列表接口 */
+function getListApi() {
+  return props.kind === 'SIP'
+    ? getProductSipListByItemId
+    : getProductSopListByItemId;
+}
+
+/** 获取当前媒体类型的新增接口 */
+function createApi() {
+  return props.kind === 'SIP' ? createProductSip : createProductSop;
+}
+
+/** 获取当前媒体类型的修改接口 */
+function updateApi() {
+  return props.kind === 'SIP' ? updateProductSip : updateProductSop;
+}
+
+/** 获取当前媒体类型的删除接口 */
+function deleteApi() {
+  return props.kind === 'SIP' ? deleteProductSip : deleteProductSop;
+}
+
+/** 加载 SIP/SOP 列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    list.value = await getListApi()(props.itemId);
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 打开 SIP/SOP 表单 */
+async function openForm(row?: MediaItem) {
+  formOpen.value = true;
+  formData.value = row;
+  await formApi.resetForm();
+  await formApi.setValues({
+    itemId: props.itemId,
+    sort: 0,
+    ...row,
+  });
+}
+
+/** 提交 SIP/SOP 表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MediaItem;
+    await (formData.value?.id ? updateApi()(data as any) : createApi()(data as any));
+    formOpen.value = false;
+    ElMessage.success('保存成功');
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除 SIP/SOP */
+async function handleDelete(id: number) {
+  await deleteApi()(id);
+  ElMessage.success('删除成功');
+  await getList();
+}
+
+watch(
+  () => props.itemId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <ElButton
+      v-if="!isReadOnly"
+      class="mb-3"
+      type="primary"
+      @click="openForm()"
+    >
+      添加 {{ title }}
+    </ElButton>
+    <div v-loading="loading">
+      <div v-if="list.length > 0" class="grid grid-cols-4 gap-3">
+        <ElCard
+          v-for="item in list"
+          :key="item.id"
+          :body-style="{ padding: '0px' }"
+          shadow="hover"
+        >
+          <ElImage
+            v-if="item.url"
+            :src="item.url"
+            class="block h-40 w-full object-cover"
+            :preview-src-list="[item.url]"
+            fit="cover"
+          />
+          <div
+            v-else
+            class="flex h-40 w-full items-center justify-center bg-gray-100 text-gray-400"
+          >
+            暂无图片
+          </div>
+          <div class="p-3">
+            <div class="mb-1 truncate text-sm font-bold">{{ item.title }}</div>
+            <div v-if="item.description" class="truncate text-xs text-gray-500">
+            {{ item.description }}
+            </div>
+            <div v-if="!isReadOnly" class="mt-2 flex justify-end">
+              <ElButton link type="primary" size="small" @click="openForm(item)">编辑</ElButton>
+              <ElPopconfirm title="确认删除该数据吗？" @confirm="handleDelete(item.id!)">
+                <template #reference>
+                  <ElButton link type="danger" size="small">删除</ElButton>
+                </template>
+              </ElPopconfirm>
+            </div>
+          </div>
+        </ElCard>
+      </div>
+      <ElEmpty v-else :description="`暂无 ${title} 数据`" />
+    </div>
+
+    <ElDialog
+      v-model="formOpen"
+      :title="`${formData?.id ? '编辑' : '新增'} ${title}`"
+      width="500px"
+    >
+      <Form class="mx-4" />
+      <template #footer>
+        <ElButton @click="formOpen = false">取消</ElButton>
+        <ElButton type="primary" :loading="formLoading" @click="submitForm">
+          确定
+        </ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/modules/product-sip-form.vue b/apps/web-ele/src/views/mes/md/item/modules/product-sip-form.vue
new file mode 100644
index 000000000..a37cdcaec
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/modules/product-sip-form.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import ProductMediaList from './product-media-list.vue';
+
+defineProps<{
+  formType?: string;
+  itemId: number;
+}>();
+</script>
+
+<template>
+  <ProductMediaList :form-type="formType" :item-id="itemId" kind="SIP" />
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/modules/product-sop-form.vue b/apps/web-ele/src/views/mes/md/item/modules/product-sop-form.vue
new file mode 100644
index 000000000..93a73a9b3
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/modules/product-sop-form.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import ProductMediaList from './product-media-list.vue';
+
+defineProps<{
+  formType?: string;
+  itemId: number;
+}>();
+</script>
+
+<template>
+  <ProductMediaList :form-type="formType" :item-id="itemId" kind="SOP" />
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/type/components/index.ts b/apps/web-ele/src/views/mes/md/item/type/components/index.ts
new file mode 100644
index 000000000..c5d4dd2c4
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/type/components/index.ts
@@ -0,0 +1,2 @@
+export { default as MdItemTypeSelect } from './md-item-type-select.vue';
+export { default as MdItemTypeTree } from './md-item-type-tree.vue';
diff --git a/apps/web-ele/src/views/mes/md/item/type/components/md-item-type-select.vue b/apps/web-ele/src/views/mes/md/item/type/components/md-item-type-select.vue
new file mode 100644
index 000000000..d8c0c2d4b
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/type/components/md-item-type-select.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { ElTooltip, ElTreeSelect } from 'element-plus';
+
+import { getItemTypeSimpleList } from '#/api/mes/md/item/type';
+
+defineOptions({ name: 'MdItemTypeSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择物料分类',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesMdItemTypeApi.ItemType | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+type ItemTypeNode = MesMdItemTypeApi.ItemType & {
+  children?: ItemTypeNode[];
+  disabled?: boolean;
+};
+
+const allList = ref<MesMdItemTypeApi.ItemType[]>([]); // 物料分类列表
+const itemTypeTree = ref<ItemTypeNode[]>([]); // 物料分类树
+const selectedItem = ref<MesMdItemTypeApi.ItemType>(); // 当前选中分类
+
+const selectValue = computed({ // 选择器绑定值
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+/** 递归将有子节点的分支节点标记为 disabled */
+function markParentsDisabled(nodes: MesMdItemTypeApi.ItemType[]): ItemTypeNode[] {
+  return nodes.map((node) => {
+    const children = node.children?.length
+      ? markParentsDisabled(node.children)
+      : undefined;
+    return {
+      ...node,
+      children,
+      disabled: Boolean(children?.length),
+    };
+  });
+}
+
+/** 根据当前值同步 tooltip 展示的分类详情 */
+function syncSelectedItem(value: number | undefined) {
+  selectedItem.value =
+    value === undefined ? undefined : allList.value.find((item) => item.id === value);
+}
+
+/** 除 v-model 外，额外抛出完整分类对象给业务表单使用 */
+function handleChange(value: number | undefined) {
+  syncSelectedItem(value);
+  emit('change', selectedItem.value);
+}
+
+/** 查询物料分类树 */
+async function getItemTypeTree() {
+  allList.value = await getItemTypeSimpleList();
+  itemTypeTree.value = markParentsDisabled(handleTree(allList.value));
+  syncSelectedItem(props.modelValue);
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncSelectedItem(value);
+  },
+);
+
+onMounted(() => {
+  getItemTypeTree();
+});
+</script>
+
+<template>
+  <ElTooltip :disabled="!selectedItem" placement="top" :show-after="500">
+    <template #content>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>备注：{{ selectedItem.remark || '-' }}</div>
+      </div>
+    </template>
+    <ElTreeSelect
+      v-bind="$attrs"
+      v-model="selectValue"
+      :clearable="clearable"
+      :data="itemTypeTree"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :props="{ children: 'children', label: 'name' }"
+      check-strictly
+      class="w-full"
+      default-expand-all
+      filterable
+      node-key="id"
+      @change="handleChange"
+    />
+  </ElTooltip>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/type/components/md-item-type-tree.vue b/apps/web-ele/src/views/mes/md/item/type/components/md-item-type-tree.vue
new file mode 100644
index 000000000..ee8e12804
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/type/components/md-item-type-tree.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { Search } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { ElInput, ElTree } from 'element-plus';
+
+import { getItemTypeSimpleList } from '#/api/mes/md/item/type';
+
+defineOptions({ name: 'MdItemTypeTree' });
+
+withDefaults(
+  defineProps<{
+    filterPlaceholder?: string;
+  }>(),
+  {
+    filterPlaceholder: '搜索分类',
+  },
+);
+
+const emit = defineEmits<{
+  nodeClick: [itemType: MesMdItemTypeApi.ItemType | undefined];
+}>();
+
+const loading = ref(false); // 分类树加载中
+const filterText = ref(''); // 分类搜索关键字
+const currentNodeId = ref<number>(); // 当前选中分类编号
+const itemTypeList = ref<MesMdItemTypeApi.ItemType[]>([]); // 物料分类列表
+const itemTypeTree = ref<MesMdItemTypeApi.ItemType[]>([]); // 物料分类树
+const treeRef = ref<InstanceType<typeof ElTree>>(); // 分类树实例
+
+/** 加载分类树 */
+async function loadTree() {
+  loading.value = true;
+  try {
+    const data = await getItemTypeSimpleList();
+    itemTypeList.value = data;
+    itemTypeTree.value = handleTree(data, 'id', 'parentId');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 处理搜索逻辑 */
+function handleSearch(value: string) {
+  filterText.value = value;
+  const filteredList = value
+    ? itemTypeList.value.filter((item) => item.name?.includes(value))
+    : itemTypeList.value;
+  itemTypeTree.value = handleTree(filteredList, 'id', 'parentId');
+}
+
+/** 处理节点点击：支持点击同一节点取消选中 */
+function handleNodeClick(row: MesMdItemTypeApi.ItemType) {
+  if (currentNodeId.value === row.id) {
+    currentNodeId.value = undefined;
+    treeRef.value?.setCurrentKey(undefined);
+    emit('nodeClick', undefined);
+    return;
+  }
+  currentNodeId.value = row.id;
+  emit('nodeClick', row);
+}
+
+/** 清空选中状态 */
+function clearCurrent() {
+  currentNodeId.value = undefined;
+  treeRef.value?.setCurrentKey(undefined);
+}
+
+/** 重置整个树状态 */
+function reset() {
+  clearCurrent();
+  filterText.value = '';
+  itemTypeTree.value = handleTree(itemTypeList.value, 'id', 'parentId');
+}
+
+/** 设置当前选中分类 */
+function setCurrent(itemTypeId: number) {
+  currentNodeId.value = itemTypeId;
+  treeRef.value?.setCurrentKey(itemTypeId);
+}
+
+watch(filterText, (value) => {
+  handleSearch(value);
+});
+
+defineExpose({ clearCurrent, loadTree, reset, setCurrent });
+
+onMounted(() => {
+  loadTree();
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <ElInput
+      v-model="filterText"
+      :placeholder="filterPlaceholder"
+      class="w-full"
+      clearable
+    >
+      <template #prefix>
+        <Search class="size-4" />
+      </template>
+    </ElInput>
+    <div v-loading="loading">
+      <ElTree
+        v-if="itemTypeTree.length > 0"
+        ref="treeRef"
+        :data="itemTypeTree"
+        :expand-on-click-node="false"
+        :props="{ label: 'name', children: 'children' }"
+        class="pt-2"
+        default-expand-all
+        highlight-current
+        node-key="id"
+        @node-click="handleNodeClick"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无数据
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/type/data.ts b/apps/web-ele/src/views/mes/md/item/type/data.ts
new file mode 100644
index 000000000..56b51cedc
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/type/data.ts
@@ -0,0 +1,216 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getItemTypeList } from '#/api/mes/md/item/type';
+import {
+  MesAutoCodeRuleCode,
+  MesItemOrProductEnum,
+} from '#/views/mes/utils/constants';
+
+/** 新增/修改物料分类的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        clearable: true,
+        api: async () => {
+          const data = await getItemTypeList();
+          return [
+            {
+              id: 0,
+              name: '顶级分类',
+              children: handleTree(data),
+            },
+          ];
+        },
+        checkStrictly: true,
+        childrenField: 'children',
+        defaultExpandAll: true,
+        labelField: 'name',
+        placeholder: '请选择上级分类',
+        valueField: 'id',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'code',
+      label: '分类编码',
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入分类编码',
+      },
+      rules: z.string().min(1, '分类编码不能为空').max(64),
+      suffix: () =>
+        h(
+          ElButton,
+          {
+            type: 'default',
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_ITEM_TYPE_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '自动生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'itemOrProduct',
+      label: '物料/产品标识',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.MES_MD_ITEM_OR_PRODUCT),
+      },
+      rules: z.string().default(MesItemOrProductEnum.ITEM.value),
+    },
+    {
+      fieldName: 'sort',
+      label: '显示排序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        precision: 0,
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入分类名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdItemTypeApi.ItemType>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      minWidth: 200,
+      align: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'code',
+      title: '分类编码',
+      width: 160,
+      align: 'center',
+    },
+    {
+      field: 'itemOrProduct',
+      title: '物料/产品',
+      width: 130,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_MD_ITEM_OR_PRODUCT },
+      },
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 260,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/md/item/type/index.vue b/apps/web-ele/src/views/mes/md/item/type/index.vue
new file mode 100644
index 000000000..dceaef395
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/type/index.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteItemType, getItemTypeList } from '#/api/mes/md/item/type';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const isExpanded = ref(true); // 树形表格是否展开
+
+/** 切换树形展开/收缩状态 */
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级分类 */
+function handleAppend(row: MesMdItemTypeApi.ItemType) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: MesMdItemTypeApi.ItemType) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: MesMdItemTypeApi.ItemType) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteItemType(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getItemTypeList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<MesMdItemTypeApi.ItemType>,
+});
+</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: ['mes:md-item-type:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增子分类',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-item-type:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-item-type:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-item-type:delete'],
+              ifShow: row.parentId !== 0,
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/item/type/modules/form.vue b/apps/web-ele/src/views/mes/md/item/type/modules/form.vue
new file mode 100644
index 000000000..580690139
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/item/type/modules/form.vue
@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import type { MesMdItemTypeApi } from '#/api/mes/md/item/type';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createItemType,
+  getItemType,
+  updateItemType,
+} from '#/api/mes/md/item/type';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesMdItemTypeApi.ItemType>();
+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: 110,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdItemTypeApi.ItemType;
+    try {
+      await (formData.value?.id ? updateItemType(data) : createItemType(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<MesMdItemTypeApi.ItemType>();
+    if (!data || !data.id) {
+      formData.value = data || undefined;
+      if (data) {
+        // 设置上级分类
+        await formApi.setValues(data);
+      }
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getItemType(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/unitmeasure/components/index.ts b/apps/web-ele/src/views/mes/md/unitmeasure/components/index.ts
new file mode 100644
index 000000000..59e066096
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/unitmeasure/components/index.ts
@@ -0,0 +1 @@
+export { default as MdUnitMeasureSelect } from './md-unit-measure-select.vue';
diff --git a/apps/web-ele/src/views/mes/md/unitmeasure/components/md-unit-measure-select.vue b/apps/web-ele/src/views/mes/md/unitmeasure/components/md-unit-measure-select.vue
new file mode 100644
index 000000000..bf53e6d46
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/unitmeasure/components/md-unit-measure-select.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { MesMdUnitMeasureApi } from '#/api/mes/md/unitmeasure';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { ElOption, ElSelect, ElTag, ElTooltip } from 'element-plus';
+
+import { getUnitMeasureSimpleList } from '#/api/mes/md/unitmeasure';
+
+defineOptions({ name: 'MdUnitMeasureSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择计量单位',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesMdUnitMeasureApi.UnitMeasure | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const allList = ref<MesMdUnitMeasureApi.UnitMeasure[]>([]); // 计量单位列表
+const filteredList = ref<MesMdUnitMeasureApi.UnitMeasure[]>([]); // 过滤后的计量单位列表
+const selectedItem = ref<MesMdUnitMeasureApi.UnitMeasure>(); // 当前选中计量单位
+
+const selectValue = computed({ // 选择器绑定值
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+/** 前端按名称和编码过滤计量单位 */
+function handleFilter(query: string) {
+  if (!query) {
+    filteredList.value = allList.value;
+    return;
+  }
+  const keyword = query.toLowerCase();
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword),
+  );
+}
+
+/** 根据当前值同步 tooltip 展示的计量单位详情 */
+function syncSelectedItem(value: number | undefined) {
+  selectedItem.value =
+    value === undefined ? undefined : allList.value.find((item) => item.id === value);
+}
+
+/** 除 v-model 外，额外抛出完整计量单位对象给业务表单使用 */
+function handleChange(value: number | undefined) {
+  syncSelectedItem(value);
+  emit('change', selectedItem.value);
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncSelectedItem(value);
+  },
+);
+
+onMounted(async () => {
+  allList.value = await getUnitMeasureSimpleList();
+  filteredList.value = allList.value;
+  syncSelectedItem(props.modelValue);
+});
+</script>
+
+<template>
+  <ElTooltip :disabled="!selectedItem" placement="top" :show-after="500">
+    <template #content>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>是否主单位：{{ selectedItem.primaryFlag ? '是' : '否' }}</div>
+        <div v-if="!selectedItem.primaryFlag && selectedItem.changeRate != null">
+          换算比例：{{ selectedItem.changeRate }}
+        </div>
+        <div v-if="selectedItem.remark">备注：{{ selectedItem.remark }}</div>
+      </div>
+    </template>
+    <ElSelect
+      v-bind="$attrs"
+      v-model="selectValue"
+      :clearable="clearable"
+      :disabled="disabled"
+      :filter-method="handleFilter"
+      :placeholder="placeholder"
+      class="w-full"
+      filterable
+      @change="handleChange"
+    >
+      <ElOption
+        v-for="item in filteredList"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id!"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ item.name }}</span>
+          <ElTag v-if="item.code" size="small" type="info">编号: {{ item.code }}</ElTag>
+        </div>
+      </ElOption>
+    </ElSelect>
+  </ElTooltip>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/unitmeasure/data.ts b/apps/web-ele/src/views/mes/md/unitmeasure/data.ts
new file mode 100644
index 000000000..c6510c388
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/unitmeasure/data.ts
@@ -0,0 +1,193 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdUnitMeasureApi } from '#/api/mes/md/unitmeasure';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { z } from '#/adapter/form';
+import { getUnitMeasureSimpleList } from '#/api/mes/md/unitmeasure';
+
+/** 新增/修改计量单位的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '单位编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入单位编码',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'name',
+      label: '单位名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入单位名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'primaryFlag',
+      label: '是否主单位',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING, 'boolean'),
+      },
+      rules: z.boolean().default(true),
+    },
+    {
+      fieldName: 'primaryId',
+      label: '主单位',
+      component: 'ApiSelect',
+      componentProps: {
+        api: async () => {
+          const list = await getUnitMeasureSimpleList();
+          return list.filter((item) => item.primaryFlag === true);
+        },
+        clearable: true,
+        labelField: 'name',
+        placeholder: '请选择主单位',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['primaryFlag'],
+        show: (values) => values.primaryFlag === false,
+      },
+    },
+    {
+      fieldName: 'changeRate',
+      label: '与主单位换算比例',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        precision: 4,
+        step: 1,
+      },
+      dependencies: {
+        triggerFields: ['primaryFlag'],
+        show: (values) => values.primaryFlag === false,
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '单位编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入单位编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '单位名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入单位名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdUnitMeasureApi.UnitMeasure>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '单位编码',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '单位名称',
+      minWidth: 160,
+    },
+    {
+      field: 'primaryFlag',
+      title: '是否主单位',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
+    },
+    {
+      field: 'changeRate',
+      title: '与主单位换算比例',
+      minWidth: 150,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 180,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/md/unitmeasure/index.vue b/apps/web-ele/src/views/mes/md/unitmeasure/index.vue
new file mode 100644
index 000000000..3f303a7e9
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/unitmeasure/index.vue
@@ -0,0 +1,150 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdUnitMeasureApi } from '#/api/mes/md/unitmeasure';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteUnitMeasure,
+  exportUnitMeasure,
+  getUnitMeasurePage,
+} from '#/api/mes/md/unitmeasure';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportUnitMeasure(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '计量单位.xls', source: data });
+}
+
+/** 创建计量单位 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑计量单位 */
+function handleEdit(row: MesMdUnitMeasureApi.UnitMeasure) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除计量单位 */
+async function handleDelete(row: MesMdUnitMeasureApi.UnitMeasure) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteUnitMeasure(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getUnitMeasurePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdUnitMeasureApi.UnitMeasure>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】物料产品、分类、计量单位"
+        url="https://doc.iocoder.cn/mes/md/product/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="计量单位列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['计量单位']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-unit-measure:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:md-unit-measure:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-unit-measure:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-unit-measure:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/unitmeasure/modules/form.vue b/apps/web-ele/src/views/mes/md/unitmeasure/modules/form.vue
new file mode 100644
index 000000000..dc5eb9cdf
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/unitmeasure/modules/form.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { MesMdUnitMeasureApi } from '#/api/mes/md/unitmeasure';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createUnitMeasure,
+  getUnitMeasure,
+  updateUnitMeasure,
+} from '#/api/mes/md/unitmeasure';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+const formData = ref<MesMdUnitMeasureApi.UnitMeasure>();
+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: 140,
+  },
+  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 MesMdUnitMeasureApi.UnitMeasure;
+    if (data.primaryFlag) {
+      data.primaryId = undefined;
+      data.changeRate = undefined;
+    }
+    try {
+      await (formData.value?.id
+        ? updateUnitMeasure(data)
+        : createUnitMeasure(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<MesMdUnitMeasureApi.UnitMeasure>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getUnitMeasure(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/vendor/components/md-vendor-select-dialog.vue b/apps/web-ele/src/views/mes/md/vendor/components/md-vendor-select-dialog.vue
new file mode 100644
index 000000000..c2d19a7c4
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/vendor/components/md-vendor-select-dialog.vue
@@ -0,0 +1,179 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { nextTick, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getVendorPage } from '#/api/mes/md/vendor';
+
+import {
+  useVendorSelectGridColumns,
+  useVendorSelectGridFormSchema,
+} from '../data';
+
+const emit = defineEmits<{
+  selected: [rows: MesMdVendorApi.Vendor[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
+const selectedRows = ref<MesMdVendorApi.Vendor[]>([]); // 已选供应商列表
+const preSelectedIds = ref<number[]>([]); // 预选供应商编号列表
+
+/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+async function syncSingleSelection(row?: MesMdVendorApi.Vendor) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条 */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: MesMdVendorApi.Vendor[];
+  row?: MesMdVendorApi.Vendor;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 处理全选变化 */
+function handleCheckboxAll({ records }: { records: MesMdVendorApi.Vendor[] }) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 回显预选供应商 */
+function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesMdVendorApi.Vendor[];
+  for (const row of rows) {
+    if (row.id && preSelectedIds.value.includes(row.id)) {
+      gridApi.grid.setCheckboxRow(row, true);
+      if (!multiple.value) {
+        selectedRows.value = [row];
+      }
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useVendorSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useVendorSelectGridColumns(),
+    height: 520,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getVendorPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            status: CommonStatusEnum.ENABLE,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdVendorApi.Vendor>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+}
+
+/** 打开供应商选择弹窗 */
+async function openModal(selectedIds?: number[], options?: { multiple?: boolean }) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  applyPreSelection();
+}
+
+/** 关闭供应商选择弹窗 */
+async function closeModal() {
+  open.value = false;
+  await resetQueryState();
+}
+
+/** 确认选择供应商 */
+function handleConfirm() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? selectedRows.value : [selectedRows.value[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    title="供应商选择"
+    width="70%"
+    destroy-on-close
+    @close="closeModal"
+  >
+    <Grid table-title="供应商列表" />
+    <template #footer>
+      <ElButton @click="closeModal">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/vendor/components/md-vendor-select.vue b/apps/web-ele/src/views/mes/md/vendor/components/md-vendor-select.vue
new file mode 100644
index 000000000..92a8eb138
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/vendor/components/md-vendor-select.vue
@@ -0,0 +1,134 @@
+<script lang="ts" setup>
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { CircleX, Search } from '@vben/icons';
+
+import { ElInput, ElTooltip } from 'element-plus';
+
+import { getVendor } from '#/api/mes/md/vendor';
+
+import MdVendorSelectDialog from './md-vendor-select-dialog.vue';
+
+defineOptions({ name: 'MdVendorSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择供应商',
+  },
+);
+const emit = defineEmits<{
+  change: [item: MesMdVendorApi.Vendor | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdVendorSelectDialog>>(); // 供应商选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedItem = ref<MesMdVendorApi.Vendor>(); // 当前选中供应商
+
+const displayLabel = computed(() => selectedItem.value?.name ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () => props.clearable && !props.disabled && hovering.value && props.modelValue != null,
+);
+
+/** 根据供应商编号回显选择器 */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getVendor(id);
+  } catch (error) {
+    console.error('[MdVendorSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveItemById(value);
+  },
+  { immediate: true },
+);
+
+/** 清空已选供应商 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开供应商选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.el-input__suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 回填选中的供应商 */
+function handleSelected(rows: MesMdVendorApi.Vendor[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <ElTooltip :disabled="!selectedItem" placement="top" :show-after="500">
+      <template #content>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编码：{{ selectedItem.code || '-' }}</div>
+          <div>名称：{{ selectedItem.name || '-' }}</div>
+          <div>简称：{{ selectedItem.nickname || '-' }}</div>
+          <div>电话：{{ selectedItem.telephone || '-' }}</div>
+        </div>
+      </template>
+      <ElInput
+        :disabled="disabled"
+        :model-value="displayLabel"
+        :placeholder="placeholder"
+        readonly
+      >
+        <template #suffix>
+          <CircleX v-if="showClear" class="size-4" />
+          <Search v-else class="size-4" />
+        </template>
+      </ElInput>
+    </ElTooltip>
+  </div>
+  <MdVendorSelectDialog ref="dialogRef" @selected="handleSelected" />
+</template>
diff --git a/apps/web-ele/src/views/mes/md/vendor/data.ts b/apps/web-ele/src/views/mes/md/vendor/data.ts
new file mode 100644
index 000000000..205db9cbf
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/vendor/data.ts
@@ -0,0 +1,472 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+/** 新增/修改供应商的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '供应商编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          ElButton,
+          {
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_VENDOR_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '自动生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商名称',
+      },
+      rules: z.string().min(1, '供应商名称不能为空').max(100),
+    },
+    {
+      fieldName: 'nickname',
+      label: '供应商简称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商英文名称',
+      },
+    },
+    {
+      fieldName: 'level',
+      label: '供应商等级',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.MES_VENDOR_LEVEL),
+        placeholder: '请选择供应商等级',
+      },
+    },
+    {
+      fieldName: 'description',
+      label: '供应商简介',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入供应商简介',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'address',
+      label: '供应商地址',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入供应商地址',
+        rows: 2,
+      },
+    },
+    {
+      fieldName: 'website',
+      label: '官网地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商官网地址',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: '邮箱地址',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商邮箱地址',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'telephone',
+      label: '供应商电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商电话',
+      },
+    },
+    {
+      fieldName: 'score',
+      label: '供应商评分',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        max: 100,
+        min: 0,
+        precision: 0,
+      },
+    },
+    {
+      fieldName: 'contact1Name',
+      label: '联系人1',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1',
+      },
+    },
+    {
+      fieldName: 'contact1Telephone',
+      label: '联系人1电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1电话',
+      },
+    },
+    {
+      fieldName: 'contact1Email',
+      label: '联系人1邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人1邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'contact2Name',
+      label: '联系人2',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2',
+      },
+    },
+    {
+      fieldName: 'contact2Telephone',
+      label: '联系人2电话',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2电话',
+      },
+    },
+    {
+      fieldName: 'contact2Email',
+      label: '联系人2邮箱',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入联系人2邮箱',
+      },
+      rules: z.string().email('邮箱格式不正确').or(z.literal('')).optional(),
+    },
+    {
+      fieldName: 'creditCode',
+      label: '社会信用代码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入统一社会信用代码',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'logo',
+      label: '供应商 LOGO',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入供应商 LOGO 地址',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 导入供应商的表单 */
+export function useImportFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'file',
+      label: '供应商数据',
+      component: 'Upload',
+      rules: 'required',
+      help: '仅允许导入 xls、xlsx 格式文件',
+    },
+    {
+      fieldName: 'updateSupport',
+      label: '是否覆盖',
+      component: 'Switch',
+      componentProps: {
+        activeText: '是',
+        inactiveText: '否',
+        inlinePrompt: true,
+      },
+      rules: z.boolean().default(false),
+      help: '是否更新已经存在的供应商数据',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '供应商编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入供应商编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入供应商名称',
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '供应商简称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入供应商简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入英文名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdVendorApi.Vendor>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '供应商编码',
+      minWidth: 150,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '供应商名称',
+      minWidth: 180,
+    },
+    {
+      field: 'nickname',
+      title: '供应商简称',
+      width: 120,
+    },
+    {
+      field: 'level',
+      title: '供应商等级',
+      width: 130,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_VENDOR_LEVEL },
+      },
+    },
+    {
+      field: 'score',
+      title: '供应商评分',
+      width: 120,
+    },
+    {
+      field: 'telephone',
+      title: '供应商电话',
+      minWidth: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 供应商选择弹窗的搜索表单 */
+export function useVendorSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '供应商编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入供应商编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '供应商名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入供应商名称',
+      },
+    },
+    {
+      fieldName: 'nickname',
+      label: '供应商简称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入供应商简称',
+      },
+    },
+    {
+      fieldName: 'englishName',
+      label: '英文名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入英文名称',
+      },
+    },
+  ];
+}
+
+/** 供应商选择弹窗的字段 */
+export function useVendorSelectGridColumns(): VxeTableGridOptions<MesMdVendorApi.Vendor>['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'code',
+      title: '供应商编码',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '供应商名称',
+      minWidth: 170,
+    },
+    {
+      field: 'nickname',
+      title: '供应商简称',
+      width: 120,
+    },
+    {
+      field: 'level',
+      title: '供应商等级',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MES_VENDOR_LEVEL },
+      },
+    },
+    {
+      field: 'score',
+      title: '供应商评分',
+      width: 110,
+    },
+    {
+      field: 'telephone',
+      title: '联系电话',
+      width: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 100,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 140,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/md/vendor/index.vue b/apps/web-ele/src/views/mes/md/vendor/index.vue
new file mode 100644
index 000000000..53e593583
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/vendor/index.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteVendor, exportVendor, getVendorPage } from '#/api/mes/md/vendor';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ImportForm from './modules/import-form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [ImportModal, importModalApi] = useVbenModal({
+  connectedComponent: ImportForm,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建供应商 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看供应商 */
+function handleDetail(row: MesMdVendorApi.Vendor) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑供应商 */
+function handleEdit(row: MesMdVendorApi.Vendor) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除供应商 */
+async function handleDelete(row: MesMdVendorApi.Vendor) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteVendor(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出表格 */
+async function handleExport() {
+  const data = await exportVendor(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '供应商.xls', source: data });
+}
+
+/** 导入供应商 */
+function handleImport() {
+  importModalApi.open();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getVendorPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdVendorApi.Vendor>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】客户管理、供应商管理"
+        url="https://doc.iocoder.cn/mes/md/client-vendor/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <ImportModal @success="handleRefresh" />
+
+    <Grid table-title="供应商列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['供应商']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-vendor:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.import', ['供应商']),
+              type: 'primary',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['mes:md-vendor:import'],
+              onClick: handleImport,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:md-vendor:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <ElButton link type="primary" @click="handleDetail(row)">
+          {{ row.code }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-vendor:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-vendor:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/vendor/modules/form.vue b/apps/web-ele/src/views/mes/md/vendor/modules/form.vue
new file mode 100644
index 000000000..6d10830f5
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/vendor/modules/form.vue
@@ -0,0 +1,118 @@
+<script lang="ts" setup>
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createVendor, getVendor, updateVendor } from '#/api/mes/md/vendor';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import VendorItemReceiptLineList from './item-receipt-line-list.vue';
+import VendorItemReceiptList from './item-receipt-list.vue';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const subTabsName = ref('itemReceiptLine'); // 当前子表页签
+const formData = ref<MesMdVendorApi.Vendor>();
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  if (formMode.value === 'detail') {
+    return $t('ui.actionTitle.view', ['供应商']);
+  }
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['供应商'])
+    : $t('ui.actionTitle.create', ['供应商']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdVendorApi.Vendor;
+    try {
+      await (formData.value?.id ? updateVendor(data) : createVendor(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    subTabsName.value = 'itemReceiptLine';
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getVendor(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <ElTabs
+      v-if="formMode !== 'create' && formData?.id"
+      v-model="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <ElTabPane label="物料清单" name="itemReceiptLine">
+        <VendorItemReceiptLineList :vendor-id="formData.id" />
+      </ElTabPane>
+      <ElTabPane label="采购记录" name="itemReceipt">
+        <VendorItemReceiptList :vendor-id="formData.id" />
+      </ElTabPane>
+    </ElTabs>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/vendor/modules/import-form.vue b/apps/web-ele/src/views/mes/md/vendor/modules/import-form.vue
new file mode 100644
index 000000000..7a84fcd3b
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/vendor/modules/import-form.vue
@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+import type { MesMdVendorApi } from '#/api/mes/md/vendor';
+
+import { useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElMessage, ElUpload } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { importVendor, importVendorTemplate } from '#/api/mes/md/vendor';
+import { $t } from '#/locales';
+
+import { useImportFormSchema } from '../data';
+
+const emit = defineEmits(['success']);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 120,
+  },
+  layout: 'horizontal',
+  schema: useImportFormSchema(),
+  showDefaultActions: false,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await formApi.getValues();
+    try {
+      const result = await importVendor(data.file, data.updateSupport);
+      const importData = result as MesMdVendorApi.VendorImportRespVO;
+      let text = `上传成功数量：${importData.createCodes?.length || 0};`;
+      for (const code of importData.createCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新成功数量：${importData.updateCodes?.length || 0};`;
+      for (const code of importData.updateCodes || []) {
+        text += `< ${code} >`;
+      }
+      text += `更新失败数量：${Object.keys(importData.failureCodes || {}).length};`;
+      for (const code in importData.failureCodes || {}) {
+        text += `< ${code}: ${importData.failureCodes?.[code]} >`;
+      }
+      ElMessage.info(text);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+
+/** 文件改变时 */
+function handleChange(file: any) {
+  if (file.raw) {
+    formApi.setFieldValue('file', file.raw);
+  }
+}
+
+/** 下载模板 */
+async function handleDownload() {
+  const data = await importVendorTemplate();
+  downloadFileFromBlobPart({ fileName: '供应商导入模板.xls', source: data });
+}
+</script>
+
+<template>
+  <Modal :title="$t('ui.actionTitle.import', ['供应商'])" class="w-1/3">
+    <Form class="mx-4">
+      <template #file>
+        <div class="w-full">
+          <ElUpload
+            :auto-upload="false"
+            :limit="1"
+            :on-change="handleChange"
+            accept=".xls,.xlsx"
+          >
+            <ElButton type="primary">选择 Excel 文件</ElButton>
+          </ElUpload>
+        </div>
+      </template>
+    </Form>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <ElButton @click="handleDownload">下载导入模板</ElButton>
+      </div>
+    </template>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/vendor/modules/item-receipt-detail.vue b/apps/web-ele/src/views/mes/md/vendor/modules/item-receipt-detail.vue
new file mode 100644
index 000000000..8b06d863a
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/vendor/modules/item-receipt-detail.vue
@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmItemReceiptApi } from '#/api/mes/wm/itemreceipt';
+import type { MesWmItemReceiptLineApi } from '#/api/mes/wm/itemreceipt/line';
+
+import { nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import {
+  ElDescriptions,
+  ElDescriptionsItem,
+} from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemReceipt } from '#/api/mes/wm/itemreceipt';
+import { getItemReceiptLinePage } from '#/api/mes/wm/itemreceipt/line';
+
+const loading = ref(false); // 详情加载状态
+const receiptId = ref<number>(); // 当前采购入库单编号
+const receipt = ref<MesWmItemReceiptApi.ItemReceipt>(); // 当前采购入库单详情
+
+/** 格式化空值 */
+function formatEmpty(value: null | number | string | undefined) {
+  return value ?? '-';
+}
+
+/** 格式化日期 */
+function formatDate(value: Date | number | string | undefined) {
+  return value ? (formatDateTime(value) as string) : '-';
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      { field: 'itemCode', title: '物料编码', width: 140 },
+      { field: 'itemName', title: '物料名称', minWidth: 150 },
+      { field: 'specification', title: '规格型号', minWidth: 140 },
+      { field: 'unitMeasureName', title: '单位', width: 100 },
+      { field: 'receivedQuantity', title: '入库数量', width: 120 },
+      { field: 'batchCode', title: '批次号', minWidth: 140 },
+    ],
+    height: 280,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          if (!receiptId.value) {
+            return { list: [], total: 0 };
+          }
+          return await getItemReceiptLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            receiptId: receiptId.value,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmItemReceiptLineApi.ItemReceiptLine>,
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      receiptId.value = undefined;
+      receipt.value = undefined;
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    receiptId.value = data.id;
+    loading.value = true;
+    modalApi.lock();
+    try {
+      receipt.value = await getItemReceipt(data.id);
+      await nextTick();
+      await gridApi.query();
+    } finally {
+      loading.value = false;
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="采购入库单详情"
+    class="w-[900px]"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div v-loading="loading">
+      <ElDescriptions border size="small" :column="3">
+        <ElDescriptionsItem label="入库单编号">
+          {{ formatEmpty(receipt?.code) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="入库单名称">
+          {{ formatEmpty(receipt?.name) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="入库日期">
+          {{ formatDate(receipt?.receiptDate) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="到货通知单">
+          {{ formatEmpty(receipt?.noticeCode) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="供应商">
+          {{ formatEmpty(receipt?.vendorName) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="采购订单号">
+          {{ formatEmpty(receipt?.purchaseOrderCode) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="仓库">
+          {{ formatEmpty(receipt?.warehouseName) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="库区">
+          {{ formatEmpty(receipt?.locationName) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="库位">
+          {{ formatEmpty(receipt?.areaName) }}
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="备注" :span="3">
+          {{ formatEmpty(receipt?.remark) }}
+        </ElDescriptionsItem>
+      </ElDescriptions>
+      <div class="mt-4">
+        <Grid table-title="入库物料" />
+      </div>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/vendor/modules/item-receipt-line-list.vue b/apps/web-ele/src/views/mes/md/vendor/modules/item-receipt-line-list.vue
new file mode 100644
index 000000000..43b29d30d
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/vendor/modules/item-receipt-line-list.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmItemReceiptLineApi } from '#/api/mes/wm/itemreceipt/line';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemReceiptLinePage } from '#/api/mes/wm/itemreceipt/line';
+import ItemForm from '#/views/mes/md/item/modules/form.vue';
+
+const props = defineProps<{
+  vendorId: number;
+}>();
+
+const [ItemFormModal, itemFormModalApi] = useVbenModal({
+  connectedComponent: ItemForm,
+  destroyOnClose: true,
+});
+
+/** 查看物料详情 */
+function handleViewItem(row: MesWmItemReceiptLineApi.ItemReceiptLine) {
+  itemFormModalApi.setData({ id: row.itemId, type: 'detail' }).open();
+}
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'itemCode',
+        title: '物料编码',
+        width: 140,
+        slots: { default: 'itemCode' },
+      },
+      { field: 'itemName', title: '物料名称', minWidth: 150 },
+      { field: 'specification', title: '规格型号', minWidth: 140 },
+      { field: 'unitMeasureName', title: '单位', width: 100 },
+      { field: 'receivedQuantity', title: '入库数量', width: 120 },
+      { field: 'batchCode', title: '批次号', minWidth: 140 },
+    ],
+    height: 320,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getItemReceiptLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            vendorId: props.vendorId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmItemReceiptLineApi.ItemReceiptLine>,
+});
+</script>
+
+<template>
+  <ItemFormModal />
+  <Grid table-title="物料清单">
+    <template #itemCode="{ row }">
+      <ElButton link type="primary" @click="handleViewItem(row)">
+        {{ row.itemCode }}
+      </ElButton>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/vendor/modules/item-receipt-list.vue b/apps/web-ele/src/views/mes/md/vendor/modules/item-receipt-list.vue
new file mode 100644
index 000000000..fbc40045f
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/vendor/modules/item-receipt-list.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesWmItemReceiptLineApi } from '#/api/mes/wm/itemreceipt/line';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemReceiptLinePage } from '#/api/mes/wm/itemreceipt/line';
+
+import ItemReceiptDetail from './item-receipt-detail.vue';
+
+const props = defineProps<{
+  vendorId: number;
+}>();
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: ItemReceiptDetail,
+  destroyOnClose: true,
+});
+
+/** 查看采购入库单详情 */
+function handleViewReceipt(row: MesWmItemReceiptLineApi.ItemReceiptLine) {
+  if (row.receiptId) {
+    detailModalApi.setData({ id: row.receiptId }).open();
+  }
+}
+
+const [Grid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'receiptCode',
+        title: '入库单编号',
+        minWidth: 160,
+        slots: { default: 'receiptCode' },
+      },
+      { field: 'purchaseOrderCode', title: '采购订单号', minWidth: 150 },
+      { field: 'itemCode', title: '物料编码', width: 140 },
+      { field: 'itemName', title: '物料名称', minWidth: 150 },
+      { field: 'specification', title: '规格型号', minWidth: 140 },
+      { field: 'unitMeasureName', title: '单位', width: 100 },
+      { field: 'receivedQuantity', title: '入库数量', width: 120 },
+    ],
+    height: 320,
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          return await getItemReceiptLinePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            vendorId: props.vendorId,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<MesWmItemReceiptLineApi.ItemReceiptLine>,
+});
+</script>
+
+<template>
+  <DetailModal />
+  <Grid table-title="采购记录">
+    <template #receiptCode="{ row }">
+      <ElButton link type="primary" @click="handleViewReceipt(row)">
+        {{ row.receiptCode }}
+      </ElButton>
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/components/index.ts b/apps/web-ele/src/views/mes/md/workstation/components/index.ts
new file mode 100644
index 000000000..b5855ec6f
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/components/index.ts
@@ -0,0 +1,3 @@
+export { default as MdWorkshopSelect } from './md-workshop-select.vue';
+export { default as MdWorkstationSelectDialog } from './md-workstation-select-dialog.vue';
+export { default as MdWorkstationSelect } from './md-workstation-select.vue';
diff --git a/apps/web-ele/src/views/mes/md/workstation/components/md-workshop-select.vue b/apps/web-ele/src/views/mes/md/workstation/components/md-workshop-select.vue
new file mode 100644
index 000000000..ecad19182
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/components/md-workshop-select.vue
@@ -0,0 +1,117 @@
+<script lang="ts" setup>
+import type { MesMdWorkshopApi } from '#/api/mes/md/workstation/workshop';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { ElOption, ElSelect, ElTag, ElTooltip } from 'element-plus';
+
+import { getWorkshopSimpleList } from '#/api/mes/md/workstation/workshop';
+
+defineOptions({ name: 'MdWorkshopSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择车间',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesMdWorkshopApi.Workshop | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const allList = ref<MesMdWorkshopApi.Workshop[]>([]);
+const filteredList = ref<MesMdWorkshopApi.Workshop[]>([]);
+const selectedItem = ref<MesMdWorkshopApi.Workshop>(); // 选中的车间
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+/** 前端过滤车间名称和编码 */
+function handleFilter(query: string) {
+  if (!query) {
+    filteredList.value = allList.value;
+    return;
+  }
+  const keyword = query.toLowerCase();
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword),
+  );
+}
+
+/** 根据当前值同步 tooltip 展示的车间详情 */
+function syncSelectedItem(value: number | undefined) {
+  selectedItem.value =
+    value === undefined ? undefined : allList.value.find((item) => item.id === value);
+}
+
+/** 除 v-model 外，额外抛出完整车间对象给业务表单使用 */
+function handleChange(value: number | undefined) {
+  syncSelectedItem(value);
+  emit('change', selectedItem.value);
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncSelectedItem(value);
+  },
+);
+
+onMounted(async () => {
+  allList.value = await getWorkshopSimpleList();
+  filteredList.value = allList.value;
+  syncSelectedItem(props.modelValue);
+});
+</script>
+
+<template>
+  <ElTooltip :disabled="!selectedItem" placement="top" :show-after="500">
+    <template #content>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>面积：{{ selectedItem.area != null ? `${selectedItem.area} ㎡` : '-' }}</div>
+        <div>负责人：{{ selectedItem.chargeUserName || '-' }}</div>
+      </div>
+    </template>
+    <ElSelect
+      v-bind="$attrs"
+      v-model="selectValue"
+      :clearable="clearable"
+      :disabled="disabled"
+      :filter-method="handleFilter"
+      :placeholder="placeholder"
+      class="w-full"
+      filterable
+      @change="handleChange"
+    >
+      <ElOption
+        v-for="item in filteredList"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id!"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ item.name }}</span>
+          <ElTag v-if="item.code" type="info">{{ item.code }}</ElTag>
+        </div>
+      </ElOption>
+    </ElSelect>
+  </ElTooltip>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/components/md-workstation-select-dialog.vue b/apps/web-ele/src/views/mes/md/workstation/components/md-workstation-select-dialog.vue
new file mode 100644
index 000000000..2c66e5928
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/components/md-workstation-select-dialog.vue
@@ -0,0 +1,190 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { nextTick, ref } from 'vue';
+
+import { CommonStatusEnum } from '@vben/constants';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getWorkstationPage } from '#/api/mes/md/workstation';
+
+import {
+  useWorkstationSelectGridColumns,
+  useWorkstationSelectGridFormSchema,
+} from '../data';
+
+const props = withDefaults(
+  defineProps<{
+    processId?: number;
+  }>(),
+  {
+    processId: undefined,
+  },
+);
+const emit = defineEmits<{
+  selected: [rows: MesMdWorkstationApi.Workstation[]];
+}>();
+
+const open = ref(false); // 弹窗是否打开
+const multiple = ref(true); // 是否多选
+const syncingSingleSelection = ref(false); // 是否同步单选勾选状态
+const selectedRows = ref<MesMdWorkstationApi.Workstation[]>([]); // 已选工作站列表
+const preSelectedIds = ref<number[]>([]); // 预选工作站编号列表
+
+/** 单选模式下同步 VXE 勾选状态 */
+async function syncSingleSelection(row?: MesMdWorkstationApi.Workstation) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条 */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: MesMdWorkstationApi.Workstation[];
+  row?: MesMdWorkstationApi.Workstation;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 处理全选变化 */
+function handleCheckboxAll({ records }: { records: MesMdWorkstationApi.Workstation[] }) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records;
+}
+
+/** 回显预选工作站 */
+function applyPreSelection() {
+  if (preSelectedIds.value.length === 0) {
+    return;
+  }
+  const rows = gridApi.grid.getData() as MesMdWorkstationApi.Workstation[];
+  for (const row of rows) {
+    if (row.id && preSelectedIds.value.includes(row.id)) {
+      gridApi.grid.setCheckboxRow(row, true);
+      if (!multiple.value) {
+        selectedRows.value = [row];
+      }
+    }
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useWorkstationSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useWorkstationSelectGridColumns(),
+    height: 520,
+    keepSource: true,
+    checkboxConfig: {
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkstationPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            status: CommonStatusEnum.ENABLE,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationApi.Workstation>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 重置查询和选择状态 */
+async function resetQueryState() {
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+  if (props.processId) {
+    await gridApi.formApi.setFieldValue('processId', props.processId);
+  }
+}
+
+/** 打开工作站选择弹窗 */
+async function openModal(selectedIds?: number[], options?: { multiple?: boolean }) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  preSelectedIds.value = selectedIds || [];
+  await nextTick();
+  await resetQueryState();
+  await gridApi.query();
+  await nextTick();
+  applyPreSelection();
+}
+
+/** 关闭工作站选择弹窗 */
+async function closeModal() {
+  open.value = false;
+  await resetQueryState();
+}
+
+/** 确认选择工作站 */
+function handleConfirm() {
+  if (selectedRows.value.length === 0) {
+    ElMessage.warning(multiple.value ? '请至少选择一条数据' : '请选择一条数据');
+    return;
+  }
+  emit('selected', multiple.value ? selectedRows.value : [selectedRows.value[0]!]);
+  open.value = false;
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    title="工作站选择"
+    width="70%"
+    destroy-on-close
+    @close="closeModal"
+  >
+    <Grid table-title="工作站列表" />
+    <template #footer>
+      <ElButton @click="closeModal">取消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/components/md-workstation-select.vue b/apps/web-ele/src/views/mes/md/workstation/components/md-workstation-select.vue
new file mode 100644
index 000000000..acb100597
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/components/md-workstation-select.vue
@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { computed, ref, useAttrs, watch } from 'vue';
+
+import { CircleX, Search } from '@vben/icons';
+
+import { ElInput, ElTooltip } from 'element-plus';
+
+import { getWorkstation } from '#/api/mes/md/workstation';
+
+import MdWorkstationSelectDialog from './md-workstation-select-dialog.vue';
+
+defineOptions({ name: 'MdWorkstationSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+    processId?: number;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择工作站',
+    processId: undefined,
+  },
+);
+const emit = defineEmits<{
+  change: [item: MesMdWorkstationApi.Workstation | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+const attrs = useAttrs(); // 透传属性
+const dialogRef = ref<InstanceType<typeof MdWorkstationSelectDialog>>(); // 工作站选择弹窗
+const hovering = ref(false); // 是否悬停
+const selectedItem = ref<MesMdWorkstationApi.Workstation>(); // 选中的工作站
+
+const displayLabel = computed(() => selectedItem.value?.name ?? ''); // 选择器展示名称
+const showClear = computed( // 是否显示清空图标
+  () => props.clearable && !props.disabled && hovering.value && props.modelValue != null,
+);
+
+/** 根据工作站编号回显选择器 */
+async function resolveItemById(id: number | undefined) {
+  if (id == null) {
+    selectedItem.value = undefined;
+    return;
+  }
+  if (selectedItem.value?.id === id) {
+    return;
+  }
+  try {
+    selectedItem.value = await getWorkstation(id);
+  } catch (error) {
+    console.error('[MdWorkstationSelect] resolveItemById failed:', error);
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    resolveItemById(value);
+  },
+  { immediate: true },
+);
+
+/** 清空已选工作站 */
+function clearSelected() {
+  selectedItem.value = undefined;
+  emit('update:modelValue', undefined);
+  emit('change', undefined);
+}
+
+/** 打开工作站选择弹窗 */
+function handleClick(event: MouseEvent) {
+  if (props.disabled) {
+    return;
+  }
+  const target = event.target as HTMLElement;
+  if (showClear.value && target.closest('.el-input__suffix')) {
+    event.stopPropagation();
+    clearSelected();
+    return;
+  }
+  const selectedIds = props.modelValue == null ? [] : [props.modelValue];
+  dialogRef.value?.open(selectedIds, { multiple: false });
+}
+
+/** 回填选中的工作站 */
+function handleSelected(rows: MesMdWorkstationApi.Workstation[]) {
+  const item = rows[0];
+  if (!item) {
+    return;
+  }
+  selectedItem.value = item;
+  emit('update:modelValue', item.id);
+  emit('change', item);
+}
+</script>
+
+<template>
+  <div
+    v-bind="attrs"
+    class="w-full"
+    :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+    @click="handleClick"
+    @mouseenter="hovering = true"
+    @mouseleave="hovering = false"
+  >
+    <ElTooltip :disabled="!selectedItem" placement="top" :show-after="500">
+      <template #content>
+        <div v-if="selectedItem" class="leading-6">
+          <div>编码：{{ selectedItem.code || '-' }}</div>
+          <div>名称：{{ selectedItem.name || '-' }}</div>
+          <div>所在车间：{{ selectedItem.workshopName || '-' }}</div>
+          <div>所属工序：{{ selectedItem.processName || '-' }}</div>
+          <div>地点：{{ selectedItem.address || '-' }}</div>
+        </div>
+      </template>
+      <ElInput
+        :disabled="disabled"
+        :model-value="displayLabel"
+        :placeholder="placeholder"
+        readonly
+      >
+        <template #suffix>
+          <CircleX v-if="showClear" class="size-4" />
+          <Search v-else class="size-4" />
+        </template>
+      </ElInput>
+    </ElTooltip>
+  </div>
+  <MdWorkstationSelectDialog
+    ref="dialogRef"
+    :process-id="processId"
+    @selected="handleSelected"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/data.ts b/apps/web-ele/src/views/mes/md/workstation/data.ts
new file mode 100644
index 000000000..a1e266a2f
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/data.ts
@@ -0,0 +1,356 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { h, markRaw } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getWarehouseSimpleList } from '#/api/mes/wm/warehouse';
+import { getWarehouseAreaSimpleList } from '#/api/mes/wm/warehouse/area';
+import { getWarehouseLocationSimpleList } from '#/api/mes/wm/warehouse/location';
+import { ProProcessSelect } from '#/views/mes/pro/process/components';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+import { MdWorkshopSelect } from './components';
+
+/** 新增/修改工作站的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '工作站编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工作站编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          ElButton,
+          {
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_WORKSTATION_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '工作站名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工作站名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'workshopId',
+      label: '所在车间',
+      component: markRaw(MdWorkshopSelect),
+      componentProps: {
+        placeholder: '请选择车间',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'address',
+      label: '工作站地点',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入工作站地点',
+      },
+    },
+    {
+      fieldName: 'processId',
+      label: '所属工序',
+      component: markRaw(ProProcessSelect),
+      componentProps: {
+        placeholder: '请选择所属工序',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getWarehouseSimpleList,
+        clearable: true,
+        labelField: 'name',
+        onChange: async () => {
+          await formApi?.setFieldValue('locationId', undefined);
+          await formApi?.setFieldValue('areaId', undefined);
+        },
+        placeholder: '请选择仓库',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'locationId',
+      label: '库区',
+      component: 'Select',
+      dependencies: {
+        triggerFields: ['warehouseId'],
+        disabled: (values) => !values.warehouseId,
+        async componentProps(values) {
+          const list = values.warehouseId
+            ? await getWarehouseLocationSimpleList(values.warehouseId)
+            : [];
+          return {
+            clearable: true,
+            onChange: async () => {
+              await formApi?.setFieldValue('areaId', undefined);
+            },
+            options: list.map((item) => ({
+              label: item.name,
+              value: item.id,
+            })),
+            placeholder: '请选择库区',
+          };
+        },
+      },
+    },
+    {
+      fieldName: 'areaId',
+      label: '库位',
+      component: 'Select',
+      dependencies: {
+        triggerFields: ['locationId'],
+        disabled: (values) => !values.locationId,
+        async componentProps(values) {
+          const list = values.locationId
+            ? await getWarehouseAreaSimpleList(values.locationId)
+            : [];
+          return {
+            clearable: true,
+            options: list.map((item) => ({
+              label: item.name,
+              value: item.id,
+            })),
+            placeholder: '请选择库位',
+          };
+        },
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-3',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工作站编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入工作站编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '工作站名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入工作站名称',
+      },
+    },
+    {
+      fieldName: 'workshopId',
+      label: '所在车间',
+      component: markRaw(MdWorkshopSelect),
+      componentProps: {
+        clearable: true,
+        placeholder: '请选择车间',
+      },
+    },
+    {
+      fieldName: 'processId',
+      label: '所属工序',
+      component: markRaw(ProProcessSelect),
+      componentProps: {
+        clearable: true,
+        placeholder: '请选择工序',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '工作站编码',
+      minWidth: 150,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '工作站名称',
+      minWidth: 150,
+    },
+    {
+      field: 'address',
+      title: '工作站地点',
+      minWidth: 150,
+    },
+    {
+      field: 'workshopName',
+      title: '所在车间',
+      width: 140,
+    },
+    {
+      field: 'processName',
+      title: '所属工序',
+      width: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 210,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 工作站选择弹窗的搜索表单 */
+export function useWorkstationSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '工作站编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入工作站编码',
+      },
+    },
+    {
+      fieldName: 'processId',
+      label: '所属工序',
+      component: markRaw(ProProcessSelect),
+      componentProps: {
+        placeholder: '请选择工序',
+      },
+    },
+    {
+      fieldName: 'workshopId',
+      label: '所在车间',
+      component: markRaw(MdWorkshopSelect),
+      componentProps: {
+        placeholder: '请选择车间',
+      },
+    },
+  ];
+}
+
+/** 工作站选择弹窗的字段 */
+export function useWorkstationSelectGridColumns(): VxeTableGridOptions<MesMdWorkstationApi.Workstation>['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'code',
+      title: '工作站编码',
+      width: 150,
+    },
+    {
+      field: 'name',
+      title: '工作站名称',
+      minWidth: 160,
+    },
+    {
+      field: 'address',
+      title: '工作站地点',
+      minWidth: 140,
+    },
+    {
+      field: 'workshopName',
+      title: '所在车间',
+      width: 130,
+    },
+    {
+      field: 'processName',
+      title: '所属工序',
+      width: 130,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 140,
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/md/workstation/index.vue b/apps/web-ele/src/views/mes/md/workstation/index.vue
new file mode 100644
index 000000000..4fcaa838b
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/index.vue
@@ -0,0 +1,188 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWorkstation,
+  exportWorkstation,
+  getWorkstationPage,
+} from '#/api/mes/md/workstation';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建工作站 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看工作站 */
+function handleDetail(row: MesMdWorkstationApi.Workstation) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑工作站 */
+function handleEdit(row: MesMdWorkstationApi.Workstation) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除工作站 */
+async function handleDelete(row: MesMdWorkstationApi.Workstation) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteWorkstation(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 查看工作站条码 */
+function handleBarcode(row: MesMdWorkstationApi.Workstation) {
+  if (!row.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    row.id,
+    BarcodeBizTypeEnum.WORKSTATION,
+    row.code,
+    row.name,
+  );
+}
+
+/** 导出工作站 */
+async function handleExport() {
+  const data = await exportWorkstation(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '工作站.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkstationPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationApi.Workstation>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】车间设置、工作站设置"
+        url="https://doc.iocoder.cn/mes/md/workshop/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <BarcodeDetail ref="barcodeDetailRef" />
+
+    <Grid table-title="工作站列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['工作站']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-workstation:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['mes:md-workstation:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <ElButton link type="primary" @click="handleDetail(row)">
+          {{ row.code }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-workstation:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-workstation:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '条码',
+              type: 'primary',
+              link: true,
+              auth: ['mes:md-workstation:query'],
+              onClick: handleBarcode.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/modules/form.vue b/apps/web-ele/src/views/mes/md/workstation/modules/form.vue
new file mode 100644
index 000000000..f43deb8a0
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/modules/form.vue
@@ -0,0 +1,160 @@
+<script lang="ts" setup>
+import type { MesMdWorkstationApi } from '#/api/mes/md/workstation';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElMessage, ElTabPane, ElTabs } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWorkstation,
+  getWorkstation,
+  updateWorkstation,
+} from '#/api/mes/md/workstation';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+import MachineList from './machine-list.vue';
+import ToolList from './tool-list.vue';
+import WorkerList from './worker-list.vue';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const subTabsName = ref('machine'); // 当前资源页签
+const formData = ref<MesMdWorkstationApi.Workstation>();
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  const titles: Record<FormMode, string> = {
+    create: '新增工作站',
+    update: '修改工作站',
+    detail: '查看工作站',
+  };
+  return titles[formMode.value];
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 110,
+  },
+  wrapperClass: 'grid-cols-3',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+/** 查看工作站条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.WORKSTATION,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdWorkstationApi.Workstation;
+    try {
+      if (formMode.value === 'create') {
+        const id = await createWorkstation(data);
+        formData.value = { ...data, id };
+        await formApi.setFieldValue('id', id);
+        formMode.value = 'update';
+      } else {
+        await updateWorkstation(data);
+        formData.value = { ...formData.value, ...data };
+      }
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    subTabsName.value = 'machine';
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getWorkstation(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <Form class="mx-4" />
+    <ElTabs
+      v-if="formMode !== 'create' && formData?.id"
+      v-model="subTabsName"
+      class="mx-4 mt-4"
+    >
+      <ElTabPane name="machine" label="设备资源">
+        <MachineList :form-type="formMode" :workstation-id="formData.id" />
+      </ElTabPane>
+      <ElTabPane name="tool" label="工装夹具">
+        <ToolList :form-type="formMode" :workstation-id="formData.id" />
+      </ElTabPane>
+      <ElTabPane name="worker" label="人力资源">
+        <WorkerList :form-type="formMode" :workstation-id="formData.id" />
+      </ElTabPane>
+    </ElTabs>
+    <template #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <ElButton
+          v-if="isDetail && formData?.id"
+          type="primary"
+          @click="handleBarcode"
+        >
+          查看条码
+        </ElButton>
+      </div>
+    </template>
+    <BarcodeDetail ref="barcodeDetailRef" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/modules/machine-list.vue b/apps/web-ele/src/views/mes/md/workstation/modules/machine-list.vue
new file mode 100644
index 000000000..ec831494f
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/modules/machine-list.vue
@@ -0,0 +1,213 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationMachineApi } from '#/api/mes/md/workstation/machine';
+
+import { computed, ref, watch } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getMachinerySimpleList } from '#/api/mes/dv/machinery';
+import {
+  createWorkstationMachine,
+  deleteWorkstationMachine,
+  getWorkstationMachineList,
+} from '#/api/mes/md/workstation/machine';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'MesMdWorkstationMachineList' });
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    workstationId: number;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const formOpen = ref(false); // 设备资源表单是否打开
+const formLoading = ref(false); // 设备资源表单提交中
+const list = ref<MesMdWorkstationMachineApi.WorkstationMachine[]>([]); // 设备资源列表
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'workstationId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'machineryId',
+      label: '设备',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getMachinerySimpleList,
+        clearable: true,
+        labelField: 'name',
+        placeholder: '请选择设备',
+        valueField: 'id',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 1,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: [
+      { field: 'machineryCode', title: '设备编码', width: 140 },
+      { field: 'machineryName', title: '设备名称', minWidth: 160 },
+      { field: 'quantity', title: '数量', width: 100 },
+      { field: 'remark', title: '备注', minWidth: 160 },
+      {
+        title: '操作',
+        width: 90,
+        fixed: 'right',
+        slots: { default: 'actions' },
+        visible: !isReadOnly.value,
+      },
+    ],
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationMachineApi.WorkstationMachine>,
+});
+
+/** 加载设备资源列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getWorkstationMachineList(props.workstationId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 打开设备资源表单 */
+async function openForm() {
+  formOpen.value = true;
+  await formApi.resetForm();
+  await formApi.setValues({
+    quantity: 1,
+    workstationId: props.workstationId,
+  });
+}
+
+/** 提交设备资源表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MesMdWorkstationMachineApi.WorkstationMachine;
+    await createWorkstationMachine(data);
+    formOpen.value = false;
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除设备资源 */
+async function handleDelete(id: number) {
+  await deleteWorkstationMachine(id);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', ['设备资源']));
+  await getList();
+}
+
+watch(
+  () => props.workstationId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="!isReadOnly" class="mb-3 flex items-center justify-start">
+      <TableAction
+        :actions="[
+          {
+            label: '添加设备',
+            type: 'primary',
+            onClick: openForm,
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              popConfirm: {
+                title: '确认删除该设备资源吗？',
+                confirm: handleDelete.bind(null, row.id!),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <ElDialog v-model="formOpen" title="添加设备" width="520px">
+      <Form class="mx-4" />
+      <template #footer>
+        <ElButton @click="formOpen = false">取消</ElButton>
+        <ElButton type="primary" :loading="formLoading" @click="submitForm">
+          确定
+        </ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/modules/tool-list.vue b/apps/web-ele/src/views/mes/md/workstation/modules/tool-list.vue
new file mode 100644
index 000000000..b2eab5617
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/modules/tool-list.vue
@@ -0,0 +1,232 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationToolApi } from '#/api/mes/md/workstation/tool';
+
+import { computed, ref, watch } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createWorkstationTool,
+  deleteWorkstationTool,
+  getWorkstationToolList,
+  updateWorkstationTool,
+} from '#/api/mes/md/workstation/tool';
+import { getToolTypeSimpleList } from '#/api/mes/tm/tool/type';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'MesMdWorkstationToolList' });
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    workstationId: number;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const formOpen = ref(false); // 工装夹具表单是否打开
+const formLoading = ref(false); // 工装夹具表单提交中
+const formData = ref<MesMdWorkstationToolApi.WorkstationTool>();
+const list = ref<MesMdWorkstationToolApi.WorkstationTool[]>([]); // 工装夹具列表
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'id', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'workstationId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'toolTypeId',
+      label: '工具类型',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getToolTypeSimpleList,
+        clearable: true,
+        labelField: 'name',
+        placeholder: '请选择工具类型',
+        valueField: 'id',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        disabled: (values) => !!values.id,
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 1,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: [
+      { field: 'toolTypeId', title: '工具类型编号', width: 140 },
+      { field: 'toolTypeName', title: '工具类型名称', minWidth: 160 },
+      { field: 'quantity', title: '数量', width: 100 },
+      { field: 'remark', title: '备注', minWidth: 160 },
+      {
+        title: '操作',
+        width: 130,
+        fixed: 'right',
+        slots: { default: 'actions' },
+        visible: !isReadOnly.value,
+      },
+    ],
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationToolApi.WorkstationTool>,
+});
+
+/** 加载工装夹具列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getWorkstationToolList(props.workstationId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 打开工装夹具表单 */
+async function openForm(row?: MesMdWorkstationToolApi.WorkstationTool) {
+  formOpen.value = true;
+  formData.value = row;
+  await formApi.resetForm();
+  await formApi.setValues({
+    quantity: 1,
+    workstationId: props.workstationId,
+    ...row,
+  });
+}
+
+/** 提交工装夹具表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MesMdWorkstationToolApi.WorkstationTool;
+    await (formData.value?.id ? updateWorkstationTool(data) : createWorkstationTool(data));
+    formOpen.value = false;
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除工装夹具 */
+async function handleDelete(id: number) {
+  await deleteWorkstationTool(id);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', ['工装夹具']));
+  await getList();
+}
+
+watch(
+  () => props.workstationId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="!isReadOnly" class="mb-3 flex items-center justify-start">
+      <TableAction
+        :actions="[
+          {
+            label: '添加工具',
+            type: 'primary',
+            onClick: openForm.bind(null, undefined),
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'primary',
+              link: true,
+              onClick: openForm.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              popConfirm: {
+                title: '确认删除该工装夹具吗？',
+                confirm: handleDelete.bind(null, row.id!),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <ElDialog
+      v-model="formOpen"
+      :title="formData?.id ? '编辑工具' : '添加工具'"
+      width="520px"
+    >
+      <Form class="mx-4" />
+      <template #footer>
+        <ElButton @click="formOpen = false">取消</ElButton>
+        <ElButton type="primary" :loading="formLoading" @click="submitForm">
+          确定
+        </ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/modules/worker-list.vue b/apps/web-ele/src/views/mes/md/workstation/modules/worker-list.vue
new file mode 100644
index 000000000..4b74c899b
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/modules/worker-list.vue
@@ -0,0 +1,228 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkstationWorkerApi } from '#/api/mes/md/workstation/worker';
+
+import { computed, ref, watch } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  createWorkstationWorker,
+  deleteWorkstationWorker,
+  getWorkstationWorkerList,
+  updateWorkstationWorker,
+} from '#/api/mes/md/workstation/worker';
+import { getSimplePostList } from '#/api/system/post';
+import { $t } from '#/locales';
+
+defineOptions({ name: 'MesMdWorkstationWorkerList' });
+
+const props = withDefaults(
+  defineProps<{
+    formType?: string;
+    workstationId: number;
+  }>(),
+  {
+    formType: 'update',
+  },
+);
+
+const isReadOnly = computed(() => props.formType === 'detail'); // 是否只读
+const formOpen = ref(false); // 人力资源表单是否打开
+const formLoading = ref(false); // 人力资源表单提交中
+const formData = ref<MesMdWorkstationWorkerApi.WorkstationWorker>();
+const list = ref<MesMdWorkstationWorkerApi.WorkstationWorker[]>([]); // 人力资源列表
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 90,
+  },
+  layout: 'horizontal',
+  schema: [
+    { fieldName: 'id', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    { fieldName: 'workstationId', component: 'Input', dependencies: { triggerFields: [''], show: () => false } },
+    {
+      fieldName: 'postId',
+      label: '岗位',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimplePostList,
+        clearable: true,
+        labelField: 'name',
+        placeholder: '请选择岗位',
+        valueField: 'id',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'quantity',
+      label: '数量',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 1,
+        precision: 0,
+      },
+      rules: z.number().default(1),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: { placeholder: '请输入备注', rows: 3 },
+    },
+  ],
+  showDefaultActions: false,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    autoResize: true,
+    border: true,
+    columns: [
+      { field: 'postId', title: '岗位编号', width: 140 },
+      { field: 'postName', title: '岗位名称', minWidth: 160 },
+      { field: 'quantity', title: '数量', width: 100 },
+      { field: 'remark', title: '备注', minWidth: 160 },
+      {
+        title: '操作',
+        width: 130,
+        fixed: 'right',
+        slots: { default: 'actions' },
+        visible: !isReadOnly.value,
+      },
+    ],
+    data: list.value,
+    minHeight: 240,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    showOverflow: true,
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<MesMdWorkstationWorkerApi.WorkstationWorker>,
+});
+
+/** 加载人力资源列表 */
+async function getList() {
+  gridApi.setLoading(true);
+  try {
+    list.value = await getWorkstationWorkerList(props.workstationId);
+    gridApi.setGridOptions({ data: list.value });
+  } finally {
+    gridApi.setLoading(false);
+  }
+}
+
+/** 打开人力资源表单 */
+async function openForm(row?: MesMdWorkstationWorkerApi.WorkstationWorker) {
+  formOpen.value = true;
+  formData.value = row;
+  await formApi.resetForm();
+  await formApi.setValues({
+    quantity: 1,
+    workstationId: props.workstationId,
+    ...row,
+  });
+}
+
+/** 提交人力资源表单 */
+async function submitForm() {
+  const { valid } = await formApi.validate();
+  if (!valid) {
+    return;
+  }
+  formLoading.value = true;
+  try {
+    const data = (await formApi.getValues()) as MesMdWorkstationWorkerApi.WorkstationWorker;
+    await (formData.value?.id ? updateWorkstationWorker(data) : createWorkstationWorker(data));
+    formOpen.value = false;
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    await getList();
+  } finally {
+    formLoading.value = false;
+  }
+}
+
+/** 删除人力资源 */
+async function handleDelete(id: number) {
+  await deleteWorkstationWorker(id);
+  ElMessage.success($t('ui.actionMessage.deleteSuccess', ['人力资源']));
+  await getList();
+}
+
+watch(
+  () => props.workstationId,
+  (value) => {
+    if (value) {
+      getList();
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="!isReadOnly" class="mb-3 flex items-center justify-start">
+      <TableAction
+        :actions="[
+          {
+            label: '添加人员',
+            type: 'primary',
+            onClick: openForm.bind(null, undefined),
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'primary',
+              link: true,
+              onClick: openForm.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              popConfirm: {
+                title: '确认删除该人力资源吗？',
+                confirm: handleDelete.bind(null, row.id!),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+
+    <ElDialog
+      v-model="formOpen"
+      :title="formData?.id ? '编辑人员' : '添加人员'"
+      width="520px"
+    >
+      <Form class="mx-4" />
+      <template #footer>
+        <ElButton @click="formOpen = false">取消</ElButton>
+        <ElButton type="primary" :loading="formLoading" @click="submitForm">
+          确定
+        </ElButton>
+      </template>
+    </ElDialog>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/workshop/data.ts b/apps/web-ele/src/views/mes/md/workstation/workshop/data.ts
new file mode 100644
index 000000000..22fa897cc
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/workshop/data.ts
@@ -0,0 +1,193 @@
+import type { VbenFormApi, VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkshopApi } from '#/api/mes/md/workstation/workshop';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateAutoCode } from '#/api/mes/md/autocode/record';
+import { getSimpleUserList } from '#/api/system/user';
+import { MesAutoCodeRuleCode } from '#/views/mes/utils/constants';
+
+/** 新增/修改车间的表单 */
+export function useFormSchema(formApi?: VbenFormApi): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '车间编码',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入车间编码',
+      },
+      dependencies: {
+        triggerFields: ['id'],
+        componentProps: (values) => ({
+          disabled: !!values.id,
+        }),
+      },
+      rules: 'required',
+      suffix: () =>
+        h(
+          ElButton,
+          {
+            onClick: async () => {
+              try {
+                const code = await generateAutoCode(
+                  MesAutoCodeRuleCode.MD_WORKSHOP_CODE,
+                );
+                await formApi?.setFieldValue('code', code);
+              } catch (error) {
+                console.error(error);
+              }
+            },
+          },
+          { default: () => '生成' },
+        ),
+    },
+    {
+      fieldName: 'name',
+      label: '车间名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入车间名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'area',
+      label: '面积',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+        precision: 2,
+      },
+    },
+    {
+      fieldName: 'chargeUserId',
+      label: '负责人',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        labelField: 'nickname',
+        placeholder: '请选择负责人',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '车间编码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入车间编码',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '车间名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入车间名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<MesMdWorkshopApi.Workshop>['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '车间编码',
+      minWidth: 150,
+      slots: { default: 'code' },
+    },
+    {
+      field: 'name',
+      title: '车间名称',
+      minWidth: 150,
+    },
+    {
+      field: 'area',
+      title: '面积',
+      width: 120,
+    },
+    {
+      field: 'chargeUserName',
+      title: '负责人',
+      width: 140,
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 180,
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mes/md/workstation/workshop/index.vue b/apps/web-ele/src/views/mes/md/workstation/workshop/index.vue
new file mode 100644
index 000000000..fd9f51c42
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/workshop/index.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MesMdWorkshopApi } from '#/api/mes/md/workstation/workshop';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWorkshop,
+  getWorkshopPage,
+} from '#/api/mes/md/workstation/workshop';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建车间 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 查看车间 */
+function handleDetail(row: MesMdWorkshopApi.Workshop) {
+  formModalApi.setData({ id: row.id, type: 'detail' }).open();
+}
+
+/** 编辑车间 */
+function handleEdit(row: MesMdWorkshopApi.Workshop) {
+  formModalApi.setData({ id: row.id, type: 'update' }).open();
+}
+
+/** 删除车间 */
+async function handleDelete(row: MesMdWorkshopApi.Workshop) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteWorkshop(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWorkshopPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MesMdWorkshopApi.Workshop>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】车间设置、工作站设置"
+        url="https://doc.iocoder.cn/mes/md/workshop/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="车间列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['车间']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mes:md-workshop:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #code="{ row }">
+        <ElButton link type="primary" @click="handleDetail(row)">
+          {{ row.code }}
+        </ElButton>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mes:md-workshop:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mes:md-workshop:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/mes/md/workstation/workshop/modules/form.vue b/apps/web-ele/src/views/mes/md/workstation/workshop/modules/form.vue
new file mode 100644
index 000000000..b2a7b3a96
--- /dev/null
+++ b/apps/web-ele/src/views/mes/md/workstation/workshop/modules/form.vue
@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { MesMdWorkshopApi } from '#/api/mes/md/workstation/workshop';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElButton, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWorkshop,
+  getWorkshop,
+  updateWorkshop,
+} from '#/api/mes/md/workstation/workshop';
+import { $t } from '#/locales';
+import { BarcodeBizTypeEnum } from '#/views/mes/utils/constants';
+import { BarcodeDetail } from '#/views/mes/wm/barcode/components';
+
+import { useFormSchema } from '../data';
+
+type FormMode = 'create' | 'detail' | 'update';
+
+const emit = defineEmits(['success']);
+const formMode = ref<FormMode>('create'); // 表单模式
+const formData = ref<MesMdWorkshopApi.Workshop>();
+const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
+
+const isDetail = computed(() => formMode.value === 'detail'); // 是否查看模式
+const getTitle = computed(() => {
+  const titles: Record<FormMode, string> = {
+    create: '新增车间',
+    update: '修改车间',
+    detail: '查看车间',
+  };
+  return titles[formMode.value];
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-1',
+    labelWidth: 100,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+/** 查看车间条码 */
+function handleBarcode() {
+  if (!formData.value?.id) {
+    return;
+  }
+  barcodeDetailRef.value?.openByBusiness(
+    formData.value.id,
+    BarcodeBizTypeEnum.WORKSHOP,
+    formData.value.code,
+    formData.value.name,
+  );
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (isDetail.value) {
+      await modalApi.close();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as MesMdWorkshopApi.Workshop;
+    try {
+      await (formData.value?.id ? updateWorkshop(data) : createWorkshop(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    // 加载数据
+    const data = modalApi.getData<{ id?: number; type?: FormMode }>();
+    formMode.value = data?.type || 'create';
+    formApi.setDisabled(formMode.value === 'detail');
+    modalApi.setState({ showConfirmButton: formMode.value !== 'detail' });
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getWorkshop(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+    <template v-if="isDetail && formData?.id" #prepend-footer>
+      <div class="flex flex-auto items-center">
+        <ElButton @click="handleBarcode">查看条码</ElButton>
+      </div>
+    </template>
+  </Modal>
+  <BarcodeDetail ref="barcodeDetailRef" />
+</template>
diff --git a/apps/web-ele/src/views/mes/pro/process/components/index.ts b/apps/web-ele/src/views/mes/pro/process/components/index.ts
new file mode 100644
index 000000000..e0cca7d22
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/process/components/index.ts
@@ -0,0 +1 @@
+export { default as ProProcessSelect } from './pro-process-select.vue';
diff --git a/apps/web-ele/src/views/mes/pro/process/components/pro-process-select.vue b/apps/web-ele/src/views/mes/pro/process/components/pro-process-select.vue
new file mode 100644
index 000000000..a2b86ffa6
--- /dev/null
+++ b/apps/web-ele/src/views/mes/pro/process/components/pro-process-select.vue
@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import type { MesProProcessApi } from '#/api/mes/pro/process';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { ElOption, ElSelect, ElTag, ElTooltip } from 'element-plus';
+
+import { getProcessSimpleList } from '#/api/mes/pro/process';
+
+defineOptions({ name: 'ProProcessSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择工序',
+  },
+);
+
+const emit = defineEmits<{
+  change: [item: MesProProcessApi.Process | undefined];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const allList = ref<MesProProcessApi.Process[]>([]);
+const filteredList = ref<MesProProcessApi.Process[]>([]);
+const selectedItem = ref<MesProProcessApi.Process>();
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+function handleFilter(query: string) {
+  if (!query) {
+    filteredList.value = allList.value;
+    return;
+  }
+  const keyword = query.toLowerCase();
+  filteredList.value = allList.value.filter(
+    (item) =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.code?.toLowerCase().includes(keyword),
+  );
+}
+
+/** 根据当前值同步 tooltip 展示的工序详情 */
+function syncSelectedItem(value: number | undefined) {
+  selectedItem.value =
+    value === undefined ? undefined : allList.value.find((item) => item.id === value);
+}
+
+/** 除 v-model 外，额外抛出完整工序对象给业务表单使用 */
+function handleChange(value: number | undefined) {
+  syncSelectedItem(value);
+  emit('change', selectedItem.value);
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncSelectedItem(value);
+  },
+);
+
+onMounted(async () => {
+  allList.value = await getProcessSimpleList();
+  filteredList.value = allList.value;
+  syncSelectedItem(props.modelValue);
+});
+</script>
+
+<template>
+  <ElTooltip :disabled="!selectedItem" placement="top" :show-after="500">
+    <template #content>
+      <div v-if="selectedItem" class="leading-6">
+        <div>编码：{{ selectedItem.code || '-' }}</div>
+        <div>名称：{{ selectedItem.name || '-' }}</div>
+        <div>工艺要求：{{ selectedItem.attention || '-' }}</div>
+        <div>备注：{{ selectedItem.remark || '-' }}</div>
+      </div>
+    </template>
+    <ElSelect
+      v-bind="$attrs"
+      v-model="selectValue"
+      :clearable="clearable"
+      :disabled="disabled"
+      :filter-method="handleFilter"
+      :placeholder="placeholder"
+      class="w-full"
+      filterable
+      @change="handleChange"
+    >
+      <ElOption
+        v-for="item in filteredList"
+        :key="item.id"
+        :label="item.name"
+        :value="item.id"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ item.name }}</span>
+          <ElTag v-if="item.code" size="small" type="info">{{ item.code }}</ElTag>
+        </div>
+      </ElOption>
+    </ElSelect>
+  </ElTooltip>
+</template>
diff --git a/apps/web-ele/src/views/mes/utils/constants.ts b/apps/web-ele/src/views/mes/utils/constants.ts
new file mode 100644
index 000000000..bc7a2a5fe
--- /dev/null
+++ b/apps/web-ele/src/views/mes/utils/constants.ts
@@ -0,0 +1,67 @@
+/** MES 物料/产品标识枚举 */
+export const MesItemOrProductEnum = {
+  ITEM: {
+    label: '物料',
+    value: 'ITEM',
+  },
+  PRODUCT: {
+    label: '产品',
+    value: 'PRODUCT',
+  },
+} as const;
+
+/** MES 自动编码规则 Code 枚举 */
+export const MesAutoCodeRuleCode = {
+  MD_CLIENT_CODE: 'MD_CLIENT_CODE',
+  MD_ITEM_TYPE_CODE: 'MD_ITEM_TYPE_CODE',
+  MD_ITEM_CODE: 'MD_ITEM_CODE',
+  MD_VENDOR_CODE: 'MD_VENDOR_CODE',
+  MD_WORKSTATION_CODE: 'MD_WORKSTATION_CODE',
+  MD_WORKSHOP_CODE: 'MD_WORKSHOP_CODE',
+} as const;
+
+/** MES 编码规则分段类型枚举 */
+export const MesAutoCodePartTypeEnum = {
+  INPUT: 1,
+  DATE: 2,
+  FIX: 3,
+  SERIAL: 4,
+} as const;
+
+/** MES 条码格式枚举 */
+export enum BarcodeFormatEnum {
+  QR_CODE = 1,
+  EAN13 = 2,
+  CODE39 = 3,
+  UPC_A = 4,
+}
+
+/** 条码格式映射表（枚举值 -> JsBarcode 格式名） */
+export const BARCODE_FORMAT_MAP: Record<BarcodeFormatEnum, string> = {
+  [BarcodeFormatEnum.QR_CODE]: 'QR_CODE',
+  [BarcodeFormatEnum.EAN13]: 'EAN13',
+  [BarcodeFormatEnum.CODE39]: 'CODE39',
+  [BarcodeFormatEnum.UPC_A]: 'UPC_A',
+};
+
+/** MES 条码业务类型枚举 */
+export enum BarcodeBizTypeEnum {
+  WAREHOUSE = 102,
+  LOCATION = 103,
+  AREA = 104,
+  PACKAGE = 105,
+  STOCK = 106,
+  BATCH = 107,
+  PROCARD = 300,
+  WORKORDER = 301,
+  TRANSORDER = 302,
+  TASK = 303,
+  MACHINERY = 400,
+  TOOL = 500,
+  ITEM = 600,
+  VENDOR = 601,
+  WORKSTATION = 602,
+  WORKSHOP = 603,
+  USER = 604,
+  CLIENT = 605,
+}
diff --git a/apps/web-ele/src/views/mes/wm/barcode/components/barcode-detail.vue b/apps/web-ele/src/views/mes/wm/barcode/components/barcode-detail.vue
new file mode 100644
index 000000000..dff9d23c5
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/barcode/components/barcode-detail.vue
@@ -0,0 +1,175 @@
+<script lang="ts" setup>
+import type Barcode from './barcode.vue';
+
+import type { MesWmBarcodeApi } from '#/api/mes/wm/barcode';
+
+import { ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import {
+  ElButton,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDialog,
+  ElEmpty,
+  ElMessage,
+  ElTooltip,
+} from 'element-plus';
+
+import {
+  createBarcode,
+  getBarcodeByBusiness,
+} from '#/api/mes/wm/barcode';
+import { DictTag } from '#/components/dict-tag';
+
+import MesWmBarcode from './barcode.vue';
+
+defineOptions({ name: 'MesWmBarcodeDetail' });
+
+const open = ref(false);
+const barcodeRef = ref<InstanceType<typeof Barcode>>();
+const barcodeData = ref<Partial<MesWmBarcodeApi.Barcode>>({});
+
+function openModal(row: Partial<MesWmBarcodeApi.Barcode>) {
+  open.value = true;
+  barcodeData.value = { ...row };
+}
+
+async function openByBusiness(
+  bizId: number,
+  bizType: number,
+  bizCode?: string,
+  bizName?: string,
+) {
+  open.value = true;
+  try {
+    const data = await getBarcodeByBusiness(bizType, bizId);
+    barcodeData.value = data || { bizCode, bizId, bizName, bizType, content: '' };
+    if (!data) {
+      ElMessage.warning('未找到对应条码数据');
+    }
+  } catch {
+    barcodeData.value = { bizCode, bizId, bizName, bizType, content: '' };
+    ElMessage.error('加载条码数据失败');
+  }
+}
+
+defineExpose({ open: openModal, openByBusiness });
+
+function escapeHtml(value: string) {
+  return value.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+
+function handlePrint() {
+  const base64 = barcodeRef.value?.getImageBase64();
+  if (!base64) {
+    ElMessage.warning('条码生成失败，无法打印');
+    return;
+  }
+  const printWindow = window.open('', '_blank');
+  if (!printWindow) {
+    ElMessage.error('无法打开打印窗口，请检查浏览器设置');
+    return;
+  }
+  printWindow.document.write(`<!DOCTYPE html>
+<html><head><meta charset="UTF-8"><title>打印条码</title>
+<style>*{margin:0;padding:0}body{font-family:Arial,sans-serif;padding:20px}.print-container{text-align:center}.barcode-img{max-width:100%;margin:20px 0}.info{margin-top:20px;text-align:left;font-size:12px}.info p{margin:5px 0}@media print{body{padding:0}.print-container{padding:20px}}</style>
+</head><body><div class="print-container">
+<img src="${base64}" class="barcode-img" alt="条码" />
+<div class="info">
+<p><strong>业务编码:</strong> ${escapeHtml(barcodeData.value.bizCode || '')}</p>
+<p><strong>业务名称:</strong> ${escapeHtml(barcodeData.value.bizName || '')}</p>
+<p><strong>条码内容:</strong> ${escapeHtml(barcodeData.value.content || '')}</p>
+</div></div></body></html>`);
+  printWindow.document.close();
+  printWindow.addEventListener('load', () => {
+    setTimeout(() => printWindow.print(), 500);
+  });
+}
+
+function handleDownload() {
+  const base64 = barcodeRef.value?.getImageBase64();
+  if (!base64) {
+    ElMessage.warning('条码生成失败，无法下载');
+    return;
+  }
+  const link = document.createElement('a');
+  link.href = base64;
+  link.download = `barcode_${barcodeData.value.bizCode || 'unknown'}_${Date.now()}.png`;
+  link.click();
+  ElMessage.success('下载成功');
+}
+
+async function handleGenerate() {
+  const { bizCode, bizId, bizName, bizType } = barcodeData.value;
+  if (!bizType || !bizId) {
+    ElMessage.warning('缺少业务类型或业务编号，无法生成条码');
+    return;
+  }
+  await createBarcode({ bizCode: bizCode || '', bizId, bizName: bizName || '', bizType });
+  ElMessage.success('条码生成成功');
+  const data = await getBarcodeByBusiness(bizType, bizId);
+  if (data) {
+    barcodeData.value = { ...data };
+  }
+}
+</script>
+
+<template>
+  <ElDialog v-model="open" title="查看条码" width="500px">
+    <div>
+      <div class="mb-5 flex min-h-50 items-center justify-center rounded bg-gray-100 p-5">
+        <div v-if="barcodeData.content" class="flex items-center justify-center">
+          <MesWmBarcode
+            ref="barcodeRef"
+            :content="barcodeData.content"
+            :format="barcodeData.format"
+            :height="150"
+            :width="400"
+          />
+        </div>
+        <ElEmpty v-else description="暂无条码数据" />
+      </div>
+      <ElDescriptions :column="1" border>
+        <ElDescriptionsItem label="条码格式">
+          <DictTag
+            v-if="barcodeData.format"
+            :type="DICT_TYPE.MES_WM_BARCODE_FORMAT"
+            :value="barcodeData.format"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="业务类型">
+          <DictTag
+            v-if="barcodeData.bizType"
+            :type="DICT_TYPE.MES_WM_BARCODE_BIZ_TYPE"
+            :value="barcodeData.bizType"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="条码内容">
+          <ElTooltip :content="barcodeData.content" placement="top">
+            <span class="inline-block max-w-75 overflow-hidden text-ellipsis whitespace-nowrap">
+              {{ barcodeData.content }}
+            </span>
+          </ElTooltip>
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="业务编码">{{ barcodeData.bizCode || '-' }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="业务名称">{{ barcodeData.bizName || '-' }}</ElDescriptionsItem>
+        <ElDescriptionsItem label="状态">
+          <DictTag
+            v-if="barcodeData.status !== undefined"
+            :type="DICT_TYPE.COMMON_STATUS"
+            :value="barcodeData.status"
+          />
+        </ElDescriptionsItem>
+        <ElDescriptionsItem label="创建时间">{{ barcodeData.createTime || '-' }}</ElDescriptionsItem>
+      </ElDescriptions>
+    </div>
+    <template #footer>
+      <ElButton v-if="!barcodeData.content" @click="handleGenerate">生成</ElButton>
+      <ElButton type="primary" @click="handlePrint">打印</ElButton>
+      <ElButton @click="handleDownload">下载</ElButton>
+      <ElButton @click="open = false">关闭</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/barcode/components/barcode.vue b/apps/web-ele/src/views/mes/wm/barcode/components/barcode.vue
new file mode 100644
index 000000000..ab8f78649
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/barcode/components/barcode.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { BarcodeFormat } from '@vben/common-ui';
+
+import { computed, ref } from 'vue';
+
+import {
+  BarcodeFormatEnum,
+  Barcode as CommonBarcode,
+} from '@vben/common-ui';
+
+defineOptions({ name: 'MesWmBarcode' });
+
+const props = withDefaults(
+  defineProps<{
+    content?: string;
+    displayValue?: boolean;
+    format?: number;
+    height?: number;
+    width?: number;
+  }>(),
+  {
+    content: '',
+    displayValue: true,
+    format: BarcodeFormatEnum.QR_CODE,
+    height: 100,
+    width: 200,
+  },
+);
+
+const emit = defineEmits<{ done: [value: string] }>();
+
+const barcodeRef = ref<InstanceType<typeof CommonBarcode>>();
+const commonFormat = computed<BarcodeFormat>(
+  () => (props.format || BarcodeFormatEnum.QR_CODE) as BarcodeFormat,
+);
+
+function getImageBase64() {
+  return barcodeRef.value?.getImageBase64() || '';
+}
+
+defineExpose({ getImageBase64 });
+</script>
+
+<template>
+  <CommonBarcode
+    ref="barcodeRef"
+    :content="content"
+    :display-value="displayValue"
+    :format="commonFormat"
+    :height="height"
+    :width="width"
+    @done="emit('done', $event)"
+  />
+</template>
diff --git a/apps/web-ele/src/views/mes/wm/barcode/components/index.ts b/apps/web-ele/src/views/mes/wm/barcode/components/index.ts
new file mode 100644
index 000000000..87168be0a
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/barcode/components/index.ts
@@ -0,0 +1,3 @@
+export { default as BarcodeDetail } from './barcode-detail.vue';
+export { default as Barcode } from './barcode.vue';
+export { default as PrinterLabel } from './printer-label.vue';
diff --git a/apps/web-ele/src/views/mes/wm/barcode/components/printer-label.vue b/apps/web-ele/src/views/mes/wm/barcode/components/printer-label.vue
new file mode 100644
index 000000000..cfa892f01
--- /dev/null
+++ b/apps/web-ele/src/views/mes/wm/barcode/components/printer-label.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus';
+
+defineOptions({ name: 'MesWmPrinterLabel' });
+
+withDefaults(
+  defineProps<{
+    bizCode?: string;
+    bizId?: number;
+    bizType?: string;
+    labelText?: string;
+  }>(),
+  {
+    bizCode: undefined,
+    bizId: undefined,
+    bizType: undefined,
+    labelText: '标签打印',
+  },
+);
+
+function handlePrint() {
+  ElMessage.warning('标签打印功能暂未实现，敬请期待');
+}
+</script>
+
+<template>
+  <ElButton link type="primary" @click="handlePrint">
+    {{ labelText }}
+  </ElButton>
+</template>
diff --git a/apps/web-ele/src/views/wms/home/index.vue b/apps/web-ele/src/views/wms/home/index.vue
new file mode 100644
index 000000000..9541c02ea
--- /dev/null
+++ b/apps/web-ele/src/views/wms/home/index.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+import { formatDateTime } from '@vben/utils';
+
+import { ElButton, ElCard } from 'element-plus';
+
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+
+import WmsHomeInventoryCharts from './modules/wms-home-inventory-charts.vue';
+import WmsHomeOrderSummaryCards from './modules/wms-home-order-summary-cards.vue';
+import WmsHomeOrderTrendChart from './modules/wms-home-order-trend-chart.vue';
+
+defineOptions({ name: 'WmsHome' });
+
+const loading = ref(false);
+const warehouseId = ref<number>();
+const statTime = ref(formatDateTime(new Date()));
+const orderSummaryCardsRef = ref<InstanceType<typeof WmsHomeOrderSummaryCards>>();
+const orderTrendChartRef = ref<InstanceType<typeof WmsHomeOrderTrendChart>>();
+const inventoryChartsRef = ref<InstanceType<typeof WmsHomeInventoryCharts>>();
+
+async function refresh() {
+  loading.value = true;
+  try {
+    await Promise.all([
+      orderSummaryCardsRef.value?.load(warehouseId.value),
+      orderTrendChartRef.value?.load(warehouseId.value),
+      inventoryChartsRef.value?.load(warehouseId.value),
+    ]);
+    statTime.value = formatDateTime(new Date());
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  refresh();
+});
+</script>
+
+<template>
+  <Page>
+    <template #doc>
+      <DocAlert title="WMS 手册（功能开启）" url="https://doc.iocoder.cn/wms/build/" />
+    </template>
+    <div class="flex flex-col gap-2">
+      <ElCard :body-style="{ padding: '16px' }">
+        <div class="flex flex-wrap items-center justify-between gap-4">
+          <div>
+            <div class="text-xl font-semibold">WMS 首页</div>
+            <div class="text-sm text-muted-foreground">单据工作台 / 库存概览</div>
+          </div>
+          <div class="flex items-center gap-2">
+            <WmsWarehouseSelect
+              v-model="warehouseId"
+              class="!w-[220px]"
+              placeholder="全部仓库"
+              @change="refresh"
+            />
+            <ElButton :loading="loading" @click="refresh">刷新</ElButton>
+          </div>
+        </div>
+      </ElCard>
+      <WmsHomeOrderSummaryCards ref="orderSummaryCardsRef" />
+      <WmsHomeOrderTrendChart ref="orderTrendChartRef" />
+      <WmsHomeInventoryCharts ref="inventoryChartsRef" />
+      <div class="text-center text-sm text-muted-foreground">
+        统计时间：{{ statTime }}
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/home/modules/wms-home-inventory-chart-options.ts b/apps/web-ele/src/views/wms/home/modules/wms-home-inventory-chart-options.ts
new file mode 100644
index 000000000..ce4ac4555
--- /dev/null
+++ b/apps/web-ele/src/views/wms/home/modules/wms-home-inventory-chart-options.ts
@@ -0,0 +1,120 @@
+import type { useEcharts } from '@vben/plugins/echarts';
+
+import type { WmsHomeStatisticsApi } from '#/api/wms/home';
+
+import { formatQuantity } from '#/views/wms/utils/format';
+
+type WmsHomeChartOption = Parameters<
+  ReturnType<typeof useEcharts>['renderEcharts']
+>[0];
+
+export interface InventoryChartItem {
+  name: string;
+  value: number;
+}
+
+/** 格式化库存数量展示文本 */
+export function formatQuantityText(value?: number) {
+  return formatQuantity(value || 0) || '0.00';
+}
+
+/** 转换库存排行接口数据为 ECharts 可消费的 name/value 数据 */
+export function buildInventoryChartItemList(
+  list: undefined | WmsHomeStatisticsApi.InventoryRankItem[],
+  emptyName: string,
+) {
+  return (list || [])
+    .map((item) => ({
+      name: item.name || emptyName,
+      value: Number(item.quantity || 0),
+    }))
+    .filter((item) => item.value > 0);
+}
+
+/** 格式化货物占比图例，补充当前商品库存占比 */
+function formatGoodsLegend(name: string, goodsShareList: InventoryChartItem[]) {
+  const total = goodsShareList.reduce((sum, item) => sum + item.value, 0);
+  const item = goodsShareList.find((goods) => goods.name === name);
+  if (!total || !item) {
+    return name;
+  }
+  return `${name}  ${((item.value / total) * 100).toFixed(1)}%`;
+}
+
+/** 货物占比图表配置 */
+export function getGoodsShareChartOptions(
+  goodsShareList: InventoryChartItem[],
+): WmsHomeChartOption {
+  return {
+    color: ['#2f7df6', '#18a058', '#f59e0b', '#7c3aed', '#14b8a6'],
+    legend: {
+      formatter: (name: string) => formatGoodsLegend(name, goodsShareList),
+      itemHeight: 10,
+      itemWidth: 10,
+      orient: 'vertical',
+      right: 10,
+      top: 'middle',
+      type: 'scroll',
+    },
+    series: [
+      {
+        avoidLabelOverlap: true,
+        center: ['34%', '52%'],
+        data: goodsShareList,
+        label: { show: false },
+        labelLine: { show: false },
+        name: '货物占比',
+        radius: ['48%', '70%'],
+        type: 'pie',
+      },
+    ],
+    tooltip: {
+      formatter: '{b}<br/>库存：{c} ({d}%)',
+      trigger: 'item',
+    },
+  };
+}
+
+/** 库存分布图表配置 */
+export function getWarehouseDistributionChartOptions(
+  warehouseDistributionList: InventoryChartItem[],
+): WmsHomeChartOption {
+  const sortedList = warehouseDistributionList.toReversed();
+  return {
+    color: ['#2f7df6'],
+    grid: { bottom: 16, containLabel: true, left: 24, right: 40, top: 12 },
+    series: [
+      {
+        barMaxWidth: 16,
+        data: sortedList.map((item) => item.value),
+        label: {
+          formatter: ({ value }) => formatQuantityText(Number(value || 0)),
+          position: 'right',
+          show: true,
+        },
+        name: '库存',
+        type: 'bar',
+      },
+    ],
+    tooltip: {
+      formatter: (params: unknown) => {
+        const item = (Array.isArray(params) ? params[0] : params) as {
+          name?: string;
+          value?: number;
+        };
+        return `${item.name || '-'}<br/>库存：${formatQuantityText(item.value)}`;
+      },
+      trigger: 'axis',
+    },
+    xAxis: {
+      splitLine: { lineStyle: { color: '#eef2f7' } },
+      type: 'value',
+    },
+    yAxis: {
+      axisLine: { show: false },
+      axisTick: { show: false },
+      data: sortedList.map((item) => item.name),
+      type: 'category',
+    },
+  };
+}
diff --git a/apps/web-ele/src/views/wms/home/modules/wms-home-inventory-charts.vue b/apps/web-ele/src/views/wms/home/modules/wms-home-inventory-charts.vue
new file mode 100644
index 000000000..d81177be8
--- /dev/null
+++ b/apps/web-ele/src/views/wms/home/modules/wms-home-inventory-charts.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { nextTick, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { ElCard } from 'element-plus';
+
+import { getInventorySummary } from '#/api/wms/home';
+
+import {
+  buildInventoryChartItemList,
+  formatQuantityText,
+  getGoodsShareChartOptions,
+  getWarehouseDistributionChartOptions,
+  type InventoryChartItem,
+} from './wms-home-inventory-chart-options';
+
+defineOptions({ name: 'WmsHomeInventoryCharts' });
+
+const GOODS_SHARE_LIMIT = 5;
+const WAREHOUSE_DISTRIBUTION_LIMIT = 8;
+
+const loading = ref(false);
+const totalQuantity = ref(0);
+const goodsShareList = ref<InventoryChartItem[]>([]);
+const warehouseDistributionList = ref<InventoryChartItem[]>([]);
+const goodsShareChartRef = ref<EchartsUIType>();
+const warehouseDistributionChartRef = ref<EchartsUIType>();
+const { renderEcharts: renderGoodsShareEcharts } = useEcharts(goodsShareChartRef);
+const { renderEcharts: renderWarehouseDistributionEcharts } = useEcharts(
+  warehouseDistributionChartRef,
+);
+
+/** 使用最新库存汇总数据渲染首页库存图表 */
+async function renderCharts() {
+  await nextTick();
+  await Promise.all([
+    renderGoodsShareEcharts(getGoodsShareChartOptions(goodsShareList.value)),
+    renderWarehouseDistributionEcharts(
+      getWarehouseDistributionChartOptions(warehouseDistributionList.value),
+    ),
+  ]);
+}
+
+/** 加载指定仓库的库存汇总和排行数据 */
+async function load(warehouseId?: number) {
+  loading.value = true;
+  try {
+    const data = await getInventorySummary({
+      ...(warehouseId ? { warehouseId } : {}),
+      goodsLimit: GOODS_SHARE_LIMIT,
+      warehouseLimit: WAREHOUSE_DISTRIBUTION_LIMIT,
+    });
+    totalQuantity.value = Number(data.totalQuantity || 0);
+    goodsShareList.value = buildInventoryChartItemList(data.goodsShareList, '未命名商品');
+    warehouseDistributionList.value = buildInventoryChartItemList(
+      data.warehouseDistributionList,
+      '未指定仓库',
+    );
+    await renderCharts();
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({ load });
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-4 max-lg:grid-cols-1">
+    <ElCard :body-style="{ padding: '12px 16px 16px' }">
+      <div class="mb-3">
+        <div class="font-semibold">货物占比</div>
+        <div class="text-sm text-muted-foreground">按商品库存数量汇总 Top 5</div>
+      </div>
+      <div class="relative min-h-[300px]">
+        <EchartsUI ref="goodsShareChartRef" height="300px" />
+        <div
+          v-if="loading"
+          class="absolute inset-0 flex items-center justify-center bg-card/70 text-sm text-muted-foreground"
+        >
+          加载中
+        </div>
+      </div>
+    </ElCard>
+    <ElCard :body-style="{ padding: '12px 16px 16px' }">
+      <div class="mb-3 flex justify-between">
+        <div>
+          <div class="font-semibold">库存分布</div>
+          <div class="text-sm text-muted-foreground">按仓库库存数量汇总</div>
+        </div>
+        <span class="font-semibold">总库存 {{ formatQuantityText(totalQuantity) }}</span>
+      </div>
+      <div class="relative min-h-[300px]">
+        <EchartsUI ref="warehouseDistributionChartRef" height="300px" />
+        <div
+          v-if="loading"
+          class="absolute inset-0 flex items-center justify-center bg-card/70 text-sm text-muted-foreground"
+        >
+          加载中
+        </div>
+      </div>
+    </ElCard>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/wms/home/modules/wms-home-order-summary-cards.vue b/apps/web-ele/src/views/wms/home/modules/wms-home-order-summary-cards.vue
new file mode 100644
index 000000000..f50689781
--- /dev/null
+++ b/apps/web-ele/src/views/wms/home/modules/wms-home-order-summary-cards.vue
@@ -0,0 +1,176 @@
+<script lang="ts" setup>
+import type { WmsHomeStatisticsApi } from '#/api/wms/home';
+
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+
+import { ElButton, ElCard, ElMessage, ElSkeleton } from 'element-plus';
+
+import { getOrderSummary } from '#/api/wms/home';
+import { OrderStatusEnum, OrderTypeEnum } from '#/views/wms/utils/constants';
+
+defineOptions({ name: 'WmsHomeOrderSummaryCards' });
+
+interface StatusItem {
+  color: string;
+  label: string;
+  value: number;
+}
+
+interface OrderSummaryItem {
+  color: string;
+  routeName: string;
+  statuses?: WmsHomeStatisticsApi.OrderStatus[];
+  title: string;
+  total?: number;
+  type: number;
+}
+
+const router = useRouter();
+
+const orderDefinitions: OrderSummaryItem[] = [
+  {
+    color: '#2f7df6',
+    routeName: 'WmsReceiptOrder',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.RECEIPT).replace(/单$/, ''),
+    type: OrderTypeEnum.RECEIPT,
+  },
+  {
+    color: '#18a058',
+    routeName: 'WmsShipmentOrder',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.SHIPMENT).replace(/单$/, ''),
+    type: OrderTypeEnum.SHIPMENT,
+  },
+  {
+    color: '#f59e0b',
+    routeName: 'WmsMovementOrder',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.MOVEMENT).replace(/单$/, ''),
+    type: OrderTypeEnum.MOVEMENT,
+  },
+  {
+    color: '#7c3aed',
+    routeName: 'WmsCheckOrder',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.CHECK).replace(/单$/, ''),
+    type: OrderTypeEnum.CHECK,
+  },
+];
+
+const statusList: StatusItem[] = [
+  {
+    color: '#409eff',
+    label: getDictLabel(DICT_TYPE.WMS_ORDER_STATUS, OrderStatusEnum.PREPARE) || '草稿',
+    value: OrderStatusEnum.PREPARE,
+  },
+  {
+    color: '#67c23a',
+    label: getDictLabel(DICT_TYPE.WMS_ORDER_STATUS, OrderStatusEnum.FINISHED) || '已完成',
+    value: OrderStatusEnum.FINISHED,
+  },
+  {
+    color: '#909399',
+    label: getDictLabel(DICT_TYPE.WMS_ORDER_STATUS, OrderStatusEnum.CANCELED) || '已作废',
+    value: OrderStatusEnum.CANCELED,
+  },
+];
+
+const loading = ref(false);
+const summaryList = ref<OrderSummaryItem[]>(orderDefinitions);
+
+function getStatusCount(item: OrderSummaryItem, status: number) {
+  return item.statuses?.find((row) => row.status === status)?.count ?? 0;
+}
+
+function getStatusPercent(item: OrderSummaryItem, status: number) {
+  const total = item.total ?? 0;
+  if (total <= 0) {
+    return '0%';
+  }
+  return `${(getStatusCount(item, status) / total) * 100}%`;
+}
+
+async function handleNavigate(routeName: string) {
+  try {
+    await router.push({ name: routeName });
+  } catch {
+    ElMessage.warning('当前菜单尚未加载，请从左侧菜单进入对应页面');
+  }
+}
+
+async function load(warehouseId?: number) {
+  loading.value = true;
+  try {
+    const data = await getOrderSummary(warehouseId ? { warehouseId } : {});
+    summaryList.value = orderDefinitions.map((definition) => {
+      const summary = data.find((item) => item.type === definition.type);
+      return {
+        ...definition,
+        statuses: summary?.statuses,
+        total: summary?.total,
+      };
+    });
+  } finally {
+    loading.value = false;
+  }
+}
+
+defineExpose({ load });
+</script>
+
+<template>
+  <div class="grid grid-cols-4 gap-4 max-xl:grid-cols-2 max-sm:grid-cols-1">
+    <ElCard
+      v-for="item in summaryList"
+      :key="item.type"
+      :body-style="{ padding: '12px 16px 16px' }"
+      class="h-full"
+      shadow="never"
+      :style="{ borderTop: `3px solid ${item.color}` }"
+    >
+      <ElSkeleton :loading="loading" animated :rows="4">
+        <template #default>
+          <div class="mb-3 flex items-center justify-between">
+            <div class="flex items-center gap-2 font-semibold">
+              <span
+                class="h-2 w-2 rounded-full"
+                :style="{ backgroundColor: item.color }"
+              ></span>
+              {{ item.title }}
+            </div>
+            <ElButton link type="primary" @click="handleNavigate(item.routeName)">
+              查看
+            </ElButton>
+          </div>
+          <div class="mb-1 flex items-baseline gap-2">
+            <span class="text-muted-foreground">合计</span>
+            <span class="text-3xl font-bold leading-9">
+              {{ item.total?.toLocaleString() ?? 0 }}
+            </span>
+            <span class="text-muted-foreground">单</span>
+          </div>
+          <div class="my-3 flex h-2 overflow-hidden rounded-full bg-muted">
+            <span
+              v-for="status in statusList"
+              :key="status.value"
+              class="h-full"
+              :style="{
+                backgroundColor: status.color,
+                width: getStatusPercent(item, status.value),
+              }"
+            ></span>
+          </div>
+          <div class="grid grid-cols-3 gap-2 text-sm">
+            <div v-for="status in statusList" :key="status.value">
+              <div class="truncate text-muted-foreground">{{ status.label }}</div>
+              <div class="font-semibold" :style="{ color: status.color }">
+                {{ getStatusCount(item, status.value).toLocaleString() }}
+              </div>
+            </div>
+          </div>
+        </template>
+      </ElSkeleton>
+    </ElCard>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/wms/home/modules/wms-home-order-trend-chart-options.ts b/apps/web-ele/src/views/wms/home/modules/wms-home-order-trend-chart-options.ts
new file mode 100644
index 000000000..c08df0b9f
--- /dev/null
+++ b/apps/web-ele/src/views/wms/home/modules/wms-home-order-trend-chart-options.ts
@@ -0,0 +1,88 @@
+import type { useEcharts } from '@vben/plugins/echarts';
+
+import type { WmsHomeStatisticsApi } from '#/api/wms/home';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate } from '@vben/utils';
+
+import { OrderTypeEnum } from '#/views/wms/utils/constants';
+
+type WmsHomeChartOption = Parameters<
+  ReturnType<typeof useEcharts>['renderEcharts']
+>[0];
+
+interface OrderDefinition {
+  color: string;
+  title: string;
+  trendField: keyof Pick<
+    WmsHomeStatisticsApi.OrderTrend,
+    'checkCount' | 'movementCount' | 'receiptCount' | 'shipmentCount'
+  >;
+  type: number;
+}
+
+const orderDefinitions: OrderDefinition[] = [
+  {
+    color: '#2f7df6',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.RECEIPT).replace(/单$/, ''),
+    trendField: 'receiptCount',
+    type: OrderTypeEnum.RECEIPT,
+  },
+  {
+    color: '#18a058',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.SHIPMENT).replace(/单$/, ''),
+    trendField: 'shipmentCount',
+    type: OrderTypeEnum.SHIPMENT,
+  },
+  {
+    color: '#f59e0b',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.MOVEMENT).replace(/单$/, ''),
+    trendField: 'movementCount',
+    type: OrderTypeEnum.MOVEMENT,
+  },
+  {
+    color: '#7c3aed',
+    title: getDictLabel(DICT_TYPE.WMS_ORDER_TYPE, OrderTypeEnum.CHECK).replace(/单$/, ''),
+    trendField: 'checkCount',
+    type: OrderTypeEnum.CHECK,
+  },
+];
+
+/** 格式化趋势接口返回的时间戳为图表横轴日期 */
+function formatTrendTime(time: number | string) {
+  const date = new Date(time);
+  return Number.isNaN(date.getTime()) ? `${time}` : (formatDate(date, 'MM-DD') as string);
+}
+
+/** 单据趋势图表配置 */
+export function getOrderTrendChartOptions(
+  list: WmsHomeStatisticsApi.OrderTrend[],
+): WmsHomeChartOption {
+  const labels = list.map((item) => formatTrendTime(item.time));
+  return {
+    color: orderDefinitions.map((item) => item.color),
+    grid: { bottom: 24, containLabel: true, left: 28, right: 24, top: 48 },
+    legend: { itemHeight: 10, itemWidth: 10, top: 6 },
+    series: orderDefinitions.map((item) => ({
+      barMaxWidth: 18,
+      data: list.map((row) => Number(row[item.trendField] || 0)),
+      emphasis: { focus: 'series' },
+      name: item.title,
+      type: 'bar',
+    })),
+    tooltip: { axisPointer: { type: 'shadow' }, trigger: 'axis' },
+    xAxis: {
+      axisLine: { lineStyle: { color: '#dcdfe6' } },
+      axisTick: { show: false },
+      data: labels,
+      type: 'category',
+    },
+    yAxis: {
+      minInterval: 1,
+      name: '单据数',
+      splitLine: { lineStyle: { color: '#eef2f7' } },
+      type: 'value',
+    },
+  };
+}
diff --git a/apps/web-ele/src/views/wms/home/modules/wms-home-order-trend-chart.vue b/apps/web-ele/src/views/wms/home/modules/wms-home-order-trend-chart.vue
new file mode 100644
index 000000000..535bdd103
--- /dev/null
+++ b/apps/web-ele/src/views/wms/home/modules/wms-home-order-trend-chart.vue
@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+import type { EchartsUIType } from '@vben/plugins/echarts';
+
+import { nextTick, ref } from 'vue';
+
+import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
+
+import { ElCard, ElSegmented } from 'element-plus';
+
+import { getOrderTrend, type WmsHomeStatisticsApi } from '#/api/wms/home';
+
+import { getOrderTrendChartOptions } from './wms-home-order-trend-chart-options';
+
+defineOptions({ name: 'WmsHomeOrderTrendChart' });
+
+const loading = ref(false);
+const warehouseId = ref<number>();
+const trendDays = ref(7);
+const trendList = ref<WmsHomeStatisticsApi.OrderTrend[]>([]);
+const chartRef = ref<EchartsUIType>();
+const { renderEcharts } = useEcharts(chartRef);
+const trendDayOptions = [
+  { label: '近7天', value: 7 },
+  { label: '近30天', value: 30 },
+];
+
+/** 使用最新趋势数据渲染单据趋势图 */
+async function renderChart() {
+  await nextTick();
+  await renderEcharts(getOrderTrendChartOptions(trendList.value));
+}
+
+/** 加载指定仓库的单据趋势数据 */
+async function load(selectedWarehouseId?: number) {
+  warehouseId.value = selectedWarehouseId;
+  loading.value = true;
+  try {
+    trendList.value = await getOrderTrend(
+      trendDays.value,
+      selectedWarehouseId ? { warehouseId: selectedWarehouseId } : {},
+    );
+    await renderChart();
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 切换趋势统计时间范围并刷新图表 */
+async function handleTrendDaysChange(value: number | string) {
+  trendDays.value = Number(value);
+  await load(warehouseId.value);
+}
+
+defineExpose({ load });
+</script>
+
+<template>
+  <ElCard :body-style="{ padding: '12px 16px 16px' }">
+    <div class="mb-3 flex items-center justify-between">
+      <div>
+        <div class="font-semibold">单据趋势</div>
+        <div class="text-sm text-muted-foreground">入库、出库、移库、盘库单据数量</div>
+      </div>
+      <ElSegmented
+        :model-value="trendDays"
+        :options="trendDayOptions"
+        @change="handleTrendDaysChange"
+      />
+    </div>
+    <div class="relative min-h-[330px]">
+      <EchartsUI ref="chartRef" height="330px" />
+      <div
+        v-if="loading"
+        class="absolute inset-0 flex items-center justify-center bg-card/70 text-sm text-muted-foreground"
+      >
+        加载中
+      </div>
+    </div>
+  </ElCard>
+</template>
diff --git a/apps/web-ele/src/views/wms/inventory/components/index.ts b/apps/web-ele/src/views/wms/inventory/components/index.ts
new file mode 100644
index 000000000..31806be2a
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsInventorySelect } from './inventory-select.vue';
diff --git a/apps/web-ele/src/views/wms/inventory/components/inventory-select.vue b/apps/web-ele/src/views/wms/inventory/components/inventory-select.vue
new file mode 100644
index 000000000..390e5c85e
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/components/inventory-select.vue
@@ -0,0 +1,212 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+
+import { nextTick, ref } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryPage } from '#/api/wms/inventory';
+import { formatQuantity } from '#/views/wms/utils/format';
+
+import {
+  useInventorySelectGridColumns,
+  useInventorySelectGridFormSchema,
+} from '../index/data';
+
+export interface InventorySelectRow extends WmsInventoryApi.Inventory {
+  availableQuantity?: number;
+  price?: number;
+}
+
+defineOptions({ name: 'WmsInventorySelect' });
+
+const props = defineProps<{
+  warehouseId?: number;
+}>();
+
+const emit = defineEmits<{
+  change: [list: InventorySelectRow[]];
+}>();
+
+const open = ref(false);
+const disabledInventoryKeys = ref<Set<string>>(new Set());
+
+interface CellDblclickEvent {
+  row: InventorySelectRow;
+}
+
+/** 获得行唯一标识 */
+function getRowKey(row: InventorySelectRow) {
+  return `inventory-${row.id || `${row.skuId}-${row.warehouseId}`}`;
+}
+
+/** 获得业务库存标识 */
+function getInventoryKey(row: Pick<InventorySelectRow, 'skuId' | 'warehouseId'>) {
+  return row.skuId && row.warehouseId
+    ? `${row.skuId}-${row.warehouseId}`
+    : undefined;
+}
+
+/** 判断库存是否可选 */
+function isInventorySelectable(row: InventorySelectRow) {
+  const key = getInventoryKey(row);
+  return !key || !disabledInventoryKeys.value.has(key);
+}
+
+/** 合并当前页和跨页保留的选择记录 */
+function mergeSelectedRows(rows: InventorySelectRow[]) {
+  const selectedMap = new Map<string, InventorySelectRow>();
+  rows
+    .filter((row) => isInventorySelectable(row))
+    .forEach((row) => selectedMap.set(getRowKey(row), row));
+  return [...selectedMap.values()];
+}
+
+/** 获取 VXE 当前页和 reserve 中的完整选择 */
+function getSelectedRows() {
+  const records =
+    (gridApi.grid.getCheckboxRecords?.() as InventorySelectRow[] | undefined) ||
+    [];
+  const reserves =
+    (gridApi.grid.getCheckboxReserveRecords?.() as
+      | InventorySelectRow[]
+      | undefined) || [];
+  return mergeSelectedRows([...reserves, ...records]);
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useInventorySelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useInventorySelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    showOverflow: false,
+    checkboxConfig: {
+      checkMethod: ({ row }: { row: InventorySelectRow }) =>
+        isInventorySelectable(row),
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getInventoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: 'warehouse',
+            warehouseId: props.warehouseId,
+            onlyPositiveQuantity: true,
+            ...formValues,
+          });
+          return {
+            ...data,
+            list: (data.list || []).map((inventory) => ({
+              ...inventory,
+              availableQuantity: inventory.quantity,
+            })),
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InventorySelectRow>,
+  gridEvents: {
+    cellDblclick: handleCellDblclick,
+  },
+});
+
+async function openModal(selectedInventoryKeys: string[] = []) {
+  if (!props.warehouseId) {
+    ElMessage.warning('请先选择仓库');
+    return;
+  }
+  open.value = true;
+  disabledInventoryKeys.value = new Set(selectedInventoryKeys);
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+  await gridApi.formApi.resetForm();
+  await gridApi.query();
+}
+
+async function closeModal() {
+  open.value = false;
+  disabledInventoryKeys.value = new Set();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearCheckboxReserve();
+}
+
+function confirmSelectedRows(rows: InventorySelectRow[]) {
+  const selectedList = mergeSelectedRows(rows);
+  if (selectedList.length === 0) {
+    ElMessage.warning('请选择库存');
+    return;
+  }
+  emit('change', selectedList);
+  closeModal();
+}
+
+function handleConfirm() {
+  confirmSelectedRows(getSelectedRows());
+}
+
+/** 双击行直接选择并确认 */
+function handleCellDblclick({ row }: CellDblclickEvent) {
+  if (!isInventorySelectable(row)) {
+    ElMessage.warning('该库存已添加');
+    return;
+  }
+  confirmSelectedRows(mergeSelectedRows([...getSelectedRows(), row]));
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    title="库存选择"
+    width="80%"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    @close="closeModal"
+  >
+    <Grid table-title="库存列表">
+      <template #itemInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div>{{ row.itemName || '-' }}</div>
+          <div v-if="row.itemCode" class="text-xs text-gray-500">
+            商品编号：{{ row.itemCode }}
+          </div>
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div>{{ row.skuName || '-' }}</div>
+          <div v-if="row.skuCode" class="text-xs text-gray-500">
+            规格编号：{{ row.skuCode }}
+          </div>
+        </div>
+      </template>
+      <template #availableQuantity="{ row }">
+        {{ formatQuantity(row.availableQuantity) }}
+      </template>
+    </Grid>
+    <template #footer>
+      <ElButton @click="closeModal">取 消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确 定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/wms/inventory/history/data.ts b/apps/web-ele/src/views/wms/inventory/history/data.ts
new file mode 100644
index 000000000..9ee6b4731
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/history/data.ts
@@ -0,0 +1,159 @@
+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 { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
+import { getRangePickerDefaultProps } from '#/utils';
+
+/** 搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'orderType',
+      label: '单据类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_TYPE, 'number'),
+        placeholder: '请选择单据类型',
+      },
+    },
+    {
+      fieldName: 'orderNo',
+      label: '单据号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入单据号',
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getWarehouseSimpleList,
+        clearable: true,
+        filterable: true,
+        labelField: 'name',
+        placeholder: '请选择仓库',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '操作时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 库存流水列表字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'orderNo',
+      title: '单据号',
+      width: 180,
+      fixed: 'left',
+    },
+    {
+      field: 'orderType',
+      title: '单据类型',
+      width: 110,
+      fixed: 'left',
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_TYPE },
+      },
+    },
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 220,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      minWidth: 160,
+    },
+    {
+      field: 'beforeQuantity',
+      title: '操作前',
+      align: 'right',
+      minWidth: 110,
+      slots: { default: 'beforeQuantity' },
+    },
+    {
+      field: 'afterQuantity',
+      title: '操作后',
+      align: 'right',
+      minWidth: 110,
+      slots: { default: 'afterQuantity' },
+    },
+    {
+      field: 'quantityPrice',
+      title: '数量/金额(元)',
+      minWidth: 180,
+      slots: { default: 'quantityPrice' },
+    },
+    {
+      field: 'createTime',
+      title: '操作时间',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      formatter: 'formatDateTime',
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/inventory/history/index.vue b/apps/web-ele/src/views/wms/inventory/history/index.vue
new file mode 100644
index 000000000..bdb911c05
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/history/index.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryHistoryApi } from '#/api/wms/inventory/history';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryHistoryPage } from '#/api/wms/inventory/history';
+import { formatPrice, formatQuantity } from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+defineOptions({ name: 'WmsInventoryHistory' });
+
+function hasValue(value: unknown) {
+  return value !== undefined && value !== null;
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    showOverflow: false,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getInventoryHistoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsInventoryHistoryApi.InventoryHistory>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】库存记录、流水、统计"
+        url="https://doc.iocoder.cn/wms/inventory/"
+      />
+    </template>
+
+    <Grid table-title="库存流水">
+      <template #itemInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div class="text-sm">{{ row.itemName || '-' }}</div>
+          <div v-if="row.itemCode" class="break-all text-xs text-gray-500">
+            商品编号：{{ row.itemCode }}
+          </div>
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div class="text-sm">{{ row.skuName || '-' }}</div>
+          <div v-if="row.skuCode" class="break-all text-xs text-gray-500">
+            规格编号：{{ row.skuCode }}
+          </div>
+        </div>
+      </template>
+      <template #beforeQuantity="{ row }">
+        {{ formatQuantity(row.beforeQuantity) || '-' }}
+      </template>
+      <template #afterQuantity="{ row }">
+        {{ formatQuantity(row.afterQuantity) || '-' }}
+      </template>
+      <template #quantityPrice="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div class="flex justify-between gap-2">
+            <span class="shrink-0">数量：</span>
+            <span>{{ formatQuantity(row.quantity) }}</span>
+          </div>
+          <div v-if="hasValue(row.price)" class="flex justify-between gap-2">
+            <span class="shrink-0">单价：</span>
+            <span>{{ formatPrice(row.price) }}</span>
+          </div>
+          <div
+            v-if="hasValue(row.totalPrice)"
+            class="flex justify-between gap-2"
+          >
+            <span class="shrink-0">金额：</span>
+            <span>{{ formatPrice(row.totalPrice) }}</span>
+          </div>
+        </div>
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/inventory/index/data.ts b/apps/web-ele/src/views/wms/inventory/index/data.ts
new file mode 100644
index 000000000..124051866
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/index/data.ts
@@ -0,0 +1,247 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
+
+export const INVENTORY_DIMENSION = {
+  ITEM: 'item',
+  WAREHOUSE: 'warehouse',
+} as const;
+
+export type InventoryDimension =
+  (typeof INVENTORY_DIMENSION)[keyof typeof INVENTORY_DIMENSION];
+
+const dimensionOptions = [
+  { label: '仓库', value: INVENTORY_DIMENSION.WAREHOUSE },
+  { label: '商品', value: INVENTORY_DIMENSION.ITEM },
+];
+
+interface DimensionChangeEvent {
+  target?: {
+    value?: InventoryDimension;
+  };
+}
+
+type DimensionChangeHandler = (
+  dimension: InventoryDimension,
+) => Promise<void> | void;
+
+/** 统一解析 ele 原始值和兼容事件对象 */
+function getDimensionChangeValue(
+  value?: DimensionChangeEvent | InventoryDimension,
+): InventoryDimension {
+  if (
+    value === INVENTORY_DIMENSION.ITEM ||
+    value === INVENTORY_DIMENSION.WAREHOUSE
+  ) {
+    return value;
+  }
+  return value?.target?.value ?? INVENTORY_DIMENSION.WAREHOUSE;
+}
+
+/** 搜索表单 */
+export function useGridFormSchema(
+  onDimensionChange: DimensionChangeHandler,
+): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'type',
+      label: '统计维度',
+      component: 'RadioGroup',
+      defaultValue: INVENTORY_DIMENSION.WAREHOUSE,
+      componentProps: {
+        options: dimensionOptions,
+        onChange: (value: DimensionChangeEvent | InventoryDimension) => {
+          void onDimensionChange(getDimensionChangeValue(value));
+        },
+      },
+    },
+    {
+      fieldName: 'warehouseId',
+      label: '仓库',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getWarehouseSimpleList,
+        clearable: true,
+        filterable: true,
+        labelField: 'name',
+        placeholder: '请选择仓库',
+        valueField: 'id',
+      },
+    },
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+  ];
+}
+
+const warehouseDimensionColumns: VxeTableGridOptions['columns'] = [
+  {
+    field: 'warehouseId',
+    title: '仓库',
+    minWidth: 160,
+    slots: { default: 'warehouseName' },
+  },
+  {
+    field: 'warehouseItemId',
+    title: '商品信息',
+    minWidth: 240,
+    slots: { default: 'itemInfo' },
+  },
+  {
+    field: 'skuId',
+    title: '规格信息',
+    minWidth: 220,
+    slots: { default: 'skuInfo' },
+  },
+  {
+    field: 'quantity',
+    title: '库存',
+    align: 'right',
+    minWidth: 130,
+    slots: { default: 'quantity' },
+  },
+];
+
+const itemDimensionColumns: VxeTableGridOptions['columns'] = [
+  {
+    field: 'itemId',
+    title: '商品信息',
+    minWidth: 240,
+    slots: { default: 'itemInfo' },
+  },
+  {
+    field: 'skuId',
+    title: '规格信息',
+    minWidth: 220,
+    slots: { default: 'skuInfo' },
+  },
+  {
+    field: 'skuWarehouseId',
+    title: '仓库',
+    minWidth: 160,
+    slots: { default: 'warehouseName' },
+  },
+  {
+    field: 'quantity',
+    title: '库存',
+    align: 'right',
+    minWidth: 130,
+    slots: { default: 'quantity' },
+  },
+];
+
+/** 库存统计列表字段 */
+export function useGridColumns(
+  dimension: InventoryDimension = INVENTORY_DIMENSION.WAREHOUSE,
+): VxeTableGridOptions['columns'] {
+  return dimension === INVENTORY_DIMENSION.ITEM
+    ? itemDimensionColumns
+    : warehouseDimensionColumns;
+}
+
+/** 库存选择弹窗搜索表单 */
+export function useInventorySelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'skuName',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'skuCode',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+  ];
+}
+
+/** 库存选择弹窗列表字段 */
+export function useInventorySelectGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 220,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'warehouseName',
+      title: '仓库',
+      minWidth: 180,
+    },
+    {
+      field: 'availableQuantity',
+      title: '可用库存',
+      align: 'right',
+      width: 130,
+      slots: { default: 'availableQuantity' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/inventory/index/index.vue b/apps/web-ele/src/views/wms/inventory/index/index.vue
new file mode 100644
index 000000000..79d70d975
--- /dev/null
+++ b/apps/web-ele/src/views/wms/inventory/index/index.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page } from '@vben/common-ui';
+
+import { ElCheckbox } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getInventoryPage } from '#/api/wms/inventory';
+import { formatQuantity } from '#/views/wms/utils/format';
+
+import {
+  INVENTORY_DIMENSION,
+  type InventoryDimension,
+  useGridColumns,
+  useGridFormSchema,
+} from './data';
+
+interface InventoryRow extends WmsInventoryApi.Inventory {
+  skuWarehouseId?: string;
+  warehouseItemId?: string;
+}
+
+defineOptions({ name: 'WmsInventory' });
+
+const currentRows = ref<InventoryRow[]>([]);
+const currentDimension = ref<InventoryDimension>(INVENTORY_DIMENSION.WAREHOUSE);
+const filterZero = ref(false);
+
+/** 补充合并单元格需要的复合 key */
+function buildRows(items: WmsInventoryApi.Inventory[]) {
+  return items.map((item) => ({
+    ...item,
+    skuWarehouseId: `${item.skuId || 0}-${item.warehouseId || 0}`,
+    warehouseItemId: `${item.warehouseId || 0}-${item.itemId || 0}`,
+  }));
+}
+
+/** 切换统计维度时同步表单、表头和查询参数 */
+async function handleDimensionChange(dimension: InventoryDimension) {
+  // spanMethod 依赖当前维度判断合并字段，先更新本地状态。
+  currentDimension.value = dimension;
+  // 表头结构需要立即跟随维度切换，避免请求完成前仍显示旧列。
+  await gridApi.grid.reloadColumn(useGridColumns(dimension) || []);
+  // VXE proxy 查询会合并最近提交值，这里显式写入新 type 并刷新提交快照。
+  await gridApi.formApi.setFieldValue('type', dimension);
+  const formValues = await gridApi.formApi.getValues();
+  gridApi.formApi.setLatestSubmissionValues(formValues);
+  // 带上最新表单值重新加载，确保本次请求使用切换后的统计维度。
+  await gridApi.reload(formValues);
+}
+
+/** 切换零库存过滤时按当前搜索条件重新查询 */
+function handleFilterZeroChange() {
+  gridApi.query();
+}
+
+/** 按列字段读取行值，兼容 VXE 的 field/property */
+function getRowPropertyValue(row: InventoryRow | undefined, property: string) {
+  return row?.[property as keyof InventoryRow];
+}
+
+/** 根据统计维度返回需要合并单元格的字段 */
+function getRowSpanProperties() {
+  if (currentDimension.value === INVENTORY_DIMENSION.ITEM) {
+    return ['itemId', 'skuId', 'skuWarehouseId'];
+  }
+  return ['warehouseId', 'warehouseItemId'];
+}
+
+/** 合并库存统计的维度单元格 */
+function handleSpanMethod({
+  column,
+  rowIndex,
+}: {
+  column: { field?: string; property?: string };
+  rowIndex: number;
+}) {
+  const property = column.field || column.property;
+  if (!property || !getRowSpanProperties().includes(property)) {
+    return { colspan: 1, rowspan: 1 };
+  }
+  const row = currentRows.value[rowIndex];
+  if (
+    rowIndex > 0 &&
+    getRowPropertyValue(currentRows.value[rowIndex - 1], property) ===
+      getRowPropertyValue(row, property)
+  ) {
+    return { colspan: 0, rowspan: 0 };
+  }
+  let rowspan = 1;
+  for (let index = rowIndex + 1; index < currentRows.value.length; index += 1) {
+    if (
+      getRowPropertyValue(currentRows.value[index], property) !==
+      getRowPropertyValue(row, property)
+    ) {
+      break;
+    }
+    rowspan += 1;
+  }
+  return { colspan: 1, rowspan };
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(handleDimensionChange),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 维度切换会通过 reload(formValues) 传入新 type，刷新场景用当前维度兜底。
+          const nextDimension = (formValues.type ||
+            currentDimension.value ||
+            INVENTORY_DIMENSION.WAREHOUSE) as InventoryDimension;
+          currentDimension.value = nextDimension;
+          await gridApi.grid.reloadColumn(useGridColumns(nextDimension) || []);
+
+          // type 是后端聚合维度参数，普通搜索参数里移除，避免重复透传旧值。
+          const queryParams = { ...formValues };
+          Reflect.deleteProperty(queryParams, 'type');
+          const data = await getInventoryPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...queryParams,
+            type: nextDimension,
+            onlyPositiveQuantity: filterZero.value ? true : undefined,
+          });
+
+          // spanMethod 依赖当前页数据计算 rowspan，需要保存构造后的行。
+          currentRows.value = buildRows(data.list || []);
+          return {
+            ...data,
+            list: currentRows.value,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    spanMethod: handleSpanMethod,
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<InventoryRow>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【库存】库存记录、流水、统计"
+        url="https://doc.iocoder.cn/wms/inventory/"
+      />
+    </template>
+
+    <Grid table-title="库存统计">
+      <template #toolbar-tools>
+        <ElCheckbox v-model="filterZero" @change="handleFilterZeroChange">
+          过滤掉库存为 0 的商品
+        </ElCheckbox>
+      </template>
+      <template #warehouseName="{ row }">
+        {{ row.warehouseName || '-' }}
+      </template>
+      <template #itemInfo="{ row }">
+        <div>{{ row.itemName || '-' }}</div>
+        <div v-if="row.itemCode" class="text-xs text-gray-500">
+          商品编号：{{ row.itemCode }}
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div>{{ row.skuName || '-' }}</div>
+        <div v-if="row.skuCode" class="text-xs text-gray-500">
+          规格编号：{{ row.skuCode }}
+        </div>
+      </template>
+      <template #quantity="{ row }">
+        {{ formatQuantity(row.quantity) }}
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/brand/components/index.ts b/apps/web-ele/src/views/wms/md/item/brand/components/index.ts
new file mode 100644
index 000000000..98419d2fc
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/brand/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsItemBrandSelect } from './item-brand-select.vue';
diff --git a/apps/web-ele/src/views/wms/md/item/brand/components/item-brand-select.vue b/apps/web-ele/src/views/wms/md/item/brand/components/item-brand-select.vue
new file mode 100644
index 000000000..0c90835ae
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/brand/components/item-brand-select.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { WmsItemBrandApi } from '#/api/wms/md/item/brand';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { ElOption, ElSelect } from 'element-plus';
+
+import { getItemBrandSimpleList } from '#/api/wms/md/item/brand';
+
+defineOptions({ name: 'WmsItemBrandSelect', inheritAttrs: false });
+
+withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择商品品牌',
+  },
+);
+
+const emit = defineEmits<{
+  change: [brand: undefined | WmsItemBrandApi.ItemBrand];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const loading = ref(false);
+const brandList = ref<WmsItemBrandApi.ItemBrand[]>([]);
+
+const options = computed(() =>
+  brandList.value
+    .filter((brand) => brand.id !== undefined)
+    .map((brand) => ({
+      label: brand.name,
+      value: brand.id!,
+    })),
+);
+
+/** 选中变化 */
+function handleChange(value: number | string | undefined) {
+  const brandId = typeof value === 'number' ? value : undefined;
+  emit('update:modelValue', brandId);
+  emit(
+    'change',
+    brandList.value.find((brand) => brand.id === brandId),
+  );
+}
+
+/** 查询商品品牌精简列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    brandList.value = await getItemBrandSimpleList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <ElSelect
+    v-bind="$attrs"
+    :clearable="clearable"
+    :disabled="disabled"
+    :loading="loading"
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    class="w-full"
+    filterable
+    @change="handleChange"
+  >
+    <ElOption
+      v-for="option in options"
+      :key="option.value"
+      :label="option.label"
+      :value="option.value"
+    />
+  </ElSelect>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/brand/data.ts b/apps/web-ele/src/views/wms/md/item/brand/data.ts
new file mode 100644
index 000000000..cebea33e7
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/brand/data.ts
@@ -0,0 +1,107 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+/** 新增/修改商品品牌的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '品牌编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入品牌编号',
+      },
+      rules: z.string().min(1, '品牌编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          ElButton,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('B'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '品牌名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 30,
+        placeholder: '请输入品牌名称',
+      },
+      rules: z.string().min(1, '品牌名称不能为空').max(30),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '品牌编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入品牌编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '品牌名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入品牌名称',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '品牌编号',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '品牌名称',
+      minWidth: 160,
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/md/item/brand/index.vue b/apps/web-ele/src/views/wms/md/item/brand/index.vue
new file mode 100644
index 000000000..65966fb05
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/brand/index.vue
@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemBrandApi } from '#/api/wms/md/item/brand';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteItemBrand,
+  exportItemBrand,
+  getItemBrandPage,
+} from '#/api/wms/md/item/brand';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'WmsItemBrand' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建商品品牌 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑商品品牌 */
+function handleEdit(row: WmsItemBrandApi.ItemBrand) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除商品品牌 */
+async function handleDelete(row: WmsItemBrandApi.ItemBrand) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteItemBrand(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出商品品牌 */
+async function handleExport() {
+  const data = await exportItemBrand(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '商品品牌.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemBrandPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsItemBrandApi.ItemBrand>,
+});
+</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: ['wms:item-brand:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:item-brand:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['wms:item-brand:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['wms:item-brand:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/brand/modules/form.vue b/apps/web-ele/src/views/wms/md/item/brand/modules/form.vue
new file mode 100644
index 000000000..2630f0493
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/brand/modules/form.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import type { WmsItemBrandApi } from '#/api/wms/md/item/brand';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createItemBrand,
+  getItemBrand,
+  updateItemBrand,
+} from '#/api/wms/md/item/brand';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'WmsItemBrandForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsItemBrandApi.ItemBrand>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['商品品牌'])
+    : $t('ui.actionTitle.create', ['商品品牌']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    const data = (await formApi.getValues()) as WmsItemBrandApi.ItemBrand;
+    try {
+      await (formData.value?.id
+        ? updateItemBrand(data)
+        : createItemBrand(data));
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<WmsItemBrandApi.ItemBrand>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getItemBrand(data.id);
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/category/components/index.ts b/apps/web-ele/src/views/wms/md/item/category/components/index.ts
new file mode 100644
index 000000000..13cd052aa
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/category/components/index.ts
@@ -0,0 +1,2 @@
+export { default as WmsItemCategorySelect } from './item-category-select.vue';
+export { default as WmsItemCategoryTree } from './item-category-tree.vue';
diff --git a/apps/web-ele/src/views/wms/md/item/category/components/item-category-select.vue b/apps/web-ele/src/views/wms/md/item/category/components/item-category-select.vue
new file mode 100644
index 000000000..e396ce127
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/category/components/item-category-select.vue
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { handleTree } from '@vben/utils';
+
+import { ElTreeSelect } from 'element-plus';
+
+import { getItemCategorySimpleList } from '#/api/wms/md/item/category';
+
+/** WMS 商品分类选择器 */
+defineOptions({ name: 'WmsItemCategorySelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择商品分类',
+  },
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const categoryTree = ref<WmsItemCategoryApi.ItemCategory[]>([]);
+
+const selectValue = computed({
+  get: () => props.modelValue,
+  set: (value: number | undefined) => {
+    emit('update:modelValue', value);
+  },
+});
+
+/** 查询商品分类树 */
+async function getCategoryTree() {
+  const data = await getItemCategorySimpleList();
+  categoryTree.value = handleTree(data, 'id', 'parentId');
+}
+
+onMounted(() => {
+  getCategoryTree();
+});
+</script>
+
+<template>
+  <ElTreeSelect
+    v-bind="$attrs"
+    v-model="selectValue"
+    :clearable="clearable"
+    :data="categoryTree"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :props="{ children: 'children', label: 'name' }"
+    check-strictly
+    class="w-full"
+    default-expand-all
+    filterable
+    node-key="id"
+  />
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/category/components/item-category-tree.vue b/apps/web-ele/src/views/wms/md/item/category/components/item-category-tree.vue
new file mode 100644
index 000000000..365609772
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/category/components/item-category-tree.vue
@@ -0,0 +1,124 @@
+<script lang="ts" setup>
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { onMounted, ref, watch } from 'vue';
+
+import { Search } from '@vben/icons';
+import { handleTree } from '@vben/utils';
+
+import { ElInput, ElTree } from 'element-plus';
+
+import { getItemCategorySimpleList } from '#/api/wms/md/item/category';
+
+/** WMS 商品分类树组件 */
+defineOptions({ name: 'WmsItemCategoryTree' });
+
+withDefaults(
+  defineProps<{
+    filterPlaceholder?: string;
+  }>(),
+  {
+    filterPlaceholder: '请输入分类名称',
+  },
+);
+
+const emit = defineEmits<{
+  nodeClick: [categoryId: number | undefined];
+}>();
+
+const loading = ref(false);
+const filterText = ref('');
+const currentNodeId = ref<number>();
+const categoryList = ref<WmsItemCategoryApi.ItemCategory[]>([]);
+const categoryTree = ref<WmsItemCategoryApi.ItemCategory[]>([]);
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+/** 加载分类树 */
+async function loadTree() {
+  loading.value = true;
+  try {
+    const data = await getItemCategorySimpleList();
+    categoryList.value = data;
+    categoryTree.value = handleTree(data, 'id', 'parentId');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 处理搜索逻辑 */
+function handleSearch(value: string) {
+  filterText.value = value;
+  const filteredList = value
+    ? categoryList.value.filter((item) => item.name?.includes(value))
+    : categoryList.value;
+  categoryTree.value = handleTree(filteredList, 'id', 'parentId');
+}
+
+/** 处理节点点击：支持点击同一节点取消选中 */
+function handleNodeClick(row: WmsItemCategoryApi.ItemCategory) {
+  if (currentNodeId.value === row.id) {
+    currentNodeId.value = undefined;
+    treeRef.value?.setCurrentKey(undefined);
+    emit('nodeClick', undefined);
+    return;
+  }
+  currentNodeId.value = row.id;
+  emit('nodeClick', row.id);
+}
+
+/** 清空选中状态 */
+function reset() {
+  currentNodeId.value = undefined;
+  filterText.value = '';
+  treeRef.value?.setCurrentKey(undefined);
+  categoryTree.value = handleTree(categoryList.value, 'id', 'parentId');
+}
+
+/** 设置当前选中分类 */
+function setCurrent(categoryId: number) {
+  currentNodeId.value = categoryId;
+  treeRef.value?.setCurrentKey(categoryId);
+}
+
+watch(filterText, (value) => {
+  handleSearch(value);
+});
+
+defineExpose({ reset, setCurrent });
+
+onMounted(() => {
+  loadTree();
+});
+</script>
+
+<template>
+  <div class="h-full">
+    <ElInput
+      v-model="filterText"
+      :placeholder="filterPlaceholder"
+      class="w-full"
+      clearable
+    >
+      <template #prefix>
+        <Search class="size-4" />
+      </template>
+    </ElInput>
+    <div v-loading="loading">
+      <ElTree
+        v-if="categoryTree.length > 0"
+        ref="treeRef"
+        :data="categoryTree"
+        :expand-on-click-node="false"
+        :props="{ label: 'name', children: 'children' }"
+        class="pt-2"
+        default-expand-all
+        highlight-current
+        node-key="id"
+        @node-click="handleNodeClick"
+      />
+      <div v-else-if="!loading" class="py-4 text-center text-gray-500">
+        暂无数据
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/category/data.ts b/apps/web-ele/src/views/wms/md/item/category/data.ts
new file mode 100644
index 000000000..e6e536434
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/category/data.ts
@@ -0,0 +1,186 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { h } from 'vue';
+
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { handleTree } from '@vben/utils';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { getItemCategorySimpleList } from '#/api/wms/md/item/category';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+/** 新增/修改商品分类的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'id',
+      component: 'Input',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'parentId',
+      label: '上级分类',
+      component: 'ApiTreeSelect',
+      componentProps: {
+        clearable: true,
+        api: async () => {
+          const data = await getItemCategorySimpleList();
+          return [
+            {
+              id: 0,
+              name: '顶级分类',
+              children: handleTree(data),
+            },
+          ];
+        },
+        checkStrictly: true,
+        childrenField: 'children',
+        defaultExpandAll: true,
+        labelField: 'name',
+        placeholder: '请选择上级分类',
+        valueField: 'id',
+      },
+      rules: 'selectRequired',
+    },
+    {
+      fieldName: 'code',
+      label: '分类编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入分类编号',
+      },
+      rules: z.string().min(1, '分类编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          ElButton,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('C'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'sort',
+      label: '显示排序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'status',
+      label: '状态',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+      },
+      rules: z.number().default(CommonStatusEnum.ENABLE),
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '分类编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入分类编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '分类名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入分类名称',
+      },
+    },
+    {
+      fieldName: 'status',
+      label: '分类状态',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择分类状态',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions<WmsItemCategoryApi.ItemCategory>['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '分类名称',
+      minWidth: 200,
+      align: 'left',
+      treeNode: true,
+    },
+    {
+      field: 'code',
+      title: '分类编号',
+      width: 160,
+      align: 'center',
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 120,
+      align: 'center',
+    },
+    {
+      field: 'status',
+      title: '状态',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
+      },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 240,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/md/item/category/index.vue b/apps/web-ele/src/views/wms/md/item/category/index.vue
new file mode 100644
index 000000000..e80f57815
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/category/index.vue
@@ -0,0 +1,163 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteItemCategory,
+  getItemCategoryList,
+} from '#/api/wms/md/item/category';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'WmsItemCategory' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 切换树形展开/收缩状态 */
+const isExpanded = ref(true);
+function handleExpand() {
+  isExpanded.value = !isExpanded.value;
+  gridApi.grid.setAllTreeExpand(isExpanded.value);
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 添加下级分类 */
+function handleAppend(row: WmsItemCategoryApi.ItemCategory) {
+  formModalApi.setData({ parentId: row.id }).open();
+}
+
+/** 编辑分类 */
+function handleEdit(row: WmsItemCategoryApi.ItemCategory) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除分类 */
+async function handleDelete(row: WmsItemCategoryApi.ItemCategory) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteItemCategory(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async (_, formValues) => {
+          return await getItemCategoryList(formValues);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+    treeConfig: {
+      parentField: 'parentId',
+      rowField: 'id',
+      transform: true,
+      expandAll: true,
+      reserve: true,
+    },
+  } as VxeTableGridOptions<WmsItemCategoryApi.ItemCategory>,
+});
+</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: ['wms:item-category:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: isExpanded ? '收缩' : '展开',
+              type: 'primary',
+              onClick: handleExpand,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '新增下级',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:item-category:create'],
+              onClick: handleAppend.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['wms:item-category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['wms:item-category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/category/modules/form.vue b/apps/web-ele/src/views/wms/md/item/category/modules/form.vue
new file mode 100644
index 000000000..62bb829b6
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/category/modules/form.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { WmsItemCategoryApi } from '#/api/wms/md/item/category';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { CommonStatusEnum } from '@vben/constants';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createItemCategory,
+  getItemCategory,
+  updateItemCategory,
+} from '#/api/wms/md/item/category';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'WmsItemCategoryForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsItemCategoryApi.ItemCategory>();
+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: 80,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data =
+      (await formApi.getValues()) as WmsItemCategoryApi.ItemCategory;
+    try {
+      await (formData.value?.id
+        ? updateItemCategory(data)
+        : createItemCategory(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<WmsItemCategoryApi.ItemCategory>();
+    if (!data || !data.id) {
+      formData.value = data;
+      await formApi.setValues({
+        sort: 0,
+        status: CommonStatusEnum.ENABLE,
+        ...data,
+      });
+      return;
+    }
+    // 加载数据
+    modalApi.lock();
+    try {
+      formData.value = await getItemCategory(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/4">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/data.ts b/apps/web-ele/src/views/wms/md/item/data.ts
new file mode 100644
index 000000000..0e0fb4042
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/data.ts
@@ -0,0 +1,260 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h, markRaw } from 'vue';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { getItemBrandSimpleList } from '#/api/wms/md/item/brand';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+import { WmsItemBrandSelect } from './brand/components';
+import { WmsItemCategorySelect } from './category/components';
+
+/** 新增/修改商品的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 60,
+        placeholder: '请输入商品名称',
+      },
+      rules: z.string().min(1, '商品名称不能为空').max(60),
+    },
+    {
+      fieldName: 'categoryId',
+      label: '商品分类',
+      component: markRaw(WmsItemCategorySelect),
+      rules: 'required',
+    },
+    {
+      fieldName: 'code',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入商品编号',
+      },
+      rules: z.string().min(1, '商品编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          ElButton,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('I'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'unit',
+      label: '商品单位',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入单位',
+      },
+    },
+    {
+      fieldName: 'brandId',
+      label: '商品品牌',
+      component: markRaw(WmsItemBrandSelect),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'brandId',
+      label: '商品品牌',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getItemBrandSimpleList,
+        clearable: true,
+        filterable: true,
+        labelField: 'name',
+        placeholder: '请选择商品品牌',
+        valueField: 'id',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 180,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'priceInfo',
+      title: '金额(元)',
+      minWidth: 140,
+      slots: { default: 'priceInfo' },
+    },
+    {
+      field: 'weightInfo',
+      title: '重量(kg)',
+      minWidth: 140,
+      slots: { default: 'weightInfo' },
+    },
+    {
+      field: 'dimensionInfo',
+      title: '长宽高(cm)',
+      minWidth: 180,
+      align: 'right',
+      slots: { default: 'dimensionInfo' },
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** SKU 选择弹窗搜索表单 */
+export function useSkuSelectGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'itemName',
+      label: '商品名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品名称',
+      },
+    },
+    {
+      fieldName: 'itemCode',
+      label: '商品编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入商品编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '规格名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格名称',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '规格编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入规格编号',
+      },
+    },
+    {
+      fieldName: 'barCode',
+      label: '条码',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入条码',
+      },
+    },
+  ];
+}
+
+/** SKU 选择弹窗列表字段 */
+export function useSkuSelectGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    { type: 'checkbox', width: 50 },
+    {
+      field: 'itemInfo',
+      title: '商品信息',
+      minWidth: 220,
+      slots: { default: 'itemInfo' },
+    },
+    {
+      field: 'skuInfo',
+      title: '规格信息',
+      minWidth: 220,
+      slots: { default: 'skuInfo' },
+    },
+    {
+      field: 'priceInfo',
+      title: '金额(元)',
+      minWidth: 160,
+      slots: { default: 'priceInfo' },
+    },
+    {
+      field: 'weightInfo',
+      title: '重量(kg)',
+      minWidth: 160,
+      slots: { default: 'weightInfo' },
+    },
+    {
+      field: 'dimensionInfo',
+      title: '长宽高(cm)',
+      minWidth: 180,
+      align: 'right',
+      slots: { default: 'dimensionInfo' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/md/item/index.vue b/apps/web-ele/src/views/wms/md/item/index.vue
new file mode 100644
index 000000000..4fb19b3b7
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/index.vue
@@ -0,0 +1,283 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemApi } from '#/api/wms/md/item';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+
+import { ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElCard, ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteItem, exportItem, getItemPage } from '#/api/wms/md/item';
+import { $t } from '#/locales';
+import { WmsItemCategoryTree } from '#/views/wms/md/item/category/components';
+import {
+  formatDimensionText,
+  formatPrice,
+  formatWeight,
+} from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+type ItemSkuRow = WmsItemSkuApi.ItemSku;
+
+defineOptions({ name: 'WmsItem' });
+
+const currentRows = ref<ItemSkuRow[]>([]);
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 展开商品 SKU 列表 */
+function buildItemSkuRows(items: WmsItemApi.Item[]) {
+  return items.flatMap((item) => {
+    const skus = item.skus?.length ? item.skus : [{}];
+    return skus.map((sku) => ({
+      ...sku,
+      itemId: item.id,
+      itemCode: item.code,
+      itemName: item.name,
+      categoryId: item.categoryId,
+      categoryName: item.categoryName,
+      unit: item.unit,
+      brandId: item.brandId,
+      brandName: item.brandName,
+    }));
+  });
+}
+
+/** 创建商品 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑商品 */
+function handleEdit(row: ItemSkuRow) {
+  formModalApi.setData({ id: row.itemId }).open();
+}
+
+/** 删除商品 */
+async function handleDelete(row: ItemSkuRow) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.itemName]),
+  });
+  try {
+    await deleteItem(row.itemId!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.itemName]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出商品 */
+async function handleExport() {
+  const data = await exportItem(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '商品.xls', source: data });
+}
+
+/** 分类树点击 */
+const searchCategoryId = ref<number | undefined>(undefined);
+function handleCategoryNodeClick(categoryId: number | undefined) {
+  searchCategoryId.value = categoryId;
+  handleRefresh();
+}
+
+/** 合并商品维度的重复单元格 */
+function handleSpanMethod({
+  column,
+  rowIndex,
+}: {
+  column: { field?: string; property?: string };
+  rowIndex: number;
+}) {
+  const field = column.field || column.property;
+  if (!['actions', 'itemInfo'].includes(field || '')) {
+    return { colspan: 1, rowspan: 1 };
+  }
+  const row = currentRows.value[rowIndex];
+  if (
+    rowIndex > 0 &&
+    currentRows.value[rowIndex - 1]?.itemId === row?.itemId
+  ) {
+    return { colspan: 0, rowspan: 0 };
+  }
+  let rowspan = 1;
+  for (let index = rowIndex + 1; index < currentRows.value.length; index += 1) {
+    if (currentRows.value[index]?.itemId !== row?.itemId) {
+      break;
+    }
+    rowspan += 1;
+  }
+  return { colspan: 1, rowspan };
+}
+
+function hasValue(value: unknown) {
+  return value !== undefined && value !== null;
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    showOverflow: false,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const data = await getItemPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+            categoryId: searchCategoryId.value,
+          });
+          currentRows.value = buildItemSkuRows(data.list || []);
+          return {
+            ...data,
+            list: currentRows.value,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    spanMethod: handleSpanMethod,
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<ItemSkuRow>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】商品、SKU、分类、品牌"
+        url="https://doc.iocoder.cn/wms/md/item/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+
+    <div class="flex h-full w-full">
+      <ElCard class="mr-4 h-full w-1/6">
+        <WmsItemCategoryTree @node-click="handleCategoryNodeClick" />
+      </ElCard>
+      <div class="w-5/6">
+        <Grid table-title="商品列表">
+          <template #toolbar-tools>
+            <TableAction
+              :actions="[
+                {
+                  label: $t('ui.actionTitle.create', ['商品']),
+                  type: 'primary',
+                  icon: ACTION_ICON.ADD,
+                  auth: ['wms:item:create'],
+                  onClick: handleCreate,
+                },
+                {
+                  label: $t('ui.actionTitle.export'),
+                  type: 'primary',
+                  icon: ACTION_ICON.DOWNLOAD,
+                  auth: ['wms:item:export'],
+                  onClick: handleExport,
+                },
+              ]"
+            />
+          </template>
+          <template #itemInfo="{ row }">
+            <div class="flex flex-col gap-1 py-1 leading-5">
+              <div class="text-sm">{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                {{ row.itemCode }}
+              </div>
+              <div v-if="row.brandName" class="text-xs text-gray-500">
+                品牌：{{ row.brandName }}
+              </div>
+              <div v-if="row.categoryName" class="text-xs text-gray-500">
+                分类：{{ row.categoryName }}
+              </div>
+            </div>
+          </template>
+          <template #skuInfo="{ row }">
+            <div class="flex flex-col gap-1 py-1 leading-5">
+              <div class="text-sm">{{ row.name || '-' }}</div>
+              <div v-if="row.code" class="text-xs text-gray-500">
+                编号：{{ row.code }}
+              </div>
+              <div v-if="row.barCode" class="text-xs text-gray-500">
+                条码：{{ row.barCode }}
+              </div>
+            </div>
+          </template>
+          <template #priceInfo="{ row }">
+            <div class="flex flex-col gap-1 py-1 leading-5">
+              <div v-if="hasValue(row.costPrice)">
+                成本价：{{ formatPrice(row.costPrice) }}
+              </div>
+              <div v-if="hasValue(row.sellingPrice)">
+                销售价：{{ formatPrice(row.sellingPrice) }}
+              </div>
+            </div>
+          </template>
+          <template #weightInfo="{ row }">
+            <div class="flex flex-col gap-1 py-1 leading-5">
+              <div v-if="hasValue(row.netWeight)">
+                净重：{{ formatWeight(row.netWeight) }}
+              </div>
+              <div v-if="hasValue(row.grossWeight)">
+                毛重：{{ formatWeight(row.grossWeight) }}
+              </div>
+            </div>
+          </template>
+          <template #dimensionInfo="{ row }">
+            {{ formatDimensionText(row.length, row.width, row.height) || '-' }}
+          </template>
+          <template #actions="{ row }">
+            <TableAction
+              :actions="[
+                {
+                  label: $t('common.edit'),
+                  type: 'primary',
+                  link: true,
+                  icon: ACTION_ICON.EDIT,
+                  auth: ['wms:item:update'],
+                  onClick: handleEdit.bind(null, row),
+                },
+                {
+                  label: $t('common.delete'),
+                  type: 'danger',
+                  link: true,
+                  icon: ACTION_ICON.DELETE,
+                  auth: ['wms:item:delete'],
+                  popConfirm: {
+                    title: `确认删除商品【${row.itemName}】吗？`,
+                    confirm: handleDelete.bind(null, row),
+                  },
+                },
+              ]"
+            />
+          </template>
+        </Grid>
+      </div>
+    </div>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/modules/form.vue b/apps/web-ele/src/views/wms/md/item/modules/form.vue
new file mode 100644
index 000000000..87ec84ba6
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/modules/form.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { WmsItemApi } from '#/api/wms/md/item';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { createItem, getItem, updateItem } from '#/api/wms/md/item';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+import SkuForm from './sku-form.vue';
+
+defineOptions({ name: 'WmsItemForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsItemApi.Item>();
+const skuFormRef = 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',
+    },
+    labelWidth: 88,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+async function resetSkuForm(item?: WmsItemApi.Item) {
+  await nextTick();
+  await skuFormRef.value?.setRows(item?.skus);
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    try {
+      skuFormRef.value?.validate();
+    } catch (error) {
+      ElMessage.warning((error as Error).message);
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as WmsItemApi.Item;
+    data.skus = skuFormRef.value?.getRows() || [];
+    try {
+      await (formData.value?.id ? updateItem(data) : createItem(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    await resetSkuForm();
+    // 加载数据
+    const data = modalApi.getData<WmsItemApi.Item>();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getItem(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+      await resetSkuForm(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-3/4">
+    <Form class="mx-4" />
+    <SkuForm ref="skuFormRef" class="mx-4 mt-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/modules/sku-form.vue b/apps/web-ele/src/views/wms/md/item/modules/sku-form.vue
new file mode 100644
index 000000000..4bb74a31e
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/modules/sku-form.vue
@@ -0,0 +1,301 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+
+import { nextTick, ref } from 'vue';
+
+import { ElButton, ElInput, ElInputNumber, ElMessage } from 'element-plus';
+
+import { TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+import {
+  DIMENSION_PRECISION,
+  PRICE_PRECISION,
+  WEIGHT_PRECISION,
+} from '#/views/wms/utils/format';
+
+interface SkuRow extends WmsItemSkuApi.ItemSku {
+  seq: number;
+}
+
+let skuSeq = 0; // SKU 行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+const tableData = ref<SkuRow[]>([]);
+
+function nextSkuSeq() {
+  skuSeq += 1;
+  return skuSeq;
+}
+
+function buildEmptySku(): SkuRow {
+  return {
+    seq: nextSkuSeq(),
+    id: undefined,
+    name: undefined,
+    barCode: undefined,
+    code: undefined,
+    length: undefined,
+    width: undefined,
+    height: undefined,
+    grossWeight: undefined,
+    netWeight: undefined,
+    costPrice: undefined,
+    sellingPrice: undefined,
+  };
+}
+
+function toSkuRow(sku: WmsItemSkuApi.ItemSku): SkuRow {
+  return {
+    ...sku,
+    seq: nextSkuSeq(),
+  };
+}
+
+function toSku(row: SkuRow): WmsItemSkuApi.ItemSku {
+  const { seq: _seq, ...sku } = row;
+  return sku;
+}
+
+async function reloadGrid() {
+  await nextTick();
+  await gridApi.grid.reloadData(tableData.value);
+}
+
+async function setRows(skus?: WmsItemSkuApi.ItemSku[]) {
+  skuSeq = 0;
+  tableData.value = skus?.length
+    ? skus.map((sku) => toSkuRow(sku))
+    : [buildEmptySku()];
+  await reloadGrid();
+}
+
+function getRows() {
+  return tableData.value.map((row) => toSku(row));
+}
+
+function validate() {
+  if (tableData.value.length === 0) {
+    throw new Error('至少包含一个商品规格');
+  }
+  for (let index = 0; index < tableData.value.length; index += 1) {
+    const row = tableData.value[index];
+    if (!row?.name) {
+      throw new Error(`第 ${index + 1} 行：规格名称不能为空`);
+    }
+  }
+}
+
+async function handleAddSku() {
+  tableData.value.push(buildEmptySku());
+  await reloadGrid();
+}
+
+async function handleDeleteSku(row: SkuRow) {
+  if (tableData.value.length <= 1) {
+    ElMessage.error('至少包含一个商品规格');
+    return;
+  }
+  const index = tableData.value.findIndex((item) => item.seq === row.seq);
+  if (index !== -1) {
+    tableData.value.splice(index, 1);
+  }
+  await reloadGrid();
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: [
+      {
+        field: 'name',
+        title: '规格名称',
+        minWidth: 180,
+        slots: { default: 'name' },
+      },
+      {
+        field: 'codeBarCode',
+        title: '编号/条码',
+        width: 300,
+        slots: { default: 'codeBarCode' },
+      },
+      {
+        field: 'dimension',
+        title: '长/宽/高(cm)',
+        width: 300,
+        slots: { default: 'dimension' },
+      },
+      {
+        field: 'weight',
+        title: '净重/毛重(kg)',
+        width: 200,
+        slots: { default: 'weight' },
+      },
+      {
+        field: 'price',
+        title: '成本价/销售价',
+        width: 200,
+        slots: { default: 'price' },
+      },
+      {
+        field: 'actions',
+        title: '操作',
+        align: 'center',
+        width: 80,
+        slots: { default: 'actions' },
+      },
+    ],
+    data: tableData.value,
+    minHeight: 260,
+    autoResize: true,
+    border: true,
+    showOverflow: false,
+    rowConfig: {
+      keyField: 'seq',
+      isHover: true,
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+  } as VxeTableGridOptions<SkuRow>,
+});
+
+defineExpose({
+  getRows,
+  setRows,
+  validate,
+});
+</script>
+
+<template>
+  <div>
+    <div class="mb-3 flex items-center justify-between">
+      <span class="text-sm font-semibold">规格</span>
+      <TableAction
+        :actions="[
+          {
+            label: '新增规格',
+            type: 'primary',
+            onClick: handleAddSku,
+          },
+        ]"
+      />
+    </div>
+    <Grid class="w-full">
+      <template #name="{ row }">
+        <ElInput
+          v-model="row.name"
+          class="w-full"
+          maxlength="255"
+          placeholder="请输入规格名称"
+        />
+      </template>
+      <template #codeBarCode="{ row }">
+        <div class="flex flex-col gap-2 py-1">
+          <ElInput
+            v-model="row.code"
+            class="w-full"
+            maxlength="64"
+            placeholder="编号"
+          >
+            <template #append>
+              <ElButton @click="row.code = generateWmsCode('S')">生成</ElButton>
+            </template>
+          </ElInput>
+          <ElInput
+            v-model="row.barCode"
+            class="w-full"
+            maxlength="64"
+            placeholder="条码"
+          >
+            <template #append>
+              <ElButton @click="row.barCode = generateWmsCode()">
+                生成
+              </ElButton>
+            </template>
+          </ElInput>
+        </div>
+      </template>
+      <template #dimension="{ row }">
+        <div class="flex w-full gap-1">
+          <ElInputNumber
+            v-model="row.length"
+            :controls="false"
+            :min="0"
+            :precision="DIMENSION_PRECISION"
+            class="!w-1/3"
+            placeholder="长"
+          />
+          <ElInputNumber
+            v-model="row.width"
+            :controls="false"
+            :min="0"
+            :precision="DIMENSION_PRECISION"
+            class="!w-1/3"
+            placeholder="宽"
+          />
+          <ElInputNumber
+            v-model="row.height"
+            :controls="false"
+            :min="0"
+            :precision="DIMENSION_PRECISION"
+            class="!w-1/3"
+            placeholder="高"
+          />
+        </div>
+      </template>
+      <template #weight="{ row }">
+        <div class="flex flex-col gap-2 py-1">
+          <ElInputNumber
+            v-model="row.netWeight"
+            :controls="false"
+            :min="0"
+            :precision="WEIGHT_PRECISION"
+            class="!w-full"
+            placeholder="净重"
+          />
+          <ElInputNumber
+            v-model="row.grossWeight"
+            :controls="false"
+            :min="0"
+            :precision="WEIGHT_PRECISION"
+            class="!w-full"
+            placeholder="毛重"
+          />
+        </div>
+      </template>
+      <template #price="{ row }">
+        <div class="flex flex-col gap-2 py-1">
+          <ElInputNumber
+            v-model="row.costPrice"
+            :controls="false"
+            :min="0"
+            :precision="PRICE_PRECISION"
+            class="!w-full"
+            placeholder="成本价"
+          />
+          <ElInputNumber
+            v-model="row.sellingPrice"
+            :controls="false"
+            :min="0"
+            :precision="PRICE_PRECISION"
+            class="!w-full"
+            placeholder="销售价"
+          />
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              onClick: handleDeleteSku.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/item/sku/components/index.ts b/apps/web-ele/src/views/wms/md/item/sku/components/index.ts
new file mode 100644
index 000000000..040fe7a2d
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/sku/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsItemSkuSelect } from './item-sku-select.vue';
diff --git a/apps/web-ele/src/views/wms/md/item/sku/components/item-sku-select.vue b/apps/web-ele/src/views/wms/md/item/sku/components/item-sku-select.vue
new file mode 100644
index 000000000..13fbfcd90
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/item/sku/components/item-sku-select.vue
@@ -0,0 +1,229 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+
+import { nextTick, ref } from 'vue';
+
+import { ElButton, ElDialog, ElMessage } from 'element-plus';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getItemSkuPage } from '#/api/wms/md/item/sku';
+import {
+  formatDimensionText,
+  formatPrice,
+  formatWeight,
+} from '#/views/wms/utils/format';
+
+import { useSkuSelectGridColumns, useSkuSelectGridFormSchema } from '../../data';
+
+defineOptions({ name: 'WmsItemSkuSelect' });
+
+const emit = defineEmits<{
+  change: [list: WmsItemSkuApi.ItemSku[]];
+}>();
+
+const open = ref(false);
+const multiple = ref(true);
+const syncingSingleSelection = ref(false);
+const selectedRows = ref<WmsItemSkuApi.ItemSku[]>([]);
+const disabledSelectedIds = ref<Set<number>>(new Set());
+
+/** 判断 SKU 是否可勾选，已传入的业务明细 SKU 需要禁选 */
+function isRowSelectable({ row }: { row: WmsItemSkuApi.ItemSku }) {
+  return row.id === undefined || !disabledSelectedIds.value.has(row.id);
+}
+
+/** 单选模式下同步 VXE 勾选状态，避免跨页残留多选 */
+async function syncSingleSelection(row?: WmsItemSkuApi.ItemSku) {
+  syncingSingleSelection.value = true;
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  if (row) {
+    await gridApi.grid.setCheckboxRow(row, true);
+  }
+  await nextTick();
+  syncingSingleSelection.value = false;
+}
+
+/** 处理勾选变化，单选模式只保留最后一条可选 SKU */
+async function handleCheckboxChange({
+  checked,
+  records,
+  row,
+}: {
+  checked: boolean;
+  records: WmsItemSkuApi.ItemSku[];
+  row?: WmsItemSkuApi.ItemSku;
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  if (!multiple.value) {
+    const selected = checked && row ? [row] : [];
+    selectedRows.value = selected;
+    await syncSingleSelection(selected[0]);
+    return;
+  }
+  selectedRows.value = records.filter(
+    (item) => item.id === undefined || !disabledSelectedIds.value.has(item.id),
+  );
+}
+
+/** 处理全选变化，过滤掉已禁选的 SKU */
+function handleCheckboxAll({
+  records,
+}: {
+  records: WmsItemSkuApi.ItemSku[];
+}) {
+  if (syncingSingleSelection.value) {
+    return;
+  }
+  selectedRows.value = records.filter(
+    (item) => item.id === undefined || !disabledSelectedIds.value.has(item.id),
+  );
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useSkuSelectGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useSkuSelectGridColumns(),
+    height: 560,
+    keepSource: true,
+    showOverflow: false,
+    checkboxConfig: {
+      checkMethod: isRowSelectable,
+      highlight: true,
+      range: true,
+      reserve: true,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getItemSkuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsItemSkuApi.ItemSku>,
+  gridEvents: {
+    checkboxAll: handleCheckboxAll,
+    checkboxChange: handleCheckboxChange,
+  },
+});
+
+/** 打开 SKU 选择弹窗 */
+async function openModal(
+  selectedIds?: number[],
+  options?: { multiple?: boolean; preselectDisabled?: boolean },
+) {
+  open.value = true;
+  multiple.value = options?.multiple ?? true;
+  selectedRows.value = [];
+  disabledSelectedIds.value =
+    options?.preselectDisabled === false
+      ? new Set()
+      : new Set(selectedIds || []);
+  await nextTick();
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.formApi.resetForm();
+  await gridApi.query();
+}
+
+/** 关闭 SKU 选择弹窗并清空临时选择 */
+async function closeModal() {
+  open.value = false;
+  selectedRows.value = [];
+  await gridApi.grid.clearCheckboxRow();
+}
+
+/** 确认选择并返回新增的 SKU 列表 */
+function handleConfirm() {
+  const list = selectedRows.value.filter(
+    (sku) => sku.id !== undefined && !disabledSelectedIds.value.has(sku.id),
+  );
+  if (list.length === 0) {
+    ElMessage.warning('请至少选择一条数据');
+    return;
+  }
+  emit('change', list);
+  closeModal();
+}
+
+defineExpose({ open: openModal });
+</script>
+
+<template>
+  <ElDialog
+    v-model="open"
+    title="商品选择"
+    width="80%"
+    :append-to-body="true"
+    :destroy-on-close="true"
+    @close="closeModal"
+  >
+    <Grid table-title="商品 SKU 列表">
+      <template #itemInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div>{{ row.itemName || '-' }}</div>
+          <div v-if="row.itemCode" class="text-xs text-gray-500">
+            商品编号：{{ row.itemCode }}
+          </div>
+          <div v-if="row.brandName" class="text-xs text-gray-500">
+            品牌：{{ row.brandName }}
+          </div>
+        </div>
+      </template>
+      <template #skuInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div>{{ row.name || '-' }}</div>
+          <div v-if="row.code" class="text-xs text-gray-500">
+            编号：{{ row.code }}
+          </div>
+          <div v-if="row.barCode" class="text-xs text-gray-500">
+            条码：{{ row.barCode }}
+          </div>
+        </div>
+      </template>
+      <template #priceInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div v-if="row.costPrice !== undefined">
+            成本价：{{ formatPrice(row.costPrice) }}
+          </div>
+          <div v-if="row.sellingPrice !== undefined">
+            销售价：{{ formatPrice(row.sellingPrice) }}
+          </div>
+        </div>
+      </template>
+      <template #weightInfo="{ row }">
+        <div class="flex flex-col gap-1 py-1 leading-5">
+          <div v-if="row.netWeight !== undefined">
+            净重：{{ formatWeight(row.netWeight) }}
+          </div>
+          <div v-if="row.grossWeight !== undefined">
+            毛重：{{ formatWeight(row.grossWeight) }}
+          </div>
+        </div>
+      </template>
+      <template #dimensionInfo="{ row }">
+        {{ formatDimensionText(row.length, row.width, row.height) || '-' }}
+      </template>
+    </Grid>
+    <template #footer>
+      <ElButton @click="closeModal">取 消</ElButton>
+      <ElButton type="primary" @click="handleConfirm">确 定</ElButton>
+    </template>
+  </ElDialog>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/merchant/components/index.ts b/apps/web-ele/src/views/wms/md/merchant/components/index.ts
new file mode 100644
index 000000000..c6a83bd0e
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/merchant/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsMerchantSelect } from './merchant-select.vue';
diff --git a/apps/web-ele/src/views/wms/md/merchant/components/merchant-select.vue b/apps/web-ele/src/views/wms/md/merchant/components/merchant-select.vue
new file mode 100644
index 000000000..587aee847
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/merchant/components/merchant-select.vue
@@ -0,0 +1,111 @@
+<script lang="ts" setup>
+import type { WmsMerchantApi } from '#/api/wms/md/merchant';
+
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { ElOption, ElSelect } from 'element-plus';
+
+import { getMerchantSimpleList } from '#/api/wms/md/merchant';
+import {
+  CustomerMerchantTypeList,
+  SupplierMerchantTypeList,
+} from '#/views/wms/utils/constants';
+
+defineOptions({ name: 'WmsMerchantSelect', inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    customer?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+    supplier?: boolean;
+  }>(),
+  {
+    clearable: true,
+    customer: false,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择往来企业',
+    supplier: false,
+  },
+);
+
+const emit = defineEmits<{
+  change: [merchant: undefined | WmsMerchantApi.Merchant];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const loading = ref(false);
+const merchantList = ref<WmsMerchantApi.Merchant[]>([]);
+
+const options = computed(() =>
+  merchantList.value
+    .filter((merchant) => merchant.id !== undefined)
+    .map((merchant) => ({
+      label: merchant.name,
+      value: merchant.id!,
+    })),
+);
+
+/** 选中变化 */
+function handleChange(value: number | string | undefined) {
+  const merchantId = typeof value === 'number' ? value : undefined;
+  emit('update:modelValue', merchantId);
+  emit(
+    'change',
+    merchantList.value.find((merchant) => merchant.id === merchantId),
+  );
+}
+
+/** 查询往来企业精简列表 */
+async function getList() {
+  let types: number[] | undefined;
+  if (props.supplier) {
+    types = SupplierMerchantTypeList;
+  } else if (props.customer) {
+    types = CustomerMerchantTypeList;
+  }
+  loading.value = true;
+  try {
+    merchantList.value = await getMerchantSimpleList(
+      types ? { types } : undefined,
+    );
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => [props.supplier, props.customer],
+  () => {
+    getList();
+  },
+);
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <ElSelect
+    v-bind="$attrs"
+    :clearable="clearable"
+    :disabled="disabled"
+    :loading="loading"
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    class="w-full"
+    filterable
+    @change="handleChange"
+  >
+    <ElOption
+      v-for="option in options"
+      :key="option.value"
+      :label="option.label"
+      :value="option.value"
+    />
+  </ElSelect>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/merchant/data.ts b/apps/web-ele/src/views/wms/md/merchant/data.ts
new file mode 100644
index 000000000..95903f7b1
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/merchant/data.ts
@@ -0,0 +1,232 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+/** 新增/修改往来企业的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '往来企业编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入往来企业编号',
+      },
+      rules: z.string().min(1, '往来企业编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          ElButton,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('M'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '往来企业名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 60,
+        placeholder: '请输入往来企业名称',
+      },
+      rules: z.string().min(1, '往来企业名称不能为空').max(60),
+    },
+    {
+      fieldName: 'type',
+      label: '往来企业类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_MERCHANT_TYPE, 'number'),
+        placeholder: '请选择往来企业类型',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'level',
+      label: '级别',
+      component: 'Input',
+      componentProps: {
+        maxLength: 10,
+        placeholder: '请输入级别',
+      },
+    },
+    {
+      fieldName: 'bankName',
+      label: '开户行',
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入开户行',
+      },
+    },
+    {
+      fieldName: 'bankAccount',
+      label: '银行账户',
+      component: 'Input',
+      componentProps: {
+        maxLength: 40,
+        placeholder: '请输入银行账户',
+      },
+    },
+    {
+      fieldName: 'address',
+      label: '地址',
+      component: 'Input',
+      componentProps: {
+        maxLength: 200,
+        placeholder: '请输入地址',
+      },
+    },
+    {
+      fieldName: 'contact',
+      label: '联系人',
+      component: 'Input',
+      componentProps: {
+        maxLength: 30,
+        placeholder: '请输入联系人',
+      },
+    },
+    {
+      fieldName: 'mobile',
+      label: '手机号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 13,
+        placeholder: '请输入手机号',
+      },
+    },
+    {
+      fieldName: 'telephone',
+      label: '座机号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 13,
+        placeholder: '请输入座机号',
+      },
+    },
+    {
+      fieldName: 'email',
+      label: 'Email',
+      component: 'Input',
+      componentProps: {
+        maxLength: 50,
+        placeholder: '请输入 Email',
+      },
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'code',
+      label: '往来企业编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入往来企业编号',
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '往来企业名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入往来企业名称',
+      },
+    },
+    {
+      fieldName: 'type',
+      label: '往来企业类型',
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_MERCHANT_TYPE, 'number'),
+        placeholder: '请选择往来企业类型',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'code',
+      title: '往来企业编号',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '往来企业名称',
+      minWidth: 160,
+    },
+    {
+      field: 'type',
+      title: '往来企业类型',
+      width: 120,
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_MERCHANT_TYPE },
+      },
+    },
+    {
+      field: 'level',
+      title: '级别',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'contact',
+      title: '联系人',
+      width: 120,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 160,
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/md/merchant/index.vue b/apps/web-ele/src/views/wms/md/merchant/index.vue
new file mode 100644
index 000000000..cf00b435a
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/merchant/index.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsMerchantApi } from '#/api/wms/md/merchant';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteMerchant,
+  exportMerchant,
+  getMerchantPage,
+} from '#/api/wms/md/merchant';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'WmsMerchant' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建往来企业 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑往来企业 */
+function handleEdit(row: WmsMerchantApi.Merchant) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除往来企业 */
+async function handleDelete(row: WmsMerchantApi.Merchant) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteMerchant(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出往来企业 */
+async function handleExport() {
+  const data = await exportMerchant(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '往来企业.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMerchantPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsMerchantApi.Merchant>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】往来企业（供应商、客户）"
+        url="https://doc.iocoder.cn/wms/md/merchant/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="往来企业列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['往来企业']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:merchant:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:merchant:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['wms:merchant:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['wms:merchant:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/merchant/modules/form.vue b/apps/web-ele/src/views/wms/md/merchant/modules/form.vue
new file mode 100644
index 000000000..83ddba950
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/merchant/modules/form.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { WmsMerchantApi } from '#/api/wms/md/merchant';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createMerchant,
+  getMerchant,
+  updateMerchant,
+} from '#/api/wms/md/merchant';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'WmsMerchantForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsMerchantApi.Merchant>();
+const getTitle = computed(() => {
+  return formData.value?.id
+    ? $t('ui.actionTitle.edit', ['往来企业'])
+    : $t('ui.actionTitle.create', ['往来企业']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 120,
+  },
+  wrapperClass: 'grid-cols-2',
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as WmsMerchantApi.Merchant;
+    try {
+      await (formData.value?.id
+        ? updateMerchant(data)
+        : createMerchant(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<WmsMerchantApi.Merchant>();
+    if (!data || !data.id) {
+      return;
+    }
+    // 加载数据
+    modalApi.lock();
+    try {
+      formData.value = await getMerchant(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/2">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/warehouse/components/index.ts b/apps/web-ele/src/views/wms/md/warehouse/components/index.ts
new file mode 100644
index 000000000..38d2851c3
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/warehouse/components/index.ts
@@ -0,0 +1 @@
+export { default as WmsWarehouseSelect } from './warehouse-select.vue';
diff --git a/apps/web-ele/src/views/wms/md/warehouse/components/warehouse-select.vue b/apps/web-ele/src/views/wms/md/warehouse/components/warehouse-select.vue
new file mode 100644
index 000000000..d40833ed3
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/warehouse/components/warehouse-select.vue
@@ -0,0 +1,88 @@
+<script lang="ts" setup>
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+
+import { computed, onMounted, ref } from 'vue';
+
+import { ElOption, ElSelect } from 'element-plus';
+
+import { getWarehouseSimpleList } from '#/api/wms/md/warehouse';
+
+defineOptions({ name: 'WmsWarehouseSelect', inheritAttrs: false });
+
+withDefaults(
+  defineProps<{
+    clearable?: boolean;
+    disabled?: boolean;
+    modelValue?: number;
+    placeholder?: string;
+  }>(),
+  {
+    clearable: true,
+    disabled: false,
+    modelValue: undefined,
+    placeholder: '请选择仓库',
+  },
+);
+
+const emit = defineEmits<{
+  change: [warehouse: undefined | WmsWarehouseApi.Warehouse];
+  'update:modelValue': [value: number | undefined];
+}>();
+
+const loading = ref(false);
+const warehouseList = ref<WmsWarehouseApi.Warehouse[]>([]);
+
+const options = computed(() =>
+  warehouseList.value
+    .filter((warehouse) => warehouse.id !== undefined)
+    .map((warehouse) => ({
+      label: warehouse.name,
+      value: warehouse.id!,
+    })),
+);
+
+/** 选中变化 */
+function handleChange(value: number | string | undefined) {
+  const warehouseId = typeof value === 'number' ? value : undefined;
+  emit('update:modelValue', warehouseId);
+  emit(
+    'change',
+    warehouseList.value.find((warehouse) => warehouse.id === warehouseId),
+  );
+}
+
+/** 查询仓库精简列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    warehouseList.value = await getWarehouseSimpleList();
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <ElSelect
+    v-bind="$attrs"
+    :clearable="clearable"
+    :disabled="disabled"
+    :loading="loading"
+    :model-value="modelValue"
+    :placeholder="placeholder"
+    class="w-full"
+    filterable
+    @change="handleChange"
+  >
+    <ElOption
+      v-for="option in options"
+      :key="option.value"
+      :label="option.label"
+      :value="option.value"
+    />
+  </ElSelect>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/warehouse/data.ts b/apps/web-ele/src/views/wms/md/warehouse/data.ts
new file mode 100644
index 000000000..42cca9655
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/warehouse/data.ts
@@ -0,0 +1,139 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { h } from 'vue';
+
+import { ElButton } from 'element-plus';
+
+import { z } from '#/adapter/form';
+import { generateWmsCode } from '#/views/wms/utils/constants';
+
+/** 新增/修改仓库的表单 */
+export function useFormSchema(formApi?: any): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '仓库名称',
+      component: 'Input',
+      componentProps: {
+        maxLength: 50,
+        placeholder: '请输入仓库名称',
+      },
+      rules: z.string().min(1, '仓库名称不能为空').max(50),
+    },
+    {
+      fieldName: 'code',
+      label: '仓库编号',
+      component: 'Input',
+      componentProps: {
+        maxLength: 20,
+        placeholder: '请输入仓库编号',
+      },
+      rules: z.string().min(1, '仓库编号不能为空').max(20),
+      suffix: () => {
+        return h(
+          ElButton,
+          {
+            type: 'default',
+            onClick: () => {
+              formApi?.setFieldValue('code', generateWmsCode('W'));
+            },
+          },
+          { default: () => '生成' },
+        );
+      },
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        class: '!w-full',
+        controlsPosition: 'right',
+        min: 0,
+      },
+      rules: z.number().default(0),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+        rows: 3,
+      },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'name',
+      label: '仓库名称',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入仓库名称',
+      },
+    },
+    {
+      fieldName: 'code',
+      label: '仓库编号',
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入仓库编号',
+      },
+    },
+  ];
+}
+
+/** 列表的字段 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'name',
+      title: '仓库名称',
+      minWidth: 160,
+    },
+    {
+      field: 'code',
+      title: '仓库编号',
+      minWidth: 140,
+    },
+    {
+      field: 'remark',
+      title: '备注',
+      minWidth: 220,
+    },
+    {
+      field: 'sort',
+      title: '排序',
+      width: 100,
+      align: 'center',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 160,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/md/warehouse/index.vue b/apps/web-ele/src/views/wms/md/warehouse/index.vue
new file mode 100644
index 000000000..753bae133
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/warehouse/index.vue
@@ -0,0 +1,152 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import {
+  deleteWarehouse,
+  exportWarehouse,
+  getWarehousePage,
+} from '#/api/wms/md/warehouse';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'WmsWarehouse' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 创建仓库 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑仓库 */
+function handleEdit(row: WmsWarehouseApi.Warehouse) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除仓库 */
+async function handleDelete(row: WmsWarehouseApi.Warehouse) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.name]),
+  });
+  try {
+    await deleteWarehouse(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出仓库 */
+async function handleExport() {
+  const data = await exportWarehouse(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '仓库.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getWarehousePage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsWarehouseApi.Warehouse>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【基础】仓库"
+        url="https://doc.iocoder.cn/wms/md/warehouse/"
+      />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="仓库列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['仓库']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:warehouse:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:warehouse:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['wms:warehouse:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['wms:warehouse:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/md/warehouse/modules/form.vue b/apps/web-ele/src/views/wms/md/warehouse/modules/form.vue
new file mode 100644
index 000000000..93709fe89
--- /dev/null
+++ b/apps/web-ele/src/views/wms/md/warehouse/modules/form.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createWarehouse,
+  getWarehouse,
+  updateWarehouse,
+} from '#/api/wms/md/warehouse';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+defineOptions({ name: 'WmsWarehouseForm' });
+
+const emit = defineEmits(['success']);
+const formData = ref<WmsWarehouseApi.Warehouse>();
+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: 80,
+  },
+  layout: 'horizontal',
+  schema: [],
+  showDefaultActions: false,
+});
+
+/** 表单 schema 需要 formApi 引用，所以通过 setState 设置 schema */
+formApi.setState({ schema: useFormSchema(formApi) });
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = (await formApi.getValues()) as WmsWarehouseApi.Warehouse;
+    try {
+      await (formData.value?.id
+        ? updateWarehouse(data)
+        : createWarehouse(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      return;
+    }
+    const data = modalApi.getData<WmsWarehouseApi.Warehouse>();
+    if (!data || !data.id) {
+      await formApi.setValues({ sort: 0 });
+      return;
+    }
+    // 加载数据
+    modalApi.lock();
+    try {
+      formData.value = await getWarehouse(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-1/3">
+    <Form class="mx-4" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/check/data.ts b/apps/web-ele/src/views/wms/order/check/data.ts
new file mode 100644
index 000000000..97f6452f1
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/check/data.ts
@@ -0,0 +1,483 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+import type { NumberRangeValue } from '#/components/number-range-input';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import {
+  buildNumberRangeSchema,
+  NumberRangeInput,
+} from '#/components/number-range-input';
+import { getRangePickerDefaultProps } from '#/utils';
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  getLossClass,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+  roundPrice,
+  sumPrice,
+  sumQuantity,
+} from '#/views/wms/utils/format';
+
+/** 拆分数量/金额区间字段，适配后端 Min/Max 查询参数 */
+function splitNumberRange(minFieldName: string, maxFieldName: string) {
+  return (
+    value: NumberRangeValue | undefined,
+    setValue: (fieldName: string, value: number | undefined) => void,
+  ) => {
+    setValue(minFieldName, value?.[0]);
+    setValue(maxFieldName, value?.[1]);
+    return undefined;
+  };
+}
+
+/** 构建允许负数的区间搜索项，盘库盈亏数量需要支持盘亏 */
+function buildSignedNumberRangeSchema(
+  label: string,
+  fieldName: string,
+  minFieldName: string,
+  maxFieldName: string,
+  precision: number,
+): VbenFormSchema {
+  return {
+    component: markRaw(NumberRangeInput),
+    componentProps: {
+      precision,
+    },
+    fieldName,
+    label,
+    valueFormat: splitNumberRange(minFieldName, maxFieldName),
+  };
+}
+
+/** 计算单据盈亏金额 */
+export function getOrderDifferencePrice(order: {
+  actualPrice?: number;
+  totalPrice?: number;
+}) {
+  return roundPrice(Number(order.actualPrice || 0) - Number(order.totalPrice || 0));
+}
+
+/** 计算明细盈亏数量 */
+export function getDetailDifferenceQuantity(detail: {
+  checkQuantity?: number;
+  quantity?: number;
+}) {
+  return Number(detail.checkQuantity || 0) - Number(detail.quantity || 0);
+}
+
+/** 计算明细实际金额 */
+export function getDetailActualPrice(detail: {
+  checkQuantity?: number;
+  price?: number;
+}) {
+  if (
+    detail.checkQuantity === undefined ||
+    detail.checkQuantity === null ||
+    detail.price === undefined ||
+    detail.price === null
+  ) {
+    return undefined;
+  }
+  return roundPrice(Number(detail.checkQuantity) * Number(detail.price));
+}
+
+/** 计算明细盈亏金额 */
+export function getDetailDifferencePrice(detail: {
+  checkQuantity?: number;
+  price?: number;
+  quantity?: number;
+}) {
+  if (detail.price === undefined || detail.price === null) {
+    return undefined;
+  }
+  return roundPrice(getDetailDifferenceQuantity(detail) * Number(detail.price));
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入盘库单号',
+      },
+      fieldName: 'no',
+      label: '盘库单号',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_STATUS, 'number'),
+        placeholder: '请选择单据状态',
+      },
+      fieldName: 'status',
+      label: '单据状态',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'warehouseId',
+      label: '仓库',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+    },
+    buildSignedNumberRangeSchema(
+      '盈亏数量',
+      'totalQuantityRange',
+      'totalQuantityMin',
+      'totalQuantityMax',
+      QUANTITY_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '总金额',
+      'totalPriceRange',
+      'totalPriceMin',
+      'totalPriceMax',
+      PRICE_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '实际金额',
+      'actualPriceRange',
+      'actualPriceMin',
+      'actualPriceMax',
+      PRICE_PRECISION,
+    ),
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        filterable: true,
+        labelField: 'nickname',
+        placeholder: '请选择创建用户',
+        valueField: 'id',
+      },
+      fieldName: 'creator',
+      label: '创建用户',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        filterable: true,
+        labelField: 'nickname',
+        placeholder: '请选择更新用户',
+        valueField: 'id',
+      },
+      fieldName: 'updater',
+      label: '更新用户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'updateTime',
+      label: '更新时间',
+    },
+  ];
+}
+
+/** 列表表格列 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      fixed: 'left',
+      slots: { content: 'expand_content' },
+      type: 'expand',
+      width: 48,
+    },
+    {
+      field: 'no',
+      fixed: 'left',
+      slots: { default: 'no' },
+      title: '单号',
+      width: 210,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_STATUS },
+      },
+      field: 'status',
+      fixed: 'left',
+      title: '盘库状态',
+      width: 110,
+    },
+    {
+      field: 'warehouseName',
+      minWidth: 180,
+      title: '仓库',
+    },
+    {
+      field: 'quantityAmount',
+      minWidth: 200,
+      slots: { default: 'quantityAmount' },
+      title: '盈亏/金额(元)',
+    },
+    {
+      field: 'operateInfo',
+      minWidth: 280,
+      slots: { default: 'operateInfo' },
+      title: '操作信息',
+    },
+    {
+      field: 'remark',
+      minWidth: 160,
+      title: '备注',
+    },
+    {
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+      title: '操作',
+      width: 220,
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '盘库单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'warehouseName',
+      label: '仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'orderTime',
+      label: '单据日期',
+      render: (val) => formatDate(val, 'YYYY-MM-DD') || '-',
+    },
+    {
+      field: 'status',
+      label: '单据状态',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_ORDER_STATUS,
+              value: val,
+            }),
+    },
+    {
+      field: 'totalQuantity',
+      label: '盈亏数量',
+      render: (val) =>
+        h('span', { class: getLossClass(val) }, formatQuantity(val) || '-'),
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'actualPrice',
+      label: '实际金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'differencePrice',
+      label: '实际盈亏金额',
+      render: (_val, data) => {
+        const differencePrice = getOrderDifferencePrice(data || {});
+        return h(
+          'span',
+          { class: getLossClass(differencePrice) },
+          formatPrice(differencePrice) || '-',
+        );
+      },
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+      render: (val, data) => val || data?.creator || '-',
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'updaterName',
+      label: '更新人',
+      render: (val, data) => val || data?.updater || '-',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      render: (val) => val || '-',
+      span: 2,
+    },
+  ];
+}
+
+/** 表单的配置项 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入盘库单号',
+      },
+      fieldName: 'no',
+      label: '盘库单号',
+      rules: z.string().min(1, '盘库单号不能为空').max(64),
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        disabled: true,
+      },
+      fieldName: 'warehouseId',
+      label: '仓库',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择单据日期',
+        valueFormat: 'x',
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        disabled: true,
+      },
+      fieldName: 'actualPrice',
+      label: '实际金额',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+      fieldName: 'remark',
+      formItemClass: 'col-span-2',
+      label: '备注',
+    },
+  ];
+}
+
+/** 选择盘库仓库表单的配置项 */
+export function useWarehouseFormSchema(
+  onWarehouseChange: (warehouse: unknown) => void,
+): VbenFormSchema[] {
+  return [
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        onChange: onWarehouseChange,
+      },
+      fieldName: 'warehouseId',
+      label: '仓库',
+      rules: 'required',
+    },
+  ];
+}
+
+interface CheckOrderDetailFooterRow {
+  actualPrice?: number;
+  checkQuantity?: number;
+  differencePrice?: number;
+  differenceQuantity?: number;
+  quantity?: number;
+}
+type CheckOrderDetailFooterColumn = Pick<
+  NonNullable<NonNullable<VxeTableGridOptions['columns']>[number]>,
+  'field'
+>;
+
+/** 明细表格的合计行 */
+export function getCheckDetailFooter({
+  columns,
+  data,
+}: {
+  columns: CheckOrderDetailFooterColumn[];
+  data: CheckOrderDetailFooterRow[];
+}) {
+  return [
+    columns.map((column, index) => {
+      if (index === 0) {
+        return '合计';
+      }
+      if (column.field === 'quantity') {
+        return formatSumQuantity(data, (detail) => detail.quantity);
+      }
+      if (column.field === 'checkQuantity') {
+        return formatSumQuantity(data, (detail) => detail.checkQuantity);
+      }
+      if (column.field === 'actualPrice') {
+        return formatSumPrice(data, (detail) => detail.actualPrice);
+      }
+      if (column.field === 'differenceQuantity') {
+        return formatQuantity(
+          sumQuantity(data, (detail) => detail.differenceQuantity),
+        );
+      }
+      if (column.field === 'differencePrice') {
+        return formatPrice(sumPrice(data, (detail) => detail.differencePrice));
+      }
+      return '';
+    }),
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/order/check/index.vue b/apps/web-ele/src/views/wms/order/check/index.vue
new file mode 100644
index 000000000..70217412c
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/check/index.vue
@@ -0,0 +1,378 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsCheckOrderApi } from '#/api/wms/order/check';
+import type { WmsCheckOrderDetailApi } from '#/api/wms/order/check/detail';
+
+import { reactive, ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import {
+  ACTION_ICON,
+  TableAction,
+  useVbenVxeGrid,
+  VxeColumn,
+  VxeTable,
+} from '#/adapter/vxe-table';
+import {
+  deleteCheckOrder,
+  exportCheckOrder,
+  getCheckOrderDetailListByOrderId,
+  getCheckOrderPage,
+} from '#/api/wms/order/check';
+import { $t } from '#/locales';
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  formatPrice,
+  formatQuantity,
+  getLossClass,
+} from '#/views/wms/utils/format';
+
+import {
+  getDetailActualPrice,
+  getDetailDifferencePrice,
+  getDetailDifferenceQuantity,
+  getOrderDifferencePrice,
+  useGridColumns,
+  useGridFormSchema,
+} from './data';
+import CheckOrderDetail from './modules/detail.vue';
+import CheckOrderForm from './modules/form.vue';
+import CheckOrderPrint from './modules/print.vue';
+
+defineOptions({ name: 'WmsCheckOrder' });
+
+const printRef = ref<InstanceType<typeof CheckOrderPrint>>();
+const detailMap = reactive<Record<number, WmsCheckOrderDetailApi.CheckOrderDetail[]>>(
+  {},
+);
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: CheckOrderForm,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: CheckOrderDetail,
+  destroyOnClose: true,
+});
+
+/** 清空展开明细缓存 */
+function clearDetailMap() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  clearDetailMap();
+  gridApi.query();
+}
+
+/** 创建盘库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑盘库单 */
+function handleEdit(row: WmsCheckOrderApi.CheckOrder) {
+  formModalApi.setData({ id: row.id!, type: 'update' }).open();
+}
+
+/** 查看盘库单详情 */
+function handleDetail(row: WmsCheckOrderApi.CheckOrder) {
+  detailModalApi.setData({ id: row.id! }).open();
+}
+
+/** 获取已展开行的明细 */
+function getExpandedDetails(row: WmsCheckOrderApi.CheckOrder) {
+  return detailMap[row.id!] || [];
+}
+
+/** 展开列表行时懒加载盘库明细 */
+async function handleExpandChange(
+  row: WmsCheckOrderApi.CheckOrder,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  delete detailMap[row.id!];
+  detailMap[row.id!] = await getCheckOrderDetailListByOrderId(row.id!);
+}
+
+/** 判断盘库单是否可修改 */
+function canUpdateCheckOrder(status?: number) {
+  return status !== undefined && OrderUpdateStatusList.includes(status);
+}
+
+/** 判断盘库单是否可删除 */
+function canDeleteCheckOrder(status?: number) {
+  return status !== undefined && OrderDeleteStatusList.includes(status);
+}
+
+/** 获取修改按钮禁用提示 */
+function getCheckOrderUpdateTip(status?: number) {
+  if (canUpdateCheckOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已盘库，无法修改';
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改';
+  }
+  return '当前状态无法修改';
+}
+
+/** 获取删除按钮禁用提示 */
+function getCheckOrderDeleteTip(status?: number) {
+  if (canDeleteCheckOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已盘库，无法删除';
+  }
+  return '当前状态无法删除';
+}
+
+/** 删除盘库单 */
+async function handleDelete(row: WmsCheckOrderApi.CheckOrder) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.no]),
+  });
+  try {
+    await deleteCheckOrder(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出盘库单 */
+async function handleExport() {
+  const data = await exportCheckOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '盘库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    expandConfig: {
+      padding: true,
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getCheckOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsCheckOrderApi.CheckOrder>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: WmsCheckOrderApi.CheckOrder;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="【单据】盘库" url="https://doc.iocoder.cn/wms/order/check/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <CheckOrderPrint ref="printRef" />
+
+    <Grid table-title="盘库单列表">
+      <template #expand_content="{ row }">
+        <VxeTable
+          :data="getExpandedDetails(row)"
+          border
+          :show-overflow="true"
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ detail.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ detail.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="账面数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.quantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="实盘数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.checkQuantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="单价(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(detail.price) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="实际金额(元)" align="right" width="140">
+            <template #default="{ row: detail }">
+              {{ formatPrice(getDetailActualPrice(detail)) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="盈亏数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              <span :class="getLossClass(getDetailDifferenceQuantity(detail))">
+                {{ formatQuantity(getDetailDifferenceQuantity(detail)) }}
+              </span>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="实际盈亏金额(元)" align="right" width="160">
+            <template #default="{ row: detail }">
+              <span :class="getLossClass(getDetailDifferencePrice(detail))">
+                {{ formatPrice(getDetailDifferencePrice(detail)) || '-' }}
+              </span>
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['盘库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:check-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:check-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div>
+          单号：
+          <a class="text-primary" @click="handleDetail(row)">{{ row.no }}</a>
+        </div>
+      </template>
+      <template #quantityAmount="{ row }">
+        <div class="flex items-center justify-between">
+          <span>盈亏数：</span>
+          <span :class="getLossClass(row.totalQuantity)">
+            {{ formatQuantity(row.totalQuantity) }}
+          </span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>总金额：</span>
+          <span>{{ formatPrice(row.totalPrice) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>实际金额：</span>
+          <span>{{ formatPrice(row.actualPrice) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>盈亏金额：</span>
+          <span :class="getLossClass(getOrderDifferencePrice(row))">
+            {{ formatPrice(getOrderDifferencePrice(row)) }}
+          </span>
+        </div>
+      </template>
+      <template #operateInfo="{ row }">
+        <div>
+          创建：{{ formatDateTime(row.createTime) || '-' }} /
+          {{ row.creatorName || row.creator || '-' }}
+        </div>
+        <div>
+          更新：{{ formatDateTime(row.updateTime) || '-' }} /
+          {{ row.updaterName || row.updater || '-' }}
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              disabled: !canUpdateCheckOrder(row.status),
+              tooltip: getCheckOrderUpdateTip(row.status),
+              auth: ['wms:check-order:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: !canDeleteCheckOrder(row.status),
+              tooltip: getCheckOrderDeleteTip(row.status),
+              auth: ['wms:check-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '打印',
+              type: 'primary',
+              link: true,
+              auth: ['wms:check-order:query'],
+              onClick: () => printRef?.print(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/check/modules/detail.vue b/apps/web-ele/src/views/wms/order/check/modules/detail.vue
new file mode 100644
index 000000000..d26132b29
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/check/modules/detail.vue
@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { WmsCheckOrderApi } from '#/api/wms/order/check';
+import type { WmsCheckOrderDetailApi } from '#/api/wms/order/check/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  getCheckOrder,
+  getCheckOrderDetailListByOrderId,
+} from '#/api/wms/order/check';
+import { useDescription } from '#/components/description';
+import {
+  formatPrice,
+  formatQuantity,
+  getLossClass,
+} from '#/views/wms/utils/format';
+
+import {
+  getCheckDetailFooter,
+  getDetailActualPrice,
+  getDetailDifferencePrice,
+  getDetailDifferenceQuantity,
+  useDetailSchema,
+} from '../data';
+
+interface DetailRow extends WmsCheckOrderDetailApi.CheckOrderDetail {
+  actualPrice?: number;
+  differencePrice?: number;
+  differenceQuantity?: number;
+}
+
+defineOptions({ name: 'WmsCheckOrderDetail' });
+
+const detailData = ref<WmsCheckOrderApi.CheckOrder>({});
+
+/** 详情明细补齐实际金额和盈亏字段，便于表格与 footer 统一渲染 */
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    actualPrice: getDetailActualPrice(detail),
+    differencePrice: getDetailDifferencePrice(detail),
+    differenceQuantity: getDetailDifferenceQuantity(detail),
+  })),
+);
+
+const [Descriptions] = useDescription({
+  border: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      detailData.value = {};
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const order = await getCheckOrder(data.id);
+      const details =
+        order.details || (await getCheckOrderDetailListByOrderId(data.id));
+      detailData.value = { ...order, details };
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="盘库单详情"
+    class="w-2/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mx-4 space-y-4">
+      <Descriptions :data="detailData" />
+      <VxeTable
+        :data="detailRows"
+        border
+        empty-text="暂无商品明细"
+        :footer-method="getCheckDetailFooter"
+        :show-overflow="true"
+        show-footer
+        size="small"
+      >
+        <VxeColumn title="商品信息" min-width="200">
+          <template #default="{ row }">
+            <div>{{ row.itemName || '-' }}</div>
+            <div v-if="row.itemCode" class="text-xs text-gray-500">
+              商品编号：{{ row.itemCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="规格信息" min-width="200">
+          <template #default="{ row }">
+            <div>{{ row.skuName || '-' }}</div>
+            <div v-if="row.skuCode" class="text-xs text-gray-500">
+              规格编号：{{ row.skuCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="quantity" title="账面数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.quantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn title="单价(元)" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatPrice(row.price) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="checkQuantity" title="实盘数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.checkQuantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="actualPrice" title="实际金额(元)" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.actualPrice) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn
+          field="differenceQuantity"
+          title="盈亏数量"
+          align="right"
+          width="120"
+        >
+          <template #default="{ row }">
+            <span :class="getLossClass(row.differenceQuantity)">
+              {{ formatQuantity(row.differenceQuantity) || '-' }}
+            </span>
+          </template>
+        </VxeColumn>
+        <VxeColumn
+          field="differencePrice"
+          title="实际盈亏金额(元)"
+          align="right"
+          width="160"
+        >
+          <template #default="{ row }">
+            <span :class="getLossClass(row.differencePrice)">
+              {{ formatPrice(row.differencePrice) || '-' }}
+            </span>
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/check/modules/form.vue b/apps/web-ele/src/views/wms/order/check/modules/form.vue
new file mode 100644
index 000000000..284c4e41e
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/check/modules/form.vue
@@ -0,0 +1,732 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { WmsInventoryApi } from '#/api/wms/inventory';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { WmsCheckOrderApi } from '#/api/wms/order/check';
+import type { WmsCheckOrderDetailApi } from '#/api/wms/order/check/detail';
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEqual } from '@vben/utils';
+
+import { ElInputNumber, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { TableAction, VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import { getInventoryList } from '#/api/wms/inventory';
+import {
+  cancelCheckOrder,
+  completeCheckOrder,
+  createCheckOrder,
+  getCheckOrder,
+  getCheckOrderDetailListByOrderId,
+  updateCheckOrder,
+} from '#/api/wms/order/check';
+import { $t } from '#/locales';
+import { WmsItemSkuSelect } from '#/views/wms/md/item/sku/components';
+import {
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  dividePrice,
+  formatPrice,
+  formatQuantity,
+  getLossClass,
+  multiplyPrice,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+  sumPrice,
+} from '#/views/wms/utils/format';
+import { generateOrderNo } from '#/views/wms/utils/order';
+
+import {
+  getCheckDetailFooter,
+  getDetailDifferencePrice,
+  getDetailDifferenceQuantity,
+  useFormSchema,
+  useWarehouseFormSchema,
+} from '../data';
+
+interface CheckInventoryRow extends WmsInventoryApi.Inventory {
+  availableQuantity?: number;
+  price?: number;
+}
+
+interface DetailRow extends WmsCheckOrderDetailApi.CheckOrderDetail {
+  actualPrice?: number;
+  differencePrice?: number;
+  differenceQuantity?: number;
+  seq: number;
+}
+
+defineOptions({ name: 'WmsCheckOrderForm' });
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const formData = ref<WmsCheckOrderApi.CheckOrder>({});
+const formMode = ref('create');
+const originalSubmitData = ref<WmsCheckOrderApi.CheckOrder>();
+const details = ref<DetailRow[]>([]);
+const detailTableRef = ref<VxeTableInstance>();
+const skuSelectRef = ref<InstanceType<typeof WmsItemSkuSelect>>();
+const selectingWarehouse = ref(false);
+const warehouseName = ref<string>();
+let detailSeq = 0; // 明细行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+
+const getTitle = computed(() => {
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['盘库单'])
+    : $t('ui.actionTitle.create', ['盘库单']);
+});
+
+const modalTitle = computed(() => {
+  return selectingWarehouse.value ? '选择盘库仓库' : getTitle.value;
+});
+const modalClass = computed(() => {
+  return selectingWarehouse.value ? 'w-[420px]' : 'w-3/4';
+});
+
+const isPrepareOrder = computed(() => {
+  return (
+    !formData.value?.id ||
+    (formData.value.status !== undefined &&
+      OrderUpdateStatusList.includes(formData.value.status))
+  );
+});
+const isSavedPrepareOrder = computed(() => {
+  return (
+    !!formData.value?.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+  );
+});
+
+/** 表单顶部实际金额来自明细合计，保持和 vue3 的只读汇总字段一致 */
+const actualPrice = computed(() =>
+  sumPrice(details.value, (detail) => getDetailActualPrice(detail)),
+);
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+const [WarehouseForm, warehouseFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 80,
+  },
+  layout: 'horizontal',
+  schema: useWarehouseFormSchema(handleWarehouseSelect),
+  showDefaultActions: false,
+});
+
+/** 记录新增盘库单前置选择的仓库名称 */
+function handleWarehouseSelect(warehouse: unknown) {
+  warehouseName.value = (warehouse as undefined | WmsWarehouseApi.Warehouse)
+    ?.name;
+}
+
+/** 初始化新增盘库单草稿 */
+async function initCreateForm(warehouse: {
+  warehouseId?: number;
+  warehouseName?: string;
+}) {
+  formData.value = {
+    details: [],
+    no: generateOrderNo('PK'),
+    status: OrderStatusEnum.PREPARE,
+    warehouseId: warehouse.warehouseId,
+    warehouseName: warehouse.warehouseName,
+  };
+  setDetails([]);
+  await formApi.resetForm();
+  await formApi.setValues(formData.value);
+  await nextTick();
+  syncActualPriceField();
+  originalSubmitData.value = await buildSubmitData();
+}
+
+/** 确认前置选择仓库，进入主表单 */
+async function handleWarehouseConfirm() {
+  const { valid } = await warehouseFormApi.validate();
+  if (!valid) {
+    return;
+  }
+  const values = (await warehouseFormApi.getValues()) as {
+    warehouseId?: number;
+  };
+  selectingWarehouse.value = false;
+  await nextTick();
+  await initCreateForm({
+    warehouseId: values.warehouseId,
+    warehouseName: warehouseName.value,
+  });
+}
+
+/** 同步表单顶部只读实际金额 */
+function syncActualPriceField() {
+  void formApi.setFieldValue(
+    'actualPrice',
+    formatPrice(actualPrice.value) || '0.00',
+  );
+}
+
+watch(actualPrice, syncActualPriceField);
+
+/** 计算明细实际金额 */
+function getDetailActualPrice(detail: DetailRow) {
+  return detail.actualPrice ?? multiplyPrice(detail.checkQuantity, detail.price);
+}
+
+/** 刷新明细行的盈亏数据 */
+function refreshDetailCalculatedFields(detail: DetailRow) {
+  detail.differenceQuantity = getDetailDifferenceQuantity(detail);
+  detail.differencePrice = getDetailDifferencePrice(detail);
+}
+
+/** 标准化明细行，补齐本地序号和计算字段 */
+function normalizeDetail(
+  detail: WmsCheckOrderDetailApi.CheckOrderDetail & { actualPrice?: number },
+): DetailRow {
+  detailSeq += 1;
+  const row: DetailRow = {
+    ...detail,
+    actualPrice:
+      detail.actualPrice ?? multiplyPrice(detail.checkQuantity, detail.price),
+    seq: detailSeq,
+  };
+  refreshDetailCalculatedFields(row);
+  return row;
+}
+
+/** 根据库存构建盘库明细 */
+function buildDetail(inventory: CheckInventoryRow): DetailRow {
+  return normalizeDetail({
+    actualPrice: multiplyPrice(inventory.availableQuantity, inventory.price),
+    availableQuantity: inventory.availableQuantity,
+    checkQuantity: inventory.availableQuantity,
+    id: undefined,
+    inventoryId: inventory.id,
+    itemCode: inventory.itemCode,
+    itemId: inventory.itemId,
+    itemName: inventory.itemName,
+    price: inventory.price,
+    quantity: inventory.availableQuantity,
+    skuCode: inventory.skuCode,
+    skuId: inventory.skuId,
+    skuName: inventory.skuName,
+    unit: inventory.unit,
+    warehouseId: inventory.warehouseId,
+    warehouseName: inventory.warehouseName,
+  });
+}
+
+/** 构建零库存盘库明细，用于盘点仓库内暂无库存的商品 */
+function buildZeroInventoryDetail(sku: WmsItemSkuApi.ItemSku): DetailRow {
+  return normalizeDetail({
+    actualPrice: 0,
+    availableQuantity: 0,
+    checkQuantity: 0,
+    id: undefined,
+    inventoryId: undefined,
+    itemCode: sku.itemCode,
+    itemId: sku.itemId,
+    itemName: sku.itemName,
+    price: sku.costPrice,
+    quantity: 0,
+    skuCode: sku.code,
+    skuId: sku.id,
+    skuName: sku.name,
+    unit: sku.unit,
+    warehouseId: formData.value.warehouseId,
+    warehouseName: formData.value.warehouseName,
+  });
+}
+
+/** 设置盘库明细 */
+function setDetails(list?: WmsCheckOrderDetailApi.CheckOrderDetail[]) {
+  detailSeq = 0;
+  details.value = (list || []).map((detail) => normalizeDetail(detail));
+  void refreshDetailFooter();
+}
+
+/** 刷新明细合计行 */
+async function refreshDetailFooter() {
+  await nextTick();
+  await detailTableRef.value?.updateFooter();
+}
+
+/** 导入当前仓库的全部库存余额 */
+async function handleImportAllInventory() {
+  if (!formData.value.warehouseId) {
+    ElMessage.warning('请先选择仓库');
+    return;
+  }
+  if (details.value.length > 0) {
+    await confirm('导入仓库库存会覆盖当前盘库明细，是否继续？');
+  }
+  modalApi.lock();
+  try {
+    const inventories = await loadWarehouseInventoryList();
+    details.value = inventories.map((inventory) =>
+      buildDetail({ ...inventory, availableQuantity: inventory.quantity }),
+    );
+    await refreshDetailFooter();
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 打开盘点商品添加弹窗，已导入/已添加 SKU 在选择器内禁选 */
+function handleAddSkuInventory() {
+  if (!formData.value.warehouseId) {
+    ElMessage.warning('请先选择仓库');
+    return;
+  }
+  skuSelectRef.value?.open(getSelectedSkuIds(), {
+    multiple: false,
+  });
+}
+
+/** 选择商品 SKU */
+async function handleSelectSku(skus: WmsItemSkuApi.ItemSku[]) {
+  if (skus.length === 0) {
+    return;
+  }
+  modalApi.lock();
+  try {
+    const warehouseInventoryMap = await getWarehouseInventoryMap();
+    const selectedSkuIds = new Set(getSelectedSkuIds());
+    let changed = false;
+    for (const sku of skus) {
+      if (!sku.id || selectedSkuIds.has(sku.id)) {
+        continue;
+      }
+      const inventory = warehouseInventoryMap.get(sku.id);
+      details.value.push(
+        inventory
+          ? buildDetail({ ...inventory, availableQuantity: inventory.quantity })
+          : buildZeroInventoryDetail(sku),
+      );
+      selectedSkuIds.add(sku.id);
+      changed = true;
+    }
+    if (changed) {
+      await refreshDetailFooter();
+    }
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 获得已导入/已添加 SKU 编号，避免重复盘点同一规格 */
+function getSelectedSkuIds() {
+  return details.value
+    .map((detail) => detail.skuId)
+    .filter((id): id is number => id !== undefined);
+}
+
+/** 查询当前仓库全部库存余额 */
+async function loadWarehouseInventoryList(): Promise<CheckInventoryRow[]> {
+  return (await getInventoryList({
+    warehouseId: formData.value.warehouseId!,
+  })) as CheckInventoryRow[];
+}
+
+/** 获得当前仓库 SKU 对应库存余额，用于添加单个 SKU 时带入账面库存 */
+async function getWarehouseInventoryMap(): Promise<Map<number, CheckInventoryRow>> {
+  const inventories = await loadWarehouseInventoryList();
+  return new Map(
+    inventories
+      .filter((inventory) => !!inventory.skuId)
+      .map((inventory) => [inventory.skuId!, inventory] as const),
+  );
+}
+
+/** 删除商品明细 */
+function handleDeleteDetail(row: DetailRow) {
+  const index = details.value.findIndex((detail) => detail.seq === row.seq);
+  if (index !== -1) {
+    details.value.splice(index, 1);
+    void refreshDetailFooter();
+  }
+}
+
+/** 明细实盘数量变化 */
+function handleDetailCheckQuantityChange(detail: DetailRow) {
+  if (detail.price !== undefined && detail.price !== null) {
+    detail.actualPrice = multiplyPrice(detail.checkQuantity, detail.price);
+  } else {
+    detail.price = dividePrice(detail.actualPrice, detail.checkQuantity);
+  }
+  refreshDetailCalculatedFields(detail);
+  void refreshDetailFooter();
+}
+
+/** 明细单价变化 */
+function handleDetailPriceChange(detail: DetailRow) {
+  detail.actualPrice = multiplyPrice(detail.checkQuantity, detail.price);
+  refreshDetailCalculatedFields(detail);
+  void refreshDetailFooter();
+}
+
+/** 明细实际金额变化 */
+function handleDetailActualPriceChange(detail: DetailRow) {
+  detail.price = dividePrice(detail.actualPrice, detail.checkQuantity);
+  refreshDetailCalculatedFields(detail);
+  void refreshDetailFooter();
+}
+
+/** 校验商品明细 */
+function validateDetails(required = false) {
+  if (details.value.length === 0) {
+    if (required) {
+      ElMessage.error('至少包含一条盘库明细');
+      return false;
+    }
+    return true;
+  }
+  for (let index = 0; index < details.value.length; index += 1) {
+    const detail = details.value[index]!;
+    if (
+      detail.checkQuantity === undefined ||
+      detail.checkQuantity === null ||
+      detail.checkQuantity < 0
+    ) {
+      ElMessage.error(`第 ${index + 1} 行明细实盘数量不能小于 0`);
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 构建提交用的明细数据 */
+function buildSubmitDetails() {
+  return details.value.map((row) => {
+    const {
+      actualPrice: _actualPrice,
+      availableQuantity: _availableQuantity,
+      differencePrice: _differencePrice,
+      differenceQuantity: _differenceQuantity,
+      seq: _seq,
+      ...detail
+    } = row;
+    return detail;
+  });
+}
+
+/** 构建提交用的单据数据 */
+async function buildSubmitData(): Promise<WmsCheckOrderApi.CheckOrder> {
+  const values = (await formApi.getValues()) as WmsCheckOrderApi.CheckOrder;
+  const {
+    actualPrice: _formActualPrice,
+    details: _formDetails,
+    totalPrice: _formTotalPrice,
+    totalQuantity: _formTotalQuantity,
+    ...submitValues
+  } = values;
+  const {
+    actualPrice: _actualPrice,
+    details: _details,
+    totalPrice: _totalPrice,
+    totalQuantity: _totalQuantity,
+    ...order
+  } = formData.value;
+  return {
+    ...order,
+    ...submitValues,
+    details: buildSubmitDetails(),
+  };
+}
+
+/** 完成盘库 */
+async function handleFormComplete() {
+  const { valid } = await formApi.validate();
+  if (!valid || !validateDetails(true) || !formData.value?.id) {
+    return;
+  }
+  await confirm('确认完成盘库？完成后将更新库存。');
+  modalApi.lock();
+  try {
+    const data = await buildSubmitData();
+    if (!isEqual(data, originalSubmitData.value)) {
+      await updateCheckOrder(data);
+    }
+    await completeCheckOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    ElMessage.success('盘库成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 作废盘库单 */
+async function handleFormCancel() {
+  if (!formData.value?.id) {
+    return;
+  }
+  await confirm('确认作废该盘库单？作废后不可恢复。');
+  modalApi.lock();
+  try {
+    await cancelCheckOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    ElMessage.success('作废成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (selectingWarehouse.value) {
+      await handleWarehouseConfirm();
+      return;
+    }
+    const { valid } = await formApi.validate();
+    if (!valid || !validateDetails(false) || !isPrepareOrder.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await buildSubmitData();
+    try {
+      await (formMode.value === 'update'
+        ? updateCheckOrder(data)
+        : createCheckOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {};
+      originalSubmitData.value = undefined;
+      selectingWarehouse.value = false;
+      warehouseName.value = undefined;
+      setDetails([]);
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      type?: string;
+    }>();
+    formMode.value = data?.type || (data?.id ? 'update' : 'create');
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        // 加载数据
+        const order = await getCheckOrder(data.id);
+        const orderDetails =
+          order.details || (await getCheckOrderDetailListByOrderId(data.id));
+        formData.value = { ...order, details: orderDetails };
+        setDetails(orderDetails);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+        await nextTick();
+        syncActualPriceField();
+        originalSubmitData.value = await buildSubmitData();
+      } finally {
+        modalApi.unlock();
+      }
+      return;
+    }
+    // 新增时先选择盘库仓库，再进入主表单
+    selectingWarehouse.value = true;
+    warehouseName.value = undefined;
+    formData.value = {};
+    setDetails([]);
+    await warehouseFormApi.resetForm();
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="modalTitle"
+    :class="modalClass"
+    :show-confirm-button="selectingWarehouse || isPrepareOrder"
+  >
+    <template v-if="selectingWarehouse" #confirmText>开始盘库</template>
+    <WarehouseForm v-if="selectingWarehouse" class="mx-4" />
+    <div v-else class="mx-4">
+      <Form />
+      <div class="mt-4">
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-semibold">盘库明细</span>
+          <TableAction
+            :actions="[
+              {
+                label: '导入仓库库存',
+                disabled: !formData.warehouseId,
+                onClick: handleImportAllInventory,
+                type: 'primary',
+              },
+              {
+                label: '添加盘点商品',
+                disabled: !formData.warehouseId,
+                onClick: handleAddSkuInventory,
+                type: 'primary',
+              },
+            ]"
+          />
+        </div>
+        <VxeTable
+          ref="detailTableRef"
+          :data="details"
+          border
+          empty-text="暂无商品明细"
+          :footer-method="getCheckDetailFooter"
+          :show-overflow="true"
+          show-footer
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="210">
+            <template #default="{ row }">
+              <div>{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ row.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="210">
+            <template #default="{ row }">
+              <div>{{ row.skuName || '-' }}</div>
+              <div v-if="row.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ row.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn field="quantity" title="账面库存" align="right" width="120">
+            <template #default="{ row }">
+              {{ formatQuantity(row.quantity) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn field="price" title="单价(元)" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.price"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="单价"
+                @change="handleDetailPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="checkQuantity" title="实际库存" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.checkQuantity"
+                :controls="false"
+                :min="0"
+                :precision="QUANTITY_PRECISION"
+                class="!w-full"
+                placeholder="数量"
+                @change="handleDetailCheckQuantityChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="actualPrice" title="实际金额(元)" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.actualPrice"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="金额"
+                @change="handleDetailActualPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn
+            field="differenceQuantity"
+            title="盈亏数"
+            align="right"
+            width="120"
+          >
+            <template #default="{ row }">
+              <span :class="getLossClass(row.differenceQuantity)">
+                {{ formatQuantity(row.differenceQuantity) }}
+              </span>
+            </template>
+          </VxeColumn>
+          <VxeColumn
+            field="differencePrice"
+            title="实际盈亏金额(元)"
+            align="right"
+            width="160"
+          >
+            <template #default="{ row }">
+              <span :class="getLossClass(row.differencePrice)">
+                {{ formatPrice(row.differencePrice) || '-' }}
+              </span>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="操作" align="center" fixed="right" width="90">
+            <template #default="{ row }">
+              <TableAction
+                :actions="[
+                  {
+                    label: '删除',
+                    type: 'danger',
+                    link: true,
+                    onClick: handleDeleteDetail.bind(null, row),
+                  },
+                ]"
+              />
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <div
+        v-if="!selectingWarehouse && isSavedPrepareOrder"
+        class="flex flex-auto items-center gap-2"
+      >
+        <TableAction
+          :actions="[
+            {
+              label: '完成盘库',
+              type: 'primary',
+              auth: ['wms:check-order:complete'],
+              onClick: handleFormComplete,
+            },
+            {
+              label: '作废',
+              type: 'danger',
+              auth: ['wms:check-order:cancel'],
+              onClick: handleFormCancel,
+            },
+          ]"
+        />
+      </div>
+    </template>
+    <WmsItemSkuSelect ref="skuSelectRef" @change="handleSelectSku" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/check/modules/print.vue b/apps/web-ele/src/views/wms/order/check/modules/print.vue
new file mode 100644
index 000000000..9676fe385
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/check/modules/print.vue
@@ -0,0 +1,296 @@
+<script lang="ts" setup>
+import type { WmsCheckOrderApi } from '#/api/wms/order/check';
+import type { WmsCheckOrderDetailApi } from '#/api/wms/order/check/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Barcode, BarcodeFormatEnum } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import {
+  getCheckOrder,
+  getCheckOrderDetailListByOrderId,
+} from '#/api/wms/order/check';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  getLossClass,
+  sumPrice,
+  sumQuantity,
+} from '#/views/wms/utils/format';
+
+import {
+  getDetailActualPrice,
+  getDetailDifferencePrice,
+  getDetailDifferenceQuantity,
+  getOrderDifferencePrice,
+} from '../data';
+
+interface PrintRow extends WmsCheckOrderDetailApi.CheckOrderDetail {
+  actualPrice?: number;
+  differencePrice?: number;
+  differenceQuantity?: number;
+}
+
+defineOptions({ name: 'WmsCheckOrderPrint' });
+
+const printData = ref<WmsCheckOrderApi.CheckOrder>({});
+const tableColumnCount = 8;
+
+/** 打印明细补齐实际金额和盈亏字段，避免模板重复计算 */
+const printRows = computed<PrintRow[]>(() =>
+  (printData.value.details || []).map((detail) => ({
+    ...detail,
+    actualPrice: getDetailActualPrice(detail),
+    differencePrice: getDetailDifferencePrice(detail),
+    differenceQuantity: getDetailDifferenceQuantity(detail),
+  })),
+);
+
+/** 打印合计盈亏数量 */
+const totalDifferenceQuantity = computed(() =>
+  sumQuantity(printRows.value, (detail) => detail.differenceQuantity),
+);
+/** 打印合计盈亏金额 */
+const totalDifferencePrice = computed(() =>
+  sumPrice(printRows.value, (detail) => detail.differencePrice),
+);
+
+/** 等待条码和打印 DOM 完成绘制，避免浏览器打印到旧内容 */
+function waitForPaint() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+/** 退出打印模式，恢复当前页面显示 */
+function removePrintMode() {
+  document.body.classList.remove('wms-check-order-printing');
+}
+
+/** 获取打印用字典文案，空值统一显示为横杠 */
+function getPrintDictLabel(dictType: string, value?: number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  return getDictLabel(dictType, value) || '-';
+}
+
+/** 打印盘库单：加载数据后只展示打印区域，再调用浏览器打印 */
+async function print(id: number) {
+  const order = await getCheckOrder(id);
+  const details = order.details || (await getCheckOrderDetailListByOrderId(id));
+  printData.value = { ...order, details };
+  await nextTick();
+  await waitForPaint();
+  document.body.classList.add('wms-check-order-printing');
+  window.addEventListener('afterprint', removePrintMode, { once: true });
+  window.print();
+}
+
+defineExpose({ print });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      id="wmsCheckOrderPrint"
+      class="wms-check-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white text-[#303133] opacity-0"
+    >
+      <div class="relative mb-2">
+        <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
+          盘库单
+        </h2>
+        <div v-if="printData.no" class="absolute right-0 top-0">
+          <Barcode
+            :content="printData.no"
+            :display-value="false"
+            :format="BarcodeFormatEnum.CODE39"
+            :height="40"
+            :width="180"
+          />
+        </div>
+      </div>
+      <div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
+        <div>盘库单号：{{ printData.no || '-' }}</div>
+        <div>仓库：{{ printData.warehouseName || '-' }}</div>
+        <div>
+          盘库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
+        </div>
+        <div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
+        <div>
+          盈亏数量：
+          <span :class="getLossClass(printData.totalQuantity)">
+            {{ formatQuantity(printData.totalQuantity) || '-' }}
+          </span>
+        </div>
+        <div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
+        <div>实际金额：{{ formatPrice(printData.actualPrice) || '-' }}</div>
+        <div>
+          实际盈亏金额：
+          <span :class="getLossClass(getOrderDifferencePrice(printData))">
+            {{ formatPrice(getOrderDifferencePrice(printData)) || '-' }}
+          </span>
+        </div>
+        <div class="col-span-3 grid grid-cols-2 gap-x-6">
+          <div>
+            创建：{{ formatDateTime(printData.createTime) || '-' }} /
+            {{ printData.creatorName || printData.creator || '-' }}
+          </div>
+          <div>
+            更新：{{ formatDateTime(printData.updateTime) || '-' }} /
+            {{ printData.updaterName || printData.updater || '-' }}
+          </div>
+        </div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-[13px] leading-[1.5]">
+        <thead>
+          <tr>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              商品信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              规格信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              账面库存
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              单价(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              实际库存
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              实际金额(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              盈亏数
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              实际盈亏金额(元)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printRows" :key="detail.id || detail.skuId">
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs">
+                编号：{{ detail.itemCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs">
+                编号：{{ detail.skuCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.price) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.checkQuantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.actualPrice) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              <span :class="getLossClass(detail.differenceQuantity)">
+                {{ formatQuantity(detail.differenceQuantity) || '-' }}
+              </span>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              <span :class="getLossClass(detail.differencePrice)">
+                {{ formatPrice(detail.differencePrice) || '-' }}
+              </span>
+            </td>
+          </tr>
+          <tr v-if="printRows.length > 0">
+            <td
+              class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
+              colspan="2"
+            >
+              合计
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.checkQuantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumPrice(printRows, (detail) => detail.actualPrice) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              <span :class="getLossClass(totalDifferenceQuantity)">
+                {{ formatQuantity(totalDifferenceQuantity) }}
+              </span>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              <span :class="getLossClass(totalDifferencePrice)">
+                {{ formatPrice(totalDifferencePrice) }}
+              </span>
+            </td>
+          </tr>
+          <tr v-if="printRows.length === 0">
+            <td
+              class="border border-solid border-[#dcdfe6] p-2 text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+@page {
+  margin: 8mm 10mm;
+}
+
+@media print {
+  :global(body.wms-check-order-printing) {
+    -webkit-print-color-adjust: exact;
+    margin: 0 !important;
+    padding: 0 !important;
+    print-color-adjust: exact;
+  }
+
+  :global(body.wms-check-order-printing *) {
+    visibility: hidden !important;
+  }
+
+  :global(body.wms-check-order-printing .wms-check-order-print),
+  :global(body.wms-check-order-printing .wms-check-order-print *) {
+    visibility: visible !important;
+  }
+
+  :global(body.wms-check-order-printing .wms-check-order-print) {
+    pointer-events: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: auto;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/wms/order/movement/data.ts b/apps/web-ele/src/views/wms/order/movement/data.ts
new file mode 100644
index 000000000..f72a9017c
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/movement/data.ts
@@ -0,0 +1,369 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { buildNumberRangeSchema } from '#/components/number-range-input';
+import { getRangePickerDefaultProps } from '#/utils';
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入移库单号',
+      },
+      fieldName: 'no',
+      label: '移库单号',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_STATUS, 'number'),
+        placeholder: '请选择单据状态',
+      },
+      fieldName: 'status',
+      label: '单据状态',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'sourceWarehouseId',
+      label: '来源仓库',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'targetWarehouseId',
+      label: '目标仓库',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+    },
+    buildNumberRangeSchema(
+      '数量',
+      'totalQuantityRange',
+      'totalQuantityMin',
+      'totalQuantityMax',
+      QUANTITY_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '总金额',
+      'totalPriceRange',
+      'totalPriceMin',
+      'totalPriceMax',
+      PRICE_PRECISION,
+    ),
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        filterable: true,
+        labelField: 'nickname',
+        placeholder: '请选择创建用户',
+        valueField: 'id',
+      },
+      fieldName: 'creator',
+      label: '创建用户',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        filterable: true,
+        labelField: 'nickname',
+        placeholder: '请选择更新用户',
+        valueField: 'id',
+      },
+      fieldName: 'updater',
+      label: '更新用户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'updateTime',
+      label: '更新时间',
+    },
+  ];
+}
+
+/** 列表表格列 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      fixed: 'left',
+      slots: { content: 'expand_content' },
+      type: 'expand',
+      width: 48,
+    },
+    {
+      field: 'no',
+      fixed: 'left',
+      slots: { default: 'no' },
+      title: '单号',
+      width: 210,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_STATUS },
+      },
+      field: 'status',
+      fixed: 'left',
+      title: '移库状态',
+      width: 110,
+    },
+    {
+      field: 'sourceWarehouseName',
+      minWidth: 180,
+      title: '来源仓库',
+    },
+    {
+      field: 'targetWarehouseName',
+      minWidth: 180,
+      title: '目标仓库',
+    },
+    {
+      field: 'quantityAmount',
+      minWidth: 180,
+      slots: { default: 'quantityAmount' },
+      title: '总数量/总金额(元)',
+    },
+    {
+      field: 'operateInfo',
+      minWidth: 260,
+      slots: { default: 'operateInfo' },
+      title: '操作信息',
+    },
+    {
+      field: 'remark',
+      minWidth: 160,
+      title: '备注',
+    },
+    {
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+      title: '操作',
+      width: 220,
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '移库单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'sourceWarehouseName',
+      label: '来源仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'targetWarehouseName',
+      label: '目标仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'status',
+      label: '单据状态',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_ORDER_STATUS,
+              value: val,
+            }),
+    },
+    {
+      field: 'orderTime',
+      label: '单据日期',
+      render: (val) => formatDate(val, 'YYYY-MM-DD') || '-',
+    },
+    {
+      field: 'totalQuantity',
+      label: '总数量',
+      render: (val) => formatQuantity(val) || '-',
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+      render: (val, data) => val || data?.creator || '-',
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'updaterName',
+      label: '更新人',
+      render: (val, data) => val || data?.updater || '-',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      render: (val) => val || '-',
+      span: 2,
+    },
+  ];
+}
+
+interface MovementFormSchemaOptions {
+  onSourceWarehouseChange: (warehouse?: WmsWarehouseApi.Warehouse) => void;
+  onTargetWarehouseChange: (warehouse?: WmsWarehouseApi.Warehouse) => void;
+}
+
+/** 表单的配置项 */
+export function useFormSchema({
+  onSourceWarehouseChange,
+  onTargetWarehouseChange,
+}: MovementFormSchemaOptions): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入移库单号',
+      },
+      fieldName: 'no',
+      label: '移库单号',
+      rules: z.string().min(1, '移库单号不能为空').max(64),
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        onChange: onSourceWarehouseChange,
+      },
+      fieldName: 'sourceWarehouseId',
+      label: '来源仓库',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        onChange: onTargetWarehouseChange,
+      },
+      fieldName: 'targetWarehouseId',
+      label: '目标仓库',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择单据日期',
+        valueFormat: 'x',
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+      fieldName: 'remark',
+      formItemClass: 'col-span-2',
+      label: '备注',
+    },
+  ];
+}
+
+interface MovementOrderDetailFooterRow {
+  quantity?: number;
+  totalPrice?: number;
+}
+type MovementOrderDetailFooterColumn = Pick<
+  NonNullable<NonNullable<VxeTableGridOptions['columns']>[number]>,
+  'field'
+>;
+
+/** 明细表格的合计行 */
+export function getDetailFooter({
+  columns,
+  data,
+}: {
+  columns: MovementOrderDetailFooterColumn[];
+  data: MovementOrderDetailFooterRow[];
+}) {
+  return [
+    columns.map((column, index) => {
+      if (index === 0) {
+        return '合计';
+      }
+      if (column.field === 'quantity') {
+        return formatSumQuantity(data, (detail) => detail.quantity);
+      }
+      if (column.field === 'totalPrice') {
+        return formatSumPrice(data, (detail) => detail.totalPrice);
+      }
+      return '';
+    }),
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/order/movement/index.vue b/apps/web-ele/src/views/wms/order/movement/index.vue
new file mode 100644
index 000000000..f1b057627
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/movement/index.vue
@@ -0,0 +1,343 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsMovementOrderApi } from '#/api/wms/order/movement';
+import type { WmsMovementOrderDetailApi } from '#/api/wms/order/movement/detail';
+
+import { reactive, ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import {
+  ACTION_ICON,
+  TableAction,
+  useVbenVxeGrid,
+  VxeColumn,
+  VxeTable,
+} from '#/adapter/vxe-table';
+import {
+  deleteMovementOrder,
+  exportMovementOrder,
+  getMovementOrderDetailListByOrderId,
+  getMovementOrderPage,
+} from '#/api/wms/order/movement';
+import { $t } from '#/locales';
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import { formatPrice, formatQuantity, multiplyPrice } from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import MovementOrderDetail from './modules/detail.vue';
+import MovementOrderForm from './modules/form.vue';
+import MovementOrderPrint from './modules/print.vue';
+
+defineOptions({ name: 'WmsMovementOrder' });
+
+const printRef = ref<InstanceType<typeof MovementOrderPrint>>();
+const detailMap = reactive<
+  Record<number, WmsMovementOrderDetailApi.MovementOrderDetail[]>
+>({});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: MovementOrderForm,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: MovementOrderDetail,
+  destroyOnClose: true,
+});
+
+/** 清空展开明细缓存 */
+function clearDetailMap() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  clearDetailMap();
+  gridApi.query();
+}
+
+/** 创建移库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑移库单 */
+function handleEdit(row: WmsMovementOrderApi.MovementOrder) {
+  formModalApi.setData({ id: row.id!, type: 'update' }).open();
+}
+
+/** 查看移库单详情 */
+function handleDetail(row: WmsMovementOrderApi.MovementOrder) {
+  detailModalApi.setData({ id: row.id! }).open();
+}
+
+/** 计算单据明细金额 */
+function getDetailTotalPrice(
+  detail: WmsMovementOrderDetailApi.MovementOrderDetail,
+) {
+  return detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price);
+}
+
+/** 获取已展开行的明细 */
+function getExpandedDetails(row: WmsMovementOrderApi.MovementOrder) {
+  return detailMap[row.id!] || [];
+}
+
+/** 展开列表行时懒加载移库明细 */
+async function handleExpandChange(
+  row: WmsMovementOrderApi.MovementOrder,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  delete detailMap[row.id!];
+  detailMap[row.id!] = await getMovementOrderDetailListByOrderId(row.id!);
+}
+
+/** 判断移库单是否可修改 */
+function canUpdateMovementOrder(status?: number) {
+  return status !== undefined && OrderUpdateStatusList.includes(status);
+}
+
+/** 判断移库单是否可删除 */
+function canDeleteMovementOrder(status?: number) {
+  return status !== undefined && OrderDeleteStatusList.includes(status);
+}
+
+/** 获取修改按钮禁用提示 */
+function getMovementOrderUpdateTip(status?: number) {
+  if (canUpdateMovementOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已移库，无法修改';
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改';
+  }
+  return '当前状态无法修改';
+}
+
+/** 获取删除按钮禁用提示 */
+function getMovementOrderDeleteTip(status?: number) {
+  if (canDeleteMovementOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已移库，无法删除';
+  }
+  return '当前状态无法删除';
+}
+
+/** 删除移库单 */
+async function handleDelete(row: WmsMovementOrderApi.MovementOrder) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.no]),
+  });
+  try {
+    await deleteMovementOrder(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出移库单 */
+async function handleExport() {
+  const data = await exportMovementOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '移库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    expandConfig: {
+      padding: true,
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getMovementOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsMovementOrderApi.MovementOrder>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: WmsMovementOrderApi.MovementOrder;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="【单据】移库" url="https://doc.iocoder.cn/wms/order/movement/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <MovementOrderPrint ref="printRef" />
+
+    <Grid table-title="移库单列表">
+      <template #expand_content="{ row }">
+        <VxeTable
+          :data="getExpandedDetails(row)"
+          border
+          :show-overflow="true"
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ detail.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ detail.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="移库数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.quantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="单价(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(detail.price) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="金额(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(getDetailTotalPrice(detail)) || '-' }}
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['移库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:movement-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:movement-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div>
+          单号：
+          <a class="text-primary" @click="handleDetail(row)">{{ row.no }}</a>
+        </div>
+      </template>
+      <template #quantityAmount="{ row }">
+        <div class="flex items-center justify-between">
+          <span>数量：</span>
+          <span>{{ formatQuantity(row.totalQuantity) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>金额：</span>
+          <span>{{ formatPrice(row.totalPrice) }}</span>
+        </div>
+      </template>
+      <template #operateInfo="{ row }">
+        <div>
+          创建：{{ formatDateTime(row.createTime) || '-' }} /
+          {{ row.creatorName || row.creator || '-' }}
+        </div>
+        <div>
+          更新：{{ formatDateTime(row.updateTime) || '-' }} /
+          {{ row.updaterName || row.updater || '-' }}
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              disabled: !canUpdateMovementOrder(row.status),
+              tooltip: getMovementOrderUpdateTip(row.status),
+              auth: ['wms:movement-order:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: !canDeleteMovementOrder(row.status),
+              tooltip: getMovementOrderDeleteTip(row.status),
+              auth: ['wms:movement-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '打印',
+              type: 'primary',
+              link: true,
+              auth: ['wms:movement-order:query'],
+              onClick: () => printRef?.print(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/movement/modules/detail.vue b/apps/web-ele/src/views/wms/order/movement/modules/detail.vue
new file mode 100644
index 000000000..9c3680181
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/movement/modules/detail.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import type { WmsMovementOrderApi } from '#/api/wms/order/movement';
+import type { WmsMovementOrderDetailApi } from '#/api/wms/order/movement/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  getMovementOrder,
+  getMovementOrderDetailListByOrderId,
+} from '#/api/wms/order/movement';
+import { useDescription } from '#/components/description';
+import {
+  formatPrice,
+  formatQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+import { getDetailFooter, useDetailSchema } from '../data';
+
+interface DetailRow extends WmsMovementOrderDetailApi.MovementOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsMovementOrderDetail' });
+
+const detailData = ref<WmsMovementOrderApi.MovementOrder>({});
+
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+const [Descriptions] = useDescription({
+  border: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      detailData.value = {};
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const order = await getMovementOrder(data.id);
+      const details =
+        order.details || (await getMovementOrderDetailListByOrderId(data.id));
+      detailData.value = { ...order, details };
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="移库单详情"
+    class="w-2/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mx-4 space-y-4">
+      <Descriptions :data="detailData" />
+      <VxeTable
+        :data="detailRows"
+        border
+        empty-text="暂无商品明细"
+        :footer-method="getDetailFooter"
+        :show-overflow="true"
+        show-footer
+        size="small"
+      >
+        <VxeColumn title="商品信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.itemName || '-' }}</div>
+            <div v-if="row.itemCode" class="text-xs text-gray-500">
+              商品编号：{{ row.itemCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="规格信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.skuName || '-' }}</div>
+            <div v-if="row.skuCode" class="text-xs text-gray-500">
+              规格编号：{{ row.skuCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="quantity" title="数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.quantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn title="单价(元)" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.price) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="totalPrice" title="金额(元)" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.totalPrice) || '-' }}
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/movement/modules/form.vue b/apps/web-ele/src/views/wms/order/movement/modules/form.vue
new file mode 100644
index 000000000..bc4b0b5e0
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/movement/modules/form.vue
@@ -0,0 +1,542 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { WmsMovementOrderApi } from '#/api/wms/order/movement';
+import type { WmsMovementOrderDetailApi } from '#/api/wms/order/movement/detail';
+import type { InventorySelectRow } from '#/views/wms/inventory/components/inventory-select.vue';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEqual } from '@vben/utils';
+
+import { ElInputNumber, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { TableAction, VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  cancelMovementOrder,
+  completeMovementOrder,
+  createMovementOrder,
+  getMovementOrder,
+  getMovementOrderDetailListByOrderId,
+  updateMovementOrder,
+} from '#/api/wms/order/movement';
+import { $t } from '#/locales';
+import { WmsInventorySelect } from '#/views/wms/inventory/components';
+import {
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  dividePrice,
+  formatQuantity,
+  multiplyPrice,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+import { generateOrderNo } from '#/views/wms/utils/order';
+
+import { getDetailFooter, useFormSchema } from '../data';
+
+interface DetailRow extends WmsMovementOrderDetailApi.MovementOrderDetail {
+  seq: number;
+}
+
+defineOptions({ name: 'WmsMovementOrderForm' });
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const formData = ref<WmsMovementOrderApi.MovementOrder>({});
+const formMode = ref('create');
+const originalSubmitData = ref<WmsMovementOrderApi.MovementOrder>();
+const details = ref<DetailRow[]>([]);
+const detailTableRef = ref<VxeTableInstance>();
+const inventorySelectRef = ref<InstanceType<typeof WmsInventorySelect>>();
+let detailSeq = 0; // 明细行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+
+const getTitle = computed(() => {
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['移库单'])
+    : $t('ui.actionTitle.create', ['移库单']);
+});
+
+const isPrepareOrder = computed(() => {
+  return (
+    !formData.value?.id ||
+    (formData.value.status !== undefined &&
+      OrderUpdateStatusList.includes(formData.value.status))
+  );
+});
+const isSavedPrepareOrder = computed(() => {
+  return (
+    !!formData.value?.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+  );
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema({
+    onSourceWarehouseChange: handleSourceWarehouseChange,
+    onTargetWarehouseChange: handleTargetWarehouseChange,
+  }),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 标准化明细行，补齐本地序号和金额 */
+function normalizeDetail(
+  detail: WmsMovementOrderDetailApi.MovementOrderDetail,
+): DetailRow {
+  detailSeq += 1;
+  return {
+    ...detail,
+    seq: detailSeq,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  };
+}
+
+/** 根据库存构建新的移库明细 */
+function buildDetail(inventory: InventorySelectRow): DetailRow {
+  return normalizeDetail({
+    availableQuantity: inventory.availableQuantity,
+    id: undefined,
+    itemCode: inventory.itemCode,
+    itemId: inventory.itemId,
+    itemName: inventory.itemName,
+    price: undefined,
+    quantity: undefined,
+    skuCode: inventory.skuCode,
+    skuId: inventory.skuId,
+    skuName: inventory.skuName,
+    sourceWarehouseId: inventory.warehouseId,
+    sourceWarehouseName: inventory.warehouseName,
+    targetWarehouseId: formData.value.targetWarehouseId,
+    targetWarehouseName: formData.value.targetWarehouseName,
+    totalPrice: undefined,
+    unit: inventory.unit,
+  });
+}
+
+/** 设置移库明细 */
+function setDetails(list?: WmsMovementOrderDetailApi.MovementOrderDetail[]) {
+  detailSeq = 0;
+  details.value = (list || []).map((detail) => normalizeDetail(detail));
+  void refreshDetailFooter();
+}
+
+/** 刷新明细合计行 */
+async function refreshDetailFooter() {
+  await nextTick();
+  await detailTableRef.value?.updateFooter();
+}
+
+/** 添加商品明细 */
+async function handleAddDetail() {
+  const values = (await formApi.getValues()) as WmsMovementOrderApi.MovementOrder;
+  if (!values.sourceWarehouseId || !values.targetWarehouseId) {
+    ElMessage.warning('请先选择来源仓库和目标仓库');
+    return;
+  }
+  formData.value.sourceWarehouseId = values.sourceWarehouseId;
+  await nextTick();
+  inventorySelectRef.value?.open(getSelectedInventoryKeys());
+}
+
+/** 选择库存 */
+function handleSelectInventory(inventories: InventorySelectRow[]) {
+  if (inventories.length === 0) {
+    return;
+  }
+  let changed = false;
+  for (const inventory of inventories) {
+    if (!inventory.skuId || isInventorySelected(inventory)) {
+      continue;
+    }
+    details.value.push(buildDetail(inventory));
+    changed = true;
+  }
+  if (changed) {
+    void refreshDetailFooter();
+  }
+}
+
+/** 判断库存是否已选择 */
+function isInventorySelected(inventory: InventorySelectRow) {
+  return details.value.some((detail) => {
+    return (
+      detail.skuId === inventory.skuId &&
+      detail.sourceWarehouseId === inventory.warehouseId
+    );
+  });
+}
+
+/** 获得已选择的库存标识 */
+function getSelectedInventoryKeys() {
+  return details.value
+    .map((detail) =>
+      detail.skuId && detail.sourceWarehouseId
+        ? `${detail.skuId}-${detail.sourceWarehouseId}`
+        : undefined,
+    )
+    .filter((key): key is string => !!key);
+}
+
+/** 删除商品明细 */
+function handleDeleteDetail(row: DetailRow) {
+  const index = details.value.findIndex((detail) => detail.seq === row.seq);
+  if (index !== -1) {
+    details.value.splice(index, 1);
+    void refreshDetailFooter();
+  }
+}
+
+/** 来源仓库变化时清空移库明细 */
+function handleSourceWarehouseChange(warehouse?: WmsWarehouseApi.Warehouse) {
+  formData.value.sourceWarehouseId = warehouse?.id;
+  formData.value.sourceWarehouseName = warehouse?.name;
+  setDetails([]);
+}
+
+/** 目标仓库变化时同步到移库明细 */
+function handleTargetWarehouseChange(warehouse?: WmsWarehouseApi.Warehouse) {
+  formData.value.targetWarehouseId = warehouse?.id;
+  formData.value.targetWarehouseName = warehouse?.name;
+  for (const detail of details.value) {
+    detail.targetWarehouseId = warehouse?.id;
+    detail.targetWarehouseName = warehouse?.name;
+  }
+}
+
+/** 明细数量变化 */
+function handleDetailQuantityChange(detail: DetailRow) {
+  if (detail.price !== undefined && detail.price !== null) {
+    detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+    void refreshDetailFooter();
+    return;
+  }
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 明细单价变化 */
+function handleDetailPriceChange(detail: DetailRow) {
+  detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+  void refreshDetailFooter();
+}
+
+/** 明细金额变化 */
+function handleDetailTotalPriceChange(detail: DetailRow) {
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 校验商品明细 */
+async function validateDetails(required = false) {
+  const values = (await formApi.getValues()) as WmsMovementOrderApi.MovementOrder;
+  if (values.sourceWarehouseId === values.targetWarehouseId) {
+    ElMessage.error('来源仓库和目标仓库不能相同');
+    return false;
+  }
+  if (details.value.length === 0) {
+    if (required) {
+      ElMessage.error('至少包含一条移库明细');
+      return false;
+    }
+    return true;
+  }
+  for (let index = 0; index < details.value.length; index += 1) {
+    const detail = details.value[index]!;
+    if (!detail.skuId) {
+      ElMessage.error(`第 ${index + 1} 行明细请选择商品规格`);
+      return false;
+    }
+    if (!detail.quantity || detail.quantity <= 0) {
+      ElMessage.error(`第 ${index + 1} 行明细移库数量必须大于 0`);
+      return false;
+    }
+    if (
+      detail.availableQuantity !== undefined &&
+      detail.quantity > detail.availableQuantity
+    ) {
+      ElMessage.error(`第 ${index + 1} 行明细移库数量不能大于可用库存`);
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 构建提交用的明细数据 */
+function buildSubmitDetails() {
+  return details.value.map((row) => {
+    const { seq: _seq, ...detail } = row;
+    return detail;
+  });
+}
+
+/** 构建提交用的单据数据 */
+async function buildSubmitData(): Promise<WmsMovementOrderApi.MovementOrder> {
+  const values = (await formApi.getValues()) as WmsMovementOrderApi.MovementOrder;
+  const {
+    details: _details,
+    totalPrice: _totalPrice,
+    totalQuantity: _totalQuantity,
+    ...order
+  } = formData.value;
+  return {
+    ...order,
+    ...values,
+    details: buildSubmitDetails(),
+  };
+}
+
+/** 完成移库 */
+async function handleFormComplete() {
+  const { valid } = await formApi.validate();
+  if (!valid || !(await validateDetails(true)) || !formData.value?.id) {
+    return;
+  }
+  await confirm('确认完成移库？完成后将更新库存。');
+  modalApi.lock();
+  try {
+    const data = await buildSubmitData();
+    if (!isEqual(data, originalSubmitData.value)) {
+      await updateMovementOrder(data);
+    }
+    await completeMovementOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    ElMessage.success('移库成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 作废移库单 */
+async function handleFormCancel() {
+  if (!formData.value?.id) {
+    return;
+  }
+  await confirm('确认作废该移库单？作废后不可恢复。');
+  modalApi.lock();
+  try {
+    await cancelMovementOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    ElMessage.success('作废成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid || !(await validateDetails(false)) || !isPrepareOrder.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await buildSubmitData();
+    try {
+      await (formMode.value === 'update'
+        ? updateMovementOrder(data)
+        : createMovementOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {};
+      originalSubmitData.value = undefined;
+      setDetails([]);
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      type?: string;
+    }>();
+    formMode.value = data?.type || (data?.id ? 'update' : 'create');
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        // 加载数据
+        const order = await getMovementOrder(data.id);
+        const orderDetails =
+          order.details || (await getMovementOrderDetailListByOrderId(data.id));
+        formData.value = { ...order, details: orderDetails };
+        setDetails(orderDetails);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+        await nextTick();
+        originalSubmitData.value = await buildSubmitData();
+      } finally {
+        modalApi.unlock();
+      }
+      return;
+    }
+    // 初始化新增表单
+    formData.value = {
+      details: [],
+      no: generateOrderNo('YK'),
+      status: OrderStatusEnum.PREPARE,
+    };
+    setDetails([]);
+    await formApi.setValues(formData.value);
+    await nextTick();
+    originalSubmitData.value = await buildSubmitData();
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="isPrepareOrder"
+  >
+    <div class="mx-4">
+      <Form />
+      <div class="mt-4">
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-semibold">移库明细</span>
+          <TableAction
+            :actions="[
+              {
+                label: '添加商品',
+                onClick: handleAddDetail,
+                type: 'primary',
+              },
+            ]"
+          />
+        </div>
+        <VxeTable
+          ref="detailTableRef"
+          :data="details"
+          border
+          empty-text="暂无商品明细"
+          :footer-method="getDetailFooter"
+          :show-overflow="true"
+          show-footer
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="210">
+            <template #default="{ row }">
+              <div>{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ row.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="210">
+            <template #default="{ row }">
+              <div>{{ row.skuName || '-' }}</div>
+              <div v-if="row.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ row.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn field="availableQuantity" title="可用库存" align="right" width="120">
+            <template #default="{ row }">
+              {{ formatQuantity(row.availableQuantity) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn field="quantity" title="移库数量" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.quantity"
+                :controls="false"
+                :min="0"
+                :precision="QUANTITY_PRECISION"
+                class="!w-full"
+                placeholder="数量"
+                @change="handleDetailQuantityChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="price" title="单价(元)" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.price"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="单价"
+                @change="handleDetailPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="totalPrice" title="金额(元)" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.totalPrice"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="金额"
+                @change="handleDetailTotalPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn title="操作" align="center" fixed="right" width="90">
+            <template #default="{ row }">
+              <TableAction
+                :actions="[
+                  {
+                    label: '删除',
+                    type: 'danger',
+                    link: true,
+                    onClick: handleDeleteDetail.bind(null, row),
+                  },
+                ]"
+              />
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <div v-if="isSavedPrepareOrder" class="flex flex-auto items-center gap-2">
+        <TableAction
+          :actions="[
+            {
+              label: '完成移库',
+              type: 'primary',
+              auth: ['wms:movement-order:complete'],
+              onClick: handleFormComplete,
+            },
+            {
+              label: '作废',
+              type: 'danger',
+              auth: ['wms:movement-order:cancel'],
+              onClick: handleFormCancel,
+            },
+          ]"
+        />
+      </div>
+    </template>
+    <WmsInventorySelect
+      ref="inventorySelectRef"
+      :warehouse-id="formData.sourceWarehouseId"
+      @change="handleSelectInventory"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/movement/modules/print.vue b/apps/web-ele/src/views/wms/order/movement/modules/print.vue
new file mode 100644
index 000000000..455bcc3ad
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/movement/modules/print.vue
@@ -0,0 +1,227 @@
+<script lang="ts" setup>
+import type { WmsMovementOrderApi } from '#/api/wms/order/movement';
+import type { WmsMovementOrderDetailApi } from '#/api/wms/order/movement/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Barcode, BarcodeFormatEnum } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import {
+  getMovementOrder,
+  getMovementOrderDetailListByOrderId,
+} from '#/api/wms/order/movement';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+interface PrintRow extends WmsMovementOrderDetailApi.MovementOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsMovementOrderPrint' });
+
+const printData = ref<WmsMovementOrderApi.MovementOrder>({});
+const tableColumnCount = 5;
+
+const printRows = computed<PrintRow[]>(() =>
+  (printData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+/** 等待条码和打印 DOM 完成绘制，避免浏览器打印到旧内容 */
+function waitForPaint() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+/** 退出打印模式，恢复当前页面显示 */
+function removePrintMode() {
+  document.body.classList.remove('wms-movement-order-printing');
+}
+
+/** 获取打印用字典文案，空值统一显示为横杠 */
+function getPrintDictLabel(dictType: string, value?: number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  return getDictLabel(dictType, value) || '-';
+}
+
+/** 打印移库单：加载数据后只展示打印区域，再调用浏览器打印 */
+async function print(id: number) {
+  const order = await getMovementOrder(id);
+  const details = order.details || (await getMovementOrderDetailListByOrderId(id));
+  printData.value = { ...order, details };
+  await nextTick();
+  await waitForPaint();
+  document.body.classList.add('wms-movement-order-printing');
+  window.addEventListener('afterprint', removePrintMode, { once: true });
+  window.print();
+}
+
+defineExpose({ print });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      id="wmsMovementOrderPrint"
+      class="wms-movement-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white text-[#303133] opacity-0"
+    >
+      <div class="relative mb-2">
+        <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
+          移库单
+        </h2>
+        <div v-if="printData.no" class="absolute right-0 top-0">
+          <Barcode
+            :content="printData.no"
+            :display-value="false"
+            :format="BarcodeFormatEnum.CODE39"
+            :height="40"
+            :width="180"
+          />
+        </div>
+      </div>
+      <div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
+        <div>移库单号：{{ printData.no || '-' }}</div>
+        <div>来源仓库：{{ printData.sourceWarehouseName || '-' }}</div>
+        <div>目标仓库：{{ printData.targetWarehouseName || '-' }}</div>
+        <div>
+          移库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
+        </div>
+        <div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
+        <div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
+        <div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
+        <div class="col-span-3 grid grid-cols-2 gap-x-6">
+          <div>
+            创建：{{ formatDateTime(printData.createTime) || '-' }} /
+            {{ printData.creatorName || printData.creator || '-' }}
+          </div>
+          <div>
+            更新：{{ formatDateTime(printData.updateTime) || '-' }} /
+            {{ printData.updaterName || printData.updater || '-' }}
+          </div>
+        </div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-[13px] leading-[1.5]">
+        <thead>
+          <tr>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              商品信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              规格信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              数量
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              单价(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              金额(元)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printRows" :key="detail.id || detail.skuId">
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs">
+                编号：{{ detail.itemCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs">
+                编号：{{ detail.skuCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.price) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.totalPrice) || '-' }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length > 0">
+            <td
+              class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
+              colspan="2"
+            >
+              合计
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumPrice(printRows, (detail) => detail.totalPrice) }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length === 0">
+            <td
+              class="border border-solid border-[#dcdfe6] p-2 text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+@page {
+  margin: 8mm 10mm;
+}
+
+@media print {
+  :global(body.wms-movement-order-printing) {
+    -webkit-print-color-adjust: exact;
+    margin: 0 !important;
+    padding: 0 !important;
+    print-color-adjust: exact;
+  }
+
+  :global(body.wms-movement-order-printing *) {
+    visibility: hidden !important;
+  }
+
+  :global(body.wms-movement-order-printing .wms-movement-order-print),
+  :global(body.wms-movement-order-printing .wms-movement-order-print *) {
+    visibility: visible !important;
+  }
+
+  :global(body.wms-movement-order-printing .wms-movement-order-print) {
+    pointer-events: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: auto;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/wms/order/receipt/data.ts b/apps/web-ele/src/views/wms/order/receipt/data.ts
new file mode 100644
index 000000000..ca7b5c841
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/receipt/data.ts
@@ -0,0 +1,427 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { buildNumberRangeSchema } from '#/components/number-range-input';
+import { getRangePickerDefaultProps } from '#/utils';
+import { WmsMerchantSelect } from '#/views/wms/md/merchant/components';
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入入库单号',
+      },
+      fieldName: 'no',
+      label: '入库单号',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入业务单号',
+      },
+      fieldName: 'bizOrderNo',
+      label: '业务单号',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_STATUS, 'number'),
+        placeholder: '请选择单据状态',
+      },
+      fieldName: 'status',
+      label: '单据状态',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'warehouseId',
+      label: '仓库',
+    },
+    {
+      component: markRaw(WmsMerchantSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+        supplier: true,
+      },
+      fieldName: 'merchantId',
+      label: '供应商',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+    },
+    buildNumberRangeSchema(
+      '数量',
+      'totalQuantityRange',
+      'totalQuantityMin',
+      'totalQuantityMax',
+      QUANTITY_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '总金额',
+      'totalPriceRange',
+      'totalPriceMin',
+      'totalPriceMax',
+      PRICE_PRECISION,
+    ),
+    {
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, 'number'),
+        placeholder: '请选择入库类型',
+      },
+      fieldName: 'type',
+      label: '入库类型',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        filterable: true,
+        labelField: 'nickname',
+        placeholder: '请选择创建用户',
+        valueField: 'id',
+      },
+      fieldName: 'creator',
+      label: '创建用户',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        filterable: true,
+        labelField: 'nickname',
+        placeholder: '请选择更新用户',
+        valueField: 'id',
+      },
+      fieldName: 'updater',
+      label: '更新用户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'updateTime',
+      label: '更新时间',
+    },
+  ];
+}
+
+/** 列表表格列 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      fixed: 'left',
+      slots: { content: 'expand_content' },
+      type: 'expand',
+      width: 48,
+    },
+    {
+      field: 'no',
+      fixed: 'left',
+      slots: { default: 'no' },
+      title: '单号/业务单号',
+      width: 260,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_STATUS },
+      },
+      field: 'status',
+      fixed: 'left',
+      title: '入库状态',
+      width: 110,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_RECEIPT_ORDER_TYPE },
+      },
+      field: 'type',
+      title: '入库类型',
+      width: 120,
+    },
+    {
+      field: 'warehouseName',
+      minWidth: 180,
+      title: '仓库',
+    },
+    {
+      field: 'quantityAmount',
+      minWidth: 180,
+      slots: { default: 'quantityAmount' },
+      title: '总数量/总金额(元)',
+    },
+    {
+      field: 'merchantName',
+      minWidth: 160,
+      title: '供应商',
+    },
+    {
+      field: 'operateInfo',
+      minWidth: 260,
+      slots: { default: 'operateInfo' },
+      title: '操作信息',
+    },
+    {
+      field: 'remark',
+      minWidth: 160,
+      title: '备注',
+    },
+    {
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+      title: '操作',
+      width: 220,
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '入库单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'type',
+      label: '入库类型',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_RECEIPT_ORDER_TYPE,
+              value: val,
+            }),
+    },
+    {
+      field: 'warehouseName',
+      label: '仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'status',
+      label: '单据状态',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_ORDER_STATUS,
+              value: val,
+            }),
+    },
+    {
+      field: 'orderTime',
+      label: '单据日期',
+      render: (val) => formatDate(val, 'YYYY-MM-DD') || '-',
+    },
+    {
+      field: 'merchantName',
+      label: '供应商',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'bizOrderNo',
+      label: '业务单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'totalQuantity',
+      label: '总数量',
+      render: (val) => formatQuantity(val) || '-',
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+      render: (val, data) => val || data?.creator || '-',
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'updaterName',
+      label: '更新人',
+      render: (val, data) => val || data?.updater || '-',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      render: (val) => val || '-',
+      span: 2,
+    },
+  ];
+}
+
+/** 表单的配置项 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入入库单号',
+      },
+      fieldName: 'no',
+      label: '入库单号',
+      rules: z.string().min(1, '入库单号不能为空').max(64),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, 'number'),
+        placeholder: '请选择入库类型',
+      },
+      fieldName: 'type',
+      label: '入库类型',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'warehouseId',
+      label: '仓库',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择单据日期',
+        valueFormat: 'x',
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsMerchantSelect),
+      componentProps: {
+        placeholder: '请选择供应商',
+        supplier: true,
+      },
+      fieldName: 'merchantId',
+      label: '供应商',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入业务单号',
+      },
+      fieldName: 'bizOrderNo',
+      label: '业务单号',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+      fieldName: 'remark',
+      formItemClass: 'col-span-2',
+      label: '备注',
+    },
+  ];
+}
+
+interface ReceiptOrderDetailFooterRow {
+  quantity?: number;
+  totalPrice?: number;
+}
+type ReceiptOrderDetailFooterColumn = Pick<
+  NonNullable<NonNullable<VxeTableGridOptions['columns']>[number]>,
+  'field'
+>;
+
+/** 明细表格的合计行 */
+export function getDetailFooter({
+  columns,
+  data,
+}: {
+  columns: ReceiptOrderDetailFooterColumn[];
+  data: ReceiptOrderDetailFooterRow[];
+}) {
+  return [
+    columns.map((column, index) => {
+      if (index === 0) {
+        return '合计';
+      }
+      if (column.field === 'quantity') {
+        return formatSumQuantity(data, (detail) => detail.quantity);
+      }
+      if (column.field === 'totalPrice') {
+        return formatSumPrice(data, (detail) => detail.totalPrice);
+      }
+      return '';
+    }),
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/order/receipt/index.vue b/apps/web-ele/src/views/wms/order/receipt/index.vue
new file mode 100644
index 000000000..7f9b920b6
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/receipt/index.vue
@@ -0,0 +1,346 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { reactive, ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import {
+  ACTION_ICON,
+  TableAction,
+  useVbenVxeGrid,
+  VxeColumn,
+  VxeTable,
+} from '#/adapter/vxe-table';
+import {
+  deleteReceiptOrder,
+  exportReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+  getReceiptOrderPage,
+} from '#/api/wms/order/receipt';
+import { $t } from '#/locales';
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import { formatPrice, formatQuantity, multiplyPrice } from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import ReceiptOrderDetail from './modules/detail.vue';
+import ReceiptOrderForm from './modules/form.vue';
+import ReceiptOrderPrint from './modules/print.vue';
+
+defineOptions({ name: 'WmsReceiptOrder' });
+
+const printRef = ref<InstanceType<typeof ReceiptOrderPrint>>();
+const detailMap = reactive<
+  Record<number, WmsReceiptOrderDetailApi.ReceiptOrderDetail[]>
+>({});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ReceiptOrderForm,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: ReceiptOrderDetail,
+  destroyOnClose: true,
+});
+
+/** 清空展开明细缓存 */
+function clearDetailMap() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  clearDetailMap();
+  gridApi.query();
+}
+
+/** 创建入库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑入库单 */
+function handleEdit(row: WmsReceiptOrderApi.ReceiptOrder) {
+  formModalApi.setData({ id: row.id!, type: 'update' }).open();
+}
+
+/** 查看入库单详情 */
+function handleDetail(row: WmsReceiptOrderApi.ReceiptOrder) {
+  detailModalApi.setData({ id: row.id! }).open();
+}
+
+/** 计算单据明细金额 */
+function getDetailTotalPrice(
+  detail: WmsReceiptOrderDetailApi.ReceiptOrderDetail,
+) {
+  return detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price);
+}
+
+/** 获取已展开行的明细 */
+function getExpandedDetails(row: WmsReceiptOrderApi.ReceiptOrder) {
+  return detailMap[row.id!] || [];
+}
+
+/** 展开列表行时懒加载入库明细 */
+async function handleExpandChange(
+  row: WmsReceiptOrderApi.ReceiptOrder,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  delete detailMap[row.id!];
+  detailMap[row.id!] = await getReceiptOrderDetailListByOrderId(row.id!);
+}
+
+/** 判断入库单是否可修改 */
+function canUpdateReceiptOrder(status?: number) {
+  return status !== undefined && OrderUpdateStatusList.includes(status);
+}
+
+/** 判断入库单是否可删除 */
+function canDeleteReceiptOrder(status?: number) {
+  return status !== undefined && OrderDeleteStatusList.includes(status);
+}
+
+/** 获取修改按钮禁用提示 */
+function getReceiptOrderUpdateTip(status?: number) {
+  if (canUpdateReceiptOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已入库，无法修改';
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改';
+  }
+  return '当前状态无法修改';
+}
+
+/** 获取删除按钮禁用提示 */
+function getReceiptOrderDeleteTip(status?: number) {
+  if (canDeleteReceiptOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已入库，无法删除';
+  }
+  return '当前状态无法删除';
+}
+
+/** 删除入库单 */
+async function handleDelete(row: WmsReceiptOrderApi.ReceiptOrder) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.no]),
+  });
+  try {
+    await deleteReceiptOrder(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出入库单 */
+async function handleExport() {
+  const data = await exportReceiptOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '入库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    expandConfig: {
+      padding: true,
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getReceiptOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsReceiptOrderApi.ReceiptOrder>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: WmsReceiptOrderApi.ReceiptOrder;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="【单据】入库" url="https://doc.iocoder.cn/wms/order/receipt/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <ReceiptOrderPrint ref="printRef" />
+
+    <Grid table-title="入库单列表">
+      <template #expand_content="{ row }">
+        <VxeTable
+          :data="getExpandedDetails(row)"
+          border
+          :show-overflow="true"
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ detail.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ detail.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="入库数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.quantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="单价(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(detail.price) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="金额(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(getDetailTotalPrice(detail)) || '-' }}
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['入库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:receipt-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:receipt-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div>
+          单号：
+          <a class="text-primary" @click="handleDetail(row)">{{ row.no }}</a>
+        </div>
+        <div v-if="row.bizOrderNo" class="text-xs text-gray-500">
+          业务：{{ row.bizOrderNo }}
+        </div>
+      </template>
+      <template #quantityAmount="{ row }">
+        <div class="flex items-center justify-between">
+          <span>数量：</span>
+          <span>{{ formatQuantity(row.totalQuantity) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>金额：</span>
+          <span>{{ formatPrice(row.totalPrice) }}</span>
+        </div>
+      </template>
+      <template #operateInfo="{ row }">
+        <div>
+          创建：{{ formatDateTime(row.createTime) || '-' }} /
+          {{ row.creatorName || row.creator || '-' }}
+        </div>
+        <div>
+          更新：{{ formatDateTime(row.updateTime) || '-' }} /
+          {{ row.updaterName || row.updater || '-' }}
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              disabled: !canUpdateReceiptOrder(row.status),
+              tooltip: getReceiptOrderUpdateTip(row.status),
+              auth: ['wms:receipt-order:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: !canDeleteReceiptOrder(row.status),
+              tooltip: getReceiptOrderDeleteTip(row.status),
+              auth: ['wms:receipt-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '打印',
+              type: 'primary',
+              link: true,
+              auth: ['wms:receipt-order:query'],
+              onClick: () => printRef?.print(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/receipt/modules/detail.vue b/apps/web-ele/src/views/wms/order/receipt/modules/detail.vue
new file mode 100644
index 000000000..368239a07
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/receipt/modules/detail.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  getReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+} from '#/api/wms/order/receipt';
+import { useDescription } from '#/components/description';
+import {
+  formatPrice,
+  formatQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+import { getDetailFooter, useDetailSchema } from '../data';
+
+interface DetailRow extends WmsReceiptOrderDetailApi.ReceiptOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsReceiptOrderDetail' });
+
+const detailData = ref<WmsReceiptOrderApi.ReceiptOrder>({});
+
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+const [Descriptions] = useDescription({
+  border: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      detailData.value = {};
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const order = await getReceiptOrder(data.id);
+      const details =
+        order.details || (await getReceiptOrderDetailListByOrderId(data.id));
+      detailData.value = { ...order, details };
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="入库单详情"
+    class="w-2/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mx-4 space-y-4">
+      <Descriptions :data="detailData" />
+      <VxeTable
+        :data="detailRows"
+        border
+        empty-text="暂无商品明细"
+        :footer-method="getDetailFooter"
+        :show-overflow="true"
+        show-footer
+        size="small"
+      >
+        <VxeColumn title="商品信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.itemName || '-' }}</div>
+            <div v-if="row.itemCode" class="text-xs text-gray-500">
+              商品编号：{{ row.itemCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="规格信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.skuName || '-' }}</div>
+            <div v-if="row.skuCode" class="text-xs text-gray-500">
+              规格编号：{{ row.skuCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="quantity" title="数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.quantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="unit" title="单位" align="center" width="100" />
+        <VxeColumn title="单价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.price) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="totalPrice" title="总价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.totalPrice) || '-' }}
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/receipt/modules/form.vue b/apps/web-ele/src/views/wms/order/receipt/modules/form.vue
new file mode 100644
index 000000000..32e70b5bb
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/receipt/modules/form.vue
@@ -0,0 +1,480 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { WmsItemSkuApi } from '#/api/wms/md/item/sku';
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEqual } from '@vben/utils';
+
+import { ElInputNumber, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { TableAction, VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  cancelReceiptOrder,
+  completeReceiptOrder,
+  createReceiptOrder,
+  getReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+  updateReceiptOrder,
+} from '#/api/wms/order/receipt';
+import { $t } from '#/locales';
+import { WmsItemSkuSelect } from '#/views/wms/md/item/sku/components';
+import {
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  dividePrice,
+  multiplyPrice,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+import { generateOrderNo } from '#/views/wms/utils/order';
+
+import { getDetailFooter, useFormSchema } from '../data';
+
+interface DetailRow extends WmsReceiptOrderDetailApi.ReceiptOrderDetail {
+  seq: number;
+}
+
+defineOptions({ name: 'WmsReceiptOrderForm' });
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const formData = ref<WmsReceiptOrderApi.ReceiptOrder>({});
+const formMode = ref('create');
+const originalSubmitData = ref<WmsReceiptOrderApi.ReceiptOrder>();
+const details = ref<DetailRow[]>([]);
+const detailTableRef = ref<VxeTableInstance>();
+const skuSelectRef = ref<InstanceType<typeof WmsItemSkuSelect>>();
+let detailSeq = 0; // 明细行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+
+const getTitle = computed(() => {
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['入库单'])
+    : $t('ui.actionTitle.create', ['入库单']);
+});
+
+const isPrepareOrder = computed(() => {
+  return (
+    !formData.value?.id ||
+    (formData.value.status !== undefined &&
+      OrderUpdateStatusList.includes(formData.value.status))
+  );
+});
+const isSavedPrepareOrder = computed(() => {
+  return (
+    !!formData.value?.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+  );
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 标准化明细行，补齐本地序号和金额 */
+function normalizeDetail(
+  detail: WmsReceiptOrderDetailApi.ReceiptOrderDetail,
+): DetailRow {
+  detailSeq += 1;
+  return {
+    ...detail,
+    seq: detailSeq,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  };
+}
+
+/** 根据商品 SKU 构建新的入库明细 */
+function buildDetail(sku: WmsItemSkuApi.ItemSku): DetailRow {
+  return normalizeDetail({
+    id: undefined,
+    itemCode: sku.itemCode,
+    itemId: sku.itemId,
+    itemName: sku.itemName,
+    price: undefined,
+    quantity: undefined,
+    skuCode: sku.code,
+    skuId: sku.id,
+    skuName: sku.name,
+    totalPrice: undefined,
+    unit: sku.unit,
+  });
+}
+
+/** 设置入库明细 */
+function setDetails(list?: WmsReceiptOrderDetailApi.ReceiptOrderDetail[]) {
+  detailSeq = 0;
+  details.value = (list || []).map((detail) => normalizeDetail(detail));
+  void refreshDetailFooter();
+}
+
+/** 刷新明细合计行 */
+async function refreshDetailFooter() {
+  await nextTick();
+  await detailTableRef.value?.updateFooter();
+}
+
+/** 获取已选择的 SKU 编号，避免重复选择 */
+function getSelectedSkuIds() {
+  return details.value
+    .map((detail) => detail.skuId)
+    .filter((id): id is number => !!id);
+}
+
+/** 添加商品明细 */
+async function handleAddDetail() {
+  const values = (await formApi.getValues()) as WmsReceiptOrderApi.ReceiptOrder;
+  if (!values.warehouseId) {
+    ElMessage.warning('请先选择仓库');
+    return;
+  }
+  skuSelectRef.value?.open(getSelectedSkuIds());
+}
+
+/** 选择商品 SKU */
+function handleSelectSku(skus: WmsItemSkuApi.ItemSku[]) {
+  if (skus.length === 0) {
+    return;
+  }
+  const selectedSkuIds = new Set(getSelectedSkuIds());
+  let changed = false;
+  for (const sku of skus) {
+    if (!sku.id || selectedSkuIds.has(sku.id)) {
+      continue;
+    }
+    details.value.push(buildDetail(sku));
+    selectedSkuIds.add(sku.id);
+    changed = true;
+  }
+  if (changed) {
+    void refreshDetailFooter();
+  }
+}
+
+/** 删除商品明细 */
+function handleDeleteDetail(row: DetailRow) {
+  const index = details.value.findIndex((detail) => detail.seq === row.seq);
+  if (index !== -1) {
+    details.value.splice(index, 1);
+    void refreshDetailFooter();
+  }
+}
+
+/** 明细数量变化 */
+function handleDetailQuantityChange(detail: DetailRow) {
+  if (detail.price !== undefined && detail.price !== null) {
+    detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+    void refreshDetailFooter();
+    return;
+  }
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 明细单价变化 */
+function handleDetailPriceChange(detail: DetailRow) {
+  detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+  void refreshDetailFooter();
+}
+
+/** 明细金额变化 */
+function handleDetailTotalPriceChange(detail: DetailRow) {
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 校验商品明细 */
+function validateDetails(required = false) {
+  if (details.value.length === 0) {
+    if (required) {
+      ElMessage.error('至少包含一条入库明细');
+      return false;
+    }
+    return true;
+  }
+  for (let index = 0; index < details.value.length; index += 1) {
+    const detail = details.value[index]!;
+    if (!detail.skuId) {
+      ElMessage.error(`第 ${index + 1} 行明细请选择商品规格`);
+      return false;
+    }
+    if (!detail.quantity || detail.quantity <= 0) {
+      ElMessage.error(`第 ${index + 1} 行明细入库数量必须大于 0`);
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 构建提交用的明细数据 */
+function buildSubmitDetails() {
+  return details.value.map((row) => {
+    const { seq: _seq, ...detail } = row;
+    return detail;
+  });
+}
+
+/** 构建提交用的单据数据 */
+async function buildSubmitData(): Promise<WmsReceiptOrderApi.ReceiptOrder> {
+  const values = (await formApi.getValues()) as WmsReceiptOrderApi.ReceiptOrder;
+  const {
+    details: _details,
+    totalPrice: _totalPrice,
+    totalQuantity: _totalQuantity,
+    ...order
+  } = formData.value;
+  return {
+    ...order,
+    ...values,
+    details: buildSubmitDetails(),
+  };
+}
+
+/** 完成入库 */
+async function handleFormComplete() {
+  const { valid } = await formApi.validate();
+  if (!valid || !validateDetails(true) || !formData.value?.id) {
+    return;
+  }
+  await confirm('确认完成入库？完成后将更新库存。');
+  modalApi.lock();
+  try {
+    const data = await buildSubmitData();
+    if (!isEqual(data, originalSubmitData.value)) {
+      await updateReceiptOrder(data);
+    }
+    await completeReceiptOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    ElMessage.success('入库成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 作废入库单 */
+async function handleFormCancel() {
+  if (!formData.value?.id) {
+    return;
+  }
+  await confirm('确认作废该入库单？作废后不可恢复。');
+  modalApi.lock();
+  try {
+    await cancelReceiptOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    ElMessage.success('作废成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid || !validateDetails(false) || !isPrepareOrder.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await buildSubmitData();
+    try {
+      await (formMode.value === 'update'
+        ? updateReceiptOrder(data)
+        : createReceiptOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {};
+      originalSubmitData.value = undefined;
+      setDetails([]);
+      return;
+    }
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      type?: string;
+    }>();
+    formMode.value = data?.type || (data?.id ? 'update' : 'create');
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        // 加载数据
+        const order = await getReceiptOrder(data.id);
+        const orderDetails =
+          order.details || (await getReceiptOrderDetailListByOrderId(data.id));
+        formData.value = { ...order, details: orderDetails };
+        setDetails(orderDetails);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+        await nextTick();
+        originalSubmitData.value = await buildSubmitData();
+      } finally {
+        modalApi.unlock();
+      }
+      return;
+    }
+    // 初始化新增表单
+    formData.value = {
+      details: [],
+      no: generateOrderNo('RK'),
+      status: OrderStatusEnum.PREPARE,
+    };
+    setDetails([]);
+    await formApi.setValues(formData.value);
+    await nextTick();
+    originalSubmitData.value = await buildSubmitData();
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="isPrepareOrder"
+  >
+    <div class="mx-4">
+      <Form />
+      <div class="mt-4">
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-semibold">入库明细</span>
+          <TableAction
+            :actions="[
+              {
+                label: '添加商品',
+                onClick: handleAddDetail,
+                type: 'primary',
+              },
+            ]"
+          />
+        </div>
+        <VxeTable
+          ref="detailTableRef"
+          :data="details"
+          border
+          empty-text="暂无商品明细"
+          :footer-method="getDetailFooter"
+          :show-overflow="true"
+          show-footer
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ row.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.skuName || '-' }}</div>
+              <div v-if="row.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ row.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn field="quantity" title="入库数量" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.quantity"
+                :controls="false"
+                :min="0"
+                :precision="QUANTITY_PRECISION"
+                class="!w-full"
+                placeholder="数量"
+                @change="handleDetailQuantityChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="price" title="单价(元)" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.price"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="单价"
+                @change="handleDetailPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="totalPrice" title="金额(元)" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.totalPrice"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="金额"
+                @change="handleDetailTotalPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn title="操作" align="center" fixed="right" width="90">
+            <template #default="{ row }">
+              <TableAction
+                :actions="[
+                  {
+                    label: '删除',
+                    type: 'danger',
+                    link: true,
+                    onClick: handleDeleteDetail.bind(null, row),
+                  },
+                ]"
+              />
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <div v-if="isSavedPrepareOrder" class="flex flex-auto items-center gap-2">
+        <TableAction
+          :actions="[
+            {
+              label: '完成入库',
+              type: 'primary',
+              auth: ['wms:receipt-order:complete'],
+              onClick: handleFormComplete,
+            },
+            {
+              label: '作废',
+              type: 'danger',
+              auth: ['wms:receipt-order:cancel'],
+              onClick: handleFormCancel,
+            },
+          ]"
+        />
+      </div>
+    </template>
+    <WmsItemSkuSelect ref="skuSelectRef" @change="handleSelectSku" />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/receipt/modules/print.vue b/apps/web-ele/src/views/wms/order/receipt/modules/print.vue
new file mode 100644
index 000000000..4bb43a4a1
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/receipt/modules/print.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { WmsReceiptOrderApi } from '#/api/wms/order/receipt';
+import type { WmsReceiptOrderDetailApi } from '#/api/wms/order/receipt/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Barcode, BarcodeFormatEnum } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import {
+  getReceiptOrder,
+  getReceiptOrderDetailListByOrderId,
+} from '#/api/wms/order/receipt';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+interface PrintRow extends WmsReceiptOrderDetailApi.ReceiptOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsReceiptOrderPrint' });
+
+const printData = ref<WmsReceiptOrderApi.ReceiptOrder>({});
+const tableColumnCount = 5;
+
+const printRows = computed<PrintRow[]>(() =>
+  (printData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+/** 等待条码和打印 DOM 完成绘制，避免浏览器打印到旧内容 */
+function waitForPaint() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+/** 退出打印模式，恢复当前页面显示 */
+function removePrintMode() {
+  document.body.classList.remove('wms-receipt-order-printing');
+}
+
+/** 获取打印用字典文案，空值统一显示为横杠 */
+function getPrintDictLabel(dictType: string, value?: number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  return getDictLabel(dictType, value) || '-';
+}
+
+/** 打印入库单：加载数据后只展示打印区域，再调用浏览器打印 */
+async function print(id: number) {
+  const order = await getReceiptOrder(id);
+  const details = order.details || (await getReceiptOrderDetailListByOrderId(id));
+  printData.value = { ...order, details };
+  await nextTick();
+  await waitForPaint();
+  document.body.classList.add('wms-receipt-order-printing');
+  window.addEventListener('afterprint', removePrintMode, { once: true });
+  window.print();
+}
+
+defineExpose({ print });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      id="wmsReceiptOrderPrint"
+      class="wms-receipt-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white text-[#303133] opacity-0"
+    >
+      <div class="relative mb-2">
+        <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
+          入库单
+        </h2>
+        <div v-if="printData.no" class="absolute right-0 top-0">
+          <Barcode
+            :content="printData.no"
+            :display-value="false"
+            :format="BarcodeFormatEnum.CODE39"
+            :height="40"
+            :width="180"
+          />
+        </div>
+      </div>
+      <div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
+        <div>入库单号：{{ printData.no || '-' }}</div>
+        <div>
+          入库类型：{{ getPrintDictLabel(DICT_TYPE.WMS_RECEIPT_ORDER_TYPE, printData.type) }}
+        </div>
+        <div>仓库：{{ printData.warehouseName || '-' }}</div>
+        <div>
+          入库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
+        </div>
+        <div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
+        <div>供应商：{{ printData.merchantName || '-' }}</div>
+        <div>业务单号：{{ printData.bizOrderNo || '-' }}</div>
+        <div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
+        <div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
+        <div class="col-span-3 grid grid-cols-2 gap-x-6">
+          <div>
+            创建：{{ formatDateTime(printData.createTime) || '-' }} /
+            {{ printData.creatorName || printData.creator || '-' }}
+          </div>
+          <div>
+            更新：{{ formatDateTime(printData.updateTime) || '-' }} /
+            {{ printData.updaterName || printData.updater || '-' }}
+          </div>
+        </div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-[13px] leading-[1.5]">
+        <thead>
+          <tr>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              商品信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              规格信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              数量
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              单价(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              金额(元)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printRows" :key="detail.id || detail.skuId">
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs">
+                编号：{{ detail.itemCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs">
+                编号：{{ detail.skuCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.price) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.totalPrice) || '-' }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length > 0">
+            <td
+              class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
+              colspan="2"
+            >
+              合计
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumPrice(printRows, (detail) => detail.totalPrice) }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length === 0">
+            <td
+              class="border border-solid border-[#dcdfe6] p-2 text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+@page {
+  margin: 8mm 10mm;
+}
+
+@media print {
+  :global(body.wms-receipt-order-printing) {
+    -webkit-print-color-adjust: exact;
+    margin: 0 !important;
+    padding: 0 !important;
+    print-color-adjust: exact;
+  }
+
+  :global(body.wms-receipt-order-printing *) {
+    visibility: hidden !important;
+  }
+
+  :global(body.wms-receipt-order-printing .wms-receipt-order-print),
+  :global(body.wms-receipt-order-printing .wms-receipt-order-print *) {
+    visibility: visible !important;
+  }
+
+  :global(body.wms-receipt-order-printing .wms-receipt-order-print) {
+    pointer-events: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: auto;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/wms/order/shipment/data.ts b/apps/web-ele/src/views/wms/order/shipment/data.ts
new file mode 100644
index 000000000..3346afcca
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/shipment/data.ts
@@ -0,0 +1,437 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { DescriptionItemSchema } from '#/components/description';
+
+import { h, markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import { z } from '#/adapter/form';
+import { getSimpleUserList } from '#/api/system/user';
+import { DictTag } from '#/components/dict-tag';
+import { buildNumberRangeSchema } from '#/components/number-range-input';
+import { getRangePickerDefaultProps } from '#/utils';
+import { WmsMerchantSelect } from '#/views/wms/md/merchant/components';
+import { WmsWarehouseSelect } from '#/views/wms/md/warehouse/components';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入出库单号',
+      },
+      fieldName: 'no',
+      label: '出库单号',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        clearable: true,
+        placeholder: '请输入业务单号',
+      },
+      fieldName: 'bizOrderNo',
+      label: '业务单号',
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_ORDER_STATUS, 'number'),
+        placeholder: '请选择单据状态',
+      },
+      fieldName: 'status',
+      label: '单据状态',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      fieldName: 'warehouseId',
+      label: '仓库',
+    },
+    {
+      component: markRaw(WmsMerchantSelect),
+      componentProps: {
+        customer: true,
+        placeholder: '请选择客户',
+      },
+      fieldName: 'merchantId',
+      label: '客户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+    },
+    buildNumberRangeSchema(
+      '数量',
+      'totalQuantityRange',
+      'totalQuantityMin',
+      'totalQuantityMax',
+      QUANTITY_PRECISION,
+    ),
+    buildNumberRangeSchema(
+      '总金额',
+      'totalPriceRange',
+      'totalPriceMin',
+      'totalPriceMax',
+      PRICE_PRECISION,
+    ),
+    {
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE, 'number'),
+        placeholder: '请选择出库类型',
+      },
+      fieldName: 'type',
+      label: '出库类型',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        filterable: true,
+        labelField: 'nickname',
+        placeholder: '请选择创建用户',
+        valueField: 'id',
+      },
+      fieldName: 'creator',
+      label: '创建用户',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleUserList,
+        clearable: true,
+        filterable: true,
+        labelField: 'nickname',
+        placeholder: '请选择更新用户',
+        valueField: 'id',
+      },
+      fieldName: 'updater',
+      label: '更新用户',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+    {
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+      fieldName: 'updateTime',
+      label: '更新时间',
+    },
+  ];
+}
+
+/** 列表表格列 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      fixed: 'left',
+      slots: { content: 'expand_content' },
+      type: 'expand',
+      width: 48,
+    },
+    {
+      field: 'no',
+      fixed: 'left',
+      slots: { default: 'no' },
+      title: '单号/业务单号',
+      width: 260,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_ORDER_STATUS },
+      },
+      field: 'status',
+      fixed: 'left',
+      title: '出库状态',
+      width: 110,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE },
+      },
+      field: 'type',
+      title: '出库类型',
+      width: 120,
+    },
+    {
+      field: 'warehouseName',
+      minWidth: 180,
+      title: '仓库',
+    },
+    {
+      field: 'quantityAmount',
+      minWidth: 180,
+      slots: { default: 'quantityAmount' },
+      title: '总数量/总金额(元)',
+    },
+    {
+      field: 'merchantName',
+      minWidth: 160,
+      title: '客户',
+    },
+    {
+      field: 'operateInfo',
+      minWidth: 260,
+      slots: { default: 'operateInfo' },
+      title: '操作信息',
+    },
+    {
+      field: 'remark',
+      minWidth: 160,
+      title: '备注',
+    },
+    {
+      field: 'actions',
+      fixed: 'right',
+      slots: { default: 'actions' },
+      title: '操作',
+      width: 220,
+    },
+  ];
+}
+
+/** 详情的字段 */
+export function useDetailSchema(): DescriptionItemSchema[] {
+  return [
+    {
+      field: 'no',
+      label: '出库单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'type',
+      label: '出库类型',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE,
+              value: val,
+            }),
+    },
+    {
+      field: 'warehouseName',
+      label: '仓库',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'status',
+      label: '单据状态',
+      render: (val) =>
+        val === undefined || val === null
+          ? '-'
+          : h(DictTag, {
+              type: DICT_TYPE.WMS_ORDER_STATUS,
+              value: val,
+            }),
+    },
+    {
+      field: 'orderTime',
+      label: '单据日期',
+      render: (val) => formatDate(val, 'YYYY-MM-DD') || '-',
+    },
+    {
+      field: 'merchantName',
+      label: '客户',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'bizOrderNo',
+      label: '业务单号',
+      render: (val) => val || '-',
+    },
+    {
+      field: 'totalQuantity',
+      label: '总数量',
+      render: (val) => formatQuantity(val) || '-',
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额',
+      render: (val) => formatPrice(val) || '-',
+    },
+    {
+      field: 'createTime',
+      label: '创建时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'creatorName',
+      label: '创建人',
+      render: (val, data) => val || data?.creator || '-',
+    },
+    {
+      field: 'updateTime',
+      label: '更新时间',
+      render: (val) => formatDateTime(val) || '-',
+    },
+    {
+      field: 'updaterName',
+      label: '更新人',
+      render: (val, data) => val || data?.updater || '-',
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      render: (val) => val || '-',
+      span: 2,
+    },
+  ];
+}
+
+interface ShipmentFormSchemaOptions {
+  onWarehouseChange: (warehouse?: WmsWarehouseApi.Warehouse) => void;
+}
+
+/** 表单的配置项 */
+export function useFormSchema({
+  onWarehouseChange,
+}: ShipmentFormSchemaOptions): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      dependencies: {
+        show: () => false,
+        triggerFields: [''],
+      },
+      fieldName: 'id',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入出库单号',
+      },
+      fieldName: 'no',
+      label: '出库单号',
+      rules: z.string().min(1, '出库单号不能为空').max(64),
+    },
+    {
+      component: 'Select',
+      componentProps: {
+        clearable: true,
+        options: getDictOptions(DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE, 'number'),
+        placeholder: '请选择出库类型',
+      },
+      fieldName: 'type',
+      label: '出库类型',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsWarehouseSelect),
+      componentProps: {
+        onChange: onWarehouseChange,
+      },
+      fieldName: 'warehouseId',
+      label: '仓库',
+      rules: 'required',
+    },
+    {
+      component: 'DatePicker',
+      componentProps: {
+        class: 'w-full',
+        format: 'YYYY-MM-DD',
+        placeholder: '请选择单据日期',
+        valueFormat: 'x',
+      },
+      fieldName: 'orderTime',
+      label: '单据日期',
+      rules: 'required',
+    },
+    {
+      component: markRaw(WmsMerchantSelect),
+      componentProps: {
+        customer: true,
+        placeholder: '请选择客户',
+      },
+      fieldName: 'merchantId',
+      label: '客户',
+    },
+    {
+      component: 'Input',
+      componentProps: {
+        maxLength: 64,
+        placeholder: '请输入业务单号',
+      },
+      fieldName: 'bizOrderNo',
+      label: '业务单号',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入备注',
+      },
+      fieldName: 'remark',
+      formItemClass: 'col-span-2',
+      label: '备注',
+    },
+  ];
+}
+
+interface ShipmentOrderDetailFooterRow {
+  quantity?: number;
+  totalPrice?: number;
+}
+type ShipmentOrderDetailFooterColumn = Pick<
+  NonNullable<NonNullable<VxeTableGridOptions['columns']>[number]>,
+  'field'
+>;
+
+/** 明细表格的合计行 */
+export function getDetailFooter({
+  columns,
+  data,
+}: {
+  columns: ShipmentOrderDetailFooterColumn[];
+  data: ShipmentOrderDetailFooterRow[];
+}) {
+  return [
+    columns.map((column, index) => {
+      if (index === 0) {
+        return '合计';
+      }
+      if (column.field === 'quantity') {
+        return formatSumQuantity(data, (detail) => detail.quantity);
+      }
+      if (column.field === 'totalPrice') {
+        return formatSumPrice(data, (detail) => detail.totalPrice);
+      }
+      return '';
+    }),
+  ];
+}
diff --git a/apps/web-ele/src/views/wms/order/shipment/index.vue b/apps/web-ele/src/views/wms/order/shipment/index.vue
new file mode 100644
index 000000000..445249ea7
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/shipment/index.vue
@@ -0,0 +1,346 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { WmsShipmentOrderApi } from '#/api/wms/order/shipment';
+import type { WmsShipmentOrderDetailApi } from '#/api/wms/order/shipment/detail';
+
+import { reactive, ref } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { downloadFileFromBlobPart, formatDateTime } from '@vben/utils';
+
+import { ElLoading, ElMessage } from 'element-plus';
+
+import {
+  ACTION_ICON,
+  TableAction,
+  useVbenVxeGrid,
+  VxeColumn,
+  VxeTable,
+} from '#/adapter/vxe-table';
+import {
+  deleteShipmentOrder,
+  exportShipmentOrder,
+  getShipmentOrderDetailListByOrderId,
+  getShipmentOrderPage,
+} from '#/api/wms/order/shipment';
+import { $t } from '#/locales';
+import {
+  OrderDeleteStatusList,
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import { formatPrice, formatQuantity, multiplyPrice } from '#/views/wms/utils/format';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import ShipmentOrderDetail from './modules/detail.vue';
+import ShipmentOrderForm from './modules/form.vue';
+import ShipmentOrderPrint from './modules/print.vue';
+
+defineOptions({ name: 'WmsShipmentOrder' });
+
+const printRef = ref<InstanceType<typeof ShipmentOrderPrint>>();
+const detailMap = reactive<
+  Record<number, WmsShipmentOrderDetailApi.ShipmentOrderDetail[]>
+>({});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: ShipmentOrderForm,
+  destroyOnClose: true,
+});
+
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: ShipmentOrderDetail,
+  destroyOnClose: true,
+});
+
+/** 清空展开明细缓存 */
+function clearDetailMap() {
+  for (const id of Object.keys(detailMap)) {
+    delete detailMap[Number(id)];
+  }
+}
+
+/** 刷新表格 */
+function handleRefresh() {
+  clearDetailMap();
+  gridApi.query();
+}
+
+/** 创建出库单 */
+function handleCreate() {
+  formModalApi.setData({ type: 'create' }).open();
+}
+
+/** 编辑出库单 */
+function handleEdit(row: WmsShipmentOrderApi.ShipmentOrder) {
+  formModalApi.setData({ id: row.id!, type: 'update' }).open();
+}
+
+/** 查看出库单详情 */
+function handleDetail(row: WmsShipmentOrderApi.ShipmentOrder) {
+  detailModalApi.setData({ id: row.id! }).open();
+}
+
+/** 计算单据明细金额 */
+function getDetailTotalPrice(
+  detail: WmsShipmentOrderDetailApi.ShipmentOrderDetail,
+) {
+  return detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price);
+}
+
+/** 获取已展开行的明细 */
+function getExpandedDetails(row: WmsShipmentOrderApi.ShipmentOrder) {
+  return detailMap[row.id!] || [];
+}
+
+/** 展开列表行时懒加载出库明细 */
+async function handleExpandChange(
+  row: WmsShipmentOrderApi.ShipmentOrder,
+  expanded: boolean,
+) {
+  if (!expanded) {
+    return;
+  }
+  delete detailMap[row.id!];
+  detailMap[row.id!] = await getShipmentOrderDetailListByOrderId(row.id!);
+}
+
+/** 判断出库单是否可修改 */
+function canUpdateShipmentOrder(status?: number) {
+  return status !== undefined && OrderUpdateStatusList.includes(status);
+}
+
+/** 判断出库单是否可删除 */
+function canDeleteShipmentOrder(status?: number) {
+  return status !== undefined && OrderDeleteStatusList.includes(status);
+}
+
+/** 获取修改按钮禁用提示 */
+function getShipmentOrderUpdateTip(status?: number) {
+  if (canUpdateShipmentOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已出库，无法修改';
+  }
+  if (status === OrderStatusEnum.CANCELED) {
+    return '已作废，无法修改';
+  }
+  return '当前状态无法修改';
+}
+
+/** 获取删除按钮禁用提示 */
+function getShipmentOrderDeleteTip(status?: number) {
+  if (canDeleteShipmentOrder(status)) {
+    return undefined;
+  }
+  if (status === OrderStatusEnum.FINISHED) {
+    return '已出库，无法删除';
+  }
+  return '当前状态无法删除';
+}
+
+/** 删除出库单 */
+async function handleDelete(row: WmsShipmentOrderApi.ShipmentOrder) {
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.no]),
+  });
+  try {
+    await deleteShipmentOrder(row.id!);
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.no]));
+    handleRefresh();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+/** 导出出库单 */
+async function handleExport() {
+  const data = await exportShipmentOrder(await gridApi.formApi.getValues());
+  downloadFileFromBlobPart({ fileName: '出库单.xls', source: data });
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    collapsed: true,
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    expandConfig: {
+      padding: true,
+    },
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getShipmentOrderPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      isHover: true,
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<WmsShipmentOrderApi.ShipmentOrder>,
+  gridEvents: {
+    toggleRowExpand: ({
+      expanded,
+      row,
+    }: {
+      expanded: boolean;
+      row: WmsShipmentOrderApi.ShipmentOrder;
+    }) => {
+      handleExpandChange(row, expanded);
+    },
+  },
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="【单据】出库" url="https://doc.iocoder.cn/wms/order/shipment/" />
+    </template>
+    <FormModal @success="handleRefresh" />
+    <DetailModal />
+    <ShipmentOrderPrint ref="printRef" />
+
+    <Grid table-title="出库单列表">
+      <template #expand_content="{ row }">
+        <VxeTable
+          :data="getExpandedDetails(row)"
+          border
+          :show-overflow="true"
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ detail.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row: detail }">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ detail.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="出库数量" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatQuantity(detail.quantity) }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="单价(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(detail.price) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn title="金额(元)" align="right" width="120">
+            <template #default="{ row: detail }">
+              {{ formatPrice(getDetailTotalPrice(detail)) || '-' }}
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </template>
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.create', ['出库单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['wms:shipment-order:create'],
+              onClick: handleCreate,
+            },
+            {
+              label: $t('ui.actionTitle.export'),
+              type: 'primary',
+              icon: ACTION_ICON.DOWNLOAD,
+              auth: ['wms:shipment-order:export'],
+              onClick: handleExport,
+            },
+          ]"
+        />
+      </template>
+      <template #no="{ row }">
+        <div>
+          单号：
+          <a class="text-primary" @click="handleDetail(row)">{{ row.no }}</a>
+        </div>
+        <div v-if="row.bizOrderNo" class="text-xs text-gray-500">
+          业务：{{ row.bizOrderNo }}
+        </div>
+      </template>
+      <template #quantityAmount="{ row }">
+        <div class="flex items-center justify-between">
+          <span>数量：</span>
+          <span>{{ formatQuantity(row.totalQuantity) }}</span>
+        </div>
+        <div class="flex items-center justify-between">
+          <span>金额：</span>
+          <span>{{ formatPrice(row.totalPrice) }}</span>
+        </div>
+      </template>
+      <template #operateInfo="{ row }">
+        <div>
+          创建：{{ formatDateTime(row.createTime) || '-' }} /
+          {{ row.creatorName || row.creator || '-' }}
+        </div>
+        <div>
+          更新：{{ formatDateTime(row.updateTime) || '-' }} /
+          {{ row.updaterName || row.updater || '-' }}
+        </div>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              disabled: !canUpdateShipmentOrder(row.status),
+              tooltip: getShipmentOrderUpdateTip(row.status),
+              auth: ['wms:shipment-order:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              disabled: !canDeleteShipmentOrder(row.status),
+              tooltip: getShipmentOrderDeleteTip(row.status),
+              auth: ['wms:shipment-order:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.no]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+            {
+              label: '打印',
+              type: 'primary',
+              link: true,
+              auth: ['wms:shipment-order:query'],
+              onClick: () => printRef?.print(row.id!),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/shipment/modules/detail.vue b/apps/web-ele/src/views/wms/order/shipment/modules/detail.vue
new file mode 100644
index 000000000..e51c5c365
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/shipment/modules/detail.vue
@@ -0,0 +1,120 @@
+<script lang="ts" setup>
+import type { WmsShipmentOrderApi } from '#/api/wms/order/shipment';
+import type { WmsShipmentOrderDetailApi } from '#/api/wms/order/shipment/detail';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  getShipmentOrder,
+  getShipmentOrderDetailListByOrderId,
+} from '#/api/wms/order/shipment';
+import { useDescription } from '#/components/description';
+import {
+  formatPrice,
+  formatQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+import { getDetailFooter, useDetailSchema } from '../data';
+
+interface DetailRow extends WmsShipmentOrderDetailApi.ShipmentOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsShipmentOrderDetail' });
+
+const detailData = ref<WmsShipmentOrderApi.ShipmentOrder>({});
+
+const detailRows = computed<DetailRow[]>(() =>
+  (detailData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+const [Descriptions] = useDescription({
+  border: true,
+  column: 2,
+  schema: useDetailSchema(),
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      detailData.value = {};
+      return;
+    }
+    const data = modalApi.getData<{ id?: number }>();
+    if (!data?.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      const order = await getShipmentOrder(data.id);
+      const details =
+        order.details || (await getShipmentOrderDetailListByOrderId(data.id));
+      detailData.value = { ...order, details };
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    title="出库单详情"
+    class="w-2/3"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <div class="mx-4 space-y-4">
+      <Descriptions :data="detailData" />
+      <VxeTable
+        :data="detailRows"
+        border
+        empty-text="暂无商品明细"
+        :footer-method="getDetailFooter"
+        :show-overflow="true"
+        show-footer
+        size="small"
+      >
+        <VxeColumn title="商品信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.itemName || '-' }}</div>
+            <div v-if="row.itemCode" class="text-xs text-gray-500">
+              商品编号：{{ row.itemCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn title="规格信息" min-width="220">
+          <template #default="{ row }">
+            <div>{{ row.skuName || '-' }}</div>
+            <div v-if="row.skuCode" class="text-xs text-gray-500">
+              规格编号：{{ row.skuCode }}
+            </div>
+          </template>
+        </VxeColumn>
+        <VxeColumn field="quantity" title="数量" align="right" width="120">
+          <template #default="{ row }">
+            {{ formatQuantity(row.quantity) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="unit" title="单位" align="center" width="100" />
+        <VxeColumn title="单价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.price) || '-' }}
+          </template>
+        </VxeColumn>
+        <VxeColumn field="totalPrice" title="总价" align="right" width="140">
+          <template #default="{ row }">
+            {{ formatPrice(row.totalPrice) || '-' }}
+          </template>
+        </VxeColumn>
+      </VxeTable>
+    </div>
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/shipment/modules/form.vue b/apps/web-ele/src/views/wms/order/shipment/modules/form.vue
new file mode 100644
index 000000000..4a5207e3d
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/shipment/modules/form.vue
@@ -0,0 +1,534 @@
+<script lang="ts" setup>
+import type { VxeTableInstance } from '#/adapter/vxe-table';
+import type { WmsWarehouseApi } from '#/api/wms/md/warehouse';
+import type { WmsShipmentOrderApi } from '#/api/wms/order/shipment';
+import type { WmsShipmentOrderDetailApi } from '#/api/wms/order/shipment/detail';
+import type { InventorySelectRow } from '#/views/wms/inventory/components/inventory-select.vue';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+import { isEqual } from '@vben/utils';
+
+import { ElInputNumber, ElMessage } from 'element-plus';
+
+import { useVbenForm } from '#/adapter/form';
+import { TableAction, VxeColumn, VxeTable } from '#/adapter/vxe-table';
+import {
+  cancelShipmentOrder,
+  completeShipmentOrder,
+  createShipmentOrder,
+  getShipmentOrder,
+  getShipmentOrderDetailListByOrderId,
+  updateShipmentOrder,
+} from '#/api/wms/order/shipment';
+import { $t } from '#/locales';
+import { WmsInventorySelect } from '#/views/wms/inventory/components';
+import {
+  OrderStatusEnum,
+  OrderUpdateStatusList,
+} from '#/views/wms/utils/constants';
+import {
+  dividePrice,
+  formatQuantity,
+  multiplyPrice,
+  PRICE_PRECISION,
+  QUANTITY_PRECISION,
+} from '#/views/wms/utils/format';
+import { generateOrderNo } from '#/views/wms/utils/order';
+
+import { getDetailFooter, useFormSchema } from '../data';
+
+interface DetailRow extends WmsShipmentOrderDetailApi.ShipmentOrderDetail {
+  seq: number;
+}
+
+defineOptions({ name: 'WmsShipmentOrderForm' });
+
+const emit = defineEmits<{
+  success: [];
+}>();
+
+const formData = ref<WmsShipmentOrderApi.ShipmentOrder>({});
+const formMode = ref('create');
+const originalSubmitData = ref<WmsShipmentOrderApi.ShipmentOrder>();
+const details = ref<DetailRow[]>([]);
+const detailTableRef = ref<VxeTableInstance>();
+const inventorySelectRef = ref<InstanceType<typeof WmsInventorySelect>>();
+const currentWarehouseId = ref<number>();
+const initializing = ref(false);
+let detailSeq = 0; // 明细行可能还没有后端 id，使用本地序号作为 VXE 行操作的稳定标识
+
+const getTitle = computed(() => {
+  return formMode.value === 'update'
+    ? $t('ui.actionTitle.edit', ['出库单'])
+    : $t('ui.actionTitle.create', ['出库单']);
+});
+
+const isPrepareOrder = computed(() => {
+  return (
+    !formData.value?.id ||
+    (formData.value.status !== undefined &&
+      OrderUpdateStatusList.includes(formData.value.status))
+  );
+});
+const isSavedPrepareOrder = computed(() => {
+  return (
+    !!formData.value?.id &&
+    formData.value.status !== undefined &&
+    OrderUpdateStatusList.includes(formData.value.status)
+  );
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema({ onWarehouseChange: handleWarehouseChange }),
+  showDefaultActions: false,
+  wrapperClass: 'grid-cols-3',
+});
+
+/** 标准化明细行，补齐本地序号和金额 */
+function normalizeDetail(
+  detail: WmsShipmentOrderDetailApi.ShipmentOrderDetail,
+): DetailRow {
+  detailSeq += 1;
+  return {
+    ...detail,
+    seq: detailSeq,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  };
+}
+
+/** 根据库存构建新的出库明细 */
+function buildDetail(inventory: InventorySelectRow): DetailRow {
+  return normalizeDetail({
+    availableQuantity: inventory.availableQuantity,
+    id: undefined,
+    itemCode: inventory.itemCode,
+    itemId: inventory.itemId,
+    itemName: inventory.itemName,
+    price: undefined,
+    quantity: undefined,
+    skuCode: inventory.skuCode,
+    skuId: inventory.skuId,
+    skuName: inventory.skuName,
+    totalPrice: undefined,
+    unit: inventory.unit,
+    warehouseId: inventory.warehouseId,
+    warehouseName: inventory.warehouseName,
+  });
+}
+
+/** 设置出库明细 */
+function setDetails(list?: WmsShipmentOrderDetailApi.ShipmentOrderDetail[]) {
+  detailSeq = 0;
+  details.value = (list || []).map((detail) => normalizeDetail(detail));
+  void refreshDetailFooter();
+}
+
+/** 刷新明细合计行 */
+async function refreshDetailFooter() {
+  await nextTick();
+  await detailTableRef.value?.updateFooter();
+}
+
+/** 添加商品明细 */
+async function handleAddDetail() {
+  const values = (await formApi.getValues()) as WmsShipmentOrderApi.ShipmentOrder;
+  if (!values.warehouseId) {
+    ElMessage.warning('请先选择仓库');
+    return;
+  }
+  currentWarehouseId.value = values.warehouseId;
+  await nextTick();
+  inventorySelectRef.value?.open(getSelectedInventoryKeys());
+}
+
+/** 选择库存 */
+function handleSelectInventory(inventories: InventorySelectRow[]) {
+  if (inventories.length === 0) {
+    return;
+  }
+  let changed = false;
+  for (const inventory of inventories) {
+    if (!inventory.skuId || isInventorySelected(inventory)) {
+      continue;
+    }
+    details.value.push(buildDetail(inventory));
+    changed = true;
+  }
+  if (changed) {
+    void refreshDetailFooter();
+  }
+}
+
+/** 判断库存是否已选择 */
+function isInventorySelected(inventory: InventorySelectRow) {
+  return details.value.some((detail) => {
+    return (
+      detail.skuId === inventory.skuId &&
+      detail.warehouseId === inventory.warehouseId
+    );
+  });
+}
+
+/** 获得已选择的库存标识 */
+function getSelectedInventoryKeys() {
+  return details.value
+    .map((detail) =>
+      detail.skuId && detail.warehouseId
+        ? `${detail.skuId}-${detail.warehouseId}`
+        : undefined,
+    )
+    .filter((key): key is string => !!key);
+}
+
+/** 删除商品明细 */
+function handleDeleteDetail(row: DetailRow) {
+  const index = details.value.findIndex((detail) => detail.seq === row.seq);
+  if (index !== -1) {
+    details.value.splice(index, 1);
+    void refreshDetailFooter();
+  }
+}
+
+/** 仓库变化时清空出库明细 */
+function handleWarehouseChange(warehouse?: WmsWarehouseApi.Warehouse) {
+  if (initializing.value) {
+    return;
+  }
+  formData.value.warehouseId = warehouse?.id;
+  formData.value.warehouseName = warehouse?.name;
+  currentWarehouseId.value = warehouse?.id;
+  setDetails([]);
+}
+
+/** 明细数量变化 */
+function handleDetailQuantityChange(detail: DetailRow) {
+  if (detail.price !== undefined && detail.price !== null) {
+    detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+    void refreshDetailFooter();
+    return;
+  }
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 明细单价变化 */
+function handleDetailPriceChange(detail: DetailRow) {
+  detail.totalPrice = multiplyPrice(detail.quantity, detail.price);
+  void refreshDetailFooter();
+}
+
+/** 明细金额变化 */
+function handleDetailTotalPriceChange(detail: DetailRow) {
+  detail.price = dividePrice(detail.totalPrice, detail.quantity);
+  void refreshDetailFooter();
+}
+
+/** 校验商品明细 */
+function validateDetails(required = false) {
+  if (details.value.length === 0) {
+    if (required) {
+      ElMessage.error('至少包含一条出库明细');
+      return false;
+    }
+    return true;
+  }
+  for (let index = 0; index < details.value.length; index += 1) {
+    const detail = details.value[index]!;
+    if (!detail.skuId) {
+      ElMessage.error(`第 ${index + 1} 行明细请选择商品规格`);
+      return false;
+    }
+    if (!detail.quantity || detail.quantity <= 0) {
+      ElMessage.error(`第 ${index + 1} 行明细出库数量必须大于 0`);
+      return false;
+    }
+    if (
+      detail.availableQuantity !== undefined &&
+      detail.quantity > detail.availableQuantity
+    ) {
+      ElMessage.error(`第 ${index + 1} 行明细出库数量不能大于可用库存`);
+      return false;
+    }
+  }
+  return true;
+}
+
+/** 构建提交用的明细数据 */
+function buildSubmitDetails() {
+  return details.value.map((row) => {
+    const { seq: _seq, ...detail } = row;
+    return detail;
+  });
+}
+
+/** 构建提交用的单据数据 */
+async function buildSubmitData(): Promise<WmsShipmentOrderApi.ShipmentOrder> {
+  const values = (await formApi.getValues()) as WmsShipmentOrderApi.ShipmentOrder;
+  const {
+    details: _details,
+    totalPrice: _totalPrice,
+    totalQuantity: _totalQuantity,
+    ...order
+  } = formData.value;
+  return {
+    ...order,
+    ...values,
+    details: buildSubmitDetails(),
+  };
+}
+
+/** 完成出库 */
+async function handleFormComplete() {
+  const { valid } = await formApi.validate();
+  if (!valid || !validateDetails(true) || !formData.value?.id) {
+    return;
+  }
+  await confirm('确认完成出库？完成后将更新库存。');
+  modalApi.lock();
+  try {
+    const data = await buildSubmitData();
+    if (!isEqual(data, originalSubmitData.value)) {
+      await updateShipmentOrder(data);
+    }
+    await completeShipmentOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    ElMessage.success('出库成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+/** 作废出库单 */
+async function handleFormCancel() {
+  if (!formData.value?.id) {
+    return;
+  }
+  await confirm('确认作废该出库单？作废后不可恢复。');
+  modalApi.lock();
+  try {
+    await cancelShipmentOrder(formData.value.id);
+    await modalApi.close();
+    emit('success');
+    ElMessage.success('作废成功');
+  } finally {
+    modalApi.unlock();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid || !validateDetails(false) || !isPrepareOrder.value) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    const data = await buildSubmitData();
+    try {
+      await (formMode.value === 'update'
+        ? updateShipmentOrder(data)
+        : createShipmentOrder(data));
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      ElMessage.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = {};
+      originalSubmitData.value = undefined;
+      currentWarehouseId.value = undefined;
+      setDetails([]);
+      return;
+    }
+    initializing.value = true;
+    await formApi.resetForm();
+    const data = modalApi.getData<{
+      id?: number;
+      type?: string;
+    }>();
+    formMode.value = data?.type || (data?.id ? 'update' : 'create');
+    if (data?.id) {
+      modalApi.lock();
+      try {
+        // 加载数据
+        const order = await getShipmentOrder(data.id);
+        const orderDetails =
+          order.details || (await getShipmentOrderDetailListByOrderId(data.id));
+        formData.value = { ...order, details: orderDetails };
+        currentWarehouseId.value = order.warehouseId;
+        setDetails(orderDetails);
+        // 设置到 values
+        await formApi.setValues(formData.value);
+        await nextTick();
+        originalSubmitData.value = await buildSubmitData();
+      } finally {
+        initializing.value = false;
+        modalApi.unlock();
+      }
+      return;
+    }
+    // 初始化新增表单
+    formData.value = {
+      details: [],
+      no: generateOrderNo('CK'),
+      status: OrderStatusEnum.PREPARE,
+    };
+    currentWarehouseId.value = undefined;
+    setDetails([]);
+    await formApi.setValues(formData.value);
+    await nextTick();
+    originalSubmitData.value = await buildSubmitData();
+    initializing.value = false;
+  },
+});
+</script>
+
+<template>
+  <Modal
+    :title="getTitle"
+    class="w-3/4"
+    :show-confirm-button="isPrepareOrder"
+  >
+    <div class="mx-4">
+      <Form />
+      <div class="mt-4">
+        <div class="mb-3 flex items-center justify-between">
+          <span class="text-sm font-semibold">出库明细</span>
+          <TableAction
+            :actions="[
+              {
+                label: '添加商品',
+                onClick: handleAddDetail,
+                type: 'primary',
+              },
+            ]"
+          />
+        </div>
+        <VxeTable
+          ref="detailTableRef"
+          :data="details"
+          border
+          empty-text="暂无商品明细"
+          :footer-method="getDetailFooter"
+          :show-overflow="true"
+          show-footer
+          size="small"
+        >
+          <VxeColumn title="商品信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.itemName || '-' }}</div>
+              <div v-if="row.itemCode" class="text-xs text-gray-500">
+                商品编号：{{ row.itemCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn title="规格信息" min-width="220">
+            <template #default="{ row }">
+              <div>{{ row.skuName || '-' }}</div>
+              <div v-if="row.skuCode" class="text-xs text-gray-500">
+                规格编号：{{ row.skuCode }}
+              </div>
+            </template>
+          </VxeColumn>
+          <VxeColumn field="availableQuantity" title="可用库存" align="right" width="120">
+            <template #default="{ row }">
+              {{ formatQuantity(row.availableQuantity) || '-' }}
+            </template>
+          </VxeColumn>
+          <VxeColumn field="quantity" title="出库数量" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.quantity"
+                :controls="false"
+                :min="0"
+                :precision="QUANTITY_PRECISION"
+                class="!w-full"
+                placeholder="数量"
+                @change="handleDetailQuantityChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="price" title="单价(元)" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.price"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="单价"
+                @change="handleDetailPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn field="totalPrice" title="金额(元)" width="150">
+            <template #default="{ row }">
+              <ElInputNumber
+                v-model="row.totalPrice"
+                :controls="false"
+                :min="0"
+                :precision="PRICE_PRECISION"
+                class="!w-full"
+                placeholder="金额"
+                @change="handleDetailTotalPriceChange(row)"
+              />
+            </template>
+          </VxeColumn>
+          <VxeColumn title="操作" align="center" fixed="right" width="90">
+            <template #default="{ row }">
+              <TableAction
+                :actions="[
+                  {
+                    label: '删除',
+                    type: 'danger',
+                    link: true,
+                    onClick: handleDeleteDetail.bind(null, row),
+                  },
+                ]"
+              />
+            </template>
+          </VxeColumn>
+        </VxeTable>
+      </div>
+    </div>
+    <template #prepend-footer>
+      <div v-if="isSavedPrepareOrder" class="flex flex-auto items-center gap-2">
+        <TableAction
+          :actions="[
+            {
+              label: '完成出库',
+              type: 'primary',
+              auth: ['wms:shipment-order:complete'],
+              onClick: handleFormComplete,
+            },
+            {
+              label: '作废',
+              type: 'danger',
+              auth: ['wms:shipment-order:cancel'],
+              onClick: handleFormCancel,
+            },
+          ]"
+        />
+      </div>
+    </template>
+    <WmsInventorySelect
+      ref="inventorySelectRef"
+      :warehouse-id="currentWarehouseId"
+      @change="handleSelectInventory"
+    />
+  </Modal>
+</template>
diff --git a/apps/web-ele/src/views/wms/order/shipment/modules/print.vue b/apps/web-ele/src/views/wms/order/shipment/modules/print.vue
new file mode 100644
index 000000000..89670420c
--- /dev/null
+++ b/apps/web-ele/src/views/wms/order/shipment/modules/print.vue
@@ -0,0 +1,231 @@
+<script lang="ts" setup>
+import type { WmsShipmentOrderApi } from '#/api/wms/order/shipment';
+import type { WmsShipmentOrderDetailApi } from '#/api/wms/order/shipment/detail';
+
+import { computed, nextTick, ref } from 'vue';
+
+import { Barcode, BarcodeFormatEnum } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictLabel } from '@vben/hooks';
+import { formatDate, formatDateTime } from '@vben/utils';
+
+import {
+  getShipmentOrder,
+  getShipmentOrderDetailListByOrderId,
+} from '#/api/wms/order/shipment';
+import {
+  formatPrice,
+  formatQuantity,
+  formatSumPrice,
+  formatSumQuantity,
+  multiplyPrice,
+} from '#/views/wms/utils/format';
+
+interface PrintRow extends WmsShipmentOrderDetailApi.ShipmentOrderDetail {
+  totalPrice?: number;
+}
+
+defineOptions({ name: 'WmsShipmentOrderPrint' });
+
+const printData = ref<WmsShipmentOrderApi.ShipmentOrder>({});
+const tableColumnCount = 5;
+
+const printRows = computed<PrintRow[]>(() =>
+  (printData.value.details || []).map((detail) => ({
+    ...detail,
+    totalPrice: detail.totalPrice ?? multiplyPrice(detail.quantity, detail.price),
+  })),
+);
+
+/** 等待条码和打印 DOM 完成绘制，避免浏览器打印到旧内容 */
+function waitForPaint() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve());
+    });
+  });
+}
+
+/** 退出打印模式，恢复当前页面显示 */
+function removePrintMode() {
+  document.body.classList.remove('wms-shipment-order-printing');
+}
+
+/** 获取打印用字典文案，空值统一显示为横杠 */
+function getPrintDictLabel(dictType: string, value?: number) {
+  if (value === undefined || value === null) {
+    return '-';
+  }
+  return getDictLabel(dictType, value) || '-';
+}
+
+/** 打印出库单：加载数据后只展示打印区域，再调用浏览器打印 */
+async function print(id: number) {
+  const order = await getShipmentOrder(id);
+  const details = order.details || (await getShipmentOrderDetailListByOrderId(id));
+  printData.value = { ...order, details };
+  await nextTick();
+  await waitForPaint();
+  document.body.classList.add('wms-shipment-order-printing');
+  window.addEventListener('afterprint', removePrintMode, { once: true });
+  window.print();
+}
+
+defineExpose({ print });
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      id="wmsShipmentOrderPrint"
+      class="wms-shipment-order-print pointer-events-none fixed left-0 top-0 z-[-1] w-full bg-white text-[#303133] opacity-0"
+    >
+      <div class="relative mb-2">
+        <h2 class="m-0 text-center text-[1.5em] font-bold leading-[1.2]">
+          出库单
+        </h2>
+        <div v-if="printData.no" class="absolute right-0 top-0">
+          <Barcode
+            :content="printData.no"
+            :display-value="false"
+            :format="BarcodeFormatEnum.CODE39"
+            :height="40"
+            :width="180"
+          />
+        </div>
+      </div>
+      <div class="mb-3 grid grid-cols-3 gap-x-6 gap-y-2 text-sm leading-[1.5]">
+        <div>出库单号：{{ printData.no || '-' }}</div>
+        <div>
+          出库类型：{{ getPrintDictLabel(DICT_TYPE.WMS_SHIPMENT_ORDER_TYPE, printData.type) }}
+        </div>
+        <div>仓库：{{ printData.warehouseName || '-' }}</div>
+        <div>
+          出库状态：{{ getPrintDictLabel(DICT_TYPE.WMS_ORDER_STATUS, printData.status) }}
+        </div>
+        <div>单据日期：{{ formatDate(printData.orderTime, 'YYYY-MM-DD') || '-' }}</div>
+        <div>客户：{{ printData.merchantName || '-' }}</div>
+        <div>业务单号：{{ printData.bizOrderNo || '-' }}</div>
+        <div>总数量：{{ formatQuantity(printData.totalQuantity) || '-' }}</div>
+        <div>总金额：{{ formatPrice(printData.totalPrice) || '-' }}</div>
+        <div class="col-span-3 grid grid-cols-2 gap-x-6">
+          <div>
+            创建：{{ formatDateTime(printData.createTime) || '-' }} /
+            {{ printData.creatorName || printData.creator || '-' }}
+          </div>
+          <div>
+            更新：{{ formatDateTime(printData.updateTime) || '-' }} /
+            {{ printData.updaterName || printData.updater || '-' }}
+          </div>
+        </div>
+        <div class="col-span-3">备注：{{ printData.remark || '-' }}</div>
+      </div>
+      <table class="w-full border-collapse text-[13px] leading-[1.5]">
+        <thead>
+          <tr>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              商品信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              规格信息
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              数量
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              单价(元)
+            </th>
+            <th class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-left font-bold">
+              金额(元)
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="detail in printRows" :key="detail.id || detail.skuId">
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.itemName || '-' }}</div>
+              <div v-if="detail.itemCode" class="text-xs">
+                编号：{{ detail.itemCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2">
+              <div>{{ detail.skuName || '-' }}</div>
+              <div v-if="detail.skuCode" class="text-xs">
+                编号：{{ detail.skuCode }}
+              </div>
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatQuantity(detail.quantity) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.price) || '-' }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] p-2 text-right">
+              {{ formatPrice(detail.totalPrice) || '-' }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length > 0">
+            <td
+              class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2"
+              colspan="2"
+            >
+              合计
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumQuantity(printRows, (detail) => detail.quantity) }}
+            </td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right"></td>
+            <td class="border border-solid border-[#dcdfe6] bg-[#f5f7fa] p-2 text-right">
+              {{ formatSumPrice(printRows, (detail) => detail.totalPrice) }}
+            </td>
+          </tr>
+          <tr v-if="printRows.length === 0">
+            <td
+              class="border border-solid border-[#dcdfe6] p-2 text-center"
+              :colspan="tableColumnCount"
+            >
+              暂无明细
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+@page {
+  margin: 8mm 10mm;
+}
+
+@media print {
+  :global(body.wms-shipment-order-printing) {
+    -webkit-print-color-adjust: exact;
+    margin: 0 !important;
+    padding: 0 !important;
+    print-color-adjust: exact;
+  }
+
+  :global(body.wms-shipment-order-printing *) {
+    visibility: hidden !important;
+  }
+
+  :global(body.wms-shipment-order-printing .wms-shipment-order-print),
+  :global(body.wms-shipment-order-printing .wms-shipment-order-print *) {
+    visibility: visible !important;
+  }
+
+  :global(body.wms-shipment-order-printing .wms-shipment-order-print) {
+    pointer-events: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: auto;
+    box-sizing: border-box;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+    opacity: 1;
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/wms/utils/constants.ts b/apps/web-ele/src/views/wms/utils/constants.ts
new file mode 100644
index 000000000..aedddcade
--- /dev/null
+++ b/apps/web-ele/src/views/wms/utils/constants.ts
@@ -0,0 +1,58 @@
+/** 单据状态枚举 */
+export const OrderStatusEnum = {
+  PREPARE: 0, // 草稿
+  FINISHED: 4, // 已完成
+  CANCELED: 5, // 已作废
+} as const;
+
+/** 单据类型枚举 */
+export const OrderTypeEnum = {
+  RECEIPT: 1, // 入库
+  SHIPMENT: 2, // 出库
+  MOVEMENT: 3, // 移库
+  CHECK: 4, // 盘库
+} as const;
+
+export type OrderType = (typeof OrderTypeEnum)[keyof typeof OrderTypeEnum];
+
+/** 可修改的单据状态 */
+export const OrderUpdateStatusList: number[] = [OrderStatusEnum.PREPARE];
+
+/** 可删除的单据状态 */
+export const OrderDeleteStatusList: number[] = [
+  OrderStatusEnum.PREPARE,
+  OrderStatusEnum.CANCELED,
+];
+
+/** 往来企业类型枚举 */
+export const MerchantTypeEnum = {
+  CUSTOMER: 1, // 客户
+  SUPPLIER: 2, // 供应商
+  CUSTOMER_SUPPLIER: 3, // 客户/供应商
+} as const;
+
+/** 供应商类型的往来企业 */
+export const SupplierMerchantTypeList = [
+  MerchantTypeEnum.SUPPLIER,
+  MerchantTypeEnum.CUSTOMER_SUPPLIER,
+];
+
+/** 客户类型的往来企业 */
+export const CustomerMerchantTypeList = [
+  MerchantTypeEnum.CUSTOMER,
+  MerchantTypeEnum.CUSTOMER_SUPPLIER,
+];
+
+/**
+ * 生成 WMS 编号 / 条码。
+ *
+ * @param prefix 可选前缀，按业务域区分编号种类。
+ * @returns 前缀 + 8 位随机数字串。
+ */
+export function generateWmsCode(prefix = ''): string {
+  let result = '';
+  for (let i = 0; i < 8; i++) {
+    result += Math.floor(Math.random() * 10).toString();
+  }
+  return prefix + result;
+}
diff --git a/apps/web-ele/src/views/wms/utils/format.ts b/apps/web-ele/src/views/wms/utils/format.ts
new file mode 100644
index 000000000..e02b28e1b
--- /dev/null
+++ b/apps/web-ele/src/views/wms/utils/format.ts
@@ -0,0 +1,153 @@
+/**
+ * WMS 展示格式化和表单配置
+ */
+
+type DecimalValue = null | number | string | undefined;
+
+/** 数量小数位 */
+export const QUANTITY_PRECISION = 2;
+/** 金额小数位 */
+export const PRICE_PRECISION = 2;
+/** 重量小数位 */
+export const WEIGHT_PRECISION = 3;
+/** 长宽高小数位 */
+export const DIMENSION_PRECISION = 1;
+
+function isNullOrUndefined(value: unknown) {
+  return value === null || value === undefined;
+}
+
+function toFiniteDecimal(value: DecimalValue) {
+  if (isNullOrUndefined(value)) {
+    return undefined;
+  }
+  if (typeof value === 'string' && value.trim() === '') {
+    return undefined;
+  }
+  const decimalValue = typeof value === 'string' ? Number(value) : value;
+  if (!Number.isFinite(decimalValue)) {
+    return undefined;
+  }
+  return decimalValue;
+}
+
+function sumDecimal<T>(list: T[], getter: (item: T) => DecimalValue) {
+  let sum = 0;
+  for (const item of list) {
+    const decimalValue = toFiniteDecimal(getter(item));
+    if (decimalValue !== undefined) {
+      sum += decimalValue;
+    }
+  }
+  return sum;
+}
+
+/** 格式化数量 */
+export function formatQuantity(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue === undefined
+    ? ''
+    : decimalValue.toFixed(QUANTITY_PRECISION);
+}
+
+/** 格式化金额 */
+export function formatPrice(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue === undefined ? '' : decimalValue.toFixed(PRICE_PRECISION);
+}
+
+/** 金额四舍五入 */
+export function roundPrice(value: number) {
+  return Number.isFinite(value) ? Number(value.toFixed(PRICE_PRECISION)) : undefined;
+}
+
+/** 亏损数字样式 */
+export function getLossClass(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue !== undefined && decimalValue < 0 ? 'text-red-500' : '';
+}
+
+/** 数量 * 单价，计算金额 */
+export function multiplyPrice(quantity?: number, price?: number) {
+  if (
+    quantity === undefined ||
+    quantity === null ||
+    price === undefined ||
+    price === null
+  ) {
+    return undefined;
+  }
+  return roundPrice(Number(quantity) * Number(price));
+}
+
+/** 金额 / 数量，反算单价 */
+export function dividePrice(totalPrice?: number, quantity?: number) {
+  if (totalPrice === undefined || totalPrice === null || !quantity) {
+    return undefined;
+  }
+  return roundPrice(Number(totalPrice) / Number(quantity));
+}
+
+/** 汇总数量 */
+export function sumQuantity<T>(list: T[], getter: (item: T) => DecimalValue) {
+  return sumDecimal(list, getter);
+}
+
+/** 汇总金额 */
+export function sumPrice<T>(list: T[], getter: (item: T) => DecimalValue) {
+  return sumDecimal(list, getter);
+}
+
+/** 格式化汇总数量 */
+export function formatSumQuantity<T>(
+  list: T[],
+  getter: (item: T) => DecimalValue,
+) {
+  return formatQuantity(sumQuantity(list, getter));
+}
+
+/** 格式化汇总金额 */
+export function formatSumPrice<T>(
+  list: T[],
+  getter: (item: T) => DecimalValue,
+) {
+  return formatPrice(sumPrice(list, getter));
+}
+
+/** 格式化重量 */
+export function formatWeight(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue === undefined ? '' : decimalValue.toFixed(WEIGHT_PRECISION);
+}
+
+/** 格式化长宽高 */
+export function formatDimension(value?: null | number | string) {
+  const decimalValue = toFiniteDecimal(value);
+  return decimalValue === undefined
+    ? ''
+    : decimalValue.toFixed(DIMENSION_PRECISION);
+}
+
+/** 格式化长宽高组合 */
+export function formatDimensionText(
+  length?: null | number | string,
+  width?: null | number | string,
+  height?: null | number | string,
+) {
+  if (
+    !isNullOrUndefined(length) &&
+    !isNullOrUndefined(width) &&
+    !isNullOrUndefined(height)
+  ) {
+    return [formatDimension(length), formatDimension(width), formatDimension(height)].join(
+      ' * ',
+    );
+  }
+  return [
+    isNullOrUndefined(length) ? undefined : `长：${formatDimension(length)}`,
+    isNullOrUndefined(width) ? undefined : `宽：${formatDimension(width)}`,
+    isNullOrUndefined(height) ? undefined : `高：${formatDimension(height)}`,
+  ]
+    .filter(Boolean)
+    .join(' ');
+}
diff --git a/apps/web-ele/src/views/wms/utils/order.ts b/apps/web-ele/src/views/wms/utils/order.ts
new file mode 100644
index 000000000..5f31136c3
--- /dev/null
+++ b/apps/web-ele/src/views/wms/utils/order.ts
@@ -0,0 +1,12 @@
+/**
+ * WMS 订单工具
+ */
+
+/** 生成业务单号：前缀 + 月日 + 4 位随机数 */
+export function generateOrderNo(prefix: string) {
+  const now = new Date();
+  const month = String(now.getMonth() + 1).padStart(2, '0');
+  const day = String(now.getDate()).padStart(2, '0');
+  const randomNo = String(Math.floor(Math.random() * 10_000)).padStart(4, '0');
+  return `${prefix}${month}${day}${randomNo}`;
+}
diff --git a/packages/@core/base/shared/src/utils/inference.ts b/packages/@core/base/shared/src/utils/inference.ts
index a9ace62c5..c5c4b4555 100644
--- a/packages/@core/base/shared/src/utils/inference.ts
+++ b/packages/@core/base/shared/src/utils/inference.ts
@@ -33,7 +33,7 @@ function isBoolean(value: unknown): value is boolean {
  * @param {T} value 要检查的值。
  * @returns {boolean} 如果值为空，返回true，否则返回false。
  */
-function isEmpty<T = unknown>(value?: T): value is T {
+function isEmpty<T = unknown>(value?: T): boolean {
   if (value === null || value === undefined) {
     return true;
   }
diff --git a/packages/constants/src/biz-iot-enum.ts b/packages/constants/src/biz-iot-enum.ts
index b1cb4bb82..8133b10ad 100644
--- a/packages/constants/src/biz-iot-enum.ts
+++ b/packages/constants/src/biz-iot-enum.ts
@@ -1,41 +1,209 @@
-// ========== IOT - 设备模块 ==========
-/**
- * 设备状态枚举
- */
-export const DeviceStateEnum = {
-  INACTIVE: 0, // 未激活
-  OFFLINE: 2, // 离线
-  ONLINE: 1, // 在线
+import { isEmpty } from '@vben-core/shared/utils';
+
+// ========== IOT - 依赖注入 ==========
+/** IoT 依赖注入 KEY */
+export const IOT_PROVIDE_KEY = {
+  PRODUCT: 'IOT_PRODUCT',
 } as const;
 
-// ========== IOT - 产品模块 ==========
+// ========== IOT - 设备模块 ==========
+/** 设备状态枚举 */
+export const DeviceStateEnum = {
+  INACTIVE: 0, // 未激活
+  ONLINE: 1, // 在线
+  OFFLINE: 2, // 离线
+} as const;
+
+/** 设备状态选择器特殊选项 */
+export const DEVICE_SELECTOR_OPTIONS = {
+  ALL_DEVICES: {
+    id: 0,
+    deviceName: '全部设备',
+  },
+};
+
 /**
- * 产品设备类型枚举
+ * 设备状态汇总；label / value 给业务用，tagType 给 UI 层做颜色映射（不同框架可能各取所需）
  */
+export const IoTDeviceStatusEnum = {
+  // 在线状态
+  ONLINE: {
+    label: '在线',
+    value: 'online',
+    tagType: 'success',
+  },
+  OFFLINE: {
+    label: '离线',
+    value: 'offline',
+    tagType: 'danger',
+  },
+  // 启用状态
+  ENABLED: {
+    label: '正常',
+    value: 0,
+    value2: 'enabled',
+    tagType: 'success',
+  },
+  DISABLED: {
+    label: '禁用',
+    value: 1,
+    value2: 'disabled',
+    tagType: 'danger',
+  },
+  // 激活状态
+  ACTIVATED: {
+    label: '已激活',
+    value2: 'activated',
+    tagType: 'success',
+  },
+  NOT_ACTIVATED: {
+    label: '未激活',
+    value2: 'not_activated',
+    tagType: 'info',
+  },
+};
+
+// ========== IOT - 产品模块 ==========
+/** 产品设备类型枚举 */
 export const DeviceTypeEnum = {
   DEVICE: 0, // 直连设备
   GATEWAY: 2, // 网关设备
   GATEWAY_SUB: 1, // 网关子设备
 } as const;
 
-/**
- * 产品状态枚举
- */
+/** 产品设备类型枚举（与 DeviceTypeEnum 同义，保留旧名兼容旧代码） */
+export const IoTProductDeviceTypeEnum = DeviceTypeEnum;
+
+/** 产品状态枚举 */
 export const ProductStatusEnum = {
   UNPUBLISHED: 0, // 开发中
   PUBLISHED: 1, // 已发布
 } as const;
 
-/**
- * 数据格式（编解码器类型）枚举
- */
+/** 数据格式（编解码器类型）枚举 */
 export const CodecTypeEnum = {
   ALINK: 'Alink', // 阿里云 Alink 协议
 } as const;
 
-/**
- * IoT 设备消息的方法枚举
- */
+// ========== IOT - 物模型 ==========
+/** IoT 产品物模型类型枚举类 */
+export const IoTThingModelTypeEnum = {
+  PROPERTY: 1, // 属性
+  SERVICE: 2, // 服务
+  EVENT: 3, // 事件
+};
+
+/** 物模型组标签常量 */
+export const THING_MODEL_GROUP_LABELS = {
+  PROPERTY: '设备属性',
+  EVENT: '设备事件',
+  SERVICE: '设备服务',
+};
+
+/** IoT 产品物模型服务调用方式枚举 */
+export const IoTThingModelServiceCallTypeEnum = {
+  ASYNC: { label: '异步', value: 'async' },
+  SYNC: { label: '同步', value: 'sync' },
+};
+
+/** 获取服务调用方式标签 */
+export const getThingModelServiceCallTypeLabel = (
+  value: string,
+): string | undefined =>
+  Object.values(IoTThingModelServiceCallTypeEnum).find(
+    (type) => type.value === value,
+  )?.label;
+
+/** IoT 产品物模型事件类型枚举 */
+export const IoTThingModelEventTypeEnum = {
+  INFO: { label: '信息', value: 'info' },
+  ALERT: { label: '告警', value: 'alert' },
+  ERROR: { label: '故障', value: 'error' },
+};
+
+/** 获取事件类型标签 */
+export const getEventTypeLabel = (value: string): string | undefined =>
+  Object.values(IoTThingModelEventTypeEnum).find((type) => type.value === value)
+    ?.label;
+
+/** IoT 产品物模型参数方向：输入参数 / 输出参数 */
+export const IoTThingModelParamDirectionEnum = {
+  INPUT: 'input', // 输入参数
+  OUTPUT: 'output', // 输出参数
+};
+
+/** IoT 产品物模型访问模式枚举 */
+export const IoTThingModelAccessModeEnum = {
+  READ_WRITE: { label: '读写', value: 'rw' },
+  READ_ONLY: { label: '只读', value: 'r' },
+  WRITE_ONLY: { label: '只写', value: 'w' },
+};
+
+/** 获取访问模式标签 */
+export const getAccessModeLabel = (value: string): string => {
+  const mode = Object.values(IoTThingModelAccessModeEnum).find(
+    (item) => item.value === value,
+  );
+  return mode?.label || value;
+};
+
+/** 属性值的数据类型 */
+export const IoTDataSpecsDataTypeEnum = {
+  INT: 'int',
+  FLOAT: 'float',
+  DOUBLE: 'double',
+  ENUM: 'enum',
+  BOOL: 'bool',
+  TEXT: 'text',
+  DATE: 'date',
+  STRUCT: 'struct',
+  ARRAY: 'array',
+};
+
+const DATA_TYPE_OPTIONS = Object.freeze([
+  { value: IoTDataSpecsDataTypeEnum.INT, label: '整数型' },
+  { value: IoTDataSpecsDataTypeEnum.FLOAT, label: '单精度浮点型' },
+  { value: IoTDataSpecsDataTypeEnum.DOUBLE, label: '双精度浮点型' },
+  { value: IoTDataSpecsDataTypeEnum.ENUM, label: '枚举型' },
+  { value: IoTDataSpecsDataTypeEnum.BOOL, label: '布尔型' },
+  { value: IoTDataSpecsDataTypeEnum.TEXT, label: '文本型' },
+  { value: IoTDataSpecsDataTypeEnum.DATE, label: '时间型' },
+  { value: IoTDataSpecsDataTypeEnum.STRUCT, label: '结构体' },
+  { value: IoTDataSpecsDataTypeEnum.ARRAY, label: '数组' },
+]);
+
+/** 获取物模型数据类型选项 */
+export const getDataTypeOptions = () => DATA_TYPE_OPTIONS;
+
+/** 获取数据类型选项展示标签（value 含括号说明） */
+export const getDataTypeOptionsLabel = (value: string) => {
+  if (isEmpty(value)) {
+    return value;
+  }
+  const dataType = getDataTypeOptions().find(
+    (option) => option.value === value,
+  );
+  return dataType && `${dataType.value}(${dataType.label})`;
+};
+
+/** 获取数据类型显示名称（用于属性选择器） */
+export const getDataTypeName = (dataType: string): string => {
+  const typeMap: Record<string, string> = {
+    [IoTDataSpecsDataTypeEnum.INT]: '整数',
+    [IoTDataSpecsDataTypeEnum.FLOAT]: '浮点数',
+    [IoTDataSpecsDataTypeEnum.DOUBLE]: '双精度',
+    [IoTDataSpecsDataTypeEnum.TEXT]: '字符串',
+    [IoTDataSpecsDataTypeEnum.BOOL]: '布尔值',
+    [IoTDataSpecsDataTypeEnum.ENUM]: '枚举',
+    [IoTDataSpecsDataTypeEnum.DATE]: '日期',
+    [IoTDataSpecsDataTypeEnum.STRUCT]: '结构体',
+    [IoTDataSpecsDataTypeEnum.ARRAY]: '数组',
+  };
+  return typeMap[dataType] || dataType;
+};
+
+// ========== IOT - 设备消息 ==========
+/** IoT 设备消息的方法枚举 */
 export const IotDeviceMessageMethodEnum = {
   // ========== 设备状态 ==========
   STATE_UPDATE: {
@@ -128,3 +296,391 @@ export const IotDeviceMessageMethodEnum = {
     upstream: true,
   },
 } as const;
+
+// ========== IOT - OTA ==========
+/** IoT OTA 任务设备范围枚举 */
+export const IoTOtaTaskDeviceScopeEnum = {
+  ALL: { label: '全部设备', value: 1 },
+  SELECT: { label: '指定设备', value: 2 },
+};
+
+/** IoT OTA 任务状态枚举 */
+export const IoTOtaTaskStatusEnum = {
+  IN_PROGRESS: { label: '进行中', value: 10 },
+  END: { label: '已结束', value: 20 },
+  CANCELED: { label: '已取消', value: 30 },
+};
+
+/** IoT OTA 升级记录状态枚举 */
+export const IoTOtaTaskRecordStatusEnum = {
+  PENDING: { label: '待推送', value: 0 },
+  PUSHED: { label: '已推送', value: 10 },
+  UPGRADING: { label: '升级中', value: 20 },
+  SUCCESS: { label: '升级成功', value: 30 },
+  FAILURE: { label: '升级失败', value: 40 },
+  CANCELED: { label: '升级取消', value: 50 },
+};
+
+// ========== IOT - 场景联动 ==========
+/** IoT 场景联动触发器类型枚举 */
+export const IotRuleSceneTriggerTypeEnum = {
+  DEVICE_STATE_UPDATE: 1, // 设备上下线变更
+  DEVICE_PROPERTY_POST: 2, // 物模型属性上报
+  DEVICE_EVENT_POST: 3, // 设备事件上报
+  DEVICE_SERVICE_INVOKE: 4, // 设备服务调用
+  TIMER: 100, // 定时触发
+};
+
+/** 触发器类型选项配置 */
+export const triggerTypeOptions = [
+  {
+    value: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
+    label: '设备状态变更',
+  },
+  {
+    value: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
+    label: '设备属性上报',
+  },
+  {
+    value: IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST,
+    label: '设备事件上报',
+  },
+  {
+    value: IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
+    label: '设备服务调用',
+  },
+  {
+    value: IotRuleSceneTriggerTypeEnum.TIMER,
+    label: '定时触发',
+  },
+];
+
+/** 判断是否为设备触发器类型 */
+export function isDeviceTrigger(type: number): boolean {
+  const deviceTriggerTypes = [
+    IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
+    IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
+    IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST,
+    IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE,
+  ] as number[];
+  return deviceTriggerTypes.includes(type);
+}
+
+/** 获取触发器类型标签 */
+export const getTriggerTypeLabel = (type: number): string => {
+  const option = triggerTypeOptions.find((item) => item.value === type);
+  return option?.label || '未知类型';
+};
+
+/** IoT 场景联动执行器类型枚举 */
+export const IotRuleSceneActionTypeEnum = {
+  DEVICE_PROPERTY_SET: 1, // 设备属性设置
+  DEVICE_SERVICE_INVOKE: 2, // 设备服务调用
+  ALERT_TRIGGER: 100, // 告警触发
+  ALERT_RECOVER: 101, // 告警恢复
+};
+
+/** 执行器类型选项配置 */
+export const actionTypeOptions = [
+  {
+    value: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET,
+    label: '设备属性设置',
+  },
+  {
+    value: IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE,
+    label: '设备服务调用',
+  },
+  { value: IotRuleSceneActionTypeEnum.ALERT_TRIGGER, label: '触发告警' },
+  { value: IotRuleSceneActionTypeEnum.ALERT_RECOVER, label: '恢复告警' },
+];
+
+/** 兼容旧调用：保留函数形态 */
+export const getActionTypeOptions = () => actionTypeOptions;
+
+/** 获取执行器类型标签 */
+export const getActionTypeLabel = (type: number): string => {
+  const option = actionTypeOptions.find((opt) => opt.value === type);
+  return option?.label || '未知类型';
+};
+
+/** IoT 场景联动触发条件参数操作符枚举 */
+export const IotRuleSceneTriggerConditionParameterOperatorEnum = {
+  EQUALS: { name: '等于', value: '=' },
+  NOT_EQUALS: { name: '不等于', value: '!=' },
+  GREATER_THAN: { name: '大于', value: '>' },
+  GREATER_THAN_OR_EQUALS: { name: '大于等于', value: '>=' },
+  LESS_THAN: { name: '小于', value: '<' },
+  LESS_THAN_OR_EQUALS: { name: '小于等于', value: '<=' },
+  IN: { name: '在...之中', value: 'in' },
+  NOT_IN: { name: '不在...之中', value: 'not in' },
+  BETWEEN: { name: '在...之间', value: 'between' },
+  NOT_BETWEEN: { name: '不在...之间', value: 'not between' },
+  LIKE: { name: '字符串匹配', value: 'like' },
+  NOT_NULL: { name: '非空', value: 'not null' },
+};
+
+/** IoT 场景联动触发条件类型枚举 */
+export const IotRuleSceneTriggerConditionTypeEnum = {
+  DEVICE_STATUS: 1, // 设备状态
+  DEVICE_PROPERTY: 2, // 设备属性
+  CURRENT_TIME: 3, // 当前时间
+};
+
+/** 条件类型选项配置 */
+export const conditionTypeOptions = [
+  {
+    value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS,
+    label: '设备状态',
+  },
+  {
+    value: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY,
+    label: '设备属性',
+  },
+  {
+    value: IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME,
+    label: '当前时间',
+  },
+];
+
+/** 兼容旧调用：保留函数形态 */
+export const getConditionTypeOptions = () => conditionTypeOptions;
+
+/** IoT 场景联动触发时间操作符枚举 */
+export const IotRuleSceneTriggerTimeOperatorEnum = {
+  BEFORE_TIME: { name: '在时间之前', value: 'before_time' },
+  AFTER_TIME: { name: '在时间之后', value: 'after_time' },
+  BETWEEN_TIME: { name: '在时间之间', value: 'between_time' },
+  AT_TIME: { name: '在指定时间', value: 'at_time' },
+  BEFORE_TODAY: { name: '在今日之前', value: 'before_today' },
+  AFTER_TODAY: { name: '在今日之后', value: 'after_today' },
+  TODAY: { name: '在今日之间', value: 'today' },
+};
+
+// ========== IOT - JSON 参数输入 ==========
+/** JSON 参数输入组件类型枚举 */
+export const JsonParamsInputTypeEnum = {
+  SERVICE: 'service',
+  EVENT: 'event',
+  PROPERTY: 'property',
+  CUSTOM: 'custom',
+};
+
+/** JSON 参数输入组件类型 */
+export type JsonParamsInputType =
+  (typeof JsonParamsInputTypeEnum)[keyof typeof JsonParamsInputTypeEnum];
+
+/** JSON 参数输入组件文本常量 */
+export const JSON_PARAMS_INPUT_CONSTANTS = {
+  // 基础文本
+  PLACEHOLDER: '请输入JSON格式的参数',
+  JSON_FORMAT_CORRECT: 'JSON 格式正确',
+  QUICK_FILL_LABEL: '快速填充：',
+  EXAMPLE_DATA_BUTTON: '示例数据',
+  CLEAR_BUTTON: '清空',
+  VIEW_EXAMPLE_TITLE: '查看参数示例',
+  COMPLETE_JSON_FORMAT: '完整 JSON 格式：',
+  REQUIRED_TAG: '必填',
+
+  // 错误信息
+  PARAMS_MUST_BE_OBJECT: '参数必须是一个有效的 JSON 对象',
+  PARAM_REQUIRED_ERROR: (paramName: string) => `参数 ${paramName} 为必填项`,
+  JSON_FORMAT_ERROR: (error: string) => `JSON格式错误: ${error}`,
+  UNKNOWN_ERROR: '未知错误',
+
+  // 类型相关标题
+  TITLES: {
+    SERVICE: (name?: string) => `${name || '服务'} - 输入参数示例`,
+    EVENT: (name?: string) => `${name || '事件'} - 输出参数示例`,
+    PROPERTY: '属性设置 - 参数示例',
+    CUSTOM: (name?: string) => `${name || '自定义'} - 参数示例`,
+    DEFAULT: '参数示例',
+  },
+
+  // 参数标签
+  PARAMS_LABELS: {
+    SERVICE: '输入参数',
+    EVENT: '输出参数',
+    PROPERTY: '属性参数',
+    CUSTOM: '参数列表',
+    DEFAULT: '参数',
+  },
+
+  // 空状态消息
+  EMPTY_MESSAGES: {
+    SERVICE: '此服务无需输入参数',
+    EVENT: '此事件无输出参数',
+    PROPERTY: '无可设置的属性',
+    CUSTOM: '无参数配置',
+    DEFAULT: '无参数',
+  },
+
+  // 无配置消息
+  NO_CONFIG_MESSAGES: {
+    SERVICE: '请先选择服务',
+    EVENT: '请先选择事件',
+    PROPERTY: '请先选择产品',
+    CUSTOM: '请先进行配置',
+    DEFAULT: '请先进行配置',
+  },
+};
+
+/** JSON 参数输入组件图标常量 */
+export const JSON_PARAMS_INPUT_ICONS = {
+  // 标题图标
+  TITLE_ICONS: {
+    SERVICE: 'ep:service',
+    EVENT: 'ep:bell',
+    PROPERTY: 'ep:edit',
+    CUSTOM: 'ep:document',
+    DEFAULT: 'ep:document',
+  },
+
+  // 参数图标
+  PARAMS_ICONS: {
+    SERVICE: 'ep:edit',
+    EVENT: 'ep:upload',
+    PROPERTY: 'ep:setting',
+    CUSTOM: 'ep:list',
+    DEFAULT: 'ep:edit',
+  },
+
+  // 状态图标
+  STATUS_ICONS: {
+    ERROR: 'ep:warning',
+    SUCCESS: 'ep:circle-check',
+  },
+};
+
+/** JSON 参数输入组件示例值常量 */
+export const JSON_PARAMS_EXAMPLE_VALUES: Record<string, any> = {
+  [IoTDataSpecsDataTypeEnum.INT]: { display: '25', value: 25 },
+  [IoTDataSpecsDataTypeEnum.FLOAT]: { display: '25.5', value: 25.5 },
+  [IoTDataSpecsDataTypeEnum.DOUBLE]: { display: '25.5', value: 25.5 },
+  [IoTDataSpecsDataTypeEnum.BOOL]: { display: 'false', value: false },
+  [IoTDataSpecsDataTypeEnum.TEXT]: { display: '"auto"', value: 'auto' },
+  [IoTDataSpecsDataTypeEnum.ENUM]: { display: '"option1"', value: 'option1' },
+  [IoTDataSpecsDataTypeEnum.STRUCT]: { display: '{}', value: {} },
+  [IoTDataSpecsDataTypeEnum.ARRAY]: { display: '[]', value: [] },
+  DEFAULT: { display: '""', value: '' },
+};
+
+// ========== IOT - Modbus ==========
+/** Modbus 模式枚举 */
+export const ModbusModeEnum = {
+  POLLING: 1, // 云端轮询
+  ACTIVE_REPORT: 2, // 主动上报
+} as const;
+
+/** Modbus 帧格式枚举 */
+export const ModbusFrameFormatEnum = {
+  MODBUS_TCP: 1, // Modbus TCP
+  MODBUS_RTU: 2, // Modbus RTU
+} as const;
+
+/** Modbus 功能码枚举 */
+export const ModbusFunctionCodeEnum = {
+  READ_COILS: 1, // 读线圈
+  READ_DISCRETE_INPUTS: 2, // 读离散输入
+  READ_HOLDING_REGISTERS: 3, // 读保持寄存器
+  READ_INPUT_REGISTERS: 4, // 读输入寄存器
+} as const;
+
+/** Modbus 功能码选项 */
+export const ModbusFunctionCodeOptions = [
+  { value: 1, label: '01 - 读线圈 (Coils)', description: '可读写布尔值' },
+  {
+    value: 2,
+    label: '02 - 读离散输入 (Discrete Inputs)',
+    description: '只读布尔值',
+  },
+  {
+    value: 3,
+    label: '03 - 读保持寄存器 (Holding Registers)',
+    description: '可读写 16 位数据',
+  },
+  {
+    value: 4,
+    label: '04 - 读输入寄存器 (Input Registers)',
+    description: '只读 16 位数据',
+  },
+];
+
+/** Modbus 原始数据类型枚举 */
+export const ModbusRawDataTypeEnum = {
+  INT16: 'INT16',
+  UINT16: 'UINT16',
+  INT32: 'INT32',
+  UINT32: 'UINT32',
+  FLOAT: 'FLOAT',
+  DOUBLE: 'DOUBLE',
+  BOOLEAN: 'BOOLEAN',
+  STRING: 'STRING',
+} as const;
+
+/** Modbus 原始数据类型选项 */
+export const ModbusRawDataTypeOptions = [
+  {
+    value: 'INT16',
+    label: 'INT16',
+    description: '有符号16位整数',
+    registerCount: 1,
+  },
+  {
+    value: 'UINT16',
+    label: 'UINT16',
+    description: '无符号16位整数',
+    registerCount: 1,
+  },
+  {
+    value: 'INT32',
+    label: 'INT32',
+    description: '有符号32位整数',
+    registerCount: 2,
+  },
+  {
+    value: 'UINT32',
+    label: 'UINT32',
+    description: '无符号32位整数',
+    registerCount: 2,
+  },
+  { value: 'FLOAT', label: 'FLOAT', description: '32位浮点数', registerCount: 2 },
+  {
+    value: 'DOUBLE',
+    label: 'DOUBLE',
+    description: '64位浮点数',
+    registerCount: 4,
+  },
+  {
+    value: 'BOOLEAN',
+    label: 'BOOLEAN',
+    description: '布尔值',
+    registerCount: 1,
+  },
+  { value: 'STRING', label: 'STRING', description: '字符串', registerCount: 0 },
+];
+
+/** Modbus 字节序选项 - 16 位 */
+export const ModbusByteOrder16Options = [
+  { value: 'AB', label: 'AB', description: '大端序' },
+  { value: 'BA', label: 'BA', description: '小端序' },
+];
+
+/** Modbus 字节序选项 - 32 位 */
+export const ModbusByteOrder32Options = [
+  { value: 'ABCD', label: 'ABCD', description: '大端序' },
+  { value: 'CDAB', label: 'CDAB', description: '大端字交换' },
+  { value: 'DCBA', label: 'DCBA', description: '小端序' },
+  { value: 'BADC', label: 'BADC', description: '小端字交换' },
+];
+
+/** 根据数据类型获取字节序选项 */
+export const getByteOrderOptions = (rawDataType: string) => {
+  if (['FLOAT', 'INT32', 'UINT32'].includes(rawDataType)) {
+    return ModbusByteOrder32Options;
+  }
+  if (rawDataType === 'DOUBLE') {
+    // 64 位复用 32 位字节序
+    return ModbusByteOrder32Options;
+  }
+  return ModbusByteOrder16Options;
+};
diff --git a/packages/constants/src/dict-enum.ts b/packages/constants/src/dict-enum.ts
index e9477615b..9beebd898 100644
--- a/packages/constants/src/dict-enum.ts
+++ b/packages/constants/src/dict-enum.ts
@@ -175,6 +175,28 @@ const IOT_DICT = {
   IOT_MODBUS_FRAME_FORMAT: 'iot_modbus_frame_format', // IoT Modbus 帧格式
 } as const;
 
+/** ========== MES - 制造执行模块 ========== */
+const MES_DICT = {
+  MES_MD_ITEM_OR_PRODUCT: 'mes_md_item_or_product', // MES 物料/产品标识
+  MES_MD_AUTO_CODE_CYCLE_METHOD: 'mes_md_auto_code_cycle_method', // MES 编码规则循环方式
+  MES_MD_AUTO_CODE_PADDED_METHOD: 'mes_md_auto_code_padded_method', // MES 编码规则补齐方式
+  MES_MD_AUTO_CODE_PART_TYPE: 'mes_md_auto_code_part_type', // MES 编码规则分段类型
+  MES_CLIENT_TYPE: 'mes_client_type', // MES 客户类型
+  MES_VENDOR_LEVEL: 'mes_vendor_level', // MES 供应商级别
+  MES_WM_BARCODE_BIZ_TYPE: 'mes_wm_barcode_biz_type', // MES 条码业务类型
+  MES_WM_BARCODE_FORMAT: 'mes_wm_barcode_format', // MES 条码格式
+  MES_WM_PRODUCT_SALES_STATUS: 'mes_wm_product_sales_status', // MES 销售出库单状态
+} as const;
+
+/** ========== WMS - 仓储管理模块 ========== */
+const WMS_DICT = {
+  WMS_MERCHANT_TYPE: 'merchant_type', // WMS 往来企业类型
+  WMS_ORDER_TYPE: 'wms_order_type', // WMS 单据类型
+  WMS_ORDER_STATUS: 'wms_order_status', // WMS 单据状态
+  WMS_RECEIPT_ORDER_TYPE: 'wms_receipt_order_type', // WMS 入库单类型
+  WMS_SHIPMENT_ORDER_TYPE: 'wms_shipment_order_type', // WMS 出库单类型
+} as const;
+
 /** 字典类型枚举 - 统一导出 */
 const DICT_TYPE = {
   ...AI_DICT,
@@ -183,6 +205,8 @@ const DICT_TYPE = {
   ...ERP_DICT,
   ...INFRA_DICT,
   ...IOT_DICT,
+  ...MES_DICT,
+  ...WMS_DICT,
   ...MEMBER_DICT,
   ...MP_DICT,
   ...PAY_DICT,
diff --git a/packages/effects/common-ui/package.json b/packages/effects/common-ui/package.json
index 542b6a979..3a7cc70f5 100644
--- a/packages/effects/common-ui/package.json
+++ b/packages/effects/common-ui/package.json
@@ -41,6 +41,7 @@
     "@vben/types": "workspace:*",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
+    "jsbarcode": "catalog:",
     "json-bigint": "catalog:",
     "qrcode": "catalog:",
     "tippy.js": "catalog:",
diff --git a/packages/effects/common-ui/src/components/barcode/barcode.vue b/packages/effects/common-ui/src/components/barcode/barcode.vue
new file mode 100644
index 000000000..f8fe1cf6f
--- /dev/null
+++ b/packages/effects/common-ui/src/components/barcode/barcode.vue
@@ -0,0 +1,131 @@
+<script lang="ts" setup>
+import type { QRCodeRenderersOptions } from 'qrcode';
+
+import type { BarcodeFormat } from './types';
+
+import { computed, nextTick, ref, unref, watch } from 'vue';
+
+import JsBarcode from 'jsbarcode';
+import QRCode from 'qrcode';
+
+import { BARCODE_FORMAT_MAP, BarcodeFormatEnum } from './types';
+
+defineOptions({ name: 'Barcode' });
+
+const props = withDefaults(
+  defineProps<{
+    content?: string;
+    displayValue?: boolean;
+    format?: BarcodeFormat;
+    height?: number;
+    width?: number;
+  }>(),
+  {
+    content: '',
+    displayValue: true,
+    format: BarcodeFormatEnum.QR_CODE,
+    height: 100,
+    width: 200,
+  },
+);
+
+const emit = defineEmits<{
+  done: [base64: string];
+}>();
+
+const loading = ref(true);
+const canvasRef = ref<HTMLCanvasElement>();
+const imgRef = ref<HTMLImageElement>();
+const isQRCode = computed(() => props.format === BarcodeFormatEnum.QR_CODE);
+
+const wrapStyle = computed(() => {
+  if (isQRCode.value) {
+    return {
+      height: `${props.width}px`,
+      width: `${props.width}px`,
+    };
+  }
+  return {
+    width: `${props.width}px`,
+  };
+});
+
+async function generateQRCode() {
+  const canvas = unref(canvasRef);
+  if (!canvas) {
+    return;
+  }
+  const options: QRCodeRenderersOptions = {
+    errorCorrectionLevel: 'M',
+    width: props.width,
+  };
+  await QRCode.toCanvas(canvas, props.content, options);
+  emit('done', canvas.toDataURL());
+}
+
+function generateOneDimensionalBarcode() {
+  const img = unref(imgRef);
+  if (!img) {
+    return;
+  }
+  JsBarcode(img, props.content, {
+    displayValue: props.displayValue,
+    format: BARCODE_FORMAT_MAP[props.format] || 'CODE39',
+    height: props.height,
+    margin: 10,
+    width: 2,
+  });
+  emit('done', img.src);
+}
+
+async function generateBarcode() {
+  if (!props.content) {
+    loading.value = false;
+    return;
+  }
+
+  loading.value = true;
+  await nextTick();
+  try {
+    if (isQRCode.value) {
+      await generateQRCode();
+      return;
+    }
+    generateOneDimensionalBarcode();
+  } catch (error) {
+    console.error('生成条码失败:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => [
+    props.content,
+    props.displayValue,
+    props.format,
+    props.height,
+    props.width,
+  ],
+  () => {
+    generateBarcode();
+  },
+  { immediate: true },
+);
+
+function getImageBase64() {
+  if (isQRCode.value) {
+    return unref(canvasRef)?.toDataURL() || '';
+  }
+  return unref(imgRef)?.src || '';
+}
+
+defineExpose({ getImageBase64 });
+</script>
+
+<template>
+  <div :aria-busy="loading" class="inline-block" :style="wrapStyle">
+    <canvas v-if="isQRCode" ref="canvasRef" class="block max-w-full"></canvas>
+    <img v-else ref="imgRef" alt="barcode" class="block max-w-full" />
+  </div>
+</template>
diff --git a/packages/effects/common-ui/src/components/barcode/index.ts b/packages/effects/common-ui/src/components/barcode/index.ts
new file mode 100644
index 000000000..3091e0401
--- /dev/null
+++ b/packages/effects/common-ui/src/components/barcode/index.ts
@@ -0,0 +1,2 @@
+export { default as Barcode } from './barcode.vue';
+export * from './types';
diff --git a/packages/effects/common-ui/src/components/barcode/types.ts b/packages/effects/common-ui/src/components/barcode/types.ts
new file mode 100644
index 000000000..6d31e665b
--- /dev/null
+++ b/packages/effects/common-ui/src/components/barcode/types.ts
@@ -0,0 +1,18 @@
+/** 条码格式枚举 */
+export const BarcodeFormatEnum = {
+  QR_CODE: 1,
+  EAN13: 2,
+  CODE39: 3,
+  UPC_A: 4,
+} as const;
+
+export type BarcodeFormat =
+  (typeof BarcodeFormatEnum)[keyof typeof BarcodeFormatEnum];
+
+/** 条码格式映射表（枚举值 -> JsBarcode 格式名） */
+export const BARCODE_FORMAT_MAP: Record<BarcodeFormat, string> = {
+  [BarcodeFormatEnum.QR_CODE]: 'QR_CODE',
+  [BarcodeFormatEnum.EAN13]: 'EAN13',
+  [BarcodeFormatEnum.CODE39]: 'CODE39',
+  [BarcodeFormatEnum.UPC_A]: 'UPC_A',
+};
diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts
index f2c4faea8..82e729384 100644
--- a/packages/effects/common-ui/src/components/index.ts
+++ b/packages/effects/common-ui/src/components/index.ts
@@ -1,4 +1,5 @@
 export * from './api-component';
+export * from './barcode';
 export * from './captcha';
 export * from './card/comparison-card';
 export * from './card/statistic-card';
diff --git a/packages/utils/src/cron.ts b/packages/utils/src/cron.ts
new file mode 100644
index 000000000..02e26b04f
--- /dev/null
+++ b/packages/utils/src/cron.ts
@@ -0,0 +1,390 @@
+/**
+ * CRON 表达式工具类；提供 CRON 表达式的解析、格式化、验证等功能
+ */
+
+/** CRON 字段类型枚举 */
+export enum CronFieldType {
+  DAY = 'day',
+  HOUR = 'hour',
+  MINUTE = 'minute',
+  MONTH = 'month',
+  SECOND = 'second',
+  WEEK = 'week',
+  YEAR = 'year',
+}
+
+/** CRON 字段配置 */
+export interface CronFieldConfig {
+  key: CronFieldType;
+  label: string;
+  max: number;
+  min: number;
+  names?: Record<string, number>;
+}
+
+/** CRON 字段配置常量 */
+export const CRON_FIELD_CONFIGS: Record<CronFieldType, CronFieldConfig> = {
+  [CronFieldType.SECOND]: {
+    key: CronFieldType.SECOND,
+    label: '秒',
+    min: 0,
+    max: 59,
+  },
+  [CronFieldType.MINUTE]: {
+    key: CronFieldType.MINUTE,
+    label: '分',
+    min: 0,
+    max: 59,
+  },
+  [CronFieldType.HOUR]: {
+    key: CronFieldType.HOUR,
+    label: '时',
+    min: 0,
+    max: 23,
+  },
+  [CronFieldType.DAY]: {
+    key: CronFieldType.DAY,
+    label: '日',
+    min: 1,
+    max: 31,
+  },
+  [CronFieldType.MONTH]: {
+    key: CronFieldType.MONTH,
+    label: '月',
+    min: 1,
+    max: 12,
+    names: {
+      JAN: 1,
+      FEB: 2,
+      MAR: 3,
+      APR: 4,
+      MAY: 5,
+      JUN: 6,
+      JUL: 7,
+      AUG: 8,
+      SEP: 9,
+      OCT: 10,
+      NOV: 11,
+      DEC: 12,
+    },
+  },
+  [CronFieldType.WEEK]: {
+    key: CronFieldType.WEEK,
+    label: '周',
+    min: 0,
+    max: 7,
+    names: {
+      SUN: 0,
+      MON: 1,
+      TUE: 2,
+      WED: 3,
+      THU: 4,
+      FRI: 5,
+      SAT: 6,
+    },
+  },
+  [CronFieldType.YEAR]: {
+    key: CronFieldType.YEAR,
+    label: '年',
+    min: 1970,
+    max: 2099,
+  },
+};
+
+/** 解析后的 CRON 字段 */
+export interface ParsedCronField {
+  description: string;
+  original: string;
+  type:
+    | 'any'
+    | 'last'
+    | 'list'
+    | 'nth'
+    | 'range'
+    | 'specific'
+    | 'step'
+    | 'weekday';
+  values: number[];
+}
+
+/** 解析后的 CRON 表达式 */
+export interface ParsedCronExpression {
+  day: ParsedCronField;
+  description: string;
+  hour: ParsedCronField;
+  isValid: boolean;
+  minute: ParsedCronField;
+  month: ParsedCronField;
+  nextExecutionTime?: Date;
+  second: ParsedCronField;
+  week: ParsedCronField;
+  year?: ParsedCronField;
+}
+
+/** CRON 表达式工具类 */
+export const CronUtils = {
+  /** 验证 CRON 表达式格式 */
+  validate(cronExpression: string): boolean {
+    if (!cronExpression || typeof cronExpression !== 'string') {
+      return false;
+    }
+    const parts = cronExpression.trim().split(/\s+/);
+    if (parts.length < 5 || parts.length > 7) {
+      return false;
+    }
+    const cronRegex = /^[\d#*,/?LW\-]+$/;
+    return parts.every((part) => cronRegex.test(part));
+  },
+
+  /** 解析单个 CRON 字段 */
+  parseField(
+    fieldValue: string,
+    fieldType: CronFieldType,
+    config: CronFieldConfig,
+  ): ParsedCronField {
+    const field: ParsedCronField = {
+      type: 'any',
+      values: [],
+      original: fieldValue,
+      description: '',
+    };
+    if (fieldValue === '*' || fieldValue === '?') {
+      field.type = 'any';
+      field.description = `每${config.label}`;
+      return field;
+    }
+    if (fieldValue === 'L' && fieldType === CronFieldType.DAY) {
+      field.type = 'last';
+      field.description = '每月最后一天';
+      return field;
+    }
+    if (fieldValue.includes('-')) {
+      const [start, end] = fieldValue.split('-').map(Number);
+      if (
+        !Number.isNaN(start) &&
+        !Number.isNaN(end) &&
+        start! >= config.min &&
+        end! <= config.max
+      ) {
+        field.type = 'range';
+        field.values = Array.from(
+          { length: end! - start! + 1 },
+          (_, i) => start! + i,
+        );
+        field.description = `${config.label} ${start}-${end}`;
+      }
+      return field;
+    }
+    if (fieldValue.includes('/')) {
+      const [base, step] = fieldValue.split('/');
+      const stepNum = Number(step);
+      if (!Number.isNaN(stepNum) && stepNum > 0) {
+        field.type = 'step';
+        if (base === '*') {
+          field.description = `每 ${stepNum} ${config.label}`;
+        } else {
+          const startNum = Number(base);
+          field.description = `从 ${startNum} 开始每 ${stepNum} ${config.label}`;
+        }
+      }
+      return field;
+    }
+    if (fieldValue.includes(',')) {
+      const values = fieldValue
+        .split(',')
+        .map(Number)
+        .filter((n) => !Number.isNaN(n));
+      if (values.length > 0) {
+        field.type = 'list';
+        field.values = values;
+        field.description = `${config.label} ${values.join(',')}`;
+      }
+      return field;
+    }
+    const numValue = Number(fieldValue);
+    if (
+      !Number.isNaN(numValue) &&
+      numValue >= config.min &&
+      numValue <= config.max
+    ) {
+      field.type = 'specific';
+      field.values = [numValue];
+      field.description = `${config.label} ${numValue}`;
+    }
+    return field;
+  },
+
+  /** 解析完整的 CRON 表达式 */
+  parse(cronExpression: string): ParsedCronExpression {
+    const result: ParsedCronExpression = {
+      second: { type: 'any', values: [], original: '*', description: '每秒' },
+      minute: { type: 'any', values: [], original: '*', description: '每分' },
+      hour: { type: 'any', values: [], original: '*', description: '每时' },
+      day: { type: 'any', values: [], original: '*', description: '每日' },
+      month: { type: 'any', values: [], original: '*', description: '每月' },
+      week: { type: 'any', values: [], original: '?', description: '任意周' },
+      isValid: false,
+      description: '',
+    };
+    if (!this.validate(cronExpression)) {
+      result.description = '无效的 CRON 表达式';
+      return result;
+    }
+    const parts = cronExpression.trim().split(/\s+/);
+    const fieldTypes = [
+      CronFieldType.SECOND,
+      CronFieldType.MINUTE,
+      CronFieldType.HOUR,
+      CronFieldType.DAY,
+      CronFieldType.MONTH,
+      CronFieldType.WEEK,
+    ];
+    const startIndex = parts.length === 5 ? 1 : 0;
+    for (const [i, part] of parts.entries()) {
+      const fieldType = fieldTypes[i + startIndex];
+      if (fieldType && CRON_FIELD_CONFIGS[fieldType]) {
+        const config = CRON_FIELD_CONFIGS[fieldType];
+        (result as any)[fieldType] = this.parseField(part, fieldType, config);
+      }
+    }
+    if (parts.length === 7) {
+      const yearConfig = CRON_FIELD_CONFIGS[CronFieldType.YEAR];
+      result.year = this.parseField(parts[6]!, CronFieldType.YEAR, yearConfig);
+    }
+    result.isValid = true;
+    result.description = this.generateDescription(result);
+    return result;
+  },
+
+  /** 生成 CRON 表达式的可读描述 */
+  generateDescription(parsed: ParsedCronExpression): string {
+    const parts: string[] = [];
+    if (parsed.hour.type === 'specific' && parsed.minute.type === 'specific') {
+      const hour = parsed.hour.values[0]!;
+      const minute = parsed.minute.values[0]!;
+      parts.push(
+        `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`,
+      );
+    } else if (parsed.hour.type === 'specific') {
+      parts.push(`每天 ${parsed.hour.values[0]} 点`);
+    } else if (
+      parsed.minute.type === 'specific' &&
+      parsed.minute.values[0] === 0 &&
+      parsed.hour.type === 'any'
+    ) {
+      parts.push('每小时整点');
+    } else if (parsed.minute.type === 'step') {
+      const step = parsed.minute.original.split('/')[1];
+      parts.push(`每 ${step} 分钟`);
+    } else if (parsed.hour.type === 'step') {
+      const step = parsed.hour.original.split('/')[1];
+      parts.push(`每 ${step} 小时`);
+    }
+    if (parsed.day.type === 'specific') {
+      parts.push(`每月 ${parsed.day.values[0]} 日`);
+    } else if (parsed.week.type === 'specific') {
+      const weekNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+      const weekDay = parsed.week.values[0]!;
+      if (weekDay >= 0 && weekDay <= 6) {
+        parts.push(`每${weekNames[weekDay]}`);
+      }
+    } else if (parsed.week.type === 'range') {
+      parts.push('工作日');
+    }
+    if (parsed.month.type === 'specific') {
+      parts.push(`${parsed.month.values[0]} 月`);
+    }
+    return parts.length > 0 ? parts.join(' ') : '自定义时间规则';
+  },
+
+  /** 格式化 CRON 表达式为可读文本 */
+  format(cronExpression: string): string {
+    if (!cronExpression) return '';
+    const parsed = this.parse(cronExpression);
+    return parsed.isValid ? parsed.description : cronExpression;
+  },
+
+  /** 计算 CRON 表达式的下次执行时间（简化版，仅覆盖常见模式） */
+  getNextExecutionTime(
+    cronExpression: string,
+    fromDate?: Date,
+  ): Date | null {
+    const parsed = this.parse(cronExpression);
+    if (!parsed.isValid) {
+      return null;
+    }
+    const now = fromDate || new Date();
+    const nextTime = new Date(now.getTime() + 1000);
+    if (parsed.second.type === 'specific' && parsed.minute.type === 'any') {
+      const targetSecond = parsed.second.values[0]!;
+      nextTime.setSeconds(targetSecond, 0);
+      if (nextTime <= now) {
+        nextTime.setMinutes(nextTime.getMinutes() + 1);
+      }
+      return nextTime;
+    }
+    if (
+      parsed.second.type === 'specific' &&
+      parsed.minute.type === 'specific' &&
+      parsed.hour.type === 'any'
+    ) {
+      const targetSecond = parsed.second.values[0]!;
+      const targetMinute = parsed.minute.values[0]!;
+      nextTime.setMinutes(targetMinute, targetSecond, 0);
+      if (nextTime <= now) {
+        nextTime.setHours(nextTime.getHours() + 1);
+      }
+      return nextTime;
+    }
+    if (
+      parsed.second.type === 'specific' &&
+      parsed.minute.type === 'specific' &&
+      parsed.hour.type === 'specific'
+    ) {
+      const targetSecond = parsed.second.values[0]!;
+      const targetMinute = parsed.minute.values[0]!;
+      const targetHour = parsed.hour.values[0]!;
+      nextTime.setHours(targetHour, targetMinute, targetSecond, 0);
+      if (nextTime <= now) {
+        nextTime.setDate(nextTime.getDate() + 1);
+      }
+      return nextTime;
+    }
+    if (parsed.minute.type === 'step') {
+      const step = Number.parseInt(parsed.minute.original.split('/')[1]!);
+      const currentMinute = nextTime.getMinutes();
+      const nextMinute = Math.ceil(currentMinute / step) * step;
+      if (nextMinute >= 60) {
+        nextTime.setHours(nextTime.getHours() + 1, 0, 0, 0);
+      } else {
+        nextTime.setMinutes(nextMinute, 0, 0);
+      }
+      return nextTime;
+    }
+    return new Date(now.getTime() + 60_000);
+  },
+
+  /** 获取 CRON 表达式的执行频率描述 */
+  getFrequencyDescription(cronExpression: string): string {
+    const parsed = this.parse(cronExpression);
+    if (!parsed.isValid) {
+      return '无效表达式';
+    }
+    if (parsed.second.type === 'any' && parsed.minute.type === 'any') {
+      return '每秒执行';
+    }
+    if (parsed.minute.type === 'any' && parsed.hour.type === 'any') {
+      return '每分钟执行';
+    }
+    if (parsed.hour.type === 'any' && parsed.day.type === 'any') {
+      return '每小时执行';
+    }
+    if (parsed.day.type === 'any' && parsed.month.type === 'any') {
+      return '每天执行';
+    }
+    if (parsed.month.type === 'any') {
+      return '每月执行';
+    }
+    return '按计划执行';
+  },
+};
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index eb9bef1ab..ea44feb94 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,3 +1,4 @@
+export * from './cron';
 export * from './helpers';
 export * from './validator';
 export * from '@vben-core/shared/cache';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c837924be..db4ef195a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -360,6 +360,9 @@ catalogs:
     is-ci:
       specifier: ^4.1.0
       version: 4.1.0
+    jsbarcode:
+      specifier: ^3.12.3
+      version: 3.12.3
     jsencrypt:
       specifier: ^3.5.4
       version: 3.5.4
@@ -1958,6 +1961,9 @@ importers:
       '@vueuse/integrations':
         specifier: 'catalog:'
         version: 14.2.1(async-validator@4.2.5)(axios@1.15.0)(change-case@5.4.4)(focus-trap@8.0.1)(nprogress@0.2.0)(qrcode@1.5.4)(sortablejs@1.15.7)(vue@3.5.32(typescript@6.0.2))
+      jsbarcode:
+        specifier: 'catalog:'
+        version: 3.12.3
       json-bigint:
         specifier: 'catalog:'
         version: 1.0.0
@@ -9232,6 +9238,9 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
+  jsbarcode@3.12.3:
+    resolution: {integrity: sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg==}
+
   jsdoc-type-pratt-parser@7.1.1:
     resolution: {integrity: sha512-/2uqY7x6bsrpi3i9LVU6J89352C0rpMk0as8trXxCtvd4kPk1ke/Eyif6wqfSLvoNJqcDG9Vk4UsXgygzCt2xA==}
     engines: {node: '>=20.0.0'}
@@ -19882,6 +19891,8 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsbarcode@3.12.3: {}
+
   jsdoc-type-pratt-parser@7.1.1: {}
 
   jsencrypt@3.5.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 3c500589b..c8b8366a4 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -139,6 +139,7 @@ catalog:
   highlight.js: ^11.11.1
   html-minifier-terser: ^7.2.0
   is-ci: ^4.1.0
+  jsbarcode: ^3.12.3
   jsencrypt: ^3.5.4
   json-bigint: ^1.0.0
   lefthook: ^2.1.5