增加被连接样式

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;