From f196b5d9abf88d8f919f65214fa03848deec17ea Mon Sep 17 00:00:00 2001
From: kura <kura@sina.com>
Date: Thu, 7 May 2026 22:16:59 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=A2=AB=E8=BF=9E=E6=8E=A5?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/file/index.vue | 68 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 62 insertions(+), 6 deletions(-)

diff --git a/src/pages/file/index.vue b/src/pages/file/index.vue
index 7ba0e38..c90de07 100644
--- a/src/pages/file/index.vue
+++ b/src/pages/file/index.vue
@@ -7,6 +7,14 @@
         我的ID: <span class="id-text">{{ myId || "等待连接..." }}</span>
         <Button type="primary" @click="copyId" v-if="myId">复制</Button>
         <Button type="link" @click="shareUrl" v-if="myId">分享</Button>
+        <span
+          v-if="connectedPeerId"
+          class="connection-badge"
+          :class="{ inbound: isInboundConnected }"
+        >
+          {{ isInboundConnected ? "被连接" : "已连接" }}:
+          <span class="connected-peer">{{ connectedPeerLabel }}</span>
+        </span>
       </div>
       <!-- 显示流量 丢包率-->
       <div class="status-info">
@@ -112,6 +120,9 @@ const isPhone = ref(false);
 const receiveLoading = ref(false);
 const myId = ref("");
 const targetId = ref("");
+const connectedPeerId = ref("");
+const connectedPeerLabel = ref("");
+const isInboundConnected = ref(false);
 const isConnected = ref(false);
 const isDesktopActive = ref(false);
 const isCallActive = ref(false);
@@ -178,6 +189,26 @@ const handleConnect = () => {
   if (!targetId.value) return;
   peer.connect(targetId.value);
 };
+
+const updateConnectedPeer = (peerId: string, inbound: boolean) => {
+  connectedPeerId.value = peerId;
+  connectedPeerLabel.value = inbound ? `${peerId.slice(0, 8)}...` : targetId.value;
+  isInboundConnected.value = inbound;
+  isConnected.value = !inbound;
+};
+
+const clearConnectedPeer = (peerId?: string) => {
+  if (peerId && connectedPeerId.value && connectedPeerId.value !== peerId) return;
+  connectedPeerId.value = "";
+  connectedPeerLabel.value = "";
+  isInboundConnected.value = false;
+  isConnected.value = false;
+};
+
+const isActivePeer = (peerId: string) => {
+  const targetPeerId = targetId.value ? sign2peerid(targetId.value) : "";
+  return peerId === connectedPeerId.value || peerId === targetPeerId;
+};
 let lastBytes = 0;
 let lastPackets = 0;
 const transInfo = ref({
@@ -241,12 +272,13 @@ onMounted(() => {
   peer.on("connection-open", ((event: CustomEvent) => {
     if (event.detail.peer == peer.remoteConnection?.peer) {
       checkBytes();
-      isConnected.value = peer.remoteConnection?.open;
+      updateConnectedPeer(event.detail.peer, false);
       fileMgrInstance.remoteRootFile.loadLocalDirectory();
       notification.success({
         message: "连接成功",
       });
     } else {
+      updateConnectedPeer(event.detail.peer, true);
       notification.success({
         message: "出现新的连接",
       });
@@ -254,7 +286,7 @@ onMounted(() => {
   }) as EventListener);
 
   peer.on("peer-disconnected", ((event: CustomEvent) => {
-    isConnected.value = peer.remoteConnection?.open;
+    clearConnectedPeer(event.detail.peer);
     isDesktopActive.value = false;
     isCallActive.value = false;
     notification.error({
@@ -270,7 +302,7 @@ onMounted(() => {
   }) as EventListener);
 
   peer.on("stream", ((event: CustomEvent) => {
-    if (event.detail.peerId !== sign2peerid(targetId.value)) return;
+    if (!isActivePeer(event.detail.peerId)) return;
     if (event.detail.type === "desktop") {
       isDesktopActive.value = true;
     } else if (event.detail.type === "call") {
@@ -279,19 +311,19 @@ onMounted(() => {
   }) as EventListener);
 
   peer.on("desktop-started", ((event: CustomEvent) => {
-    if (event.detail.peerId === sign2peerid(targetId.value)) {
+    if (isActivePeer(event.detail.peerId)) {
       isDesktopActive.value = true;
     }
   }) as EventListener);
 
   peer.on("call-started", ((event: CustomEvent) => {
-    if (event.detail.peerId === sign2peerid(targetId.value)) {
+    if (isActivePeer(event.detail.peerId)) {
       isCallActive.value = true;
     }
   }) as EventListener);
 
   peer.on("media-ended", ((event: CustomEvent) => {
-    if (event.detail.peerId !== sign2peerid(targetId.value)) return;
+    if (!isActivePeer(event.detail.peerId)) return;
     if (event.detail.type === "desktop") {
       isDesktopActive.value = false;
     } else if (event.detail.type === "call") {
@@ -324,6 +356,30 @@ onMounted(() => {
   align-items: center;
   gap: 10px;
 }
+
+.connection-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border: 1px solid #95de64;
+  border-radius: 999px;
+  background: #f6ffed;
+  color: #389e0d;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.connection-badge.inbound {
+  border-color: #91caff;
+  background: #e6f4ff;
+  color: #0958d9;
+}
+
+.connected-peer {
+  font-family: monospace;
+}
+
 .connect-item {
   display: flex;
   align-items: center;