Ryuiso 10 mesiacov pred
rodič
commit
eab74e0302

+ 96 - 5
Web/src/pages/page-web/projects/media/detail/components/FileInfo.vue

@@ -254,11 +254,102 @@ onMounted(async () => {
 })
 
 const onClickShare = () => {
-  const url = window.location.origin + `/mediaInfo?workspaceId=${getWorkspaceId()}&fileId=${state.currentId}`;
-  // const url2 = `https://uav.jkec.info` + `/mediaInfo?workspaceId=${getWorkspaceId()}&fileId=${state.currentId}`;
-  console.log("获取的分享url为:" + url);
-  navigator.clipboard.writeText(url);
-  message.success('分享链接已复制到剪贴板');
+  const workspaceId = getWorkspaceId();
+  const url = `https://uav.jkec.info:51443/mediaInfo?workspaceId=${workspaceId}&fileId=${state.currentId}`;
+
+  // 方法1: 使用document.execCommand (优先使用这个方法,因为兼容性好,且不会触发权限警告)
+  const copyWithExecCommand = () => {
+    try {
+      const textarea = document.createElement('textarea');
+      textarea.value = url;
+      textarea.style.position = 'fixed';
+      textarea.style.left = '-9999px';
+      textarea.style.top = '0';
+      textarea.style.opacity = '0';
+      document.body.appendChild(textarea);
+      textarea.focus();
+      textarea.select();
+
+      const success = document.execCommand('copy');
+      document.body.removeChild(textarea);
+      return success;
+    } catch (error) {
+      return false;
+    }
+  };
+
+  // 方法2: 与父窗口通信
+  const copyWithPostMessage = () => {
+    try {
+      window.parent.postMessage({
+        action: 'copyToClipboard',
+        text: url
+      }, '*');
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  // 尝试复制方法
+  (async () => {
+    // 首先尝试传统方法
+    if (copyWithExecCommand()) {
+      message.success('分享链接已复制到剪贴板');
+      return;
+    }
+
+    // 然后尝试与父窗口通信
+    if (copyWithPostMessage()) {
+      message.success('分享链接已发送到父窗口,请检查剪贴板');
+      return;
+    }
+    // 所有方法都失败,显示链接让用户手动复制
+    message.info('无法自动复制链接,请手动复制以下链接');
+    const modal = document.createElement('div');
+    modal.style.cssText = `
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 5px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.5);
+      z-index: 9999;
+      max-width: 80%;
+      color: #000;
+    `;
+
+    const urlText = document.createElement('div');
+    urlText.style.cssText = `
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      margin: 10px 0;
+      word-break: break-all;
+      background-color: #f5f5f5;
+    `;
+    urlText.textContent = url;
+
+    const closeButton = document.createElement('button');
+    closeButton.textContent = '关闭';
+    closeButton.style.cssText = `
+      padding: 5px 10px;
+      background-color: #1890ff;
+      color: #fff;
+      border: none;
+      border-radius: 3px;
+      cursor: pointer;
+    `;
+    closeButton.onclick = () => document.body.removeChild(modal);
+
+    modal.appendChild(document.createTextNode('请复制以下链接:'));
+    modal.appendChild(urlText);
+    modal.appendChild(closeButton);
+
+    document.body.appendChild(modal);
+  })();
 }
 
 // 点击下载