This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
# 公网 Agent 页(`AgentView.vue`)整合整改方案
|
||||
|
||||
> 目标:把「公网 Agent」页从"功能堆叠"整理成**状态 → 控制 → 生命周期 → 输出**四段式结构,
|
||||
> 信息层级清晰、操作归属明确、危险操作可控,并完全符合 `fonu-page-ui` 页面 UI 标准。
|
||||
> 信息层级清晰、操作归属明确、危险操作可控,并完全符合 `havline-page-ui` 页面 UI 标准。
|
||||
>
|
||||
> 参照页:`DdnsView.vue`(状态卡 + 提示)、`CertificatesView.vue`(统计卡规格)、`ProxyView.vue`(分组与按钮区)、`SettingsView.vue`(分区)。
|
||||
> 更新日期:2026-09-23
|
||||
@@ -17,7 +17,7 @@
|
||||
| 3 | **loading 粒度太粗** | 所有按钮都用 `:loading="agentActionId === server.id"`——任何操作进行中,页面**全部**按钮一起转圈 | 无法分辨在跑哪个操作,也无法阻止并发操作 |
|
||||
| 4 | **输出全部塞进一个 `agentOutput`** | 探测 / 安装 / 卸载 / SSH 诊断 / frps 启停 / 下发配置 / 安装 frps 七类输出共用一个 ref,显示在「Agent 生命周期」卡底部 | 输出归属不明;执行「重启 frps」后输出出现在 SSH 卡里,语义错位 |
|
||||
| 5 | **日志与输出分居两卡** | 「frps 最近日志」独立成卡,`agentOutput` 在另一张卡 | 排障时要在两处来回看 |
|
||||
| 6 | **危险操作无二次确认** | 「卸载(含数据)」按钮点击即执行,`rm -rf /var/lib/fonu-agent` 不可逆 | 误点即丢路由与证书 |
|
||||
| 6 | **危险操作无二次确认** | 「卸载(含数据)」按钮点击即执行,`rm -rf /var/lib/havline-agent` 不可逆 | 误点即丢路由与证书 |
|
||||
| 7 | **页面级提示缺失** | agent 未连接、frps 未安装等状态只在卡片里体现,没有 `n-alert` 引导(技能要求:页面级提示放 PageHeader 之后) | 新用户不知道下一步该去哪一页 |
|
||||
| 8 | **跳转卡占位浪费** | 「公网 Nginx 反代」整卡只放一句说明 + 一个跳转按钮 | 占掉半行网格,信息密度低 |
|
||||
| 9 | **轮询与用户操作耦合** | 10 秒 `refreshAll()` 里设置 `agentActionId`,与用户点击共用同一状态 | 轮询时按钮闪烁 loading |
|
||||
@@ -38,13 +38,13 @@ stats-row(统一 4 列稳定网格)
|
||||
├─ frps 服务(运行中/未运行 + 版本)
|
||||
├─ 80 端口
|
||||
└─ 443 端口
|
||||
FonuCard「服务状态详情」
|
||||
HavlineCard「服务状态详情」
|
||||
└─ field-grid:Agent 版本 / 已安装 frps 版本 / frps 启动命令 / 配置文件 / 安装位置 / 开机自启 / 7000 端口(StatusBadge)
|
||||
FonuCard「frps 服务控制」
|
||||
HavlineCard「frps 服务控制」
|
||||
└─ 按钮区:启动|停止 · 重启 · frps 管理面板 · 下发配置 · [版本选择] 安装/升级
|
||||
FonuCard「Agent 生命周期(SSH)」
|
||||
HavlineCard「Agent 生命周期(SSH)」
|
||||
└─ 按钮区:探测环境 · 安装/升级 Agent · SSH 诊断 · 卸载(保留数据)· 卸载(含数据,二次确认)
|
||||
FonuCard「输出与日志」(n-tabs)
|
||||
HavlineCard「输出与日志」(n-tabs)
|
||||
├─ Tab 操作输出:带来源标签 + 时间;空态 EmptyState;「清空」按钮
|
||||
└─ Tab frps 日志:frps_log_tail;空态 EmptyState
|
||||
```
|
||||
@@ -64,8 +64,8 @@ FonuCard「输出与日志」(n-tabs)
|
||||
### 2. 统一网格(解决 #2、#12)
|
||||
|
||||
```css
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fonu-space-4); margin-bottom: var(--fonu-space-4); }
|
||||
.agent-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fonu-space-4); margin-bottom: var(--fonu-space-4); }
|
||||
.stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--havline-space-4); margin-bottom: var(--havline-space-4); }
|
||||
.agent-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--havline-space-4); margin-bottom: var(--havline-space-4); }
|
||||
@media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agent-page-grid { grid-template-columns: 1fr; } }
|
||||
@media (max-width: 760px) { .stats-row { grid-template-columns: 1fr; } .agent-actions { width: 100%; } .agent-actions .n-button { flex: 1 1 auto; } }
|
||||
```
|
||||
@@ -111,7 +111,7 @@ function pushOutput(source: string, text: string, ok = true) {
|
||||
```vue
|
||||
<n-popconfirm @positive-click="uninstallAgent(server, false)">
|
||||
<template #trigger><n-button size="small" type="warning">卸载(含数据)</n-button></template>
|
||||
将删除 VPS 上的 agent、frps 单元与 /var/lib/fonu-agent(路由与证书一并丢失),确认继续?
|
||||
将删除 VPS 上的 agent、frps 单元与 /var/lib/havline-agent(路由与证书一并丢失),确认继续?
|
||||
</n-popconfirm>
|
||||
```
|
||||
|
||||
@@ -123,7 +123,7 @@ function pushOutput(source: string, text: string, ok = true) {
|
||||
|
||||
| 条件 | 类型 | 文案要点 | 动作 |
|
||||
| --- | --- | --- | --- |
|
||||
| `!agentStatusOk` | `error` | Agent 未连接:检查 VPS 上 fonu-agent 是否运行、Agent 地址与 Token 是否正确 | 「探测环境」 |
|
||||
| `!agentStatusOk` | `error` | Agent 未连接:检查 VPS 上 havline-agent 是否运行、Agent 地址与 Token 是否正确 | 「探测环境」 |
|
||||
| `!agentStatus?.frps_active` | `warning` | frps 未运行:可点「启动 frps」或在下方安装 | 「启动 frps」 |
|
||||
| 反代入口引导(常驻) | `info` | 反代的逐条部署/配置查看/访问控制在「公网反代」页 | 跳转 `/public-proxy` |
|
||||
|
||||
@@ -152,7 +152,7 @@ watch(releases, (list) => { if (!frpsInstallVersion.value && list.length) frpsIn
|
||||
| --- | --- |
|
||||
| `web/src/views/AgentView.vue` | 模板结构重排、脚本状态重构、样式网格与断点补齐(单文件改动) |
|
||||
| `web/src/api/client.ts` / `types.ts` | 预期**无需**改动(现有 `getFrpAgentStatus` / `probeFrpAgent` / `installFrpAgent` / `uninstallFrpAgent` / `sshDiagnoseFrpAgent` / `frpsServerActionRaw` / `pushFrpConfigToAgent` / `installFrpServer` / `listFrpReleases` 已够用) |
|
||||
| `cmd/fonu/web/dist` | 构建产物同步(gitignore,不入库) |
|
||||
| `cmd/havline/web/dist` | 构建产物同步(gitignore,不入库) |
|
||||
|
||||
验证闭环(技能第 8 节):
|
||||
|
||||
@@ -160,7 +160,7 @@ watch(releases, (list) => { if (!frpsInstallVersion.value && list.length) frpsIn
|
||||
cd web
|
||||
npx vue-tsc --noEmit # 0 错误
|
||||
npx vite build # 成功
|
||||
# 本地生效:同步 dist → cmd/fonu/web/dist 后 go build ./...
|
||||
# 本地生效:同步 dist → cmd/havline/web/dist 后 go build ./...
|
||||
```
|
||||
|
||||
回归检查点(真机,VPS 38.95.74.87):
|
||||
|
||||
Reference in New Issue
Block a user