移动端页面栈 · 整页版

移动端页面栈与模态栈那台引擎的整页版：同一套声明式 reconcile，把 URL 翻译成期望栈、与实际挂载做 diff，公共前缀保活、多出来的销毁、缺的补上。引擎的完整拆解在讲解版里，本页只留成品。

图 0-1 · 页面栈引擎的整页版。可点可跳转行 push、点顶栏返回或从左缘右滑 pop、进设置看模态从底部滑入，冷启动按钮模拟直达深层地址。

本页是一个受控模拟：不改动浏览器真实的 history 与 location，导航、返回与侧滑全部走组件内部维护的一份栈状态。原始的整页版占满视口、吃进刘海与底部安全区、直接由真实 history（hash 模式）驱动，因此手机系统返回手势能直接弹栈；搬进讲解文档后，那种沉浸感换成了这台手机框，手感与逻辑保持一致。

1 · 三类动作与同一台引擎

手机里能触发的动作分三类。

三类动作在底层都收敛到同一个 reconcile，差别只在期望栈算出来是什么。
动作	触发方式	栈的变化
push	点可跳转行	顶层水平滑入，下层左移压暗、保活不卸载
pop	点顶栏 `‹`，或从左缘向右侧滑	顶层离场动画结束后销毁，下层归位复原
模态	点「设置」进入	模态栈从底部滑入，盖住背景页（背景仍保活），顶栏 `✕` 一次弹掉整层

建议 · 返回时上一页原封不动，唯一的原因是它从没被销毁过。push 只是在栈上叠一层、把下层盖住，下层的 DOM、滚动位置与展开态都留在原地，pop 才销毁顶层。在首页往下滚一段、进详情或开设置转一圈再返回，首页的滚动位置分毫不差，这就是原生 UINavigationController 与 Android back stack 的语义。

2 · 直达深层地址时的背景合成

控制区那排冷启动按钮清空已挂载的层，直接从某个深层地址重建。直达 #/settings/account/security 时它底下本没有任何背景页，引擎按 stackFromPath 的规则先铺一段背景链（默认首页，或从记下的来源页取回），再接上设置自己的链，返回时才有处可去。

警示 · 侧滑返回只对水平 push 的栈顶生效：必须从左缘起手、横向位移超过阈值才提交弹栈，否则回弹复位；纵向滑动会被判定为正文滚动而放弃。模态栈的栈底（设置那一层）是垂直滑入的，只能用顶栏 ✕ 关闭，不吃侧滑。

引擎的三块内核（stackFromPath 如何把路径累积成链、reconcile 如何按公共前缀做 diff、直达时背景如何合成）在讲解版里逐段拆开；换成框架原语的写法见 vue-router 版；这台引擎依赖的 push、pop 与 history「条目加指针」模型，客户端路由一页讲透。