From 0fce234ef3ae76021b198feecc1f9001830ff956 Mon Sep 17 00:00:00 2001
From: mrlee <470349233@qq.com>
Date: Thu, 24 Sep 2026 15:27:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=85=AC=E7=BD=91=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E7=AB=AF=E9=A1=B5=E5=B9=B6=E5=85=A5=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E7=AB=AF=E5=88=97=E8=A1=A8=E5=B9=B6=E6=94=B9=E5=B7=A6=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E5=8F=B3=E8=AF=A6=E6=83=85=EF=BC=8C=E5=86=85=E7=BD=91?=
 =?UTF-8?q?=E7=A9=BF=E9=80=8F=E9=A1=B5=E6=94=B9=E5=B7=A6=E6=9C=8D=E5=8A=A1?=
 =?UTF-8?q?=E7=AB=AF=E5=8F=B3=E8=A7=84=E5=88=99=EF=BC=88v1.2.6=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                       |   16 +
 VERSION                            |    2 +-
 docs/frp-server-list-merge-plan.md |  228 ++++++
 web/src/views/AgentView.vue        | 1048 +++++++++++++++++++++++++++-
 web/src/views/FrpView.vue          |  951 ++++---------------------
 web/src/views/LogsView.vue         |    3 +-
 6 files changed, 1425 insertions(+), 823 deletions(-)
 create mode 100644 docs/frp-server-list-merge-plan.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 876418a..b30c9c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file.
 
+## [v1.2.6] - 2026-09-24
+
+### 改进
+
+- 公网服务端页（`/frp-agent`）改为 DDNS 页那样的**左列表 + 右详情**：左侧是服务端列表（名称 / 启动状态 / `主机:端口` / 延迟与位置 / TLS·Token·Agent·SSH 标签，点行即选中并高亮），右侧是选中服务端的详情；原列表行内操作（启动·停止 / 查看 / 日志 / 测速 / 校验 / 编辑 / 删除）移到右侧工具条，顶部「选择服务端」下拉去掉（左侧列表本身就是选择器），页面标题改「公网服务端」，≤1100px 收成一列
+- 内网穿透页（`/frp`）改为**左：服务端列表 / 右：该服务端的穿透规则**：左侧点服务端即筛选（显示规则数与启用数），右侧保留原来的穿透规则表格（`:data` 按选中服务端过滤、去掉冗余的「服务端」列、`:scroll-x` 2020 → 1890），工具条显示当前服务端与规则条数；规则详情仍是弹窗（表格「详情」按钮），实时速率采样只在弹窗打开期间进行
+- 服务端列表从内网穿透页整体并入公网服务端页：服务端表单 / 服务端日志 / 服务端详情 / frps.toml 同源配置四个弹窗随列表一起迁移；内网穿透页不再持有服务端的增删改与启停
+- 内网穿透页规则区在「尚未配置服务端」时给出指向「公网服务端」页的空态（原来只剩一个被禁用的「添加规则」按钮）
+- 日志中心「公网 FRP」页签改为时间倒序（新日期在前），分页与筛选跟着一致
+
+### 变更
+
+- 「Agent 管理」跳转改为深链：内网穿透页点某台服务端直接落到该台详情（`/frp-agent?server=<id>`，id 不存在时回落为第一台）
+- 服务端列表不再按「已配 Agent / SSH」过滤——未配的服务端也要能在本页编辑与删除
+- 版本号提升到 1.2.6（版本单一来源仍是根目录 `VERSION`）
+
 ## [v1.2.5] - 2026-09-24
 
 ### 新增
diff --git a/VERSION b/VERSION
index c813fe1..3c43790 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-1.2.5
+1.2.6
diff --git a/docs/frp-server-list-merge-plan.md b/docs/frp-server-list-merge-plan.md
new file mode 100644
index 0000000..07b4bab
--- /dev/null
+++ b/docs/frp-server-list-merge-plan.md
@@ -0,0 +1,228 @@
+# FRP 服务端列表与公网 Agent 页合并方案
+
+> 问题：`/frp`（内网穿透）页里的「公网服务端」列表，是否应该并入 `/frp-agent`（公网 Agent）页——像 DDNS 页那样「列表 + 详情同页」？
+>
+> 依据：本仓库 `web/src/layouts/AppLayout.vue`、`web/src/router/index.ts`、`web/src/views/{FrpView,AgentView,DdnsView,ProxyRemoteView}.vue`（读代码确认，非推测）。
+> 更新日期：2026-09-24
+
+---
+
+## 一、现状盘点
+
+### 1.1 侧边栏与三个 FRP 相关页
+
+`web/src/layouts/AppLayout.vue:171-179` 的菜单顺序：
+
+| 菜单 | 路由名 | 视图 | 页面职责 |
+| --- | --- | --- | --- |
+| 内网穿透 | `frp` | `FrpView.vue` | 客户端状态 + **公网服务端列表（增删改查 + 启停/测速/校验/日志）** + 穿透规则列表 + 8 个弹窗 |
+| 公网 Agent | `frp-agent` | `AgentView.vue` | **单个服务端**的 agent 详情：运行状态 / 环境与依赖（含 VPS 资源、VPS 证书）/ frps 控制 / Agent 生命周期（SSH）/ 输出与日志 |
+| 公网反代 | `public-proxy` | `ProxyRemoteView.vue` | 单个服务端的公网反代台账（部署 / 移除 / 健康 / 漂移） |
+
+### 1.2 重叠矩阵（同一件事现在有几处入口）
+
+| 能力 | 内网穿透页 | 公网 Agent 页 | 公网反代页 | 说明 |
+| --- | --- | --- | --- | --- |
+| 服务端增删改 | ✅ 列表 + 弹窗表单 | ❌ | ❌ | 唯一入口在 `/frp` |
+| 服务端列表（名称/主机/端口/延迟/位置/配置/启动状态） | ✅ `n-data-table` 8 列 | ❌（只有顶部下拉选服务端） | ❌（顶部下拉） | **同一份数据的两种呈现** |
+| 启动 / 停止 frpc | ✅ 行内按钮 | ❌ | ❌ | |
+| 查看服务端详情 | ✅ 弹窗（代理/服务器状态/诊断） | ✅ 整页 | ❌ | **内容重叠** |
+| frps 安装 / 启停 / 版本 | ❌ | ✅ | ❌ | |
+| Agent 安装 / 升级 / 卸载 / SSH 诊断 | ❌（只有「Agent 管理」跳转按钮） | ✅ | ❌ | |
+| Agent 环境探测 / Nginx 安装 | ❌ | ✅ | ❌ | |
+| 穿透规则 | ✅ | ❌ | ❌ | 内网穿透页的核心 |
+| 公网反代规则 | ❌ | ❌ | ✅ | |
+
+**结论**：服务端本身（连接配置 + 启停）归 `/frp`，而「这台服务端上的 agent 与 frps 状态」归 `/frp-agent`。两页通过 `/frp` 列表行内的「Agent 管理」按钮跳转，跳转后 AgentView 用**顶部下拉**重新选一遍服务端——**同一个对象被选两次**，这是用户感到割裂的根源。
+
+### 1.3 现有跳转关系（合并时要一并处理）
+
+| 来源 | 目标 | 位置 |
+| --- | --- | --- |
+| `/frp` 服务端行「Agent 管理」 | `/frp-agent` | `FrpView.vue` `serverColumns` 操作列 |
+| `/frp` 穿透规则区（未配置服务端时的空态） | 本页「添加服务端」 | `FrpView.vue` |
+| `/public-proxy` 空态「尚未配置 FRP 服务端」 | `/frp` | `ProxyRemoteView.vue` |
+| `/frp-agent` Nginx 卡「去『公网反代』处理」 | `/public-proxy` | `AgentView.vue` |
+| `/ddns` 顶部提示「FRP 内网穿透已启用」 | `/frp` | `DdnsView.vue` |
+
+---
+
+## 二、DDNS 页作为参照：它是什么模式
+
+`DdnsView.vue` 的结构（`PageHeader` → `stats-row` → 详情卡 → 弹窗）：
+
+- **一页承载「列表 + 选中项详情」**：页面顶部是全局动作（「全部刷新」）与 5 张统计卡（外网 IP 检测 / 任务总数 / 正常 / 异常 / 最后同步），下面直接是**当前任务的详情分区**（`detail-section` 卡片），新增/编辑走弹窗。
+- 也就是说：**用户不需要在「列表页」和「详情页」之间跳**，选中的对象在同一页内切换。
+
+对照到 FRP：`/frp-agent` 现在已经完全是「单对象详情页」的形态（顶部下拉选服务端 + 分区详情），**缺的正是 DDNS 那样的列表**——把 `/frp` 的服务端列表搬进来，形态立刻与 DDNS 一致，而且顶部下拉可以退化为「列表选中行」的结果（或保留下拉作为快捷切换）。
+
+---
+
+## 三、三个方案对比
+
+| 方案 | 做法 | 优点 | 缺点 | 工作量 |
+| --- | --- | --- | --- | --- |
+| **A（推荐）** | 把服务端列表并入 `/frp-agent`：页面改为「统计区 + 服务端列表 + 选中服务端的 agent 详情」；`/frp` 只保留客户端状态与穿透规则 | 与 DDNS 形态一致；服务端管理只在一处；列表与详情同屏，不再「选两次」；`/frp` 回归「穿透规则」本职 | 服务端表单弹窗（含 frps 选项 / 远程 / Agent / SSH 四个分栏）要搬到 AgentView；两页文案与跳转需同步 | 中，约 1–1.5 天 |
+| **B** | 反向合并：把 agent 详情塞进 `/frp` 行内的「查看」弹窗 | 不动列表位置 | AgentView 现有 5 个分区 + 2 张并排卡 + 日志区，弹窗塞不下；等于推倒已成型页面重做 | 大且不划算 |
+| **C** | 不动结构，只补深链：「Agent 管理」跳转带 `?server=<id>`，AgentView 读 query 自动选中 | 改动最小（约 0.5h）；消除「再选一次」的割裂感 | 仍是两个页面，服务端管理仍分散 | 小 |
+
+**推荐 A，并把 C 作为 A 的第一步**：即使 A 中途暂停，深链带来的收益已经落地，且不会与 A 的后续步骤冲突。
+
+---
+
+## 四、方案 A 详细设计
+
+### 4.1 目标页面结构（`/frp-agent`，参照 DDNS）
+
+```
+PageHeader「公网服务端」（原「公网 Agent」）
+  actions: [选择服务端 ▾]（快捷切换，选项与列表一致）  [刷新]
+├─ stats-row：沿用现有 5 张卡（Agent 状态 / Nginx / frps 服务 / 反代路由 / 端口监听）
+├─ 服务端列表（从 /frp 迁入）
+│    n-data-table 8 列：名称 / 主机 / 端口 / 延迟 / 位置 / 配置 / 启动状态 / 操作
+│    操作列：启动·停止 · 查看 · 日志 · 测速 · 校验 · 编辑 · 删除
+│            （去掉「Agent 管理」——它就在本页；行点击即选中）
+├─ 选中服务端的详情（现有 AgentView 分区原样搬过来）
+│    环境与依赖（Fonu Agent / Nginx / frps 运行时 / VPS 资源 / VPS 证书）
+│    frps 控制 + Agent 生命周期（SSH）
+│    输出与日志
+└─ 弹窗：服务端表单（新增/编辑）、服务端日志、服务端详情、frps 同源配置、导出、FRP 应用配置
+```
+
+`/frp`（内网穿透）保留并收敛为：
+
+- 4 张状态卡（客户端状态 / 启用规则 / frpc 版本 / 最近应用）
+- 穿透规则列表 + 规则相关弹窗（规则表单、规则详情、FRP 应用配置）
+- 空态：「尚未配置服务端」→ 改为链接到 `/frp-agent`（原来是本页直接开「添加服务端」弹窗）
+
+### 4.2 数据流与选中态
+
+- 列表数据 `api.listFrpServers()`：两页现在各自拉一次，迁入后只拉一次（AgentView 本来就在拉）。
+- 选中态：沿用 AgentView 的 `selectedId`；新增**行点击选中 + 选中行高亮**。
+- 深链：`/frp-agent?server=<id>` → 初始化时读 query 决定 `selectedId`（即方案 C，作为第一步落地）。
+- `/frp` 的「Agent 管理」跳转改为 `router.push({ name: 'frp-agent', query: { server: id } })`。
+- 列表为空：整页 EmptyState（AgentView 已有）+「添加服务端」按钮直接开弹窗（不再跳去 `/frp`）。
+
+### 4.3 弹窗归属（关键决定）
+
+| 弹窗 | 现在位置 | 迁移后 | 判据 |
+| --- | --- | --- | --- |
+| 服务端表单（新增 / 编辑） | `/frp` | `/frp-agent` | 服务端的「家」在这里；`/frp` 不再需要 |
+| 服务端日志 / 服务端详情 | `/frp` | `/frp-agent` | 都是单服务端视角，与详情区同屏更好 |
+| frps 同源配置 / 导出脱敏配置 | `/frp` | `/frp-agent` | 依赖服务端的 frps 选项 → 属服务端视角 |
+| 规则表单 / 规则详情 / FRP 应用配置 | `/frp` | 不动 | 与穿透规则绑定 |
+
+实现时以「弹窗依赖的是**服务端**还是**规则**」为判据，不要按文件位置机械搬运。
+
+### 4.4 命名与文案
+
+- 页面标题与菜单：`公网 Agent` → **`公网服务端`**（或「公网服务端（Agent）」，二者都行，推荐前者，因为它现在同时管服务端与 agent）。
+- **路由名 `frp-agent` 与路径 `/frp-agent` 保持不变**，避免破坏深链、侧边栏高亮与已有跳转；只改显示文案。
+- `/frp` 的「公网服务端」卡片整体移除，其 `subtitle`（"可添加并管理多个 frps 服务端连接"）文案迁到新页描述。
+
+### 4.5 空态与降级
+
+- 没有服务端：`/frp-agent` 显示 EmptyState + 「添加服务端」；`/frp` 规则区空态改为「先去『公网服务端』添加服务端」。
+- 服务端未配 agent/SSH：详情区沿用现有降级（`agentStatusOk`、状态告警），列表「配置」列沿用现有 TLS/Token 标签。
+- agent 版本过低：沿用 404/405 降级文案，无需新逻辑。
+
+---
+
+## 五、迁移步骤（四步，每步独立可交付 / 可回滚）
+
+| 步骤 | 内容 | 交付标准 | 预估 |
+| --- | --- | --- | --- |
+| **步 1 · 深链** | `/frp` 的「Agent 管理」改为 `router.push({ name: 'frp-agent', query: { server: id } })`；`AgentView` 初始化读 query 决定 `selectedId` | 从任意一行点进 Agent 页，直接落在该服务端（不再需要再选一次） | 0.5h |
+| **步 2 · 列表迁入** | 把 `serverColumns`、列表卡片、行操作、服务端表单 / 服务端日志 / 服务端详情弹窗整体搬到 `AgentView`；行点击即选中并高亮；`FrpView` 删除该卡片与相关弹窗、`serverColumns`、`openServerModal` 等 | 新增 / 编辑 / 启停 / 删除 / 测速 / 校验 / 日志全部在新页可用；`/frp` 只剩状态卡 + 规则 | 0.5 天 |
+| **步 3 · 收尾** | 菜单与页面标题改「公网服务端」；`/frp` 规则区空态改指向新页；`ProxyRemoteView` / `DdnsView` 里「去内网穿透页添加服务端」这类文案改指向 `/frp-agent`（指向规则页的链接不动）；核对侧边栏顺序（内网穿透 → 公网服务端 → 公网反代） | 所有入口文案自洽 | 0.25 天 |
+| **步 4 · 清理** | 删除迁移后残留的死样式与死变量（如 `/frp` 里只服务端用到的 `.server-detail*`、`.frp-detail-card` 等）；`grep` 校验无残留引用 | `vue-tsc` + `vite build` 通过，grep 旧类名/旧函数名为 0 | 0.25 天 |
+
+**实施状态（2026-09-24）**：**步 1、步 2 已完成**。
+
+- **步 1 · 深链**：`FrpView.vue` 的「Agent 管理」改为 `{ name: 'frp-agent', query: { server: String(row.id) } }`；`AgentView.vue` 新增 `useRoute` 并在 `selectedId` 初始化时读 `?server=<id>`（非法 id 由 `load()` 回落为第一台）。
+- **步 2 · 列表迁入**：服务端列表卡片、服务端表单 / 日志 / 详情 / frps 同源配置四个弹窗、`serverColumns` 与全部服务端脚本、相关样式整体迁入 `AgentView.vue`（971 → 1935 行），`FrpView.vue` 删除同批代码（2189 → 1425 行）。实施要点：
+  - 行点击即选中（`serverRowProps` + `.frp-server-row--active` 高亮），与顶部下拉共用 `selectedId`；操作列去掉「Agent 管理」，单元格加 `stopPropagation` 避免点按钮时误选。
+  - 列表改为展示**全部**服务端（原先按 `agent_configured || ssh_configured` 过滤），顶部下拉同步放开过滤——否则未配 Agent 的服务端无法在本页编辑 / 删除。
+  - 列表为空时整页 EmptyState + 「添加服务端」直接开表单（不再跳去 `/frp`）；`/frp` 规则区在「无服务端」时给出指向 `/frp-agent` 的空态，避免按钮被禁用后无处可去。
+  - 服务端表单里的「打开管理面板」改为「查看服务端详情」（关弹窗 + 页内选中）；详情弹窗「客户端」一行所需的 `runtime` 由新增的 `loadRuntimeVersion()` 拉取。
+  - 详情弹窗「代理」表依赖的 `proxyPublicEndpoint` 在 `AgentView` 本地补了一份（原属规则侧）；表单里的「下发 frps 配置」复用 `AgentView` 既有的 `run('push-config', …)` 版本，输出进「输出与日志」。
+  - **未迁移**：`/frp` 的「查看脱敏配置」弹窗（`showExport`）留在原页——触发按钮在「穿透规则」卡片头部，导出物是脱敏 frpc.toml，属客户端 / 规则视角。这是按 §4.3 自己的判据（弹窗依赖服务端还是规则）做的取舍，与 §4.3 表格里「导出脱敏配置 → 迁走」一行不同。
+- 验证：`vue-tsc --noEmit` 0 错误、`vite build` 通过、`FrpView.vue` 内旧标识符 grep 为 0、全仓无 0 字节源文件、`bin\fonu.exe` 已重建。
+- **踩坑记录（scoped 样式不随模板搬迁）**：`.frp-proxy-modal` 系列规则在 `FrpView.vue` 里分散在多处——1250–1260 的弹窗外壳、1263–1282 的说明栏 / 高级折叠 / 服务端选项区。只搬前一段时，说明栏失去 `width: 300px; flex-shrink: 0`，在 `display: flex` 的弹窗里按内容宽度膨胀，把 `flex: 1` 的表单列挤成一条，表现为标题重叠、页签一字一行。**步 4 清理时注意**：`.proxy-modal*` / `.frp-proxy-modal*` 在 `/frp` 仍被规则表单弹窗使用，不能删。
+- **布局调整（2026-09-24，用户要求对齐 DDNS 页）**：`/frp-agent` 改为 DDNS 那样的**左列表 + 右详情**——`.agent-layout { grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) }`，≤1100px 收成一列；侧栏结构照抄 DDNS 的 `.ddns-layout` / `.task-sidebar`（类名换成本页语义的 `.server-sidebar*` / `.server-item*`）。
+  - 原 8 列 `n-data-table` 换成紧凑列表项：名称 + 启动状态标签 + `主机:端口` + 延迟 / 位置 + TLS / Token / Agent / SSH 标签；行点击即选中（`--active` 高亮）。
+  - 行内操作移到右侧工具条 `.server-toolbar`（启动·停止 · 查看 · 日志 · 测速 · 校验 · 编辑 · 删除），标题旁显示当前服务端名与端点。
+  - `serverColumns` / `serverRowProps` / 顶部「选择服务端」下拉及其 `serverOptions` 一并删除（左侧列表即选择器）；页面标题改「公网服务端」。
+  - 与 §4.1 里「统计区 → 列表 → 详情」的**堆叠**结构不同，这是用户确认后的取舍；右侧内容顺序不变（状态提示 → 公网反代入口 → ① 运行状态 → ② 环境与依赖 → ③④ → ⑤ 输出与日志）。
+- **`/frp` 布局调整（2026-09-24，用户两次纠正后定稿）**：`/frp` 改成**左：服务端列表 / 右：该服务端的穿透规则**——左侧 `.server-sidebar`（名称 + `boot_status` 状态标签 + `主机:端口` + 规则数 / 启用数 + TLS / Token / Agent / SSH 标签，点行即切换服务端）；右侧 `.rule-pane`（头部显示当前服务端与规则条数，含「查看脱敏配置 / 管理该服务端（深链到 `/frp-agent?server=<id>`）/ 添加规则」）+ **原来的穿透规则表格**（恢复 `columns`，`:data="serverProxies"` 按选中服务端过滤；按用户要求删掉冗余的「服务端」列，`:scroll-x` 2020 → 1890）；规则详情回到弹窗（表格「详情」按钮 → `openProxyDetail`，速率采样随弹窗开关）。顶部 4 张客户端状态卡保持整宽。左侧列表的状态标签只用列表接口就带的 `boot_status`，不为此重新引入已迁走的 `serverDiagnostics` / `serverStartupText`。
+- **步 3（文案与入口收尾）、步 4（死样式清理）待做**。
+
+### 5.1 步 2 执行清单（含 `FrpView.vue` 代码锚点）
+
+> 行号为 2026-09-24 快照；执行时以标识符为准（行号仅用于快速定位）。
+
+**模板（迁出 → `AgentView.vue`）**
+
+| 片段 | 行 | 备注 |
+| --- | --- | --- |
+| 「公网服务端」卡片（含 `serverColumns` 驱动的 `n-data-table`） | 53–77 | 卡片本身整块搬走 |
+| 服务端表单弹窗 | 约 350–500 | 四个分栏；内含「公网 Agent 管理」段（219–236），其中 `<router-link to="/frp-agent">` 迁入后应改为**页面内选中** |
+| 服务端日志弹窗 | 512–528 | |
+| 服务端详情弹窗 | 529–564 | `preset="card"` + `.frp-detail-card` |
+| 导出脱敏配置弹窗 | 565–576 | 触发点在 81 行按钮 |
+| frps 同源配置弹窗 | 580–600 | 含 P1-3 的「比对 VPS 实际文件」 |
+
+**脚本（迁出）**
+
+- 状态：`servers`(924)、`serverDiagnostics`(932)、`testingId`(935)、`agentActionId`(937)、`savingServer`(939)、`showServerModal`(941)、`showExport`(943)、`showServerDetail`(946)、`showFRPSConfig`(949)、`frpsConfigContent`(950)、`frpsConfigTarget`(992)、`serverFormTab`(996)、`exportContent`(997)、`editingServer`(1015)、`viewingServer`(1016)、`serverForm`(1037)、`showServerLogs`(1408)
+- 函数：`openServerModal`(1370)、`openServerDetail`(1381)、`openServerLogs`(1413)、`saveServer`(1510)、`testAgent`(1534)、`pushAgentConfig`(1541)、`startServer`(1599)、`stopServer`(1610)、`testServer`(1772)、`openFRPSConfig`(1797)
+- `serverColumns`（约 1160–1200，其中 1180 行的「Agent 管理」`RouterLink` 迁入后删除）
+- 一并迁出的辅助：`serverStartupText` / `latencyOf` / `buildServerPayload`（内联在 `saveServer`）/ `ConfiguredSecretField` 组件与相关图标导入
+
+**留在 `/frp`**：4 张状态卡、穿透规则列表、规则表单 / 规则详情 / FRP 应用配置等规则侧弹窗与逻辑。
+
+**执行注意**
+
+1. 迁出后 grep `FrpView.vue` 里旧标识符（`serverForm` / `showServerModal` / `serverColumns` / `openServerLogs` / `frpsConfigTarget` / `showExport` / `editingServer` / `viewingServer`）应为 **0**；
+2. `busy` / `run()` / `message` 若被规则侧共用，**不要整体迁走**——保留在 `FrpView` 或按需抽成 composable；
+3. 迁入 `AgentView` 后：行点击 = `selectedId = row.id`，选中行加高亮类；操作列去掉「Agent 管理」；
+4. 迁完后 `/frp` 的规则区空态改指向 `/frp-agent`（步 3）。
+
+---
+
+## 六、影响面清单
+
+- **前端**：`FrpView.vue`（删列表与 4 个服务端弹窗 + 死样式）、`AgentView.vue`（加列表与弹窗 + 行选中）、`AppLayout.vue`（菜单文案）、`DdnsView.vue` / `ProxyRemoteView.vue`（指向服务端配置的文案与链接）、`router/index.ts`（**不改**，仅确认）。
+- **后端**：**零改动**——所有接口都已存在且两页共用（`listFrpServers` / `createFrpServer` / `updateFrpServer` / `deleteFrpServer` / `startFrpServer` / `stopFrpServer` / 诊断与日志等）。
+- **文档**：`docs/agent-view-design-v2.md` 若把「公网 Agent」定义为「单服务端详情页」，需补一句「现已并入服务端列表」；本文在实施完成后标注状态。
+
+---
+
+## 七、风险与回滚
+
+| 风险 | 说明 | 应对 |
+| --- | --- | --- |
+| 弹窗搬迁漏掉入口 | 某个弹窗可能不止一个触发点 | 迁移前对每个弹窗 `grep` 触发点逐个确认归属；搬迁后 grep 旧文件确认无残留引用 |
+| `selectedId` 语义冲突 | 两页各有一份选中态 | 迁入后 `/frp` 不再持有 `selectedId`，并确认没有别的逻辑依赖它 |
+| 首屏变慢 | 列表 + 状态 + 资源 + 证书并发请求 | 列表与状态走同一轮 `Promise.all`，资源与证书仍单独异步（沿用现状） |
+| 深链指向不存在的 id | 手工改 URL 或服务端已删除 | 回落为列表第一个（AgentView 现有逻辑已是「不在列表就取第一个」） |
+| 回滚 | 步 2 是主要风险点 | 四步各自独立提交：步 1/2/3 可分别 revert，不会互相牵连 |
+
+---
+
+## 八、验收清单
+
+- `/frp-agent` 一页内完成：选服务端（列表行或顶部下拉）→ 看 Agent / Nginx / frps / VPS 资源 / VPS 证书 → 启停 frpc → 编辑 / 删除服务端 → 看服务端日志、详情与 frps 同源配置。
+- `/frp` 只剩客户端状态卡 + 穿透规则；规则的新增 / 编辑 / 应用 / 导出不受影响。
+- 深链：从任意页用 `?server=<id>` 直达该服务端；id 不存在时不报错。
+- 文案自洽：菜单、页面标题、空态、跨页链接都指向 `/frp-agent`。
+- 构建：`vue-tsc --noEmit` 0 错误、`vite build` 通过、无残留死代码（grep 旧类名与旧函数名）。
+
+---
+
+## 九、明确不做
+
+1. **不把「穿透规则」也搬进 AgentView**：规则属于内网穿透页，且 `/frp` 需要保留「状态卡 + 规则」以维持「配置 → 应用 → 查看」的闭环。
+2. **不把 `/public-proxy` 的反代台账并进来**：它虽按服务端维度，但属另一业务，且已有统计区 + 台账 + 漂移清单的成熟形态。
+3. **不改路由路径与路由名**（只改显示文案），避免破坏深链、侧边栏高亮与已有跳转。
+4. **不动后端接口**：本次是纯前端信息架构调整。
diff --git a/web/src/views/AgentView.vue b/web/src/views/AgentView.vue
index 80252fd..c9589b0 100644
--- a/web/src/views/AgentView.vue
+++ b/web/src/views/AgentView.vue
@@ -1,13 +1,6 @@
 <template>
