feat(console-ui): 适配移动端与平板响应式页面显示

[wuxs]

背景

devbox Console UI 当前以桌面工作站为主要形态，核心布局在大屏上可用，但缺少系统性的手机/平板响应式策略：

• console-ui/index.html 尚未声明移动端 viewport。
• console-ui/src/App.jsx 使用 100vw × 100vh 的固定桌面画布。
• Desktop.jsx 的默认工作站布局为主内容 + 340px 侧栏，紧凑布局仍包含 280px 侧栏。
• StatusBar.jsx 同行展示设备、CPU/GPU/内存、告警、云端状态、时间和用户菜单，在窄屏容易拥挤。
• Dock.jsx 使用居中的单行绝对定位 Dock，运行应用增多后可能超出视口。
• AppWindow.jsx 采用桌面式浮动窗口和紧凑标题栏操作按钮，未定义移动端单窗口模式。
• AppMgmtDrawer.jsx 使用 width: clamp(640px, 65%, 980px)，手机视口必然横向溢出。
• Files、AI Activity、Hardware、Monitoring、App Store、Audit Log 等页面存在固定侧栏、多列网格、固定宽度 Dialog/Drawer 和宽表格。
• 当前仅登录页在 880px 以下隐藏品牌区，不足以覆盖登录表单、键盘、横竖屏及主应用页面。

需要建立一套统一、渐进增强的移动端布局，使 Console UI 能在手机和平板上完成查看状态、打开应用及常用管理操作，同时保持桌面端现有体验。

产品目标

1. 在手机和平板上消除页面级横向溢出、内容遮挡和不可点击控件。
2. 将桌面“多窗口”交互在窄屏下转换为清晰的“单应用全屏”导航模型。
3. 让核心状态查看、应用启动、应用管理、告警和文件浏览支持触控操作。
4. 建立统一的 breakpoint、safe area、动态视口和响应式组件规范，避免逐页打补丁。
5. 保持桌面端布局与鼠标交互不回退。

响应式基线

断点与能力检测

• 建议断点：手机 < 640px、平板 640–1023px、桌面 ≥ 1024px；具体值以内容断点验证为准。
• 同时使用 pointer: coarse、hover: none 等能力查询，不仅依赖 UA 或屏幕宽度。
• 在 index.html 增加正确的移动端 viewport 声明，并支持刘海屏 safe area。
• 以 CSS/container query 为主；仅在交互模型确实不同（如单窗口模式）时在 React 中读取媒体查询。
• 统一提供响应式 token/hook，禁止各页面自行散落硬编码断点。

移动端应用壳

• 手机采用“单应用全屏”模式：同一时刻只显示当前活动应用，不呈现桌面式层叠窗口。
• 应用窗口填满可用视口，隐藏无意义的最小化/最大化按钮；提供清晰的返回桌面、关闭和管理入口。
• 平板优先使用单窗口全屏；横屏且空间足够时可保留有限的桌面窗口形态。
• 使用 100dvh/visualViewport 处理移动浏览器地址栏和软键盘，不将关键操作固定在被键盘遮挡的位置。
• 切换横竖屏后，当前应用、tab、滚动位置及用户输入不应丢失。

StatusBar 与 Dock

• 手机 StatusBar 改为紧凑顶栏：保留设备名、关键在线/告警状态和用户菜单；CPU/GPU/内存、完整时间等次要信息放入可展开状态面板。
• 手机 Dock 作为底部导航，支持横向滚动或“更多”入口；不得溢出视口。
• Dock 和固定底栏计入 env(safe-area-inset-bottom)，顶部栏计入 env(safe-area-inset-top)。
• 所有主要触控目标建议至少 44 × 44px，交互不得依赖 hover 或右键。
• 现有 Dock 右键关闭和 hover 关闭按钮需提供移动端显式替代操作。

组件级适配

Desktop

• workstation/compact 的双栏在手机下降为单栏；时钟、设备信息、备忘等 Widget 移至主内容之后或折叠区。
• AppGrid 根据可用宽度自动调整列数和图标尺寸，最窄支持 320px CSS viewport。
• 页面 padding/gap 使用响应式 token，避免固定 36–56px 造成内容区过窄。

Drawer、Dialog、Tabs

• 手机上的 Drawer/Dialog 使用全屏或底部 Sheet，宽度为可用视口，不保留 640px/440px/480px 等固定下限。
• 平板 Drawer 最大宽度不超过视口，并保留明确关闭入口。
• TabBar 在窄屏支持横向滚动，活动 tab 自动滚入可见区域，不压缩到无法阅读。
• Sheet/Drawer 支持触控拖动时，不与内部纵向滚动、浏览器返回手势冲突。
• 弹层打开时锁定背景滚动并正确管理焦点；桌面端无障碍语义不回退。

表格、表单与多栏页面

