refactor: 简化复制到剪贴板的代码

frontend/src/views/api-test/report/component/caseReportDrawer.vue

@@ -60,6 +60,7 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { useClipboard } from '@vueuse/core';
   import { Message } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
 
@@ -76,7 +77,7 @@
   import { RouteEnum } from '@/enums/routeEnum';
 
   const appStore = useAppStore();
-
+  const { copy, isSupported } = useClipboard({ legacy: true });
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -165,23 +166,11 @@
 
       const { origin } = window.location;
       shareLink.value = `${origin}/#/${RouteEnum.SHARE}/${RouteEnum.SHARE_REPORT_CASE}${shareId}`;
-      if (navigator.clipboard) {
+      if (isSupported) {
-        navigator.clipboard.writeText(shareLink.value).then(
+        copy(shareLink.value);
-          () => {
-            Message.info(t('bugManagement.detail.shareTip'));
-          },
-          (e) => {
-            Message.error(e);
-          }
-        );
-      } else {
-        const input = document.createElement('input');
-        input.value = shareLink.value;
-        document.body.appendChild(input);
-        input.select();
-        document.execCommand('copy');
-        document.body.removeChild(input);
         Message.info(t('bugManagement.detail.shareTip'));
+      } else {
+        Message.error(t('common.copyNotSupport'));
       }
     } catch (error) {
       console.log(error);

frontend/src/views/api-test/report/component/reportDetailDrawer.vue

@@ -41,6 +41,7 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { useClipboard } from '@vueuse/core';
   import { Message } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
 
@@ -57,8 +58,9 @@
   import { RouteEnum } from '@/enums/routeEnum';
 
   const appStore = useAppStore();
-
   const { t } = useI18n();
+  const { copy, isSupported } = useClipboard({ legacy: true });
+
   const props = defineProps<{
     visible: boolean;
     reportId: string;
@@ -153,23 +155,11 @@
       shareId.value = res.shareUrl;
       const { origin } = window.location;
       shareLink.value = `${origin}/#/${RouteEnum.SHARE}/${RouteEnum.SHARE_REPORT_SCENARIO}${shareId.value}`;
-      if (navigator.clipboard) {
+      if (isSupported) {
-        navigator.clipboard.writeText(shareLink.value).then(
+        copy(shareLink.value);
-          () => {
-            Message.info(t('bugManagement.detail.shareTip'));
-          },
-          (e) => {
-            Message.error(e);
-          }
-        );
-      } else {
-        const input = document.createElement('input');
-        input.value = shareLink.value;
-        document.body.appendChild(input);
-        input.select();
-        document.execCommand('copy');
-        document.body.removeChild(input);
         Message.info(t('bugManagement.detail.shareTip'));
+      } else {
+        Message.error(t('common.copyNotSupport'));
       }
     } catch (error) {
       console.log(error);

frontend/src/views/bug-management/components/bug-detail-drawer.vue

@@ -232,6 +232,7 @@
 <script setup lang="ts">
   import { defineModel, ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
+  import { useClipboard } from '@vueuse/core';
   import { Message } from '@arco-design/web-vue';
   import { debounce } from 'lodash-es';
 
@@ -279,6 +280,7 @@
 
   const { t } = useI18n();
   const { openDeleteModal } = useModal();
+  const { copy, isSupported } = useClipboard({ legacy: true });
 
   const emit = defineEmits<{
     (e: 'submit'): void;
@@ -504,23 +506,11 @@
   function shareHandler() {
     const { origin } = window.location;
     const url = `${origin}/#${route.path}?id=${detailInfo.value.id}&pId=${appStore.currentProjectId}&orgId=${appStore.currentOrgId}`;
-    if (navigator.clipboard) {
+    if (isSupported) {
-      navigator.clipboard.writeText(url).then(
+      copy(url);
-        () => {
-          Message.info(t('bugManagement.detail.shareTip'));
-        },
-        (e) => {
-          Message.error(e);
-        }
-      );
-    } else {
-      const input = document.createElement('input');
-      input.value = url;
-      document.body.appendChild(input);
-      input.select();
-      document.execCommand('copy');
-      document.body.removeChild(input);
       Message.info(t('bugManagement.detail.shareTip'));
+    } else {
+      Message.error(t('common.copyNotSupport'));
     }
   }
 

frontend/src/views/case-management/caseManagementFeature/components/caseDetailDrawer.vue

@@ -248,6 +248,7 @@
 <script setup lang="ts">
   import { computed, ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
+  import { useClipboard } from '@vueuse/core';
   import { Message, TreeNodeData } from '@arco-design/web-vue';
   import dayjs from 'dayjs';
 
@@ -307,6 +308,8 @@
   const userStore = useUserStore();
   const { t } = useI18n();
   const { openModal } = useModal();
+  const { copy, isSupported } = useClipboard({ legacy: true });
+
   const props = defineProps<{
     visible: boolean;
     detailId: string; // 详情 id
@@ -439,23 +442,11 @@
   function shareHandler() {
     const { origin } = window.location;
     const url = `${origin}/#${route.path}?id=${detailInfo.value.id}&pId=${appStore.currentProjectId}&orgId=${appStore.currentOrgId}`;
-    if (navigator.clipboard) {
+    if (isSupported) {
-      navigator.clipboard.writeText(url).then(
+      copy(url);
-        () => {
-          Message.info(t('bugManagement.detail.shareTip'));
-        },
-        (e) => {
-          Message.error(e);
-        }
-      );
-    } else {
-      const input = document.createElement('input');
-      input.value = url;
-      document.body.appendChild(input);
-      input.select();
-      document.execCommand('copy');
-      document.body.removeChild(input);
       Message.info(t('bugManagement.detail.shareTip'));
+    } else {
+      Message.error(t('common.copyNotSupport'));
     }
   }
 

frontend/src/views/test-plan/report/detail/component/planDetailHeaderRight.vue

@@ -31,6 +31,7 @@
 </template>
 
 <script setup lang="ts">
+  import { useClipboard } from '@vueuse/core';
   import { Message } from '@arco-design/web-vue';
   import dayjs from 'dayjs';
 
@@ -51,6 +52,7 @@
 
   const appStore = useAppStore();
   const { t } = useI18n();
+  const { copy, isSupported } = useClipboard({ legacy: true });
 
   const shareLink = ref<string>('');
   const shareLoading = ref<boolean>(false);
@@ -62,23 +64,11 @@
       });
       const { origin } = window.location;
       shareLink.value = `${origin}/#/${RouteEnum.SHARE}/${RouteEnum.SHARE_REPORT_TEST_PLAN}${res.shareUrl}`;
-      if (navigator.clipboard) {
+      if (isSupported) {
-        navigator.clipboard.writeText(shareLink.value).then(
+        copy(shareLink.value);
-          () => {
-            Message.info(t('bugManagement.detail.shareTip'));
-          },
-          (e) => {
-            Message.error(e);
-          }
-        );
-      } else {
-        const input = document.createElement('input');
-        input.value = shareLink.value;
-        document.body.appendChild(input);
-        input.select();
-        document.execCommand('copy');
-        document.body.removeChild(input);
         Message.info(t('bugManagement.detail.shareTip'));
+      } else {
+        Message.error(t('common.copyNotSupport'));
       }
     } catch (error) {
       // eslint-disable-next-line no-console