From f3f2f548e64fa109679199afdf9b85076b5baf87 Mon Sep 17 00:00:00 2001
From: invalid w <wangjuesix@gmail.com>
Date: Sun, 8 Oct 2023 10:50:05 +0800
Subject: [PATCH] =?UTF-8?q?Refactor=EF=BC=9A=E7=A7=BB=E9=99=A4useCopyToCli?=
 =?UTF-8?q?pboard=20hook,=20=E4=BD=BF=E7=94=A8navigator.clipboard=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E6=9B=BF=E4=BB=A3=E3=80=82close=20#2723=20(#3105)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 重写复制文本功能

* refactor: 替换复制文本示例代码

* chore: delete useCopyToClipboard hook
---
 src/components/Icon/src/IconPicker.vue        | 24 ++-----
 src/hooks/web/useCopyToClipboard.ts           | 70 -------------------
 .../setting/components/SettingFooter.vue      | 17 ++---
 src/utils/copyTextToClipboard.ts              | 12 ++++
 src/views/demo/feat/copy/index.vue            |  8 +--
 .../VFormDesign/components/PreviewCode.vue    | 11 ++-
 6 files changed, 29 insertions(+), 113 deletions(-)
 delete mode 100644 src/hooks/web/useCopyToClipboard.ts
 create mode 100644 src/utils/copyTextToClipboard.ts

diff --git a/src/components/Icon/src/IconPicker.vue b/src/components/Icon/src/IconPicker.vue
index adcf01a1..277141e8 100644
--- a/src/components/Icon/src/IconPicker.vue
+++ b/src/components/Icon/src/IconPicker.vue
@@ -65,7 +65,7 @@
   </a-input>
 </template>
 <script lang="ts" setup>
-  import { ref, watchEffect, watch, unref } from 'vue';
+  import { ref, watchEffect, watch } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
   import { ScrollContainer } from '/@/components/Container';
   import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
@@ -77,10 +77,8 @@
   import { usePagination } from '/@/hooks/web/usePagination';
   import { useDebounceFn } from '@vueuse/core';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
-  import { useMessage } from '/@/hooks/web/useMessage';
   import svgIcons from 'virtual:svg-icons-names';
-
+  import { copyText } from '/@/utils/copyTextToClipboard';
   // 没有使用别名引入，是因为WebStorm当前版本还不能正确识别，会报unused警告
   const AInput = Input;
   const APopover = Popover;
@@ -107,7 +105,7 @@
     value: propTypes.string,
     width: propTypes.string.def('100%'),
     pageSize: propTypes.number.def(140),
-    copy: propTypes.bool.def(false),
+    copy: propTypes.bool.def(true),
     mode: propTypes.oneOf<('svg' | 'iconify')[]>(['svg', 'iconify']).def('iconify'),
   });
 
@@ -125,17 +123,6 @@
 
   const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100);
 
-  let clipboardRef;
-  let isSuccessRef;
-
-  if (props.copy) {
-    const clipboard = useCopyToClipboard(props.value);
-    clipboardRef = clipboard?.clipboardRef;
-    isSuccessRef = clipboard?.isSuccessRef;
-  }
-
-  const { createMessage } = useMessage();
-
   const { getPaginationList, getTotal, setCurrentPage } = usePagination(
     currentList,
     props.pageSize,
@@ -160,10 +147,7 @@
   function handleClick(icon: string) {
     currentSelect.value = icon;
     if (props.copy) {
-      clipboardRef.value = icon;
-      if (unref(isSuccessRef)) {
-        createMessage.success(t('component.icon.copy'));
-      }
+      copyText(icon, t('component.icon.copy'));
     }
   }
 
diff --git a/src/hooks/web/useCopyToClipboard.ts b/src/hooks/web/useCopyToClipboard.ts
deleted file mode 100644
index 5072f9cd..00000000
--- a/src/hooks/web/useCopyToClipboard.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ref, watch } from 'vue';
-
-import { isDef } from '/@/utils/is';
-
-interface Options {
-  target?: HTMLElement;
-}
-export function useCopyToClipboard(initial?: string) {
-  const clipboardRef = ref(initial || '');
-  const isSuccessRef = ref(false);
-  const copiedRef = ref(false);
-
-  watch(
-    clipboardRef,
-    (str?: string) => {
-      if (isDef(str)) {
-        copiedRef.value = true;
-        isSuccessRef.value = copyTextToClipboard(str);
-      }
-    },
-    { immediate: !!initial, flush: 'sync' },
-  );
-
-  return { clipboardRef, isSuccessRef, copiedRef };
-}
-
-export function copyTextToClipboard(input: string, { target = document.body }: Options = {}) {
-  const element = document.createElement('textarea');
-  const previouslyFocusedElement = document.activeElement;
-
-  element.value = input;
-
-  element.setAttribute('readonly', '');
-
-  (element.style as any).contain = 'strict';
-  element.style.position = 'absolute';
-  element.style.left = '-9999px';
-  element.style.fontSize = '12pt';
-
-  const selection = document.getSelection();
-  let originalRange;
-  if (selection && selection.rangeCount > 0) {
-    originalRange = selection.getRangeAt(0);
-  }
-
-  target.append(element);
-  element.select();
-
-  element.selectionStart = 0;
-  element.selectionEnd = input.length;
-
-  let isSuccess = false;
-  try {
-    isSuccess = document.execCommand('copy');
-  } catch (e: any) {
-    throw new Error(e);
-  }
-
-  element.remove();
-
-  if (originalRange && selection) {
-    selection.removeAllRanges();
-    selection.addRange(originalRange);
-  }
-
-  if (previouslyFocusedElement) {
-    (previouslyFocusedElement as HTMLElement).focus();
-  }
-  return isSuccess;
-}
diff --git a/src/layouts/default/setting/components/SettingFooter.vue b/src/layouts/default/setting/components/SettingFooter.vue
index d2437959..38816391 100644
--- a/src/layouts/default/setting/components/SettingFooter.vue
+++ b/src/layouts/default/setting/components/SettingFooter.vue
@@ -29,8 +29,7 @@
   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 { copyText } from '/@/utils/copyTextToClipboard';
   import { updateColorWeak } from '/@/logics/theme/updateColorWeak';
   import { updateGrayMode } from '/@/logics/theme/updateGrayMode';
   import defaultSetting from '/@/settings/projectSetting';
