MailUI4Agents

jianf/MailUI4Agents

Fork 0

Commit Graph

Author	SHA1	Message	Date
JianFeeeee	2b6eb97bc9	test(webui): 横竖屏判据跟上新契约（横屏=侧边导航、列表固定 320） `rotate-verify.mjs` 10/10。途中判据自己错了两次，都记在这里： 1. `content` 选择器取 `.narrow-shell > *:not(.narrow-nav)` —— 横屏改用侧边导航后，第一个子元素变成了 60px 侧栏 ⇒ 把侧栏当内容区来判断排布，报出一条假失败。改成同时排除 `.bg-chrome-900`。 2. 原先只断言"排布换了"，没断言"导航在哪边" ⇒ 用户后续追问的侧边栏根本没被判据覆盖。现在补：横屏侧栏必须 60px 且在左侧、底部导航必须不存在；竖屏反过来（底部导航存在、无侧栏）。	2026-09-14 11:36:50 +08:00
JianFeeeee	8a9bc58433	feat(webui): 横竖屏自适应（紧凑双栏）+ 旋屏重算高度用户：「为什么窄屏的横屏和竖屏没有自适应」。 ## 根因断点是纯宽度的：`(max-width: 1023px)`。手机竖屏 390 与横屏 844 都落在同一档 ⇒ 布局一个像素都不变，横屏多出来的 ~450px 全浪费在空白上。看起来就是"没自适应"。 ## 改动 - 新增 `useCompactTwoPane()`：`(min-width: 700px) and (max-height: 560px)` —— 仍是紧凑外壳（悬浮底部导航），但内容区从覆盖式改成列表 + 详情并排。用高度而不是 `landscape` 判：桌面窗口压扁、分屏、软键盘弹起都会命中，而它们要的是同一件事（别浪费横向空间）。 - App：`compactTwoPane && hasList` 时走并排分支，其余情况仍是 NarrowStack 覆盖式。 - `--app-height` 增加 `orientationchange` 监听并延后一帧重算（iOS 上部分版本的 resize 不跟着方向变化走；立刻读会拿到旧高度）。 ## 判据 `test/manual/rotate-verify.mjs` 8 条，含可逆性与前置对照：竖屏覆盖式 → 横屏并排（真的换了 class）→ 旋回竖屏恢复覆盖式；三态的 `--app-height` 分别为 844 / 390 / 844（不是旧值）；横屏无横向溢出、底部导航仍完整可见且浮着（left=20）。实测 8/8。同一轮还补上了 `test/manual/calendar-swipe-verify.mjs`（日历滑动，4 条）。	2026-09-14 11:13:24 +08:00

Author

SHA1

Message

Date

JianFeeeee

2b6eb97bc9

test(webui): 横竖屏判据跟上新契约（横屏=侧边导航、列表固定 320）

`rotate-verify.mjs` 10/10。途中判据自己错了两次，都记在这里：

1. `content` 选择器取 `.narrow-shell > *:not(.narrow-nav)` —— 横屏改用侧边导航后，
   第一个子元素变成了 60px 侧栏 ⇒ 把侧栏当内容区来判断排布，报出一条假失败。
   改成同时排除 `.bg-chrome-900`。
2. 原先只断言"排布换了"，没断言"导航在哪边" ⇒ 用户后续追问的侧边栏
   根本没被判据覆盖。现在补：横屏侧栏必须 60px 且在左侧、底部导航必须不存在；
   竖屏反过来（底部导航存在、无侧栏）。

2026-09-14 11:36:50 +08:00

JianFeeeee

8a9bc58433

feat(webui): 横竖屏自适应（紧凑双栏）+ 旋屏重算高度

用户：「为什么窄屏的横屏和竖屏没有自适应」。

## 根因

断点是**纯宽度**的：`(max-width: 1023px)`。手机竖屏 390 与横屏 844 **都落在同一档**
⇒ 布局一个像素都不变，横屏多出来的 ~450px 全浪费在空白上。看起来就是"没自适应"。

## 改动

- 新增 `useCompactTwoPane()`：`(min-width: 700px) and (max-height: 560px)`
  —— 仍是紧凑外壳（悬浮底部导航），但内容区从**覆盖式**改成**列表 + 详情并排**。
  用高度而不是 `landscape` 判：桌面窗口压扁、分屏、软键盘弹起都会命中，
  而它们要的是同一件事（别浪费横向空间）。
- App：`compactTwoPane && hasList` 时走并排分支，其余情况仍是 NarrowStack 覆盖式。
- `--app-height` 增加 `orientationchange` 监听并延后一帧重算（iOS 上部分版本的
  resize 不跟着方向变化走；立刻读会拿到旧高度）。

## 判据

`test/manual/rotate-verify.mjs` 8 条，含**可逆性**与前置对照：
竖屏覆盖式 → 横屏并排（真的换了 class）→ 旋回竖屏恢复覆盖式；
三态的 `--app-height` 分别为 844 / 390 / 844（不是旧值）；横屏无横向溢出、
底部导航仍完整可见且浮着（left=20）。实测 **8/8**。

同一轮还补上了 `test/manual/calendar-swipe-verify.mjs`（日历滑动，4 条）。

2026-09-14 11:13:24 +08:00

2 Commits