fix：【iot 物联网】linter 报错

2025-10-10 20:26:17 +08:00
parent b6fee5c05b
commit f740461c2a
107 changed files with 7161 additions and 5905 deletions
--- a/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelEvent.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelEvent.vue
@@ -1,4 +1,38 @@
 <!-- 产品的物模型表单（event 项） -->
+<script lang="ts" setup>
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+
+import { ThingModelEvent } from '#/api/iot/thingmodel';
+import {
+  IoTThingModelEventTypeEnum,
+  IoTThingModelParamDirectionEnum,
+} from '#/views/iot/utils/constants';
+
+import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue';
+
+/** IoT 物模型事件 */
+defineOptions({ name: 'ThingModelEvent' });
+
+const props = defineProps<{ isStructDataSpecs?: boolean; modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const thingModelEvent = useVModel(
+  props,
+  'modelValue',
+  emits,
+) as Ref<ThingModelEvent>;
+
+// 默认选中，INFO 信息
+watch(
+  () => thingModelEvent.value.type,
+  (val: string) =>
+    isEmpty(val) &&
+    (thingModelEvent.value.type = IoTThingModelEventTypeEnum.INFO.value),
+  { immediate: true },
+);
+</script>
+
 <template>
  <el-form-item
    :rules="[{ required: true, message: '请选择事件类型', trigger: 'change' }]"
@@ -23,32 +57,6 @@
  </el-form-item>
 </template>

-<script lang="ts" setup>
-import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
-import { useVModel } from '@vueuse/core'
-import { ThingModelEvent } from '#/api/iot/thingmodel'
-import { isEmpty } from '@vben/utils'
-import {
-  IoTThingModelEventTypeEnum,
-  IoTThingModelParamDirectionEnum
-} from '#/views/iot/utils/constants'
-
-/** IoT 物模型事件 */
-defineOptions({ name: 'ThingModelEvent' })
-
-const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
-const emits = defineEmits(['update:modelValue'])
-const thingModelEvent = useVModel(props, 'modelValue', emits) as Ref<ThingModelEvent>
-
-// 默认选中，INFO 信息
-watch(
-  () => thingModelEvent.value.type,
-  (val: string) =>
-    isEmpty(val) && (thingModelEvent.value.type = IoTThingModelEventTypeEnum.INFO.value),
-  { immediate: true }
-)
-</script>
-
 <style lang="scss" scoped>
 :deep(.el-form-item) {
  .el-form-item {
--- a/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelForm.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelForm.vue
@@ -1,4 +1,184 @@
 <!-- 产品的物模型表单 -->
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { ProductVO } from '#/api/iot/product/product';
+import type { ThingModelData } from '#/api/iot/thingmodel';
+
+import { inject, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { DICT_TYPE, getIntDictOptions } from '@vben/constants';
+
+import { message } from 'ant-design-vue';
+import { cloneDeep } from 'lodash-es';
+
+import { ThingModelApi, ThingModelFormRules } from '#/api/iot/thingmodel';
+import {
+  IOT_PROVIDE_KEY,
+  IoTDataSpecsDataTypeEnum,
+  IoTThingModelTypeEnum,
+} from '#/views/iot/utils/constants';
+
+import ThingModelEvent from './ThingModelEvent.vue';
+import ThingModelProperty from './ThingModelProperty.vue';
+import ThingModelService from './ThingModelService.vue';
+
+/** IoT 物模型数据表单 */
+defineOptions({ name: 'IoTThingModelForm' });
+
+/** 提交表单 */
+const emit = defineEmits(['success']);
+const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息
+
+const { t } = useI18n(); // 国际化
+
+const dialogVisible = ref(false); // 弹窗的是否展示
+const dialogTitle = ref(''); // 弹窗的标题
+const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref(''); // 表单的类型：create - 新增；update - 修改
+const formData = ref<ThingModelData>({
+  type: IoTThingModelTypeEnum.PROPERTY,
+  dataType: IoTDataSpecsDataTypeEnum.INT,
+  property: {
+    dataType: IoTDataSpecsDataTypeEnum.INT,
+    dataSpecs: {
+      dataType: IoTDataSpecsDataTypeEnum.INT,
+    },
+  },
+  service: {},
+  event: {},
+} as ThingModelData);
+
+const formRef = ref(); // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true;
+  dialogTitle.value = t(`action.${type}`);
+  formType.value = type;
+  resetForm();
+  if (id) {
+    formLoading.value = true;
+    try {
+      formData.value = await ThingModelApi.getThingModel(id);
+      // 情况一：属性初始化
+      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,
+          },
+        };
+      }
+      // 情况二：服务初始化
+      if (
+        !formData.value.service ||
+        Object.keys(formData.value.service).length === 0
+      ) {
+        formData.value.service = {};
+      }
+      // 情况三：事件初始化
+      if (
+        !formData.value.event ||
+        Object.keys(formData.value.event).length === 0
+      ) {
+        formData.value.event = {};
+      }
+    } finally {
+      formLoading.value = false;
+    }
+  }
+};
+defineExpose({ open, close: () => (dialogVisible.value = false) });
+
+const submitForm = async () => {
+  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);
+    if (formType.value === 'create') {
+      await ThingModelApi.createThingModel(data);
+      message.success({ content: t('common.createSuccess') });
+    } else {
+      await ThingModelApi.updateThingModel(data);
+      message.success({ content: t('common.updateSuccess') });
+    }
+    // 关闭弹窗
+    dialogVisible.value = false;
+    emit('success');
+  } finally {
+    formLoading.value = false;
+  }
+};
+
+/** 填写额外的属性（处理不同类型的情况） */
+const 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;
+    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;
+    delete data.property;
+    delete data.service;
+  }
+};
+
+/** 处理 dataSpecs 为空的情况 */
+const 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;
+  }
+};
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    type: IoTThingModelTypeEnum.PROPERTY,
+    dataType: IoTDataSpecsDataTypeEnum.INT,
+    property: {
+      dataType: IoTDataSpecsDataTypeEnum.INT,
+      dataSpecs: {
+        dataType: IoTDataSpecsDataTypeEnum.INT,
+      },
+    },
+    service: {},
+    event: {},
+  } as ThingModelData;
+  formRef.value?.resetFields();
+};
+</script>
+
 <template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <a-form
@@ -24,7 +204,10 @@
        <a-input v-model:value="formData.name" placeholder="请输入功能名称" />
      </a-form-item>
      <a-form-item label="标识符" name="identifier">
-        <a-input v-model:value="formData.identifier" placeholder="请输入标识符" />
+        <a-input
+          v-model:value="formData.identifier"
+          placeholder="请输入标识符"
+        />
      </a-form-item>
      <!-- 属性配置 -->
      <ThingModelProperty
@@ -52,172 +235,10 @@
    </a-form>

    <template #footer>
-      <a-button :disabled="formLoading" type="primary" @click="submitForm">确 定</a-button>
+      <a-button :disabled="formLoading" type="primary" @click="submitForm">
+        确 定
+      </a-button>
      <a-button @click="dialogVisible = false">取 消</a-button>
    </template>
  </Dialog>
 </template>
