perf: DEFECT-807 refactor view product prefoile detail info

+<template>
+  <BasicDrawer v-bind="$attrs" title="产品详情" @register="register" width="50%">
+    <Tabs :animated="true" v-model:activeKey="activeKey">
+      <TabPane forceRender key="1" tab="产品">
+        <div class="relative">
+          <DeviceConfigurationStep :ifShowBtn="false" ref="DevConStRef" />
+          <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
+        </div>
+      </TabPane>
+      <TabPane forceRender key="2" tab="传输配置">
+        <div class="relative">
+          <TransportConfigurationStep :ifShowBtn="false" ref="TransConStRef" />
+          <div class="absolute w-full h-full top-0 cursor-not-allowed"></div>
+        </div>
+      </TabPane>
+      <TabPane forceRender key="3" tab="物模型管理">
+        <PhysicalModelManagementStep />
+      </TabPane>
+    </Tabs>
+  </BasicDrawer>
+</template>
+<script lang="ts" setup>
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import DeviceConfigurationStep from './step/DeviceConfigurationStep.vue';
+  import TransportConfigurationStep from './step/TransportConfigurationStep.vue';
+  import PhysicalModelManagementStep from './step/PhysicalModelManagementStep.vue';
+  import { ref, unref } from 'vue';
+  import { deviceConfigGetDetail } from '/@/api/device/deviceConfigApi';
+
+  defineEmits(['register']);
+
+  const activeKey = ref('1');
+
+  const DevConStRef = ref<InstanceType<typeof DeviceConfigurationStep>>();
+  const TransConStRef = ref<InstanceType<typeof TransportConfigurationStep>>();
+  // const PhysicalModManRef = ref<InstanceType<typeof PhysicalModelManagementStep>>();
+
+  const setDeviceConfFormData = async (res: Recordable) => {
+    unref(DevConStRef)?.setFormData(res);
+  };
+  const setTransConfFormData = async (res: Recordable) => {
+    unref(TransConStRef)?.setFormData(res);
+  };
+
+  const [register, {}] = useDrawerInner(async (data: Recordable) => {
+    activeKey.value = '1';
+    const res = await deviceConfigGetDetail(data.record.id);
+    setDeviceConfFormData(res);
+    setTransConfFormData(res);
+  });
+</script>
+
+<style lang="less" scope></style>

@@ -90,6 +90,7 @@
       </template>
     </BasicTable>
     <DeviceProfileModal @register="registerModal" @success="handleSuccess" />
+    <DeviceProfileDrawer @register="registerDrawer" />
     <ExpExcelModal
       ref="expExcelModalRef"
       @register="registerExportModal"
@@ -108,12 +109,14 @@
     setDeviceProfileIsDefaultApi,
   } from '/@/api/device/deviceConfigApi';
   import { useModal } from '/@/components/Modal';
+  import { useDrawer } from '/@/components/Drawer';
   import DeviceProfileModal from '/@/views/device/profiles/DeviceProfileModal.vue';
   import { ImpExcel, ExcelData } from '/@/components/Excel';
   import { jsonToSheetXlsx, ExpExcelModal, ExportModalResult } from '/@/components/Excel';
   import { Authority } from '/@/components/Authority';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
   import { Popconfirm } from 'ant-design-vue';
+  import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
 
   const exportData: any = ref([]);
   const expExcelModalRef: any = ref(null);
@@ -253,13 +256,16 @@
       isView: false,
     });
   }
+
+  const [registerDrawer, { openDrawer }] = useDrawer();
   //详情
   function handleDetailView(record: Recordable) {
-    openModal(true, {
-      record,
-      isUpdate: false,
-      isView: true,
-    });
+    openDrawer(true, { record });
+    // openModal(true, {
+    //   record,
+    //   isUpdate: false,
+    //   isView: true,
+    // });
   }
 
   function defaultHeader({ filename, bookType }: ExportModalResult) {

@@ -151,7 +151,7 @@
     showIndexColumn: false,
     clickToRowSelect: false,
     useSearchForm: false,
-    rowKey: 'id',
+    // rowKey: 'id',
     showTableSetting: true,
     bordered: true,
     actionColumn: {