Add network snapshot insights

Author: LIghtJUNction

webui/src/components/pages/NetworkSnapshotPanel.vue

@@ -1,21 +1,42 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { FileLock } from "lucide-vue-next";
+import { computed, ref, watch } from "vue";
+import { Copy, FileLock } from "lucide-vue-next";
+import Button from "@/components/ui/Button.vue";
 import Card from "@/components/ui/Card.vue";
 import { parseNetworkSnapshotSummary } from "@/composables/parsers";
+import { copyText } from "@/utils";
+import { buildNetworkSnapshotInsights, formatNetworkSnapshotReport, networkInsightTone } from "./networkSnapshotInsights";
 
 const props = defineProps<{
   topology: string;
   sysroute: string;
 }>();
 
-const snapshotText = computed(() => props.topology || props.sysroute);
+const snapshotText = computed(() => [
+  props.topology ? `[topology]\n${props.topology}` : "",
+  props.sysroute ? `[sysroute]\n${props.sysroute}` : ""
+].filter(Boolean).join("\n\n"));
 const summary = computed(() => parseNetworkSnapshotSummary(snapshotText.value));
+const insights = computed(() => buildNetworkSnapshotInsights(snapshotText.value));
+const copied = ref(false);
+
+watch(snapshotText, () => {
+  copied.value = false;
+});
+
+async function copyNetworkReport(): Promise<void> {
+  copied.value = await copyText(formatNetworkSnapshotReport(snapshotText.value, insights.value));
+}
 </script>
 
 <template>
   <Card v-if="snapshotText">
-    <h3 class="mb-2 inline-flex items-center gap-2 text-base font-semibold"><FileLock :size="17" /> 当前网络快照</h3>
+    <div class="mb-2 flex flex-wrap items-start justify-between gap-2">
+      <h3 class="inline-flex items-center gap-2 text-base font-semibold"><FileLock :size="17" /> 当前网络快照</h3>
+      <Button size="sm" variant="outline" @click="copyNetworkReport">
+        <Copy :size="15" />{{ copied ? "已复制报告" : "复制报告" }}
+      </Button>
+    </div>
     <div class="grid gap-2 sm:grid-cols-4">
       <div class="rounded-md border border-white/10 bg-white/5 p-3">
         <p class="text-xs text-zinc-500">接口</p>
@@ -34,6 +55,18 @@ const summary = computed(() => parseNetworkSnapshotSummary(snapshotText.value));
         <p class="text-lg font-semibold text-zinc-100">{{ summary.natRules }}</p>
       </div>
     </div>
+    <div class="mt-2 grid gap-2 md:grid-cols-3">
+      <div
+        v-for="item in insights"
+        :key="item.label"
+        class="rounded-md border p-3"
+        :class="networkInsightTone(item.tone)"
+      >
+        <p class="text-xs opacity-70">{{ item.label }}</p>
+        <p class="mt-1 break-words text-sm font-semibold">{{ item.value }}</p>
+        <p class="mt-1 break-words text-xs leading-5 opacity-70">{{ item.detail }}</p>
+      </div>
+    </div>
     <pre class="mt-2 max-h-[58vh] overflow-auto rounded-md bg-black p-3 text-xs leading-6 text-zinc-200 whitespace-pre-wrap">{{ snapshotText }}</pre>
   </Card>
 </template>

webui/src/components/pages/networkSnapshotInsights.ts

