fix: replace model of matter tsl content editor to textarea

@@ -13,12 +13,6 @@
         <Tabs.TabPane :key="FunctionType.SERVICE" tab="服务" />
         <!-- <Tabs.TabPane :key="FunctionType.EVENTS" tab="事件" /> -->
         <template #tabBarExtraContent>
-          <Button @click="handlePremitter">
-            <template #icon>
-              <SortAscendingOutlined />
-            </template>
-            格式化
-          </Button>
           <Button class="ml-2" @click="handleCopy">
             <template #icon>
               <CopyOutlined />
@@ -30,24 +24,21 @@
     </div>
     <div class="relative">
       <Spin :spinning="loading">
-        <div id="jsoneditor" ref="jsoneditorEl"></div>
-        <div class="absolute top-0 left-0 w-full h-full"></div>
+        <Textarea :disabled="true" :auto-size="{ minRows: 20, maxRows: 20 }" :value="jsonValue" />
       </Spin>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, unref, onMounted, nextTick } from 'vue';
-  import { CopyOutlined, SortAscendingOutlined } from '@ant-design/icons-vue';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { ref, unref, onMounted } from 'vue';
+  import { CopyOutlined } from '@ant-design/icons-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import jsoneditor from 'jsoneditor';
-  import 'jsoneditor/dist/jsoneditor.min.css';
-  import { Button, Typography, TypographyParagraph, Tabs, Spin } from 'ant-design-vue';
+  import { Button, Typography, TypographyParagraph, Tabs, Spin, Textarea } from 'ant-design-vue';
   import { FunctionType } from './config';
   import useCommon from '../hook/useCommon';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { getModelTsl } from '/@/api/device/modelOfMatter';
+  import { useClipboard } from '@vueuse/core';
 
   const props = defineProps<{
     record: DeviceRecord;
@@ -61,40 +52,17 @@
 
   const jsonValue = ref();
 
-  const jsonInstance = ref<{
-    set: (value?: Recordable) => void;
-    get: () => Recordable;
-  }>();
-
-  const jsoneditorEl = ref<HTMLDivElement>();
-
   const activeKey = ref(FunctionType.PROPERTIES);
 
-  onMounted(() => {
-    nextTick(() => {
-      let options = {
-        mode: 'code',
-        mainMenuBar: false,
-        statusBar: false,
-      };
-      let editor = new jsoneditor(jsoneditorEl.value, options);
-      editor.set(jsonValue.value);
-      jsonInstance.value = editor;
-    });
-  });
-
-  const { clipboardRef, copiedRef } = useCopyToClipboard();
-
+  const { copy, isSupported } = useClipboard({ source: jsonValue });
   const handleCopy = () => {
     try {
-      const valueRef = unref(jsonInstance)?.get();
-      const value = JSON.stringify(unref(valueRef));
-      if (!value) {
+      if (!jsonValue.value) {
         createMessage.warning('请输入要拷贝的内容！');
         return;
       }
-      clipboardRef.value = value;
-      if (unref(copiedRef)) {
+      if (unref(isSupported)) {
+        copy();
         createMessage.success('复制成功！');
       }
     } catch (e) {
@@ -103,25 +71,18 @@
   };
 
   const getFormData = () => {
-    const value = unref(jsonInstance)?.get();
-    if (!value) return;
-    return value;
+    return JSON.parse(jsonValue.value);
   };
 
   const resetFormData = () => {
-    unref(jsonInstance)?.set();
-  };
-
-  const handlePremitter = () => {
-    const value = unref(jsonInstance)?.get();
-    return unref(jsonInstance)?.set(value);
+    jsonValue.value = null;
   };
 
   const handleSwitchTsl = async (functionType: FunctionType) => {
     try {
       loading.value = true;
       const record = await getModelTsl({ deviceProfileId: props.record.id, functionType });
-      jsonInstance.value?.set(record);
+      jsonValue.value = JSON.stringify(record, null, 2);
     } catch (error) {
     } finally {
       loading.value = false;
@@ -138,10 +99,3 @@
     resetFormData,
   });
 </script>
-
-<style lang="less" scope>
-  #jsoneditor {
-    width: 100%;
-    height: 450px;
-  }
-</style>