feat: story gallery progress, type updates, roadmap, cleanup old session file

ROADMAP.md

@@ -1205,25 +1205,60 @@ npx @electron/packager . MyGame --platform=win32 --arch=x64 --out=release
 - [x] 验证：点击 ▶ 开始 → 正确跳转到该章节
 - [x] 验证：已删除 ChapterSelect.vue / EndingGallery.vue 后项目无编译残留
 
-```json
+### P23 玩家树可视化 — 缩进树取代平铺列表 ✅ 已完成 2026-06-10
-{
+
-  "dependencies": {
+目标：将 StoryGallery 的章节回顾从平铺场景列表升级为缩进树形结构。创作图的汇聚节点在树上复制展示，
-    "vue": "^3.4",
+玩家看到的是严格树——每条选择路径看起来都是独立的故事线（对标 Detroit）。
-    "pinia": "^2.1",
+
-    "@vue-flow/core": "^1.x",
+**核心改动：StoryGallery 的 `sceneListForChapter()` 替换为 `buildPlayerTree()`**
-    "@vue-flow/background": "^1.x",
+——BFS 遍历图 → 保持树形父子关系 → 同节点不同路径各自复制。
-    "@vue-flow/controls": "^1.x",
+
-    "dexie": "^4.0"
+**数据结构：**
-  },
+
-  "devDependencies": {
+```typescript
-    "@vitejs/plugin-vue": "^5.0",
+interface PlayerTreeNode {
-    "typescript": "^5.3",
+  sceneId: string
-    "vite": "^5.0",
+  label: string
-    "vue-tsc": "^2.0"
+  visited: boolean
-  }
+  locked: boolean
+  lockHint?: string
+  children: PlayerTreeNode[]
 }
 ```
 
+**渲染效果对比：**
+
+```
+之前（平铺列表）：              之后（缩进树）：
+✅ intro                       ✅ intro
+✅ left_door                    ├ ✅ left_door
+⬜ trust_ending 🔒 trust>=80    │   ├ ⬜ trust_ending 🔒 trust>=80
+⬜ alone_ending                 │   └ ⬜ alone_ending
+                                 ├ ✅ right_door
+                                 │   ├ ✅ qte_success
+                                 │   │   └ ✅ continue_ending
+                                 │   └ ⬜ qte_fail
+                                 └ ✅ stay
+                                     └ ⬜ alone_ending   ← 汇聚节点，两条路径各出现一次
+```
+
+**实现改动：**
+
+| 文件 | 改动 |
+|------|------|
+| `engine/types.ts` | 新增 `PlayerTreeNode` 接口 |
+| `src/components/StoryGallery.vue` | `sceneListForChapter()` → `buildPlayerTree()`（递归渲染缩进树）+ 纯 CSS 树连线（`border-left` + `::before` 横线） |
+
+**实现清单：**
+
+- [x] `engine/types.ts` — `PlayerTreeNode { sceneId, label, visited, locked, lockHint?, children[] }`
+- [x] `src/components/TreeNode.vue` — **新建** — 递归树节点组件，`depth` 参数控制缩进 + `border-left` 竖线
+- [x] `src/components/StoryGallery.vue` — `sceneListForChapter()` → `buildPlayerTree(sceneId, depth, pathSet)` + `buildTreeForChapter()`；Template 用 `<TreeNode>` 渲染
+  - 回环检测：`pathSet: Set<string>` 记录当前路径场景 ID，精确剪枝
+  - 深度兜底：`depth > 10` 截断
+  - 汇聚节点：同一 sceneId 在不同父节点下各建一个独立的 PlayerTreeNode
+- [x] 验证：TypeScript + Vite build 通过
+
 ## 关键架构决策记录
 
 1. **引擎与 UI 分离**: `engine/` 下纯 TS 类，不 import Vue。UI 层通过 composables 桥接。

engine/types.ts

@@ -152,3 +152,12 @@ export type EngineEvent =
   | 'hotspotUpdate'
   | 'chapterUnlock'
   | 'achievementUnlock'
+
+export interface PlayerTreeNode {
+  sceneId: string
+  label: string
+  visited: boolean
+  locked: boolean
+  lockHint?: string
+  children: PlayerTreeNode[]
+}

src/components/StoryGallery.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import type { ChapterInfo, SceneNode, EndingDef } from '@engine/types'
+import type { ChapterInfo, SceneNode, EndingDef, PlayerTreeNode } from '@engine/types'
 import { useI18n } from '@/composables/useI18n'
+import TreeNode from './TreeNode.vue'
 
 const { t } = useI18n()
 
@@ -48,7 +49,6 @@ function collectReachable(startId: string): Set<string> {
   return visited
 }
 
-// For each chapter, precompute reachable set
 const chapterReachable = computed(() => {
   const result: Record<string, Set<string>> = {}
   for (const ch of props.chapters) {
@@ -57,7 +57,6 @@ const chapterReachable = computed(() => {
   return result
 })
 
-// Which endings belong to each chapter (BFS-based, no chapterId needed)
 const chapterEndings = computed(() => {
   const result: Record<string, EndingDef[]> = {}
   for (const ch of props.chapters) {
@@ -80,36 +79,80 @@ function chapterProgress(chapterId: string) {
   return { count, total: reachable.size, pct: Math.round((count / reachable.size) * 100) }
 }
 
-function sceneListForChapter(chapterId: string) {
+function lockHint(sceneId: string): string {
-  const reachable = chapterReachable.value[chapterId]
+  for (const [, src] of Object.entries(props.scenes)) {
-  if (!reachable) return []
+    if (src.choices) {
-  return [...reachable].map((id) => {
+      for (const c of src.choices) {
-    const scene = props.scenes[id]
+        if (c.targetScene === sceneId && c.conditions && c.conditions.length > 0) {
-    const isVisited = props.visitedIds.has(id)
+          return `${c.conditions[0].variable} ${c.conditions[0].op} ${c.conditions[0].value}`
-    let hint = ''
-    if (!isVisited) {
-      for (const [, src] of Object.entries(props.scenes)) {
-        if (src.choices) {
-          for (const c of src.choices) {
-            if (c.targetScene === id && c.conditions && c.conditions.length > 0) {
-              hint = `${c.conditions[0].variable} ${c.conditions[0].op} ${c.conditions[0].value}`
-              break
-            }
-          }
         }
-        if (src.hotspots) {
-          for (const h of src.hotspots) {
-            if (h.targetScene === id && h.conditions && h.conditions.length > 0) {
-              hint = `${h.conditions[0].variable} ${h.conditions[0].op} ${h.conditions[0].value}`
-              break
-            }
-          }
-        }
-        if (hint) break
       }
     }
-    return { id, label: scene?.id ?? id, isVisited, hint }
+    if (src.hotspots) {
-  })
+      for (const h of src.hotspots) {
+        if (h.targetScene === sceneId && h.conditions && h.conditions.length > 0) {
+          return `${h.conditions[0].variable} ${h.conditions[0].op} ${h.conditions[0].value}`
+        }
+      }
+    }
+  }
+  return ''
+}
+
+function buildPlayerTree(sceneId: string, depth: number, pathSet: Set<string>): PlayerTreeNode | null {
+  if (depth > 10) return null
+  if (pathSet.has(sceneId)) return null
+
+  const scene = props.scenes[sceneId]
+  const label = scene?.id ?? sceneId
+  const visited = props.visitedIds.has(sceneId)
+  const hint = visited ? '' : lockHint(sceneId)
+  const locked = !visited && hint !== ''
+
+  pathSet.add(sceneId)
+
+  const children: PlayerTreeNode[] = []
+  if (scene) {
+    if (scene.choices) {
+      for (const c of scene.choices) {
+        if (c.targetScene) {
+          const child = buildPlayerTree(c.targetScene, depth + 1, pathSet)
+          if (child) children.push(child)
+        }
+      }
+    }
+    if (scene.nextScene) {
+      const child = buildPlayerTree(scene.nextScene, depth + 1, pathSet)
+      if (child) children.push(child)
+    }
+    if (scene.qte) {
+      if (scene.qte.successScene) {
+        const child = buildPlayerTree(scene.qte.successScene, depth + 1, pathSet)
+        if (child) children.push(child)
+      }
+      if (scene.qte.failScene) {
+        const child = buildPlayerTree(scene.qte.failScene, depth + 1, pathSet)
+        if (child) children.push(child)
+      }
+    }
+    if (scene.hotspots) {
+      for (const h of scene.hotspots) {
+        if (h.targetScene) {
+          const child = buildPlayerTree(h.targetScene, depth + 1, pathSet)
+          if (child) children.push(child)
+        }
+      }
+    }
+  }
+
+  pathSet.delete(sceneId)
+  return { sceneId, label, visited, locked, lockHint: hint, children }
+}
+
+function buildTreeForChapter(chapterId: string): PlayerTreeNode | null {
+  const ch = props.chapters.find(c => c.id === chapterId)
+  if (!ch) return null
+  return buildPlayerTree(ch.startScene, 0, new Set())
 }
 
 function toggleExpand(chapterId: string) {
@@ -160,18 +203,11 @@ function toggleExpand(chapterId: string) {
           </div>
 
           <div class="card-recap" v-if="expandedChapterId === ch.id">
-            <div class="recap-scene-list">
+            <TreeNode
-              <div
+              v-if="buildTreeForChapter(ch.id)"
-                v-for="item in sceneListForChapter(ch.id)"
+              :node="buildTreeForChapter(ch.id)!"
-                :key="item.id"
+              :depth="0"
-                class="recap-item"
+            />
-                :class="{ visited: item.isVisited }"
-              >
-                <span class="recap-icon">{{ item.isVisited ? '✅' : '⬜' }}</span>
-                <span class="recap-label">{{ item.label }}</span>
-                <span v-if="!item.isVisited && item.hint" class="recap-hint">🔒 {{ item.hint }}</span>
-              </div>
-            </div>
           </div>
         </div>
       </div>
@@ -226,7 +262,7 @@ function toggleExpand(chapterId: string) {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 8px;
-  width: 200px;
+  width: 240px;
   overflow: hidden;
   transition: border-color 0.2s;
 }
@@ -343,53 +379,10 @@ function toggleExpand(chapterId: string) {
 .card-recap {
   border-top: 1px solid rgba(255, 255, 255, 0.06);
   padding: 12px 14px;
-  max-height: 200px;
+  max-height: 220px;
   overflow-y: auto;
 }
 
-.recap-scene-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.recap-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 6px;
-  background: rgba(255, 255, 255, 0.02);
-  border-radius: 3px;
-  font-size: 11px;
-}
-
-.recap-item.visited {
-  background: rgba(76, 175, 80, 0.06);
-}
-
-.recap-icon {
-  font-size: 11px;
-  flex-shrink: 0;
-}
-
-.recap-label {
-  color: #aaa;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.recap-item.visited .recap-label {
-  color: #ddd;
-}
-
-.recap-hint {
-  font-size: 10px;
-  color: #ff9800;
-  white-space: nowrap;
-}
-
 .story-close {
   margin-top: 20px;
   padding: 10px 36px;

src/components/TreeNode.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { PlayerTreeNode } from '@engine/types'
+
+defineProps<{
+  node: PlayerTreeNode
+  depth: number
+}>()
+</script>
+
+<template>
+  <div class="tree-row" :style="{ paddingLeft: depth * 16 + 'px' }">
+    <span class="tree-icon">{{ node.visited ? '✅' : node.locked ? '🔒' : '⬜' }}</span>
+    <span class="tree-label" :class="{ visited: node.visited }">{{ node.label }}</span>
+    <span v-if="node.locked && node.lockHint" class="tree-hint">{{ node.lockHint }}</span>
+  </div>
+  <TreeNode
+    v-for="child in node.children"
+    :key="node.sceneId + '-' + child.sceneId"
+    :node="child"
+    :depth="depth + 1"
+  />
+</template>
+
+<style scoped>
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 6px;
+  font-size: 11px;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  margin-left: 8px;
+}
+
+.tree-icon {
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.tree-label {
+  color: #aaa;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.tree-label.visited {
+  color: #ddd;
+}
+
+.tree-hint {
+  font-size: 10px;
+  color: #ff9800;
+  white-space: nowrap;
+}
+</style>