diff --git a/src/pages/file/index.vue b/src/pages/file/index.vue index c5e3831..0d5a6c4 100644 --- a/src/pages/file/index.vue +++ b/src/pages/file/index.vue @@ -14,6 +14,13 @@ > {{ isInboundConnected ? "被连接" : "已连接" }}: {{ connectedPeerLabel }} + @@ -68,7 +75,11 @@ :placeholder="!myId ? '请稍后...' : '输入对方ID'" :disabled="isConnected || !myId" /> - @@ -138,8 +149,10 @@ const myId = ref(""); const targetId = ref(""); const connectedPeerId = ref(""); const connectedPeerLabel = ref(""); +const connectedPeerSign = ref(""); const isInboundConnected = ref(false); const isConnected = ref(false); +const isConnecting = ref(false); const isDesktopActive = ref(false); const isCallActive = ref(false); const isCameraActive = ref(false); @@ -205,6 +218,20 @@ const copyId = async () => { } } }; + +const copyPeerSign = async () => { + if (connectedPeerSign.value) { + try { + await copyToClipboard(connectedPeerSign.value); + notification.success({ + message: "ID已复制", + description: "已成功复制到剪贴板,可用于发起连接", + }); + } catch { + notification.error({ message: "复制失败" }); + } + } +}; //复制到剪贴板 const copyToClipboard = async (text: string) => { await navigator.clipboard.writeText(text); @@ -213,22 +240,29 @@ const copyToClipboard = async (text: string) => { // 连接处理 const handleConnect = () => { if (!targetId.value) return; + isConnecting.value = true; peer.connect(targetId.value); }; const updateConnectedPeer = (peerId: string, inbound: boolean) => { connectedPeerId.value = peerId; - connectedPeerLabel.value = inbound ? `${peerId.slice(0, 8)}...` : targetId.value; + connectedPeerLabel.value = inbound + ? `${peerId.slice(0, 8)}...` + : targetId.value; isInboundConnected.value = inbound; isConnected.value = !inbound; + isConnecting.value = false; }; const clearConnectedPeer = (peerId?: string) => { - if (peerId && connectedPeerId.value && connectedPeerId.value !== peerId) return; + if (peerId && connectedPeerId.value && connectedPeerId.value !== peerId) + return; connectedPeerId.value = ""; connectedPeerLabel.value = ""; + connectedPeerSign.value = ""; isInboundConnected.value = false; isConnected.value = false; + isConnecting.value = false; }; const isActivePeer = (peerId: string) => { @@ -269,8 +303,8 @@ const handleReceive = async () => { .getFile( false, localCurrentFile.value.path.replace(rootFile.path, ""), - remoteCurrentFile.value.path - ) + remoteCurrentFile.value.path, + ), ); }); await Promise.all(getFileHandles); @@ -321,7 +355,17 @@ onMounted(() => { }); }) as EventListener); + peer.on("exchange-sign", ((event: CustomEvent) => { + if (event.detail.peerId === connectedPeerId.value) { + connectedPeerSign.value = event.detail.sign; + if (isInboundConnected.value) { + connectedPeerLabel.value = event.detail.sign; + } + } + }) as EventListener); + peer.on("error", ((event: CustomEvent) => { + isConnecting.value = false; notification.error({ message: "发生错误", }); @@ -368,7 +412,6 @@ onMounted(() => { } }) as EventListener); }); -