-  <PageHeader title="公网 Agent" :description="headerDescription">
+  <PageHeader title="公网服务端" :description="headerDescription">
     <template #actions>
-      <n-select
-        v-model:value="selectedId"
-        :options="serverOptions"
-        placeholder="选择公网服务端"
-        class="agent-select"
-        :disabled="servers.length === 0"
-      />
       <n-button :loading="statusLoading" :disabled="!server" @click="refreshAll({ silent: false })">
         <template #icon><n-icon :component="RefreshOutline" /></template>
         刷新
@@ -21,14 +14,75 @@
     <EmptyState
       v-if="servers.length === 0"
       title="尚未配置 FRP 服务端"
-      description="先在「内网穿透」页添加公网服务端并保存 SSH 信息，再回到本页管理 Agent。"
+      description="添加公网 VPS 的 frps 地址与认证 Token；填好「公网 Agent 管理」区的 Agent 地址与 SSH 信息后，可直接在本页安装与管理 Agent。"
     >
       <template #action>
-        <router-link to="/frp"><n-button type="primary">去内网穿透页</n-button></router-link>
+        <n-button type="primary" @click="openServerModal()">添加服务端</n-button>
       </template>
     </EmptyState>
 
     <template v-else-if="server">
+      <!-- 左列表 + 右详情：与 DDNS 页（.ddns-layout / .task-sidebar）同构 -->
+      <div class="agent-layout">
+        <aside class="server-sidebar">
+          <div class="server-sidebar__head">
+            <div class="server-sidebar__head-row">
+              <h3 class="server-sidebar__title">服务端列表</h3>
+              <n-button size="small" type="primary" @click="openServerModal()">
+                <template #icon><n-icon :component="AddOutline" /></template>
+                添加服务端
+              </n-button>
+            </div>
+          </div>
+          <div class="server-sidebar__list">
+            <button
+              v-for="item in servers"
+              :key="item.id"
+              type="button"
+              class="server-item"
+              :class="{ 'server-item--active': item.id === selectedId }"
+              @click="selectedId = item.id"
+            >
+              <div class="server-item__top">
+                <span class="server-item__name">{{ item.name }}</span>
+                <span :title="serverStateTooltip(item)">
+                  <n-tag size="tiny" :bordered="false" :type="serverStartupType(item)">{{ serverStartupText(item) }} · {{ connectionStateText(item) }}</n-tag>
+                </span>
+              </div>
+              <div class="server-item__endpoint mono">{{ item.server_addr }}:{{ item.server_port }}</div>
+              <div class="server-item__meta">
+                <span :title="latencyDetail(item)"><n-icon :component="FlashOutline" /> {{ latencyText(item) }}</span>
+                <span><n-icon :component="LocationOutline" /> {{ locationText(item) }}</span>
+              </div>
+              <div class="server-item__tags">
+                <n-tag size="tiny" :bordered="false" :type="item.tls_enabled ? 'success' : 'warning'">TLS</n-tag>
+                <n-tag size="tiny" :bordered="false" :type="item.has_token ? 'success' : 'error'">Token</n-tag>
+                <n-tag v-if="item.agent_configured" size="tiny" :bordered="false" type="info">Agent</n-tag>
+                <n-tag v-if="item.ssh_configured" size="tiny" :bordered="false" type="info">SSH</n-tag>
+              </div>
+            </button>
+          </div>
+        </aside>
+
+        <div class="agent-detail">
+          <!-- 选中服务端的操作：原列表行内操作移到右侧工具条 -->
+          <div class="server-toolbar">
+            <div class="server-toolbar__info">
+              <span class="server-toolbar__name">{{ server.name }}</span>
+              <span class="server-toolbar__endpoint mono">{{ server.server_addr }}:{{ server.server_port }}</span>
+            </div>
+            <div class="server-toolbar__actions">
+              <n-button v-if="server.boot_status === 'running'" size="small" type="error" ghost :loading="serverStartingId === server.id" @click="stopServer(server)">停止</n-button>
+              <n-button v-else size="small" type="success" ghost :loading="serverStartingId === server.id" @click="startServer(server)">启动</n-button>
+              <n-button size="small" quaternary @click="openServerDetail(server)">查看</n-button>
+              <n-button size="small" quaternary @click="openServerLogs(server)">日志</n-button>
+              <n-button size="small" quaternary :loading="measuringId === server.id" @click="measureServer(server)">测速</n-button>
+              <n-button size="small" quaternary :loading="testingId === server.id" @click="testServer(server)">校验</n-button>
+              <n-button size="small" quaternary @click="openServerModal(server)">编辑</n-button>
+              <n-button size="small" quaternary type="error" @click="confirmDeleteServer(server)">删除</n-button>
+            </div>
+          </div>
+
       <!-- 状态提示：互斥，最多一条 -->
       <n-alert v-if="statusAlert" :type="statusAlert.type" :bordered="false" class="page-alert">
         <div class="page-alert__body">
@@ -266,6 +320,8 @@
           </n-tabs>
         </div>
       </FonuCard>
+        </div>
+      </div>
 
       <!-- 配置查看弹窗：展示即将下发的 frps.toml -->
       <n-modal v-model:show="configModal" style="width: 640px">
@@ -291,24 +347,328 @@
       </n-modal>
     </template>
   </template>
