docs: 故事剧场化设计 v2 修订——互动剧情演绎（剧本化内容 + StoryPlayer + 决策嵌入剧情流，内容来源 oMLX 草稿 + 人工精修）

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-08-13 15:52:11 +08:00
parent 4cfd861521
commit 28b0ba7c11
1 changed files with 80 additions and 1 deletions
@@ -1,11 +1,90 @@
 # 故事剧场化设计（表现形式升级：剧场 + 全互动决策）

-> 日期：2026-08-13 ｜ 状态：已获用户批准 ｜ 关联：M1.5 互动体验（docs/superpowers/plans/2026-08-13-m1_5-interactions.md 之后的新增设计）
+> 日期：2026-08-13 ｜ 状态：已获用户批准（含 v2 修订）｜ 关联：M1.5 互动体验（docs/superpowers/plans/2026-08-13-m1_5-interactions.md 之后的新增设计）

 ## 背景与问题

 当前每计谋关卡的表现形式为「文字情境 + 文字选项列表 + 点评弹层」。走查反馈：**呈现形式生硬、考试感强，无法引起 4-8 岁儿童兴趣**。核心矛盾：决策树数据模型（情境 → 决策 → 分支 → 结果 → 点评 → 完美机制）是教育价值的载体，必须完整保留；需要改变的是**呈现层**——把「读题、答题」变成「看小剧场、动手玩」。