-
-<script lang="ts" setup>
-import { ref, inject, type Ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { message } from 'ant-design-vue'
-import type { ProductVO } from '#/api/iot/product/product'
-import ThingModelProperty from './ThingModelProperty.vue'
-import ThingModelService from './ThingModelService.vue'
-import ThingModelEvent from './ThingModelEvent.vue'
-import { ThingModelApi, ThingModelFormRules } from '#/api/iot/thingmodel'
-import type { ThingModelData } from '#/api/iot/thingmodel'
-import {
-  IOT_PROVIDE_KEY,
-  IoTDataSpecsDataTypeEnum,
-  IoTThingModelTypeEnum
-} from '#/views/iot/utils/constants'
-import { cloneDeep } from 'lodash-es'
-import { DICT_TYPE, getIntDictOptions } from '@vben/constants'
-
-/** IoT 物模型数据表单 */
-defineOptions({ name: 'IoTThingModelForm' })
-
-const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
-
-const { t } = useI18n() // 国际化
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('') // 弹窗的标题
-const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
-const formType = ref('') // 表单的类型：create - 新增；update - 修改
-const formData = ref<ThingModelData>({
-  type: IoTThingModelTypeEnum.PROPERTY,
-  dataType: IoTDataSpecsDataTypeEnum.INT,
-  property: {
-    dataType: IoTDataSpecsDataTypeEnum.INT,
-    dataSpecs: {
-      dataType: IoTDataSpecsDataTypeEnum.INT
-    }
-  },
-  service: {},
-  event: {}
-} as ThingModelData)
-
-const formRef = ref() // 表单 Ref
-
-/** 打开弹窗 */
-const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
-  dialogTitle.value = t('action.' + type)
-  formType.value = type
-  resetForm()
-  if (id) {
-    formLoading.value = true
-    try {
-      formData.value = await ThingModelApi.getThingModel(id)
-      // 情况一：属性初始化
-      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
-          }
-        }
-      }
-      // 情况二：服务初始化
-      if (!formData.value.service || Object.keys(formData.value.service).length === 0) {
-        formData.value.service = {}
-      }
-      // 情况三：事件初始化
-      if (!formData.value.event || Object.keys(formData.value.event).length === 0) {
-        formData.value.event = {}
-      }
-    } finally {
-      formLoading.value = false
-    }
-  }
-}
-defineExpose({ open, close: () => (dialogVisible.value = false) })
-
-/** 提交表单 */
-const emit = defineEmits(['success'])
-const submitForm = async () => {
-  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)
-    if (formType.value === 'create') {
-      await ThingModelApi.createThingModel(data)
-      message.success({ content: t('common.createSuccess') })
-    } else {
-      await ThingModelApi.updateThingModel(data)
-      message.success({ content: t('common.updateSuccess') })
-    }
-    // 关闭弹窗
-    dialogVisible.value = false
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 填写额外的属性（处理不同类型的情况） */
-const 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
-    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
-    delete data.property
-    delete data.service
-  }
-}
-
-/** 处理 dataSpecs 为空的情况 */
-const 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
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    type: IoTThingModelTypeEnum.PROPERTY,
-    dataType: IoTDataSpecsDataTypeEnum.INT,
-    property: {
-      dataType: IoTDataSpecsDataTypeEnum.INT,
-      dataSpecs: {
-        dataType: IoTDataSpecsDataTypeEnum.INT
-      }
-    },
-    service: {},
-    event: {}
-  } as ThingModelData
-  formRef.value?.resetFields()
-}
-</script>
--- a/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelInputOutputParam.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelInputOutputParam.vue
@@ -1,18 +1,135 @@
 <!-- 产品的物模型表单（event、service 项里的参数） -->
+<script lang="ts" setup>
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
+
+import ThingModelProperty from './ThingModelProperty.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,
+    },
+  },
+});
+
+/** 打开 param 表单 */
+const openParamForm = (val: any) => {
+  dialogVisible.value = true;
+  resetForm();
+  if (isEmpty(val)) {
+    return;
+  }
+  // 编辑时回显数据
+  formData.value = {
+    identifier: val.identifier,
+    name: val.name,
+    description: val.description,
+    property: {
+      dataType: val.dataType,
+      dataSpecs: val.dataSpecs,
+      dataSpecsList: val.dataSpecsList,
+    },
+  };
+};
+
+/** 删除 param 项 */
+const deleteParamItem = (index: number) => {
+  thingModelParams.value.splice(index, 1);
+};
+
+/** 添加参数 */
+const submitForm = async () => {
+  // 初始化参数列表
+  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;
+  }
+};
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    dataType: IoTDataSpecsDataTypeEnum.INT,
+    property: {
+      dataType: IoTDataSpecsDataTypeEnum.INT,
+      dataSpecs: {
+        dataType: IoTDataSpecsDataTypeEnum.INT,
+      },
+    },
+  };
+  paramFormRef.value?.resetFields();
+};
+</script>
+
 <template>
  <div
    v-for="(item, index) in thingModelParams"
    :key="index"
-    class="w-1/1 param-item flex justify-between px-10px mb-10px"
+    class="w-1/1 param-item px-10px mb-10px flex justify-between"
  >
    <span>参数名称：{{ item.name }}</span>
    <div class="btn">
-      <el-button link type="primary" @click="openParamForm(item)">编辑</el-button>
+      <el-button link type="primary" @click="openParamForm(item)">
+        编辑
+      </el-button>
      <el-divider direction="vertical" />
-      <el-button link type="danger" @click="deleteParamItem(index)">删除</el-button>
+      <el-button link type="danger" @click="deleteParamItem(index)">
+        删除
+      </el-button>
    </div>
  </div>
-  <el-button link type="primary" @click="openParamForm(null)">+新增参数</el-button>
+  <el-button link type="primary" @click="openParamForm(null)">
+    +新增参数
+  </el-button>

  <!-- param 表单 -->
  <Dialog v-model="dialogVisible" title="新增参数" append-to-body>
@@ -33,117 +150,14 @@
      <ThingModelProperty v-model="formData.property" is-params />
    </el-form>
    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">
+        确 定
+      </el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
 </template>