+
+  <n-modal
+    v-model:show="showServerModal"
+    :mask-closable="false"
+    transform-origin="center"
+  >
+    <div class="proxy-modal frp-proxy-modal">
+      <div class="proxy-modal__form">
+        <div class="proxy-modal__header">
+          <h3 class="modal-title">{{ editingServer ? '编辑服务端' : '添加服务端' }}</h3>
+          <n-button size="small" quaternary @click="showServerModal = false">
+            <template #icon><n-icon :component="CloseOutline" /></template>
+          </n-button>
+        </div>
+        <div class="proxy-modal__tabbar">
+          <button type="button" class="proxy-modal__tab" :class="{ 'proxy-modal__tab--active': serverFormTab === 'basic' }" @click="serverFormTab = 'basic'">基础配置</button>
+          <button type="button" class="proxy-modal__tab" :class="{ 'proxy-modal__tab--active': serverFormTab === 'advanced' }" @click="serverFormTab = 'advanced'">高级配置</button>
+          <button type="button" class="proxy-modal__tab" :class="{ 'proxy-modal__tab--active': serverFormTab === 'remote' }" @click="serverFormTab = 'remote'">远程管理</button>
+        </div>
+        <div class="proxy-modal__scroll">
+          <n-form label-placement="top" class="proxy-modal__pane" @submit.prevent="saveServer">
+            <div v-show="serverFormTab === 'basic'" class="frp-server-modal__basic">
+      <section class="form-section">
+        <h3><n-icon :component="InformationCircleOutline" /> 基本信息</h3>
+        <div class="form-grid form-grid--wide">
+          <n-form-item label="服务端名称" required><n-input v-model:value="serverForm.name" placeholder="例如：生产服务器" /></n-form-item>
+          <n-form-item label="主机地址" required><n-input v-model:value="serverForm.server_addr" placeholder="例如：frps.example.com" /></n-form-item>
+          <n-form-item label="端口" required><n-input-number v-model:value="serverForm.server_port" :min="1" :max="65535" /></n-form-item>
+        </div>
+      </section>
+
+      <section class="form-section">
+        <h3><n-icon :component="LockClosedOutline" /> 认证</h3>
+        <n-form-item label="认证方式" required>
+          <n-radio-group v-model:value="serverForm.options.auth_method" name="auth-method">
+            <n-radio-button value="none">无</n-radio-button>
+            <n-radio-button value="token">令牌</n-radio-button>
+            <n-radio-button value="oidc">OIDC（开放身份连接）</n-radio-button>
+          </n-radio-group>
+        </n-form-item>
+        <n-form-item label="用户"><n-input v-model:value="serverForm.options.user" placeholder="例如：admin" /></n-form-item>
+        <n-form-item v-if="serverForm.options.auth_method === 'token'" :show-label="false" :show-feedback="false">
+          <ConfiguredSecretField
+            v-model="serverForm.token"
+            label="令牌"
+            :configured="!!editingServer?.has_token"
+            placeholder="请输入与 frps 一致的令牌"
+          />
+        </n-form-item>
+        <template v-if="serverForm.options.auth_method === 'oidc'">
+          <p class="form-hint">OIDC（OpenID Connect，开放身份连接）会向身份提供商申请访问令牌，再用于连接 FRP 服务端。</p>
+          <div class="form-grid">
+            <n-form-item label="客户端 ID（Client ID）" required><n-input v-model:value="serverForm.options.oidc_client_id" placeholder="身份提供商分配的客户端标识" /></n-form-item>
+            <n-form-item :show-label="false" :show-feedback="false">
+              <ConfiguredSecretField
+                v-model="serverForm.oidc_client_secret"
+                label="客户端密钥（Client Secret）"
+                :configured="!!editingServer?.has_oidc_client_secret"
+                placeholder="请输入客户端密钥"
+              />
+            </n-form-item>
+            <n-form-item label="令牌端点（Token Endpoint）" required><n-input v-model:value="serverForm.options.oidc_token_endpoint_url" placeholder="https://issuer.example.com/token" /></n-form-item>
+            <n-form-item label="受众（Audience）"><n-input v-model:value="serverForm.options.oidc_audience" placeholder="可选，用于限定令牌的目标服务" /></n-form-item>
+            <n-form-item label="额外权限范围（Scope）"><n-input v-model:value="serverForm.options.oidc_scope" placeholder="例如：openid profile" /></n-form-item>
+            <n-form-item label="OIDC 请求代理地址"><n-input v-model:value="serverForm.options.oidc_proxy_url" placeholder="http://user:pass@192.168.1.1:8080" /></n-form-item>
+          </div>
+          <div class="switch-row"><span>跳过 OIDC TLS 校验</span><n-switch v-model:value="serverForm.options.oidc_insecure_skip_verify" /></div>
+        </template>
+      </section>
+
+      <section class="form-section">
+        <h3><n-icon :component="DocumentOutline" /> 描述</h3>
+        <n-form-item label="描述"><n-input v-model:value="serverForm.options.remark" type="textarea" :rows="2" placeholder="添加一些关于此服务器的备注" /></n-form-item>
+      </section>
+            </div>
+            <div v-show="serverFormTab === 'remote'" class="frp-server-modal__remote">
+      <section class="form-section">
+        <h3><n-icon :component="SwapHorizontalOutline" /> frps vhost 反代端口</h3>
+        <p class="form-hint">frps 的 vhostHTTPPort / vhostHTTPSPort，即 Nginx 反代的回源端口（proxy_pass http://127.0.0.1:端口）。修改后需「下发 frps 配置」并重启 frps，且重新部署各规则的反代。留空用默认 8080 / 8443。</p>
+        <div class="form-grid">
+          <n-form-item label="HTTP 回源端口"><n-input-number v-model:value="serverForm.options.vhost_http_port" :min="1" :max="65535" placeholder="默认 8080" /></n-form-item>
+          <n-form-item label="HTTPS 回源端口"><n-input-number v-model:value="serverForm.options.vhost_https_port" :min="1" :max="65535" placeholder="默认 8443" /></n-form-item>
+        </div>
+        <div class="form-grid">
+          <n-form-item label="子域名根（subDomainHost）"><n-input v-model:value="serverForm.options.sub_domain_host" placeholder="例如：frps.example.com，规则填 subdomain 后生成为 sub.frps.example.com" /></n-form-item>
+          <n-form-item label="tcpmux 监听端口"><n-input-number v-model:value="serverForm.options.tcpmux_http_connect_port" :min="1" :max="65535" placeholder="存在 tcpmux 规则时必填" /></n-form-item>
+        </div>
+        <div class="form-grid">
+          <n-form-item label="端口白名单（allowPorts）"><n-input v-model:value="serverForm.options.allow_ports" placeholder="如 6000,6005-6010,7000-8000；留空不限制" /></n-form-item>
+          <n-form-item label="每客户端端口上限"><n-input-number v-model:value="serverForm.options.max_ports_per_client" :min="0" :max="65535" placeholder="0 表示不限" /></n-form-item>
+        </div>
+        <div class="form-grid">
+          <n-form-item label="自定义 404 页面（VPS 路径）"><n-input v-model:value="serverForm.options.custom_404_page" placeholder="例如 /var/www/404.html；留空用默认" /></n-form-item>
+          <div class="switch-row"><span>强制 TLS（frps 只接受 TLS 连接）</span><n-switch v-model:value="serverForm.options.tls_force" /></div>
+        </div>
+        <div class="switch-row"><span>frps 写文件日志（/var/log/frps.log）</span><n-switch v-model:value="serverForm.options.frps_log_to_file" /></div>
+        <n-form-item v-if="serverForm.options.frps_log_to_file" label="日志保留天数"><n-input-number v-model:value="serverForm.options.frps_log_max_days" :min="1" :max="365" placeholder="默认 3" class="narrow-input" /></n-form-item>
+      </section>
+
+      <section class="form-section">
+        <h3><n-icon :component="ServerOutline" /> frps 管理接口</h3>
+        <p class="form-hint">用于 Fonu 拉取穿透规则的实时连接与流量信息；需在 frps 的 frps.toml 中开启 webServer（dashboard），与 frpc 连接用的令牌无关。</p>
+        <div class="form-grid">
+          <n-form-item label="管理地址"><n-input v-model:value="serverForm.options.dashboard_addr" placeholder="frps 机器的 IP 或域名，留空则不采集流量" /></n-form-item>
+          <n-form-item label="管理端口"><n-input-number v-model:value="serverForm.options.dashboard_port" :min="0" :max="65535" placeholder="例如：7500" /></n-form-item>
+        </div>
+        <div class="form-grid">
+          <n-form-item label="管理用户"><n-input v-model:value="serverForm.options.dashboard_user" placeholder="webServer.user，未启用认证可留空" /></n-form-item>
+          <n-form-item :show-label="false" :show-feedback="false">
+            <ConfiguredSecretField
+              v-model="serverForm.dashboard_password"
+              label="管理密码"
+              :configured="!!editingServer?.dashboard_has_pwd"
+              placeholder="webServer.password"
+            />
+          </n-form-item>
+        </div>
+        <n-button v-if="editingServer?.dashboard_has_pwd" size="small" quaternary type="error" @click="serverForm.clear_dashboard_password = true">清除管理密码</n-button>
+      </section>
+
+      <section class="form-section">
+        <h3><n-icon :component="CloudOutline" /> 公网 Agent 管理</h3>
+        <p class="form-hint">Agent 部署在公网 VPS 上，保存 HTTP/HTTPS 规则后可由 Agent 自动生成反代；「公网 Agent」页提供完整管理面板。首次安装/升级需要 SSH，日常管理走 Agent API。</p>
+        <div class="form-grid">
+          <n-form-item label="Agent API 地址"><n-input v-model:value="serverForm.agent_url" placeholder="例如：http://vps.example.com:7700" /></n-form-item>
+          <n-form-item :show-label="false" :show-feedback="false"><ConfiguredSecretField v-model="serverForm.agent_token" label="Agent Token" :configured="!!editingServer?.agent_configured" placeholder="留空保持不变" /></n-form-item>
+          <n-form-item label="SSH 地址"><n-input v-model:value="serverForm.ssh_host" placeholder="用于安装/升级/卸载 agent" /></n-form-item>
+          <n-form-item label="SSH 端口"><n-input-number v-model:value="serverForm.ssh_port" :min="1" :max="65535" /></n-form-item>
+          <n-form-item label="SSH 用户"><n-input v-model:value="serverForm.ssh_user" placeholder="root 或具备 sudo 权限的用户" /></n-form-item>
+          <n-form-item label="SSH 认证"><n-select v-model:value="serverForm.ssh_auth" :options="[{ label: '私钥', value: 'key' }, { label: '密码', value: 'password' }]" /></n-form-item>
+          <n-form-item :show-label="false" :show-feedback="false"><ConfiguredSecretField v-model="serverForm.ssh_secret" label="SSH 密码/私钥" :configured="!!editingServer?.ssh_configured" placeholder="用于 Agent 安装与升级" /></n-form-item>
+        </div>
+        <div class="switch-row"><span>启用 Agent 日常管理</span><n-switch v-model:value="serverForm.mgmt_enabled" /></div>
+        <div v-if="editingServer?.agent_configured" class="agent-actions">
+          <n-button size="small" :loading="agentActionId === editingServer.id" @click="testAgent(editingServer)">测试连接</n-button>
+          <n-button size="small" :loading="busy === 'push-config'" :disabled="busy !== null && busy !== 'push-config'" @click="pushAgentConfig(editingServer)">下发 frps 配置</n-button>
+          <n-button size="small" quaternary @click="showServerModal = false; selectedId = editingServer.id">查看服务端详情</n-button>
+        </div>
+      </section>
+            </div>
+            <div v-show="serverFormTab === 'advanced'" class="frp-server-modal__advanced">
+      <section class="form-section">
+        <h3><n-icon :component="DocumentTextOutline" /> 日志</h3>
+        <div class="form-grid">
+          <n-form-item label="日志级别"><n-select v-model:value="serverForm.options.log_level" :options="logLevelOptions" /></n-form-item>
+          <n-form-item label="最大天数"><n-input-number v-model:value="serverForm.options.log_max_days" :min="0" :max="3650" /></n-form-item>
+        </div>
+      </section>
+
+      <section class="form-section">
+        <h3><n-icon :component="GitNetworkOutline" /> 传输</h3>
+        <n-form-item label="协议"><n-select v-model:value="serverForm.options.protocol" :options="transportOptions" /></n-form-item>
+        <div class="switch-row"><span>启用 TLS</span><n-switch v-model:value="serverForm.tls_enabled" /><span>禁用自定义 TLS 首字节</span><n-switch v-model:value="serverForm.options.tls_disable_custom_first_byte" /></div>
+        <div v-if="serverForm.tls_enabled" class="tls-panel">
+          <n-form-item label="服务器名称（SNI）"><n-input v-model:value="serverForm.tls_server_name" placeholder="例如：frps.example.com" /></n-form-item>
+          <div class="tls-file-field">
+            <div class="tls-file-field__head"><span>证书文件内容</span><n-button size="small" quaternary @click="openTLSFilePicker('certificate')">从文件加载</n-button></div>
+            <n-input v-model:value="serverForm.tls_certificate" type="textarea" :rows="3" placeholder="粘贴客户端证书 PEM 内容或从文件加载；留空保持现有文件" />
+          </div>
+          <div class="tls-file-field">
+            <div class="tls-file-field__head"><span>密钥文件内容</span><n-button size="small" quaternary @click="openTLSFilePicker('key')">从文件加载</n-button></div>
+            <n-input v-model:value="serverForm.tls_key" type="textarea" :rows="3" placeholder="粘贴客户端私钥 PEM 内容或从文件加载；留空保持现有文件" />
+          </div>
+          <div class="tls-file-field">
+            <div class="tls-file-field__head"><span>受信任的 CA 内容</span><n-button size="small" quaternary @click="openTLSFilePicker('ca')">从文件加载</n-button></div>
+            <n-input v-model:value="serverForm.tls_trusted_ca" type="textarea" :rows="3" placeholder="粘贴 CA PEM 内容或从文件加载；留空保持现有文件" />
+          </div>
+          <input ref="certificateFileInput" class="file-input" type="file" accept=".pem,.crt,.cer,.key,.txt" @change="loadTLSFile('certificate', $event)" />
+          <input ref="keyFileInput" class="file-input" type="file" accept=".pem,.key,.txt" @change="loadTLSFile('key', $event)" />
+          <input ref="caFileInput" class="file-input" type="file" accept=".pem,.crt,.cer,.ca,.txt" @change="loadTLSFile('ca', $event)" />
+          <div class="asset-actions">
+            <n-button v-if="editingServer?.options.tls_certificate_configured" size="small" quaternary type="error" @click="serverForm.clear_tls_certificate = true">清除证书</n-button>
+            <n-button v-if="editingServer?.options.tls_key_configured" size="small" quaternary type="error" @click="serverForm.clear_tls_key = true">清除密钥</n-button>
+            <n-button v-if="editingServer?.options.tls_trusted_ca_configured" size="small" quaternary type="error" @click="serverForm.clear_tls_trusted_ca = true">清除 CA</n-button>
+          </div>
+        </div>
+        <n-collapse class="advanced-collapse">
+          <n-collapse-item title="高级连接设置" name="advanced">
+            <div class="form-grid">
+              <n-form-item label="代理 URL"><n-input v-model:value="serverForm.options.proxy_url" placeholder="http://user:pass@192.168.1.1:8080" /></n-form-item>
+              <n-form-item label="连接池数量"><n-input-number v-model:value="serverForm.options.pool_count" :min="0" :max="100" /></n-form-item>
+              <n-form-item label="拨号超时（秒）"><n-input-number v-model:value="serverForm.options.dial_server_timeout" :min="0" :max="600" /></n-form-item>
+              <n-form-item label="TCP 保活（秒）"><n-input-number v-model:value="serverForm.options.dial_server_keepalive" :min="0" :max="86400" /></n-form-item>
+              <n-form-item label="心跳间隔（秒）"><n-input-number v-model:value="serverForm.options.heartbeat_interval" :min="0" :max="3600" /></n-form-item>
+              <n-form-item label="心跳超时（秒）"><n-input-number v-model:value="serverForm.options.heartbeat_timeout" :min="0" :max="3600" /></n-form-item>
+              <n-form-item label="TCP Mux 保活（秒）"><n-input-number v-model:value="serverForm.options.tcp_mux_keepalive_interval" :min="0" :max="3600" /></n-form-item>
+              <n-form-item label="指定本地源 IP"><n-input v-model:value="serverForm.options.connect_server_local_ip" placeholder="可选" /></n-form-item>
+              <n-form-item label="DNS 服务器"><n-input v-model:value="serverForm.options.dns_server" placeholder="可选，例如：1.1.1.1" /></n-form-item>
+            </div>
+            <div class="switch-row"><span>TCP 多路复用</span><n-switch v-model:value="serverForm.options.tcp_mux" /><span>登录失败即退出</span><n-switch v-model:value="serverForm.options.login_fail_exit" /><span>自动连接</span><n-switch v-model:value="serverForm.options.auto_start" /></div>
+          </n-collapse-item>
+        </n-collapse>
+      </section>
+            </div>
+            <div class="modal-actions"><n-button @click="showServerModal = false">取消</n-button><n-button type="primary" :loading="savingServer" @click="saveServer">保存</n-button></div>
+          </n-form>
+        </div>
+      </div>
+      <div class="proxy-modal__help">
+        <h4>{{ serverFormTab === 'basic' ? '配置说明' : '高级配置说明' }}</h4>
+        <ol>
+          <li v-for="item in serverHelpItems" :key="item.title"><strong>{{ item.title }}</strong>：{{ item.text }}</li>
+        </ol>
+        <div class="proxy-modal__tip">
+          <n-icon :component="InformationCircleOutline" class="proxy-modal__tip-icon" />
+          <span>{{ serverHelpTip }}</span>
+        </div>
+      </div>
+    </div>
+  </n-modal>
+
+  <n-modal v-model:show="showServerLogs">
+    <div class="frp-card-modal">
+      <div class="proxy-modal__header">
+        <h3 class="modal-title">公网服务端运行日志 - {{ serverLogsTarget?.name ?? '' }}</h3>
+        <n-button size="small" quaternary @click="showServerLogs = false">关闭</n-button>
+      </div>
+      <div class="proxy-modal__scroll">
+    <div class="logs-toolbar">
+      <span class="table-muted">{{ serverLogsTarget?.server_addr }}:{{ serverLogsTarget?.server_port }} · frpc-server-{{ serverLogsTarget?.id }}.log</span>
+      <n-button size="small" :loading="serverLogsLoading" @click="loadServerLogs">刷新</n-button>
+    </div>
+      <pre class="logs-box">{{ serverLogLines.length ? serverLogLines.join('\n') : '暂无该服务端的运行日志' }}</pre>
+      </div>
+      <div class="modal-footer"><n-button @click="showServerLogs = false">关闭</n-button></div>
+    </div>
+  </n-modal>
+
+  <n-modal v-model:show="showServerDetail" preset="card" class="frp-detail-card" :title="viewingServer?.name || '服务端详情'" :style="{ width: 'min(980px, 94vw)', maxHeight: 'calc(100vh - 40px)' }" :content-style="{ maxHeight: 'calc(100vh - 120px)', overflowY: 'auto' }">
+    <div v-if="viewingServer" class="server-detail">
+      <div class="server-detail__top"><div><h2>{{ viewingServer.name }}</h2><p>服务端详情和运行监测</p></div><n-button v-if="viewingServer.boot_status === 'running'" size="small" type="error" ghost @click="stopServer(viewingServer)"><template #icon><n-icon :component="StopOutline" /></template>停止</n-button><n-button v-else size="small" type="success" ghost @click="startServer(viewingServer)"><template #icon><n-icon :component="PlayOutline" /></template>启动</n-button><n-button size="small" @click="openFRPSConfig(viewingServer)"><template #icon><n-icon :component="DocumentOutline" /></template>frps.toml</n-button></div>
+      <div class="server-detail__grid">
+        <section class="server-detail__panel"><h3>基本信息</h3><div class="detail-fields"><div><label>主机地址</label><strong class="mono">{{ viewingServer.server_addr }}</strong></div><div><label>端口</label><strong>{{ viewingServer.server_port }}</strong></div><div><label>用户</label><strong>{{ viewingServer.options.user || '未设置' }}</strong></div><div><label>位置</label><strong class="server-detail__location"><n-icon :component="LocationOutline" /> {{ locationText(viewingServer) }}</strong></div><div><label>状态</label><StatusBadge :value="serverStartupType(viewingServer)" :text="serverStartupText(viewingServer)" /></div><div><label>协议</label><strong>{{ viewingServer.options.protocol.toUpperCase() }}</strong></div><div><label>创建时间</label><span>{{ formatDate(viewingServer.created_at) }}</span></div><div><label>最后更新</label><span>{{ formatDate(viewingServer.updated_at) }}</span></div></div></section>
+        <section class="server-detail__panel">
+          <h3>配置</h3>
+          <div class="detail-fields detail-fields--single">
+            <div><label>描述</label><span>{{ viewingServer.options.remark || '未提供描述。' }}</span></div>
+          </div>
+          <div class="detail-subgroup">
+            <div class="detail-subgroup__title">连接与认证</div>
+            <div class="detail-fields">
+              <div><label>TLS</label><n-tag size="small" :type="viewingServer.tls_enabled ? 'success' : 'warning'" :bordered="false">{{ viewingServer.tls_enabled ? '已启用' : '未启用' }}</n-tag></div>
+              <div><label>认证</label><span>{{ authMethodText(viewingServer.options.auth_method) }}{{ viewingServer.has_token ? '（Token 已配置）' : '' }}</span></div>
+              <div><label>客户端</label><span>{{ runtime.active_version || runtime.detected_version || '当前版本' }}</span></div>
+              <div><label>期望状态</label><span>{{ serverStartupText(viewingServer) }}</span></div>
+              <div><label>frpc 进程</label><span>{{ processStateText(viewingServer) }}{{ viewingServer.process_pid ? `（PID ${viewingServer.process_pid}）` : '' }}</span></div>
+              <div><label>FRP 连接</label><span>{{ connectionStateText(viewingServer) }}</span></div>
+              <div><label>状态来源</label><span>{{ viewingServer.state_source || '未知' }}</span></div>
+            </div>
+          </div>
+          <div class="detail-subgroup">
+            <div class="detail-subgroup__title">诊断</div>
+            <span v-if="(serverDiagnostics[viewingServer.id]?.checks ?? []).length" class="diag-checks"><n-tag v-for="check in serverDiagnostics[viewingServer.id]?.checks ?? []" :key="check.name" size="small" :type="checkTagType(check.state)" :bordered="false" :title="check.detail">{{ checkLabel(check.name) }}·{{ checkStateText(check.state) }}</n-tag></span>
+            <span v-else class="detail-muted">暂无诊断数据，可点「立即诊断」获取</span>
+          </div>
+        </section>
+      </div>
+      <section class="server-detail__panel server-status-panel"><div class="server-detail__section-title"><h3>服务器状态</h3></div><div class="server-status-summary"><div class="server-status-summary__item server-status-summary__item--state"><StatusBadge :kind="detailStatusKind" :text="detailStatusText" /></div><div class="server-status-summary__item"><label>可达率</label><strong>{{ detailAvailability.toFixed(1) }}%</strong></div><div class="server-status-summary__item"><label>平均延迟</label><strong>{{ detailAverageLatency }}ms</strong></div><div class="server-status-summary__item"><label>峰值延迟</label><strong>{{ detailPeakLatency }}ms</strong></div></div><div v-if="detailStatusBars.length" class="status-bars"><div v-for="(sample, index) in detailStatusBars" :key="`${sample.checked_at}-${index}`" class="status-bar" :class="sample.available ? 'status-bar--ok' : 'status-bar--failed'" :data-tooltip="statusBarTooltip(sample)" :aria-label="statusBarTooltip(sample)" role="img" tabindex="0" /></div><div v-else class="status-bars-empty">暂无最近 30 分钟诊断采样</div><div class="status-bars-footer"><span>30 分钟前</span><span><i /> 现在</span></div><div class="detail-status-meta"><span>最近检测：{{ formatDate(detailStatus.last_checked_at) || '尚未检测' }}</span><span v-if="detailStatus.last_error" class="detail-status-error">{{ detailStatus.last_error }}</span></div></section>
+      <section class="server-detail__panel latency-panel"><div class="server-detail__section-title"><h3>延迟曲线</h3><span class="latency-panel__hint">最近 30 分钟</span></div><VChart v-if="detailSamples.length" class="latency-chart" autoresize :option="detailChartOption" /><div v-else class="detail-empty">暂无最近 30 分钟诊断采样</div><div class="detail-chart-footer"><span>延迟（ms）</span><span><i /> 可连接 <b class="detail-legend-failed" /> 失败</span></div></section>
+      <section class="server-detail__panel"><div class="server-detail__section-title"><h3>代理</h3><n-button size="small" quaternary @click="loadDetailData"><template #icon><n-icon :component="RefreshOutline" /></template>刷新</n-button></div><n-data-table :columns="detailProxyColumns" :data="detailProxies" :bordered="false" :single-line="false" size="small" /></section>
+      <section class="server-detail__panel"><div class="server-detail__section-title"><h3>连接日志</h3><n-button size="small" quaternary @click="loadDetailData">刷新</n-button></div><pre class="detail-logs">{{ detailLogs.length ? detailLogs.join('\n') : '暂无该服务端连接日志' }}</pre></section>
+    </div>
+  </n-modal>
+
+  <n-modal v-model:show="showFRPSConfig">
+    <div class="frp-card-modal">
+      <div class="proxy-modal__header">
+        <h3 class="modal-title">frps.toml 同源配置 - {{ frpsConfigTarget?.name || '' }}</h3>
+        <n-button size="small" quaternary @click="showFRPSConfig = false">关闭</n-button>
+      </div>
+      <div class="proxy-modal__scroll">
+        <p class="form-hint">与该服务端的 frpc 配置同源生成（bindPort / 认证 / 管理接口一致）；复制到 VPS 保存为 frps.toml 后执行 ./frps -c frps.toml。包含真实 Token，请勿外传。</p>
+                <p v-if="tcpRemotePorts.length" class="form-hint">
+          已启用的 TCP/UDP 隧道远程端口：<span class="mono">{{ tcpRemotePorts.join('、') }}</span>
+          —— 请确认 VPS 防火墙 / 安全组已放行这些端口（frps 侧 allowPorts 已按此生成，未放行时隧道会连不上）。
+        </p>
+        <p v-if="frpsCompare" class="form-hint" :class="{ 'frps-compare--warn': !frpsCompare.ok }">
+          {{ frpsCompare.text }}
+        </p>
+        <pre class="logs-box">{{ frpsConfigContent || '生成中…' }}</pre>
+      </div>
+      <div class="modal-footer">
+        <n-button size="small" :loading="comparingFrps" :disabled="!frpsConfigTarget" @click="compareFrpsConfig">
+          比对 VPS 实际文件
+        </n-button>
+        <n-button @click="showFRPSConfig = false">关闭</n-button>
+      </div>
+    </div>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
-import { useMessage } from 'naive-ui'
+import { computed, h, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import type { DataTableColumns } from 'naive-ui'
+import { NButton, NIcon, NTag, useDialog, useMessage } from 'naive-ui'
+import VChart from 'vue-echarts'
+import { use } from 'echarts/core'
+import { GridComponent, TooltipComponent } from 'echarts/components'
+import { LineChart, ScatterChart } from 'echarts/charts'
+import { CanvasRenderer } from 'echarts/renderers'
 import {
-  CloseOutline, CloudOutline, GitNetworkOutline, LayersOutline, RefreshOutline, SwapHorizontalOutline,
+  AddOutline, CloseOutline, CloudOutline, DocumentOutline, DocumentTextOutline, FlashOutline, GitNetworkOutline,
+  InformationCircleOutline, LayersOutline, LocationOutline, LockClosedOutline, PlayOutline, RefreshOutline,
+  ServerOutline, StopOutline, SwapHorizontalOutline,
 } from '@vicons/ionicons5'
 import EmptyState from '../components/EmptyState.vue'
+import ConfiguredSecretField from '../components/ConfiguredSecretField.vue'
 import FonuCard from '../components/FonuCard.vue'
 import LoadError from '../components/LoadError.vue'
 import PageHeader from '../components/PageHeader.vue'
 import StatusBadge from '../components/StatusBadge.vue'
-import { api } from '../api/client'
-import type { FrpAgentStatus, FrpRelease, FrpServer } from '../api/types'
+import { api, asList } from '../api/client'
+import type {
+  FrpAgentStatus, FrpProxy, FrpRelease, FrpRuntimeInfo, FrpServer, FrpServerDetail, FrpServerDiagnostics,
+  FrpServerOptions, FrpServerPayload, FrpServerStatusDetail,
+} from '../api/types'
 import { formatBytes, formatDate, formatRelativeTime, formatUptime } from '../utils/format'
 import { copyText } from '../utils/clipboard'
 
+use([CanvasRenderer, LineChart, ScatterChart, GridComponent, TooltipComponent])
+
 // 操作动作：按动作粒度控制 loading，保证"只有被点的按钮转圈"
 type Action =
   | 'probe' | 'agent-install' | 'agent-uninstall' | 'diagnose'
@@ -317,8 +677,16 @@ type Action =
 interface OpOutput { at: string; source: string; text: string; ok: boolean }
 
 const message = useMessage()
+const dialog = useDialog()
 const servers = ref<FrpServer[]>([])
-const selectedId = ref<number | null>(null)
+// 深链：/frp-agent?server=<id> 直接选中该服务端（来自内网穿透页服务端行的「Agent 管理」）；
+// id 不在列表里时由 load() 回落为第一台
+const route = useRoute()
+function serverIdFromQuery(): number | null {
+  const raw = Number(route.query.server ?? '')
+  return Number.isInteger(raw) && raw > 0 ? raw : null
+}
+const selectedId = ref<number | null>(serverIdFromQuery())
 const loadError = ref('')
 const agentStatus = ref<FrpAgentStatus | null>(null)
 const agentStatusOk = ref(false)
@@ -365,16 +733,13 @@ const frpsConsistency = computed(() => {
 })
 
 const server = computed(() => servers.value.find((item) => item.id === selectedId.value) ?? null)
-const serverOptions = computed(() => servers.value
-  .filter((item) => item.agent_configured || item.ssh_configured)
-  .map((item) => ({ label: item.name, value: item.id })))
 const installedFrpsVersion = computed(() => (agentStatus.value?.frps_version || '').trim())
 const routesCount = computed(() => agentStatus.value?.routes?.length ?? 0)
 const frpsVersionOptions = computed(() => releases.value.map((release) => ({ label: release.version, value: release.version })))
 
 // O：最后检查时间（PageHeader 副标题，判断数据新鲜度）
 const headerDescription = computed(() => {
-  if (!server.value) return '管理部署在公网 VPS 上的 fonu-agent 与 frps 服务'
+  if (!server.value) return '管理公网 VPS 服务端（frps）与其上的 fonu-agent'
   if (!statusLoaded.value) return '正在读取 VPS 状态…'
   const checkedAt = agentStatus.value?.checked_at
   return checkedAt ? `管理部署在公网 VPS 上的 fonu-agent 与 frps · 检查于 ${formatRelativeTime(checkedAt)}` : '管理部署在公网 VPS 上的 fonu-agent 与 frps 服务'
@@ -473,10 +838,15 @@ async function run<T>(action: Action, source: string, fn: () => Promise<T>, desc
 async function load() {
   loadError.value = ''
   try {
-    servers.value = (await api.listFrpServers()).filter((item) => item.agent_configured || item.ssh_configured)
+    // 本页现在是服务端的「家」：列表展示全部服务端（未配 Agent 的也要能编辑 / 删除）
+    const [nextServers, nextProxies] = await Promise.all([api.listFrpServers(), api.listFrpProxies()])
+    servers.value = asList(nextServers)
+    proxies.value = asList(nextProxies)
     if (selectedId.value === null || !servers.value.some((item) => item.id === selectedId.value)) {
       selectedId.value = servers.value[0]?.id ?? null
     }
+    void loadServerDiagnostics(servers.value)
+    void loadRuntimeVersion()
     if (server.value) await refreshAll({ silent: false })
     void loadFonuCerts()
   } catch (error) { loadError.value = error instanceof Error ? error.message : '读取服务端失败' }
@@ -712,6 +1082,457 @@ watch(selectedId, () => {
   void refreshAll({ silent: false })
 })
 
+// ── 公网服务端管理（列表 / 表单 / 日志 / 详情 / frps.toml 同源配置）──
+// 2026-09-24 由内网穿透页（FrpView.vue）迁入：服务端的「家」在本页，列表与详情同屏。
+
+const proxies = ref<FrpProxy[]>([])
+
+// 服务端详情弹窗「客户端」一行显示本机 frpc 版本，与内网穿透页同源
+const runtime = ref<FrpRuntimeInfo>({ platform: '', configured_bin: '', download_proxy: '', config_path: '', config_exists: false })
+
+async function loadRuntimeVersion() {
+  try { runtime.value = await api.getFrpRuntime() } catch { /* 读取失败时该行回落为「当前版本」 */ }
+}
+
+// 已启用的 TCP/UDP 隧道远程端口：用于提示在 VPS 防火墙放行（与 frps 的 allowPorts 同源）
+const tcpRemotePorts = computed(() => proxies.value
+  .filter((proxy) => proxy.enabled && (proxy.type === 'tcp' || proxy.type === 'udp') && proxy.remote_port)
+  .map((proxy) => proxy.remote_port as number))
+
+const serverDiagnostics = ref<Record<number, FrpServerDiagnostics>>({})
+
+const testingId = ref<number | null>(null)
+const serverStartingId = ref<number | null>(null)
+const agentActionId = ref<number | null>(null)
+const measuringId = ref<number | null>(null)
+const savingServer = ref(false)
+
+const showServerModal = ref(false)
+
+const showServerDetail = ref(false)
+
+// frps.toml 同源配置弹窗：按服务端生成，与 frpc 侧端口/认证一致
+const showFRPSConfig = ref(false)
+const frpsConfigContent = ref('')
+// frps.toml 与 VPS 实际文件的比对结果（P1-3，需 agent ≥ 0.10.0）
+const frpsCompare = ref<{ ok: boolean; text: string } | null>(null)
+const comparingFrps = ref(false)
+
+// 比对前统一去注释、空行与首尾空白：注释和排版差异不算「被手工修改」
+function normalizedConfigLines(text: string) {
+  return text
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line !== '' && !line.startsWith('#'))
+}
+
+async function compareFrpsConfig() {
+  const target = frpsConfigTarget.value
+  if (!target) return
+  comparingFrps.value = true
+  frpsCompare.value = null
+  try {
+    const remote = await api.getFrpAgentFRPSConfig(target.id)
+    if (!remote.exists) {
+      frpsCompare.value = { ok: false, text: `VPS 上还没有 ${remote.path || 'frps.toml'}，可直接下发写入` }
+      return
+    }
+    const expected = normalizedConfigLines(frpsConfigContent.value)
+    const actual = normalizedConfigLines(remote.content)
+    const index = expected.findIndex((line, i) => actual[i] !== line)
+    if (index === -1 && expected.length === actual.length) {
+      frpsCompare.value = { ok: true, text: `与 VPS 上的 ${remote.path} 一致（已忽略注释与空行）` }
+      return
+    }
+    const at = index === -1 ? Math.min(expected.length, actual.length) : index
+    frpsCompare.value = {
+      ok: false,
+      text: `不一致：第 ${at + 1} 行 下发「${expected[at] ?? '（无）'}」/ VPS「${actual[at] ?? '（无）'}」——VPS 上的 frps.toml 可能被手工改过，重新下发会覆盖`,
+    }
+  } catch (error) {
+    frpsCompare.value = { ok: false, text: error instanceof Error ? error.message : '比对失败' }
+  } finally {
+    comparingFrps.value = false
+  }
+}
+const frpsConfigTarget = ref<FrpServer | null>(null)
+const frpsConfigLoading = ref(false)
+
+const serverFormTab = ref<'basic' | 'advanced' | 'remote'>('basic')
+
+const editingServer = ref<FrpServer | null>(null)
+const viewingServer = ref<FrpServer | null>(null)
+const detailProxies = ref<FrpProxy[]>([])
+const detailLogs = ref<string[]>([])
+const detailStatus = ref<FrpServerStatusDetail>({ available: false, availability: 0, average_latency_ms: 0, peak_latency_ms: 0, samples: [] })
+
+const certificateFileInput = ref<HTMLInputElement | null>(null)
+const keyFileInput = ref<HTMLInputElement | null>(null)
+const caFileInput = ref<HTMLInputElement | null>(null)
+
+let diagnosticsAt = 0
+
+function defaultServerOptions(): FrpServerOptions {
+  return {
+    auth_method: 'token', log_level: 'info', log_max_days: 3, protocol: 'tcp', dial_server_timeout: 10,
+    dial_server_keepalive: 7200, pool_count: 0, tcp_mux: true, tcp_mux_keepalive_interval: 60,
+    heartbeat_interval: 30, heartbeat_timeout: 90, login_fail_exit: true, tls_disable_custom_first_byte: false, auto_start: false,
+    dashboard_addr: '', dashboard_port: 0, dashboard_user: '',
+  }
+}
+
+const serverForm = reactive({
+  name: '', server_addr: '', server_port: 7000, tls_enabled: true, tls_server_name: '', enabled: true, token: '',
+  agent_url: '', agent_token: '', ssh_host: '', ssh_port: 22, ssh_user: 'root', ssh_auth: 'key', ssh_secret: '', mgmt_enabled: false,
+  oidc_client_secret: '', dashboard_password: '', clear_dashboard_password: false, tls_certificate: '', tls_key: '', tls_trusted_ca: '', clear_tls_certificate: false,
+  clear_tls_key: false, clear_tls_trusted_ca: false, options: defaultServerOptions(),
+})
+
+const serverHelpItems = computed(() => {
+  if (serverFormTab.value === 'advanced') return [
+    { title: '日志', text: 'frpc 运行日志的级别与保留天数；排查连接问题时建议临时调到 debug。' },
+    { title: '传输协议', text: 'TCP 兼容性最好；KCP/QUIC 在丢包链路上更流畅，WebSocket/WSS 适合经过反向代理或 CDN 的场景，需 frps 侧支持。' },
+    { title: 'TLS', text: '默认启用；证书与密钥用于双向认证，受信任的 CA 用于校验 frps 证书，SNI 与 frps 侧证书域名一致。' },
+    { title: '连接调优', text: '心跳与 TCP 多路复用保持默认即可；网络不稳定时可加大超时，连接池可降低高并发时的建连延迟。' },
+  ]
+  const common = [
+    { title: '基本信息', text: '主机地址和端口对应 frps 的 bindAddr / bindPort，多个服务端可并行配置，规则保存时选择归属。' },
+    { title: '认证方式', text: '与 frps 的 auth 配置保持一致：无认证、令牌（auth.token）或 OIDC；令牌与密钥加密存储，编辑时留空保持不变。' },
+    { title: 'frps 管理接口', text: 'frps 开启 webServer（dashboard）后填写，Fonu 借此拉取穿透规则的实时连接与流量；不写入 frpc.toml，与连接认证无关。' },
+    { title: '描述', text: '仅用于在 Fonu 中区分多台服务端的备注信息。' },
+  ]
+  if (serverForm.options.auth_method === 'oidc') return [...common, { title: 'OIDC', text: '客户端 ID、密钥和令牌端点由身份提供商提供；受众与权限范围需与 frps 的 OIDC 校验配置匹配。' }]
+  return common
+})
+const serverHelpTip = computed(() => {
+  if (serverFormTab.value === 'advanced') return '传输参数需与 frps 服务端配置匹配；修改后请点击“校验并应用配置”。'
+  if (serverForm.options.auth_method === 'oidc') return 'OIDC 需要身份提供商支持客户端凭证模式，且 frps 侧已启用相同的 OIDC 校验。'
+  return '请先在 VPS 上部署 frps 并放行对应端口，再保存服务端配置。'
+})
+
+const logLevelOptions = ['trace', 'debug', 'info', 'warn', 'error'].map((value) => ({ label: value.toUpperCase(), value }))
+const transportOptions = [
+  { label: 'TCP', value: 'tcp' }, { label: 'KCP', value: 'kcp' }, { label: 'QUIC', value: 'quic' },
+  { label: 'WebSocket', value: 'websocket' }, { label: 'WSS', value: 'wss' },
+]
+
+// 详情弹窗「代理」表里的公网入口：与内网穿透页同源（TCP/UDP 显示远程端口，密钥类隧道无公网入口）
+function proxyPublicEndpoint(proxy: FrpProxy) {
+  if (proxy.type === 'tcp' || proxy.type === 'udp') return `:${proxy.remote_port ?? '-'}`
+  if (proxy.type === 'stcp' || proxy.type === 'sudp' || proxy.type === 'xtcp') return '密钥访问'
+  return proxy.custom_domains.join(', ') || proxy.options?.subdomain || '未设置入口'
+}
+
+const detailProxyColumns = computed<DataTableColumns<FrpProxy>>(() => [
+  { title: '名称', key: 'name', minWidth: 130 },
+  { title: '类型', key: 'type', width: 80, render: (row) => h('span', { class: 'type-chip' }, row.type.toUpperCase()) },
+  { title: '本地目标', key: 'local', minWidth: 150, render: (row) => h('code', `${row.local_ip}:${row.local_port}`) },
+  { title: '公网入口', key: 'public', minWidth: 180, render: (row) => h('code', proxyPublicEndpoint(row)) },
+  { title: '状态', key: 'enabled', width: 90, render: (row) => h('span', { class: row.enabled ? 'detail-status--on' : 'detail-status--off' }, row.enabled ? '已启用' : '已停用') },
+])
+const detailSamples = computed(() => detailStatus.value.samples)
+const detailStatusBars = computed(() => {
+  const samples = detailSamples.value
+  if (samples.length <= 30) return samples
+  const step = (samples.length - 1) / 29
+  return Array.from({ length: 30 }, (_, index) => samples[Math.round(index * step)]).filter(Boolean)
+})
+const detailAvailability = computed(() => detailStatus.value.availability)
+const detailAverageLatency = computed(() => detailStatus.value.average_latency_ms)
+const detailPeakLatency = computed(() => detailStatus.value.peak_latency_ms)
+const detailStatusText = computed(() => detailStatus.value.available ? '正常' : detailSamples.value.length ? '异常' : '待检测')
+const detailStatusKind = computed(() => detailStatus.value.available ? 'success' : detailSamples.value.length ? 'error' : 'warning')
+const detailChartOption = computed(() => {
+  const samples = detailSamples.value
+  const times = samples.map((sample) => sample.checked_at)
+  const latency = samples.map((sample) => sample.available ? sample.latency_ms ?? 0 : null)
+  const failures = samples.map((sample, index) => sample.available ? null : [index, 0])
+  return {
+    animation: false,
+    grid: { left: 42, right: 18, top: 20, bottom: 32 },
+    tooltip: { trigger: 'axis', formatter: (params: Array<{ dataIndex: number }>) => formatChartTooltip(samples, params[0]?.dataIndex ?? 0) },
+    xAxis: { type: 'category', boundaryGap: false, data: times, axisLabel: { formatter: (value: string) => formatChartTime(value) } },
+    yAxis: { type: 'value', min: 0, name: 'ms', nameTextStyle: { padding: [0, 0, 0, 8] } },
+    series: [
+      { name: '延迟', type: 'line', smooth: 0.25, connectNulls: false, data: latency, symbol: 'circle', symbolSize: 6, lineStyle: { color: '#18a058', width: 2 }, itemStyle: { color: '#18a058' }, areaStyle: { color: 'rgba(24,160,88,0.12)' } },
+      { name: '失败', type: 'scatter', data: failures, symbolSize: 9, itemStyle: { color: '#d03050' }, tooltip: { formatter: () => '连接失败' } },
+    ],
+  }
+})
+
+function formatChartTime(value: string) {
+  const date = new Date(value.includes('T') ? value : value.replace(' ', 'T') + 'Z')
+  return Number.isNaN(date.getTime()) ? value : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
+function formatChartTooltip(samples: FrpServerDetail['status']['samples'], index: number) {
+  const sample = samples[index]
+  if (!sample) return ''
+  const time = formatChartTime(sample.checked_at)
+  if (sample.available) return time + '<br/>延迟：' + (sample.latency_ms ?? 0) + ' ms'
+  return time + '<br/>连接失败' + (sample.error ? '：' + sample.error : '')
+}
+
+function statusBarTooltip(sample: FrpServerDetail['status']['samples'][number]) {
+  const time = formatChartTime(sample.checked_at)
+  if (sample.available) return `${time}：可连接，延迟 ${sample.latency_ms ?? 0} ms`
+  return `${time}：连接失败${sample.error ? `：${sample.error}` : ''}`
+}
+
+function resetServerForm() {
+  Object.assign(serverForm, {
+    name: '', server_addr: '', server_port: 7000, tls_enabled: true, tls_server_name: '', enabled: true, token: '',
+    oidc_client_secret: '', dashboard_password: '', clear_dashboard_password: false, tls_certificate: '', tls_key: '', tls_trusted_ca: '', clear_tls_certificate: false,
+    clear_tls_key: false, clear_tls_trusted_ca: false,
+  })
+  Object.assign(serverForm.options, defaultServerOptions())
+}
+
+function openServerModal(server?: FrpServer) {
+  editingServer.value = server ?? null
+  serverFormTab.value = 'basic'
+  resetServerForm()
+  if (server) {
+    Object.assign(serverForm, { ...server, token: '', oidc_client_secret: '', agent_token: '', ssh_secret: '' })
+    Object.assign(serverForm.options, server.options)
+  }
+  showServerModal.value = true
+}
+
+function openServerDetail(server: FrpServer) {
+  viewingServer.value = server
+  detailStatus.value = { available: false, availability: 0, average_latency_ms: 0, peak_latency_ms: 0, samples: [] }
+  detailProxies.value = []
+  detailLogs.value = []
+  showServerDetail.value = true
+  void loadDetailData()
+}
+
+async function loadDetailData() {
+  const server = viewingServer.value
+  if (!server) return
+  try {
+    const [detail, nextLogs] = await Promise.all([api.getFrpServerDetail(server.id), api.getFrpLogs(300)])
+    viewingServer.value = detail.server
+    detailStatus.value = detail.status
+    serverDiagnostics.value = { ...serverDiagnostics.value, [server.id]: {
+      server_id: server.id, available: detail.status.available, latency_ms: detail.status.average_latency_ms,
+      location: serverDiagnostics.value[server.id]?.location, error: detail.status.last_error,
+    } }
+    detailProxies.value = asList(detail.proxies)
+    const matchingLogs = asList(nextLogs).filter((line) => line.includes(server.server_addr) || line.includes(`[${server.name}]`))
+    detailLogs.value = (matchingLogs.length ? matchingLogs : asList(nextLogs)).slice(-100)
+  } catch (error) { message.error(error instanceof Error ? error.message : '读取服务端详情失败') }
+}
+
+const showServerLogs = ref(false)
+const serverLogsTarget = ref<FrpServer | null>(null)
+const serverLogLines = ref<string[]>([])
+const serverLogsLoading = ref(false)
+
+function openServerLogs(server: FrpServer) {
+  serverLogsTarget.value = server
+  showServerLogs.value = true
+  void loadServerLogs()
+}
+
+async function loadServerLogs() {
+  const server = serverLogsTarget.value
+  if (!server) return
+  serverLogsLoading.value = true
+  try { serverLogLines.value = asList(await api.getFrpLogs(200, server.id)) }
+  catch (error) { message.error(error instanceof Error ? error.message : '读取服务端日志失败') }
+  finally { serverLogsLoading.value = false }
+}
+
+async function loadServerDiagnostics(items: FrpServer[]) {
+  if (items.length === 0 || Date.now() - diagnosticsAt < 30_000) return
+  diagnosticsAt = Date.now()
+  const results = await Promise.all(items.map(async (server) => {
+    try { return await api.getFrpServerDiagnostics(server.id) }
+    catch { return { server_id: server.id, available: false, error: '不可达' } }
+  }))
+  serverDiagnostics.value = Object.fromEntries(results.map((item) => [item.server_id, item]))
+}
+
+function latencyText(server: FrpServer) {
+  const diagnostics = serverDiagnostics.value[server.id]
+  if (!diagnostics) return '未测速'
+  if (!diagnostics.available) return diagnostics.error?.includes('本机网络策略') ? '受限' : '不可达'
+  return `${diagnostics.latency_ms ?? 0} ms`
+}
+
+function latencyDetail(server: FrpServer) {
+  return serverDiagnostics.value[server.id]?.error || ''
+}
+
+function locationText(server: FrpServer) {
+  return serverDiagnostics.value[server.id]?.location || server.server_addr || '定位中'
+}
+
+function authMethodText(method: FrpServerOptions['auth_method']) {
+  return { none: '无认证', token: 'Token', oidc: 'OIDC（开放身份连接）' }[method] ?? method
+}
+
+function serverStartupText(server: FrpServer) {
+  const labels = { starting: '启动中', running: '运行中', stopped: '已停止', error: '异常' }
+  return labels[server.boot_status] ?? '已停止'
+}
+
+function serverStartupType(server: FrpServer) {
+  if (server.boot_status === 'running') return 'success'
+  if (server.boot_status === 'starting') return 'warning'
+  if (server.boot_status === 'error') return 'error'
+  return 'default'
+}
+
+function processStateText(server: FrpServer) {
+  return ({ starting: '启动中', running: '运行中', stopped: '已停止', error: '异常', unknown: '未知' } as Record<string, string>)[server.process_state] ?? '未知'
+}
+
+function connectionStateText(server: FrpServer) {
+  return ({ connected: '已连接', connecting: '连接中', disconnected: '未连接', error: '连接异常', unknown: '连接未知' } as Record<string, string>)[server.connection_state] ?? '连接未知'
+}
+
+function serverStateTooltip(server: FrpServer) {
+  return `期望：${serverStartupText(server)}；frpc：${processStateText(server)}；FRP：${connectionStateText(server)}${server.last_error ? `；${server.last_error}` : ''}`
+}
+
+async function saveServer() {
+  savingServer.value = true
+  try {
+    const payload: FrpServerPayload = {
+      name: serverForm.name, server_addr: serverForm.server_addr, server_port: serverForm.server_port,
+      agent_url: serverForm.agent_url, agent_token: serverForm.agent_token, ssh_host: serverForm.ssh_host,
+      ssh_port: serverForm.ssh_port, ssh_user: serverForm.ssh_user, ssh_auth: serverForm.ssh_auth,
+      ssh_secret: serverForm.ssh_secret, mgmt_enabled: serverForm.mgmt_enabled,
+      tls_enabled: serverForm.tls_enabled, tls_server_name: serverForm.tls_server_name, enabled: serverForm.enabled,
+      token: serverForm.token, options: { ...serverForm.options }, oidc_client_secret: serverForm.oidc_client_secret,
+      dashboard_password: serverForm.dashboard_password, clear_dashboard_password: serverForm.clear_dashboard_password,
+      tls_certificate: serverForm.tls_certificate, tls_key: serverForm.tls_key, tls_trusted_ca: serverForm.tls_trusted_ca,
+      clear_tls_certificate: serverForm.clear_tls_certificate, clear_tls_key: serverForm.clear_tls_key,
+      clear_tls_trusted_ca: serverForm.clear_tls_trusted_ca,
+    }
+    if (editingServer.value) await api.updateFrpServer(editingServer.value.id, payload)
+    else await api.createFrpServer(payload)
+    showServerModal.value = false
+    message.success('服务端配置已保存')
+    await load()
+  } catch (error) { message.error(error instanceof Error ? error.message : '保存失败') }
+  finally { savingServer.value = false }
+}
+
+async function testAgent(server: FrpServer) {
+  agentActionId.value = server.id
+  try { await api.testFrpAgent(server.id); message.success('Agent 连接正常') }
+  catch (error) { message.error(error instanceof Error ? error.message : 'Agent 连接失败') }
+  finally { agentActionId.value = null }
+}
+
+async function startServer(server: FrpServer) {
+  serverStartingId.value = server.id
+  try {
+    const updated = await api.startFrpServer(server.id)
+    servers.value = servers.value.map((item) => item.id === updated.id ? updated : item)
+    viewingServer.value = updated
+    message.success('服务端已标记为启动状态')
+  } catch (error) { message.error(error instanceof Error ? error.message : '启动服务端失败') }
+  finally { serverStartingId.value = null }
+}
+
+async function stopServer(server: FrpServer) {
+  serverStartingId.value = server.id
+  try {
+    const updated = await api.stopFrpServer(server.id)
+    servers.value = servers.value.map((item) => item.id === updated.id ? updated : item)
+    viewingServer.value = updated
+    message.success('服务端已停止')
+  } catch (error) { message.error(error instanceof Error ? error.message : '停止服务端失败') }
+  finally { serverStartingId.value = null }
+}
+
+async function measureServer(server: FrpServer) {
+  measuringId.value = server.id
+  try {
+    const diagnostics = await api.getFrpServerDiagnostics(server.id)
+    serverDiagnostics.value = { ...serverDiagnostics.value, [server.id]: diagnostics }
+    if (!diagnostics.available) {
+      message.error(diagnostics.error || '控制端口不可达')
+      return
+    }
+    // TCP 可达不等于可用：登录失败等关键项单独提示
+    const login = diagnostics.checks?.find((check) => check.name === 'frpc_login')
+    if (login?.state === 'failed') {
+      message.warning(`控制端口可达，但 ${login.detail ?? 'frpc 登录失败'}`)
+      return
+    }
+    message.info(`控制端口延迟 ${diagnostics.latency_ms ?? 0} ms`)
+  } catch (error) { message.error(error instanceof Error ? error.message : '测速失败') }
+  finally { measuringId.value = null }
+}
+
+const diagnosticCheckLabels: Record<string, string> = {
+  tcp_reachable: '控制端口', frpc_login: 'frpc 登录', proxy_reachable: '发布入口', dns_resolution: 'DNS 解析', location: '定位',
+}
+function checkLabel(name: string) {
+  return diagnosticCheckLabels[name] ?? name
+}
+function checkStateText(state: string) {
+  return { ok: '正常', failed: '异常', unknown: '未知' }[state] ?? state
+}
+function checkTagType(state: string) {
+  return state === 'ok' ? 'success' : state === 'failed' ? 'error' : 'warning'
+}
+
+async function testServer(server: FrpServer) {
+  testingId.value = server.id
+  try { message.success((await api.testFrpServer(server.id)).message) }
+  catch (error) { message.error(error instanceof Error ? error.message : '校验失败') }
+  finally { testingId.value = null }
+}
+
+function confirmDeleteServer(server: FrpServer) {
+  dialog.warning({ title: '删除服务端', content: `将删除「${server.name}」及其规则；不会停止本机 frpc。是否继续？`, positiveText: '删除', negativeText: '取消', onPositiveClick: async () => { try { await api.deleteFrpServer(server.id); message.success('服务端已删除'); await load() } catch (error) { message.error(error instanceof Error ? error.message : '删除失败') } } })
+}
+
+async function openFRPSConfig(server: FrpServer) {
+  frpsConfigTarget.value = server
+  showFRPSConfig.value = true
+  frpsCompare.value = null
+  frpsConfigLoading.value = true
+  try { frpsConfigContent.value = (await api.getFrpFRPSConfig(server.id)).content }
+  catch (error) {
+    showFRPSConfig.value = false
+    message.error(error instanceof Error ? error.message : '生成 frps.toml 失败')
+  }
+  finally { frpsConfigLoading.value = false }
+}
+
+function openTLSFilePicker(target: 'certificate' | 'key' | 'ca') {
+  const inputs = { certificate: certificateFileInput, key: keyFileInput, ca: caFileInput }
+  inputs[target].value?.click()
+}
+
+async function loadTLSFile(target: 'certificate' | 'key' | 'ca', event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  input.value = ''
+  if (!file) return
+  if (file.size > 1 << 20) {
+    message.error('证书文件不能超过 1MB')
+    return
+  }
+  const content = (await file.text()).trim()
+  if (!content.includes('-----BEGIN')) {
+    message.error('请选择 PEM 格式的证书、私钥或 CA 文件')
+    return
+  }
+  if (target === 'certificate') serverForm.tls_certificate = content
+  if (target === 'key') serverForm.tls_key = content
+  if (target === 'ca') serverForm.tls_trusted_ca = content
+  message.success(`已加载 ${file.name}`)
+}
+
 onMounted(() => {
   void load()
   void loadReleases()
@@ -766,7 +1587,6 @@ onBeforeUnmount(() => { if (timer) window.clearInterval(timer) })
 .tooltip-trigger { display: inline-flex; }
 .frps-install-row { display: flex; align-items: center; gap: 10px; margin-top: var(--fonu-space-3); flex-wrap: wrap; }
 .frps-version-select { width: 200px; }
-.agent-select { width: 220px; }
 .nginx-error { margin-top: var(--fonu-space-2); color: var(--fonu-error); overflow-wrap: anywhere; }
 
 /* 配置查看弹窗（只读） */
@@ -959,4 +1779,188 @@ onBeforeUnmount(() => { if (timer) window.clearInterval(timer) })
   .cert-row span:nth-child(3),
   .cert-row span:nth-child(4) { display: none; }
 }
+
+/* ── 以下样式随「公网服务端」列表与弹窗从内网穿透页迁入（2026-09-24）── */
+
+
+.section-actions, .switch-row, .modal-actions, .logs-toolbar { display: flex; align-items: center; gap: var(--fonu-space-2); flex-wrap: wrap; }
+
+.logs-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--fonu-space-3); }
+
+.frp-proxy-modal { display: flex; width: 900px; max-width: 95vw; max-height: 90vh; background: var(--fonu-surface); border-radius: var(--fonu-radius); overflow: hidden; box-shadow: var(--fonu-shadow-md); }
+.frp-proxy-modal .proxy-modal__form { flex: 1; min-width: 0; display: flex; flex-direction: column; max-height: 90vh; }
+.frp-proxy-modal .proxy-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--fonu-space-3); padding: var(--fonu-space-5) var(--fonu-space-5) 0; }
+.frp-proxy-modal .modal-title { margin: 0; font-size: 18px; font-weight: 600; }
+.frp-proxy-modal .proxy-modal__tabbar { display: flex; gap: var(--fonu-space-5); padding: var(--fonu-space-3) var(--fonu-space-5) 0; border-bottom: 1px solid var(--fonu-border); flex-shrink: 0; }
+.frp-proxy-modal .proxy-modal__tab { margin: 0 0 -1px; padding: 8px 2px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--fonu-text-secondary); font: inherit; font-size: 14px; cursor: pointer; }
+.frp-proxy-modal .proxy-modal__tab:hover { color: var(--fonu-text); }
+.frp-proxy-modal .proxy-modal__tab--active { color: var(--fonu-brand-text); font-weight: 600; border-bottom-color: var(--fonu-brand); }
+.frp-proxy-modal .proxy-modal__scroll { flex: 1; min-height: 0; overflow-y: auto; }
+.frp-proxy-modal .proxy-modal__pane { width: 100%; box-sizing: border-box; padding: var(--fonu-space-4) var(--fonu-space-5) 0; }
+.frp-proxy-modal .proxy-modal__pane > .modal-actions { padding-bottom: var(--fonu-space-5); }
+.frp-proxy-modal__basic .form-grid { grid-template-columns: 1fr; }
+.frp-server-modal__basic .form-grid { grid-template-columns: 1fr; }
+
+.form-section { padding: var(--fonu-space-4) 0; border-bottom: 1px solid var(--fonu-border); }
+.form-section:first-child { padding-top: 0; }
+.form-section:last-of-type { border-bottom: 0; }
+.form-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--fonu-space-4); font-size: 16px; }
+.form-section h3 :deep(.n-icon) { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--fonu-radius-sm); background: var(--fonu-brand); color: #fff; font-size: 15px; }
+
+.narrow-input { max-width: 200px; }
+/* 统一卡片式弹窗外壳（运行日志 / 导出配置 / frps 同源配置）：与 .proxy-modal 体系一致的头部 + 滚动区 + 页脚 */
+.frp-card-modal { display: flex; flex-direction: column; width: min(860px, calc(100vw - 32px)); max-height: 90vh; background: var(--fonu-surface); border-radius: var(--fonu-radius); overflow: hidden; box-shadow: var(--fonu-shadow-md); }
+.frp-card-modal .proxy-modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--fonu-space-3); padding: var(--fonu-space-5) var(--fonu-space-5) 0; flex-shrink: 0; }
+.frp-card-modal .modal-title { margin: 0; font-size: 18px; font-weight: 600; color: var(--fonu-text); }
+.frp-card-modal .proxy-modal__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--fonu-space-4) var(--fonu-space-5) 0; }
+.frp-card-modal .modal-footer { display: flex; justify-content: flex-end; gap: var(--fonu-space-3); padding: var(--fonu-space-4) var(--fonu-space-5) var(--fonu-space-5); border-top: 1px solid var(--fonu-border); margin-top: var(--fonu-space-2); flex-shrink: 0; }
+
+.frp-detail-card :deep(.n-card-header) { padding: var(--fonu-space-5) var(--fonu-space-5) 0; }
+.frp-detail-card :deep(.n-card-header__main) { font-size: 18px; font-weight: 600; color: var(--fonu-text); }
+.frp-detail-card :deep(.n-card__content) { padding: var(--fonu-space-4) var(--fonu-space-5) var(--fonu-space-5); }
+
+.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--fonu-space-4); }
+.form-grid--wide > :first-child { grid-column: 1 / -1; }
+.tls-panel { padding: var(--fonu-space-4); border-radius: var(--fonu-radius-sm); background: var(--fonu-bg-muted); }
+.tls-file-field { margin-bottom: var(--fonu-space-4); }
+.tls-file-field__head { display: flex; align-items: center; justify-content: space-between; gap: var(--fonu-space-3); margin-bottom: var(--fonu-space-2); font-size: 14px; font-weight: 500; }
+.file-input { display: none; }
+.asset-actions { display: flex; gap: var(--fonu-space-2); margin-top: calc(-1 * var(--fonu-space-2)); }
+.advanced-collapse { margin-top: var(--fonu-space-3); }
+.switch-row { padding: 4px 0 var(--fonu-space-5); }
+.switch-row span:nth-of-type(2) { margin-left: var(--fonu-space-4); }
+.modal-actions { justify-content: flex-end; }
+.logs-box { margin: var(--fonu-space-3) 0 0; padding: var(--fonu-space-4); min-height: 260px; max-height: 480px; overflow: auto; border: 1px solid var(--fonu-border); background: var(--fonu-bg-muted); color: var(--fonu-text); white-space: pre-wrap; word-break: break-word; font: 12px/1.55 var(--fonu-mono); }
+
+.table-muted { margin-top: 4px; color: var(--fonu-text-muted); font-size: 12px; }
+.type-chip { font-family: var(--fonu-mono); font-size: 12px; color: var(--fonu-brand-text); }
+
+.server-detail { display: grid; gap: var(--fonu-space-4); }
+.server-detail__top, .server-detail__section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--fonu-space-3); }
+.server-detail__top h2 { margin: 0; font-size: 24px; }
+.server-detail__top p { margin: 4px 0 0; color: var(--fonu-text-secondary); font-size: 13px; }
+.server-detail__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fonu-space-4); }
+.server-detail__panel { padding: var(--fonu-space-4); border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius-sm); background: var(--fonu-bg); }
+.server-detail__panel h3 { margin: 0 0 var(--fonu-space-4); font-size: 16px; }
+.detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fonu-space-4); }
+.detail-fields--single { grid-template-columns: 1fr; }
+.detail-fields > div { display: grid; gap: 5px; min-width: 0; }
+.detail-fields label, .detail-stats label { color: var(--fonu-text-secondary); font-size: 12px; }
+.detail-fields strong, .detail-fields span { overflow-wrap: anywhere; }
+.detail-subgroup { margin-top: var(--fonu-space-3); padding-top: var(--fonu-space-3); border-top: 1px solid var(--fonu-border); }
+.detail-subgroup__title { margin-bottom: var(--fonu-space-2); font-size: 12px; font-weight: 600; color: var(--fonu-text-secondary); }
+.detail-muted { color: var(--fonu-text-secondary); font-size: 12px; }
+.detail-subgroup { margin-top: var(--fonu-space-3); padding-top: var(--fonu-space-3); border-top: 1px solid var(--fonu-border); }
+.detail-subgroup__title { margin-bottom: var(--fonu-space-2); font-size: 12px; font-weight: 600; color: var(--fonu-text-secondary); }
+.detail-muted { color: var(--fonu-text-secondary); font-size: 12px; }
+.diag-checks { display: inline-flex; flex-wrap: wrap; gap: 6px; }
+.server-detail__location { display: flex; align-items: center; gap: 5px; }
+.detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fonu-space-4); margin-bottom: var(--fonu-space-4); }
+.detail-stats > div { display: grid; gap: 5px; }
+.detail-stats strong { font-size: 20px; color: var(--fonu-success); }
+.server-status-summary { display: grid; grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(110px, 1fr)); align-items: center; gap: var(--fonu-space-4); }
+.server-status-summary__item { display: grid; gap: 6px; min-width: 0; }
+.server-status-summary__item label { color: var(--fonu-text-secondary); font-size: 12px; }
+.server-status-summary__item strong { color: var(--fonu-success); font-size: 18px; line-height: 1.1; font-variant-numeric: tabular-nums; }
+.server-status-summary__item--state { display: flex; align-items: center; min-height: 28px; padding-right: var(--fonu-space-4); border-right: 1px solid var(--fonu-border); }
+.status-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; margin-top: var(--fonu-space-5); min-height: 36px; }
+.status-bar { position: relative; min-width: 0; height: 36px; border-radius: 4px; background: var(--fonu-bg-muted); cursor: help; outline: none; transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; }
+.status-bar--ok { background: linear-gradient(180deg, color-mix(in srgb, var(--fonu-success) 75%, white), color-mix(in srgb, var(--fonu-success) 48%, white)); }
+.status-bar--failed { background: color-mix(in srgb, var(--fonu-error) 68%, white); }
+.status-bar:hover, .status-bar:focus-visible { z-index: 2; transform: translateY(-2px); filter: brightness(1.1); box-shadow: var(--fonu-shadow-md); }
+.status-bar::after { content: attr(data-tooltip); position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 3; max-width: 240px; padding: 6px 8px; border-radius: 6px; background: var(--fonu-text); color: var(--fonu-surface); font-size: 12px; line-height: 1.2; white-space: nowrap; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 160ms ease, transform 160ms ease; }
+.status-bar::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 4px); z-index: 3; border: 5px solid transparent; border-top-color: var(--fonu-text); pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity 160ms ease, transform 160ms ease; }
+.status-bar:hover::after, .status-bar:hover::before, .status-bar:focus-visible::after, .status-bar:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
+.status-bars-empty { display: grid; place-items: center; min-height: 36px; margin-top: var(--fonu-space-5); border: 1px dashed var(--fonu-border); color: var(--fonu-text-muted); font-size: 12px; }
+.status-bars-footer { display: flex; justify-content: space-between; margin-top: var(--fonu-space-3); color: var(--fonu-text-muted); font-size: 12px; }
+.status-bars-footer span:last-child { display: inline-flex; align-items: center; gap: 5px; }
+.status-bars-footer i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--fonu-success) 35%, white); }
+.latency-panel__hint { color: var(--fonu-text-muted); font-size: 12px; }
+.detail-status-meta { display: flex; justify-content: space-between; gap: var(--fonu-space-3); margin: -4px 0 var(--fonu-space-3); color: var(--fonu-text-muted); font-size: 12px; }
+.detail-status-error { color: var(--fonu-error); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.server-status-panel .detail-status-meta { margin: var(--fonu-space-4) 0 0; }
+.latency-chart { width: 100%; height: 240px; }
+.detail-empty { display: grid; place-items: center; height: 240px; color: var(--fonu-text-muted); border: 1px dashed var(--fonu-border); }
+.detail-legend-failed { display: inline-block; width: 6px; height: 6px; margin: 0 4px 1px 12px; border-radius: 50%; background: var(--fonu-error); }
+.latency-bars { display: flex; align-items: end; gap: 4px; height: 92px; padding: 8px 0; border-bottom: 1px solid var(--fonu-border); }
+.latency-bars span { flex: 1; min-width: 5px; max-width: 24px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--fonu-success), color-mix(in srgb, var(--fonu-success) 55%, white)); }
+.latency-bars span.latency-bars__item--bad { background: var(--fonu-warning); }
+.detail-chart-footer { display: flex; justify-content: space-between; margin-top: 8px; color: var(--fonu-text-muted); font-size: 12px; }
+.detail-chart-footer i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--fonu-success); }
+.detail-status--on { color: var(--fonu-success); }
+.detail-status--off { color: var(--fonu-text-muted); }
+.detail-logs { margin: 0; max-height: 220px; overflow: auto; padding: var(--fonu-space-3); background: var(--fonu-bg-muted); color: var(--fonu-text-secondary); white-space: pre-wrap; word-break: break-word; font: 12px/1.55 var(--fonu-mono); }
+
+.frps-compare--warn {
+  color: var(--fonu-warning);
+}
+/* 服务端表单沿用内网穿透页的提示排版；本页既有的 .form-hint 服务于详情卡，保持不动 */
+.frp-proxy-modal .form-hint { margin: 0 0 var(--fonu-space-4); font-size: 13px; line-height: 1.55; }
+@media (max-width: 760px) {
+  .frp-proxy-modal { display: block; max-height: 92vh; overflow-y: auto; }
+  .frp-proxy-modal .proxy-modal__form { max-height: none; }
+  .frp-proxy-modal .proxy-modal__scroll { overflow: visible; }
+  .frp-proxy-modal .proxy-modal__help { width: auto; border-top: 1px solid var(--fonu-border); border-left: 0; }
+}
+@media (max-width: 700px) {
+  .server-detail__grid, .detail-fields, .form-grid { grid-template-columns: 1fr; }
+  .server-status-summary { grid-template-columns: 1fr; }
+  .server-status-summary__item--state { min-height: 0; padding-right: 0; padding-bottom: var(--fonu-space-3); border-right: 0; border-bottom: 1px solid var(--fonu-border); }
+  .status-bars { gap: 3px; }
+  .status-bar { height: 28px; }
+  .switch-row span:nth-of-type(2) { margin-left: 0; }
+}
+/* 服务端表单弹窗的说明栏 / 高级折叠 / 服务端选项区：与内网穿透页同源，随弹窗一并迁入 */
+.logs-toolbar__filter { width: 200px; }
+.frp-proxy-modal .proxy-form-section { margin-top: var(--fonu-space-2); padding: var(--fonu-space-4) 0 0; border-top: 1px solid var(--fonu-border); }
+.frp-proxy-modal .proxy-form-section h4 { margin: 0 0 var(--fonu-space-4); font-size: 14px; font-weight: 600; color: var(--fonu-text); }
+.frp-proxy-modal__advanced { padding-bottom: var(--fonu-space-4); }
+.frp-proxy-modal .proxy-advanced-collapse { width: 100%; border: 1px solid var(--fonu-border); border-radius: 10px; overflow: hidden; background: var(--fonu-surface); }
+.frp-proxy-modal .proxy-advanced-collapse :deep(.n-collapse-item) { margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
+.frp-proxy-modal .proxy-advanced-collapse :deep(.n-collapse-item + .n-collapse-item) { border-top: 1px solid var(--fonu-border) !important; }
+.frp-proxy-modal .proxy-advanced-collapse :deep(.n-collapse-item__header) { min-height: 44px; padding: 12px 14px !important; background: var(--fonu-bg); font-weight: 600; box-sizing: border-box; }
+.frp-proxy-modal .proxy-advanced-collapse :deep(.n-collapse-item__content-inner) { padding: 0 14px 14px; }
+.frp-proxy-modal .proxy-modal__help { width: 300px; flex-shrink: 0; padding: var(--fonu-space-5); background: var(--fonu-bg-muted); border-left: 1px solid var(--fonu-border); color: var(--fonu-text-secondary); font-size: 13px; line-height: 1.65; overflow: auto; }
+.frp-proxy-modal .proxy-modal__help h4 { margin: 0 0 var(--fonu-space-3); color: var(--fonu-text); font-size: 14px; font-weight: 600; }
+.frp-proxy-modal .proxy-modal__help ol { margin: 0; padding-left: 18px; }
+.frp-proxy-modal .proxy-modal__help li + li { margin-top: 10px; }
+.frp-proxy-modal .proxy-modal__help strong { color: var(--fonu-text); font-weight: 600; }
+.frp-proxy-modal .proxy-modal__tip { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--fonu-space-5); padding: 12px; border-radius: 8px; background: var(--fonu-info-soft); color: var(--fonu-info); font-size: 12px; line-height: 1.6; }
+.frp-proxy-modal .proxy-modal__tip-icon { flex-shrink: 0; margin-top: 1px; font-size: 16px; }
+.frp-proxy-modal .proxy-modal__example { margin-top: var(--fonu-space-5); padding-top: var(--fonu-space-4); border-top: 1px solid var(--fonu-border); }
+.frp-proxy-modal .proxy-modal__example-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fonu-space-3); }
+.frp-proxy-modal .proxy-modal__example h5 { margin: 0; color: var(--fonu-text); font-size: 13px; font-weight: 600; }
+.frp-proxy-modal .proxy-modal__example p { margin: 4px 0 0; font-size: 12px; line-height: 1.55; }
+.frp-proxy-modal .proxy-modal__example pre { margin: var(--fonu-space-3) 0 0; padding: 10px; overflow-x: auto; border-radius: 6px; background: var(--fonu-bg-muted); color: var(--fonu-text); font: 12px/1.6 var(--fonu-mono); white-space: pre; }
+/* 左列表 + 右详情：与 DDNS 页（.ddns-layout / .task-sidebar）同构 */
+.agent-layout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: var(--fonu-space-4); align-items: start; }
+.agent-detail { min-width: 0; }
+
+.server-sidebar { background: var(--fonu-surface); border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius); box-shadow: var(--fonu-shadow); overflow: hidden; }
+.server-sidebar__head { padding: var(--fonu-space-4); border-bottom: 1px solid var(--fonu-border); }
+.server-sidebar__head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--fonu-space-3); }
+.server-sidebar__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--fonu-text); flex-shrink: 0; }
+.server-sidebar__list { display: flex; flex-direction: column; gap: 10px; padding: var(--fonu-space-3); max-height: 720px; overflow: auto; }
+
+.server-item { width: 100%; font: inherit; text-align: left; padding: 12px 14px; border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius); background: var(--fonu-surface); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
+.server-item:hover { border-color: var(--fonu-brand-hover); }
+.server-item--active { border-color: var(--fonu-brand); box-shadow: 0 0 0 1px var(--fonu-brand-soft); }
+.server-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.server-item__name { font-size: 14px; font-weight: 600; color: var(--fonu-text); overflow-wrap: anywhere; }
+.server-item__endpoint { margin-top: 6px; font-size: 12px; color: var(--fonu-text-secondary); overflow-wrap: anywhere; }
+.server-item__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fonu-space-3); margin-top: 6px; font-size: 12px; color: var(--fonu-text-muted); }
+.server-item__meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
+.server-item__meta :deep(.n-icon) { flex: 0 0 auto; font-size: 14px; }
+.server-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+
+.server-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fonu-space-3); margin-bottom: var(--fonu-space-4); padding: var(--fonu-space-3) var(--fonu-space-4); background: var(--fonu-surface); border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius); box-shadow: var(--fonu-shadow); }
+.server-toolbar__info { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--fonu-space-3); min-width: 0; }
+.server-toolbar__name { font-size: 15px; font-weight: 600; color: var(--fonu-text); }
+.server-toolbar__endpoint { font-size: 12.5px; color: var(--fonu-text-secondary); }
+.server-toolbar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fonu-space-2); }
+
+@media (max-width: 1100px) {
+  .agent-layout { grid-template-columns: 1fr; }
+  .server-sidebar__list { max-height: none; }
+}
 </style>
