From 33ad26ed5239a2e088f9fbef1323467f47fa06e7 Mon Sep 17 00:00:00 2001
From: cocos02 <cocos02@163.com>
Date: Tue, 9 Jun 2026 19:22:27 +0800
Subject: [PATCH] docs: add P15 Dagre key-moment timeline plan to FUTURE,
 preserve platform extensions

---
 FUTURE.md | 53 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 52 insertions(+), 1 deletion(-)

diff --git a/FUTURE.md b/FUTURE.md
index aa240e1..f2fd0a9 100644
--- a/FUTURE.md
+++ b/FUTURE.md
@@ -91,7 +91,58 @@
 - 画面震动强度/频率可配置
 - 动态字幕说话人识别（AI 自动标注）
 
-## P15 平台化 - 扩展
+## P15 章节回顾 — 关键节点时间线图（Life is Strange 方案）
+
+### 背景
+
+当前 P15 的章节回顾是**列表模式**（BFS 遍历可达场景 + visited/unvisited 列表 + 完成度百分比 + 条件提示），已满足核心目标——知道哪些场景到过、漏了什么、怎么解锁。
+
+原计划使用 Vue Flow 完整分支图，但经评估后确认：分支数多时（多父同子、回边循环），自动布局的流程图会变成"意大利面"，玩家理解成本反高于简单列表。
+
+### 业界对比
+
+| 方案 | 做法 | 清晰度 | 成本 |
+|------|------|--------|------|
+| **Detroit 手绘图** | 美术逐章手工设计 InfoGraphic | 极高 | 极高 |
+| **Life is Strange 时间线** | 只画 `keyMoment` 标记的关键节点，Dagre 自动排成水平时间线，跳过琐碎小场景 | 高 | 中 |
+| **Telltale 纯统计** | 片尾弹出 "52% 玩家选了救 Doug"，不画任何图 | N/A | 极低 |
+| **当前列表版** | BFS 遍历全场景 + visited/unvisited 标记 | 中 | 已实现 |
+
+### 实施路线
+
+当需要可视化展示时，采用 **Life is Strange 时间线方案**：
+
+**数据层：**
+```ts
+// engine/types.ts
+interface SceneNode {
+  // ...existing fields
+  keyMoment?: boolean  // 标记为"关键节点"，只有这些节点出现在时间线图中
+}
+```
+
+**布局引擎：**
+- 复用编辑器已有的 Dagre 布局（`editor/composables/useLayout.ts`）
+- `rankdir: 'LR'` 从左到右水平排列
+- 只遍历 `keyMoment === true` 的场景，普通场景跳过不渲染
+- 仅展示关键节点之间的 choices / nextScene / QTE 跳转关系
+
+**视觉设计：**
+- visited 节点：绿色实心
+- unvisited 节点：灰色虚线边框
+- 回边（循环引用）：虚线 + 半透明
+- 条件提示：小锁图标 + 文本（如 `🔒 trust >= 80`）
+- 普通小场景完全不出现，避免线路交织
+
+**组件：**
+- `src/components/ChapterTimeline.vue` — 新建，只读 Vue Flow + Dagre 时间线
+- 与 `ChapterRecap.vue` 并列，不同入口或同一个面板的切换 Tab
+
+### 优先级
+
+低。列表版已满足 P15 核心目标，时间线图是锦上添花的视觉增强。
+
+## P15+ 平台分发 - 扩展
 
 - PWA 支持（离线播放、安装到桌面）
 - Web Monetization API 付费解锁章节