From 096d5f03da09911c0dec885e73c1847dbe52fa7a Mon Sep 17 00:00:00 2001
From: leizi97 <leizi97@126.com>
Date: Sun, 17 Nov 2024 22:09:32 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0nat=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/member.vue | 62 +++++++++++++++++++++++++-----------------------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/pages/member.vue b/pages/member.vue
index 6f95da2..e90119c 100644
--- a/pages/member.vue
+++ b/pages/member.vue
@@ -6,25 +6,21 @@
 				stripe
 				border
 				:data="data.member"
-				v-else
-			>
+				v-else>
 				<ElTableColumn
 					sortable
 					width="140"
 					label="主机名"
-					prop="hostname"
-				></ElTableColumn>
+					prop="hostname"></ElTableColumn>
 				<ElTableColumn
 					sortable
 					width="90"
 					prop="cost"
-					label="路由"
-				>
+					label="路由">
 					<template #default="{ row }">
 						<ElTag
 							effect="dark"
-							:type="row.cost == 'p2p' ? 'success' : 'info'"
-						>
+							:type="row.cost == 'p2p' ? 'success' : 'info'">
 							{{ row.cost }}
 						</ElTag>
 					</template>
@@ -33,20 +29,17 @@
 					sortable
 					width="120"
 					prop="ipv4"
-					label="虚拟网IP"
-				></ElTableColumn>
+					label="虚拟网IP"></ElTableColumn>
 				<ElTableColumn
 					sortable
 					prop="lat_ms"
 					width="130"
-					label="延迟/ms"
-				></ElTableColumn>
+					label="延迟/ms"></ElTableColumn>
 				<ElTableColumn
 					sortable
 					width="120"
 					prop="loss_rate"
-					label="丢包率"
-				>
+					label="丢包率">
 					<template #default="{ row }">
 						{{ row.loss_rate && row.loss_rate != "-" ? Number(row.loss_rate * 100).toFixed(2) + "%" : row.loss_rate }}
 					</template>
@@ -55,8 +48,7 @@
 					sortable
 					width="120"
 					label="nat_type"
-					prop="NAT类型"
-				>
+					prop="NAT类型">
 					<template #default="{ row }">
 						{{ natMaps[row.nat_type.toLowerCase() as natKyes] || row.nat_type || "-" }}
 					</template>
@@ -64,8 +56,7 @@
 				<ElTableColumn
 					sortable
 					prop="version"
-					label="版本"
-				></ElTableColumn>
+					label="版本"></ElTableColumn>
 			</ElTable>
 		</div>
 	</div>
@@ -74,24 +65,35 @@
 	import { invoke } from "@tauri-apps/api/core";
 	import { reactive, onMounted, onBeforeUnmount } from "vue";
 	import { parsePeerInfo } from "@/utils";
-
+	// 	enum NatType {
+	//   // has NAT; but own a single public IP, port is not changed
+	//   Unknown = 0;
+	//   OpenInternet = 1;
+	//   NoPAT = 2;
+	//   FullCone = 3;
+	//   Restricted = 4;
+	//   PortRestricted = 5;
+	//   Symmetric = 6;
+	//   SymUdpFirewall = 7;
+	//   SymmetricEasyInc = 8;
+	//   SymmetricEasyDec = 9;
+	// }
 	const natMaps = {
 		unknown: "未知",
-		nopat: "nat0",
+		OpenInternet: "nat0-openinternet",
+		nopat: "nat0-nopat",
 		fullcone: "nat1",
 		restricted: "nat2",
-		addressrestricted: "nat2",
 		portrestricted: "nat3",
-		symmetric: "nat4"
+		symmetric: "nat4",
+		SymmetricEasyDec: "nat4-easydec",
+		SymmetricEasyInc: "nat4-easyinc",
+		SymUdpFirewall: "nat4-udpfirewall",
 	};
 	type natKyes = keyof typeof natMaps;
-	// NAT1: Full Cone NAT，全锥形NAT，这是最宽松的网络环境，你想做什么，基本没啥限制IP和端口都不受限。
-	// NAT2: Address-Restricted Cone NAT，受限锥型NAT，相比NAT1，NAT2 增加了地址限制，也就是IP受限，而端口不受限。
-	// NAT3: Port-Restricted Cone NAT，端口受限锥型，相比NAT2，NAT3 又增加了端口限制，也就是说IP、端口都受限。
-	// NAT4: Symmetric NAT，对称型NAT，对称型NAT具有端口受限锥型的受限特性，内部地址每一次请求一个特定的外部地址，
-	// 都可能会绑定到一个新的端口号。也就是请求不同的外部地址映射的端口号是可能不同的。这种类型基本上就告别 P2P 了。
+
 	const data = reactive<{ member: any[] }>({
-		member: []
+		member: [],
 	});
 
 	const _showTableHeader = [
@@ -101,13 +103,13 @@
 		["lat_ms", "延迟/ms"],
 		["loss_rate", "丢包率"],
 		["nat_type", "NAT类型"],
-		["version", "版本"]
+		["version", "版本"],
 	];
 
 	const listenOutput = async () => {
 		const member = await invoke<string>("get_members_by_cli");
 		const peerInfo = parsePeerInfo(member);
-		peerInfo.forEach(value => {
+		peerInfo.forEach((value) => {
 			if (value.cost === "Local") {
 				value.cost = "本机";
 			}