diff --git a/web/src/views/FrpView.vue b/web/src/views/FrpView.vue
index 9e0b187..458f3ea 100644
--- a/web/src/views/FrpView.vue
+++ b/web/src/views/FrpView.vue
@@ -1,6 +1,7 @@
 <template>
   <PageHeader title="FRP 穿透" description="管理 NAS 到公网 VPS 的 frpc 客户端连接">
     <template #actions>
+      <n-button @click="showExport = true; loadExport()">查看脱敏配置</n-button>
       <n-button @click="openRuntimeModal">
         <template #icon><n-icon :component="SettingsOutline" /></template>
         应用配置
@@ -50,263 +51,93 @@
       </div>
     </section>
 
-    <FonuCard class="section-card" title="公网服务端" subtitle="可添加并管理多个 frps 服务端连接">
-      <template #header>
-        <n-button size="small" type="primary" @click="openServerModal()">
-          <template #icon><n-icon :component="AddOutline" /></template>
-          添加服务端
-        </n-button>
-      </template>
+    <EmptyState
+      v-if="servers.length === 0"
+      title="尚未配置公网服务端"
+      description="穿透规则要归属到一台公网服务端；服务端的增删改、启停与 Agent 安装升级都在「公网服务端」页。"
+    >
+      <template #action><router-link to="/frp-agent"><n-button type="primary">去公网服务端页</n-button></router-link></template>
+    </EmptyState>
+    <EmptyState v-else-if="proxies.length === 0" title="尚未创建穿透规则" description="可发布 TCP 服务，或通过 HTTP/HTTPS 域名将请求转入内网。">
+      <template #action><n-button type="primary" @click="openProxyModal()">添加规则</n-button></template>
+    </EmptyState>
 
