feat(console-ui): responsive mobile & tablet layout (#5)

[wuxs]

概述

实现 Issue #5:把 Console UI 从 320px 手机到桌面做渐进响应式适配。

状态:Draft — 依赖 PR #6(Issue #4)的 overlay/shortcut seam。合并顺序 #3 → #4 → #5。#4 合并后会 rebase、完成共享 shell(App.jsx/StatusBar/AppMgmtDrawer/AuthModal/AuditLog)集成、重跑全套门禁后转 Ready。

响应式基础

• useViewportEnvironment:集中订阅 matchMedia,断点 phone(<640)/tablet(640-1023)/desktop(≥1024),加 pointer:coarse、hover:none、orientation、visualViewport。
• index.html viewport + viewport-fit=cover。

P0 移动壳

• AppWindow:手机单应用全屏(compactWindow),onShowDesktop,隐藏无意义的最小化/最大化,44px 触控目标。
• Dock:底部导航,横向滚动,touchEnvironment 时用显式触控动作替代 hover/右键。
• StatusBar 紧凑顶栏;TabBar 横向滚动 + 活动 tab scrollIntoView;Toast 避让 Dock 与 safe-area。
• 16px 移动输入(避免 iOS 缩放);保留 reduced-motion/transparency。

P1 高频管理页(16 个)

卡片化 / 列折叠 / 局部横滚策略,消除整页横向滚动。

门禁(基于 origin/main 5ca8107)

项	结果
npm run build	✅
npm run lint	✅ 总 291 vs main 基线 292(净减 1);新增文件零 lint

待办(转 Ready 前)

• rebase 到合并 feat(console-ui): 添加全局快捷键与快捷键帮助面板 #4 后的 main,补 App.jsx/StatusBar.jsx/AppMgmtDrawer.jsx/AuthModal.jsx/AuditLog.jsx 共享 shell 集成
• Playwright 多 viewport 回归(320×568 / 360×800 / 390×844 / 768×1024 / 1024×768 / 1440×900)
• 生成最终 pkg/console/dist

Closes #5

🤖 Generated with Claude Code

[wuxs]

StatusBar 移动/平板溢出修复已推送（083bc60）。

根因：右侧 cloud/time/user 固定宽度且 flex-shrink: 0，在 320px 下延伸至 x=488；中心健康区被压为 0 宽但仍有 165px scrollWidth。

修复：在 ≤1023px 隐藏次要 CPU/GPU/内存与完整时间/同步文本；保留设备标识、告警、在线状态、用户入口；≤639px 将在线状态折叠为图标，并保证告警/用户等触控目标至少 44px。

真实 Chromium 验证：320/320、360/360、390/390、768/768、1024/1024、1440/1440（scrollWidth/clientWidth），StatusBar 自身宽度同步相等；手机端可见交互项高度均 44px。npm run build 通过。截图上传因本轮硬截止未执行，未提交任何截图文件。

[wuxs]

Cloud Link LED 已按确认方案更新。\n\n| Before | After |\n| --- | --- |\n| 手机仅折叠为云朵图标，设备连接语义偏弱 | 手机/平板显示 8px 核心 + 1px 外环的硬件 Link LED，桌面显示 LED + 完整状态文字 |\n| 在线/离线二态且颜色散落在组件内 | 统一四态：在线 #22C55E、连接中 #F59E0B、离线 #DC6B67、未知 #94A3B8 |\n| 无连接中动效契约 | 仅连接中 2.4s 慢呼吸，prefers-reduced-motion 下禁用 |\n| 窄屏图标缺少完整状态文本语义 | 所有 viewport 保留完整 aria-label / title，不依赖颜色识别 |\n\n本地证据：\n- npx eslint src/components/StatusBar.jsx e2e/status-bar.spec.js playwright.config.js：通过\n- npm run test:status-bar：8 passed，覆盖 320/360/390/768/1024/1440；六档均断言 document 与 StatusBar scrollWidth === clientWidth、状态点可见、桌面文字可见、窄屏文字视觉隐藏但 aria 完整、无 console error\n- npm run build：通过\n\n截图上传因本轮硬截止未执行；未提交任何截图文件。\n\nCommit: 4dfe320