perf: on view mode not allowed edit form in product profiles's model of matter

 <template>
-  <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="60%">
+  <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="60%" destroy-on-close>
     <Tabs :animated="true" v-model:activeKey="activeKey" @change="handlePanelChange">
       <TabPane key="product" tab="产品">
         <div class="relative">

@@ -23,7 +23,7 @@ export const steps = [
 export const formatFunctionType: Record<FunctionType, string> = {
   [FunctionType.PROPERTIES]: '属性',
   [FunctionType.EVENTS]: '事件',
-  [FunctionType.SERVICE]: '事件',
+  [FunctionType.SERVICE]: '服务',
 };
 
 export const physicalColumn: BasicColumn[] = [
@@ -83,9 +83,9 @@ export const modelOfMatterForm: FormSchema[] = [
     colProps: { span: 8 },
     componentProps: {
       options: [
-        { label: '属性', value: FunctionType.PROPERTIES },
-        { label: '事件', value: FunctionType.EVENTS },
-        { label: '服务', value: FunctionType.SERVICE },
+        { label: formatFunctionType[FunctionType.PROPERTIES], value: FunctionType.PROPERTIES },
+        { label: formatFunctionType[FunctionType.EVENTS], value: FunctionType.EVENTS },
+        { label: formatFunctionType[FunctionType.SERVICE], value: FunctionType.SERVICE },
       ],
     },
   },

@@ -32,6 +32,9 @@
                   新增物模型
                 </Button>
                 <Button type="primary" @click="handleOpenTsl"> 物模型TSL </Button>
+                <Button v-if="isShowBtn" type="primary" @click="handleImportModel"
+                  >导入物模型</Button
+                >
               </Authority>
             </div>
             <div class="flex gap-2">
@@ -224,6 +227,8 @@
     }
   };
 
+  const handleImportModel = async () => {};
+
   defineExpose({});
 </script>
 <style lang="less" scoped>

@@ -9,7 +9,7 @@
       @ok="handleSubmit"
       @cancel="handleCancel"
     >
-      <div>
+      <div class="relative">
         <div v-if="openModalMode === OpenModelMode.CREATE">
           <Typography>
             <TypographyParagraph>
@@ -38,6 +38,10 @@
           ref="ServiceRef"
         />
         <Events v-show="activeKey === FunctionType.EVENTS" ref="EventsRef" />
+        <div
+          v-if="openModalMode === OpenModelMode.VIEW"
+          class="absolute w-full h-full top-0 cursor-not-allowed"
+        ></div>
       </div>
     </BasicModal>
   </div>

@@ -6,6 +6,7 @@
     width="55rem"
     @register="register"
     @ok="handleSubmit"
+    okText="导出物模型"
     @cancel="handleCancel"
   >
     <TslContent :record="$props.record" ref="TslConRef" />
@@ -19,7 +20,7 @@
 
   defineEmits(['register']);
 
-  defineProps<{
+  const props = defineProps<{
     record: DeviceRecord;
   }>();
 
@@ -42,7 +43,17 @@
   const handleSubmit = () => {
     const value = TslConRef.value?.getFormData();
     if (!value) return;
-    console.log('搜集值', value);
+
+    const blob = new Blob([JSON.stringify(value, null, 2)], { type: 'text/json' });
+    const objectURL = URL.createObjectURL(blob);
+    const element = document.createElement('a');
+    element.href = objectURL;
+    element.download = `${props.record.name}-model.json`;
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    element.remove();
+    URL.revokeObjectURL(objectURL);
   };
 </script>