Skip to content

fix: 面板在大量节点下的布局与交互细节 - #65

Merged
stqfdyr merged 10 commits into
mainfrom
fix/panel-polish
Sep 27, 2026
Merged

stqfdyr merged 10 commits into
mainfrom
fix/panel-polish

Conversation

@stqfdyr

@stqfdyr stqfdyr commented Sep 25, 2026 •

Copy link
Copy Markdown
Collaborator

按 100 台节点把面板各路由的操作走了一遍,修掉其中的抖动、跳变和不顺手的地方。

节点表

  • 名称、分组、状态、流量可换行,1280 宽以下到期日收在价格下方,1024 宽起整表放得下;列宽改为名称 26%、IP 18%
  • 节点名在空格处和主机名的点后换行;八个字宽以内的词(城市、商家、BandwagonHost、GIA-E)整体不断开;不带空格的长名字在汉字之间折行;·、-、| 等分隔符不出现在行首;各行平衡折行
  • 国家码跟在节点名最后一个词后面,间距固定
  • 流量到达流量提醒阈值(关闭提醒时按 80%)显示暗橙,用满额度显示暗红
  • 超过 22 个字符的 IPv6 显示前两组与后两组(如 2605:52c0…fe84:2c48);悬停显示完整地址与来源,点击复制完整地址,复制提示带上完整地址
  • 地址悬停改用面板自己的提示框(新增 shadcn 的 tooltip,无新依赖),300 ms 出现、弹在地址右侧,同一格的两个地址互不遮挡;地址单元格只在地址变化时重绘
  • http 访问(没有 navigator.clipboard)时复制改用复制命令
  • 状态列「在线/离线」「不公开」上下排列、按同一条中线对齐,离线时长居中其下
  • 新添加的节点滚动到视野内,被当前筛选隐藏时不滚动

拖动排序

  • 换位动画改为 FLIP:行用 transform 滑到新位置,没有整表空白帧,行始终在顶栏之下;行有底色、被拖的行垫在其余行下面;拖动期间不留悬停底色;偏好减少动画时不滑动
  • 只有换过去后指针仍落在被拖的行上才换位,高矮不同的两行不会在静止的指针下来回交替
  • dragenter 与 dragover 一样接受放下;拖到最上面时越过一点落在表头上也算放下

对话框

  • 编辑节点、续费设置、延迟监控、设置分组按回车保存;节点搜索框里的回车只筛选
  • 校验由各自的保存逻辑负责,不走浏览器原生校验:额度可以填小数;每月重置日、间隔超出范围时提示,不改值
  • 「每月重置日」「间隔(秒)」可以清空重填
  • 手机上续费设置、编辑节点的短字段两两并排,选节点列表单列

其他页面

  • 切换深浅色时暂停过渡,全页同时换色
  • 延迟页、安全页在数据到齐后一次渲染;列表加载失败时照常显示页面并提示
  • 主题列表接口为每个主题返回 preview(是否带预览图),卡片一次画成
  • 改站点名后页头即时更新;修改应急密码后会话列表即时刷新;Client Secret 保存后清空输入框;保存成功后重新读取失败不影响保存结果
  • GitHub 回调地址可换行;数据页说明去掉中文里多出的空格;清除通知渠道、修改密码给出对应提示;回收空间时按钮显示进行中;会话时间按中文格式显示;主题卡片与会话的图标按钮补上提示文字

测试:cargo test、cargo clippy、tsc -b、oxlint、npm test、npm run build 通过。预览环境 100 台节点(80 台持续上报、几台反复上下线)实测:桌面 1024–1600 与手机 390、深浅色下各路由布局偏移为 0;拖动排序逐帧录屏,无空白帧、指针停住时 0 次换位、放下后与 hub 保存的顺序一致;节点名折行在 1280/1024/768/390 下逐行测量;暗橙、暗红对卡片底色的对比度浅色 4.55 / 6.45、深色 9.35 / 6.33,两者之间 1.42 / 1.48;实时推送下脚本耗时每秒约 66 ms(main 约 71–86 ms)。

主题侧的同一修复:monitor-probe/monitor-theme-default#14、monitor-probe/monitor-theme-serverstatus#14