-      <EmptyState v-if="servers.length === 0" title="尚未配置 FRP 服务端" description="先添加公网 VPS 的 frps 地址和认证 Token。">
-        <template #action><n-button type="primary" @click="openServerModal()">添加服务端</n-button></template>
-      </EmptyState>
-      <div v-else class="frp-server-table-wrap">
-        <n-data-table
-          class="frp-server-table"
-          :columns="serverColumns"
-          :data="servers"
-          :bordered="false"
-          :single-line="false"
-          size="small"
-          :scroll-x="1560"
-          :row-key="(row: FrpServer) => row.id"
-        />
-      </div>
-    </FonuCard>
-
-    <FonuCard class="section-card" title="穿透规则" subtitle="将内网服务映射到公网 VPS 的 TCP 或虚拟主机入口">
-      <template #header>
-        <div class="section-actions">
-          <n-button size="small" @click="showExport = true; loadExport()">查看脱敏配置</n-button>
-          <n-button size="small" type="primary" :disabled="servers.length === 0" @click="openProxyModal()">
-            <template #icon><n-icon :component="AddOutline" /></template>
-            添加规则
-          </n-button>
+    <!-- 左：服务端列表（选服务端）；右：该服务端的穿透规则与选中规则详情 -->
+    <div v-else class="frp-layout">
+      <aside class="server-sidebar">
+        <div class="server-sidebar__head">
+          <div class="server-sidebar__head-row">
+            <h3 class="server-sidebar__title">服务端列表</h3>
+          </div>
         </div>
-      </template>
+        <div class="server-sidebar__list">
+          <button
+            v-for="item in servers"
+            :key="item.id"
+            type="button"
+            class="server-item"
+            :class="{ 'server-item--active': item.id === selectedServerId }"
+            @click="selectServer(item.id)"
+          >
+            <div class="server-item__top">
+              <span class="server-item__name">{{ item.name }}</span>
+              <n-tag size="tiny" :bordered="false" :type="serverBootType(item)">{{ serverBootLabel(item) }}</n-tag>
+            </div>
+            <div class="server-item__endpoint mono">{{ item.server_addr }}:{{ item.server_port }}</div>
+            <div class="server-item__meta">
+              <span>{{ serverRuleCount(item.id) }} 条规则</span>
+              <span>{{ serverEnabledRuleCount(item.id) }} 条启用</span>
+            </div>
+            <div class="server-item__tags">
+              <n-tag size="tiny" :bordered="false" :type="item.tls_enabled ? 'success' : 'warning'">TLS</n-tag>
+              <n-tag size="tiny" :bordered="false" :type="item.has_token ? 'success' : 'error'">Token</n-tag>
+              <n-tag v-if="item.agent_configured" size="tiny" :bordered="false" type="info">Agent</n-tag>
+              <n-tag v-if="item.ssh_configured" size="tiny" :bordered="false" type="info">SSH</n-tag>
+            </div>
+          </button>
+        </div>
+      </aside>
 
-      <EmptyState v-if="proxies.length === 0" title="尚未创建穿透规则" description="可发布 TCP 服务，或通过 HTTP/HTTPS 域名将请求转入内网。">
-        <template #action><n-button type="primary" :disabled="servers.length === 0" @click="openProxyModal()">添加规则</n-button></template>
-      </EmptyState>
-      <n-data-table v-else class="frp-rules-table" :columns="columns" :data="proxies" :bordered="false" :single-line="false" :scroll-x="2020" :row-key="(row: FrpProxy) => row.id" />
-    </FonuCard>
+      <div class="rule-pane">
+        <div class="rule-pane__head">
+          <div class="rule-pane__intro">
+            <h3 class="rule-pane__title">穿透规则</h3>
+            <span class="rule-pane__sub">{{ selectedServer?.name || '未选择服务端' }} · {{ serverProxies.length }} 条</span>
+          </div>
+          <div class="rule-pane__actions">
+            <n-button size="small" @click="showExport = true; loadExport()">查看脱敏配置</n-button>
+            <router-link v-if="selectedServerId" :to="{ name: 'frp-agent', query: { server: String(selectedServerId) } }">
+              <n-button size="small" quaternary>管理该服务端</n-button>
+            </router-link>
+            <n-button size="small" type="primary" :disabled="servers.length === 0" @click="openProxyModal()">
+              <template #icon><n-icon :component="AddOutline" /></template>
+              添加规则
+            </n-button>
+          </div>
+        </div>
+
+        <EmptyState v-if="serverProxies.length === 0" title="该服务端还没有穿透规则" description="可发布 TCP 服务，或通过 HTTP/HTTPS 域名将请求转入内网。">
+          <template #action><n-button type="primary" :disabled="servers.length === 0" @click="openProxyModal()">添加规则</n-button></template>
+        </EmptyState>
+        <div class="rule-table-wrap">
+          <n-data-table
+            class="frp-rules-table"
+            :columns="columns"
+            :data="serverProxies"
+            :bordered="false"
+            :single-line="false"
+            :scroll-x="1890"
+            :row-key="(row: FrpProxy) => row.id"
+          />
+        </div>
+      </div>
+    </div>
 
     <FonuCard v-if="status.last_error" class="error-card" title="最近错误">
       <div class="error-card__content">{{ status.last_error }}</div>
     </FonuCard>
   </template>
 
