From f0a666fb1d78f8f90fa6be40b28350a51df583c2 Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Fri, 29 Aug 2025 11:59:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=8B=E7=BA=BF=E6=A8=A1=E6=8B=9F=E3=80=81=E4=BA=A7?=
 =?UTF-8?q?=E5=93=81json=E5=AF=BC=E5=85=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增设备上下线模拟接口和相关组件
- 实现设备状态模拟和高级模式下的 JSON 编辑
- 优化设备详情页面布局，添加设备图片显示
- 修复 websocket 取消订阅时的消息格式问题
---
 apps/web-antd/package.json                    |   1 +
 apps/web-antd/src/api/device/device/index.ts  |   9 +
 apps/web-antd/src/utils/websocket.ts          |   2 +-
 .../detail/components/DeviceSimulation.vue    |   6 +-
 .../components/simulation/EventSimulation.vue |   4 +-
 .../simulation/FunctionSimulation.vue         |   2 +-
 .../simulation/OnlineOfflineSimulation.vue    | 414 ++++++++++++++++++
 .../src/views/device/device/detail/index.vue  |  38 +-
 .../product/detail/components/EventDrawer.vue |   3 +-
 .../detail/components/FunctionDrawer.vue      |   5 +-
 .../product/detail/components/ImportForm.vue  | 329 ++++++++++++++
 .../product/detail/components/Metadata.vue    |  13 +-
 .../src/views/device/product/detail/index.vue |  13 +-
 13 files changed, 820 insertions(+), 19 deletions(-)
 create mode 100644 apps/web-antd/src/views/device/device/detail/components/simulation/OnlineOfflineSimulation.vue
 create mode 100644 apps/web-antd/src/views/device/product/detail/components/ImportForm.vue

diff --git a/apps/web-antd/package.json b/apps/web-antd/package.json
index 110d9bc..c5fd098 100644
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -52,6 +52,7 @@
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.52.2",
     "pinia": "catalog:",
+    "qrcode.vue": "^3.6.0",
     "rxjs": "^7.8.2",
     "tinymce": "^7.3.0",
     "unplugin-vue-components": "^0.27.3",
