🎈 perf: 优化 copy 兼容性

src/components/MarkdownView/index.vue

@@ -17,7 +17,7 @@ const props = defineProps({
 })
 
 const message = useMessage() // 消息弹窗
-const { copy } = useClipboard() // 初始化 copy 到粘贴板
+const { copy } = useClipboard({ legacy: true }) // 初始化 copy 到粘贴板
 const contentRef = ref()
 
 const md = new MarkdownIt({

src/layout/components/Setting/src/Setting.vue

@@ -109,6 +109,7 @@ watch(
 // 拷贝
 const copyConfig = async () => {
   const { copy, copied, isSupported } = useClipboard({
+    legacy: true,
     source: `
       // 面包屑
       breadcrumb: ${appStore.getBreadcrumb},
@@ -296,7 +297,7 @@ const clear = () => {
 $prefix-cls: #{$namespace}-setting;
 
 .#{$prefix-cls} {
+  z-index: 1200; /* 修正没有z-index会被表格层覆盖,值不要超过4000 */
   border-radius: 6px 0 0 6px;
-  z-index: 1200;/*修正没有z-index会被表格层覆盖,值不要超过4000*/
 }
 </style>

src/views/ai/chat/index/components/message/MessageList.vue

@@ -126,7 +126,7 @@ import userAvatarDefaultImg from '@/assets/imgs/avatar.gif'
 import roleAvatarDefaultImg from '@/assets/ai/gpt.svg'
 
 const message = useMessage() // 消息弹窗
-const { copy } = useClipboard() // 初始化 copy 到粘贴板
+const { copy } = useClipboard({ legacy: true }) // 初始化 copy 到粘贴板
 const userStore = useUserStore()
 
 // 判断“消息列表”滚动的位置(用于判断是否需要滚动到消息最下方)

src/views/ai/write/index/components/Right.vue

@@ -45,7 +45,7 @@
 import { useClipboard } from '@vueuse/core'
 
 const message = useMessage() // 消息弹窗
-const { copied, copy } = useClipboard() // 粘贴板
+const { copied, copy } = useClipboard({ legacy: true }) // 粘贴板
 
 const props = defineProps({
   content: {

src/views/infra/build/index.vue

@@ -136,7 +136,7 @@ const makeTemplate = () => {
 /** 复制 **/
 const copy = async (text: string) => {
   const textToCopy = JSON.stringify(text, null, 2)
-  const { copy, copied, isSupported } = useClipboard({ source: textToCopy })
+  const { copy, copied, isSupported } = useClipboard({ legacy: true, source: textToCopy })
   if (!isSupported) {
     message.error(t('common.copyError'))
   } else {

src/views/infra/codegen/PreviewCode.vue

@@ -180,7 +180,7 @@ const handleFiles = (datas: CodegenApi.CodegenPreviewVO[]) => {
 
 /** 复制 **/
 const copy = async (text: string) => {
-  const { copy, copied, isSupported } = useClipboard({ source: text })
+  const { copy, copied, isSupported } = useClipboard({ legacy: true, source: text })
   if (!isSupported) {
     message.error(t('common.copyError'))
     return

src/views/infra/file/index.vue

@@ -136,6 +136,7 @@ import { fileSizeFormatter } from '@/utils'
 import { dateFormatter } from '@/utils/formatTime'
 import * as FileApi from '@/api/infra/file'
 import FileForm from './FileForm.vue'
+import { useClipboard } from '@vueuse/core'
 
 defineOptions({ name: 'InfraFile' })
 
@@ -186,29 +187,15 @@ const openForm = () => {
 }
 
 /** 复制到剪贴板方法 */
-const copyToClipboard = (text: string) => {
+const copyToClipboard = async (text: string) => {
-  if (navigator.clipboard && window.isSecureContext) {
+  const { copy, copied, isSupported } = useClipboard({ legacy: true, source: text })
-    navigator.clipboard
+  if (!isSupported) {
-      .writeText(text)
+    message.error(t('common.copyError'))
-      .then(() => {
+    return
-        message.success('复制成功')
+  }
-      })
+  await copy()
-      .catch(() => {
+  if (unref(copied)) {
-        message.error('复制失败')
+    message.success(t('common.copySuccess'))
-      })
-  } else {
-    // 兼容不支持 clipboard 的情况
-    try {
-      const textarea = document.createElement('textarea')
-      textarea.value = text
-      document.body.appendChild(textarea)
-      textarea.select()
-      document.execCommand('copy')
-      document.body.removeChild(textarea)
-      message.success('复制成功')
-    } catch (error) {
-      message.error('复制失败')
-    }
   }
 }
 

src/views/iot/device/device/detail/DeviceDetailsHeader.vue

@@ -39,8 +39,10 @@
 import DeviceForm from '@/views/iot/device/device/DeviceForm.vue'
 import { ProductVO } from '@/api/iot/product/product'
 import { DeviceVO } from '@/api/iot/device/device'
+import { useClipboard } from '@vueuse/core'
 
 const message = useMessage()
+const { t } = useI18n() // 国际化
 const router = useRouter()
 
 const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>()
@@ -54,11 +56,14 @@ const openForm = (type: string, id?: number) => {
 
 /** 复制到剪贴板方法 */
 const copyToClipboard = async (text: string) => {
-  try {
+  const { copy, copied, isSupported } = useClipboard({ legacy: true, source: text })
-    await navigator.clipboard.writeText(text)
+  if (!isSupported) {
-    message.success('复制成功')
+    message.error(t('common.copyError'))
-  } catch (error) {
+    return
-    message.error('复制失败')
+  }
+  await copy()
+  if (unref(copied)) {
+    message.success(t('common.copySuccess'))
   }
 }
 

src/views/iot/device/device/detail/DeviceDetailsInfo.vue

@@ -140,8 +140,10 @@ import { DeviceVO } from '@/api/iot/device/device'
 import { DeviceApi, IotDeviceAuthInfoVO } from '@/api/iot/device/device'
 import Map from '@/components/Map/index.vue'
 import { ref, computed } from 'vue'
+import { useClipboard } from '@vueuse/core'
 
 const message = useMessage() // 消息提示
+const { t } = useI18n() // 国际化
 
 const { product, device } = defineProps<{ product: ProductVO; device: DeviceVO }>() // 定义 Props
 const emit = defineEmits(['refresh']) // 定义 Emits
@@ -165,11 +167,14 @@ const getLocationString = () => {
 
 /** 复制到剪贴板方法 */
 const copyToClipboard = async (text: string) => {
-  try {
+  const { copy, copied, isSupported } = useClipboard({ legacy: true, source: text })
-    await navigator.clipboard.writeText(text)
+  if (!isSupported) {
-    message.success('复制成功')
+    message.error(t('common.copyError'))
-  } catch (error) {
+    return
-    message.error('复制失败')
+  }
+  await copy()
+  if (unref(copied)) {
+    message.success(t('common.copySuccess'))
   }
 }
 

src/views/iot/product/product/detail/ProductDetailsHeader.vue

@@ -54,18 +54,23 @@
 <script setup lang="ts">
 import ProductForm from '@/views/iot/product/product/ProductForm.vue'
 import { ProductApi, ProductVO } from '@/api/iot/product/product'
+import { useClipboard } from '@vueuse/core'
 
 const message = useMessage()
+const { t } = useI18n() // 国际化
 
 const { product } = defineProps<{ product: ProductVO }>() // 定义 Props
 
 /** 复制到剪贴板方法 */
 const copyToClipboard = async (text: string) => {
-  try {
+  const { copy, copied, isSupported } = useClipboard({ legacy: true, source: text })
-    await navigator.clipboard.writeText(text)
+  if (!isSupported) {
-    message.success('复制成功')
+    message.error(t('common.copyError'))
-  } catch (error) {
+    return
-    message.error('复制失败')
+  }
+  await copy()
+  if (unref(copied)) {
+    message.success(t('common.copySuccess'))
   }
 }