@@ -0,0 +1,79 @@
+export type NetworkSnapshotInsight = {
+  label: string;
+  value: string;
+  detail: string;
+  tone: "ok" | "warn" | "info";
+};
+
+export function buildNetworkSnapshotInsights(text: string): NetworkSnapshotInsight[] {
+  const lower = text.toLowerCase();
+  const interfaces = collectInterfaceNames(text);
+  const egress = interfaces.filter((name) => /^(wlan|wlp|enp|rmnet|ccmni|eth|usb|rndis|pdp|ap|swlan|wwan|cell|p2p|ppp)/i.test(name));
+  const hasTun = interfaces.some((name) => /^(tun|utun|magicnet)/i.test(name)) || /\btun\b/i.test(text);
+  const hasPolicyRule = hasSnapshotLine(text, /\bip rule:|from all fwmark\b|lookup \d+\b|lookup main\b/i);
+  const hasNat = hasSnapshotLine(text, /\bmasquerade\b|\bsnat\b|\bdnat\b|-t nat\b|chain postrouting\b/i);
+  const hasDnsRedirect = hasSnapshotLine(text, /\b(dpt:53|--dport 53|udp dpt:domain|tcp dpt:domain|redirect\b.*:53|to-ports (?:53|1053))\b/i);
+  return [
+    {
+      label: "TUN",
+      value: hasTun ? "detected" : "not detected",
+      detail: hasTun ? "快照中出现 TUN/MagicNet 接口线索。" : "未看到 TUN 接口线索，透明代理可能未生效或快照不完整。",
+      tone: hasTun ? "ok" : "warn"
+    },
+    {
+      label: "出口接口",
+      value: egress.length ? egress.slice(0, 4).join(", ") : "unknown",
+      detail: egress.length ? "检测到常见出口接口命名线索。" : "未识别常见出口接口命名线索。",
+      tone: egress.length ? "info" : "warn"
+    },
+    {
+      label: "策略路由",
+      value: hasPolicyRule ? "detected" : "not detected",
+      detail: hasPolicyRule ? "快照文本包含 policy routing 线索。" : "未看到明显 ip rule/policy route 线索。",
+      tone: hasPolicyRule ? "ok" : "warn"
+    },
+    {
+      label: "NAT",
+      value: hasNat ? "detected" : "not detected",
+      detail: hasNat ? "快照文本包含 NAT/MASQUERADE 线索。" : "未看到 NAT 线索，热点转发或共享网络需继续确认。",
+      tone: hasNat ? "ok" : "info"
+    },
+    {
+      label: "DNS 捕获",
+      value: hasDnsRedirect ? "detected" : "not detected",
+      detail: hasDnsRedirect ? "快照文本包含 53 端口 redirect 线索。" : "未看到 DNS redirect 线索，可结合 DNS 工具继续测试。",
+      tone: hasDnsRedirect ? "ok" : "info"
+    },
+    {
+      label: "规模",
+      value: `${interfaces.length} interfaces`,
+      detail: `${text.split(/\r?\n/).filter((line) => line.trim()).length} 行有效快照文本。`,
+      tone: lower.includes("error") || lower.includes("failed") ? "warn" : "info"
+    }
+  ];
+}
+
+export function formatNetworkSnapshotReport(text: string, insights: NetworkSnapshotInsight[]): string {
+  const nonEmptyLines = text.split(/\r?\n/).filter((line) => line.trim()).length;
+  return [
+    "MagicNet network snapshot",
+    `snapshot_lines=${nonEmptyLines}`,
+    "raw_snapshot=omitted",
+    ...insights.map((item) => `${item.label}=${item.value} tone=${item.tone} detail=${item.detail}`),
+  ].join("\n").trim();
+}
+
+export function networkInsightTone(tone: NetworkSnapshotInsight["tone"]): string {
+  if (tone === "ok") return "border-lime-400/20 bg-lime-400/10 text-lime-100";
+  if (tone === "warn") return "border-amber-400/30 bg-amber-400/10 text-amber-100";
+  return "border-zinc-800 bg-zinc-950 text-zinc-300";
+}
+
+function collectInterfaceNames(text: string): string[] {
+  const names = text.match(/\b(?:wlan|wlp|enp|rmnet|ccmni|eth|usb|rndis|pdp|ap|swlan|wwan|cell|p2p|ppp|veth|br|bridge|tun|utun|lo|magicnet)[\w.:-]*/gi) || [];
+  return Array.from(new Set(names.map((name) => name.replace(/:$/, ""))));
+}
+
+function hasSnapshotLine(text: string, pattern: RegExp): boolean {
+  return text.split(/\r?\n/).some((line) => pattern.test(line));
+}