diff --git a/apps/web-antd/src/api/device/device/index.ts b/apps/web-antd/src/api/device/device/index.ts
index d8271c9..1f3df1b 100644
--- a/apps/web-antd/src/api/device/device/index.ts
+++ b/apps/web-antd/src/api/device/device/index.ts
@@ -89,3 +89,12 @@ export function deviceOperateFunc(data: any) {
 export function deviceOperateEvent(data: any) {
   return requestClient.postWithMsg<void>('/device/operate/mockEvent', data);
 }
+
+/**
+ * 上下线模拟
+ * @param data
+ * @returns void
+ */
+export function deviceOperateStatus(data: any) {
+  return requestClient.postWithMsg<void>('/device/operate/mockStatus', data);
+}
diff --git a/apps/web-antd/src/utils/websocket.ts b/apps/web-antd/src/utils/websocket.ts
index 2517645..321712c 100644
--- a/apps/web-antd/src/utils/websocket.ts
+++ b/apps/web-antd/src/utils/websocket.ts
@@ -171,7 +171,7 @@ export const getWebSocket = (
       }
 
       return () => {
-        const unsub = JSON.stringify({ id, type: 'unsub' });
+        const unsub = JSON.stringify({ id, topic, type: 'unsub' });
         const list = subs[id];
         if (Array.isArray(list)) {
           const idx = list.indexOf(handle);
diff --git a/apps/web-antd/src/views/device/device/detail/components/DeviceSimulation.vue b/apps/web-antd/src/views/device/device/detail/components/DeviceSimulation.vue
index ef17eca..a1731f3 100644
--- a/apps/web-antd/src/views/device/device/detail/components/DeviceSimulation.vue
+++ b/apps/web-antd/src/views/device/device/detail/components/DeviceSimulation.vue
@@ -5,6 +5,7 @@ import { TabPane, Tabs } from 'ant-design-vue';
 
 import EventSimulation from './simulation/EventSimulation.vue';
 import FunctionSimulation from './simulation/FunctionSimulation.vue';
+import OnlineOfflineSimulation from './simulation/OnlineOfflineSimulation.vue';
 import PropertySimulation from './simulation/PropertySimulation.vue';
 
 interface Props {
@@ -85,7 +86,10 @@ const eventList = computed(() => {
         />
       </TabPane>
       <TabPane key="online" tab="上下线">
-        <div>上下线功能开发中...</div>
+        <OnlineOfflineSimulation
+          :device-id="deviceId"
+          :device-info="deviceInfo"
+        />
       </TabPane>
     </Tabs>
   </div>
diff --git a/apps/web-antd/src/views/device/device/detail/components/simulation/EventSimulation.vue b/apps/web-antd/src/views/device/device/detail/components/simulation/EventSimulation.vue
index 40e1a27..e4351fe 100644
--- a/apps/web-antd/src/views/device/device/detail/components/simulation/EventSimulation.vue
+++ b/apps/web-antd/src/views/device/device/detail/components/simulation/EventSimulation.vue
@@ -395,7 +395,7 @@ onMounted(() => {
             <TabPane key="simple" tab="精简模式">
               <div class="mode-info">
                 <ExclamationCircleOutlined />
-                精简模式下参数只支持输入框的方式录入
+                精简模式下参数支持表单的方式录入
               </div>
             </TabPane>
             <TabPane key="advanced" tab="高级模式">
@@ -550,7 +550,7 @@ onMounted(() => {
             </div>
 
             <div class="execute-button">
-              <Button type="primary" @click="handleSubmit">触发事件</Button>
+              <Button type="primary" @click="handleSubmit">执行</Button>
             </div>
           </div>
 
diff --git a/apps/web-antd/src/views/device/device/detail/components/simulation/FunctionSimulation.vue b/apps/web-antd/src/views/device/device/detail/components/simulation/FunctionSimulation.vue
index 398f18c..4b0b3ea 100644
--- a/apps/web-antd/src/views/device/device/detail/components/simulation/FunctionSimulation.vue
+++ b/apps/web-antd/src/views/device/device/detail/components/simulation/FunctionSimulation.vue
@@ -574,7 +574,7 @@ onMounted(() => {
             <TabPane key="simple" tab="精简模式">
               <div class="mode-info">
                 <ExclamationCircleOutlined />
-                精简模式下参数只支持输入框的方式录入
+                精简模式下参数支持表单的方式录入
               </div>
             </TabPane>
             <TabPane key="advanced" tab="高级模式">
diff --git a/apps/web-antd/src/views/device/device/detail/components/simulation/OnlineOfflineSimulation.vue b/apps/web-antd/src/views/device/device/detail/components/simulation/OnlineOfflineSimulation.vue
new file mode 100644
index 0000000..cd9fede
--- /dev/null
+++ b/apps/web-antd/src/views/device/device/detail/components/simulation/OnlineOfflineSimulation.vue
@@ -0,0 +1,414 @@
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import {
+  Button,
+  Form,
+  message,
+  Select,
+  SelectOption,
+  Table,
+  TabPane,
+  Tabs,
+} from 'ant-design-vue';
+
+import { deviceOperateStatus } from '#/api/device/device';
+import MonacoEditor from '#/components/MonacoEditor/index.vue';
+
+interface Props {
+  deviceId: string;
+  deviceInfo: any;
+}
+
+const props = defineProps<Props>();
+
+// 当前模式：simple(精简模式) / advanced(高级模式)
+const currentMode = ref('simple');
+// 表单引用
+const formRef = ref();
+// JSON编辑器内容
+const jsonContent = ref('{}');
+// 参数框内容
+const parameterContent = ref('');
+// 提交结果
+const submitResult = ref('');
+
+// 选中的参数行
+const selectedRowKeys = ref(['status']);
+
+// 表单数据
+const formData = ref({
+  status: '1', // 默认为上线状态
+});
+
+// 固定的状态参数配置
+const statusParameter = {
+  id: 'status',
+  name: '状态',
+  required: true,
+  valueParams: {
+    dataType: 'string',
+    formType: 'select',
+    enumConf: [
+      { value: '1', text: '上线' },
+      { value: '0', text: '下线' },
+    ],
+  },
+};
+
+// 表格列配置
+const columns = [
+  {
+    title: '参数名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 150,
+  },
+  {
+    title: '输入类型',
+    dataIndex: 'dataType',
+    key: 'dataType',
+    width: 100,
+  },
+  {
+    title: '值',
+    dataIndex: 'value',
+    key: 'value',
+  },
+];
+
+// 表格数据源
+const tableDataSource = computed(() => {
+  return [
+    {
+      key: statusParameter.id,
+      id: statusParameter.id,
+      name: statusParameter.name,
+      dataType: 'string',
+      required: statusParameter.required,
+      formType: statusParameter.valueParams.formType,
+      valueParams: statusParameter.valueParams,
+    },
+  ];
+});
+
+// 表格行选择配置
+const rowSelection = computed(() => ({
+  selectedRowKeys: selectedRowKeys.value,
+  onChange: (selectedKeys: string[]) => {
+    // 状态参数必选，不允许取消选择
+    if (!selectedKeys.includes('status')) {
+      selectedKeys.push('status');
+    }
+    selectedRowKeys.value = selectedKeys;
+  },
+  getCheckboxProps: (record: any) => ({
+    disabled: record.id === 'status', // 状态参数禁用取消选择
+  }),
+}));
+
+// 监听模式切换，重置表单
+watch(currentMode, () => {
+  resetForm();
+  generateDefaultContent();
+});
+
+// 重置表单
+const resetForm = () => {
+  if (formRef.value) {
+    formRef.value.resetFields();
+  }
+  formData.value = {
+    status: '1',
+  };
+  submitResult.value = '';
+};
+
+// 生成默认内容
+const generateDefaultContent = () => {
+  if (currentMode.value === 'advanced') {
+    // 高级模式：状态参数key:null
+    const params = {
+      status: null,
+    };
+    jsonContent.value = JSON.stringify(params, null, 2);
+    parameterContent.value = '';
+  } else {
+    // 精简模式：清空参数框
+    parameterContent.value = '';
+  }
+};
+
+// 处理JSON编辑器变化
+const handleJsonChange = (value: string) => {
+  jsonContent.value = value;
+};
+
+// 执行实际提交
+const executeSubmit = async () => {
+  try {
+    let parameters = {};
+
+    if (currentMode.value === 'simple') {
+      // 精简模式：验证表单并获取值
+      await formRef.value.validate();
+      const formValues = formData.value;
+      console.log('表单值:', formValues);
+
+      // 验证状态参数
+      if (!formValues.status) {
+        message.error('请选择状态');
+        return;
+      }
+
+      parameters = {
+        status: formValues.status,
+      };
+    } else {
+      // 高级模式：验证JSON格式
+      try {
+        parameters = JSON.parse(jsonContent.value);
+      } catch {
+        message.error('JSON格式错误，请检查格式');
+        return;
+      }
+    }
+
+    // 构造提交数据格式
+    const submitData = {
+      productKey: props.deviceInfo.productObj.productKey,
+      deviceKey: props.deviceInfo.deviceKey,
+      ...parameters,
+    };
+
+    // 更新参数框内容
+    parameterContent.value = JSON.stringify(submitData, null, 2);
+
+    // 调用设备操作事件接口
+    console.log('设备上下线:', submitData);
+    const result = await deviceOperateStatus(submitData);
+
+    submitResult.value = JSON.stringify(result, null, 2);
+  } catch (error) {
+    message.error('操作失败');
+    console.error('操作错误:', error);
+  }
+};
+
+// 主要的提交函数
+const handleSubmit = async () => {
+  // 直接执行提交
+  await executeSubmit();
+};
+
+onMounted(() => {
+  // 初始化默认值
+  formData.value = {
+    status: '1',
+  };
+  selectedRowKeys.value = ['status'];
+  generateDefaultContent();
+});
+</script>
+
+<template>
+  <div class="online-offline-simulation">
+    <div class="simulation-content">
+      <!-- 模式切换 -->
+      <div class="mode-tabs">
+        <Tabs v-model:active-key="currentMode">
+          <TabPane key="simple" tab="精简模式">
+            <div class="mode-info">
+              <ExclamationCircleOutlined />
+              精简模式下参数支持表单的方式录入
+            </div>
+          </TabPane>
+          <TabPane key="advanced" tab="高级模式">
+            <div class="mode-info">
+              <ExclamationCircleOutlined />
+              高级模式下支持JSON格式直接编辑
+            </div>
+          </TabPane>
+        </Tabs>
+      </div>
+
+      <div class="content-area">
+        <!-- 左侧参数输入 -->
+        <div class="input-section">
+          <div v-if="currentMode === 'simple'" class="simple-form">
+            <Form ref="formRef" :model="formData" layout="vertical">
+              <Table
+                :columns="columns"
+                :data-source="tableDataSource"
+                :row-selection="rowSelection"
+                :pagination="false"
+                size="small"
+              >
+                <template #bodyCell="{ column, record }">
+                  <template v-if="column.key === 'name'">
+                    <span>{{ record.name }}</span>
+                  </template>
+                  <template v-else-if="column.key === 'value'">
+                    <Form.Item
+                      :name="record.id"
+                      :rules="[
+                        {
+                          required: true,
+                          message: `请选择${record.name}`,
+                        },
+                      ]"
+                      style="margin-bottom: 0"
+                    >
+                      <Select
+                        v-model:value="formData[record.id]"
+                        :placeholder="`请选择${record.name}`"
+                        style="width: 100%"
+                      >
+                        <SelectOption
+                          v-for="option in record?.valueParams?.enumConf || []"
+                          :key="option.value"
+                          :value="option.value"
+                        >
+                          {{ option.text }}
+                        </SelectOption>
+                      </Select>
+                    </Form.Item>
+                  </template>
+                </template>
+              </Table>
+            </Form>
+          </div>
+
+          <div v-else class="advanced-form">
+            <MonacoEditor
+              v-model="jsonContent"
+              lang="json"
+              theme="vs-dark"
+              style="
+                height: 300px;
+                border: 1px solid #d9d9d9;
+                border-radius: 6px;
+              "
+              @update:model-value="handleJsonChange"
+            />
+          </div>
+
+          <div class="execute-button">
+            <Button type="primary" @click="handleSubmit">执行</Button>
+          </div>
+        </div>
+
+        <!-- 右侧参数框和结果 -->
+        <div class="result-section">
+          <div class="parameter-box">
+            <div class="parameter-header">参数:</div>
+            <div class="parameter-content">
+              <pre>{{ parameterContent || '点击执行后显示参数' }}</pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.online-offline-simulation {
+  .simulation-content {
+    min-height: 600px;
+
+    .mode-tabs {
+      margin-bottom: 16px;
+
+      .mode-info {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 8px 0;
+        font-size: 14px;
+        color: #8c8c8c;
+      }
+    }
+
+    .content-area {
+      display: flex;
+      gap: 16px;
+
+      .input-section {
+        flex: 5;
+        border: 1px solid #d9d9d9;
+        border-radius: 6px;
+
+        .simple-form {
+          :deep(.ant-table) {
+            .ant-table-thead > tr > th {
+              font-weight: 500;
+              background: #fafafa;
+            }
+
+            .ant-table-tbody > tr > td {
+              vertical-align: middle;
+            }
+          }
+
+          :deep(.ant-form-item) {
+            margin-bottom: 0;
+          }
+        }
+
+        .execute-button {
+          margin: 10px;
+          margin-top: 15px;
+          text-align: right;
+        }
+      }
+
+      .result-section {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+        width: 300px;
+
+        .parameter-box,
+        .result-box {
+          padding: 16px;
+          border: 1px solid #d9d9d9;
+          border-radius: 6px;
+
+          .parameter-header,
+          .result-header {
+            margin-bottom: 12px;
+            font-weight: 500;
+            color: #262626;
+          }
+
+          .parameter-content,
+          .result-content {
+            min-height: 120px;
+            padding: 12px;
+            background: #f5f5f5;
+            border-radius: 4px;
+
+            pre {
+              margin: 0;
+              font-size: 12px;
+              line-height: 1.5;
+              color: #262626;
+              word-break: break-all;
+              white-space: pre-wrap;
+            }
+          }
+        }
+
+        .result-box {
+          .result-content {
+            background: #f0f9ff;
+            border: 1px solid #91d5ff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/device/device/detail/index.vue b/apps/web-antd/src/views/device/device/detail/index.vue
index b10f604..67da29d 100644
--- a/apps/web-antd/src/views/device/device/detail/index.vue
+++ b/apps/web-antd/src/views/device/device/detail/index.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
 
 import { ArrowLeftOutlined } from '@ant-design/icons-vue';
-import { message, Switch, TabPane, Tabs } from 'ant-design-vue';
+import { Image, message, Switch, TabPane, Tabs } from 'ant-design-vue';
+import QrcodeVue from 'qrcode.vue';
 
 import { deviceStateOptions } from '#/constants/dicts';
 // import { deviceUpdateStatus } from '#/api/device/device';
@@ -32,11 +33,13 @@ let deviceStatusSubscription: any = null;
 const subscribeDeviceStatus = () => {
   if (!currentDevice.value) return;
 
+  const productKey = currentDevice.value.productObj.productKey;
+
   const id = `device-status-${currentDevice.value.deviceKey}`;
-  const topic = `/device/${currentDevice.value.deviceKey}/status`;
+  const topic = `/device/${productKey}/status`;
 
   deviceStatusSubscription = getWebSocket(id, topic, {
-    deviceId: currentDevice.value.deviceKey,
+    deviceKey: currentDevice.value.deviceKey,
   }).subscribe((data: any) => {
     if (data.payload?.deviceKey === currentDevice.value.deviceKey) {
       // 更新设备状态
@@ -152,6 +155,16 @@ onUnmounted(() => {
           </div>
         </div>
         <div class="header-right">
+          <QrcodeVue
+            :value="currentDevice.deviceKey"
+            :image-settings="{
+              src: currentDevice.imgUrl,
+              height: 20,
+              width: 20,
+            }"
+            :size="80"
+            level="H"
+          />
           <!-- <a-button
             type="primary"
             @click="handleStatusChange(!(currentDevice.enabled === '1'))"
@@ -164,6 +177,9 @@ onUnmounted(() => {
 
       <!-- 设备基本信息 -->
       <div class="device-basic">
+        <div class="basic-item" v-if="currentDevice.imgUrl">
+          <Image :width="55" :src="currentDevice.imgUrl" />
+        </div>
         <div class="basic-item">
           <span class="basic-label">ID:</span>
           <span class="basic-value">{{ deviceId }}</span>
@@ -221,6 +237,7 @@ onUnmounted(() => {
   background: #fff;
 
   .detail-header {
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -290,12 +307,23 @@ onUnmounted(() => {
         }
       }
     }
+
+    .header-right {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 100px;
+      height: 100px;
+      padding: 10px;
+      border: 1px solid #d9d9d9;
+      border-radius: 10px;
+    }
   }
 
   .device-basic {
     display: flex;
     gap: 24px;
-    padding: 16px 0;
+    padding: 0;
 
     .basic-item {
       display: flex;
diff --git a/apps/web-antd/src/views/device/product/detail/components/EventDrawer.vue b/apps/web-antd/src/views/device/product/detail/components/EventDrawer.vue
index dab8739..a5f2e74 100644
--- a/apps/web-antd/src/views/device/product/detail/components/EventDrawer.vue
+++ b/apps/web-antd/src/views/device/product/detail/components/EventDrawer.vue
@@ -91,7 +91,7 @@ const outputColumns = ref([
   {
     title: '操作',
     key: 'action',
-    width: 100,
+    width: 120,
     fixed: 'right',
   },
 ]);
@@ -233,6 +233,7 @@ watch(
                 :columns="outputColumns"
                 :data-source="formData.outputs"
                 :pagination="false"
+                :scroll="{ y: 320 }"
               >
                 <template #bodyCell="{ column, record, index }">
                   <template v-if="column.key === 'dataType'">
diff --git a/apps/web-antd/src/views/device/product/detail/components/FunctionDrawer.vue b/apps/web-antd/src/views/device/product/detail/components/FunctionDrawer.vue
index 93de6b8..63fd72c 100644
--- a/apps/web-antd/src/views/device/product/detail/components/FunctionDrawer.vue
+++ b/apps/web-antd/src/views/device/product/detail/components/FunctionDrawer.vue
@@ -110,6 +110,7 @@ const inputColumns = ref([
     dataIndex: 'required',
     key: 'required',
     scopedSlots: { customRender: 'required' },
+    width: 90,
   },
   {
     title: '表单类型',
@@ -120,8 +121,7 @@ const inputColumns = ref([
   {
     title: '操作',
     key: 'action',
-    width: 100,
-    fixed: 'right',
+    width: 120,
   },
 ]);
 
@@ -300,6 +300,7 @@ watch(
                 :columns="inputColumns"
                 :data-source="formData.inputs"
                 :pagination="false"
+                :scroll="{ y: 280 }"
               >
                 <template #bodyCell="{ column, record, index }">
                   <template v-if="column.key === 'dataType'">
diff --git a/apps/web-antd/src/views/device/product/detail/components/ImportForm.vue b/apps/web-antd/src/views/device/product/detail/components/ImportForm.vue
new file mode 100644
index 0000000..733484f
--- /dev/null
+++ b/apps/web-antd/src/views/device/product/detail/components/ImportForm.vue
@@ -0,0 +1,329 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue';
+
+import { UploadOutlined } from '@ant-design/icons-vue';
+import {
+  Button,
+  Form,
+  FormItem,
+  message,
+  Modal,
+  Space,
+  Upload,
+} from 'ant-design-vue';
+
+import MonacoEditor from '#/components/MonacoEditor/index.vue';
+
+const emit = defineEmits<{
+  change: [];
+  success: [];
+}>();
+
+// 导出组件
+defineExpose({});
+
+const formRef = ref();
+const importLoading = ref(false);
+
+const formData = reactive({
+  script: `{
+  "properties": [],
+  "functions": [],
+  "events": [],
+  "propertyGroups": []
+}`,
+  options: ['validate'],
+});
+
+const formRules = {
+  file: [{ required: true, message: '请选择文件' }],
+  script: [{ required: true, message: '请输入脚本内容' }],
+};
+
+// 是否可以导入
+const canImport = computed(() => {
+  return formData.script.trim() !== '';
+});
+
+// 文件导入处理
+const handleFileImport = async (file: File) => {
+  const isValidType = /\.json$/.test(file.name);
+  if (!isValidType) {
+    message.error('只支持 JSON 格式的文件');
+    return false;
+  }
+
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error('文件大小不能超过 2MB');
+    return false;
+  }
+
+  try {
+    const content = await readFileContent(file);
+    if (handleScriptValidate(content)) {
+      Modal.confirm({
+        title: '确认导入',
+        content: '导入文件将覆盖当前脚本内容，是否继续？',
+        onOk: () => {
+          // 覆盖脚本内容
+          formData.script = content;
+        },
+      });
+    } else {
+      message.error('当前脚本内容验证未通过，请修正后再导入');
+      return false;
+    }
+    // 显示覆盖确认对话框
+  } catch {
+    message.error('文件读取失败');
+  }
+
+  return false; // 阻止默认上传行为
+};
+
+const checkJsonScript = () => {
+  if (handleScriptValidate(formData.script)) {
+    message.success('脚本验证成功');
+  } else {
+    message.error('当前脚本内容验证未通过，请修正后再导入');
+  }
+};
+
+// 验证脚本内容
+const handleScriptValidate = (content: any) => {
+  try {
+    parseFileContent(content, 'script.json');
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// 读取文件内容
+const readFileContent = (file: File): Promise<string> => {
+  return file.text();
+};
+
+// 解析文件内容
+const parseFileContent = (content: string, fileName: string) => {
+  try {
+    if (fileName.endsWith('.json')) {
+      const data = JSON.parse(content);
+
+      // 验证JSON格式是否正确
+      if (!data || typeof data !== 'object') {
+        throw new Error('JSON格式不正确');
+      }
+
+      // 验证必要的字段结构
+      const requiredFields = [
+        'properties',
+        'functions',
+        'events',
+        'propertyGroups',
+      ];
+      const hasValidStructure = requiredFields.every(
+        (field) => Array.isArray(data[field]) && data[field].length >= 0,
+      );
+
+      if (!hasValidStructure) {
+        throw new Error('物模型JSON格式不正确，缺少必要的属性、功能或事件字段');
+      }
+
+      return {
+        properties: data.properties || [],
+        functions: data.functions || [],
+        events: data.events || [],
+        propertyGroups: data.propertyGroups || [],
+      };
+    }
+    throw new Error('不支持的文件格式');
+  } catch (error) {
+    if (error instanceof SyntaxError) {
+      throw new TypeError('JSON格式错误，请检查文件内容');
+    }
+    throw error;
+  }
+};
+// const handleJsonChange = (value: string) => {
+//   formData.script = value;
+// };
+
+// 导入
+const handleImport = async () => {
+  try {
+    const metaDataObj = JSON.parse(formData.script);
+    await formRef.value.validate();
+    if (handleScriptValidate(formData.script)) {
+      // 显示覆盖确认对话框
+      Modal.confirm({
+        title: '确认覆盖物模型',
+        content: '将覆盖当前产品的物模型，是否继续？',
+        onOk: () => {
+          importLoading.value = true;
+          emit('change', metaDataObj);
+          emit('success');
+          importLoading.value = false;
+        },
+      });
+    } else {
+      message.error('当前脚本内容验证未通过，请修正后再覆盖');
+    }
+
+    // 这里调用导入API
+    // const res = await importMetadata({
+    //   type: formData.importType,
+    //   data: formData,
+    //   options: formData.options,
+    // });
+
+    // // 模拟导入过程
+    // await new Promise((resolve) => setTimeout(resolve, 2000));
+
+    // message.success('导入成功');
+    // emit('success');
+  } catch {
+    message.error('导入失败');
+  } finally {
+    importLoading.value = false;
+  }
+};
+
+// 取消
+const handleCancel = () => {
+  emit('success');
+};
+</script>
+
+<template>
+  <div class="import-form">
+    <Form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
+      <!-- 物模型脚本编辑器 -->
+      <FormItem label="物模型脚本" name="script">
+        <div class="script-header">
+          <Space>
+            <Upload
+              :show-upload-list="false"
+              :before-upload="handleFileImport"
+              :custom-request="() => {}"
+              accept=".json"
+            >
+              <Button>
+                <template #icon>
+                  <UploadOutlined />
+                </template>
+                导入JSON文件
+              </Button>
+            </Upload>
+            <Button @click="checkJsonScript"> 验证脚本 </Button>
+          </Space>
+        </div>
+        <div class="script-editor">
+          <MonacoEditor
+            v-model="formData.script"
+            lang="json"
+            theme="vs"
+            style="height: 400px; border: 1px solid #d9d9d9; border-radius: 6px"
+          />
+        </div>
+      </FormItem>
+    </Form>
+
+    <div class="form-actions">
+      <Space>
+        <Button @click="handleCancel">取消</Button>
+        <Button
+          type="primary"
+          @click="handleImport"
+          :loading="importLoading"
+          :disabled="!canImport"
+        >
+          覆盖物模型
+        </Button>
+      </Space>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.import-form {
+  .upload-tip {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #8c8c8c;
+  }
+
+  .preview-area {
+    overflow: hidden;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+
+    .preview-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: #fafafa;
+      border-bottom: 1px solid #d9d9d9;
+    }
+
+    .preview-tips {
+      padding: 12px 16px;
+      font-size: 14px;
+      line-height: 1.5;
+      color: #666;
+      background: #f0f9ff;
+      border-bottom: 1px solid #d9d9d9;
+    }
+
+    .preview-content {
+      border-bottom: 1px solid #d9d9d9;
+    }
+
+    .category-preview {
+      padding: 16px;
+      background: #fff;
+
+      :deep(.ant-tabs) {
+        .ant-tabs-tab {
+          padding: 8px 16px;
+        }
+
+        .ant-tabs-content-holder {
+          padding-top: 16px;
+        }
+      }
+
+      :deep(.ant-table) {
+        .ant-table-thead > tr > th {
+          font-weight: 500;
+          background: #fafafa;
+        }
+
+        .ant-table-tbody > tr > td {
+          padding: 8px 12px;
+        }
+      }
+    }
+  }
+
+  .script-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+  }
+
+  .script-editor {
+    overflow: hidden;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+  }
+
+  .form-actions {
+    margin-top: 24px;
+    text-align: right;
+  }
+}
+</style>
diff --git a/apps/web-antd/src/views/device/product/detail/components/Metadata.vue b/apps/web-antd/src/views/device/product/detail/components/Metadata.vue
index 4f39851..a992fb0 100644
--- a/apps/web-antd/src/views/device/product/detail/components/Metadata.vue
+++ b/apps/web-antd/src/views/device/product/detail/components/Metadata.vue
@@ -87,8 +87,6 @@ const handleViewTSL = () => {
 // 导入成功
 const handleImportSuccess = () => {
   importVisible.value = false;
-  loadMetadata();
-  message.success('导入成功');
 };
 
 // 关闭导入抽屉
@@ -298,6 +296,12 @@ const handleMetadataChange = (data: any) => {
   }
 };
 
+// 物模型数据变更
+const handleMetadataImport = (data: any) => {
+  console.log('data', data);
+  currentMetadata.value = data;
+};
+
 // 监听路由变化，提示未保存
 const handleBeforeRouteLeave = (next: any) => {
   if (metadataChanged.value) {
@@ -424,7 +428,10 @@ onBeforeRouteLeave((to, from, next) => {
       width="600px"
       @close="handleImportClose"
     >
-      <ImportForm @success="handleImportSuccess" />
+      <ImportForm
+        @change="handleMetadataImport"
+        @success="handleImportSuccess"
+      />
     </Drawer>
 
     <!-- TSL查看抽屉 -->
diff --git a/apps/web-antd/src/views/device/product/detail/index.vue b/apps/web-antd/src/views/device/product/detail/index.vue
index baf5081..b790c9a 100644
--- a/apps/web-antd/src/views/device/product/detail/index.vue
+++ b/apps/web-antd/src/views/device/product/detail/index.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { Page } from '@vben/common-ui';
 
 import { ArrowLeftOutlined } from '@ant-design/icons-vue';
-import { message, Modal, Switch, TabPane, Tabs } from 'ant-design-vue';
+import { Image, message, Modal, Switch, TabPane, Tabs } from 'ant-design-vue';
 
 import {
   productPushMetadataById,
@@ -144,7 +144,12 @@ onUnmounted(() => {
 
       <!-- 产品统计信息 -->
       <div class="product-stats">
-        <span>设备数量：</span><a @click="jumpToDevices">{{ deviceCount }}</a>
+        <div class="basic-item" v-if="currentProduct.imgUrl">
+          <Image :width="55" :src="currentProduct.imgUrl" />
+        </div>
+        <div class="basic-item">
+          <span>设备数量：</span><a @click="jumpToDevices">{{ deviceCount }}</a>
+        </div>
       </div>
 
       <!-- 标签页内容 -->
@@ -218,7 +223,9 @@ onUnmounted(() => {
   }
 
   .product-stats {
-    padding: 10px 0;
+    display: flex;
+    gap: 24px;
+    align-items: center;
   }
 
   .detail-tabs {