Merge pull request #6 from magicds/main

fix: 复制功能兼容

app/pages/api.vue

@@ -778,6 +778,7 @@ import { ref, reactive, computed, onMounted } from 'vue'
 import { useAuthStore } from '~/stores/auth'
 import { useSettingsStore } from '~/stores/settings'
 import { useToastStore } from '~/stores/toast'
+import { copyToClipboard } from '../utils/clipboard'
 
 // 使用认证中间件
 definePageMeta({
@@ -910,7 +911,7 @@ function toggleShowKey(id) {
 
 // 复制 ApiKey
 function copyApiKey(key) {
-  navigator.clipboard.writeText(key).then(() => {
+  copyToClipboard(key).then(() => {
     toastStore.success('ApiKey 已复制到剪贴板')
   }).catch(() => {
     toastStore.error('复制失败')
@@ -959,7 +960,7 @@ fetch('${baseUrl.value}/api/upload/private', {
       break
   }
 
-  navigator.clipboard.writeText(code).then(() => {
+  copyToClipboard(code).then(() => {
     toastStore.success('代码已复制到剪贴板')
   }).catch(() => {
     toastStore.error('复制失败')

app/pages/index.vue

@@ -227,6 +227,7 @@ import { useAuthStore } from '~/stores/auth'
 import { useImagesStore } from '~/stores/images'
 import { useSettingsStore } from '~/stores/settings'
 import { useToastStore } from '~/stores/toast'
+import { copyToClipboard } from '../utils/clipboard'
 
 const authStore = useAuthStore()
 const imagesStore = useImagesStore()
@@ -472,7 +473,7 @@ function handleCopy(type, url) {
       break
   }
 
-  navigator.clipboard.writeText(text).then(() => {
+  copyToClipboard(text).then(() => {
     toastStore.success('已复制到剪贴板')
   }).catch(() => {
     toastStore.error('复制失败')
@@ -498,7 +499,7 @@ function handleCopyMultiple(type, urls) {
   }
 
   const text = texts.join('\n')
-  navigator.clipboard.writeText(text).then(() => {
+  copyToClipboard(text).then(() => {
     toastStore.success(`已复制 ${urls.length} 张图片链接到剪贴板`)
   }).catch(() => {
     toastStore.error('复制失败')

app/utils/clipboard.ts

@@ -0,0 +1,46 @@
+/**
+ * 复制文本到剪贴板
+ * 兼容处理：优先使用 navigator.clipboard，如果不可用（非 HTTPS 等）则降级使用 document.execCommand
+ * @param text 需要复制的文本
+ * @returns Promise<boolean> 是否复制成功
+ */
+export async function copyToClipboard(text: string): Promise<boolean> {
+  if (!text) return false
+
+  // 1. 尝试使用现代 API (navigator.clipboard)
+  // 注意：navigator.clipboard 在非 HTTPS 环境下可能未定义
+  if (navigator.clipboard && navigator.clipboard.writeText) {
+    try {
+      await navigator.clipboard.writeText(text)
+      return true
+    } catch (err) {
+      console.warn('navigator.clipboard.writeText failed, trying fallback', err)
+
+    }
+  }
+
+  // 2. 降级方案：使用 document.execCommand
+  try {
+    const textArea = document.createElement('textarea')
+    
+    textArea.value = text
+    textArea.style.position = 'fixed'
+    textArea.style.left = '-9999px'
+    textArea.style.top = '0'
+    textArea.style.opacity = '0'
+    textArea.setAttribute('readonly', '')
+    
+    document.body.appendChild(textArea)
+    textArea.focus()
+    textArea.select()
+    
+    const successful = document.execCommand('copy')
+    
+    document.body.removeChild(textArea)
+    
+    return successful
+  } catch (err) {
+    console.error('Fallback: Oops, unable to copy', err)
+    return false
+  }
+}