@@ -49,14 +48,12 @@
       const appStore = useAppStore();
 
       function handleCopy() {
-        const { isSuccessRef } = useCopyToClipboard(
-          JSON.stringify(unref(appStore.getProjectConfig), null, 2),
-        );
-        unref(isSuccessRef) &&
-          createSuccessModal({
-            title: t('layout.setting.operatingTitle'),
-            content: t('layout.setting.operatingContent'),
-          });
+        copyText(JSON.stringify(unref(appStore.getProjectConfig), null, 2), null);
+
+        createSuccessModal({
+          title: t('layout.setting.operatingTitle'),
+          content: t('layout.setting.operatingContent'),
+        });
       }
       function handleResetSetting() {
         try {
diff --git a/src/utils/copyTextToClipboard.ts b/src/utils/copyTextToClipboard.ts
new file mode 100644
index 00000000..74fc795b
--- /dev/null
+++ b/src/utils/copyTextToClipboard.ts
@@ -0,0 +1,12 @@
+import { message } from 'ant-design-vue';
+
+export function copyText(text: string, prompt: string | null = '已成功复制到剪切板!') {
+  navigator.clipboard.writeText(text).then(
+    function () {
+      prompt && message.success(prompt);
+    },
+    function (error: Error) {
+      message.error('复制失败!' + error.message);
+    },
+  );
+}
diff --git a/src/views/demo/feat/copy/index.vue b/src/views/demo/feat/copy/index.vue
index b4420569..5525c9cf 100644
--- a/src/views/demo/feat/copy/index.vue
+++ b/src/views/demo/feat/copy/index.vue
@@ -11,9 +11,9 @@
 <script lang="ts">
   import { defineComponent, unref, ref } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { PageWrapper } from '/@/components/Page';
+  import { copyText } from '/@/utils/copyTextToClipboard';
 
   export default defineComponent({
     name: 'Copy',
@@ -21,7 +21,6 @@
     setup() {
       const valueRef = ref('');
       const { createMessage } = useMessage();
-      const { clipboardRef, copiedRef } = useCopyToClipboard();
 
       function handleCopy() {
         const value = unref(valueRef);
@@ -29,10 +28,7 @@
           createMessage.warning('请输入要拷贝的内容！');
           return;
         }
-        clipboardRef.value = value;
-        if (unref(copiedRef)) {
-          createMessage.warning('copy success！');
-        }
+        copyText(value);
       }
       return { handleCopy, value: valueRef };
     },
diff --git a/src/views/form-design/components/VFormDesign/components/PreviewCode.vue b/src/views/form-design/components/VFormDesign/components/PreviewCode.vue
index a2e36144..c34c50cf 100644
--- a/src/views/form-design/components/VFormDesign/components/PreviewCode.vue
+++ b/src/views/form-design/components/VFormDesign/components/PreviewCode.vue
@@ -19,10 +19,10 @@
 </template>
 
 <script lang="ts">
-  import { defineComponent, reactive, toRefs, unref } from 'vue';
+  import { defineComponent, reactive, toRefs } from 'vue';
   import { CodeEditor, MODE } from '/@/components/CodeEditor';
 
-  import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
+  import { copyText } from '/@/utils/copyTextToClipboard';
   import { useMessage } from '/@/hooks/web/useMessage';
 
   export default defineComponent({
@@ -58,7 +58,7 @@
       const handleExportJson = () => {
         exportData(props.editorJson);
       };
-      const { clipboardRef, copiedRef } = useCopyToClipboard();
+
       const { createMessage } = useMessage();
 
       const handleCopyJson = () => {
@@ -68,10 +68,7 @@
           createMessage.warning('代码为空！');
           return;
         }
-        clipboardRef.value = value;
-        if (unref(copiedRef)) {
-          createMessage.warning('复制成功！');
-        }
+        copyText(value);
       };
 
       return {