这是一个完全按照您要求定制的版本。
**交互逻辑的核心改进：**
这个版本不再是一次性播放到底。**“主按钮”**现在是一个智能状态机：
1. 初始状态：显示 **“▶ 播放第一步”**。
2. 中间状态：点击后播放动画，完成后按钮变为 **“▶ 播放下一步”**。
3. 结束状态：所有步骤完成后，按钮变为 **“↺ 重置并循环”**。
4. 点击重置：瞬间回到初始状态，允许你再次循环演示。
这种**步进式（Step-by-Step）**的交互方式最适合教学，让孩子/学生可以在每一步停下来思考，而不是被动观看。
::: html
:::
### 如何使用和理解这个新版本
1. **状态 1：初始准备**
* 选择左侧任意工具（例如 **工具 1: SN1**）。
* 画面会显示反应的初始状态（底物和试剂已就位）。
* 右下角按钮显示 **“▶ 播放第一步：异裂”**。
2. **状态 2：逐步推进**
* 点击按钮。你会看到动画（Br 离去，C 变红变平）。
* 下方的文字解释会更新，告诉你这一步的化学含义（“决速步”、“平面三角型”）。
* 按钮文字自动变为 **“▶ 播放第二步：亲核进攻”**。
3. **状态 3：完成与循环**
* 再次点击按钮。播放最后一步动画（H₂O 结合，外消旋化）。
* 此时所有步骤演示完毕。按钮变为绿色的 **“↺ 重置并循环”**。
* 点击它，瞬间回到初始状态，方便你再次给孩子讲解或让孩子自己操作。
### 此版本的优势
* **可控性强**：不会一股脑播完，而是必须由用户点击触发下一步。这对于讲解“为什么这一步会发生”非常关键。
* **无遗漏**：涵盖了 PDF 中所有 7 个关键工具。
* **视觉辅助**：
* **红色原子/键**：表示离去基团或双键。
* **红色填充**：表示碳正离子（缺电子）。
* **橙色填充**：表示自由基（单电子）。
* **平面化动画**：在 SN1 中通过移动甲基的位置，模拟了从四面体到平面的立体化学变化。