iot产品管理问题

1.修复物模型列表无限加载的问题
2.修复物模型管理页面添加，TSL，编辑，删除，功能类型选项功能不用问题
3.修复TSL按钮物模型接口没有的问题
4.修复物模型新增编辑页面的属性不能正常编辑修改问题美化显示
iot设备管理问题
1.修复新增编辑页面缺少字段相关组件
2.修复设备详情中子页面不显示问题
3.修复设备详情子页面物模型数据页面不显示问题
4.修复模拟设备右侧不显示问题 右侧溢出，改为上下分栏

Signed-off-by: Administrator <425053404@qq.com>

apps/web-antd/src/views/iot/alert/config/index.vue

@@ -21,7 +21,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function handleRefresh() {
+function onRefresh() {
   gridApi.query();
 }
 
@@ -82,7 +82,7 @@ async function handleDelete(row: AlertConfigApi.AlertConfig) {
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
-    handleRefresh();
+    onRefresh();
   } finally {
     hideLoading();
   }
@@ -121,7 +121,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormModal @success="onRefresh" />
     <Grid table-title="告警配置列表">
       <template #toolbar-tools>
         <TableAction

apps/web-antd/src/views/iot/alert/record/index.vue

@@ -22,7 +22,7 @@ const productList = ref<any[]>([]);
 const deviceList = ref<any[]>([]);
 
 /** 刷新表格 */
-function handleRefresh() {
+function onRefresh() {
   gridApi.query();
 }
 
@@ -101,7 +101,7 @@ async function handleProcess(row: AlertRecord) {
       try {
         await processAlertRecord(row.id as number, processRemark);
         message.success('处理成功');
-        handleRefresh();
+        onRefresh();
       } catch (error) {
         console.error('处理失败:', error);
         throw error;

apps/web-antd/src/views/iot/device/device/data.ts

@@ -113,16 +113,16 @@ export function useFormSchema(): VbenFormSchema[] {
         .optional()
         .or(z.literal('')),
     },
-    // {
-    //   fieldName: 'locationType',
-    //   label: '定位类型',
-    //   component: 'RadioGroup',
-    //   componentProps: {
-    //     options: getDictOptions(DICT_TYPE.IOT_LOCATION_TYPE, 'number'),
-    //     buttonStyle: 'solid',
-    //     optionType: 'button',
-    //   },
-    // },
+    {
+      fieldName: 'locationType',
+      label: '定位类型',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.IOT_LOCATION_TYPE, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+    },
     {
       fieldName: 'longitude',
       label: '设备经度',

apps/web-antd/src/views/iot/device/device/modules/DeviceForm.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import type { IotDeviceApi } from '#/api/iot/device/device';
-
 import { computed, ref } from 'vue';
 
+import { message } from 'ant-design-vue';
 import { useVbenForm, useVbenModal } from '@vben/common-ui';
 
-import { message } from 'ant-design-vue';
-
-import { createDevice, getDevice, updateDevice } from '#/api/iot/device/device';
+import {
+  createDevice,
+  getDevice,
+  updateDevice,
+  type IotDeviceApi
+} from '#/api/iot/device/device';
 import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailConfig.vue

@@ -2,9 +2,9 @@
 <script lang="ts" setup>
 import type { IotDeviceApi } from '#/api/iot/device/device';
 
-import { ref, watchEffect } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 
-import { Alert, Button, message } from 'ant-design-vue';
+import { Alert, Button, message, Textarea } from 'ant-design-vue';
 
 import { sendDeviceMessage, updateDevice } from '#/api/iot/device/device';
 import { IotDeviceMessageMethodEnum } from '#/views/iot/utils/constants';
@@ -22,41 +22,68 @@ const emit = defineEmits<{
 const loading = ref(false); // 加载中
 const pushLoading = ref(false); // 推送加载中
 const config = ref<any>({}); // 只存储 config 字段
-const hasJsonError = ref(false); // 是否有 JSON 格式错误
+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);
+  }
+});
+
+/** 判断配置是否有数据 */
+const hasConfigData = computed(() => {
+  return config.value && Object.keys(config.value).length > 0;
+});
+
 /** 启用编辑模式的函数 */
 function enableEdit() {
   isEditing.value = true;
-  hasJsonError.value = false; // 重置错误状态
+  // 重新同步编辑器内容
+  configString.value = JSON.stringify(config.value, null, 2);
 }
 
 /** 取消编辑的函数 */
 function cancelEdit() {
   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;
-  hasJsonError.value = false; // 重置错误状态
 }
 
 /** 保存配置的函数 */
 async function saveConfig() {
-  if (hasJsonError.value) {
+  // 验证 JSON 格式
+  try {
+    config.value = JSON.parse(configString.value);
+  } catch (error) {
     message.error({ content: 'JSON格式错误，请修正后再提交！' });
     return;
   }
+
   await updateDeviceConfig();
   isEditing.value = false;
 }
@@ -102,39 +129,26 @@ async function updateDeviceConfig() {
     loading.value = false;
   }
 }
-
-/** 处理 JSON 编辑器错误的函数 */
-function onError(errors: any) {
-  if (!errors || (Array.isArray(errors) && errors.length === 0)) {
-    hasJsonError.value = false;
-    return;
-  }
-  hasJsonError.value = true;
-}
 </script>
 
 <template>
   <div>
+    <!-- 只在没有配置数据时显示提示 -->
     <Alert
+      v-if="!hasConfigData"
       message="支持远程更新设备的配置文件(JSON 格式)，可以在下方编辑配置模板，对设备的系统参数、网络参数等进行远程配置。配置完成后，需点击「下发」按钮，设备即可进行远程配置。"
       type="info"
       show-icon
       class="my-4"
       description="如需编辑文件，请点击下方编辑按钮"
     />
-    <JsonEditor
-      v-model="config"
-      :mode="isEditing ? 'code' : 'view'"
-      height="600px"
-      @error="onError"
-    />
     <div class="mt-5 text-center">
       <Button v-if="isEditing" @click="cancelEdit">取消</Button>
       <Button
         v-if="isEditing"
         type="primary"
         @click="saveConfig"
-        :disabled="hasJsonError"
+        :loading="loading"
       >
         保存
       </Button>
@@ -148,5 +162,47 @@ function onError(errors: any) {
         配置推送
       </Button>
     </div>
+
+    <!-- 代码视图 - 只读展示 -->
+    <div v-if="!isEditing" class="json-viewer-container">
+      <pre class="json-code"><code>{{ formattedConfig }}</code></pre>
+    </div>
+
+    <!-- 编辑器视图 - 可编辑 -->
+    <Textarea
+      v-else
+      v-model:value="configString"
+      :rows="20"
+      placeholder="请输入 JSON 格式的配置信息"
+      class="json-editor"
+    />
+
+
   </div>
 </template>
+
+<style scoped>
+.json-viewer-container {
+  background-color: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 12px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.json-code {
+  margin: 0;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #333;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.json-editor {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 13px;
+}
+</style>

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsInfo.vue

@@ -85,7 +85,7 @@ function handleAuthInfoDialogClose() {
               <span>设备信息</span>
             </div>
           </template>
-          <Descriptions :column="1" bordered>
+          <Descriptions :column="1" bordered size="small">
             <Descriptions.Item label="产品名称">
               {{ product.name }}
             </Descriptions.Item>

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsMessage.vue

@@ -1,174 +1,4 @@
 <!-- 设备消息列表 -->
-<script setup lang="ts">
-import {
-  computed,
-  onBeforeUnmount,
-  onMounted,
-  reactive,
-  ref,
-  watch,
-} from 'vue';
-
-import { ContentWrap } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate } from '@vben/utils';
-
-import {
-  Button,
-  Form,
-  Pagination,
-  Select,
-  Switch,
-  Table,
-  Tag,
-} from 'ant-design-vue';
-
-import { getDeviceMessagePage } from '#/api/iot/device/device';
-import { DictTag } from '#/components/dict-tag';
-import { IotDeviceMessageMethodEnum } from '#/views/iot/utils/constants';
-
-const props = defineProps<{
-  deviceId: number;
-}>();
-
-// 查询参数
-const queryParams = reactive({
-  deviceId: props.deviceId,
-  method: undefined,
-  upstream: undefined,
-  pageNo: 1,
-  pageSize: 10,
-});
-
-// 列表数据
-const loading = ref(false);
-const total = ref(0);
-const list = ref<any[]>([]);
-const autoRefresh = ref(false); // 自动刷新开关
-let autoRefreshTimer: any = null; // 自动刷新定时器
-
-// 消息方法选项
-const methodOptions = computed(() => {
-  return Object.values(IotDeviceMessageMethodEnum).map((item) => ({
-    label: item.name,
-    value: item.method,
-  }));
-});
-
-// 表格列定义
-const columns = [
-  {
-    title: '时间',
-    dataIndex: 'ts',
-    key: 'ts',
-    width: 180,
-  },
-  {
-    title: '上行/下行',
-    dataIndex: 'upstream',
-    key: 'upstream',
-    width: 140,
-  },
-  {
-    title: '是否回复',
-    dataIndex: 'reply',
-    key: 'reply',
-    width: 140,
-  },
-  {
-    title: '请求编号',
-    dataIndex: 'requestId',
-    key: 'requestId',
-    width: 300,
-  },
-  {
-    title: '请求方法',
-    dataIndex: 'method',
-    key: 'method',
-    width: 140,
-  },
-  {
-    title: '请求/响应数据',
-    dataIndex: 'params',
-    key: 'params',
-    ellipsis: true,
-  },
-];
-
-/** 查询消息列表 */
-async function getMessageList() {
-  if (!props.deviceId) return;
-  loading.value = true;
-  try {
-    const data = await getDeviceMessagePage(queryParams);
-    total.value = data.total;
-    list.value = data.list;
-  } finally {
-    loading.value = false;
-  }
-}
-
-/** 搜索操作 */
-function handleQuery() {
-  queryParams.pageNo = 1;
-  getMessageList();
-}
-
-/** 监听自动刷新 */
-watch(autoRefresh, (newValue) => {
-  if (newValue) {
-    autoRefreshTimer = setInterval(() => {
-      getMessageList();
-    }, 5000);
-  } else {
-    clearInterval(autoRefreshTimer);
-    autoRefreshTimer = null;
-  }
-});
-
-/** 监听设备标识变化 */
-watch(
-  () => props.deviceId,
-  (newValue) => {
-    if (newValue) {
-      handleQuery();
-    }
-  },
-);
-
-/** 组件卸载时清除定时器 */
-onBeforeUnmount(() => {
-  if (autoRefreshTimer) {
-    clearInterval(autoRefreshTimer);
-    autoRefreshTimer = null;
-  }
-});
-
-/** 初始化 */
-onMounted(() => {
-  if (props.deviceId) {
-    getMessageList();
-  }
-});
-
-/** 刷新消息列表 */
-function refresh(delay = 0) {
-  if (delay > 0) {
-    setTimeout(() => {
-      handleQuery();
-    }, delay);
-  } else {
-    handleQuery();
-  }
-}
-
-/** 暴露方法给父组件 */
-defineExpose({
-  refresh,
-});
-</script>
-
 <template>
   <ContentWrap>
     <!-- 搜索区域 -->
@@ -220,7 +50,6 @@ defineExpose({
       :data-source="list"
       :columns="columns"
       :pagination="false"
-      align="center"
       class="whitespace-nowrap"
     >
       <template #bodyCell="{ column, record }">
@@ -265,3 +94,164 @@ defineExpose({
     </div>
   </ContentWrap>
 </template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+
+import { ContentWrap } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { IconifyIcon } from '@vben/icons';
+import { formatDate } from '@vben/utils';
+
+import { Button, Form, Pagination, Select, Switch, Table, Tag } from 'ant-design-vue';
+
+import { getDeviceMessagePage } from '#/api/iot/device/device';
+import { DictTag } from '#/components/dict-tag';
+import { IotDeviceMessageMethodEnum } from '#/views/iot/utils/constants';
+
+const props = defineProps<{
+  deviceId: number;
+}>();
+
+// 查询参数
+const queryParams = reactive({
+  deviceId: props.deviceId,
+  method: undefined,
+  upstream: undefined,
+  pageNo: 1,
+  pageSize: 10,
+});
+
+// 列表数据
+const loading = ref(false);
+const total = ref(0);
+const list = ref<any[]>([]);
+const autoRefresh = ref(false); // 自动刷新开关
+let autoRefreshTimer: any = null; // 自动刷新定时器
+
+// 消息方法选项
+const methodOptions = computed(() => {
+  return Object.values(IotDeviceMessageMethodEnum).map((item) => ({
+    label: item.name,
+    value: item.method,
+  }));
+});
+
+// 表格列定义
+const columns = [
+  {
+    title: '时间',
+    dataIndex: 'ts',
+    key: 'ts',
+    align: 'center' as const,
+    width: 180,
+  },
+  {
+    title: '上行/下行',
+    dataIndex: 'upstream',
+    key: 'upstream',
+    align: 'center' as const,
+    width: 140,
+  },
+  {
+    title: '是否回复',
+    dataIndex: 'reply',
+    key: 'reply',
+    align: 'center' as const,
+    width: 140,
+  },
+  {
+    title: '请求编号',
+    dataIndex: 'requestId',
+    key: 'requestId',
+    align: 'center' as const,
+    width: 300,
+  },
+  {
+    title: '请求方法',
+    dataIndex: 'method',
+    key: 'method',
+    align: 'center' as const,
+    width: 140,
+  },
+  {
+    title: '请求/响应数据',
+    dataIndex: 'params',
+    key: 'params',
+    align: 'center' as const,
+    ellipsis: true,
+  },
+];
+
+/** 查询消息列表 */
+const getMessageList = async () => {
+  if (!props.deviceId) return;
+  loading.value = true;
+  try {
+    const data = await getDeviceMessagePage(queryParams);
+    total.value = data.total;
+    list.value = data.list;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 搜索操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1;
+  getMessageList();
+};
+
+/** 监听自动刷新 */
+watch(autoRefresh, (newValue) => {
+  if (newValue) {
+    autoRefreshTimer = setInterval(() => {
+      getMessageList();
+    }, 5000);
+  } else {
+    clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+});
+
+/** 监听设备标识变化 */
+watch(
+  () => props.deviceId,
+  (newValue) => {
+    if (newValue) {
+      handleQuery();
+    }
+  },
+);
+
+/** 组件卸载时清除定时器 */
+onBeforeUnmount(() => {
+  if (autoRefreshTimer) {
+    clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+});
+
+/** 初始化 */
+onMounted(() => {
+  if (props.deviceId) {
+    getMessageList();
+  }
+});
+
+/** 刷新消息列表 */
+const refresh = (delay = 0) => {
+  if (delay > 0) {
+    setTimeout(() => {
+      handleQuery();
+    }, delay);
+  } else {
+    handleQuery();
+  }
+};
+
+/** 暴露方法给父组件 */
+defineExpose({
+  refresh,
+});
+</script>

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsSimulator.vue

@@ -8,17 +8,18 @@ import type { ThingModelData } from '#/api/iot/thingmodel';
 
 import { computed, ref } from 'vue';
 
+import { ContentWrap } from '@vben/common-ui';
+
 import {
   Button,
   Card,
-  Col,
   Input,
   message,
-  Row,
   Table,
   Tabs,
   Textarea,
 } from 'ant-design-vue';
+import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
 
 import { DeviceStateEnum, sendDeviceMessage } from '#/api/iot/device/device';
 import {
@@ -26,6 +27,8 @@ import {
   IoTThingModelTypeEnum,
 } from '#/views/iot/utils/constants';
 
+import DataDefinition from '#/views/iot/thingmodel/modules/components/DataDefinition.vue';
+
 import DeviceDetailsMessage from './DeviceDetailsMessage.vue';
 
 const props = defineProps<{
@@ -41,6 +44,10 @@ 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>>({});
 
@@ -90,12 +97,12 @@ const propertyColumns: TableColumnType[] = [
   {
     title: '数据定义',
     key: 'dataDefinition',
-    minWidth: 200,
+    minWidth: 100,
   },
   {
     title: '值',
     key: 'value',
-    width: 150,
+    width: 300,
     fixed: 'right' as any,
   },
 ];
@@ -332,19 +339,32 @@ async function handleServiceInvoke(row: ThingModelData) {
 
 <template>
   <ContentWrap>
-    <Row :gutter="20">
-      <!-- 左侧指令调试区域 -->
-      <Col :span="12">
-        <Card>
-          <Tabs v-model:active-key="activeTab">
-            <!-- 上行指令调试 -->
-            <Tabs.Pane key="upstream" tab="上行指令调试">
+    <!-- 上方：指令调试区域 -->
+    <Card class="mb-4 simulator-tabs">
+      <template #title>
+        <div class="flex items-center justify-between">
+          <span>指令调试</span>
+          <Button
+            type="text"
+            size="small"
+            @click="debugCollapsed = !debugCollapsed"
+          >
+            <UpOutlined v-if="!debugCollapsed" />
+            <DownOutlined v-if="debugCollapsed" />
+          </Button>
+        </div>
+      </template>
+      <div v-show="!debugCollapsed">
+        <Tabs v-model:active-key="activeTab" size="small">
+        <!-- 上行指令调试 -->
+        <Tabs.TabPane key="upstream" tab="上行指令调试">
               <Tabs
                 v-if="activeTab === 'upstream'"
                 v-model:active-key="upstreamTab"
+                size="small"
               >
                 <!-- 属性上报 -->
-                <Tabs.Pane
+                <Tabs.TabPane
                   :key="IotDeviceMessageMethodEnum.PROPERTY_POST.method"
                   tab="属性上报"
                 >
@@ -354,6 +374,8 @@ async function handleServiceInvoke(row: ThingModelData) {
                       align="center"
                       :columns="propertyColumns"
                       :pagination="false"
+                      :scroll="{ y: 300 }"
+                      size="small"
                     >
                       <template #bodyCell="{ column, record }">
                         <template v-if="column.key === 'dataType'">
@@ -383,10 +405,10 @@ async function handleServiceInvoke(row: ThingModelData) {
                       </Button>
                     </div>
                   </ContentWrap>
-                </Tabs.Pane>
+                </Tabs.TabPane>
 
                 <!-- 事件上报 -->
-                <Tabs.Pane
+                <Tabs.TabPane
                   :key="IotDeviceMessageMethodEnum.EVENT_POST.method"
                   tab="事件上报"
                 >
@@ -396,6 +418,8 @@ async function handleServiceInvoke(row: ThingModelData) {
                       align="center"
                       :columns="eventColumns"
                       :pagination="false"
+                      :scroll="{ y: 300 }"
+                      size="small"
                     >
                       <template #bodyCell="{ column, record }">
                         <template v-if="column.key === 'dataType'">
@@ -427,10 +451,10 @@ async function handleServiceInvoke(row: ThingModelData) {
                       </template>
                     </Table>
                   </ContentWrap>
-                </Tabs.Pane>
+                </Tabs.TabPane>
 
                 <!-- 状态变更 -->
-                <Tabs.Pane
+                <Tabs.TabPane
                   :key="IotDeviceMessageMethodEnum.STATE_UPDATE.method"
                   tab="状态变更"
                 >
@@ -450,18 +474,19 @@ async function handleServiceInvoke(row: ThingModelData) {
                       </Button>
                     </div>
                   </ContentWrap>
-                </Tabs.Pane>
+                </Tabs.TabPane>
               </Tabs>
-            </Tabs.Pane>
+            </Tabs.TabPane>
 
             <!-- 下行指令调试 -->
-            <Tabs.Pane key="downstream" tab="下行指令调试">
+            <Tabs.TabPane key="downstream" tab="下行指令调试">
               <Tabs
                 v-if="activeTab === 'downstream'"
                 v-model:active-key="downstreamTab"
+                size="small"
               >
                 <!-- 属性调试 -->
-                <Tabs.Pane
+                <Tabs.TabPane
                   :key="IotDeviceMessageMethodEnum.PROPERTY_SET.method"
                   tab="属性设置"
                 >
@@ -471,6 +496,8 @@ async function handleServiceInvoke(row: ThingModelData) {
                       align="center"
                       :columns="propertyColumns"
                       :pagination="false"
+                      :scroll="{ y: 300 }"
+                      size="small"
                     >
                       <template #bodyCell="{ column, record }">
                         <template v-if="column.key === 'dataType'">
@@ -500,10 +527,10 @@ async function handleServiceInvoke(row: ThingModelData) {
                       </Button>
                     </div>
                   </ContentWrap>
-                </Tabs.Pane>
+                </Tabs.TabPane>
 
                 <!-- 服务调用 -->
-                <Tabs.Pane
+                <Tabs.TabPane
                   :key="IotDeviceMessageMethodEnum.SERVICE_INVOKE.method"
                   tab="设备服务调用"
                 >
@@ -513,6 +540,8 @@ async function handleServiceInvoke(row: ThingModelData) {
                       align="center"
                       :columns="serviceColumns"
                       :pagination="false"
+                      :scroll="{ y: 300 }"
+                      size="small"
                     >
                       <template #bodyCell="{ column, record }">
                         <template v-if="column.key === 'dataDefinition'">
@@ -541,23 +570,35 @@ async function handleServiceInvoke(row: ThingModelData) {
                       </template>
                     </Table>
                   </ContentWrap>
-                </Tabs.Pane>
+                </Tabs.TabPane>
               </Tabs>
-            </Tabs.Pane>
+            </Tabs.TabPane>
           </Tabs>
-        </Card>
-      </Col>
+        </div>
+      </Card>
 
-      <!-- 右侧设备日志区域 -->
-      <Col :span="12">
-        <ContentWrap title="设备消息">
-          <DeviceDetailsMessage
-            v-if="device.id"
-            ref="deviceMessageRef"
-            :device-id="device.id"
-          />
-        </ContentWrap>
-      </Col>
-    </Row>
+    <!-- 下方：设备消息区域 -->
+    <Card>
+      <template #title>
+        <div class="flex items-center justify-between">
+          <span>设备消息</span>
+          <Button
+            type="text"
+            size="small"
+            @click="messageCollapsed = !messageCollapsed"
+          >
+            <UpOutlined v-if="!messageCollapsed" />
+            <DownOutlined v-if="messageCollapsed" />
+          </Button>
+        </div>
+      </template>
+      <div v-show="!messageCollapsed">
+        <DeviceDetailsMessage
+          v-if="device.id"
+          ref="deviceMessageRef"
+          :device-id="device.id"
+        />
+      </div>
+    </Card>
   </ContentWrap>
 </template>

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsSubDevice.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+
+import { Card, Empty } from 'ant-design-vue';
+
+interface Props {
+  deviceId: number;
+}
+
+defineProps<Props>();
+
+const loading = ref(false);
+const subDevices = ref<any[]>([]);
+
+/** 获取子设备列表 */
+async function getSubDeviceList() {
+  loading.value = true;
+  try {
+    // TODO: 实现获取子设备列表的API调用
+    // const data = await getSubDevicesByGatewayId(deviceId);
+    // subDevices.value = data || [];
+    subDevices.value = [];
+  } catch (error) {
+    console.error('获取子设备列表失败:', error);
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(() => {
+  getSubDeviceList();
+});
+</script>
+
+<template>
+  <Card :loading="loading" title="子设备管理">
+    <Empty
+      description="暂无子设备数据，此功能待实现"
+      :image="Empty.PRESENTED_IMAGE_SIMPLE"
+    />
+    <!-- TODO: 实现子设备列表展示和管理功能 -->
+  </Card>
+</template>
+

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModel.vue

@@ -22,21 +22,26 @@ const activeTab = ref('property'); // 默认选中设备属性
 <template>
   <ContentWrap>
     <Tabs v-model:active-key="activeTab" class="!h-auto !p-0">
-      <Tabs.Pane key="property" tab="设备属性（运行状态）">
-        <DeviceDetailsThingModelProperty :device-id="deviceId" />
-      </Tabs.Pane>
-      <Tabs.Pane key="event" tab="设备事件上报">
+      <Tabs.TabPane key="property" tab="设备属性（运行状态）">
+        <DeviceDetailsThingModelProperty
+          v-if="activeTab === 'property'"
+          :device-id="deviceId"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="event" tab="设备事件上报">
         <DeviceDetailsThingModelEvent
+          v-if="activeTab === 'event'"
           :device-id="props.deviceId"
           :thing-model-list="props.thingModelList"
         />
-      </Tabs.Pane>
-      <Tabs.Pane key="service" tab="设备服务调用">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="service" tab="设备服务调用">
         <DeviceDetailsThingModelService
+          v-if="activeTab === 'service'"
           :device-id="deviceId"
           :thing-model-list="props.thingModelList"
         />
-      </Tabs.Pane>
+      </Tabs.TabPane>
     </Tabs>
   </ContentWrap>
 </template>

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelEvent.vue

@@ -148,6 +148,7 @@ onMounted(() => {
           v-model:value="queryParams.times"
           show-time
           format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
           style="width: 360px"
         />
       </Form.Item>

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelPropertyHistory.vue

@@ -1,4 +1,5 @@
 <!-- 设备物模型 -> 运行状态 -> 查看数据（设备的属性值历史）-->
+// 重新关闭打开图表,图表不显示可能图例注销失败等大佬修复
 <script setup lang="ts">
 import type { Dayjs } from 'dayjs';
 
@@ -10,7 +11,7 @@ import { computed, nextTick, reactive, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
-import { beginOfDay, endOfDay, formatDate } from '@vben/utils';
+import { beginOfDay, endOfDay, formatDate, formatDateTime } from '@vben/utils';
 
 import {
   Button,
@@ -20,6 +21,7 @@ import {
   RangePicker,
   Space,
   Spin,
+  Table,
   Tag,
 } from 'ant-design-vue';
 import dayjs from 'dayjs';
@@ -49,8 +51,8 @@ const queryParams = reactive({
   deviceId: -1,
   identifier: '',
   times: [
-    formatDate(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
-    formatDate(endOfDay(new Date())),
+    formatDateTime(beginOfDay(new Date(Date.now() - 3600 * 1000 * 24 * 7))),
+    formatDateTime(endOfDay(new Date())),
   ],
 });
 
@@ -100,7 +102,7 @@ const tableColumns = computed(() => [
     title: '序号',
     key: 'index',
     width: 80,
-    align: 'center',
+    align: 'center' as const,
     customRender: ({ index }: { index: number }) => index + 1,
   },
   {
@@ -108,20 +110,20 @@ const tableColumns = computed(() => [
     key: 'updateTime',
     dataIndex: 'updateTime',
     width: 200,
-    align: 'center',
+    align: 'center' as const,
   },
   {
     title: '属性值',
     key: 'value',
     dataIndex: 'value',
-    align: 'center',
+    align: 'center' as const,
   },
 ]);
 
 // 分页配置
 const paginationConfig = computed(() => ({
   current: 1,
-  pageSize: 20,
+  pageSize: 10,
   total: total.value,
   showSizeChanger: true,
   showQuickJumper: true,
@@ -134,7 +136,8 @@ async function getList() {
   loading.value = true;
   try {
     const data = await getHistoryDevicePropertyList(queryParams);
-    list.value = (data?.list as IotDeviceApi.DevicePropertyDetail[]) || [];
+    // 后端直接返回数组，不是 { list: [] } 格式
+    list.value = (Array.isArray(data) ? data : (data?.list || [])) as IotDeviceApi.DevicePropertyDetail[];
     total.value = list.value.length;
 
     // 如果是图表模式且不是复杂数据类型，渲染图表
@@ -143,7 +146,9 @@ async function getList() {
       !isComplexDataType.value &&
       list.value.length > 0
     ) {
+      // 等待 DOM 更新完成后再渲染图表
       await nextTick();
+      await nextTick(); // 双重 nextTick 确保 DOM 完全准备好
       renderChart();
     }
   } catch {
@@ -157,11 +162,20 @@ async function getList() {
 
 /** 渲染图表 */
 function renderChart() {
-  if (!list.value || list.value.length === 0) return;
+  if (!list.value || list.value.length === 0) {
+    return;
+  }
 
   const chartData = list.value.map((item) => [item.updateTime, item.value]);
 
-  renderEcharts({
+  // 使用 setTimeout 延迟渲染，避免 ECharts 主进程冲突
+  setTimeout(() => {
+    // 检查 chartRef 是否存在且已挂载
+    if (!chartRef.value || !chartRef.value.$el) {
+      return;
+    }
+
+    renderEcharts({
     title: {
       text: '属性值趋势',
       left: 'center',
@@ -265,6 +279,7 @@ function renderChart() {
       },
     ],
   });
+  }, 300); // 延迟300ms渲染，确保 DOM 完全准备好
 }
 
 /** 打开弹窗 */
@@ -275,12 +290,31 @@ async function open(deviceId: number, identifier: string, dataType: string) {
   propertyIdentifier.value = identifier;
   thingModelDataType.value = dataType;
 
+  // 重置时间范围为最近7天
+  dateRange.value = [
+    dayjs().subtract(7, 'day').startOf('day'),
+    dayjs().endOf('day'),
+  ];
+
+  // 更新查询参数的时间
+  queryParams.times = [
+    formatDateTime(dateRange.value[0].toDate()),
+    formatDateTime(dateRange.value[1].toDate()),
+  ];
+
   // 如果物模型是 struct、array，需要默认使用 list 模式
   viewMode.value = isComplexDataType.value ? 'list' : 'chart';
 
   // 等待弹窗完全渲染后再获取数据
   await nextTick();
   await getList();
+
+  // 如果是图表模式，延迟渲染图表
+  if (viewMode.value === 'chart' && !isComplexDataType.value) {
+    setTimeout(() => {
+      renderChart();
+    }, 500);
+  }
 }
 
 /** 时间变化处理 */
@@ -290,8 +324,8 @@ function handleTimeChange() {
   }
 
   queryParams.times = [
-    formatDate(dateRange.value[0].toDate()),
-    formatDate(dateRange.value[1].toDate()),
+    formatDateTime(dateRange.value[0].toDate()),
+    formatDateTime(dateRange.value[1].toDate()),
   ];
 
   getList();
@@ -372,8 +406,14 @@ watch(viewMode, async (newMode) => {
     !isComplexDataType.value &&
     list.value.length > 0
   ) {
+    // 等待 DOM 显示完成
     await nextTick();
-    renderChart();
+    await nextTick();
+
+    // 延迟渲染图表
+    setTimeout(() => {
+      renderChart();
+    }, 300);
   }
 });
 
@@ -398,7 +438,7 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
             format="YYYY-MM-DD HH:mm:ss"
             :placeholder="['开始时间', '结束时间']"
             class="!w-[400px]"
-            @press-enter="handleTimeChange"
+            @change="handleTimeChange"
           />
 
           <!-- 刷新按钮 -->
@@ -460,18 +500,20 @@ defineExpose({ open }); // 提供 open 方法，用于打开弹窗
       <!-- 数据展示区域 -->
       <Spin :spinning="loading" :delay="200">
         <!-- 图表模式 -->
-        <div v-if="viewMode === 'chart'" class="chart-container">
+        <div v-show="viewMode === 'chart'" class="chart-container">
           <Empty
             v-if="list.length === 0"
             :image="Empty.PRESENTED_IMAGE_SIMPLE"
             description="暂无数据"
             class="py-20"
           />
-          <EchartsUI v-else ref="chartRef" height="500px" />
+          <div v-else>
+            <EchartsUI ref="chartRef" height="500px" />
+          </div>
         </div>
 
         <!-- 表格模式 -->
-        <div v-else class="table-container">
+        <div v-show="viewMode === 'list'" class="table-container">
           <Table
             :data-source="list"
             :columns="tableColumns"

apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelService.vue

@@ -148,6 +148,7 @@ onMounted(() => {
           v-model:value="queryParams.times"
           show-time
           format="YYYY-MM-DD HH:mm:ss"
+          value-format="YYYY-MM-DD HH:mm:ss"
           style="width: 360px"
         />
       </Form.Item>

apps/web-antd/src/views/iot/device/device/modules/detail/index.vue

@@ -1,13 +1,12 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 import type { IotDeviceApi } from '#/api/iot/device/device';
 import type { IotProductApi } from '#/api/iot/product/product';
 import type { ThingModelData } from '#/api/iot/thingmodel';
 
-import { onMounted, ref, unref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
-import { useTabbarStore } from '@vben/stores';
 
 import { message, Tabs } from 'ant-design-vue';
 
@@ -20,33 +19,42 @@ import DeviceDetailsHeader from './DeviceDetailsHeader.vue';
 import DeviceDetailsInfo from './DeviceDetailsInfo.vue';
 import DeviceDetailsMessage from './DeviceDetailsMessage.vue';
 import DeviceDetailsSimulator from './DeviceDetailsSimulator.vue';
+import DeviceDetailsSubDevice from './DeviceDetailsSubDevice.vue';
 import DeviceDetailsThingModel from './DeviceDetailsThingModel.vue';
 
 defineOptions({ name: 'IoTDeviceDetail' });
 
 const route = useRoute();
-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<ThingModelData[]>([]); // 物模型列表数据
+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<ThingModelData[]>([]);
 
 /** 获取设备详情 */
-async function getDeviceData() {
+async function getDeviceData(deviceId: number) {
   loading.value = true;
   try {
-    device.value = await getDevice(id);
+    device.value = await getDevice(deviceId);
     await getProductData(device.value.productId);
     await getThingModelList(device.value.productId);
+  } catch {
+    message.error('获取设备详情失败');
   } finally {
     loading.value = false;
   }
 }
 
 /** 获取产品详情 */
-async function getProductData(id: number) {
-  product.value = await getProduct(id);
+async function getProductData(productId: number) {
+  try {
+    product.value = await getProduct(productId);
+  } catch (error) {
+    console.error('获取产品详情失败:', error);
+  }
 }
 
 /** 获取物模型列表 */
@@ -61,17 +69,20 @@ async function getThingModelList(productId: number) {
 }
 
 /** 初始化 */
-const tabbarStore = useTabbarStore(); // 视图操作
-const router = useRouter(); // 路由
-const { currentRoute } = router;
 onMounted(async () => {
   if (!id) {
-    message.warning({ content: '参数错误，产品不能为空！' });
-    await tabbarStore.closeTab(unref(currentRoute), router);
+    message.warning('参数错误，设备不能为空！');
+    router.back();
     return;
   }
-  await getDeviceData();
-  activeTab.value = (route.query.tab as string) || 'info';
+
+  await getDeviceData(id);
+
+  // 处理 tab 参数
+  const { tab } = route.query;
+  if (tab) {
+    activeTab.value = tab as string;
+  }
 });
 </script>
 <template>
@@ -80,50 +91,55 @@ onMounted(async () => {
       :loading="loading"
       :product="product"
       :device="device"
-      @refresh="getDeviceData"
+      @refresh="() => getDeviceData(id)"
     />
 
-    <Tabs v-model:active-key="activeTab" class="device-detail-tabs mt-4">
-      <Tabs.Pane key="info" tab="设备信息">
+    <Tabs v-model:active-key="activeTab" class="mt-4">
+      <Tabs.TabPane key="info" tab="设备信息">
         <DeviceDetailsInfo
           v-if="activeTab === 'info'"
           :product="product"
           :device="device"
         />
-      </Tabs.Pane>
-      <Tabs.Pane key="model" tab="物模型数据">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="model" tab="物模型数据">
         <DeviceDetailsThingModel
           v-if="activeTab === 'model' && device.id"
           :device-id="device.id"
           :thing-model-list="thingModelList"
         />
-      </Tabs.Pane>
-      <Tabs.Pane
+      </Tabs.TabPane>
+      <Tabs.TabPane
         v-if="product.deviceType === DeviceTypeEnum.GATEWAY"
         key="sub-device"
         tab="子设备管理"
-      />
-      <Tabs.Pane key="log" tab="设备消息">
+      >
+        <DeviceDetailsSubDevice
+          v-if="activeTab === 'sub-device' && device.id"
+          :device-id="device.id"
+        />
+      </Tabs.TabPane>
+      <Tabs.TabPane key="log" tab="设备消息">
         <DeviceDetailsMessage
           v-if="activeTab === 'log' && device.id"
           :device-id="device.id"
         />
-      </Tabs.Pane>
-      <Tabs.Pane key="simulator" tab="模拟设备">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="simulator" tab="模拟设备">
         <DeviceDetailsSimulator
           v-if="activeTab === 'simulator'"
           :product="product"
           :device="device"
           :thing-model-list="thingModelList"
         />
-      </Tabs.Pane>
-      <Tabs.Pane key="config" tab="设备配置">
+      </Tabs.TabPane>
+      <Tabs.TabPane key="config" tab="设备配置">
         <DeviceDetailConfig
           v-if="activeTab === 'config'"
           :device="device"
-          @success="getDeviceData"
+          @success="() => getDeviceData(id)"
         />
-      </Tabs.Pane>
+      </Tabs.TabPane>
     </Tabs>
   </Page>
 </template>

apps/web-antd/src/views/iot/device/group/index.vue

@@ -22,7 +22,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function handleRefresh() {
+function onRefresh() {
   gridApi.query();
 }
 
@@ -47,7 +47,7 @@ async function handleDelete(row: IotDeviceGroupApi.DeviceGroup) {
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
-    handleRefresh();
+    onRefresh();
   } finally {
     hideLoading();
   }
@@ -97,7 +97,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormModal @success="onRefresh" />
     <Grid table-title="设备分组列表">
       <template #toolbar-tools>
         <TableAction

apps/web-antd/src/views/iot/ota/firmware/index.vue

@@ -22,7 +22,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function handleRefresh() {
+function onRefresh() {
   gridApi.query();
 }
 
@@ -52,7 +52,7 @@ async function handleDelete(row: IoTOtaFirmwareApi.Firmware) {
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
-    handleRefresh();
+    onRefresh();
   } finally {
     hideLoading();
   }
@@ -91,7 +91,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormModal @success="onRefresh" />
     <Grid table-title="固件列表">
       <template #toolbar-tools>
         <TableAction

apps/web-antd/src/views/iot/ota/index.vue

@@ -21,7 +21,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function handleRefresh() {
+function onRefresh() {
   gridApi.query();
 }
 
@@ -46,7 +46,7 @@ async function handleDelete(row: IoTOtaFirmwareApi.Firmware) {
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
-    handleRefresh();
+    onRefresh();
   } finally {
     hideLoading();
   }
@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormModal @success="onRefresh" />
     <Grid table-title="OTA 固件列表">
       <template #toolbar-tools>
         <TableAction

apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue

@@ -237,12 +237,10 @@ defineExpose({
   .product-card {
     height: 100%;
     overflow: hidden;
-    border: 1px solid #e8e8e8;
     border-radius: 8px;
     transition: all 0.3s ease;
 
     &:hover {
-      border-color: #d9d9d9;
       box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
       transform: translateY(-2px);
     }
@@ -273,7 +271,6 @@ defineExpose({
       font-size: 16px;
       font-weight: 600;
       line-height: 1.5;
-      color: #1f2937;
       white-space: nowrap;
     }
 
@@ -292,14 +289,13 @@ defineExpose({
         .info-label {
           flex-shrink: 0;
           margin-right: 8px;
-          color: #6b7280;
+          opacity: 0.65;
         }
 
         .info-value {
           overflow: hidden;
           text-overflow: ellipsis;
           font-weight: 500;
-          color: #1f2937;
           white-space: nowrap;
 
           &.text-primary {
@@ -315,9 +311,9 @@ defineExpose({
           font-family: 'Courier New', monospace;
           font-size: 12px;
           vertical-align: middle;
-          color: #374151;
           white-space: nowrap;
           cursor: help;
+          opacity: 0.85;
         }
 
         .info-tag {
@@ -337,6 +333,7 @@ defineExpose({
       color: #667eea;
       background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
       border-radius: 8px;
+      opacity: 0.8;
     }
 
     // 按钮组
@@ -345,7 +342,7 @@ defineExpose({
       gap: 8px;
       padding-top: 12px;
       margin-top: auto;
-      border-top: 1px solid #f0f0f0;
+      border-top: 1px solid var(--ant-color-split);
 
       .action-btn {
         flex: 1;
@@ -392,4 +389,38 @@ defineExpose({
     }
   }
 }
+
+// 夜间模式适配
+html.dark {
+  .product-card-view {
+    .product-card {
+      &:hover {
+        box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
+      }
+
+      .product-title {
+        color: rgb(255 255 255 / 85%);
+      }
+
+      .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-3d-icon {
+        color: #8b9cff;
+        background: linear-gradient(135deg, #667eea25 0%, #764ba225 100%);
+      }
+    }
+  }
+}
 </style>

apps/web-antd/src/views/iot/product/product/modules/ProductForm.vue

@@ -65,12 +65,12 @@ const [Modal, modalApi] = useVbenModal({
     if (!basicValid) {
       return;
     }
-    
+
     modalApi.lock();
     try {
       // 提交表单 - 合并两个表单的值
       const basicValues = await formApi.getValues();
-      
+
       // 如果折叠面板展开，则获取高级表单的值，否则保留原有值（编辑时）或使用空值（新增时）
       let advancedValues: any = {};
       if (activeKey.value.includes('advanced')) {
@@ -83,12 +83,12 @@ const [Modal, modalApi] = useVbenModal({
           description: formData.value.description,
         };
       }
-      
+
       const values = { ...basicValues, ...advancedValues } as IotProductApi.Product;
       const data = formData.value?.id
         ? { ...values, id: formData.value.id }
         : values;
-      
+
       await (formData.value?.id ? updateProduct(data) : createProduct(data));
       // 关闭并提示
       await modalApi.close();
@@ -123,14 +123,14 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = await getProduct(data.id);
       // 设置基础表单
       await formApi.setValues(formData.value);
-      
+
       // 先设置高级表单的值（不等待）
       advancedFormApi.setValues({
         icon: formData.value.icon,
         picUrl: formData.value.picUrl,
         description: formData.value.description,
       });
-      
+
       // 如果有图标、图片或描述，自动展开折叠面板以便显示
       if (formData.value.icon || formData.value.picUrl || formData.value.description) {
         activeKey.value = ['advanced'];
@@ -151,9 +151,6 @@ const [Modal, modalApi] = useVbenModal({
       <Form />
       <Collapse v-model:active-key="activeKey" class="mt-4">
         <CollapsePanel key="advanced" header="更多设置">
-          <template #extra>
-            <span class="text-gray-500">📷</span>
-          </template>
           <AdvancedForm />
         </CollapsePanel>
       </Collapse>

apps/web-antd/src/views/iot/product/product/modules/detail/ProductDetailsInfo.vue

@@ -23,7 +23,7 @@ const formatDate = (date?: Date | string) => {
 
 <template>
   <Card title="产品信息">
-    <Descriptions bordered :column="3">
+    <Descriptions bordered :column="3" size="small">
       <Descriptions.Item label="产品名称">
         {{ product.name }}
       </Descriptions.Item>

apps/web-antd/src/views/iot/rule/data/index.vue

@@ -21,7 +21,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function handleRefresh() {
+function onRefresh() {
   gridApi.query();
 }
 
@@ -46,7 +46,7 @@ async function handleDelete(row: any) {
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
-    handleRefresh();
+    onRefresh();
   } finally {
     hideLoading();
   }
@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormModal @success="onRefresh" />
     <Grid table-title="数据规则列表">
       <template #toolbar-tools>
         <TableAction

apps/web-antd/src/views/iot/rule/data/rule/index.vue

@@ -21,7 +21,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function handleRefresh() {
+function onRefresh() {
   gridApi.query();
 }
 
@@ -46,7 +46,7 @@ async function handleDelete(row: any) {
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
-    handleRefresh();
+    onRefresh();
   } finally {
     hideLoading();
   }
@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormModal @success="onRefresh" />
     <Grid table-title="数据规则列表">
       <template #toolbar-tools>
         <TableAction

apps/web-antd/src/views/iot/rule/data/sink/index.vue

@@ -21,7 +21,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function handleRefresh() {
+function onRefresh() {
   gridApi.query();
 }
 
@@ -46,7 +46,7 @@ async function handleDelete(row: any) {
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
-    handleRefresh();
+    onRefresh();
   } finally {
     hideLoading();
   }
@@ -85,7 +85,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormModal @success="onRefresh" />
     <Grid table-title="数据目的列表">
       <template #toolbar-tools>
         <TableAction

apps/web-antd/src/views/iot/rule/scene/index.vue

@@ -25,7 +25,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 /** 刷新表格 */
-function handleRefresh() {
+function onRefresh() {
   gridApi.query();
 }
 
@@ -51,7 +51,7 @@ async function handleToggleStatus(row: RuleSceneApi.SceneRule) {
     message.success({
       content: newStatus === 0 ? '启用成功' : '停用成功',
     });
-    handleRefresh();
+    onRefresh();
   } finally {
     hideLoading();
   }
@@ -68,7 +68,7 @@ async function handleDelete(row: RuleSceneApi.SceneRule) {
     message.success({
       content: $t('ui.actionMessage.deleteSuccess', [row.name]),
     });
-    handleRefresh();
+    onRefresh();
   } finally {
     hideLoading();
   }
@@ -107,7 +107,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Page auto-content-height>
-    <FormModal @success="handleRefresh" />
+    <FormModal @success="onRefresh" />
     <Grid table-title="场景规则列表">
       <template #toolbar-tools>
         <TableAction

apps/web-antd/src/views/iot/thingmodel/data.ts

@@ -15,6 +15,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
         options: getDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE, 'number'),
         placeholder: '请选择功能类型',
         allowClear: true,
+
       },
     },
   ];
@@ -27,7 +28,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'type',
       title: '功能类型',
-      minWidth: 100,
+      minWidth: 20,
       cellRender: {
         name: 'CellDict',
         props: { type: DICT_TYPE.IOT_THING_MODEL_TYPE },
@@ -41,17 +42,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
     {
       field: 'identifier',
       title: '标识符',
-      minWidth: 150,
+      minWidth: 20,
     },
     {
       field: 'dataType',
       title: '数据类型',
-      minWidth: 120,
+      minWidth: 50,
       slots: { default: 'dataType' },
     },
     {
-      field: 'dataDefinition',
-      title: '数据定义',
+      field: 'property',
+      title: '属性',
       minWidth: 200,
       slots: { default: 'dataDefinition' },
     },

apps/web-antd/src/views/iot/thingmodel/index.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { ThingModelApi } from '#/api/iot/thingmodel';
+import { onMounted, provide, ref } from 'vue';
 
+import { message } from 'ant-design-vue';
 import { Page } from '@vben/common-ui';
-import { IconifyIcon } from '@vben/icons';
 
-import { Button, message } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteThingModel, getThingModelPage } from '#/api/iot/thingmodel';
+import { getProduct } from '#/api/iot/product/product';
+import type { IotProductApi } from '#/api/iot/product/product';
 
-import { getDataTypeOptionsLabel } from '../utils/constants';
 import { useGridColumns, useGridFormSchema } from './data';
+import { getDataTypeOptionsLabel, IOT_PROVIDE_KEY } from '../utils/constants';
+import ThingModelForm from './modules/ThingModelForm.vue';
+import ThingModelTSL from './modules/ThingModelTSL.vue';
+import { DataDefinition } from './modules/components';
 
 defineOptions({ name: 'IoTThingModel' });
 
@@ -19,6 +21,16 @@ const props = defineProps<{
   productId: number;
 }>();
 
+// 产品信息
+const product = ref<IotProductApi.Product>({} as IotProductApi.Product);
+
+// 提供产品信息给子组件
+provide(IOT_PROVIDE_KEY.PRODUCT, product);
+
+// 组件引用
+const thingModelFormRef = ref();
+const thingModelTSLRef = ref();
+
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
     columns: useGridColumns(),
@@ -26,12 +38,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     keepSource: true,
     proxyConfig: {
       ajax: {
-        query: async ({ page, form }) => {
+        query: async ({ page }: any, formValues: any) => {
           return await getThingModelPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
             productId: props.productId,
-            ...form,
+            ...formValues,
           });
         },
       },
@@ -44,7 +56,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-  } as VxeTableGridOptions<ThingModelApi.ThingModel>,
+  },
   formOptions: {
     schema: useGridFormSchema(),
   },
@@ -52,14 +64,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 // 新增功能
 const handleCreate = () => {
-  // TODO: 打开物模型表单
-  console.error('新增功能');
+  thingModelFormRef.value?.open('create');
 };
 
 // 编辑功能
 const handleEdit = (row: any) => {
-  // TODO: 打开物模型表单
-  console.error('编辑功能:', row);
+  thingModelFormRef.value?.open('update', row.id);
 };
 
 // 删除功能
@@ -75,28 +85,58 @@ const handleDelete = async (row: any) => {
 
 // 打开 TSL
 const handleOpenTSL = () => {
-  // TODO: 打开 TSL 弹窗
-  console.error('打开 TSL');
+  thingModelTSLRef.value?.open();
 };
 
 // 获取数据类型标签
 const getDataTypeLabel = (row: any) => {
   return getDataTypeOptionsLabel(row.property?.dataType) || '-';
 };
+
+// 刷新表格
+const handleRefresh = () => {
+  gridApi.reload();
+};
+
+// 获取产品信息
+const getProductData = async () => {
+  try {
+    product.value = await getProduct(props.productId);
+  } catch (error) {
+    console.error('获取产品信息失败:', error);
+  }
+};
+
+// 初始化
+onMounted(async () => {
+  await getProductData();
+});
 </script>
 
 <template>
   <Page
+    auto-content-height
     description="管理产品的物模型定义，包括属性、服务和事件"
     title="物模型管理"
   >
-    <Grid>
+    <Grid ref="xGrid">
       <template #toolbar-tools>
-        <Button @click="handleCreate">
-          <IconifyIcon icon="ant-design:plus-outlined" class="mr-1" />
-          添加功能
-        </Button>
-        <Button type="primary" @click="handleOpenTSL"> TSL </Button>
+        <TableAction
+          :actions="[
+            {
+              label: '添加功能',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              onClick: handleCreate,
+            },
+            {
+              label: 'TSL',
+              type: 'default',
+              color: 'success',
+              onClick: handleOpenTSL,
+            },
+          ]"
+        />
       </template>
 
       <!-- 数据类型列 -->
@@ -106,17 +146,38 @@ const getDataTypeLabel = (row: any) => {
 
       <!-- 数据定义列 -->
       <template #dataDefinition="{ row }">
-        <!-- TODO: 实现数据定义组件 -->
-        <span class="text-gray-400">{{ row }}</span>
+        <DataDefinition :data="row" />
       </template>
 
       <!-- 操作列 -->
       <template #actions="{ row }">
-        <Button size="small" type="primary" @click="handleEdit(row)">
-          编辑
-        </Button>
-        <Button size="small" danger @click="handleDelete(row)"> 删除 </Button>
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              popConfirm: {
+                title: '确认删除该功能吗?',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
+
+    <!-- 物模型表单 -->
+    <ThingModelForm ref="thingModelFormRef" @success="handleRefresh" />
+
+    <!-- TSL 弹窗 -->
+    <ThingModelTSL ref="thingModelTSLRef" />
   </Page>
 </template>

apps/web-antd/src/views/iot/thingmodel/modules/ThingModelEvent.vue

@@ -2,8 +2,6 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import type { ThingModelEvent } from '#/api/iot/thingmodel';
-
 import { watch } from 'vue';
 
 import { isEmpty } from '@vben/utils';
@@ -27,7 +25,7 @@ const thingModelEvent = useVModel(
   props,
   'modelValue',
   emits,
-) as Ref<ThingModelEvent>;
+) as Ref<any>;
 
 // 默认选中，INFO 信息
 watch(
@@ -43,9 +41,9 @@ watch(
   <Form.Item
     :rules="[{ required: true, message: '请选择事件类型', trigger: 'change' }]"
     label="事件类型"
-    prop="event.type"
+    name="event.type"
   >
-    <Radio.Group v-model="thingModelEvent.type">
+    <Radio.Group v-model:value="thingModelEvent.type">
       <Radio
         v-for="eventType in Object.values(IoTThingModelEventTypeEnum)"
         :key="eventType.value"
@@ -57,7 +55,7 @@ watch(
   </Form.Item>
   <Form.Item label="输出参数">
     <ThingModelInputOutputParam
-      v-model="thingModelEvent.outputData"
+      v-model="thingModelEvent.outputParams"
       :direction="IoTThingModelParamDirectionEnum.OUTPUT"
     />
   </Form.Item>

apps/web-antd/src/views/iot/thingmodel/modules/ThingModelForm.vue

@@ -12,7 +12,7 @@ import { getDictOptions } from '@vben/hooks';
 import { $t } from '@vben/locales';
 import { cloneDeep } from '@vben/utils';
 
-import { Button, Form, Input, message, Radio } from 'ant-design-vue';
+import { Form, Input, message, Modal, Radio } from 'ant-design-vue';
 
 import {
   createThingModel,
@@ -40,8 +40,8 @@ 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.toString(),
+const formData = ref<any>({
+  type: IoTThingModelTypeEnum.PROPERTY,
   dataType: IoTDataSpecsDataTypeEnum.INT,
   property: {
     dataType: IoTDataSpecsDataTypeEnum.INT,
@@ -49,8 +49,13 @@ const formData = ref<ThingModelData>({
       dataType: IoTDataSpecsDataTypeEnum.INT,
     },
   },
-  service: {},
-  event: {},
+  service: {
+    inputParams: [],
+    outputParams: [],
+  },
+  event: {
+    outputParams: [],
+  },
 });
 
 const formRef = ref(); // 表单 Ref
@@ -58,13 +63,19 @@ const formRef = ref(); // 表单 Ref
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true;
-  dialogTitle.value = $t(`action.${type}`);
+  // 设置标题：create -> 新增，update -> 编辑
+  dialogTitle.value = type === 'create' ? $t('page.action.add') : $t('page.action.edit');
   formType.value = type;
   resetForm();
   if (id) {
     formLoading.value = true;
     try {
-      formData.value = await getThingModel(id);
+      const result = await getThingModel(id);
+      // 转换类型为数字
+      formData.value = {
+        ...result,
+        type: Number(result.type),
+      };
       // 情况一：属性初始化
       if (
         !formData.value.property ||
@@ -77,20 +88,50 @@ const open = async (type: string, id?: number) => {
             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 = {};
+        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 = {};
+        formData.value.event = {
+          outputParams: [],
+        };
+      } else {
+        // 确保参数数组存在
+        if (!formData.value.event.outputParams) {
+          formData.value.event.outputParams = [];
+        }
       }
     } finally {
       formLoading.value = false;
@@ -137,6 +178,13 @@ function fillExtraAttributes(data: any) {
     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;
   }
@@ -146,6 +194,10 @@ function fillExtraAttributes(data: any) {
     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;
   }
@@ -164,7 +216,7 @@ function removeDataSpecs(val: any) {
 /** 重置表单 */
 function resetForm() {
   formData.value = {
-    type: IoTThingModelTypeEnum.PROPERTY.toString(),
+    type: IoTThingModelTypeEnum.PROPERTY,
     dataType: IoTDataSpecsDataTypeEnum.INT,
     property: {
       dataType: IoTDataSpecsDataTypeEnum.INT,
@@ -172,18 +224,27 @@ function resetForm() {
         dataType: IoTDataSpecsDataTypeEnum.INT,
       },
     },
-    service: {},
-    event: {},
+    service: {
+      inputParams: [],
+      outputParams: [],
+    },
+    event: {
+      outputParams: [],
+    },
   };
   formRef.value?.resetFields();
 }
 </script>
 
 <template>
-  <Modal v-model="dialogVisible" :title="dialogTitle">
+  <Modal
+    v-model:open="dialogVisible"
+    :title="dialogTitle"
+    :confirm-loading="formLoading"
+    @ok="submitForm"
+  >
     <Form
       ref="formRef"
-      :loading="formLoading"
       :model="formData"
       :label-col="{ span: 6 }"
       :wrapper-col="{ span: 18 }"
@@ -191,12 +252,9 @@ function resetForm() {
       <Form.Item label="功能类型" name="type">
         <Radio.Group v-model:value="formData.type">
           <Radio.Button
-            v-for="(dict, index) in getDictOptions(
-              DICT_TYPE.IOT_THING_MODEL_TYPE,
-              'number',
-            )"
-            :key="index"
-            :value="dict.value"
+            v-for="dict in getDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE)"
+            :key="String(dict.value)"
+            :value="Number(dict.value)"
           >
             {{ dict.label }}
           </Radio.Button>
@@ -210,17 +268,17 @@ function resetForm() {
       </Form.Item>
       <!-- 属性配置 -->
       <ThingModelProperty
-        v-if="formData.type === IoTThingModelTypeEnum.PROPERTY.toString()"
+        v-if="formData.type === IoTThingModelTypeEnum.PROPERTY"
         v-model="formData.property"
       />
       <!-- 服务配置 -->
       <ThingModelService
-        v-if="formData.type === IoTThingModelTypeEnum.SERVICE.toString()"
+        v-if="formData.type === IoTThingModelTypeEnum.SERVICE"
         v-model="formData.service"
       />
       <!-- 事件配置 -->
       <ThingModelEvent
-        v-if="formData.type === IoTThingModelTypeEnum.EVENT.toString()"
+        v-if="formData.type === IoTThingModelTypeEnum.EVENT"
         v-model="formData.event"
       />
       <Form.Item label="描述" name="desc">
@@ -232,12 +290,5 @@ function resetForm() {
         />
       </Form.Item>
     </Form>
-
-    <template #footer>
-      <Button :disabled="formLoading" type="primary" @click="submitForm">
-        确 定
-      </Button>
-      <Button @click="dialogVisible = false">取 消</Button>
-    </template>
   </Modal>
 </template>

apps/web-antd/src/views/iot/thingmodel/modules/ThingModelInputOutputParam.vue

@@ -29,6 +29,7 @@ const formData = ref<any>({
     dataSpecs: {
       dataType: IoTDataSpecsDataTypeEnum.INT,
     },
+    dataSpecsList: [],
   },
 });
 
@@ -40,16 +41,22 @@ function openParamForm(val: any) {
     return;
   }
   // 编辑时回显数据
+  const valData = val as any;
   formData.value = {
-    identifier: val.identifier,
-    name: val.name,
-    description: val.description,
+    identifier: valData?.identifier || '',
+    name: valData?.name || '',
+    description: valData?.description || '',
     property: {
-      dataType: val.dataType,
-      dataSpecs: val.dataSpecs,
-      dataSpecsList: val.dataSpecsList,
+      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 项 */
@@ -108,6 +115,7 @@ function resetForm() {
       dataSpecs: {
         dataType: IoTDataSpecsDataTypeEnum.INT,
       },
+      dataSpecsList: [],
     },
   };
   paramFormRef.value?.resetFields();
@@ -122,35 +130,34 @@ function resetForm() {
   >
     <span>参数名称：{{ item.name }}</span>
     <div class="btn">
-      <Button link type="primary" @click="openParamForm(item)"> 编辑 </Button>
-      <Divider direction="vertical" />
-      <Button link danger @click="deleteParamItem(index)"> 删除 </Button>
+      <Button type="link" @click="openParamForm(item)">编辑</Button>
+      <Divider type="vertical" />
+      <Button type="link" danger @click="deleteParamItem(index)">删除</Button>
     </div>
   </div>
-  <Button link type="primary" @click="openParamForm(null)"> +新增参数 </Button>
+  <Button type="link" @click="openParamForm(null)">+新增参数</Button>
 
   <!-- param 表单 -->
-  <Modal v-model="dialogVisible" title="新增参数" append-to-body>
+  <Modal
+    v-model:open="dialogVisible"
+    title="新增参数"
+    :confirm-loading="formLoading"
+    @ok="submitForm"
+  >
     <Form
       ref="paramFormRef"
-      v-loading="formLoading"
       :model="formData"
-      label-width="100px"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
     >
-      <Form.Item label="参数名称" prop="name">
-        <Input v-model="formData.name" placeholder="请输入功能名称" />
+      <Form.Item label="参数名称" name="name">
+        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
       </Form.Item>
-      <Form.Item label="标识符" prop="identifier">
-        <Input v-model="formData.identifier" placeholder="请输入标识符" />
+      <Form.Item label="标识符" name="identifier">
+        <Input v-model:value="formData.identifier" placeholder="请输入标识符" />
       </Form.Item>
       <!-- 属性配置 -->
       <ThingModelProperty v-model="formData.property" is-params />
     </Form>
-    <template #footer>
-      <Button :disabled="formLoading" type="primary" @click="submitForm">
-        确 定
-      </Button>
-      <Button @click="dialogVisible = false">取 消</Button>
-    </template>
   </Modal>
 </template>

apps/web-antd/src/views/iot/thingmodel/modules/ThingModelProperty.vue

@@ -11,7 +11,6 @@ import { isEmpty } from '@vben/utils';
 import { useVModel } from '@vueuse/core';
 import { Form, Input, Radio, Select } from 'ant-design-vue';
 
-import { validateBoolName } from '#/api/iot/thingmodel';
 import {
   getDataTypeOptions,
   IoTDataSpecsDataTypeEnum,
@@ -43,13 +42,8 @@ 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 excludedTypes = [IoTDataSpecsDataTypeEnum.STRUCT, IoTDataSpecsDataTypeEnum.ARRAY];
+  return getDataTypeOptions().filter((item: any) => !excludedTypes.includes(item.value));
 }); // 获得数据类型列表
 
 /** 属性值的数据类型切换时初始化相关数据 */
@@ -58,11 +52,19 @@ function handleChange(dataType: any) {
   property.value.dataSpecsList = [];
   // 不是列表型数据才设置 dataSpecs.dataType
   ![
-    IoTDataSpecsDataTypeEnum.BOOL,
     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({
@@ -73,15 +75,8 @@ function handleChange(dataType: any) {
       }
       break;
     }
-    case IoTDataSpecsDataTypeEnum.ENUM: {
-      property.value.dataSpecsList.push({
-        dataType: IoTDataSpecsDataTypeEnum.ENUM,
-        name: '', // 枚举项的名称
-        value: undefined, // 枚举值
-      });
-      break;
-    }
   }
+  // useVModel 会自动同步数据到父组件，不需要手动 emit
 }
 
 /** 默认选中读写 */
@@ -91,9 +86,9 @@ watch(
     if (props.isStructDataSpecs || props.isParams) {
       return;
     }
-    isEmpty(val) &&
-      (property.value.accessMode =
-        IoTThingModelAccessModeEnum.READ_WRITE.value);
+    if (isEmpty(val)) {
+      property.value.accessMode = IoTThingModelAccessModeEnum.READ_WRITE.value;
+    }
   },
   { immediate: true },
 );
@@ -101,12 +96,10 @@ watch(
 
 <template>
   <Form.Item
-    :rules="[{ required: true, message: '请选择数据类型', trigger: 'change' }]"
     label="数据类型"
-    prop="property.dataType"
   >
     <Select
-      v-model="property.dataType"
+      v-model:value="property.dataType"
       placeholder="请选择数据类型"
       @change="handleChange"
     >
@@ -114,9 +107,10 @@ watch(
       <Select.Option
         v-for="option in getDataTypeOptions2"
         :key="option.value"
-        :label="`${option.value}(${option.label})`"
         :value="option.value"
-      />
+      >
+        {{ `${option.value}(${option.label})` }}
+      </Select.Option>
     </Select>
   </Form.Item>
   <!-- 数值型配置 -->
@@ -140,24 +134,17 @@ watch(
     v-if="property.dataType === IoTDataSpecsDataTypeEnum.BOOL"
     label="布尔值"
   >
-    <template v-for="(item, index) in property.dataSpecsList" :key="item.value">
-      <div class="w-1/1 mb-5px flex items-center justify-start">
+    <template v-for="item in property.dataSpecsList" :key="item.value">
+      <div class="flex items-center justify-start w-1/1 mb-5px">
         <span>{{ item.value }}</span>
         <span class="mx-2">-</span>
-        <Form.Item
-          :prop="`property.dataSpecsList[${index}].name`"
-          :rules="[
-            { required: true, message: '枚举描述不能为空' },
-            { validator: validateBoolName, trigger: 'blur' },
-          ]"
-          class="mb-0 flex-1"
-        >
+        <div class="flex-1">
           <Input
-            v-model="item.name"
+            v-model:value="item.name"
             :placeholder="`如：${item.value === 0 ? '关' : '开'}`"
             class="w-255px!"
           />
-        </Form.Item>
+        </div>
       </div>
     </template>
   </Form.Item>
@@ -165,21 +152,21 @@ watch(
   <Form.Item
     v-if="property.dataType === IoTDataSpecsDataTypeEnum.TEXT"
     label="数据长度"
-    prop="property.dataSpecs.length"
+    name="property.dataSpecs.length"
   >
     <Input
-      v-model="property.dataSpecs.length"
+      v-model:value="property.dataSpecs.length"
       class="w-255px!"
       placeholder="请输入文本字节长度"
     >
-      <template #append>字节</template>
+      <template #addonAfter>字节</template>
     </Input>
   </Form.Item>
   <!-- 时间型配置 -->
   <Form.Item
     v-if="property.dataType === IoTDataSpecsDataTypeEnum.DATE"
     label="时间格式"
-    prop="date"
+    name="date"
   >
     <Input
       class="w-255px!"
@@ -200,13 +187,13 @@ watch(
   <Form.Item
     v-if="!isStructDataSpecs && !isParams"
     label="读写类型"
-    prop="property.accessMode"
+    name="property.accessMode"
   >
-    <Radio.Group v-model="property.accessMode">
+    <Radio.Group v-model:value="property.accessMode">
       <Radio
         v-for="accessMode in Object.values(IoTThingModelAccessModeEnum)"
         :key="accessMode.value"
-        :label="accessMode.value"
+        :value="accessMode.value"
       >
         {{ accessMode.label }}
       </Radio>

apps/web-antd/src/views/iot/thingmodel/modules/ThingModelService.vue

@@ -2,8 +2,6 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import type { ThingModelService } from '#/api/iot/thingmodel';
-
 import { watch } from 'vue';
 
 import { isEmpty } from '@vben/utils';
@@ -23,7 +21,7 @@ defineOptions({ name: 'ThingModelService' });
 
 const props = defineProps<{ isStructDataSpecs?: boolean; modelValue: any }>();
 const emits = defineEmits(['update:modelValue']);
-const service = useVModel(props, 'modelValue', emits) as Ref<ThingModelService>;
+const service = useVModel(props, 'modelValue', emits) as Ref<any>;
 
 /** 默认选中，ASYNC 异步 */
 watch(
@@ -39,9 +37,9 @@ watch(
   <Form.Item
     :rules="[{ required: true, message: '请选择调用方式', trigger: 'change' }]"
     label="调用方式"
-    prop="service.callType"
+    name="service.callType"
   >
-    <Radio.Group v-model="service.callType">
+    <Radio.Group v-model:value="service.callType">
       <Radio
         v-for="callType in Object.values(IoTThingModelServiceCallTypeEnum)"
         :key="callType.value"
@@ -53,13 +51,13 @@ watch(
   </Form.Item>
   <Form.Item label="输入参数">
     <ThingModelInputOutputParam
-      v-model="service.inputData"
+      v-model="service.inputParams"
       :direction="IoTThingModelParamDirectionEnum.INPUT"
     />
   </Form.Item>
   <Form.Item label="输出参数">
     <ThingModelInputOutputParam
-      v-model="service.outputData"
+      v-model="service.outputParams"
       :direction="IoTThingModelParamDirectionEnum.OUTPUT"
     />
   </Form.Item>

apps/web-antd/src/views/iot/thingmodel/modules/ThingModelTSL.vue

@@ -3,58 +3,115 @@ import type { Ref } from 'vue';
 
 import type { IotProductApi } from '#/api/iot/product/product';
 
-import { inject, onMounted, ref } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 
-import { Modal, Radio } from 'ant-design-vue';
-import hljs from 'highlight.js'; // 导入代码高亮文件
-import json from 'highlight.js/lib/languages/json';
+import { Modal, Radio, Textarea } from 'ant-design-vue';
 
-import { getThingModelListByProductId } from '#/api/iot/thingmodel';
+import { getThingModelTSL } 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<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息
-const viewMode = ref('code'); // 查看模式：code-代码视图，editor-编辑器视图
+const viewMode = ref('view'); // 查看模式：view-代码视图，editor-编辑器视图
 
 /** 打开弹窗 */
-function open() {
+const open = async () => {
   dialogVisible.value = true;
-}
+  await getTsl();
+};
 defineExpose({ open });
 
 /** 获取 TSL */
-const thingModelTSL = ref({});
-async function getTsl() {
-  thingModelTSL.value = await getThingModelListByProductId(
-    product?.value?.id || 0,
-  );
-}
+const thingModelTSL = ref<any>({});
+const tslString = ref(''); // 用于编辑器的字符串格式
 
-/** 初始化 */
-onMounted(async () => {
-  // 注册代码高亮的各种语言
-  hljs.registerLanguage('json', json);
-  await getTsl();
+const getTsl = async () => {
+  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="dialogVisible" :title="dialogTitle">
-    <JsonEditor
-      v-model="thingModelTSL"
-      :mode="viewMode === 'editor' ? 'code' : 'view'"
-      height="600px"
-    />
-    <template #footer>
-      <Radio.Group v-model="viewMode" size="small">
-        <Radio.Button label="code">代码视图</Radio.Button>
-        <Radio.Button label="editor">编辑器视图</Radio.Button>
+  <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>
-    </template>
+    </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 {
+  background-color: #f5f5f5;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  padding: 12px;
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.json-code {
+  margin: 0;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #333;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.json-editor {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
+  font-size: 13px;
+}
+</style>

apps/web-antd/src/views/iot/thingmodel/modules/components/DataDefinition.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import type { ThingModelData } from '#/api/iot/thingmodel';
 
+import { computed } from 'vue';
+
+import { Tooltip } from 'ant-design-vue';
+
 import {
   getEventTypeLabel,
   getThingModelServiceCallTypeLabel,
@@ -11,12 +15,32 @@ import {
 /** 数据定义展示组件 */
 defineOptions({ name: 'DataDefinition' });
 
-defineProps<{ data: ThingModelData }>();
+const props = defineProps<{ data: ThingModelData }>();
+
+// 格式化布尔值和枚举值列表为字符串
+const formattedDataSpecsList = computed(() => {
+  if (!props.data.property?.dataSpecsList || props.data.property.dataSpecsList.length === 0) {
+    return '';
+  }
+  return props.data.property.dataSpecsList
+    .map(item => `${item.value}-${item.name}`)
+    .join('、');
+});
+
+// 显示的简短文本（第一个值）
+const shortText = computed(() => {
+  if (!props.data.property?.dataSpecsList || props.data.property.dataSpecsList.length === 0) {
+    return '-';
+  }
+  const first = props.data.property.dataSpecsList[0];
+  const count = props.data.property.dataSpecsList.length;
+  return count > 1 ? `${first.value}-${first.name} 等${count}项` : `${first.value}-${first.name}`;
+});
 </script>
 
 <template>
   <!-- 属性 -->
-  <template v-if="data.type === IoTThingModelTypeEnum.PROPERTY.toString()">
+  <template v-if="Number(data.type) === IoTThingModelTypeEnum.PROPERTY">
     <!-- 非列表型：数值 -->
     <div
       v-if="
@@ -28,12 +52,12 @@ defineProps<{ data: ThingModelData }>();
       "
     >
       取值范围：{{
-        `${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">
-      数据长度：{{ data.property?.dataSpecs.length }}
+      数据长度：{{ data.property?.dataSpecs?.length }}
     </div>
     <!-- 列表型: 数组、结构、时间（特殊） -->
     <div
@@ -55,28 +79,37 @@ defineProps<{ data: ThingModelData }>();
         )
       "
     >
-      <div>
-        {{
-          IoTDataSpecsDataTypeEnum.BOOL === data.property?.dataType
-            ? '布尔值'
-            : '枚举值'
-        }}：
-      </div>
-      <div v-for="item in data.property?.dataSpecsList" :key="item.value">
-        {{ `${item.name}-${item.value}` }}
-      </div>
+      <Tooltip :title="formattedDataSpecsList" placement="topLeft">
+        <span class="data-specs-text">
+          {{
+            IoTDataSpecsDataTypeEnum.BOOL === data.property?.dataType
+              ? '布尔值'
+              : '枚举值'
+          }}：{{ shortText }}
+        </span>
+      </Tooltip>
     </div>
   </template>
   <!-- 服务 -->
-  <div v-if="data.type === IoTThingModelTypeEnum.SERVICE.toString()">
+  <div v-if="Number(data.type) === IoTThingModelTypeEnum.SERVICE">
     调用方式：{{
       getThingModelServiceCallTypeLabel(data.service?.callType as any)
     }}
   </div>
   <!-- 事件 -->
-  <div v-if="data.type === IoTThingModelTypeEnum.EVENT.toString()">
+  <div v-if="Number(data.type) === IoTThingModelTypeEnum.EVENT">
     事件类型：{{ getEventTypeLabel(data.event?.type as any) }}
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.data-specs-text {
+  cursor: help;
+  border-bottom: 1px dashed #d9d9d9;
+
+  &:hover {
+    border-bottom-color: #1890ff;
+    color: #1890ff;
+  }
+}
+</style>

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelArrayDataSpecs.vue

@@ -29,8 +29,8 @@ function handleChange(val: any) {
 </script>
 
 <template>
-  <Form.Item label="元素类型" prop="property.dataSpecs.childDataType">
-    <Radio.Group v-model="dataSpecs.childDataType" @change="handleChange">
+  <Form.Item label="元素类型" name="property.dataSpecs.childDataType">
+    <Radio.Group v-model:value="dataSpecs.childDataType" @change="handleChange">
       <template v-for="item in getDataTypeOptions()" :key="item.value">
         <Radio
           v-if="
@@ -50,8 +50,8 @@ function handleChange(val: any) {
       </template>
     </Radio.Group>
   </Form.Item>
-  <Form.Item label="元素个数" prop="property.dataSpecs.size">
-    <Input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
+  <Form.Item label="元素个数" name="property.dataSpecs.size">
+    <Input v-model:value="dataSpecs.size" placeholder="请输入数组中的元素个数" />
   </Form.Item>
   <!-- Struct 型配置-->
   <ThingModelStructDataSpecs

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelEnumDataSpecs.vue

@@ -2,31 +2,22 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
-import type { DataSpecsEnumOrBoolData } from '#/api/iot/thingmodel';
-
-import { isEmpty } from '@vben/utils';
-
 import { useVModel } from '@vueuse/core';
 import { Button, Form, Input, message } from 'ant-design-vue';
 
-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 dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<any[]>;
 
 /** 添加枚举项 */
 function addEnum() {
   dataSpecsList.value.push({
-    dataType: IoTDataSpecsDataTypeEnum.ENUM,
     name: '', // 枚举项的名称
     value: '', // 枚举值
-  });
+  } as any);
 }
 
 /** 删除枚举项 */
@@ -38,92 +29,10 @@ function deleteEnum(index: number) {
   dataSpecsList.value.splice(index, 1);
 }
 
-/** 校验枚举值 */
-function validateEnumValue(_: any, value: any, callback: any) {
-  if (isEmpty(value)) {
-    callback(new Error('枚举值不能为空'));
-    return;
-  }
-  if (Number.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();
-}
-
-/** 校验枚举描述 */
-function 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();
-}
-
-/** 校验整个枚举列表 */
-function 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) =>
-    Number.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>
-  <Form.Item
-    :rules="[
-      { required: true, validator: validateEnumList, trigger: 'change' },
-    ]"
-    label="枚举项"
-  >
+  <Form.Item label="枚举项">
     <div class="flex flex-col">
       <div class="flex items-center">
         <span class="flex-1"> 参数值 </span>
@@ -132,41 +41,27 @@ function validateEnumList(_: any, __: any, callback: any) {
       <div
         v-for="(item, index) in dataSpecsList"
         :key="index"
-        class="mb-5px flex items-center justify-between"
+        class="flex items-center justify-between mb-5px"
       >
-        <Form.Item
-          :prop="`property.dataSpecsList[${index}].value`"
-          :rules="[
-            { required: true, message: '枚举值不能为空' },
-            { validator: validateEnumValue, trigger: 'blur' },
-          ]"
-          class="mb-0 flex-1"
-        >
-          <Input v-model="item.value" placeholder="请输入枚举值,如'0'" />
-        </Form.Item>
+        <div class="flex-1">
+          <Input v-model:value="item.value" placeholder="请输入枚举值,如'0'" />
+        </div>
         <span class="mx-2">~</span>
-        <Form.Item
-          :prop="`property.dataSpecsList[${index}].name`"
-          :rules="[
-            { required: true, message: '枚举描述不能为空' },
-            { validator: validateEnumName, trigger: 'blur' },
-          ]"
-          class="mb-0 flex-1"
-        >
-          <Input v-model="item.name" placeholder="对该枚举项的描述" />
-        </Form.Item>
-        <Button class="ml-10px" link type="primary" @click="deleteEnum(index)">
+        <div class="flex-1">
+          <Input v-model:value="item.name" placeholder="对该枚举项的描述" />
+        </div>
+        <Button class="ml-10px" type="link" @click="deleteEnum(index)">
           删除
         </Button>
       </div>
-      <Button link type="primary" @click="addEnum">+添加枚举项</Button>
+      <Button type="link" @click="addEnum">+添加枚举项</Button>
     </div>
   </Form.Item>
 </template>
 
 <style lang="scss" scoped>
-:deep(.el-form-item) {
-  .el-form-item {
+:deep(.ant-form-item) {
+  .ant-form-item {
     margin-bottom: 0;
   }
 }

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelNumberDataSpecs.vue

@@ -1,14 +1,55 @@
 <!-- dataType：number 数组类型 -->
+<template>
+  <Form.Item label="取值范围">
+    <div class="flex items-center justify-between">
+      <div class="flex-1">
+        <Input v-model:value="dataSpecs.min" placeholder="请输入最小值" />
+      </div>
+      <span class="mx-2">~</span>
+      <div class="flex-1">
+        <Input v-model:value="dataSpecs.max" placeholder="请输入最大值" />
+      </div>
+    </div>
+  </Form.Item>
+  <Form.Item label="步长">
+    <Input v-model:value="dataSpecs.step" placeholder="请输入步长" />
+  </Form.Item>
+  <Form.Item label="单位">
+    <Select
+      :model-value="
+        dataSpecs.unit ? `${dataSpecs.unitName}-${dataSpecs.unit}` : ''
+      "
+      show-search
+      placeholder="请选择单位"
+      class="w-1/1"
+      @change="unitChange"
+    >
+      <Select.Option
+        v-for="(item, index) in getDictOptions(
+          DICT_TYPE.IOT_THING_MODEL_UNIT,
+          'string',
+        )"
+        :key="index"
+        :value="`${item.label}-${item.value}`"
+      >
+        {{ `${item.label}-${item.value}` }}
+      </Select.Option>
+    </Select>
+  </Form.Item>
+</template>
+
 <script lang="ts" setup>
 import type { Ref } from 'vue';
 
 import type { DataSpecsNumberData } from '#/api/iot/thingmodel';
 
+import { useVModel } from '@vueuse/core';
+
+import { Form, Input, Select } from 'ant-design-vue';
+
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
-import { useVModel } from '@vueuse/core';
-
 /** 数值型的 dataSpecs 配置组件 */
 defineOptions({ name: 'ThingModelNumberDataSpecs' });
 
@@ -21,132 +62,17 @@ const dataSpecs = useVModel(
 ) as Ref<DataSpecsNumberData>;
 
 /** 单位发生变化时触发 */
-const unitChange = (UnitSpecs: string) => {
-  const [unitName, unit] = UnitSpecs.split('-');
+const unitChange = (UnitSpecs: any) => {
+  if (!UnitSpecs) return;
+  const [unitName, unit] = String(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 (Number.isNaN(min)) {
-    callback(new Error('请输入有效的数值'));
-    return;
-  }
-  if (max !== undefined && !Number.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 (Number.isNaN(max)) {
-    callback(new Error('请输入有效的数值'));
-    return;
-  }
-  if (min !== undefined && !Number.isNaN(min) && max <= min) {
-    callback(new Error('最大值必须大于最小值'));
-    return;
-  }
-
-  callback();
-};
-
-/** 校验步长 */
-const validateStep = (_: any, __: any, callback: any) => {
-  const step = Number(dataSpecs.value.step);
-  if (Number.isNaN(step)) {
-    callback(new Error('请输入有效的数值'));
-    return;
-  }
-  if (step <= 0) {
-    callback(new Error('步长必须大于0'));
-    return;
-  }
-  const min = Number(dataSpecs.value.min);
-  const max = Number(dataSpecs.value.max);
-  if (!Number.isNaN(min) && !Number.isNaN(max) && step > max - min) {
-    callback(new Error('步长不能大于最大值和最小值的差值'));
-    return;
-  }
-
-  callback();
-};
 </script>
 
-<template>
-  <el-form-item label="取值范围">
-    <div class="flex items-center justify-between">
-      <el-form-item
-        :rules="[
-          { required: true, message: '最小值不能为空' },
-          { validator: validateMin, trigger: 'blur' },
-        ]"
-        class="mb-0"
-        prop="property.dataSpecs.min"
-      >
-        <el-input v-model="dataSpecs.min" placeholder="请输入最小值" />
-      </el-form-item>
-      <span class="mx-2">~</span>
-      <el-form-item
-        :rules="[
-          { required: true, message: '最大值不能为空' },
-          { validator: validateMax, trigger: 'blur' },
-        ]"
-        class="mb-0"
-        prop="property.dataSpecs.max"
-      >
-        <el-input v-model="dataSpecs.max" placeholder="请输入最大值" />
-      </el-form-item>
-    </div>
-  </el-form-item>
-  <el-form-item
-    :rules="[
-      { required: true, message: '步长不能为空' },
-      { validator: validateStep, trigger: 'blur' },
-    ]"
-    label="步长"
-    prop="property.dataSpecs.step"
-  >
-    <el-input v-model="dataSpecs.step" placeholder="请输入步长" />
-  </el-form-item>
-  <el-form-item
-    :rules="[{ required: true, message: '请选择单位' }]"
-    label="单位"
-    prop="property.dataSpecs.unit"
-  >
-    <el-select
-      :model-value="
-        dataSpecs.unit ? `${dataSpecs.unitName}-${dataSpecs.unit}` : ''
-      "
-      filterable
-      placeholder="请选择单位"
-      class="w-1/1"
-      @change="unitChange"
-    >
-      <el-option
-        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}`"
-      />
-    </el-select>
-  </el-form-item>
-</template>
-
 <style lang="scss" scoped>
-:deep(.el-form-item) {
-  .el-form-item {
+:deep(.ant-form-item) {
+  .ant-form-item {
     margin-bottom: 0;
   }
 }

apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelStructDataSpecs.vue

@@ -29,6 +29,7 @@ const formData = ref<any>({
     dataSpecs: {
       dataType: IoTDataSpecsDataTypeEnum.INT,
     },
+    dataSpecsList: [],
   },
 });
 
@@ -40,16 +41,22 @@ function openStructForm(val: any) {
     return;
   }
   // 编辑时回显数据
+  const valData = val as any;
   formData.value = {
-    identifier: val.identifier,
-    name: val.name,
-    description: val.description,
+    identifier: valData?.identifier || '',
+    name: valData?.name || '',
+    description: valData?.description || '',
     property: {
-      dataType: val.childDataType,
-      dataSpecs: val.dataSpecs,
-      dataSpecsList: val.dataSpecsList,
+      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 项 */
@@ -102,19 +109,12 @@ function resetForm() {
       dataSpecs: {
         dataType: IoTDataSpecsDataTypeEnum.INT,
       },
+      dataSpecsList: [],
     },
   };
   structFormRef.value?.resetFields();
 }
 
-/** 校验 struct 不能为空 */
-function validateList(_: any, __: any, callback: any) {
-  if (isEmpty(dataSpecsList.value)) {
-    callback(new Error('struct 不能为空'));
-    return;
-  }
-  callback();
-}
 
 /** 组件初始化 */
 onMounted(async () => {
@@ -126,51 +126,49 @@ onMounted(async () => {
 
 <template>
   <!-- struct 数据展示 -->
-  <Form.Item
-    :rules="[{ required: true, validator: validateList, trigger: 'change' }]"
-    label="JSON 对象"
-  >
+  <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>
+      <span>参数：{{ item.name }}</span>
       <div class="btn">
-        <Button link type="primary" @click="openStructForm(item)">
+        <Button type="link" @click="openStructForm(item)">
           编辑
         </Button>
-        <Divider direction="vertical" />
-        <Button link danger @click="deleteStructItem(index)"> 删除 </Button>
+        <Divider type="vertical" />
+        <Button type="link" danger @click="deleteStructItem(index)">
+          删除
+        </Button>
       </div>
     </div>
-    <Button link type="primary" @click="openStructForm(null)">
+    <Button type="link" @click="openStructForm(null)">
       +新增参数
     </Button>
   </Form.Item>
 
   <!-- struct 表单 -->
-  <Modal v-model="dialogVisible" :title="dialogTitle" append-to-body>
+  <Modal
+    v-model:open="dialogVisible"
+    :title="dialogTitle"
+    :confirm-loading="formLoading"
+    @ok="submitForm"
+  >
     <Form
       ref="structFormRef"
-      v-loading="formLoading"
       :model="formData"
-      label-width="100px"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
     >
-      <Form.Item label="参数名称" prop="name">
-        <Input v-model="formData.name" placeholder="请输入功能名称" />
+      <Form.Item label="参数名称" name="name">
+        <Input v-model:value="formData.name" placeholder="请输入功能名称" />
       </Form.Item>
-      <Form.Item label="标识符" prop="identifier">
-        <Input v-model="formData.identifier" placeholder="请输入标识符" />
+      <Form.Item label="标识符" name="identifier">
+        <Input v-model:value="formData.identifier" placeholder="请输入标识符" />
       </Form.Item>
       <!-- 属性配置 -->
       <ThingModelProperty v-model="formData.property" is-struct-data-specs />
     </Form>
-    <template #footer>
-      <Button :disabled="formLoading" type="primary" @click="submitForm">
-        确 定
-      </Button>
-      <Button @click="dialogVisible = false">取 消</Button>
-    </template>
   </Modal>
 </template>