Merge branch 'fix/DEFECT-1384' into 'main_dev'

修复复制粘贴问题

See merge request yunteng/thingskit-front!686

@@ -29,7 +29,8 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+
+  import { useClipboard } from '@vueuse/core';
 
   import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
   import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
@@ -47,11 +48,10 @@
       const userStore = useUserStore();
       const appStore = useAppStore();
 
-      function handleCopy() {
-        const { isSuccessRef } = useCopyToClipboard(
-          JSON.stringify(unref(appStore.getProjectConfig), null, 2)
-        );
-        unref(isSuccessRef) &&
+      async function handleCopy() {
+        const { copied, copy } = useClipboard({ legacy: true });
+        copy(JSON.stringify(unref(appStore.getProjectConfig), null, 2));
+        unref(copied) &&
           createSuccessModal({
             title: t('layout.setting.operatingTitle'),
             content: t('layout.setting.operatingContent'),

@@ -7,7 +7,7 @@
   import { ref, unref } from 'vue';
   import { nextTick } from 'vue';
   import { ModalParamsType } from '/#/utils';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useClipboard } from '@vueuse/core';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { computed } from 'vue';
 
@@ -64,10 +64,10 @@
     return unref(record).viewType === ViewTypeEnum.PUBLIC_VIEW;
   });
 
-  const { clipboardRef, isSuccessRef } = useCopyToClipboard();
-  const handleCopy = () => {
-    clipboardRef.value = unref(link);
-    if (unref(isSuccessRef)) {
+  const { copied, copy } = useClipboard({ legacy: true });
+  const handleCopy = async () => {
+    await copy(unref(link));
+    if (unref(copied)) {
       createMessage.success('复制成功~');
     }
   };

@@ -74,7 +74,6 @@
   import { Empty, Image, Tooltip } from 'ant-design-vue';
   import { descSchema } from '../../config/detail.config';
   import { useAsyncScript } from '/@/hooks/web/useAsyncScript';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { BasicModal, useModal } from '/@/components/Modal';
@@ -84,6 +83,7 @@
   import { QuestionCircleOutlined } from '@ant-design/icons-vue';
   import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { useAuthDeviceDetail } from '../../hook/useAuthDeviceDetail';
+  import { useClipboard } from '@vueuse/core';
 
   import wz from '/@/assets/images/wz.png';
   import { useAsyncQueue } from '../../../localtion/useAsyncQueue';
@@ -165,33 +165,35 @@
       }
 
       const { createMessage } = useMessage();
-      const { clipboardRef } = useCopyToClipboard();
-      const copyTbDeviceId = () => {
-        clipboardRef.value = props.deviceDetail.tbDeviceId;
-        if (unref(clipboardRef)) {
+      const { copied, copy } = useClipboard({ legacy: true });
+
+      const copyTbDeviceId = async () => {
+        await copy(props.deviceDetail.tbDeviceId);
+        if (unref(copied)) {
           createMessage.success('复制成功~');
         }
       };
       const copyDeviceToken = async () => {
         const token = await getDeviceToken(props.deviceDetail.tbDeviceId);
         if (token.credentialsType === 'ACCESS_TOKEN') {
-          clipboardRef.value = token.credentialsId;
+          await copy(token.credentialsId);
         } else {
-          clipboardRef.value = token.credentialsValue;
+          await copy(token.credentialsValue);
+        }
+        if (unref(copied)) {
+          createMessage.success('复制成功~');
         }
-        createMessage.success('复制成功~');
       };
       const [registerModal, { openModal }] = useModal();
       const manageDeviceToken = async () => {
         const token = await getDeviceToken(props.deviceDetail.tbDeviceId);
         openModal(true, token);
       };
-      const copyTopic = (val) => {
-        const { isSuccessRef } = useCopyToClipboard(
-          JSON.parse(JSON.stringify(unref(val), null, 2))
-        );
-        unref(isSuccessRef);
-        createMessage.success('复制成功！');
+      const copyTopic = async (val) => {
+        await copy(JSON.parse(JSON.stringify(unref(val), null, 2)));
+        if (unref(copied)) {
+          createMessage.success('复制成功！');
+        }
       };
 
       const [registerTopicModal, { openModal: openTopicModal }] = useModal();

@@ -215,7 +215,7 @@
   import { USER_INFO_KEY } from '/@/enums/cacheEnum';
   import { getAuthCache } from '/@/utils/auth';
   import { authBtn } from '/@/enums/roleEnum';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useClipboard } from '@vueuse/core';
   import { QuestionCircleOutlined } from '@ant-design/icons-vue';
   import { Authority } from '/@/components/Authority';
   import { useRoute, useRouter } from 'vue-router';
@@ -371,10 +371,10 @@
       function goDeviceProfile(e) {
         go(PageEnum.DEVICE_PROFILE + '?name=' + String(e));
       }
-      const { clipboardRef } = useCopyToClipboard();
-      const copySN = (snCode: string) => {
-        clipboardRef.value = snCode;
-        if (unref(clipboardRef)) {
+      const { copied, copy } = useClipboard({ legacy: true });
+      const copySN = async (snCode: string) => {
+        await copy(snCode);
+        if (unref(copied)) {
           createMessage.success('复制成功~');
         }
       };

@@ -6,10 +6,11 @@ import { numberRule } from '/@/utils/rules';
 
 import { deviceConfigGetRuleChain } from '/@/api/device/deviceConfigApi';
 import { FormField, FunctionType } from './step/cpns/physical/cpns/config';
-import { h } from 'vue';
+import { h, unref } from 'vue';
 import { Tag, Tooltip } from 'ant-design-vue';
 import { EventType, EventTypeColor, EventTypeName } from '../list/cpns/tabs/EventManage/config';
-import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+
+import { useClipboard } from '@vueuse/core';
 import { useMessage } from '/@/hooks/web/useMessage';
 
 export enum Mode {
@@ -39,11 +40,11 @@ export enum ModelOfMatterPermission {
   RELEASE = 'api:yt:things_model:release',
 }
 
-const handleCopy = (value: string) => {
+const handleCopy = async (value: string) => {
   const { createMessage } = useMessage();
-  const { clipboardRef, isSuccessRef } = useCopyToClipboard(value);
-  clipboardRef.value = value;
-  if (isSuccessRef.value) createMessage.success('复制成功~');
+  const { copied, copy } = useClipboard({ legacy: true });
+  await copy(value);
+  if (unref(copied)) createMessage.success('复制成功~');
   else createMessage.error('复制失败～');
 };
 

@@ -42,7 +42,7 @@
   import useCommon from '../hook/useCommon';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { getModelTsl } from '/@/api/device/modelOfMatter';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useClipboard } from '@vueuse/core';
 
   const props = defineProps<{
     record: DeviceRecord;
@@ -58,15 +58,15 @@
 
   const activeKey = ref(FunctionType.PROPERTIES);
 
-  const { clipboardRef, isSuccessRef } = useCopyToClipboard(jsonValue.value);
-  const handleCopy = () => {
+  const { copied, copy } = useClipboard({ legacy: true });
+  const handleCopy = async () => {
     try {
       if (!jsonValue.value) {
         createMessage.warning('请输入要拷贝的内容！');
         return;
       }
-      clipboardRef.value = jsonValue.value;
-      if (unref(isSuccessRef)) createMessage.success('复制成功！');
+      await copy(jsonValue.value);
+      if (unref(copied)) createMessage.success('复制成功！');
       else createMessage.error('复制失败！');
     } catch (e) {
       console.log(e);

 import { BasicColumn } from '/@/components/Table/src/types/table';
 import { h, unref } from 'vue';
-import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+import { useClipboard } from '@vueuse/core';
 import { useMessage } from '/@/hooks/web/useMessage';
 const { createMessage } = useMessage();
 
-export const handeleCopy = (e) => {
-  const { isSuccessRef } = useCopyToClipboard(JSON.parse(JSON.stringify(unref(e), null, 2)));
-  unref(isSuccessRef);
-  createMessage.success('复制成功！');
+export const handeleCopy = async (e) => {
+  const { copied, copy } = useClipboard({ legacy: true });
+  await copy(JSON.parse(JSON.stringify(unref(e), null, 2)));
+  if (unref(copied)) {
+    createMessage.success('复制成功！');
+  }
 };
 
 export const topicTableColumn: BasicColumn[] = [

@@ -13,7 +13,7 @@
     getDeviceProfileInfoById,
     getOtaPackageInfo,
   } from '/@/api/ota';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useClipboard } from '@vueuse/core';
   import { useDownload } from '../hook/useDownload';
   import { Authority } from '/@/components/Authority';
   import { OtaPermissionKey } from '../config/config';
@@ -86,19 +86,19 @@
     });
   };
 
-  const { clipboardRef, isSuccessRef } = useCopyToClipboard('');
-  const copyPackageId = () => {
-    clipboardRef.value = otaRecord.value.id.id;
-    if (unref(isSuccessRef)) createMessage.success('复制成功');
+  const { copied, copy } = useClipboard({ legacy: true });
+  const copyPackageId = async () => {
+    await copy(otaRecord.value.id.id);
+    if (unref(copied)) createMessage.success('复制成功');
   };
 
-  const copyUrl = () => {
+  const copyUrl = async () => {
     if (!unref(otaRecord).url) {
       createMessage.warning('无直接URL');
       return;
     }
-    clipboardRef.value = otaRecord.value.url;
-    if (unref(isSuccessRef)) createMessage.success('复制成功');
+    await copy(otaRecord.value.url);
+    if (unref(copied)) createMessage.success('复制成功');
   };
 
   const setLoading = (status: boolean) => {

@@ -7,7 +7,6 @@ import { devicePage } from '/@/api/device/deviceManager';
 import { Tag } from 'ant-design-vue';
 import { DeviceRecord } from '/@/api/device/model/deviceModel';
 import { FETCH_SETTING } from '/@/components/Table/src/const';
-import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
 import { useMessage } from '/@/hooks/web/useMessage';
 import {
   BasicInfoFormField,
@@ -16,6 +15,7 @@ import {
   DeviceStatusNameEnum,
   DeviceTypeNameEnum,
 } from '../enum';
+import { useClipboard } from '@vueuse/core';
 
 export const stepConfig = ['选择流转方式', '完善配置参数'];
 
@@ -73,7 +73,7 @@ const deviceTableFormSchema: FormSchema[] = [
   },
 ];
 
-const { clipboardRef, isSuccessRef } = useCopyToClipboard();
+const { copied, copy } = useClipboard({ legacy: true });
 
 const { createMessage } = useMessage();
 
@@ -105,9 +105,9 @@ const deviceTableColumn: BasicColumn[] = [
           'div',
           {
             class: 'cursor-pointer',
-            onClick: () => {
-              clipboardRef.value = record.name;
-              if (unref(isSuccessRef)) createMessage.success('复制成功~');
+            onClick: async () => {
+              await copy(record.name);
+              if (unref(copied)) createMessage.success('复制成功~');
             },
           },
           [

@@ -8,7 +8,7 @@ import { devicePage } from '/@/api/device/deviceManager';
 import { Tag } from 'ant-design-vue';
 import { DeviceRecord } from '/@/api/device/model/deviceModel';
 import { FETCH_SETTING } from '/@/components/Table/src/const';
-import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+import { useClipboard } from '@vueuse/core';
 import { useMessage } from '/@/hooks/web/useMessage';
 
 const typeValue = ref('');
@@ -102,7 +102,7 @@ const deviceTableFormSchema: FormSchema[] = [
     },
   },
 ];
-const { clipboardRef, isSuccessRef } = useCopyToClipboard();
+const { copied, copy } = useClipboard({ legacy: true });
 const { createMessage } = useMessage();
 const deviceTableColumn: BasicColumn[] = [
   {
@@ -132,9 +132,9 @@ const deviceTableColumn: BasicColumn[] = [
           'div',
           {
             class: 'cursor-pointer',
-            onClick: () => {
-              clipboardRef.value = record.name;
-              if (unref(isSuccessRef)) createMessage.success('复制成功~');
+            onClick: async () => {
+              await copy(record.name);
+              if (unref(copied)) createMessage.success('复制成功~');
             },
           },
           [

@@ -123,7 +123,7 @@
   import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
   import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
   import { CopyOutlined } from '@ant-design/icons-vue';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { useClipboard } from '@vueuse/core';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { findDictItemByCode } from '/@/api/system/dict';
   import { QuestionCircleOutlined } from '@ant-design/icons-vue';
@@ -171,7 +171,7 @@
 
   const { createMessage } = useMessage();
 
-  const { clipboardRef, copiedRef } = useCopyToClipboard();
+  const { copied, copy } = useClipboard({ legacy: true });
 
   const aceEditor = ref();
 
@@ -236,15 +236,15 @@
     handleFormat();
   };
 
-  const handleCopy = () => {
+  const handleCopy = async () => {
     const valueRef = aceEditor.value.getValue();
     const value = unref(valueRef);
     if (!value) {
       createMessage.warning('请输入要拷贝的内容！');
       return;
     }
-    clipboardRef.value = value;
-    if (unref(copiedRef)) {
+    await copy(value);
+    if (unref(copied)) {
       createMessage.success('复制成功！');
     }
   };