-<script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import ThingModelProperty from './ThingModelProperty.vue'
-import { isEmpty } from '@vben/utils'
-import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants'
-import { ThingModelFormRules } from '#/api/iot/thingmodel'
-
-/** 输入输出参数配置组件 */
-defineOptions({ name: 'ThingModelInputOutputParam' })
-
-const props = defineProps<{ modelValue: any; direction: string }>()
-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
-    }
-  }
-})
-
-/** 打开 param 表单 */
-const openParamForm = (val: any) => {
-  dialogVisible.value = true
-  resetForm()
-  if (isEmpty(val)) {
-    return
-  }
-  // 编辑时回显数据
-  formData.value = {
-    identifier: val.identifier,
-    name: val.name,
-    description: val.description,
-    property: {
-      dataType: val.dataType,
-      dataSpecs: val.dataSpecs,
-      dataSpecsList: val.dataSpecsList
-    }
-  }
-}
-
-/** 删除 param 项 */
-const deleteParamItem = (index: number) => {
-  thingModelParams.value.splice(index, 1)
-}
-
-/** 添加参数 */
-const submitForm = async () => {
-  // 初始化参数列表
-  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[existingIndex] = item
-    } else {
-      thingModelParams.value.push(item)
-    }
-  } finally {
-    dialogVisible.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    dataType: IoTDataSpecsDataTypeEnum.INT,
-    property: {
-      dataType: IoTDataSpecsDataTypeEnum.INT,
-      dataSpecs: {
-        dataType: IoTDataSpecsDataTypeEnum.INT
-      }
-    }
-  }
-  paramFormRef.value?.resetFields()
-}
-</script>
-
 <style lang="scss" scoped>
 .param-item {
  background-color: #e4f2fd;
--- a/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelProperty.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelProperty.vue
@@ -1,11 +1,108 @@
 <!-- 产品的物模型表单（property 项） -->
+<script lang="ts" setup>
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+
+import { ThingModelProperty, validateBoolName } from '#/api/iot/thingmodel';
+import {
+  getDataTypeOptions,
+  IoTDataSpecsDataTypeEnum,
+  IoTThingModelAccessModeEnum,
+} from '#/views/iot/utils/constants';
+
+import {
+  ThingModelArrayDataSpecs,
+  ThingModelEnumDataSpecs,
+  ThingModelNumberDataSpecs,
+  ThingModelStructDataSpecs,
+} from './dataSpecs';
+
+/** IoT 物模型属性 */
+defineOptions({ name: 'ThingModelProperty' });
+
+const props = defineProps<{
+  isParams?: boolean;
+  isStructDataSpecs?: boolean;
+  modelValue: any;
+}>();
+const emits = defineEmits(['update:modelValue']);
+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),
+  );
+}); // 获得数据类型列表
+
+/** 属性值的数据类型切换时初始化相关数据 */
+const handleChange = (dataType: any) => {
+  property.value.dataSpecs = {};
+  property.value.dataSpecsList = [];
+  // 不是列表型数据才设置 dataSpecs.dataType
+  ![
+    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;
+    }
+  }
+};
+
+/** 默认选中读写 */
+watch(
+  () => property.value.accessMode,
+  (val: string) => {
+    if (props.isStructDataSpecs || props.isParams) {
+      return;
+    }
+    isEmpty(val) &&
+      (property.value.accessMode =
+        IoTThingModelAccessModeEnum.READ_WRITE.value);
+  },
+  { immediate: true },
+);
+</script>
+
 <template>
  <el-form-item
    :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]"
    label="数据类型"
    prop="property.dataType"
  >
-    <el-select v-model="property.dataType" placeholder="请选择数据类型" @change="handleChange">
+    <el-select
+      v-model="property.dataType"
+      placeholder="请选择数据类型"
+      @change="handleChange"
+    >
      <!-- ARRAY 和 STRUCT 类型数据相互嵌套时，最多支持递归嵌套 2 层（父和子） -->
      <el-option
        v-for="option in getDataTypeOptions2"
@@ -21,7 +118,7 @@
      [
        IoTDataSpecsDataTypeEnum.INT,
        IoTDataSpecsDataTypeEnum.DOUBLE,
-        IoTDataSpecsDataTypeEnum.FLOAT
+        IoTDataSpecsDataTypeEnum.FLOAT,
      ].includes(property.dataType || '')
    "
    v-model="property.dataSpecs"
@@ -32,18 +129,21 @@
    v-model="property.dataSpecsList"
  />
  <!-- 布尔型配置 -->
-  <el-form-item v-if="property.dataType === IoTDataSpecsDataTypeEnum.BOOL" label="布尔值">
+  <el-form-item
+    v-if="property.dataType === IoTDataSpecsDataTypeEnum.BOOL"
+    label="布尔值"
+  >
    <template v-for="(item, index) in property.dataSpecsList" :key="item.value">
-      <div class="flex items-center justify-start w-1/1 mb-5px">
+      <div class="w-1/1 mb-5px flex items-center justify-start">
        <span>{{ item.value }}</span>
        <span class="mx-2">-</span>
        <el-form-item
          :prop="`property.dataSpecsList[${index}].name`"
          :rules="[
            { required: true, message: '枚举描述不能为空' },
-            { validator: validateBoolName, trigger: 'blur' }
+            { validator: validateBoolName, trigger: 'blur' },
          ]"
-          class="flex-1 mb-0"
+          class="mb-0 flex-1"
        >
          <el-input
            v-model="item.name"
@@ -60,7 +160,11 @@
    label="数据长度"
    prop="property.dataSpecs.length"
  >
-    <el-input v-model="property.dataSpecs.length" class="w-255px!" placeholder="请输入文本字节长度">
+    <el-input
+      v-model="property.dataSpecs.length"
+      class="w-255px!"
+      placeholder="请输入文本字节长度"
+    >
      <template #append>字节</template>
    </el-input>
  </el-form-item>
@@ -70,7 +174,11 @@
    label="时间格式"
    prop="date"
  >
-    <el-input class="w-255px!" disabled placeholder="String 类型的 UTC 时间戳（毫秒）" />
+    <el-input
+      class="w-255px!"
+      disabled
+      placeholder="String 类型的 UTC 时间戳（毫秒）"
+    />
  </el-form-item>
  <!-- 数组型配置-->
  <ThingModelArrayDataSpecs
@@ -82,7 +190,11 @@
    v-if="property.dataType === IoTDataSpecsDataTypeEnum.STRUCT"
    v-model="property.dataSpecsList"
  />
-  <el-form-item v-if="!isStructDataSpecs && !isParams" label="读写类型" prop="property.accessMode">
+  <el-form-item
+    v-if="!isStructDataSpecs && !isParams"
+    label="读写类型"
+    prop="property.accessMode"
+  >
    <el-radio-group v-model="property.accessMode">
      <el-radio
        v-for="accessMode in Object.values(IoTThingModelAccessModeEnum)"
@@ -95,79 +207,6 @@
  </el-form-item>
 </template>

