fix(webui): 窄屏两处 —— 收起补反向 morph、编辑态不再隐藏底部导航
用户:「收起没有动画,且输入框弹出后,底部导航栏会消失,再次点击界面导航才会出现」
① 收起没动画:打开有 morph、收起是瞬间卸载(不对称)。补反向 morph:
打开时把球的矩形存进 originRef(球在框打开时不在 DOM 上,收起草稿时取不到),
收起时从当前形状缩回球的位置/大小(160ms),**播完再卸载**(先卸载就没得播)。
finished 被取消时也会 reject,两种情况都落到"收起"。
② 底部导航消失:测量结果是 nav 的 rect = 0,0,0,0,即 **display:none**,不是被挤出去——
根因是 `.form-editing .narrow-nav { display: none }` 撞上"回复框展开即自动聚焦 textarea"
(form-editing 由 main.tsx 在任何输入框获焦时挂上)⇒ 一弹框导航就消失,点到别处才回来。
而这条隐藏已经没必要:viewport 声明了 `interactive-widget=resizes-content`,键盘弹出时
浏览器会重排布局,导航自然落在键盘上方。已删掉该隐藏。
顺带:详情/列表两个窄屏根节点补 min-h-0(flex 子项默认不可压缩,回复框一撑会把导航顶出可视区)。
判据 +4(编辑态不隐藏导航、viewport 声明 resizes-content、两个根节点带 min-h-0、收起有反向
morph 且先播完再卸载)。变异:抽掉 min-h-0 → 红;收起改回瞬间卸载 → 红;把 display:none
放回去 → 红。
★ 一处判据自身的坑:判断"还有没有那条隐藏规则"必须用**剥注释版**——我第一版用原文判,
被我刚写的那段解释性注释(里面原样引用了那条规则)判红,与 read.mjs 里记的同一形态。
窄屏(420x820,真实邮件)实测:初始/开信/回复框弹出并聚焦(form-editing)/收起后 ——
底部导航高度都是 51px 且在视口内;收起时框上有 160ms 动画。
This commit is contained in:
@ -290,6 +290,46 @@ const composeSrc2 = code('src/components/ComposePage.tsx');
|
||||
* (两条动画都动 transform/opacity,同挂会打架);⑤ 只动合成器属性。
|
||||
*/
|
||||
const mvSrc = code('src/components/MailView.tsx');
|
||||
|
||||
/*
|
||||
* 2026-09-15 用户两条窄屏反馈,各钉一条接线:
|
||||
* ① 「输入框弹出后,底部导航栏会消失」—— 详情/列表根节点缺 min-h-0(flex 子项默认
|
||||
* min-height:auto ⇒ 压不下去),回复框一撑就把底部导航顶出可视区。导航自己有
|
||||
* shrink-0,所以问题一定在**它上面那层能不能被压缩**。
|
||||
* ② 「收起没有动画」—— 打开有 morph、收起瞬间消失。收起必须先反向播完再卸载。
|
||||
*/
|
||||
const mvSrc2 = code('src/components/MailView.tsx');
|
||||
|
||||
/*
|
||||
* 2026-09-15 用户:「输入框弹出后,底部导航栏会消失,再次点击界面导航才会出现」。
|
||||
* 根因是 `.form-editing .narrow-nav { display: none }` 撞上"回复框展开即聚焦输入框"。
|
||||
* 判据钉住:窄屏导航不得因编辑态被隐藏(键盘由 interactive-widget=resizes-content 处理)。
|
||||
*/
|
||||
check(
|
||||
'编辑态不隐藏底部导航',
|
||||
// 判"代码里还有没有这条规则"必须用**剥注释**版:解释性注释里会写到这条规则的原样
|
||||
// (我第一版用原文判,被自己刚写的那段注释判红了 —— 与 read.mjs 里记的同一形态)
|
||||
!/\.form-editing\s+\.narrow-nav\s*\{[^}]*display:\s*none/.test(code('src/index.css')),
|
||||
'又出现"编辑态隐藏底部导航"——回复框一展开导航就消失,还得再点一下才回来'
|
||||
);
|
||||
check(
|
||||
'viewport 声明 resizes-content(键盘靠重排让位,不靠隐藏)',
|
||||
/interactive-widget=resizes-content/.test(prose('index.html')),
|
||||
'index.html 里没有 interactive-widget=resizes-content —— 键盘会盖住底部内容,才逼着去隐藏导航'
|
||||
);
|
||||
|
||||
check(
|
||||
'窄屏可压缩:详情/列表根节点带 min-h-0',
|
||||
(mvSrc2.match(/relative flex-1 min-w-0 min-h-0 flex flex-col/g) || []).length >= 2,
|
||||
'根节点缺 min-h-0 —— 回复框弹出会把底部导航栏顶出可视区("点了才又出现")'
|
||||
);
|
||||
check(
|
||||
'收起有反向 morph(先播完再卸载)',
|
||||
/const collapse = \(\) => \{/.test(mvSrc2) && /anim\.finished\.then\(\(\) => setOpen\(false\)\)/.test(mvSrc2) &&
|
||||
/onClick=\{collapse\}/.test(mvSrc2),
|
||||
'收起仍是瞬间卸载 —— 打开有动画、收起没动画,不对称'
|
||||
);
|
||||
|
||||
check(
|
||||
'回复球带 morph 起点标记且就地取矩形',
|
||||
/data-morph-trigger/.test(mvSrc) && /rememberOrigin\(e\.currentTarget\)/.test(mvSrc),
|
||||
@ -542,7 +582,9 @@ check(
|
||||
);
|
||||
check(
|
||||
'回复悬浮球锁定在**详情栏**内(两个根节点带 relative)',
|
||||
(mv.match(/className="relative flex-1 min-w-0 flex flex-col bg-/g) || []).length === 2,
|
||||
// 2026-09-15:这两个根节点后来又补了 min-h-0(窄屏可压缩),类名顺序变了 ——
|
||||
// 判据钉的是"两个根节点、都带 relative",不该被中间多出来的一个类名判红。
|
||||
(mv.match(/className="relative flex-1 min-w-0[^"]*flex flex-col bg-/g) || []).length === 2,
|
||||
'少了 relative:宽屏下 absolute 会一路找到视口,球挂到窗口右下角而不是详情栏'
|
||||
);
|
||||
check(
|
||||
|
||||
Reference in New Issue
Block a user