Repository navigation
fix(ui): 窄屏专项 —— 顶栏残影、表格横向滚动提示、监控统计卡两列（#210） - #216
Merged
Merged
Conversation
- 顶栏：< sm 不显示面包屑。原来两级文字被 truncate 压到 0 宽，中间的「›」不收缩，贴在搜索按钮左边像残影 - Table：容器加 scroll-shadow-x（纯 CSS，background-attachment: local），能横向滚时边缘出阴影。 通知策略 586px 的表在 390 宽下其实能滑，只是看不出来，读成「被裁掉了」 - 在线用户 / 服务器 / Redis：四张统计卡手机上两列（原来一张一行，第一屏全是卡片、表格要往下滑一屏）； MetricCard 加 min-w-0、hint 可断行（磁盘卡的挂载路径没有空格） Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- 「背景模拟阴影」换成 scroll-fade-x：mask-image 渐隐，宽度由 animation-timeline: scroll(self inline) 推。 原写法要遮罩色等于底色（深色下抽屉 / 卡片里两条永久暗带）、被选中行的不透明底色盖住、 还让 background-attachment: local 的大表格失去合成层滚动。实测 390 宽：滚到最左只有右边渐隐， 中间两边都有，最右只有左边；宽屏不能滚时两边都没有。不认 animation-timeline 的浏览器没有提示、不坏 - 关掉多标签页（showTabs=false）时窄屏照样显示面包屑：那时标签条不渲染，面包屑是唯一看得见页名的地方 - MetricCard 数值在窄卡片里降一档字号、可折行（上千万 key 的「12,345,678 个」不再画到隔壁卡片上） - MonitorSkeleton 的断点和真实网格对齐（@4XL 才四列），加载完不再跳一下 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
9 tasks
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.
#210 调研结论里的 P0-4（手机宽度挤坏）剩下的几处，以及 P2 手机那条里的统计卡，对应拆分计划里的 ⑥。
改了什么
truncate压到 0 宽，中间的分隔符不收缩< sm不显示面包屑（页名在标签上已经有了）Table容器加scroll-shadow-x（纯 CSS 滚动阴影），全站表格一起受益grid-cols-1，到@xl才两列MetricCard加min-w-0、hint 可断行（磁盘卡的挂载路径没有空格）结论写进了 ui 分册（表格横向滚动那一行）。
验证
pnpm typecheck --force·pnpm lint·arch:check·ctx:check·test:js全过clientWidth 356 / scrollWidth 586，能滚、阴影可见不在这个 PR 里
Refs #210
🤖 Generated with Claude Code