-<script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import {
-  ThingModelArrayDataSpecs,
-  ThingModelEnumDataSpecs,
-  ThingModelNumberDataSpecs,
-  ThingModelStructDataSpecs
-} from './dataSpecs'
-import { ThingModelProperty, validateBoolName } from '#/api/iot/thingmodel'
-import { isEmpty } from '@vben/utils'
-import {
-  getDataTypeOptions,
-  IoTDataSpecsDataTypeEnum,
-  IoTThingModelAccessModeEnum
-} from '#/views/iot/utils/constants'
-
-/** IoT 物模型属性 */
-defineOptions({ name: 'ThingModelProperty' })
-
-const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean; isParams?: boolean }>()
-const emits = defineEmits(['update:modelValue'])
-const property = useVModel(props, 'modelValue', emits) as Ref<ThingModelProperty>
-const getDataTypeOptions2 = computed(() => {
-  if (!props.isStructDataSpecs) {
-    return getDataTypeOptions()
-  }
-  const excludedTypes = [IoTDataSpecsDataTypeEnum.STRUCT, IoTDataSpecsDataTypeEnum.ARRAY]
-  return getDataTypeOptions().filter((item: any) => !excludedTypes.includes(item.value))
-}) // 获得数据类型列表
-
-/** 属性值的数据类型切换时初始化相关数据 */
-const handleChange = (dataType: any) => {
-  property.value.dataSpecs = {}
-  property.value.dataSpecsList = []
-  // 不是列表型数据才设置 dataSpecs.dataType
-  ![
-    IoTDataSpecsDataTypeEnum.ENUM,
-    IoTDataSpecsDataTypeEnum.BOOL,
-    IoTDataSpecsDataTypeEnum.STRUCT
-  ].includes(dataType) && (property.value.dataSpecs.dataType = dataType)
-  switch (dataType) {
-    case IoTDataSpecsDataTypeEnum.ENUM:
-      property.value.dataSpecsList.push({
-        dataType: IoTDataSpecsDataTypeEnum.ENUM,
-        name: '', // 枚举项的名称
-        value: undefined // 枚举值
-      })
-      break
-    case IoTDataSpecsDataTypeEnum.BOOL:
-      for (let i = 0; i < 2; i++) {
-        property.value.dataSpecsList.push({
-          dataType: IoTDataSpecsDataTypeEnum.BOOL,
-          name: '', // 布尔值的名称
-          value: i // 布尔值
-        })
-      }
-      break
-  }
-}
-
-/** 默认选中读写 */
-watch(
-  () => property.value.accessMode,
-  (val: string) => {
-    if (props.isStructDataSpecs || props.isParams) {
-      return
-    }
-    isEmpty(val) && (property.value.accessMode = IoTThingModelAccessModeEnum.READ_WRITE.value)
-  },
-  { immediate: true }
-)
-</script>
-
 <style lang="scss" scoped>
 :deep(.el-form-item) {
  .el-form-item {
--- a/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelService.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelService.vue
@@ -1,4 +1,34 @@
 <!-- 产品的物模型表单（service 项） -->
+<script lang="ts" setup>
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+
+import { ThingModelService } from '#/api/iot/thingmodel';
+import {
+  IoTThingModelParamDirectionEnum,
+  IoTThingModelServiceCallTypeEnum,
+} from '#/views/iot/utils/constants';
+
+import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue';
+
+/** IoT 物模型服务 */
+defineOptions({ name: 'ThingModelService' });
+
+const props = defineProps<{ isStructDataSpecs?: boolean; modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService>;
+
+/** 默认选中，ASYNC 异步 */
+watch(
+  () => service.value.callType,
+  (val: string) =>
+    isEmpty(val) &&
+    (service.value.callType = IoTThingModelServiceCallTypeEnum.ASYNC.value),
+  { immediate: true },
+);
+</script>
+
 <template>
  <el-form-item
    :rules="[{ required: true, message: '请选择调用方式', trigger: 'change' }]"
@@ -29,32 +59,6 @@
  </el-form-item>
 </template>

-<script lang="ts" setup>
-import ThingModelInputOutputParam from './ThingModelInputOutputParam.vue'
-import { useVModel } from '@vueuse/core'
-import { ThingModelService } from '#/api/iot/thingmodel'
-import { isEmpty } from '@vben/utils'
-import {
-  IoTThingModelParamDirectionEnum,
-  IoTThingModelServiceCallTypeEnum
-} from '#/views/iot/utils/constants'
-
-/** IoT 物模型服务 */
-defineOptions({ name: 'ThingModelService' })
-
-const props = defineProps<{ modelValue: any; isStructDataSpecs?: boolean }>()
-const emits = defineEmits(['update:modelValue'])
-const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService>
-
-/** 默认选中，ASYNC 异步 */
-watch(
-  () => service.value.callType,
-  (val: string) =>
-    isEmpty(val) && (service.value.callType = IoTThingModelServiceCallTypeEnum.ASYNC.value),
-  { immediate: true }
-)
-</script>
-
 <style lang="scss" scoped>
 :deep(.el-form-item) {
  .el-form-item {
--- a/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelTSL.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/ThingModelTSL.vue
@@ -1,3 +1,42 @@
+<script setup lang="ts">
+import hljs from 'highlight.js'; // 导入代码高亮文件
+import json from 'highlight.js/lib/languages/json';
+
+import { ProductVO } from '#/api/iot/product/product';
+import { ThingModelApi } from '#/api/iot/thingmodel';
+import { IOT_PROVIDE_KEY } from '#/views/iot/utils/constants';
+
+import 'highlight.js/styles/github.css'; // 导入代码高亮样式
+
+defineOptions({ name: 'ThingModelTSL' });
+
+const dialogVisible = ref(false); // 弹窗的是否展示
+const dialogTitle = ref('物模型 TSL'); // 弹窗的标题
+const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息
+const viewMode = ref('code'); // 查看模式：code-代码视图，editor-编辑器视图
+
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true;
+};
+defineExpose({ open });
+
+/** 获取 TSL */
+const thingModelTSL = ref({});
+const getTsl = async () => {
+  thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(
+    product?.value?.id || 0,
+  );
+};
+
+/** 初始化 */
+onMounted(async () => {
+  // 注册代码高亮的各种语言
+  hljs.registerLanguage('json', json);
+  await getTsl();
+});
+</script>
+
 <template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <JsonEditor
@@ -13,38 +52,3 @@
    </template>
  </Dialog>
 </template>
-
-<script setup lang="ts">
-import hljs from 'highlight.js' // 导入代码高亮文件
-import 'highlight.js/styles/github.css' // 导入代码高亮样式
-import json from 'highlight.js/lib/languages/json'
-import { ThingModelApi } from '#/api/iot/thingmodel'
-import { ProductVO } from '#/api/iot/product/product'
-import { IOT_PROVIDE_KEY } from '#/views/iot/utils/constants'
-
-defineOptions({ name: 'ThingModelTSL' })
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const dialogTitle = ref('物模型 TSL') // 弹窗的标题
-const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT) // 注入产品信息
-const viewMode = ref('code') // 查看模式：code-代码视图，editor-编辑器视图
-
-/** 打开弹窗 */
-const open = () => {
-  dialogVisible.value = true
-}
-defineExpose({ open })
-
-/** 获取 TSL */
-const thingModelTSL = ref({})
-const getTsl = async () => {
-  thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(product?.value?.id || 0)
-}
-
-/** 初始化 **/
-onMounted(async () => {
-  // 注册代码高亮的各种语言
-  hljs.registerLanguage('json', json)
-  await getTsl()
-})
-</script>
--- a/apps/web-antd/src/views/iot/thingmodel/modules/components/DataDefinition.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/components/DataDefinition.vue
@@ -1,3 +1,18 @@
+<script lang="ts" setup>
+import { ThingModelData } from '#/api/iot/thingmodel';
+import {
+  getEventTypeLabel,
+  getThingModelServiceCallTypeLabel,
+  IoTDataSpecsDataTypeEnum,
+  IoTThingModelTypeEnum,
+} from '#/views/iot/utils/constants';
+
+/** 数据定义展示组件 */
+defineOptions({ name: 'DataDefinition' });
+
+defineProps<{ data: ThingModelData }>();
+</script>
+
 <template>
  <!-- 属性 -->
  <template v-if="data.type === IoTThingModelTypeEnum.PROPERTY">
@@ -7,11 +22,13 @@
        [
          IoTDataSpecsDataTypeEnum.INT,
          IoTDataSpecsDataTypeEnum.DOUBLE,
-          IoTDataSpecsDataTypeEnum.FLOAT
+          IoTDataSpecsDataTypeEnum.FLOAT,
        ].includes(data.property.dataType)
      "
    >
-      取值范围：{{ `${data.property.dataSpecs.min}~${data.property.dataSpecs.max}` }}
+      取值范围：{{
+        `${data.property.dataSpecs.min}~${data.property.dataSpecs.max}`
+      }}
    </div>
    <!-- 非列表型：文本 -->
    <div v-if="IoTDataSpecsDataTypeEnum.TEXT === data.property.dataType">
@@ -23,7 +40,7 @@
        [
          IoTDataSpecsDataTypeEnum.ARRAY,
          IoTDataSpecsDataTypeEnum.STRUCT,
-          IoTDataSpecsDataTypeEnum.DATE
+          IoTDataSpecsDataTypeEnum.DATE,
        ].includes(data.property.dataType)
      "
    >
@@ -33,12 +50,16 @@
    <div
      v-if="
        [IoTDataSpecsDataTypeEnum.BOOL, IoTDataSpecsDataTypeEnum.ENUM].includes(
-          data.property.dataType
+          data.property.dataType,
        )
      "
    >
      <div>
-        {{ IoTDataSpecsDataTypeEnum.BOOL === data.property.dataType ? '布尔值' : '枚举值' }}：
+        {{
+          IoTDataSpecsDataTypeEnum.BOOL === data.property.dataType
+            ? '布尔值'
+            : '枚举值'
+        }}：
      </div>
      <div v-for="item in data.property.dataSpecsList" :key="item.value">
        {{ `${item.name}-${item.value}` }}
@@ -55,19 +76,4 @@
  </div>
 </template>

-<script lang="ts" setup>
-import { ThingModelData } from '#/api/iot/thingmodel'
-import {
-  getEventTypeLabel,
-  getThingModelServiceCallTypeLabel,
-  IoTDataSpecsDataTypeEnum,
-  IoTThingModelTypeEnum
-} from '#/views/iot/utils/constants'
-
-/** 数据定义展示组件 */
-defineOptions({ name: 'DataDefinition' })
-
-defineProps<{ data: ThingModelData }>()
-</script>
-
 <style lang="scss" scoped></style>
--- a/apps/web-antd/src/views/iot/thingmodel/modules/components/index.ts
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/components/index.ts
@@ -1,3 +1 @@
-import DataDefinition from './DataDefinition.vue'
-
-export { DataDefinition }
+export { default as DataDefinition } from './DataDefinition.vue';
--- a/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelArrayDataSpecs.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelArrayDataSpecs.vue
@@ -1,4 +1,31 @@
 <!-- dataType：array 数组类型 -->
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core';
+
+import {
+  getDataTypeOptions,
+  IoTDataSpecsDataTypeEnum,
+} from '#/views/iot/utils/constants';
+
+import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue';
+
+/** 数组型的 dataSpecs 配置组件 */
+defineOptions({ name: 'ThingModelArrayDataSpecs' });
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>;
+
+/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
+const handleChange = (val: string) => {
+  if (val !== IoTDataSpecsDataTypeEnum.STRUCT) {
+    return;
+  }
+
+  dataSpecs.value.dataSpecsList = [];
+};
+</script>
+
 <template>
  <el-form-item label="元素类型" prop="property.dataSpecs.childDataType">
    <el-radio-group v-model="dataSpecs.childDataType" @change="handleChange">
@@ -9,7 +36,7 @@
              [
                IoTDataSpecsDataTypeEnum.ENUM,
                IoTDataSpecsDataTypeEnum.ARRAY,
-                IoTDataSpecsDataTypeEnum.DATE
+                IoTDataSpecsDataTypeEnum.DATE,
              ] as any[]
            ).includes(item.value)
          "
@@ -31,26 +58,4 @@
  />
 </template>

-<script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
-import { getDataTypeOptions, IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants'
-
-/** 数组型的 dataSpecs 配置组件 */
-defineOptions({ name: 'ThingModelArrayDataSpecs' })
-
-const props = defineProps<{ modelValue: any }>()
-const emits = defineEmits(['update:modelValue'])
-const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>
-
-/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
-const handleChange = (val: string) => {
-  if (val !== IoTDataSpecsDataTypeEnum.STRUCT) {
-    return
-  }
-
-  dataSpecs.value.dataSpecsList = []
-}
-</script>
-
 <style lang="scss" scoped></style>
--- a/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelEnumDataSpecs.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelEnumDataSpecs.vue
@@ -1,7 +1,123 @@
 <!-- dataType：enum 数组类型 -->
+<script lang="ts" setup>
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+
+import { DataSpecsEnumOrBoolData } from '#/api/iot/thingmodel';
+import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
+
+/** 枚举型的 dataSpecs 配置组件 */
+defineOptions({ name: 'ThingModelEnumDataSpecs' });
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<
+  DataSpecsEnumOrBoolData[]
+>;
+
+/** 添加枚举项 */
+const addEnum = () => {
+  dataSpecsList.value.push({
+    dataType: IoTDataSpecsDataTypeEnum.ENUM,
+    name: '', // 枚举项的名称
+    value: undefined, // 枚举值
+  });
+};
+
+/** 删除枚举项 */
+const deleteEnum = (index: number) => {
+  if (dataSpecsList.value.length === 1) {
+    message.warning('至少需要一个枚举项');
+    return;
+  }
+  dataSpecsList.value.splice(index, 1);
+};
+
+/** 校验枚举值 */
+const validateEnumValue = (_: any, value: any, callback: any) => {
+  if (isEmpty(value)) {
+    callback(new Error('枚举值不能为空'));
+    return;
+  }
+  if (isNaN(Number(value))) {
+    callback(new Error('枚举值必须是数字'));
+    return;
+  }
+  // 检查枚举值是否重复
+  const values = dataSpecsList.value.map((item) => item.value);
+  if (values.filter((v) => v === value).length > 1) {
+    callback(new Error('枚举值不能重复'));
+    return;
+  }
+  callback();
+};
+
+/** 校验枚举描述 */
+const validateEnumName = (_: any, value: string, callback: any) => {
+  if (isEmpty(value)) {
+    callback(new Error('枚举描述不能为空'));
+    return;
+  }
+  // 检查开头字符
+  if (!/^[\u4E00-\u9FA5a-z0-9]/i.test(value)) {
+    callback(new Error('枚举描述必须以中文、英文字母或数字开头'));
+    return;
+  }
+  // 检查整体格式
+  if (!/^[\u4E00-\u9FA5a-z0-9][\w\u4E00-\u9FA5-]*$/i.test(value)) {
+    callback(new Error('枚举描述只能包含中文、英文字母、数字、下划线和短划线'));
+    return;
+  }
+  // 检查长度（一个中文算一个字符）
+  if (value.length > 20) {
+    callback(new Error('枚举描述长度不能超过20个字符'));
+    return;
+  }
+  callback();
+};
+
+/** 校验整个枚举列表 */
+const validateEnumList = (_: any, __: any, callback: any) => {
+  if (isEmpty(dataSpecsList.value)) {
+    callback(new Error('请至少添加一个枚举项'));
+    return;
+  }
+
+  // 检查是否存在空值
+  const hasEmptyValue = dataSpecsList.value.some(
+    (item) => isEmpty(item.value) || isEmpty(item.name),
+  );
+  if (hasEmptyValue) {
+    callback(new Error('存在未填写的枚举值或描述'));
+    return;
+  }
+
+  // 检查枚举值是否都是数字
+  const hasInvalidNumber = dataSpecsList.value.some((item) =>
+    isNaN(Number(item.value)),
+  );
+  if (hasInvalidNumber) {
+    callback(new Error('存在非数字的枚举值'));
+    return;
+  }
+
+  // 检查是否有重复的枚举值
+  const values = dataSpecsList.value.map((item) => item.value);
+  const uniqueValues = new Set(values);
+  if (values.length !== uniqueValues.size) {
+    callback(new Error('存在重复的枚举值'));
+    return;
+  }
+  callback();
+};
+</script>
+
 <template>
  <el-form-item
-    :rules="[{ required: true, validator: validateEnumList, trigger: 'change' }]"
+    :rules="[
+      { required: true, validator: validateEnumList, trigger: 'change' },
+    ]"
    label="枚举项"
  >
    <div class="flex flex-col">
@@ -12,15 +128,15 @@
      <div
        v-for="(item, index) in dataSpecsList"
        :key="index"
-        class="flex items-center justify-between mb-5px"
+        class="mb-5px flex items-center justify-between"
      >
        <el-form-item
          :prop="`property.dataSpecsList[${index}].value`"
          :rules="[
            { required: true, message: '枚举值不能为空' },
-            { validator: validateEnumValue, trigger: 'blur' }
+            { validator: validateEnumValue, trigger: 'blur' },
          ]"
-          class="flex-1 mb-0"
+          class="mb-0 flex-1"
        >
          <el-input v-model="item.value" placeholder="请输入枚举值,如'0'" />
        </el-form-item>
@@ -29,128 +145,26 @@
          :prop="`property.dataSpecsList[${index}].name`"
          :rules="[
            { required: true, message: '枚举描述不能为空' },
-            { validator: validateEnumName, trigger: 'blur' }
+            { validator: validateEnumName, trigger: 'blur' },
          ]"
