[joesmart]

改了什么

• 新增 packages/web/src/routes/narrow.ts，窄屏断点只写在这一处：width < 900。useNarrow / watchNarrow 用 matchMedia 驱动 is-narrow 类，样式表只认这个类，不再写宽度 @media。
• 侧栏抽屉（MainWindow）、设置页全屏、登录/注册页单栏（13-settings.css）、今天页单列（17-today.css）都改用这一个断点。原来分别是 752、700、800，统一后 700 到 752 之间那个 30px 关闭按钮的问题就没了。
• 主窗口和窄屏设置页的高度改成 height: 100vh; height: 100dvh;，不支持 dvh 的浏览器会退回到 100vh。
• 焦点：拉开抽屉时，焦点进到侧栏第一个可点的元素；收起时，如果焦点还在侧栏或已经掉回 body，就把它还给菜单按钮。
• 测试：mobile-web.spec.ts 新增平板竖屏、768/820、720 设置页和 390 焦点几组用例。12-today.spec.ts 的 780 宽用例现在先拉开抽屉，再去点侧栏里的「团队」。

为什么

• 抽屉阈值选 900。 我在 main 的三栏布局下量了聊天栏宽度，结果是视口减 272：

  • 834 宽时聊天栏 562，用户气泡「给 Globex 出一份 200 台 X3 的报价，发之前先给我看。」折成两行。
  • 聊天栏小于 576（视口小于 848）时，这条气泡开始折行。
  • 900 宽时聊天栏 628，气泡一行放得下。
  • Bot 简介要到聊天栏 664（视口 936）才能单行。
  • 任务卡头要到聊天栏 704（视口 976）才能排成一行。
  • 输入框和审批按钮在所有宽度下都没有溢出。

  选 900 的理由：平板竖屏最宽是 834，横屏最窄是 1024，900 落在两者之间；边界处聊天栏 628，气泡不折行；现有 panel-drawer.spec.ts、top-notice.spec.ts 在 900 宽要求侧栏常驻，这些用例不用改。

• 断点为什么写在 JS。 @media 读不到 CSS 变量，CSS 和 JS 要同源，只能由 JS 定这个数，再用类名告诉样式表。

• 焦点为什么会掉到 body。 抽屉打开后，遮罩把侧栏以外的部分（包括菜单按钮）设成 inert，浏览器就把焦点从按钮挪到了 body。快速切换打开时记下的「回到哪」也就成了 body。

怎么验证的

export E2E_API_PORT=3962 E2E_WEB_PORT=5962
pnpm format:check && pnpm typecheck && pnpm lint   # 全过；lint 退出码 0，12 条 warning 都在本 PR 没碰的文件里
pnpm --filter @baize/web test
#  Test Files  51 passed (51)
#       Tests  366 passed (366)
#  543 passed (8.2m)

新用例在 main 的实现上（只换回 packages/web/src）全红：

✘ 平板竖屏 › 744 到 834 宽侧栏都收成抽屉，1024 横屏仍是三栏      Error: 768 宽侧栏默认收着  Expected: hidden  Received: visible
✘ 768 宽 › 侧栏是抽屉，对话区占满宽度，右栏照旧是抽屉              Error: 平板竖屏侧栏默认收着  Received: visible
✘ 820 宽 › 侧栏是抽屉，对话区占满宽度，右栏照旧是抽屉              Error: 平板竖屏侧栏默认收着  Received: visible
✘ 720 宽 › 设置窗口铺满屏幕，关闭按钮不小于 40px                  Error: 设置窗口铺满屏幕  Expected height 900, Received 792 …
✘ 390 宽焦点 › 抽屉拉开焦点进侧栏，Esc、点遮罩、选群收起后焦点回到菜单按钮                Error: 拉开抽屉焦点在侧栏里  Received: false
✘ 390 宽焦点 › 从菜单按钮拉开抽屉再开快速切换，Esc 退出后焦点回到侧栏，再收起回到菜单按钮  Error: 退出快速切换焦点回到侧栏里  Received: false
7 failed, 21 passed（第 7 条是改过的 12-today 780 宽用例，main 上没有菜单按钮）

我还起了 mock 加 vite，用 Playwright 手点了一遍：

• 820 宽拉开抽屉，焦点在「今天」上，scrollWidth 等于 clientWidth（都是 820）。
• 开快速切换后按 Esc，焦点回到侧栏；再按 Esc，焦点回到 nav-open。
• 720 宽的设置页是 720×900，关闭按钮 40×40。
• 1024 宽侧栏常驻 272，没有菜单按钮。

390、768、820、1024 四个宽度的截图都放在 scratchpad，没进仓库。

没动的

• 牌桌 felt.css 里的 @media (max-width: 960px) 管的是牌桌内容的排布，不是窄屏模式切换，这次没并进来。
• 右栏抽屉阈值 1152（侧栏 + 右栏 + 聊天栏 480）不是窄屏切换，没动。

Closes #123

🤖 Generated with Claude Code

https://claude.ai/code/session_01Be3SZps2JjqvyrJ1vbLmni