-  <n-modal
-    v-model:show="showServerModal"
-    :mask-closable="false"
-    transform-origin="center"
-  >
-    <div class="proxy-modal frp-proxy-modal">
-      <div class="proxy-modal__form">
-        <div class="proxy-modal__header">
-          <h3 class="modal-title">{{ editingServer ? '编辑服务端' : '添加服务端' }}</h3>
-          <n-button size="small" quaternary @click="showServerModal = false">
-            <template #icon><n-icon :component="CloseOutline" /></template>
-          </n-button>
-        </div>
-        <div class="proxy-modal__tabbar">
-          <button type="button" class="proxy-modal__tab" :class="{ 'proxy-modal__tab--active': serverFormTab === 'basic' }" @click="serverFormTab = 'basic'">基础配置</button>
-          <button type="button" class="proxy-modal__tab" :class="{ 'proxy-modal__tab--active': serverFormTab === 'advanced' }" @click="serverFormTab = 'advanced'">高级配置</button>
-          <button type="button" class="proxy-modal__tab" :class="{ 'proxy-modal__tab--active': serverFormTab === 'remote' }" @click="serverFormTab = 'remote'">远程管理</button>
-        </div>
-        <div class="proxy-modal__scroll">
-          <n-form label-placement="top" class="proxy-modal__pane" @submit.prevent="saveServer">
-            <div v-show="serverFormTab === 'basic'" class="frp-server-modal__basic">
-      <section class="form-section">
-        <h3><n-icon :component="InformationCircleOutline" /> 基本信息</h3>
-        <div class="form-grid form-grid--wide">
-          <n-form-item label="服务端名称" required><n-input v-model:value="serverForm.name" placeholder="例如：生产服务器" /></n-form-item>
-          <n-form-item label="主机地址" required><n-input v-model:value="serverForm.server_addr" placeholder="例如：frps.example.com" /></n-form-item>
-          <n-form-item label="端口" required><n-input-number v-model:value="serverForm.server_port" :min="1" :max="65535" /></n-form-item>
-        </div>
-      </section>
-
-      <section class="form-section">
-        <h3><n-icon :component="LockClosedOutline" /> 认证</h3>
-        <n-form-item label="认证方式" required>
-          <n-radio-group v-model:value="serverForm.options.auth_method" name="auth-method">
-            <n-radio-button value="none">无</n-radio-button>
-            <n-radio-button value="token">令牌</n-radio-button>
-            <n-radio-button value="oidc">OIDC（开放身份连接）</n-radio-button>
-          </n-radio-group>
-        </n-form-item>
-        <n-form-item label="用户"><n-input v-model:value="serverForm.options.user" placeholder="例如：admin" /></n-form-item>
-        <n-form-item v-if="serverForm.options.auth_method === 'token'" :show-label="false" :show-feedback="false">
-          <ConfiguredSecretField
-            v-model="serverForm.token"
-            label="令牌"
-            :configured="!!editingServer?.has_token"
-            placeholder="请输入与 frps 一致的令牌"
-          />
-        </n-form-item>
-        <template v-if="serverForm.options.auth_method === 'oidc'">
-          <p class="form-hint">OIDC（OpenID Connect，开放身份连接）会向身份提供商申请访问令牌，再用于连接 FRP 服务端。</p>
-          <div class="form-grid">
-            <n-form-item label="客户端 ID（Client ID）" required><n-input v-model:value="serverForm.options.oidc_client_id" placeholder="身份提供商分配的客户端标识" /></n-form-item>
-            <n-form-item :show-label="false" :show-feedback="false">
-              <ConfiguredSecretField
-                v-model="serverForm.oidc_client_secret"
-                label="客户端密钥（Client Secret）"
-                :configured="!!editingServer?.has_oidc_client_secret"
-                placeholder="请输入客户端密钥"
-              />
-            </n-form-item>
-            <n-form-item label="令牌端点（Token Endpoint）" required><n-input v-model:value="serverForm.options.oidc_token_endpoint_url" placeholder="https://issuer.example.com/token" /></n-form-item>
-            <n-form-item label="受众（Audience）"><n-input v-model:value="serverForm.options.oidc_audience" placeholder="可选，用于限定令牌的目标服务" /></n-form-item>
-            <n-form-item label="额外权限范围（Scope）"><n-input v-model:value="serverForm.options.oidc_scope" placeholder="例如：openid profile" /></n-form-item>
-            <n-form-item label="OIDC 请求代理地址"><n-input v-model:value="serverForm.options.oidc_proxy_url" placeholder="http://user:pass@192.168.1.1:8080" /></n-form-item>
-          </div>
-          <div class="switch-row"><span>跳过 OIDC TLS 校验</span><n-switch v-model:value="serverForm.options.oidc_insecure_skip_verify" /></div>
-        </template>
-      </section>
-
-      <section class="form-section">
-        <h3><n-icon :component="DocumentOutline" /> 描述</h3>
-        <n-form-item label="描述"><n-input v-model:value="serverForm.options.remark" type="textarea" :rows="2" placeholder="添加一些关于此服务器的备注" /></n-form-item>
-      </section>
-            </div>
-            <div v-show="serverFormTab === 'remote'" class="frp-server-modal__remote">
-      <section class="form-section">
-        <h3><n-icon :component="SwapHorizontalOutline" /> frps vhost 反代端口</h3>
-        <p class="form-hint">frps 的 vhostHTTPPort / vhostHTTPSPort，即 Nginx 反代的回源端口（proxy_pass http://127.0.0.1:端口）。修改后需「下发 frps 配置」并重启 frps，且重新部署各规则的反代。留空用默认 8080 / 8443。</p>
-        <div class="form-grid">
-          <n-form-item label="HTTP 回源端口"><n-input-number v-model:value="serverForm.options.vhost_http_port" :min="1" :max="65535" placeholder="默认 8080" /></n-form-item>
-          <n-form-item label="HTTPS 回源端口"><n-input-number v-model:value="serverForm.options.vhost_https_port" :min="1" :max="65535" placeholder="默认 8443" /></n-form-item>
-        </div>
-        <div class="form-grid">
-          <n-form-item label="子域名根（subDomainHost）"><n-input v-model:value="serverForm.options.sub_domain_host" placeholder="例如：frps.example.com，规则填 subdomain 后生成为 sub.frps.example.com" /></n-form-item>
-          <n-form-item label="tcpmux 监听端口"><n-input-number v-model:value="serverForm.options.tcpmux_http_connect_port" :min="1" :max="65535" placeholder="存在 tcpmux 规则时必填" /></n-form-item>
-        </div>
-        <div class="form-grid">
-          <n-form-item label="端口白名单（allowPorts）"><n-input v-model:value="serverForm.options.allow_ports" placeholder="如 6000,6005-6010,7000-8000；留空不限制" /></n-form-item>
-          <n-form-item label="每客户端端口上限"><n-input-number v-model:value="serverForm.options.max_ports_per_client" :min="0" :max="65535" placeholder="0 表示不限" /></n-form-item>
-        </div>
-        <div class="form-grid">
-          <n-form-item label="自定义 404 页面（VPS 路径）"><n-input v-model:value="serverForm.options.custom_404_page" placeholder="例如 /var/www/404.html；留空用默认" /></n-form-item>
-          <div class="switch-row"><span>强制 TLS（frps 只接受 TLS 连接）</span><n-switch v-model:value="serverForm.options.tls_force" /></div>
-        </div>
-        <div class="switch-row"><span>frps 写文件日志（/var/log/frps.log）</span><n-switch v-model:value="serverForm.options.frps_log_to_file" /></div>
-        <n-form-item v-if="serverForm.options.frps_log_to_file" label="日志保留天数"><n-input-number v-model:value="serverForm.options.frps_log_max_days" :min="1" :max="365" placeholder="默认 3" class="narrow-input" /></n-form-item>
-      </section>
-
-      <section class="form-section">
-        <h3><n-icon :component="ServerOutline" /> frps 管理接口</h3>
-        <p class="form-hint">用于 Fonu 拉取穿透规则的实时连接与流量信息；需在 frps 的 frps.toml 中开启 webServer（dashboard），与 frpc 连接用的令牌无关。</p>
-        <div class="form-grid">
-          <n-form-item label="管理地址"><n-input v-model:value="serverForm.options.dashboard_addr" placeholder="frps 机器的 IP 或域名，留空则不采集流量" /></n-form-item>
-          <n-form-item label="管理端口"><n-input-number v-model:value="serverForm.options.dashboard_port" :min="0" :max="65535" placeholder="例如：7500" /></n-form-item>
-        </div>
-        <div class="form-grid">
-          <n-form-item label="管理用户"><n-input v-model:value="serverForm.options.dashboard_user" placeholder="webServer.user，未启用认证可留空" /></n-form-item>
-          <n-form-item :show-label="false" :show-feedback="false">
-            <ConfiguredSecretField
-              v-model="serverForm.dashboard_password"
-              label="管理密码"
-              :configured="!!editingServer?.dashboard_has_pwd"
-              placeholder="webServer.password"
-            />
-          </n-form-item>
-        </div>
-        <n-button v-if="editingServer?.dashboard_has_pwd" size="small" quaternary type="error" @click="serverForm.clear_dashboard_password = true">清除管理密码</n-button>
-      </section>
-
-      <section class="form-section">
-        <h3><n-icon :component="CloudOutline" /> 公网 Agent 管理</h3>
-        <p class="form-hint">Agent 部署在公网 VPS 上，保存 HTTP/HTTPS 规则后可由 Agent 自动生成反代；「公网 Agent」页提供完整管理面板。首次安装/升级需要 SSH，日常管理走 Agent API。</p>
-        <div class="form-grid">
-          <n-form-item label="Agent API 地址"><n-input v-model:value="serverForm.agent_url" placeholder="例如：http://vps.example.com:7700" /></n-form-item>
-          <n-form-item :show-label="false" :show-feedback="false"><ConfiguredSecretField v-model="serverForm.agent_token" label="Agent Token" :configured="!!editingServer?.agent_configured" placeholder="留空保持不变" /></n-form-item>
-          <n-form-item label="SSH 地址"><n-input v-model:value="serverForm.ssh_host" placeholder="用于安装/升级/卸载 agent" /></n-form-item>
-          <n-form-item label="SSH 端口"><n-input-number v-model:value="serverForm.ssh_port" :min="1" :max="65535" /></n-form-item>
-          <n-form-item label="SSH 用户"><n-input v-model:value="serverForm.ssh_user" placeholder="root 或具备 sudo 权限的用户" /></n-form-item>
-          <n-form-item label="SSH 认证"><n-select v-model:value="serverForm.ssh_auth" :options="[{ label: '私钥', value: 'key' }, { label: '密码', value: 'password' }]" /></n-form-item>
-          <n-form-item :show-label="false" :show-feedback="false"><ConfiguredSecretField v-model="serverForm.ssh_secret" label="SSH 密码/私钥" :configured="!!editingServer?.ssh_configured" placeholder="用于 Agent 安装与升级" /></n-form-item>
-        </div>
-        <div class="switch-row"><span>启用 Agent 日常管理</span><n-switch v-model:value="serverForm.mgmt_enabled" /></div>
-        <div v-if="editingServer?.agent_configured" class="agent-actions">
-          <n-button size="small" :loading="agentActionId === editingServer.id" @click="testAgent(editingServer)">测试连接</n-button>
-          <n-button size="small" :loading="agentActionId === editingServer.id" @click="pushAgentConfig(editingServer)">下发 frps 配置</n-button>
-          <router-link to="/frp-agent"><n-button size="small" quaternary>打开管理面板</n-button></router-link>
-        </div>
-      </section>
-            </div>
-            <div v-show="serverFormTab === 'advanced'" class="frp-server-modal__advanced">
-      <section class="form-section">
-        <h3><n-icon :component="DocumentTextOutline" /> 日志</h3>
-        <div class="form-grid">
-          <n-form-item label="日志级别"><n-select v-model:value="serverForm.options.log_level" :options="logLevelOptions" /></n-form-item>
-          <n-form-item label="最大天数"><n-input-number v-model:value="serverForm.options.log_max_days" :min="0" :max="3650" /></n-form-item>
-        </div>
-      </section>
-
-      <section class="form-section">
-        <h3><n-icon :component="GitNetworkOutline" /> 传输</h3>
-        <n-form-item label="协议"><n-select v-model:value="serverForm.options.protocol" :options="transportOptions" /></n-form-item>
-        <div class="switch-row"><span>启用 TLS</span><n-switch v-model:value="serverForm.tls_enabled" /><span>禁用自定义 TLS 首字节</span><n-switch v-model:value="serverForm.options.tls_disable_custom_first_byte" /></div>
-        <div v-if="serverForm.tls_enabled" class="tls-panel">
-          <n-form-item label="服务器名称（SNI）"><n-input v-model:value="serverForm.tls_server_name" placeholder="例如：frps.example.com" /></n-form-item>
-          <div class="tls-file-field">
-            <div class="tls-file-field__head"><span>证书文件内容</span><n-button size="small" quaternary @click="openTLSFilePicker('certificate')">从文件加载</n-button></div>
-            <n-input v-model:value="serverForm.tls_certificate" type="textarea" :rows="3" placeholder="粘贴客户端证书 PEM 内容或从文件加载；留空保持现有文件" />
-          </div>
-          <div class="tls-file-field">
-            <div class="tls-file-field__head"><span>密钥文件内容</span><n-button size="small" quaternary @click="openTLSFilePicker('key')">从文件加载</n-button></div>
-            <n-input v-model:value="serverForm.tls_key" type="textarea" :rows="3" placeholder="粘贴客户端私钥 PEM 内容或从文件加载；留空保持现有文件" />
-          </div>
-          <div class="tls-file-field">
-            <div class="tls-file-field__head"><span>受信任的 CA 内容</span><n-button size="small" quaternary @click="openTLSFilePicker('ca')">从文件加载</n-button></div>
-            <n-input v-model:value="serverForm.tls_trusted_ca" type="textarea" :rows="3" placeholder="粘贴 CA PEM 内容或从文件加载；留空保持现有文件" />
-          </div>
-          <input ref="certificateFileInput" class="file-input" type="file" accept=".pem,.crt,.cer,.key,.txt" @change="loadTLSFile('certificate', $event)" />
-          <input ref="keyFileInput" class="file-input" type="file" accept=".pem,.key,.txt" @change="loadTLSFile('key', $event)" />
-          <input ref="caFileInput" class="file-input" type="file" accept=".pem,.crt,.cer,.ca,.txt" @change="loadTLSFile('ca', $event)" />
-          <div class="asset-actions">
-            <n-button v-if="editingServer?.options.tls_certificate_configured" size="small" quaternary type="error" @click="serverForm.clear_tls_certificate = true">清除证书</n-button>
-            <n-button v-if="editingServer?.options.tls_key_configured" size="small" quaternary type="error" @click="serverForm.clear_tls_key = true">清除密钥</n-button>
-            <n-button v-if="editingServer?.options.tls_trusted_ca_configured" size="small" quaternary type="error" @click="serverForm.clear_tls_trusted_ca = true">清除 CA</n-button>
-          </div>
-        </div>
-        <n-collapse class="advanced-collapse">
-          <n-collapse-item title="高级连接设置" name="advanced">
-            <div class="form-grid">
-              <n-form-item label="代理 URL"><n-input v-model:value="serverForm.options.proxy_url" placeholder="http://user:pass@192.168.1.1:8080" /></n-form-item>
-              <n-form-item label="连接池数量"><n-input-number v-model:value="serverForm.options.pool_count" :min="0" :max="100" /></n-form-item>
-              <n-form-item label="拨号超时（秒）"><n-input-number v-model:value="serverForm.options.dial_server_timeout" :min="0" :max="600" /></n-form-item>
-              <n-form-item label="TCP 保活（秒）"><n-input-number v-model:value="serverForm.options.dial_server_keepalive" :min="0" :max="86400" /></n-form-item>
-              <n-form-item label="心跳间隔（秒）"><n-input-number v-model:value="serverForm.options.heartbeat_interval" :min="0" :max="3600" /></n-form-item>
-              <n-form-item label="心跳超时（秒）"><n-input-number v-model:value="serverForm.options.heartbeat_timeout" :min="0" :max="3600" /></n-form-item>
-              <n-form-item label="TCP Mux 保活（秒）"><n-input-number v-model:value="serverForm.options.tcp_mux_keepalive_interval" :min="0" :max="3600" /></n-form-item>
-              <n-form-item label="指定本地源 IP"><n-input v-model:value="serverForm.options.connect_server_local_ip" placeholder="可选" /></n-form-item>
-              <n-form-item label="DNS 服务器"><n-input v-model:value="serverForm.options.dns_server" placeholder="可选，例如：1.1.1.1" /></n-form-item>
-            </div>
-            <div class="switch-row"><span>TCP 多路复用</span><n-switch v-model:value="serverForm.options.tcp_mux" /><span>登录失败即退出</span><n-switch v-model:value="serverForm.options.login_fail_exit" /><span>自动连接</span><n-switch v-model:value="serverForm.options.auto_start" /></div>
-          </n-collapse-item>
-        </n-collapse>
-      </section>
-            </div>
-            <div class="modal-actions"><n-button @click="showServerModal = false">取消</n-button><n-button type="primary" :loading="savingServer" @click="saveServer">保存</n-button></div>
-          </n-form>
-        </div>
-      </div>
-      <div class="proxy-modal__help">
-        <h4>{{ serverFormTab === 'basic' ? '配置说明' : '高级配置说明' }}</h4>
-        <ol>
-          <li v-for="item in serverHelpItems" :key="item.title"><strong>{{ item.title }}</strong>：{{ item.text }}</li>
-        </ol>
-        <div class="proxy-modal__tip">
-          <n-icon :component="InformationCircleOutline" class="proxy-modal__tip-icon" />
-          <span>{{ serverHelpTip }}</span>
-        </div>
-      </div>
-    </div>
-  </n-modal>
-
   <n-modal
     v-model:show="showProxyModal"
     :mask-closable="false"
@@ -509,59 +340,6 @@
     </div>
   </n-modal>
 
-  <n-modal v-model:show="showServerLogs">
-    <div class="frp-card-modal">
-      <div class="proxy-modal__header">
-        <h3 class="modal-title">公网服务端运行日志 - {{ serverLogsTarget?.name ?? '' }}</h3>
-        <n-button size="small" quaternary @click="showServerLogs = false">关闭</n-button>
-      </div>
-      <div class="proxy-modal__scroll">
-    <div class="logs-toolbar">
-      <span class="table-muted">{{ serverLogsTarget?.server_addr }}:{{ serverLogsTarget?.server_port }} · frpc-server-{{ serverLogsTarget?.id }}.log</span>
-      <n-button size="small" :loading="serverLogsLoading" @click="loadServerLogs">刷新</n-button>
-    </div>
-      <pre class="logs-box">{{ serverLogLines.length ? serverLogLines.join('\n') : '暂无该服务端的运行日志' }}</pre>
-      </div>
-      <div class="modal-footer"><n-button @click="showServerLogs = false">关闭</n-button></div>
-    </div>
-  </n-modal>
-
-  <n-modal v-model:show="showServerDetail" preset="card" class="frp-detail-card" :title="viewingServer?.name || '服务端详情'" :style="{ width: 'min(980px, 94vw)', maxHeight: 'calc(100vh - 40px)' }" :content-style="{ maxHeight: 'calc(100vh - 120px)', overflowY: 'auto' }">
-    <div v-if="viewingServer" class="server-detail">
-      <div class="server-detail__top"><div><h2>{{ viewingServer.name }}</h2><p>服务端详情和运行监测</p></div><n-button v-if="viewingServer.boot_status === 'running'" size="small" type="error" ghost @click="stopServer(viewingServer)"><template #icon><n-icon :component="StopOutline" /></template>停止</n-button><n-button v-else size="small" type="success" ghost @click="startServer(viewingServer)"><template #icon><n-icon :component="PlayOutline" /></template>启动</n-button><n-button size="small" @click="openFRPSConfig(viewingServer)"><template #icon><n-icon :component="DocumentOutline" /></template>frps.toml</n-button></div>
-      <div class="server-detail__grid">
-        <section class="server-detail__panel"><h3>基本信息</h3><div class="detail-fields"><div><label>主机地址</label><strong class="mono">{{ viewingServer.server_addr }}</strong></div><div><label>端口</label><strong>{{ viewingServer.server_port }}</strong></div><div><label>用户</label><strong>{{ viewingServer.options.user || '未设置' }}</strong></div><div><label>位置</label><strong class="server-detail__location"><n-icon :component="LocationOutline" /> {{ locationText(viewingServer) }}</strong></div><div><label>状态</label><StatusBadge :value="serverStartupType(viewingServer)" :text="serverStartupText(viewingServer)" /></div><div><label>协议</label><strong>{{ viewingServer.options.protocol.toUpperCase() }}</strong></div><div><label>创建时间</label><span>{{ formatDate(viewingServer.created_at) }}</span></div><div><label>最后更新</label><span>{{ formatDate(viewingServer.updated_at) }}</span></div></div></section>
-        <section class="server-detail__panel">
-          <h3>配置</h3>
-          <div class="detail-fields detail-fields--single">
-            <div><label>描述</label><span>{{ viewingServer.options.remark || '未提供描述。' }}</span></div>
-          </div>
-          <div class="detail-subgroup">
-            <div class="detail-subgroup__title">连接与认证</div>
-            <div class="detail-fields">
-              <div><label>TLS</label><n-tag size="small" :type="viewingServer.tls_enabled ? 'success' : 'warning'" :bordered="false">{{ viewingServer.tls_enabled ? '已启用' : '未启用' }}</n-tag></div>
-              <div><label>认证</label><span>{{ authMethodText(viewingServer.options.auth_method) }}{{ viewingServer.has_token ? '（Token 已配置）' : '' }}</span></div>
-              <div><label>客户端</label><span>{{ runtime.active_version || runtime.detected_version || '当前版本' }}</span></div>
-              <div><label>期望状态</label><span>{{ serverStartupText(viewingServer) }}</span></div>
-              <div><label>frpc 进程</label><span>{{ processStateText(viewingServer) }}{{ viewingServer.process_pid ? `（PID ${viewingServer.process_pid}）` : '' }}</span></div>
-              <div><label>FRP 连接</label><span>{{ connectionStateText(viewingServer) }}</span></div>
-              <div><label>状态来源</label><span>{{ viewingServer.state_source || '未知' }}</span></div>
-            </div>
-          </div>
-          <div class="detail-subgroup">
-            <div class="detail-subgroup__title">诊断</div>
-            <span v-if="(serverDiagnostics[viewingServer.id]?.checks ?? []).length" class="diag-checks"><n-tag v-for="check in serverDiagnostics[viewingServer.id]?.checks ?? []" :key="check.name" size="small" :type="checkTagType(check.state)" :bordered="false" :title="check.detail">{{ checkLabel(check.name) }}·{{ checkStateText(check.state) }}</n-tag></span>
-            <span v-else class="detail-muted">暂无诊断数据，可点「立即诊断」获取</span>
-          </div>
-        </section>
-      </div>
-      <section class="server-detail__panel server-status-panel"><div class="server-detail__section-title"><h3>服务器状态</h3></div><div class="server-status-summary"><div class="server-status-summary__item server-status-summary__item--state"><StatusBadge :kind="detailStatusKind" :text="detailStatusText" /></div><div class="server-status-summary__item"><label>可达率</label><strong>{{ detailAvailability.toFixed(1) }}%</strong></div><div class="server-status-summary__item"><label>平均延迟</label><strong>{{ detailAverageLatency }}ms</strong></div><div class="server-status-summary__item"><label>峰值延迟</label><strong>{{ detailPeakLatency }}ms</strong></div></div><div v-if="detailStatusBars.length" class="status-bars"><div v-for="(sample, index) in detailStatusBars" :key="`${sample.checked_at}-${index}`" class="status-bar" :class="sample.available ? 'status-bar--ok' : 'status-bar--failed'" :data-tooltip="statusBarTooltip(sample)" :aria-label="statusBarTooltip(sample)" role="img" tabindex="0" /></div><div v-else class="status-bars-empty">暂无最近 30 分钟诊断采样</div><div class="status-bars-footer"><span>30 分钟前</span><span><i /> 现在</span></div><div class="detail-status-meta"><span>最近检测：{{ formatDate(detailStatus.last_checked_at) || '尚未检测' }}</span><span v-if="detailStatus.last_error" class="detail-status-error">{{ detailStatus.last_error }}</span></div></section>
-      <section class="server-detail__panel latency-panel"><div class="server-detail__section-title"><h3>延迟曲线</h3><span class="latency-panel__hint">最近 30 分钟</span></div><VChart v-if="detailSamples.length" class="latency-chart" autoresize :option="detailChartOption" /><div v-else class="detail-empty">暂无最近 30 分钟诊断采样</div><div class="detail-chart-footer"><span>延迟（ms）</span><span><i /> 可连接 <b class="detail-legend-failed" /> 失败</span></div></section>
-      <section class="server-detail__panel"><div class="server-detail__section-title"><h3>代理</h3><n-button size="small" quaternary @click="loadDetailData"><template #icon><n-icon :component="RefreshOutline" /></template>刷新</n-button></div><n-data-table :columns="detailProxyColumns" :data="detailProxies" :bordered="false" :single-line="false" size="small" /></section>
-      <section class="server-detail__panel"><div class="server-detail__section-title"><h3>连接日志</h3><n-button size="small" quaternary @click="loadDetailData">刷新</n-button></div><pre class="detail-logs">{{ detailLogs.length ? detailLogs.join('\n') : '暂无该服务端连接日志' }}</pre></section>
-    </div>
-  </n-modal>
-
   <n-modal v-model:show="showExport">
     <div class="frp-card-modal">
       <div class="proxy-modal__header">