-          class="flex-1 mb-0"
+          class="mb-0 flex-1"
        >
          <el-input v-model="item.name" placeholder="对该枚举项的描述" />
        </el-form-item>
-        <el-button class="ml-10px" link type="primary" @click="deleteEnum(index)">删除</el-button>
+        <el-button
+          class="ml-10px"
+          link
+          type="primary"
+          @click="deleteEnum(index)"
+        >
+          删除
+        </el-button>
      </div>
      <el-button link type="primary" @click="addEnum">+添加枚举项</el-button>
    </div>
  </el-form-item>
 </template>

-<script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import { isEmpty } from '@vben/utils'
-import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants'
-import { DataSpecsEnumOrBoolData } from '#/api/iot/thingmodel'
-
-/** 枚举型的 dataSpecs 配置组件 */
-defineOptions({ name: 'ThingModelEnumDataSpecs' })
-
-const props = defineProps<{ modelValue: any }>()
-const emits = defineEmits(['update:modelValue'])
-const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<DataSpecsEnumOrBoolData[]>
-
-
-/** 添加枚举项 */
-const addEnum = () => {
-  dataSpecsList.value.push({
-    dataType: IoTDataSpecsDataTypeEnum.ENUM,
-    name: '', // 枚举项的名称
-    value: undefined // 枚举值
-  })
-}
-
-/** 删除枚举项 */
-const deleteEnum = (index: number) => {
-  if (dataSpecsList.value.length === 1) {
-    message.warning('至少需要一个枚举项')
-    return
-  }
-  dataSpecsList.value.splice(index, 1)
-}
-
-/** 校验枚举值 */
-const validateEnumValue = (_: any, value: any, callback: any) => {
-  if (isEmpty(value)) {
-    callback(new Error('枚举值不能为空'))
-    return
-  }
-  if (isNaN(Number(value))) {
-    callback(new Error('枚举值必须是数字'))
-    return
-  }
-  // 检查枚举值是否重复
-  const values = dataSpecsList.value.map((item) => item.value)
-  if (values.filter((v) => v === value).length > 1) {
-    callback(new Error('枚举值不能重复'))
-    return
-  }
-  callback()
-}
-
-/** 校验枚举描述 */
-const validateEnumName = (_: any, value: string, callback: any) => {
-  if (isEmpty(value)) {
-    callback(new Error('枚举描述不能为空'))
-    return
-  }
-  // 检查开头字符
-  if (!/^[\u4e00-\u9fa5a-zA-Z0-9]/.test(value)) {
-    callback(new Error('枚举描述必须以中文、英文字母或数字开头'))
-    return
-  }
-  // 检查整体格式
-  if (!/^[\u4e00-\u9fa5a-zA-Z0-9][a-zA-Z0-9\u4e00-\u9fa5_-]*$/.test(value)) {
-    callback(new Error('枚举描述只能包含中文、英文字母、数字、下划线和短划线'))
-    return
-  }
-  // 检查长度（一个中文算一个字符）
-  if (value.length > 20) {
-    callback(new Error('枚举描述长度不能超过20个字符'))
-    return
-  }
-  callback()
-}
-
-/** 校验整个枚举列表 */
-const validateEnumList = (_: any, __: any, callback: any) => {
-  if (isEmpty(dataSpecsList.value)) {
-    callback(new Error('请至少添加一个枚举项'))
-    return
-  }
-
-  // 检查是否存在空值
-  const hasEmptyValue = dataSpecsList.value.some(
-    (item) => isEmpty(item.value) || isEmpty(item.name)
-  )
-  if (hasEmptyValue) {
-    callback(new Error('存在未填写的枚举值或描述'))
-    return
-  }
-
-  // 检查枚举值是否都是数字
-  const hasInvalidNumber = dataSpecsList.value.some((item) => isNaN(Number(item.value)))
-  if (hasInvalidNumber) {
-    callback(new Error('存在非数字的枚举值'))
-    return
-  }
-
-  // 检查是否有重复的枚举值
-  const values = dataSpecsList.value.map((item) => item.value)
-  const uniqueValues = new Set(values)
-  if (values.length !== uniqueValues.size) {
-    callback(new Error('存在重复的枚举值'))
-    return
-  }
-  callback()
-}
-</script>
-
 <style lang="scss" scoped>
 :deep(.el-form-item) {
  .el-form-item {
--- a/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelNumberDataSpecs.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelNumberDataSpecs.vue
@@ -1,11 +1,90 @@
 <!-- dataType：number 数组类型 -->
+<script lang="ts" setup>
+import { DICT_TYPE, getStrDictOptions } from '@vben/constants';
+
+import { useVModel } from '@vueuse/core';
+
+import { DataSpecsNumberData } from '#/api/iot/thingmodel';
+
+/** 数值型的 dataSpecs 配置组件 */
+defineOptions({ name: 'ThingModelNumberDataSpecs' });
+
+const props = defineProps<{ modelValue: any }>();
+const emits = defineEmits(['update:modelValue']);
+const dataSpecs = useVModel(
+  props,
+  'modelValue',
+  emits,
+) as Ref<DataSpecsNumberData>;
+
+/** 单位发生变化时触发 */
+const unitChange = (UnitSpecs: string) => {
+  const [unitName, unit] = UnitSpecs.split('-');
+  dataSpecs.value.unitName = unitName;
+  dataSpecs.value.unit = unit;
+};
+
+/** 校验最小值 */
+const validateMin = (_: any, __: any, callback: any) => {
+  const min = Number(dataSpecs.value.min);
+  const max = Number(dataSpecs.value.max);
+  if (isNaN(min)) {
+    callback(new Error('请输入有效的数值'));
+    return;
+  }
+  if (max !== undefined && !isNaN(max) && min >= max) {
+    callback(new Error('最小值必须小于最大值'));
+    return;
+  }
+
+  callback();
+};
+
+/** 校验最大值 */
+const validateMax = (_: any, __: any, callback: any) => {
+  const min = Number(dataSpecs.value.min);
+  const max = Number(dataSpecs.value.max);
+  if (isNaN(max)) {
+    callback(new Error('请输入有效的数值'));
+    return;
+  }
+  if (min !== undefined && !isNaN(min) && max <= min) {
+    callback(new Error('最大值必须大于最小值'));
+    return;
+  }
+
+  callback();
+};
+
+/** 校验步长 */
+const validateStep = (_: any, __: any, callback: any) => {
+  const step = Number(dataSpecs.value.step);
+  if (isNaN(step)) {
+    callback(new Error('请输入有效的数值'));
+    return;
+  }
+  if (step <= 0) {
+    callback(new Error('步长必须大于0'));
+    return;
+  }
+  const min = Number(dataSpecs.value.min);
+  const max = Number(dataSpecs.value.max);
+  if (!isNaN(min) && !isNaN(max) && step > max - min) {
+    callback(new Error('步长不能大于最大值和最小值的差值'));
+    return;
+  }
+
+  callback();
+};
+</script>
+
 <template>
  <el-form-item label="取值范围">
    <div class="flex items-center justify-between">
      <el-form-item
        :rules="[
          { required: true, message: '最小值不能为空' },
-          { validator: validateMin, trigger: 'blur' }
+          { validator: validateMin, trigger: 'blur' },
        ]"
        class="mb-0"
        prop="property.dataSpecs.min"
@@ -16,7 +95,7 @@
      <el-form-item
        :rules="[
          { required: true, message: '最大值不能为空' },
-          { validator: validateMax, trigger: 'blur' }
+          { validator: validateMax, trigger: 'blur' },
        ]"
        class="mb-0"
        prop="property.dataSpecs.max"
