From 8196451527bafa86af1650ef3c16574f4d0f2942 Mon Sep 17 00:00:00 2001 From: Phant Date: Mon, 19 Oct 2026 10:19:17 -0500 Subject: [PATCH] =?UTF-8?q?fix(webui):=20=E7=AA=84=E5=B1=8F=E9=A1=B6?= =?UTF-8?q?=E6=A0=8F=E7=95=99=E4=B8=8B=E6=9A=82=E5=81=9C=E3=80=81=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE=E5=92=8C=E5=85=B3=E6=9C=BA=EF=BC=8C=E5=AF=BC=E8=88=AA?= =?UTF-8?q?=E5=8F=AA=E6=98=BE=E7=A4=BA=E5=9B=BE=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 宽度 720px 及以下时，底栏的头像和名字收起，三个键接在横向导航行尾。 有图标的导航项只显示图标，名字可悬停查看，读屏照常能读到;World 的模块没有图标，照旧显示名字。 模块列表在窄屏改为与其他项同排，顶栏不再被竖排的模块撑高。 Co-authored-by: Claude Opus 5.5 --- src/web/client/shell/index.ts | 6 +++++- src/web/public/styles.css | 13 +++++++++++-- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/src/web/client/shell/index.ts b/src/web/client/shell/index.ts index 9fb901b2..0a6cc808 100644 --- a/src/web/client/shell/index.ts +++ b/src/web/client/shell/index.ts @@ -295,7 +295,11 @@ export function createShell(deps: ShellDeps): WebUiShell { const href = buildHash(opts.segments); const item = ui.h('a', 'navitem'); item.href = href; - if (opts.icon) item.appendChild(icon(doc, opts.icon, 'navicon')); + if (opts.icon) { + item.appendChild(icon(doc, opts.icon, 'navicon')); + // 窄屏只露图标,名字靠悬停读到。 + item.title = opts.label; + } const label = ui.h('span', 'lbl', opts.label); // 名字给灯让位后可能被截断,悬停仍读得到全名(灯自己的说明挂在各自那颗上)。 if (opts.pageId) label.title = opts.label; diff --git a/src/web/public/styles.css b/src/web/public/styles.css index facb08c8..2f516c3a 100644 --- a/src/web/public/styles.css +++ b/src/web/public/styles.css @@ -736,7 +736,6 @@ .stacklabel { display: none; } .navitem { flex: none; padding: 7px 11px; margin: 0; min-height: 38px; } .navitem .tag { display: none; } - .railfoot { display: none; } .pagehead { padding-top: 14px; } .pagedesc { max-width: none; } .modalcard { width: 96vw; max-height: 92dvh; } @@ -1694,11 +1693,21 @@ } @media (max-width: 720px) { - #rail { width: 100%; border-bottom: 1px solid var(--border); } + /* 底栏只留那几个键,接在横向导航的行尾。 */ + #rail { width: 100%; border-bottom: 1px solid var(--border); flex-direction: row; align-items: center; } + nav.stack { flex: 1; min-width: 0; } + .railfoot { flex: none; min-height: 0; padding: 0 8px 0 2px; } + .rail-who { display: none; } #kernel-root { height: calc(100dvh - 54px); margin: 0; border-radius: 0; } nav.stack { padding: 7px 8px; } .navgroup { display: contents; } + /* 横排时 World 的模块与其他项并列,树形连线不画。 */ + .navmodule-list { display: contents; } + .navmodule-list::before, .navmodule-list .navitem::before { display: none; } .navitem { min-height: 36px; } + /* 有图标的项只留图标,名字留给读屏与悬停;World 的模块没有图标,照旧写名字。 */ + .navitem:has(> .navicon) { padding-inline: 10px; } + .navitem:has(> .navicon) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .navgroup-provider .navitem { padding: 7px 11px; } .pagehead { padding-top: 22px; } .sheet { padding-block: 18px; }