Repository navigation
fix: 面板在大量节点下的布局与交互细节 - #65
Merged
Merged
Conversation
- 切换深浅色时暂停过渡,按钮、徽章、表格行不再各自渐变 - 节点表名称、分组、状态、流量可换行,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 时提示而不是悄悄改值。 - 设置保存成功后重新读取失败不再当作保存失败;新节点被筛选隐藏时不再在清空筛选后突然滚动。
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
按 100 台节点把面板各路由的操作走了一遍,修掉其中的抖动、跳变和不顺手的地方。
节点表
BandwagonHost、GIA-E)整体不断开;不带空格的长名字在汉字之间折行;·、-、|等分隔符不出现在行首;各行平衡折行2605:52c0…fe84:2c48);悬停显示完整地址与来源,点击复制完整地址,复制提示带上完整地址tooltip,无新依赖),300 ms 出现、弹在地址右侧,同一格的两个地址互不遮挡;地址单元格只在地址变化时重绘navigator.clipboard)时复制改用复制命令拖动排序
dragenter与dragover一样接受放下;拖到最上面时越过一点落在表头上也算放下对话框
其他页面
preview(是否带预览图),卡片一次画成测试:
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