@@ -28,7 +107,7 @@
  <el-form-item
    :rules="[
      { required: true, message: '步长不能为空' },
-      { validator: validateStep, trigger: 'blur' }
+      { validator: validateStep, trigger: 'blur' },
    ]"
    label="步长"
    prop="property.dataSpecs.step"
@@ -41,95 +120,26 @@
    prop="property.dataSpecs.unit"
  >
    <el-select
-      :model-value="dataSpecs.unit ? dataSpecs.unitName + '-' + dataSpecs.unit : ''"
+      :model-value="
+        dataSpecs.unit ? `${dataSpecs.unitName}-${dataSpecs.unit}` : ''
+      "
      filterable
      placeholder="请选择单位"
      class="w-1/1"
      @change="unitChange"
    >
      <el-option
-        v-for="(item, index) in getStrDictOptions(DICT_TYPE.IOT_THING_MODEL_UNIT)"
+        v-for="(item, index) in getStrDictOptions(
+          DICT_TYPE.IOT_THING_MODEL_UNIT,
+        )"
        :key="index"
-        :label="item.label + '-' + item.value"
-        :value="item.label + '-' + item.value"
+        :label="`${item.label}-${item.value}`"
+        :value="`${item.label}-${item.value}`"
      />
    </el-select>
  </el-form-item>
 </template>

-<script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import { DICT_TYPE, getStrDictOptions } from '@vben/constants'
-import { DataSpecsNumberData } from '#/api/iot/thingmodel'
-
-/** 数值型的 dataSpecs 配置组件 */
-defineOptions({ name: 'ThingModelNumberDataSpecs' })
-
-const props = defineProps<{ modelValue: any }>()
-const emits = defineEmits(['update:modelValue'])
-const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<DataSpecsNumberData>
-
-/** 单位发生变化时触发 */
-const unitChange = (UnitSpecs: string) => {
-  const [unitName, unit] = UnitSpecs.split('-')
-  dataSpecs.value.unitName = unitName
-  dataSpecs.value.unit = unit
-}
-
-/** 校验最小值 */
-const validateMin = (_: any, __: any, callback: any) => {
-  const min = Number(dataSpecs.value.min)
-  const max = Number(dataSpecs.value.max)
-  if (isNaN(min)) {
-    callback(new Error('请输入有效的数值'))
-    return
-  }
-  if (max !== undefined && !isNaN(max) && min >= max) {
-    callback(new Error('最小值必须小于最大值'))
-    return
-  }
-
-  callback()
-}
-
-/** 校验最大值 */
-const validateMax = (_: any, __: any, callback: any) => {
-  const min = Number(dataSpecs.value.min)
-  const max = Number(dataSpecs.value.max)
-  if (isNaN(max)) {
-    callback(new Error('请输入有效的数值'))
-    return
-  }
-  if (min !== undefined && !isNaN(min) && max <= min) {
-    callback(new Error('最大值必须大于最小值'))
-    return
-  }
-
-  callback()
-}
-
-/** 校验步长 */
-const validateStep = (_: any, __: any, callback: any) => {
-  const step = Number(dataSpecs.value.step)
-  if (isNaN(step)) {
-    callback(new Error('请输入有效的数值'))
-    return
-  }
-  if (step <= 0) {
-    callback(new Error('步长必须大于0'))
-    return
-  }
-  const min = Number(dataSpecs.value.min)
-  const max = Number(dataSpecs.value.max)
-  if (!isNaN(min) && !isNaN(max) && step > max - min) {
-    callback(new Error('步长不能大于最大值和最小值的差值'))
-    return
-  }
-
-  callback()
-}
-</script>
-
 <style lang="scss" scoped>
 :deep(.el-form-item) {
  .el-form-item {
--- a/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelStructDataSpecs.vue
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelStructDataSpecs.vue
@@ -1,4 +1,125 @@
 <!-- dataType：struct 数组类型 -->
+<script lang="ts" setup>
+import { isEmpty } from '@vben/utils';
+
+import { useVModel } from '@vueuse/core';
+
+import { ThingModelFormRules } from '#/api/iot/thingmodel';
+import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
+
+import ThingModelProperty from '../ThingModelProperty.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,
+    },
+  },
+});
+
+/** 打开 struct 表单 */
+const openStructForm = (val: any) => {
+  dialogVisible.value = true;
+  resetForm();
+  if (isEmpty(val)) {
+    return;
+  }
+  // 编辑时回显数据
+  formData.value = {
+    identifier: val.identifier,
+    name: val.name,
+    description: val.description,
+    property: {
+      dataType: val.childDataType,
+      dataSpecs: val.dataSpecs,
+      dataSpecsList: val.dataSpecsList,
+    },
+  };
+};
+
+/** 删除 struct 项 */
+const deleteStructItem = (index: number) => {
+  dataSpecsList.value.splice(index, 1);
+};
+
+/** 添加参数 */
+const submitForm = async () => {
+  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;
+  }
+};
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    property: {
+      dataType: IoTDataSpecsDataTypeEnum.INT,
+      dataSpecs: {
+        dataType: IoTDataSpecsDataTypeEnum.INT,
+      },
+    },
+  };
+  structFormRef.value?.resetFields();
+};
+
+/** 校验 struct 不能为空 */
+const validateList = (_: any, __: any, callback: any) => {
+  if (isEmpty(dataSpecsList.value)) {
+    callback(new Error('struct 不能为空'));
+    return;
+  }
+  callback();
+};
+
+/** 组件初始化 */
+onMounted(async () => {
+  await nextTick();
+  // 预防 dataSpecsList 空指针
+  isEmpty(dataSpecsList.value) && (dataSpecsList.value = []);
+});
+</script>
+
 <template>
  <!-- struct 数据展示 -->
  <el-form-item
