[Design] 移动端适配 — breakpoints、UX 模式和 CSS 基础层

[neilforest7]

背景

DeerFlow 的 workspace UI 目前以桌面端（≥1280px）为前提设计。在移动设备上存在一些体验问题，这里整理出来供讨论：

• iPhone 尺寸（390–430px）下，suggestion chips 会叠在消息区域上方，最后几条回复不易看到。
• 平板竖屏（如 Galaxy Tab S9，800×1280）下，虚拟键盘弹出后聊天输入框会移到视野之外。iOS Safari 不响应 VirtualKeyboard API，也不响应 interactive-widget=resizes-content，跨浏览器适配需要额外处理 visualViewport。
• 小屏幕上没有唤出侧边栏的方式——无法切换对话或 agent，也无法访问 workspace 的导航入口。
• Mode selection / reasoning effort 的 dropdown 菜单在窄屏上会超出屏幕边缘。
• Artifact panel 在窄屏下仍按 60/40 分栏，两侧都偏窄，阅读代码和 markdown 不太方便。

设计提案

写代码之前先确认方向。

1. Breakpoint 策略

区间	Tailwind 对应	覆盖范围
Phone	< 640px (max-sm)	iPhone SE 到 iPhone 14 Pro Max
Tablet	640–1023px	iPad mini 竖屏、Galaxy Tab S9 竖屏
Desktop	≥ 1024px (lg+)	笔记本和外接显示器

核心分界线是 1024px。低于这个宽度，persistent sidebar + 多栏 layout 会比较拥挤；高于这个宽度，现有桌面端布局无需改动。

建议加一个自定义 breakpoint --breakpoint-tab: 800px，专门覆盖 Galaxy Tab S9 竖屏——它刚好卡在 Tailwind 的 md（768）和 lg（1024）之间。

2. Layout 模式切换

Viewport 宽度	Sidebar	Chat ↔ Artifact 切换
≥ 1024px	Persistent（现有行为）	侧边可拖拽分栏
< 1024px	Drawer overlay	全屏切换（100/0 或 0/100）

1024px 以下全屏切换更实用：即使最大平板（~924px），60/40 分栏每边也只有 ~550/370px。

对小屏幕 sidebar 的设想：在窄屏上通过一个明显的 toggle 按钮以 Sheet overlay 方式打开 sidebar，覆盖在当前内容上方。这样切换对话、选择 agent、进入 workspace 导航都通过同一个入口完成。

3. CSS 基础层

可被现有组件按需使用的 infrastructure：

• pt-safe / pb-safe / px-safe / py-safe — 引用 env(safe-area-inset-*) 的 padding utility，适配 iPhone 的 notch / Dynamic Island / Home Indicator
• pb-keyboard / bottom-keyboard — 底部定位跟随键盘上下移动，通过 max(env(keyboard-inset-bottom), var(--keyboard-inset-js)) 实现。JS fallback（useVisualViewport hook）覆盖 iOS Safari
• touch-target — 在有 coarse pointer 的设备上强制 min-width/height: 2.75rem（44px），匹配 Apple HIG 的最低触控尺寸
• hoverable: custom variant — 把 hover 交互限定在 @media (hover: hover) and (pointer: fine)，触摸设备不会出现「摸不到才显示」的 UI

4. Viewport metadata

根 layout 需要 viewportFit: "cover"（让 env(safe-area-inset-*) 在 iPhone 上返回非零值）和 interactiveWidget: "resizes-content"（Chromium 在键盘弹出时收缩 layout viewport）。

已有探索

PR #2409 已经在这个方向上做了完整实现，真机测试覆盖了 iPhone 14 全系和 Galaxy Tab S9 系列。其思路与上述设计一致。

如果 maintainers 认可移动端适配的方向，我可以基于 #2409 继续推进，也可以拆成增量 PR 从头来，看你们更倾向哪种。

想确认的几个问题

• 移动端/平板适配在当前的 roadmap 上吗？如果不在，社区贡献这个方向你们是否欢迎？
• 上述 breakpoints（phone < 640, tablet 640–1024, desktop 1024+）对 DeerFlow 的 UI 来说是否合理，还是你们有其他偏好的阈值？
• 对 CSS primitive 方案（Tailwind @utility class 做 safe-area / keyboard / touch-target）有没有顾虑或更好的建议？