设计观察
好的界面把复杂留给系统，把清楚留给用户。 今天观察：同样的信息，只改变字号和间距，阅读顺序就变了。
笔记应用 · 手机 / 平板 / 桌面
同一个笔记，三种合适的布局
共享任务与内容，根据可用空间改变界面组织。
用户的任务浏览、阅读与编辑笔记，改变窗口后不丢失上下文。
点击不同笔记，再切换窗口类型。当前笔记保持，布局随空间改变。
窄屏采用列表到详情的导航，宽屏同时呈现列表与内容，当前笔记始终保持。
一步步拆解设计决定
- 01
共享核心对象
笔记的标题、正文、选择与编辑状态独立于布局。
- 02
按空间重排
空间足够时展示双栏，变窄后显示当前详情并提供返回列表。
- 03
适配输入
桌面有键盘与菜单，触屏有合适目标和可见操作。
- 04
验证连续性
旋转、分屏、窗口缩放之后，编辑内容和当前位置不应重置。
把规则带进代码
IMPLEMENTATION NOTE
// 共享状态，分别选择适合空间的视图
const [selectedId, setSelectedId] = useState(initialId);
// 布局变化不重建笔记数据，也不重置 selectedId。