@@ -8,16 +129,22 @@
    <div
      v-for="(item, index) in dataSpecsList"
      :key="index"
-      class="w-1/1 struct-item flex justify-between px-10px mb-10px"
+      class="w-1/1 struct-item px-10px mb-10px flex justify-between"
    >
      <span>参数名称：{{ item.name }}</span>
      <div class="btn">
-        <el-button link type="primary" @click="openStructForm(item)">编辑</el-button>
+        <el-button link type="primary" @click="openStructForm(item)">
+          编辑
+        </el-button>
        <el-divider direction="vertical" />
-        <el-button link type="danger" @click="deleteStructItem(index)">删除</el-button>
+        <el-button link type="danger" @click="deleteStructItem(index)">
+          删除
+        </el-button>
      </div>
    </div>
-    <el-button link type="primary" @click="openStructForm(null)">+新增参数</el-button>
+    <el-button link type="primary" @click="openStructForm(null)">
+      +新增参数
+    </el-button>
  </el-form-item>

  <!-- struct 表单 -->
@@ -39,127 +166,14 @@
      <ThingModelProperty v-model="formData.property" is-struct-data-specs />
    </el-form>
    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">
+        确 定
+      </el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
 </template>

-<script lang="ts" setup>
-import { useVModel } from '@vueuse/core'
-import ThingModelProperty from '../ThingModelProperty.vue'
-import { isEmpty } from '@vben/utils'
-import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants'
-import { ThingModelFormRules } from '#/api/iot/thingmodel'
-
-/** 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
-    }
-  }
-})
-
-/** 打开 struct 表单 */
-const openStructForm = (val: any) => {
-  dialogVisible.value = true
-  resetForm()
-  if (isEmpty(val)) {
-    return
-  }
-  // 编辑时回显数据
-  formData.value = {
-    identifier: val.identifier,
-    name: val.name,
-    description: val.description,
-    property: {
-      dataType: val.childDataType,
-      dataSpecs: val.dataSpecs,
-      dataSpecsList: val.dataSpecsList
-    }
-  }
-}
-
-/** 删除 struct 项 */
-const deleteStructItem = (index: number) => {
-  dataSpecsList.value.splice(index, 1)
-}
-
-/** 添加参数 */
-const submitForm = async () => {
-  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[existingIndex] = item
-    } else {
-      dataSpecsList.value.push(item)
-    }
-  } finally {
-    dialogVisible.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    property: {
-      dataType: IoTDataSpecsDataTypeEnum.INT,
-      dataSpecs: {
-        dataType: IoTDataSpecsDataTypeEnum.INT
-      }
-    }
-  }
-  structFormRef.value?.resetFields()
-}
-
-/** 校验 struct 不能为空 */
-const validateList = (_: any, __: any, callback: any) => {
-  if (isEmpty(dataSpecsList.value)) {
-    callback(new Error('struct 不能为空'))
-    return
-  }
-  callback()
-}
-
-/** 组件初始化 */
-onMounted(async () => {
-  await nextTick()
-  // 预防 dataSpecsList 空指针
-  isEmpty(dataSpecsList.value) && (dataSpecsList.value = [])
-})
-</script>
-
 <style lang="scss" scoped>
 .struct-item {
  background-color: #e4f2fd;
--- a/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/index.ts
+++ b/apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/index.ts
@@ -1,11 +1,4 @@
-import ThingModelEnumDataSpecs from './ThingModelEnumDataSpecs.vue'
-import ThingModelNumberDataSpecs from './ThingModelNumberDataSpecs.vue'
-import ThingModelArrayDataSpecs from './ThingModelArrayDataSpecs.vue'
-import ThingModelStructDataSpecs from './ThingModelStructDataSpecs.vue'
-
-export {
-  ThingModelEnumDataSpecs,
-  ThingModelNumberDataSpecs,
-  ThingModelArrayDataSpecs,
-  ThingModelStructDataSpecs
-}
+export { default as ThingModelArrayDataSpecs } from './ThingModelArrayDataSpecs.vue';
+export { default as ThingModelEnumDataSpecs } from './ThingModelEnumDataSpecs.vue';
+export { default as ThingModelNumberDataSpecs } from './ThingModelNumberDataSpecs.vue';
+export { default as ThingModelStructDataSpecs } from './ThingModelStructDataSpecs.vue';