Merge pull request #264 from Aqr-K/fix-copy

package.json

@@ -32,6 +32,7 @@
     "apexcharts-clevision": "^3.28.5",
     "axios": "1.6.8",
     "colorthief": "^2.4.0",
+    "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.10",
     "express": "^4.18.2",
     "express-http-proxy": "^2.0.0",

src/@core/utils/navigator.ts

@@ -1,3 +1,5 @@
+import copy from 'copy-to-clipboard'
+
 // 请求和获取剪贴板内容
 export async function getClipboardContent() {
   if (navigator.clipboard && window.isSecureContext) {
@@ -13,20 +15,10 @@ export async function getClipboardContent() {
   }
 }
 
-// 将内容复制到剪贴板，兼容非安全域场景
+// 将内容复制到剪贴板
 export async function copyToClipboard(content: string) {
-  if (navigator.clipboard && window.isSecureContext) {
-    await navigator.clipboard.writeText(content)
-  } else {
-    const input = document.createElement('textarea')
-    input.value = content
-    document.body.appendChild(input)
-    // 阻止事件冒泡到其他元素，确保 focusin 事件只在 textarea 元素上处理，不会影响其他元素
-    input.addEventListener('focusin', e => e.stopPropagation())
-    input.select()
-    document.execCommand('copy')
-    document.body.removeChild(input)
-  }
+  const success = copy(content)
+  return success
 }
 
 // VAPID公钥转Uint8Array

src/components/cards/FilterRuleGroupCard.vue

@@ -101,7 +101,7 @@ function filterCardClose(pri: string) {
 }
 
 // 分享规则
-function shareRules() {
+async function shareRules() {
   if (filterRuleCards.value.length === 0) return
 
   const value = filterRuleCards.value
@@ -110,8 +110,10 @@ function shareRules() {
     .join('>')
 
   try {
-    copyToClipboard(value)
-    $toast.success('优先级规则已复制到剪贴板')
+    let success
+    success = copyToClipboard(value)
+    if (await success) $toast.success('优先级规则已复制到剪贴板！')
+    else $toast.error('优先级规则复制失败：可能是浏览器不支持或被用户阻止！')
   } catch (error) {
     $toast.error('优先级规则复制失败！')
     console.error(error)

src/views/setting/AccountSettingRule.vue

@@ -147,7 +147,7 @@ function addFilterRuleGroup() {
 }
 
 // 分享规则
-function shareRules(rules: CustomRule[] | FilterRuleGroup[]) {
+async function shareRules(rules: CustomRule[] | FilterRuleGroup[], type: string) {
   if (!rules || rules.length === 0) return
 
   // 将卡片规则接装为字符串
@@ -155,10 +155,13 @@ function shareRules(rules: CustomRule[] | FilterRuleGroup[]) {
 
   // 复制到剪贴板
   try {
-    copyToClipboard(value)
-    $toast.success('优先级规则已复制到剪贴板')
-  } catch (error) {
-    $toast.error('优先级规则复制失败！')
+    let success
+    success = copyToClipboard(value)
+    if (await success) $toast.success(`${type === 'custom' ? '自定义规则' : '优先级规则组'}已复制到剪贴板！`)
+    else $toast.error(`${type === 'custom' ? '自定义规则' : '优先级规则组'}复制失败：可能是浏览器不支持或被用户阻止！`)
+  } catch (e) {
+    $toast.error(`${type === 'custom' ? '自定义规则' : '优先级规则组'}复制失败！`)
+    console.error(e)
   }
 }
 
@@ -382,7 +385,7 @@ onMounted(() => {
                 <VBtn color="primary" variant="tonal" @click="importRules('custom')">
                   <VIcon icon="mdi-import" />
                 </VBtn>
-                <VBtn color="info" variant="tonal" @click="shareRules(customRules)">
+                <VBtn color="info" variant="tonal" @click="shareRules(customRules, 'custom')">
                   <VIcon icon="mdi-share" />
                 </VBtn>
                 <VBtn color="error" variant="tonal" @click="deleteAllRules('custom')">
@@ -433,7 +436,7 @@ onMounted(() => {
                 <VBtn color="primary" variant="tonal" @click="importRules('group')">
                   <VIcon icon="mdi-import" />
                 </VBtn>
-                <VBtn color="info" variant="tonal" @click="shareRules(filterRuleGroups)">
+                <VBtn color="info" variant="tonal" @click="shareRules(filterRuleGroups, 'group')">
                   <VIcon icon="mdi-share" />
                 </VBtn>
                 <VBtn color="error" variant="tonal" @click="deleteAllRules('group')">

src/views/setting/AccountSettingSystem.vue

@@ -200,10 +200,12 @@ async function saveAdvancedSettings() {
 }
 
 // 快捷复制到剪贴板
-function copyValue(value: string) {
+async function copyValue(value: string) {
   try {
-    copyToClipboard(value)
-    $toast.success('已复制到剪贴板')
+    let success
+    success = copyToClipboard(value)
+    if (await success) $toast.success('已复制到剪贴板！')
+    else $toast.error(`复制失败：可能是浏览器不支持或被用户阻止！`)
   } catch (error) {
     $toast.error('复制失败！')
     console.log(error)

yarn.lock

@@ -3101,6 +3101,13 @@ cookie@0.6.0:
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
   integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
 
+copy-to-clipboard@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz#55ac43a1db8ae639a4bd99511c148cdd1b83a1b0"
+  integrity sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.31.0, core-js-compat@^3.36.1:
   version "3.37.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.37.1.tgz#c844310c7852f4bdf49b8d339730b97e17ff09ee"