新增对方id传递

src/pages/file/index.vue

@@ -14,6 +14,13 @@
         >
           {{ isInboundConnected ? "被连接" : "已连接" }}:
           <span class="connected-peer">{{ connectedPeerLabel }}</span>
+          <Button
+            v-if="isInboundConnected && connectedPeerSign"
+            type="link"
+            size="small"
+            @click="copyPeerSign"
+            >复制</Button
+          >
         </span>
       </div>
       <!-- 显示流量 丢包率-->
@@ -68,7 +75,11 @@
           :placeholder="!myId ? '请稍后...' : '输入对方ID'"
           :disabled="isConnected || !myId"
         />
-        <Button @click="handleConnect" :disabled="!targetId || isConnected">
+        <Button
+          @click="handleConnect"
+          :disabled="!targetId || isConnected"
+          :loading="isConnecting"
+        >
           {{ isConnected ? "已连接" : "连接" }}
         </Button>
       </div>
@@ -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);
 });
-
 </script>
 
 <style scoped>

src/pages/file/utils/peer.ts

@@ -231,6 +231,14 @@ class Peer extends EventTarget {
     });
 
     conn.on("open", () => {
+      this.send(
+        {
+          type: MessageType.exchange_sign,
+          data: this.sign,
+        },
+        conn,
+        true,
+      ).catch(() => {});
       this.dispatchEvent(
         new CustomEvent("connection-open", {
           detail: { peer: conn.peer, conn: conn },
@@ -829,6 +837,13 @@ class Peer extends EventTarget {
                 : "call",
           );
           break;
+        case MessageType.exchange_sign:
+          this.dispatchEvent(
+            new CustomEvent("exchange-sign", {
+              detail: { peerId: conn.peer, sign: remoteD },
+            }),
+          );
+          break;
         default:
           resData.type = MessageType.error;
           resData.data = "未知消息类型";
@@ -878,6 +893,7 @@ export enum MessageType {
   end_call = "end_call",
   end_desktop = "end_desktop",
   end_camera = "end_camera",
+  exchange_sign = "exchange_sign",
 }
 export enum Permission {
   edit = "edit",