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: {{ myId || "等待连接..." }}
+
+ {{ isInboundConnected ? "被连接" : "已连接" }}:
+ {{ connectedPeerLabel }}
+
@@ -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;