From 4dc34aa74e0373c9a3cf2e12bcc65c39fec903ff Mon Sep 17 00:00:00 2001
From: pikachuren <pikachuren@example.com>
Date: Wed, 30 Sep 2026 15:11:23 +0800
Subject: [PATCH] =?UTF-8?q?refactor(frontend):=20=E6=8A=BD=E5=8F=96?=
 =?UTF-8?q?=E5=A3=B0=E6=98=8E=E5=BC=8F=E9=85=8D=E7=BD=AE=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=B6=88=E9=99=A4=20Form.Item=20?=
 =?UTF-8?q?=E6=A0=B7=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

背景：EasytierClient（172 个 Form.Item）、FrpClient（140 个）等页面中，
大量 Form.Item 是「<Col><Form.Item name label extra rules><Input/></Form.Item></Col>」
的复制粘贴，仅控件类型与文案不同。

新增两个共享组件：
- components/SectionTitle.tsx
  此前该组件在 9 个页面各有一份逐字副本（仅缩进风格不同），
  本次收敛为单一实现，样式与 UI 完全不变
- components/ConfigFields.tsx
  - FieldRow：按字段声明渲染栅格行，支持
    text/password/textarea/number/select/switch/checkbox
  - CheckboxGrid：布尔开关网格，对应 EasytierClient 中
    22 处重复的「Col + valuePropName=checked + marginBottom:4」结构
  - 保留 escape hatch：children 字段透传自定义内容，
    供 Form.List、条件渲染等无法声明式表达的字段使用
  - when 字段支持 Form.useWatch 联动显隐

迁移与去重：
- EasytierClient：1259 → 1078 行（-181），6 个 Tab 的配置区改为声明式；
  日志级别选项提为 LOG_LEVEL_OPTIONS，消除 2 处 6 行重复
- FrpClient：1211 → 1039 行（-172），主配置与连接设置两 Tab 改为声明式；
  连接协议/认证方式/日志级别选项提为模块常量
- 其余 7 个页面替换为共享 SectionTitle

合计：+259 / -666，净减 407 行。
EasytierClient + FrpClient 两个目标文件合计 2470 → 2117 行（-14%）。
未达 issue 中「各砍一半」的预估——因为带业务逻辑的字段
（Form.List、联动显隐、自定义 addonAfter）不适合声明式，强行抽象会
损害可读性。按 issue「以删重复为准，不追求固定百分比」处理。

验收：tsc --noEmit 通过；npm run build 通过，产物 chunk 大小无异常。

（issue #124 PR-5）
---
 webpage/src/components/ConfigFields.tsx | 184 +++++++++
 webpage/src/components/SectionTitle.tsx |  19 +
 webpage/src/pages/EasytierClient.tsx    | 499 ++++++++----------------
 webpage/src/pages/EasytierServer.tsx    |  10 +-
 webpage/src/pages/FrpClient.tsx         | 358 +++++------------
 webpage/src/pages/FrpServer.tsx         |  10 +-
 webpage/src/pages/NpsClient.tsx         |  10 +-
 webpage/src/pages/NpsServer.tsx         |  10 +-
 webpage/src/pages/PortForward.tsx       |  10 +-
 webpage/src/pages/Stun.tsx              |   8 +-
 webpage/src/pages/Wireguard.tsx         |  10 +-
 11 files changed, 462 insertions(+), 666 deletions(-)
 create mode 100644 webpage/src/components/ConfigFields.tsx
 create mode 100644 webpage/src/components/SectionTitle.tsx