@@ -577,32 +355,6 @@
 
   <!-- 公网 Agent 管理已独立为 /frp-agent 页面（AgentView.vue） -->
 
-  <n-modal v-model:show="showFRPSConfig">
-    <div class="frp-card-modal">
-      <div class="proxy-modal__header">
-        <h3 class="modal-title">frps.toml 同源配置 - {{ frpsConfigTarget?.name || '' }}</h3>
-        <n-button size="small" quaternary @click="showFRPSConfig = false">关闭</n-button>
-      </div>
-      <div class="proxy-modal__scroll">
-        <p class="form-hint">与该服务端的 frpc 配置同源生成（bindPort / 认证 / 管理接口一致）；复制到 VPS 保存为 frps.toml 后执行 ./frps -c frps.toml。包含真实 Token，请勿外传。</p>
-                <p v-if="tcpRemotePorts.length" class="form-hint">
-          已启用的 TCP/UDP 隧道远程端口：<span class="mono">{{ tcpRemotePorts.join('、') }}</span>
-          —— 请确认 VPS 防火墙 / 安全组已放行这些端口（frps 侧 allowPorts 已按此生成，未放行时隧道会连不上）。
-        </p>
-        <p v-if="frpsCompare" class="form-hint" :class="{ 'frps-compare--warn': !frpsCompare.ok }">
-          {{ frpsCompare.text }}
-        </p>
-        <pre class="logs-box">{{ frpsConfigContent || '生成中…' }}</pre>
-      </div>
-      <div class="modal-footer">
-        <n-button size="small" :loading="comparingFrps" :disabled="!frpsConfigTarget" @click="compareFrpsConfig">
-          比对 VPS 实际文件
-        </n-button>
-        <n-button @click="showFRPSConfig = false">关闭</n-button>
-      </div>
-    </div>
-  </n-modal>
-
   <n-modal
     v-model:show="showGuide"
     :mask-closable="false"
@@ -894,106 +646,39 @@ import { computed, h, onMounted, onUnmounted, reactive, ref, type VNode } from '
 import type { DataTableColumns } from 'naive-ui'
 import type { FrpProxyTraffic, FrpProxiesTraffic } from '../api/types'
 import { NButton, NIcon, NSpace, NSwitch, NTag, useDialog, useMessage } from 'naive-ui'
-import VChart from 'vue-echarts'
-import { use } from 'echarts/core'
-import { GridComponent, TooltipComponent } from 'echarts/components'
-import { LineChart, ScatterChart } from 'echarts/charts'
-import { CanvasRenderer } from 'echarts/renderers'
 import {
-  AddOutline, CloudOutline, CloseOutline, DocumentOutline, DocumentTextOutline, GitNetworkOutline, InformationCircleOutline,
-  FlashOutline, LayersOutline, LocationOutline, LockClosedOutline, PeopleOutline, PlayOutline, RefreshOutline, ServerOutline, SettingsOutline, StopOutline, SwapHorizontalOutline, TerminalOutline, TimeOutline,
+  AddOutline, CloseOutline, DocumentTextOutline, FlashOutline, GitNetworkOutline, InformationCircleOutline,
+  LayersOutline, PeopleOutline, PlayOutline, RefreshOutline, SettingsOutline, StopOutline, TerminalOutline, TimeOutline,
 } from '@vicons/ionicons5'
 import { RouterLink } from 'vue-router'
 import { api, asList } from '../api/client'
 import { formatBytes, formatDate, formatRate } from '../utils/format'
 
-import type { FrpBinary, FrpDownloadTask, FrpProxy, FrpProxyOptions, FrpProxyPayload, FrpRelease, FrpRuntimeInfo, FrpServer, FrpServerDetail, FrpServerDiagnostics, FrpServerOptions, FrpServerPayload, FrpServerStatusDetail, FrpStatus } from '../api/types'
+import type { FrpBinary, FrpDownloadTask, FrpProxy, FrpProxyOptions, FrpProxyPayload, FrpRelease, FrpRuntimeInfo, FrpServer, FrpStatus } from '../api/types'
 import FonuCard from '../components/FonuCard.vue'
-import ConfiguredSecretField from '../components/ConfiguredSecretField.vue'
 import EmptyState from '../components/EmptyState.vue'
 import LoadError from '../components/LoadError.vue'
 import PageHeader from '../components/PageHeader.vue'
 import StatusBadge from '../components/StatusBadge.vue'
 import MiniTrafficChart from '../components/MiniTrafficChart.vue'
 
-use([CanvasRenderer, LineChart, ScatterChart, GridComponent, TooltipComponent])
-
 const message = useMessage()
 const dialog = useDialog()
 const status = ref<FrpStatus>({ status: 'unknown', configured: false, enabled_proxies: 0 })
 const servers = ref<FrpServer[]>([])
 const proxies = ref<FrpProxy[]>([])
-// 已启用的 TCP/UDP 隧道远程端口：用于提示在 VPS 防火墙放行（与 frps 的 allowPorts 同源）
-const tcpRemotePorts = computed(() => proxies.value
-  .filter((proxy) => proxy.enabled && (proxy.type === 'tcp' || proxy.type === 'udp') && proxy.remote_port)
-  .map((proxy) => proxy.remote_port as number))
 const proxyTraffic = ref<Record<number, FrpProxyTraffic>>({})
 const proxyTrafficErrors = ref<Record<number, string>>({})
-const serverDiagnostics = ref<Record<number, FrpServerDiagnostics>>({})
 const loadError = ref('')
 const actionLoading = ref<'start' | 'stop' | 'reload' | null>(null)
-const testingId = ref<number | null>(null)
-const serverStartingId = ref<number | null>(null)
-const agentActionId = ref<number | null>(null)
-const measuringId = ref<number | null>(null)
-const savingServer = ref(false)
 const savingProxy = ref(false)
-const showServerModal = ref(false)
 const showProxyModal = ref(false)
 const showExport = ref(false)
 const showGuide = ref(false)
 const guideTab = ref<'guide' | 'scenes'>('guide')
-const showServerDetail = ref(false)
 
-// frps.toml 同源配置弹窗：按服务端生成，与 frpc 侧端口/认证一致
-const showFRPSConfig = ref(false)
-const frpsConfigContent = ref('')
-// frps.toml 与 VPS 实际文件的比对结果（P1-3，需 agent ≥ 0.10.0）
-const frpsCompare = ref<{ ok: boolean; text: string } | null>(null)
-const comparingFrps = ref(false)
-
-// 比对前统一去注释、空行与首尾空白：注释和排版差异不算「被手工修改」
-function normalizedConfigLines(text: string) {
-  return text
-    .split('\n')
-    .map((line) => line.trim())
-    .filter((line) => line !== '' && !line.startsWith('#'))
-}
-
-async function compareFrpsConfig() {
-  const target = frpsConfigTarget.value
-  if (!target) return
-  comparingFrps.value = true
-  frpsCompare.value = null
-  try {
-    const remote = await api.getFrpAgentFRPSConfig(target.id)
-    if (!remote.exists) {
-      frpsCompare.value = { ok: false, text: `VPS 上还没有 ${remote.path || 'frps.toml'}，可直接下发写入` }
-      return
-    }
-    const expected = normalizedConfigLines(frpsConfigContent.value)
-    const actual = normalizedConfigLines(remote.content)
-    const index = expected.findIndex((line, i) => actual[i] !== line)
-    if (index === -1 && expected.length === actual.length) {
-      frpsCompare.value = { ok: true, text: `与 VPS 上的 ${remote.path} 一致（已忽略注释与空行）` }
-      return
-    }
-    const at = index === -1 ? Math.min(expected.length, actual.length) : index
-    frpsCompare.value = {
-      ok: false,
-      text: `不一致：第 ${at + 1} 行 下发「${expected[at] ?? '（无）'}」/ VPS「${actual[at] ?? '（无）'}」——VPS 上的 frps.toml 可能被手工改过，重新下发会覆盖`,
-    }
-  } catch (error) {
-    frpsCompare.value = { ok: false, text: error instanceof Error ? error.message : '比对失败' }
-  } finally {
-    comparingFrps.value = false
-  }
-}
-const frpsConfigTarget = ref<FrpServer | null>(null)
-const frpsConfigLoading = ref(false)
 const showRuntimeModal = ref(false)
 const proxyFormTab = ref<'basic' | 'advanced'>('basic')
-const serverFormTab = ref<'basic' | 'advanced' | 'remote'>('basic')
 const exportContent = ref('')
 const runtimeLoading = ref(false)
 const savingDownloadProxy = ref(false)
@@ -1012,34 +697,10 @@ const downloadProxyOptions = [
   { label: 'v4.gh-proxy.org', value: 'https://v4.gh-proxy.org/' },
   { label: 'cdn.gh-proxy.org', value: 'https://cdn.gh-proxy.org/' },
 ]
-const editingServer = ref<FrpServer | null>(null)
-const viewingServer = ref<FrpServer | null>(null)
-const detailProxies = ref<FrpProxy[]>([])
-const detailLogs = ref<string[]>([])
-const detailStatus = ref<FrpServerStatusDetail>({ available: false, availability: 0, average_latency_ms: 0, peak_latency_ms: 0, samples: [] })
 const editingProxy = ref<FrpProxy | null>(null)
-const certificateFileInput = ref<HTMLInputElement | null>(null)
-const keyFileInput = ref<HTMLInputElement | null>(null)
-const caFileInput = ref<HTMLInputElement | null>(null)
 let timer: number | undefined
 let downloadTimer: number | undefined
-let diagnosticsAt = 0
 
-function defaultServerOptions(): FrpServerOptions {
-  return {
-    auth_method: 'token', log_level: 'info', log_max_days: 3, protocol: 'tcp', dial_server_timeout: 10,
-    dial_server_keepalive: 7200, pool_count: 0, tcp_mux: true, tcp_mux_keepalive_interval: 60,
-    heartbeat_interval: 30, heartbeat_timeout: 90, login_fail_exit: true, tls_disable_custom_first_byte: false, auto_start: false,
-    dashboard_addr: '', dashboard_port: 0, dashboard_user: '',
-  }
-}
-
-const serverForm = reactive({
-  name: '', server_addr: '', server_port: 7000, tls_enabled: true, tls_server_name: '', enabled: true, token: '',
-  agent_url: '', agent_token: '', ssh_host: '', ssh_port: 22, ssh_user: 'root', ssh_auth: 'key', ssh_secret: '', mgmt_enabled: false,
-  oidc_client_secret: '', dashboard_password: '', clear_dashboard_password: false, tls_certificate: '', tls_key: '', tls_trusted_ca: '', clear_tls_certificate: false,
-  clear_tls_key: false, clear_tls_trusted_ca: false, options: defaultServerOptions(),
-})
 function defaultProxyOptions(): FrpProxyOptions & { allow_ips_text?: string } {
   return { transport: {}, health_check: {}, load_balancer: {}, nat_traversal: { disable_assisted_addrs: false }, allow_ips_text: '' }
 }
@@ -1075,27 +736,6 @@ const pluginTypeOptions = [
   { label: 'Unix Domain Socket', value: 'unix_domain_socket' }, { label: 'HTTP Proxy', value: 'http_proxy' }, { label: 'Socks5', value: 'socks5' }, { label: 'Static File', value: 'static_file' },
   { label: 'HTTP 转 HTTPS', value: 'http2https' }, { label: 'HTTPS 转 HTTP', value: 'https2http' }, { label: 'HTTPS 转 HTTPS', value: 'https2https' }, { label: 'HTTP 转 HTTP', value: 'http2http' }, { label: 'TLS 转 Raw', value: 'tls2raw' },
 ]