- 切换深浅色时暂停过渡,按钮、徽章、表格行不再各自渐变
- 节点表名称、分组、状态、流量可换行,1280 以下到期日收在价格下方,1024 宽起操作列不再被挤出屏幕
- 拖动排序只给屏幕内的行做换位动画;新添加的节点滚动到视野内
- 编辑节点、续费、延迟监控、分组对话框回车保存;每月重置日与探测间隔可清空重填
- 延迟页、安全页、主题页数据到齐再渲染,不再闪空状态或被晚到的内容下推
- 改站点名后页头即时更新,改密码后会话列表即时刷新,Client Secret 保存后清空
- 手机上短字段两两并排,选节点列表单列,回调地址可换行
- 行高不同时按指针落点判断:只有换过去后指针仍落在被拖的行上才换位;上一次换位还在等过渡生效时不处理新的拖动事件
- 顶栏参与视图过渡并抬到所有行之上,页面滚动后压在顶栏下的行不再在换位时盖住它
用 flex 的 gap 代替左边距:放得下同一行,放不下时两个胶囊上下左对齐并留出间距,不再缩进 4px、上下贴在一起。
在线/离线与不公开统一按三个字的宽度、文字居中、固定上下排列,两个胶囊左右边缘都对齐,各行之间也一样宽;离线时长比胶囊短时居中在胶囊下方,更长时从左边缘开始。
- 状态列胶囊保持原宽,放在同一宽度的槽位里居中,上下与各行之间对齐;离线时长居中其下
- 列宽改为名称 26%、IP 18%,同宽度下折行的节点名明显减少
- 超过 19 个字符的 IPv6 显示前两组与后两组,中间省略,不再撑宽表格
- 地址悬停改用面板自己的提示框,300 ms 出现,显示完整地址与来源;复制后的提示带上完整地址
同一格的两个地址按较长的那个等宽,提示框从共同的右边缘弹出;指针离开地址即收起,不因停在提示框上而保持打开。
- 拖动排序不再用视图过渡:行用 transform 从原位置滑到新位置,不再间歇性整表空白,
  也不必把顶栏抬进过渡层。行有底色、被拖的行垫在下面,交错时文字不叠在一起;
  拖动中不留悬停底色;dragenter 与 dragover 一样接受,行刚被重排到指针下就松手
  不再被当成拖到表外;拖过头落在表头上也算放下。偏好减少动画时不滑动。
- 国家码跟在名字最后一个词后面,间距固定,不再随名字折行忽远忽近,也不单独占一行。
- 名字列至少容得下最长的词,BandwagonHost 这类词不再从中间断开;
  GIA-E 这类短连字符词不拆开。
- 长 IPv6 在表格里保留首尾各两段、中间省略,悬停与复制仍是完整地址。
- 离线时长放进与状态胶囊同宽的槽位里居中。
- 节点列表刷新后,被取代的旧请求晚到时不再覆盖新数据。
- 节点表流量到达流量提醒阈值(关闭提醒时按 80%)显示暗橙,用满额度显示暗红。
- 不带空格的长名字在汉字之间折行,不再撑宽名称列;宽度不超过八个字宽的词整体不断,
  连字符词也按宽度判断;「 - 」「—」「|」等分隔符不出现在行首。
- 主题列表由 hub 返回每个主题是否带预览图,面板不再等所有预览图下载完才显示。
- 安全页、延迟页的列表加载失败时照常显示页面并提示。
- http 访问时复制改用复制命令,不再点了没反应。
- 地址单元格只在地址变化时重绘,100 台节点下实时刷新的脚本耗时从每秒 128 ms 降到 66 ms。
- 对话框关闭浏览器原生校验,额度可填小数;每月重置日超出 1–31 时提示而不是悄悄改值。
- 设置保存成功后重新读取失败不再当作保存失败;新节点被筛选隐藏时不再在清空筛选后突然滚动。
@stqfdyr stqfdyr mentioned this pull request Sep 26, 2026
@stqfdyr
stqfdyr merged commit cce7204 into main Sep 27, 2026
1 check passed
@stqfdyr
stqfdyr deleted the fix/panel-polish branch September 27, 2026 14:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant