列表切换要用 master-detail 而非重建列表

更新于 2026-09-21

**左列表 + 右详情的界面，如果点卡片走「完整路由跳转」（`/notes/[slug]`），每次切换都会经历详情页挂载、列表重新渲染/排序、编辑器初始化，于是容易「选中后列表跳位」。改成 master-detail（点卡片只改选中态，不跳路由）更稳。**

两种模型

路由详情页master-detail
点击卡片进入 /notes/[slug]，路由变化只改 selectedId/slug
左列表每次切换重新挂载/排序只加载一次，滚动容器不重建
代价能直接分享/刷新单篇链接，前进后退自然需自己同步 URL（history.pushState）保留直达链接
稳定性易出现选中后跳位列表根本不重建，不跳

做法

  • 左侧列表只加载一次，点击只改选中态；右侧切换当前内容。
  • URL 用 history.pushState 或轻量路由同步成 /notes/slug，保留直达链接。
  • 直接打开 /notes/slug 时，再初始化选中那一篇。

判据：问题不是「按更新时间排序」，而是「切换时列表被重建」。 正确解法是让列表不重建，而不是取消排序——甚至可以在「离开/切换区/刷新」时才重排。

参考：Mac Notes 也按更新时间排却不明显卡顿，因为它左栏一直在、编辑器切换不驱动左栏重新加载、数据本地增量更新。

相关