|
|
f4fb964734
|
fix(web): 窄屏布局三处根因 + 页面滚动塌陷
在 375/320 屏上实机取证（三节点集群 192.168.2.{30,106,60}），修掉四个
独立缺陷。前三个是布局根因，第四个是被前三个掩盖的真 bug。
1. 全站没有 box-sizing 重置
content-box 下 `.sidebar { width:100%; padding:10px 12px }` 在 375 视口
实算 399px（320 屏 344px）。顶栏主题色块右缘 332 > 320，被
`.sidebar{overflow-x:hidden}` 静默裁掉 ⇒ 主题切换在手机上点不到。
桌面侧栏同样是 274px 而非声明的 246px。
注：已有两个「窄屏顶栏右侧溢出」commit（64d3359 用 flex min-width/vw
限宽、0559cc5 改 backdrop-filter）都在治症状，真因是盒模型。
2. fit-view-on-init 把画布缩到不可读
画布用绝对图形坐标（x=60/760，两列随转发数向下增长），bbox 远大于
手机视口。实测合成缩放 375 屏 0.3135 ⇒ 248px 的卡片渲成 85px、
有效字号 4.39px；**1280 桌面也只有 0.6011 / 8.42px**（5 条转发即
触发），所以这不只是窄屏问题。
改为删掉 fit-view-on-init 自己接管：MIN_ZOOM=0.65 下限 +
frameCanvas() 把最左上节点重贴到内边距边缘（fitView 是居中的，窄屏
下会把两列接缝摆在视口正中，两边各看一半）。duration:0 保证量 rect
时动画已停；初始 frame 只认一次，避免后续 add 节点把正在平移的用户
拽走。挂 @init + @nodes-initialized（store 与节点分先后到达，任一
单独触发都会 fit 空画布）。
3. el-dialog 固定宽度超出手机视口
Element Plus 把 width 写成内联 --el-dialog-width。375 屏实测
left=0 right=420，右上关闭按钮在屏外，只能横向滚 overlay 才够得到。
窄屏下 clamp 到 calc(100vw - 24px)。
4. 【滚动塌陷】状态页在手机上完全无法滑动
`.status-page` 是 height:100% + overflow:hidden 的 flex 列，内层
`.status-body` 靠 flex:1 + overflow-y:auto 自己滚。375 屏下可用高度
651px，而两个不可压缩子元素 topbar(122) + kpis(565) 已占 687px ⇒
`.status-body` 被分到 **0px**，其中却有 1682px 内容。同时外层
`.content` scrollHeight==clientHeight（无可滚内容）⇒ 整页没有任何
可滚动元素，手势完全无响应。
修法：让 `.content`（App.vue 已声明 flex:1 + overflow-y:auto）做唯一
滚动容器，页面自身不再 height:100%/overflow。ClusterView /
SettingsView 同类嵌套一并去掉，从根上消灭「按剩余空间算高度」这类
算术错误。另把 ≤380px 的 KPI 单列改回两列（单列四张全宽卡自身就
565px，超过整个视口，是塌陷的起因）。
验证（构建产物挂反代打真后端 + 共享 Chromium CDP）：
- 缩放 0.31→0.65、卡片 85→177px、有效字号 4.39→9.1px（320/375/414/1280 一致）
- bodyScrollW 344→320（320 屏），横向溢出清零；主题色块全部落回屏内
- 对话框 left 12 / right 363（完全在屏内，关闭键可达）
- 9 种视口 × 5 个页面 = 45 格全部「末块可达 + 无横向滚动」，console 零报错
修复前：状态页 375/320/414 全部无滚动；1280 桌面状态/设置同样中招
- 三节点滚动重启部署，集群收敛 pending=0 / topo=4，owner 与实际
worker 进程一一对应，journal 无 panic/fatal，reclaimed=2 各节点自愈
|
2026-09-18 11:00:35 +08:00 |
|
|
|
64d3359981
|
fix(web): 窄屏顶栏右侧溢出 — flex 自动最小尺寸 + vw 限宽两处误算
两个原因叠加导致顶栏横向溢出：
1. "webui4frpc" 是不可断行单词，.sb-brand-text 没给 min-width:0 +
overflow:hidden，其 flex 自动最小尺寸就等于 min-content（≈85px），
顶栏因此拿不出空间给右侧身份区，超出部分溢出。现给品牌文字整条链路
加可收缩约束，标题用 ellipsis 截断。
2. .sb-identity 用 max-width:42vw / .id-name 用 14vw 限宽：vw 含垂直
滚动条宽度，比实际可用内容宽度大；且 max-width 只封顶盒子，内部
flex:0 0 auto 的角色徽标与退出按钮仍会把它撑开。改为全链路
min-width:0 + overflow:hidden，由 flex 自行分配（.sb-foot 也从
flex:0 0 auto 改 0 1 auto，允许被压缩）。
另加 .sidebar { overflow-x: hidden } 作兜底，任何子项算错都不再产生
横向滚动条；≤380px 隐藏角色徽标（它不可收缩，"超级管理员"≈70px）。
验证：tsc --noEmit 通过、npm run build 通过、产物 CSS 已确认规则生效；
三节点部署 0.1.2 后环正常（cycle 推进、pending=0、topo=5）。
|
2026-09-03 08:50:23 +08:00 |
|
|
|
0559cc55bd
|
fix(web): 窄屏底部导航栏错位到顶部 — 顶栏 backdrop-filter 创建了包含块
.sb-nav 用 position:fixed;bottom:0 想贴视口底部，但父元素 .sidebar 带
backdrop-filter。backdrop-filter 与 transform/filter 同理，会为后代的
position:fixed 创建【包含块】—— 于是 bottom:0 变成相对顶栏下沿定位而不是
视口，tab bar 贴在顶栏正下方，看起来就是固定在屏幕顶部。
窄屏下关掉顶栏的 backdrop-filter，改用近实色底
color-mix(var(--w4f-card-solid) 92%, transparent)；玻璃模糊保留在
.sb-nav 自身（元素自己的 backdrop-filter 不影响自己的定位）。
顺带 bump 到 0.1.2（version 包 / release.sh / build_installers.sh /
rpm spec + changelog / README 安装示例文件名）。
验证：tsc --noEmit 通过、npm run build 通过；产物 CSS 中确认 720px 段的
.sidebar 已含 backdrop-filter:none；三节点部署后 /status 报告 0.1.2，
环正常（cycle 推进、pending=0、5 条转发 frpc 进程与 topology 归属一致）。
|
2026-09-03 08:45:22 +08:00 |
|
|
|
f935cad33f
|
feat(web): 窄屏适配 — 侧栏转底部 tab bar + 各页响应式重排
此前只有一个 max-width:900px 断点（仅缩窄侧栏），手机上 210px 侧栏吃掉
半屏、卡片网格横向溢出、按钮被挤成细条。新增 720px / 380px 两档断点：
App.vue（关键）
- ≤720px：shell 转竖向，导航从侧栏抽出固定到屏幕底部（图标上/文字下），
品牌+身份+主题折进顶部窄条；tab 最小 44px 触控高度
- 内容区预留 env(safe-area-inset-bottom)，避开 iOS 手势条
- ≤380px 再压一档：隐藏权限徽标、缩小字号
StatusView
- card-grid 的 minmax(320px) 在 375px 屏溢出 → 单列
- KPI 由 auto-fit 改固定两列（auto-fit 窄屏退化单列使四卡拉长），≤380px 单列
- 转发卡 fwd-head 原一行塞 7~8 元素 → 路由占整行、按钮另起一行平分
- 分组标题按钮不再被 margin-left:auto 压扁
ClusterView
- 环拓扑改竖向，节点卡占满宽，箭头旋转 90° 指下
- nodeKey（32 位 hex）允许 break-all，不再撑宽容器
- 日志 lg-detail 由 max-width:60%+nowrap 改整行完整显示
SettingsView / UsersView / CanvasView
- binary-row、setting-row 竖排；表格卡标题行竖排、操作按钮平分
- 画布 toolbar 按钮换行平铺；vue-flow handle 12px→16px（触控可达）
index.html
- viewport 加 viewport-fit=cover，这是 env(safe-area-inset-*) 生效前提
验证：tsc --noEmit 通过、npm run build 通过、dist 已重新 embed，
三节点部署后环正常（pending=0，5 条转发 frpc 进程与 topology 归属一致）。
|
2026-09-03 07:20:32 +08:00 |
|
|
|
f29ec81e4a
|
feat: session-cookie login/logout + three-tier roles (superadmin/admin/viewer) with read-only UI + remove pink theme
- cookie-based auth (/login /logout) replacing Basic Auth for UI, enabling logout
- roles: superadmin (account management only), admin (full except accounts), viewer/audit (read-only status+cluster, export logs)
- readonly accounts hide edit buttons (added remote node, group ops, canvas layout/save/import, cluster manage, install) instead of greying them
- auditors see status+cluster only; ordinary admins lose the accounts nav; last-admin guard covers superadmin
- remove pink theme entirely (switcher, [data-theme=pink], leftover localStorage), keep white/blue
|
2026-08-20 09:08:15 +08:00 |
|
|
|
eda9bb9597
|
feat: cluster reliability (leader failover, crash rejoin, key exchange) + auth/users + canvas/forwards enhancements + comprehensive README + API docs
- Cluster: forwardToNext offline detection (leader+non-leader), WatchLeader 1s heartbeat fallback, 409 for standalone nodes, Node.NodeKey key exchange via token ring, ClusterPeers persistence + auto-rejoin, Forward delegates to forwardToNext (bugfix)
- Auth: Basic Auth (flag-creds fast path) + bcrypt users (admin/viewer) + Bearer API keys (read/write/admin scope)
- Frontend: UsersView (accounts+API keys), ClusterView (ring/nodeKey/tasks/topology/log), StatusView (group management, per-proxy status), CanvasView (edge toggle/group), PortEdge (disabled/group labels)
- API: handlers split (canvas/forwards/users/logs), canvas export/import, forwards group start/stop/assign/delete, cluster endpoints
- Docs: comprehensive README rewrite (all flags/APIs/auth/cluster), docs/cluster-api.md (cluster management API reference)
- Deploy: run-cluster.sh now 4-node ring + 1 isolated standalone, test-forward.sh updated for 4 nodes
- Removed plan.md (design notes consolidated into README + API docs)
|
2026-08-19 21:09:24 +08:00 |
|
|
|
b518a13446
|
feat: Phase C 完成 — ModelRouter 风格 UI 重设计 + 模拟 frps 测试 + lastSync 修复 + 集群作坊搭建
- 主题: sakura×frost 玻璃拟态 (theme.css) + SCSS 变量重映射
- 侧栏: 玻璃侧栏 246px + 渐变品牌区 + 面包屑导航
- 状态页: 玻璃 KPI 卡 + 远程节点/本地服务卡片网格
- 集群页: 英雄玻璃卡 + 横向环拓扑链 + 待办命令/活跃拓扑/日志区
- 令牌环: 新增 lastSync 上次同步时间替代周期计数
- 模拟 frps: frps2/frps3 容器 + test-forward.sh 全链路验证脚本
- 修复: BinaryPath 空导致 worker 不启动, 撤销仅撤第一个 link, 任务复活风暴 (published 追踪)
|
2026-08-18 23:38:20 +08:00 |
|
|
|
bd3a62a017
|
fix: worker 进程并发 double-close panic + 状态页连接语义重构 + 集群页骨架
- process: spawn 不再重复起 supervise goroutine（Restart 触发旧 supervise close doneCh 后再 close → panic）；新增 closeOnce/supervising 守卫；Start 首次起 supervise，重启循环在同一 goroutine 内
- httpapi: status 增加 connState（connected/connecting/failed/not_started/disabled），由 worker 日志探测真实 frps 连接（不再把本地 worker 状态误当远程 frps 状态）
- StatusView: 远程卡片主状态改为连接状态徽标；启停按钮标注为控制本地 frpc worker；本地转发区保留 worker 状态显示
- 新增 ClusterView 集群页骨架（M3 LB+健康检查载体）+ App.vue 导航接入
- render: bandwidthLimit 从 proxy 顶层移入 transport 段（frpc 0.61 正确 schema，修复真实连不上的 bug）
|
2026-08-17 15:13:25 +08:00 |
|
|
|
c1936887a2
|
webui4frpc: 独立可用的可视化 frpc 控制器 (M0)
- 零 frp 源码依赖，单二进制 (Go + Vue3 + VueFlow + Element Plus)
- 画布多对多连线，渲染 tcp/udp/http/https frpc 配置
- worker 进程管理：自愈、日志轮转、崩溃退避重启
- frpc 一键安装 (GitHub Releases) + 手动指定路径
- 三页 UI：状态(默认)/连接配置/设置
- 状态页实时节点/转发状态，节点可增删改启停
- 画布冲突检查：端口/域名冲突标红 + 弹窗拦截保存
- backend 单测覆盖 store/render/process/httpapi/install
- plan.md + FRPC_FEATURES_AUDIT.md 文档
|
2026-08-17 11:00:26 +08:00 |
|