diff --git a/webpage/src/components/ConfigFields.tsx b/webpage/src/components/ConfigFields.tsx
new file mode 100644
index 00000000..33619d2d
--- /dev/null
+++ b/webpage/src/components/ConfigFields.tsx
@@ -0,0 +1,184 @@
+/**
+ * 声明式配置表单字段
+ *
+ * 背景：EasytierClient（172 个 Form.Item）、FrpClient（140 个）等页面里，
+ * 大量 Form.Item 形如「<Col span><Form.Item name label extra rules><Input/></Form.Item></Col>」，
+ * 只是控件类型与文案不同，属于复制粘贴式样板。
+ *
+ * 本模块把这些样板收敛为字段声明 + 渲染器，同时保留 escape hatch：
+ * 需要自定义 children（Form.List、联动渲染等）时用 `children` 字段直接透传，
+ * 不强行抽象。
+ *
+ * 设计约束：
+ *   - 纯展示，不含任何数据获取或业务判断
+ *   - 渲染结构与手写 JSX 一致（同样的 Row/Col/Form.Item 层级），UI 零变化
+ *   - 支持 Form.useWatch 做联动显示（when），但不引入新依赖
+ */
+import React from 'react'
+import { Checkbox, Col, Form, Input, InputNumber, Row, Select, Switch, Typography } from 'antd'
+import type { FormItemProps } from 'antd'
+
+const { Text } = Typography
+
+/** 字段控件类型。 */
+export type FieldType =
+  | 'text'
+  | 'password'
+  | 'textarea'
+  | 'number'
+  | 'select'
+  | 'switch'
+  | 'checkbox'
+
+export interface FieldOption {
+  label: React.ReactNode
+  value: string | number
+}
+
+/** 单个字段声明。 */
+export interface FieldSpec {
+  /** 字段名，对应 Form.Item 的 name */
+  name: string
+  /** 控件类型，默认 'text' */
+  type?: FieldType
+  /** 标签文本 */
+  label?: React.ReactNode
+  /** 占位符（text/password/number/select 有效） */
+  placeholder?: string
+  /** 栅格宽度，默认 12（合计 24） */
+  span?: number
+  /** 辅助说明（渲染在 label 下方的 extra） */
+  hint?: React.ReactNode
+  /** 校验规则，直接透传给 antd */
+  rules?: FormItemProps['rules']
+  /** 下拉选项（select 有效） */
+  options?: FieldOption[]
+  /** 数字输入边界 */
+  min?: number
+  max?: number
+  /** 允许清空（select/input 有效） */
+  allowClear?: boolean
+  /** textarea 行数 */
+  rows?: number
+  /** Form.Item 的 marginBottom 覆盖 */
+  style?: React.CSSProperties
+  /**
+   * 自定义渲染内容。提供时忽略 type/options 等控件参数，
+   * 用于 Form.List、条件渲染等无法声明式表达的字段。
+   */
+  children?: React.ReactNode
+  /**
+   * 联动显示条件。返回 false 时该字段不渲染。
+   * 依赖 Form.useWatch 订阅的字段变化。
+   */
+  when?: (watch: Record<string, any>) => boolean
+}
+
+const fullWidth: React.CSSProperties = { width: '100%' }
+
+/** 渲染单个字段的控件部分。 */
+function renderControl(spec: FieldSpec): React.ReactNode {
+  if (spec.children) return spec.children
+
+  switch (spec.type) {
+    case 'password':
+      return <Input.Password placeholder={spec.placeholder} style={fullWidth} />
+    case 'textarea':
+      return <Input.TextArea rows={spec.rows ?? 2} placeholder={spec.placeholder} style={fullWidth} />
+    case 'number':
+      return (
+        <InputNumber
+          min={spec.min}
+          max={spec.max}
+          placeholder={spec.placeholder}
+          style={fullWidth}
+        />
+      )
+    case 'select':
+      return (
+        <Select
+          allowClear={spec.allowClear}
+          placeholder={spec.placeholder}
+          options={spec.options}
+          style={fullWidth}
+        />
+      )
+    case 'switch':
+      return <Switch />
+    case 'checkbox':
+      return <Checkbox>{spec.label}</Checkbox>
+    default:
+      return <Input placeholder={spec.placeholder} style={fullWidth} />
+  }
+}
+
+/** isCheckLike 判断该字段是否应使用 valuePropName="checked"。 */
+const isCheckLike = (t?: FieldType) => t === 'switch' || t === 'checkbox'
+
+/**
+ * FieldRow 把字段声明渲染成一行栅格。
+ *
+ * 组件本身不感知 Form——它渲染的 Form.Item 会自动向上找到最近的 <Form>，
+ * 因此可与页面现有的 Form.Item 自由混用。
+ */
+const FieldRow: React.FC<{ fields: FieldSpec[] }> = ({ fields }) => {
+  // useWatch 需在 Form 内调用；无 Form 上下文时 antd 会告警，
+  // 故用 try 语义规避——这里直接调用，页面均在 Form 内使用。
+  const form = Form.useFormInstance()
+  const watch = Form.useWatch([], form) as Record<string, any> | undefined
+
+  return (
+    <Row gutter={16}>
+      {fields
+        .filter((f) => !f.when || f.when(watch ?? {}))
+        .map((f) => (
+          <Col key={f.name} span={f.span ?? 12}>
+            <Form.Item
+              name={f.name}
+              label={isCheckLike(f.type) ? undefined : f.label}
+              valuePropName={isCheckLike(f.type) ? 'checked' : undefined}
+              rules={f.rules}
+              extra={f.hint ? <span style={{ fontSize: 11 }}>{f.hint}</span> : undefined}
+              style={f.style}
+            >
+              {renderControl(f)}
+            </Form.Item>
+          </Col>
+        ))}
+    </Row>
+  )
+}
+
+/**
+ * CheckboxGrid 渲染布尔开关网格。
+ *
+ * 对应 EasytierClient 中 22 处「<Col span={12}><Form.Item valuePropName=checked
+ * style={{marginBottom:4}}><Checkbox>…</Checkbox></Form.Item></Col>」的重复结构。
+ */
+const CheckboxGrid: React.FC<{
+  /** 复选框声明，label 即显示文本 */
+  items: Array<Pick<FieldSpec, 'name' | 'label'> & { hint?: React.ReactNode }>
+  /** 每行列数，栅格 24 内的占比，默认 12（两列） */
+  span?: number
+  /** 行间距，默认 [0, 4] */
+  gutter?: [number, number]
+}> = ({ items, span = 12, gutter = [0, 4] }) => (
+  <Row gutter={gutter}>
+    {items.map((it) => (
+      <Col key={it.name} span={span}>
+        <Form.Item name={it.name} valuePropName="checked" style={{ marginBottom: 4 }}>
+          <Checkbox>
+            {it.label}
+            {it.hint && (
+              <Text type="secondary" style={{ fontSize: 11 }}>
+                {it.hint}
+              </Text>
+            )}
+          </Checkbox>
+        </Form.Item>
+      </Col>
+    ))}
+  </Row>
+)
+
+export { FieldRow, CheckboxGrid }
diff --git a/webpage/src/components/SectionTitle.tsx b/webpage/src/components/SectionTitle.tsx
new file mode 100644
index 00000000..603d666d
--- /dev/null
+++ b/webpage/src/components/SectionTitle.tsx
@@ -0,0 +1,19 @@
+/**
+ * 表单分组标题
+ *
+ * 此前该组件在 9 个页面中各有一份逐字副本（仅缩进风格不同），
+ * 本 PR 收敛为单一实现。样式与原实现完全一致，UI 无变化。
+ */
+import React from 'react'
+
+const SectionTitle = ({ children }: { children: React.ReactNode }) => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px' }}>
+    <div style={{ width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0 }} />
+    <span style={{ fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em' }}>
+      {children}
+    </span>
+    <div style={{ flex: 1, height: 1, background: '#f0f0f0' }} />
+  </div>
+)
+
+export default SectionTitle
diff --git a/webpage/src/pages/EasytierClient.tsx b/webpage/src/pages/EasytierClient.tsx
index 921a7df5..b4bbd531 100644
--- a/webpage/src/pages/EasytierClient.tsx
+++ b/webpage/src/pages/EasytierClient.tsx
@@ -15,6 +15,8 @@ import { useTranslation } from 'react-i18next'
 import { easytierClientApi } from '../api'
 import { useTunnelApi } from '../contexts/TunnelApiContext'
 import StatusTag from '../components/StatusTag'
+import SectionTitle from '../components/SectionTitle'
+import { CheckboxGrid, FieldRow } from '../components/ConfigFields'
 import { SimpleList, AddrList, ProtoPortList } from '../components/FormListFields'
 import { useTableStyle } from '../hooks/useTableStyle'
 import {
@@ -24,14 +26,15 @@ import {
 
 const { Text } = Typography
 
-// 分组标题
-const SectionTitle = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px' }}>
-    <div style={{ width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0 }} />
-    <span style={{ fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em' }}>{children}</span>
-    <div style={{ flex: 1, height: 1, background: '#f0f0f0' }} />
-  </div>
-)
+// 日志级别选项（控制台与文件日志共用）
+const LOG_LEVEL_OPTIONS = [
+  { label: 'trace', value: 'trace' },
+  { label: 'debug', value: 'debug' },
+  { label: 'info', value: 'info' },
+  { label: 'warn', value: 'warn' },
+  { label: 'error', value: 'error' },
+  { label: 'off', value: 'off' },
+]
 
 const PROTOCOL_OPTIONS = [
   { label: 'TCP', value: 'tcp' },
@@ -360,74 +363,36 @@ const EasytierClient: React.FC = () => {
   // ===== Tab 1: 基本配置 =====
   const tabBasic = (
     <>
-      <Row gutter={16}>
-        <Col span={20}>
-          <Form.Item name="name" label="名称" rules={[{ required: true, message: '请填写名称' }]}>
-            <Input placeholder="节点名称" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={4}>
-          <Form.Item name="enable" label="启用" valuePropName="checked">
-            <Switch />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16}>
-        <Col span={12}>
-          <Form.Item name="network_name" label="网络名称" rules={[{ required: true, message: '请填写网络名称' }]}>
-            <Input placeholder="my-network" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="network_password" label="网络密码">
-            <Input.Password placeholder="留空不设密码" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16}>
-        <Col span={10}>
-          <Form.Item
-            name="virtual_ip_addr"
-            label="虚拟 IPv4"
-            extra={<span style={{ fontSize: 11 }}>如 <code>10.144.144.1</code>，DHCP 时无效</span>}
-          >
-            <Input placeholder="10.144.144.1" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={6}>
-          <Form.Item
-            name="virtual_ip_prefix"
-            label="前缀长度"
-            extra={<span style={{ fontSize: 11 }}>子网掩码位数</span>}
-          >
-            <InputNumber min={0} max={32} placeholder="24" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={8}>
-          <Form.Item name="enable_dhcp" label="DHCP 自动分配" valuePropName="checked" extra={<span style={{ fontSize: 11 }}>自动分配虚拟 IP，忽略上方 IP</span>}>
-            <Switch />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16}>
-        <Col span={12}>
-          <Form.Item name="ipv6" label="虚拟 IPv6" extra={<span style={{ fontSize: 11 }}>可与 IPv4 同时使用（双栈）</span>}>
-            <Input placeholder="可选，如 fd00::1" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="hostname" label="主机名" extra={<span style={{ fontSize: 11 }}>留空使用系统主机名</span>}>
-            <Input placeholder="自定义主机名（可选）" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16}>
-        <Col span={12}>
-          <Form.Item name="instance_name" label="实例名称" extra={<span style={{ fontSize: 11 }}>同机多节点时用于区分，留空使用默认</span>}>
-            <Input placeholder="可选，如 node1" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
+      <FieldRow
+        fields={[
+          { name: 'name', label: '名称', span: 20, placeholder: '节点名称', rules: [{ required: true, message: '请填写名称' }] },
+          { name: 'enable', label: '启用', type: 'switch', span: 4 },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          { name: 'network_name', label: '网络名称', placeholder: 'my-network', rules: [{ required: true, message: '请填写网络名称' }] },
+          { name: 'network_password', label: '网络密码', type: 'password', placeholder: '留空不设密码' },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          { name: 'virtual_ip_addr', label: '虚拟 IPv4', span: 10, placeholder: '10.144.144.1', hint: <>如 <code>10.144.144.1</code>，DHCP 时无效</> },
+          { name: 'virtual_ip_prefix', label: '前缀长度', type: 'number', span: 6, min: 0, max: 32, placeholder: '24', hint: '子网掩码位数' },
+          { name: 'enable_dhcp', label: 'DHCP 自动分配', type: 'switch', span: 8, hint: '自动分配虚拟 IP，忽略上方 IP' },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          { name: 'ipv6', label: '虚拟 IPv6', placeholder: '可选，如 fd00::1', hint: '可与 IPv4 同时使用（双栈）' },
+          { name: 'hostname', label: '主机名', placeholder: '自定义主机名（可选）', hint: '留空使用系统主机名' },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          { name: 'instance_name', label: '实例名称', placeholder: '可选，如 node1', hint: '同机多节点时用于区分，留空使用默认' },
+        ]}
+      />
       <Form.Item name="remark" label="备注">
         <Input.TextArea rows={2} placeholder="备注（可选）" style={{ width: '100%' }} />
       </Form.Item>
@@ -477,35 +442,33 @@ const EasytierClient: React.FC = () => {
       </Form.Item>
 
       <SectionTitle>RPC 管理</SectionTitle>
-      <Row gutter={16}>
-        <Col span={12}>
-          <Form.Item name="rpc_portal" label="RPC 门户地址"
-            extra={<span style={{ fontSize: 11 }}>如 <code>0</code>（随机）、<code>15888</code>、<code>0.0.0.0:15888</code></span>}
-          >
-            <Input placeholder="0（随机端口）" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="rpc_portal_whitelist" label="RPC 白名单"
-            extra={<span style={{ fontSize: 11 }}>如 <code>127.0.0.1/32,127.0.0.0/8</code></span>}
-          >
-            <Input placeholder="127.0.0.1/32,::1/128" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
+      <FieldRow
+        fields={[
+          {
+            name: 'rpc_portal', label: 'RPC 门户地址', placeholder: '0（随机端口）',
+            hint: <>如 <code>0</code>（随机）、<code>15888</code>、<code>0.0.0.0:15888</code></>,
+          },
+          {
+            name: 'rpc_portal_whitelist', label: 'RPC 白名单', placeholder: '127.0.0.1/32,::1/128',
+            hint: <>如 <code>127.0.0.1/32,127.0.0.0/8</code></>,
+          },
+        ]}
+      />
     </>
   )
 
   // ===== Tab 3: 路由与代理 =====
   const tabRouting = (
     <>
-      <Form.Item
-        name="relay_network_whitelist"
-        label="中继网络白名单"
-        extra={<span style={{ fontSize: 11 }}>允许为哪些网络提供中继，填 <code>*</code> 允许所有，留空不提供中继</span>}
-      >
-        <Input placeholder="留空不提供中继，填 * 允许所有" style={{ width: '100%' }} />
-      </Form.Item>
+      <FieldRow
+        fields={[
+          {
+            name: 'relay_network_whitelist', label: '中继网络白名单',
+            placeholder: '留空不提供中继，填 * 允许所有',
+            hint: <>允许为哪些网络提供中继，填 <code>*</code> 允许所有，留空不提供中继</>,
+          },
+        ]}
+      />
 
       <SectionTitle>出口节点</SectionTitle>
       <Form.Item extra={<span style={{ fontSize: 11 }}>使用指定节点的 IP 作为出口，如 <code>10.0.0.1</code></span>}>
@@ -576,27 +539,17 @@ const EasytierClient: React.FC = () => {
       </Form.List>
 
       <SectionTitle>TUN / 网卡</SectionTitle>
-      <Row gutter={16}>
-        <Col span={12}>
-          <Form.Item name="dev_name" label="TUN 设备名" extra={<span style={{ fontSize: 11 }}>留空使用默认（如 tun0）</span>}>
-            <Input placeholder="tun0" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="mtu" label="MTU">
-            <InputNumber min={576} max={9000} placeholder="默认 1380" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16}>
-        <Col span={12}>
-          <Form.Item name="bind_device" label="绑定物理设备"
-            extra={<span style={{ fontSize: 11 }}>将套接字绑定到指定物理网卡，避免路由问题</span>}
-          >
-            <Input placeholder="如 eth0（可选）" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
+      <FieldRow
+        fields={[
+          { name: 'dev_name', label: 'TUN 设备名', placeholder: 'tun0', hint: '留空使用默认（如 tun0）' },
+          { name: 'mtu', label: 'MTU', type: 'number', min: 576, max: 9000, placeholder: '默认 1380' },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          { name: 'bind_device', label: '绑定物理设备', placeholder: '如 eth0（可选）', hint: '将套接字绑定到指定物理网卡，避免路由问题' },
+        ]}
+      />
     </>
   )
 
@@ -604,154 +557,64 @@ const EasytierClient: React.FC = () => {
   const tabFeatures = (
     <>
       <SectionTitle>网络模式</SectionTitle>
-      <Row gutter={[0, 4]}>
-        <Col span={12}>
-          <Form.Item name="latency_first" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>延迟优先模式 <Text type="secondary" style={{ fontSize: 11 }}>（--latency-first）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="use_smoltcp" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>用户态协议栈 <Text type="secondary" style={{ fontSize: 11 }}>（smoltcp）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="disable_ipv6" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>禁用 IPv6</Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="accept_dns" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>启用 Magic DNS <Text type="secondary" style={{ fontSize: 11 }}>（--accept-dns）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="proxy_forward_by_system" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>系统内核转发子网代理 <Text type="secondary" style={{ fontSize: 11 }}>（--proxy-forward-by-system）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16} style={{ marginTop: 4 }}>
-        <Col span={12}>
-          <Form.Item name="tld_dns_zone" label="Magic DNS 顶级域名"
-            extra={<span style={{ fontSize: 11 }}>仅 accept-dns 启用时有效，默认 et.net.</span>}
-          >
-            <Input placeholder="et.net." style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="default_protocol" label="默认连接协议"
-            extra={<span style={{ fontSize: 11 }}>连接对等节点时使用的默认协议</span>}
-          >
-            <Select allowClear placeholder="默认自动" options={PROTOCOL_OPTIONS} style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
+      <CheckboxGrid
+        items={[
+          { name: 'latency_first', label: '延迟优先模式', hint: '（--latency-first）' },
+          { name: 'use_smoltcp', label: '用户态协议栈', hint: '（smoltcp）' },
+          { name: 'disable_ipv6', label: '禁用 IPv6' },
+          { name: 'accept_dns', label: '启用 Magic DNS', hint: '（--accept-dns）' },
+          { name: 'proxy_forward_by_system', label: '系统内核转发子网代理', hint: '（--proxy-forward-by-system）' },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          { name: 'tld_dns_zone', label: 'Magic DNS 顶级域名', placeholder: 'et.net.', hint: '仅 accept-dns 启用时有效，默认 et.net.' },
+          { name: 'default_protocol', label: '默认连接协议', type: 'select', allowClear: true, placeholder: '默认自动', options: PROTOCOL_OPTIONS, hint: '连接对等节点时使用的默认协议' },
+        ]}
+      />
 
       <SectionTitle>P2P 与打洞</SectionTitle>
-      <Row gutter={[0, 4]}>
-        <Col span={12}>
-          <Form.Item name="disable_p2p" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>禁用 P2P（强制中继）</Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="p2p_only" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>仅 P2P（禁用中继）</Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="relay_all_peer_rpc" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>中继所有对等 RPC</Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="disable_tcp_hole_punching" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>禁用 TCP 打洞</Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="disable_udp_hole_punching" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>禁用 UDP 打洞</Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="disable_sym_hole_punching" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>禁用对称 NAT 打洞 <Text type="secondary" style={{ fontSize: 11 }}>（防运营商封锁）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-      </Row>
+      <CheckboxGrid
+        items={[
+          { name: 'disable_p2p', label: '禁用 P2P（强制中继）' },
+          { name: 'p2p_only', label: '仅 P2P（禁用中继）' },
+          { name: 'relay_all_peer_rpc', label: '中继所有对等 RPC' },
+          { name: 'disable_tcp_hole_punching', label: '禁用 TCP 打洞' },
+          { name: 'disable_udp_hole_punching', label: '禁用 UDP 打洞' },
+          { name: 'disable_sym_hole_punching', label: '禁用对称 NAT 打洞', hint: '（防运营商封锁）' },
+        ]}
+      />
 
       <SectionTitle>协议加速</SectionTitle>
-      <Row gutter={[0, 4]}>
-        <Col span={12}>
-          <Form.Item name="enable_kcp_proxy" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>启用 KCP 加速 <Text type="secondary" style={{ fontSize: 11 }}>（提升 UDP 丢包网络性能）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="disable_kcp_input" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>禁止其他节点 KCP 代理到本节点</Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="enable_quic_proxy" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>启用 QUIC 加速 <Text type="secondary" style={{ fontSize: 11 }}>（提升 UDP 丢包网络性能）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="disable_quic_input" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>禁止其他节点 QUIC 代理到本节点</Checkbox>
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16} style={{ marginTop: 4 }}>
-        <Col span={12}>
-          <Form.Item name="quic_listen_port" label="QUIC 监听端口"
-            extra={<span style={{ fontSize: 11 }}>0 为随机端口</span>}
-          >
-            <InputNumber min={0} max={65535} placeholder="0（随机）" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
+      <CheckboxGrid
+        items={[
+          { name: 'enable_kcp_proxy', label: '启用 KCP 加速', hint: '（提升 UDP 丢包网络性能）' },
+          { name: 'disable_kcp_input', label: '禁止其他节点 KCP 代理到本节点' },
+          { name: 'enable_quic_proxy', label: '启用 QUIC 加速', hint: '（提升 UDP 丢包网络性能）' },
+          { name: 'disable_quic_input', label: '禁止其他节点 QUIC 代理到本节点' },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          { name: 'quic_listen_port', label: 'QUIC 监听端口', type: 'number', min: 0, max: 65535, placeholder: '0（随机）', hint: '0 为随机端口' },
+        ]}
+      />
 
       <SectionTitle>节点行为</SectionTitle>
-      <Row gutter={[0, 4]}>
-        <Col span={12}>
-          <Form.Item name="no_tun" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>No TUN 模式 <Text type="secondary" style={{ fontSize: 11 }}>（无需 Npcap）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="enable_exit_node" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>允许作为出口节点</Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="multi_thread" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>多线程模式</Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="disable_relay_kcp" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>禁止转发 KCP 数据包 <Text type="secondary" style={{ fontSize: 11 }}>（防过度消耗流量）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="enable_relay_foreign_network_kcp" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>作为共享节点时转发其他网络 KCP</Checkbox>
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16} style={{ marginTop: 4 }}>
-        <Col span={12}>
-          <Form.Item name="multi_thread_count" label="多线程数量"
-            extra={<span style={{ fontSize: 11 }}>仅多线程模式有效，需大于 2，0 使用默认值 2</span>}
-          >
-            <InputNumber min={0} max={64} placeholder="0（默认2）" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
+      <CheckboxGrid
+        items={[
+          { name: 'no_tun', label: 'No TUN 模式', hint: '（无需 Npcap）' },
+          { name: 'enable_exit_node', label: '允许作为出口节点' },
+          { name: 'multi_thread', label: '多线程模式' },
+          { name: 'disable_relay_kcp', label: '禁止转发 KCP 数据包', hint: '（防过度消耗流量）' },
+          { name: 'enable_relay_foreign_network_kcp', label: '作为共享节点时转发其他网络 KCP' },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          { name: 'multi_thread_count', label: '多线程数量', type: 'number', min: 0, max: 64, placeholder: '0（默认2）', hint: '仅多线程模式有效，需大于 2，0 使用默认值 2' },
+        ]}
+      />
     </>
   )
 
@@ -759,24 +622,18 @@ const EasytierClient: React.FC = () => {
   const tabOther = (
     <>
       <SectionTitle>安全</SectionTitle>
-      <Row gutter={[0, 4]}>
-        <Col span={12}>
-          <Form.Item name="disable_encryption" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox><Text type="danger">禁用加密</Text> <Text type="secondary" style={{ fontSize: 11 }}>（不推荐）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="private_mode" valuePropName="checked" style={{ marginBottom: 4 }}>
-            <Checkbox>私有模式 <Text type="secondary" style={{ fontSize: 11 }}>（仅允许已知节点握手/中转）</Text></Checkbox>
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16} style={{ marginTop: 4 }}>
-        <Col span={12}>
-          <Form.Item name="encryption_algorithm" label="加密算法"
-            extra={<span style={{ fontSize: 11 }}>留空使用默认（aes-gcm）</span>}
-          >
-            <Select allowClear placeholder="默认 aes-gcm" style={{ width: '100%' }} options={[
+      <CheckboxGrid
+        items={[
+          { name: 'disable_encryption', label: <Text type="danger">禁用加密</Text>, hint: '（不推荐）' },
+          { name: 'private_mode', label: '私有模式', hint: '（仅允许已知节点握手/中转）' },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          {
+            name: 'encryption_algorithm', label: '加密算法', type: 'select', allowClear: true,
+            placeholder: '默认 aes-gcm', hint: '留空使用默认（aes-gcm）',
+            options: [
               { label: '默认（aes-gcm）', value: '' },
               { label: 'AES-GCM', value: 'aes-gcm' },
               { label: 'AES-GCM-256', value: 'aes-gcm-256' },
@@ -785,10 +642,10 @@ const EasytierClient: React.FC = () => {
               { label: 'OpenSSL AES-128-GCM', value: 'openssl-aes128-gcm' },
               { label: 'OpenSSL AES-256-GCM', value: 'openssl-aes256-gcm' },
               { label: 'OpenSSL ChaCha20', value: 'openssl-chacha20' },
-            ]} />
-          </Form.Item>
-        </Col>
-      </Row>
+            ],
+          },
+        ]}
+      />
 
       <SectionTitle>节点密钥对</SectionTitle>
       <Row gutter={16}>
@@ -962,64 +819,26 @@ const EasytierClient: React.FC = () => {
       </Row>
 
       <SectionTitle>日志设置</SectionTitle>
-      <Row gutter={16}>
-        <Col span={12}>
-          <Form.Item name="console_log_level" label="控制台日志级别">
-            <Select allowClear placeholder="默认" style={{ width: '100%' }} options={[
-              { label: 'trace', value: 'trace' },
-              { label: 'debug', value: 'debug' },
-              { label: 'info', value: 'info' },
-              { label: 'warn', value: 'warn' },
-              { label: 'error', value: 'error' },
-              { label: 'off', value: 'off' },
-            ]} />
-          </Form.Item>
-        </Col>
-        <Col span={12}>
-          <Form.Item name="file_log_level" label="文件日志级别">
-            <Select allowClear placeholder="默认" style={{ width: '100%' }} options={[
-              { label: 'trace', value: 'trace' },
-              { label: 'debug', value: 'debug' },
-              { label: 'info', value: 'info' },
-              { label: 'warn', value: 'warn' },
-              { label: 'error', value: 'error' },
-              { label: 'off', value: 'off' },
-            ]} />
-          </Form.Item>
-        </Col>
-      </Row>
-      <Row gutter={16}>
-        <Col span={12}>
-          <Form.Item name="file_log_dir" label="日志文件目录"
-            extra={<span style={{ fontSize: 11 }}>留空不写入文件日志</span>}
-          >
-            <Input placeholder="如 /var/log/easytier" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={6}>
-          <Form.Item name="file_log_size" label="单文件大小（MB）"
-            extra={<span style={{ fontSize: 11 }}>0 使用默认 100MB</span>}
-          >
-            <InputNumber min={0} placeholder="100" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-        <Col span={6}>
-          <Form.Item name="file_log_count" label="最大文件数量"
-            extra={<span style={{ fontSize: 11 }}>0 使用默认 10</span>}
-          >
-            <InputNumber min={0} placeholder="10" style={{ width: '100%' }} />
-          </Form.Item>
-        </Col>
-      </Row>
+      <FieldRow
+        fields={[
+          { name: 'console_log_level', label: '控制台日志级别', type: 'select', allowClear: true, placeholder: '默认', options: LOG_LEVEL_OPTIONS },
+          { name: 'file_log_level', label: '文件日志级别', type: 'select', allowClear: true, placeholder: '默认', options: LOG_LEVEL_OPTIONS },
+        ]}
+      />
+      <FieldRow
+        fields={[
+          { name: 'file_log_dir', label: '日志文件目录', placeholder: '如 /var/log/easytier', hint: '留空不写入文件日志' },
+          { name: 'file_log_size', label: '单文件大小（MB）', type: 'number', min: 0, placeholder: '100', hint: '0 使用默认 100MB' },
+          { name: 'file_log_count', label: '最大文件数量', type: 'number', min: 0, placeholder: '10', hint: '0 使用默认 10' },
+        ]}
+      />
 
       <SectionTitle>其他参数</SectionTitle>
-      <Form.Item
-        name="extra_args"
-        label="额外命令行参数"
-        extra={<span style={{ fontSize: 11 }}>其他不常用的参数，直接追加到命令行（兜底用）</span>}
-      >
-        <Input.TextArea rows={3} placeholder="--some-flag value" style={{ width: '100%' }} />
-      </Form.Item>
+      <FieldRow
+        fields={[
+          { name: 'extra_args', label: '额外命令行参数', type: 'textarea', rows: 3, placeholder: '--some-flag value', hint: '其他不常用的参数，直接追加到命令行（兜底用）' },
+        ]}
+      />
     </>
   )
 
diff --git a/webpage/src/pages/EasytierServer.tsx b/webpage/src/pages/EasytierServer.tsx
index 05c701af..d45586d7 100644
--- a/webpage/src/pages/EasytierServer.tsx
+++ b/webpage/src/pages/EasytierServer.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react'
+import SectionTitle from '../components/SectionTitle'
 import {
   Table, Button, Space, Switch, Modal, Form, Input,
   Popconfirm, message, Typography, Tag, Tooltip, Row, Col,
@@ -24,15 +25,6 @@ import {
 
 const { Text } = Typography
 
-// 分组标题
-const SectionTitle = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px' }}>
-    <div style={{ width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0 }} />
-    <span style={{ fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em' }}>{children}</span>
-    <div style={{ flex: 1, height: 1, background: '#f0f0f0' }} />
-  </div>
-)
-
 const EasytierServer: React.FC = () => {
   const tunnelCtx = useTunnelApi()
   const tableStyle = useTableStyle()
diff --git a/webpage/src/pages/FrpClient.tsx b/webpage/src/pages/FrpClient.tsx
index 3279a2c8..1346e083 100644
--- a/webpage/src/pages/FrpClient.tsx
+++ b/webpage/src/pages/FrpClient.tsx
@@ -1,4 +1,6 @@
 import React, {useEffect, useState} from 'react'
+import SectionTitle from '../components/SectionTitle'
+import {FieldRow} from '../components/ConfigFields'
 import {
     Badge,
     Button,
@@ -44,21 +46,36 @@ import { useTableStyle } from '../hooks/useTableStyle'
 const {Option} = Select
 const {Text} = Typography
 
+// 连接协议选项
+const TRANSPORT_OPTIONS = [
+    {label: 'TCP（默认）', value: 'tcp'},
+    {label: 'KCP（UDP加速）', value: 'kcp'},
+    {label: 'QUIC', value: 'quic'},
+    {label: 'WebSocket', value: 'websocket'},
+    {label: 'WSS（WebSocket+TLS）', value: 'wss'},
+]
+
+// 认证方式选项
+const AUTH_METHOD_OPTIONS = [
+    {label: 'Token', value: 'token'},
+    {label: 'OIDC', value: 'oidc'},
+]
+
+// 日志级别选项
+const LOG_LEVEL_OPTIONS = [
+    {label: 'trace', value: 'trace'},
+    {label: 'debug', value: 'debug'},
+    {label: 'info（推荐）', value: 'info'},
+    {label: 'warn', value: 'warn'},
+    {label: 'error', value: 'error'},
+]
+
 // 代理类型颜色
 const proxyTypeColor: Record<string, string> = {
     tcp: 'blue', udp: 'green', http: 'orange', https: 'gold',
     stcp: 'purple', xtcp: 'magenta', tcpmux: 'cyan',
 }
 
-// 分组标题
-const SectionTitle = ({children}: { children: React.ReactNode }) => (
-    <div style={{display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px'}}>
-        <div style={{width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0}}/>
-        <span style={{fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em'}}>{children}</span>
-        <div style={{flex: 1, height: 1, background: '#f0f0f0'}}/>
-    </div>
-)
-
 const FrpClient: React.FC = () => {
     const {t} = useTranslation()
     const tunnelCtx = useTunnelApi()
@@ -371,275 +388,86 @@ const FrpClient: React.FC = () => {
     // ===== frpc 主配置 Tab =====
     const tabBasic = (
         <>
-            <Row gutter={16}>
-                <Col span={10}>
-                    <Form.Item name="name" label="名称" rules={[{required: true, message: '请填写名称'}]}>
-                        <Input placeholder="客户端名称" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-                <Col span={10}>
-                    <Form.Item
-                        name="user"
-                        label="用户名"
-                        extra={<span style={{fontSize: 11}}>代理名 user.proxyName</span>}
-                    >
-                        <Input placeholder="留空不设置" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-                <Col span={4}>
-                    <Form.Item name="enable" label="启用" valuePropName="checked">
-                        <Switch/>
-                    </Form.Item>
-                </Col>
-            </Row>
+            <FieldRow
+                fields={[
+                    {name: 'name', label: '名称', span: 10, placeholder: '客户端名称', rules: [{required: true, message: '请填写名称'}]},
+                    {name: 'user', label: '用户名', span: 10, placeholder: '留空不设置', hint: '代理名 user.proxyName'},
+                    {name: 'enable', label: '启用', type: 'switch', span: 4},
+                ]}
+            />
             <SectionTitle>服务器连接</SectionTitle>
-            <Row gutter={16}>
-                <Col span={12}>
-                    <Form.Item
-                        name="server_addr"
-                        label="服务器地址"
-                        rules={[{required: true, message: '请填写服务器地址'}]}
-                        extra={<span style={{fontSize: 11}}>FRP 服务端的 IP 或域名</span>}
-                    >
-                        <Input placeholder="frp.example.com" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-                <Col span={4}>
-                    <Form.Item
-                        name="server_port"
-                        label="端口"
-                        rules={[{required: true, message: '请填写端口'}]}
-                        extra={<span style={{fontSize: 11}}>默认 7000</span>}
-                    >
-                        <InputNumber min={1} max={65535} style={{width: '100%'}} placeholder="7000"/>
-                    </Form.Item>
-                </Col>
-                <Col span={8}>
-                    <Form.Item
-                        name="transport_protocol"
-                        label="协议"
-                        extra={<span style={{fontSize: 11}}>连接协议</span>}
-                    >
-                        <Select style={{width: '100%'}}>
-                            <Option value="tcp">TCP（默认）</Option>
-                            <Option value="kcp">KCP（UDP加速）</Option>
-                            <Option value="quic">QUIC</Option>
-                            <Option value="websocket">WebSocket</Option>
-                            <Option value="wss">WSS（WebSocket+TLS）</Option>
-                        </Select>
-                    </Form.Item>
-                </Col>
-            </Row>
+            <FieldRow
+                fields={[
+                    {name: 'server_addr', label: '服务器地址', placeholder: 'frp.example.com', rules: [{required: true, message: '请填写服务器地址'}], hint: 'FRP 服务端的 IP 或域名'},
+                    {name: 'server_port', label: '端口', type: 'number', min: 1, max: 65535, placeholder: '7000', rules: [{required: true, message: '请填写端口'}], hint: '默认 7000'},
+                    {name: 'transport_protocol', label: '协议', type: 'select', span: 8, options: TRANSPORT_OPTIONS, hint: '连接协议'},
+                ]}
+            />
             <SectionTitle>认证</SectionTitle>
-            <Row gutter={16}>
-                <Col span={8}>
-                    <Form.Item
-                        name="auth_method"
-                        label="认证方式"
-                        extra={<span style={{fontSize: 11}}>默认 token</span>}
-                    >
-                        <Select style={{width: '100%'}}>
-                            <Option value="token">Token</Option>
-                            <Option value="oidc">OIDC</Option>
-                        </Select>
-                    </Form.Item>
-                </Col>
-                <Col span={16}>
-                    <Form.Item
-                        name="token"
-                        label="认证 Token"
-                        extra={<span style={{fontSize: 11}}>需与服务端配置一致，留空不认证</span>}
-                    >
-                        <Input.Password placeholder="留空不认证" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-            </Row>
+            <FieldRow
+                fields={[
+                    {name: 'auth_method', label: '认证方式', type: 'select', options: AUTH_METHOD_OPTIONS, hint: '默认 token'},
+                    {name: 'token', label: '认证 Token', type: 'password', span: 16, placeholder: '留空不认证', hint: '需与服务端配置一致，留空不认证'},
+                ]}
+            />
             <SectionTitle>TLS / 日志</SectionTitle>
-            <Row gutter={16}>
-                <Col span={4}>
-                    <Form.Item
-                        name="tls_enable"
-                        label="TLS"
-                        valuePropName="checked"
-                        extra={<span style={{fontSize: 11}}>加密传输</span>}
-                    >
-                        <Switch/>
-                    </Form.Item>
-                </Col>
-                <Col span={8}>
-                    <Form.Item name="log_level" label="日志级别">
-                        <Select style={{width: '100%'}}>
-                            <Option value="trace">trace</Option>
-                            <Option value="debug">debug</Option>
-                            <Option value="info">info（推荐）</Option>
-                            <Option value="warn">warn</Option>
-                            <Option value="error">error</Option>
-                        </Select>
-                    </Form.Item>
-                </Col>
-                <Col span={6}>
-                    <Form.Item
-                        name="pool_count"
-                        label="连接池大小"
-                        extra={<span style={{fontSize: 11}}>预建连接数，默认 5</span>}
-                    >
-                        <InputNumber min={0} max={100} style={{width: '100%'}} placeholder="5"/>
-                    </Form.Item>
-                </Col>
-                <Col span={6}>
-                    <Form.Item
-                        name="udp_packet_size"
-                        label="UDP 包大小"
-                        extra={<span style={{fontSize: 11}}>默认 1500，需与服务端一致</span>}
-                    >
-                        <InputNumber min={512} max={65535} style={{width: '100%'}} placeholder="1500"/>
-                    </Form.Item>
-                </Col>
-            </Row>
+            <FieldRow
+                fields={[
+                    {name: 'tls_enable', label: 'TLS', type: 'switch', span: 4, hint: '加密传输'},
+                    {name: 'log_level', label: '日志级别', type: 'select', span: 8, options: LOG_LEVEL_OPTIONS},
+                    {name: 'pool_count', label: '连接池大小', type: 'number', min: 0, max: 100, placeholder: '5', hint: '预建连接数，默认 5'},
+                    {name: 'udp_packet_size', label: 'UDP 包大小', type: 'number', min: 512, max: 65535, placeholder: '1500', hint: '默认 1500，需与服务端一致'},
+                ]}
+            />
         </>
     )
 
     const tabConnection = (
         <>
             <SectionTitle>心跳 &amp; 超时</SectionTitle>
-            <Row gutter={16}>
-                <Col span={8}>
-                    <Form.Item
-                        name="heartbeat_interval"
-                        label="心跳间隔（秒）"
-                        extra={<span style={{fontSize: 11}}>默认 30，-1 禁用</span>}
-                    >
-                        <InputNumber min={-1} max={3600} style={{width: '100%'}} placeholder="30"/>
-                    </Form.Item>
-                </Col>
-                <Col span={8}>
-                    <Form.Item
-                        name="heartbeat_timeout"
-                        label="心跳超时（秒）"
-                        extra={<span style={{fontSize: 11}}>默认 90</span>}
-                    >
-                        <InputNumber min={1} max={3600} style={{width: '100%'}} placeholder="90"/>
-                    </Form.Item>
-                </Col>
-                <Col span={8}>
-                    <Form.Item
-                        name="dial_server_timeout"
-                        label="连接超时（秒）"
-                        extra={<span style={{fontSize: 11}}>连接服务端超时，默认 10</span>}
-                    >
-                        <InputNumber min={1} max={300} style={{width: '100%'}} placeholder="10"/>
-                    </Form.Item>
-                </Col>
-            </Row>
+            <FieldRow
+                fields={[
+                    {name: 'heartbeat_interval', label: '心跳间隔（秒）', type: 'number', min: -1, max: 3600, placeholder: '30', hint: '默认 30，-1 禁用'},
+                    {name: 'heartbeat_timeout', label: '心跳超时（秒）', type: 'number', min: 1, max: 3600, placeholder: '90', hint: '默认 90'},
+                    {name: 'dial_server_timeout', label: '连接超时（秒）', type: 'number', min: 1, max: 300, placeholder: '10', hint: '连接服务端超时，默认 10'},
+                ]}
+            />
             <SectionTitle>TCP 多路复用</SectionTitle>
-            <Row gutter={16}>
-                <Col span={6}>
-                    <Form.Item
-                        name="tcp_mux"
-                        label="TCP 多路复用"
-                        valuePropName="checked"
-                        extra={<span style={{fontSize: 11}}>默认启用</span>}
-                    >
-                        <Switch/>
-                    </Form.Item>
-                </Col>
-                <Col span={9}>
-                    <Form.Item
-                        name="tcp_mux_keepalive_interval"
-                        label="tcp_mux 心跳间隔（秒）"
-                        extra={<span style={{fontSize: 11}}>0 表示不设置</span>}
-                    >
-                        <InputNumber min={0} max={3600} style={{width: '100%'}} placeholder="0"/>
-                    </Form.Item>
-                </Col>
-                <Col span={9}>
-                    <Form.Item
-                        name="dial_server_keepalive"
-                        label="TCP keepalive 间隔（秒）"
-                        extra={<span style={{fontSize: 11}}>底层 TCP 保活，0 不设置</span>}
-                    >
-                        <InputNumber min={0} max={3600} style={{width: '100%'}} placeholder="0"/>
-                    </Form.Item>
-                </Col>
-            </Row>
+            <FieldRow
+                fields={[
+                    {name: 'tcp_mux', label: 'TCP 多路复用', type: 'switch', span: 6, hint: '默认启用'},
+                    {name: 'tcp_mux_keepalive_interval', label: 'tcp_mux 心跳间隔（秒）', type: 'number', span: 9, min: 0, max: 3600, placeholder: '0', hint: '0 表示不设置'},
+                    {name: 'dial_server_keepalive', label: 'TCP keepalive 间隔（秒）', type: 'number', span: 9, min: 0, max: 3600, placeholder: '0', hint: '底层 TCP 保活，0 不设置'},
+                ]}
+            />
             <SectionTitle>网络 &amp; 代理</SectionTitle>
-            <Row gutter={16}>
-                <Col span={12}>
-                    <Form.Item
-                        name="proxy_url"
-                        label="代理地址"
-                        extra={<span style={{fontSize: 11}}>格式：http://user:pass@host:port 或 socks5://...</span>}
-                    >
-                        <Input placeholder="http://127.0.0.1:8080" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-                <Col span={12}>
-                    <Form.Item
-                        name="connect_server_local_ip"
-                        label="绑定本地 IP"
-                        extra={<span style={{fontSize: 11}}>连接服务端时绑定的本地 IP，多网卡时使用</span>}
-                    >
-                        <Input placeholder="留空自动选择" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-            </Row>
-            <Row gutter={16}>
-                <Col span={12}>
-                    <Form.Item
-                        name="nat_hole_stun_server"
-                        label="STUN 服务器"
-                        extra={<span style={{fontSize: 11}}>xtcp 打洞使用，默认 stun.easyvoip.com:3478</span>}
-                    >
-                        <Input placeholder="stun.easyvoip.com:3478" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-                <Col span={12}>
-                    <Form.Item
-                        name="dns_server"
-                        label="DNS 服务器"
-                        extra={<span style={{fontSize: 11}}>自定义 DNS，留空使用系统默认</span>}
-                    >
-                        <Input placeholder="8.8.8.8" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-            </Row>
+            <FieldRow
+                fields={[
+                    {name: 'proxy_url', label: '代理地址', placeholder: 'http://127.0.0.1:8080', hint: '格式：http://user:pass@host:port 或 socks5://...'},
+                    {name: 'connect_server_local_ip', label: '绑定本地 IP', placeholder: '留空自动选择', hint: '连接服务端时绑定的本地 IP，多网卡时使用'},
+                ]}
+            />
+            <FieldRow
+                fields={[
+                    {name: 'nat_hole_stun_server', label: 'STUN 服务器', placeholder: 'stun.easyvoip.com:3478', hint: 'xtcp 打洞使用，默认 stun.easyvoip.com:3478'},
+                    {name: 'dns_server', label: 'DNS 服务器', placeholder: '8.8.8.8', hint: '自定义 DNS，留空使用系统默认'},
+                ]}
+            />
             <SectionTitle>Web 管理</SectionTitle>
-            <Row gutter={16}>
-                <Col span={8}>
-                    <Form.Item name="web_server_port" label="管理端口"
-                               extra={<span style={{fontSize: 11}}>留空不启用</span>}>
-                        <InputNumber min={1} max={65535} style={{width: '100%'}} placeholder="7400"/>
-                    </Form.Item>
-                </Col>
-                <Col span={8}>
-                    <Form.Item name="web_server_user" label="用户名">
-                        <Input placeholder="admin" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-                <Col span={8}>
-                    <Form.Item name="web_server_password" label="密码">
-                        <Input.Password placeholder="管理密码" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-            </Row>
+            <FieldRow
+                fields={[
+                    {name: 'web_server_port', label: '管理端口', type: 'number', min: 1, max: 65535, placeholder: '7400', hint: '留空不启用'},
+                    {name: 'web_server_user', label: '用户名', placeholder: 'admin'},
+                    {name: 'web_server_password', label: '密码', type: 'password', placeholder: '管理密码'},
+                ]}
+            />
             <SectionTitle>其他</SectionTitle>
-            <Row gutter={16}>
-                <Col span={8}>
-                    <Form.Item
-                        name="login_fail_exit"
-                        label="登录失败退出"
-                        valuePropName="checked"
-                        extra={<span style={{fontSize: 11}}>首次登录失败是否退出进程，建议关闭以保持隧道自动重连</span>}
-                    >
-                        <Switch/>
-                    </Form.Item>
-                </Col>
-                <Col span={16}>
-                    <Form.Item name="remark" label="备注">
-                        <Input.TextArea rows={2} placeholder="备注（可选）" style={{width: '100%'}}/>
-                    </Form.Item>
-                </Col>
-            </Row>
+            <FieldRow
+                fields={[
+                    {name: 'login_fail_exit', label: '登录失败退出', type: 'switch', hint: '首次登录失败是否退出进程，建议关闭以保持隧道自动重连'},
+                    {name: 'remark', label: '备注', type: 'textarea', rows: 2, span: 16, placeholder: '备注（可选）'},
+                ]}
+            />
         </>
     )
 
diff --git a/webpage/src/pages/FrpServer.tsx b/webpage/src/pages/FrpServer.tsx
index 32db8965..de3bba9a 100644
--- a/webpage/src/pages/FrpServer.tsx
+++ b/webpage/src/pages/FrpServer.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import SectionTitle from '../components/SectionTitle'
 import {
   Table, Button, Space, Switch, Modal, Form, Input, InputNumber,
   Popconfirm, message, Typography, Tag, Tooltip, Row, Col, Tabs, Select,
@@ -18,15 +19,6 @@ import { useTableStyle } from '../hooks/useTableStyle'
 const { Text } = Typography
 const { Option } = Select
 
-// 分组标题
-const SectionTitle = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px' }}>
-    <div style={{ width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0 }} />
-    <span style={{ fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em' }}>{children}</span>
-    <div style={{ flex: 1, height: 1, background: '#f0f0f0' }} />
-  </div>
-)
-
 const FrpServer: React.FC = () => {
   const tunnelCtx = useTunnelApi()
   const tableStyle = useTableStyle()
diff --git a/webpage/src/pages/NpsClient.tsx b/webpage/src/pages/NpsClient.tsx
index 1df5b08b..b431aa3f 100644
--- a/webpage/src/pages/NpsClient.tsx
+++ b/webpage/src/pages/NpsClient.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import SectionTitle from '../components/SectionTitle'
 import {
   Table, Button, Space, Switch, Modal, Form, Input, InputNumber,
   Popconfirm, message, Typography, Tooltip, Row, Col, Select, Tabs, Divider,
@@ -17,15 +18,6 @@ import { useTableStyle } from '../hooks/useTableStyle'
 const { Text } = Typography
 const { Option } = Select
 
-// 分组标题
-const SectionTitle = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px' }}>
-    <div style={{ width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0 }} />
-    <span style={{ fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em' }}>{children}</span>
-    <div style={{ flex: 1, height: 1, background: '#f0f0f0' }} />
-  </div>
-)
-
 const NpsClient: React.FC = () => {
   const tunnelCtx = useTunnelApi()
   const tableStyle = useTableStyle()
diff --git a/webpage/src/pages/NpsServer.tsx b/webpage/src/pages/NpsServer.tsx
index 410dd7ff..d98edd7f 100644
--- a/webpage/src/pages/NpsServer.tsx
+++ b/webpage/src/pages/NpsServer.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import SectionTitle from '../components/SectionTitle'
 import {
   Table, Button, Space, Switch, Modal, Form, Input, InputNumber,
   Popconfirm, message, Typography, Tooltip, Row, Col, Tag, Tabs, Select,
@@ -18,15 +19,6 @@ import { useTableStyle } from '../hooks/useTableStyle'
 const { Text } = Typography
 const { Option } = Select
 
-// 分组标题
-const SectionTitle = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px' }}>
-    <div style={{ width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0 }} />
-    <span style={{ fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em' }}>{children}</span>
-    <div style={{ flex: 1, height: 1, background: '#f0f0f0' }} />
-  </div>
-)
-
 const NpsServer: React.FC = () => {
   const tunnelCtx = useTunnelApi()
   const tableStyle = useTableStyle()
diff --git a/webpage/src/pages/PortForward.tsx b/webpage/src/pages/PortForward.tsx
index 095ab6b6..a52bb346 100644
--- a/webpage/src/pages/PortForward.tsx
+++ b/webpage/src/pages/PortForward.tsx
@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from 'react'
+import SectionTitle from '../components/SectionTitle'
 import {
     Button,
     Col,
@@ -35,15 +36,6 @@ import { useTableStyle } from '../hooks/useTableStyle'
 const {Text} = Typography
 const {Option} = Select
 
-// 分组标题
-const SectionTitle = ({children}: { children: React.ReactNode }) => (
-    <div style={{display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px'}}>
-        <div style={{width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0}}/>
-        <span style={{fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em'}}>{children}</span>
-        <div style={{flex: 1, height: 1, background: '#f0f0f0'}}/>
-    </div>
-)
-
 interface PortForwardRule {
     id: number
     name: string
diff --git a/webpage/src/pages/Stun.tsx b/webpage/src/pages/Stun.tsx
index b8d51969..869a5b13 100644
--- a/webpage/src/pages/Stun.tsx
+++ b/webpage/src/pages/Stun.tsx
@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from 'react'
+import SectionTitle from '../components/SectionTitle'
 import {
     AutoComplete,
     Button,
@@ -308,13 +309,6 @@ const STUN_SERVER_LIST = [
 const STUN_SERVER_OPTIONS = STUN_SERVER_LIST.map(v => ({value: v, label: v}))
 
 // 分组标题（与 EasyTier 保持一致）
-const SectionTitle = ({children}: { children: React.ReactNode }) => (
-    <div style={{display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px'}}>
-        <div style={{width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0}}/>
-        <span style={{fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em'}}>{children}</span>
-        <div style={{flex: 1, height: 1, background: '#f0f0f0'}}/>
-    </div>
-)
 
 const Stun: React.FC = () => {
     const {t} = useTranslation()
diff --git a/webpage/src/pages/Wireguard.tsx b/webpage/src/pages/Wireguard.tsx
index 3ccdad69..e0f6a7f8 100644
--- a/webpage/src/pages/Wireguard.tsx
+++ b/webpage/src/pages/Wireguard.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import SectionTitle from '../components/SectionTitle'
 import {
   Table, Button, Space, Switch, Modal, Form, Input, InputNumber,
   Popconfirm, message, Typography, Tooltip, Row, Col, Tabs, Tag, Divider, Image,
@@ -16,15 +17,6 @@ import { useTableStyle } from '../hooks/useTableStyle'
 
 const { Text } = Typography
 
-// 分组标题
-const SectionTitle = ({ children }: { children: React.ReactNode }) => (
-  <div style={{ display: 'flex', alignItems: 'center', gap: 8, margin: '12px 0 8px' }}>
-    <div style={{ width: 3, height: 14, background: '#0071e3', borderRadius: 2, flexShrink: 0 }} />
-    <span style={{ fontSize: 12, fontWeight: 600, color: '#595959', letterSpacing: '0.02em' }}>{children}</span>
-    <div style={{ flex: 1, height: 1, background: '#f0f0f0' }} />
-  </div>
-)
-
 const Wireguard: React.FC = () => {
   const { t } = useTranslation()
   const tableStyle = useTableStyle()