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/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>