'faet:详情copy功能'

@@ -18,8 +18,8 @@
       <div ref="wrapRef" style="height: 400px; width: 90%" class="ml-6"></div>
     </div>
     <div class="mt-4">
-      <a-button type="primary" class="mr-4">复制设备ID</a-button>
-      <a-button type="primary">复制访问令牌</a-button>
+      <a-button type="primary" class="mr-4" @click="copyDeviceId">复制设备ID</a-button>
+      <a-button type="primary" @click="copyToken">复制访问令牌</a-button>
     </div>
   </div>
 </template>
@@ -28,6 +28,8 @@
   import { Image, Table } from 'ant-design-vue';
   import { columns } from '../../config/detail.config';
   import { useScript } from '/@/hooks/web/useScript';
+  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useMessage } from '/@/hooks/web/useMessage';
   export default defineComponent({
     components: {
       Image,
@@ -39,7 +41,7 @@
         required: true,
       },
     },
-    setup() {
+    setup(props) {
       const BAI_DU_MAP_URL =
         'https://api.map.baidu.com/getscript?v=3.0&ak=7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa';
       const wrapRef = ref<HTMLDivElement | null>(null);
@@ -79,10 +81,26 @@
         map.enableScrollWheelZoom(true);
         map.addOverlay(marker);
       }
+      const { createMessage } = useMessage();
+      const { clipboardRef } = useCopyToClipboard();
+      const copyDeviceId = () => {
+        clipboardRef.value = props.deviceDetail.id;
+        if (unref(clipboardRef)) {
+          createMessage.success('复制成功~');
+        }
+      };
+      const copyToken = () => {
+        clipboardRef.value = props.deviceDetail.token;
+        if (unref(clipboardRef)) {
+          createMessage.success('复制成功~');
+        }
+      };
 
       return {
         columns,
         wrapRef,
+        copyDeviceId,
+        copyToken,
         initMap,
       };
     },