+## v2 修订（2026-08-13）：互动剧情演绎
+
+> 用户走查反馈（v1 落地后）：关卡仍是「读一段描述 → 答题」，**决策没有融入剧情流**，情境描述简略，孩子没兴趣。v1 解决「怎么演」（三幕演出壳），v2 解决「演什么」——内容剧本化：每个决策节点从一段描述文字变成一场微型剧情演绎（台词流），决策与反馈嵌入剧情流。决策树模型仍零改动：v2 只新增 `scene_node.script` 列 + 前端 StoryPlayer + 剧本生成管线。
+>
+> **剧本内容来源（方案 3）：oMLX 批量生成草稿 + 人工精修 + 导入回填。**
+
+### 核心转变
+
+| 维度 | v1（现状） | v2（剧情演绎） |
+|---|---|---|
+| 内容 | `node.content` 一段描述文字 | `script` 3-6 句台词流：旁白 + 角色对话 + 末句角色提问 |
+| 呈现 | 静态节点卡片 + 朗读按钮 | StoryPlayer 逐句演绎：对话气泡 + 自动朗读 + 逐字高亮 + 表情切换 |
+| 决策 | 卡片下方「答题」 | 剧情流内角色提问 → ActionCard 直接出现在剧情流 |
+| 反馈 | 弹窗点评（你的选择 + ✓/✗） | 角色回应气泡融入剧情流（pros/cons 转角色台词） |
+| 内容生产 | 种子数据手工撰写 | oMLX 生成草稿 → 人工精修 → 导入回填 |
+
+### 数据模型（最小改动）
+
+`scene_node` 新增一列（dao 迁移 + EnsureColumn，模式同 `*_pinyin` 列）：
+
+- `script TEXT`：JSON 数组台词流，每节点 3-6 句：
+
+```json
+[
+  {"speaker": "旁白", "text": "夜深了，城里静悄悄的。", "emotion": "normal"},
+  {"speaker": "小军师", "text": "城门关着，怎么进去呢？", "emotion": "think"}
+]
+```
+
+- `speaker`：`旁白` 或角色名（`node.character.name`），旁白居中无头像，角色带头像气泡
+- `text`：一句台词 8-30 字（含标点）
+- `emotion`：`normal | happy | sad | think | surprise` → mood 徽章 🤔 😊 😢 🧐 😮
+- 结构约束（生成校验器强制）：决策节点（`interaction_type=1`）末句必须为角色提问（speaker=角色名、结尾「？」）；终局节点（`result_type>0`）末句为角色总结（欣慰/鼓励）；其他句 speaker 自由（旁白/角色交替）
+- **pinyin 不入草稿**：导入时用 `common.AnnotatePinyin` 对每句 text 生成逐字注音 JSON（人工精修会改文本，导入时统一重算），前端 RubyText 既有机制逐字对齐
+
+### StoryPlayer 组件（新）
+
+输入 `script` + `character` + `scene` + `showPinyin`，逐句演绎：
+
+1. 对话气泡入场（CSS 淡入上滑）：旁白居中（无头像、斜体/描边区分），角色左侧头像 + 名字 + 气泡
+2. 自动朗读该句（`speech.speak` 逐句，TTS 降级）
+3. 逐字高亮：RubyText 扩展 `highlight` prop（当前朗读字下标），点亮进度跟随朗读
+4. 句间停顿（≤300ms/字），emotion 切换 mood 徽章弹跳（复用 `.char-mood` 动画）
+5. 播完 `@done`；右上「跳过」立即完成
+
+`script` 为空：StoryPlayer 不渲染，回退现有卡片呈现（零变化）。
+
+### play.vue 剧情流
+
+- 节点区从「独立卡片」改为「剧情流 scroll-view」：当前节点剧本演绎 → 播完 ActionCard 出现在剧情流底部（复用现有 ActionCard/触控组件）→ 选择提交 → **角色回应气泡融入剧情流**（用 `feedback_pros/cons` 作为角色台词 + 分支演出 mood/音效，替代弹窗）→ 「继续」→ 下一节点剧本继续演绎，剧情流滚动增长
+- 场景横幅（scene-card 精简为顶部横幅）固定，镜头感；进度点保留
+- `level/choose` 接口、判分、完美机制、路由记录**零改动**；反馈 pros/cons 文本由 genasset 点评管线生成（已有）
+
+### 剧本生成管线（并入 genasset）
+
+- `--only=scripts`：对 `scene_node` 逐节点调 oMLX（prompt：情境 content + 选项 + 角色名 → 台词流，风格约束：儿童化口语、每句 8-30 字、3-6 句、末句提问/总结）→ 校验（结构约束 + JSON 解析 + 长度）→ 草稿写 `workspace/scripts/{level_id}/{node_id}.json`（含待修标记，人工可编辑）
+- `--import-scripts`：草稿 → 再校验 → 每句 `AnnotatePinyin` → `UPDATE scene_node.script`，幂等（已有 script 跳过）
+- 与素材/点评管线同池并发 2、同 `--strategy/--force` 控制
+
+### 前端回退与渐进升级
+
+- `script` 为空 → 现有 v1 呈现零变化；36 关逐关生成回填，前端自动升级为剧情演绎
+- 不阻塞 v1：阶段 A 落地即可验收；B/C 逐关生效
+
+### 验收标准（v2）
+
+1. 决策节点演绎台词流：气泡 + 自动朗读 + 逐字高亮 + 表情切换，末句角色提问
+2. ActionCard 出现在剧情流内（非独立答题区），触控 5 种互动同样嵌入
+3. 选择后角色回应气泡融入剧情流，无弹窗；分支演出（mood/音效）保留
+4. `script` 为空节点完整回退现有呈现
+5. 管线：`--only=scripts` 草稿 → 人工精修 → `--import-scripts` → 前端生效；校验拒绝不合规草稿
+6. `level/choose` 判分与完美机制行为不变（单测全过）
+
+### 实施拆分
+
+- **阶段 A（数据 + 后端 + StoryPlayer + 剧情流）**：`scene_node.script` 列迁移 + `NodeVO.Script` 透出 + RubyText `highlight` prop + StoryPlayer 组件 + play.vue 剧情流集成（回退保护）
+- **阶段 B（生成管线）**：genasset `--only=scripts` / `--import-scripts` + 第 1 计试点生成并精修 1 关
+- **阶段 C（全量）**：36 关剧本后台生成 + 人工精修流程 + 走查验收
+
 ## 设计总览

 每关 = 一部 2-3 分钟儿童小剧场，三幕结构：