• 表格按用途选择：关键字段卡片化、次要列折叠，或在有明确滚动提示的容器内横向滚动；禁止整页横向滚动。
• 工具栏、过滤器、搜索框和操作按钮允许换行，主要操作在小屏保持可见。
• 双栏/多栏表单在手机下降为单栏；输入框不应触发 iOS 自动缩放（字号至少 16px 或使用等效方案）。
• Files 的快捷目录侧栏和详情栏在手机改为互斥 Drawer/Sheet，避免固定占用 200px + 320px。
• AI Activity 的 300–360px + 1fr 主从布局在手机改为列表→详情导航。
• Hardware、Monitoring、Dashboard 的 3/4/5 列指标网格按可用宽度降为 2→1 列。
• 日志、Shell、代码编辑器、图表和长 URL/命令需有明确的内部滚动、缩放或折行策略。

页面优先级与阶段

P0：应用骨架与关键流程

• index.html viewport、动态视口与 safe area
• 登录页与认证弹窗
• App / Desktop / StatusBar / Dock / AppWindow
• AppMgmtDrawer、通用 Dialog、TabBar、Toast
• 告警入口和应用启动/关闭/返回桌面流程

P1：高频管理页

• App Store
• Files
• Dashboard / Monitoring
• Audit Log
• Processes / Disk Manager / Models / Links

P2：复杂工作区

• AI Activity 的主从布局和宽表
• Hardware 的多指标网格与 PCIe 等宽表
• AppShell 内的 VS Code、Jupyter、Ollama、ComfyUI、SD WebUI、Open WebUI、Training 仿真页面
• 容器 Shell、日志和代码/画布类交互

P2 中的复杂桌面工作区允许首期提供“只读摘要 / 建议切换桌面端”的受控降级，但不得出现白屏、控件完全不可达或整页布局破坏。

浏览器与设备范围

• iOS Safari：最近两个主要版本。
• Android Chrome：最近两个主要版本。
• iPadOS Safari：最近两个主要版本。
• 桌面 Chrome/Chromium、Firefox、Safari 保持现有行为。
• 最小 CSS viewport：320 × 568；重点验证 360 × 800、390 × 844、768 × 1024、1024 × 768。
• 同时测试手机横屏、浏览器缩放至 200%、软键盘弹出和设备旋转。

验收标准

• index.html 配置正确的移动端 viewport，页面支持 safe area 和动态视口高度。
• 320px 宽度下，P0 页面不存在页面级横向滚动、内容截断或被固定栏遮挡。
• 手机采用单应用全屏模式，可完成“登录 → 打开应用 → 查看/操作 → 返回桌面/关闭”的完整流程。
• StatusBar 和 Dock 在手机上可用；运行应用较多时仍能访问全部入口。
• 所有 P0 Drawer/Dialog/Tab 在小屏下不超出视口，支持触控、键盘和屏幕阅读器。
• 主要触控目标达到约 44 × 44px，移动端不存在仅 hover/右键才能执行的必要操作。
• 表单聚焦时不会被软键盘遮挡，输入过程中不会意外丢失状态或触发页面缩放。
• 横竖屏切换和 resize 后，当前应用及核心页面状态保持稳定。
• P1 页面已按卡片化、列折叠或局部横向滚动策略完成适配，不产生整页横向滚动。
• P2 页面至少提供受控降级；核心内容与“建议使用桌面端”说明可访问。
• prefers-reduced-motion、prefers-reduced-transparency 和键盘焦点样式继续生效。
• 桌面端视觉布局、窗口操作、Dock 和现有页面行为无回归。
• 增加响应式组件/媒体查询单元测试，以及上述关键 viewport 的浏览器回归测试和截图证据。

建议测试场景

1. iPhone/Android 竖屏登录，输入用户名密码并提交。
2. 从桌面启动应用、切换应用、返回桌面和关闭应用。
3. 打开告警、应用管理 Drawer、确认 Dialog，并逐层关闭。
4. 打开 Files 的目录、文件详情和搜索；验证侧栏/详情不同时挤占内容。
5. 查看 Dashboard/Monitoring 指标和宽表，验证局部滚动提示。
6. 聚焦 Shell/日志/表单，弹出软键盘后验证可视区域和关键按钮。
7. 旋转设备、使用浏览器前进/后退，并验证状态与焦点。
8. 桌面端执行现有窗口最小化、最大化、Dock 聚焦和管理 Drawer 回归。

非目标

• 本 Issue 不要求将所有第三方或跨域 iframe 应用重写为原生移动端 UI。
• 不在本 Issue 中实现原生 iOS/Android App 或离线 PWA。
• 不为移动端新增后端 API；如页面数据量需要分页，应拆分独立 Issue。
• 不以全局 transform: scale() 缩小桌面页面作为移动端适配方案。