docs: add P15 Dagre key-moment timeline plan to FUTURE, preserve platform extensions

This commit is contained in:
2026-06-09 19:22:27 +08:00
parent 5476c1b5cf
commit 33ad26ed52

View File

@@ -91,7 +91,58 @@
- 画面震动强度/频率可配置 - 画面震动强度/频率可配置
- 动态字幕说话人识别AI 自动标注) - 动态字幕说话人识别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 支持(离线播放、安装到桌面) - PWA 支持(离线播放、安装到桌面)
- Web Monetization API 付费解锁章节 - Web Monetization API 付费解锁章节