From 3d4ae9bfb8c9e4390aa52b8f188eea0d1f0628ac Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Mon, 12 Jan 2026 00:21:05 +0800
Subject: [PATCH 01/36] feat(ui): add proxy monitoring view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 新增代理监控页面和侧边栏入口。
  - 添加代理总览卡片、筛选与状态样式。
- 影响:
  - 新增代理可视化监控入口。
- 兼容性/行为变更:
  - 无。
- 依赖/环境:
  - 无。
- 验证:
  - 未运行（仅 UI 变更）。

[English]
- Changes:
  - Add proxy monitoring page and navigation entry.
  - Style cards, filters, and status badges for proxy overview.
- Impact:
  - Adds a new UI section for proxy visibility.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run (UI-only change).
Refs:
- N/A
---
 web-ui/src/App.vue                         |   6 +
 web-ui/src/components/ProxyMonitorView.vue | 158 ++++++++++
 web-ui/src/style.css                       | 321 +++++++++++++++++++++
 3 files changed, 485 insertions(+)
 create mode 100644 web-ui/src/components/ProxyMonitorView.vue

diff --git a/web-ui/src/App.vue b/web-ui/src/App.vue
index 1a28cf1..3f8ba23 100644
--- a/web-ui/src/App.vue
+++ b/web-ui/src/App.vue
@@ -7,6 +7,7 @@ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { tags } from '@lezer/highlight'
 import ManualView from './components/ManualView.vue'
 import ScriptsView from './components/ScriptsView.vue'
+import ProxyMonitorView from './components/ProxyMonitorView.vue'
 import DropdownSelect from './components/DropdownSelect.vue'
 import { yaml as yamlLanguage } from '@codemirror/lang-yaml'
 
@@ -1698,6 +1699,10 @@ function unlockSidebarWidth() {
             <span class="material-symbols-outlined">smart_toy</span>
             <span>自动脚本</span>
           </button>
+          <button class="nav-item" :class="{ active: currentView === 'proxy' }" @click="currentView = 'proxy'">
+            <span class="material-symbols-outlined">settings_input_hdmi</span>
+            <span>代理监控</span>
+          </button>
           <button class="nav-item" :class="{ active: currentView === 'channels' }" @click="currentView = 'channels'">
             <span class="material-symbols-outlined">cloud_queue</span>
             <span>通道</span>
@@ -1724,6 +1729,7 @@ function unlockSidebarWidth() {
       <main class="main">
         <ManualView v-if="currentView === 'manual'" />
         <ScriptsView v-else-if="currentView === 'scripts'" />
+        <ProxyMonitorView v-else-if="currentView === 'proxy'" />
 
   <section v-else-if="currentView === 'channels'" class="page">
   <header class="page-header spaced">
diff --git a/web-ui/src/components/ProxyMonitorView.vue b/web-ui/src/components/ProxyMonitorView.vue
new file mode 100644
index 0000000..e26d460
--- /dev/null
+++ b/web-ui/src/components/ProxyMonitorView.vue
@@ -0,0 +1,158 @@
+<script setup>
+import { computed, ref } from 'vue'
+
+const filterTabs = ['全部代理', '正在运行', '已停止', '异常']
+const activeFilter = ref(filterTabs[0])
+
+const proxies = ref([
+  {
+    id: 'proxy-com3',
+    name: 'COM3 - Sensor Node A',
+    subtitle: '8-N-1 · 异步串行',
+    status: 'running',
+    statusLabel: 'RUNNING',
+    baud: '115200',
+    bandwidth: '12.4 KB/s',
+    spark: 'M0 35 L 10 35 L 10 10 L 25 10 L 25 35 L 40 35 L 40 5 L 55 5 L 55 35 L 70 35 L 70 15 L 85 15 L 85 35 L 100 35',
+    active: true,
+    toggleLabel: 'Active',
+  },
+  {
+    id: 'proxy-com7',
+    name: 'COM7 - Motor Controller',
+    subtitle: '8-E-1 · RS-485',
+    status: 'stopped',
+    statusLabel: 'STOPPED',
+    baud: '9600',
+    bandwidth: '0.0 KB/s',
+    spark: 'M0 35 L 100 35',
+    active: false,
+    toggleLabel: 'Inactive',
+  },
+  {
+    id: 'proxy-com1',
+    name: 'COM1 - GPS Module',
+    subtitle: '7-N-2 · NMEA-0183',
+    status: 'error',
+    statusLabel: 'ERROR',
+    baud: '4800',
+    bandwidth: '0.4 KB/s',
+    spark: 'M0 35 L 5 35 L 5 10 L 10 10 L 10 35 L 15 35 L 15 10 L 20 10 L 20 35 L 90 35 L 90 5 L 95 5 L 95 35 L 100 35',
+    active: true,
+    toggleLabel: 'Faulty',
+  },
+])
+
+const filteredProxies = computed(() => {
+  if (activeFilter.value === '全部代理') return proxies.value
+  if (activeFilter.value === '正在运行') {
+    return proxies.value.filter((proxy) => proxy.status === 'running')
+  }
+  if (activeFilter.value === '已停止') {
+    return proxies.value.filter((proxy) => proxy.status === 'stopped')
+  }
+  if (activeFilter.value === '异常') {
+    return proxies.value.filter((proxy) => proxy.status === 'error')
+  }
+  return proxies.value
+})
+</script>
+
+<template>
+  <section class="page proxy-page">
+    <header class="page-header spaced proxy-hero">
+      <div>
+        <h2>代理监控</h2>
+        <p>管理串口 COM 代理通道，监控物理层实时数据流与连接状态。</p>
+      </div>
+      <div class="header-actions">
+        <button class="btn btn-outline" type="button">
+          <span class="material-symbols-outlined">refresh</span>
+          刷新状态
+        </button>
+        <button class="btn btn-primary" type="button">
+          <span class="material-symbols-outlined">add</span>
+          新增代理
+        </button>
+      </div>
+    </header>
+
+    <div class="proxy-filters">
+      <button
+        v-for="tab in filterTabs"
+        :key="tab"
+        class="proxy-filter"
+        :class="{ active: activeFilter === tab }"
+        type="button"
+        @click="activeFilter = tab"
+      >
+        {{ tab }}
+      </button>
+    </div>
+
+    <div class="proxy-grid">
+      <article v-for="proxy in filteredProxies" :key="proxy.id" class="proxy-card">
+        <div class="proxy-card-header">
+          <div class="proxy-title">
+            <div class="proxy-icon" :class="`accent-${proxy.status}`">
+              <span class="material-symbols-outlined">settings_input_hdmi</span>
+            </div>
+            <div>
+              <h3>{{ proxy.name }}</h3>
+              <p class="proxy-subtitle">{{ proxy.subtitle }}</p>
+            </div>
+          </div>
+          <span class="proxy-status" :class="proxy.status">
+            <span class="dot"></span>
+            {{ proxy.statusLabel }}
+          </span>
+        </div>
+
+        <div class="proxy-card-body">
+          <div class="proxy-metric">
+            <span>波特率</span>
+            <strong>{{ proxy.baud }}</strong>
+          </div>
+          <div class="proxy-metric">
+            <span>实时带宽</span>
+            <strong>{{ proxy.bandwidth }}</strong>
+          </div>
+          <div class="proxy-sparkline" :class="proxy.status">
+            <svg viewBox="0 0 100 40" preserveAspectRatio="none">
+              <path :d="proxy.spark" />
+            </svg>
+          </div>
+        </div>
+
+        <div class="proxy-card-footer">
+          <div class="proxy-toggle-wrap">
+            <label class="proxy-toggle">
+              <input type="checkbox" :checked="proxy.active" />
+              <span></span>
+            </label>
+            <span class="proxy-toggle-label">{{ proxy.toggleLabel }}</span>
+          </div>
+          <div class="proxy-actions">
+            <button class="icon-btn" type="button" title="Terminal">
+              <span class="material-symbols-outlined">terminal</span>
+            </button>
+            <button class="icon-btn" type="button" title="Edit">
+              <span class="material-symbols-outlined">edit</span>
+            </button>
+            <button class="icon-btn" type="button" title="Delete">
+              <span class="material-symbols-outlined">delete</span>
+            </button>
+          </div>
+        </div>
+      </article>
+
+      <button class="proxy-card proxy-card-add" type="button">
+        <div class="proxy-add-icon">
+          <span class="material-symbols-outlined">add</span>
+        </div>
+        <div class="proxy-add-title">添加 COM 监控节点</div>
+        <div class="proxy-add-sub">支持 RS-232, RS-485 或 USB 转串口。</div>
+      </button>
+    </div>
+  </section>
+</template>
diff --git a/web-ui/src/style.css b/web-ui/src/style.css
index 7a920b2..caa021c 100644
--- a/web-ui/src/style.css
+++ b/web-ui/src/style.css
@@ -2187,6 +2187,327 @@ textarea {
   transform: translateX(20px);
 }
 
+.proxy-page {
+  gap: 18px;
+}
+
+.proxy-hero {
+  border-radius: 18px;
+}
+
+.proxy-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  padding-left: 4px;
+}
+
+.proxy-filter {
+  border: 1px solid var(--border);
+  background: #ffffff;
+  color: var(--muted);
+  padding: 6px 16px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.proxy-filter:hover {
+  border-color: #c7d2fe;
+  color: #1e293b;
+}
+
+.proxy-filter.active {
+  background: #0f172a;
+  color: #ffffff;
+  border-color: #0f172a;
+  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
+}
+
+.proxy-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 16px;
+}
+
+.proxy-card {
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: #ffffff;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.proxy-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
+}
+
+.proxy-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.proxy-title {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.proxy-title h3 {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.proxy-subtitle {
+  margin: 2px 0 0;
+  font-size: 11px;
+  color: #94a3b8;
+  font-family: "Space Grotesk", "Noto Sans SC", sans-serif;
+  letter-spacing: 0.04em;
+}
+
+.proxy-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #e0e7ff;
+  color: #4338ca;
+}
+
+.proxy-icon.accent-running {
+  background: #dbeafe;
+  color: #1d4ed8;
+}
+
+.proxy-icon.accent-stopped {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.proxy-icon.accent-error {
+  background: #fee2e2;
+  color: #dc2626;
+}
+
+.proxy-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 800;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+}
+
+.proxy-status .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.proxy-status.running {
+  background: #ecfdf3;
+  color: #15803d;
+  border-color: #bbf7d0;
+}
+
+.proxy-status.stopped {
+  background: #f1f5f9;
+  color: #64748b;
+  border-color: #e2e8f0;
+}
+
+.proxy-status.error {
+  background: #fef2f2;
+  color: #b91c1c;
+  border-color: #fecaca;
+}
+
+.proxy-card-body {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 0;
+  border-top: 1px solid #f1f5f9;
+  border-bottom: 1px solid #f1f5f9;
+  background: #f8fafc;
+  border-radius: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.proxy-metric {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.proxy-metric strong {
+  font-size: 13px;
+  color: #1e293b;
+}
+
+.proxy-sparkline {
+  width: 90px;
+  height: 32px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.proxy-sparkline svg {
+  width: 100%;
+  height: 100%;
+}
+
+.proxy-sparkline path {
+  fill: none;
+  stroke-width: 1.6;
+  stroke-linejoin: round;
+}
+
+.proxy-sparkline.running path {
+  stroke: #2563eb;
+}
+
+.proxy-sparkline.stopped path {
+  stroke: #64748b;
+}
+
+.proxy-sparkline.error path {
+  stroke: #ef4444;
+}
+
+.proxy-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.proxy-toggle-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.proxy-toggle {
+  position: relative;
+  width: 34px;
+  height: 18px;
+  display: inline-block;
+}
+
+.proxy-toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.proxy-toggle span {
+  position: absolute;
+  inset: 0;
+  background: #e2e8f0;
+  border-radius: 999px;
+  transition: 0.2s;
+}
+
+.proxy-toggle span::before {
+  content: "";
+  position: absolute;
+  height: 14px;
+  width: 14px;
+  left: 2px;
+  top: 2px;
+  border-radius: 50%;
+  background: #ffffff;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
+  transition: 0.2s;
+}
+
+.proxy-toggle input:checked + span {
+  background: #2563eb;
+}
+
+.proxy-toggle input:checked + span::before {
+  transform: translateX(16px);
+}
+
+.proxy-toggle-label {
+  font-size: 10px;
+  font-weight: 700;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.proxy-actions {
+  display: inline-flex;
+  gap: 6px;
+}
+
+.proxy-card-add {
+  border: 2px dashed #cbd5e1;
+  background: #f8fafc;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+}
+
+.proxy-card-add:hover {
+  border-color: #93c5fd;
+  color: #1d4ed8;
+}
+
+.proxy-add-icon {
+  width: 46px;
+  height: 46px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #64748b;
+  transition: all 0.2s ease;
+}
+
+.proxy-card-add:hover .proxy-add-icon {
+  background: #2563eb;
+  color: #ffffff;
+}
+
+.proxy-add-title {
+  margin-top: 12px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.proxy-add-sub {
+  margin-top: 6px;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
 @media (max-width: 1200px) {
   .manual-grid,
   .monitor-stack,

From b4c50628868c646e52d4ead92c36eda39d216c30 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Mon, 12 Jan 2026 00:35:23 +0800
Subject: [PATCH 02/36] fix(ui): align proxy modal theme and focus
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 代理弹窗切换为浅色主题。
  - 弹窗开启时锁定后台交互。
- 影响:
  - 修复焦点闪烁并与应用风格一致。
- 兼容性/行为变更:
  - 无。
- 依赖/环境:
  - 无。
- 验证:
  - 未运行（仅 UI 变更）。

[English]
- Changes:
  - Switch proxy modal to light theme.
  - Lock background interaction when modal opens.
- Impact:
  - Prevents focus flicker and matches app style.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run (UI-only change).
Refs:
- N/A
---
 web-ui/src/components/ProxyMonitorView.vue | 242 +++++++++-
 web-ui/src/style.css                       | 525 +++++++++++++++++++++
 2 files changed, 765 insertions(+), 2 deletions(-)

diff --git a/web-ui/src/components/ProxyMonitorView.vue b/web-ui/src/components/ProxyMonitorView.vue
index e26d460..097d40d 100644
--- a/web-ui/src/components/ProxyMonitorView.vue
+++ b/web-ui/src/components/ProxyMonitorView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
 
 const filterTabs = ['全部代理', '正在运行', '已停止', '异常']
 const activeFilter = ref(filterTabs[0])
@@ -43,6 +43,14 @@ const proxies = ref([
   },
 ])
 
+const modalOpen = ref(false)
+const modalProxy = ref(null)
+
+const modalTitle = computed(() => {
+  if (!modalProxy.value) return '抓包详情'
+  return `抓包详情 - ${modalProxy.value.name}`
+})
+
 const filteredProxies = computed(() => {
   if (activeFilter.value === '全部代理') return proxies.value
   if (activeFilter.value === '正在运行') {
@@ -56,6 +64,76 @@ const filteredProxies = computed(() => {
   }
   return proxies.value
 })
+
+const protocolFrames = ref([
+  {
+    id: 'frame-1',
+    time: '14:20:01.2',
+    summary: 'Read Hold Regs',
+    chips: [
+      { text: '01', tone: 'amber', title: 'Slave Addr' },
+      { text: '03', tone: 'blue', title: 'Function Code' },
+      { text: '00 00 00 02', tone: 'green', title: 'Data Bytes' },
+      { text: 'C4 0B', tone: 'rose', title: 'CRC Checksum' },
+    ],
+    detail: [
+      { label: 'Slave Address:', value: '01 (1)', tone: 'amber' },
+      { label: 'Function Code:', value: '03 (Read Holding Registers)', tone: 'blue' },
+      { label: 'Start Address:', value: '0000 (0)' },
+      { label: 'Quantity:', value: '0002 (2)' },
+      { label: 'CRC:', value: '0x0BC4 [Valid]', tone: 'green' },
+    ],
+  },
+  {
+    id: 'frame-2',
+    time: '14:20:01.5',
+    summary: 'Resp: 50.0 / 70.0',
+    chips: [
+      { text: '01', tone: 'amber' },
+      { text: '03', tone: 'blue' },
+      { text: '04 01 F4 02 BC', tone: 'green' },
+      { text: '9B 42', tone: 'rose' },
+    ],
+  },
+  {
+    id: 'frame-3',
+    time: '14:20:02.8',
+    summary: 'EXCEPTION: ILLEGAL_ADDR',
+    error: true,
+    chips: [
+      { text: '01', tone: 'amber' },
+      { text: '83', tone: 'red' },
+      { text: '02', tone: 'green' },
+      { text: 'FF FF', tone: 'rose', warn: true },
+    ],
+  },
+  {
+    id: 'frame-4',
+    time: '14:20:03.2',
+    note: 'Waiting for next frame...',
+  },
+])
+
+function openModal(proxy) {
+  modalProxy.value = proxy
+  modalOpen.value = true
+}
+
+function closeModal() {
+  modalOpen.value = false
+}
+
+watch(
+  () => modalOpen.value,
+  (open) => {
+    document.body.classList.toggle('modal-open', open)
+    document.body.classList.toggle('proxy-modal-open', open)
+  }
+)
+
+onBeforeUnmount(() => {
+  document.body.classList.remove('modal-open', 'proxy-modal-open')
+})
 </script>
 
 <template>
@@ -133,7 +211,7 @@ const filteredProxies = computed(() => {
             <span class="proxy-toggle-label">{{ proxy.toggleLabel }}</span>
           </div>
           <div class="proxy-actions">
-            <button class="icon-btn" type="button" title="Terminal">
+            <button class="icon-btn" type="button" title="Terminal" @click="openModal(proxy)">
               <span class="material-symbols-outlined">terminal</span>
             </button>
             <button class="icon-btn" type="button" title="Edit">
@@ -155,4 +233,164 @@ const filteredProxies = computed(() => {
       </button>
     </div>
   </section>
+
+  <div v-if="modalOpen" class="proxy-modal-backdrop">
+    <div class="proxy-modal">
+      <div class="proxy-modal-header">
+        <div class="proxy-modal-title">
+          <div class="proxy-modal-icon">
+            <span class="material-symbols-outlined">terminal</span>
+          </div>
+          <div>
+            <h3>{{ modalTitle }}</h3>
+            <div class="proxy-modal-meta">
+              <span class="pulse-dot"></span>
+              实时流量监控中 - 115200 bps
+            </div>
+          </div>
+        </div>
+        <div class="proxy-modal-actions">
+          <div class="proxy-modal-select">
+            <label>手动协议选择</label>
+            <select>
+              <option>Modbus RTU</option>
+              <option>MQTT</option>
+              <option>Raw Hex (无协议)</option>
+              <option>Custom Protocol A</option>
+            </select>
+          </div>
+          <button class="icon-btn" type="button" @click="closeModal">
+            <span class="material-symbols-outlined">close</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="proxy-modal-body">
+        <section class="proxy-modal-stream">
+          <div class="proxy-modal-toolbar">
+            <div class="proxy-modal-toolbar-left">
+              <span class="material-symbols-outlined">filter_alt</span>
+              <span>活动协议视图: Modbus RTU</span>
+            </div>
+            <div class="proxy-modal-toolbar-right">
+              <span>右侧显示:</span>
+              <div class="proxy-modal-toggle">
+                <button type="button">ASCII</button>
+                <button class="active" type="button">解析值</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="proxy-modal-list">
+            <div class="proxy-modal-list-header">
+              <span class="col-time">时间戳</span>
+              <span class="col-body">结构化协议字段(已对齐)</span>
+              <span class="col-summary">解析摘要</span>
+            </div>
+
+            <div
+              v-for="frame in protocolFrames"
+              :key="frame.id"
+              class="proxy-frame"
+              :class="{ error: frame.error }"
+            >
+              <template v-if="frame.note">
+                <span class="col-time">{{ frame.time }}</span>
+                <span class="col-body note">{{ frame.note }}</span>
+                <span class="col-summary"></span>
+              </template>
+              <template v-else>
+                <div class="proxy-frame-row">
+                  <span class="col-time">{{ frame.time }}</span>
+                  <span class="col-body chips">
+                    <span
+                      v-for="chip in frame.chips"
+                      :key="chip.text"
+                      class="proxy-chip"
+                      :class="`tone-${chip.tone}`"
+                      :title="chip.title"
+                      :data-warn="chip.warn ? 'true' : null"
+                    >
+                      {{ chip.text }}
+                    </span>
+                  </span>
+                  <span class="col-summary" :class="{ error: frame.error }">{{ frame.summary }}</span>
+                </div>
+                <div v-if="frame.detail" class="proxy-frame-detail">
+                  <div v-for="item in frame.detail" :key="item.label" class="proxy-detail-row">
+                    <span>{{ item.label }}</span>
+                    <span :class="item.tone ? `tone-${item.tone}` : ''">{{ item.value }}</span>
+                  </div>
+                </div>
+              </template>
+            </div>
+          </div>
+
+          <div class="proxy-modal-footer">
+            <div class="proxy-footer-actions">
+              <button class="proxy-btn warning" type="button">
+                <span class="material-symbols-outlined">pause</span>
+                暂停
+              </button>
+              <button class="proxy-btn ghost" type="button">
+                <span class="material-symbols-outlined">delete_sweep</span>
+                重置
+              </button>
+            </div>
+            <button class="proxy-btn primary" type="button">
+              <span class="material-symbols-outlined">download</span>
+              导出当前协议日志
+            </button>
+          </div>
+        </section>
+
+        <aside class="proxy-modal-side">
+          <div>
+            <h4>当前会话统计</h4>
+            <div class="proxy-stat-card">
+              <span>已处理帧数</span>
+              <div class="proxy-stat-value">
+                <strong>1,284</strong>
+                <em>8.4 fps</em>
+              </div>
+              <div class="proxy-stat-bar"></div>
+            </div>
+            <div class="proxy-stat-card">
+              <span>校验错误率</span>
+              <div class="proxy-stat-value">
+                <strong class="danger">0.08%</strong>
+                <em>1 帧错误</em>
+              </div>
+            </div>
+            <div class="proxy-stat-card">
+              <span>持续监控时长</span>
+              <div class="proxy-stat-value">
+                <strong>00:42:15</strong>
+              </div>
+            </div>
+          </div>
+
+          <div class="proxy-side-block">
+            <h5>视图过滤器</h5>
+            <label>
+              <input type="checkbox" checked />
+              仅显示合法帧
+            </label>
+            <label>
+              <input type="checkbox" />
+              仅显示写指令
+            </label>
+          </div>
+
+          <div class="proxy-side-tip">
+            <div class="proxy-side-tip-title">
+              <span class="material-symbols-outlined">info</span>
+              当前配置
+            </div>
+            <p>Modbus RTU 监听中。解析对象 1-255 从站地址。</p>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/web-ui/src/style.css b/web-ui/src/style.css
index caa021c..da48325 100644
--- a/web-ui/src/style.css
+++ b/web-ui/src/style.css
@@ -81,6 +81,19 @@ body.dropdown-open *::after {
   animation: none !important;
 }
 
+body.proxy-modal-open {
+  overflow: hidden;
+}
+
+body.proxy-modal-open .app-shell {
+  pointer-events: none;
+}
+
+body.proxy-modal-open .proxy-modal-backdrop,
+body.proxy-modal-open .proxy-modal-backdrop * {
+  pointer-events: auto;
+}
+
 html,
 body {
   margin: 0;
@@ -2508,6 +2521,518 @@ textarea {
   color: #94a3b8;
 }
 
+.proxy-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.45);
+  backdrop-filter: blur(6px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  z-index: 2500;
+}
+
+.proxy-modal {
+  width: min(1200px, 92vw);
+  height: min(85vh, 860px);
+  background: #ffffff;
+  border-radius: 20px;
+  border: 1px solid var(--border);
+  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.proxy-modal-header {
+  padding: 16px 22px;
+  border-bottom: 1px solid var(--border);
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.proxy-modal-title {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  color: var(--text);
+}
+
+.proxy-modal-title h3 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.proxy-modal-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 14px;
+  background: #e0e7ff;
+  color: #1d4ed8;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.proxy-modal-meta {
+  margin-top: 4px;
+  font-size: 11px;
+  color: #64748b;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.pulse-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #22c55e;
+  position: relative;
+}
+
+.pulse-dot::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: rgba(34, 197, 94, 0.6);
+  animation: pulse 1.4s infinite;
+}
+
+.proxy-modal-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.proxy-modal-select {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: #f8fafc;
+}
+
+.proxy-modal-select label {
+  font-size: 10px;
+  font-weight: 700;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.proxy-modal-select select {
+  background: transparent;
+  border: none;
+  color: #0f172a;
+  font-size: 12px;
+  font-weight: 600;
+  outline: none;
+}
+
+.proxy-modal-body {
+  display: grid;
+  grid-template-columns: 1fr 260px;
+  flex: 1;
+  min-height: 0;
+}
+
+.proxy-modal-stream {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background: #ffffff;
+}
+
+.proxy-modal-toolbar {
+  padding: 10px 16px;
+  background: #f8fafc;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  color: #64748b;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.proxy-modal-toolbar-left,
+.proxy-modal-toolbar-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.proxy-modal-toolbar-right span {
+  font-size: 10px;
+}
+
+.proxy-modal-toggle {
+  display: inline-flex;
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 2px;
+  gap: 4px;
+}
+
+.proxy-modal-toggle button {
+  border: none;
+  background: transparent;
+  color: #64748b;
+  font-size: 9px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.proxy-modal-toggle button.active {
+  background: #0f172a;
+  color: #ffffff;
+}
+
+.proxy-modal-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px 16px 10px;
+  font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  color: #334155;
+}
+
+.proxy-modal-list-header {
+  display: grid;
+  grid-template-columns: 80px 1fr 160px;
+  gap: 12px;
+  padding-bottom: 10px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+  color: #94a3b8;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  position: sticky;
+  top: 0;
+  background: #ffffff;
+  z-index: 2;
+}
+
+.proxy-frame {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: #ffffff;
+  margin-bottom: 10px;
+}
+
+.proxy-frame.error {
+  border-color: #fecaca;
+  background: #fef2f2;
+}
+
+.proxy-frame-row {
+  display: grid;
+  grid-template-columns: 80px 1fr 160px;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+}
+
+.proxy-frame .note {
+  color: #2563eb;
+  border-left: 2px solid rgba(37, 99, 235, 0.4);
+  padding-left: 8px;
+}
+
+.proxy-frame .col-summary {
+  text-align: right;
+  font-style: italic;
+  color: #16a34a;
+  font-size: 11px;
+}
+
+.proxy-frame .col-summary.error {
+  color: #f87171;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.proxy-chip {
+  padding: 2px 6px;
+  border-radius: 6px;
+  border: 1px solid transparent;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.proxy-chip[data-warn="true"] {
+  text-decoration: underline wavy rgba(248, 113, 113, 0.6);
+}
+
+.proxy-chip.tone-amber {
+  border-color: rgba(245, 158, 11, 0.4);
+  color: #fbbf24;
+  background: rgba(245, 158, 11, 0.1);
+}
+
+.proxy-chip.tone-blue {
+  border-color: rgba(59, 130, 246, 0.4);
+  color: #60a5fa;
+  background: rgba(59, 130, 246, 0.12);
+}
+
+.proxy-chip.tone-green {
+  border-color: rgba(16, 185, 129, 0.4);
+  color: #34d399;
+  background: rgba(16, 185, 129, 0.12);
+}
+
+.proxy-chip.tone-rose {
+  border-color: rgba(244, 63, 94, 0.4);
+  color: #fb7185;
+  background: rgba(244, 63, 94, 0.12);
+}
+
+.proxy-chip.tone-red {
+  border-color: rgba(239, 68, 68, 0.6);
+  color: #f87171;
+  background: rgba(239, 68, 68, 0.4);
+}
+
+.proxy-frame-detail {
+  margin: 0 12px 12px 24px;
+  padding: 12px;
+  border-top: 1px solid var(--border);
+  background: #f8fafc;
+  border-radius: 0 0 10px 10px;
+  color: #334155;
+  font-size: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.proxy-detail-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.proxy-detail-row span:first-child {
+  color: #64748b;
+  min-width: 120px;
+}
+
+.proxy-detail-row .tone-amber {
+  color: #fbbf24;
+}
+
+.proxy-detail-row .tone-blue {
+  color: #60a5fa;
+}
+
+.proxy-detail-row .tone-green {
+  color: #34d399;
+}
+
+.proxy-modal-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: #f8fafc;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.proxy-footer-actions {
+  display: inline-flex;
+  gap: 8px;
+}
+
+.proxy-btn {
+  border: none;
+  border-radius: 8px;
+  padding: 6px 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.proxy-btn.primary {
+  background: #2563eb;
+  color: #ffffff;
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
+}
+
+.proxy-btn.warning {
+  background: #fff7ed;
+  color: #b45309;
+}
+
+.proxy-btn.ghost {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.proxy-modal-side {
+  padding: 18px;
+  background: #f8fafc;
+  border-left: 1px solid var(--border);
+  color: #475569;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.proxy-modal-side h4 {
+  margin: 0 0 12px;
+  font-size: 10px;
+  font-weight: 700;
+  color: #94a3b8;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.proxy-stat-card {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 14px;
+  margin-bottom: 12px;
+  position: relative;
+  overflow: hidden;
+}
+
+.proxy-stat-card span {
+  font-size: 10px;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+}
+
+.proxy-stat-value {
+  margin-top: 6px;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.proxy-stat-value strong {
+  font-size: 22px;
+  color: #0f172a;
+}
+
+.proxy-stat-value strong.danger {
+  color: #fb7185;
+}
+
+.proxy-stat-value em {
+  font-size: 10px;
+  color: #22c55e;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.proxy-stat-bar {
+  position: absolute;
+  left: 0;
+  right: 40%;
+  bottom: 0;
+  height: 3px;
+  background: rgba(59, 130, 246, 0.6);
+}
+
+.proxy-side-block {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.proxy-side-block h5 {
+  margin: 0 0 6px;
+  font-size: 10px;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.proxy-side-block label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #475569;
+}
+
+.proxy-side-block input {
+  accent-color: #2563eb;
+}
+
+.proxy-side-tip {
+  border-radius: 14px;
+  padding: 14px;
+  border: 1px solid #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+  font-size: 11px;
+}
+
+.proxy-side-tip-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+@media (max-width: 1024px) {
+  .proxy-modal {
+    height: min(90vh, 900px);
+  }
+
+  .proxy-modal-body {
+    grid-template-columns: 1fr;
+  }
+
+  .proxy-modal-side {
+    border-left: none;
+    border-top: 1px solid rgba(148, 163, 184, 0.2);
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .proxy-modal-side > div,
+  .proxy-side-block,
+  .proxy-side-tip {
+    flex: 1 1 240px;
+  }
+}
+
 @media (max-width: 1200px) {
   .manual-grid,
   .monitor-stack,

From 6f11ac8914bd7f44a230f67477c1279321cec1a3 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Mon, 12 Jan 2026 01:03:12 +0800
Subject: [PATCH 03/36] fix(ui): lock background interaction for modals
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 全局弹窗开启时锁定后台交互，避免焦点争夺。
- 影响:
  - 防止全局弹窗出现焦点闪烁。
- 兼容性/行为变更:
  - 无。
- 依赖/环境:
  - 无。
- 验证:
  - 未运行（仅 UI 变更）。

[English]
- Changes:
  - Apply global modal lock to prevent focus flicker.
- Impact:
  - Prevents background focus contention across the app.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run (UI-only change).
Refs:
- N/A
---
 web-ui/src/style.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/web-ui/src/style.css b/web-ui/src/style.css
index da48325..ab5bb9f 100644
--- a/web-ui/src/style.css
+++ b/web-ui/src/style.css
@@ -81,6 +81,21 @@ body.dropdown-open *::after {
   animation: none !important;
 }
 
+body.modal-open {
+  overflow: hidden;
+}
+
+body.modal-open .app-shell {
+  pointer-events: none;
+}
+
+body.modal-open .modal-backdrop,
+body.modal-open .modal-backdrop *,
+body.modal-open .proxy-modal-backdrop,
+body.modal-open .proxy-modal-backdrop * {
+  pointer-events: auto;
+}
+
 body.proxy-modal-open {
   overflow: hidden;
 }

From af7e74fda3c8c134c105b477b9ad4e98ca0e3e74 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Mon, 12 Jan 2026 02:12:57 +0800
Subject: [PATCH 04/36] fix(ui): preserve page scroll during window move
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 拖动或缩放窗口时锁定页面滚动并在结束后恢复。
- 影响:
  - 避免标题区块因滚动偏移而消失。
- 兼容性/行为变更:
  - 无。
- 依赖/环境:
  - 无。
- 验证:
  - 未运行（仅 UI 变更）。

[English]
- Changes:
  - Lock page scroll during window move/resize and restore afterward.
- Impact:
  - Prevents page header from disappearing due to scroll drift.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run (UI-only change).
Refs:
- N/A
---
 web-ui/src/App.vue | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/web-ui/src/App.vue b/web-ui/src/App.vue
index 3f8ba23..c08c097 100644
--- a/web-ui/src/App.vue
+++ b/web-ui/src/App.vue
@@ -304,6 +304,30 @@ let channelRefreshTimer = null
 let snapPreviewRaf = 0
 let pendingSnapPreview = null
 let attachedBridge = null
+let pageScrollLock = { el: null, top: 0 }
+
+function preventScroll(event) {
+  if (!event) return
+  event.preventDefault()
+}
+
+function lockPageScroll() {
+  const el = document.querySelector('.page')
+  if (el) {
+    pageScrollLock = { el, top: el.scrollTop }
+  }
+  document.addEventListener('wheel', preventScroll, { passive: false })
+  document.addEventListener('touchmove', preventScroll, { passive: false })
+}
+
+function unlockPageScroll() {
+  if (pageScrollLock.el) {
+    pageScrollLock.el.scrollTop = pageScrollLock.top
+  }
+  pageScrollLock = { el: null, top: 0 }
+  document.removeEventListener('wheel', preventScroll)
+  document.removeEventListener('touchmove', preventScroll)
+}
 
 function filterCommLogs(lines, tab, keyword) {
   if (tab === 'tcp') return []
@@ -1341,6 +1365,7 @@ function maybeStartWindowMove(event) {
   dragStarted.value = true
   draggingWindow.value = true
   document.body.classList.add('dragging-window')
+  lockPageScroll()
   snapPreview.value = ''
   attachDragListeners()
 }
@@ -1379,6 +1404,7 @@ function showSystemMenu(event) {
 function startResize(edge, event) {
   if (!bridge.value || !edge || !event) return
   document.body.classList.add('resizing')
+  lockPageScroll()
   bridge.value.window_start_resize(edge)
 }
 
@@ -1603,6 +1629,7 @@ function clearDragState() {
   }
   document.body.classList.remove('dragging-window')
   document.body.classList.remove('resizing')
+  unlockPageScroll()
   detachDragListeners()
 }
 

From 1b5838fd29e6d6e56df00e10497c9b2562a75738 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Mon, 12 Jan 2026 02:44:21 +0800
Subject: [PATCH 05/36] fix(ui): harden scroll and dropdown stability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 主滚动容器禁用滚动锚点并限制滚动链。
  - 下拉菜单使用双帧重算位置减少错位。
- 影响:
  - 降低窗口操作与布局变化导致的滚动/定位抖动。
- 兼容性/行为变更:
  - 无。
- 依赖/环境:
  - 无。
- 验证:
  - 未运行（仅 UI 变更）。

[English]
- Changes:
  - Disable scroll anchoring and contain overscroll on main containers.
  - Recompute dropdown position across two frames to reduce drift.
- Impact:
  - Reduces scroll/position jitter during window and layout changes.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run (UI-only change).
Refs:
- N/A
---
 web-ui/src/App.vue                       | 30 +++++++++++++++++-------
 web-ui/src/components/DropdownSelect.vue | 10 ++++++--
 web-ui/src/style.css                     |  8 +++++++
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/web-ui/src/App.vue b/web-ui/src/App.vue
index c08c097..35580c6 100644
--- a/web-ui/src/App.vue
+++ b/web-ui/src/App.vue
@@ -304,7 +304,16 @@ let channelRefreshTimer = null
 let snapPreviewRaf = 0
 let pendingSnapPreview = null
 let attachedBridge = null
-let pageScrollLock = { el: null, top: 0 }
+const SCROLL_LOCK_SELECTORS = [
+  '.page',
+  '.modal-body',
+  '.log-stream',
+  '.quick-list',
+  '.sidebar-nav',
+  '.select-menu',
+  '.proxy-modal-list',
+]
+let scrollLockSnapshot = []
 
 function preventScroll(event) {
   if (!event) return
@@ -312,19 +321,22 @@ function preventScroll(event) {
 }
 
 function lockPageScroll() {
-  const el = document.querySelector('.page')
-  if (el) {
-    pageScrollLock = { el, top: el.scrollTop }
-  }
+  const selector = SCROLL_LOCK_SELECTORS.join(', ')
+  const nodes = document.querySelectorAll(selector)
+  scrollLockSnapshot = Array.from(nodes).map((node) => {
+    return { el: node, top: node.scrollTop || 0 }
+  })
   document.addEventListener('wheel', preventScroll, { passive: false })
   document.addEventListener('touchmove', preventScroll, { passive: false })
 }
 
 function unlockPageScroll() {
-  if (pageScrollLock.el) {
-    pageScrollLock.el.scrollTop = pageScrollLock.top
-  }
-  pageScrollLock = { el: null, top: 0 }
+  scrollLockSnapshot.forEach((item) => {
+    if (item.el) {
+      item.el.scrollTop = item.top
+    }
+  })
+  scrollLockSnapshot = []
   document.removeEventListener('wheel', preventScroll)
   document.removeEventListener('touchmove', preventScroll)
 }
diff --git a/web-ui/src/components/DropdownSelect.vue b/web-ui/src/components/DropdownSelect.vue
index b8894a9..c18e23b 100644
--- a/web-ui/src/components/DropdownSelect.vue
+++ b/web-ui/src/components/DropdownSelect.vue
@@ -78,7 +78,7 @@ function toggle() {
   setOpenId(dropdownId)
   document.body.classList.add('dropdown-open')
   window.dispatchEvent(new CustomEvent('dropdown:open', { detail: dropdownId }))
-  nextTick(() => updateMenuPosition())
+  nextTick(() => scheduleMenuPosition())
 }
 
 function close() {
@@ -114,6 +114,12 @@ function updateMenuPosition() {
   }
 }
 
+function scheduleMenuPosition() {
+  if (!open.value) return
+  requestAnimationFrame(() => updateMenuPosition())
+  requestAnimationFrame(() => updateMenuPosition())
+}
+
 function handlePointerDown(event) {
   if (!rootRef.value || !event) return
   if (
@@ -133,7 +139,7 @@ function handleKeydown(event) {
 
 function handleViewportChange() {
   if (!open.value) return
-  updateMenuPosition()
+  scheduleMenuPosition()
 }
 
 function handleExternalOpen(event) {
diff --git a/web-ui/src/style.css b/web-ui/src/style.css
index ab5bb9f..aad87a1 100644
--- a/web-ui/src/style.css
+++ b/web-ui/src/style.css
@@ -61,6 +61,11 @@ body.dragging-window .app-titlebar {
   box-shadow: none !important;
 }
 
+body.resizing .page-header,
+body.dragging-window .page-header {
+  opacity: 0.85;
+}
+
 body.resizing .log-line {
   content-visibility: visible !important;
 }
@@ -480,6 +485,8 @@ textarea {
   gap: 20px;
   padding: 24px 28px 30px;
   overflow-y: auto;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
   flex: 1;
   min-height: 0;
   height: 100%;
@@ -1687,6 +1694,7 @@ textarea {
 .modal-body {
   padding: 20px 22px;
   overflow-y: auto;
+  overscroll-behavior: contain;
   display: flex;
   flex-direction: column;
   gap: 18px;

From 1acf86c25e3f070afc49b3a46b54de5ec3f17beb Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Tue, 13 Jan 2026 16:40:52 +0800
Subject: [PATCH 06/36] feat(ui): refine proxy monitor modal and logging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- Changes:
  - 调整代理监控弹窗与卡片布局，改用自定义下拉并降低渲染负担
  - 增加 WebEngine JS 控制台日志落盘与 unraisable 保护
- Impact:
  - 弹窗交互稳定性提升，默认移除模糊效果
- Compatibility/Behavior changes:
  - 弹窗交互与样式更新；移除页面/旧弹窗 blur
- Dependencies/Environment:
  - None
- Verification:
  - Not run (manual)
Refs:
- None

[English]
- Changes:
  - Refined proxy monitor modal/layout, switched to custom dropdowns, reduced heavy rendering
  - Added WebEngine JS console logging and unraisable guard
- Impact:
  - Improved modal stability; blur effects removed by default
- Compatibility/Behavior changes:
  - Modal interaction/style updates; blur removed for page/legacy modal
- Dependencies/Environment:
  - None
- Verification:
  - Not run (manual)
Refs:
- None
---
 main_web.py                                |  34 +-
 ui/web_window.py                           |  22 +
 web-ui/src/components/ProxyMonitorView.vue | 549 +++++++-------
 web-ui/src/style.css                       | 835 ++++++++++++++++++++-
 4 files changed, 1144 insertions(+), 296 deletions(-)

diff --git a/main_web.py b/main_web.py
index 7a2f6a5..0d79f6d 100644
--- a/main_web.py
+++ b/main_web.py
@@ -7,6 +7,7 @@
 import logging
 import os
 import sys
+import traceback
 import time
 from pathlib import Path
 from typing import Optional
@@ -41,16 +42,24 @@ def write(self, data: str) -> int:
             written = 0
         prefix = "[STDERR] " if self._is_error else "[STDOUT] "
         timestamp = time.strftime("%Y-%m-%d %H:%M:%S")
-        for line in data.splitlines():
-            if not line.strip():
-                continue
-            self._file.write(f"{timestamp} {prefix}{line}\n")
-        self._file.flush()
+        if not getattr(self._file, "closed", False):
+            for line in data.splitlines():
+                if not line.strip():
+                    continue
+                self._file.write(f"{timestamp} {prefix}{line}\n")
+            self._file.flush()
         return written
 
     def flush(self) -> None:
-        self._primary.flush()
-        self._file.flush()
+        try:
+            self._primary.flush()
+        except Exception:
+            pass
+        if not getattr(self._file, "closed", False):
+            try:
+                self._file.flush()
+            except Exception:
+                pass
 
 
 def _setup_run_logging() -> Path:
@@ -71,6 +80,17 @@ def _setup_run_logging() -> Path:
         format="%(asctime)s [%(levelname)s] %(threadName)s %(name)s: %(message)s",
         datefmt="%Y-%m-%d %H:%M:%S",
     )
+    def _log_unraisable(unraisable):  # type: ignore[override]
+        logger = logging.getLogger("unraisable")
+        exc = unraisable.exc_value or unraisable.exc_type
+        tb = unraisable.exc_traceback
+        detail = "".join(traceback.format_exception(unraisable.exc_type, exc, tb)).strip()
+        logger.error(
+            "Unraisable exception in %r: %s",
+            unraisable.object,
+            detail or exc,
+        )
+    sys.unraisablehook = _log_unraisable
     logging.getLogger("main_web").info("Log file: %s", log_path)
     return log_path
 
diff --git a/ui/web_window.py b/ui/web_window.py
index 634357c..4f0b957 100644
--- a/ui/web_window.py
+++ b/ui/web_window.py
@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 from pathlib import Path
+import logging
 import os
 import sys
 
@@ -8,18 +9,37 @@
     from PySide6.QtCore import QPoint, Qt, QUrl
     from PySide6.QtGui import QAction, QGuiApplication, QIcon
     from PySide6.QtWebChannel import QWebChannel
+    from PySide6.QtWebEngineCore import QWebEnginePage
     from PySide6.QtWidgets import QFileDialog, QMainWindow, QMenu
     from PySide6.QtWebEngineWidgets import QWebEngineView
 except ImportError:  # pragma: no cover
     from PyQt6.QtCore import QPoint, Qt, QUrl  # type: ignore
     from PyQt6.QtGui import QAction, QGuiApplication, QIcon  # type: ignore
     from PyQt6.QtWebChannel import QWebChannel  # type: ignore
+    from PyQt6.QtWebEngineCore import QWebEnginePage  # type: ignore
     from PyQt6.QtWidgets import QFileDialog, QMainWindow, QMenu  # type: ignore
     from PyQt6.QtWebEngineWidgets import QWebEngineView  # type: ignore
 
 from ui.web_bridge import WebBridge
 from ui.win_snap import apply_snap_styles
 
+class LoggingWebPage(QWebEnginePage):
+    def javaScriptConsoleMessage(self, level, message, line_number, source_id):  # type: ignore[override]
+        level_map = {
+            QWebEnginePage.JavaScriptConsoleMessageLevel.InfoMessageLevel: "INFO",
+            QWebEnginePage.JavaScriptConsoleMessageLevel.WarningMessageLevel: "WARN",
+            QWebEnginePage.JavaScriptConsoleMessageLevel.ErrorMessageLevel: "ERROR",
+        }
+        tag = level_map.get(level, "LOG")
+        logging.getLogger("web_js").warning(
+            "[%s] %s (%s:%s)",
+            tag,
+            message,
+            source_id,
+            line_number,
+        )
+        super().javaScriptConsoleMessage(level, message, line_number, source_id)
+
 class WebWindow(QMainWindow):
     """Minimal WebEngine host window for the new web UI."""
 
@@ -36,6 +56,8 @@ def __init__(self, bus=None, comm=None) -> None:
         self.setAttribute(Qt.WA_TranslucentBackground, False)
 
         view = QWebEngineView(self)
+        page = LoggingWebPage(view)
+        view.setPage(page)
         self.setCentralWidget(view)
 
         channel = QWebChannel(view)
diff --git a/web-ui/src/components/ProxyMonitorView.vue b/web-ui/src/components/ProxyMonitorView.vue
index 097d40d..32323c2 100644
--- a/web-ui/src/components/ProxyMonitorView.vue
+++ b/web-ui/src/components/ProxyMonitorView.vue
@@ -1,396 +1,371 @@
 <script setup>
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import DropdownSelect from './DropdownSelect.vue'
 
-const filterTabs = ['全部代理', '正在运行', '已停止', '异常']
-const activeFilter = ref(filterTabs[0])
+const filterTabs = [
+  { id: 'all', label: '全部转发' },
+  { id: 'running', label: '运行中' },
+  { id: 'stopped', label: '已停止' },
+  { id: 'error', label: '异常' },
+]
+const activeFilter = ref(filterTabs[0].id)
+const modalOpen = ref(false)
+const modalProxy = ref(null)
+const proxyName = ref('')
+const connectionMode = ref('透传模式')
+const hostPort = ref('COM3')
+const devicePort = ref('COM5')
+const baudRate = ref('115200')
+const parity = ref('None (无)')
+
+const connectionOptions = ['透传模式', '协议转换', '映射模式']
+const portOptions = ['COM1', 'COM2', 'COM3', 'COM4', 'COM5', 'COM6', 'COM10', 'COM12']
+const baudOptions = ['4800', '9600', '19200', '38400', '57600', '115200']
+const parityOptions = ['None (无)', 'Even (偶)', 'Odd (奇)', 'Mark', 'Space']
 
 const proxies = ref([
   {
     id: 'proxy-com3',
-    name: 'COM3 - Sensor Node A',
-    subtitle: '8-N-1 · 异步串行',
+    name: '主控制器链路',
+    meta: 'ID: PX-00124 · 8-N-1',
     status: 'running',
-    statusLabel: 'RUNNING',
+    statusLabel: '运行中',
+    statusIcon: 'swap_horizontal_circle',
+    routeIcon: 'keyboard_double_arrow_right',
+    routeLabel: '转发中',
+    routeTone: 'primary',
+    hostPort: 'COM3',
+    devicePort: 'COM5',
     baud: '115200',
-    bandwidth: '12.4 KB/s',
-    spark: 'M0 35 L 10 35 L 10 10 L 25 10 L 25 35 L 40 35 L 40 5 L 55 5 L 55 35 L 70 35 L 70 15 L 85 15 L 85 35 L 100 35',
+    bandwidth: '12.4',
+    bandwidthUnit: 'KB/s',
+    spark: 'M0 35 L10 20 L20 35 L30 10 L40 30 L50 5 L60 35 L70 20 L80 30 L90 10 L100 25',
     active: true,
-    toggleLabel: 'Active',
+    toggleLabel: '运行中',
   },
   {
     id: 'proxy-com7',
-    name: 'COM7 - Motor Controller',
-    subtitle: '8-E-1 · RS-485',
+    name: '电机反馈集线器',
+    meta: 'ID: PX-00992 · 8-E-1',
     status: 'stopped',
-    statusLabel: 'STOPPED',
+    statusLabel: '已停止',
+    statusIcon: 'pause_circle',
+    routeIcon: 'more_horiz',
+    routeLabel: '离线',
+    routeTone: 'muted',
+    hostPort: 'COM7',
+    devicePort: 'COM10',
     baud: '9600',
-    bandwidth: '0.0 KB/s',
-    spark: 'M0 35 L 100 35',
+    bandwidth: '0.0',
+    bandwidthUnit: 'KB/s',
+    spark: '',
     active: false,
-    toggleLabel: 'Inactive',
+    toggleLabel: '已停止',
   },
   {
     id: 'proxy-com1',
-    name: 'COM1 - GPS Module',
-    subtitle: '7-N-2 · NMEA-0183',
+    name: 'GPS 模块数据流',
+    meta: 'ID: PX-00219 · 7-N-2',
     status: 'error',
-    statusLabel: 'ERROR',
+    statusLabel: '异常',
+    statusIcon: 'report',
+    routeIcon: 'sync_problem',
+    routeLabel: '连接失败',
+    routeTone: 'danger',
+    hostPort: 'COM1',
+    devicePort: 'COM12',
     baud: '4800',
-    bandwidth: '0.4 KB/s',
-    spark: 'M0 35 L 5 35 L 5 10 L 10 10 L 10 35 L 15 35 L 15 10 L 20 10 L 20 35 L 90 35 L 90 5 L 95 5 L 95 35 L 100 35',
+    bandwidth: '0.4',
+    bandwidthUnit: 'KB/s',
+    spark: 'M0 38 L40 38 L42 10 L48 10 L50 38 L90 38 L92 10 L98 10 L100 38',
     active: true,
-    toggleLabel: 'Faulty',
+    toggleLabel: '异常',
   },
 ])
 
-const modalOpen = ref(false)
-const modalProxy = ref(null)
-
-const modalTitle = computed(() => {
-  if (!modalProxy.value) return '抓包详情'
-  return `抓包详情 - ${modalProxy.value.name}`
-})
-
 const filteredProxies = computed(() => {
-  if (activeFilter.value === '全部代理') return proxies.value
-  if (activeFilter.value === '正在运行') {
-    return proxies.value.filter((proxy) => proxy.status === 'running')
-  }
-  if (activeFilter.value === '已停止') {
-    return proxies.value.filter((proxy) => proxy.status === 'stopped')
-  }
-  if (activeFilter.value === '异常') {
-    return proxies.value.filter((proxy) => proxy.status === 'error')
-  }
-  return proxies.value
+  if (activeFilter.value === 'all') return proxies.value
+  return proxies.value.filter((proxy) => proxy.status === activeFilter.value)
 })
 
-const protocolFrames = ref([
-  {
-    id: 'frame-1',
-    time: '14:20:01.2',
-    summary: 'Read Hold Regs',
-    chips: [
-      { text: '01', tone: 'amber', title: 'Slave Addr' },
-      { text: '03', tone: 'blue', title: 'Function Code' },
-      { text: '00 00 00 02', tone: 'green', title: 'Data Bytes' },
-      { text: 'C4 0B', tone: 'rose', title: 'CRC Checksum' },
-    ],
-    detail: [
-      { label: 'Slave Address:', value: '01 (1)', tone: 'amber' },
-      { label: 'Function Code:', value: '03 (Read Holding Registers)', tone: 'blue' },
-      { label: 'Start Address:', value: '0000 (0)' },
-      { label: 'Quantity:', value: '0002 (2)' },
-      { label: 'CRC:', value: '0x0BC4 [Valid]', tone: 'green' },
-    ],
-  },
-  {
-    id: 'frame-2',
-    time: '14:20:01.5',
-    summary: 'Resp: 50.0 / 70.0',
-    chips: [
-      { text: '01', tone: 'amber' },
-      { text: '03', tone: 'blue' },
-      { text: '04 01 F4 02 BC', tone: 'green' },
-      { text: '9B 42', tone: 'rose' },
-    ],
-  },
-  {
-    id: 'frame-3',
-    time: '14:20:02.8',
-    summary: 'EXCEPTION: ILLEGAL_ADDR',
-    error: true,
-    chips: [
-      { text: '01', tone: 'amber' },
-      { text: '83', tone: 'red' },
-      { text: '02', tone: 'green' },
-      { text: 'FF FF', tone: 'rose', warn: true },
-    ],
-  },
-  {
-    id: 'frame-4',
-    time: '14:20:03.2',
-    note: 'Waiting for next frame...',
-  },
-])
-
-function openModal(proxy) {
+function openEditModal(proxy) {
+  console.debug('[proxy-monitor] openEditModal', proxy && proxy.id ? proxy.id : proxy)
   modalProxy.value = proxy
+  proxyName.value = proxy && proxy.name ? proxy.name : ''
+  hostPort.value = proxy && proxy.hostPort ? proxy.hostPort : hostPort.value
+  devicePort.value = proxy && proxy.devicePort ? proxy.devicePort : devicePort.value
+  baudRate.value = proxy && proxy.baud ? String(proxy.baud) : baudRate.value
   modalOpen.value = true
 }
 
-function closeModal() {
+function closeModal(event) {
+  const target = event && event.target ? event.target.tagName || event.target.className : 'unknown'
+  console.debug('[proxy-monitor] closeModal', target, new Error().stack)
   modalOpen.value = false
 }
 
 watch(
   () => modalOpen.value,
   (open) => {
-    document.body.classList.toggle('modal-open', open)
-    document.body.classList.toggle('proxy-modal-open', open)
+    console.debug('[proxy-monitor] modalOpen changed', open)
+    document.body.classList.toggle('proxy-edit-open', open)
   }
 )
 
 onBeforeUnmount(() => {
-  document.body.classList.remove('modal-open', 'proxy-modal-open')
+  document.body.classList.remove('proxy-edit-open')
 })
 </script>
 
 <template>
-  <section class="page proxy-page">
-    <header class="page-header spaced proxy-hero">
-      <div>
-        <h2>代理监控</h2>
-        <p>管理串口 COM 代理通道，监控物理层实时数据流与连接状态。</p>
+  <section class="page proxy-page proxy-dashboard">
+    <header class="proxy-dashboard-hero">
+      <div class="proxy-hero-card">
+        <div>
+          <h2>串口代理转发监控</h2>
+          <p>管理串口转发对并实时监控数据流状态。</p>
+        </div>
+        <div class="proxy-hero-actions">
+          <button class="proxy-hero-btn" type="button">
+            <span class="material-symbols-outlined">refresh</span>
+            刷新状态
+          </button>
+          <button class="proxy-hero-btn primary" type="button">
+            <span class="material-symbols-outlined">add</span>
+            新建转发对
+          </button>
+        </div>
       </div>
-      <div class="header-actions">
-        <button class="btn btn-outline" type="button">
-          <span class="material-symbols-outlined">refresh</span>
-          刷新状态
-        </button>
-        <button class="btn btn-primary" type="button">
-          <span class="material-symbols-outlined">add</span>
-          新增代理
+      <div class="proxy-dashboard-filters">
+        <button
+          v-for="tab in filterTabs"
+          :key="tab.id"
+          type="button"
+          class="proxy-filter-chip"
+          :class="{ active: activeFilter === tab.id }"
+          @click="activeFilter = tab.id"
+        >
+          {{ tab.label }}
         </button>
       </div>
     </header>
 
-    <div class="proxy-filters">
-      <button
-        v-for="tab in filterTabs"
-        :key="tab"
-        class="proxy-filter"
-        :class="{ active: activeFilter === tab }"
-        type="button"
-        @click="activeFilter = tab"
+    <div class="proxy-dashboard-grid">
+      <article
+        v-for="proxy in filteredProxies"
+        :key="proxy.id"
+        class="proxy-panel"
+        :class="`status-${proxy.status}`"
       >
-        {{ tab }}
-      </button>
-    </div>
-
-    <div class="proxy-grid">
-      <article v-for="proxy in filteredProxies" :key="proxy.id" class="proxy-card">
-        <div class="proxy-card-header">
-          <div class="proxy-title">
-            <div class="proxy-icon" :class="`accent-${proxy.status}`">
-              <span class="material-symbols-outlined">settings_input_hdmi</span>
+        <div class="proxy-panel-head">
+          <div class="proxy-panel-title">
+            <div class="proxy-panel-icon" :class="`status-${proxy.status}`">
+              <span class="material-symbols-outlined">{{ proxy.statusIcon }}</span>
             </div>
             <div>
               <h3>{{ proxy.name }}</h3>
-              <p class="proxy-subtitle">{{ proxy.subtitle }}</p>
+              <p>{{ proxy.meta }}</p>
             </div>
           </div>
-          <span class="proxy-status" :class="proxy.status">
+          <span class="proxy-status-pill" :class="`status-${proxy.status}`">
             <span class="dot"></span>
             {{ proxy.statusLabel }}
           </span>
         </div>
 
-        <div class="proxy-card-body">
-          <div class="proxy-metric">
-            <span>波特率</span>
-            <strong>{{ proxy.baud }}</strong>
+        <div class="proxy-route-card" :class="`status-${proxy.status}`">
+          <div class="proxy-route-col">
+            <p>主机源端口</p>
+            <span class="proxy-route-chip proxy-mono">{{ proxy.hostPort }}</span>
+          </div>
+          <div class="proxy-route-state" :class="proxy.routeTone">
+            <span class="material-symbols-outlined">{{ proxy.routeIcon }}</span>
+            <span>{{ proxy.routeLabel }}</span>
           </div>
-          <div class="proxy-metric">
-            <span>实时带宽</span>
-            <strong>{{ proxy.bandwidth }}</strong>
+          <div class="proxy-route-col">
+            <p>设备代理端口</p>
+            <span class="proxy-route-chip proxy-mono">{{ proxy.devicePort }}</span>
           </div>
-          <div class="proxy-sparkline" :class="proxy.status">
-            <svg viewBox="0 0 100 40" preserveAspectRatio="none">
-              <path :d="proxy.spark" />
-            </svg>
+        </div>
+
+        <div class="proxy-metrics">
+          <div>
+            <p>波特率</p>
+            <strong class="proxy-mono">{{ proxy.baud }}</strong>
+          </div>
+          <div class="proxy-metric-bandwidth">
+            <div>
+              <p :class="{ danger: proxy.status === 'error' }">实时带宽</p>
+              <strong class="proxy-mono">
+                {{ proxy.bandwidth }}
+                <span>{{ proxy.bandwidthUnit }}</span>
+              </strong>
+            </div>
+            <div class="proxy-sparkline" :class="`status-${proxy.status}`">
+              <svg v-if="proxy.spark" viewBox="0 0 100 40">
+                <path :d="proxy.spark" />
+              </svg>
+              <div v-else class="proxy-sparkline-empty"></div>
+            </div>
           </div>
         </div>
 
-        <div class="proxy-card-footer">
-          <div class="proxy-toggle-wrap">
-            <label class="proxy-toggle">
+        <div class="proxy-panel-footer" :class="`status-${proxy.status}`">
+          <label class="proxy-footer-toggle">
+            <span class="proxy-toggle">
               <input type="checkbox" :checked="proxy.active" />
               <span></span>
-            </label>
-            <span class="proxy-toggle-label">{{ proxy.toggleLabel }}</span>
-          </div>
-          <div class="proxy-actions">
-            <button class="icon-btn" type="button" title="Terminal" @click="openModal(proxy)">
+            </span>
+            <span class="proxy-toggle-text">{{ proxy.toggleLabel }}</span>
+          </label>
+          <div class="proxy-footer-actions">
+            <button class="icon-btn" type="button" title="终端">
               <span class="material-symbols-outlined">terminal</span>
             </button>
-            <button class="icon-btn" type="button" title="Edit">
+            <button class="icon-btn" type="button" title="编辑" @click="openEditModal(proxy)">
               <span class="material-symbols-outlined">edit</span>
             </button>
-            <button class="icon-btn" type="button" title="Delete">
+            <button class="icon-btn danger" type="button" title="删除">
               <span class="material-symbols-outlined">delete</span>
             </button>
           </div>
         </div>
       </article>
 
-      <button class="proxy-card proxy-card-add" type="button">
+      <button class="proxy-panel proxy-panel-add" type="button">
         <div class="proxy-add-icon">
           <span class="material-symbols-outlined">add</span>
         </div>
-        <div class="proxy-add-title">添加 COM 监控节点</div>
-        <div class="proxy-add-sub">支持 RS-232, RS-485 或 USB 转串口。</div>
+        <div class="proxy-add-copy">
+          <h3>添加新转发代理</h3>
+          <p>将物理串口连接到虚拟代理节点</p>
+        </div>
+        <div class="proxy-add-tags">
+          <span>RS-232</span>
+          <span>RS-485</span>
+          <span>USB-TTY</span>
+        </div>
       </button>
     </div>
   </section>
 
-  <div v-if="modalOpen" class="proxy-modal-backdrop">
-    <div class="proxy-modal">
-      <div class="proxy-modal-header">
-        <div class="proxy-modal-title">
-          <div class="proxy-modal-icon">
-            <span class="material-symbols-outlined">terminal</span>
-          </div>
-          <div>
-            <h3>{{ modalTitle }}</h3>
-            <div class="proxy-modal-meta">
-              <span class="pulse-dot"></span>
-              实时流量监控中 - 115200 bps
+  <teleport to="body">
+    <div v-if="modalOpen" class="proxy-modal-overlay">
+      <div class="proxy-modal" @mousedown.stop @click.stop>
+        <div class="proxy-modal-header">
+          <div class="proxy-modal-title">
+            <div class="proxy-modal-icon">
+              <span class="material-symbols-outlined">edit_square</span>
             </div>
+            <h2>编辑转发代理</h2>
           </div>
-        </div>
-        <div class="proxy-modal-actions">
-          <div class="proxy-modal-select">
-            <label>手动协议选择</label>
-            <select>
-              <option>Modbus RTU</option>
-              <option>MQTT</option>
-              <option>Raw Hex (无协议)</option>
-              <option>Custom Protocol A</option>
-            </select>
-          </div>
-          <button class="icon-btn" type="button" @click="closeModal">
+          <button class="proxy-modal-close" type="button" @click="closeModal">
             <span class="material-symbols-outlined">close</span>
           </button>
         </div>
-      </div>
 
-      <div class="proxy-modal-body">
-        <section class="proxy-modal-stream">
-          <div class="proxy-modal-toolbar">
-            <div class="proxy-modal-toolbar-left">
-              <span class="material-symbols-outlined">filter_alt</span>
-              <span>活动协议视图: Modbus RTU</span>
-            </div>
-            <div class="proxy-modal-toolbar-right">
-              <span>右侧显示:</span>
-              <div class="proxy-modal-toggle">
-                <button type="button">ASCII</button>
-                <button class="active" type="button">解析值</button>
+        <div class="proxy-modal-body">
+          <div class="proxy-modal-stack">
+            <div class="proxy-modal-grid">
+              <div class="proxy-field">
+                <label>代理名称</label>
+                <input type="text" v-model="proxyName" />
+              </div>
+              <div class="proxy-field">
+                <label>连接模式</label>
+                <DropdownSelect
+                  v-model="connectionMode"
+                  class="proxy-select"
+                  :options="connectionOptions"
+                />
               </div>
             </div>
-          </div>
 
-          <div class="proxy-modal-list">
-            <div class="proxy-modal-list-header">
-              <span class="col-time">时间戳</span>
-              <span class="col-body">结构化协议字段(已对齐)</span>
-              <span class="col-summary">解析摘要</span>
+            <div class="proxy-port-map">
+              <div class="proxy-field">
+                <label>
+                  <span class="material-symbols-outlined">computer</span>
+                  主机源端口
+                </label>
+                <DropdownSelect v-model="hostPort" class="proxy-select" :options="portOptions" />
+              </div>
+              <div class="proxy-field">
+                <label>
+                  <span class="material-symbols-outlined">settings_input_component</span>
+                  设备代理端口
+                </label>
+                <DropdownSelect v-model="devicePort" class="proxy-select" :options="portOptions" />
+              </div>
             </div>
 
-            <div
-              v-for="frame in protocolFrames"
-              :key="frame.id"
-              class="proxy-frame"
-              :class="{ error: frame.error }"
-            >
-              <template v-if="frame.note">
-                <span class="col-time">{{ frame.time }}</span>
-                <span class="col-body note">{{ frame.note }}</span>
-                <span class="col-summary"></span>
-              </template>
-              <template v-else>
-                <div class="proxy-frame-row">
-                  <span class="col-time">{{ frame.time }}</span>
-                  <span class="col-body chips">
-                    <span
-                      v-for="chip in frame.chips"
-                      :key="chip.text"
-                      class="proxy-chip"
-                      :class="`tone-${chip.tone}`"
-                      :title="chip.title"
-                      :data-warn="chip.warn ? 'true' : null"
-                    >
-                      {{ chip.text }}
-                    </span>
-                  </span>
-                  <span class="col-summary" :class="{ error: frame.error }">{{ frame.summary }}</span>
+            <div class="proxy-section">
+              <div class="proxy-section-title">
+                <span class="material-symbols-outlined">settings_ethernet</span>
+                串口参数配置
+                <span>（两端同步应用）</span>
+              </div>
+              <div class="proxy-section-grid">
+                <div class="proxy-field">
+                  <label>波特率 (Baud Rate)</label>
+                  <DropdownSelect v-model="baudRate" class="proxy-select" :options="baudOptions" />
                 </div>
-                <div v-if="frame.detail" class="proxy-frame-detail">
-                  <div v-for="item in frame.detail" :key="item.label" class="proxy-detail-row">
-                    <span>{{ item.label }}</span>
-                    <span :class="item.tone ? `tone-${item.tone}` : ''">{{ item.value }}</span>
+                <div class="proxy-field">
+                  <label>数据位 (Data Bits)</label>
+                  <div class="proxy-segmented">
+                    <button type="button">5</button>
+                    <button type="button">6</button>
+                    <button type="button">7</button>
+                    <button type="button" class="active">8</button>
+                  </div>
+                </div>
+                <div class="proxy-field">
+                  <label>校验位 (Parity)</label>
+                  <DropdownSelect v-model="parity" class="proxy-select" :options="parityOptions" />
+                </div>
+                <div class="proxy-field">
+                  <label>停止位 (Stop Bits)</label>
+                  <div class="proxy-segmented">
+                    <button type="button" class="active">1</button>
+                    <button type="button">1.5</button>
+                    <button type="button">2</button>
+                  </div>
+                </div>
+                <div class="proxy-field proxy-span-2">
+                  <label>流控 (Flow Control)</label>
+                  <div class="proxy-segmented">
+                    <button type="button" class="active">None</button>
+                    <button type="button">RTS/CTS</button>
+                    <button type="button">XON/XOFF</button>
                   </div>
                 </div>
-              </template>
-            </div>
-          </div>
-
-          <div class="proxy-modal-footer">
-            <div class="proxy-footer-actions">
-              <button class="proxy-btn warning" type="button">
-                <span class="material-symbols-outlined">pause</span>
-                暂停
-              </button>
-              <button class="proxy-btn ghost" type="button">
-                <span class="material-symbols-outlined">delete_sweep</span>
-                重置
-              </button>
-            </div>
-            <button class="proxy-btn primary" type="button">
-              <span class="material-symbols-outlined">download</span>
-              导出当前协议日志
-            </button>
-          </div>
-        </section>
-
-        <aside class="proxy-modal-side">
-          <div>
-            <h4>当前会话统计</h4>
-            <div class="proxy-stat-card">
-              <span>已处理帧数</span>
-              <div class="proxy-stat-value">
-                <strong>1,284</strong>
-                <em>8.4 fps</em>
               </div>
-              <div class="proxy-stat-bar"></div>
             </div>
-            <div class="proxy-stat-card">
-              <span>校验错误率</span>
-              <div class="proxy-stat-value">
-                <strong class="danger">0.08%</strong>
-                <em>1 帧错误</em>
+
+            <div class="proxy-section proxy-modal-advanced">
+              <div class="proxy-section-title muted">
+                <span class="material-symbols-outlined">settings_suggest</span>
+                高级运行选项
               </div>
-            </div>
-            <div class="proxy-stat-card">
-              <span>持续监控时长</span>
-              <div class="proxy-stat-value">
-                <strong>00:42:15</strong>
+              <div class="proxy-toggle-row">
+                <label>
+                  <span class="proxy-toggle">
+                    <input type="checkbox" checked />
+                    <span></span>
+                  </span>
+                  自动重连
+                </label>
+                <label>
+                  <span class="proxy-toggle">
+                    <input type="checkbox" />
+                    <span></span>
+                  </span>
+                  详细日志记录
+                </label>
               </div>
             </div>
           </div>
-
-          <div class="proxy-side-block">
-            <h5>视图过滤器</h5>
-            <label>
-              <input type="checkbox" checked />
-              仅显示合法帧
-            </label>
-            <label>
-              <input type="checkbox" />
-              仅显示写指令
-            </label>
-          </div>
-
-          <div class="proxy-side-tip">
-            <div class="proxy-side-tip-title">
-              <span class="material-symbols-outlined">info</span>
-              当前配置
-            </div>
-            <p>Modbus RTU 监听中。解析对象 1-255 从站地址。</p>
-          </div>
-        </aside>
+        </div>
       </div>
     </div>
-  </div>
+  </teleport>
 </template>
diff --git a/web-ui/src/style.css b/web-ui/src/style.css
index aad87a1..f8c545b 100644
--- a/web-ui/src/style.css
+++ b/web-ui/src/style.css
@@ -405,6 +405,8 @@ textarea {
   gap: 6px;
   flex: 1;
   overflow-y: auto;
+  overscroll-behavior: contain;
+  overflow-anchor: none;
   padding-right: 4px;
   scrollbar-gutter: stable;
 }
@@ -501,7 +503,6 @@ textarea {
   border: 1px solid var(--border);
   padding: 18px 20px;
   border-radius: 14px;
-  backdrop-filter: blur(12px);
   box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
 }
 
@@ -875,6 +876,12 @@ textarea {
   transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
 }
 
+.proxy-select.select-wrap {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
 .select-trigger {
   border: none;
   background: transparent;
@@ -923,6 +930,8 @@ textarea {
   z-index: 3000;
   max-height: 240px;
   overflow-y: auto;
+  overscroll-behavior: contain;
+  overflow-anchor: none;
 }
 
 .select-option {
@@ -1157,6 +1166,8 @@ textarea {
   max-height: 208px;
   min-height: 208px;
   overflow-y: auto;
+  overscroll-behavior: contain;
+  overflow-anchor: none;
   padding-right: 4px;
 }
 
@@ -1239,6 +1250,7 @@ textarea {
   overflow-y: auto;
   contain: paint;
   overscroll-behavior: contain;
+  overflow-anchor: none;
   max-height: 320px;
   min-height: 180px;
 }
@@ -1695,6 +1707,7 @@ textarea {
   padding: 20px 22px;
   overflow-y: auto;
   overscroll-behavior: contain;
+  overflow-anchor: none;
   display: flex;
   flex-direction: column;
   gap: 18px;
@@ -2375,6 +2388,49 @@ textarea {
   border-color: #fecaca;
 }
 
+.proxy-route {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px dashed #e2e8f0;
+  background: #f8fafc;
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.proxy-route-label {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 9px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.proxy-route-line {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.proxy-route-chip {
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  font-size: 10px;
+  font-weight: 600;
+  color: #1e293b;
+  letter-spacing: 0.04em;
+}
+
+.proxy-route-arrow {
+  font-size: 10px;
+  color: #94a3b8;
+}
+
 .proxy-card-body {
   display: flex;
   justify-content: space-between;
@@ -2548,7 +2604,6 @@ textarea {
   position: fixed;
   inset: 0;
   background: rgba(15, 23, 42, 0.45);
-  backdrop-filter: blur(6px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -2734,6 +2789,8 @@ textarea {
   font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 12px;
   color: #334155;
+  overscroll-behavior: contain;
+  overflow-anchor: none;
 }
 
 .proxy-modal-list-header {
@@ -3144,3 +3201,777 @@ textarea {
     order: 1;
   }
 }
+
+.proxy-dashboard {
+  gap: 24px;
+}
+
+.proxy-dashboard-hero {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.proxy-hero-card {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 24px 26px;
+  border-radius: 24px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+.proxy-hero-card h2 {
+  margin: 0;
+  font-size: 26px;
+  letter-spacing: -0.02em;
+}
+
+.proxy-hero-card p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.proxy-hero-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.proxy-hero-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+}
+
+.proxy-hero-btn:hover {
+  border-color: #cbd5f5;
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
+  transform: translateY(-1px);
+}
+
+.proxy-hero-btn.primary {
+  border-color: transparent;
+  background: #2563eb;
+  color: #ffffff;
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.3);
+}
+
+.proxy-hero-btn.primary:hover {
+  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.36);
+}
+
+.proxy-dashboard-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.proxy-filter-chip {
+  border: 1px solid var(--border);
+  background: #ffffff;
+  color: #64748b;
+  padding: 8px 18px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
+}
+
+.proxy-filter-chip:hover {
+  border-color: #cbd5f5;
+}
+
+.proxy-filter-chip.active {
+  background: #0f172a;
+  color: #ffffff;
+  border-color: #0f172a;
+}
+
+.proxy-dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 18px;
+  justify-content: start;
+}
+
+.proxy-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  border-radius: 22px;
+  border: 1px solid var(--border);
+  background: #ffffff;
+  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.proxy-panel:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
+}
+
+.proxy-panel.status-stopped {
+  opacity: 0.75;
+  filter: grayscale(0.35);
+}
+
+.proxy-panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 20px 0;
+}
+
+.proxy-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.proxy-panel-title h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.proxy-panel-title p {
+  margin: 4px 0 0;
+  font-size: 11px;
+  color: #94a3b8;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.proxy-panel-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.proxy-panel-icon.status-stopped {
+  background: #f1f5f9;
+  color: #94a3b8;
+}
+
+.proxy-panel-icon.status-error {
+  background: #fee2e2;
+  color: #ef4444;
+}
+
+.proxy-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+}
+
+.proxy-status-pill .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.proxy-status-pill.status-running {
+  color: #16a34a;
+  background: #ecfdf3;
+  border-color: #bbf7d0;
+}
+
+.proxy-status-pill.status-stopped {
+  color: #64748b;
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+}
+
+.proxy-status-pill.status-error {
+  color: #ef4444;
+  background: #fef2f2;
+  border-color: #fecaca;
+}
+
+.proxy-route-card {
+  margin: 0 20px;
+  padding: 12px 14px;
+  border-radius: 18px;
+  border: 1px dashed #d1d5db;
+  background: #f8fafc;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 12px;
+}
+
+.proxy-route-card.status-error {
+  border-color: #fecaca;
+  background: #fff1f2;
+}
+
+.proxy-route-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  text-align: center;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.proxy-route-chip {
+  padding: 4px 10px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  font-size: 12px;
+  color: #1f2937;
+  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
+}
+
+.proxy-route-state {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.proxy-route-state.primary {
+  color: #2563eb;
+}
+
+.proxy-route-state.muted {
+  color: #94a3b8;
+}
+
+.proxy-route-state.danger {
+  color: #ef4444;
+}
+
+.proxy-metrics {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr;
+  gap: 12px;
+  padding: 14px 20px;
+  border-top: 1px solid #f1f5f9;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.proxy-metrics p {
+  margin: 0 0 6px;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.proxy-metrics p.danger {
+  color: #ef4444;
+}
+
+.proxy-metrics strong {
+  font-size: 18px;
+  color: #0f172a;
+}
+
+.proxy-metrics strong span {
+  font-size: 11px;
+  font-weight: 500;
+  color: #94a3b8;
+  margin-left: 4px;
+}
+
+.proxy-metric-bandwidth {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.proxy-sparkline {
+  width: 90px;
+  height: 36px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.proxy-sparkline svg {
+  width: 100%;
+  height: 100%;
+}
+
+.proxy-sparkline path {
+  fill: none;
+  stroke-width: 2;
+  stroke: #2563eb;
+}
+
+.proxy-sparkline.status-error path {
+  stroke: #ef4444;
+}
+
+.proxy-sparkline.status-stopped path {
+  stroke: #94a3b8;
+}
+
+.proxy-sparkline-empty {
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  align-self: center;
+}
+
+.proxy-panel-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 20px 16px;
+  background: #f8fafc;
+}
+
+.proxy-panel-footer.status-error {
+  background: #fff1f2;
+}
+
+.proxy-footer-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.proxy-toggle-text {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.proxy-panel-footer.status-error .proxy-toggle-text {
+  color: #ef4444;
+}
+
+.proxy-footer-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon-btn.danger:hover {
+  color: #ef4444;
+  background: #fee2e2;
+}
+
+.proxy-panel-add {
+  border: 2px dashed #cbd5f5;
+  background: transparent;
+  box-shadow: none;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  min-height: 300px;
+  padding: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.proxy-panel-add:hover {
+  border-color: #2563eb;
+  background: #f8fafc;
+}
+
+.proxy-add-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: #f1f5f9;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #94a3b8;
+  transition: all 0.2s ease;
+}
+
+.proxy-panel-add:hover .proxy-add-icon {
+  background: #2563eb;
+  color: #ffffff;
+}
+
+.proxy-add-copy h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.proxy-add-copy p {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.proxy-add-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.proxy-add-tags span {
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  font-size: 10px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.proxy-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+}
+
+.proxy-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  z-index: 80;
+}
+
+body.proxy-edit-open {
+  overflow: hidden;
+}
+
+body.proxy-edit-open .main > :not(.proxy-modal-overlay) {
+  pointer-events: none;
+}
+
+body.proxy-edit-open .proxy-modal-overlay {
+  pointer-events: auto;
+}
+
+.proxy-modal {
+  width: min(820px, 100%);
+  background: #ffffff;
+  border-radius: 28px;
+  border: 1px solid var(--border);
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 90vh;
+}
+
+.proxy-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px 32px;
+  border-bottom: 1px solid #eef2f7;
+  background: #ffffff;
+}
+
+.proxy-modal-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.proxy-modal-title h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.proxy-modal-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.proxy-modal-close {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  border: none;
+  background: transparent;
+  color: #94a3b8;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.proxy-modal-close:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.proxy-modal-body {
+  padding: 32px;
+  overflow-y: auto;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+.proxy-modal-note {
+  margin: 0;
+  font-size: 14px;
+  color: #64748b;
+}
+
+.proxy-modal-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  align-items: stretch;
+  width: 100%;
+}
+
+.proxy-modal-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.proxy-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 12px;
+  color: #334155;
+}
+
+.proxy-field label {
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.proxy-field input,
+.proxy-field select {
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  border-radius: 12px;
+  padding: 10px 12px;
+  font-size: 13px;
+  color: #0f172a;
+  width: 100%;
+}
+
+.proxy-port-map {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+  align-items: end;
+  padding: 20px;
+  border-radius: 18px;
+  border: 1px solid #dbe4ff;
+  background: #f5f8ff;
+  width: 100%;
+}
+
+.proxy-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.proxy-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 13px;
+  color: #1f2937;
+  border-bottom: 1px solid #eef2f7;
+  padding-bottom: 8px;
+}
+
+.proxy-section-title span:last-child {
+  font-weight: 500;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.proxy-section-title.muted {
+  color: #64748b;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.proxy-section-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+  padding: 24px;
+  border-radius: 16px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  width: 100%;
+}
+
+.proxy-span-2 {
+  grid-column: span 2;
+}
+
+.proxy-segmented {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
+  gap: 6px;
+  padding: 6px;
+  border-radius: 14px;
+  background: #e2e8f0;
+}
+
+.proxy-segmented button {
+  border: none;
+  background: transparent;
+  padding: 8px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #64748b;
+  cursor: pointer;
+}
+
+.proxy-segmented button.active {
+  background: #ffffff;
+  color: #2563eb;
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
+}
+
+.proxy-toggle-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  font-size: 13px;
+  color: #64748b;
+}
+
+@media (max-width: 900px) {
+  .proxy-modal-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .proxy-port-map {
+    grid-template-columns: 1fr;
+  }
+
+  .proxy-section-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.proxy-modal-advanced {
+  border-top: 1px solid #eef2f7;
+  padding-top: 16px;
+}
+
+.proxy-toggle-row label {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+}
+
+.proxy-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 24px 32px 28px;
+  border-top: 1px solid #eef2f7;
+  background: #f8fafc;
+}
+
+@media (min-width: 768px) {
+  .proxy-modal-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .proxy-port-map {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .proxy-section-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .proxy-section-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.proxy-modal-btn {
+  border-radius: 14px;
+  padding: 10px 18px;
+  font-size: 13px;
+  font-weight: 700;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  color: #64748b;
+  cursor: pointer;
+  transition: transform 0.16s ease, box-shadow 0.16s ease;
+}
+
+.proxy-modal-btn.ghost:hover {
+  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
+  transform: translateY(-1px);
+}
+
+.proxy-modal-btn.primary {
+  border: none;
+  background: #2563eb;
+  color: #ffffff;
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.25);
+}

From 866e0e91e4bb46365a3e07056d12da2d1526c507 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Tue, 13 Jan 2026 16:54:01 +0800
Subject: [PATCH 07/36] fix(ui): remove channels view from navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- Changes:
  - 移除“通道”入口与对应页面区块
- Impact:
  - 简化前端导航，避免无用页面
- Compatibility/Behavior changes:
  - 通道页面不再可访问
- Dependencies/Environment:
  - None
- Verification:
  - Not run (manual)
Refs:
- None

[English]
- Changes:
  - Removed channels entry and its view
- Impact:
  - Simplified navigation; unused page hidden
- Compatibility/Behavior changes:
  - Channels view no longer accessible
- Dependencies/Environment:
  - None
- Verification:
  - Not run (manual)
Refs:
- None
---
 web-ui/src/App.vue | 75 ----------------------------------------------
 1 file changed, 75 deletions(-)

diff --git a/web-ui/src/App.vue b/web-ui/src/App.vue
index 35580c6..a06123a 100644
--- a/web-ui/src/App.vue
+++ b/web-ui/src/App.vue
@@ -1742,10 +1742,6 @@ function unlockSidebarWidth() {
             <span class="material-symbols-outlined">settings_input_hdmi</span>
             <span>代理监控</span>
           </button>
-          <button class="nav-item" :class="{ active: currentView === 'channels' }" @click="currentView = 'channels'">
-            <span class="material-symbols-outlined">cloud_queue</span>
-            <span>通道</span>
-          </button>
           <button class="nav-item" :class="{ active: currentView === 'protocols' }" @click="currentView = 'protocols'">
             <span class="material-symbols-outlined">cable</span>
             <span>协议</span>
@@ -1770,77 +1766,6 @@ function unlockSidebarWidth() {
         <ScriptsView v-else-if="currentView === 'scripts'" />
         <ProxyMonitorView v-else-if="currentView === 'proxy'" />
 
-  <section v-else-if="currentView === 'channels'" class="page">
-  <header class="page-header spaced">
-    <div>
-      <h2>通道管理</h2>
-      <p>管理通信连接通道，监控实时状态与配置参数。</p>
-    </div>
-    <div class="header-actions">
-      <button class="btn btn-outline" @click="handleChannelRefresh">
-        <span class="material-symbols-outlined">refresh</span>
-        刷新状态
-      </button>
-      <button class="btn btn-primary" @click="handleNewChannel">
-        <span class="material-symbols-outlined">add</span>
-        新建通道
-      </button>
-    </div>
-  </header>
-  <div class="tab-strip secondary">
-    <button :class="{ active: channelTab === 'all' }" @click="setChannelTab('all')">全部通道</button>
-    <button :class="{ active: channelTab === 'serial' }" @click="setChannelTab('serial')">串口 (Serial)</button>
-    <button :class="{ active: channelTab === 'tcp-client' }" @click="setChannelTab('tcp-client')">TCP 客户端</button>
-    <button :class="{ active: channelTab === 'tcp-server' }" @click="setChannelTab('tcp-server')">TCP 服务端</button>
-  </div>
-  <div class="card-list">
-            <div v-for="card in filteredChannelCards" :key="card.id" class="card">
-              <div class="card-main">
-                <div class="card-icon">
-                  <span class="material-symbols-outlined">settings_input_hdmi</span>
-                </div>
-                <div>
-                  <div class="card-title">
-                    {{ card.name }}
-                    <span class="chip">{{ card.type }}</span>
-                  </div>
-                  <div class="card-meta">
-                    <span>{{ card.details[0] }}</span>
-                    <span class="dot"></span>
-                    <span>{{ card.details[1] }}</span>
-                  </div>
-                </div>
-              </div>
-              <div class="card-side">
-                <div class="traffic">
-                  <span>流量</span>
-                  <strong>{{ card.traffic }}</strong>
-                </div>
-                <div class="status" :class="card.statusClass">
-                  <span class="dot"></span>
-                  {{ card.statusText }}
-                </div>
-                <button class="icon-btn">
-                  <span class="material-symbols-outlined">more_vert</span>
-                </button>
-              </div>
-            </div>
-            <div v-if="filteredChannelCards.length === 0" class="card empty-card">
-              <div class="card-main">
-                <div class="card-icon">
-                  <span class="material-symbols-outlined">link_off</span>
-                </div>
-                <div>
-                  <div class="card-title">暂无通道</div>
-                  <div class="card-meta">
-                    <span>未检测到活动连接</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
         <section v-else-if="currentView === 'protocols'" class="page">
           <header class="page-header spaced">
             <div>

From 5d6a020e8642f5f4bb8f7038d37669ae1742ad6d Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Thu, 22 Jan 2026 23:41:51 +0800
Subject: [PATCH 08/36] refactor(ui): rename ui/web-ui to desktop/frontend
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更：
  - 将 ui/ 目录重命名为 desktop/
  - 将 web-ui/ 目录重命名为 frontend/
  - 同步更新入口、桥接、打包与构建脚本中的路径
- 影响：
  - 目录结构更清晰，桌面宿主与前端区分明确
- 兼容/行为变化：
  - 运行与构建路径更新；功能逻辑不变
- 依赖/环境：
  - 无
- 验证：
  - 未运行（仅结构调整）
Refs:
-

[English]
- Changes:
  - Rename ui/ to desktop/
  - Rename web-ui/ to frontend/
  - Update entrypoints, bridge imports, and build/package paths
- Impact:
  - Clearer separation between desktop host and frontend
- Compatibility/Behavior changes:
  - Path updates for runtime/build; no behavior change
- Dependencies/Environment:
  - None
- Verification:
  - Not run (structure-only change)
Refs:
-
---
 {ui => desktop}/script_runner_qt.py                 |   0
 {ui => desktop}/web_bridge.py                       |  12 ++++++------
 {ui => desktop}/web_window.py                       |   8 ++++----
 {ui => desktop}/widgets/__init__.py                 |   0
 {ui => desktop}/win_snap.py                         |   0
 {web-ui => frontend}/.gitignore                     |   0
 {web-ui => frontend}/.vscode/extensions.json        |   0
 {web-ui => frontend}/README.md                      |   0
 {web-ui => frontend}/config/ui_settings.json        |   4 ++--
 {web-ui => frontend}/index.html                     |   0
 {web-ui => frontend}/package-lock.json              |   4 ++--
 {web-ui => frontend}/package.json                   |   2 +-
 {web-ui => frontend}/public/vite.svg                |   0
 {web-ui => frontend}/src/App.vue                    |   0
 .../src/assets/fonts/MaterialSymbolsOutlined.ttf    | Bin
 {web-ui => frontend}/src/assets/vue.svg             |   0
 .../src/components/DropdownSelect.vue               |   0
 {web-ui => frontend}/src/components/HelloWorld.vue  |   0
 {web-ui => frontend}/src/components/LogStream.vue   |   0
 {web-ui => frontend}/src/components/ManualView.vue  |   0
 .../src/components/ProxyMonitorView.vue             |   0
 {web-ui => frontend}/src/components/ScriptsView.vue |   0
 {web-ui => frontend}/src/main.js                    |   2 +-
 {web-ui => frontend}/src/style.css                  |   0
 {web-ui => frontend}/vite.config.js                 |   0
 main.py                                             |   2 +-
 main_web.py                                         |   2 +-
 scripts/build_windows.ps1                           |   4 ++--
 28 files changed, 20 insertions(+), 20 deletions(-)
 rename {ui => desktop}/script_runner_qt.py (100%)
 rename {ui => desktop}/web_bridge.py (98%)
 rename {ui => desktop}/web_window.py (97%)
 rename {ui => desktop}/widgets/__init__.py (100%)
 rename {ui => desktop}/win_snap.py (100%)
 rename {web-ui => frontend}/.gitignore (100%)
 rename {web-ui => frontend}/.vscode/extensions.json (100%)
 rename {web-ui => frontend}/README.md (100%)
 rename {web-ui => frontend}/config/ui_settings.json (70%)
 rename {web-ui => frontend}/index.html (100%)
 rename {web-ui => frontend}/package-lock.json (99%)
 rename {web-ui => frontend}/package.json (93%)
 rename {web-ui => frontend}/public/vite.svg (100%)
 rename {web-ui => frontend}/src/App.vue (100%)
 rename {web-ui => frontend}/src/assets/fonts/MaterialSymbolsOutlined.ttf (100%)
 rename {web-ui => frontend}/src/assets/vue.svg (100%)
 rename {web-ui => frontend}/src/components/DropdownSelect.vue (100%)
 rename {web-ui => frontend}/src/components/HelloWorld.vue (100%)
 rename {web-ui => frontend}/src/components/LogStream.vue (100%)
 rename {web-ui => frontend}/src/components/ManualView.vue (100%)
 rename {web-ui => frontend}/src/components/ProxyMonitorView.vue (100%)
 rename {web-ui => frontend}/src/components/ScriptsView.vue (100%)
 rename {web-ui => frontend}/src/main.js (91%)
 rename {web-ui => frontend}/src/style.css (100%)
 rename {web-ui => frontend}/vite.config.js (100%)

diff --git a/ui/script_runner_qt.py b/desktop/script_runner_qt.py
similarity index 100%
rename from ui/script_runner_qt.py
rename to desktop/script_runner_qt.py
diff --git a/ui/web_bridge.py b/desktop/web_bridge.py
similarity index 98%
rename from ui/web_bridge.py
rename to desktop/web_bridge.py
index 35f0ebe..eeda8eb 100644
--- a/ui/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -19,7 +19,7 @@
 
 from protocols.registry import ProtocolRegistry
 import protocols as protocols_pkg
-from ui.script_runner_qt import ScriptRunnerQt
+from desktop.script_runner_qt import ScriptRunnerQt
 
 
 class WebBridge(QObject):
@@ -126,7 +126,7 @@ def save_settings(self, payload: Dict[str, Any]) -> bool:
 
     @Slot(str, str, result=str)
     def select_directory(self, title: str, start_dir: str) -> str:
-        return QFileDialog.getExistingDirectory(None, title or "选择目录", start_dir or "")
+        return QFileDialog.getExistingDirectory(None, title or "閫夋嫨鐩綍", start_dir or "")
 
     @Slot(str, int)
     def connect_serial(self, port: str, baud: int = 115200) -> None:
@@ -207,7 +207,7 @@ def stop_script(self) -> None:
     def load_yaml(self) -> Dict[str, str]:
         path, _ = QFileDialog.getOpenFileName(
             None,
-            "选择 YAML 脚本",
+            "閫夋嫨 YAML 鑴氭湰",
             str(Path.cwd()),
             "YAML Files (*.yaml *.yml)",
         )
@@ -228,7 +228,7 @@ def save_yaml(self, yaml_text: str, suggested_name: str = "workflow.yaml") -> Di
         default_path = Path.cwd() / (suggested_name or "workflow.yaml")
         path, _ = QFileDialog.getSaveFileName(
             None,
-            "保存 YAML 脚本",
+            "淇濆瓨 YAML 鑴氭湰",
             str(default_path),
             "YAML Files (*.yaml *.yml)",
         )
@@ -471,8 +471,8 @@ def _protocol_category(key: str) -> str:
     def _settings_defaults(self) -> Dict[str, Any]:
         base_path = (self._settings_root / "workflows").resolve()
         return {
-            "uiLanguage": "简体中文",
-            "uiTheme": "系统默认",
+            "uiLanguage": "绠€浣撲腑鏂?,
+            "uiTheme": "绯荤粺榛樿",
             "autoConnectOnStart": True,
             "dslWorkspacePath": str(base_path),
             "serial": {
diff --git a/ui/web_window.py b/desktop/web_window.py
similarity index 97%
rename from ui/web_window.py
rename to desktop/web_window.py
index 4f0b957..5d63701 100644
--- a/ui/web_window.py
+++ b/desktop/web_window.py
@@ -20,8 +20,8 @@
     from PyQt6.QtWidgets import QFileDialog, QMainWindow, QMenu  # type: ignore
     from PyQt6.QtWebEngineWidgets import QWebEngineView  # type: ignore
 
-from ui.web_bridge import WebBridge
-from ui.win_snap import apply_snap_styles
+from desktop.web_bridge import WebBridge
+from desktop.win_snap import apply_snap_styles
 
 class LoggingWebPage(QWebEnginePage):
     def javaScriptConsoleMessage(self, level, message, line_number, source_id):  # type: ignore[override]
@@ -73,7 +73,7 @@ def __init__(self, bus=None, comm=None) -> None:
             icon = QIcon(str(icon_png))
         if not icon.isNull():
             self.setWindowIcon(icon)
-        dist_index = base_dir / "web-ui" / "dist" / "index.html"
+        dist_index = base_dir / "frontend" / "dist" / "index.html"
         fallback_index = base_dir / "assets" / "web" / "index.html"
         index_path = dist_index if dist_index.exists() else fallback_index
         view.load(QUrl.fromLocalFile(str(index_path)))
@@ -83,7 +83,7 @@ def _handle_download(self, item) -> None:
         suggested = item.downloadFileName()
         path, _ = QFileDialog.getSaveFileName(
             self,
-            "保存日志",
+            "濞ｅ洦绻傞悺銊╁籍閵夈儳绠?,
             suggested or "io_logs.log",
             "Log Files (*.log);;All Files (*.*)",
         )
diff --git a/ui/widgets/__init__.py b/desktop/widgets/__init__.py
similarity index 100%
rename from ui/widgets/__init__.py
rename to desktop/widgets/__init__.py
diff --git a/ui/win_snap.py b/desktop/win_snap.py
similarity index 100%
rename from ui/win_snap.py
rename to desktop/win_snap.py
diff --git a/web-ui/.gitignore b/frontend/.gitignore
similarity index 100%
rename from web-ui/.gitignore
rename to frontend/.gitignore
diff --git a/web-ui/.vscode/extensions.json b/frontend/.vscode/extensions.json
similarity index 100%
rename from web-ui/.vscode/extensions.json
rename to frontend/.vscode/extensions.json
diff --git a/web-ui/README.md b/frontend/README.md
similarity index 100%
rename from web-ui/README.md
rename to frontend/README.md
diff --git a/web-ui/config/ui_settings.json b/frontend/config/ui_settings.json
similarity index 70%
rename from web-ui/config/ui_settings.json
rename to frontend/config/ui_settings.json
index 29e0d9e..c977230 100644
--- a/web-ui/config/ui_settings.json
+++ b/frontend/config/ui_settings.json
@@ -1,6 +1,6 @@
 {
   "autoConnectOnStart": false,
-  "dslWorkspacePath": "D:\\GitRepository\\ProtoFlow\\web-ui\\workflows",
+  "dslWorkspacePath": "D:\\GitRepository\\ProtoFlow\\frontend\\workflows",
   "network": {
     "tcpHeartbeatSec": 60,
     "tcpRetryCount": 3,
@@ -12,5 +12,5 @@
     "defaultStopBits": "1"
   },
   "uiLanguage": "English (US)",
-  "uiTheme": "系统默认"
+  "uiTheme": "绯荤粺榛樿"
 }
\ No newline at end of file
diff --git a/web-ui/index.html b/frontend/index.html
similarity index 100%
rename from web-ui/index.html
rename to frontend/index.html
diff --git a/web-ui/package-lock.json b/frontend/package-lock.json
similarity index 99%
rename from web-ui/package-lock.json
rename to frontend/package-lock.json
index a6f32fc..a120f8a 100644
--- a/web-ui/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "web-ui",
+  "name": "protoflow-frontend",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "web-ui",
+      "name": "protoflow-frontend",
       "version": "0.0.0",
       "dependencies": {
         "@codemirror/lang-yaml": "^6.1.2",
diff --git a/web-ui/package.json b/frontend/package.json
similarity index 93%
rename from web-ui/package.json
rename to frontend/package.json
index 0f960d6..cfcdb89 100644
--- a/web-ui/package.json
+++ b/frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "web-ui",
+  "name": "protoflow-frontend",
   "private": true,
   "version": "0.0.0",
   "type": "module",
diff --git a/web-ui/public/vite.svg b/frontend/public/vite.svg
similarity index 100%
rename from web-ui/public/vite.svg
rename to frontend/public/vite.svg
diff --git a/web-ui/src/App.vue b/frontend/src/App.vue
similarity index 100%
rename from web-ui/src/App.vue
rename to frontend/src/App.vue
diff --git a/web-ui/src/assets/fonts/MaterialSymbolsOutlined.ttf b/frontend/src/assets/fonts/MaterialSymbolsOutlined.ttf
similarity index 100%
rename from web-ui/src/assets/fonts/MaterialSymbolsOutlined.ttf
rename to frontend/src/assets/fonts/MaterialSymbolsOutlined.ttf
diff --git a/web-ui/src/assets/vue.svg b/frontend/src/assets/vue.svg
similarity index 100%
rename from web-ui/src/assets/vue.svg
rename to frontend/src/assets/vue.svg
diff --git a/web-ui/src/components/DropdownSelect.vue b/frontend/src/components/DropdownSelect.vue
similarity index 100%
rename from web-ui/src/components/DropdownSelect.vue
rename to frontend/src/components/DropdownSelect.vue
diff --git a/web-ui/src/components/HelloWorld.vue b/frontend/src/components/HelloWorld.vue
similarity index 100%
rename from web-ui/src/components/HelloWorld.vue
rename to frontend/src/components/HelloWorld.vue
diff --git a/web-ui/src/components/LogStream.vue b/frontend/src/components/LogStream.vue
similarity index 100%
rename from web-ui/src/components/LogStream.vue
rename to frontend/src/components/LogStream.vue
diff --git a/web-ui/src/components/ManualView.vue b/frontend/src/components/ManualView.vue
similarity index 100%
rename from web-ui/src/components/ManualView.vue
rename to frontend/src/components/ManualView.vue
diff --git a/web-ui/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
similarity index 100%
rename from web-ui/src/components/ProxyMonitorView.vue
rename to frontend/src/components/ProxyMonitorView.vue
diff --git a/web-ui/src/components/ScriptsView.vue b/frontend/src/components/ScriptsView.vue
similarity index 100%
rename from web-ui/src/components/ScriptsView.vue
rename to frontend/src/components/ScriptsView.vue
diff --git a/web-ui/src/main.js b/frontend/src/main.js
similarity index 91%
rename from web-ui/src/main.js
rename to frontend/src/main.js
index ba3d997..8711712 100644
--- a/web-ui/src/main.js
+++ b/frontend/src/main.js
@@ -23,7 +23,7 @@ async function bootstrap() {
       console.log('[bridge]', msg)
     })
     bridge.notify_ready()
-    bridge.ping('web-ui').then((resp) => console.log(resp))
+    bridge.ping('frontend').then((resp) => console.log(resp))
   }
   createApp(App).mount('#app')
 }
diff --git a/web-ui/src/style.css b/frontend/src/style.css
similarity index 100%
rename from web-ui/src/style.css
rename to frontend/src/style.css
diff --git a/web-ui/vite.config.js b/frontend/vite.config.js
similarity index 100%
rename from web-ui/vite.config.js
rename to frontend/vite.config.js
diff --git a/main.py b/main.py
index caa8ba5..5aaa1e1 100644
--- a/main.py
+++ b/main.py
@@ -1,4 +1,4 @@
-"""应用入口：使用 Qt WebEngine + Vue Web UI。"""
+"""搴旂敤鍏ュ彛锛氫娇鐢?Qt WebEngine + Vue Frontend銆?""
 
 from __future__ import annotations
 
diff --git a/main_web.py b/main_web.py
index 0d79f6d..319dbe0 100644
--- a/main_web.py
+++ b/main_web.py
@@ -21,7 +21,7 @@
 from core.event_bus import EventBus
 from core.plugin_manager import PluginManager
 from core.protocol_loader import ProtocolLoader
-from ui.web_window import WebWindow
+from desktop.web_window import WebWindow
 
 
 class _TeeStream:
diff --git a/scripts/build_windows.ps1 b/scripts/build_windows.ps1
index 2089df2..61f8a5e 100644
--- a/scripts/build_windows.ps1
+++ b/scripts/build_windows.ps1
@@ -6,7 +6,7 @@ param(
 $ErrorActionPreference = "Stop"
 
 Write-Host "==> Build web UI"
-Push-Location "web-ui"
+Push-Location "frontend"
 & $Node ci
 & $Node run build
 Pop-Location
@@ -17,7 +17,7 @@ Write-Host "==> Install Python deps"
 
 Write-Host "==> Build app (PyInstaller)"
 & $Python -m PyInstaller --name ProtoFlow --windowed --onedir --noconfirm --icon "installer\ProtoFlow.ico" `
-  --add-data "web-ui\dist;web-ui\dist" `
+  --add-data "frontend\dist;frontend\dist" `
   --add-data "config;config" `
   --add-data "plugins;plugins" `
   --add-data "assets;assets" `

From 180af10546f4195bd2a62f3eaf2329da5cb2445c Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Thu, 22 Jan 2026 23:55:49 +0800
Subject: [PATCH 09/36] fix(ui): remove garbled strings in desktop host
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更：
  - 修复 main.py 入口注释乱码导致的语法错误
  - 修复桌面端 WebWindow/WebBridge 中的乱码字符串
  - 将保存/选择对话框标题改为 ASCII，避免编码异常
- 影响：
  - 桌面端可正常启动与加载
- 兼容/行为变化：
  - 仅文案修正，无逻辑变化
- 依赖/环境：
  - 无
- 验证：
  - python -m py_compile main.py main_web.py desktop/web_window.py desktop/web_bridge.py
Refs:
-

[English]
- Changes:
  - Fix garbled docstring in main.py that caused a syntax error
  - Fix garbled UI strings in WebWindow/WebBridge
  - Use ASCII dialog titles to avoid encoding issues
- Impact:
  - Desktop host starts and loads normally
- Compatibility/Behavior changes:
  - Text-only changes; no behavior change
- Dependencies/Environment:
  - None
- Verification:
  - python -m py_compile main.py main_web.py desktop/web_window.py desktop/web_bridge.py
Refs:
-
---
 desktop/web_bridge.py |  10 +--
 desktop/web_window.py | 140 ++++++++++++++++++++++++++++++++++--------
 main.py               |   2 +-
 3 files changed, 120 insertions(+), 32 deletions(-)

diff --git a/desktop/web_bridge.py b/desktop/web_bridge.py
index eeda8eb..798451e 100644
--- a/desktop/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -126,7 +126,7 @@ def save_settings(self, payload: Dict[str, Any]) -> bool:
 
     @Slot(str, str, result=str)
     def select_directory(self, title: str, start_dir: str) -> str:
-        return QFileDialog.getExistingDirectory(None, title or "閫夋嫨鐩綍", start_dir or "")
+        return QFileDialog.getExistingDirectory(None, title or "Select directory", start_dir or "")
 
     @Slot(str, int)
     def connect_serial(self, port: str, baud: int = 115200) -> None:
@@ -207,7 +207,7 @@ def stop_script(self) -> None:
     def load_yaml(self) -> Dict[str, str]:
         path, _ = QFileDialog.getOpenFileName(
             None,
-            "閫夋嫨 YAML 鑴氭湰",
+            "Select YAML file",
             str(Path.cwd()),
             "YAML Files (*.yaml *.yml)",
         )
@@ -228,7 +228,7 @@ def save_yaml(self, yaml_text: str, suggested_name: str = "workflow.yaml") -> Di
         default_path = Path.cwd() / (suggested_name or "workflow.yaml")
         path, _ = QFileDialog.getSaveFileName(
             None,
-            "淇濆瓨 YAML 鑴氭湰",
+            "Save YAML file",
             str(default_path),
             "YAML Files (*.yaml *.yml)",
         )
@@ -471,8 +471,8 @@ def _protocol_category(key: str) -> str:
     def _settings_defaults(self) -> Dict[str, Any]:
         base_path = (self._settings_root / "workflows").resolve()
         return {
-            "uiLanguage": "绠€浣撲腑鏂?,
-            "uiTheme": "绯荤粺榛樿",
+            "uiLanguage": "Simplified Chinese",
+            "uiTheme": "Dark",
             "autoConnectOnStart": True,
             "dslWorkspacePath": str(base_path),
             "serial": {
diff --git a/desktop/web_window.py b/desktop/web_window.py
index 5d63701..0411157 100644
--- a/desktop/web_window.py
+++ b/desktop/web_window.py
@@ -1,4 +1,4 @@
-from __future__ import annotations
+from __future__ import annotations
 
 from pathlib import Path
 import logging
@@ -83,7 +83,7 @@ def _handle_download(self, item) -> None:
         suggested = item.downloadFileName()
         path, _ = QFileDialog.getSaveFileName(
             self,
-            "濞ｅ洦绻傞悺銊╁籍閵夈儳绠?,
+            "Save log",
             suggested or "io_logs.log",
             "Log Files (*.log);;All Files (*.*)",
         )
@@ -198,7 +198,7 @@ def _start_resize(self, edge: str) -> None:
         handle = self.windowHandle()
         if not handle or not hasattr(handle, "startSystemResize"):
             return
-        edge_map = {
+        resize_edges = {
             "left": Qt.LeftEdge,
             "right": Qt.RightEdge,
             "top": Qt.TopEdge,
@@ -208,35 +208,123 @@ def _start_resize(self, edge: str) -> None:
             "bottom-left": Qt.BottomEdge | Qt.LeftEdge,
             "bottom-right": Qt.BottomEdge | Qt.RightEdge,
         }
-        qt_edge = edge_map.get(edge)
-        if qt_edge is None:
+        edge_flag = resize_edges.get(edge)
+        if not edge_flag:
             return
-        handle.startSystemResize(qt_edge)
-
-    def _update_normal_geometry(self) -> None:
-        if not self.isMaximized() and not self.isMinimized():
-            self._normal_geometry = self.geometry()
+        handle.startSystemResize(edge_flag)
 
     def _remember_normal_geometry(self) -> None:
-        if not self.isMaximized() and not self.isMinimized():
-            self._normal_geometry = self.geometry()
+        self._normal_geometry = self.geometry()
 
     def _get_normal_geometry(self):
-        normal = self._normal_geometry
-        if normal is None:
-            normal = self.normalGeometry()
-        return normal
+        return self._normal_geometry
 
-    def resizeEvent(self, event) -> None:  # type: ignore[override]
-        super().resizeEvent(event)
-        self._update_normal_geometry()
+    def _toggle_max_restore(self) -> None:
+        if self.isMaximized():
+            self.showNormal()
+        else:
+            self._remember_normal_geometry()
+            self.showMaximized()
+
+    def _mouse_pos(self, event) -> QPoint:
+        pos = event.globalPosition().toPoint()
+        return pos
+
+    def _handle_mouse_press(self, event) -> None:
+        if event.button() == Qt.LeftButton:
+            pos = self._mouse_pos(event)
+            widget = self.childAt(event.position().toPoint())
+            if widget and widget.property("resize-edge"):
+                self._start_resize(widget.property("resize-edge"))
+                return
+            if self._is_titlebar_area(pos.x(), pos.y()):
+                self._start_move(pos.x(), pos.y())
+                return
+        if event.button() == Qt.RightButton:
+            pos = self._mouse_pos(event)
+            if self._is_titlebar_area(pos.x(), pos.y()):
+                self._show_system_menu(pos.x(), pos.y())
+                return
+
+    def _handle_mouse_double_click(self, event) -> None:
+        if self._is_titlebar_area(event.position().toPoint().x(), event.position().toPoint().y()):
+            self._toggle_max_restore()
+
+    def _handle_mouse_move(self, event) -> None:
+        if event.buttons() & Qt.LeftButton:
+            return
+        pos = event.position().toPoint()
+        widget = self.childAt(pos)
+        if widget and widget.property("resize-edge"):
+            edge = widget.property("resize-edge")
+            cursor_map = {
+                "left": Qt.SizeHorCursor,
+                "right": Qt.SizeHorCursor,
+                "top": Qt.SizeVerCursor,
+                "bottom": Qt.SizeVerCursor,
+                "top-left": Qt.SizeFDiagCursor,
+                "bottom-right": Qt.SizeFDiagCursor,
+                "top-right": Qt.SizeBDiagCursor,
+                "bottom-left": Qt.SizeBDiagCursor,
+            }
+            cursor = cursor_map.get(edge, Qt.ArrowCursor)
+            self.setCursor(cursor)
+        else:
+            self.setCursor(Qt.ArrowCursor)
 
-    def moveEvent(self, event) -> None:  # type: ignore[override]
-        super().moveEvent(event)
-        self._update_normal_geometry()
+    def _handle_mouse_leave(self, event) -> None:
+        self.setCursor(Qt.ArrowCursor)
+
+    def _bind_titlebar_events(self):
+        if hasattr(self, "title_bar"):
+            self.title_bar.mousePressEvent = self._handle_mouse_press
+            self.title_bar.mouseDoubleClickEvent = self._handle_mouse_double_click
+            self.title_bar.mouseMoveEvent = self._handle_mouse_move
+            self.title_bar.leaveEvent = self._handle_mouse_leave
+
+    def _is_titlebar_area(self, screen_x: int, screen_y: int) -> bool:
+        if self.isMaximized():
+            return screen_y <= self._titlebar_height
+        frame_y = self.y()
+        if self._win_style_applied:
+            frame_y += self._titlebar_height
+        return screen_y <= frame_y + self._titlebar_height
+
+    def _apply_custom_titlebar(self) -> None:
+        base_dir = Path(getattr(sys, "_MEIPASS", Path(__file__).resolve().parents[1]))
+        style_path = base_dir / "assets" / "styles" / "window.css"
+        if not style_path.exists():
+            return
+        self.setStyleSheet(style_path.read_text(encoding="utf-8"))
+        apply_snap_styles(self)
+        self._win_style_applied = True
+
+    def _init_system_titlebar(self):
+        base_dir = Path(getattr(sys, "_MEIPASS", Path(__file__).resolve().parents[1]))
+        html_path = base_dir / "assets" / "titlebar" / "titlebar.html"
+        if not html_path.exists():
+            return
+        html = html_path.read_text(encoding="utf-8")
+        view = QWebEngineView(self)
+        view.setObjectName("title_bar")
+        view.setFixedHeight(self._titlebar_height)
+        view.setContextMenuPolicy(Qt.NoContextMenu)
+        view.setAttribute(Qt.WA_TransparentForMouseEvents, False)
+        view.load(QUrl.fromLocalFile(str(html_path)))
+        view.page().setBackgroundColor(Qt.transparent)
+        view.setStyleSheet("background: transparent")
+        view.page().setHtml(html)
+        view.setParent(self)
+        view.show()
+        self.title_bar = view
+        self._bind_titlebar_events()
+
+    def _init_titlebar(self):
+        if sys.platform == "darwin":
+            self._init_system_titlebar()
+        else:
+            self._apply_custom_titlebar()
 
-    def showEvent(self, event) -> None:  # type: ignore[override]
+    def showEvent(self, event):
         super().showEvent(event)
-        if sys.platform == "win32" and not self._win_style_applied:
-            apply_snap_styles(int(self.winId()))
-            self._win_style_applied = True
+        self._init_titlebar()
diff --git a/main.py b/main.py
index 5aaa1e1..6fd836c 100644
--- a/main.py
+++ b/main.py
@@ -1,4 +1,4 @@
-"""搴旂敤鍏ュ彛锛氫娇鐢?Qt WebEngine + Vue Frontend銆?""
+"""Entry point: Qt WebEngine host for the Vue frontend."""
 
 from __future__ import annotations
 

From 159af3d7b6aa738e3e4b9d22ca8b115ce00ecf32 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Fri, 23 Jan 2026 12:42:22 +0800
Subject: [PATCH 10/36] =?UTF-8?q?=EF=BB=BFfix(ui):=20localize=20proxy=20mo?=
 =?UTF-8?q?nitor=20to=20Chinese?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更：
  - 代理监控页面改为中文文案
  - 抓包弹窗与按钮文案同步中文化
  - 保持原有布局与交互
- 影响：
  - UI 文案更符合中文场景
- 兼容/行为变化：
  - 仅文案调整，无行为变化
- 依赖/环境：
  - 无
- 验证：
  - 未运行
Refs:
-

[English]
- Changes:
  - Localize proxy monitor page copy to Chinese
  - Localize capture modal and action labels
  - Preserve layout and interactions
- Impact:
  - UI copy fits Chinese locale
- Compatibility/Behavior changes:
  - Text-only changes; no behavior change
- Dependencies/Environment:
  - None
- Verification:
  - Not run
Refs:
-
---
 frontend/src/components/ProxyMonitorView.vue | 318 +++++++++++++++++--
 1 file changed, 295 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index 32323c2..a31298d 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -3,7 +3,7 @@ import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import DropdownSelect from './DropdownSelect.vue'
 
 const filterTabs = [
-  { id: 'all', label: '全部转发' },
+  { id: 'all', label: '全部' },
   { id: 'running', label: '运行中' },
   { id: 'stopped', label: '已停止' },
   { id: 'error', label: '异常' },
@@ -11,17 +11,22 @@ const filterTabs = [
 const activeFilter = ref(filterTabs[0].id)
 const modalOpen = ref(false)
 const modalProxy = ref(null)
+const captureOpen = ref(false)
+const captureProxy = ref(null)
+const captureFilter = ref('all')
+const selectedFrame = ref(null)
+
 const proxyName = ref('')
 const connectionMode = ref('透传模式')
 const hostPort = ref('COM3')
 const devicePort = ref('COM5')
 const baudRate = ref('115200')
-const parity = ref('None (无)')
+const parity = ref('无')
 
-const connectionOptions = ['透传模式', '协议转换', '映射模式']
+const connectionOptions = ['透传模式', '协议桥接', '映射模式']
 const portOptions = ['COM1', 'COM2', 'COM3', 'COM4', 'COM5', 'COM6', 'COM10', 'COM12']
 const baudOptions = ['4800', '9600', '19200', '38400', '57600', '115200']
-const parityOptions = ['None (无)', 'Even (偶)', 'Odd (奇)', 'Mark', 'Space']
+const parityOptions = ['无', '偶校验', '奇校验', 'Mark', 'Space']
 
 const proxies = ref([
   {
@@ -45,13 +50,13 @@ const proxies = ref([
   },
   {
     id: 'proxy-com7',
-    name: '电机反馈集线器',
+    name: '电机反馈转发器',
     meta: 'ID: PX-00992 · 8-E-1',
     status: 'stopped',
     statusLabel: '已停止',
     statusIcon: 'pause_circle',
     routeIcon: 'more_horiz',
-    routeLabel: '离线',
+    routeLabel: '空闲',
     routeTone: 'muted',
     hostPort: 'COM7',
     devicePort: 'COM10',
@@ -64,7 +69,7 @@ const proxies = ref([
   },
   {
     id: 'proxy-com1',
-    name: 'GPS 模块数据流',
+    name: 'GPS 数据流',
     meta: 'ID: PX-00219 · 7-N-2',
     status: 'error',
     statusLabel: '异常',
@@ -88,6 +93,74 @@ const filteredProxies = computed(() => {
   return proxies.value.filter((proxy) => proxy.status === activeFilter.value)
 })
 
+const captureFrames = ref([
+  {
+    id: 'frame-001',
+    direction: 'RX',
+    time: '12:41:03.482',
+    size: 64,
+    note: '握手：READY',
+    summary: 'ACK 0x06',
+    tone: 'green',
+    warn: false,
+    channel: 'COM5',
+    baud: '115200',
+  },
+  {
+    id: 'frame-002',
+    direction: 'TX',
+    time: '12:41:03.940',
+    size: 128,
+    note: 'XMODEM 块 #12',
+    summary: 'Payload: 128 bytes',
+    tone: 'blue',
+    warn: false,
+    channel: 'COM3',
+    baud: '115200',
+  },
+  {
+    id: 'frame-003',
+    direction: 'RX',
+    time: '12:41:04.102',
+    size: 1,
+    note: '重试信号',
+    summary: 'NAK 0x15',
+    tone: 'amber',
+    warn: true,
+    channel: 'COM5',
+    baud: '115200',
+  },
+  {
+    id: 'frame-004',
+    direction: 'RX',
+    time: '12:41:04.288',
+    size: 0,
+    note: '超时',
+    summary: 'No response',
+    tone: 'red',
+    warn: true,
+    channel: 'COM5',
+    baud: '115200',
+  },
+])
+
+const filteredFrames = computed(() => {
+  if (captureFilter.value === 'all') return captureFrames.value
+  if (captureFilter.value === 'error') {
+    return captureFrames.value.filter((frame) => frame.tone === 'red')
+  }
+  return captureFrames.value.filter((frame) => frame.direction === captureFilter.value)
+})
+
+const captureStats = computed(() => {
+  const frames = captureFrames.value
+  const total = frames.length
+  const rx = frames.filter((frame) => frame.direction === 'RX').length
+  const tx = frames.filter((frame) => frame.direction === 'TX').length
+  const errors = frames.filter((frame) => frame.tone === 'red').length
+  return { total, rx, tx, errors }
+})
+
 function openEditModal(proxy) {
   console.debug('[proxy-monitor] openEditModal', proxy && proxy.id ? proxy.id : proxy)
   modalProxy.value = proxy
@@ -98,12 +171,30 @@ function openEditModal(proxy) {
   modalOpen.value = true
 }
 
+function openCaptureModal(proxy) {
+  console.debug('[proxy-monitor] openCaptureModal', proxy && proxy.id ? proxy.id : proxy)
+  captureProxy.value = proxy
+  captureFilter.value = 'all'
+  selectedFrame.value = captureFrames.value[0] || null
+  captureOpen.value = true
+}
+
 function closeModal(event) {
   const target = event && event.target ? event.target.tagName || event.target.className : 'unknown'
   console.debug('[proxy-monitor] closeModal', target, new Error().stack)
   modalOpen.value = false
 }
 
+function closeCaptureModal(event) {
+  const target = event && event.target ? event.target.tagName || event.target.className : 'unknown'
+  console.debug('[proxy-monitor] closeCaptureModal', target, new Error().stack)
+  captureOpen.value = false
+}
+
+function selectFrame(frame) {
+  selectedFrame.value = frame
+}
+
 watch(
   () => modalOpen.value,
   (open) => {
@@ -112,8 +203,17 @@ watch(
   }
 )
 
+watch(
+  () => captureOpen.value,
+  (open) => {
+    console.debug('[proxy-monitor] captureOpen changed', open)
+    document.body.classList.toggle('proxy-modal-open', open)
+  }
+)
+
 onBeforeUnmount(() => {
   document.body.classList.remove('proxy-edit-open')
+  document.body.classList.remove('proxy-modal-open')
 })
 </script>
 
@@ -122,8 +222,8 @@ onBeforeUnmount(() => {
     <header class="proxy-dashboard-hero">
       <div class="proxy-hero-card">
         <div>
-          <h2>串口代理转发监控</h2>
-          <p>管理串口转发对并实时监控数据流状态。</p>
+          <h2>代理监控</h2>
+          <p>管理转发链路并实时观察通信流量。</p>
         </div>
         <div class="proxy-hero-actions">
           <button class="proxy-hero-btn" type="button">
@@ -175,7 +275,7 @@ onBeforeUnmount(() => {
 
         <div class="proxy-route-card" :class="`status-${proxy.status}`">
           <div class="proxy-route-col">
-            <p>主机源端口</p>
+            <p>主机端口</p>
             <span class="proxy-route-chip proxy-mono">{{ proxy.hostPort }}</span>
           </div>
           <div class="proxy-route-state" :class="proxy.routeTone">
@@ -183,7 +283,7 @@ onBeforeUnmount(() => {
             <span>{{ proxy.routeLabel }}</span>
           </div>
           <div class="proxy-route-col">
-            <p>设备代理端口</p>
+            <p>设备端口</p>
             <span class="proxy-route-chip proxy-mono">{{ proxy.devicePort }}</span>
           </div>
         </div>
@@ -219,7 +319,7 @@ onBeforeUnmount(() => {
             <span class="proxy-toggle-text">{{ proxy.toggleLabel }}</span>
           </label>
           <div class="proxy-footer-actions">
-            <button class="icon-btn" type="button" title="终端">
+            <button class="icon-btn" type="button" title="抓包" @click="openCaptureModal(proxy)">
               <span class="material-symbols-outlined">terminal</span>
             </button>
             <button class="icon-btn" type="button" title="编辑" @click="openEditModal(proxy)">
@@ -238,7 +338,7 @@ onBeforeUnmount(() => {
         </div>
         <div class="proxy-add-copy">
           <h3>添加新转发代理</h3>
-          <p>将物理串口连接到虚拟代理节点</p>
+          <p>将物理串口连接到虚拟代理节点。</p>
         </div>
         <div class="proxy-add-tags">
           <span>RS-232</span>
@@ -285,14 +385,14 @@ onBeforeUnmount(() => {
               <div class="proxy-field">
                 <label>
                   <span class="material-symbols-outlined">computer</span>
-                  主机源端口
+                  主机端口
                 </label>
                 <DropdownSelect v-model="hostPort" class="proxy-select" :options="portOptions" />
               </div>
               <div class="proxy-field">
                 <label>
                   <span class="material-symbols-outlined">settings_input_component</span>
-                  设备代理端口
+                  设备端口
                 </label>
                 <DropdownSelect v-model="devicePort" class="proxy-select" :options="portOptions" />
               </div>
@@ -302,15 +402,15 @@ onBeforeUnmount(() => {
               <div class="proxy-section-title">
                 <span class="material-symbols-outlined">settings_ethernet</span>
                 串口参数配置
-                <span>（两端同步应用）</span>
+                <span>（两端需一致）</span>
               </div>
               <div class="proxy-section-grid">
                 <div class="proxy-field">
-                  <label>波特率 (Baud Rate)</label>
+                  <label>波特率</label>
                   <DropdownSelect v-model="baudRate" class="proxy-select" :options="baudOptions" />
                 </div>
                 <div class="proxy-field">
-                  <label>数据位 (Data Bits)</label>
+                  <label>数据位</label>
                   <div class="proxy-segmented">
                     <button type="button">5</button>
                     <button type="button">6</button>
@@ -319,11 +419,11 @@ onBeforeUnmount(() => {
                   </div>
                 </div>
                 <div class="proxy-field">
-                  <label>校验位 (Parity)</label>
+                  <label>校验位</label>
                   <DropdownSelect v-model="parity" class="proxy-select" :options="parityOptions" />
                 </div>
                 <div class="proxy-field">
-                  <label>停止位 (Stop Bits)</label>
+                  <label>停止位</label>
                   <div class="proxy-segmented">
                     <button type="button" class="active">1</button>
                     <button type="button">1.5</button>
@@ -331,7 +431,7 @@ onBeforeUnmount(() => {
                   </div>
                 </div>
                 <div class="proxy-field proxy-span-2">
-                  <label>流控 (Flow Control)</label>
+                  <label>流控</label>
                   <div class="proxy-segmented">
                     <button type="button" class="active">None</button>
                     <button type="button">RTS/CTS</button>
@@ -344,7 +444,7 @@ onBeforeUnmount(() => {
             <div class="proxy-section proxy-modal-advanced">
               <div class="proxy-section-title muted">
                 <span class="material-symbols-outlined">settings_suggest</span>
-                高级运行选项
+                高级选项
               </div>
               <div class="proxy-toggle-row">
                 <label>
@@ -359,7 +459,7 @@ onBeforeUnmount(() => {
                     <input type="checkbox" />
                     <span></span>
                   </span>
-                  详细日志记录
+                  详细日志
                 </label>
               </div>
             </div>
@@ -367,5 +467,177 @@ onBeforeUnmount(() => {
         </div>
       </div>
     </div>
+
+    <div v-if="captureOpen" class="proxy-modal-overlay" @mousedown.self="closeCaptureModal">
+      <div class="proxy-modal" @mousedown.stop @click.stop>
+        <div class="proxy-modal-header">
+          <div class="proxy-modal-title">
+            <div class="proxy-modal-icon">
+              <span class="material-symbols-outlined">monitoring</span>
+            </div>
+            <div>
+              <h2>抓包详情</h2>
+              <p class="proxy-subtitle">{{ captureProxy ? captureProxy.name : '代理会话' }}</p>
+            </div>
+          </div>
+          <button class="proxy-modal-close" type="button" @click="closeCaptureModal">
+            <span class="material-symbols-outlined">close</span>
+          </button>
+        </div>
+
+        <div class="proxy-modal-body">
+          <div class="proxy-modal-stream">
+            <div class="proxy-modal-toolbar">
+              <div class="proxy-modal-toolbar-left">
+                <span>抓包</span>
+                <div class="proxy-modal-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: captureFilter === 'all' }"
+                    @click="captureFilter = 'all'"
+                  >
+                    全部
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: captureFilter === 'RX' }"
+                    @click="captureFilter = 'RX'"
+                  >
+                    RX
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: captureFilter === 'TX' }"
+                    @click="captureFilter = 'TX'"
+                  >
+                    TX
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: captureFilter === 'error' }"
+                    @click="captureFilter = 'error'"
+                  >
+                    异常
+                  </button>
+                </div>
+              </div>
+              <div class="proxy-modal-toolbar-right">
+                <span>{{ filteredFrames.length }} 条</span>
+              </div>
+            </div>
+
+            <div class="proxy-modal-list">
+              <div class="proxy-modal-list-header">
+                <span>方向</span>
+                <span>负载</span>
+                <span>摘要</span>
+              </div>
+              <div
+                v-for="frame in filteredFrames"
+                :key="frame.id"
+                class="proxy-frame"
+                :class="{ error: frame.tone === 'red' }"
+              >
+                <div class="proxy-frame-row" @click="selectFrame(frame)">
+                  <span
+                    class="proxy-chip"
+                    :class="[
+                      frame.tone === 'red'
+                        ? 'tone-red'
+                        : frame.direction === 'RX'
+                        ? 'tone-green'
+                        : frame.tone === 'amber'
+                        ? 'tone-amber'
+                        : 'tone-blue',
+                    ]"
+                    :data-warn="frame.warn"
+                  >
+                    {{ frame.direction }}
+                  </span>
+                  <div class="note">
+                    <div>{{ frame.note }}</div>
+                    <div class="proxy-mono">{{ frame.time }}</div>
+                  </div>
+                  <div class="col-summary" :class="{ error: frame.tone === 'red' }">
+                    {{ frame.summary }}
+                  </div>
+                </div>
+                <div v-if="selectedFrame && selectedFrame.id === frame.id" class="proxy-frame-detail">
+                  <div class="proxy-detail-row">
+                    <span>大小</span>
+                    <strong class="proxy-mono">{{ frame.size }} bytes</strong>
+                  </div>
+                  <div class="proxy-detail-row">
+                    <span>通道</span>
+                    <strong class="proxy-mono">{{ frame.channel }}</strong>
+                  </div>
+                  <div class="proxy-detail-row">
+                    <span>波特率</span>
+                    <strong class="proxy-mono">{{ frame.baud }}</strong>
+                  </div>
+                  <div class="proxy-detail-row">
+                    <span>状态</span>
+                    <strong
+                      class="proxy-mono"
+                      :class="frame.tone === 'red' ? 'tone-red' : frame.tone === 'amber' ? 'tone-amber' : 'tone-green'"
+                    >
+                      {{ frame.tone === 'red' ? '错误' : frame.tone === 'amber' ? '警告' : '正常' }}
+                    </strong>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="proxy-modal-footer">
+              <button class="proxy-btn ghost" type="button">清空</button>
+              <div class="proxy-footer-actions">
+                <button class="proxy-btn warning" type="button">暂停</button>
+                <button class="proxy-btn primary" type="button">导出</button>
+              </div>
+            </div>
+          </div>
+
+          <aside class="proxy-modal-side">
+            <div>
+              <h4>会话统计</h4>
+              <div class="proxy-stat-card">
+                <span>总帧数</span>
+                <div class="proxy-stat-value">
+                  <strong>{{ captureStats.total }}</strong>
+                  <em>实时</em>
+                </div>
+                <div class="proxy-stat-bar"></div>
+              </div>
+              <div class="proxy-stat-card">
+                <span>异常</span>
+                <div class="proxy-stat-value">
+                  <strong class="danger">{{ captureStats.errors }}</strong>
+                  <em>告警</em>
+                </div>
+                <div class="proxy-stat-bar"></div>
+              </div>
+            </div>
+            <div class="proxy-side-block">
+              <h5>方向</h5>
+              <label>
+                <input type="checkbox" checked />
+                RX 帧 {{ captureStats.rx }}
+              </label>
+              <label>
+                <input type="checkbox" checked />
+                TX 帧 {{ captureStats.tx }}
+              </label>
+            </div>
+            <div class="proxy-side-tip">
+              <div class="proxy-side-tip-title">
+                <span class="material-symbols-outlined">tips_and_updates</span>
+                提示
+              </div>
+              当前为演示数据，可接入 bridge 事件展示真实帧。
+            </div>
+          </aside>
+        </div>
+      </div>
+    </div>
   </teleport>
 </template>

From 515e07d21b656eced6a43372d052c7fad6620cd2 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Fri, 23 Jan 2026 21:11:14 +0800
Subject: [PATCH 11/36] feat(ui): migrate proxy capture modal to tailwind
 layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 引入 Tailwind/PostCSS 配置用于弹窗样式
  - 采用 Tailwind 结构重构代理监控抓包弹窗
- 影响
  - 弹窗布局与视觉贴近 Stitch 设计
- 兼容/行为变更
  - 弹窗样式依赖 Tailwind 构建产物
- 依赖/环境
  - 新增 tailwindcss/postcss/autoprefixer
- 验证
  - npm run build

[English]
- Changes:
  - Add Tailwind/PostCSS setup for the capture modal UI
  - Rebuild proxy capture modal markup/styles to match the Stitch layout
- Impact:
  - Modal layout and styling now match the reference design
- Compatibility/Behavior changes:
  - Modal styles now rely on Tailwind build output
- Dependencies/Environment:
  - Add tailwindcss, postcss, autoprefixer
- Verification:
  - npm run build
Refs:
-
---
 frontend/package-lock.json                   | 1135 ++++++-
 frontend/package.json                        |    3 +
 frontend/postcss.config.js                   |    6 +
 frontend/src/components/ProxyMonitorView.vue |  474 +--
 frontend/src/style.css                       | 3104 ++++++++++++++----
 frontend/tailwind.config.js                  |    7 +
 6 files changed, 3824 insertions(+), 905 deletions(-)
 create mode 100644 frontend/postcss.config.js
 create mode 100644 frontend/tailwind.config.js

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a120f8a..dfd4ddc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -18,9 +18,25 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.1",
+        "autoprefixer": "^10.4.23",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^3.4.17",
         "vite": "^7.2.4"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/helper-string-parser": {
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
@@ -618,11 +634,43 @@
       "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
       "license": "MIT"
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
     },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
     "node_modules/@lezer/common": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.5.0.tgz",
@@ -664,6 +712,44 @@
       "integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g==",
       "license": "MIT"
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
@@ -1189,12 +1275,229 @@
         }
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/anymatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
       "license": "MIT"
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.17",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.17.tgz",
+      "integrity": "sha512-agD0MgJFUP/4nvjqzIB29zRPUuCF7Ge6mEv9s8dHrtYD7QWXRcx75rOADE/d5ah1NI+0vkDl0yorDd5U852IQQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001766",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
+      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/codemirror": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
@@ -1210,12 +1513,35 @@
         "@codemirror/view": "^6.0.0"
       }
     },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/crelt": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
       "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
       "license": "MIT"
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -1227,6 +1553,27 @@
       "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
       "license": "MIT"
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.277",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.277.tgz",
+      "integrity": "sha512-wKXFZw4erWmmOz5N/grBoJ2XrNJGDFMu2+W5ACHza5rHtvsqrK4gb6rnLC7XxKB9WlJ+RmyQatuEXmtm86xbnw==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/element-plus": {
       "version": "2.13.0",
       "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.13.0.tgz",
@@ -1304,11 +1651,61 @@
         "@esbuild/win32-x64": "0.27.2"
       }
     },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
     "node_modules/fdir": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@@ -1326,6 +1723,33 @@
         }
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1340,43 +1764,220 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "license": "MIT"
-    },
-    "node_modules/lodash-es": {
-      "version": "4.17.22",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.22.tgz",
-      "integrity": "sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==",
-      "license": "MIT"
-    },
-    "node_modules/lodash-unified": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
-      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "license": "MIT",
-      "peerDependencies": {
-        "@types/lodash-es": "*",
-        "lodash": "*",
-        "lodash-es": "*"
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.21",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
       }
     },
-    "node_modules/memoize-one": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
-      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.22",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.22.tgz",
+      "integrity": "sha512-XEawp1t0gxSi9x01glktRZ5HDy0HXqrM0x5pXQM98EaI0NxO6jVM7omDOxsuEo5UIASAnm2bRp1Jt/e0a2XU8Q==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-unified": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz",
+      "integrity": "sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/lodash-es": "*",
+        "lodash": "*",
+        "lodash-es": "*"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
       "license": "MIT"
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -1394,12 +1995,56 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/normalize-wheel-es": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz",
       "integrity": "sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -1417,6 +2062,26 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -1435,6 +2100,7 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -1444,6 +2110,222 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/readdirp/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.54.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
@@ -1485,6 +2367,30 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -1499,6 +2405,103 @@
       "integrity": "sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==",
       "license": "MIT"
     },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -1515,6 +2518,64 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
@@ -1614,6 +2675,22 @@
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
       "license": "MIT"
+    },
+    "node_modules/yaml": {
+      "version": "2.8.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz",
+      "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/eemeli"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index cfcdb89..63e253a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
     "vite": "^7.2.4"
   }
 }
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..ee87759
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index a31298d..c99c770 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup>
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import DropdownSelect from './DropdownSelect.vue'
 
@@ -14,8 +14,12 @@ const modalProxy = ref(null)
 const captureOpen = ref(false)
 const captureProxy = ref(null)
 const captureFilter = ref('all')
+const captureView = ref('parsed')
+const selectedProtocol = ref('Modbus RTU')
 const selectedFrame = ref(null)
 
+const protocolOptions = ['Modbus RTU', 'MQTT', 'Raw Hex', 'Custom Protocol A']
+
 const proxyName = ref('')
 const connectionMode = ref('透传模式')
 const hostPort = ref('COM3')
@@ -50,13 +54,13 @@ const proxies = ref([
   },
   {
     id: 'proxy-com7',
-    name: '电机反馈转发器',
+    name: '电机反馈继电器',
     meta: 'ID: PX-00992 · 8-E-1',
     status: 'stopped',
     statusLabel: '已停止',
     statusIcon: 'pause_circle',
     routeIcon: 'more_horiz',
-    routeLabel: '空闲',
+    routeLabel: '离线',
     routeTone: 'muted',
     hostPort: 'COM7',
     devicePort: 'COM10',
@@ -69,7 +73,7 @@ const proxies = ref([
   },
   {
     id: 'proxy-com1',
-    name: 'GPS 数据流',
+    name: 'GPS 模块数据流',
     meta: 'ID: PX-00219 · 7-N-2',
     status: 'error',
     statusLabel: '异常',
@@ -97,10 +101,10 @@ const captureFrames = ref([
   {
     id: 'frame-001',
     direction: 'RX',
-    time: '12:41:03.482',
+    time: '14:20:01.2',
     size: 64,
-    note: '握手：READY',
-    summary: 'ACK 0x06',
+    note: '01 03 00 00 00 02 C4 0B',
+    summary: 'Read Hold Regs',
     tone: 'green',
     warn: false,
     channel: 'COM5',
@@ -109,10 +113,10 @@ const captureFrames = ref([
   {
     id: 'frame-002',
     direction: 'TX',
-    time: '12:41:03.940',
+    time: '14:20:01.5',
     size: 128,
-    note: 'XMODEM 块 #12',
-    summary: 'Payload: 128 bytes',
+    note: '01 03 04 01 F4 02 BC 9B 42',
+    summary: 'Resp: 50.0 / 70.0',
     tone: 'blue',
     warn: false,
     channel: 'COM3',
@@ -121,11 +125,11 @@ const captureFrames = ref([
   {
     id: 'frame-003',
     direction: 'RX',
-    time: '12:41:04.102',
+    time: '14:20:02.8',
     size: 1,
-    note: '重试信号',
-    summary: 'NAK 0x15',
-    tone: 'amber',
+    note: '01 83 02 FF FF',
+    summary: 'EXCEPTION: ILLEGAL_ADDR',
+    tone: 'red',
     warn: true,
     channel: 'COM5',
     baud: '115200',
@@ -133,12 +137,12 @@ const captureFrames = ref([
   {
     id: 'frame-004',
     direction: 'RX',
-    time: '12:41:04.288',
+    time: '14:20:03.2',
     size: 0,
-    note: '超时',
-    summary: 'No response',
-    tone: 'red',
-    warn: true,
+    note: 'Waiting for next frame...',
+    summary: '',
+    tone: 'amber',
+    warn: false,
     channel: 'COM5',
     baud: '115200',
   },
@@ -152,17 +156,7 @@ const filteredFrames = computed(() => {
   return captureFrames.value.filter((frame) => frame.direction === captureFilter.value)
 })
 
-const captureStats = computed(() => {
-  const frames = captureFrames.value
-  const total = frames.length
-  const rx = frames.filter((frame) => frame.direction === 'RX').length
-  const tx = frames.filter((frame) => frame.direction === 'TX').length
-  const errors = frames.filter((frame) => frame.tone === 'red').length
-  return { total, rx, tx, errors }
-})
-
 function openEditModal(proxy) {
-  console.debug('[proxy-monitor] openEditModal', proxy && proxy.id ? proxy.id : proxy)
   modalProxy.value = proxy
   proxyName.value = proxy && proxy.name ? proxy.name : ''
   hostPort.value = proxy && proxy.hostPort ? proxy.hostPort : hostPort.value
@@ -172,22 +166,17 @@ function openEditModal(proxy) {
 }
 
 function openCaptureModal(proxy) {
-  console.debug('[proxy-monitor] openCaptureModal', proxy && proxy.id ? proxy.id : proxy)
   captureProxy.value = proxy
   captureFilter.value = 'all'
   selectedFrame.value = captureFrames.value[0] || null
   captureOpen.value = true
 }
 
-function closeModal(event) {
-  const target = event && event.target ? event.target.tagName || event.target.className : 'unknown'
-  console.debug('[proxy-monitor] closeModal', target, new Error().stack)
+function closeModal() {
   modalOpen.value = false
 }
 
-function closeCaptureModal(event) {
-  const target = event && event.target ? event.target.tagName || event.target.className : 'unknown'
-  console.debug('[proxy-monitor] closeCaptureModal', target, new Error().stack)
+function closeCaptureModal() {
   captureOpen.value = false
 }
 
@@ -198,7 +187,6 @@ function selectFrame(frame) {
 watch(
   () => modalOpen.value,
   (open) => {
-    console.debug('[proxy-monitor] modalOpen changed', open)
     document.body.classList.toggle('proxy-edit-open', open)
   }
 )
@@ -206,7 +194,6 @@ watch(
 watch(
   () => captureOpen.value,
   (open) => {
-    console.debug('[proxy-monitor] captureOpen changed', open)
     document.body.classList.toggle('proxy-modal-open', open)
   }
 )
@@ -223,7 +210,7 @@ onBeforeUnmount(() => {
       <div class="proxy-hero-card">
         <div>
           <h2>代理监控</h2>
-          <p>管理转发链路并实时观察通信流量。</p>
+          <p>管理转发链路并实时监控数据流状态。</p>
         </div>
         <div class="proxy-hero-actions">
           <button class="proxy-hero-btn" type="button">
@@ -275,7 +262,7 @@ onBeforeUnmount(() => {
 
         <div class="proxy-route-card" :class="`status-${proxy.status}`">
           <div class="proxy-route-col">
-            <p>主机端口</p>
+            <p>主机源端口</p>
             <span class="proxy-route-chip proxy-mono">{{ proxy.hostPort }}</span>
           </div>
           <div class="proxy-route-state" :class="proxy.routeTone">
@@ -283,7 +270,7 @@ onBeforeUnmount(() => {
             <span>{{ proxy.routeLabel }}</span>
           </div>
           <div class="proxy-route-col">
-            <p>设备端口</p>
+            <p>设备代理端口</p>
             <span class="proxy-route-chip proxy-mono">{{ proxy.devicePort }}</span>
           </div>
         </div>
@@ -331,21 +318,6 @@ onBeforeUnmount(() => {
           </div>
         </div>
       </article>
-
-      <button class="proxy-panel proxy-panel-add" type="button">
-        <div class="proxy-add-icon">
-          <span class="material-symbols-outlined">add</span>
-        </div>
-        <div class="proxy-add-copy">
-          <h3>添加新转发代理</h3>
-          <p>将物理串口连接到虚拟代理节点。</p>
-        </div>
-        <div class="proxy-add-tags">
-          <span>RS-232</span>
-          <span>RS-485</span>
-          <span>USB-TTY</span>
-        </div>
-      </button>
     </div>
   </section>
 
@@ -363,7 +335,6 @@ onBeforeUnmount(() => {
             <span class="material-symbols-outlined">close</span>
           </button>
         </div>
-
         <div class="proxy-modal-body">
           <div class="proxy-modal-stack">
             <div class="proxy-modal-grid">
@@ -373,14 +344,9 @@ onBeforeUnmount(() => {
               </div>
               <div class="proxy-field">
                 <label>连接模式</label>
-                <DropdownSelect
-                  v-model="connectionMode"
-                  class="proxy-select"
-                  :options="connectionOptions"
-                />
+                <DropdownSelect v-model="connectionMode" class="proxy-select" :options="connectionOptions" />
               </div>
             </div>
-
             <div class="proxy-port-map">
               <div class="proxy-field">
                 <label>
@@ -397,7 +363,6 @@ onBeforeUnmount(() => {
                 <DropdownSelect v-model="devicePort" class="proxy-select" :options="portOptions" />
               </div>
             </div>
-
             <div class="proxy-section">
               <div class="proxy-section-title">
                 <span class="material-symbols-outlined">settings_ethernet</span>
@@ -440,7 +405,6 @@ onBeforeUnmount(() => {
                 </div>
               </div>
             </div>
-
             <div class="proxy-section proxy-modal-advanced">
               <div class="proxy-section-title muted">
                 <span class="material-symbols-outlined">settings_suggest</span>
@@ -468,175 +432,265 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div v-if="captureOpen" class="proxy-modal-overlay" @mousedown.self="closeCaptureModal">
-      <div class="proxy-modal" @mousedown.stop @click.stop>
-        <div class="proxy-modal-header">
-          <div class="proxy-modal-title">
-            <div class="proxy-modal-icon">
-              <span class="material-symbols-outlined">monitoring</span>
+    <div v-if="captureOpen" class="proxy-modal-overlay proxy-capture" @mousedown.self="closeCaptureModal">
+      <div
+        class="packet-modal w-full max-w-[1600px] h-screen md:h-[96vh] bg-[var(--bg-light)] shadow-2xl md:rounded-xl flex flex-col overflow-hidden border border-slate-200"
+        @mousedown.stop
+        @click.stop
+      >
+        <header class="px-4 py-3 flex items-center justify-between border-b border-slate-200 bg-white">
+          <div class="flex items-center gap-4">
+            <div class="p-1.5 bg-blue-100 rounded text-blue-600">
+              <span class="material-symbols-outlined">analytics</span>
             </div>
             <div>
-              <h2>抓包详情</h2>
-              <p class="proxy-subtitle">{{ captureProxy ? captureProxy.name : '代理会话' }}</p>
+              <h1 class="text-sm font-bold text-slate-900 leading-none">多协议通用报文分析引擎</h1>
+              <div class="flex items-center gap-2 mt-1">
+                <span class="flex h-2 w-2 rounded-full bg-emerald-500"></span>
+                <p class="text-[10px] font-medium text-slate-500">
+                  活动通道: {{ captureProxy ? captureProxy.hostPort : 'Ethernet (TAP)' }} | 引擎状态: 通用动态解析 (Agnostic Engine)
+                </p>
+              </div>
             </div>
           </div>
-          <button class="proxy-modal-close" type="button" @click="closeCaptureModal">
-            <span class="material-symbols-outlined">close</span>
-          </button>
+          <div class="flex items-center gap-3">
+            <div class="flex items-center bg-slate-100 rounded-md px-2 border border-slate-200">
+              <span class="material-symbols-outlined text-slate-400">search</span>
+              <input
+                class="bg-transparent border-none text-xs w-64 lg:w-96 focus:ring-0 text-slate-900 placeholder-slate-500"
+                placeholder="搜索标识、十六进制、协议、原始数据..."
+                type="text"
+              />
+            </div>
+            <div class="h-6 w-[1px] bg-slate-200 mx-1"></div>
+            <button class="flex items-center gap-1 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded text-xs font-bold transition-colors shadow-sm">
+              <span class="material-symbols-outlined !text-sm">play_arrow</span> 继续捕获
+            </button>
+            <button class="p-1.5 hover:bg-slate-100 rounded text-slate-400">
+              <span class="material-symbols-outlined">settings</span>
+            </button>
+          </div>
+        </header>
+
+        <div class="h-1.5 w-full bg-slate-200 relative cursor-pointer group overflow-hidden">
+          <div class="timeline-heatmap h-full w-full opacity-80 group-hover:opacity-100 transition-opacity"></div>
+          <div class="absolute top-0 bottom-0 left-[20%] w-[5%] border-x border-white/50 bg-white/20 shadow-sm pointer-events-none"></div>
         </div>
 
-        <div class="proxy-modal-body">
-          <div class="proxy-modal-stream">
-            <div class="proxy-modal-toolbar">
-              <div class="proxy-modal-toolbar-left">
-                <span>抓包</span>
-                <div class="proxy-modal-toggle">
-                  <button
-                    type="button"
-                    :class="{ active: captureFilter === 'all' }"
-                    @click="captureFilter = 'all'"
-                  >
-                    全部
-                  </button>
-                  <button
-                    type="button"
-                    :class="{ active: captureFilter === 'RX' }"
-                    @click="captureFilter = 'RX'"
-                  >
-                    RX
-                  </button>
-                  <button
-                    type="button"
-                    :class="{ active: captureFilter === 'TX' }"
-                    @click="captureFilter = 'TX'"
-                  >
-                    TX
-                  </button>
-                  <button
-                    type="button"
-                    :class="{ active: captureFilter === 'error' }"
-                    @click="captureFilter = 'error'"
+        <main class="flex-1 flex overflow-hidden">
+          <section class="flex-[2] flex flex-col min-w-0 bg-white">
+            <div class="overflow-auto flex-1">
+              <table class="w-full text-left border-separate border-spacing-0">
+                <thead class="sticky top-0 z-10 bg-slate-50 shadow-sm">
+                  <tr class="text-[10px] uppercase tracking-wider font-bold text-slate-500">
+                    <th class="px-3 py-2 border-b border-slate-200 w-16">序号</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-28">时间戳</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-12 text-center">方向</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-32">协议</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-16">长度</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-72">原始数据</th>
+                    <th class="px-3 py-2 border-b border-slate-200">摘要 (解析结果/HEX/ASCII)</th>
+                  </tr>
+                </thead>
+                <tbody class="text-xs">
+                  <tr
+                    v-for="(frame, index) in filteredFrames"
+                    :key="frame.id"
+                    class="hover:bg-slate-50 cursor-pointer border-b border-slate-100"
+                    :class="{ 'bg-orange-50/40 border-l-4 border-l-orange-400': frame.tone === 'red' }"
+                    @click="selectFrame(frame)"
                   >
-                    异常
-                  </button>
-                </div>
-              </div>
-              <div class="proxy-modal-toolbar-right">
-                <span>{{ filteredFrames.length }} 条</span>
+                    <td class="px-3 py-2 text-slate-400 font-mono">{{ 50234 - index }}</td>
+                    <td class="px-3 py-2 text-slate-500 font-mono">{{ frame.time }}</td>
+                    <td class="px-3 py-2 text-center">
+                      <span
+                        class="material-symbols-outlined !text-sm"
+                        :class="frame.direction === 'RX' ? 'text-emerald-500' : 'text-blue-500'"
+                      >
+                        {{ frame.direction === 'RX' ? 'arrow_downward' : 'arrow_upward' }}
+                      </span>
+                    </td>
+                    <td class="px-3 py-2">
+                      <div class="relative inline-block protocol-badge">
+                        <div
+                          class="flex items-center gap-1.5 px-2 py-0.5 rounded-full font-bold text-[9px] border"
+                          :class="
+                            frame.tone === 'red'
+                              ? 'bg-slate-100 text-slate-600 border-dashed border-slate-300'
+                              : 'bg-blue-100 text-blue-800 border-blue-200'
+                          "
+                        >
+                          <span
+                            class="w-3.5 h-3.5 flex items-center justify-center text-white rounded-full text-[8px] font-black"
+                            :class="frame.tone === 'red' ? 'bg-slate-400' : 'bg-blue-600'"
+                          >
+                            {{ frame.tone === 'red' ? '?' : 'M' }}
+                          </span>
+                          <span>{{ frame.tone === 'red' ? 'Unknown' : selectedProtocol }}</span>
+                        </div>
+                        <div class="protocol-tooltip bg-slate-800 text-white text-[10px] px-2 py-1 rounded shadow-lg pointer-events-none whitespace-nowrap border border-slate-700">
+                          {{ frame.tone === 'red' ? '未知协议 - 点击配置' : 'Modbus RTU v1.1' }}
+                        </div>
+                      </div>
+                    </td>
+                    <td class="px-3 py-2 text-slate-500">{{ frame.size }}B</td>
+                    <td class="px-3 py-2 hex-font text-slate-400 truncate max-w-[240px]">{{ frame.note }}</td>
+                    <td class="px-3 py-2 text-slate-600 italic">
+                      {{ frame.summary || 'HEX: ' + frame.note + ' | ASCII: ....' }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </section>
+
+          <aside class="flex-1 w-[450px] flex flex-col border-l border-slate-200 bg-slate-50">
+            <div class="px-4 py-3 border-b border-slate-200 flex justify-between items-center bg-white shadow-sm">
+              <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500 flex items-center gap-2">
+                <span class="material-symbols-outlined !text-sm text-blue-500">info</span> 报文解析详情
+              </h2>
+              <div class="flex gap-2">
+                <button class="p-1 hover:bg-slate-100 rounded" title="复制原始十六进制">
+                  <span class="material-symbols-outlined !text-sm">content_copy</span>
+                </button>
+                <button class="p-1 hover:bg-slate-100 rounded" @click="closeCaptureModal">
+                  <span class="material-symbols-outlined !text-sm">close</span>
+                </button>
               </div>
             </div>
-
-            <div class="proxy-modal-list">
-              <div class="proxy-modal-list-header">
-                <span>方向</span>
-                <span>负载</span>
-                <span>摘要</span>
+            <div class="flex-1 overflow-y-auto">
+              <div class="p-6 text-center space-y-4 border-b border-slate-200 bg-orange-50/20">
+                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-orange-100 text-orange-600 mb-1">
+                  <span class="material-symbols-outlined !text-3xl">question_mark</span>
+                </div>
+                <div>
+                  <h3 class="text-sm font-bold text-slate-800">未知协议报文 (Unknown Protocol)</h3>
+                  <p class="text-[11px] text-slate-500 mt-1 max-w-[280px] mx-auto leading-relaxed">
+                    系统未能自动匹配已知的解析插件。您可以尝试手动配置解析规则，或使用万能解析脚本。
+                  </p>
+                </div>
+                <div class="flex justify-center gap-3">
+                  <button class="px-3 py-1.5 bg-white border border-slate-300 rounded text-[11px] font-bold hover:bg-slate-50 transition-colors shadow-sm">手动解析</button>
+                  <button class="px-3 py-1.5 bg-blue-600 text-white rounded text-[11px] font-bold hover:bg-blue-700 transition-colors flex items-center gap-1 shadow-md">
+                    <span class="material-symbols-outlined !text-xs">schema</span> 配置解析规则
+                  </button>
+                </div>
               </div>
-              <div
-                v-for="frame in filteredFrames"
-                :key="frame.id"
-                class="proxy-frame"
-                :class="{ error: frame.tone === 'red' }"
-              >
-                <div class="proxy-frame-row" @click="selectFrame(frame)">
-                  <span
-                    class="proxy-chip"
-                    :class="[
-                      frame.tone === 'red'
-                        ? 'tone-red'
-                        : frame.direction === 'RX'
-                        ? 'tone-green'
-                        : frame.tone === 'amber'
-                        ? 'tone-amber'
-                        : 'tone-blue',
-                    ]"
-                    :data-warn="frame.warn"
-                  >
-                    {{ frame.direction }}
-                  </span>
-                  <div class="note">
-                    <div>{{ frame.note }}</div>
-                    <div class="proxy-mono">{{ frame.time }}</div>
-                  </div>
-                  <div class="col-summary" :class="{ error: frame.tone === 'red' }">
-                    {{ frame.summary }}
-                  </div>
+              <div class="p-4 border-b border-slate-200">
+                <div class="flex items-center justify-between mb-3">
+                  <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">原始十六进制 (RAW HEX)</h3>
+                  <span class="text-[10px] font-mono bg-slate-200 px-1.5 py-0.5 rounded text-slate-600">16 字节</span>
                 </div>
-                <div v-if="selectedFrame && selectedFrame.id === frame.id" class="proxy-frame-detail">
-                  <div class="proxy-detail-row">
-                    <span>大小</span>
-                    <strong class="proxy-mono">{{ frame.size }} bytes</strong>
-                  </div>
-                  <div class="proxy-detail-row">
-                    <span>通道</span>
-                    <strong class="proxy-mono">{{ frame.channel }}</strong>
+                <div class="bg-white border border-slate-200 rounded-lg overflow-hidden flex shadow-inner">
+                  <div class="bg-slate-50 border-r border-slate-200 p-2 text-[10px] font-mono text-slate-400 leading-6 text-right w-12 shrink-0">
+                    0000<br />0008
                   </div>
-                  <div class="proxy-detail-row">
-                    <span>波特率</span>
-                    <strong class="proxy-mono">{{ frame.baud }}</strong>
+                  <div class="flex-1 p-2 hex-font text-xs leading-6 grid grid-cols-8 gap-x-1 text-center font-medium">
+                    <span class="text-blue-500 bg-blue-50 rounded">FF</span>
+                    <span class="text-blue-500 bg-blue-50 rounded">EE</span>
+                    <span class="text-slate-400">DD</span>
+                    <span class="text-emerald-500 font-bold bg-emerald-50 rounded">CC</span>
+                    <span class="text-emerald-500 font-bold bg-emerald-50 rounded">00</span>
+                    <span class="text-amber-500 font-bold bg-amber-50 rounded">11</span>
+                    <span class="text-amber-500 font-bold bg-amber-50 rounded">22</span>
+                    <span class="text-slate-400">33</span>
+                    <span class="text-slate-400">44</span>
+                    <span class="text-slate-400">55</span>
+                    <span class="text-slate-400">66</span>
+                    <span class="text-slate-400">77</span>
+                    <span class="text-slate-400">88</span>
+                    <span class="text-slate-400">99</span>
+                    <span class="text-slate-400">AA</span>
+                    <span class="text-slate-400">BB</span>
                   </div>
-                  <div class="proxy-detail-row">
-                    <span>状态</span>
-                    <strong
-                      class="proxy-mono"
-                      :class="frame.tone === 'red' ? 'tone-red' : frame.tone === 'amber' ? 'tone-amber' : 'tone-green'"
-                    >
-                      {{ frame.tone === 'red' ? '错误' : frame.tone === 'amber' ? '警告' : '正常' }}
-                    </strong>
+                  <div class="border-l border-slate-200 p-2 text-[10px] font-mono text-slate-500 leading-6 tracking-tight w-24 shrink-0 bg-slate-50/50">
+                    ........<br />........
                   </div>
                 </div>
               </div>
-            </div>
-
-            <div class="proxy-modal-footer">
-              <button class="proxy-btn ghost" type="button">清空</button>
-              <div class="proxy-footer-actions">
-                <button class="proxy-btn warning" type="button">暂停</button>
-                <button class="proxy-btn primary" type="button">导出</button>
+              <div class="p-4 space-y-4">
+                <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">协议层级解析 (PROTOCOL TREE)</h3>
+                <div class="relative pl-4 space-y-1">
+                  <div class="flex items-center gap-2 -ml-4 cursor-pointer hover:bg-slate-100 p-1 rounded transition-colors group">
+                    <span class="material-symbols-outlined text-slate-400 group-open:rotate-90">arrow_right</span>
+                    <span class="text-[11px] font-bold text-slate-500 uppercase">链路层 (Data Link Layer)</span>
+                  </div>
+                  <div class="tree-line relative pl-2 space-y-1">
+                    <details class="group" open>
+                      <summary class="flex items-center gap-2 list-none cursor-pointer hover:bg-slate-100 p-1 rounded -ml-4 transition-colors">
+                        <span class="material-symbols-outlined text-blue-500 group-open:rotate-90 transition-transform">arrow_drop_down</span>
+                        <span class="text-[11px] font-bold text-slate-800 uppercase">Agnostic Data Frame</span>
+                      </summary>
+                      <div class="mt-2 space-y-0.5 pl-2">
+                        <div class="grid grid-cols-12 text-[9px] font-bold text-slate-400 px-2 py-1 uppercase tracking-tighter">
+                          <div class="col-span-3">原始值</div>
+                          <div class="col-span-4">字段</div>
+                          <div class="col-span-5 text-right">解析值</div>
+                        </div>
+                        <div class="grid grid-cols-12 items-center py-1.5 px-2 rounded hover:bg-blue-50 cursor-default transition-colors border-l-2 border-transparent hover:border-blue-500">
+                          <div class="col-span-3 font-mono text-[11px] text-blue-600">FF EE</div>
+                          <div class="col-span-4 text-[11px] text-slate-500">报文标识 (Header)</div>
+                          <div class="col-span-5 text-[11px] text-right font-bold text-slate-700">65518</div>
+                        </div>
+                        <div class="grid grid-cols-12 items-center py-1.5 px-2 rounded hover:bg-blue-50 cursor-default transition-colors border-l-2 border-transparent hover:border-blue-500">
+                          <div class="col-span-3 font-mono text-[11px] text-blue-600">10</div>
+                          <div class="col-span-4 text-[11px] text-slate-500">数据长度 (Len)</div>
+                          <div class="col-span-5 text-[11px] text-right font-bold text-primary">16 Bytes</div>
+                        </div>
+                      </div>
+                    </details>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-
-          <aside class="proxy-modal-side">
-            <div>
-              <h4>会话统计</h4>
-              <div class="proxy-stat-card">
-                <span>总帧数</span>
-                <div class="proxy-stat-value">
-                  <strong>{{ captureStats.total }}</strong>
-                  <em>实时</em>
+            <div class="p-4 bg-slate-100/50 border-t border-slate-200">
+              <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">实时网络指标</p>
+              <div class="grid grid-cols-2 gap-4">
+                <div class="bg-white p-2 rounded border border-slate-200 shadow-sm">
+                  <p class="text-[9px] text-slate-500">往返延时 (RTT)</p>
+                  <p class="text-sm font-bold text-emerald-500">4.2 ms</p>
                 </div>
-                <div class="proxy-stat-bar"></div>
-              </div>
-              <div class="proxy-stat-card">
-                <span>异常</span>
-                <div class="proxy-stat-value">
-                  <strong class="danger">{{ captureStats.errors }}</strong>
-                  <em>告警</em>
+                <div class="bg-white p-2 rounded border border-slate-200 shadow-sm">
+                  <p class="text-[9px] text-slate-500">丢包率 (Packet Loss)</p>
+                  <p class="text-sm font-bold text-slate-900">0.02 %</p>
                 </div>
-                <div class="proxy-stat-bar"></div>
               </div>
             </div>
-            <div class="proxy-side-block">
-              <h5>方向</h5>
-              <label>
-                <input type="checkbox" checked />
-                RX 帧 {{ captureStats.rx }}
-              </label>
-              <label>
-                <input type="checkbox" checked />
-                TX 帧 {{ captureStats.tx }}
-              </label>
-            </div>
-            <div class="proxy-side-tip">
-              <div class="proxy-side-tip-title">
-                <span class="material-symbols-outlined">tips_and_updates</span>
-                提示
+          </aside>
+        </main>
+        <footer class="px-4 py-2 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
+          <div class="flex items-center gap-6">
+            <div class="flex items-center gap-2">
+              <span class="text-[10px] font-bold text-slate-500 uppercase">接收缓冲区</span>
+              <div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden border border-slate-300">
+                <div class="h-full bg-amber-500 w-[85%]"></div>
               </div>
-              当前为演示数据，可接入 bridge 事件展示真实帧。
+              <span class="text-[10px] font-mono font-bold text-slate-600">85%</span>
             </div>
-          </aside>
-        </div>
+            <div class="h-4 w-[1px] bg-slate-300"></div>
+            <p class="text-[10px] font-medium text-slate-500 uppercase">显示 1-50 / 共 50,234 报文</p>
+          </div>
+          <div class="flex items-center gap-4">
+            <div class="flex items-center gap-1 bg-white p-0.5 rounded border border-slate-200">
+              <button class="p-1 hover:bg-slate-100 rounded" disabled>
+                <span class="material-symbols-outlined !text-sm">first_page</span>
+              </button>
+              <button class="p-1 hover:bg-slate-100 rounded">
+                <span class="material-symbols-outlined !text-sm">chevron_left</span>
+              </button>
+              <div class="px-3 text-[10px] font-bold text-slate-700">第 1 / 1005 页</div>
+              <button class="p-1 hover:bg-slate-100 rounded">
+                <span class="material-symbols-outlined !text-sm">chevron_right</span>
+              </button>
+              <button class="p-1 hover:bg-slate-100 rounded">
+                <span class="material-symbols-outlined !text-sm">last_page</span>
+              </button>
+            </div>
+            <button class="flex items-center gap-1 px-3 py-1 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded text-[10px] font-bold transition-colors">
+              <span class="material-symbols-outlined !text-sm">download</span> 导出分析结果
+            </button>
+          </div>
+        </footer>
       </div>
     </div>
   </teleport>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index f8c545b..6dd5cd7 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1,3 +1,9 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @font-face {
   font-family: "Material Symbols Outlined";
   font-style: normal;
@@ -6,6 +12,63 @@
   src: url("./assets/fonts/MaterialSymbolsOutlined.ttf") format("truetype");
 }
 
+.packet-modal {
+  --bg-light: #f8fafc;
+  --bg-dark: #0f172a;
+  font-family: "Inter", "Microsoft YaHei", sans-serif;
+}
+
+.hex-font {
+  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+}
+
+.timeline-heatmap {
+  background: linear-gradient(
+    to right,
+    #10b981 0%,
+    #10b981 15%,
+    #ef4444 15%,
+    #ef4444 17%,
+    #10b981 17%,
+    #10b981 45%,
+    #ef4444 45%,
+    #ef4444 46%,
+    #10b981 46%,
+    #10b981 80%,
+    #f59e0b 80%,
+    #f59e0b 82%,
+    #10b981 82%,
+    #10b981 100%
+  );
+}
+
+.tree-line::before {
+  content: "";
+  position: absolute;
+  left: -12px;
+  top: 0;
+  bottom: 10px;
+  width: 1px;
+  background: #e2e8f0;
+}
+
+.protocol-tooltip {
+  visibility: hidden;
+  position: absolute;
+  z-index: 50;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  transition: opacity 0.2s;
+  opacity: 0;
+}
+
+.protocol-badge:hover .protocol-tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
 :root {
   color-scheme: light;
   font-family: "Space Grotesk", "Noto Sans SC", "Noto Sans", sans-serif;
@@ -114,6 +177,11 @@ body.proxy-modal-open .proxy-modal-backdrop * {
   pointer-events: auto;
 }
 
+body.proxy-modal-open .proxy-modal-overlay,
+body.proxy-modal-open .proxy-modal-overlay * {
+  pointer-events: auto;
+}
+
 html,
 body {
   margin: 0;
@@ -2981,997 +3049,2701 @@ textarea {
   gap: 16px;
 }
 
-.proxy-modal-side h4 {
-  margin: 0 0 12px;
-  font-size: 10px;
-  font-weight: 700;
-  color: #94a3b8;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+.proxy-capture .proxy-modal-body {
+  background: #0b1220;
+  border-top: 1px solid #1f2937;
+  display: grid !important;
+  grid-template-columns: minmax(0, 1fr) 320px !important;
+  align-items: stretch;
 }
 
-.proxy-stat-card {
-  background: #ffffff;
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 14px;
-  margin-bottom: 12px;
-  position: relative;
-  overflow: hidden;
+.proxy-capture .proxy-modal-stream {
+  background: #0b1220;
+  color: #cbd5f5;
+  padding: 0;
 }
 
-.proxy-stat-card span {
-  font-size: 10px;
+.proxy-capture .proxy-modal-toolbar {
+  background: #0f172a;
+  border-color: #1f2937;
   color: #94a3b8;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  font-weight: 700;
+  padding: 12px 16px;
 }
 
-.proxy-stat-value {
-  margin-top: 6px;
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
+.proxy-capture .proxy-modal-toolbar.secondary {
+  border-top: 1px solid #1f2937;
 }
 
-.proxy-stat-value strong {
-  font-size: 22px;
-  color: #0f172a;
+.proxy-capture .proxy-modal-list {
+  background: #0b1220;
+  color: #cbd5f5;
+  padding: 14px 16px;
 }
 
-.proxy-stat-value strong.danger {
-  color: #fb7185;
+.proxy-capture .proxy-modal-list-header {
+  background: #0b1220;
+  border-color: #1f2937;
+  color: #64748b;
+  padding-bottom: 12px;
 }
 
-.proxy-stat-value em {
-  font-size: 10px;
-  color: #22c55e;
-  font-weight: 700;
-  font-style: normal;
+.proxy-capture .proxy-frame {
+  background: #0f172a;
+  border-color: #1f2937;
+  border-radius: 14px;
+  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.45);
 }
 
-.proxy-stat-bar {
-  position: absolute;
-  left: 0;
-  right: 40%;
-  bottom: 0;
-  height: 3px;
-  background: rgba(59, 130, 246, 0.6);
+.proxy-capture .proxy-frame.error {
+  background: #2b1220;
+  border-color: #7f1d1d;
 }
 
-.proxy-side-block {
-  background: #ffffff;
-  border: 1px solid var(--border);
-  border-radius: 14px;
-  padding: 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.proxy-capture .proxy-frame-detail {
+  background: #0f172a;
+  border-top-color: #1f2937;
+  color: #cbd5f5;
 }
 
-.proxy-side-block h5 {
-  margin: 0 0 6px;
+.proxy-capture .proxy-modal-footer {
+  background: #0f172a;
+  border-top-color: #1f2937;
+  padding: 14px 16px;
+}
+
+.proxy-capture .proxy-modal-side {
+  background: #0b1220;
+  border-left-color: #1f2937;
+  color: #cbd5f5;
+  min-width: 260px;
+  padding: 18px 16px;
+  box-shadow: inset 1px 0 0 rgba(148, 163, 184, 0.08);
+}
+
+.proxy-capture .proxy-modal-select {
+  background: #0f172a;
+  border: 1px solid #1f2937;
+  border-radius: 12px;
+  padding: 6px 12px;
+}
+
+.proxy-capture .proxy-modal-select label {
+  display: block;
   font-size: 10px;
+  font-weight: 700;
   color: #94a3b8;
   text-transform: uppercase;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.08em;
 }
 
-.proxy-side-block label {
+.proxy-capture .proxy-modal-select select {
+  background: transparent;
+  border: none;
+  color: #e2e8f0;
+  font-size: 12px;
+  font-weight: 600;
+  outline: none;
+  padding: 0;
+}
+
+.proxy-capture .proxy-modal-header {
+  justify-content: space-between;
+}
+
+.proxy-capture-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.proxy-capture-sub {
   display: flex;
   align-items: center;
   gap: 8px;
-  font-size: 12px;
-  color: #475569;
+  margin-top: 4px;
 }
 
-.proxy-side-block input {
-  accent-color: #2563eb;
+.proxy-live-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #22c55e;
+  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
+  animation: proxy-pulse 1.6s infinite;
 }
 
-.proxy-side-tip {
-  border-radius: 14px;
-  padding: 14px;
-  border: 1px solid #bfdbfe;
-  background: #eff6ff;
-  color: #1d4ed8;
+.proxy-time {
+  color: #94a3b8;
   font-size: 11px;
+  font-weight: 600;
 }
 
-.proxy-side-tip-title {
-  display: inline-flex;
+.proxy-payload {
+  display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.12em;
-  font-weight: 700;
-  margin-bottom: 8px;
+  flex-wrap: wrap;
 }
 
-@media (max-width: 1024px) {
-  .proxy-modal {
-    height: min(90vh, 900px);
-  }
-
-  .proxy-modal-body {
-    grid-template-columns: 1fr;
-  }
-
-  .proxy-modal-side {
-    border-left: none;
-    border-top: 1px solid rgba(148, 163, 184, 0.2);
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
+.proxy-summary {
+  text-align: right;
+  font-style: italic;
+  color: #7dd3fc;
+  font-size: 11px;
+}
 
-  .proxy-modal-side > div,
-  .proxy-side-block,
-  .proxy-side-tip {
-    flex: 1 1 240px;
-  }
+.proxy-summary.error {
+  color: #f87171;
+  font-weight: 700;
+  font-style: normal;
 }
 
-@media (max-width: 1200px) {
-  .manual-grid,
-  .monitor-stack,
-  .scripts-grid {
-    grid-template-columns: 1fr;
-  }
+.proxy-capture-header {
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
 }
 
-@media (max-width: 1360px) {
-  .manual-grid {
-    grid-template-columns: 1fr;
-  }
+.proxy-capture .proxy-modal {
+  max-width: 1200px;
+  height: min(90vh, 940px);
+}
 
-  .manual-left,
-  .manual-right {
-    display: contents;
-  }
+.proxy-capture-header {
+  padding: 14px 18px;
+}
 
-  .manual-monitor,
-  .manual-send,
-  .manual-quick,
-  .manual-console {
-    width: 100%;
-  }
+.proxy-capture .proxy-modal-title h2 {
+  font-size: 18px;
+  line-height: 1.2;
+}
 
-  .manual-monitor {
-    order: 1;
-  }
+.proxy-capture .proxy-subtitle {
+  font-size: 11px;
+}
 
-  .manual-send {
-    order: 2;
-  }
+.proxy-capture .proxy-modal-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: #e0edff;
+  color: #2563eb;
+}
 
-  .manual-quick {
-    order: 3;
-  }
+.proxy-capture .proxy-modal-icon .material-symbols-outlined {
+  font-size: 18px;
+}
 
-  .manual-console {
-    order: 4;
-  }
+.proxy-capture .proxy-capture-actions {
+  gap: 10px;
+}
 
-  .manual-monitor {
-    min-height: 220px;
-  }
+.proxy-capture .proxy-modal-select {
+  padding: 4px 10px;
+}
 
-  .manual-monitor .log-stream {
-    min-height: 140px;
-    max-height: 260px;
-  }
+.proxy-capture .proxy-modal-select label {
+  font-size: 9px;
+}
 
-  .manual-send .text-area {
-    min-height: 140px;
-  }
+.proxy-capture .proxy-modal-select select {
+  font-size: 11px;
+}
 
-  .manual-send {
-    min-height: 240px;
-  }
+.proxy-capture .proxy-modal-close {
+  width: 28px;
+  height: 28px;
+}
 
-  .header-actions {
-    gap: 8px;
-  }
+.proxy-capture-header .proxy-modal-title h2 {
+  color: #0f172a;
 }
 
-@media (max-width: 1000px) {
-  .page-header {
-    padding: 14px 16px;
-  }
+.proxy-capture-header .proxy-subtitle {
+  color: #64748b;
+  font-size: 12px;
 }
 
-@media (max-width: 1100px) {
-  .header-actions {
-    gap: 8px;
-  }
+.proxy-capture .proxy-modal-title h2 {
+  font-weight: 700;
 }
 
-@media (max-width: 900px) {
-  .header-actions {
-    flex-wrap: wrap;
-  }
-
-  .select-wrap {
-    flex: 1 1 220px;
-  }
-
-  .status-indicator {
-    order: 1;
-  }
-}
-
-.proxy-dashboard {
-  gap: 24px;
+.proxy-capture-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
-.proxy-dashboard-hero {
+.proxy-footer-left {
   display: flex;
-  flex-direction: column;
-  gap: 16px;
+  align-items: center;
+  gap: 10px;
 }
 
-.proxy-hero-card {
+.proxy-footer-right {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 24px 26px;
-  border-radius: 24px;
-  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.95);
-  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+  gap: 10px;
 }
 
-.proxy-hero-card h2 {
-  margin: 0;
-  font-size: 26px;
-  letter-spacing: -0.02em;
+.proxy-capture .proxy-btn.warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: #fbbf24;
 }
 
-.proxy-hero-card p {
-  margin: 6px 0 0;
-  color: var(--muted);
-  font-size: 13px;
+.proxy-capture .proxy-btn.ghost {
+  background: #111827;
+  color: #cbd5f5;
 }
 
-.proxy-hero-actions {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
+.proxy-capture .proxy-btn.primary {
+  background: #2563eb;
+  color: #ffffff;
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
 }
 
-.proxy-hero-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 18px;
-  border-radius: 16px;
-  border: 1px solid var(--border);
-  background: #ffffff;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+.proxy-capture .proxy-modal-toggle {
+  background: #0b1220;
+  border: 1px solid #1f2937;
+  border-radius: 999px;
+  padding: 4px;
 }
 
-.proxy-hero-btn:hover {
-  border-color: #cbd5f5;
-  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
-  transform: translateY(-1px);
+.proxy-capture .proxy-modal-toggle button {
+  font-size: 10px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-weight: 700;
 }
 
-.proxy-hero-btn.primary {
-  border-color: transparent;
-  background: #2563eb;
-  color: #ffffff;
-  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.3);
+.proxy-capture .proxy-modal-toggle button.active {
+  background: #1f2937;
+  color: #e2e8f0;
 }
 
-.proxy-hero-btn.primary:hover {
-  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.36);
+.proxy-capture .proxy-modal-list-header span {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
 }
 
-.proxy-dashboard-filters {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+.proxy-capture .proxy-frame-row {
+  padding: 12px 14px;
 }
 
-.proxy-filter-chip {
-  border: 1px solid var(--border);
-  background: #ffffff;
-  color: #64748b;
-  padding: 8px 18px;
-  border-radius: 999px;
+.proxy-capture .proxy-time {
   font-size: 12px;
   font-weight: 600;
-  cursor: pointer;
-  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
+  color: #94a3b8;
 }
 
-.proxy-filter-chip:hover {
-  border-color: #cbd5f5;
+.proxy-capture .proxy-payload .proxy-chip {
+  border-radius: 10px;
+  padding: 2px 8px;
+  font-size: 11px;
 }
 
-.proxy-filter-chip.active {
-  background: #0f172a;
-  color: #ffffff;
-  border-color: #0f172a;
+.proxy-capture .proxy-summary {
+  font-size: 12px;
+  font-weight: 600;
+  color: #7dd3fc;
 }
 
-.proxy-dashboard-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-  gap: 18px;
-  justify-content: start;
+.proxy-capture .proxy-summary.error {
+  color: #fb7185;
 }
 
-.proxy-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  border-radius: 22px;
-  border: 1px solid var(--border);
-  background: #ffffff;
-  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
-  overflow: hidden;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+.proxy-capture .proxy-modal-list {
+  gap: 10px;
 }
 
-.proxy-panel:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
+.proxy-capture .proxy-frame + .proxy-frame {
+  margin-top: 10px;
 }
 
-.proxy-panel.status-stopped {
-  opacity: 0.75;
-  filter: grayscale(0.35);
+.proxy-capture .proxy-modal-side h4,
+.proxy-capture .proxy-side-block h5 {
+  color: #94a3b8;
+  letter-spacing: 0.12em;
 }
 
-.proxy-panel-head {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 20px 20px 0;
+.proxy-capture .proxy-stat-card {
+  background: #0f172a;
+  border-color: #1f2937;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.06);
 }
 
-.proxy-panel-title {
-  display: flex;
-  align-items: center;
-  gap: 14px;
+.proxy-capture .proxy-stat-card span {
+  color: #94a3b8;
 }
 
-.proxy-panel-title h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--text);
+.proxy-capture .proxy-stat-value strong {
+  color: #e2e8f0;
 }
 
-.proxy-panel-title p {
-  margin: 4px 0 0;
-  font-size: 11px;
-  color: #94a3b8;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+.proxy-capture .proxy-stat-value strong.danger {
+  color: #fb7185;
 }
 
-.proxy-panel-icon {
-  width: 44px;
-  height: 44px;
+.proxy-capture .proxy-stat-value em {
+  color: #22c55e;
+}
+
+.proxy-capture .proxy-side-block {
+  background: #0f172a;
+  border-color: #1f2937;
   border-radius: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: #dbeafe;
-  color: #2563eb;
+  padding: 14px;
 }
 
-.proxy-panel-icon.status-stopped {
-  background: #f1f5f9;
-  color: #94a3b8;
+.proxy-capture .proxy-side-tip {
+  background: #0b1b33;
+  border-color: #1e3a8a;
+  color: #93c5fd;
+  border-radius: 16px;
 }
 
-.proxy-panel-icon.status-error {
-  background: #fee2e2;
-  color: #ef4444;
+@keyframes proxy-pulse {
+  0% {
+    transform: scale(0.9);
+    opacity: 0.8;
+  }
+  70% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0.9);
+    opacity: 0;
+  }
 }
 
-.proxy-status-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border-radius: 999px;
+.proxy-modal-side h4 {
+  margin: 0 0 12px;
   font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.2em;
+  color: #94a3b8;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
-  border: 1px solid transparent;
 }
 
-.proxy-status-pill .dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: currentColor;
+.proxy-stat-card {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 14px;
+  margin-bottom: 12px;
+  position: relative;
+  overflow: hidden;
 }
 
-.proxy-status-pill.status-running {
-  color: #16a34a;
-  background: #ecfdf3;
-  border-color: #bbf7d0;
+.proxy-stat-card span {
+  font-size: 10px;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
 }
 
-.proxy-status-pill.status-stopped {
-  color: #64748b;
-  background: #f1f5f9;
-  border-color: #e2e8f0;
+.proxy-stat-value {
+  margin-top: 6px;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
 }
 
-.proxy-status-pill.status-error {
-  color: #ef4444;
-  background: #fef2f2;
-  border-color: #fecaca;
+.proxy-stat-value strong {
+  font-size: 22px;
+  color: #0f172a;
 }
 
-.proxy-route-card {
-  margin: 0 20px;
-  padding: 12px 14px;
-  border-radius: 18px;
-  border: 1px dashed #d1d5db;
-  background: #f8fafc;
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  gap: 12px;
+.proxy-stat-value strong.danger {
+  color: #fb7185;
 }
 
-.proxy-route-card.status-error {
-  border-color: #fecaca;
-  background: #fff1f2;
+.proxy-stat-value em {
+  font-size: 10px;
+  color: #22c55e;
+  font-weight: 700;
+  font-style: normal;
 }
 
-.proxy-route-col {
+.proxy-stat-bar {
+  position: absolute;
+  left: 0;
+  right: 40%;
+  bottom: 0;
+  height: 3px;
+  background: rgba(59, 130, 246, 0.6);
+}
+
+.proxy-side-block {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.proxy-side-block h5 {
+  margin: 0 0 6px;
+  font-size: 10px;
+  color: #94a3b8;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+}
+
+.proxy-side-block label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #475569;
+}
+
+.proxy-side-block input {
+  accent-color: #2563eb;
+}
+
+.proxy-side-tip {
+  border-radius: 14px;
+  padding: 14px;
+  border: 1px solid #bfdbfe;
+  background: #eff6ff;
+  color: #1d4ed8;
+  font-size: 11px;
+}
+
+.proxy-side-tip-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+@media (max-width: 1024px) {
+  .proxy-modal {
+    height: min(90vh, 900px);
+  }
+
+  .proxy-modal-body {
+    grid-template-columns: 1fr;
+  }
+
+  .proxy-capture .proxy-modal-body {
+    grid-template-columns: minmax(0, 1fr) 320px !important;
+  }
+
+  .proxy-modal-side {
+    border-left: none;
+    border-top: 1px solid rgba(148, 163, 184, 0.2);
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .proxy-capture .proxy-modal-side {
+    border-left: 1px solid #1f2937;
+    border-top: none;
+    flex-direction: column;
+  }
+
+  .proxy-modal-side > div,
+  .proxy-side-block,
+  .proxy-side-tip {
+    flex: 1 1 240px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .manual-grid,
+  .monitor-stack,
+  .scripts-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1360px) {
+  .manual-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .manual-left,
+  .manual-right {
+    display: contents;
+  }
+
+  .manual-monitor,
+  .manual-send,
+  .manual-quick,
+  .manual-console {
+    width: 100%;
+  }
+
+  .manual-monitor {
+    order: 1;
+  }
+
+  .manual-send {
+    order: 2;
+  }
+
+  .manual-quick {
+    order: 3;
+  }
+
+  .manual-console {
+    order: 4;
+  }
+
+  .manual-monitor {
+    min-height: 220px;
+  }
+
+  .manual-monitor .log-stream {
+    min-height: 140px;
+    max-height: 260px;
+  }
+
+  .manual-send .text-area {
+    min-height: 140px;
+  }
+
+  .manual-send {
+    min-height: 240px;
+  }
+
+  .header-actions {
+    gap: 8px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .page-header {
+    padding: 14px 16px;
+  }
+}
+
+@media (max-width: 1100px) {
+  .header-actions {
+    gap: 8px;
+  }
+}
+
+@media (max-width: 900px) {
+  .header-actions {
+    flex-wrap: wrap;
+  }
+
+  .select-wrap {
+    flex: 1 1 220px;
+  }
+
+  .status-indicator {
+    order: 1;
+  }
+}
+
+.proxy-dashboard {
+  gap: 24px;
+}
+
+.proxy-dashboard-hero {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.proxy-hero-card {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 24px 26px;
+  border-radius: 24px;
+  border: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
+}
+
+.proxy-hero-card h2 {
+  margin: 0;
+  font-size: 26px;
+  letter-spacing: -0.02em;
+}
+
+.proxy-hero-card p {
+  margin: 6px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.proxy-hero-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.proxy-hero-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  border-radius: 16px;
+  border: 1px solid var(--border);
+  background: #ffffff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+}
+
+.proxy-hero-btn:hover {
+  border-color: #cbd5f5;
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.12);
+  transform: translateY(-1px);
+}
+
+.proxy-hero-btn.primary {
+  border-color: transparent;
+  background: #2563eb;
+  color: #ffffff;
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.3);
+}
+
+.proxy-hero-btn.primary:hover {
+  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.36);
+}
+
+.proxy-dashboard-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.proxy-filter-chip {
+  border: 1px solid var(--border);
+  background: #ffffff;
+  color: #64748b;
+  padding: 8px 18px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
+}
+
+.proxy-filter-chip:hover {
+  border-color: #cbd5f5;
+}
+
+.proxy-filter-chip.active {
+  background: #0f172a;
+  color: #ffffff;
+  border-color: #0f172a;
+}
+
+.proxy-dashboard-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 18px;
+  justify-content: start;
+}
+
+.proxy-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  border-radius: 22px;
+  border: 1px solid var(--border);
+  background: #ffffff;
+  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.proxy-panel:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.12);
+}
+
+.proxy-panel.status-stopped {
+  opacity: 0.75;
+  filter: grayscale(0.35);
+}
+
+.proxy-panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 20px 20px 0;
+}
+
+.proxy-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.proxy-panel-title h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.proxy-panel-title p {
+  margin: 4px 0 0;
+  font-size: 11px;
+  color: #94a3b8;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.proxy-panel-icon {
+  width: 44px;
+  height: 44px;
+  border-radius: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.proxy-panel-icon.status-stopped {
+  background: #f1f5f9;
+  color: #94a3b8;
+}
+
+.proxy-panel-icon.status-error {
+  background: #fee2e2;
+  color: #ef4444;
+}
+
+.proxy-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+}
+
+.proxy-status-pill .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.proxy-status-pill.status-running {
+  color: #16a34a;
+  background: #ecfdf3;
+  border-color: #bbf7d0;
+}
+
+.proxy-status-pill.status-stopped {
+  color: #64748b;
+  background: #f1f5f9;
+  border-color: #e2e8f0;
+}
+
+.proxy-status-pill.status-error {
+  color: #ef4444;
+  background: #fef2f2;
+  border-color: #fecaca;
+}
+
+.proxy-route-card {
+  margin: 0 20px;
+  padding: 12px 14px;
+  border-radius: 18px;
+  border: 1px dashed #d1d5db;
+  background: #f8fafc;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 12px;
+}
+
+.proxy-route-card.status-error {
+  border-color: #fecaca;
+  background: #fff1f2;
+}
+
+.proxy-route-col {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  text-align: center;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.proxy-route-chip {
+  padding: 4px 10px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  font-size: 12px;
+  color: #1f2937;
+  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
+}
+
+.proxy-route-state {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.proxy-route-state.primary {
+  color: #2563eb;
+}
+
+.proxy-route-state.muted {
+  color: #94a3b8;
+}
+
+.proxy-route-state.danger {
+  color: #ef4444;
+}
+
+.proxy-metrics {
+  display: grid;
+  grid-template-columns: 1fr 1.4fr;
+  gap: 12px;
+  padding: 14px 20px;
+  border-top: 1px solid #f1f5f9;
+  border-bottom: 1px solid #f1f5f9;
+}
+
+.proxy-metrics p {
+  margin: 0 0 6px;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.proxy-metrics p.danger {
+  color: #ef4444;
+}
+
+.proxy-metrics strong {
+  font-size: 18px;
+  color: #0f172a;
+}
+
+.proxy-metrics strong span {
+  font-size: 11px;
+  font-weight: 500;
+  color: #94a3b8;
+  margin-left: 4px;
+}
+
+.proxy-metric-bandwidth {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 10px;
+}
+
+.proxy-sparkline {
+  width: 90px;
+  height: 36px;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.proxy-sparkline svg {
+  width: 100%;
+  height: 100%;
+}
+
+.proxy-sparkline path {
+  fill: none;
+  stroke-width: 2;
+  stroke: #2563eb;
+}
+
+.proxy-sparkline.status-error path {
+  stroke: #ef4444;
+}
+
+.proxy-sparkline.status-stopped path {
+  stroke: #94a3b8;
+}
+
+.proxy-sparkline-empty {
+  width: 100%;
+  height: 4px;
+  border-radius: 999px;
+  background: #e2e8f0;
+  align-self: center;
+}
+
+.proxy-panel-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 20px 16px;
+  background: #f8fafc;
+}
+
+.proxy-panel-footer.status-error {
+  background: #fff1f2;
+}
+
+.proxy-footer-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.proxy-toggle-text {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.proxy-panel-footer.status-error .proxy-toggle-text {
+  color: #ef4444;
+}
+
+.proxy-footer-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon-btn.danger:hover {
+  color: #ef4444;
+  background: #fee2e2;
+}
+
+.proxy-panel-add {
+  border: 2px dashed #cbd5f5;
+  background: transparent;
+  box-shadow: none;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  min-height: 300px;
+  padding: 24px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.proxy-panel-add:hover {
+  border-color: #2563eb;
+  background: #f8fafc;
+}
+
+.proxy-add-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: #f1f5f9;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #94a3b8;
+  transition: all 0.2s ease;
+}
+
+.proxy-panel-add:hover .proxy-add-icon {
+  background: #2563eb;
+  color: #ffffff;
+}
+
+.proxy-add-copy h3 {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.proxy-add-copy p {
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.proxy-add-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.proxy-add-tags span {
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: #f1f5f9;
+  font-size: 10px;
+  font-weight: 700;
+  color: #64748b;
+}
+
+.proxy-mono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+}
+
+.proxy-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  z-index: 120;
+  pointer-events: auto;
+}
+
+body.proxy-edit-open {
+  overflow: hidden;
+}
+
+body.proxy-edit-open .main > :not(.proxy-modal-overlay) {
+  pointer-events: none;
+}
+
+body.proxy-edit-open .proxy-modal-overlay {
+  pointer-events: auto;
+}
+
+.proxy-modal {
+  width: min(820px, 100%);
+  background: #ffffff;
+  border-radius: 28px;
+  border: 1px solid var(--border);
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  max-height: 90vh;
+}
+
+.proxy-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 24px 32px;
+  border-bottom: 1px solid #eef2f7;
+  background: #ffffff;
+}
+
+.proxy-modal-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.proxy-modal-title h2 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.proxy-modal-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #dbeafe;
+  color: #2563eb;
+}
+
+.proxy-modal-close {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  border: none;
+  background: transparent;
+  color: #94a3b8;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.proxy-modal-close:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.proxy-modal-body {
+  padding: 32px;
+  overflow-y: auto;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+.proxy-modal-note {
+  margin: 0;
+  font-size: 14px;
+  color: #64748b;
+}
+
+.proxy-modal-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  align-items: stretch;
+  width: 100%;
+}
+
+.proxy-modal-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+}
+
+.proxy-field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 12px;
+  color: #334155;
+}
+
+.proxy-field label {
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.proxy-field input,
+.proxy-field select {
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  border-radius: 12px;
+  padding: 10px 12px;
+  font-size: 13px;
+  color: #0f172a;
+  width: 100%;
+}
+
+.proxy-port-map {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+  align-items: end;
+  padding: 20px;
+  border-radius: 18px;
+  border: 1px solid #dbe4ff;
+  background: #f5f8ff;
+  width: 100%;
+}
+
+.proxy-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.proxy-section-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 13px;
+  color: #1f2937;
+  border-bottom: 1px solid #eef2f7;
+  padding-bottom: 8px;
+}
+
+.proxy-section-title span:last-child {
+  font-weight: 500;
+  font-size: 11px;
+  color: #94a3b8;
+}
+
+.proxy-section-title.muted {
+  color: #64748b;
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.proxy-section-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 20px;
+  padding: 24px;
+  border-radius: 16px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  width: 100%;
+}
+
+.proxy-span-2 {
+  grid-column: span 2;
+}
+
+.proxy-segmented {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
+  gap: 6px;
+  padding: 6px;
+  border-radius: 14px;
+  background: #e2e8f0;
+}
+
+.proxy-segmented button {
+  border: none;
+  background: transparent;
+  padding: 8px 8px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #64748b;
+  cursor: pointer;
+}
+
+.proxy-segmented button.active {
+  background: #ffffff;
+  color: #2563eb;
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
+}
+
+.proxy-toggle-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  font-size: 13px;
+  color: #64748b;
+}
+
+@media (max-width: 900px) {
+  .proxy-modal-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .proxy-port-map {
+    grid-template-columns: 1fr;
+  }
+
+  .proxy-section-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.proxy-modal-advanced {
+  border-top: 1px solid #eef2f7;
+  padding-top: 16px;
+}
+
+.proxy-toggle-row label {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 600;
+}
+
+.proxy-modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  padding: 24px 32px 28px;
+  border-top: 1px solid #eef2f7;
+  background: #f8fafc;
+}
+
+@media (min-width: 768px) {
+  .proxy-modal-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .proxy-port-map {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .proxy-section-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .proxy-section-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.proxy-modal-btn {
+  border-radius: 14px;
+  padding: 10px 18px;
+  font-size: 13px;
+  font-weight: 700;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  color: #64748b;
+  cursor: pointer;
+  transition: transform 0.16s ease, box-shadow 0.16s ease;
+}
+
+.proxy-modal-btn.ghost:hover {
+  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
+  transform: translateY(-1px);
+}
+
+.proxy-modal-btn.primary {
+  border: none;
+  background: #2563eb;
+  color: #ffffff;
+  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.25);
+}
+
+.proxy-capture .proxy-modal-body {
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+}
+
+.proxy-capture .proxy-modal-stream {
+  background: #f8fafc;
+  color: #0f172a;
+}
+
+.proxy-capture .proxy-modal-toolbar {
+  background: #ffffff;
+  border-color: #e2e8f0;
+  color: #64748b;
+}
+
+.proxy-capture .proxy-modal-list {
+  background: #f8fafc;
+  color: #0f172a;
+}
+
+.proxy-capture .proxy-modal-list-header {
+  background: #f8fafc;
+  border-color: #e2e8f0;
+  color: #94a3b8;
+}
+
+.proxy-capture .proxy-frame {
+  background: #ffffff;
+  border-color: #e2e8f0;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+}
+
+.proxy-capture .proxy-frame.error {
+  background: #fef2f2;
+  border-color: #fecaca;
+}
+
+.proxy-capture .proxy-frame-detail {
+  background: #f8fafc;
+  border-top-color: #e2e8f0;
+  color: #334155;
+}
+
+.proxy-capture .proxy-modal-footer {
+  background: #ffffff;
+  border-top-color: #e2e8f0;
+}
+
+.proxy-capture .proxy-modal-side {
+  background: #f1f5f9;
+  border-left-color: #e2e8f0;
+  color: #0f172a;
+  box-shadow: inset 1px 0 0 rgba(148, 163, 184, 0.12);
+}
+
+.proxy-capture .proxy-modal-select {
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+}
+
+.proxy-capture .proxy-modal-select label {
+  color: #64748b;
+}
+
+.proxy-capture .proxy-modal-select select {
+  color: #0f172a;
+}
+
+.proxy-capture .proxy-time {
+  color: #64748b;
+}
+
+.proxy-capture .proxy-summary {
+  color: #2563eb;
+}
+
+.proxy-capture .proxy-summary.error {
+  color: #f43f5e;
+}
+
+.proxy-capture .proxy-btn.warning {
+  background: #fff7ed;
+  color: #b45309;
+}
+
+.proxy-capture .proxy-btn.ghost {
+  background: #e2e8f0;
+  color: #475569;
+}
+
+.proxy-capture .proxy-modal-toggle {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+}
+
+.proxy-capture .proxy-modal-toggle button.active {
+  background: #0f172a;
+  color: #ffffff;
+}
+
+.proxy-capture .proxy-stat-card {
+  background: #ffffff;
+  border-color: #e2e8f0;
+  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
+}
+
+.proxy-capture .proxy-stat-value strong {
+  color: #0f172a;
+}
+
+.proxy-capture .proxy-stat-value strong.danger {
+  color: #f43f5e;
+}
+
+.proxy-capture .proxy-side-block {
+  background: #ffffff;
+  border-color: #e2e8f0;
+}
+
+.proxy-capture .proxy-side-tip {
+  background: #eff6ff;
+  border-color: #bfdbfe;
+  color: #2563eb;
+}
+
+.packet-modal {
+  max-width: 1600px;
+  height: 95vh;
+  border-radius: 18px;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+.proxy-capture .packet-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.packet-header-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+}
+
+.packet-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: #dbeafe;
+  color: #2563eb;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.packet-header h2 {
+  font-size: 14px;
+  font-weight: 700;
+  margin: 0;
+}
+
+.packet-subtitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 4px;
+  font-size: 11px;
+  color: #64748b;
+}
+
+.packet-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #22c55e;
+  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
+}
+
+.packet-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.packet-header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.packet-search {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  background: #f8fafc;
+  min-width: 240px;
+}
+
+.packet-search input {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 11px;
+  width: 100%;
+}
+
+.packet-search .material-symbols-outlined {
+  font-size: 16px;
+  color: #94a3b8;
+}
+
+.packet-divider {
+  width: 1px;
+  height: 22px;
+  background: #e2e8f0;
+  margin: 0 4px;
+}
+
+.packet-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  background: #ffffff;
+  color: #475569;
+}
+
+.packet-action-btn.primary {
+  background: #16a34a;
+  color: #ffffff;
+  border-color: #16a34a;
+}
+
+.packet-action-btn.primary:hover {
+  background: #15803d;
+}
+
+.packet-action-btn.ghost {
+  background: #f8fafc;
+  color: #64748b;
+  border-color: #e2e8f0;
+}
+
+.packet-action-btn.ghost:hover {
+  color: #0f172a;
+  border-color: #cbd5e1;
+}
+
+.packet-select {
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 6px 12px;
+}
+
+.packet-select label {
+  display: block;
+  font-size: 9px;
+  font-weight: 700;
+  color: #64748b;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.packet-select select {
+  background: transparent;
+  border: none;
+  color: #0f172a;
+  font-size: 12px;
+  font-weight: 600;
+  outline: none;
+  padding: 0;
+}
+
+.packet-close {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  border: none;
+  background: transparent;
+  color: #94a3b8;
+}
+
+.packet-close:hover {
+  background: #f1f5f9;
+  color: #475569;
+}
+
+.stitch-modal {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
+  display: flex;
+  flex-direction: column;
+}
+
+.stitch-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 16px;
+  background: #ffffff;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.stitch-header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.stitch-icon {
+  width: 34px;
+  height: 34px;
+  border-radius: 10px;
+  background: #dbeafe;
+  color: #2563eb;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.stitch-header h2 {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+}
+
+.stitch-subtitle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: #64748b;
+  margin-top: 4px;
+}
+
+.stitch-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #22c55e;
+}
+
+.stitch-header-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.stitch-search {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 10px;
+  border: 1px solid #e2e8f0;
+  background: #f8fafc;
+  min-width: 240px;
+}
+
+.stitch-search input {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: 11px;
+  width: 100%;
+}
+
+.stitch-divider {
+  width: 1px;
+  height: 22px;
+  background: #e2e8f0;
+  margin: 0 4px;
+}
+
+.stitch-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border-radius: 8px;
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.stitch-btn-primary {
+  background: #16a34a;
+  color: #ffffff;
+}
+
+.stitch-btn-ghost {
+  background: #f8fafc;
+  color: #94a3b8;
+  border-color: #e2e8f0;
+}
+
+.stitch-timeline {
+  position: relative;
+  height: 6px;
+  background: #e2e8f0;
+}
+
+.stitch-heatmap {
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    #10b981 0%,
+    #10b981 15%,
+    #ef4444 15%,
+    #ef4444 17%,
+    #10b981 17%,
+    #10b981 45%,
+    #ef4444 45%,
+    #ef4444 46%,
+    #10b981 46%,
+    #10b981 80%,
+    #f59e0b 80%,
+    #f59e0b 82%,
+    #10b981 82%,
+    #10b981 100%
+  );
+  opacity: 0.85;
+}
+
+.stitch-window {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 20%;
+  width: 5%;
+  background: rgba(255, 255, 255, 0.4);
+  border-left: 1px solid rgba(255, 255, 255, 0.8);
+  border-right: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+.stitch-body {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 450px;
+  flex: 1;
+  min-height: 0;
+}
+
+.stitch-table-section {
+  background: #ffffff;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.stitch-table-wrap {
+  flex: 1;
+  overflow: auto;
+}
+
+.stitch-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.stitch-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: #f8fafc;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #94a3b8;
+  padding: 10px 12px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.stitch-table tbody tr {
+  border-bottom: 1px solid #f1f5f9;
+  cursor: pointer;
+}
+
+.stitch-table tbody tr.warn {
+  background: rgba(255, 247, 237, 0.6);
+}
+
+.stitch-table tbody tr:hover {
+  background: #f8fafc;
+}
+
+.stitch-table td {
+  padding: 10px 12px;
+  color: #475569;
+}
+
+.stitch-dir {
+  font-size: 18px;
+}
+
+.stitch-dir.rx {
+  color: #10b981;
+}
+
+.stitch-dir.tx {
+  color: #3b82f6;
+}
+
+.stitch-proto-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.stitch-proto-pill.modbus {
+  background: #dbeafe;
+  color: #1d4ed8;
+  border: 1px solid #bfdbfe;
+}
+
+.stitch-proto-pill.unknown {
+  background: #f1f5f9;
+  color: #64748b;
+  border: 1px dashed #cbd5e1;
+}
+
+.stitch-proto-pill .pill-dot {
+  width: 14px;
+  height: 14px;
+  border-radius: 999px;
+  background: #2563eb;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 800;
+}
+
+.stitch-proto-pill.unknown .pill-dot {
+  background: #94a3b8;
+}
+
+.stitch-side {
+  background: #f8fafc;
+  border-left: 1px solid #e2e8f0;
   display: flex;
   flex-direction: column;
+  min-height: 0;
+}
+
+.stitch-side-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.stitch-side-header h3 {
+  display: flex;
   align-items: center;
   gap: 6px;
-  text-align: center;
   font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #64748b;
+}
+
+.stitch-side-actions button {
+  border: none;
+  background: transparent;
   color: #94a3b8;
+  cursor: pointer;
 }
 
-.proxy-route-chip {
-  padding: 4px 10px;
-  border-radius: 10px;
+.stitch-side-scroll {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.stitch-unknown {
+  padding: 20px;
+  text-align: center;
+  border-bottom: 1px solid #e2e8f0;
+  background: rgba(255, 247, 237, 0.5);
+}
+
+.stitch-unknown h4 {
+  margin: 6px 0 0;
+  font-size: 12px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.stitch-unknown p {
+  font-size: 11px;
+  color: #64748b;
+  margin: 8px auto 0;
+  max-width: 280px;
+  line-height: 1.5;
+}
+
+.unknown-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  background: #ffedd5;
+  color: #f97316;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 8px;
+}
+
+.unknown-actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.unknown-actions .ghost {
   border: 1px solid #e2e8f0;
   background: #ffffff;
-  font-size: 12px;
-  color: #1f2937;
-  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
+  border-radius: 8px;
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 700;
 }
 
-.proxy-route-state {
+.unknown-actions .primary {
+  border: none;
+  background: #2563eb;
+  color: #ffffff;
+  border-radius: 8px;
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 700;
   display: inline-flex;
-  flex-direction: column;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
+}
+
+.stitch-hex {
+  padding: 16px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #ffffff;
+}
+
+.stitch-tree {
+  padding: 16px;
+}
+
+.stitch-metrics {
+  padding: 16px;
+  background: #f1f5f9;
+  border-top: 1px solid #e2e8f0;
+  margin-top: auto;
+}
+
+.stitch-metrics .metrics-title {
   font-size: 10px;
   font-weight: 700;
-  letter-spacing: 0.12em;
   text-transform: uppercase;
+  color: #94a3b8;
+  margin-bottom: 10px;
 }
 
-.proxy-route-state.primary {
-  color: #2563eb;
+.stitch-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 10px 14px;
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
 }
 
-.proxy-route-state.muted {
-  color: #94a3b8;
+.stitch-footer .footer-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 11px;
+  color: #64748b;
 }
 
-.proxy-route-state.danger {
-  color: #ef4444;
+.stitch-footer .footer-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.proxy-metrics {
+.stitch-footer .pager {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  padding: 4px;
+  border-radius: 10px;
+}
+
+.stitch-footer .pager-btn {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 4px;
+  color: #64748b;
+}
+
+.stitch-footer .pager-info {
+  font-size: 11px;
+  font-weight: 700;
+  color: #475569;
+  padding: 0 6px;
+}
+
+.packet-timeline {
+  position: relative;
+  height: 8px;
+  background: #e2e8f0;
+}
+
+.packet-heatmap {
+  height: 100%;
+  background: linear-gradient(to right, #10b981 0%, #10b981 15%, #ef4444 15%, #ef4444 17%, #10b981 17%, #10b981 45%, #ef4444 45%, #ef4444 46%, #10b981 46%, #10b981 80%, #f59e0b 80%, #f59e0b 82%, #10b981 82%, #10b981 100%);
+  opacity: 0.85;
+}
+
+.packet-window {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 20%;
+  width: 12%;
+  background: rgba(255, 255, 255, 0.4);
+  border-left: 1px solid rgba(255, 255, 255, 0.8);
+  border-right: 1px solid rgba(255, 255, 255, 0.8);
+}
+
+.packet-body {
   display: grid;
-  grid-template-columns: 1fr 1.4fr;
-  gap: 12px;
-  padding: 14px 20px;
-  border-top: 1px solid #f1f5f9;
-  border-bottom: 1px solid #f1f5f9;
+  grid-template-columns: minmax(0, 1fr) 520px;
+  background: #f8fafc;
+  height: calc(95vh - 64px - 8px);
+  min-height: 0;
 }
 
-.proxy-metrics p {
-  margin: 0 0 6px;
+.packet-body-tight {
+  border-top: 1px solid #e2e8f0;
+}
+
+.packet-table {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  border-right: 1px solid #e2e8f0;
+  background: #ffffff;
+  min-height: 0;
+}
+
+.packet-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 16px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+  font-size: 11px;
+  color: #64748b;
+}
+
+.packet-toolbar.secondary {
+  background: #ffffff;
+}
+
+.packet-toggle {
+  display: inline-flex;
+  background: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  padding: 2px;
+  gap: 4px;
+}
+
+.packet-toggle button {
+  border: none;
+  background: transparent;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 4px 10px;
+  border-radius: 999px;
+  color: #64748b;
+  cursor: pointer;
+}
+
+.packet-toggle button.active {
+  background: #0f172a;
+  color: #ffffff;
+}
+
+.packet-table-wrap {
+  flex: 1;
+  overflow: auto;
+}
+
+.packet-table table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.packet-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  background: #f8fafc;
+  text-transform: none;
+  letter-spacing: 0.02em;
   font-size: 11px;
-  color: #94a3b8;
+  color: #64748b;
+  border-bottom: 1px solid #e2e8f0;
+  padding: 10px 12px;
 }
 
-.proxy-metrics p.danger {
-  color: #ef4444;
+.packet-table tbody tr {
+  border-bottom: 1px solid #f1f5f9;
+  cursor: pointer;
 }
 
-.proxy-metrics strong {
-  font-size: 18px;
-  color: #0f172a;
+.packet-table tbody tr:hover {
+  background: #f1f5f9;
 }
 
-.proxy-metrics strong span {
-  font-size: 11px;
-  font-weight: 500;
-  color: #94a3b8;
-  margin-left: 4px;
+.packet-table tbody tr.active {
+  background: rgba(59, 130, 246, 0.08);
+  border-left: 2px solid #2563eb;
 }
 
-.proxy-metric-bandwidth {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  gap: 10px;
+.packet-table td {
+  padding: 10px 12px;
+  color: #475569;
 }
 
-.proxy-sparkline {
-  width: 90px;
-  height: 36px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: flex-end;
+.packet-table-clean tbody tr.warn {
+  background: #fff7ed;
 }
 
-.proxy-sparkline svg {
-  width: 100%;
-  height: 100%;
+.packet-table-clean tbody tr.warn:hover {
+  background: #ffedd5;
 }
 
-.proxy-sparkline path {
-  fill: none;
-  stroke-width: 2;
-  stroke: #2563eb;
+.dir-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 999px;
+  font-weight: 700;
+  font-size: 12px;
 }
 
-.proxy-sparkline.status-error path {
-  stroke: #ef4444;
+.dir-icon.rx {
+  background: #dcfce7;
+  color: #16a34a;
 }
 
-.proxy-sparkline.status-stopped path {
-  stroke: #94a3b8;
+.dir-icon.tx {
+  background: #dbeafe;
+  color: #2563eb;
 }
 
-.proxy-sparkline-empty {
-  width: 100%;
-  height: 4px;
+.proto-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
   border-radius: 999px;
-  background: #e2e8f0;
-  align-self: center;
+  font-size: 10px;
+  font-weight: 700;
+  border: 1px solid #dbeafe;
+  background: #eff6ff;
+  color: #2563eb;
 }
 
-.proxy-panel-footer {
+.proto-pill.red {
+  border-color: #fed7aa;
+  background: #fff7ed;
+  color: #ea580c;
+}
+
+.packet-footer {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  gap: 12px;
-  padding: 10px 20px 16px;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 14px;
+  border-top: 1px solid #e2e8f0;
   background: #f8fafc;
 }
 
-.proxy-panel-footer.status-error {
-  background: #fff1f2;
+.packet-footer-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 11px;
+  color: #64748b;
 }
 
-.proxy-footer-toggle {
+.packet-progress {
   display: inline-flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
 }
 
-.proxy-toggle-text {
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
-  color: #64748b;
+.packet-progress .progress-bar {
+  width: 160px;
+  height: 8px;
+  background: #e2e8f0;
+  border-radius: 999px;
+  overflow: hidden;
 }
 
-.proxy-panel-footer.status-error .proxy-toggle-text {
-  color: #ef4444;
+.packet-progress .progress-bar span {
+  display: block;
+  width: 85%;
+  height: 100%;
+  background: #f59e0b;
 }
 
-.proxy-footer-actions {
+.packet-footer-right {
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }
 
-.icon-btn.danger:hover {
-  color: #ef4444;
-  background: #fee2e2;
+.pager-btn {
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  border-radius: 8px;
+  padding: 4px 8px;
+  font-size: 11px;
+  color: #475569;
+  cursor: pointer;
 }
 
-.proxy-panel-add {
-  border: 2px dashed #cbd5f5;
-  background: transparent;
-  box-shadow: none;
+.pager-info {
+  font-size: 11px;
+  color: #475569;
+  padding: 0 6px;
+}
+
+.export-btn {
+  display: inline-flex;
   align-items: center;
-  justify-content: center;
-  gap: 16px;
-  min-height: 300px;
-  padding: 24px;
-  text-align: center;
+  gap: 6px;
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  border-radius: 10px;
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #475569;
   cursor: pointer;
 }
 
-.proxy-panel-add:hover {
-  border-color: #2563eb;
-  background: #f8fafc;
+.export-btn .material-symbols-outlined {
+  font-size: 16px;
 }
 
-.proxy-add-icon {
-  width: 56px;
-  height: 56px;
-  border-radius: 50%;
-  background: #f1f5f9;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.col-index {
+  width: 60px;
+  font-family: "JetBrains Mono", monospace;
   color: #94a3b8;
-  transition: all 0.2s ease;
 }
 
-.proxy-panel-add:hover .proxy-add-icon {
-  background: #2563eb;
-  color: #ffffff;
+.col-time {
+  width: 120px;
+  font-family: "JetBrains Mono", monospace;
+  color: #64748b;
 }
 
-.proxy-add-copy h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 700;
-  color: #0f172a;
+.col-dir {
+  width: 70px;
+  text-align: center;
 }
 
-.proxy-add-copy p {
-  margin: 6px 0 0;
-  font-size: 12px;
-  color: #94a3b8;
+.col-proto {
+  width: 120px;
+  font-weight: 600;
+  color: #2563eb;
 }
 
-.proxy-add-tags {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  justify-content: center;
+.col-key {
+  width: 160px;
+  font-weight: 600;
+  color: #0f172a;
 }
 
-.proxy-add-tags span {
-  padding: 4px 10px;
-  border-radius: 999px;
-  background: #f1f5f9;
-  font-size: 10px;
-  font-weight: 700;
+.col-len {
+  width: 80px;
+}
+
+.col-raw {
+  max-width: 220px;
+  font-family: "JetBrains Mono", monospace;
   color: #64748b;
 }
 
-.proxy-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
-    monospace;
+.col-summary {
+  font-style: italic;
+  color: #2563eb;
 }
 
-.proxy-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(15, 23, 42, 0.6);
-  display: flex;
+.dir-chip {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
-  z-index: 80;
-}
-
-body.proxy-edit-open {
-  overflow: hidden;
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 700;
 }
 
-body.proxy-edit-open .main > :not(.proxy-modal-overlay) {
-  pointer-events: none;
+.dir-chip.rx {
+  background: rgba(16, 185, 129, 0.1);
+  color: #10b981;
 }
 
-body.proxy-edit-open .proxy-modal-overlay {
-  pointer-events: auto;
+.dir-chip.tx {
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
 }
 
-.proxy-modal {
-  width: min(820px, 100%);
-  background: #ffffff;
-  border-radius: 28px;
-  border: 1px solid var(--border);
-  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
+.packet-side {
+  background: #f1f5f9;
+  padding: 16px;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  max-height: 90vh;
+  gap: 16px;
+  min-height: 0;
+  overflow: auto;
 }
 
-.proxy-modal-header {
+.packet-side-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  padding: 24px 32px;
-  border-bottom: 1px solid #eef2f7;
+  padding: 10px 12px;
   background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
 }
 
-.proxy-modal-title {
-  display: flex;
+.packet-side-title {
+  display: inline-flex;
   align-items: center;
-  gap: 12px;
-}
-
-.proxy-modal-title h2 {
-  margin: 0;
-  font-size: 18px;
+  gap: 6px;
+  font-size: 12px;
   font-weight: 700;
-  color: #0f172a;
+  color: #2563eb;
 }
 
-.proxy-modal-icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 14px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: #dbeafe;
-  color: #2563eb;
+.packet-side-header h3 {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #64748b;
 }
 
-.proxy-modal-close {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
+.packet-side-actions button {
   border: none;
   background: transparent;
   color: #94a3b8;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  cursor: pointer;
 }
 
-.proxy-modal-close:hover {
-  background: #f1f5f9;
+.packet-side-section {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 14px;
+  padding: 14px;
   color: #475569;
 }
 
-.proxy-modal-body {
-  padding: 32px;
-  overflow-y: auto;
-  max-height: 85vh;
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
+.packet-side-section h4 {
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  color: #0f172a;
 }
 
-.proxy-modal-note {
-  margin: 0;
-  font-size: 14px;
+.packet-side-section p {
+  font-size: 11px;
   color: #64748b;
 }
 
-.proxy-modal-stack {
+.packet-metrics {
+  display: grid;
+  gap: 10px;
+}
+
+.metric-card {
+  border: 1px solid #e2e8f0;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 10px 12px;
   display: flex;
   flex-direction: column;
-  gap: 28px;
-  align-items: stretch;
-  width: 100%;
+  gap: 6px;
+  font-size: 11px;
+  color: #64748b;
 }
 
-.proxy-modal-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 20px;
+.metric-card strong {
+  color: #16a34a;
+  font-size: 14px;
 }
 
-.proxy-field {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  font-size: 12px;
-  color: #334155;
+.packet-side-section.highlight {
+  background: #fff7ed;
+  border-color: #fed7aa;
+  text-align: center;
 }
 
-.proxy-field label {
-  font-weight: 600;
+.highlight-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 999px;
+  background: #ffedd5;
+  color: #f97316;
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  justify-content: center;
+  margin: 0 auto 8px;
 }
 
-.proxy-field input,
-.proxy-field select {
-  border: 1px solid #e2e8f0;
-  background: #f8fafc;
-  border-radius: 12px;
-  padding: 10px 12px;
-  font-size: 13px;
-  color: #0f172a;
-  width: 100%;
+.highlight-actions {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 12px;
 }
 
-.proxy-port-map {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 20px;
-  align-items: end;
-  padding: 20px;
-  border-radius: 18px;
-  border: 1px solid #dbe4ff;
-  background: #f5f8ff;
-  width: 100%;
+.highlight-actions .ghost {
+  background: #ffffff;
+  border: 1px solid #e2e8f0;
+  border-radius: 10px;
+  padding: 6px 10px;
+  font-size: 11px;
 }
 
-.proxy-section {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-bottom: 18px;
+.highlight-actions .primary {
+  background: #2563eb;
+  color: #ffffff;
+  border: none;
+  border-radius: 10px;
+  padding: 6px 10px;
+  font-size: 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
 
-.proxy-section-title {
+.section-header {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  gap: 8px;
-  font-weight: 700;
-  font-size: 13px;
-  color: #1f2937;
-  border-bottom: 1px solid #eef2f7;
-  padding-bottom: 8px;
+  margin-bottom: 10px;
 }
 
-.proxy-section-title span:last-child {
-  font-weight: 500;
-  font-size: 11px;
+.section-header h4 {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
   color: #94a3b8;
 }
 
-.proxy-section-title.muted {
-  color: #64748b;
-  border-bottom: none;
-  padding-bottom: 0;
+.section-header .badge {
+  font-size: 10px;
+  background: #e2e8f0;
+  color: #475569;
+  padding: 2px 6px;
+  border-radius: 6px;
 }
 
-.proxy-section-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 20px;
-  padding: 24px;
-  border-radius: 16px;
+.hex-dump {
+  display: flex;
   border: 1px solid #e2e8f0;
-  background: #f8fafc;
-  width: 100%;
+  border-radius: 10px;
+  overflow: hidden;
 }
 
-.proxy-span-2 {
-  grid-column: span 2;
+.hex-index {
+  width: 50px;
+  background: #f8fafc;
+  border-right: 1px solid #e2e8f0;
+  font-size: 10px;
+  color: #94a3b8;
+  text-align: right;
+  padding: 6px;
+  line-height: 18px;
 }
 
-.proxy-segmented {
+.hex-grid {
+  flex: 1;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
-  gap: 6px;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 4px;
   padding: 6px;
-  border-radius: 14px;
-  background: #e2e8f0;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 11px;
 }
 
-.proxy-segmented button {
-  border: none;
-  background: transparent;
-  padding: 8px 8px;
-  border-radius: 10px;
-  font-size: 12px;
-  font-weight: 700;
-  color: #64748b;
-  cursor: pointer;
+.hex-ascii {
+  width: 70px;
+  background: #f8fafc;
+  border-left: 1px solid #e2e8f0;
+  font-size: 10px;
+  color: #94a3b8;
+  padding: 6px;
+  line-height: 18px;
 }
 
-.proxy-segmented button.active {
-  background: #ffffff;
-  color: #2563eb;
-  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
+.hex-cell {
+  padding: 2px 4px;
+  border-radius: 6px;
+  text-align: center;
+  font-weight: 600;
 }
 
-.proxy-toggle-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 18px;
-  font-size: 13px;
-  color: #64748b;
+.hex-cell.primary {
+  background: #dbeafe;
+  color: #2563eb;
 }
 
-@media (max-width: 900px) {
-  .proxy-modal-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .proxy-port-map {
-    grid-template-columns: 1fr;
-  }
+.hex-cell.success {
+  background: #dcfce7;
+  color: #16a34a;
+}
 
-  .proxy-section-grid {
-    grid-template-columns: 1fr;
-  }
+.hex-cell.warn {
+  background: #fef3c7;
+  color: #d97706;
 }
 
-.proxy-modal-advanced {
-  border-top: 1px solid #eef2f7;
-  padding-top: 16px;
+.hex-cell.muted {
+  background: #f1f5f9;
+  color: #94a3b8;
 }
 
-.proxy-toggle-row label {
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: 600;
+.hex-cell.placeholder {
+  color: #cbd5f5;
 }
 
-.proxy-modal-footer {
+.packet-tree {
   display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 24px 32px 28px;
-  border-top: 1px solid #eef2f7;
-  background: #f8fafc;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 11px;
 }
 
-@media (min-width: 768px) {
-  .proxy-modal-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .proxy-port-map {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.tree-item {
+  padding: 6px 8px;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: #475569;
+}
 
-  .proxy-section-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+.tree-item.active {
+  background: rgba(59, 130, 246, 0.1);
+  border-left: 2px solid #2563eb;
+  color: #1d4ed8;
 }
 
-@media (min-width: 1024px) {
-  .proxy-section-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
+.tree-branch {
+  border-left: 1px solid #e2e8f0;
+  padding-left: 8px;
 }
 
-.proxy-modal-btn {
-  border-radius: 14px;
-  padding: 10px 18px;
-  font-size: 13px;
-  font-weight: 700;
-  border: 1px solid #e2e8f0;
-  background: #ffffff;
-  color: #64748b;
-  cursor: pointer;
-  transition: transform 0.16s ease, box-shadow 0.16s ease;
+.tree-detail {
+  display: grid;
+  gap: 6px;
+  margin-top: 8px;
 }
 
-.proxy-modal-btn.ghost:hover {
-  box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08);
-  transform: translateY(-1px);
+.tree-detail span {
+  color: #94a3b8;
+  font-size: 10px;
 }
 
-.proxy-modal-btn.primary {
-  border: none;
-  background: #2563eb;
-  color: #ffffff;
-  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.25);
+.tree-detail strong {
+  color: #0f172a;
+  font-weight: 600;
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..acda2c3
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,7 @@
+export default {
+  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"] ,
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

From 5fafd5d486ddbb9839e461f9990b0cede3d58842 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Fri, 23 Jan 2026 22:12:02 +0800
Subject: [PATCH 12/36] feat(ui): make capture modal data-driven with mocks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 抓包弹窗改为使用 mock 数据驱动展示
  - 动态渲染协议徽标、HEX/ASCII、协议树与统计信息
- 影响
  - 弹窗内容不再硬编码，后续可直接替换数据源
- 兼容/行为变更
  - 仅影响抓包弹窗内容展示逻辑
- 依赖/环境
  - 无
- 验证
  - 未运行（仅 UI 数据替换）

[English]
- Changes:
  - Drive the capture modal with mock data instead of hardcoded blocks
  - Render protocol badges, HEX/ASCII, protocol tree, and stats dynamically
- Impact:
  - Modal content is now data-driven and ready for backend replacement
- Compatibility/Behavior changes:
  - UI-only change for the capture modal
- Dependencies/Environment:
  - None
- Verification:
  - Not run (UI data swap only)
Refs:
-
---
 frontend/src/components/ProxyMonitorView.vue | 175 ++++++++++++++-----
 1 file changed, 134 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index c99c770..b31d4b5 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -105,10 +105,14 @@ const captureFrames = ref([
     size: 64,
     note: '01 03 00 00 00 02 C4 0B',
     summary: 'Read Hold Regs',
+    summaryText: '请求: 读取保持寄存器 0x0000',
     tone: 'green',
     warn: false,
     channel: 'COM5',
     baud: '115200',
+    protocolLabel: 'Modbus RTU',
+    protocolType: 'modbus',
+    protocolTooltip: 'Modbus RTU v1.1',
   },
   {
     id: 'frame-002',
@@ -117,10 +121,14 @@ const captureFrames = ref([
     size: 128,
     note: '01 03 04 01 F4 02 BC 9B 42',
     summary: 'Resp: 50.0 / 70.0',
+    summaryText: '响应: 寄存器 0=500.0, 1=700.0',
     tone: 'blue',
     warn: false,
     channel: 'COM3',
     baud: '115200',
+    protocolLabel: 'Modbus RTU',
+    protocolType: 'modbus',
+    protocolTooltip: 'Modbus RTU v1.1',
   },
   {
     id: 'frame-003',
@@ -129,10 +137,14 @@ const captureFrames = ref([
     size: 1,
     note: '01 83 02 FF FF',
     summary: 'EXCEPTION: ILLEGAL_ADDR',
+    summaryText: '异常: 非法寄存器地址',
     tone: 'red',
     warn: true,
     channel: 'COM5',
     baud: '115200',
+    protocolLabel: 'Unknown',
+    protocolType: 'unknown',
+    protocolTooltip: '未知协议 - 点击配置',
   },
   {
     id: 'frame-004',
@@ -141,13 +153,91 @@ const captureFrames = ref([
     size: 0,
     note: 'Waiting for next frame...',
     summary: '',
+    summaryText: '等待下一帧...',
     tone: 'amber',
     warn: false,
     channel: 'COM5',
     baud: '115200',
+    protocolLabel: 'Modbus RTU',
+    protocolType: 'modbus',
+    protocolTooltip: 'Modbus RTU v1.1',
   },
 ])
 
+const captureMeta = ref({
+  channel: 'Ethernet (TAP)',
+  engine: '通用动态解析 (Agnostic Engine)',
+  bufferUsed: 85,
+  rangeStart: 1,
+  rangeEnd: 50,
+  totalFrames: 50234,
+  page: 1,
+  pageCount: 1005,
+})
+
+const captureMetrics = ref({
+  rtt: '4.2 ms',
+  loss: '0.02 %',
+})
+
+const protocolTrees = {
+  modbus: [
+    { label: '报文标识 (Header)', raw: '01 03', value: '0x0103' },
+    { label: '数据长度 (Len)', raw: '08', value: '8 Bytes' },
+  ],
+  unknown: [
+    { label: '报文标识 (Header)', raw: 'FF EE', value: '65518' },
+    { label: '数据长度 (Len)', raw: '10', value: '16 Bytes' },
+  ],
+}
+
+const activeFrame = computed(() => selectedFrame.value || captureFrames.value[0] || null)
+
+const isUnknownFrame = computed(() => activeFrame.value?.protocolType === 'unknown')
+
+const activeProtocolLabel = computed(() => activeFrame.value?.protocolLabel || selectedProtocol.value)
+
+const activeProtocolTooltip = computed(() => activeFrame.value?.protocolTooltip || '未知协议')
+
+const activeSummaryText = computed(() => activeFrame.value?.summaryText || activeFrame.value?.summary || '')
+
+const activeHexBytes = computed(() => {
+  const raw = activeFrame.value?.note || ''
+  const parts = raw
+    .trim()
+    .split(/\s+/)
+    .filter((item) => item.length)
+  return parts.map((part) => part.toUpperCase())
+})
+
+const activeHexCells = computed(() => {
+  const bytes = activeHexBytes.value.slice(0, 16)
+  while (bytes.length < 16) bytes.push('--')
+  return bytes
+})
+
+const activeHexAscii = computed(() => {
+  const bytes = activeHexCells.value.map((cell) => {
+    if (cell === '--') return '.'
+    const code = parseInt(cell, 16)
+    if (!Number.isFinite(code)) return '.'
+    return code >= 32 && code <= 126 ? String.fromCharCode(code) : '.'
+  })
+  return [bytes.slice(0, 8).join(''), bytes.slice(8, 16).join('')]
+})
+
+const activeHexSize = computed(() => activeHexBytes.value.length || 0)
+
+const activeTreeRows = computed(() => (isUnknownFrame.value ? protocolTrees.unknown : protocolTrees.modbus))
+
+function hexCellClass(index, value) {
+  if (value === '--') return 'text-slate-300'
+  if (index < 2) return 'text-blue-500 bg-blue-50 rounded'
+  if (index === 3 || index === 4) return 'text-emerald-500 font-bold bg-emerald-50 rounded'
+  if (index === 5 || index === 6) return 'text-amber-500 font-bold bg-amber-50 rounded'
+  return 'text-slate-400'
+}
+
 const filteredFrames = computed(() => {
   if (captureFilter.value === 'all') return captureFrames.value
   if (captureFilter.value === 'error') {
@@ -448,7 +538,7 @@ onBeforeUnmount(() => {
               <div class="flex items-center gap-2 mt-1">
                 <span class="flex h-2 w-2 rounded-full bg-emerald-500"></span>
                 <p class="text-[10px] font-medium text-slate-500">
-                  活动通道: {{ captureProxy ? captureProxy.hostPort : 'Ethernet (TAP)' }} | 引擎状态: 通用动态解析 (Agnostic Engine)
+                  活动通道: {{ captureProxy ? captureProxy.hostPort : captureMeta.channel }} | 引擎状态: {{ captureMeta.engine }}
                 </p>
               </div>
             </div>
@@ -526,17 +616,17 @@ onBeforeUnmount(() => {
                           >
                             {{ frame.tone === 'red' ? '?' : 'M' }}
                           </span>
-                          <span>{{ frame.tone === 'red' ? 'Unknown' : selectedProtocol }}</span>
+                          <span>{{ frame.protocolLabel || (frame.tone === 'red' ? 'Unknown' : selectedProtocol) }}</span>
                         </div>
                         <div class="protocol-tooltip bg-slate-800 text-white text-[10px] px-2 py-1 rounded shadow-lg pointer-events-none whitespace-nowrap border border-slate-700">
-                          {{ frame.tone === 'red' ? '未知协议 - 点击配置' : 'Modbus RTU v1.1' }}
+                          {{ frame.protocolTooltip || (frame.tone === 'red' ? '未知协议 - 点击配置' : 'Modbus RTU v1.1') }}
                         </div>
                       </div>
                     </td>
                     <td class="px-3 py-2 text-slate-500">{{ frame.size }}B</td>
                     <td class="px-3 py-2 hex-font text-slate-400 truncate max-w-[240px]">{{ frame.note }}</td>
                     <td class="px-3 py-2 text-slate-600 italic">
-                      {{ frame.summary || 'HEX: ' + frame.note + ' | ASCII: ....' }}
+                      {{ frame.summaryText || frame.summary || ('HEX: ' + frame.note + ' | ASCII: ....') }}
                     </td>
                   </tr>
                 </tbody>
@@ -564,47 +654,49 @@ onBeforeUnmount(() => {
                   <span class="material-symbols-outlined !text-3xl">question_mark</span>
                 </div>
                 <div>
-                  <h3 class="text-sm font-bold text-slate-800">未知协议报文 (Unknown Protocol)</h3>
+                  <h3 class="text-sm font-bold text-slate-800">
+                    {{ isUnknownFrame ? '未知协议报文 (Unknown Protocol)' : `${activeProtocolLabel} 报文` }}
+                  </h3>
                   <p class="text-[11px] text-slate-500 mt-1 max-w-[280px] mx-auto leading-relaxed">
-                    系统未能自动匹配已知的解析插件。您可以尝试手动配置解析规则，或使用万能解析脚本。
+                    {{
+                      isUnknownFrame
+                        ? '系统未能自动匹配已知的解析插件。您可以尝试手动配置解析规则，或使用万能解析脚本。'
+                        : '已匹配协议解析插件，当前展示该报文的解析详情。'
+                    }}
                   </p>
                 </div>
                 <div class="flex justify-center gap-3">
-                  <button class="px-3 py-1.5 bg-white border border-slate-300 rounded text-[11px] font-bold hover:bg-slate-50 transition-colors shadow-sm">手动解析</button>
+                  <button class="px-3 py-1.5 bg-white border border-slate-300 rounded text-[11px] font-bold hover:bg-slate-50 transition-colors shadow-sm">
+                    {{ isUnknownFrame ? '手动解析' : '查看详情' }}
+                  </button>
                   <button class="px-3 py-1.5 bg-blue-600 text-white rounded text-[11px] font-bold hover:bg-blue-700 transition-colors flex items-center gap-1 shadow-md">
-                    <span class="material-symbols-outlined !text-xs">schema</span> 配置解析规则
+                    <span class="material-symbols-outlined !text-xs">schema</span>
+                    {{ isUnknownFrame ? '配置解析规则' : '调整解析规则' }}
                   </button>
                 </div>
               </div>
               <div class="p-4 border-b border-slate-200">
                 <div class="flex items-center justify-between mb-3">
                   <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">原始十六进制 (RAW HEX)</h3>
-                  <span class="text-[10px] font-mono bg-slate-200 px-1.5 py-0.5 rounded text-slate-600">16 字节</span>
+                  <span class="text-[10px] font-mono bg-slate-200 px-1.5 py-0.5 rounded text-slate-600">
+                    {{ activeHexSize }} 字节
+                  </span>
                 </div>
                 <div class="bg-white border border-slate-200 rounded-lg overflow-hidden flex shadow-inner">
                   <div class="bg-slate-50 border-r border-slate-200 p-2 text-[10px] font-mono text-slate-400 leading-6 text-right w-12 shrink-0">
                     0000<br />0008
                   </div>
                   <div class="flex-1 p-2 hex-font text-xs leading-6 grid grid-cols-8 gap-x-1 text-center font-medium">
-                    <span class="text-blue-500 bg-blue-50 rounded">FF</span>
-                    <span class="text-blue-500 bg-blue-50 rounded">EE</span>
-                    <span class="text-slate-400">DD</span>
-                    <span class="text-emerald-500 font-bold bg-emerald-50 rounded">CC</span>
-                    <span class="text-emerald-500 font-bold bg-emerald-50 rounded">00</span>
-                    <span class="text-amber-500 font-bold bg-amber-50 rounded">11</span>
-                    <span class="text-amber-500 font-bold bg-amber-50 rounded">22</span>
-                    <span class="text-slate-400">33</span>
-                    <span class="text-slate-400">44</span>
-                    <span class="text-slate-400">55</span>
-                    <span class="text-slate-400">66</span>
-                    <span class="text-slate-400">77</span>
-                    <span class="text-slate-400">88</span>
-                    <span class="text-slate-400">99</span>
-                    <span class="text-slate-400">AA</span>
-                    <span class="text-slate-400">BB</span>
+                    <span
+                      v-for="(cell, cellIndex) in activeHexCells"
+                      :key="`hex-${cellIndex}`"
+                      :class="hexCellClass(cellIndex, cell)"
+                    >
+                      {{ cell }}
+                    </span>
                   </div>
                   <div class="border-l border-slate-200 p-2 text-[10px] font-mono text-slate-500 leading-6 tracking-tight w-24 shrink-0 bg-slate-50/50">
-                    ........<br />........
+                    {{ activeHexAscii[0] }}<br />{{ activeHexAscii[1] }}
                   </div>
                 </div>
               </div>
@@ -627,15 +719,14 @@ onBeforeUnmount(() => {
                           <div class="col-span-4">字段</div>
                           <div class="col-span-5 text-right">解析值</div>
                         </div>
-                        <div class="grid grid-cols-12 items-center py-1.5 px-2 rounded hover:bg-blue-50 cursor-default transition-colors border-l-2 border-transparent hover:border-blue-500">
-                          <div class="col-span-3 font-mono text-[11px] text-blue-600">FF EE</div>
-                          <div class="col-span-4 text-[11px] text-slate-500">报文标识 (Header)</div>
-                          <div class="col-span-5 text-[11px] text-right font-bold text-slate-700">65518</div>
-                        </div>
-                        <div class="grid grid-cols-12 items-center py-1.5 px-2 rounded hover:bg-blue-50 cursor-default transition-colors border-l-2 border-transparent hover:border-blue-500">
-                          <div class="col-span-3 font-mono text-[11px] text-blue-600">10</div>
-                          <div class="col-span-4 text-[11px] text-slate-500">数据长度 (Len)</div>
-                          <div class="col-span-5 text-[11px] text-right font-bold text-primary">16 Bytes</div>
+                        <div
+                          v-for="(row, rowIndex) in activeTreeRows"
+                          :key="`tree-${rowIndex}`"
+                          class="grid grid-cols-12 items-center py-1.5 px-2 rounded hover:bg-blue-50 cursor-default transition-colors border-l-2 border-transparent hover:border-blue-500"
+                        >
+                          <div class="col-span-3 font-mono text-[11px] text-blue-600">{{ row.raw }}</div>
+                          <div class="col-span-4 text-[11px] text-slate-500">{{ row.label }}</div>
+                          <div class="col-span-5 text-[11px] text-right font-bold text-slate-700">{{ row.value }}</div>
                         </div>
                       </div>
                     </details>
@@ -648,11 +739,11 @@ onBeforeUnmount(() => {
               <div class="grid grid-cols-2 gap-4">
                 <div class="bg-white p-2 rounded border border-slate-200 shadow-sm">
                   <p class="text-[9px] text-slate-500">往返延时 (RTT)</p>
-                  <p class="text-sm font-bold text-emerald-500">4.2 ms</p>
+                  <p class="text-sm font-bold text-emerald-500">{{ captureMetrics.rtt }}</p>
                 </div>
                 <div class="bg-white p-2 rounded border border-slate-200 shadow-sm">
                   <p class="text-[9px] text-slate-500">丢包率 (Packet Loss)</p>
-                  <p class="text-sm font-bold text-slate-900">0.02 %</p>
+                  <p class="text-sm font-bold text-slate-900">{{ captureMetrics.loss }}</p>
                 </div>
               </div>
             </div>
@@ -663,12 +754,14 @@ onBeforeUnmount(() => {
             <div class="flex items-center gap-2">
               <span class="text-[10px] font-bold text-slate-500 uppercase">接收缓冲区</span>
               <div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden border border-slate-300">
-                <div class="h-full bg-amber-500 w-[85%]"></div>
+                <div class="h-full bg-amber-500" :style="{ width: `${captureMeta.bufferUsed}%` }"></div>
               </div>
-              <span class="text-[10px] font-mono font-bold text-slate-600">85%</span>
+              <span class="text-[10px] font-mono font-bold text-slate-600">{{ captureMeta.bufferUsed }}%</span>
             </div>
             <div class="h-4 w-[1px] bg-slate-300"></div>
-            <p class="text-[10px] font-medium text-slate-500 uppercase">显示 1-50 / 共 50,234 报文</p>
+            <p class="text-[10px] font-medium text-slate-500 uppercase">
+              显示 {{ captureMeta.rangeStart }}-{{ captureMeta.rangeEnd }} / 共 {{ captureMeta.totalFrames }} 报文
+            </p>
           </div>
           <div class="flex items-center gap-4">
             <div class="flex items-center gap-1 bg-white p-0.5 rounded border border-slate-200">
@@ -678,7 +771,7 @@ onBeforeUnmount(() => {
               <button class="p-1 hover:bg-slate-100 rounded">
                 <span class="material-symbols-outlined !text-sm">chevron_left</span>
               </button>
-              <div class="px-3 text-[10px] font-bold text-slate-700">第 1 / 1005 页</div>
+              <div class="px-3 text-[10px] font-bold text-slate-700">第 {{ captureMeta.page }} / {{ captureMeta.pageCount }} 页</div>
               <button class="p-1 hover:bg-slate-100 rounded">
                 <span class="material-symbols-outlined !text-sm">chevron_right</span>
               </button>

From a3ba4f0f08dd95278fface8066d536ce273060fd Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Fri, 23 Jan 2026 23:21:45 +0800
Subject: [PATCH 13/36] feat(runtime): add streaming packet analysis engine
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 新增后端报文解析引擎并订阅 RX/TX 流
  - 推送结构化抓包事件到 Web Bridge
  - 前端监听 capture 事件用于联调
- 影响
  - 抓包解析由后端流式驱动
- 兼容/行为变更
  - 新增 capture.frame 事件类型
- 依赖/环境
  - 无
- 验证
  - 未运行（事件联调变更）

[English]
- Changes:
  - Add streaming packet analysis engine for RX/TX
  - Emit structured capture events through the web bridge
  - Listen for capture events in the frontend for diagnostics
- Impact:
  - Capture parsing is now backend-driven
- Compatibility/Behavior changes:
  - Introduce capture.frame event type
- Dependencies/Environment:
  - None
- Verification:
  - Not run (event wiring change)
Refs:
-
---
 core/packet_engine.py | 156 ++++++++++++++++++++++++++++++++++++++++++
 desktop/web_bridge.py |   5 ++
 frontend/src/App.vue  |   6 ++
 main_web.py           |   2 +
 4 files changed, 169 insertions(+)
 create mode 100644 core/packet_engine.py

diff --git a/core/packet_engine.py b/core/packet_engine.py
new file mode 100644
index 0000000..3783819
--- /dev/null
+++ b/core/packet_engine.py
@@ -0,0 +1,156 @@
+"""Packet analysis engine for streaming capture frames.
+
+Subscribes to comm.rx/comm.tx and publishes structured frame data to the bus.
+"""
+
+from __future__ import annotations
+
+import queue
+import threading
+import time
+from dataclasses import dataclass
+from typing import Any, Dict, Iterable, List, Optional, Tuple
+
+from core.event_bus import EventBus
+from core.protocol_loader import crc16_modbus
+
+
+@dataclass
+class _ChannelInfo:
+    channel: str = ""
+    port: Optional[str] = None
+    baud: Optional[int] = None
+    host: Optional[str] = None
+    address: Optional[str] = None
+
+
+class PacketAnalysisEngine:
+    """Streaming packet parser that emits capture.frame events."""
+
+    def __init__(self, bus: EventBus) -> None:
+        self._bus = bus
+        self._queue: "queue.Queue[Tuple[str, bytes, float]]" = queue.Queue()
+        self._channel = _ChannelInfo()
+        self._counter = 0
+        self._stop = threading.Event()
+        self._worker = threading.Thread(target=self._run, daemon=True)
+        self._worker.start()
+        self._bus.subscribe("comm.rx", self._on_rx)
+        self._bus.subscribe("comm.tx", self._on_tx)
+        self._bus.subscribe("comm.connected", self._on_connected)
+        self._bus.subscribe("comm.disconnected", self._on_disconnected)
+
+    def _on_rx(self, payload: Any) -> None:
+        data = self._to_bytes(payload)
+        if data:
+            self._queue.put(("RX", data, time.time()))
+
+    def _on_tx(self, payload: Any) -> None:
+        data = self._to_bytes(payload)
+        if data:
+            self._queue.put(("TX", data, time.time()))
+
+    def _on_connected(self, payload: Any) -> None:
+        if isinstance(payload, dict):
+            self._channel.port = payload.get("port")
+            self._channel.baud = payload.get("baud")
+            self._channel.host = payload.get("host")
+            self._channel.address = payload.get("address")
+            if payload.get("type") == "serial" and self._channel.port:
+                self._channel.channel = str(self._channel.port)
+            elif payload.get("type") == "tcp-client":
+                self._channel.channel = f"{self._channel.host}:{self._channel.address}" if self._channel.host else ""
+
+    def _on_disconnected(self, payload: Any) -> None:
+        self._channel = _ChannelInfo()
+
+    def _run(self) -> None:
+        while not self._stop.is_set():
+            try:
+                direction, data, ts = self._queue.get(timeout=0.2)
+            except queue.Empty:
+                continue
+            frame = self._build_frame(direction, data, ts)
+            self._bus.publish("capture.frame", frame)
+            self._queue.task_done()
+
+    def _build_frame(self, direction: str, data: bytes, ts: float) -> Dict[str, Any]:
+        self._counter += 1
+        hex_bytes = [f"{b:02X}" for b in data]
+        ascii_str = "".join(chr(b) if 32 <= b <= 126 else "." for b in data)
+        ascii_lines = self._split_ascii(ascii_str, 8)
+        protocol_name, protocol_unknown, summary, tree_rows, errors = self._parse_protocol(data)
+        channel = self._channel.channel or ""
+        frame_id = f"{direction.lower()}-{int(ts * 1000)}-{self._counter}"
+        return {
+            "id": frame_id,
+            "timestamp": ts,
+            "direction": direction,
+            "channel": channel,
+            "baud": self._channel.baud,
+            "length": len(data),
+            "raw_hex": " ".join(hex_bytes),
+            "ascii": ascii_str,
+            "protocol": {
+                "name": protocol_name,
+                "unknown": protocol_unknown,
+                "confidence": 0.9 if not protocol_unknown else 0.2,
+            },
+            "summary": summary,
+            "hex_dump": {
+                "bytes": hex_bytes,
+                "ascii_lines": ascii_lines,
+                "size": len(data),
+            },
+            "tree": tree_rows,
+            "errors": errors,
+        }
+
+    def _parse_protocol(
+        self, data: bytes
+    ) -> Tuple[str, bool, str, List[Dict[str, str]], List[Dict[str, str]]]:
+        if len(data) < 2:
+            return "Unknown", True, "Too short", [], []
+
+        addr = data[0]
+        func = data[1]
+        summary = f"addr=0x{addr:02X} func=0x{func:02X} len={len(data)}"
+        tree = [
+            {"label": "Address", "raw": f"{addr:02X}", "value": str(addr)},
+            {"label": "Function", "raw": f"{func:02X}", "value": f"0x{func:02X}"},
+        ]
+
+        if len(data) >= 4:
+            crc_ok = self._check_modbus_crc(data)
+            tree.append(
+                {
+                    "label": "CRC16",
+                    "raw": " ".join(f"{b:02X}" for b in data[-2:]),
+                    "value": "valid" if crc_ok else "invalid",
+                }
+            )
+            if crc_ok:
+                return "Modbus RTU", False, summary, tree, []
+
+        errors = [{"code": "UNKNOWN_PROTOCOL", "message": "No known signature"}]
+        return "Unknown", True, summary, tree, errors
+
+    @staticmethod
+    def _check_modbus_crc(data: bytes) -> bool:
+        if len(data) < 3:
+            return False
+        body = data[:-2]
+        expected = int.from_bytes(data[-2:], "little")
+        return crc16_modbus(body) == expected
+
+    @staticmethod
+    def _split_ascii(text: str, width: int) -> List[str]:
+        return [text[i : i + width] for i in range(0, len(text), width)] or [""]
+
+    @staticmethod
+    def _to_bytes(payload: Any) -> bytes:
+        if isinstance(payload, (bytes, bytearray)):
+            return bytes(payload)
+        if isinstance(payload, str):
+            return payload.encode(errors="ignore")
+        return b""
diff --git a/desktop/web_bridge.py b/desktop/web_bridge.py
index 798451e..eece8a9 100644
--- a/desktop/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -31,6 +31,7 @@ class WebBridge(QObject):
     comm_tx = Signal(str)
     comm_status = Signal(object)
     protocol_frame = Signal(object)
+    capture_frame = Signal(object)
     comm_batch = Signal(str)
     script_log = Signal(str)
     script_state = Signal(str)
@@ -76,6 +77,7 @@ def __init__(self, bus=None, comm=None, window=None) -> None:
             self._bus.subscribe("comm.disconnected", self._on_comm_status)
             self._bus.subscribe("comm.error", self._on_comm_status)
             self._bus.subscribe("protocol.frame", self._on_protocol_frame)
+            self._bus.subscribe("capture.frame", self._on_capture_frame)
 
     @Slot(str, result=str)
     def ping(self, message: str) -> str:
@@ -449,6 +451,9 @@ def _on_comm_status(self, payload: Any) -> None:
     def _on_protocol_frame(self, payload: Any) -> None:
         self._append_buffer({"kind": "FRAME", "payload": payload, "ts": time.time()})
 
+    def _on_capture_frame(self, payload: Any) -> None:
+        self._append_buffer({"kind": "CAPTURE", "payload": payload, "ts": time.time()})
+
     def _load_protocols(self) -> None:
         if self._protocols_loaded:
             return
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a06123a..e1cd8c8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1197,6 +1197,12 @@ function attachBridge(obj) {
       addCommLog('FRAME', { text: JSON.stringify(payload), ts })
     })
   }
+  if (obj.capture_frame) {
+    obj.capture_frame.connect((payload) => {
+      const ts = payload && payload.ts ? payload.ts : Date.now() / 1000
+      addCommLog('CAPTURE', { text: JSON.stringify(payload), ts })
+    })
+  }
   obj.comm_status.connect((payload) => {
     const detail = payload && payload.payload !== undefined ? payload.payload : payload
     const ts = payload && payload.ts ? payload.ts : Date.now() / 1000
diff --git a/main_web.py b/main_web.py
index 319dbe0..626c6b1 100644
--- a/main_web.py
+++ b/main_web.py
@@ -19,6 +19,7 @@
 
 from core.communication_manager import CommunicationManager
 from core.event_bus import EventBus
+from core.packet_engine import PacketAnalysisEngine
 from core.plugin_manager import PluginManager
 from core.protocol_loader import ProtocolLoader
 from desktop.web_window import WebWindow
@@ -170,6 +171,7 @@ def main() -> None:
     bus = EventBus()
     comm = CommunicationManager(bus)
     protocol = ProtocolLoader(bus)
+    packet_engine = PacketAnalysisEngine(bus)
     plugins = PluginManager(bus, protocol=protocol)
     plugins.load_all()
 

From e599783ff135b6037e2c43e84afb40fc572ff1cd Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Fri, 23 Jan 2026 23:32:51 +0800
Subject: [PATCH 14/36] feat(ui): wire capture stream into proxy monitor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 前端接收 capture.frame 并转换为抓包视图数据
  - 代理监控弹窗改为使用后端流式数据
  - WebBridge 直接推送 capture_frame 信号
- 影响
  - 抓包弹窗内容由后端驱动
- 兼容/行为变更
  - 无
- 依赖/环境
  - 无
- 验证
  - 未运行（事件联调变更）

[English]
- Changes:
  - Consume capture.frame and map it into the proxy monitor UI
  - Drive the capture modal with backend stream data
  - Emit capture_frame directly from the bridge
- Impact:
  - Capture modal content is now backend-driven
- Compatibility/Behavior changes:
  - None
- Dependencies/Environment:
  - None
- Verification:
  - Not run (event wiring change)
Refs:
-
---
 desktop/web_bridge.py                        | 10 +++
 frontend/src/App.vue                         | 79 +++++++++++++++++++-
 frontend/src/components/ProxyMonitorView.vue | 55 ++++++++++++--
 3 files changed, 138 insertions(+), 6 deletions(-)

diff --git a/desktop/web_bridge.py b/desktop/web_bridge.py
index eece8a9..67e62d1 100644
--- a/desktop/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -369,6 +369,10 @@ def _emit_comm_rx_signal(self, payload: str) -> None:
     def _emit_comm_tx_signal(self, payload: str) -> None:
         self.comm_tx.emit(payload)
 
+    @Slot("QVariant")
+    def _emit_capture_frame_signal(self, payload: Any) -> None:
+        self.capture_frame.emit(payload)
+
     def _on_comm_rx(self, payload: Any) -> None:
         if isinstance(payload, (bytes, bytearray)):
             self._traffic["rx"] += len(payload)
@@ -453,6 +457,12 @@ def _on_protocol_frame(self, payload: Any) -> None:
 
     def _on_capture_frame(self, payload: Any) -> None:
         self._append_buffer({"kind": "CAPTURE", "payload": payload, "ts": time.time()})
+        QMetaObject.invokeMethod(
+            self,
+            "_emit_capture_frame_signal",
+            Qt.QueuedConnection,
+            Q_ARG(object, payload),
+        )
 
     def _load_protocols(self) -> None:
         if self._protocols_loaded:
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index e1cd8c8..dd37f6e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -37,6 +37,19 @@ let commLogSeq = 0
 let scriptLogSeq = 0
 let lastStatusText = ''
 let hasStatusActivity = false
+const captureFrames = ref([])
+const captureMeta = ref({
+  channel: '',
+  engine: '通用动态解析 (Agnostic Engine)',
+  bufferUsed: 0,
+  rangeStart: 0,
+  rangeEnd: 0,
+  totalFrames: 0,
+  page: 1,
+  pageCount: 1,
+})
+const captureMetrics = ref({ rtt: '--', loss: '--' })
+const MAX_CAPTURE_FRAMES = 200
 const scriptState = ref('idle')
 const scriptProgress = ref(0)
 const yamlText = ref('# paste DSL YAML here')
@@ -541,6 +554,64 @@ function scheduleLogFlush() {
   })
 }
 
+function formatCaptureTime(ts) {
+  const date = new Date((ts || 0) * 1000)
+  const pad = (value, length = 2) => String(value).padStart(length, '0')
+  return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}.${pad(
+    date.getMilliseconds(),
+    3
+  )}`
+}
+
+function mapCaptureFrame(payload) {
+  if (!payload || typeof payload !== 'object') return null
+  const protocol = payload.protocol || {}
+  const unknown = Boolean(protocol.unknown)
+  const direction = payload.direction || 'RX'
+  const tone = unknown ? 'red' : direction === 'TX' ? 'blue' : 'green'
+  return {
+    id: payload.id || `cap-${Date.now()}`,
+    direction,
+    time: formatCaptureTime(payload.timestamp || Date.now() / 1000),
+    size: payload.length || 0,
+    note: payload.raw_hex || '',
+    summary: payload.summary || '',
+    summaryText: payload.summary || '',
+    tone,
+    warn: unknown,
+    channel: payload.channel || '',
+    baud: payload.baud || '',
+    protocolLabel: protocol.name || (unknown ? 'Unknown' : 'Protocol'),
+    protocolType: unknown
+      ? 'unknown'
+      : (protocol.name || '').toLowerCase().includes('modbus')
+        ? 'modbus'
+        : 'custom',
+    protocolTooltip: protocol.name ? `${protocol.name}${protocol.version ? ` ${protocol.version}` : ''}` : '未知协议',
+    hexDump: payload.hex_dump || null,
+    tree: payload.tree || [],
+  }
+}
+
+function ingestCaptureFrame(payload) {
+  const frame = mapCaptureFrame(payload)
+  if (!frame) return
+  captureFrames.value.push(frame)
+  if (captureFrames.value.length > MAX_CAPTURE_FRAMES) {
+    captureFrames.value.splice(0, captureFrames.value.length - MAX_CAPTURE_FRAMES)
+  }
+  captureMeta.value.totalFrames += 1
+  captureMeta.value.rangeEnd = captureMeta.value.totalFrames
+  captureMeta.value.rangeStart = Math.max(1, captureMeta.value.totalFrames - captureFrames.value.length + 1)
+  captureMeta.value.bufferUsed = Math.min(
+    100,
+    Math.round((captureFrames.value.length / MAX_CAPTURE_FRAMES) * 100)
+  )
+  if (payload && payload.channel) {
+    captureMeta.value.channel = payload.channel
+  }
+}
+
 function flushLogs() {
   if (commLogBuffer.length) {
     const batch = commLogBuffer.splice(0, commLogBuffer.length)
@@ -1201,6 +1272,7 @@ function attachBridge(obj) {
     obj.capture_frame.connect((payload) => {
       const ts = payload && payload.ts ? payload.ts : Date.now() / 1000
       addCommLog('CAPTURE', { text: JSON.stringify(payload), ts })
+      ingestCaptureFrame(payload)
     })
   }
   obj.comm_status.connect((payload) => {
@@ -1770,7 +1842,12 @@ function unlockSidebarWidth() {
       <main class="main">
         <ManualView v-if="currentView === 'manual'" />
         <ScriptsView v-else-if="currentView === 'scripts'" />
-        <ProxyMonitorView v-else-if="currentView === 'proxy'" />
+        <ProxyMonitorView
+          v-else-if="currentView === 'proxy'"
+          :capture-frames="captureFrames"
+          :capture-meta="captureMeta"
+          :capture-metrics="captureMetrics"
+        />
 
         <section v-else-if="currentView === 'protocols'" class="page">
           <header class="page-header spaced">
diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index b31d4b5..5fa91e0 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -97,7 +97,22 @@ const filteredProxies = computed(() => {
   return proxies.value.filter((proxy) => proxy.status === activeFilter.value)
 })
 
-const captureFrames = ref([
+const props = defineProps({
+  captureFrames: {
+    type: Array,
+    default: () => [],
+  },
+  captureMeta: {
+    type: Object,
+    default: () => ({}),
+  },
+  captureMetrics: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const localCaptureFrames = ref([
   {
     id: 'frame-001',
     direction: 'RX',
@@ -164,7 +179,7 @@ const captureFrames = ref([
   },
 ])
 
-const captureMeta = ref({
+const localCaptureMeta = ref({
   channel: 'Ethernet (TAP)',
   engine: '通用动态解析 (Agnostic Engine)',
   bufferUsed: 85,
@@ -175,7 +190,7 @@ const captureMeta = ref({
   pageCount: 1005,
 })
 
-const captureMetrics = ref({
+const localCaptureMetrics = ref({
   rtt: '4.2 ms',
   loss: '0.02 %',
 })
@@ -191,6 +206,18 @@ const protocolTrees = {
   ],
 }
 
+const captureFrames = computed(() =>
+  props.captureFrames && props.captureFrames.length ? props.captureFrames : localCaptureFrames.value
+)
+
+const captureMeta = computed(() =>
+  props.captureMeta && Object.keys(props.captureMeta).length ? props.captureMeta : localCaptureMeta.value
+)
+
+const captureMetrics = computed(() =>
+  props.captureMetrics && Object.keys(props.captureMetrics).length ? props.captureMetrics : localCaptureMetrics.value
+)
+
 const activeFrame = computed(() => selectedFrame.value || captureFrames.value[0] || null)
 
 const isUnknownFrame = computed(() => activeFrame.value?.protocolType === 'unknown')
@@ -202,6 +229,10 @@ const activeProtocolTooltip = computed(() => activeFrame.value?.protocolTooltip
 const activeSummaryText = computed(() => activeFrame.value?.summaryText || activeFrame.value?.summary || '')
 
 const activeHexBytes = computed(() => {
+  const hexDump = activeFrame.value?.hexDump
+  if (hexDump && Array.isArray(hexDump.bytes) && hexDump.bytes.length) {
+    return hexDump.bytes.map((part) => String(part || '').toUpperCase())
+  }
   const raw = activeFrame.value?.note || ''
   const parts = raw
     .trim()
@@ -226,9 +257,23 @@ const activeHexAscii = computed(() => {
   return [bytes.slice(0, 8).join(''), bytes.slice(8, 16).join('')]
 })
 
-const activeHexSize = computed(() => activeHexBytes.value.length || 0)
+const activeHexSize = computed(() => {
+  const hexDump = activeFrame.value?.hexDump
+  if (hexDump && typeof hexDump.size === 'number') return hexDump.size
+  return activeHexBytes.value.length || 0
+})
 
-const activeTreeRows = computed(() => (isUnknownFrame.value ? protocolTrees.unknown : protocolTrees.modbus))
+const activeTreeRows = computed(() => {
+  const rows = activeFrame.value?.tree
+  if (Array.isArray(rows) && rows.length) {
+    return rows.map((row) => ({
+      label: row.label || row.name || '字段',
+      raw: row.raw || row.raw_hex || '--',
+      value: row.value || row.display || '--',
+    }))
+  }
+  return isUnknownFrame.value ? protocolTrees.unknown : protocolTrees.modbus
+})
 
 function hexCellClass(index, value) {
   if (value === '--') return 'text-slate-300'

From 298feca3c9076c7a0c40d445e97bfd00377e7069 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Fri, 23 Jan 2026 23:45:01 +0800
Subject: [PATCH 15/36] feat(ui): replace proxy monitor placeholders with
 actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 刷新转发对列表
  - 新建/编辑转发对并保存
  - 删除前二次确认并停止
  - 运行状态开关即时更新
- 影响
  - 代理监控交互由占位变为可用逻辑
- 兼容/行为变更
  - 仅前端行为变更
- 依赖/环境
  - 无
- 验证
  - 未运行（前端交互变更）

[English]
- Changes:
  - Refresh relay pairs list
  - Create/edit relay pairs and save
  - Confirm before delete and stop relay
  - Toggle running status immediately
- Impact:
  - Proxy monitor interactions are now functional
- Compatibility/Behavior changes:
  - Frontend-only behavior changes
- Dependencies/Environment:
  - None
- Verification:
  - Not run (UI interaction change)
Refs:
-
---
 frontend/src/components/ProxyMonitorView.vue | 116 ++++++++++++++++++-
 1 file changed, 111 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index 5fa91e0..02b98f0 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -11,6 +11,7 @@ const filterTabs = [
 const activeFilter = ref(filterTabs[0].id)
 const modalOpen = ref(false)
 const modalProxy = ref(null)
+const modalMode = ref('edit')
 const captureOpen = ref(false)
 const captureProxy = ref(null)
 const captureFilter = ref('all')
@@ -92,6 +93,20 @@ const proxies = ref([
   },
 ])
 
+let proxySeq = 1000
+
+function buildProxyMeta(host, baud) {
+  return `ID: PX-${proxySeq} · ${baud ? String(baud) : '8'}-N-1`
+}
+
+function normalizeProxy(proxy, updates = {}) {
+  const next = { ...proxy, ...updates }
+  if (!next.meta) {
+    next.meta = buildProxyMeta(next.hostPort, next.baud)
+  }
+  return next
+}
+
 const filteredProxies = computed(() => {
   if (activeFilter.value === 'all') return proxies.value
   return proxies.value.filter((proxy) => proxy.status === activeFilter.value)
@@ -292,6 +307,7 @@ const filteredFrames = computed(() => {
 })
 
 function openEditModal(proxy) {
+  modalMode.value = 'edit'
   modalProxy.value = proxy
   proxyName.value = proxy && proxy.name ? proxy.name : ''
   hostPort.value = proxy && proxy.hostPort ? proxy.hostPort : hostPort.value
@@ -300,6 +316,16 @@ function openEditModal(proxy) {
   modalOpen.value = true
 }
 
+function openCreateModal() {
+  modalMode.value = 'create'
+  modalProxy.value = null
+  proxyName.value = ''
+  hostPort.value = portOptions[0] || 'COM1'
+  devicePort.value = portOptions[1] || 'COM2'
+  baudRate.value = baudOptions[5] || '115200'
+  modalOpen.value = true
+}
+
 function openCaptureModal(proxy) {
   captureProxy.value = proxy
   captureFilter.value = 'all'
@@ -319,6 +345,79 @@ function selectFrame(frame) {
   selectedFrame.value = frame
 }
 
+function refreshProxies() {
+  proxies.value = proxies.value.map((proxy) => ({ ...proxy }))
+}
+
+function setProxyStatus(proxy, active) {
+  const nextStatus = active ? 'running' : 'stopped'
+  const statusLabel = active ? '运行中' : '已停止'
+  const routeLabel = active ? '转发中' : '离线'
+  const routeTone = active ? 'primary' : 'muted'
+  const statusIcon = active ? 'swap_horizontal_circle' : 'pause_circle'
+  const routeIcon = active ? 'keyboard_double_arrow_right' : 'more_horiz'
+  proxy.status = nextStatus
+  proxy.statusLabel = statusLabel
+  proxy.toggleLabel = statusLabel
+  proxy.routeLabel = routeLabel
+  proxy.routeTone = routeTone
+  proxy.statusIcon = statusIcon
+  proxy.routeIcon = routeIcon
+  proxy.active = active
+}
+
+function saveProxy() {
+  const payload = {
+    name: proxyName.value || '未命名转发对',
+    hostPort: hostPort.value,
+    devicePort: devicePort.value,
+    baud: baudRate.value,
+  }
+
+  if (modalMode.value === 'create') {
+    proxySeq += 1
+    const newProxy = normalizeProxy(
+      {
+        id: `proxy-${proxySeq}`,
+        name: payload.name,
+        meta: buildProxyMeta(payload.hostPort, payload.baud),
+        status: 'stopped',
+        statusLabel: '已停止',
+        statusIcon: 'pause_circle',
+        routeIcon: 'more_horiz',
+        routeLabel: '离线',
+        routeTone: 'muted',
+        hostPort: payload.hostPort,
+        devicePort: payload.devicePort,
+        baud: payload.baud,
+        bandwidth: '0.0',
+        bandwidthUnit: 'KB/s',
+        spark: '',
+        active: false,
+        toggleLabel: '已停止',
+      },
+      {}
+    )
+    proxies.value.unshift(newProxy)
+  } else if (modalProxy.value) {
+    modalProxy.value.name = payload.name
+    modalProxy.value.hostPort = payload.hostPort
+    modalProxy.value.devicePort = payload.devicePort
+    modalProxy.value.baud = payload.baud
+    modalProxy.value.meta = buildProxyMeta(payload.hostPort, payload.baud)
+  }
+
+  modalOpen.value = false
+}
+
+function confirmDeleteProxy(proxy) {
+  if (!proxy) return
+  const ok = window.confirm(`确认删除转发对「${proxy.name}」吗？删除前将停止转发。`)
+  if (!ok) return
+  setProxyStatus(proxy, false)
+  proxies.value = proxies.value.filter((item) => item.id !== proxy.id)
+}
+
 watch(
   () => modalOpen.value,
   (open) => {
@@ -348,11 +447,11 @@ onBeforeUnmount(() => {
           <p>管理转发链路并实时监控数据流状态。</p>
         </div>
         <div class="proxy-hero-actions">
-          <button class="proxy-hero-btn" type="button">
+          <button class="proxy-hero-btn" type="button" @click="refreshProxies">
             <span class="material-symbols-outlined">refresh</span>
             刷新状态
           </button>
-          <button class="proxy-hero-btn primary" type="button">
+          <button class="proxy-hero-btn primary" type="button" @click="openCreateModal">
             <span class="material-symbols-outlined">add</span>
             新建转发对
           </button>
@@ -435,7 +534,7 @@ onBeforeUnmount(() => {
         <div class="proxy-panel-footer" :class="`status-${proxy.status}`">
           <label class="proxy-footer-toggle">
             <span class="proxy-toggle">
-              <input type="checkbox" :checked="proxy.active" />
+              <input type="checkbox" :checked="proxy.active" @change="setProxyStatus(proxy, $event.target.checked)" />
               <span></span>
             </span>
             <span class="proxy-toggle-text">{{ proxy.toggleLabel }}</span>
@@ -447,7 +546,7 @@ onBeforeUnmount(() => {
             <button class="icon-btn" type="button" title="编辑" @click="openEditModal(proxy)">
               <span class="material-symbols-outlined">edit</span>
             </button>
-            <button class="icon-btn danger" type="button" title="删除">
+            <button class="icon-btn danger" type="button" title="删除" @click="confirmDeleteProxy(proxy)">
               <span class="material-symbols-outlined">delete</span>
             </button>
           </div>
@@ -464,7 +563,7 @@ onBeforeUnmount(() => {
             <div class="proxy-modal-icon">
               <span class="material-symbols-outlined">edit_square</span>
             </div>
-            <h2>编辑转发代理</h2>
+            <h2>{{ modalMode === 'create' ? '新建转发对' : '编辑转发代理' }}</h2>
           </div>
           <button class="proxy-modal-close" type="button" @click="closeModal">
             <span class="material-symbols-outlined">close</span>
@@ -564,6 +663,13 @@ onBeforeUnmount(() => {
             </div>
           </div>
         </div>
+        <div class="proxy-modal-footer">
+          <div></div>
+          <div class="proxy-footer-actions">
+            <button class="proxy-btn ghost" type="button" @click="closeModal">取消</button>
+            <button class="proxy-btn primary" type="button" @click="saveProxy">保存</button>
+          </div>
+        </div>
       </div>
     </div>
 

From b8af9e163371a8be6bb02eb00b24bb7cdf36cf65 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Fri, 23 Jan 2026 23:53:10 +0800
Subject: [PATCH 16/36] feat(runtime): add proxy pair storage and bridge APIs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 本地 JSON 存储转发对配置
  - WebBridge 提供转发对增删改查与启停接口
  - 前端代理监控接入后端接口
- 影响
  - 代理监控动作具备持久化与后端调用
- 兼容/行为变更
  - 新增 proxy_pairs.json 配置文件
- 依赖/环境
  - 无
- 验证
  - 未运行（接口接入）

[English]
- Changes:
  - Persist relay pairs to local JSON
  - Add WebBridge CRUD/start-stop APIs for relay pairs
  - Wire proxy monitor UI to backend APIs
- Impact:
  - Proxy monitor actions are now persisted and backend-driven
- Compatibility/Behavior changes:
  - Introduce proxy_pairs.json config file
- Dependencies/Environment:
  - None
- Verification:
  - Not run (API wiring)
Refs:
-
---
 desktop/web_bridge.py                        |  88 ++++++++++
 frontend/src/App.vue                         |   1 +
 frontend/src/components/ProxyMonitorView.vue | 171 +++++++++++++++----
 3 files changed, 230 insertions(+), 30 deletions(-)

diff --git a/desktop/web_bridge.py b/desktop/web_bridge.py
index 67e62d1..459056f 100644
--- a/desktop/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -49,6 +49,8 @@ def __init__(self, bus=None, comm=None, window=None) -> None:
         self._protocols_loaded = False
         self._settings_root = Path(os.environ.get("LOCALAPPDATA", Path.cwd())) / "ProtoFlow"
         self._settings_path = self._settings_root / "config" / "ui_settings.json"
+        self._proxy_pairs_path = self._settings_root / "config" / "proxy_pairs.json"
+        self._proxy_pairs: List[Dict[str, Any]] = self._load_proxy_pairs()
         self._channel_state: Dict[str, Any] = {
             "type": None,
             "status": "disconnected",
@@ -122,6 +124,72 @@ def list_protocols(self) -> List[Dict[str, Any]]:
     def load_settings(self) -> Dict[str, Any]:
         return self._load_settings()
 
+    @Slot(result="QVariant")
+    def list_proxy_pairs(self) -> List[Dict[str, Any]]:
+        return list(self._proxy_pairs)
+
+    @Slot(result="QVariant")
+    def refresh_proxy_pairs(self) -> List[Dict[str, Any]]:
+        self._proxy_pairs = self._load_proxy_pairs()
+        return list(self._proxy_pairs)
+
+    @Slot("QVariant", result="QVariant")
+    def create_proxy_pair(self, payload: Dict[str, Any]) -> Dict[str, Any]:
+        if not isinstance(payload, dict):
+            return {}
+        pair = {
+            "id": payload.get("id") or f"proxy-{int(time.time() * 1000)}",
+            "name": payload.get("name") or "未命名转发对",
+            "hostPort": payload.get("hostPort") or "",
+            "devicePort": payload.get("devicePort") or "",
+            "baud": payload.get("baud") or "115200",
+            "status": payload.get("status") or "stopped",
+        }
+        self._proxy_pairs.insert(0, pair)
+        self._save_proxy_pairs()
+        return pair
+
+    @Slot("QVariant", result="QVariant")
+    def update_proxy_pair(self, payload: Dict[str, Any]) -> Dict[str, Any]:
+        if not isinstance(payload, dict):
+            return {}
+        pair_id = payload.get("id")
+        if not pair_id:
+            return {}
+        for idx, pair in enumerate(self._proxy_pairs):
+            if pair.get("id") == pair_id:
+                updated = {
+                    **pair,
+                    **{k: v for k, v in payload.items() if k in {"name", "hostPort", "devicePort", "baud", "status"}},
+                }
+                self._proxy_pairs[idx] = updated
+                self._save_proxy_pairs()
+                return updated
+        return {}
+
+    @Slot(str, result=bool)
+    def delete_proxy_pair(self, pair_id: str) -> bool:
+        if not pair_id:
+            return False
+        before = len(self._proxy_pairs)
+        self._proxy_pairs = [pair for pair in self._proxy_pairs if pair.get("id") != pair_id]
+        if len(self._proxy_pairs) != before:
+            self._save_proxy_pairs()
+            return True
+        return False
+
+    @Slot(str, bool, result="QVariant")
+    def set_proxy_pair_status(self, pair_id: str, active: bool) -> Dict[str, Any]:
+        status = "running" if active else "stopped"
+        for idx, pair in enumerate(self._proxy_pairs):
+            if pair.get("id") == pair_id:
+                pair = dict(pair)
+                pair["status"] = status
+                self._proxy_pairs[idx] = pair
+                self._save_proxy_pairs()
+                return pair
+        return {}
+
     @Slot("QVariant", result=bool)
     def save_settings(self, payload: Dict[str, Any]) -> bool:
         return self._save_settings(payload)
@@ -533,6 +601,26 @@ def _save_settings(self, payload: Dict[str, Any]) -> bool:
             return False
         return True
 
+    def _load_proxy_pairs(self) -> List[Dict[str, Any]]:
+        if not self._proxy_pairs_path.exists():
+            return []
+        try:
+            with self._proxy_pairs_path.open("r", encoding="utf-8") as handle:
+                data = json.load(handle) or []
+        except Exception:
+            return []
+        if not isinstance(data, list):
+            return []
+        return [item for item in data if isinstance(item, dict)]
+
+    def _save_proxy_pairs(self) -> None:
+        try:
+            self._proxy_pairs_path.parent.mkdir(parents=True, exist_ok=True)
+            with self._proxy_pairs_path.open("w", encoding="utf-8") as handle:
+                json.dump(self._proxy_pairs, handle, ensure_ascii=False, indent=2)
+        except Exception as exc:
+            self.log.emit(f"[WARN] Save proxy pairs failed: {exc}")
+
     def _append_buffer(self, item: Dict[str, Any]) -> None:
         self._buffer.append(item)
         if len(self._buffer) > 2000:
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index dd37f6e..3c2347c 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -308,6 +308,7 @@ const scriptsViewBindings = {
 
 provide('manualView', manualViewBindings)
 provide('scriptsView', scriptsViewBindings)
+provide('bridge', bridge)
 
 let scriptTimer = null
 let yamlEditor = null
diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index 02b98f0..3302088 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import DropdownSelect from './DropdownSelect.vue'
 
 const filterTabs = [
@@ -33,6 +33,8 @@ const portOptions = ['COM1', 'COM2', 'COM3', 'COM4', 'COM5', 'COM6', 'COM10', 'C
 const baudOptions = ['4800', '9600', '19200', '38400', '57600', '115200']
 const parityOptions = ['无', '偶校验', '奇校验', 'Mark', 'Space']
 
+const bridge = inject('bridge', null)
+
 const proxies = ref([
   {
     id: 'proxy-com3',
@@ -107,6 +109,54 @@ function normalizeProxy(proxy, updates = {}) {
   return next
 }
 
+function withBridgeResult(result, onSuccess) {
+  if (!result) return
+  if (typeof result.then === 'function') {
+    result.then(onSuccess).catch(() => {})
+    return
+  }
+  onSuccess(result)
+}
+
+function mapProxyFromBackend(payload) {
+  const status = payload.status || 'stopped'
+  const active = status === 'running'
+  const statusLabel = active ? '运行中' : '已停止'
+  const routeLabel = active ? '转发中' : '离线'
+  const routeTone = active ? 'primary' : 'muted'
+  const statusIcon = active ? 'swap_horizontal_circle' : 'pause_circle'
+  const routeIcon = active ? 'keyboard_double_arrow_right' : 'more_horiz'
+  const baud = payload.baud ? String(payload.baud) : '115200'
+  proxySeq = Math.max(proxySeq, Number(String(payload.id || '').replace(/\D/g, '')) || proxySeq)
+  return {
+    id: payload.id || `proxy-${Date.now()}`,
+    name: payload.name || '未命名转发对',
+    meta: payload.meta || buildProxyMeta(payload.hostPort, baud),
+    status,
+    statusLabel,
+    statusIcon,
+    routeIcon,
+    routeLabel,
+    routeTone,
+    hostPort: payload.hostPort || 'COM1',
+    devicePort: payload.devicePort || 'COM2',
+    baud,
+    bandwidth: payload.bandwidth || '0.0',
+    bandwidthUnit: payload.bandwidthUnit || 'KB/s',
+    spark: payload.spark || '',
+    active,
+    toggleLabel: statusLabel,
+  }
+}
+
+function loadProxyPairs() {
+  if (!bridge || !bridge.value || !bridge.value.list_proxy_pairs) return
+  withBridgeResult(bridge.value.list_proxy_pairs(), (items) => {
+    if (!Array.isArray(items)) return
+    proxies.value = items.map((item) => mapProxyFromBackend(item))
+  })
+}
+
 const filteredProxies = computed(() => {
   if (activeFilter.value === 'all') return proxies.value
   return proxies.value.filter((proxy) => proxy.status === activeFilter.value)
@@ -346,6 +396,13 @@ function selectFrame(frame) {
 }
 
 function refreshProxies() {
+  if (bridge && bridge.value && bridge.value.refresh_proxy_pairs) {
+    withBridgeResult(bridge.value.refresh_proxy_pairs(), (items) => {
+      if (!Array.isArray(items)) return
+      proxies.value = items.map((item) => mapProxyFromBackend(item))
+    })
+    return
+  }
   proxies.value = proxies.value.map((proxy) => ({ ...proxy }))
 }
 
@@ -364,6 +421,14 @@ function setProxyStatus(proxy, active) {
   proxy.statusIcon = statusIcon
   proxy.routeIcon = routeIcon
   proxy.active = active
+
+  if (bridge && bridge.value && bridge.value.set_proxy_pair_status) {
+    withBridgeResult(bridge.value.set_proxy_pair_status(proxy.id, active), (updated) => {
+      if (updated && typeof updated === 'object') {
+        Object.assign(proxy, mapProxyFromBackend(updated))
+      }
+    })
+  }
 }
 
 function saveProxy() {
@@ -375,36 +440,70 @@ function saveProxy() {
   }
 
   if (modalMode.value === 'create') {
-    proxySeq += 1
-    const newProxy = normalizeProxy(
-      {
-        id: `proxy-${proxySeq}`,
-        name: payload.name,
-        meta: buildProxyMeta(payload.hostPort, payload.baud),
-        status: 'stopped',
-        statusLabel: '已停止',
-        statusIcon: 'pause_circle',
-        routeIcon: 'more_horiz',
-        routeLabel: '离线',
-        routeTone: 'muted',
-        hostPort: payload.hostPort,
-        devicePort: payload.devicePort,
-        baud: payload.baud,
-        bandwidth: '0.0',
-        bandwidthUnit: 'KB/s',
-        spark: '',
-        active: false,
-        toggleLabel: '已停止',
-      },
-      {}
-    )
-    proxies.value.unshift(newProxy)
+    if (bridge && bridge.value && bridge.value.create_proxy_pair) {
+      withBridgeResult(
+        bridge.value.create_proxy_pair({
+          name: payload.name,
+          hostPort: payload.hostPort,
+          devicePort: payload.devicePort,
+          baud: payload.baud,
+        }),
+        (created) => {
+          if (created) {
+            proxies.value.unshift(mapProxyFromBackend(created))
+          }
+        }
+      )
+    } else {
+      proxySeq += 1
+      const newProxy = normalizeProxy(
+        {
+          id: `proxy-${proxySeq}`,
+          name: payload.name,
+          meta: buildProxyMeta(payload.hostPort, payload.baud),
+          status: 'stopped',
+          statusLabel: '已停止',
+          statusIcon: 'pause_circle',
+          routeIcon: 'more_horiz',
+          routeLabel: '离线',
+          routeTone: 'muted',
+          hostPort: payload.hostPort,
+          devicePort: payload.devicePort,
+          baud: payload.baud,
+          bandwidth: '0.0',
+          bandwidthUnit: 'KB/s',
+          spark: '',
+          active: false,
+          toggleLabel: '已停止',
+        },
+        {}
+      )
+      proxies.value.unshift(newProxy)
+    }
   } else if (modalProxy.value) {
-    modalProxy.value.name = payload.name
-    modalProxy.value.hostPort = payload.hostPort
-    modalProxy.value.devicePort = payload.devicePort
-    modalProxy.value.baud = payload.baud
-    modalProxy.value.meta = buildProxyMeta(payload.hostPort, payload.baud)
+    if (bridge && bridge.value && bridge.value.update_proxy_pair) {
+      withBridgeResult(
+        bridge.value.update_proxy_pair({
+          id: modalProxy.value.id,
+          name: payload.name,
+          hostPort: payload.hostPort,
+          devicePort: payload.devicePort,
+          baud: payload.baud,
+          status: modalProxy.value.status,
+        }),
+        (updated) => {
+          if (updated) {
+            Object.assign(modalProxy.value, mapProxyFromBackend(updated))
+          }
+        }
+      )
+    } else {
+      modalProxy.value.name = payload.name
+      modalProxy.value.hostPort = payload.hostPort
+      modalProxy.value.devicePort = payload.devicePort
+      modalProxy.value.baud = payload.baud
+      modalProxy.value.meta = buildProxyMeta(payload.hostPort, payload.baud)
+    }
   }
 
   modalOpen.value = false
@@ -415,9 +514,21 @@ function confirmDeleteProxy(proxy) {
   const ok = window.confirm(`确认删除转发对「${proxy.name}」吗？删除前将停止转发。`)
   if (!ok) return
   setProxyStatus(proxy, false)
+  if (bridge && bridge.value && bridge.value.delete_proxy_pair) {
+    withBridgeResult(bridge.value.delete_proxy_pair(proxy.id), (success) => {
+      if (success) {
+        proxies.value = proxies.value.filter((item) => item.id !== proxy.id)
+      }
+    })
+    return
+  }
   proxies.value = proxies.value.filter((item) => item.id !== proxy.id)
 }
 
+onMounted(() => {
+  loadProxyPairs()
+})
+
 watch(
   () => modalOpen.value,
   (open) => {

From d956cfaca102b48a52ac42a38658a0ceb714ca7b Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Fri, 23 Jan 2026 23:57:16 +0800
Subject: [PATCH 17/36] feat(runtime): add capture start/stop handling
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 抓包按钮触发后端开始捕获
  - 关闭弹窗停止捕获
  - 引擎支持 capture.control 控制开关
- 影响
  - 抓包流程具备后端控制
- 兼容/行为变更
  - 新增 start_capture/stop_capture bridge 接口
- 依赖/环境
  - 无
- 验证
  - 未运行（流程接入）

[English]
- Changes:
  - Start capture on button click and stop on modal close
  - Add capture.control handling in the engine
  - Expose start/stop capture bridge APIs
- Impact:
  - Capture flow is now controlled by backend
- Compatibility/Behavior changes:
  - Add start_capture/stop_capture bridge methods
- Dependencies/Environment:
  - None
- Verification:
  - Not run (flow wiring)
Refs:
-
---
 core/packet_engine.py                        | 23 ++++++++++++++++++++
 desktop/web_bridge.py                        | 21 ++++++++++++++++++
 frontend/src/components/ProxyMonitorView.vue | 10 +++++++++
 3 files changed, 54 insertions(+)

diff --git a/core/packet_engine.py b/core/packet_engine.py
index 3783819..59da002 100644
--- a/core/packet_engine.py
+++ b/core/packet_engine.py
@@ -31,6 +31,8 @@ def __init__(self, bus: EventBus) -> None:
         self._bus = bus
         self._queue: "queue.Queue[Tuple[str, bytes, float]]" = queue.Queue()
         self._channel = _ChannelInfo()
+        self._enabled = False
+        self._target_channel: Optional[str] = None
         self._counter = 0
         self._stop = threading.Event()
         self._worker = threading.Thread(target=self._run, daemon=True)
@@ -39,15 +41,24 @@ def __init__(self, bus: EventBus) -> None:
         self._bus.subscribe("comm.tx", self._on_tx)
         self._bus.subscribe("comm.connected", self._on_connected)
         self._bus.subscribe("comm.disconnected", self._on_disconnected)
+        self._bus.subscribe("capture.control", self._on_control)
 
     def _on_rx(self, payload: Any) -> None:
+        if not self._enabled:
+            return
         data = self._to_bytes(payload)
         if data:
+            if self._target_channel and self._channel.channel and self._channel.channel != self._target_channel:
+                return
             self._queue.put(("RX", data, time.time()))
 
     def _on_tx(self, payload: Any) -> None:
+        if not self._enabled:
+            return
         data = self._to_bytes(payload)
         if data:
+            if self._target_channel and self._channel.channel and self._channel.channel != self._target_channel:
+                return
             self._queue.put(("TX", data, time.time()))
 
     def _on_connected(self, payload: Any) -> None:
@@ -64,6 +75,18 @@ def _on_connected(self, payload: Any) -> None:
     def _on_disconnected(self, payload: Any) -> None:
         self._channel = _ChannelInfo()
 
+    def _on_control(self, payload: Any) -> None:
+        if not isinstance(payload, dict):
+            return
+        action = payload.get("action")
+        if action == "start":
+            self._enabled = True
+            channel = payload.get("channel")
+            self._target_channel = str(channel) if channel else None
+        elif action == "stop":
+            self._enabled = False
+            self._target_channel = None
+
     def _run(self) -> None:
         while not self._stop.is_set():
             try:
diff --git a/desktop/web_bridge.py b/desktop/web_bridge.py
index 459056f..17b9c47 100644
--- a/desktop/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -194,6 +194,27 @@ def set_proxy_pair_status(self, pair_id: str, active: bool) -> Dict[str, Any]:
     def save_settings(self, payload: Dict[str, Any]) -> bool:
         return self._save_settings(payload)
 
+    @Slot("QVariant", result=bool)
+    def start_capture(self, payload: Dict[str, Any]) -> bool:
+        if not isinstance(payload, dict):
+            return False
+        channel = payload.get("channel") or payload.get("hostPort")
+        pair_id = payload.get("id") or payload.get("pairId")
+        self._bus.publish(
+            "capture.control",
+            {
+                "action": "start",
+                "channel": channel,
+                "pair_id": pair_id,
+            },
+        )
+        return True
+
+    @Slot(result=bool)
+    def stop_capture(self) -> bool:
+        self._bus.publish("capture.control", {"action": "stop"})
+        return True
+
     @Slot(str, str, result=str)
     def select_directory(self, title: str, start_dir: str) -> str:
         return QFileDialog.getExistingDirectory(None, title or "Select directory", start_dir or "")
diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index 3302088..93edaf8 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -377,6 +377,13 @@ function openCreateModal() {
 }
 
 function openCaptureModal(proxy) {
+  if (bridge && bridge.value && bridge.value.start_capture) {
+    bridge.value.start_capture({
+      id: proxy?.id,
+      channel: proxy?.hostPort,
+      hostPort: proxy?.hostPort,
+    })
+  }
   captureProxy.value = proxy
   captureFilter.value = 'all'
   selectedFrame.value = captureFrames.value[0] || null
@@ -388,6 +395,9 @@ function closeModal() {
 }
 
 function closeCaptureModal() {
+  if (bridge && bridge.value && bridge.value.stop_capture) {
+    bridge.value.stop_capture()
+  }
   captureOpen.value = false
 }
 

From 470c72593ac7cf9e81a6829dc561c77309deb599 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 00:05:00 +0800
Subject: [PATCH 18/36] feat(ui): reduce confirm dialog size
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 删除确认弹窗使用更紧凑的尺寸
  - 缩小标题、内容与底部间距
- 影响
  - 弹窗占用空间更小
- 兼容/行为变更
  - 无
- 依赖/环境
  - 无
- 验证
  - 未运行（样式调整）

[English]
- Changes:
  - Make the delete confirm dialog more compact
  - Reduce header/body/footer spacing
- Impact:
  - Dialog occupies less screen space
- Compatibility/Behavior changes:
  - None
- Dependencies/Environment:
  - None
- Verification:
  - Not run (style tweak)
Refs:
-
---
 frontend/src/components/ProxyMonitorView.vue | 57 +++++++++++++++++---
 frontend/src/style.css                       | 24 +++++++++
 2 files changed, 73 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index 93edaf8..cddb858 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -13,6 +13,8 @@ const modalOpen = ref(false)
 const modalProxy = ref(null)
 const modalMode = ref('edit')
 const captureOpen = ref(false)
+const confirmOpen = ref(false)
+const confirmProxy = ref(null)
 const captureProxy = ref(null)
 const captureFilter = ref('all')
 const captureView = ref('parsed')
@@ -521,8 +523,22 @@ function saveProxy() {
 
 function confirmDeleteProxy(proxy) {
   if (!proxy) return
-  const ok = window.confirm(`确认删除转发对「${proxy.name}」吗？删除前将停止转发。`)
-  if (!ok) return
+  confirmProxy.value = proxy
+  confirmOpen.value = true
+}
+
+onMounted(() => {
+  loadProxyPairs()
+})
+
+function closeConfirm() {
+  confirmOpen.value = false
+  confirmProxy.value = null
+}
+
+function applyConfirmDelete() {
+  const proxy = confirmProxy.value
+  if (!proxy) return
   setProxyStatus(proxy, false)
   if (bridge && bridge.value && bridge.value.delete_proxy_pair) {
     withBridgeResult(bridge.value.delete_proxy_pair(proxy.id), (success) => {
@@ -530,15 +546,12 @@ function confirmDeleteProxy(proxy) {
         proxies.value = proxies.value.filter((item) => item.id !== proxy.id)
       }
     })
-    return
+  } else {
+    proxies.value = proxies.value.filter((item) => item.id !== proxy.id)
   }
-  proxies.value = proxies.value.filter((item) => item.id !== proxy.id)
+  closeConfirm()
 }
 
-onMounted(() => {
-  loadProxyPairs()
-})
-
 watch(
   () => modalOpen.value,
   (open) => {
@@ -1058,5 +1071,33 @@ onBeforeUnmount(() => {
         </footer>
       </div>
     </div>
+
+    <div v-if="confirmOpen" class="proxy-modal-overlay" @mousedown.self="closeConfirm">
+      <div class="proxy-modal proxy-confirm-modal" @mousedown.stop @click.stop>
+        <div class="proxy-modal-header">
+          <div class="proxy-modal-title">
+            <div class="proxy-modal-icon">
+              <span class="material-symbols-outlined">warning</span>
+            </div>
+            <h2>确认删除</h2>
+          </div>
+          <button class="proxy-modal-close" type="button" @click="closeConfirm">
+            <span class="material-symbols-outlined">close</span>
+          </button>
+        </div>
+        <div class="proxy-modal-body">
+          <p class="proxy-confirm-text">
+            确认删除转发对「{{ confirmProxy?.name || '未命名转发对' }}」吗？删除前将停止转发。
+          </p>
+        </div>
+        <div class="proxy-modal-footer">
+          <div></div>
+          <div class="proxy-footer-actions">
+            <button class="proxy-btn ghost" type="button" @click="closeConfirm">取消</button>
+            <button class="proxy-btn warning" type="button" @click="applyConfirmDelete">确认删除</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </teleport>
 </template>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 6dd5cd7..8b13e73 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -2996,6 +2996,13 @@ textarea {
   color: #34d399;
 }
 
+.proxy-confirm-text {
+  font-size: 14px;
+  color: #475569;
+  margin: 0;
+  line-height: 1.6;
+}
+
 .proxy-modal-footer {
   padding: 12px 16px;
   border-top: 1px solid var(--border);
@@ -4149,6 +4156,23 @@ body.proxy-edit-open .proxy-modal-overlay {
   max-height: 90vh;
 }
 
+.proxy-confirm-modal {
+  width: min(520px, 92vw);
+  max-height: 360px;
+}
+
+.proxy-confirm-modal .proxy-modal-header {
+  padding: 16px 20px;
+}
+
+.proxy-confirm-modal .proxy-modal-body {
+  padding: 16px 20px 10px;
+}
+
+.proxy-confirm-modal .proxy-modal-footer {
+  padding: 12px 20px 16px;
+}
+
 .proxy-modal-header {
   display: flex;
   align-items: center;

From c56d5d6c23795fe1d03abb0e4c477ffb5fba9dfc Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 00:24:38 +0800
Subject: [PATCH 19/36] feat(ui): fix proxy toggle and serial config fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 开关切换改为纯按钮样式避免失效
  - 串口参数新增数据位/停止位/流控配置保存
- 影响
  - 开关显示与状态同步更可靠
- 兼容/行为变更
  - 无
- 依赖/环境
  - 无
- 验证
  - 未运行（样式与数据字段调整）

[English]
- Changes:
  - Replace the proxy toggle with a custom clickable control
  - Persist data bits/stop bits/flow control settings
- Impact:
  - Toggle visual state matches data more reliably
- Compatibility/Behavior changes:
  - None
- Dependencies/Environment:
  - None
- Verification:
  - Not run (style/data updates)
Refs:
-
---
 desktop/web_bridge.py                        | 21 ++++++-
 frontend/src/components/ProxyMonitorView.vue | 60 +++++++++++++++-----
 frontend/src/style.css                       | 15 ++---
 3 files changed, 72 insertions(+), 24 deletions(-)

diff --git a/desktop/web_bridge.py b/desktop/web_bridge.py
index 17b9c47..8503d5d 100644
--- a/desktop/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -144,6 +144,10 @@ def create_proxy_pair(self, payload: Dict[str, Any]) -> Dict[str, Any]:
             "devicePort": payload.get("devicePort") or "",
             "baud": payload.get("baud") or "115200",
             "status": payload.get("status") or "stopped",
+            "dataBits": payload.get("dataBits") or "8",
+            "stopBits": payload.get("stopBits") or "1",
+            "parity": payload.get("parity") or "none",
+            "flowControl": payload.get("flowControl") or "none",
         }
         self._proxy_pairs.insert(0, pair)
         self._save_proxy_pairs()
@@ -160,7 +164,22 @@ def update_proxy_pair(self, payload: Dict[str, Any]) -> Dict[str, Any]:
             if pair.get("id") == pair_id:
                 updated = {
                     **pair,
-                    **{k: v for k, v in payload.items() if k in {"name", "hostPort", "devicePort", "baud", "status"}},
+                    **{
+                        k: v
+                        for k, v in payload.items()
+                        if k
+                        in {
+                            "name",
+                            "hostPort",
+                            "devicePort",
+                            "baud",
+                            "status",
+                            "dataBits",
+                            "stopBits",
+                            "parity",
+                            "flowControl",
+                        }
+                    },
                 }
                 self._proxy_pairs[idx] = updated
                 self._save_proxy_pairs()
diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index cddb858..741c34a 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -29,6 +29,9 @@ const hostPort = ref('COM3')
 const devicePort = ref('COM5')
 const baudRate = ref('115200')
 const parity = ref('无')
+const dataBits = ref('8')
+const stopBits = ref('1')
+const flowControl = ref('none')
 
 const connectionOptions = ['透传模式', '协议桥接', '映射模式']
 const portOptions = ['COM1', 'COM2', 'COM3', 'COM4', 'COM5', 'COM6', 'COM10', 'COM12']
@@ -143,6 +146,10 @@ function mapProxyFromBackend(payload) {
     hostPort: payload.hostPort || 'COM1',
     devicePort: payload.devicePort || 'COM2',
     baud,
+    dataBits: payload.dataBits || '8',
+    stopBits: payload.stopBits || '1',
+    parity: payload.parity || 'none',
+    flowControl: payload.flowControl || 'none',
     bandwidth: payload.bandwidth || '0.0',
     bandwidthUnit: payload.bandwidthUnit || 'KB/s',
     spark: payload.spark || '',
@@ -365,6 +372,10 @@ function openEditModal(proxy) {
   hostPort.value = proxy && proxy.hostPort ? proxy.hostPort : hostPort.value
   devicePort.value = proxy && proxy.devicePort ? proxy.devicePort : devicePort.value
   baudRate.value = proxy && proxy.baud ? String(proxy.baud) : baudRate.value
+  dataBits.value = proxy && proxy.dataBits ? String(proxy.dataBits) : dataBits.value
+  stopBits.value = proxy && proxy.stopBits ? String(proxy.stopBits) : stopBits.value
+  parity.value = proxy && proxy.parity ? String(proxy.parity) : parity.value
+  flowControl.value = proxy && proxy.flowControl ? String(proxy.flowControl) : flowControl.value
   modalOpen.value = true
 }
 
@@ -375,6 +386,10 @@ function openCreateModal() {
   hostPort.value = portOptions[0] || 'COM1'
   devicePort.value = portOptions[1] || 'COM2'
   baudRate.value = baudOptions[5] || '115200'
+  dataBits.value = '8'
+  stopBits.value = '1'
+  parity.value = 'none'
+  flowControl.value = 'none'
   modalOpen.value = true
 }
 
@@ -449,6 +464,10 @@ function saveProxy() {
     hostPort: hostPort.value,
     devicePort: devicePort.value,
     baud: baudRate.value,
+    dataBits: dataBits.value,
+    stopBits: stopBits.value,
+    parity: parity.value,
+    flowControl: flowControl.value,
   }
 
   if (modalMode.value === 'create') {
@@ -459,6 +478,10 @@ function saveProxy() {
           hostPort: payload.hostPort,
           devicePort: payload.devicePort,
           baud: payload.baud,
+          dataBits: payload.dataBits,
+          stopBits: payload.stopBits,
+          parity: payload.parity,
+          flowControl: payload.flowControl,
         }),
         (created) => {
           if (created) {
@@ -482,6 +505,10 @@ function saveProxy() {
           hostPort: payload.hostPort,
           devicePort: payload.devicePort,
           baud: payload.baud,
+          dataBits: payload.dataBits,
+          stopBits: payload.stopBits,
+          parity: payload.parity,
+          flowControl: payload.flowControl,
           bandwidth: '0.0',
           bandwidthUnit: 'KB/s',
           spark: '',
@@ -501,6 +528,10 @@ function saveProxy() {
           hostPort: payload.hostPort,
           devicePort: payload.devicePort,
           baud: payload.baud,
+          dataBits: payload.dataBits,
+          stopBits: payload.stopBits,
+          parity: payload.parity,
+          flowControl: payload.flowControl,
           status: modalProxy.value.status,
         }),
         (updated) => {
@@ -514,6 +545,10 @@ function saveProxy() {
       modalProxy.value.hostPort = payload.hostPort
       modalProxy.value.devicePort = payload.devicePort
       modalProxy.value.baud = payload.baud
+      modalProxy.value.dataBits = payload.dataBits
+      modalProxy.value.stopBits = payload.stopBits
+      modalProxy.value.parity = payload.parity
+      modalProxy.value.flowControl = payload.flowControl
       modalProxy.value.meta = buildProxyMeta(payload.hostPort, payload.baud)
     }
   }
@@ -667,9 +702,8 @@ onBeforeUnmount(() => {
 
         <div class="proxy-panel-footer" :class="`status-${proxy.status}`">
           <label class="proxy-footer-toggle">
-            <span class="proxy-toggle">
-              <input type="checkbox" :checked="proxy.active" @change="setProxyStatus(proxy, $event.target.checked)" />
-              <span></span>
+            <span class="proxy-toggle" :class="{ active: proxy.active }" @click="setProxyStatus(proxy, !proxy.active)">
+              <span class="proxy-toggle-track"></span>
             </span>
             <span class="proxy-toggle-text">{{ proxy.toggleLabel }}</span>
           </label>
@@ -745,10 +779,10 @@ onBeforeUnmount(() => {
                 <div class="proxy-field">
                   <label>数据位</label>
                   <div class="proxy-segmented">
-                    <button type="button">5</button>
-                    <button type="button">6</button>
-                    <button type="button">7</button>
-                    <button type="button" class="active">8</button>
+                    <button type="button" :class="{ active: dataBits === '5' }" @click="dataBits = '5'">5</button>
+                    <button type="button" :class="{ active: dataBits === '6' }" @click="dataBits = '6'">6</button>
+                    <button type="button" :class="{ active: dataBits === '7' }" @click="dataBits = '7'">7</button>
+                    <button type="button" :class="{ active: dataBits === '8' }" @click="dataBits = '8'">8</button>
                   </div>
                 </div>
                 <div class="proxy-field">
@@ -758,17 +792,17 @@ onBeforeUnmount(() => {
                 <div class="proxy-field">
                   <label>停止位</label>
                   <div class="proxy-segmented">
-                    <button type="button" class="active">1</button>
-                    <button type="button">1.5</button>
-                    <button type="button">2</button>
+                    <button type="button" :class="{ active: stopBits === '1' }" @click="stopBits = '1'">1</button>
+                    <button type="button" :class="{ active: stopBits === '1.5' }" @click="stopBits = '1.5'">1.5</button>
+                    <button type="button" :class="{ active: stopBits === '2' }" @click="stopBits = '2'">2</button>
                   </div>
                 </div>
                 <div class="proxy-field proxy-span-2">
                   <label>流控</label>
                   <div class="proxy-segmented">
-                    <button type="button" class="active">None</button>
-                    <button type="button">RTS/CTS</button>
-                    <button type="button">XON/XOFF</button>
+                    <button type="button" :class="{ active: flowControl === 'none' }" @click="flowControl = 'none'">None</button>
+                    <button type="button" :class="{ active: flowControl === 'rtscts' }" @click="flowControl = 'rtscts'">RTS/CTS</button>
+                    <button type="button" :class="{ active: flowControl === 'xonxoff' }" @click="flowControl = 'xonxoff'">XON/XOFF</button>
                   </div>
                 </div>
               </div>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 8b13e73..5097dfd 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -2575,15 +2575,10 @@ textarea {
   width: 34px;
   height: 18px;
   display: inline-block;
+  cursor: pointer;
 }
 
-.proxy-toggle input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.proxy-toggle span {
+.proxy-toggle-track {
   position: absolute;
   inset: 0;
   background: #e2e8f0;
@@ -2591,7 +2586,7 @@ textarea {
   transition: 0.2s;
 }
 
-.proxy-toggle span::before {
+.proxy-toggle-track::before {
   content: "";
   position: absolute;
   height: 14px;
@@ -2604,11 +2599,11 @@ textarea {
   transition: 0.2s;
 }
 
-.proxy-toggle input:checked + span {
+.proxy-toggle.active .proxy-toggle-track {
   background: #2563eb;
 }
 
-.proxy-toggle input:checked + span::before {
+.proxy-toggle.active .proxy-toggle-track::before {
   transform: translateX(16px);
 }
 

From 84115f9099e31f57899cd20e1a9e7ed9fe6b4d9b Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 01:17:01 +0800
Subject: [PATCH 20/36] feat(ui): remove protocol placeholders in capture modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 协议相关区域仅使用后端数据，不再使用本地 mock
  - 无数据时显示空态提示，避免硬编码内容
  - 序号/提示文案改为依赖真实数据
- 影响
  - 抓包弹窗展示更贴近真实协议数据
- 兼容/行为变更
  - 无
- 依赖/环境
  - 无
- 验证
  - 未运行（UI 数据逻辑调整）

[English]
- Changes:
  - Remove local protocol mocks and rely on backend data
  - Show empty states when data is missing
  - Drive sequence/prompt text from live data
- Impact:
  - Capture modal reflects real protocol data
- Compatibility/Behavior changes:
  - None
- Dependencies/Environment:
  - None
- Verification:
  - Not run (UI data wiring)
Refs:
-
---
 frontend/src/App.vue                         |   4 +-
 frontend/src/components/ProxyMonitorView.vue | 302 +++++++------------
 2 files changed, 113 insertions(+), 193 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3c2347c..493beb8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -582,13 +582,13 @@ function mapCaptureFrame(payload) {
     warn: unknown,
     channel: payload.channel || '',
     baud: payload.baud || '',
-    protocolLabel: protocol.name || (unknown ? 'Unknown' : 'Protocol'),
+    protocolLabel: protocol.name || (unknown ? 'Unknown' : ''),
     protocolType: unknown
       ? 'unknown'
       : (protocol.name || '').toLowerCase().includes('modbus')
         ? 'modbus'
         : 'custom',
-    protocolTooltip: protocol.name ? `${protocol.name}${protocol.version ? ` ${protocol.version}` : ''}` : '未知协议',
+    protocolTooltip: protocol.name ? `${protocol.name}${protocol.version ? ` ${protocol.version}` : ''}` : '',
     hexDump: payload.hex_dump || null,
     tree: payload.tree || [],
   }
diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index 741c34a..284e8a8 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -18,11 +18,8 @@ const confirmProxy = ref(null)
 const captureProxy = ref(null)
 const captureFilter = ref('all')
 const captureView = ref('parsed')
-const selectedProtocol = ref('Modbus RTU')
 const selectedFrame = ref(null)
 
-const protocolOptions = ['Modbus RTU', 'MQTT', 'Raw Hex', 'Custom Protocol A']
-
 const proxyName = ref('')
 const connectionMode = ref('透传模式')
 const hostPort = ref('COM3')
@@ -186,119 +183,33 @@ const props = defineProps({
   },
 })
 
-const localCaptureFrames = ref([
-  {
-    id: 'frame-001',
-    direction: 'RX',
-    time: '14:20:01.2',
-    size: 64,
-    note: '01 03 00 00 00 02 C4 0B',
-    summary: 'Read Hold Regs',
-    summaryText: '请求: 读取保持寄存器 0x0000',
-    tone: 'green',
-    warn: false,
-    channel: 'COM5',
-    baud: '115200',
-    protocolLabel: 'Modbus RTU',
-    protocolType: 'modbus',
-    protocolTooltip: 'Modbus RTU v1.1',
-  },
-  {
-    id: 'frame-002',
-    direction: 'TX',
-    time: '14:20:01.5',
-    size: 128,
-    note: '01 03 04 01 F4 02 BC 9B 42',
-    summary: 'Resp: 50.0 / 70.0',
-    summaryText: '响应: 寄存器 0=500.0, 1=700.0',
-    tone: 'blue',
-    warn: false,
-    channel: 'COM3',
-    baud: '115200',
-    protocolLabel: 'Modbus RTU',
-    protocolType: 'modbus',
-    protocolTooltip: 'Modbus RTU v1.1',
-  },
-  {
-    id: 'frame-003',
-    direction: 'RX',
-    time: '14:20:02.8',
-    size: 1,
-    note: '01 83 02 FF FF',
-    summary: 'EXCEPTION: ILLEGAL_ADDR',
-    summaryText: '异常: 非法寄存器地址',
-    tone: 'red',
-    warn: true,
-    channel: 'COM5',
-    baud: '115200',
-    protocolLabel: 'Unknown',
-    protocolType: 'unknown',
-    protocolTooltip: '未知协议 - 点击配置',
-  },
-  {
-    id: 'frame-004',
-    direction: 'RX',
-    time: '14:20:03.2',
-    size: 0,
-    note: 'Waiting for next frame...',
-    summary: '',
-    summaryText: '等待下一帧...',
-    tone: 'amber',
-    warn: false,
-    channel: 'COM5',
-    baud: '115200',
-    protocolLabel: 'Modbus RTU',
-    protocolType: 'modbus',
-    protocolTooltip: 'Modbus RTU v1.1',
-  },
-])
+const captureFrames = computed(() => props.captureFrames || [])
 
-const localCaptureMeta = ref({
-  channel: 'Ethernet (TAP)',
-  engine: '通用动态解析 (Agnostic Engine)',
-  bufferUsed: 85,
-  rangeStart: 1,
-  rangeEnd: 50,
-  totalFrames: 50234,
+const captureMeta = computed(() => ({
+  bufferUsed: 0,
+  rangeStart: 0,
+  rangeEnd: 0,
+  totalFrames: 0,
   page: 1,
-  pageCount: 1005,
-})
+  pageCount: 1,
+  channel: '',
+  engine: '',
+  ...(props.captureMeta || {}),
+}))
 
-const localCaptureMetrics = ref({
-  rtt: '4.2 ms',
-  loss: '0.02 %',
-})
-
-const protocolTrees = {
-  modbus: [
-    { label: '报文标识 (Header)', raw: '01 03', value: '0x0103' },
-    { label: '数据长度 (Len)', raw: '08', value: '8 Bytes' },
-  ],
-  unknown: [
-    { label: '报文标识 (Header)', raw: 'FF EE', value: '65518' },
-    { label: '数据长度 (Len)', raw: '10', value: '16 Bytes' },
-  ],
-}
-
-const captureFrames = computed(() =>
-  props.captureFrames && props.captureFrames.length ? props.captureFrames : localCaptureFrames.value
-)
-
-const captureMeta = computed(() =>
-  props.captureMeta && Object.keys(props.captureMeta).length ? props.captureMeta : localCaptureMeta.value
-)
-
-const captureMetrics = computed(() =>
-  props.captureMetrics && Object.keys(props.captureMetrics).length ? props.captureMetrics : localCaptureMetrics.value
-)
+const captureMetrics = computed(() => ({
+  rtt: '',
+  loss: '',
+  ...(props.captureMetrics || {}),
+}))
 
 const activeFrame = computed(() => selectedFrame.value || captureFrames.value[0] || null)
 
 const isUnknownFrame = computed(() => activeFrame.value?.protocolType === 'unknown')
 
-const activeProtocolLabel = computed(() => activeFrame.value?.protocolLabel || selectedProtocol.value)
+const activeProtocolLabel = computed(() => activeFrame.value?.protocolLabel || '')
 
-const activeProtocolTooltip = computed(() => activeFrame.value?.protocolTooltip || '未知协议')
+const activeProtocolTooltip = computed(() => activeFrame.value?.protocolTooltip || '')
 
 const activeSummaryText = computed(() => activeFrame.value?.summaryText || activeFrame.value?.summary || '')
 
@@ -317,11 +228,13 @@ const activeHexBytes = computed(() => {
 
 const activeHexCells = computed(() => {
   const bytes = activeHexBytes.value.slice(0, 16)
+  if (!bytes.length) return []
   while (bytes.length < 16) bytes.push('--')
   return bytes
 })
 
 const activeHexAscii = computed(() => {
+  if (!activeHexCells.value.length) return ['', '']
   const bytes = activeHexCells.value.map((cell) => {
     if (cell === '--') return '.'
     const code = parseInt(cell, 16)
@@ -341,12 +254,12 @@ const activeTreeRows = computed(() => {
   const rows = activeFrame.value?.tree
   if (Array.isArray(rows) && rows.length) {
     return rows.map((row) => ({
-      label: row.label || row.name || '字段',
-      raw: row.raw || row.raw_hex || '--',
-      value: row.value || row.display || '--',
+      label: row.label || row.name || '',
+      raw: row.raw || row.raw_hex || '',
+      value: row.value || row.display || '',
     }))
   }
-  return isUnknownFrame.value ? protocolTrees.unknown : protocolTrees.modbus
+  return []
 })
 
 function hexCellClass(index, value) {
@@ -909,7 +822,9 @@ onBeforeUnmount(() => {
                     :class="{ 'bg-orange-50/40 border-l-4 border-l-orange-400': frame.tone === 'red' }"
                     @click="selectFrame(frame)"
                   >
-                    <td class="px-3 py-2 text-slate-400 font-mono">{{ 50234 - index }}</td>
+                    <td class="px-3 py-2 text-slate-400 font-mono">
+                      {{ frame.seq ?? (captureMeta.rangeStart ? captureMeta.rangeStart + index : index + 1) }}
+                    </td>
                     <td class="px-3 py-2 text-slate-500 font-mono">{{ frame.time }}</td>
                     <td class="px-3 py-2 text-center">
                       <span
@@ -935,17 +850,17 @@ onBeforeUnmount(() => {
                           >
                             {{ frame.tone === 'red' ? '?' : 'M' }}
                           </span>
-                          <span>{{ frame.protocolLabel || (frame.tone === 'red' ? 'Unknown' : selectedProtocol) }}</span>
+                          <span>{{ frame.protocolLabel || '' }}</span>
                         </div>
                         <div class="protocol-tooltip bg-slate-800 text-white text-[10px] px-2 py-1 rounded shadow-lg pointer-events-none whitespace-nowrap border border-slate-700">
-                          {{ frame.protocolTooltip || (frame.tone === 'red' ? '未知协议 - 点击配置' : 'Modbus RTU v1.1') }}
+                          {{ frame.protocolTooltip || '' }}
                         </div>
                       </div>
                     </td>
                     <td class="px-3 py-2 text-slate-500">{{ frame.size }}B</td>
                     <td class="px-3 py-2 hex-font text-slate-400 truncate max-w-[240px]">{{ frame.note }}</td>
                     <td class="px-3 py-2 text-slate-600 italic">
-                      {{ frame.summaryText || frame.summary || ('HEX: ' + frame.note + ' | ASCII: ....') }}
+                      {{ frame.summaryText || frame.summary || '' }}
                     </td>
                   </tr>
                 </tbody>
@@ -968,90 +883,95 @@ onBeforeUnmount(() => {
               </div>
             </div>
             <div class="flex-1 overflow-y-auto">
-              <div class="p-6 text-center space-y-4 border-b border-slate-200 bg-orange-50/20">
-                <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-orange-100 text-orange-600 mb-1">
-                  <span class="material-symbols-outlined !text-3xl">question_mark</span>
-                </div>
-                <div>
-                  <h3 class="text-sm font-bold text-slate-800">
-                    {{ isUnknownFrame ? '未知协议报文 (Unknown Protocol)' : `${activeProtocolLabel} 报文` }}
-                  </h3>
-                  <p class="text-[11px] text-slate-500 mt-1 max-w-[280px] mx-auto leading-relaxed">
-                    {{
-                      isUnknownFrame
-                        ? '系统未能自动匹配已知的解析插件。您可以尝试手动配置解析规则，或使用万能解析脚本。'
-                        : '已匹配协议解析插件，当前展示该报文的解析详情。'
-                    }}
-                  </p>
-                </div>
-                <div class="flex justify-center gap-3">
-                  <button class="px-3 py-1.5 bg-white border border-slate-300 rounded text-[11px] font-bold hover:bg-slate-50 transition-colors shadow-sm">
-                    {{ isUnknownFrame ? '手动解析' : '查看详情' }}
-                  </button>
-                  <button class="px-3 py-1.5 bg-blue-600 text-white rounded text-[11px] font-bold hover:bg-blue-700 transition-colors flex items-center gap-1 shadow-md">
-                    <span class="material-symbols-outlined !text-xs">schema</span>
-                    {{ isUnknownFrame ? '配置解析规则' : '调整解析规则' }}
-                  </button>
-                </div>
-              </div>
-              <div class="p-4 border-b border-slate-200">
-                <div class="flex items-center justify-between mb-3">
-                  <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">原始十六进制 (RAW HEX)</h3>
-                  <span class="text-[10px] font-mono bg-slate-200 px-1.5 py-0.5 rounded text-slate-600">
-                    {{ activeHexSize }} 字节
-                  </span>
-                </div>
-                <div class="bg-white border border-slate-200 rounded-lg overflow-hidden flex shadow-inner">
-                  <div class="bg-slate-50 border-r border-slate-200 p-2 text-[10px] font-mono text-slate-400 leading-6 text-right w-12 shrink-0">
-                    0000<br />0008
+              <div v-if="!activeFrame" class="p-6 text-center text-slate-400 text-sm">暂无报文数据</div>
+              <template v-else>
+                <div class="p-6 text-center space-y-4 border-b border-slate-200 bg-orange-50/20">
+                  <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-orange-100 text-orange-600 mb-1">
+                    <span class="material-symbols-outlined !text-3xl">question_mark</span>
                   </div>
-                  <div class="flex-1 p-2 hex-font text-xs leading-6 grid grid-cols-8 gap-x-1 text-center font-medium">
-                    <span
-                      v-for="(cell, cellIndex) in activeHexCells"
-                      :key="`hex-${cellIndex}`"
-                      :class="hexCellClass(cellIndex, cell)"
-                    >
-                      {{ cell }}
-                    </span>
+                  <div>
+                    <h3 class="text-sm font-bold text-slate-800">
+                      {{ isUnknownFrame ? '未知协议报文 (Unknown Protocol)' : `${activeProtocolLabel} 报文` }}
+                    </h3>
+                    <p class="text-[11px] text-slate-500 mt-1 max-w-[280px] mx-auto leading-relaxed">
+                      {{
+                        isUnknownFrame
+                          ? '系统未能自动匹配已知的解析插件。您可以尝试手动配置解析规则，或使用万能解析脚本。'
+                          : '已匹配协议解析插件，当前展示该报文的解析详情。'
+                      }}
+                    </p>
                   </div>
-                  <div class="border-l border-slate-200 p-2 text-[10px] font-mono text-slate-500 leading-6 tracking-tight w-24 shrink-0 bg-slate-50/50">
-                    {{ activeHexAscii[0] }}<br />{{ activeHexAscii[1] }}
+                  <div class="flex justify-center gap-3">
+                    <button class="px-3 py-1.5 bg-white border border-slate-300 rounded text-[11px] font-bold hover:bg-slate-50 transition-colors shadow-sm">
+                      {{ isUnknownFrame ? '手动解析' : '查看详情' }}
+                    </button>
+                    <button class="px-3 py-1.5 bg-blue-600 text-white rounded text-[11px] font-bold hover:bg-blue-700 transition-colors flex items-center gap-1 shadow-md">
+                      <span class="material-symbols-outlined !text-xs">schema</span>
+                      {{ isUnknownFrame ? '配置解析规则' : '调整解析规则' }}
+                    </button>
                   </div>
                 </div>
-              </div>
-              <div class="p-4 space-y-4">
-                <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">协议层级解析 (PROTOCOL TREE)</h3>
-                <div class="relative pl-4 space-y-1">
-                  <div class="flex items-center gap-2 -ml-4 cursor-pointer hover:bg-slate-100 p-1 rounded transition-colors group">
-                    <span class="material-symbols-outlined text-slate-400 group-open:rotate-90">arrow_right</span>
-                    <span class="text-[11px] font-bold text-slate-500 uppercase">链路层 (Data Link Layer)</span>
+                <div class="p-4 border-b border-slate-200">
+                  <div class="flex items-center justify-between mb-3">
+                    <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">原始十六进制 (RAW HEX)</h3>
+                    <span class="text-[10px] font-mono bg-slate-200 px-1.5 py-0.5 rounded text-slate-600">
+                      {{ activeHexSize }} 字节
+                    </span>
                   </div>
-                  <div class="tree-line relative pl-2 space-y-1">
-                    <details class="group" open>
-                      <summary class="flex items-center gap-2 list-none cursor-pointer hover:bg-slate-100 p-1 rounded -ml-4 transition-colors">
-                        <span class="material-symbols-outlined text-blue-500 group-open:rotate-90 transition-transform">arrow_drop_down</span>
-                        <span class="text-[11px] font-bold text-slate-800 uppercase">Agnostic Data Frame</span>
-                      </summary>
-                      <div class="mt-2 space-y-0.5 pl-2">
-                        <div class="grid grid-cols-12 text-[9px] font-bold text-slate-400 px-2 py-1 uppercase tracking-tighter">
-                          <div class="col-span-3">原始值</div>
-                          <div class="col-span-4">字段</div>
-                          <div class="col-span-5 text-right">解析值</div>
-                        </div>
-                        <div
-                          v-for="(row, rowIndex) in activeTreeRows"
-                          :key="`tree-${rowIndex}`"
-                          class="grid grid-cols-12 items-center py-1.5 px-2 rounded hover:bg-blue-50 cursor-default transition-colors border-l-2 border-transparent hover:border-blue-500"
-                        >
-                          <div class="col-span-3 font-mono text-[11px] text-blue-600">{{ row.raw }}</div>
-                          <div class="col-span-4 text-[11px] text-slate-500">{{ row.label }}</div>
-                          <div class="col-span-5 text-[11px] text-right font-bold text-slate-700">{{ row.value }}</div>
+                  <div v-if="activeHexCells.length" class="bg-white border border-slate-200 rounded-lg overflow-hidden flex shadow-inner">
+                    <div class="bg-slate-50 border-r border-slate-200 p-2 text-[10px] font-mono text-slate-400 leading-6 text-right w-12 shrink-0">
+                      0000<br />0008
+                    </div>
+                    <div class="flex-1 p-2 hex-font text-xs leading-6 grid grid-cols-8 gap-x-1 text-center font-medium">
+                      <span
+                        v-for="(cell, cellIndex) in activeHexCells"
+                        :key="`hex-${cellIndex}`"
+                        :class="hexCellClass(cellIndex, cell)"
+                      >
+                        {{ cell }}
+                      </span>
+                    </div>
+                    <div class="border-l border-slate-200 p-2 text-[10px] font-mono text-slate-500 leading-6 tracking-tight w-24 shrink-0 bg-slate-50/50">
+                      {{ activeHexAscii[0] }}<br />{{ activeHexAscii[1] }}
+                    </div>
+                  </div>
+                  <div v-else class="text-xs text-slate-400">暂无十六进制数据</div>
+                </div>
+                <div class="p-4 space-y-4">
+                  <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">协议层级解析 (PROTOCOL TREE)</h3>
+                  <div class="relative pl-4 space-y-1">
+                    <div class="flex items-center gap-2 -ml-4 cursor-pointer hover:bg-slate-100 p-1 rounded transition-colors group">
+                      <span class="material-symbols-outlined text-slate-400 group-open:rotate-90">arrow_right</span>
+                      <span class="text-[11px] font-bold text-slate-500 uppercase">链路层 (Data Link Layer)</span>
+                    </div>
+                    <div class="tree-line relative pl-2 space-y-1">
+                      <details class="group" open>
+                        <summary class="flex items-center gap-2 list-none cursor-pointer hover:bg-slate-100 p-1 rounded -ml-4 transition-colors">
+                          <span class="material-symbols-outlined text-blue-500 group-open:rotate-90 transition-transform">arrow_drop_down</span>
+                          <span class="text-[11px] font-bold text-slate-800 uppercase">{{ activeProtocolLabel }}</span>
+                        </summary>
+                        <div class="mt-2 space-y-0.5 pl-2">
+                          <div class="grid grid-cols-12 text-[9px] font-bold text-slate-400 px-2 py-1 uppercase tracking-tighter">
+                            <div class="col-span-3">原始值</div>
+                            <div class="col-span-4">字段</div>
+                            <div class="col-span-5 text-right">解析值</div>
+                          </div>
+                          <div
+                            v-for="(row, rowIndex) in activeTreeRows"
+                            :key="`tree-${rowIndex}`"
+                            class="grid grid-cols-12 items-center py-1.5 px-2 rounded hover:bg-blue-50 cursor-default transition-colors border-l-2 border-transparent hover:border-blue-500"
+                          >
+                            <div class="col-span-3 font-mono text-[11px] text-blue-600">{{ row.raw }}</div>
+                            <div class="col-span-4 text-[11px] text-slate-500">{{ row.label }}</div>
+                            <div class="col-span-5 text-[11px] text-right font-bold text-slate-700">{{ row.value }}</div>
+                          </div>
+                          <div v-if="!activeTreeRows.length" class="text-xs text-slate-400 px-2 py-2">暂无协议解析数据</div>
                         </div>
-                      </div>
-                    </details>
+                      </details>
+                    </div>
                   </div>
                 </div>
-              </div>
+              </template>
             </div>
             <div class="p-4 bg-slate-100/50 border-t border-slate-200">
               <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">实时网络指标</p>

From 1d986fbbbe543f2650e71be273bfdb9822411790 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 02:11:14 +0800
Subject: [PATCH 21/36] feat(protocols): replace protocol placeholders with
 CRUD
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 协议页面接入后端协议列表并支持刷新
  - 新建/编辑/删除自定义协议并持久化到本地
  - 协议详情弹窗与删除确认弹窗
- 影响
  - 协议管理从占位展示变为可操作流程
- 兼容/行为变更
  - 新增协议配置文件 protocols.json
- 依赖/环境
  - 无
- 验证
  - 未运行（功能与 UI 逻辑调整）

[English]
- Changes:
  - Wire protocol list to backend and add refresh
  - Add create/edit/delete for custom protocols with local persistence
  - Add protocol detail and delete confirmation dialogs
- Impact:
  - Protocols page is now actionable instead of placeholder
- Compatibility/Behavior changes:
  - Add protocols.json config file
- Dependencies/Environment:
  - None
- Verification:
  - Not run (feature/UI wiring)
Refs:
-
---
 desktop/web_bridge.py | 121 +++++++++++++++++++++
 frontend/src/App.vue  | 241 +++++++++++++++++++++++++++++++++++++++---
 2 files changed, 347 insertions(+), 15 deletions(-)

diff --git a/desktop/web_bridge.py b/desktop/web_bridge.py
index 8503d5d..58e4ca4 100644
--- a/desktop/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -3,6 +3,7 @@
 import importlib
 import json
 import pkgutil
+import re
 import threading
 import time
 from pathlib import Path
@@ -50,7 +51,9 @@ def __init__(self, bus=None, comm=None, window=None) -> None:
         self._settings_root = Path(os.environ.get("LOCALAPPDATA", Path.cwd())) / "ProtoFlow"
         self._settings_path = self._settings_root / "config" / "ui_settings.json"
         self._proxy_pairs_path = self._settings_root / "config" / "proxy_pairs.json"
+        self._protocols_path = self._settings_root / "config" / "protocols.json"
         self._proxy_pairs: List[Dict[str, Any]] = self._load_proxy_pairs()
+        self._custom_protocols: List[Dict[str, Any]] = self._load_custom_protocols()
         self._channel_state: Dict[str, Any] = {
             "type": None,
             "status": "disconnected",
@@ -116,10 +119,87 @@ def list_protocols(self) -> List[Dict[str, Any]]:
                     "desc": desc,
                     "category": category,
                     "status": "available",
+                    "source": "builtin",
                 }
             )
+        existing = {item.get("id") for item in items}
+        for custom in self._custom_protocols:
+            if not isinstance(custom, dict):
+                continue
+            custom_id = custom.get("id") or custom.get("key")
+            if not custom_id or custom_id in existing:
+                continue
+            merged = {
+                "id": custom_id,
+                "key": custom.get("key") or custom_id,
+                "name": custom.get("name") or "",
+                "driver": custom.get("driver") or "",
+                "desc": custom.get("desc") or "",
+                "category": custom.get("category") or "custom",
+                "status": custom.get("status") or "custom",
+                "source": "custom",
+            }
+            items.append(merged)
         return items
 
+    @Slot("QVariant", result="QVariant")
+    def create_protocol(self, payload: Dict[str, Any]) -> Dict[str, Any]:
+        if not isinstance(payload, dict):
+            return {}
+        self._load_protocols()
+        raw_key = payload.get("key") or payload.get("id") or payload.get("name") or "custom_protocol"
+        key = self._normalize_protocol_key(str(raw_key))
+        key = self._ensure_protocol_key_unique(key)
+        item = {
+            "id": key,
+            "key": key,
+            "name": payload.get("name") or key,
+            "desc": payload.get("desc") or "",
+            "category": payload.get("category") or "custom",
+            "status": payload.get("status") or "custom",
+            "driver": payload.get("driver") or "",
+        }
+        self._custom_protocols.append(item)
+        self._save_custom_protocols()
+        return item
+
+    @Slot("QVariant", result="QVariant")
+    def update_protocol(self, payload: Dict[str, Any]) -> Dict[str, Any]:
+        if not isinstance(payload, dict):
+            return {}
+        protocol_id = payload.get("id") or payload.get("key")
+        if not protocol_id:
+            return {}
+        updated: Dict[str, Any] = {}
+        for item in self._custom_protocols:
+            if item.get("id") == protocol_id or item.get("key") == protocol_id:
+                item["name"] = payload.get("name") or item.get("name") or item.get("key") or ""
+                item["desc"] = payload.get("desc") or ""
+                item["category"] = payload.get("category") or item.get("category") or "custom"
+                item["status"] = payload.get("status") or item.get("status") or "custom"
+                if payload.get("driver"):
+                    item["driver"] = payload.get("driver")
+                updated = dict(item)
+                break
+        if updated:
+            self._save_custom_protocols()
+        return updated
+
+    @Slot(str, result=bool)
+    def delete_protocol(self, protocol_id: str) -> bool:
+        if not protocol_id:
+            return False
+        before = len(self._custom_protocols)
+        self._custom_protocols = [
+            item
+            for item in self._custom_protocols
+            if item.get("id") != protocol_id and item.get("key") != protocol_id
+        ]
+        if len(self._custom_protocols) == before:
+            return False
+        self._save_custom_protocols()
+        return True
+
     @Slot(result="QVariant")
     def load_settings(self) -> Dict[str, Any]:
         return self._load_settings()
@@ -661,6 +741,47 @@ def _save_proxy_pairs(self) -> None:
         except Exception as exc:
             self.log.emit(f"[WARN] Save proxy pairs failed: {exc}")
 
+    def _load_custom_protocols(self) -> List[Dict[str, Any]]:
+        if not self._protocols_path.exists():
+            return []
+        try:
+            with self._protocols_path.open("r", encoding="utf-8") as handle:
+                data = json.load(handle) or []
+        except Exception:
+            return []
+        if not isinstance(data, list):
+            return []
+        items = [item for item in data if isinstance(item, dict)]
+        return items
+
+    def _save_custom_protocols(self) -> None:
+        try:
+            self._protocols_path.parent.mkdir(parents=True, exist_ok=True)
+            with self._protocols_path.open("w", encoding="utf-8") as handle:
+                json.dump(self._custom_protocols, handle, ensure_ascii=False, indent=2)
+        except Exception as exc:
+            self.log.emit(f"[WARN] Save protocols failed: {exc}")
+
+    def _normalize_protocol_key(self, value: str) -> str:
+        value = value.strip().lower().replace(" ", "_")
+        value = re.sub(r"[^a-z0-9_]+", "_", value)
+        value = re.sub(r"_+", "_", value).strip("_")
+        return value or "custom_protocol"
+
+    def _ensure_protocol_key_unique(self, key: str) -> str:
+        registry_keys = set(ProtocolRegistry.list().keys())
+        existing = {item.get("id") for item in self._custom_protocols if isinstance(item, dict)}
+        existing.update({item.get("key") for item in self._custom_protocols if isinstance(item, dict)})
+        existing.update(registry_keys)
+        if key not in existing:
+            return key
+        index = 2
+        candidate = f"{key}_{index}"
+        while candidate in existing:
+            index += 1
+            candidate = f"{key}_{index}"
+        return candidate
+
     def _append_buffer(self, item: Dict[str, Any]) -> None:
         self._buffer.append(item)
         if len(self._buffer) > 2000:
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 493beb8..ee36e34 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -108,6 +108,19 @@ const settingsSnapshot = ref(null)
 const settingsTab = ref('general')
 const channelTab = ref('all')
 const protocolTab = ref('all')
+const protocolDialogOpen = ref(false)
+const protocolDialogMode = ref('create')
+const protocolEditing = ref(null)
+const protocolDeleteOpen = ref(false)
+const protocolDeleting = ref(null)
+const protocolDraft = ref({
+  id: '',
+  key: '',
+  name: '',
+  desc: '',
+  category: 'custom',
+  status: 'custom',
+})
 const settingsGeneralRef = ref(null)
 const settingsPluginsRef = ref(null)
 const settingsRuntimeRef = ref(null)
@@ -935,21 +948,41 @@ function prettyProtocolName(key, fallback) {
   return parts.join(" ")
 }
 
+function protocolStatusInfo(status) {
+  if (status === "available") {
+    return { text: "可用", className: "badge-green" }
+  }
+  if (status === "custom") {
+    return { text: "自定义", className: "badge-blue" }
+  }
+  if (status === "disabled") {
+    return { text: "已禁用", className: "badge-gray" }
+  }
+  return { text: status || "未知", className: "badge-gray" }
+}
+
 function setProtocols(items) {
   const list = Array.isArray(items) ? items : []
   protocolCards.value = list.map((item) => {
     const key = String(item.key || item.id || "")
-    const driver = String(item.driver || item.name || "")
+    const driver = String(item.driver || "")
+    const name = String(item.name || "")
     const category = String(item.category || protocolCategory(key))
     const status = String(item.status || "available")
-    const desc = String(item.desc || "暂无描述")
+    const source = String(item.source || "builtin")
+    const desc = String(item.desc || "")
+    const statusInfo = protocolStatusInfo(status)
     return {
       id: key || driver || Math.random().toString(36).slice(2),
-      name: prettyProtocolName(key, driver),
+      key,
+      name: name || prettyProtocolName(key, driver),
+      driver,
       category,
       desc,
-      statusText: status === "available" ? "可用" : status,
-      statusClass: status === "available" ? "badge-green" : "badge-gray",
+      statusText: statusInfo.text,
+      statusClass: statusInfo.className,
+      status,
+      source,
       rows: [
         { label: "键名", value: key || "--" },
         { label: "驱动", value: driver || "--" },
@@ -966,6 +999,98 @@ function refreshProtocols() {
   })
 }
 
+function resetProtocolDraft() {
+  protocolDraft.value = {
+    id: "",
+    key: "",
+    name: "",
+    desc: "",
+    category: "custom",
+    status: "custom",
+  }
+}
+
+function openCreateProtocol() {
+  protocolDialogMode.value = "create"
+  protocolEditing.value = null
+  resetProtocolDraft()
+  protocolDialogOpen.value = true
+}
+
+function openProtocolDetails(card) {
+  if (!card) return
+  protocolEditing.value = card
+  protocolDialogMode.value = card.source === "custom" ? "edit" : "view"
+  protocolDraft.value = {
+    id: card.id || "",
+    key: card.key || "",
+    name: card.name || "",
+    desc: card.desc || "",
+    category: card.category || "custom",
+    status: card.status || "available",
+  }
+  protocolDialogOpen.value = true
+}
+
+function closeProtocolDialog() {
+  protocolDialogOpen.value = false
+}
+
+function saveProtocol() {
+  if (!bridge.value) {
+    protocolDialogOpen.value = false
+    return
+  }
+  const payload = {
+    id: protocolDraft.value.id,
+    key: protocolDraft.value.key,
+    name: protocolDraft.value.name,
+    desc: protocolDraft.value.desc,
+    category: protocolDraft.value.category,
+    status: protocolDraft.value.status,
+  }
+  if (protocolDialogMode.value === "create") {
+    if (!bridge.value.create_protocol) return
+    withResult(bridge.value.create_protocol(payload), () => {
+      refreshProtocols()
+      protocolDialogOpen.value = false
+    })
+    return
+  }
+  if (protocolDialogMode.value === "edit") {
+    if (!bridge.value.update_protocol) return
+    withResult(bridge.value.update_protocol(payload), () => {
+      refreshProtocols()
+      protocolDialogOpen.value = false
+    })
+    return
+  }
+  protocolDialogOpen.value = false
+}
+
+function openProtocolDelete(card) {
+  if (!card || card.source !== "custom") return
+  protocolDeleting.value = card
+  protocolDeleteOpen.value = true
+}
+
+function closeProtocolDelete() {
+  protocolDeleteOpen.value = false
+  protocolDeleting.value = null
+}
+
+function confirmProtocolDelete() {
+  if (!bridge.value || !bridge.value.delete_protocol || !protocolDeleting.value) {
+    closeProtocolDelete()
+    return
+  }
+  const id = protocolDeleting.value.id
+  withResult(bridge.value.delete_protocol(id), () => {
+    refreshProtocols()
+    closeProtocolDelete()
+  })
+}
+
 
 function handleChannelRefresh() {
   refreshChannels()
@@ -1403,7 +1528,7 @@ watch(
 )
 
 watch(
-  () => channelDialogOpen.value || quickDialogOpen.value || quickDeleteOpen.value,
+  () => channelDialogOpen.value || quickDialogOpen.value || quickDeleteOpen.value || protocolDialogOpen.value || protocolDeleteOpen.value,
   (open) => {
     document.body.classList.toggle('modal-open', open)
   }
@@ -1861,7 +1986,7 @@ function unlockSidebarWidth() {
                 <span class="material-symbols-outlined">refresh</span>
                 刷新
               </button>
-              <button class="btn btn-primary">
+              <button class="btn btn-primary" @click="openCreateProtocol">
                 <span class="material-symbols-outlined">add</span>
                 新建协议
               </button>
@@ -1878,7 +2003,7 @@ function unlockSidebarWidth() {
               <div class="protocol-header">
                 <div>
                   <div class="protocol-title">{{ card.name }}</div>
-                  <div class="protocol-sub">{{ card.desc }}</div>
+                  <div class="protocol-sub">{{ card.desc || '暂无描述' }}</div>
                 </div>
                 <span class="badge" :class="card.statusClass">{{ card.statusText }}</span>
               </div>
@@ -1889,23 +2014,29 @@ function unlockSidebarWidth() {
                 </div>
               </div>
               <div class="protocol-actions">
-                <button class="btn btn-ghost">配置</button>
-                <button class="icon-btn">
-                  <span class="material-symbols-outlined">more_horiz</span>
+                <button class="btn btn-ghost" @click="openProtocolDetails(card)">
+                  {{ card.source === 'custom' ? '配置' : '查看' }}
+                </button>
+                <button v-if="card.source === 'custom'" class="icon-btn" @click="openProtocolDelete(card)">
+                  <span class="material-symbols-outlined">delete</span>
                 </button>
               </div>
             </div>
             <div v-if="filteredProtocolCards.length === 0" class="protocol-card empty">
               <div class="empty-icon">
-                <span class="material-symbols-outlined">add</span>
+                <span class="material-symbols-outlined">inventory_2</span>
               </div>
-              <h3>从模板创建</h3>
-              <p>使用预设的 Modbus、MQTT 或 TCP 模板快速开始。</p>
+              <h3>暂无协议</h3>
+              <p>暂无可用协议，可从内置模板创建或新增自定义协议。</p>
+              <button class="btn btn-primary" @click="openCreateProtocol">
+                <span class="material-symbols-outlined">add</span>
+                新建协议
+              </button>
             </div>
           </div>
         </section>
 
-        <section v-else class="page">
+<section v-else class="page">
           <header class="page-header spaced">
             <div>
               <h2>应用设置</h2>
@@ -2158,6 +2289,86 @@ function unlockSidebarWidth() {
             </div>
           </div>
         </div>
+
+      <div <div v-if="protocolDialogOpen" class="modal-backdrop" @mousedown.self="closeProtocolDialog">
+        <div class="channel-modal" @mousedown.stop @click.stop>
+          <div class="modal-header">
+            <div>
+              <h3>{{ protocolDialogMode === 'create' ? '新建协议' : protocolDialogMode === 'edit' ? '配置协议' : '协议详情' }}</h3>
+              <p>{{ protocolDialogMode === 'create' ? '添加自定义协议元数据，供解析引擎识别。' : '查看或更新协议描述与分类。' }}</p>
+            </div>
+            <button class="icon-btn" type="button" @click="closeProtocolDialog">
+              <span class="material-symbols-outlined">close</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="form-grid">
+              <label>
+                协议名称
+                <input v-model="protocolDraft.name" type="text" :disabled="protocolDialogMode === 'view'" />
+              </label>
+              <label>
+                键名
+                <input v-model="protocolDraft.key" type="text" :disabled="protocolDialogMode !== 'create'" />
+              </label>
+            </div>
+            <div class="form-grid">
+              <label>
+                分类
+                <select v-model="protocolDraft.category" :disabled="protocolDialogMode === 'view'">
+                  <option value="modbus">Modbus</option>
+                  <option value="tcp">TCP/IP</option>
+                  <option value="custom">自定义</option>
+                </select>
+              </label>
+              <label>
+                状态
+                <select v-model="protocolDraft.status" :disabled="protocolDialogMode === 'view'">
+                  <option value="available">可用</option>
+                  <option value="custom">自定义</option>
+                  <option value="disabled">已禁用</option>
+                </select>
+              </label>
+            </div>
+            <label>
+              描述
+              <textarea v-model="protocolDraft.desc" rows="3" :disabled="protocolDialogMode === 'view'"></textarea>
+            </label>
+            <div class="modal-section" v-if="protocolEditing && protocolEditing.driver">
+              <div class="section-title">驱动</div>
+              <div class="form-grid">
+                <label>
+                  驱动类
+                  <input :value="protocolEditing.driver" type="text" disabled />
+                </label>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-outline" type="button" @click="closeProtocolDialog">取消</button>
+            <button v-if="protocolDialogMode !== 'view'" class="btn btn-primary" type="button" @click="saveProtocol">保存</button>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="protocolDeleteOpen" class="modal-backdrop" @mousedown.self="closeProtocolDelete">
+        <div class="quick-modal quick-modal-sm" @mousedown.stop @click.stop>
+          <div class="modal-header">
+            <div>
+              <h3>删除协议</h3>
+              <p>确认删除自定义协议“{{ protocolDeleting?.name }}”吗？</p>
+            </div>
+            <button class="icon-btn" type="button" @click="closeProtocolDelete">
+              <span class="material-symbols-outlined">close</span>
+            </button>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-outline" type="button" @click="closeProtocolDelete">取消</button>
+            <button class="btn btn-danger" type="button" @click="confirmProtocolDelete">确认删除</button>
+          </div>
+        </div>
+      </div>
+
       </main>
     </div>
 

From 8617be2b1626ef307bbab1cc4886fec77640eff8 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 05:55:28 +0800
Subject: [PATCH 22/36] feat(ui): polish protocol detail modal layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 协议详情弹窗优化为双列布局
  - 描述与驱动区域分组展示
  - 文本域与输入控件样式统一
- 影响
  - 协议详情页面信息更清晰易读
- 兼容/行为变更
  - 无
- 依赖/环境
  - 无
- 验证
  - 未运行（样式调整）

[English]
- Changes:
  - Refine protocol detail modal with a two-column layout
  - Group description and driver sections
  - Align textarea/input styling
- Impact:
  - Protocol detail view is clearer and easier to scan
- Compatibility/Behavior changes:
  - None
- Dependencies/Environment:
  - None
- Verification:
  - Not run (style tweaks)
Refs:
-
---
 frontend/src/App.vue   | 138 +++++++++++++++++++++--------------------
 frontend/src/style.css |  43 +++++++++++++
 2 files changed, 113 insertions(+), 68 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ee36e34..de910ea 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -2290,86 +2290,88 @@ function unlockSidebarWidth() {
           </div>
         </div>
 
-      <div <div v-if="protocolDialogOpen" class="modal-backdrop" @mousedown.self="closeProtocolDialog">
-        <div class="channel-modal" @mousedown.stop @click.stop>
-          <div class="modal-header">
-            <div>
-              <h3>{{ protocolDialogMode === 'create' ? '新建协议' : protocolDialogMode === 'edit' ? '配置协议' : '协议详情' }}</h3>
-              <p>{{ protocolDialogMode === 'create' ? '添加自定义协议元数据，供解析引擎识别。' : '查看或更新协议描述与分类。' }}</p>
-            </div>
-            <button class="icon-btn" type="button" @click="closeProtocolDialog">
-              <span class="material-symbols-outlined">close</span>
-            </button>
-          </div>
-          <div class="modal-body">
-            <div class="form-grid">
-              <label>
-                协议名称
-                <input v-model="protocolDraft.name" type="text" :disabled="protocolDialogMode === 'view'" />
-              </label>
-              <label>
-                键名
-                <input v-model="protocolDraft.key" type="text" :disabled="protocolDialogMode !== 'create'" />
-              </label>
-            </div>
-            <div class="form-grid">
-              <label>
-                分类
-                <select v-model="protocolDraft.category" :disabled="protocolDialogMode === 'view'">
-                  <option value="modbus">Modbus</option>
-                  <option value="tcp">TCP/IP</option>
-                  <option value="custom">自定义</option>
-                </select>
-              </label>
-              <label>
-                状态
-                <select v-model="protocolDraft.status" :disabled="protocolDialogMode === 'view'">
-                  <option value="available">可用</option>
-                  <option value="custom">自定义</option>
-                  <option value="disabled">已禁用</option>
-                </select>
-              </label>
+      <teleport to="body">
+        <div v-if="protocolDialogOpen" class="modal-backdrop" @mousedown.self="closeProtocolDialog">
+          <div class="channel-modal protocol-modal" @mousedown.stop @click.stop>
+            <div class="modal-header">
+              <div>
+                <h3>{{ protocolDialogMode === 'create' ? '新建协议' : protocolDialogMode === 'edit' ? '配置协议' : '协议详情' }}</h3>
+                <p>{{ protocolDialogMode === 'create' ? '添加自定义协议元数据，供解析引擎识别。' : '查看或更新协议描述与分类。' }}</p>
+              </div>
+              <button class="icon-btn" type="button" @click="closeProtocolDialog">
+                <span class="material-symbols-outlined">close</span>
+              </button>
             </div>
-            <label>
-              描述
-              <textarea v-model="protocolDraft.desc" rows="3" :disabled="protocolDialogMode === 'view'"></textarea>
-            </label>
-            <div class="modal-section" v-if="protocolEditing && protocolEditing.driver">
-              <div class="section-title">驱动</div>
-              <div class="form-grid">
+            <div class="modal-body protocol-modal-body">
+              <div class="form-grid protocol-grid">
+                <label>
+                  协议名称
+                  <input v-model="protocolDraft.name" type="text" :disabled="protocolDialogMode === 'view'" />
+                </label>
+                <label>
+                  键名
+                  <input v-model="protocolDraft.key" type="text" :disabled="protocolDialogMode !== 'create'" />
+                </label>
+              </div>
+              <div class="form-grid protocol-grid">
+                <label>
+                  分类
+                  <select v-model="protocolDraft.category" :disabled="protocolDialogMode === 'view'">
+                    <option value="modbus">Modbus</option>
+                    <option value="tcp">TCP/IP</option>
+                    <option value="custom">自定义</option>
+                  </select>
+                </label>
                 <label>
-                  驱动类
-                  <input :value="protocolEditing.driver" type="text" disabled />
+                  状态
+                  <select v-model="protocolDraft.status" :disabled="protocolDialogMode === 'view'">
+                    <option value="available">可用</option>
+                    <option value="custom">自定义</option>
+                    <option value="disabled">已禁用</option>
+                  </select>
                 </label>
               </div>
+              <label class="protocol-textarea">
+                描述
+                <textarea v-model="protocolDraft.desc" rows="3" :disabled="protocolDialogMode === 'view'"></textarea>
+              </label>
+              <div class="modal-section protocol-driver" v-if="protocolEditing && protocolEditing.driver">
+                <div class="section-title">驱动</div>
+                <div class="form-grid protocol-grid">
+                  <label>
+                    驱动类
+                    <input :value="protocolEditing.driver" type="text" disabled />
+                  </label>
+                </div>
+              </div>
+            </div>
+            <div class="modal-footer">
+              <button class="btn btn-outline" type="button" @click="closeProtocolDialog">取消</button>
+              <button v-if="protocolDialogMode !== 'view'" class="btn btn-primary" type="button" @click="saveProtocol">保存</button>
             </div>
-          </div>
-          <div class="modal-footer">
-            <button class="btn btn-outline" type="button" @click="closeProtocolDialog">取消</button>
-            <button v-if="protocolDialogMode !== 'view'" class="btn btn-primary" type="button" @click="saveProtocol">保存</button>
           </div>
         </div>
-      </div>
 
-      <div v-if="protocolDeleteOpen" class="modal-backdrop" @mousedown.self="closeProtocolDelete">
-        <div class="quick-modal quick-modal-sm" @mousedown.stop @click.stop>
-          <div class="modal-header">
-            <div>
-              <h3>删除协议</h3>
-              <p>确认删除自定义协议“{{ protocolDeleting?.name }}”吗？</p>
+        <div v-if="protocolDeleteOpen" class="modal-backdrop" @mousedown.self="closeProtocolDelete">
+          <div class="quick-modal quick-modal-sm" @mousedown.stop @click.stop>
+            <div class="modal-header">
+              <div>
+                <h3>删除协议</h3>
+                <p>确认删除自定义协议“{{ protocolDeleting?.name }}”吗？</p>
+              </div>
+              <button class="icon-btn" type="button" @click="closeProtocolDelete">
+                <span class="material-symbols-outlined">close</span>
+              </button>
+            </div>
+            <div class="modal-footer">
+              <button class="btn btn-outline" type="button" @click="closeProtocolDelete">取消</button>
+              <button class="btn btn-danger" type="button" @click="confirmProtocolDelete">确认删除</button>
             </div>
-            <button class="icon-btn" type="button" @click="closeProtocolDelete">
-              <span class="material-symbols-outlined">close</span>
-            </button>
-          </div>
-          <div class="modal-footer">
-            <button class="btn btn-outline" type="button" @click="closeProtocolDelete">取消</button>
-            <button class="btn btn-danger" type="button" @click="confirmProtocolDelete">确认删除</button>
           </div>
         </div>
-      </div>
+      </teleport>
 
-      </main>
+</main>
     </div>
 
     <div v-if="snapPreview" class="snap-overlay" :class="`snap-${snapPreview}`"></div>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 5097dfd..c94614b 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -2180,6 +2180,49 @@ textarea {
   box-shadow: 0 0 0 2px rgba(25, 93, 230, 0.1);
 }
 
+.protocol-modal-body {
+  gap: 20px;
+}
+
+.protocol-modal .modal-header h3 {
+  font-size: 18px;
+}
+
+.protocol-grid {
+  grid-template-columns: repeat(2, minmax(240px, 1fr));
+}
+
+.protocol-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.protocol-textarea textarea {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px 14px;
+  font-size: 13px;
+  background: #f8fafc;
+  min-height: 96px;
+  resize: vertical;
+  outline: none;
+}
+
+.protocol-textarea textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px rgba(25, 93, 230, 0.1);
+}
+
+.protocol-driver {
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 12px;
+}
+
 .section-title {
   font-size: 12px;
   font-weight: 700;

From c97a2a528176a9de43c317e3928a88d0f046f88f Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 07:54:04 +0800
Subject: [PATCH 23/36] feat(ui-kit): add Stitch componentized library
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 引入 Stitch HTML 拆分后的 UI 组件库
  - 新增 inputs/actions/容器与终端面板组件
- 影响
  - 为 DSL 渲染器提供可复用组件基础
- 兼容/行为变更
  - 无
- 依赖/环境
  - 无
- 验证
  - 未运行（仅组件引入）

[English]
- Changes:
  - Add componentized Stitch UI kit
  - Include inputs/actions containers and event log panel
- Impact:
  - Provides reusable components for the DSL renderer
- Compatibility/Behavior changes:
  - None
- Dependencies/Environment:
  - None
- Verification:
  - Not run (component import only)
Refs:
-
---
 frontend/src/components/ui-kit/AppShell.vue   | 27 +++++++++++++
 .../src/components/ui-kit/EventLogPanel.vue   | 35 +++++++++++++++++
 frontend/src/components/ui-kit/PanelCard.vue  | 35 +++++++++++++++++
 frontend/src/components/ui-kit/TopBar.vue     | 31 +++++++++++++++
 .../ui-kit/actions/BatchActionGroup.vue       | 20 ++++++++++
 .../ui-kit/actions/ConfirmDangerButton.vue    | 21 ++++++++++
 .../ui-kit/actions/DropdownAction.vue         | 13 +++++++
 .../components/ui-kit/actions/GhostButton.vue |  9 +++++
 .../ui-kit/actions/PrimaryButton.vue          |  9 +++++
 .../ui-kit/actions/SecondaryButton.vue        |  9 +++++
 .../ui-kit/inputs/CheckboxGroup.vue           | 38 +++++++++++++++++++
 .../components/ui-kit/inputs/ColorInput.vue   | 20 ++++++++++
 .../ui-kit/inputs/DateTimeInput.vue           | 17 +++++++++
 .../ui-kit/inputs/KeybindRecorder.vue         | 24 ++++++++++++
 .../ui-kit/inputs/MultiSelectChips.vue        | 27 +++++++++++++
 .../components/ui-kit/inputs/NumberInput.vue  | 18 +++++++++
 .../components/ui-kit/inputs/PathPicker.vue   | 22 +++++++++++
 .../components/ui-kit/inputs/RadioGroup.vue   | 30 +++++++++++++++
 .../components/ui-kit/inputs/SelectInput.vue  | 25 ++++++++++++
 .../components/ui-kit/inputs/SliderInput.vue  | 20 ++++++++++
 .../components/ui-kit/inputs/SwitchInput.vue  | 21 ++++++++++
 .../components/ui-kit/inputs/TextInput.vue    | 18 +++++++++
 .../ui-kit/inputs/TextareaInput.vue           | 18 +++++++++
 23 files changed, 507 insertions(+)
 create mode 100644 frontend/src/components/ui-kit/AppShell.vue
 create mode 100644 frontend/src/components/ui-kit/EventLogPanel.vue
 create mode 100644 frontend/src/components/ui-kit/PanelCard.vue
 create mode 100644 frontend/src/components/ui-kit/TopBar.vue
 create mode 100644 frontend/src/components/ui-kit/actions/BatchActionGroup.vue
 create mode 100644 frontend/src/components/ui-kit/actions/ConfirmDangerButton.vue
 create mode 100644 frontend/src/components/ui-kit/actions/DropdownAction.vue
 create mode 100644 frontend/src/components/ui-kit/actions/GhostButton.vue
 create mode 100644 frontend/src/components/ui-kit/actions/PrimaryButton.vue
 create mode 100644 frontend/src/components/ui-kit/actions/SecondaryButton.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/CheckboxGroup.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/ColorInput.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/DateTimeInput.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/KeybindRecorder.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/MultiSelectChips.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/NumberInput.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/PathPicker.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/RadioGroup.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/SelectInput.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/SliderInput.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/SwitchInput.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/TextInput.vue
 create mode 100644 frontend/src/components/ui-kit/inputs/TextareaInput.vue

diff --git a/frontend/src/components/ui-kit/AppShell.vue b/frontend/src/components/ui-kit/AppShell.vue
new file mode 100644
index 0000000..d7d07eb
--- /dev/null
+++ b/frontend/src/components/ui-kit/AppShell.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="flex flex-col min-h-screen text-slate-900">
+    <header class="sticky top-0 z-50 flex items-center justify-between border-b border-slate-200 bg-white/80 backdrop-blur-md px-8 py-4">
+      <slot name="header"></slot>
+    </header>
+    <main class="flex-1 p-8 max-w-[1600px] mx-auto w-full">
+      <slot></slot>
+    </main>
+    <footer class="bg-white border-t border-slate-200 px-8 py-3 flex items-center justify-between">
+      <div class="flex gap-6 items-center">
+        <div class="flex items-center gap-2">
+          <div class="size-2 rounded-full bg-emerald-500"></div>
+          <span class="text-[11px] font-bold text-slate-500 uppercase tracking-widest">Library Sync OK</span>
+        </div>
+        <div class="h-4 w-px bg-slate-200"></div>
+        <div class="flex items-center gap-4">
+          <span class="text-[11px] font-medium text-slate-400">版本: 1.0.3-beta</span>
+          <span class="text-[11px] font-medium text-slate-400">编译日期: 2024-05-20</span>
+        </div>
+      </div>
+      <div class="flex gap-4">
+        <button class="text-[11px] font-bold text-primary hover:underline">文档中心</button>
+        <button class="text-[11px] font-bold text-slate-400">问题反馈</button>
+      </div>
+    </footer>
+  </div>
+</template>
diff --git a/frontend/src/components/ui-kit/EventLogPanel.vue b/frontend/src/components/ui-kit/EventLogPanel.vue
new file mode 100644
index 0000000..159333f
--- /dev/null
+++ b/frontend/src/components/ui-kit/EventLogPanel.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="bg-slate-900 rounded-xl p-6 text-slate-300">
+    <div class="flex items-center justify-between mb-3">
+      <div class="flex items-center gap-2">
+        <span class="material-symbols-outlined text-primary">terminal</span>
+        <h4 class="text-sm font-bold text-white">{{ title }}</h4>
+      </div>
+      <button class="text-xs text-slate-400 hover:text-white" @click="copy">Copy</button>
+    </div>
+    <pre class="text-[10px] font-mono leading-relaxed bg-slate-800/50 p-3 rounded-lg border border-slate-700">{{ formatted }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ title: string; value: string | Record<string, unknown> }>()
+
+const formatted = computed(() => {
+  if (typeof props.value === 'string') return props.value
+  try {
+    return JSON.stringify(props.value, null, 2)
+  } catch (error) {
+    return String(props.value)
+  }
+})
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(formatted.value)
+  } catch {
+    // TODO: add fallback copy
+  }
+}
+</script>
diff --git a/frontend/src/components/ui-kit/PanelCard.vue b/frontend/src/components/ui-kit/PanelCard.vue
new file mode 100644
index 0000000..9f4bd20
--- /dev/null
+++ b/frontend/src/components/ui-kit/PanelCard.vue
@@ -0,0 +1,35 @@
+<template>
+  <section class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
+    <div v-if="title" class="px-6 py-4 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <h3 class="font-bold text-slate-700 text-sm">{{ title }}</h3>
+        <span v-if="badgeText" :class="badgeClass" class="text-[10px] px-2 py-0.5 rounded font-bold">{{ badgeText }}</span>
+      </div>
+      <slot name="headerExtra"></slot>
+    </div>
+    <div class="p-6">
+      <slot></slot>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  title?: string
+  badgeText?: string
+  badgeTone?: 'blue' | 'emerald' | 'slate' | 'rose'
+}>()
+
+const badgeClass = computed(() => {
+  const tone = props.badgeTone || 'blue'
+  const map: Record<string, string> = {
+    blue: 'bg-blue-100 text-blue-700',
+    emerald: 'bg-emerald-100 text-emerald-700',
+    slate: 'bg-slate-100 text-slate-600',
+    rose: 'bg-rose-100 text-rose-700',
+  }
+  return map[tone]
+})
+</script>
diff --git a/frontend/src/components/ui-kit/TopBar.vue b/frontend/src/components/ui-kit/TopBar.vue
new file mode 100644
index 0000000..0e84284
--- /dev/null
+++ b/frontend/src/components/ui-kit/TopBar.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="flex items-center justify-between w-full">
+    <div class="flex items-center gap-4">
+      <div class="bg-primary p-2 rounded-xl text-white">
+        <span class="material-symbols-outlined !text-2xl">component_exchange</span>
+      </div>
+      <div>
+        <h1 class="text-xl font-bold tracking-tight text-slate-900">{{ title }}</h1>
+        <p class="text-xs text-slate-500 font-medium uppercase tracking-wider">{{ subtitle }}</p>
+      </div>
+    </div>
+    <div class="flex items-center gap-3">
+      <div class="flex items-center gap-2 px-3 py-1.5 bg-slate-100 rounded-lg border border-slate-200">
+        <span class="size-2 rounded-full bg-emerald-500 animate-pulse"></span>
+        <span class="text-xs font-bold text-slate-600">{{ modeLabel }}</span>
+      </div>
+      <button
+        class="flex items-center gap-2 px-4 py-2 bg-primary text-white text-sm font-semibold rounded-lg shadow-sm hover:bg-blue-700 transition-colors"
+        @click="$emit('publish')"
+      >
+        <span class="material-symbols-outlined !text-sm">publish</span>
+        <span>发布规格页</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ title: string; subtitle: string; modeLabel: string }>()
+defineEmits<{ (e: 'publish'): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/actions/BatchActionGroup.vue b/frontend/src/components/ui-kit/actions/BatchActionGroup.vue
new file mode 100644
index 0000000..f648686
--- /dev/null
+++ b/frontend/src/components/ui-kit/actions/BatchActionGroup.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="flex items-center bg-slate-100 p-1 rounded-xl">
+    <button class="flex-1 flex items-center justify-center gap-1.5 py-2 bg-white shadow-sm rounded-lg text-xs font-bold text-slate-700" @click="$emit('run')">
+      <span class="material-symbols-outlined !text-sm text-emerald-500">play_arrow</span>
+      批量运行
+    </button>
+    <button class="flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-bold text-slate-500 hover:text-slate-700" @click="$emit('pause')">
+      <span class="material-symbols-outlined !text-sm">pause</span>
+      暂停
+    </button>
+    <button class="flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-bold text-slate-500 hover:text-slate-700" @click="$emit('reset')">
+      <span class="material-symbols-outlined !text-sm">restart_alt</span>
+      重置
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits<{ (e: 'run'): void; (e: 'pause'): void; (e: 'reset'): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/actions/ConfirmDangerButton.vue b/frontend/src/components/ui-kit/actions/ConfirmDangerButton.vue
new file mode 100644
index 0000000..f870139
--- /dev/null
+++ b/frontend/src/components/ui-kit/actions/ConfirmDangerButton.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="relative group">
+    <button
+      class="w-full py-2.5 bg-rose-50 text-rose-600 border border-rose-200 rounded-lg text-sm font-bold flex items-center justify-center gap-2 hover:bg-rose-100 transition-all"
+      @click="$emit('confirm')"
+    >
+      <span class="material-symbols-outlined !text-lg">delete_forever</span>
+      {{ label }}
+    </button>
+    <div class="absolute -top-12 left-1/2 -translate-x-1/2 hidden group-hover:flex items-center gap-2 px-3 py-1.5 bg-slate-900 text-white text-[10px] rounded-lg shadow-xl whitespace-nowrap">
+      <span class="material-symbols-outlined !text-[12px] text-amber-400">warning</span>
+      {{ hint }}
+      <div class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 bg-slate-900 rotate-45"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ label: string; hint: string }>()
+defineEmits<{ (e: 'confirm'): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/actions/DropdownAction.vue b/frontend/src/components/ui-kit/actions/DropdownAction.vue
new file mode 100644
index 0000000..6cc4a9c
--- /dev/null
+++ b/frontend/src/components/ui-kit/actions/DropdownAction.vue
@@ -0,0 +1,13 @@
+<template>
+  <button
+    class="w-full flex items-center justify-between px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-semibold"
+    @click="$emit('open')"
+  >
+    <span><slot>导出数据格式</slot></span>
+    <span class="material-symbols-outlined">expand_more</span>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineEmits<{ (e: 'open'): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/actions/GhostButton.vue b/frontend/src/components/ui-kit/actions/GhostButton.vue
new file mode 100644
index 0000000..b8037f2
--- /dev/null
+++ b/frontend/src/components/ui-kit/actions/GhostButton.vue
@@ -0,0 +1,9 @@
+<template>
+  <button class="w-full py-2.5 text-slate-500 font-bold text-sm rounded-lg hover:bg-slate-100 transition-all" @click="$emit('click')">
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineEmits<{ (e: 'click'): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/actions/PrimaryButton.vue b/frontend/src/components/ui-kit/actions/PrimaryButton.vue
new file mode 100644
index 0000000..05a457f
--- /dev/null
+++ b/frontend/src/components/ui-kit/actions/PrimaryButton.vue
@@ -0,0 +1,9 @@
+<template>
+  <button class="w-full py-2.5 bg-primary text-white font-bold text-sm rounded-lg hover:bg-blue-700 transition-all shadow-sm" @click="$emit('click')">
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineEmits<{ (e: 'click'): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/actions/SecondaryButton.vue b/frontend/src/components/ui-kit/actions/SecondaryButton.vue
new file mode 100644
index 0000000..423edcb
--- /dev/null
+++ b/frontend/src/components/ui-kit/actions/SecondaryButton.vue
@@ -0,0 +1,9 @@
+<template>
+  <button class="w-full py-2.5 bg-white border border-slate-200 text-slate-700 font-bold text-sm rounded-lg hover:bg-slate-50 transition-all" @click="$emit('click')">
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineEmits<{ (e: 'click'): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/CheckboxGroup.vue b/frontend/src/components/ui-kit/inputs/CheckboxGroup.vue
new file mode 100644
index 0000000..3e40b42
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/CheckboxGroup.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="space-y-2">
+    <label class="text-xs font-bold text-slate-500">{{ label }}</label>
+    <div class="flex gap-4">
+      <label v-for="option in options" :key="option.value" class="flex items-center gap-2 cursor-pointer">
+        <input
+          class="rounded text-primary focus:ring-primary/20 border-slate-300"
+          type="checkbox"
+          :value="option.value"
+          :checked="modelValue.includes(option.value)"
+          :disabled="disabled"
+          @change="toggle(option.value)"
+        />
+        <span class="text-sm">{{ option.label }}</span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  modelValue: string[]
+  options: { label: string; value: string }[]
+  disabled?: boolean
+  hint?: string
+}>()
+
+const emit = defineEmits<{ (e: 'update:modelValue', value: string[]): void }>()
+
+function toggle(value: string) {
+  if (props.disabled) return
+  const next = props.modelValue.includes(value)
+    ? props.modelValue.filter((item) => item !== value)
+    : [...props.modelValue, value]
+  emit('update:modelValue', next)
+}
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/ColorInput.vue b/frontend/src/components/ui-kit/inputs/ColorInput.vue
new file mode 100644
index 0000000..2d19279
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/ColorInput.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="space-y-2">
+    <label class="text-xs font-bold text-slate-500">{{ label }}</label>
+    <div class="flex items-center gap-3">
+      <input
+        class="size-10 rounded-lg border-none p-0 cursor-pointer overflow-hidden"
+        type="color"
+        :disabled="disabled"
+        :value="modelValue"
+        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      />
+      <span class="text-xs font-mono text-slate-500">HEX: {{ modelValue.toUpperCase() }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ label: string; modelValue: string; disabled?: boolean; hint?: string }>()
+defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/DateTimeInput.vue b/frontend/src/components/ui-kit/inputs/DateTimeInput.vue
new file mode 100644
index 0000000..536d4aa
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/DateTimeInput.vue
@@ -0,0 +1,17 @@
+<template>
+  <label class="space-y-2 block">
+    <span class="text-xs font-bold text-slate-500">{{ label }}</span>
+    <input
+      class="w-full h-10 px-3 rounded-lg border-slate-200 text-sm focus:border-primary"
+      type="datetime-local"
+      :disabled="disabled"
+      :value="modelValue"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{ label: string; modelValue: string; disabled?: boolean; hint?: string }>()
+defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/KeybindRecorder.vue b/frontend/src/components/ui-kit/inputs/KeybindRecorder.vue
new file mode 100644
index 0000000..ad115e3
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/KeybindRecorder.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="space-y-2">
+    <label class="text-xs font-bold text-slate-500">{{ label }}</label>
+    <div
+      class="flex items-center justify-between h-10 px-4 bg-slate-900 text-white rounded-lg group cursor-pointer hover:ring-2 hover:ring-primary/50 transition-all"
+      @click="$emit('startRecord')"
+    >
+      <div class="flex gap-1">
+        <kbd v-for="(key, index) in keys" :key="index" class="px-1.5 py-0.5 bg-slate-700 rounded text-[10px] font-bold">
+          {{ key }}
+        </kbd>
+      </div>
+      <span class="material-symbols-outlined !text-sm text-slate-500 group-hover:text-white">keyboard</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ label: string; modelValue: string[]; disabled?: boolean; hint?: string }>()
+
+defineEmits<{ (e: 'startRecord'): void }>()
+
+const keys = props.modelValue.length ? props.modelValue : ['Ctrl', 'Shift', 'P']
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue b/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue
new file mode 100644
index 0000000..bd41d4a
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="space-y-2">
+    <label class="text-xs font-bold text-slate-500">{{ label }}</label>
+    <div class="w-full p-2 border border-slate-200 rounded-lg flex flex-wrap gap-2 min-h-[40px] items-center">
+      <span
+        v-for="chip in modelValue"
+        :key="chip"
+        class="flex items-center gap-1 px-2 py-0.5 bg-slate-100 rounded text-xs font-medium text-slate-600"
+      >
+        {{ chip }}
+        <span class="material-symbols-outlined !text-[12px] cursor-pointer" @click="removeChip(chip)">close</span>
+      </span>
+      <span class="text-xs text-slate-300 ml-1 italic">输入搜索...</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ label: string; modelValue: string[]; disabled?: boolean; hint?: string }>()
+const emit = defineEmits<{ (e: 'update:modelValue', value: string[]): void }>()
+
+function removeChip(chip: string) {
+  if (props.disabled) return
+  emit('update:modelValue', props.modelValue.filter((item) => item !== chip))
+  // TODO: emit add/remove events once selection logic is wired
+}
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/NumberInput.vue b/frontend/src/components/ui-kit/inputs/NumberInput.vue
new file mode 100644
index 0000000..ffdda04
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/NumberInput.vue
@@ -0,0 +1,18 @@
+<template>
+  <label class="space-y-2 block">
+    <span class="text-xs font-bold text-slate-500">{{ label }}</span>
+    <input
+      class="w-full h-10 px-3 rounded-lg border-slate-200 text-sm focus:border-primary focus:ring-4 focus:ring-primary/10"
+      type="number"
+      :placeholder="hint"
+      :disabled="disabled"
+      :value="modelValue"
+      @input="$emit('update:modelValue', Number(($event.target as HTMLInputElement).value))"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{ label: string; modelValue: number; disabled?: boolean; hint?: string }>()
+defineEmits<{ (e: 'update:modelValue', value: number): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/PathPicker.vue b/frontend/src/components/ui-kit/inputs/PathPicker.vue
new file mode 100644
index 0000000..7fad220
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/PathPicker.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="space-y-2">
+    <label class="text-xs font-bold text-slate-500">{{ label }}</label>
+    <div class="flex gap-2">
+      <div class="flex-1 flex items-center h-10 px-3 bg-slate-50 border border-slate-200 rounded-lg text-xs text-slate-500 overflow-hidden truncate">
+        {{ modelValue || hint || '选择路径' }}
+      </div>
+      <button
+        class="px-3 h-10 bg-slate-100 border border-slate-200 rounded-lg text-xs font-bold hover:bg-slate-200"
+        type="button"
+        @click="$emit('browse')"
+      >
+        浏览...
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ label: string; modelValue: string; disabled?: boolean; hint?: string }>()
+defineEmits<{ (e: 'browse'): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/RadioGroup.vue b/frontend/src/components/ui-kit/inputs/RadioGroup.vue
new file mode 100644
index 0000000..1f16a37
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/RadioGroup.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="space-y-2">
+    <label class="text-xs font-bold text-slate-500">{{ label }}</label>
+    <div class="flex gap-4">
+      <label v-for="option in options" :key="option.value" class="flex items-center gap-2 cursor-pointer">
+        <input
+          class="text-primary focus:ring-primary/20 border-slate-300"
+          type="radio"
+          :value="option.value"
+          :checked="modelValue === option.value"
+          :disabled="disabled"
+          @change="$emit('update:modelValue', option.value)"
+        />
+        <span class="text-sm">{{ option.label }}</span>
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string
+  modelValue: string
+  options: { label: string; value: string }[]
+  disabled?: boolean
+  hint?: string
+}>()
+
+defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/SelectInput.vue b/frontend/src/components/ui-kit/inputs/SelectInput.vue
new file mode 100644
index 0000000..79e900f
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/SelectInput.vue
@@ -0,0 +1,25 @@
+<template>
+  <label class="space-y-2 block">
+    <span class="text-xs font-bold text-slate-500">{{ label }}</span>
+    <select
+      class="w-full h-10 px-3 rounded-lg border-slate-200 text-sm bg-slate-50"
+      :disabled="disabled"
+      :value="modelValue"
+      @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
+    >
+      <option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option>
+    </select>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string
+  modelValue: string
+  options: { label: string; value: string }[]
+  disabled?: boolean
+  hint?: string
+}>()
+
+defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/SliderInput.vue b/frontend/src/components/ui-kit/inputs/SliderInput.vue
new file mode 100644
index 0000000..ab6ee7e
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/SliderInput.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="space-y-3">
+    <label class="text-xs font-bold text-slate-500">{{ label }}</label>
+    <div class="flex items-center gap-4">
+      <input
+        class="flex-1 h-1.5 bg-slate-100 rounded-lg appearance-none cursor-pointer accent-primary"
+        type="range"
+        :disabled="disabled"
+        :value="modelValue"
+        @input="$emit('update:modelValue', Number(($event.target as HTMLInputElement).value))"
+      />
+      <span class="text-xs font-mono font-bold text-primary bg-blue-50 px-2 py-1 rounded">{{ modelValue }}%</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ label: string; modelValue: number; disabled?: boolean; hint?: string }>()
+defineEmits<{ (e: 'update:modelValue', value: number): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/SwitchInput.vue b/frontend/src/components/ui-kit/inputs/SwitchInput.vue
new file mode 100644
index 0000000..0196d19
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/SwitchInput.vue
@@ -0,0 +1,21 @@
+<template>
+  <div class="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
+    <label class="text-sm font-medium text-slate-700">{{ label }}</label>
+    <button
+      class="relative inline-flex h-6 w-11 items-center rounded-full transition"
+      :class="modelValue ? 'bg-primary' : 'bg-slate-300'"
+      :disabled="disabled"
+      @click="$emit('update:modelValue', !modelValue)"
+    >
+      <span
+        class="inline-block h-4 w-4 transform rounded-full bg-white transition"
+        :class="modelValue ? 'translate-x-6' : 'translate-x-1'"
+      ></span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ label: string; modelValue: boolean; disabled?: boolean; hint?: string }>()
+defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/TextInput.vue b/frontend/src/components/ui-kit/inputs/TextInput.vue
new file mode 100644
index 0000000..11877ad
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/TextInput.vue
@@ -0,0 +1,18 @@
+<template>
+  <label class="space-y-2 block">
+    <span class="text-xs font-bold text-slate-500">{{ label }}</span>
+    <input
+      class="w-full h-10 px-3 rounded-lg border-slate-200 text-sm focus:border-primary focus:ring-4 focus:ring-primary/10 transition-all"
+      type="text"
+      :placeholder="hint"
+      :disabled="disabled"
+      :value="modelValue ?? ''"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{ label: string; modelValue: string; disabled?: boolean; hint?: string }>()
+defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+</script>
diff --git a/frontend/src/components/ui-kit/inputs/TextareaInput.vue b/frontend/src/components/ui-kit/inputs/TextareaInput.vue
new file mode 100644
index 0000000..87bab37
--- /dev/null
+++ b/frontend/src/components/ui-kit/inputs/TextareaInput.vue
@@ -0,0 +1,18 @@
+<template>
+  <label class="space-y-2 block">
+    <span class="text-xs font-bold text-slate-500">{{ label }}</span>
+    <textarea
+      class="w-full p-3 rounded-lg border-slate-200 text-sm focus:border-primary focus:ring-4 focus:ring-primary/10"
+      rows="3"
+      :placeholder="hint"
+      :disabled="disabled"
+      :value="modelValue"
+      @input="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
+    ></textarea>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{ label: string; modelValue: string; disabled?: boolean; hint?: string }>()
+defineEmits<{ (e: 'update:modelValue', value: string): void }>()
+</script>

From 142048c2b4b66f47b6c318a8f2e5b32d107d877d Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 08:21:31 +0800
Subject: [PATCH 24/36] feat(ui): add yaml ui runtime renderer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 功能
  - 新增 YAML UI 解析/校验与渲染引擎
  - 实时编辑与防抖校验，错误提示保留上次渲染
  - 引入 Pinia 运行时与事件日志/Inspector
  - 增加组件注册表与 Split 容器
- 影响
  - 前端支持基于 YAML 的 UI 实时渲染
- 兼容/行为变更
  - 新增 js-yaml/zod/pinia 依赖与 Vite alias
- 依赖/环境
  - 无
- 验证
  - 未运行（功能接入）

[English]
- Changes:
  - Add YAML UI parse/validate/render pipeline
  - Live editor with debounced validation and error state retention
  - Add Pinia runtime, inspector, and event log
  - Add widget registry and split container
- Impact:
  - Frontend can render YAML-driven UI in real time
- Compatibility/Behavior changes:
  - Add js-yaml/zod/pinia deps and Vite alias
- Dependencies/Environment:
  - None
- Verification:
  - Not run (feature wiring)
Refs:
-
---
 frontend/package.json                         |   5 +-
 frontend/src/App.vue                          |  16 ++-
 frontend/src/components/YamlUiLab.vue         |  67 ++++++++++
 .../src/components/ui-kit/InspectorJSON.vue   |  34 +++++
 .../src/components/ui-kit/SplitContainer.vue  |  12 ++
 frontend/src/main.js                          |   5 +-
 frontend/src/stores/uiRuntime.ts              | 120 ++++++++++++++++++
 frontend/src/ui/LayoutRenderer.vue            | 120 ++++++++++++++++++
 frontend/src/ui/UnknownWidget.vue             |  11 ++
 frontend/src/ui/registry.ts                   |  25 ++++
 frontend/src/ui/schema.ts                     |  98 ++++++++++++++
 frontend/src/ui/yaml.ts                       |  22 ++++
 frontend/tailwind.config.js                   |   6 +-
 frontend/vite.config.js                       |   6 +
 14 files changed, 539 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/YamlUiLab.vue
 create mode 100644 frontend/src/components/ui-kit/InspectorJSON.vue
 create mode 100644 frontend/src/components/ui-kit/SplitContainer.vue
 create mode 100644 frontend/src/stores/uiRuntime.ts
 create mode 100644 frontend/src/ui/LayoutRenderer.vue
 create mode 100644 frontend/src/ui/UnknownWidget.vue
 create mode 100644 frontend/src/ui/registry.ts
 create mode 100644 frontend/src/ui/schema.ts
 create mode 100644 frontend/src/ui/yaml.ts

diff --git a/frontend/package.json b/frontend/package.json
index 63e253a..64c8ecf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,10 @@
     "@element-plus/icons-vue": "^2.3.2",
     "codemirror": "^6.0.2",
     "element-plus": "^2.13.0",
-    "vue": "^3.5.24"
+    "vue": "^3.5.24",
+    "pinia": "^2.2.2",
+    "js-yaml": "^4.1.0",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index de910ea..70a5fa7 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,6 +7,7 @@ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { tags } from '@lezer/highlight'
 import ManualView from './components/ManualView.vue'
 import ScriptsView from './components/ScriptsView.vue'
+import YamlUiLab from './components/YamlUiLab.vue'
 import ProxyMonitorView from './components/ProxyMonitorView.vue'
 import DropdownSelect from './components/DropdownSelect.vue'
 import { yaml as yamlLanguage } from '@codemirror/lang-yaml'
@@ -1936,24 +1937,28 @@ function unlockSidebarWidth() {
         <nav class="sidebar-nav">
           <button class="nav-item" :class="{ active: currentView === 'manual' }" @click="currentView = 'manual'">
             <span class="material-symbols-outlined">terminal</span>
-          <span>串口终端</span>
+            <span>????</span>
           </button>
           <button class="nav-item" :class="{ active: currentView === 'scripts' }" @click="currentView = 'scripts'">
             <span class="material-symbols-outlined">smart_toy</span>
-            <span>自动脚本</span>
+            <span>????</span>
+          </button>
+          <button class="nav-item" :class="{ active: currentView === 'ui-lab' }" @click="currentView = 'ui-lab'">
+            <span class="material-symbols-outlined">dashboard_customize</span>
+            <span>YAML UI</span>
           </button>
           <button class="nav-item" :class="{ active: currentView === 'proxy' }" @click="currentView = 'proxy'">
             <span class="material-symbols-outlined">settings_input_hdmi</span>
-            <span>代理监控</span>
+            <span>????</span>
           </button>
           <button class="nav-item" :class="{ active: currentView === 'protocols' }" @click="currentView = 'protocols'">
             <span class="material-symbols-outlined">cable</span>
-            <span>协议</span>
+            <span>??</span>
           </button>
           <div class="nav-divider"></div>
           <button class="nav-item" :class="{ active: currentView === 'settings' }" @click="currentView = 'settings'">
             <span class="material-symbols-outlined">settings</span>
-            <span>设置</span>
+            <span>??</span>
           </button>
         </nav>
         <div class="sidebar-footer">
@@ -1968,6 +1973,7 @@ function unlockSidebarWidth() {
       <main class="main">
         <ManualView v-if="currentView === 'manual'" />
         <ScriptsView v-else-if="currentView === 'scripts'" />
+        <YamlUiLab v-else-if="currentView === 'ui-lab'" />
         <ProxyMonitorView
           v-else-if="currentView === 'proxy'"
           :capture-frames="captureFrames"
diff --git a/frontend/src/components/YamlUiLab.vue b/frontend/src/components/YamlUiLab.vue
new file mode 100644
index 0000000..eefb9e9
--- /dev/null
+++ b/frontend/src/components/YamlUiLab.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="grid grid-cols-12 gap-6">
+    <section class="col-span-12 lg:col-span-5 bg-white rounded-xl border border-slate-200 shadow-sm p-5 space-y-4">
+      <div class="flex items-center justify-between">
+        <h2 class="text-sm font-bold text-slate-800">YAML UI 编辑器</h2>
+        <span class="text-xs text-slate-400">实时渲染</span>
+      </div>
+      <textarea
+        class="w-full min-h-[520px] p-3 rounded-lg border border-slate-200 font-mono text-xs text-slate-700 focus:border-primary focus:ring-4 focus:ring-primary/10"
+        :value="store.yamlText"
+        @input="handleInput"
+      ></textarea>
+      <div v-if="store.parseError" class="text-xs text-rose-600 bg-rose-50 border border-rose-200 rounded-lg p-3">
+        <div class="font-bold">解析错误</div>
+        <div>{{ store.parseError.message }}</div>
+        <div v-if="store.parseError.path" class="mt-1">路径: {{ store.parseError.path }}</div>
+        <div v-if="store.parseError.line">行 {{ store.parseError.line }} 列 {{ store.parseError.column }}</div>
+      </div>
+    </section>
+
+    <section class="col-span-12 lg:col-span-7 space-y-6">
+      <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
+        <LayoutRenderer
+          v-if="store.lastGoodConfig"
+          :config="store.lastGoodConfig"
+          :widgets-by-id="store.widgetsById"
+        />
+        <div v-else class="text-sm text-slate-400">等待 YAML 配置...</div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <InspectorJSON
+          title="Widget Inspector"
+          :value="selectedWidget"
+        />
+        <EventLogPanel
+          title="Event Log"
+          :value="store.eventLog"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted } from 'vue'
+import LayoutRenderer from '@/ui/LayoutRenderer.vue'
+import InspectorJSON from '@/components/ui-kit/InspectorJSON.vue'
+import EventLogPanel from '@/components/ui-kit/EventLogPanel.vue'
+import { useUiRuntimeStore } from '@/stores/uiRuntime'
+
+const store = useUiRuntimeStore()
+
+const selectedWidget = computed(() => {
+  if (!store.selectedWidgetId) return null
+  return store.widgetsById[store.selectedWidgetId] || null
+})
+
+function handleInput(event: Event) {
+  const value = (event.target as HTMLTextAreaElement).value
+  store.setYamlText(value)
+  store.tryParseAndValidate()
+}
+
+onMounted(() => {
+  store.tryParseAndValidate()
+})
+</script>
diff --git a/frontend/src/components/ui-kit/InspectorJSON.vue b/frontend/src/components/ui-kit/InspectorJSON.vue
new file mode 100644
index 0000000..087823c
--- /dev/null
+++ b/frontend/src/components/ui-kit/InspectorJSON.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
+    <div class="flex items-center justify-between mb-3">
+      <h3 class="text-sm font-bold text-slate-700">{{ title }}</h3>
+      <button class="text-xs text-slate-400 hover:text-slate-600" @click="copy">Copy</button>
+    </div>
+    <pre class="text-[10px] font-mono leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-200 text-slate-600 min-h-[160px]">
+{{ formatted }}
+    </pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{ title: string; value: unknown }>()
+
+const formatted = computed(() => {
+  if (props.value == null) return '未选择任何组件'
+  try {
+    return JSON.stringify(props.value, null, 2)
+  } catch (error) {
+    return String(props.value)
+  }
+})
+
+async function copy() {
+  try {
+    await navigator.clipboard.writeText(formatted.value)
+  } catch {
+    // TODO: fallback
+  }
+}
+</script>
diff --git a/frontend/src/components/ui-kit/SplitContainer.vue b/frontend/src/components/ui-kit/SplitContainer.vue
new file mode 100644
index 0000000..d69f77b
--- /dev/null
+++ b/frontend/src/components/ui-kit/SplitContainer.vue
@@ -0,0 +1,12 @@
+<template>
+  <div
+    class="flex gap-4"
+    :class="orientation === 'vertical' ? 'flex-col' : 'flex-row'"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ orientation: 'horizontal' | 'vertical' }>()
+</script>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 8711712..a0471a9 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,4 +1,5 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import './style.css'
 import App from './App.vue'
 
@@ -25,7 +26,9 @@ async function bootstrap() {
     bridge.notify_ready()
     bridge.ping('frontend').then((resp) => console.log(resp))
   }
-  createApp(App).mount('#app')
+  const app = createApp(App)
+  app.use(createPinia())
+  app.mount('#app')
 }
 
 bootstrap()
diff --git a/frontend/src/stores/uiRuntime.ts b/frontend/src/stores/uiRuntime.ts
new file mode 100644
index 0000000..136cd87
--- /dev/null
+++ b/frontend/src/stores/uiRuntime.ts
@@ -0,0 +1,120 @@
+import { defineStore } from 'pinia'
+import { parseYamlUI } from '@/ui/yaml'
+import { validateUIConfig, type UIConfig, type WidgetSpec } from '@/ui/schema'
+
+export type ParseError = {
+  message: string
+  line?: number
+  column?: number
+  path?: string
+}
+
+const DEFAULT_YAML = `ui:
+  widgets:
+    - id: wifi-ssid
+      type: input.text
+      props:
+        label: WiFi SSID
+        hint: 输入网络名称
+        default: Office_Network
+      bind: wifi.ssid
+    - id: wifi-enabled
+      type: input.switch
+      props:
+        label: 启用 WiFi
+        default: true
+      bind: wifi.enabled
+    - id: apply
+      type: action.button
+      props:
+        label: 应用设置
+        payload:
+          scope: wifi
+      emit: action.wifi.apply
+    - id: log-panel
+      type: log.viewer
+      props:
+        title: WiFi 事件日志
+      bind: wifi.events
+  layout:
+    type: split
+    orientation: horizontal
+    children:
+      - type: leaf
+        title: 网络配置
+        widgets: [wifi-ssid, wifi-enabled, apply]
+      - type: leaf
+        title: 事件流
+        widgets: [log-panel]
+`
+
+export const useUiRuntimeStore = defineStore('uiRuntime', {
+  state: () => ({
+    yamlText: DEFAULT_YAML,
+    lastGoodConfig: null as UIConfig | null,
+    parseError: null as ParseError | null,
+    widgetsById: {} as Record<string, WidgetSpec>,
+    selectedWidgetId: null as string | null,
+    inputValues: {} as Record<string, unknown>,
+    eventLog: [] as Array<{ ts: number; emit: string; payload?: unknown; source?: string }>,
+    dataBus: {} as Record<string, unknown[]>,
+    _debounceTimer: 0 as number | 0,
+  }),
+  actions: {
+    setYamlText(text: string) {
+      this.yamlText = text
+    },
+    tryParseAndValidate() {
+      if (this._debounceTimer) {
+        clearTimeout(this._debounceTimer)
+      }
+      this._debounceTimer = window.setTimeout(() => {
+        const parsed = parseYamlUI(this.yamlText)
+        if (!parsed.ok) {
+          this.parseError = { message: parsed.error.message, line: parsed.error.line, column: parsed.error.column }
+          return
+        }
+        const validated = validateUIConfig(parsed.value)
+        if (!validated.ok) {
+          this.parseError = { message: validated.error.message, path: validated.error.path }
+          return
+        }
+        const config = validated.value
+        const widgetsById: Record<string, WidgetSpec> = {}
+        config.ui.widgets.forEach((widget) => {
+          widgetsById[widget.id] = { ...widget, props: widget.props || {} }
+        })
+        this.widgetsById = widgetsById
+        this.lastGoodConfig = config
+        this.parseError = null
+      }, 300)
+    },
+    selectWidget(id: string) {
+      this.selectedWidgetId = id
+    },
+    getInputValue(id: string, fallback?: unknown) {
+      if (this.inputValues[id] === undefined && fallback !== undefined) {
+        this.inputValues[id] = fallback
+      }
+      return this.inputValues[id]
+    },
+    setInputValue(id: string, value: unknown, bind?: string) {
+      this.inputValues[id] = value
+      if (bind) {
+        this.pushData(bind, value)
+      }
+    },
+    dispatchEvent(event: { emit: string; payload?: unknown; source?: string }) {
+      this.eventLog.push({ ts: Date.now(), ...event })
+    },
+    pushData(bindKey: string, value: unknown) {
+      if (!this.dataBus[bindKey]) {
+        this.dataBus[bindKey] = []
+      }
+      this.dataBus[bindKey].push({ ts: Date.now(), value })
+      if (this.dataBus[bindKey].length > 200) {
+        this.dataBus[bindKey] = this.dataBus[bindKey].slice(-200)
+      }
+    },
+  },
+})
diff --git a/frontend/src/ui/LayoutRenderer.vue b/frontend/src/ui/LayoutRenderer.vue
new file mode 100644
index 0000000..0a9c6f5
--- /dev/null
+++ b/frontend/src/ui/LayoutRenderer.vue
@@ -0,0 +1,120 @@
+<template>
+  <LayoutNodeRenderer :node="config.ui.layout" />
+</template>
+
+<script setup lang="ts">
+import { defineComponent, h } from 'vue'
+import PanelCard from '@/components/ui-kit/PanelCard.vue'
+import SplitContainer from '@/components/ui-kit/SplitContainer.vue'
+import { resolveWidget } from './registry'
+import type { LayoutNode, UIConfig, WidgetSpec } from './schema'
+import { useUiRuntimeStore } from '@/stores/uiRuntime'
+
+const props = defineProps<{ config: UIConfig; widgetsById: Record<string, WidgetSpec> }>()
+const store = useUiRuntimeStore()
+
+const LayoutNodeRenderer = defineComponent({
+  name: 'LayoutNodeRenderer',
+  props: {
+    node: {
+      type: Object as () => LayoutNode,
+      required: true,
+    },
+  },
+  setup(nodeProps) {
+    return () => {
+      const node = nodeProps.node
+      if (node.type === 'split') {
+        return h(
+          SplitContainer,
+          { orientation: node.orientation },
+          {
+            default: () => node.children.map((child) => h(LayoutNodeRenderer, { node: child })),
+          }
+        )
+      }
+
+      return h(
+        PanelCard,
+        { title: node.title },
+        {
+          default: () =>
+            node.widgets.map((id) => {
+              const widget = props.widgetsById[id]
+              if (!widget) return null
+              const Comp = resolveWidget(widget.type)
+              const isInput = widget.type.startsWith('input.')
+              const isAction = widget.type.startsWith('action.')
+              const isLogViewer = widget.type === 'log.viewer'
+              const modelValue = store.getInputValue(widget.id, widget.props?.default)
+
+              const wrapperClass = [
+                'rounded-lg',
+                'p-2',
+                'transition',
+                'cursor-pointer',
+                store.selectedWidgetId === widget.id ? 'ring-2 ring-primary/40' : 'hover:bg-slate-50',
+              ]
+                .filter(Boolean)
+                .join(' ')
+
+              const onClick = () => store.selectWidget(widget.id)
+
+              const commonProps = {
+                ...(widget.props || {}),
+              }
+
+              if (isLogViewer) {
+                const items = widget.bind ? store.dataBus[widget.bind] || [] : []
+                return h('div', { class: wrapperClass, onClick }, [
+                  h(Comp, {
+                    ...commonProps,
+                    title: commonProps.title || widget.id,
+                    value: items.slice(-50),
+                  }),
+                ])
+              }
+
+              if (isAction) {
+                return h('div', { class: wrapperClass, onClick }, [
+                  h(
+                    Comp,
+                    {
+                      ...commonProps,
+                      onClick: () => {
+                        if (widget.type === 'action.button') {
+                          const payload = widget.props?.payload || { source: widget.id }
+                          store.dispatchEvent({ emit: widget.emit || 'action.unknown', payload, source: widget.id })
+                          // TODO: sendEventToBackend
+                        }
+                      },
+                    },
+                    { default: () => commonProps.label || '??' }
+                  ),
+                ])
+              }
+
+              if (isInput) {
+                return h('div', { class: wrapperClass, onClick }, [
+                  h(Comp, {
+                    ...commonProps,
+                    modelValue,
+                    'onUpdate:modelValue': (value: unknown) => store.setInputValue(widget.id, value, widget.bind),
+                  }),
+                ])
+              }
+
+              return h('div', { class: wrapperClass, onClick }, [
+                h(Comp, {
+                  ...commonProps,
+                  widgetId: widget.id,
+                  widgetType: widget.type,
+                }),
+              ])
+            }),
+        }
+      )
+    }
+  },
+})
+</script>
diff --git a/frontend/src/ui/UnknownWidget.vue b/frontend/src/ui/UnknownWidget.vue
new file mode 100644
index 0000000..4074db4
--- /dev/null
+++ b/frontend/src/ui/UnknownWidget.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="border border-dashed border-slate-300 bg-slate-50 rounded-lg p-4 text-xs text-slate-500">
+    <div class="font-bold text-slate-700">Unknown Widget</div>
+    <div>ID: {{ widgetId }}</div>
+    <div>Type: {{ widgetType }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ widgetId: string; widgetType: string }>()
+</script>
diff --git a/frontend/src/ui/registry.ts b/frontend/src/ui/registry.ts
new file mode 100644
index 0000000..efd87f9
--- /dev/null
+++ b/frontend/src/ui/registry.ts
@@ -0,0 +1,25 @@
+import type { Component } from 'vue'
+import TextInput from '@/components/ui-kit/inputs/TextInput.vue'
+import NumberInput from '@/components/ui-kit/inputs/NumberInput.vue'
+import SwitchInput from '@/components/ui-kit/inputs/SwitchInput.vue'
+import TextareaInput from '@/components/ui-kit/inputs/TextareaInput.vue'
+import SelectInput from '@/components/ui-kit/inputs/SelectInput.vue'
+import PrimaryButton from '@/components/ui-kit/actions/PrimaryButton.vue'
+import EventLogPanel from '@/components/ui-kit/EventLogPanel.vue'
+import InspectorJSON from '@/components/ui-kit/InspectorJSON.vue'
+import UnknownWidget from './UnknownWidget.vue'
+
+export const widgetRegistry: Record<string, Component> = {
+  'input.text': TextInput,
+  'input.number': NumberInput,
+  'input.switch': SwitchInput,
+  'input.textarea': TextareaInput,
+  'input.select': SelectInput,
+  'action.button': PrimaryButton,
+  'log.viewer': EventLogPanel,
+  'inspector.json': InspectorJSON,
+}
+
+export function resolveWidget(type: string): Component {
+  return widgetRegistry[type] || UnknownWidget
+}
diff --git a/frontend/src/ui/schema.ts b/frontend/src/ui/schema.ts
new file mode 100644
index 0000000..e5728ef
--- /dev/null
+++ b/frontend/src/ui/schema.ts
@@ -0,0 +1,98 @@
+import { z } from 'zod'
+
+export type WidgetSpec = {
+  id: string
+  type: string
+  props: Record<string, unknown>
+  bind?: string
+  emit?: string
+}
+
+export type LayoutNode =
+  | {
+      type: 'split'
+      orientation: 'horizontal' | 'vertical'
+      children: LayoutNode[]
+    }
+  | {
+      type: 'leaf'
+      title?: string
+      widgets: string[]
+    }
+
+export type UIConfig = {
+  ui: {
+    widgets: WidgetSpec[]
+    layout: LayoutNode
+  }
+}
+
+const widgetSchema = z.object({
+  id: z.string().min(1),
+  type: z.string().min(1),
+  props: z.record(z.any()).optional().default({}),
+  bind: z.string().optional(),
+  emit: z.string().optional(),
+})
+
+const layoutSchema: z.ZodType<LayoutNode> = z.lazy(() =>
+  z.discriminatedUnion('type', [
+    z.object({
+      type: z.literal('split'),
+      orientation: z.enum(['horizontal', 'vertical']),
+      children: z.array(layoutSchema).min(1),
+    }),
+    z.object({
+      type: z.literal('leaf'),
+      title: z.string().optional(),
+      widgets: z.array(z.string()).min(1),
+    }),
+  ])
+)
+
+const uiSchema = z.object({
+  ui: z.object({
+    widgets: z.array(widgetSchema).default([]),
+    layout: layoutSchema,
+  }),
+})
+
+export function validateUIConfig(obj: unknown):
+  | { ok: true; value: UIConfig }
+  | { ok: false; error: { message: string; path: string } } {
+  const parsed = uiSchema.safeParse(obj)
+  if (!parsed.success) {
+    const issue = parsed.error.issues[0]
+    const path = issue.path.length ? issue.path.join('.') : 'ui'
+    return { ok: false, error: { message: issue.message, path } }
+  }
+
+  const config = parsed.data as UIConfig
+  const seen = new Set<string>()
+  for (const widget of config.ui.widgets) {
+    if (seen.has(widget.id)) {
+      return { ok: false, error: { message: `duplicate widget id: ${widget.id}`, path: 'ui.widgets' } }
+    }
+    seen.add(widget.id)
+  }
+
+  const widgetsById = new Set(config.ui.widgets.map((w) => w.id))
+  const missing: string[] = []
+  function walk(node: LayoutNode, basePath: string) {
+    if (node.type === 'split') {
+      node.children.forEach((child, idx) => walk(child, `${basePath}.children[${idx}]`))
+    } else {
+      node.widgets.forEach((id, idx) => {
+        if (!widgetsById.has(id)) {
+          missing.push(`${basePath}.widgets[${idx}] -> ${id}`)
+        }
+      })
+    }
+  }
+  walk(config.ui.layout, 'ui.layout')
+  if (missing.length) {
+    return { ok: false, error: { message: `unknown widget id: ${missing[0]}`, path: 'ui.layout' } }
+  }
+
+  return { ok: true, value: config }
+}
diff --git a/frontend/src/ui/yaml.ts b/frontend/src/ui/yaml.ts
new file mode 100644
index 0000000..29d3217
--- /dev/null
+++ b/frontend/src/ui/yaml.ts
@@ -0,0 +1,22 @@
+import yaml from 'js-yaml'
+
+export type YamlParseError = {
+  message: string
+  line?: number
+  column?: number
+}
+
+export function parseYamlUI(yamlText: string):
+  | { ok: true; value: unknown }
+  | { ok: false; error: YamlParseError } {
+  try {
+    const value = yaml.load(yamlText)
+    return { ok: true, value }
+  } catch (error: unknown) {
+    const message = error instanceof Error ? error.message : 'YAML parse error'
+    const mark = (error as { mark?: { line?: number; column?: number } }).mark
+    const line = typeof mark?.line === 'number' ? mark.line + 1 : undefined
+    const column = typeof mark?.column === 'number' ? mark.column + 1 : undefined
+    return { ok: false, error: { message, line, column } }
+  }
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index acda2c3..592332a 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,7 +1,11 @@
 export default {
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"] ,
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: "#2463eb",
+      },
+    },
   },
   plugins: [],
 }
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 981be2b..99b8365 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -1,8 +1,14 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
+import { fileURLToPath, URL } from 'node:url'
 
 // https://vite.dev/config/
 export default defineConfig({
   base: './',
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
 })

From 28c248667169c84c0dc4afaba370e19bc2bec8ef Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 09:02:24 +0800
Subject: [PATCH 25/36] feat(ui): wire YAML bridge parsing and labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 通过 WebBridge 解析 YAML 并回传错误位置信息
  - 事件下发/回传接入 ui_event_log，前端绑定桥接日志
  - 侧边栏与设置相关文案修正，动作按钮默认文案修正
- 影响:
  - YAML UI 解析依赖后端 bridge，可实时预览与日志回流
- 兼容/行为变化:
  - 无后端 bridge 时会显示解析错误并保留上一次渲染
- 依赖/环境:
  - 前端新增 pinia/js-yaml/zod（package-lock 已更新）
- 验证:
  - 未运行
Refs:
-

[English]
- Changes:
  - Parse YAML via WebBridge with error line/column support
  - Dispatch/receive UI events through ui_event_log binding
  - Fix sidebar/settings labels and default action label
- Impact:
  - YAML UI preview relies on bridge parsing with log feedback
- Compatibility/Behavior changes:
  - Shows parse error when bridge is unavailable, keeps last render
- Dependencies/Environment:
  - Added pinia/js-yaml/zod (package-lock updated)
- Verification:
  - Not run
Refs:
-
---
 desktop/web_bridge.py                 |  27 +++++
 frontend/package-lock.json            | 138 ++++++++++++++++----------
 frontend/src/App.vue                  |  36 ++++---
 frontend/src/components/YamlUiLab.vue |   4 +
 frontend/src/stores/uiRuntime.ts      |  66 ++++++++----
 frontend/src/ui/LayoutRenderer.vue    |   2 +-
 6 files changed, 189 insertions(+), 84 deletions(-)

diff --git a/desktop/web_bridge.py b/desktop/web_bridge.py
index 58e4ca4..99b293b 100644
--- a/desktop/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -10,6 +10,7 @@
 import logging
 import os
 from typing import Any, Dict, List, Optional
+import yaml
 
 try:
     from PySide6.QtCore import QObject, Q_ARG, QMetaObject, QTimer, Qt, Signal, Slot
@@ -38,6 +39,7 @@ class WebBridge(QObject):
     script_state = Signal(str)
     script_progress = Signal(int)
     channel_update = Signal(object)
+    ui_event_log = Signal(object)
 
     def __init__(self, bus=None, comm=None, window=None) -> None:
         super().__init__()
@@ -142,6 +144,31 @@ def list_protocols(self) -> List[Dict[str, Any]]:
             items.append(merged)
         return items
 
+    @Slot(str, result="QVariant")
+    def parse_ui_yaml(self, yaml_text: str) -> Dict[str, Any]:
+        try:
+            data = yaml.safe_load(yaml_text) if yaml_text else {}
+            return {"ok": True, "value": data}
+        except yaml.YAMLError as exc:
+            error: Dict[str, Any] = {"message": str(exc)}
+            mark = getattr(exc, "problem_mark", None)
+            if mark is not None:
+                error["line"] = getattr(mark, "line", None) + 1 if hasattr(mark, "line") else None
+                error["column"] = getattr(mark, "column", None) + 1 if hasattr(mark, "column") else None
+            return {"ok": False, "error": error}
+
+    @Slot("QVariant")
+    def dispatch_ui_event(self, payload: Dict[str, Any]) -> None:
+        if not isinstance(payload, dict):
+            return
+        event = {
+            "ts": payload.get("ts") or time.time(),
+            "emit": payload.get("emit") or "",
+            "payload": payload.get("payload"),
+            "source": payload.get("source"),
+        }
+        self.ui_event_log.emit(event)
+
     @Slot("QVariant", result="QVariant")
     def create_protocol(self, payload: Dict[str, Any]) -> Dict[str, Any]:
         if not isinstance(payload, dict):
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index dfd4ddc..dc481b8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -14,7 +14,10 @@
         "@element-plus/icons-vue": "^2.3.2",
         "codemirror": "^6.0.2",
         "element-plus": "^2.13.0",
-        "vue": "^3.5.24"
+        "js-yaml": "^4.1.0",
+        "pinia": "^2.2.2",
+        "vue": "^3.5.24",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.1",
@@ -1142,6 +1145,12 @@
         "@vue/shared": "3.5.26"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.26",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.26.tgz",
@@ -1202,32 +1211,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@vueuse/metadata": {
       "version": "10.11.1",
       "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
@@ -1249,32 +1232,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.14.10",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
-      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
-      "hasInstallScript": true,
-      "license": "MIT",
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -1316,6 +1273,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "license": "Python-2.0"
+    },
     "node_modules/async-validator": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
@@ -1872,6 +1835,18 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-yaml": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -2072,6 +2047,28 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.3.1.tgz",
+      "integrity": "sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.3",
+        "vue-demi": "^0.14.10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.4.4",
+        "vue": "^2.7.0 || ^3.5.11"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pirates": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
@@ -2670,6 +2667,32 @@
         }
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
@@ -2691,6 +2714,15 @@
       "funding": {
         "url": "https://github.com/sponsors/eemeli"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 70a5fa7..fc1ab7e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -94,8 +94,8 @@ const channelWriteTimeout = ref(1000)
 const channelHost = ref('127.0.0.1')
 const channelTcpPort = ref(502)
 const channelAutoConnect = ref(true)
-const uiLanguage = ref('????')
-const uiTheme = ref('娴呰壊')
+const uiLanguage = ref('\u7b80\u4f53\u4e2d\u6587')
+const uiTheme = ref('\u6d45\u8272')
 const defaultBaud = ref(115200)
 const defaultParity = ref('none')
 const defaultStopBits = ref('1')
@@ -107,6 +107,14 @@ const autoConnectOnStart = ref(true)
 const settingsSaving = ref(false)
 const settingsSnapshot = ref(null)
 const settingsTab = ref('general')
+const uiLabels = {
+  manual: '\u4e32\u53e3\u7ec8\u7aef',
+  scripts: '\u81ea\u52a8\u811a\u672c',
+  proxy: '\u4ee3\u7406\u76d1\u63a7',
+  protocols: '\u534f\u8bae',
+  settings: '\u8bbe\u7f6e',
+  workspace: '\u7ba1\u7406\u5458\u5de5\u4f5c\u533a',
+}
 const channelTab = ref('all')
 const protocolTab = ref('all')
 const protocolDialogOpen = ref(false)
@@ -1654,8 +1662,8 @@ const settingsDirty = computed(() => {
 
 function buildSettingsPayload() {
   return {
-    uiLanguage: uiLanguage.value,
-    uiTheme: uiTheme.value,
+    uiLanguage: '简体中文',
+    uiTheme: '浅色',
     autoConnectOnStart: !!autoConnectOnStart.value,
     dslWorkspacePath: dslWorkspacePath.value,
     quickCommands: quickCommands.value,
@@ -1674,8 +1682,8 @@ function buildSettingsPayload() {
 
 function normalizeSettings(payload) {
   const defaults = {
-    uiLanguage: '????',
-    uiTheme: '????',
+    uiLanguage: '简体中文',
+    uiTheme: '浅色',
     autoConnectOnStart: true,
     dslWorkspacePath: '/usr/local/protoflow/workflows',
     quickCommands: quickCommands.value,
@@ -1757,7 +1765,7 @@ function discardSettings() {
 function chooseDslWorkspace() {
   if (!bridge.value || !bridge.value.select_directory) return
   withResult(
-    bridge.value.select_directory('????', dslWorkspacePath.value || ''),
+    bridge.value.select_directory('选择工作区', dslWorkspacePath.value || ''),
     (value) => {
       if (value) {
         dslWorkspacePath.value = value
@@ -1937,11 +1945,11 @@ function unlockSidebarWidth() {
         <nav class="sidebar-nav">
           <button class="nav-item" :class="{ active: currentView === 'manual' }" @click="currentView = 'manual'">
             <span class="material-symbols-outlined">terminal</span>
-            <span>????</span>
+            <span>{{ uiLabels.manual }}</span>
           </button>
           <button class="nav-item" :class="{ active: currentView === 'scripts' }" @click="currentView = 'scripts'">
             <span class="material-symbols-outlined">smart_toy</span>
-            <span>????</span>
+            <span>{{ uiLabels.scripts }}</span>
           </button>
           <button class="nav-item" :class="{ active: currentView === 'ui-lab' }" @click="currentView = 'ui-lab'">
             <span class="material-symbols-outlined">dashboard_customize</span>
@@ -1949,23 +1957,23 @@ function unlockSidebarWidth() {
           </button>
           <button class="nav-item" :class="{ active: currentView === 'proxy' }" @click="currentView = 'proxy'">
             <span class="material-symbols-outlined">settings_input_hdmi</span>
-            <span>????</span>
+            <span>{{ uiLabels.proxy }}</span>
           </button>
           <button class="nav-item" :class="{ active: currentView === 'protocols' }" @click="currentView = 'protocols'">
             <span class="material-symbols-outlined">cable</span>
-            <span>??</span>
+            <span>{{ uiLabels.protocols }}</span>
           </button>
           <div class="nav-divider"></div>
           <button class="nav-item" :class="{ active: currentView === 'settings' }" @click="currentView = 'settings'">
             <span class="material-symbols-outlined">settings</span>
-            <span>??</span>
+            <span>{{ uiLabels.settings }}</span>
           </button>
         </nav>
         <div class="sidebar-footer">
           <div class="user-avatar"></div>
           <div>
             <div class="user-name">DevUser_01</div>
-            <div class="user-meta">管理员工作区</div>
+            <div class="user-meta">{{ uiLabels.workspace }}</div>
           </div>
         </div>
       </aside>
@@ -2383,3 +2391,5 @@ function unlockSidebarWidth() {
     <div v-if="snapPreview" class="snap-overlay" :class="`snap-${snapPreview}`"></div>
   </div>
 </template>
+
+
diff --git a/frontend/src/components/YamlUiLab.vue b/frontend/src/components/YamlUiLab.vue
index eefb9e9..7f958b7 100644
--- a/frontend/src/components/YamlUiLab.vue
+++ b/frontend/src/components/YamlUiLab.vue
@@ -62,6 +62,10 @@ function handleInput(event: Event) {
 }
 
 onMounted(() => {
+  const bridge = (window as unknown as { bridge?: any }).bridge
+  if (bridge) {
+    store.bindBridge(bridge)
+  }
   store.tryParseAndValidate()
 })
 </script>
diff --git a/frontend/src/stores/uiRuntime.ts b/frontend/src/stores/uiRuntime.ts
index 136cd87..5dbf8cc 100644
--- a/frontend/src/stores/uiRuntime.ts
+++ b/frontend/src/stores/uiRuntime.ts
@@ -1,5 +1,4 @@
 import { defineStore } from 'pinia'
-import { parseYamlUI } from '@/ui/yaml'
 import { validateUIConfig, type UIConfig, type WidgetSpec } from '@/ui/schema'
 
 export type ParseError = {
@@ -69,25 +68,42 @@ export const useUiRuntimeStore = defineStore('uiRuntime', {
         clearTimeout(this._debounceTimer)
       }
       this._debounceTimer = window.setTimeout(() => {
-        const parsed = parseYamlUI(this.yamlText)
-        if (!parsed.ok) {
-          this.parseError = { message: parsed.error.message, line: parsed.error.line, column: parsed.error.column }
+        this._parseWithBridge()
+      }, 300)
+    },
+    async _parseWithBridge() {
+      const bridge = (window as unknown as { bridge?: any }).bridge
+      if (bridge && bridge.parse_ui_yaml) {
+        try {
+          const result = await Promise.resolve(bridge.parse_ui_yaml(this.yamlText))
+          this._handleParseResult(result)
           return
-        }
-        const validated = validateUIConfig(parsed.value)
-        if (!validated.ok) {
-          this.parseError = { message: validated.error.message, path: validated.error.path }
+        } catch (error) {
+          this.parseError = { message: String(error || 'bridge parse error') }
           return
         }
-        const config = validated.value
-        const widgetsById: Record<string, WidgetSpec> = {}
-        config.ui.widgets.forEach((widget) => {
-          widgetsById[widget.id] = { ...widget, props: widget.props || {} }
-        })
-        this.widgetsById = widgetsById
-        this.lastGoodConfig = config
-        this.parseError = null
-      }, 300)
+      }
+      this.parseError = { message: 'WebBridge unavailable for YAML parsing' }
+    },
+    _handleParseResult(result: { ok: boolean; value?: unknown; error?: { message: string; line?: number; column?: number } }) {
+      if (!result.ok) {
+        const err = result.error || { message: 'YAML parse error' }
+        this.parseError = { message: err.message, line: err.line, column: err.column }
+        return
+      }
+      const validated = validateUIConfig(result.value)
+      if (!validated.ok) {
+        this.parseError = { message: validated.error.message, path: validated.error.path }
+        return
+      }
+      const config = validated.value
+      const widgetsById: Record<string, WidgetSpec> = {}
+      config.ui.widgets.forEach((widget) => {
+        widgetsById[widget.id] = { ...widget, props: widget.props || {} }
+      })
+      this.widgetsById = widgetsById
+      this.lastGoodConfig = config
+      this.parseError = null
     },
     selectWidget(id: string) {
       this.selectedWidgetId = id
@@ -106,6 +122,10 @@ export const useUiRuntimeStore = defineStore('uiRuntime', {
     },
     dispatchEvent(event: { emit: string; payload?: unknown; source?: string }) {
       this.eventLog.push({ ts: Date.now(), ...event })
+      const bridge = (window as unknown as { bridge?: any }).bridge
+      if (bridge && bridge.dispatch_ui_event) {
+        bridge.dispatch_ui_event({ ts: Date.now(), ...event })
+      }
     },
     pushData(bindKey: string, value: unknown) {
       if (!this.dataBus[bindKey]) {
@@ -116,5 +136,17 @@ export const useUiRuntimeStore = defineStore('uiRuntime', {
         this.dataBus[bindKey] = this.dataBus[bindKey].slice(-200)
       }
     },
+    bindBridge(bridge: any) {
+      if (!bridge || !bridge.ui_event_log) return
+      bridge.ui_event_log.connect((payload: any) => {
+        if (!payload) return
+        this.eventLog.push({
+          ts: payload.ts ? Number(payload.ts) : Date.now(),
+          emit: payload.emit || '',
+          payload: payload.payload,
+          source: payload.source,
+        })
+      })
+    },
   },
 })
diff --git a/frontend/src/ui/LayoutRenderer.vue b/frontend/src/ui/LayoutRenderer.vue
index 0a9c6f5..a062f67 100644
--- a/frontend/src/ui/LayoutRenderer.vue
+++ b/frontend/src/ui/LayoutRenderer.vue
@@ -89,7 +89,7 @@ const LayoutNodeRenderer = defineComponent({
                         }
                       },
                     },
-                    { default: () => commonProps.label || '??' }
+                    { default: () => commonProps.label || '动作' }
                   ),
                 ])
               }

From d9da13b0710aedd336f9e87e783c2b594958708c Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 09:37:26 +0800
Subject: [PATCH 26/36] feat(ui): merge YAML UI into scripts with run modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 移除侧边栏的 YAML UI 入口，改为脚本运行时弹出预览
  - 脚本运行触发 UI YAML 解析与弹窗展示
  - 新增 UI 预览弹窗样式与错误提示
- 影响:
  - UI YAML 作为自动脚本运行期界面展示
- 兼容/行为变化:
  - 运行脚本时自动弹出 UI 预览弹窗
- 依赖/环境:
  - 无
- 验证:
  - 未运行
Refs:
-

[English]
- Changes:
  - Remove YAML UI nav entry and show preview modal during script run
  - Trigger YAML UI parsing and modal open on script run
  - Add modal styling and parse error display
- Impact:
  - YAML UI is now surfaced as a runtime script UI
- Compatibility/Behavior changes:
  - Script run auto-opens the UI preview modal
- Dependencies/Environment:
  - None
- Verification:
  - Not run
Refs:
-
---
 frontend/src/App.vue   | 70 +++++++++++++++++++++++++++++++++++++-----
 frontend/src/style.css | 24 +++++++++++++++
 2 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index fc1ab7e..ab9a8a7 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -7,10 +7,11 @@ import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import { tags } from '@lezer/highlight'
 import ManualView from './components/ManualView.vue'
 import ScriptsView from './components/ScriptsView.vue'
-import YamlUiLab from './components/YamlUiLab.vue'
 import ProxyMonitorView from './components/ProxyMonitorView.vue'
 import DropdownSelect from './components/DropdownSelect.vue'
 import { yaml as yamlLanguage } from '@codemirror/lang-yaml'
+import LayoutRenderer from './ui/LayoutRenderer.vue'
+import { useUiRuntimeStore } from './stores/uiRuntime'
 
 const bridge = ref(null)
 const sidebarRef = ref(null)
@@ -134,6 +135,8 @@ const settingsGeneralRef = ref(null)
 const settingsPluginsRef = ref(null)
 const settingsRuntimeRef = ref(null)
 const settingsLogsRef = ref(null)
+const uiRuntime = useUiRuntimeStore()
+const uiModalOpen = ref(false)
 
 const noPorts = computed(() => ports.value.length === 0)
 const portOptionsList = computed(() => ports.value.map((item) => ({ label: item, value: item, icon: 'usb' })))
@@ -1231,6 +1234,18 @@ function sendQuickCommand(cmd) {
   bridge.value.send_text(data)
 }
 
+async function openUiYamlModal() {
+  if (!uiModalOpen.value) {
+    uiModalOpen.value = true
+  }
+  uiRuntime.yamlText = yamlText.value
+  await uiRuntime._parseWithBridge()
+}
+
+function closeUiYamlModal() {
+  uiModalOpen.value = false
+}
+
 function runScript() {
   if (!bridge.value) return
   const payload = yamlText.value.trim()
@@ -1243,6 +1258,7 @@ function runScript() {
   scriptStartMs.value = Date.now()
   scriptElapsedMs.value = 0
   scriptProgress.value = 0
+  openUiYamlModal()
   bridge.value.run_script(payload)
 }
 
@@ -1537,12 +1553,27 @@ watch(
 )
 
 watch(
-  () => channelDialogOpen.value || quickDialogOpen.value || quickDeleteOpen.value || protocolDialogOpen.value || protocolDeleteOpen.value,
+  () =>
+    channelDialogOpen.value ||
+    quickDialogOpen.value ||
+    quickDeleteOpen.value ||
+    protocolDialogOpen.value ||
+    protocolDeleteOpen.value ||
+    uiModalOpen.value,
   (open) => {
     document.body.classList.toggle('modal-open', open)
   }
 )
 
+watch(
+  () => scriptRunning.value,
+  (running) => {
+    if (running && !uiModalOpen.value) {
+      openUiYamlModal()
+    }
+  }
+)
+
 watch(
   () => yamlText.value,
   (value) => {
@@ -1951,10 +1982,6 @@ function unlockSidebarWidth() {
             <span class="material-symbols-outlined">smart_toy</span>
             <span>{{ uiLabels.scripts }}</span>
           </button>
-          <button class="nav-item" :class="{ active: currentView === 'ui-lab' }" @click="currentView = 'ui-lab'">
-            <span class="material-symbols-outlined">dashboard_customize</span>
-            <span>YAML UI</span>
-          </button>
           <button class="nav-item" :class="{ active: currentView === 'proxy' }" @click="currentView = 'proxy'">
             <span class="material-symbols-outlined">settings_input_hdmi</span>
             <span>{{ uiLabels.proxy }}</span>
@@ -1981,7 +2008,6 @@ function unlockSidebarWidth() {
       <main class="main">
         <ManualView v-if="currentView === 'manual'" />
         <ScriptsView v-else-if="currentView === 'scripts'" />
-        <YamlUiLab v-else-if="currentView === 'ui-lab'" />
         <ProxyMonitorView
           v-else-if="currentView === 'proxy'"
           :capture-frames="captureFrames"
@@ -2385,6 +2411,36 @@ function unlockSidebarWidth() {
         </div>
       </teleport>
 
+      <teleport to="body">
+        <div v-if="uiModalOpen" class="modal-backdrop" @mousedown.self="closeUiYamlModal">
+          <div class="channel-modal ui-yaml-modal" @mousedown.stop @click.stop>
+            <div class="modal-header">
+              <div>
+                <h3>UI YAML 预览</h3>
+                <p>脚本运行中展示 UI 渲染结果</p>
+              </div>
+              <button class="icon-btn" type="button" @click="closeUiYamlModal">
+                <span class="material-symbols-outlined">close</span>
+              </button>
+            </div>
+            <div class="modal-body ui-yaml-body">
+              <div v-if="uiRuntime.parseError" class="ui-yaml-error">
+                <strong>解析失败</strong>
+                <div>{{ uiRuntime.parseError.message }}</div>
+                <div v-if="uiRuntime.parseError.path" class="muted">Path: {{ uiRuntime.parseError.path }}</div>
+                <div v-if="uiRuntime.parseError.line" class="muted">
+                  Line {{ uiRuntime.parseError.line }}, Column {{ uiRuntime.parseError.column || 0 }}
+                </div>
+              </div>
+              <div v-else-if="uiRuntime.lastGoodConfig">
+                <LayoutRenderer :config="uiRuntime.lastGoodConfig" :widgetsById="uiRuntime.widgetsById" />
+              </div>
+              <div v-else class="empty-state muted">暂无可渲染的 UI 配置</div>
+            </div>
+          </div>
+        </div>
+      </teleport>
+
 </main>
     </div>
 
diff --git a/frontend/src/style.css b/frontend/src/style.css
index c94614b..97a6451 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1743,6 +1743,30 @@ textarea {
   overflow: hidden;
 }
 
+.ui-yaml-modal {
+  width: min(1100px, 94vw);
+  max-width: 1100px;
+  height: min(86vh, 900px);
+}
+
+.ui-yaml-body {
+  padding: 0;
+  background: #f8fafc;
+}
+
+.ui-yaml-body > div {
+  padding: 18px 22px;
+}
+
+.ui-yaml-error {
+  border: 1px solid #fecaca;
+  background: #fff1f2;
+  color: #9f1239;
+  border-radius: 12px;
+  display: grid;
+  gap: 6px;
+}
+
 .quick-modal {
   width: min(560px, 92vw);
 }

From f669b2f90ed1cc276c94c91104d46faf410b72cc Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 21:55:41 +0800
Subject: [PATCH 27/36] chore(config): add UI YAML sample
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 新增 `config/ui_yaml_sample.yaml`，包含输入、动作、日志与布局示例
- 影响:
  - 提供 UI 配置参考与测试样例
- 兼容性/行为变更:
  - 无
- 依赖/环境:
  - 无
- 验证:
  - 未运行（仅示例文件）
[English]
- Changes:
  - Add `config/ui_yaml_sample.yaml` covering inputs, actions, logs, and layout.
- Impact:
  - Provides a reference for UI configuration/testing.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run (sample file only).
Refs:
- N/A
---
 config/ui_yaml_sample.yaml | 92 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 config/ui_yaml_sample.yaml

diff --git a/config/ui_yaml_sample.yaml b/config/ui_yaml_sample.yaml
new file mode 100644
index 0000000..c47e7f1
--- /dev/null
+++ b/config/ui_yaml_sample.yaml
@@ -0,0 +1,92 @@
+ui:
+  widgets:
+    - id: input_device
+      type: input.text
+      props:
+        label: "Device Name"
+        hint: "e.g. Sensor-A"
+        placeholder: "Enter device label"
+        default: "Sensor-A"
+    - id: input_baud
+      type: input.number
+      props:
+        label: "Baud Rate"
+        hint: "Serial port speed"
+        default: 115200
+    - id: input_enabled
+      type: input.switch
+      props:
+        label: "Enable Relay"
+        hint: "Toggle relay forwarding"
+        default: true
+    - id: input_notes
+      type: input.textarea
+      props:
+        label: "Notes"
+        placeholder: "Optional remarks"
+    - id: input_protocol
+      type: input.select
+      props:
+        label: "Protocol"
+        options:
+          - label: "Modbus RTU"
+            value: "modbus_rtu"
+          - label: "Modbus TCP"
+            value: "modbus_tcp"
+          - label: "Custom"
+            value: "custom"
+        default: "modbus_rtu"
+    - id: action_start
+      type: action.button
+      emit: "script.start"
+      props:
+        label: "Start"
+        payload:
+          mode: "run"
+    - id: action_stop
+      type: action.button
+      emit: "script.stop"
+      props:
+        label: "Stop"
+        payload:
+          mode: "stop"
+    - id: log_events
+      type: log.viewer
+      bind: "ui.events"
+      props:
+        title: "Event Log"
+    - id: inspector
+      type: inspector.json
+      props:
+        title: "Selected Widget"
+  layout:
+    type: split
+    orientation: horizontal
+    children:
+      - type: split
+        orientation: vertical
+        children:
+          - type: leaf
+            title: "Connection"
+            widgets:
+              - input_device
+              - input_baud
+              - input_enabled
+              - input_protocol
+          - type: leaf
+            title: "Notes"
+            widgets:
+              - input_notes
+      - type: split
+        orientation: vertical
+        children:
+          - type: leaf
+            title: "Controls"
+            widgets:
+              - action_start
+              - action_stop
+          - type: leaf
+            title: "Logs"
+            widgets:
+              - log_events
+              - inspector

From 53571061d734ab40fdc999157d57b8a93b819c59 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 22:03:42 +0800
Subject: [PATCH 28/36] chore(ui): update protocols label to 4 chars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 侧边栏“协议”改为“协议管理”
- 影响:
  - 文案更清晰
- 兼容性/行为变更:
  - 无
- 依赖/环境:
  - 无
- 验证:
  - 未运行
[English]
- Changes:
  - Rename sidebar label from "协议" to "协议管理".
- Impact:
  - Clearer wording.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run.
Refs:
- N/A
---
 frontend/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ab9a8a7..153e626 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -112,7 +112,7 @@ const uiLabels = {
   manual: '\u4e32\u53e3\u7ec8\u7aef',
   scripts: '\u81ea\u52a8\u811a\u672c',
   proxy: '\u4ee3\u7406\u76d1\u63a7',
-  protocols: '\u534f\u8bae',
+  protocols: '\u534f\u8bae\u7ba1\u7406',
   settings: '\u8bbe\u7f6e',
   workspace: '\u7ba1\u7406\u5458\u5de5\u4f5c\u533a',
 }

From 348aa773c5d5caddb147bd42dcf8a444f46512d2 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 22:24:20 +0800
Subject: [PATCH 29/36] chore(ui): align proxy header layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 代理监控页头改用统一的 page-header 布局
- 影响:
  - 页头高度与“串口终端/自动脚本/协议管理”一致
- 兼容性/行为变更:
  - 无
- 依赖/环境:
  - 无
- 验证:
  - 未运行
[English]
- Changes:
  - Use the shared page-header layout in Proxy Monitor.
- Impact:
  - Header height now matches other pages.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run.
Refs:
- N/A
---
 frontend/src/components/ProxyMonitorView.vue | 50 ++++++++++----------
 1 file changed, 24 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index 284e8a8..53e9815 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -522,36 +522,34 @@ onBeforeUnmount(() => {
 
 <template>
   <section class="page proxy-page proxy-dashboard">
-    <header class="proxy-dashboard-hero">
-      <div class="proxy-hero-card">
-        <div>
-          <h2>代理监控</h2>
-          <p>管理转发链路并实时监控数据流状态。</p>
-        </div>
-        <div class="proxy-hero-actions">
-          <button class="proxy-hero-btn" type="button" @click="refreshProxies">
-            <span class="material-symbols-outlined">refresh</span>
-            刷新状态
-          </button>
-          <button class="proxy-hero-btn primary" type="button" @click="openCreateModal">
-            <span class="material-symbols-outlined">add</span>
-            新建转发对
-          </button>
-        </div>
+    <header class="page-header spaced">
+      <div>
+        <h2>代理监控</h2>
+        <p>管理转发链路并实时监控数据流状态。</p>
       </div>
-      <div class="proxy-dashboard-filters">
-        <button
-          v-for="tab in filterTabs"
-          :key="tab.id"
-          type="button"
-          class="proxy-filter-chip"
-          :class="{ active: activeFilter === tab.id }"
-          @click="activeFilter = tab.id"
-        >
-          {{ tab.label }}
+      <div class="header-actions">
+        <button class="btn btn-outline" type="button" @click="refreshProxies">
+          <span class="material-symbols-outlined">refresh</span>
+          刷新状态
+        </button>
+        <button class="btn btn-primary" type="button" @click="openCreateModal">
+          <span class="material-symbols-outlined">add</span>
+          新建转发对
         </button>
       </div>
     </header>
+    <div class="proxy-dashboard-filters">
+      <button
+        v-for="tab in filterTabs"
+        :key="tab.id"
+        type="button"
+        class="proxy-filter-chip"
+        :class="{ active: activeFilter === tab.id }"
+        @click="activeFilter = tab.id"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
 
     <div class="proxy-dashboard-grid">
       <article

From 763bcf229767c528a237d83e4ea0466a57457fd2 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 22:32:36 +0800
Subject: [PATCH 30/36] chore(ui): match proxy filter tabs to protocols
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 代理监控筛选切换改为与协议管理一致的 tab-strip 样式
- 影响:
  - 卡片展示选择样式统一
- 兼容性/行为变更:
  - 无
- 依赖/环境:
  - 无
- 验证:
  - 未运行
[English]
- Changes:
  - Use the shared tab-strip style for Proxy Monitor filters.
- Impact:
  - Filter tabs now match Protocols page.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run.
Refs:
- N/A
---
 frontend/src/components/ProxyMonitorView.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index 53e9815..e573fbc 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -538,12 +538,11 @@ onBeforeUnmount(() => {
         </button>
       </div>
     </header>
-    <div class="proxy-dashboard-filters">
+    <div class="tab-strip secondary">
       <button
         v-for="tab in filterTabs"
         :key="tab.id"
         type="button"
-        class="proxy-filter-chip"
         :class="{ active: activeFilter === tab.id }"
         @click="activeFilter = tab.id"
       >

From 2b566ecfbea7b631667a536b8a67aba76a664479 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 22:34:39 +0800
Subject: [PATCH 31/36] chore(ui): align manual header layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 串口终端页头改为统一的 page-header 布局
- 影响:
  - 页头高度与自动脚本/代理监控/协议管理一致
- 兼容性/行为变更:
  - 无
- 依赖/环境:
  - 无
- 验证:
  - 未运行
[English]
- Changes:
  - Use the shared page-header layout in Serial Terminal.
- Impact:
  - Header height now matches other pages.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - None.
- Verification:
  - Not run.
Refs:
- N/A
---
 frontend/src/components/ManualView.vue | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ManualView.vue b/frontend/src/components/ManualView.vue
index a6dee97..65812f0 100644
--- a/frontend/src/components/ManualView.vue
+++ b/frontend/src/components/ManualView.vue
@@ -63,11 +63,10 @@ const {
 
 <template>
   <section class="page">
-          
-          <div class="terminal-config-panel page-header spaced">
+          <header class="page-header spaced">
             <div>
-              <h3 class="config-title">串口终端</h3>
-              <p class="config-description">传统串口调试工具：发送命令，监听 I/O 与日志回显。</p>
+              <h2>串口终端</h2>
+              <p>传统串口调试工具：发送命令，监听 I/O 与日志回显。</p>
             </div>
             <div class="header-actions terminal-config-actions">
               <div class="config-status">
@@ -110,7 +109,7 @@ const {
                 </button>
               </div>
             </div>
-          </div>
+          </header>
 
           <div class="manual-grid">
             <div class="manual-left">

From ac4d95329752f055abd58d6d9bb77ec08b8690e9 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sat, 24 Jan 2026 22:42:44 +0800
Subject: [PATCH 32/36] chore(ui): load app version from backend
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 侧边栏版本号改为从后端读取 VERSION/环境变量
- 影响:
  - 版本显示与实际一致
- 兼容性/行为变更:
  - 无
- 依赖/环境:
  - 可选使用 PROTOFLOW_VERSION 环境变量
- 验证:
  - 未运行
[English]
- Changes:
  - Read app version via bridge from VERSION/env.
- Impact:
  - Version label now reflects the actual build.
- Compatibility/Behavior changes:
  - None.
- Dependencies/Environment:
  - Optional PROTOFLOW_VERSION env var.
- Verification:
  - Not run.
Refs:
- N/A
---
 desktop/web_bridge.py | 16 ++++++++++++++++
 frontend/src/App.vue  | 13 +++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/desktop/web_bridge.py b/desktop/web_bridge.py
index 99b293b..c5e89fd 100644
--- a/desktop/web_bridge.py
+++ b/desktop/web_bridge.py
@@ -86,6 +86,22 @@ def __init__(self, bus=None, comm=None, window=None) -> None:
             self._bus.subscribe("protocol.frame", self._on_protocol_frame)
             self._bus.subscribe("capture.frame", self._on_capture_frame)
 
+    def _read_app_version(self) -> str:
+        env_version = os.environ.get("PROTOFLOW_VERSION")
+        if env_version:
+            return env_version.strip()
+        try:
+            version_path = Path(__file__).resolve().parents[1] / "VERSION"
+            if version_path.is_file():
+                return version_path.read_text(encoding="utf-8").strip()
+        except Exception:
+            return "v0.0.0"
+        return "v0.0.0"
+
+    @Slot(result=str)
+    def get_app_version(self) -> str:
+        return self._read_app_version()
+
     @Slot(str, result=str)
     def ping(self, message: str) -> str:
         return f"pong: {message}"
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 153e626..42cf16e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -137,6 +137,7 @@ const settingsRuntimeRef = ref(null)
 const settingsLogsRef = ref(null)
 const uiRuntime = useUiRuntimeStore()
 const uiModalOpen = ref(false)
+const appVersion = ref('')
 
 const noPorts = computed(() => ports.value.length === 0)
 const portOptionsList = computed(() => ports.value.map((item) => ({ label: item, value: item, icon: 'usb' })))
@@ -232,6 +233,7 @@ const scriptStatusLabel = computed(() => {
 })
 const scriptStatusClass = computed(() => (scriptRunning.value ? 'running' : 'idle'))
 const quickPayloadCount = computed(() => countQuickPayload(quickDraft.value.payload, quickDraft.value.mode))
+const appVersionLabel = computed(() => appVersion.value || 'v0.0.0')
 
 const filteredChannelCards = computed(() => {
   if (channelTab.value === 'all') return channelCards.value
@@ -1401,6 +1403,13 @@ function attachBridge(obj) {
   if (!obj || attachedBridge === obj) return
   attachedBridge = obj
   bridge.value = obj
+  if (obj.get_app_version) {
+    withResult(obj.get_app_version(), (value) => {
+      if (value) {
+        appVersion.value = String(value).trim()
+      }
+    })
+  }
   if (obj.comm_rx && obj.comm_tx) {
     obj.comm_rx.connect((payload) => {
       const parsed = parseBridgePayload(payload)
@@ -1969,8 +1978,8 @@ function unlockSidebarWidth() {
             <span class="material-symbols-outlined">hub</span>
           </div>
           <div>
-            <div class="brand-name">ProtoFlow</div>
-            <div class="brand-meta">v2.4.0-stable</div>
+          <div class="brand-name">ProtoFlow</div>
+            <div class="brand-meta">{{ appVersionLabel }}</div>
           </div>
         </div>
         <nav class="sidebar-nav">

From a273b412df929c51a3127b8df6b1365f378031c7 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sun, 25 Jan 2026 01:18:15 +0800
Subject: [PATCH 33/36] feat(ui): expand i18n coverage across views
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 新增/完善界面 i18n 词条与语言/主题选项
  - 多页面文本改为 t/tr 输出，包含设置/协议/代理/脚本/终端
  - UI 运行时组件标签统一走 tr
- 影响:
  - 语言切换将影响更多页面文案
- 兼容/行为变化:
  - 旧设置中的中文语言/主题值会被归一化到新枚举
- 依赖/环境:
  - 无
- 验证:
  - 未执行（UI 需手动检查）

[English]
- Changes:
  - Add i18n map and language/theme options with normalize logic
  - Route remaining UI strings through t/tr across main views and ui-kit
  - Localize UI runtime labels during render
- Impact:
  - Language switching affects more UI copy
- Compatibility/Behavior changes:
  - Legacy language/theme values normalize to new enums
- Dependencies/Environment:
  - None
- Verification:
  - Not run (manual UI check recommended)
Refs:
-
---
 frontend/src/App.vue                          | 417 ++++++++++++------
 frontend/src/components/ManualView.vue        | 100 ++---
 frontend/src/components/ProxyMonitorView.vue  | 253 ++++++-----
 frontend/src/components/ScriptsView.vue       |  54 +--
 frontend/src/components/YamlUiLab.vue         |  15 +-
 frontend/src/components/ui-kit/AppShell.vue   |  14 +-
 .../src/components/ui-kit/InspectorJSON.vue   |   7 +-
 frontend/src/components/ui-kit/TopBar.vue     |   6 +-
 .../ui-kit/actions/BatchActionGroup.vue       |  10 +-
 .../ui-kit/actions/DropdownAction.vue         |   6 +-
 .../ui-kit/inputs/MultiSelectChips.vue        |   5 +-
 .../components/ui-kit/inputs/PathPicker.vue   |   8 +-
 frontend/src/ui/LayoutRenderer.vue            |  22 +-
 13 files changed, 553 insertions(+), 364 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 42cf16e..0a99820 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -95,8 +95,8 @@ const channelWriteTimeout = ref(1000)
 const channelHost = ref('127.0.0.1')
 const channelTcpPort = ref(502)
 const channelAutoConnect = ref(true)
-const uiLanguage = ref('\u7b80\u4f53\u4e2d\u6587')
-const uiTheme = ref('\u6d45\u8272')
+const uiLanguage = ref('zh-CN')
+const uiTheme = ref('light')
 const defaultBaud = ref(115200)
 const defaultParity = ref('none')
 const defaultStopBits = ref('1')
@@ -108,14 +108,144 @@ const autoConnectOnStart = ref(true)
 const settingsSaving = ref(false)
 const settingsSnapshot = ref(null)
 const settingsTab = ref('general')
-const uiLabels = {
-  manual: '\u4e32\u53e3\u7ec8\u7aef',
-  scripts: '\u81ea\u52a8\u811a\u672c',
-  proxy: '\u4ee3\u7406\u76d1\u63a7',
-  protocols: '\u534f\u8bae\u7ba1\u7406',
-  settings: '\u8bbe\u7f6e',
-  workspace: '\u7ba1\u7406\u5458\u5de5\u4f5c\u533a',
-}
+const translations = {
+  'zh-CN': {
+    'nav.manual': '串口终端',
+    'nav.scripts': '自动脚本',
+    'nav.proxy': '代理监控',
+    'nav.protocols': '协议管理',
+    'nav.settings': '设置',
+    'nav.workspace': '管理员工作区',
+    'header.manual.title': '串口终端',
+    'header.manual.desc': '传统串口调试工具：发送命令，监听 I/O 与日志回显。',
+    'header.scripts.title': '自动脚本',
+    'header.scripts.desc': '用于协议解析与测试脚本自动化执行。',
+    'header.proxy.title': '代理监控',
+    'header.proxy.desc': '管理转发链路并实时监控数据流状态。',
+    'header.protocols.title': '协议管理',
+    'header.protocols.desc': '配置通信协议定义，绑定通道并设置解析规则。',
+    'header.settings.title': '应用设置',
+    'header.settings.desc': '管理全局偏好、协议默认值和运行时环境配置。',
+    'action.refresh': '刷新',
+    'action.createProtocol': '新建协议',
+    'action.discardChanges': '放弃更改',
+    'action.saveChanges': '保存更改',
+    'action.loadScript': '加载脚本',
+    'action.save': '保存',
+    'badge.readOnly': '只读',
+    'action.refreshStatus': '刷新状态',
+    'action.newProxy': '新建转发对',
+    'filter.all': '全部',
+    'filter.running': '运行中',
+    'filter.stopped': '已停止',
+    'filter.error': '异常',
+    'status.connected': '已连接',
+    'status.disconnected': '未连接',
+    'status.error': '错误',
+    'status.connecting': '连接中',
+    'action.connect': '连接',
+    'action.disconnect': '断开',
+    'protocol.tab.all': '全部协议',
+    'protocol.tab.modbus': 'Modbus',
+    'protocol.tab.tcp': 'TCP/IP',
+    'protocol.tab.custom': '自定义',
+    'settings.tab.general': '通用',
+    'settings.tab.plugins': '插件',
+    'settings.tab.runtime': '运行时',
+    'settings.tab.logs': '日志',
+    'settings.language': '界面语言',
+    'settings.theme': '主题偏好',
+    'settings.autoConnect.title': '启动时自动连接',
+    'settings.autoConnect.desc': '自动尝试重连上次活动的通道。',
+    'settings.workspace': '工作目录',
+    'settings.chooseFolder': '选择目录',
+    'settings.plugins.title': '插件管理',
+    'settings.plugins.refresh': '刷新列表',
+    'lang.zhCN': '简体中文',
+    'lang.enUS': 'English (US)',
+    'theme.system': '系统默认',
+    'theme.dark': '深色 (工程模式)',
+    'theme.light': '浅色',
+  },
+  'en-US': {
+    'nav.manual': 'Serial Terminal',
+    'nav.scripts': 'Scripts',
+    'nav.proxy': 'Proxy Monitor',
+    'nav.protocols': 'Protocol Manager',
+    'nav.settings': 'Settings',
+    'nav.workspace': 'Admin Workspace',
+    'header.manual.title': 'Serial Terminal',
+    'header.manual.desc': 'Classic serial console for sending commands, monitoring I/O and logs.',
+    'header.scripts.title': 'Automation Scripts',
+    'header.scripts.desc': 'Run parsing and test automation scripts.',
+    'header.proxy.title': 'Proxy Monitor',
+    'header.proxy.desc': 'Manage forwarding links and monitor data streams.',
+    'header.protocols.title': 'Protocols',
+    'header.protocols.desc': 'Define protocols, bind channels, and configure parsing rules.',
+    'header.settings.title': 'App Settings',
+    'header.settings.desc': 'Manage global preferences, defaults, and runtime configuration.',
+    'action.refresh': 'Refresh',
+    'action.createProtocol': 'New Protocol',
+    'action.discardChanges': 'Discard',
+    'action.saveChanges': 'Save Changes',
+    'action.loadScript': 'Load Script',
+    'action.save': 'Save',
+    'badge.readOnly': 'Read-only',
+    'action.refreshStatus': 'Refresh Status',
+    'action.newProxy': 'New Forward Pair',
+    'filter.all': 'All',
+    'filter.running': 'Running',
+    'filter.stopped': 'Stopped',
+    'filter.error': 'Error',
+    'status.connected': 'Connected',
+    'status.disconnected': 'Disconnected',
+    'status.error': 'Error',
+    'status.connecting': 'Connecting',
+    'action.connect': 'Connect',
+    'action.disconnect': 'Disconnect',
+    'protocol.tab.all': 'All Protocols',
+    'protocol.tab.modbus': 'Modbus',
+    'protocol.tab.tcp': 'TCP/IP',
+    'protocol.tab.custom': 'Custom',
+    'settings.tab.general': 'General',
+    'settings.tab.plugins': 'Plugins',
+    'settings.tab.runtime': 'Runtime',
+    'settings.tab.logs': 'Logs',
+    'settings.language': 'Language',
+    'settings.theme': 'Theme',
+    'settings.autoConnect.title': 'Auto-connect on launch',
+    'settings.autoConnect.desc': 'Reconnect to the last active channel automatically.',
+    'settings.workspace': 'Workspace',
+    'settings.chooseFolder': 'Choose Folder',
+    'settings.plugins.title': 'Plugins',
+    'settings.plugins.refresh': 'Refresh List',
+    'lang.zhCN': '简体中文',
+    'lang.enUS': 'English (US)',
+    'theme.system': 'System',
+    'theme.dark': 'Dark (Engineer)',
+    'theme.light': 'Light',
+  },
+}
+
+const t = (key, fallback = '') => {
+  const lang = uiLanguage.value || 'zh-CN'
+  return translations[lang]?.[key] ?? translations['zh-CN']?.[key] ?? fallback ?? key
+}
+
+const tr = (text) => {
+  const lang = uiLanguage.value || 'zh-CN'
+  const key = String(text ?? '')
+  return translations[lang]?.[key] ?? translations['zh-CN']?.[key] ?? key
+}
+
+const uiLabels = computed(() => ({
+  manual: t('nav.manual'),
+  scripts: t('nav.scripts'),
+  proxy: t('nav.proxy'),
+  protocols: t('nav.protocols'),
+  settings: t('nav.settings'),
+  workspace: t('nav.workspace'),
+}))
 const channelTab = ref('all')
 const protocolTab = ref('all')
 const protocolDialogOpen = ref(false)
@@ -168,19 +298,19 @@ const channelCards = computed(() => {
     const type = channel.type || 'unknown'
     const status = channel.status || 'disconnected'
     const statusMap = {
-      connected: { text: '已连接', className: 'status-ok' },
-      connecting: { text: '连接中', className: 'status-warn' },
-      error: { text: '错误', className: 'status-error' },
-      disconnected: { text: '未连接', className: 'status-idle' },
-      idle: { text: '空闲', className: 'status-idle' },
+      connected: { text: t('status.connected'), className: 'status-ok' },
+      connecting: { text: t('status.connecting'), className: 'status-warn' },
+      error: { text: t('status.error'), className: 'status-error' },
+      disconnected: { text: t('status.disconnected'), className: 'status-idle' },
+      idle: { text: tr('空闲'), className: 'status-idle' },
     }
     const statusInfo = statusMap[status] || statusMap.disconnected
     const isSerial = type === 'serial'
     const isTcpClient = type === 'tcp-client'
-    const name = isSerial ? '串口通道' : isTcpClient ? 'TCP 客户端' : 'TCP 服务端'
+    const name = isSerial ? tr('串口通道') : isTcpClient ? tr('TCP 客户端') : tr('TCP 服务端')
     const details = isSerial
       ? [channel.port || '--', channel.baud ? `${channel.baud} bps` : '--']
-      : [channel.host || channel.address || '--', channel.port ? `端口: ${channel.port}` : '--']
+      : [channel.host || channel.address || '--', channel.port ? `${tr('端口')}: ${channel.port}` : '--']
     const traffic = `TX: ${formatBytes(channel.tx_bytes || 0)} / RX: ${formatBytes(channel.rx_bytes || 0)}`
     return {
       id: channel.id || `${type}:${details[0]}`,
@@ -227,12 +357,21 @@ const scriptCanRun = computed(() => !scriptRunning.value && yamlText.value.trim(
 const scriptCanStop = computed(() => scriptRunning.value)
 const scriptStatusLabel = computed(() => {
   if (scriptRunning.value) {
-    return scriptState.value ? '运行中 ' + scriptState.value : '运行中'
+    return scriptState.value ? `${tr('运行中')} ${scriptState.value}` : tr('运行中')
   }
-  return '空闲'
+  return tr('空闲')
 })
 const scriptStatusClass = computed(() => (scriptRunning.value ? 'running' : 'idle'))
 const quickPayloadCount = computed(() => countQuickPayload(quickDraft.value.payload, quickDraft.value.mode))
+const languageOptions = computed(() => [
+  { value: 'zh-CN', label: t('lang.zhCN') },
+  { value: 'en-US', label: t('lang.enUS') },
+])
+const themeOptions = computed(() => [
+  { value: 'system', label: t('theme.system') },
+  { value: 'dark', label: t('theme.dark') },
+  { value: 'light', label: t('theme.light') },
+])
 const appVersionLabel = computed(() => appVersion.value || 'v0.0.0')
 
 const filteredChannelCards = computed(() => {
@@ -336,6 +475,8 @@ const scriptsViewBindings = {
 provide('manualView', manualViewBindings)
 provide('scriptsView', scriptsViewBindings)
 provide('bridge', bridge)
+provide('t', t)
+provide('tr', tr)
 
 let scriptTimer = null
 let yamlEditor = null
@@ -820,7 +961,7 @@ function saveQuickCommand() {
   const name = String(quickDraft.value.name || '').trim()
   const payload = String(quickDraft.value.payload || '').trim()
   if (!name || !payload) {
-    window.alert('请输入指令名称和内容')
+    window.alert(tr('请输入指令名称和内容'))
     return
   }
   const record = {
@@ -952,7 +1093,7 @@ function protocolCategory(key) {
 
 function prettyProtocolName(key, fallback) {
   const value = String(key || "").trim()
-  if (!value) return fallback || "协议"
+  if (!value) return fallback || tr('协议')
   const parts = value.split("_").map((part) => {
     const upper = part.toUpperCase()
     if (["RTU", "TCP", "SCPI", "AT", "XMODEM", "YMODEM"].includes(upper)) return upper
@@ -964,15 +1105,15 @@ function prettyProtocolName(key, fallback) {
 
 function protocolStatusInfo(status) {
   if (status === "available") {
-    return { text: "可用", className: "badge-green" }
+    return { text: tr('可用'), className: 'badge-green' }
   }
   if (status === "custom") {
-    return { text: "自定义", className: "badge-blue" }
+    return { text: tr('自定义'), className: 'badge-blue' }
   }
   if (status === "disabled") {
-    return { text: "已禁用", className: "badge-gray" }
+    return { text: tr('已禁用'), className: 'badge-gray' }
   }
-  return { text: status || "未知", className: "badge-gray" }
+  return { text: status || tr('未知'), className: 'badge-gray' }
 }
 
 function setProtocols(items) {
@@ -998,9 +1139,9 @@ function setProtocols(items) {
       status,
       source,
       rows: [
-        { label: "键名", value: key || "--" },
-        { label: "驱动", value: driver || "--" },
-        { label: "分类", value: category || "--" },
+        { label: tr('键名'), value: key || '--' },
+        { label: tr('驱动'), value: driver || '--' },
+        { label: tr('分类'), value: category || '--' },
       ],
     }
   })
@@ -1356,7 +1497,7 @@ async function copyYaml() {
 }
 
 function searchYaml() {
-  const keyword = window.prompt('搜索关键词')
+  const keyword = window.prompt(tr('搜索关键词'))
   if (!keyword) return
   if (yamlEditor) {
     const doc = yamlEditor.state.doc.toString()
@@ -1700,10 +1841,27 @@ const settingsDirty = computed(() => {
   return JSON.stringify(buildSettingsPayload()) !== JSON.stringify(settingsSnapshot.value)
 })
 
+function normalizeLanguage(value) {
+  const raw = String(value || '')
+  const lowered = raw.toLowerCase()
+  if (raw === 'zh-CN' || lowered === 'zh-cn' || raw === '简体中文') return 'zh-CN'
+  if (raw === 'en-US' || lowered === 'en-us' || raw === 'English (US)') return 'en-US'
+  return 'zh-CN'
+}
+
+function normalizeTheme(value) {
+  const raw = String(value || '')
+  const lowered = raw.toLowerCase()
+  if (raw === 'system' || lowered === 'system' || raw === '系统默认') return 'system'
+  if (raw === 'dark' || lowered === 'dark' || raw === '深色 (工程模式)') return 'dark'
+  if (raw === 'light' || lowered === 'light' || raw === '浅色') return 'light'
+  return 'light'
+}
+
 function buildSettingsPayload() {
   return {
-    uiLanguage: '简体中文',
-    uiTheme: '浅色',
+    uiLanguage: uiLanguage.value,
+    uiTheme: uiTheme.value,
     autoConnectOnStart: !!autoConnectOnStart.value,
     dslWorkspacePath: dslWorkspacePath.value,
     quickCommands: quickCommands.value,
@@ -1722,8 +1880,8 @@ function buildSettingsPayload() {
 
 function normalizeSettings(payload) {
   const defaults = {
-    uiLanguage: '简体中文',
-    uiTheme: '浅色',
+    uiLanguage: 'zh-CN',
+    uiTheme: 'light',
     autoConnectOnStart: true,
     dslWorkspacePath: '/usr/local/protoflow/workflows',
     quickCommands: quickCommands.value,
@@ -1742,6 +1900,8 @@ function normalizeSettings(payload) {
   return {
     ...defaults,
     ...payload,
+    uiLanguage: normalizeLanguage(payload.uiLanguage),
+    uiTheme: normalizeTheme(payload.uiTheme),
     serial: {
       ...defaults.serial,
       ...(payload.serial || {}),
@@ -1805,7 +1965,7 @@ function discardSettings() {
 function chooseDslWorkspace() {
   if (!bridge.value || !bridge.value.select_directory) return
   withResult(
-    bridge.value.select_directory('选择工作区', dslWorkspacePath.value || ''),
+    bridge.value.select_directory(tr('选择工作区'), dslWorkspacePath.value || ''),
     (value) => {
       if (value) {
         dslWorkspacePath.value = value
@@ -2027,32 +2187,32 @@ function unlockSidebarWidth() {
         <section v-else-if="currentView === 'protocols'" class="page">
           <header class="page-header spaced">
             <div>
-              <h2>协议管理</h2>
-              <p>配置通信协议定义，绑定通道并设置解析规则。</p>
+              <h2>{{ t('header.protocols.title') }}</h2>
+              <p>{{ t('header.protocols.desc') }}</p>
             </div>
             <div class="header-actions">
               <button class="btn btn-outline" @click="refreshProtocols">
                 <span class="material-symbols-outlined">refresh</span>
-                刷新
+                {{ t('action.refresh') }}
               </button>
               <button class="btn btn-primary" @click="openCreateProtocol">
                 <span class="material-symbols-outlined">add</span>
-                新建协议
+                {{ t('action.createProtocol') }}
               </button>
             </div>
           </header>
           <div class="tab-strip secondary">
-            <button :class="{ active: protocolTab === 'all' }" @click="setProtocolTab('all')">全部协议</button>
+            <button :class="{ active: protocolTab === 'all' }" @click="setProtocolTab('all')">{{ t('protocol.tab.all') }}</button>
             <button :class="{ active: protocolTab === 'modbus' }" @click="setProtocolTab('modbus')">Modbus</button>
             <button :class="{ active: protocolTab === 'tcp' }" @click="setProtocolTab('tcp')">TCP/IP</button>
-            <button :class="{ active: protocolTab === 'custom' }" @click="setProtocolTab('custom')">自定义</button>
+            <button :class="{ active: protocolTab === 'custom' }" @click="setProtocolTab('custom')">{{ t('protocol.tab.custom') }}</button>
           </div>
           <div class="protocol-grid">
             <div v-for="card in filteredProtocolCards" :key="card.id" class="protocol-card">
               <div class="protocol-header">
                 <div>
                   <div class="protocol-title">{{ card.name }}</div>
-                  <div class="protocol-sub">{{ card.desc || '暂无描述' }}</div>
+                  <div class="protocol-sub">{{ card.desc || tr('暂无描述') }}</div>
                 </div>
                 <span class="badge" :class="card.statusClass">{{ card.statusText }}</span>
               </div>
@@ -2064,7 +2224,7 @@ function unlockSidebarWidth() {
               </div>
               <div class="protocol-actions">
                 <button class="btn btn-ghost" @click="openProtocolDetails(card)">
-                  {{ card.source === 'custom' ? '配置' : '查看' }}
+                  {{ card.source === 'custom' ? tr('配置') : tr('查看') }}
                 </button>
                 <button v-if="card.source === 'custom'" class="icon-btn" @click="openProtocolDelete(card)">
                   <span class="material-symbols-outlined">delete</span>
@@ -2075,11 +2235,11 @@ function unlockSidebarWidth() {
               <div class="empty-icon">
                 <span class="material-symbols-outlined">inventory_2</span>
               </div>
-              <h3>暂无协议</h3>
-              <p>暂无可用协议，可从内置模板创建或新增自定义协议。</p>
+              <h3>{{ tr('暂无协议') }}</h3>
+              <p>{{ tr('暂无可用协议，可从内置模板创建或新增自定义协议。') }}</p>
               <button class="btn btn-primary" @click="openCreateProtocol">
                 <span class="material-symbols-outlined">add</span>
-                新建协议
+                {{ t('action.createProtocol') }}
               </button>
             </div>
           </div>
@@ -2088,49 +2248,47 @@ function unlockSidebarWidth() {
 <section v-else class="page">
           <header class="page-header spaced">
             <div>
-              <h2>应用设置</h2>
-                  <p>管理全局偏好、协议默认值和运行时环境配置。</p>
+              <h2>{{ t('header.settings.title') }}</h2>
+                  <p>{{ t('header.settings.desc') }}</p>
             </div>
             <div class="header-actions">
-              <button class="btn btn-outline" :disabled="!settingsDirty" @click="discardSettings">放弃更改</button>
+              <button class="btn btn-outline" :disabled="!settingsDirty" @click="discardSettings">{{ t('action.discardChanges') }}</button>
               <button class="btn btn-primary" :disabled="!settingsDirty || settingsSaving" @click="saveSettings">
-                <span class="material-symbols-outlined">save</span>
-                保存更改
+                <span class="material-symbols-outlined">save</span>{{ t('action.saveChanges') }}
               </button>
             </div>
             </header>
             <div class="tab-strip secondary">
-              <button :class="{ active: settingsTab === 'general' }" @click="setSettingsTab('general')">通用</button>
-              <button :class="{ active: settingsTab === 'plugins' }" @click="setSettingsTab('plugins')">插件</button>
-              <button :class="{ active: settingsTab === 'runtime' }" @click="setSettingsTab('runtime')">运行时</button>
-              <button :class="{ active: settingsTab === 'logs' }" @click="setSettingsTab('logs')">日志</button>
+              <button :class="{ active: settingsTab === 'general' }" @click="setSettingsTab('general')">{{ t('settings.tab.general') }}</button>
+              <button :class="{ active: settingsTab === 'plugins' }" @click="setSettingsTab('plugins')">{{ t('settings.tab.plugins') }}</button>
+              <button :class="{ active: settingsTab === 'runtime' }" @click="setSettingsTab('runtime')">{{ t('settings.tab.runtime') }}</button>
+              <button :class="{ active: settingsTab === 'logs' }" @click="setSettingsTab('logs')">{{ t('settings.tab.logs') }}</button>
             </div>
             <div class="settings-stack">
               <div v-if="settingsTab === 'general'" class="panel" ref="settingsGeneralRef">
               <div class="panel-title simple">
-                <span class="material-symbols-outlined">tune</span>
-                通用
+                <span class="material-symbols-outlined">tune</span>{{ t('settings.tab.general') }}
               </div>
               <div class="form-grid">
                 <label>
-                  界面语言
+                  {{ t('settings.language') }}
                   <DropdownSelect
                     v-model="uiLanguage"
-                    :options="['简体中文', 'English (US)', 'Deutsch', '日本語']"
+                    :options="languageOptions"
                   />
                 </label>
                 <label>
-                  主题偏好
+                  {{ t('settings.theme') }}
                   <DropdownSelect
                     v-model="uiTheme"
-                    :options="['系统默认', '深色 (工程模式)', '浅色']"
+                    :options="themeOptions"
                   />
                 </label>
               </div>
               <div class="toggle-row spaced">
                 <div>
-                  <strong>启动时自动连接</strong>
-                  <p>自动尝试重连上次活动的通道。</p>
+                  <strong>{{ t('settings.autoConnect.title') }}</strong>
+                  <p>{{ t('settings.autoConnect.desc') }}</p>
                 </div>
                 <label class="switch">
                   <input v-model="autoConnectOnStart" type="checkbox" />
@@ -2140,45 +2298,44 @@ function unlockSidebarWidth() {
             </div>
               <div v-if="settingsTab === 'plugins'" class="panel" ref="settingsPluginsRef">
               <div class="panel-title simple">
-                <span class="material-symbols-outlined">extension</span>
-                插件
+                <span class="material-symbols-outlined">extension</span>{{ t('settings.tab.plugins') }}
               </div>
               <label class="file-row">
-                工作目录
+                {{ t('settings.workspace') }}
                 <div class="file-input">
                   <span class="material-symbols-outlined">folder_open</span>
                   <input v-model="dslWorkspacePath" type="text" readonly />
                 </div>
-                <button class="btn btn-outline" type="button" @click="chooseDslWorkspace">选择目录</button>
+                <button class="btn btn-outline" type="button" @click="chooseDslWorkspace">{{ t('settings.chooseFolder') }}</button>
               </label>
               <div class="divider"></div>
               <div class="panel-title simple inline">
-                插件管理
+                {{ t('settings.plugins.title') }}
                 <button class="link-btn">
                   <span class="material-symbols-outlined">refresh</span>
-                  刷新列表
+                  {{ t('settings.plugins.refresh') }}
                 </button>
               </div>
               <div class="plugin-list">
                 <div class="plugin-item">
                   <div>
                     <div class="plugin-title">Modbus TCP/RTU</div>
-                    <div class="plugin-meta">v1.2.4 - 已启用</div>
+                    <div class="plugin-meta">{{ tr('v1.2.4 - 已启用') }}</div>
                   </div>
-                  <span class="badge badge-green">已启用</span>
+                  <span class="badge badge-green">{{ tr('已启用') }}</span>
                 </div>
                 <div class="plugin-item muted">
                   <div>
-                    <div class="plugin-title">MQTT 适配器</div>
-                    <div class="plugin-meta">v0.9.8 - 未安装</div>
+                    <div class="plugin-title">{{ tr('MQTT 适配器') }}</div>
+                    <div class="plugin-meta">{{ tr('v0.9.8 - 未安装') }}</div>
                   </div>
-                  <span class="badge badge-gray">未安装</span>
+                  <span class="badge badge-gray">{{ tr('未安装') }}</span>
                 </div>
               </div>
               <div class="toggle-row spaced">
                 <div>
-                  <strong>启动时自动连接</strong>
-                  <p>自动尝试重连上次活动的通道。</p>
+                  <strong>{{ t('settings.autoConnect.title') }}</strong>
+                  <p>{{ t('settings.autoConnect.desc') }}</p>
                 </div>
                 <label class="switch">
                   <input v-model="autoConnectOnStart" type="checkbox" />
@@ -2189,21 +2346,19 @@ function unlockSidebarWidth() {
 
               <div v-if="settingsTab === 'runtime'" class="panel" ref="settingsRuntimeRef">
               <div class="panel-title simple">
-                <span class="material-symbols-outlined">tune</span>
-                运行时
+                <span class="material-symbols-outlined">tune</span>{{ t('settings.tab.runtime') }}
               </div>
               <div class="empty-state muted">
-                暂无可配置项，运行时设置将随着模块扩展开放。
+                {{ tr('暂无可配置项，运行时设置将随着模块扩展开放。') }}
               </div>
             </div>
 
               <div v-if="settingsTab === 'logs'" class="panel" ref="settingsLogsRef">
               <div class="panel-title simple">
-                <span class="material-symbols-outlined">folder_open</span>
-                日志
+                <span class="material-symbols-outlined">folder_open</span>{{ t('settings.tab.logs') }}
               </div>
               <div class="empty-state muted">
-                日志采集与归档策略将在后续版本中提供。
+                {{ tr('日志采集与归档策略将在后续版本中提供。') }}
               </div>
             </div>
           </div>
@@ -2213,8 +2368,8 @@ function unlockSidebarWidth() {
           <div class="channel-modal">
             <div class="modal-header">
               <div>
-                <h3>{{ channelDialogMode === 'serial' ? '串口配置' : '新建通道' }}</h3>
-                <p>{{ channelDialogMode === 'serial' ? '配置串口连接参数' : '配置新的通信连接参数' }}</p>
+                <h3>{{ channelDialogMode === 'serial' ? tr('串口配置') : tr('新建通道') }}</h3>
+                <p>{{ channelDialogMode === 'serial' ? tr('配置串口连接参数') : tr('配置新的通信连接参数') }}</p>
               </div>
               <button class="icon-btn" type="button" @click="closeChannelDialog">
                 <span class="material-symbols-outlined">close</span>
@@ -2229,7 +2384,7 @@ function unlockSidebarWidth() {
                   @click="channelType = 'serial'"
                 >
                   <span class="material-symbols-outlined">settings_input_hdmi</span>
-                  <span>串口 (Serial)</span>
+                  <span>{{ tr('串口 (Serial)') }}</span>
                 </button>
                 <button
                   class="channel-type-card"
@@ -2238,79 +2393,77 @@ function unlockSidebarWidth() {
                   @click="channelType = 'tcp'"
                 >
                   <span class="material-symbols-outlined">lan</span>
-                  <span>TCP / 网络</span>
+                  <span>{{ tr('TCP / 网络') }}</span>
                 </button>
               </div>
 
               <div class="modal-section" v-if="channelDialogMode !== 'serial'">
-                <div class="section-title">基本信息</div>
+                <div class="section-title">{{ tr('基本信息') }}</div>
                 <div class="form-grid">
-                  <label>
-                    通道名称
-                    <input v-model="channelName" type="text" placeholder="例如：传感器A接口" />
+                  <label>{{ tr('通道名称') }}<input v-model="channelName" type="text" :placeholder="tr('例如：传感器A接口')" />
                   </label>
                   <label v-if="channelType === 'serial'">
-                    串口端口
+                    {{ tr('串口端口') }}
                     <DropdownSelect
                       v-model="channelPort"
                       :options="portOptionsList"
-                      :placeholder="ports.length ? '选择串口' : '无可用串口'"
+                      :placeholder="ports.length ? tr('选择串口') : tr('无可用串口')"
                       :disabled="noPorts"
                       leading-icon="usb"
                     />
                   </label>
                   <label v-else>
-                    目标地址
-                    <input v-model="channelHost" type="text" placeholder="例如：192.168.1.10" />
+                    {{ tr('目标地址') }}
+                    <input v-model="channelHost" type="text" :placeholder="tr('例如：192.168.1.10')" />
                   </label>
                 </div>
               </div>
 
               <div class="modal-section first" v-if="channelType === 'serial'">
-                <div class="section-title">串口参数</div>
+                <div class="section-title">{{ tr('串口参数') }}</div>
                 <div class="form-grid triple">
                   <label>
-                    波特率
+                    {{ tr('波特率') }}
                     <DropdownSelect v-model="channelBaud" :options="[9600, 19200, 38400, 57600, 115200]" />
                   </label>
                   <label>
-                    数据位
+                    {{ tr('数据位') }}
                     <DropdownSelect v-model="channelDataBits" :options="['7', '8']" />
                   </label>
                   <label>
-                    停止位
+                    {{ tr('停止位') }}
                     <DropdownSelect v-model="channelStopBits" :options="['1', '1.5', '2']" />
                   </label>
                 </div>
                 <div class="form-grid quad">
                   <label>
-                    校验位
+                    {{ tr('校验位') }}
                     <DropdownSelect
                       v-model="channelParity"
                       :options="[
-                        { label: '无校验', value: 'none' },
-                        { label: '奇校验', value: 'odd' },
-                        { label: '偶校验', value: 'even' },
+                        { label: tr('无校验'), value: 'none' },
+                        { label: tr('奇校验'), value: 'odd' },
+                        { label: tr('偶校验'), value: 'even' },
                       ]"
                     />
                   </label>
                   <label>
-                    流控
+                    {{ tr('流控') }}
                     <DropdownSelect
                       v-model="channelFlowControl"
                       :options="[
-                        { label: '无', value: 'none' },
+                        { label: tr('无'), value: 'none' },
                         { label: 'RTS/CTS', value: 'rtscts' },
                         { label: 'XON/XOFF', value: 'xonxoff' },
                       ]"
                     />
                   </label>
                   <label>
-                    读超时 (ms)
+                    {{ tr('读超时 (ms)') }}
                     <input v-model.number="channelReadTimeout" type="number" min="0" placeholder="1000" />
                   </label>
                   <label>
-                    写超时 (ms)
+                    {{ tr('写超时 (ms)') }}
                     <input v-model.number="channelWriteTimeout" type="number" min="0" placeholder="1000" />
                   </label>
                 </div>
@@ -2319,7 +2472,7 @@ function unlockSidebarWidth() {
               <div class="modal-section" v-else>
                 <div class="form-grid">
                   <label>
-                    TCP 端口
+                    {{ tr('TCP 端口') }}
                     <input v-model.number="channelTcpPort" type="number" />
                   </label>
                 </div>
@@ -2327,13 +2480,13 @@ function unlockSidebarWidth() {
 
               <label class="channel-toggle">
                 <input v-model="channelAutoConnect" type="checkbox" />
-                <span>{{ channelDialogMode === 'serial' ? '保存后立即连接' : '创建后立即启动连接' }}</span>
+                <span>{{ channelDialogMode === 'serial' ? tr('保存后立即连接') : tr('创建后立即启动连接') }}</span>
               </label>
             </div>
             <div class="modal-footer">
-              <button class="btn btn-outline" type="button" @click="closeChannelDialog">取消</button>
+              <button class="btn btn-outline" type="button" @click="closeChannelDialog">{{ tr('取消') }}</button>
               <button class="btn btn-primary" type="button" @click="submitChannelDialog">
-                {{ channelDialogMode === 'serial' ? '保存配置' : '创建通道' }}
+                {{ channelDialogMode === 'serial' ? tr('保存配置') : tr('创建通道') }}
               </button>
             </div>
           </div>
@@ -2344,8 +2497,8 @@ function unlockSidebarWidth() {
           <div class="channel-modal protocol-modal" @mousedown.stop @click.stop>
             <div class="modal-header">
               <div>
-                <h3>{{ protocolDialogMode === 'create' ? '新建协议' : protocolDialogMode === 'edit' ? '配置协议' : '协议详情' }}</h3>
-                <p>{{ protocolDialogMode === 'create' ? '添加自定义协议元数据，供解析引擎识别。' : '查看或更新协议描述与分类。' }}</p>
+                <h3>{{ protocolDialogMode === 'create' ? tr('新建协议') : protocolDialogMode === 'edit' ? tr('配置协议') : tr('协议详情') }}</h3>
+                <p>{{ protocolDialogMode === 'create' ? tr('添加自定义协议元数据，供解析引擎识别。') : tr('查看或更新协议描述与分类。') }}</p>
               </div>
               <button class="icon-btn" type="button" @click="closeProtocolDialog">
                 <span class="material-symbols-outlined">close</span>
@@ -2354,49 +2507,49 @@ function unlockSidebarWidth() {
             <div class="modal-body protocol-modal-body">
               <div class="form-grid protocol-grid">
                 <label>
-                  协议名称
+                  {{ tr('协议名称') }}
                   <input v-model="protocolDraft.name" type="text" :disabled="protocolDialogMode === 'view'" />
                 </label>
                 <label>
-                  键名
+                  {{ tr('键名') }}
                   <input v-model="protocolDraft.key" type="text" :disabled="protocolDialogMode !== 'create'" />
                 </label>
               </div>
               <div class="form-grid protocol-grid">
                 <label>
-                  分类
+                  {{ tr('分类') }}
                   <select v-model="protocolDraft.category" :disabled="protocolDialogMode === 'view'">
                     <option value="modbus">Modbus</option>
                     <option value="tcp">TCP/IP</option>
-                    <option value="custom">自定义</option>
+                    <option value="custom">{{ t('protocol.tab.custom') }}</option>
                   </select>
                 </label>
                 <label>
-                  状态
+                  {{ tr('状态') }}
                   <select v-model="protocolDraft.status" :disabled="protocolDialogMode === 'view'">
-                    <option value="available">可用</option>
-                    <option value="custom">自定义</option>
-                    <option value="disabled">已禁用</option>
+                    <option value="available">{{ tr('可用') }}</option>
+                    <option value="custom">{{ t('protocol.tab.custom') }}</option>
+                    <option value="disabled">{{ tr('已禁用') }}</option>
                   </select>
                 </label>
               </div>
               <label class="protocol-textarea">
-                描述
+                {{ tr('描述') }}
                 <textarea v-model="protocolDraft.desc" rows="3" :disabled="protocolDialogMode === 'view'"></textarea>
               </label>
               <div class="modal-section protocol-driver" v-if="protocolEditing && protocolEditing.driver">
-                <div class="section-title">驱动</div>
+                <div class="section-title">{{ tr('驱动') }}</div>
                 <div class="form-grid protocol-grid">
                   <label>
-                    驱动类
+                    {{ tr('驱动类') }}
                     <input :value="protocolEditing.driver" type="text" disabled />
                   </label>
                 </div>
               </div>
             </div>
             <div class="modal-footer">
-              <button class="btn btn-outline" type="button" @click="closeProtocolDialog">取消</button>
-              <button v-if="protocolDialogMode !== 'view'" class="btn btn-primary" type="button" @click="saveProtocol">保存</button>
+              <button class="btn btn-outline" type="button" @click="closeProtocolDialog">{{ tr('取消') }}</button>
+              <button v-if="protocolDialogMode !== 'view'" class="btn btn-primary" type="button" @click="saveProtocol">{{ tr('保存') }}</button>
             </div>
           </div>
         </div>
@@ -2405,16 +2558,16 @@ function unlockSidebarWidth() {
           <div class="quick-modal quick-modal-sm" @mousedown.stop @click.stop>
             <div class="modal-header">
               <div>
-                <h3>删除协议</h3>
-                <p>确认删除自定义协议“{{ protocolDeleting?.name }}”吗？</p>
+                <h3>{{ tr('删除协议') }}</h3>
+                <p>{{ tr('确认删除自定义协议') }}“{{ protocolDeleting?.name }}”{{ tr('吗？') }}</p>
               </div>
               <button class="icon-btn" type="button" @click="closeProtocolDelete">
                 <span class="material-symbols-outlined">close</span>
               </button>
             </div>
             <div class="modal-footer">
-              <button class="btn btn-outline" type="button" @click="closeProtocolDelete">取消</button>
-              <button class="btn btn-danger" type="button" @click="confirmProtocolDelete">确认删除</button>
+              <button class="btn btn-outline" type="button" @click="closeProtocolDelete">{{ tr('取消') }}</button>
+              <button class="btn btn-danger" type="button" @click="confirmProtocolDelete">{{ tr('确认删除') }}</button>
             </div>
           </div>
         </div>
@@ -2425,8 +2578,8 @@ function unlockSidebarWidth() {
           <div class="channel-modal ui-yaml-modal" @mousedown.stop @click.stop>
             <div class="modal-header">
               <div>
-                <h3>UI YAML 预览</h3>
-                <p>脚本运行中展示 UI 渲染结果</p>
+                <h3>{{ tr('UI YAML 预览') }}</h3>
+                <p>{{ tr('脚本运行中展示 UI 渲染结果') }}</p>
               </div>
               <button class="icon-btn" type="button" @click="closeUiYamlModal">
                 <span class="material-symbols-outlined">close</span>
@@ -2434,7 +2587,7 @@ function unlockSidebarWidth() {
             </div>
             <div class="modal-body ui-yaml-body">
               <div v-if="uiRuntime.parseError" class="ui-yaml-error">
-                <strong>解析失败</strong>
+                <strong>{{ tr('解析失败') }}</strong>
                 <div>{{ uiRuntime.parseError.message }}</div>
                 <div v-if="uiRuntime.parseError.path" class="muted">Path: {{ uiRuntime.parseError.path }}</div>
                 <div v-if="uiRuntime.parseError.line" class="muted">
@@ -2444,7 +2597,7 @@ function unlockSidebarWidth() {
               <div v-else-if="uiRuntime.lastGoodConfig">
                 <LayoutRenderer :config="uiRuntime.lastGoodConfig" :widgetsById="uiRuntime.widgetsById" />
               </div>
-              <div v-else class="empty-state muted">暂无可渲染的 UI 配置</div>
+              <div v-else class="empty-state muted">{{ tr('暂无可渲染的 UI 配置') }}</div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/components/ManualView.vue b/frontend/src/components/ManualView.vue
index 65812f0..b8680c9 100644
--- a/frontend/src/components/ManualView.vue
+++ b/frontend/src/components/ManualView.vue
@@ -3,6 +3,8 @@ import { inject } from 'vue'
 import DropdownSelect from './DropdownSelect.vue'
 import LogStream from './LogStream.vue'
 
+const t = inject('t', (key: string) => key)
+const tr = inject('tr', (text: string) => text)
 const bindings = inject('manualView')
 if (!bindings) {
   throw new Error('manualView bindings not provided')
@@ -65,14 +67,14 @@ const {
   <section class="page">
           <header class="page-header spaced">
             <div>
-              <h2>串口终端</h2>
-              <p>传统串口调试工具：发送命令，监听 I/O 与日志回显。</p>
+              <h2>{{ t('header.manual.title') }}</h2>
+              <p>{{ t('header.manual.desc') }}</p>
             </div>
             <div class="header-actions terminal-config-actions">
               <div class="config-status">
                 <div class="status-pill" :class="connectionInfo.state">
                   <span class="dot"></span>
-                  {{ isConnected ? '已连接' : connectionInfo.state === 'error' ? '错误' : '未连接' }}
+                  {{ isConnected ? t('status.connected') : connectionInfo.state === 'error' ? t('status.error') : t('status.disconnected') }}
                 </div>
               </div>
               <div class="port-picker terminal-port-picker">
@@ -84,13 +86,13 @@ const {
                   leading-icon="usb"
                   @change="selectPort"
                 />
-                <button class="icon-btn" type="button" title="串口设置" @click="openChannelSettings">
+                <button class="icon-btn" type="button" :title="tr('串口设置')" @click="openChannelSettings">
                   <span class="material-symbols-outlined">settings</span>
                 </button>
                 <button
                   class="icon-btn refresh-icon"
                   type="button"
-                  title="刷新串口"
+                  :title="tr('刷新串口')"
                   :disabled="isConnected || isConnecting"
                   @click="refreshPorts"
                 >
@@ -105,7 +107,7 @@ const {
                   @click="isConnected ? disconnect() : connectSerial()"
                 >
                   <span class="material-symbols-outlined">link</span>
-                  {{ isConnected ? '断开' : isConnecting ? '连接中' : '连接' }}
+                  {{ isConnected ? t('action.disconnect') : isConnecting ? t('status.connecting') : t('action.connect') }}
                 </button>
               </div>
             </div>
@@ -115,10 +117,8 @@ const {
             <div class="manual-left">
               <div class="panel stack manual-send">
                 <div class="panel-title">
-                  <span class="material-symbols-outlined">send</span>
-                  发送数据
-                  <div class="segmented">
-                    <button :class="{ active: sendMode === 'text' }" @click="sendMode = 'text'">文本</button>
+                  <span class="material-symbols-outlined">send</span>{{ tr('发送数据') }}<div class="segmented">
+                    <button :class="{ active: sendMode === 'text' }" @click="sendMode = 'text'">{{ tr('文本') }}</button>
                     <button :class="{ active: sendMode === 'hex' }" @click="sendMode = 'hex'">HEX</button>
                   </div>
                 </div>
@@ -126,7 +126,7 @@ const {
                   v-if="sendMode === 'text'"
                   v-model="sendText"
                   class="text-area"
-                  placeholder="输入要发送的数据..."
+                  :placeholder="tr('输入要发送的数据...')"
                 ></textarea>
                 <textarea
                   v-else
@@ -145,19 +145,15 @@ const {
                   </label>
                   <label class="check">
                     <input v-model="loopSend" type="checkbox" />
-                    <span>循环发送</span>
+                    <span>{{ tr('循环发送') }}</span>
                   </label>
                 </div>
                 <button class="btn btn-primary" @click="sendPayload">
-                  <span class="material-symbols-outlined">send</span>
-                  发送数据
-                </button>
+                  <span class="material-symbols-outlined">send</span>{{ tr('发送数据') }}</button>
               </div>
 
               <div class="panel stack manual-quick">
-                <div class="panel-title simple">
-                  快捷指令
-                  <button class="icon-btn" type="button" title="新增快捷指令" @click="addQuickCommand">
+                <div class="panel-title simple">{{ tr('快捷指令') }}<button class="icon-btn" type="button" :title="tr('新增快捷指令')" @click="addQuickCommand">
                     <span class="material-symbols-outlined">add</span>
                   </button>
                 </div>
@@ -170,13 +166,13 @@ const {
                   >
                     <div class="quick-info">
                       <span class="quick-title">{{ cmd.name }}</span>
-                      <span class="quick-meta">{{ cmd.mode === 'hex' ? 'HEX' : '文本' }}</span>
+                      <span class="quick-meta">{{ cmd.mode === 'hex' ? 'HEX' : tr('文本') }}</span>
                     </div>
                     <div class="quick-item-actions">
-                      <button class="icon-btn small" type="button" title="编辑" @click.stop="editQuickCommand(cmd)">
+                      <button class="icon-btn small" type="button" :title="tr('编辑')" @click.stop="editQuickCommand(cmd)">
                         <span class="material-symbols-outlined">edit</span>
                       </button>
-                      <button class="icon-btn small" type="button" title="删除" @click.stop="openQuickDeleteDialog(cmd)">
+                      <button class="icon-btn small" type="button" :title="tr('删除')" @click.stop="openQuickDeleteDialog(cmd)">
                         <span class="material-symbols-outlined">delete</span>
                       </button>
                       <span class="material-symbols-outlined">play_arrow</span>
@@ -190,9 +186,7 @@ const {
               <div class="panel monitor manual-monitor">
                 <div class="panel-title bar">
                   <div class="panel-title-left">
-                    <span class="material-symbols-outlined">swap_horiz</span>
-                    IO 监控
-                    <span class="pill live">LIVE</span>
+                    <span class="material-symbols-outlined">swap_horiz</span>{{ tr('IO 监控') }}<span class="pill live">LIVE</span>
                   </div>
                   <div class="panel-actions">
                     <div class="segmented small">
@@ -200,19 +194,19 @@ const {
                       <button :class="{ active: displayMode === 'hex' }" @click="displayMode = 'hex'">HEX</button>
                     </div>
                     <span class="divider"></span>
-                    <button class="icon-btn" type="button" title="清除" @click="clearCommLogs">
+                    <button class="icon-btn" type="button" :title="tr('清除')" @click="clearCommLogs">
                       <span class="material-symbols-outlined">delete</span>
                     </button>
                     <button
                       class="icon-btn"
                       type="button"
-                      title="暂停"
+                      :title="tr('暂停')"
                       :class="{ active: commPaused }"
                       @click="toggleCommPaused"
                     >
                       <span class="material-symbols-outlined">pause_circle</span>
                     </button>
-                    <button class="icon-btn" type="button" title="导出" @click="exportCommLogs">
+                    <button class="icon-btn" type="button" :title="tr('导出')" @click="exportCommLogs">
                       <span class="material-symbols-outlined">download</span>
                     </button>
                   </div>
@@ -226,12 +220,12 @@ const {
 
               <div class="panel console manual-console">
                 <div class="tab-strip">
-                  <button :class="{ active: logTab === 'all' }" @click="logTab = 'all'">全部日志</button>
-                  <button :class="{ active: logTab === 'uart' }" @click="logTab = 'uart'">串口 (UART)</button>
-                  <button :class="{ active: logTab === 'tcp' }" @click="logTab = 'tcp'">网络 (TCP)</button>
+                  <button :class="{ active: logTab === 'all' }" @click="logTab = 'all'">{{ tr('全部日志') }}</button>
+                  <button :class="{ active: logTab === 'uart' }" @click="logTab = 'uart'">{{ tr('串口 (UART)') }}</button>
+                  <button :class="{ active: logTab === 'tcp' }" @click="logTab = 'tcp'">{{ tr('网络 (TCP)') }}</button>
                   <div class="search">
                     <span class="material-symbols-outlined">search</span>
-                    <input v-model="logKeyword" type="text" placeholder="过滤日志..." />
+                    <input v-model="logKeyword" type="text" :placeholder="tr('过滤日志...')" />
                   </div>
                 </div>
                 <LogStream
@@ -241,8 +235,8 @@ const {
                   :formatPayload="formatPayload"
                 />
                 <div class="panel-footer">
-                  <span>{{ visibleCommLogs.length }} 条日志记录</span>
-                  <button class="link-btn" type="button" @click="clearCommLogs">清除日志</button>
+                  <span>{{ visibleCommLogs.length }} {{ tr('条日志记录') }}</span>
+                  <button class="link-btn" type="button" @click="clearCommLogs">{{ tr('清除日志') }}</button>
                 </div>
               </div>
             </div>
@@ -252,8 +246,8 @@ const {
             <div class="quick-modal">
               <div class="modal-header">
                 <div>
-                  <h3>{{ quickDialogMode === 'edit' ? '快捷指令编辑' : '新增快捷指令' }}</h3>
-                  <p>{{ quickDialogMode === 'edit' ? '编辑或更新现有的快捷调试指令' : '创建新的快捷调试指令' }}</p>
+                  <h3>{{ quickDialogMode === 'edit' ? tr('快捷指令编辑') : tr('新增快捷指令') }}</h3>
+                  <p>{{ quickDialogMode === 'edit' ? tr('编辑或更新现有的快捷调试指令') : tr('创建新的快捷调试指令') }}</p>
                 </div>
                 <button class="icon-btn" type="button" @click="closeQuickCommandDialog">
                   <span class="material-symbols-outlined">close</span>
@@ -261,19 +255,17 @@ const {
               </div>
               <div class="modal-body">
                 <div class="quick-field">
-                  <label>指令名称</label>
-                  <input v-model="quickDraft.name" type="text" placeholder="例如：CMD PING" />
+                  <label>{{ tr('指令名称') }}</label>
+                  <input v-model="quickDraft.name" type="text" :placeholder="tr('例如：CMD PING')" />
                 </div>
 
                 <div class="quick-field">
                   <div class="quick-field-header">
-                    <label>指令内容</label>
+                    <label>{{ tr('指令内容') }}</label>
                     <div class="quick-mode">
-                      <span class="quick-mode-label">格式:</span>
+                      <span class="quick-mode-label">{{ tr('格式:') }}</span>
                       <div class="segmented small">
-                        <button :class="{ active: quickDraft.mode === 'text' }" @click="quickDraft.mode = 'text'">
-                          文本
-                        </button>
+                        <button :class="{ active: quickDraft.mode === 'text' }" @click="quickDraft.mode = 'text'">{{ tr('文本') }}</button>
                         <button :class="{ active: quickDraft.mode === 'hex' }" @click="quickDraft.mode = 'hex'">
                           HEX
                         </button>
@@ -284,29 +276,29 @@ const {
                     v-model="quickDraft.payload"
                     class="quick-textarea"
                     rows="4"
-                    placeholder="输入要发送的指令内容"
+                    :placeholder="tr('输入要发送的指令内容')"
                   ></textarea>
                   <p class="quick-counter">{{ quickPayloadCount }} / {{ quickPayloadLimit }}</p>
                 </div>
 
                 <div class="modal-section quick-options">
-                  <div class="section-title">发送选项</div>
+                  <div class="section-title">{{ tr('发送选项') }}</div>
                   <div class="toggle-row">
                     <label class="check">
                       <input v-model="quickDraft.appendCR" type="checkbox" />
-                      <span>添加 CR (\r)</span>
+                      <span>{{ tr('添加 CR (\r)') }}</span>
                     </label>
                     <label class="check">
                       <input v-model="quickDraft.appendLF" type="checkbox" />
-                      <span>添加 LF (\n)</span>
+                      <span>{{ tr('添加 LF (\n)') }}</span>
                     </label>
                   </div>
                 </div>
               </div>
               <div class="modal-footer">
-                <button class="btn btn-outline" type="button" @click="closeQuickCommandDialog">取消</button>
+                <button class="btn btn-outline" type="button" @click="closeQuickCommandDialog">{{ tr('取消') }}</button>
                 <button class="btn btn-primary" type="button" @click="saveQuickCommand">
-                  {{ quickDialogMode === 'edit' ? '保存修改' : '创建指令' }}
+                  {{ quickDialogMode === 'edit' ? tr('保存修改') : tr('创建指令') }}
                 </button>
               </div>
             </div>
@@ -316,8 +308,8 @@ const {
             <div class="quick-modal quick-modal-sm">
               <div class="modal-header">
                 <div>
-                  <h3>删除快捷指令</h3>
-                  <p>确认删除该快捷指令，删除后无法恢复。</p>
+                  <h3>{{ tr('删除快捷指令') }}</h3>
+                  <p>{{ tr('确认删除该快捷指令，删除后无法恢复。') }}</p>
                 </div>
                 <button class="icon-btn" type="button" @click="closeQuickDeleteDialog">
                   <span class="material-symbols-outlined">close</span>
@@ -327,14 +319,14 @@ const {
                 <div class="quick-delete-summary">
                   <span class="material-symbols-outlined">warning</span>
                   <div>
-                    <p class="quick-delete-title">{{ quickDeleting?.name || '未命名指令' }}</p>
-                    <p class="quick-delete-meta">{{ quickDeleting?.mode === 'hex' ? 'HEX' : '文本' }}</p>
+                    <p class="quick-delete-title">{{ quickDeleting?.name || tr('未命名指令') }}</p>
+                    <p class="quick-delete-meta">{{ quickDeleting?.mode === 'hex' ? 'HEX' : tr('文本') }}</p>
                   </div>
                 </div>
               </div>
               <div class="modal-footer">
-                <button class="btn btn-outline" type="button" @click="closeQuickDeleteDialog">取消</button>
-                <button class="btn btn-danger" type="button" @click="confirmQuickDelete">确认删除</button>
+                <button class="btn btn-outline" type="button" @click="closeQuickDeleteDialog">{{ tr('取消') }}</button>
+                <button class="btn btn-danger" type="button" @click="confirmQuickDelete">{{ tr('确认删除') }}</button>
               </div>
             </div>
           </div>
diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index e573fbc..f3947f5 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -2,12 +2,16 @@
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import DropdownSelect from './DropdownSelect.vue'
 
-const filterTabs = [
-  { id: 'all', label: '全部' },
-  { id: 'running', label: '运行中' },
-  { id: 'stopped', label: '已停止' },
-  { id: 'error', label: '异常' },
-]
+const t = inject('t', (key: string) => key)
+const tr = inject('tr', (text: string) => text)
+const bridge = inject('bridge', null)
+
+const filterTabs = computed(() => [
+  { id: 'all', label: t('filter.all') },
+  { id: 'running', label: t('filter.running') },
+  { id: 'stopped', label: t('filter.stopped') },
+  { id: 'error', label: t('filter.error') },
+])
 const activeFilter = ref(filterTabs[0].id)
 const modalOpen = ref(false)
 const modalProxy = ref(null)
@@ -21,32 +25,41 @@ const captureView = ref('parsed')
 const selectedFrame = ref(null)
 
 const proxyName = ref('')
-const connectionMode = ref('透传模式')
+const connectionMode = ref(tr('透传模式'))
 const hostPort = ref('COM3')
 const devicePort = ref('COM5')
 const baudRate = ref('115200')
-const parity = ref('无')
+const parity = ref(tr('无'))
 const dataBits = ref('8')
 const stopBits = ref('1')
 const flowControl = ref('none')
 
-const connectionOptions = ['透传模式', '协议桥接', '映射模式']
+const connectionOptions = computed(() => [
+  { value: '透传模式', label: tr('透传模式') },
+  { value: '协议桥接', label: tr('协议桥接') },
+  { value: '映射模式', label: tr('映射模式') },
+])
 const portOptions = ['COM1', 'COM2', 'COM3', 'COM4', 'COM5', 'COM6', 'COM10', 'COM12']
 const baudOptions = ['4800', '9600', '19200', '38400', '57600', '115200']
-const parityOptions = ['无', '偶校验', '奇校验', 'Mark', 'Space']
+const parityOptions = computed(() => [
+  { value: '无', label: tr('无') },
+  { value: '偶校验', label: tr('偶校验') },
+  { value: '奇校验', label: tr('奇校验') },
+  { value: 'Mark', label: 'Mark' },
+  { value: 'Space', label: 'Space' },
+])
 
-const bridge = inject('bridge', null)
 
 const proxies = ref([
   {
     id: 'proxy-com3',
-    name: '主控制器链路',
+    name: tr('主控制器链路'),
     meta: 'ID: PX-00124 · 8-N-1',
     status: 'running',
-    statusLabel: '运行中',
+    statusLabel: tr('运行中'),
     statusIcon: 'swap_horizontal_circle',
     routeIcon: 'keyboard_double_arrow_right',
-    routeLabel: '转发中',
+    routeLabel: tr('转发中'),
     routeTone: 'primary',
     hostPort: 'COM3',
     devicePort: 'COM5',
@@ -55,17 +68,17 @@ const proxies = ref([
     bandwidthUnit: 'KB/s',
     spark: 'M0 35 L10 20 L20 35 L30 10 L40 30 L50 5 L60 35 L70 20 L80 30 L90 10 L100 25',
     active: true,
-    toggleLabel: '运行中',
+    toggleLabel: tr('运行中'),
   },
   {
     id: 'proxy-com7',
-    name: '电机反馈继电器',
+    name: tr('电机反馈继电器'),
     meta: 'ID: PX-00992 · 8-E-1',
     status: 'stopped',
-    statusLabel: '已停止',
+    statusLabel: tr('已停止'),
     statusIcon: 'pause_circle',
     routeIcon: 'more_horiz',
-    routeLabel: '离线',
+    routeLabel: tr('离线'),
     routeTone: 'muted',
     hostPort: 'COM7',
     devicePort: 'COM10',
@@ -74,17 +87,17 @@ const proxies = ref([
     bandwidthUnit: 'KB/s',
     spark: '',
     active: false,
-    toggleLabel: '已停止',
+    toggleLabel: tr('已停止'),
   },
   {
     id: 'proxy-com1',
-    name: 'GPS 模块数据流',
+    name: tr('GPS 模块数据流'),
     meta: 'ID: PX-00219 · 7-N-2',
     status: 'error',
-    statusLabel: '异常',
+    statusLabel: tr('异常'),
     statusIcon: 'report',
     routeIcon: 'sync_problem',
-    routeLabel: '连接失败',
+    routeLabel: tr('连接失败'),
     routeTone: 'danger',
     hostPort: 'COM1',
     devicePort: 'COM12',
@@ -93,7 +106,7 @@ const proxies = ref([
     bandwidthUnit: 'KB/s',
     spark: 'M0 38 L40 38 L42 10 L48 10 L50 38 L90 38 L92 10 L98 10 L100 38',
     active: true,
-    toggleLabel: '异常',
+    toggleLabel: tr('异常'),
   },
 ])
 
@@ -123,8 +136,8 @@ function withBridgeResult(result, onSuccess) {
 function mapProxyFromBackend(payload) {
   const status = payload.status || 'stopped'
   const active = status === 'running'
-  const statusLabel = active ? '运行中' : '已停止'
-  const routeLabel = active ? '转发中' : '离线'
+  const statusLabel = active ? tr('运行中') : tr('已停止')
+  const routeLabel = active ? tr('转发中') : tr('离线')
   const routeTone = active ? 'primary' : 'muted'
   const statusIcon = active ? 'swap_horizontal_circle' : 'pause_circle'
   const routeIcon = active ? 'keyboard_double_arrow_right' : 'more_horiz'
@@ -132,7 +145,7 @@ function mapProxyFromBackend(payload) {
   proxySeq = Math.max(proxySeq, Number(String(payload.id || '').replace(/\D/g, '')) || proxySeq)
   return {
     id: payload.id || `proxy-${Date.now()}`,
-    name: payload.name || '未命名转发对',
+    name: payload.name || tr('未命名转发对'),
     meta: payload.meta || buildProxyMeta(payload.hostPort, baud),
     status,
     statusLabel,
@@ -211,6 +224,27 @@ const activeProtocolLabel = computed(() => activeFrame.value?.protocolLabel || '
 
 const activeProtocolTooltip = computed(() => activeFrame.value?.protocolTooltip || '')
 
+const proxyStatusLabel = (status) => {
+  if (status === 'running') return tr('运行中')
+  if (status === 'stopped') return tr('已停止')
+  if (status === 'error') return tr('异常')
+  return tr('未知')
+}
+
+const proxyRouteLabel = (status) => {
+  if (status === 'running') return tr('转发中')
+  if (status === 'stopped') return tr('离线')
+  if (status === 'error') return tr('连接失败')
+  return tr('未知')
+}
+
+const proxyToggleLabel = (status) => {
+  if (status === 'running') return tr('运行中')
+  if (status === 'stopped') return tr('已停止')
+  if (status === 'error') return tr('异常')
+  return tr('未知')
+}
+
 const activeSummaryText = computed(() => activeFrame.value?.summaryText || activeFrame.value?.summary || '')
 
 const activeHexBytes = computed(() => {
@@ -348,8 +382,8 @@ function refreshProxies() {
 
 function setProxyStatus(proxy, active) {
   const nextStatus = active ? 'running' : 'stopped'
-  const statusLabel = active ? '运行中' : '已停止'
-  const routeLabel = active ? '转发中' : '离线'
+  const statusLabel = active ? tr('运行中') : tr('已停止')
+  const routeLabel = active ? tr('转发中') : tr('离线')
   const routeTone = active ? 'primary' : 'muted'
   const statusIcon = active ? 'swap_horizontal_circle' : 'pause_circle'
   const routeIcon = active ? 'keyboard_double_arrow_right' : 'more_horiz'
@@ -373,7 +407,7 @@ function setProxyStatus(proxy, active) {
 
 function saveProxy() {
   const payload = {
-    name: proxyName.value || '未命名转发对',
+    name: proxyName.value || tr('未命名转发对'),
     hostPort: hostPort.value,
     devicePort: devicePort.value,
     baud: baudRate.value,
@@ -410,10 +444,10 @@ function saveProxy() {
           name: payload.name,
           meta: buildProxyMeta(payload.hostPort, payload.baud),
           status: 'stopped',
-          statusLabel: '已停止',
+          statusLabel: tr('已停止'),
           statusIcon: 'pause_circle',
           routeIcon: 'more_horiz',
-          routeLabel: '离线',
+          routeLabel: tr('离线'),
           routeTone: 'muted',
           hostPort: payload.hostPort,
           devicePort: payload.devicePort,
@@ -426,7 +460,7 @@ function saveProxy() {
           bandwidthUnit: 'KB/s',
           spark: '',
           active: false,
-          toggleLabel: '已停止',
+          toggleLabel: tr('已停止'),
         },
         {}
       )
@@ -524,17 +558,17 @@ onBeforeUnmount(() => {
   <section class="page proxy-page proxy-dashboard">
     <header class="page-header spaced">
       <div>
-        <h2>代理监控</h2>
-        <p>管理转发链路并实时监控数据流状态。</p>
+        <h2>{{ t('header.proxy.title') }}</h2>
+        <p>{{ t('header.proxy.desc') }}</p>
       </div>
       <div class="header-actions">
         <button class="btn btn-outline" type="button" @click="refreshProxies">
           <span class="material-symbols-outlined">refresh</span>
-          刷新状态
+          {{ t('action.refreshStatus') }}
         </button>
         <button class="btn btn-primary" type="button" @click="openCreateModal">
           <span class="material-symbols-outlined">add</span>
-          新建转发对
+          {{ t('action.newProxy') }}
         </button>
       </div>
     </header>
@@ -563,39 +597,39 @@ onBeforeUnmount(() => {
               <span class="material-symbols-outlined">{{ proxy.statusIcon }}</span>
             </div>
             <div>
-              <h3>{{ proxy.name }}</h3>
+            <h3>{{ tr(proxy.name) }}</h3>
               <p>{{ proxy.meta }}</p>
             </div>
           </div>
           <span class="proxy-status-pill" :class="`status-${proxy.status}`">
             <span class="dot"></span>
-            {{ proxy.statusLabel }}
+            {{ proxyStatusLabel(proxy.status) }}
           </span>
         </div>
 
         <div class="proxy-route-card" :class="`status-${proxy.status}`">
           <div class="proxy-route-col">
-            <p>主机源端口</p>
+            <p>{{ tr('主机源端口') }}</p>
             <span class="proxy-route-chip proxy-mono">{{ proxy.hostPort }}</span>
           </div>
           <div class="proxy-route-state" :class="proxy.routeTone">
             <span class="material-symbols-outlined">{{ proxy.routeIcon }}</span>
-            <span>{{ proxy.routeLabel }}</span>
+            <span>{{ proxyRouteLabel(proxy.status) }}</span>
           </div>
           <div class="proxy-route-col">
-            <p>设备代理端口</p>
+            <p>{{ tr('设备代理端口') }}</p>
             <span class="proxy-route-chip proxy-mono">{{ proxy.devicePort }}</span>
           </div>
         </div>
 
         <div class="proxy-metrics">
           <div>
-            <p>波特率</p>
+            <p>{{ tr('波特率') }}</p>
             <strong class="proxy-mono">{{ proxy.baud }}</strong>
           </div>
           <div class="proxy-metric-bandwidth">
             <div>
-              <p :class="{ danger: proxy.status === 'error' }">实时带宽</p>
+              <p :class="{ danger: proxy.status === 'error' }">{{ tr('实时带宽') }}</p>
               <strong class="proxy-mono">
                 {{ proxy.bandwidth }}
                 <span>{{ proxy.bandwidthUnit }}</span>
@@ -615,16 +649,16 @@ onBeforeUnmount(() => {
             <span class="proxy-toggle" :class="{ active: proxy.active }" @click="setProxyStatus(proxy, !proxy.active)">
               <span class="proxy-toggle-track"></span>
             </span>
-            <span class="proxy-toggle-text">{{ proxy.toggleLabel }}</span>
+            <span class="proxy-toggle-text">{{ proxyToggleLabel(proxy.status) }}</span>
           </label>
           <div class="proxy-footer-actions">
-            <button class="icon-btn" type="button" title="抓包" @click="openCaptureModal(proxy)">
+            <button class="icon-btn" type="button" :title="tr('抓包')" @click="openCaptureModal(proxy)">
               <span class="material-symbols-outlined">terminal</span>
             </button>
-            <button class="icon-btn" type="button" title="编辑" @click="openEditModal(proxy)">
+            <button class="icon-btn" type="button" :title="tr('编辑')" @click="openEditModal(proxy)">
               <span class="material-symbols-outlined">edit</span>
             </button>
-            <button class="icon-btn danger" type="button" title="删除" @click="confirmDeleteProxy(proxy)">
+            <button class="icon-btn danger" type="button" :title="tr('删除')" @click="confirmDeleteProxy(proxy)">
               <span class="material-symbols-outlined">delete</span>
             </button>
           </div>
@@ -641,7 +675,7 @@ onBeforeUnmount(() => {
             <div class="proxy-modal-icon">
               <span class="material-symbols-outlined">edit_square</span>
             </div>
-            <h2>{{ modalMode === 'create' ? '新建转发对' : '编辑转发代理' }}</h2>
+            <h2>{{ modalMode === 'create' ? tr('新建转发对') : tr('编辑转发代理') }}</h2>
           </div>
           <button class="proxy-modal-close" type="button" @click="closeModal">
             <span class="material-symbols-outlined">close</span>
@@ -651,43 +685,37 @@ onBeforeUnmount(() => {
           <div class="proxy-modal-stack">
             <div class="proxy-modal-grid">
               <div class="proxy-field">
-                <label>代理名称</label>
+                <label>{{ tr('代理名称') }}</label>
                 <input type="text" v-model="proxyName" />
               </div>
               <div class="proxy-field">
-                <label>连接模式</label>
+                <label>{{ tr('连接模式') }}</label>
                 <DropdownSelect v-model="connectionMode" class="proxy-select" :options="connectionOptions" />
               </div>
             </div>
             <div class="proxy-port-map">
               <div class="proxy-field">
                 <label>
-                  <span class="material-symbols-outlined">computer</span>
-                  主机端口
-                </label>
+                <span class="material-symbols-outlined">computer</span>{{ tr('主机端口') }}</label>
                 <DropdownSelect v-model="hostPort" class="proxy-select" :options="portOptions" />
               </div>
               <div class="proxy-field">
                 <label>
-                  <span class="material-symbols-outlined">settings_input_component</span>
-                  设备端口
-                </label>
+                  <span class="material-symbols-outlined">settings_input_component</span>{{ tr('设备端口') }}</label>
                 <DropdownSelect v-model="devicePort" class="proxy-select" :options="portOptions" />
               </div>
             </div>
             <div class="proxy-section">
               <div class="proxy-section-title">
-                <span class="material-symbols-outlined">settings_ethernet</span>
-                串口参数配置
-                <span>（两端需一致）</span>
+                <span class="material-symbols-outlined">settings_ethernet</span>{{ tr('串口参数配置') }}<span>{{ tr('（两端需一致）') }}</span>
               </div>
               <div class="proxy-section-grid">
                 <div class="proxy-field">
-                  <label>波特率</label>
+                  <label>{{ tr('波特率') }}</label>
                   <DropdownSelect v-model="baudRate" class="proxy-select" :options="baudOptions" />
                 </div>
                 <div class="proxy-field">
-                  <label>数据位</label>
+                  <label>{{ tr('数据位') }}</label>
                   <div class="proxy-segmented">
                     <button type="button" :class="{ active: dataBits === '5' }" @click="dataBits = '5'">5</button>
                     <button type="button" :class="{ active: dataBits === '6' }" @click="dataBits = '6'">6</button>
@@ -696,11 +724,11 @@ onBeforeUnmount(() => {
                   </div>
                 </div>
                 <div class="proxy-field">
-                  <label>校验位</label>
+                  <label>{{ tr('校验位') }}</label>
                   <DropdownSelect v-model="parity" class="proxy-select" :options="parityOptions" />
                 </div>
                 <div class="proxy-field">
-                  <label>停止位</label>
+                  <label>{{ tr('停止位') }}</label>
                   <div class="proxy-segmented">
                     <button type="button" :class="{ active: stopBits === '1' }" @click="stopBits = '1'">1</button>
                     <button type="button" :class="{ active: stopBits === '1.5' }" @click="stopBits = '1.5'">1.5</button>
@@ -708,7 +736,7 @@ onBeforeUnmount(() => {
                   </div>
                 </div>
                 <div class="proxy-field proxy-span-2">
-                  <label>流控</label>
+                  <label>{{ tr('流控') }}</label>
                   <div class="proxy-segmented">
                     <button type="button" :class="{ active: flowControl === 'none' }" @click="flowControl = 'none'">None</button>
                     <button type="button" :class="{ active: flowControl === 'rtscts' }" @click="flowControl = 'rtscts'">RTS/CTS</button>
@@ -719,24 +747,18 @@ onBeforeUnmount(() => {
             </div>
             <div class="proxy-section proxy-modal-advanced">
               <div class="proxy-section-title muted">
-                <span class="material-symbols-outlined">settings_suggest</span>
-                高级选项
-              </div>
+                <span class="material-symbols-outlined">settings_suggest</span>{{ tr('高级选项') }}</div>
               <div class="proxy-toggle-row">
                 <label>
                   <span class="proxy-toggle">
                     <input type="checkbox" checked />
                     <span></span>
-                  </span>
-                  自动重连
-                </label>
+                  </span>{{ tr('自动重连') }}</label>
                 <label>
                   <span class="proxy-toggle">
                     <input type="checkbox" />
                     <span></span>
-                  </span>
-                  详细日志
-                </label>
+                  </span>{{ tr('详细日志') }}</label>
               </div>
             </div>
           </div>
@@ -744,8 +766,8 @@ onBeforeUnmount(() => {
         <div class="proxy-modal-footer">
           <div></div>
           <div class="proxy-footer-actions">
-            <button class="proxy-btn ghost" type="button" @click="closeModal">取消</button>
-            <button class="proxy-btn primary" type="button" @click="saveProxy">保存</button>
+            <button class="proxy-btn ghost" type="button" @click="closeModal">{{ tr('取消') }}</button>
+            <button class="proxy-btn primary" type="button" @click="saveProxy">{{ tr('保存') }}</button>
           </div>
         </div>
       </div>
@@ -763,11 +785,11 @@ onBeforeUnmount(() => {
               <span class="material-symbols-outlined">analytics</span>
             </div>
             <div>
-              <h1 class="text-sm font-bold text-slate-900 leading-none">多协议通用报文分析引擎</h1>
+              <h1 class="text-sm font-bold text-slate-900 leading-none">{{ tr('多协议通用报文分析引擎') }}</h1>
               <div class="flex items-center gap-2 mt-1">
                 <span class="flex h-2 w-2 rounded-full bg-emerald-500"></span>
                 <p class="text-[10px] font-medium text-slate-500">
-                  活动通道: {{ captureProxy ? captureProxy.hostPort : captureMeta.channel }} | 引擎状态: {{ captureMeta.engine }}
+                  {{ tr('活动通道') }}: {{ captureProxy ? captureProxy.hostPort : captureMeta.channel }} | {{ tr('引擎状态') }}: {{ tr(captureMeta.engine) }}
                 </p>
               </div>
             </div>
@@ -777,14 +799,13 @@ onBeforeUnmount(() => {
               <span class="material-symbols-outlined text-slate-400">search</span>
               <input
                 class="bg-transparent border-none text-xs w-64 lg:w-96 focus:ring-0 text-slate-900 placeholder-slate-500"
-                placeholder="搜索标识、十六进制、协议、原始数据..."
+                :placeholder="tr('搜索标识、十六进制、协议、原始数据...')"
                 type="text"
               />
             </div>
             <div class="h-6 w-[1px] bg-slate-200 mx-1"></div>
             <button class="flex items-center gap-1 px-3 py-1.5 bg-emerald-600 hover:bg-emerald-700 text-white rounded text-xs font-bold transition-colors shadow-sm">
-              <span class="material-symbols-outlined !text-sm">play_arrow</span> 继续捕获
-            </button>
+              <span class="material-symbols-outlined !text-sm">play_arrow</span>{{ tr('继续捕获') }}</button>
             <button class="p-1.5 hover:bg-slate-100 rounded text-slate-400">
               <span class="material-symbols-outlined">settings</span>
             </button>
@@ -802,13 +823,13 @@ onBeforeUnmount(() => {
               <table class="w-full text-left border-separate border-spacing-0">
                 <thead class="sticky top-0 z-10 bg-slate-50 shadow-sm">
                   <tr class="text-[10px] uppercase tracking-wider font-bold text-slate-500">
-                    <th class="px-3 py-2 border-b border-slate-200 w-16">序号</th>
-                    <th class="px-3 py-2 border-b border-slate-200 w-28">时间戳</th>
-                    <th class="px-3 py-2 border-b border-slate-200 w-12 text-center">方向</th>
-                    <th class="px-3 py-2 border-b border-slate-200 w-32">协议</th>
-                    <th class="px-3 py-2 border-b border-slate-200 w-16">长度</th>
-                    <th class="px-3 py-2 border-b border-slate-200 w-72">原始数据</th>
-                    <th class="px-3 py-2 border-b border-slate-200">摘要 (解析结果/HEX/ASCII)</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-16">{{ tr('序号') }}</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-28">{{ tr('时间戳') }}</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-12 text-center">{{ tr('方向') }}</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-32">{{ tr('协议') }}</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-16">{{ tr('长度') }}</th>
+                    <th class="px-3 py-2 border-b border-slate-200 w-72">{{ tr('原始数据') }}</th>
+                    <th class="px-3 py-2 border-b border-slate-200">{{ tr('摘要 (解析结果/HEX/ASCII)') }}</th>
                   </tr>
                 </thead>
                 <tbody class="text-xs">
@@ -868,10 +889,9 @@ onBeforeUnmount(() => {
           <aside class="flex-1 w-[450px] flex flex-col border-l border-slate-200 bg-slate-50">
             <div class="px-4 py-3 border-b border-slate-200 flex justify-between items-center bg-white shadow-sm">
               <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500 flex items-center gap-2">
-                <span class="material-symbols-outlined !text-sm text-blue-500">info</span> 报文解析详情
-              </h2>
+                <span class="material-symbols-outlined !text-sm text-blue-500">info</span>{{ tr('报文解析详情') }}</h2>
               <div class="flex gap-2">
-                <button class="p-1 hover:bg-slate-100 rounded" title="复制原始十六进制">
+                <button class="p-1 hover:bg-slate-100 rounded" :title="tr('复制原始十六进制')">
                   <span class="material-symbols-outlined !text-sm">content_copy</span>
                 </button>
                 <button class="p-1 hover:bg-slate-100 rounded" @click="closeCaptureModal">
@@ -880,7 +900,7 @@ onBeforeUnmount(() => {
               </div>
             </div>
             <div class="flex-1 overflow-y-auto">
-              <div v-if="!activeFrame" class="p-6 text-center text-slate-400 text-sm">暂无报文数据</div>
+              <div v-if="!activeFrame" class="p-6 text-center text-slate-400 text-sm">{{ tr('暂无报文数据') }}</div>
               <template v-else>
                 <div class="p-6 text-center space-y-4 border-b border-slate-200 bg-orange-50/20">
                   <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-orange-100 text-orange-600 mb-1">
@@ -888,31 +908,31 @@ onBeforeUnmount(() => {
                   </div>
                   <div>
                     <h3 class="text-sm font-bold text-slate-800">
-                      {{ isUnknownFrame ? '未知协议报文 (Unknown Protocol)' : `${activeProtocolLabel} 报文` }}
+                      {{ isUnknownFrame ? tr('未知协议报文 (Unknown Protocol)') : `${activeProtocolLabel} ${tr('报文')}` }}
                     </h3>
                     <p class="text-[11px] text-slate-500 mt-1 max-w-[280px] mx-auto leading-relaxed">
                       {{
                         isUnknownFrame
-                          ? '系统未能自动匹配已知的解析插件。您可以尝试手动配置解析规则，或使用万能解析脚本。'
-                          : '已匹配协议解析插件，当前展示该报文的解析详情。'
+                          ? tr('系统未能自动匹配已知的解析插件。您可以尝试手动配置解析规则，或使用万能解析脚本。')
+                          : tr('已匹配协议解析插件，当前展示该报文的解析详情。')
                       }}
                     </p>
                   </div>
                   <div class="flex justify-center gap-3">
                     <button class="px-3 py-1.5 bg-white border border-slate-300 rounded text-[11px] font-bold hover:bg-slate-50 transition-colors shadow-sm">
-                      {{ isUnknownFrame ? '手动解析' : '查看详情' }}
+                      {{ isUnknownFrame ? tr('手动解析') : tr('查看详情') }}
                     </button>
                     <button class="px-3 py-1.5 bg-blue-600 text-white rounded text-[11px] font-bold hover:bg-blue-700 transition-colors flex items-center gap-1 shadow-md">
                       <span class="material-symbols-outlined !text-xs">schema</span>
-                      {{ isUnknownFrame ? '配置解析规则' : '调整解析规则' }}
+                      {{ isUnknownFrame ? tr('配置解析规则') : tr('调整解析规则') }}
                     </button>
                   </div>
                 </div>
                 <div class="p-4 border-b border-slate-200">
                   <div class="flex items-center justify-between mb-3">
-                    <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">原始十六进制 (RAW HEX)</h3>
+                    <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{{ tr('原始十六进制 (RAW HEX)') }}</h3>
                     <span class="text-[10px] font-mono bg-slate-200 px-1.5 py-0.5 rounded text-slate-600">
-                      {{ activeHexSize }} 字节
+                      {{ activeHexSize }} {{ tr('字节') }}
                     </span>
                   </div>
                   <div v-if="activeHexCells.length" class="bg-white border border-slate-200 rounded-lg overflow-hidden flex shadow-inner">
@@ -932,14 +952,14 @@ onBeforeUnmount(() => {
                       {{ activeHexAscii[0] }}<br />{{ activeHexAscii[1] }}
                     </div>
                   </div>
-                  <div v-else class="text-xs text-slate-400">暂无十六进制数据</div>
+                  <div v-else class="text-xs text-slate-400">{{ tr('暂无十六进制数据') }}</div>
                 </div>
                 <div class="p-4 space-y-4">
-                  <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">协议层级解析 (PROTOCOL TREE)</h3>
+                  <h3 class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-2">{{ tr('协议层级解析 (PROTOCOL TREE)') }}</h3>
                   <div class="relative pl-4 space-y-1">
                     <div class="flex items-center gap-2 -ml-4 cursor-pointer hover:bg-slate-100 p-1 rounded transition-colors group">
                       <span class="material-symbols-outlined text-slate-400 group-open:rotate-90">arrow_right</span>
-                      <span class="text-[11px] font-bold text-slate-500 uppercase">链路层 (Data Link Layer)</span>
+                      <span class="text-[11px] font-bold text-slate-500 uppercase">{{ tr('链路层 (Data Link Layer)') }}</span>
                     </div>
                     <div class="tree-line relative pl-2 space-y-1">
                       <details class="group" open>
@@ -949,9 +969,9 @@ onBeforeUnmount(() => {
                         </summary>
                         <div class="mt-2 space-y-0.5 pl-2">
                           <div class="grid grid-cols-12 text-[9px] font-bold text-slate-400 px-2 py-1 uppercase tracking-tighter">
-                            <div class="col-span-3">原始值</div>
-                            <div class="col-span-4">字段</div>
-                            <div class="col-span-5 text-right">解析值</div>
+                            <div class="col-span-3">{{ tr('原始值') }}</div>
+                            <div class="col-span-4">{{ tr('字段') }}</div>
+                            <div class="col-span-5 text-right">{{ tr('解析值') }}</div>
                           </div>
                           <div
                             v-for="(row, rowIndex) in activeTreeRows"
@@ -962,7 +982,7 @@ onBeforeUnmount(() => {
                             <div class="col-span-4 text-[11px] text-slate-500">{{ row.label }}</div>
                             <div class="col-span-5 text-[11px] text-right font-bold text-slate-700">{{ row.value }}</div>
                           </div>
-                          <div v-if="!activeTreeRows.length" class="text-xs text-slate-400 px-2 py-2">暂无协议解析数据</div>
+                          <div v-if="!activeTreeRows.length" class="text-xs text-slate-400 px-2 py-2">{{ tr('暂无协议解析数据') }}</div>
                         </div>
                       </details>
                     </div>
@@ -971,14 +991,14 @@ onBeforeUnmount(() => {
               </template>
             </div>
             <div class="p-4 bg-slate-100/50 border-t border-slate-200">
-              <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">实时网络指标</p>
+              <p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-3">{{ tr('实时网络指标') }}</p>
               <div class="grid grid-cols-2 gap-4">
                 <div class="bg-white p-2 rounded border border-slate-200 shadow-sm">
-                  <p class="text-[9px] text-slate-500">往返延时 (RTT)</p>
+                  <p class="text-[9px] text-slate-500">{{ tr('往返延时 (RTT)') }}</p>
                   <p class="text-sm font-bold text-emerald-500">{{ captureMetrics.rtt }}</p>
                 </div>
                 <div class="bg-white p-2 rounded border border-slate-200 shadow-sm">
-                  <p class="text-[9px] text-slate-500">丢包率 (Packet Loss)</p>
+                  <p class="text-[9px] text-slate-500">{{ tr('丢包率 (Packet Loss)') }}</p>
                   <p class="text-sm font-bold text-slate-900">{{ captureMetrics.loss }}</p>
                 </div>
               </div>
@@ -988,7 +1008,7 @@ onBeforeUnmount(() => {
         <footer class="px-4 py-2 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
           <div class="flex items-center gap-6">
             <div class="flex items-center gap-2">
-              <span class="text-[10px] font-bold text-slate-500 uppercase">接收缓冲区</span>
+              <span class="text-[10px] font-bold text-slate-500 uppercase">{{ tr('接收缓冲区') }}</span>
               <div class="w-32 h-2 bg-slate-200 rounded-full overflow-hidden border border-slate-300">
                 <div class="h-full bg-amber-500" :style="{ width: `${captureMeta.bufferUsed}%` }"></div>
               </div>
@@ -996,7 +1016,7 @@ onBeforeUnmount(() => {
             </div>
             <div class="h-4 w-[1px] bg-slate-300"></div>
             <p class="text-[10px] font-medium text-slate-500 uppercase">
-              显示 {{ captureMeta.rangeStart }}-{{ captureMeta.rangeEnd }} / 共 {{ captureMeta.totalFrames }} 报文
+              {{ tr('显示') }} {{ captureMeta.rangeStart }}-{{ captureMeta.rangeEnd }} / {{ tr('共') }} {{ captureMeta.totalFrames }} {{ tr('报文') }}
             </p>
           </div>
           <div class="flex items-center gap-4">
@@ -1007,7 +1027,7 @@ onBeforeUnmount(() => {
               <button class="p-1 hover:bg-slate-100 rounded">
                 <span class="material-symbols-outlined !text-sm">chevron_left</span>
               </button>
-              <div class="px-3 text-[10px] font-bold text-slate-700">第 {{ captureMeta.page }} / {{ captureMeta.pageCount }} 页</div>
+              <div class="px-3 text-[10px] font-bold text-slate-700">{{ tr('第') }} {{ captureMeta.page }} / {{ captureMeta.pageCount }} {{ tr('页') }}</div>
               <button class="p-1 hover:bg-slate-100 rounded">
                 <span class="material-symbols-outlined !text-sm">chevron_right</span>
               </button>
@@ -1016,8 +1036,7 @@ onBeforeUnmount(() => {
               </button>
             </div>
             <button class="flex items-center gap-1 px-3 py-1 bg-slate-200 hover:bg-slate-300 text-slate-700 rounded text-[10px] font-bold transition-colors">
-              <span class="material-symbols-outlined !text-sm">download</span> 导出分析结果
-            </button>
+              <span class="material-symbols-outlined !text-sm">download</span>{{ tr('导出分析结果') }}</button>
           </div>
         </footer>
       </div>
@@ -1030,7 +1049,7 @@ onBeforeUnmount(() => {
             <div class="proxy-modal-icon">
               <span class="material-symbols-outlined">warning</span>
             </div>
-            <h2>确认删除</h2>
+            <h2>{{ tr('确认删除') }}</h2>
           </div>
           <button class="proxy-modal-close" type="button" @click="closeConfirm">
             <span class="material-symbols-outlined">close</span>
@@ -1038,14 +1057,14 @@ onBeforeUnmount(() => {
         </div>
         <div class="proxy-modal-body">
           <p class="proxy-confirm-text">
-            确认删除转发对「{{ confirmProxy?.name || '未命名转发对' }}」吗？删除前将停止转发。
+            {{ tr('确认删除转发对') }}「{{ confirmProxy?.name || tr('未命名转发对') }}」{{ tr('吗？') }}{{ tr('删除前将停止转发。') }}
           </p>
         </div>
         <div class="proxy-modal-footer">
           <div></div>
           <div class="proxy-footer-actions">
-            <button class="proxy-btn ghost" type="button" @click="closeConfirm">取消</button>
-            <button class="proxy-btn warning" type="button" @click="applyConfirmDelete">确认删除</button>
+            <button class="proxy-btn ghost" type="button" @click="closeConfirm">{{ tr('取消') }}</button>
+            <button class="proxy-btn warning" type="button" @click="applyConfirmDelete">{{ tr('确认删除') }}</button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/ScriptsView.vue b/frontend/src/components/ScriptsView.vue
index 702be11..f031f06 100644
--- a/frontend/src/components/ScriptsView.vue
+++ b/frontend/src/components/ScriptsView.vue
@@ -2,6 +2,8 @@
 import { inject } from 'vue'
 import LogStream from './LogStream.vue'
 
+const t = inject('t', (key: string) => key)
+const tr = inject('tr', (text: string) => text)
 const bindings = inject('scriptsView')
 if (!bindings) {
   throw new Error('scriptsView bindings not provided')
@@ -46,21 +48,19 @@ const {
           <header class="page-header spaced scripts-header">
             <div>
               <h2 class="scripts-title">
-                自动脚本
+                {{ t('header.scripts.title') }}
                 <span class="chip">{{ scriptFileName }}</span>
-                <span class="badge">只读</span>
+                <span class="badge">{{ t('badge.readOnly') }}</span>
               </h2>
               <p class="scripts-path">{{ scriptFilePath }}</p>
             </div>
             <div class="header-actions">
               <button class="btn btn-outline" @click="loadYaml">
                 <span class="material-symbols-outlined">folder_open</span>
-                加载脚本
+                {{ t('action.loadScript') }}
               </button>
               <button class="btn btn-outline" @click="saveYaml">
-                <span class="material-symbols-outlined">save</span>
-                保存
-              </button>
+                <span class="material-symbols-outlined">save</span>{{ tr('保存') }}</button>
             </div>
             <input
               ref="yamlFileInputRef"
@@ -74,18 +74,16 @@ const {
           <div class="scripts-grid">
             <div class="panel editor">
               <div class="panel-title bar">
-                <span class="material-symbols-outlined">code</span>
-                DSL 编辑器
-                <div class="panel-actions">
-                  <button class="icon-btn" :title="yamlCollapsed ? '灞曞紑' : '鏀惰捣'" @click="toggleYamlCollapsed">
+                <span class="material-symbols-outlined">code</span>{{ tr('DSL 编辑器') }}<div class="panel-actions">
+                  <button class="icon-btn" :title="yamlCollapsed ? tr('\u5c55\u5f00') : tr('\u6536\u8d77')"
                     <span class="material-symbols-outlined">
                       {{ yamlCollapsed ? 'unfold_more' : 'unfold_less' }}
                     </span>
                   </button>
-                  <button class="icon-btn" title="复制" @click="copyYaml">
+                  <button class="icon-btn" :title="tr('\u590d\u5236')" @click="copyYaml">
                     <span class="material-symbols-outlined">content_copy</span>
                   </button>
-                  <button class="icon-btn" title="搜索" @click="searchYaml">
+                  <button class="icon-btn" :title="tr('\u641c\u7d22')" @click="searchYaml">
                     <span class="material-symbols-outlined">search</span>
                   </button>
                 </div>
@@ -95,7 +93,7 @@ const {
 
             <div class="scripts-side">
               <div class="panel stack">
-                <div class="panel-title simple">执行控制</div>
+                <div class="panel-title simple">{{ tr('执行控制') }}</div>
                 <div class="status-pill" :class="scriptStatusClass">
                   <span v-if="scriptRunning" class="pulse"></span>
                   {{ scriptStatusLabel }}
@@ -107,22 +105,18 @@ const {
                     :disabled="!scriptCanRun"
                     @click="runScript"
                   >
-                    <span class="material-symbols-outlined">play_arrow</span>
-                    运行
-                  </button>
+                    <span class="material-symbols-outlined">play_arrow</span>{{ tr('运行') }}</button>
                   <button
                     class="btn btn-danger"
                     :class="{ 'btn-muted': !scriptCanStop }"
                     :disabled="!scriptCanStop"
                     @click="stopScript"
                   >
-                    <span class="material-symbols-outlined">stop</span>
-                    停止
-                  </button>
+                    <span class="material-symbols-outlined">stop</span>{{ tr('停止') }}</button>
                 </div>
                 <div class="progress-block">
                   <div class="progress-row">
-                    <span>当前步骤: <strong>{{ scriptState }}</strong></span>
+                    <span>{{ tr('当前步骤:') }}<strong>{{ scriptState }}</strong></span>
                     <span class="mono">{{ scriptStepIndex }}/{{ scriptStepTotal }}</span>
                   </div>
                   <div class="progress-bar">
@@ -130,11 +124,11 @@ const {
                   </div>
                   <div class="progress-stats">
                     <div>
-                      <span>已用时间</span>
+                      <span>{{ tr('已用时间') }}</span>
                       <strong class="mono">{{ scriptElapsedLabel }}</strong>
                     </div>
                     <div>
-                      <span>错误数</span>
+                      <span>{{ tr('错误数') }}</span>
                       <strong class="mono">{{ scriptErrorCount }}</strong>
                     </div>
                   </div>
@@ -142,15 +136,13 @@ const {
               </div>
 
               <div class="panel stack">
-                <div class="panel-title simple">
-                  变量监控
-                  <button class="link-btn" type="button" @click="refreshScriptVariables">刷新</button>
+                <div class="panel-title simple">{{ tr('变量监控') }}<button class="link-btn" type="button" @click="refreshScriptVariables">{{ tr('刷新') }}</button>
                 </div>
                 <table class="mini-table">
                   <thead>
                     <tr>
-                      <th>变量名</th>
-                      <th class="right">当前值</th>
+                      <th>{{ tr('变量名') }}</th>
+                      <th class="right">{{ tr('当前值') }}</th>
                     </tr>
                   </thead>
                   <tbody v-if="scriptVariables.length">
@@ -171,13 +163,11 @@ const {
 
           <div class="panel log-panel">
             <div class="panel-title bar">
-              <span class="material-symbols-outlined">terminal</span>
-              运行日志
-              <div class="panel-actions">
-                <button class="icon-btn" title="清空日志" @click="clearScriptLogs">
+              <span class="material-symbols-outlined">terminal</span>{{ tr('运行日志') }}<div class="panel-actions">
+                <button class="icon-btn" :title="tr('\u6e05\u7a7a\u65e5\u5fd7')" @click="clearScriptLogs">
                   <span class="material-symbols-outlined">block</span>
                 </button>
-                <button class="icon-btn" title="滚动到底部" @click="scrollScriptLogsToBottom">
+                <button class="icon-btn" :title="tr('\u6eda\u52a8\u5230\u5e95\u90e8')" @click="scrollScriptLogsToBottom">
                   <span class="material-symbols-outlined">vertical_align_bottom</span>
                 </button>
               </div>
diff --git a/frontend/src/components/YamlUiLab.vue b/frontend/src/components/YamlUiLab.vue
index 7f958b7..35de969 100644
--- a/frontend/src/components/YamlUiLab.vue
+++ b/frontend/src/components/YamlUiLab.vue
@@ -2,8 +2,8 @@
   <div class="grid grid-cols-12 gap-6">
     <section class="col-span-12 lg:col-span-5 bg-white rounded-xl border border-slate-200 shadow-sm p-5 space-y-4">
       <div class="flex items-center justify-between">
-        <h2 class="text-sm font-bold text-slate-800">YAML UI 编辑器</h2>
-        <span class="text-xs text-slate-400">实时渲染</span>
+        <h2 class="text-sm font-bold text-slate-800">{{ tr('YAML UI 编辑器') }}</h2>
+        <span class="text-xs text-slate-400">{{ tr('实时渲染') }}</span>
       </div>
       <textarea
         class="w-full min-h-[520px] p-3 rounded-lg border border-slate-200 font-mono text-xs text-slate-700 focus:border-primary focus:ring-4 focus:ring-primary/10"
@@ -11,10 +11,10 @@
         @input="handleInput"
       ></textarea>
       <div v-if="store.parseError" class="text-xs text-rose-600 bg-rose-50 border border-rose-200 rounded-lg p-3">
-        <div class="font-bold">解析错误</div>
+        <div class="font-bold">{{ tr('解析错误') }}</div>
         <div>{{ store.parseError.message }}</div>
-        <div v-if="store.parseError.path" class="mt-1">路径: {{ store.parseError.path }}</div>
-        <div v-if="store.parseError.line">行 {{ store.parseError.line }} 列 {{ store.parseError.column }}</div>
+        <div v-if="store.parseError.path" class="mt-1">{{ tr('路径') }}: {{ store.parseError.path }}</div>
+        <div v-if="store.parseError.line">{{ tr('行') }} {{ store.parseError.line }} {{ tr('列') }} {{ store.parseError.column }}</div>
       </div>
     </section>
 
@@ -25,7 +25,7 @@
           :config="store.lastGoodConfig"
           :widgets-by-id="store.widgetsById"
         />
-        <div v-else class="text-sm text-slate-400">等待 YAML 配置...</div>
+        <div v-else class="text-sm text-slate-400">{{ tr('等待 YAML 配置...') }}</div>
       </div>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
         <InspectorJSON
@@ -42,13 +42,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, inject } from 'vue'
 import LayoutRenderer from '@/ui/LayoutRenderer.vue'
 import InspectorJSON from '@/components/ui-kit/InspectorJSON.vue'
 import EventLogPanel from '@/components/ui-kit/EventLogPanel.vue'
 import { useUiRuntimeStore } from '@/stores/uiRuntime'
 
 const store = useUiRuntimeStore()
+const tr = inject('tr', (text: string) => text)
 
 const selectedWidget = computed(() => {
   if (!store.selectedWidgetId) return null
diff --git a/frontend/src/components/ui-kit/AppShell.vue b/frontend/src/components/ui-kit/AppShell.vue
index d7d07eb..256a8ba 100644
--- a/frontend/src/components/ui-kit/AppShell.vue
+++ b/frontend/src/components/ui-kit/AppShell.vue
@@ -14,14 +14,20 @@
         </div>
         <div class="h-4 w-px bg-slate-200"></div>
         <div class="flex items-center gap-4">
-          <span class="text-[11px] font-medium text-slate-400">版本: 1.0.3-beta</span>
-          <span class="text-[11px] font-medium text-slate-400">编译日期: 2024-05-20</span>
+          <span class="text-[11px] font-medium text-slate-400">{{ tr('版本') }}: 1.0.3-beta</span>
+          <span class="text-[11px] font-medium text-slate-400">{{ tr('编译日期') }}: 2024-05-20</span>
         </div>
       </div>
       <div class="flex gap-4">
-        <button class="text-[11px] font-bold text-primary hover:underline">文档中心</button>
-        <button class="text-[11px] font-bold text-slate-400">问题反馈</button>
+        <button class="text-[11px] font-bold text-primary hover:underline">{{ tr('文档中心') }}</button>
+        <button class="text-[11px] font-bold text-slate-400">{{ tr('问题反馈') }}</button>
       </div>
     </footer>
   </div>
 </template>
+
+<script setup lang="ts">
+import { inject } from 'vue'
+
+const tr = inject('tr', (text: string) => text)
+</script>
diff --git a/frontend/src/components/ui-kit/InspectorJSON.vue b/frontend/src/components/ui-kit/InspectorJSON.vue
index 087823c..5ac6774 100644
--- a/frontend/src/components/ui-kit/InspectorJSON.vue
+++ b/frontend/src/components/ui-kit/InspectorJSON.vue
@@ -2,7 +2,7 @@
   <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-5">
     <div class="flex items-center justify-between mb-3">
       <h3 class="text-sm font-bold text-slate-700">{{ title }}</h3>
-      <button class="text-xs text-slate-400 hover:text-slate-600" @click="copy">Copy</button>
+      <button class="text-xs text-slate-400 hover:text-slate-600" @click="copy">{{ tr('Copy') }}</button>
     </div>
     <pre class="text-[10px] font-mono leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-200 text-slate-600 min-h-[160px]">
 {{ formatted }}
@@ -11,12 +11,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 
 const props = defineProps<{ title: string; value: unknown }>()
+const tr = inject('tr', (text: string) => text)
 
 const formatted = computed(() => {
-  if (props.value == null) return '未选择任何组件'
+  if (props.value == null) return tr('未选择任何组件')
   try {
     return JSON.stringify(props.value, null, 2)
   } catch (error) {
diff --git a/frontend/src/components/ui-kit/TopBar.vue b/frontend/src/components/ui-kit/TopBar.vue
index 0e84284..815c318 100644
--- a/frontend/src/components/ui-kit/TopBar.vue
+++ b/frontend/src/components/ui-kit/TopBar.vue
@@ -19,13 +19,17 @@
         @click="$emit('publish')"
       >
         <span class="material-symbols-outlined !text-sm">publish</span>
-        <span>发布规格页</span>
+        <span>{{ tr('发布规格页') }}</span>
       </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue'
+
 defineProps<{ title: string; subtitle: string; modeLabel: string }>()
 defineEmits<{ (e: 'publish'): void }>()
+
+const tr = inject('tr', (text: string) => text)
 </script>
diff --git a/frontend/src/components/ui-kit/actions/BatchActionGroup.vue b/frontend/src/components/ui-kit/actions/BatchActionGroup.vue
index f648686..2bfc30e 100644
--- a/frontend/src/components/ui-kit/actions/BatchActionGroup.vue
+++ b/frontend/src/components/ui-kit/actions/BatchActionGroup.vue
@@ -2,19 +2,23 @@
   <div class="flex items-center bg-slate-100 p-1 rounded-xl">
     <button class="flex-1 flex items-center justify-center gap-1.5 py-2 bg-white shadow-sm rounded-lg text-xs font-bold text-slate-700" @click="$emit('run')">
       <span class="material-symbols-outlined !text-sm text-emerald-500">play_arrow</span>
-      批量运行
+      {{ tr('批量运行') }}
     </button>
     <button class="flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-bold text-slate-500 hover:text-slate-700" @click="$emit('pause')">
       <span class="material-symbols-outlined !text-sm">pause</span>
-      暂停
+      {{ tr('暂停') }}
     </button>
     <button class="flex-1 flex items-center justify-center gap-1.5 py-2 text-xs font-bold text-slate-500 hover:text-slate-700" @click="$emit('reset')">
       <span class="material-symbols-outlined !text-sm">restart_alt</span>
-      重置
+      {{ tr('重置') }}
     </button>
   </div>
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue'
+
 defineEmits<{ (e: 'run'): void; (e: 'pause'): void; (e: 'reset'): void }>()
+
+const tr = inject('tr', (text: string) => text)
 </script>
diff --git a/frontend/src/components/ui-kit/actions/DropdownAction.vue b/frontend/src/components/ui-kit/actions/DropdownAction.vue
index 6cc4a9c..89d2a9e 100644
--- a/frontend/src/components/ui-kit/actions/DropdownAction.vue
+++ b/frontend/src/components/ui-kit/actions/DropdownAction.vue
@@ -3,11 +3,15 @@
     class="w-full flex items-center justify-between px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-lg text-sm font-semibold"
     @click="$emit('open')"
   >
-    <span><slot>导出数据格式</slot></span>
+    <span><slot>{{ tr('导出数据格式') }}</slot></span>
     <span class="material-symbols-outlined">expand_more</span>
   </button>
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue'
+
 defineEmits<{ (e: 'open'): void }>()
+
+const tr = inject('tr', (text: string) => text)
 </script>
diff --git a/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue b/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue
index bd41d4a..d14f2c3 100644
--- a/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue
+++ b/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue
@@ -10,14 +10,17 @@
         {{ chip }}
         <span class="material-symbols-outlined !text-[12px] cursor-pointer" @click="removeChip(chip)">close</span>
       </span>
-      <span class="text-xs text-slate-300 ml-1 italic">输入搜索...</span>
+      <span class="text-xs text-slate-300 ml-1 italic">{{ tr('输入搜索...') }}</span>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue'
+
 const props = defineProps<{ label: string; modelValue: string[]; disabled?: boolean; hint?: string }>()
 const emit = defineEmits<{ (e: 'update:modelValue', value: string[]): void }>()
+const tr = inject('tr', (text: string) => text)
 
 function removeChip(chip: string) {
   if (props.disabled) return
diff --git a/frontend/src/components/ui-kit/inputs/PathPicker.vue b/frontend/src/components/ui-kit/inputs/PathPicker.vue
index 7fad220..c8dc68e 100644
--- a/frontend/src/components/ui-kit/inputs/PathPicker.vue
+++ b/frontend/src/components/ui-kit/inputs/PathPicker.vue
@@ -3,20 +3,24 @@
     <label class="text-xs font-bold text-slate-500">{{ label }}</label>
     <div class="flex gap-2">
       <div class="flex-1 flex items-center h-10 px-3 bg-slate-50 border border-slate-200 rounded-lg text-xs text-slate-500 overflow-hidden truncate">
-        {{ modelValue || hint || '选择路径' }}
+        {{ modelValue || hint || tr('选择路径') }}
       </div>
       <button
         class="px-3 h-10 bg-slate-100 border border-slate-200 rounded-lg text-xs font-bold hover:bg-slate-200"
         type="button"
         @click="$emit('browse')"
       >
-        浏览...
+        {{ tr('浏览...') }}
       </button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { inject } from 'vue'
+
 defineProps<{ label: string; modelValue: string; disabled?: boolean; hint?: string }>()
 defineEmits<{ (e: 'browse'): void }>()
+
+const tr = inject('tr', (text: string) => text)
 </script>
diff --git a/frontend/src/ui/LayoutRenderer.vue b/frontend/src/ui/LayoutRenderer.vue
index a062f67..030b4f8 100644
--- a/frontend/src/ui/LayoutRenderer.vue
+++ b/frontend/src/ui/LayoutRenderer.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, inject } from 'vue'
 import PanelCard from '@/components/ui-kit/PanelCard.vue'
 import SplitContainer from '@/components/ui-kit/SplitContainer.vue'
 import { resolveWidget } from './registry'
@@ -12,6 +12,7 @@ import { useUiRuntimeStore } from '@/stores/uiRuntime'
 
 const props = defineProps<{ config: UIConfig; widgetsById: Record<string, WidgetSpec> }>()
 const store = useUiRuntimeStore()
+const tr = inject('tr', (text: string) => text)
 
 const LayoutNodeRenderer = defineComponent({
   name: 'LayoutNodeRenderer',
@@ -63,13 +64,20 @@ const LayoutNodeRenderer = defineComponent({
               const commonProps = {
                 ...(widget.props || {}),
               }
+              const localizedProps = {
+                ...commonProps,
+                label: commonProps.label ? tr(commonProps.label) : commonProps.label,
+                title: commonProps.title ? tr(commonProps.title) : commonProps.title,
+                hint: commonProps.hint ? tr(commonProps.hint) : commonProps.hint,
+                placeholder: commonProps.placeholder ? tr(commonProps.placeholder) : commonProps.placeholder,
+              }
 
               if (isLogViewer) {
                 const items = widget.bind ? store.dataBus[widget.bind] || [] : []
                 return h('div', { class: wrapperClass, onClick }, [
                   h(Comp, {
-                    ...commonProps,
-                    title: commonProps.title || widget.id,
+                    ...localizedProps,
+                    title: localizedProps.title || widget.id,
                     value: items.slice(-50),
                   }),
                 ])
@@ -80,7 +88,7 @@ const LayoutNodeRenderer = defineComponent({
                   h(
                     Comp,
                     {
-                      ...commonProps,
+                      ...localizedProps,
                       onClick: () => {
                         if (widget.type === 'action.button') {
                           const payload = widget.props?.payload || { source: widget.id }
@@ -89,7 +97,7 @@ const LayoutNodeRenderer = defineComponent({
                         }
                       },
                     },
-                    { default: () => commonProps.label || '动作' }
+                    { default: () => localizedProps.label || tr('动作') }
                   ),
                 ])
               }
@@ -97,7 +105,7 @@ const LayoutNodeRenderer = defineComponent({
               if (isInput) {
                 return h('div', { class: wrapperClass, onClick }, [
                   h(Comp, {
-                    ...commonProps,
+                    ...localizedProps,
                     modelValue,
                     'onUpdate:modelValue': (value: unknown) => store.setInputValue(widget.id, value, widget.bind),
                   }),
@@ -106,7 +114,7 @@ const LayoutNodeRenderer = defineComponent({
 
               return h('div', { class: wrapperClass, onClick }, [
                 h(Comp, {
-                  ...commonProps,
+                  ...localizedProps,
                   widgetId: widget.id,
                   widgetType: widget.type,
                 }),

From 33049def5cefb862fc8bb8c213083969089e37b4 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sun, 25 Jan 2026 01:40:18 +0800
Subject: [PATCH 34/36] fix(ui): unblock vue build and fix scripts header
 button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 移除 inject 默认回调里的 TS 注解，避免 SFC 解析报错
  - 修复脚本编辑器折叠按钮的模板属性与点击行为
- 影响:
  - Vite 构建恢复正常
- 兼容/行为变化:
  - 无
- 依赖/环境:
  - 无
- 验证:
  - npm run build
[English]
- Changes:
  - Remove TS-style parameter annotations from inject fallbacks
  - Fix ScriptsView collapse button markup and click handler
- Impact:
  - Vite build succeeds again
- Compatibility/Behavior changes:
  - None
- Dependencies/Environment:
  - None
- Verification:
  - npm run build
Refs:
-
---
 frontend/src/components/ManualView.vue                 |  4 ++--
 frontend/src/components/ProxyMonitorView.vue           |  4 ++--
 frontend/src/components/ScriptsView.vue                | 10 +++++++---
 frontend/src/components/YamlUiLab.vue                  |  2 +-
 frontend/src/components/ui-kit/AppShell.vue            |  2 +-
 frontend/src/components/ui-kit/InspectorJSON.vue       |  2 +-
 frontend/src/components/ui-kit/TopBar.vue              |  2 +-
 .../src/components/ui-kit/actions/BatchActionGroup.vue |  2 +-
 .../src/components/ui-kit/actions/DropdownAction.vue   |  2 +-
 .../src/components/ui-kit/inputs/MultiSelectChips.vue  |  2 +-
 frontend/src/components/ui-kit/inputs/PathPicker.vue   |  2 +-
 frontend/src/ui/LayoutRenderer.vue                     |  2 +-
 12 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ManualView.vue b/frontend/src/components/ManualView.vue
index b8680c9..f6cf16d 100644
--- a/frontend/src/components/ManualView.vue
+++ b/frontend/src/components/ManualView.vue
@@ -3,8 +3,8 @@ import { inject } from 'vue'
 import DropdownSelect from './DropdownSelect.vue'
 import LogStream from './LogStream.vue'
 
-const t = inject('t', (key: string) => key)
-const tr = inject('tr', (text: string) => text)
+const t = inject('t', (key) => key)
+const tr = inject('tr', (text) => text)
 const bindings = inject('manualView')
 if (!bindings) {
   throw new Error('manualView bindings not provided')
diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index f3947f5..faa4298 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -2,8 +2,8 @@
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import DropdownSelect from './DropdownSelect.vue'
 
-const t = inject('t', (key: string) => key)
-const tr = inject('tr', (text: string) => text)
+const t = inject('t', (key) => key)
+const tr = inject('tr', (text) => text)
 const bridge = inject('bridge', null)
 
 const filterTabs = computed(() => [
diff --git a/frontend/src/components/ScriptsView.vue b/frontend/src/components/ScriptsView.vue
index f031f06..3b2c675 100644
--- a/frontend/src/components/ScriptsView.vue
+++ b/frontend/src/components/ScriptsView.vue
@@ -2,8 +2,8 @@
 import { inject } from 'vue'
 import LogStream from './LogStream.vue'
 
-const t = inject('t', (key: string) => key)
-const tr = inject('tr', (text: string) => text)
+const t = inject('t', (key) => key)
+const tr = inject('tr', (text) => text)
 const bindings = inject('scriptsView')
 if (!bindings) {
   throw new Error('scriptsView bindings not provided')
@@ -75,7 +75,11 @@ const {
             <div class="panel editor">
               <div class="panel-title bar">
                 <span class="material-symbols-outlined">code</span>{{ tr('DSL 编辑器') }}<div class="panel-actions">
-                  <button class="icon-btn" :title="yamlCollapsed ? tr('\u5c55\u5f00') : tr('\u6536\u8d77')"
+                  <button
+                    class="icon-btn"
+                    :title="yamlCollapsed ? tr('\u5c55\u5f00') : tr('\u6536\u8d77')"
+                    @click="toggleYamlCollapsed"
+                  >
                     <span class="material-symbols-outlined">
                       {{ yamlCollapsed ? 'unfold_more' : 'unfold_less' }}
                     </span>
diff --git a/frontend/src/components/YamlUiLab.vue b/frontend/src/components/YamlUiLab.vue
index 35de969..473147a 100644
--- a/frontend/src/components/YamlUiLab.vue
+++ b/frontend/src/components/YamlUiLab.vue
@@ -49,7 +49,7 @@ import EventLogPanel from '@/components/ui-kit/EventLogPanel.vue'
 import { useUiRuntimeStore } from '@/stores/uiRuntime'
 
 const store = useUiRuntimeStore()
-const tr = inject('tr', (text: string) => text)
+const tr = inject('tr', (text) => text)
 
 const selectedWidget = computed(() => {
   if (!store.selectedWidgetId) return null
diff --git a/frontend/src/components/ui-kit/AppShell.vue b/frontend/src/components/ui-kit/AppShell.vue
index 256a8ba..3236ad9 100644
--- a/frontend/src/components/ui-kit/AppShell.vue
+++ b/frontend/src/components/ui-kit/AppShell.vue
@@ -29,5 +29,5 @@
 <script setup lang="ts">
 import { inject } from 'vue'
 
-const tr = inject('tr', (text: string) => text)
+const tr = inject('tr', (text) => text)
 </script>
diff --git a/frontend/src/components/ui-kit/InspectorJSON.vue b/frontend/src/components/ui-kit/InspectorJSON.vue
index 5ac6774..cc94fd7 100644
--- a/frontend/src/components/ui-kit/InspectorJSON.vue
+++ b/frontend/src/components/ui-kit/InspectorJSON.vue
@@ -14,7 +14,7 @@
 import { computed, inject } from 'vue'
 
 const props = defineProps<{ title: string; value: unknown }>()
-const tr = inject('tr', (text: string) => text)
+const tr = inject('tr', (text) => text)
 
 const formatted = computed(() => {
   if (props.value == null) return tr('未选择任何组件')
diff --git a/frontend/src/components/ui-kit/TopBar.vue b/frontend/src/components/ui-kit/TopBar.vue
index 815c318..dedd499 100644
--- a/frontend/src/components/ui-kit/TopBar.vue
+++ b/frontend/src/components/ui-kit/TopBar.vue
@@ -31,5 +31,5 @@ import { inject } from 'vue'
 defineProps<{ title: string; subtitle: string; modeLabel: string }>()
 defineEmits<{ (e: 'publish'): void }>()
 
-const tr = inject('tr', (text: string) => text)
+const tr = inject('tr', (text) => text)
 </script>
diff --git a/frontend/src/components/ui-kit/actions/BatchActionGroup.vue b/frontend/src/components/ui-kit/actions/BatchActionGroup.vue
index 2bfc30e..3646370 100644
--- a/frontend/src/components/ui-kit/actions/BatchActionGroup.vue
+++ b/frontend/src/components/ui-kit/actions/BatchActionGroup.vue
@@ -20,5 +20,5 @@ import { inject } from 'vue'
 
 defineEmits<{ (e: 'run'): void; (e: 'pause'): void; (e: 'reset'): void }>()
 
-const tr = inject('tr', (text: string) => text)
+const tr = inject('tr', (text) => text)
 </script>
diff --git a/frontend/src/components/ui-kit/actions/DropdownAction.vue b/frontend/src/components/ui-kit/actions/DropdownAction.vue
index 89d2a9e..beec655 100644
--- a/frontend/src/components/ui-kit/actions/DropdownAction.vue
+++ b/frontend/src/components/ui-kit/actions/DropdownAction.vue
@@ -13,5 +13,5 @@ import { inject } from 'vue'
 
 defineEmits<{ (e: 'open'): void }>()
 
-const tr = inject('tr', (text: string) => text)
+const tr = inject('tr', (text) => text)
 </script>
diff --git a/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue b/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue
index d14f2c3..86e41a5 100644
--- a/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue
+++ b/frontend/src/components/ui-kit/inputs/MultiSelectChips.vue
@@ -20,7 +20,7 @@ import { inject } from 'vue'
 
 const props = defineProps<{ label: string; modelValue: string[]; disabled?: boolean; hint?: string }>()
 const emit = defineEmits<{ (e: 'update:modelValue', value: string[]): void }>()
-const tr = inject('tr', (text: string) => text)
+const tr = inject('tr', (text) => text)
 
 function removeChip(chip: string) {
   if (props.disabled) return
diff --git a/frontend/src/components/ui-kit/inputs/PathPicker.vue b/frontend/src/components/ui-kit/inputs/PathPicker.vue
index c8dc68e..bfe41d0 100644
--- a/frontend/src/components/ui-kit/inputs/PathPicker.vue
+++ b/frontend/src/components/ui-kit/inputs/PathPicker.vue
@@ -22,5 +22,5 @@ import { inject } from 'vue'
 defineProps<{ label: string; modelValue: string; disabled?: boolean; hint?: string }>()
 defineEmits<{ (e: 'browse'): void }>()
 
-const tr = inject('tr', (text: string) => text)
+const tr = inject('tr', (text) => text)
 </script>
diff --git a/frontend/src/ui/LayoutRenderer.vue b/frontend/src/ui/LayoutRenderer.vue
index 030b4f8..94ee0aa 100644
--- a/frontend/src/ui/LayoutRenderer.vue
+++ b/frontend/src/ui/LayoutRenderer.vue
@@ -12,7 +12,7 @@ import { useUiRuntimeStore } from '@/stores/uiRuntime'
 
 const props = defineProps<{ config: UIConfig; widgetsById: Record<string, WidgetSpec> }>()
 const store = useUiRuntimeStore()
-const tr = inject('tr', (text: string) => text)
+const tr = inject('tr', (text) => text)
 
 const LayoutNodeRenderer = defineComponent({
   name: 'LayoutNodeRenderer',

From 67dd0529e3541ea5d55a34e210180648169f2329 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sun, 25 Jan 2026 01:44:31 +0800
Subject: [PATCH 35/36] fix(ui): guard proxy monitor lists against empty items
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 过滤代理/抓包列表中的空项，避免模板读取空对象
  - 抓包列表 key 增加兜底 index，避免缺少 id 报错
- 影响:
  - 代理监控页在后端返回空项时不再报错消失
- 兼容/行为变化:
  - 无
- 依赖/环境:
  - 无
- 验证:
  - npm run build
[English]
- Changes:
  - Filter out null items in proxy/capture lists
  - Add fallback key for capture rows when id is missing
- Impact:
  - Proxy monitor page no longer crashes on undefined items
- Compatibility/Behavior changes:
  - None
- Dependencies/Environment:
  - None
- Verification:
  - npm run build
Refs:
-
---
 frontend/src/components/ProxyMonitorView.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index faa4298..233c23e 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -172,13 +172,14 @@ function loadProxyPairs() {
   if (!bridge || !bridge.value || !bridge.value.list_proxy_pairs) return
   withBridgeResult(bridge.value.list_proxy_pairs(), (items) => {
     if (!Array.isArray(items)) return
-    proxies.value = items.map((item) => mapProxyFromBackend(item))
+    proxies.value = items.filter(Boolean).map((item) => mapProxyFromBackend(item))
   })
 }
 
 const filteredProxies = computed(() => {
-  if (activeFilter.value === 'all') return proxies.value
-  return proxies.value.filter((proxy) => proxy.status === activeFilter.value)
+  const safeProxies = proxies.value.filter(Boolean)
+  if (activeFilter.value === 'all') return safeProxies
+  return safeProxies.filter((proxy) => proxy.status === activeFilter.value)
 })
 
 const props = defineProps({
@@ -305,11 +306,12 @@ function hexCellClass(index, value) {
 }
 
 const filteredFrames = computed(() => {
-  if (captureFilter.value === 'all') return captureFrames.value
+  const safeFrames = captureFrames.value.filter(Boolean)
+  if (captureFilter.value === 'all') return safeFrames
   if (captureFilter.value === 'error') {
-    return captureFrames.value.filter((frame) => frame.tone === 'red')
+    return safeFrames.filter((frame) => frame.tone === 'red')
   }
-  return captureFrames.value.filter((frame) => frame.direction === captureFilter.value)
+  return safeFrames.filter((frame) => frame.direction === captureFilter.value)
 })
 
 function openEditModal(proxy) {
@@ -835,7 +837,7 @@ onBeforeUnmount(() => {
                 <tbody class="text-xs">
                   <tr
                     v-for="(frame, index) in filteredFrames"
-                    :key="frame.id"
+                    :key="frame?.id ?? index"
                     class="hover:bg-slate-50 cursor-pointer border-b border-slate-100"
                     :class="{ 'bg-orange-50/40 border-l-4 border-l-orange-400': frame.tone === 'red' }"
                     @click="selectFrame(frame)"

From 33244088a96c09676128876dc6a87e5e705b9081 Mon Sep 17 00:00:00 2001
From: 11cookies11 <gao13048663696@163.com>
Date: Sun, 25 Jan 2026 01:48:21 +0800
Subject: [PATCH 36/36] fix(ui): default proxy filter tab safely
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[中文]
- 变更:
  - 代理监控页默认筛选使用安全读取并兜底为 all
- 影响:
  - 避免初始化阶段读取 undefined.id 导致页面崩溃
- 兼容/行为变化:
  - 无
- 依赖/环境:
  - 无
- 验证:
  - 未运行（请在桌面端重建 dist 后验证）
[English]
- Changes:
  - Initialize proxy filter tab with a safe fallback
- Impact:
  - Prevents undefined.id crash on first render
- Compatibility/Behavior changes:
  - None
- Dependencies/Environment:
  - None
- Verification:
  - Not run (rebuild dist and verify in desktop app)
Refs:
-
---
 frontend/src/components/ProxyMonitorView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ProxyMonitorView.vue b/frontend/src/components/ProxyMonitorView.vue
index 233c23e..a470b99 100644
--- a/frontend/src/components/ProxyMonitorView.vue
+++ b/frontend/src/components/ProxyMonitorView.vue
@@ -12,7 +12,7 @@ const filterTabs = computed(() => [
   { id: 'stopped', label: t('filter.stopped') },
   { id: 'error', label: t('filter.error') },
 ])
-const activeFilter = ref(filterTabs[0].id)
+const activeFilter = ref(filterTabs.value[0]?.id ?? 'all')
 const modalOpen = ref(false)
 const modalProxy = ref(null)
 const modalMode = ref('edit')