feat: 视频与控制程序合并

frontend/src/components/NetworkPanel.vue

@@ -9,10 +9,12 @@ const props = defineProps<{
 
 const updatedAt = computed(() => {
   if (!props.network?.updated_at) {
-    return '暂无'
+    return 'unavailable'
   }
   return new Date(props.network.updated_at).toLocaleString('zh-CN', { hour12: false })
 })
+
+const activeSource = computed(() => props.network?.active_control_source ?? 'none')
 </script>
 
 <template>
@@ -20,41 +22,64 @@ const updatedAt = computed(() => {
     <div class="panel-head">
       <div>
         <p class="eyebrow">Network</p>
-        <h2>链路状态</h2>
+        <h2>Session Telemetry</h2>
       </div>
       <span class="badge">{{ network?.peer_status ?? 'loading' }}</span>
     </div>
 
     <div class="stats">
       <div class="stat-card">
-        <span>延迟</span>
+        <span>Latency</span>
         <strong>{{ network?.latency_ms ?? '--' }} ms</strong>
       </div>
       <div class="stat-card">
-        <span>抖动</span>
+        <span>Jitter</span>
         <strong>{{ network?.jitter_ms ?? '--' }} ms</strong>
       </div>
       <div class="stat-card">
-        <span>丢包率</span>
-        <strong>{{ network?.packet_loss_pct ?? '--' }} %</strong>
+        <span>Active Control</span>
+        <strong>{{ activeSource }}</strong>
       </div>
       <div class="stat-card">
-        <span>信号强度</span>
-        <strong>{{ network?.signal_dbm ?? '--' }} dBm</strong>
+        <span>Lease</span>
+        <strong>{{ network?.control_lease_remaining_ms ?? '--' }} ms</strong>
       </div>
       <div class="stat-card">
-        <span>发送速率</span>
+        <span>TX Rate</span>
         <strong>{{ network?.tx_kbps ?? '--' }} kbps</strong>
       </div>
       <div class="stat-card">
-        <span>接收速率</span>
+        <span>RX Rate</span>
         <strong>{{ network?.rx_kbps ?? '--' }} kbps</strong>
       </div>
     </div>
 
     <div class="summary">
-      <p><strong>来源：</strong>{{ network?.transport ?? '暂无' }} / {{ network?.source_mode ?? '暂无' }}</p>
-      <p><strong>刷新：</strong>{{ updatedAt }}</p>
+      <p><strong>Transport:</strong> {{ network?.transport ?? 'n/a' }} / {{ network?.source_mode ?? 'n/a' }}</p>
+      <p><strong>Combined:</strong> sessions={{ network?.combined?.connected_sessions ?? '--' }} send={{ network?.combined?.send_bytes ?? '--' }}B recv={{ network?.combined?.recv_bytes ?? '--' }}B</p>
+      <p><strong>Refresh:</strong> {{ updatedAt }}</p>
+    </div>
+
+    <div class="session-grid">
+      <div class="session-card">
+        <h3>Video Session</h3>
+        <p>connected={{ network?.sessions?.video?.app?.connected ?? 0 }}</p>
+        <p>recv_bytes={{ network?.sessions?.video?.app?.recv_bytes ?? 0 }}</p>
+        <p>srtt={{ network?.sessions?.video?.kcp?.srtt_ms ?? '--' }} ms</p>
+        <p>snd_queue={{ network?.sessions?.video?.kcp?.snd_queue ?? '--' }}</p>
+      </div>
+      <div class="session-card">
+        <h3>Control Session</h3>
+        <p>connected={{ network?.sessions?.control?.app?.connected ?? 0 }}</p>
+        <p>send_bytes={{ network?.sessions?.control?.app?.send_bytes ?? 0 }}</p>
+        <p>srtt={{ network?.sessions?.control?.kcp?.srtt_ms ?? '--' }} ms</p>
+        <p>snd_queue={{ network?.sessions?.control?.kcp?.snd_queue ?? '--' }}</p>
+      </div>
+    </div>
+
+    <div class="summary">
+      <p><strong>Native UDP:</strong> {{ network?.ingress?.native_udp?.bind_addr ?? 'n/a' }} packets={{ network?.ingress?.native_udp?.packets_received ?? 0 }} invalid={{ network?.ingress?.native_udp?.invalid_packets ?? 0 }}</p>
+      <p><strong>Control Sender:</strong> {{ network?.control?.sender?.peer_id ?? 'n/a' }} -> {{ network?.control?.sender?.target_peer ?? 'n/a' }} sends={{ network?.control?.sender?.send_count ?? 0 }}</p>
     </div>
   </section>
 </template>
@@ -102,7 +127,9 @@ h2 {
   gap: 12px;
 }
 
-.stat-card {
+.stat-card,
+.summary,
+.session-card {
   padding: 14px;
   border-radius: 16px;
   background: rgba(7, 14, 26, 0.78);
@@ -120,32 +147,39 @@ h2 {
   font-size: 22px;
 }
 
-.summary {
-  padding: 14px;
-  border-radius: 16px;
-  background: rgba(7, 14, 26, 0.78);
-  border: 1px solid rgba(133, 147, 169, 0.2);
+.summary,
+.session-card {
   color: #d5dbee;
 }
 
-.summary p {
+.summary p,
+.session-card h3,
+.session-card p {
   margin: 0;
 }
 
-.summary p + p {
+.summary p + p,
+.session-card p + p {
   margin-top: 8px;
 }
 
+.session-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
 @media (max-width: 960px) {
-  .stats {
+  .stats,
+  .session-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 
 @media (max-width: 640px) {
-  .stats {
+  .stats,
+  .session-grid {
     grid-template-columns: 1fr;
   }
 }
 </style>
-