-const serverHelpItems = computed(() => {
-  if (serverFormTab.value === 'advanced') return [
-    { title: '日志', text: 'frpc 运行日志的级别与保留天数；排查连接问题时建议临时调到 debug。' },
-    { title: '传输协议', text: 'TCP 兼容性最好；KCP/QUIC 在丢包链路上更流畅，WebSocket/WSS 适合经过反向代理或 CDN 的场景，需 frps 侧支持。' },
-    { title: 'TLS', text: '默认启用；证书与密钥用于双向认证，受信任的 CA 用于校验 frps 证书，SNI 与 frps 侧证书域名一致。' },
-    { title: '连接调优', text: '心跳与 TCP 多路复用保持默认即可；网络不稳定时可加大超时，连接池可降低高并发时的建连延迟。' },
-  ]
-  const common = [
-    { title: '基本信息', text: '主机地址和端口对应 frps 的 bindAddr / bindPort，多个服务端可并行配置，规则保存时选择归属。' },
-    { title: '认证方式', text: '与 frps 的 auth 配置保持一致：无认证、令牌（auth.token）或 OIDC；令牌与密钥加密存储，编辑时留空保持不变。' },
-    { title: 'frps 管理接口', text: 'frps 开启 webServer（dashboard）后填写，Fonu 借此拉取穿透规则的实时连接与流量；不写入 frpc.toml，与连接认证无关。' },
-    { title: '描述', text: '仅用于在 Fonu 中区分多台服务端的备注信息。' },
-  ]
-  if (serverForm.options.auth_method === 'oidc') return [...common, { title: 'OIDC', text: '客户端 ID、密钥和令牌端点由身份提供商提供；受众与权限范围需与 frps 的 OIDC 校验配置匹配。' }]
-  return common
-})
-const serverHelpTip = computed(() => {
-  if (serverFormTab.value === 'advanced') return '传输参数需与 frps 服务端配置匹配；修改后请点击“校验并应用配置”。'
-  if (serverForm.options.auth_method === 'oidc') return 'OIDC 需要身份提供商支持客户端凭证模式，且 frps 侧已启用相同的 OIDC 校验。'
-  return '请先在 VPS 上部署 frps 并放行对应端口，再保存服务端配置。'
-})
 const proxyHelpItems = computed(() => {
   if (proxyFormTab.value === 'advanced') return [
     { title: '传输安全', text: '加密和压缩只作用于该规则；Proxy Protocol 需要内网服务支持对应版本。' },
@@ -1131,11 +771,6 @@ function applyProxyQuickExample() {
   message.success(`已填入${example.title}示例，请按实际环境调整后保存`)
 }
 
-const logLevelOptions = ['trace', 'debug', 'info', 'warn', 'error'].map((value) => ({ label: value.toUpperCase(), value }))
-const transportOptions = [
-  { label: 'TCP', value: 'tcp' }, { label: 'KCP', value: 'kcp' }, { label: 'QUIC', value: 'quic' },
-  { label: 'WebSocket', value: 'websocket' }, { label: 'WSS', value: 'wss' },
-]
 const proxyServerOptions = computed(() => servers.value.map((server) => ({ label: `${server.name} (${server.server_addr}:${server.server_port})`, value: server.id })))
 const statusLabel = computed(() => ({ running: '运行中', stopped: '已停止', unknown: '未配置' })[status.value.status] ?? '异常')
 // 返回的必须是 StatusKind 合法值（success/warning/error/disabled/unknown），
@@ -1157,35 +792,9 @@ const frpTypeTagType: Record<FrpProxy['type'], 'info' | 'success' | 'warning' |
   tcp: 'info', udp: 'default', http: 'success', https: 'success', tcpmux: 'info', stcp: 'warning', sudp: 'warning', xtcp: 'warning',
 }
 
-// 公网服务端列表：与规则表一致用 n-data-table（列宽固定，表头与数据天然对齐）
-const serverColumns = computed<DataTableColumns<FrpServer>>(() => [
-  { title: '名称', key: 'name', width: 190, render: (row) => h('div', { class: 'cell-name' }, [h(NIcon, { component: CloudOutline }), h('span', row.name)]) },
-  { title: '主机', key: 'host', width: 170, render: (row) => h('span', { class: 'mono cell-wrap' }, row.server_addr) },
-  { title: '端口', key: 'port', width: 90, render: (row) => h(NTag, { size: 'small', bordered: false }, { default: () => String(row.server_port) }) },
-  { title: '延迟', key: 'latency', width: 130, render: (row) => h('div', { class: 'cell-inline', title: latencyDetail(row) }, [h(NIcon, { component: FlashOutline }), h('span', latencyText(row))]) },
-  { title: '位置', key: 'location', width: 150, render: (row) => h('div', { class: 'cell-inline' }, [h(NIcon, { component: LocationOutline }), h('span', locationText(row))]) },
-  { title: '配置', key: 'config', width: 230, render: (row) => h('div', { class: 'cell-inline' }, [
-    h(NTag, { size: 'small', bordered: false, type: row.tls_enabled ? 'success' : 'warning' }, { default: () => `TLS ${row.tls_enabled ? '已启用' : '未启用'}` }),
-    h(NTag, { size: 'small', bordered: false, type: row.has_token ? 'success' : 'error' }, { default: () => `Token ${row.has_token ? '已配置' : '缺失'}` }),
-  ]) },
-  { title: '启动状态', key: 'startup', width: 170, render: (row) => h(NTag, { size: 'small', bordered: false, type: serverStartupType(row), title: serverStateTooltip(row) }, { default: () => `${serverStartupText(row)} · ${connectionStateText(row)}` }) },
-  { title: '操作', key: 'actions', width: 560, align: 'right', render: (row) => h('div', { class: 'cell-actions' }, [
-    row.boot_status === 'running'
-      ? h(NButton, { size: 'small', type: 'error', ghost: true, loading: serverStartingId.value === row.id, onClick: () => stopServer(row) }, { default: () => '停止' })
-      : h(NButton, { size: 'small', type: 'success', ghost: true, loading: serverStartingId.value === row.id, onClick: () => startServer(row) }, { default: () => '启动' }),
-    h(NButton, { size: 'small', quaternary: true, onClick: () => openServerDetail(row) }, { default: () => '查看' }),
-    h(NButton, { size: 'small', quaternary: true, onClick: () => openServerLogs(row) }, { default: () => '日志' }),
-    h(NButton, { size: 'small', quaternary: true, loading: measuringId.value === row.id, onClick: () => measureServer(row) }, { default: () => '测速' }),
-    h(NButton, { size: 'small', quaternary: true, loading: testingId.value === row.id, onClick: () => testServer(row) }, { default: () => '校验' }),
-    row.agent_configured ? h(RouterLink, { to: '/frp-agent' }, { default: () => h(NButton, { size: 'small', quaternary: true }, { default: () => 'Agent 管理' }) }) : null,
-    h(NButton, { size: 'small', quaternary: true, onClick: () => openServerModal(row) }, { default: () => '编辑' }),
-    h(NButton, { size: 'small', quaternary: true, type: 'error', onClick: () => confirmDeleteServer(row) }, { default: () => '删除' }),
-  ]) },
-])
-
+// 穿透规则表格：列宽固定，各行列天然对齐（单元格由 render 创建，样式必须 :deep()）
 const columns = computed<DataTableColumns<FrpProxy>>(() => [
   { title: '名称', key: 'name', minWidth: 150, render: (row) => h('div', [h('strong', row.name), row.remark ? h('div', { class: 'table-muted' }, row.remark) : null]) },
-  { title: '服务端', key: 'server_id', minWidth: 130, render: (row) => servers.value.find((server) => server.id === row.server_id)?.name ?? `#${row.server_id}` },
   { title: '类型', key: 'type', width: 92, render: (row) => h(NTag, { size: 'small', type: frpTypeTagType[row.type], bordered: false, round: true }, () => row.type.toUpperCase()) },
   { title: '内网目标', key: 'local', minWidth: 170, render: (row) => h('code', proxyLocalTarget(row)) },
   { title: '公网入口', key: 'public', minWidth: 200, render: (row) => h('code', proxyPublicEndpoint(row)) },
@@ -1219,9 +828,38 @@ const columns = computed<DataTableColumns<FrpProxy>>(() => [
   ]) },
 ])
 
+// 左侧选中服务端 → 右侧只列该服务端的规则；存 id 而不是对象，避免列表刷新后指向旧快照
+const selectedServerId = ref<number | null>(null)
+const selectedServer = computed(() => servers.value.find((item) => item.id === selectedServerId.value) ?? null)
+const serverProxies = computed(() => proxies.value.filter((item) => item.server_id === selectedServerId.value))
+
 const showProxyDetail = ref(false)
 const detailProxy = ref<FrpProxy | null>(null)
 const proxyDetailTab = ref<'overview' | 'logs'>('overview')
+
+// 左侧列表的状态标签：只用列表接口就带的 boot_status，不为此额外拉诊断
+function serverBootLabel(server: FrpServer) {
+  switch (server.boot_status) {
+    case 'running': return '运行中'
+    case 'starting': return '启动中'
+    case 'error': return '异常'
+    default: return '已停止'
+  }
+}
+function serverBootType(server: FrpServer): 'success' | 'warning' | 'error' | 'default' {
+  switch (server.boot_status) {
+    case 'running': return 'success'
+    case 'starting': return 'warning'
+    case 'error': return 'error'
+    default: return 'default'
+  }
+}
+function serverRuleCount(serverID: number) {
+  return proxies.value.filter((item) => item.server_id === serverID).length
+}
+function serverEnabledRuleCount(serverID: number) {
+  return proxies.value.filter((item) => item.server_id === serverID && item.enabled).length
+}
 const proxyLogLines = ref<string[]>([])
 const proxyLogsLoading = ref(false)
 
@@ -1258,6 +896,12 @@ function recordProxyRateSample() {
   proxyRateHistory.value = proxyRateHistory.value.filter((p) => now - p.at <= 5 * 60 * 1000)
 }
 
+// 切服务端：右侧表格跟着换
+function selectServer(id: number) {
+  if (selectedServerId.value === id) return
+  selectedServerId.value = id
+}
+
 function openProxyDetail(proxy: FrpProxy, tab: 'overview' | 'logs' = 'overview') {
   detailProxy.value = proxy
   proxyDetailTab.value = tab
@@ -1295,135 +939,12 @@ function proxyDetailValue(proxy: FrpProxy, key: 'local' | 'public' | 'transport'
     case 'lb': return proxy.options?.load_balancer?.group ?? '未配置'
   }
 }
-const detailProxyColumns = computed<DataTableColumns<FrpProxy>>(() => [
-  { title: '名称', key: 'name', minWidth: 130 },
-  { title: '类型', key: 'type', width: 80, render: (row) => h('span', { class: 'type-chip' }, row.type.toUpperCase()) },
-  { title: '本地目标', key: 'local', minWidth: 150, render: (row) => h('code', `${row.local_ip}:${row.local_port}`) },
-  { title: '公网入口', key: 'public', minWidth: 180, render: (row) => h('code', proxyPublicEndpoint(row)) },
-  { title: '状态', key: 'enabled', width: 90, render: (row) => h('span', { class: row.enabled ? 'detail-status--on' : 'detail-status--off' }, row.enabled ? '已启用' : '已停用') },
-])
-const detailSamples = computed(() => detailStatus.value.samples)
-const detailStatusBars = computed(() => {
-  const samples = detailSamples.value
-  if (samples.length <= 30) return samples
-  const step = (samples.length - 1) / 29
-  return Array.from({ length: 30 }, (_, index) => samples[Math.round(index * step)]).filter(Boolean)
-})
-const detailAvailability = computed(() => detailStatus.value.availability)
-const detailAverageLatency = computed(() => detailStatus.value.average_latency_ms)
-const detailPeakLatency = computed(() => detailStatus.value.peak_latency_ms)
-const detailStatusText = computed(() => detailStatus.value.available ? '正常' : detailSamples.value.length ? '异常' : '待检测')
-const detailStatusKind = computed(() => detailStatus.value.available ? 'success' : detailSamples.value.length ? 'error' : 'warning')
-const detailChartOption = computed(() => {
-  const samples = detailSamples.value
-  const times = samples.map((sample) => sample.checked_at)
-  const latency = samples.map((sample) => sample.available ? sample.latency_ms ?? 0 : null)
-  const failures = samples.map((sample, index) => sample.available ? null : [index, 0])
-  return {
-    animation: false,
-    grid: { left: 42, right: 18, top: 20, bottom: 32 },
-    tooltip: { trigger: 'axis', formatter: (params: Array<{ dataIndex: number }>) => formatChartTooltip(samples, params[0]?.dataIndex ?? 0) },
-    xAxis: { type: 'category', boundaryGap: false, data: times, axisLabel: { formatter: (value: string) => formatChartTime(value) } },
-    yAxis: { type: 'value', min: 0, name: 'ms', nameTextStyle: { padding: [0, 0, 0, 8] } },
-    series: [
-      { name: '延迟', type: 'line', smooth: 0.25, connectNulls: false, data: latency, symbol: 'circle', symbolSize: 6, lineStyle: { color: '#18a058', width: 2 }, itemStyle: { color: '#18a058' }, areaStyle: { color: 'rgba(24,160,88,0.12)' } },
-      { name: '失败', type: 'scatter', data: failures, symbolSize: 9, itemStyle: { color: '#d03050' }, tooltip: { formatter: () => '连接失败' } },
-    ],
-  }
-})
-
-function formatChartTime(value: string) {
-  const date = new Date(value.includes('T') ? value : value.replace(' ', 'T') + 'Z')
-  return Number.isNaN(date.getTime()) ? value : date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-}
-
-function formatChartTooltip(samples: FrpServerDetail['status']['samples'], index: number) {
-  const sample = samples[index]
-  if (!sample) return ''
-  const time = formatChartTime(sample.checked_at)
-  if (sample.available) return time + '<br/>延迟：' + (sample.latency_ms ?? 0) + ' ms'
-  return time + '<br/>连接失败' + (sample.error ? '：' + sample.error : '')
-}
-
-function statusBarTooltip(sample: FrpServerDetail['status']['samples'][number]) {
-  const time = formatChartTime(sample.checked_at)
-  if (sample.available) return `${time}：可连接，延迟 ${sample.latency_ms ?? 0} ms`
-  return `${time}：连接失败${sample.error ? `：${sample.error}` : ''}`
-}
-
-function resetServerForm() {
-  Object.assign(serverForm, {
-    name: '', server_addr: '', server_port: 7000, tls_enabled: true, tls_server_name: '', enabled: true, token: '',
-    oidc_client_secret: '', dashboard_password: '', clear_dashboard_password: false, tls_certificate: '', tls_key: '', tls_trusted_ca: '', clear_tls_certificate: false,
-    clear_tls_key: false, clear_tls_trusted_ca: false,
-  })
-  Object.assign(serverForm.options, defaultServerOptions())
-}
-
 function resetProxyForm() {
   proxyFormTab.value = 'basic'
-  Object.assign(proxyForm, { server_id: servers.value.find((server) => server.enabled)?.id ?? servers.value[0]?.id ?? 0, name: '', type: 'tcp', local_ip: '127.0.0.1', local_port: 80, remote_port: 0, domains_text: '', locations_text: '', allow_users_text: '', metadatas_text: '', request_headers_text: '', response_headers_text: '', host_header_rewrite: '', enabled: true, remark: '', plugin_type: '', plugin_local_addr: '', plugin_unix_path: '', plugin_local_path: '', plugin_username: '', plugin_password: '' })
+  Object.assign(proxyForm, { server_id: selectedServerId.value ?? servers.value.find((server) => server.enabled)?.id ?? servers.value[0]?.id ?? 0, name: '', type: 'tcp', local_ip: '127.0.0.1', local_port: 80, remote_port: 0, domains_text: '', locations_text: '', allow_users_text: '', metadatas_text: '', request_headers_text: '', response_headers_text: '', host_header_rewrite: '', enabled: true, remark: '', plugin_type: '', plugin_local_addr: '', plugin_unix_path: '', plugin_local_path: '', plugin_username: '', plugin_password: '' })
   Object.assign(proxyForm.options, defaultProxyOptions())
 }
 
-function openServerModal(server?: FrpServer) {
-  editingServer.value = server ?? null
-  serverFormTab.value = 'basic'
-  resetServerForm()
-  if (server) {
-    Object.assign(serverForm, { ...server, token: '', oidc_client_secret: '', agent_token: '', ssh_secret: '' })
-    Object.assign(serverForm.options, server.options)
-  }
-  showServerModal.value = true
-}
-
-function openServerDetail(server: FrpServer) {
-  viewingServer.value = server
-  detailStatus.value = { available: false, availability: 0, average_latency_ms: 0, peak_latency_ms: 0, samples: [] }
-  detailProxies.value = []
-  detailLogs.value = []
-  showServerDetail.value = true
-  void loadDetailData()
-}
-
-async function loadDetailData() {
-  const server = viewingServer.value
-  if (!server) return
-  try {
-    const [detail, nextLogs] = await Promise.all([api.getFrpServerDetail(server.id), api.getFrpLogs(300)])
-    viewingServer.value = detail.server
-    detailStatus.value = detail.status
-    serverDiagnostics.value = { ...serverDiagnostics.value, [server.id]: {
-      server_id: server.id, available: detail.status.available, latency_ms: detail.status.average_latency_ms,
-      location: serverDiagnostics.value[server.id]?.location, error: detail.status.last_error,
-    } }
-    detailProxies.value = asList(detail.proxies)
-    const matchingLogs = asList(nextLogs).filter((line) => line.includes(server.server_addr) || line.includes(`[${server.name}]`))
-    detailLogs.value = (matchingLogs.length ? matchingLogs : asList(nextLogs)).slice(-100)
-  } catch (error) { message.error(error instanceof Error ? error.message : '读取服务端详情失败') }
-}
-
-
-const showServerLogs = ref(false)
-const serverLogsTarget = ref<FrpServer | null>(null)
-const serverLogLines = ref<string[]>([])
-const serverLogsLoading = ref(false)
-
-function openServerLogs(server: FrpServer) {
-  serverLogsTarget.value = server
-  showServerLogs.value = true
-  void loadServerLogs()
-}
-
-async function loadServerLogs() {
-  const server = serverLogsTarget.value
-  if (!server) return
-  serverLogsLoading.value = true
-  try { serverLogLines.value = asList(await api.getFrpLogs(200, server.id)) }
-  catch (error) { message.error(error instanceof Error ? error.message : '读取服务端日志失败') }
-  finally { serverLogsLoading.value = false }
-}
-
 function openProxyModal(proxy?: FrpProxy) {
   proxyFormTab.value = 'basic'
   editingProxy.value = proxy ?? null
@@ -1446,104 +967,16 @@ async function load() {
     status.value = nextStatus
     servers.value = asList(nextServers)
     proxies.value = asList(nextProxies)
-    void loadServerDiagnostics(servers.value)
+    // 选中服务端失效（被删 / 首次进入）时回落到第一台，右侧表格不空
+    if (selectedServerId.value === null || !servers.value.some((item) => item.id === selectedServerId.value)) {
+      selectedServerId.value = servers.value[0]?.id ?? null
+    }
     void loadProxyTraffic()
   } catch (error) {
     loadError.value = error instanceof Error ? error.message : '加载 FRP 配置失败'
   }
 }
 
-async function loadServerDiagnostics(items: FrpServer[]) {
-  if (items.length === 0 || Date.now() - diagnosticsAt < 30_000) return
-  diagnosticsAt = Date.now()
-  const results = await Promise.all(items.map(async (server) => {
-    try { return await api.getFrpServerDiagnostics(server.id) }
-    catch { return { server_id: server.id, available: false, error: '不可达' } }
-  }))
-  serverDiagnostics.value = Object.fromEntries(results.map((item) => [item.server_id, item]))
-}
-
-function latencyText(server: FrpServer) {
-  const diagnostics = serverDiagnostics.value[server.id]
-  if (!diagnostics) return '未测速'
-  if (!diagnostics.available) return diagnostics.error?.includes('本机网络策略') ? '受限' : '不可达'
-  return `${diagnostics.latency_ms ?? 0} ms`
-}
-
-function latencyDetail(server: FrpServer) {
-  return serverDiagnostics.value[server.id]?.error || ''
-}
-
-function locationText(server: FrpServer) {
-  return serverDiagnostics.value[server.id]?.location || server.server_addr || '定位中'
-}
-
-function authMethodText(method: FrpServerOptions['auth_method']) {
-  return { none: '无认证', token: 'Token', oidc: 'OIDC（开放身份连接）' }[method] ?? method
-}
-
-function serverStartupText(server: FrpServer) {
-  const labels = { starting: '启动中', running: '运行中', stopped: '已停止', error: '异常' }
-  return labels[server.boot_status] ?? '已停止'
-}
-
-function serverStartupType(server: FrpServer) {
-  if (server.boot_status === 'running') return 'success'
-  if (server.boot_status === 'starting') return 'warning'
-  if (server.boot_status === 'error') return 'error'
-  return 'default'
-}
-
-function processStateText(server: FrpServer) {
-  return ({ starting: '启动中', running: '运行中', stopped: '已停止', error: '异常', unknown: '未知' } as Record<string, string>)[server.process_state] ?? '未知'
-}
-
-function connectionStateText(server: FrpServer) {
-  return ({ connected: '已连接', connecting: '连接中', disconnected: '未连接', error: '连接异常', unknown: '连接未知' } as Record<string, string>)[server.connection_state] ?? '连接未知'
-}
-
-function serverStateTooltip(server: FrpServer) {
-  return `期望：${serverStartupText(server)}；frpc：${processStateText(server)}；FRP：${connectionStateText(server)}${server.last_error ? `；${server.last_error}` : ''}`
-}
-
-async function saveServer() {
-  savingServer.value = true
-  try {
-    const payload: FrpServerPayload = {
-      name: serverForm.name, server_addr: serverForm.server_addr, server_port: serverForm.server_port,
-      agent_url: serverForm.agent_url, agent_token: serverForm.agent_token, ssh_host: serverForm.ssh_host,
-      ssh_port: serverForm.ssh_port, ssh_user: serverForm.ssh_user, ssh_auth: serverForm.ssh_auth,
-      ssh_secret: serverForm.ssh_secret, mgmt_enabled: serverForm.mgmt_enabled,
-      tls_enabled: serverForm.tls_enabled, tls_server_name: serverForm.tls_server_name, enabled: serverForm.enabled,
-      token: serverForm.token, options: { ...serverForm.options }, oidc_client_secret: serverForm.oidc_client_secret,
-      dashboard_password: serverForm.dashboard_password, clear_dashboard_password: serverForm.clear_dashboard_password,
-      tls_certificate: serverForm.tls_certificate, tls_key: serverForm.tls_key, tls_trusted_ca: serverForm.tls_trusted_ca,
-      clear_tls_certificate: serverForm.clear_tls_certificate, clear_tls_key: serverForm.clear_tls_key,
-      clear_tls_trusted_ca: serverForm.clear_tls_trusted_ca,
-    }
-    if (editingServer.value) await api.updateFrpServer(editingServer.value.id, payload)
-    else await api.createFrpServer(payload)
-    showServerModal.value = false
-    message.success('服务端配置已保存')
-    await load()
-  } catch (error) { message.error(error instanceof Error ? error.message : '保存失败') }
-  finally { savingServer.value = false }
-}
-
-async function testAgent(server: FrpServer) {
-  agentActionId.value = server.id
-  try { await api.testFrpAgent(server.id); message.success('Agent 连接正常') }
-  catch (error) { message.error(error instanceof Error ? error.message : 'Agent 连接失败') }
-  finally { agentActionId.value = null }
-}
-
-async function pushAgentConfig(server: FrpServer) {
-  agentActionId.value = server.id
-  try { await api.pushFrpConfigToAgent(server.id); message.success('frps 配置已下发') }
-  catch (error) { message.error(error instanceof Error ? error.message : '下发配置失败') }
-  finally { agentActionId.value = null }
-}
-
 async function saveProxy() {
   const server = servers.value.find((item) => item.id === proxyForm.server_id)
   if (!server) return
@@ -1595,61 +1028,6 @@ function startClient() { return runAction('start') }
 function stopClient() { return runAction('stop') }
 function reloadClient() { return runAction('reload') }
 
-async function startServer(server: FrpServer) {
-  serverStartingId.value = server.id
-  try {
-    const updated = await api.startFrpServer(server.id)
-    servers.value = servers.value.map((item) => item.id === updated.id ? updated : item)
-    viewingServer.value = updated
-    message.success('服务端已标记为启动状态')
-  } catch (error) { message.error(error instanceof Error ? error.message : '启动服务端失败') }
-  finally { serverStartingId.value = null }
-}
-
-async function stopServer(server: FrpServer) {
-  serverStartingId.value = server.id
-  try {
-    const updated = await api.stopFrpServer(server.id)
-    servers.value = servers.value.map((item) => item.id === updated.id ? updated : item)
-    viewingServer.value = updated
-    message.success('服务端已停止')
-  } catch (error) { message.error(error instanceof Error ? error.message : '停止服务端失败') }
-  finally { serverStartingId.value = null }
-}
-
-async function measureServer(server: FrpServer) {
-  measuringId.value = server.id
-  try {
-    const diagnostics = await api.getFrpServerDiagnostics(server.id)
-    serverDiagnostics.value = { ...serverDiagnostics.value, [server.id]: diagnostics }
-    if (!diagnostics.available) {
-      message.error(diagnostics.error || '控制端口不可达')
-      return
-    }
-    // TCP 可达不等于可用：登录失败等关键项单独提示
-    const login = diagnostics.checks?.find((check) => check.name === 'frpc_login')
-    if (login?.state === 'failed') {
-      message.warning(`控制端口可达，但 ${login.detail ?? 'frpc 登录失败'}`)
-      return
-    }
-    message.info(`控制端口延迟 ${diagnostics.latency_ms ?? 0} ms`)
-  } catch (error) { message.error(error instanceof Error ? error.message : '测速失败') }
-  finally { measuringId.value = null }
-}
-
-const diagnosticCheckLabels: Record<string, string> = {
-  tcp_reachable: '控制端口', frpc_login: 'frpc 登录', proxy_reachable: '发布入口', dns_resolution: 'DNS 解析', location: '定位',
-}
-function checkLabel(name: string) {
-  return diagnosticCheckLabels[name] ?? name
-}
-function checkStateText(state: string) {
-  return { ok: '正常', failed: '异常', unknown: '未知' }[state] ?? state
-}
-function checkTagType(state: string) {
-  return state === 'ok' ? 'success' : state === 'failed' ? 'error' : 'warning'
-}
-
 async function openRuntimeModal() {
   showRuntimeModal.value = true
   await loadRuntimeConfig()
@@ -1768,22 +1146,11 @@ function formatBinarySize(size: number) {
   return `${(size / (1024 * 1024)).toFixed(1)} MB`
 }
 
-async function testServer(server: FrpServer) {
-  testingId.value = server.id
-  try { message.success((await api.testFrpServer(server.id)).message) }
-  catch (error) { message.error(error instanceof Error ? error.message : '校验失败') }
-  finally { testingId.value = null }
-}
-
 async function toggleProxy(proxy: FrpProxy, enabled: boolean) {
   try { await api.updateFrpProxy(proxy.id, { ...proxy, enabled }); await load() }
   catch (error) { message.error(error instanceof Error ? error.message : '更新失败') }
 }
 
-function confirmDeleteServer(server: FrpServer) {
-  dialog.warning({ title: '删除服务端', content: `将删除「${server.name}」及其规则；不会停止本机 frpc。是否继续？`, positiveText: '删除', negativeText: '取消', onPositiveClick: async () => { try { await api.deleteFrpServer(server.id); message.success('服务端已删除'); await load() } catch (error) { message.error(error instanceof Error ? error.message : '删除失败') } } })
-}
-
 function confirmDeleteProxy(proxy: FrpProxy) {
   dialog.warning({ title: '删除规则', content: `确定删除「${proxy.name}」吗？`, positiveText: '删除', negativeText: '取消', onPositiveClick: async () => { try { await api.deleteFrpProxy(proxy.id); message.success('规则已删除'); await load() } catch (error) { message.error(error instanceof Error ? error.message : '删除失败') } } })
 }
@@ -1793,19 +1160,6 @@ async function loadExport() {
   catch (error) { message.error(error instanceof Error ? error.message : '导出失败') }
 }
 
-async function openFRPSConfig(server: FrpServer) {
-  frpsConfigTarget.value = server
-  showFRPSConfig.value = true
-  frpsCompare.value = null
-  frpsConfigLoading.value = true
-  try { frpsConfigContent.value = (await api.getFrpFRPSConfig(server.id)).content }
-  catch (error) {
-    showFRPSConfig.value = false
-    message.error(error instanceof Error ? error.message : '生成 frps.toml 失败')
-  }
-  finally { frpsConfigLoading.value = false }
-}
-
 function proxyPublicEndpoint(proxy: FrpProxy) {
   if (proxy.type === 'tcp' || proxy.type === 'udp') return `:${proxy.remote_port ?? '-'}`
   if (proxy.type === 'stcp' || proxy.type === 'sudp' || proxy.type === 'xtcp') return '密钥访问'
@@ -1850,33 +1204,8 @@ function proxyTransportTags(proxy: FrpProxy) {
   return tags
 }
 
-function openTLSFilePicker(target: 'certificate' | 'key' | 'ca') {
-  const inputs = { certificate: certificateFileInput, key: keyFileInput, ca: caFileInput }
-  inputs[target].value?.click()
-}
-
-async function loadTLSFile(target: 'certificate' | 'key' | 'ca', event: Event) {
-  const input = event.target as HTMLInputElement
-  const file = input.files?.[0]
-  input.value = ''
-  if (!file) return
-  if (file.size > 1 << 20) {
-    message.error('证书文件不能超过 1MB')
-    return
-  }
-  const content = (await file.text()).trim()
-  if (!content.includes('-----BEGIN')) {
-    message.error('请选择 PEM 格式的证书、私钥或 CA 文件')
-    return
-  }
-  if (target === 'certificate') serverForm.tls_certificate = content
-  if (target === 'key') serverForm.tls_key = content
-  if (target === 'ca') serverForm.tls_trusted_ca = content
-  message.success(`已加载 ${file.name}`)
-}
-
 onMounted(async () => { await load(); timer = window.setInterval(load, 5_000) })
-onUnmounted(() => { if (timer) window.clearInterval(timer); stopDownloadPolling() })
+onUnmounted(() => { if (timer) window.clearInterval(timer); if (proxyRateTimer) { window.clearInterval(proxyRateTimer); proxyRateTimer = null } stopDownloadPolling() })
 </script>
 
 <style scoped>
@@ -2116,10 +1445,6 @@ onUnmounted(() => { if (timer) window.clearInterval(timer); stopDownloadPolling(
 .table-muted { margin-top: 4px; color: var(--fonu-text-muted); font-size: 12px; }
 .type-chip { font-family: var(--fonu-mono); font-size: 12px; color: var(--fonu-brand-text); }
 /* 规则表单元格由 render 函数的 h() 创建，不带 scoped 属性，必须 :deep() 才能命中 */
-.frp-rules-table :deep(.table-muted) { color: var(--fonu-text-muted); font-size: 12px; }
-.frp-rules-table :deep(.type-chip) { font-family: var(--fonu-mono); font-size: 12px; color: var(--fonu-brand-text); }
-.frp-rules-table :deep(.mono) { font-family: var(--fonu-mono); font-size: 13px; }
-.frp-rules-table :deep(.text-secondary) { color: var(--fonu-text-secondary); }
 .runtime-actions, .runtime-section__title, .binary-row, .binary-row__actions { display: flex; align-items: center; gap: var(--fonu-space-3); }
 .runtime-actions { justify-content: flex-end; margin-bottom: var(--fonu-space-4); }
 .runtime-section { padding: var(--fonu-space-4) 0; border-top: 1px solid var(--fonu-border); }
@@ -2201,4 +1526,32 @@ onUnmounted(() => { if (timer) window.clearInterval(timer); stopDownloadPolling(
 .frps-compare--warn {
   color: var(--fonu-warning);
 }
+/* 左：服务端列表；右：该服务端的穿透规则（与「公网服务端」页 .agent-layout 同构） */
+.frp-layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--fonu-space-4); align-items: start; }
+.server-sidebar { background: var(--fonu-surface); border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius); box-shadow: var(--fonu-shadow); overflow: hidden; }
+.server-sidebar__head { padding: var(--fonu-space-4); border-bottom: 1px solid var(--fonu-border); }
+.server-sidebar__head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--fonu-space-3); }
+.server-sidebar__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--fonu-text); flex-shrink: 0; }
+.server-sidebar__list { display: flex; flex-direction: column; gap: 10px; padding: var(--fonu-space-3); max-height: 720px; overflow: auto; }
+.server-item { width: 100%; font: inherit; text-align: left; padding: 12px 14px; border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius); background: var(--fonu-surface); cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
+.server-item:hover { border-color: var(--fonu-brand-hover); }
+.server-item--active { border-color: var(--fonu-brand); box-shadow: 0 0 0 1px var(--fonu-brand-soft); }
+.server-item__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.server-item__name { font-size: 14px; font-weight: 600; color: var(--fonu-text); overflow-wrap: anywhere; }
+.server-item__endpoint { margin-top: 6px; font-size: 12px; color: var(--fonu-text-secondary); overflow-wrap: anywhere; }
+.server-item__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fonu-space-3); margin-top: 6px; font-size: 12px; color: var(--fonu-text-muted); }
+.server-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+
+.rule-pane { min-width: 0; display: flex; flex-direction: column; gap: var(--fonu-space-4); }
+.rule-pane__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--fonu-space-3); padding: var(--fonu-space-3) var(--fonu-space-4); background: var(--fonu-surface); border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius); box-shadow: var(--fonu-shadow); }
+.rule-pane__intro { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--fonu-space-3); min-width: 0; }
+.rule-pane__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--fonu-text); }
+.rule-pane__sub { font-size: 12.5px; color: var(--fonu-text-secondary); }
+.rule-pane__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--fonu-space-2); }
+.rule-table-wrap { border: 1px solid var(--fonu-border); border-radius: var(--fonu-radius); background: var(--fonu-surface); box-shadow: var(--fonu-shadow); overflow: hidden; padding: var(--fonu-space-2) 0; }
+.frp-rules-table :deep(.table-muted) { color: var(--fonu-text-muted); font-size: 12px; }
+.frp-rules-table :deep(.type-chip) { font-family: var(--fonu-mono); font-size: 12px; color: var(--fonu-brand-text); }
+.frp-rules-table :deep(.mono) { font-family: var(--fonu-mono); font-size: 13px; }
+.frp-rules-table :deep(.text-secondary) { color: var(--fonu-text-secondary); }
+@media (max-width: 1100px) { .frp-layout { grid-template-columns: 1fr; } .server-sidebar__list { max-height: none; } }
 </style>
diff --git a/web/src/views/LogsView.vue b/web/src/views/LogsView.vue
index 30cb5e9..e6d6a14 100644
--- a/web/src/views/LogsView.vue
+++ b/web/src/views/LogsView.vue
@@ -590,7 +590,8 @@ async function loadFrpLogs() {
   loadingFrp.value = true
   try {
     const raw = asList(await api.getFrpLogs(500))
-    frpLogs.value = raw.map((line) => parseFrpLogLine(String(line)))
+    // 日志文件按时间升序返回，展示按时间倒序（新日期在前）：反转后分页与筛选也都跟着一致
+    frpLogs.value = raw.map((line) => parseFrpLogLine(String(line))).reverse()
   } catch (error) {
     message.error(error instanceof Error ? error.message : '加载 FRP 日志失败')
   } finally {