docs: M1.5 游戏化 UI 设计、任务偏差记录、故事剧场化规格（README/技术设计/计划）
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
|
||||
## 功能特性
|
||||
|
||||
- **分支情境闯关**：36 计 × 每计 1-3 个现代情境，每个情境是一棵决策树——环境场景、人物、道具构成每个决策的要素，不同选择走向不同分支、产生不同结果，多条路线都能拿到最佳结果；每步即时反馈"智慧点评"；**通关 = 到达最佳终局，完美 = 走完所有分支，完美才解锁下一关**；未通关走错路线扣教训分
|
||||
- **分支情境闯关**：36 计 × 每计 1-3 个现代情境，每个情境是一棵决策树——环境场景、人物、道具构成每个决策的要素，不同选择走向不同分支、产生不同结果，多条路线都能拿到最佳结果；每步即时反馈"智慧点评"，**每个选择都解释好处/坏处（对比点评）**，结算页展示整局选择路线回顾；**通关 = 到达最佳终局，完美 = 走完所有分支，完美才解锁下一关**；未通关走错路线扣教训分
|
||||
- **多样互动**：闯关不止选项点击——道具选择、步骤排序、动作过关（跳跃/攀爬/躲避/奔跑，一套组件配置驱动）、拖拽放置、接取收集、找线索、连线配对共 8 类互动形态按年龄适配；操作型互动成功/失败同样走向对应决策分支，教育逻辑不受互动形式影响
|
||||
- **计策学堂**：每章开头先认识计策——卡通图文讲解名称、拼音、释义与"什么时候用它"，再进情境践行，构成认知 → 践行 → 反思完整学习闭环
|
||||
- **智慧总结**：每章闯关完成后一道反思题"哪个说法总结了这条计策"，把直觉选择转成语言认知，答对奖励积分
|
||||
@@ -59,7 +59,7 @@
|
||||
| 家长中心 | 家长注册/登录（微信 openid 或手机号）、孩子档案管理（含每日学习限额）、学习报告、实物奖品确认、生活任务确认 |
|
||||
| 计策学堂 | 每章开头的认知环节：图文/动画讲解计策名称、拼音、释义、使用时机 |
|
||||
| 关卡地图 | 36 计按六套分组展示，星星进度、解锁状态、计策卡图标 |
|
||||
| 情境闯关 | 每关一棵决策树：环境场景 + 人物冲突 + 道具行为构成决策要素，入口 → 多样互动（选择/排序/动作过关-跳跃攀爬躲避奔跑/拖拽/找线索，按年龄适配）→ 多路线通往不同终局；通关=到达最佳终局，完美=走完全部分支解锁下一关；未通关走错扣教训分 |
|
||||
| 情境闯关 | 每关一棵决策树：环境场景 + 人物冲突 + 道具行为构成决策要素，入口 → 多样互动（选择/排序/动作过关-跳跃攀爬躲避奔跑/拖拽/找线索，按年龄适配）→ 多路线通往不同终局；通关=到达最佳终局，完美=走完全部分支解锁下一关；未通关走错扣教训分。已实现：选项选择 + 触控互动（道具选择/步骤排序/拖拽放置/找线索/连线配对，互动入口节点模型，成功进决策树/失败进失败终局）+ 对比点评（每个选项好处/坏处）+ 结算路线回顾 + 场景插画/角色立绘/道具图标视觉呈现 |
|
||||
| 章末温故 | 每章完美后自动出现：随机抽 2-3 个已学计谋关卡重温（选项打乱），完成解锁下一章 + 奖励积分 |
|
||||
| 智慧总结 | 每章完成后的反思题（"哪个说法总结了这条计策"），答对 +5 分 |
|
||||
| 生活践行 | 章完美后下发的真实生活小任务（家长引导完成并确认，得积分） |
|
||||
@@ -68,7 +68,8 @@
|
||||
| 积分 | 闯关得分、每日签到，积分流水明细 |
|
||||
| 徽章 | 成就徽章（集卡、连续学习、通关数、复习、探索等），自动解锁 |
|
||||
| 奖品 | 积分兑换虚拟/实物奖品，兑换记录与状态 |
|
||||
| 朗读拼音 | 拼音随内容一次性标注入库、朗读音频 TTS 生成（写时一次性，读取零计算），低龄档全量开启 |
|
||||
| 朗读拼音 | 拼音随内容一次性标注入库（逐字对齐 JSON，`common/pinyin.go` + 多音字词表），朗读音频优先播文件、无文件时浏览器语音降级朗读（H5），低龄档（4-6）全量开启；TTS 文件生成留后续接入 |
|
||||
| 视觉素材生成 | 场景插画/角色立绘/道具图标/计策卡图标由 `cmd/genasset/` 离线生成管线调用本机 oMLX（Qwen3.5-9B）生成 SVG 并转 PNG，打包入客户端随五端发布；未生成素材按 emoji 映射兜底 |
|
||||
|
||||
### 后台（Web）
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -79,11 +79,15 @@ CREATE TABLE strategy (
|
||||
group_no INTEGER NOT NULL, -- 六套分组：1胜战 2敌战 3攻战 4混战 5并战 6败战
|
||||
group_name TEXT NOT NULL,
|
||||
meaning TEXT NOT NULL, -- 儿童语言释义
|
||||
meaning_pinyin TEXT, -- 释义拼音（逐字对齐 JSON，见 4.6）
|
||||
teach_content TEXT, -- 计策学堂：儿童化讲解（名称/释义/使用时机）
|
||||
teach_content_pinyin TEXT,
|
||||
teach_image TEXT,
|
||||
teach_audio TEXT,
|
||||
summary_q TEXT, -- 智慧总结反思题
|
||||
summary_q_pinyin TEXT,
|
||||
summary_options TEXT, -- 反思题选项 JSON（含正确答案）
|
||||
summary_options_pinyin TEXT,
|
||||
summary_audio TEXT,
|
||||
icon TEXT, -- 计策卡图标
|
||||
sort_order INTEGER NOT NULL, -- 组内排序
|
||||
@@ -104,6 +108,7 @@ CREATE TABLE level (
|
||||
title TEXT NOT NULL, -- 场景标题，如「足球场上的假动作」
|
||||
scene_id INTEGER, -- 环境场景元素（element.id，type=1），整关发生场所
|
||||
scene_content TEXT NOT NULL, -- 情境描述（含拼音标注格式）
|
||||
scene_content_pinyin TEXT, -- 情境描述拼音（逐字对齐 JSON）
|
||||
scene_image TEXT,
|
||||
scene_audio TEXT, -- 情境朗读音频
|
||||
age_group TEXT NOT NULL DEFAULT '4-6', -- 内容年龄段标签，按孩子档位过滤
|
||||
@@ -125,6 +130,7 @@ CREATE TABLE scene_node (
|
||||
title TEXT, -- 节点标题（可选）
|
||||
character_id INTEGER, -- 当前人物元素（element.id，type=2），冲突主体
|
||||
content TEXT NOT NULL, -- 情境描述（含拼音标注格式）
|
||||
content_pinyin TEXT, -- 节点文本拼音（逐字对齐 JSON）
|
||||
image TEXT,
|
||||
audio TEXT, -- 情境朗读音频
|
||||
node_type INTEGER NOT NULL DEFAULT 1, -- 1 决策节点 2 终局节点
|
||||
@@ -141,10 +147,14 @@ CREATE TABLE node_option (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
node_id INTEGER NOT NULL, -- 所属决策节点
|
||||
text TEXT NOT NULL, -- 选项文本（行为描述）
|
||||
text_pinyin TEXT, -- 选项文本拼音（逐字对齐 JSON）
|
||||
prop_id INTEGER, -- 使用道具元素（element.id，type=3，可空）
|
||||
audio TEXT,
|
||||
next_node_id INTEGER, -- 指向下一节点（同 level 内）
|
||||
feedback TEXT NOT NULL, -- 选择后的即时点评（儿童语言）
|
||||
feedback_pros TEXT, -- 对比点评：这个选择的好处（生成管线填充）
|
||||
feedback_cons TEXT, -- 对比点评：这个选择的不足/错过的更好选择
|
||||
feedback_pinyin TEXT,
|
||||
feedback_audio TEXT,
|
||||
sort_order INTEGER NOT NULL DEFAULT 1,
|
||||
status INTEGER NOT NULL DEFAULT 1
|
||||
@@ -161,9 +171,11 @@ CREATE TABLE element (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
e_type INTEGER NOT NULL, -- 1 场景(环境) 2 人物 3 道具
|
||||
name TEXT NOT NULL,
|
||||
name_pinyin TEXT, -- 元素名拼音（逐字对齐 JSON）
|
||||
image TEXT,
|
||||
audio TEXT, -- 元素名称朗读
|
||||
description TEXT, -- 儿童语言介绍（道具点击提示等）
|
||||
description_pinyin TEXT,
|
||||
status INTEGER NOT NULL DEFAULT 1,
|
||||
sort_order INTEGER NOT NULL DEFAULT 1
|
||||
);
|
||||
@@ -396,14 +408,64 @@ CREATE TABLE admin_user (
|
||||
|
||||
### 4.6 拼音与朗读（写时一次性标注，读时零成本）
|
||||
|
||||
拼音与音频都遵循"写时转换"原则：内容量小（约 250 节点）但读请求量大（所有端所有用户），标注做一次入库，前端读取零计算、五端一致。
|
||||
拼音与音频都遵循"写时转换"原则：内容量小（约 300 节点）但读请求量大（所有端所有用户），标注做一次入库，前端读取零计算、五端一致。
|
||||
|
||||
- **拼音入库**：种子 JSON 只存原文 → 初始化时由 `common` 标注服务生成拼音（优先查多音字/专名词表，兜底拼音库，必要时 LLM 初稿 + 人工审核）→ 随原文一并入库（各内容表存 `*_pinyin` 字段）；后台改文案保存时调用同一标注函数自动重标，仍是写时一次性
|
||||
- **多音字词表**：`biz/consts` 维护成语整体拼音（如「声东击西 shēng dōng jī xī」）与专名 override，标注时优先查表，保证教育内容准确性
|
||||
- **朗读音频**：与拼音同一"写时生成"流水线——TTS（如火山/微软）在初始化与后台保存时异步生成音频落 `workspace/uploads/audio/`，表存相对路径；文件名 `{表}_{内容id}_{文本hash}.mp3` 保证**幂等**（文本未变重复保存不重生成，后台改文案只重生成变更节点）；生成失败不阻塞内容落库，后台提供"重新生成音频"按钮兜底，音频缺失时前端降级不播
|
||||
- **拼音入库**：种子 JSON 只存原文 → 初始化时由 `common/pinyin.go` 标注服务生成拼音 → 随原文一并入库（各内容表存 `*_pinyin` 字段，见 3 节 DDL）；后台改文案保存时调用同一标注函数自动重标，仍是写时一次性
|
||||
- **拼音格式**：`*_pinyin` 存**逐字对齐的 JSON 数组字符串**（如 `["shēng","dōng","jī","xī","。",""]`），下标与原文字符一一对应（标点拼音为空串或原文标点）；前端 `JSON.parse` 后与原文 zip，渲染 `<ruby>` 注音，无需分词对齐
|
||||
- **标注算法**：按**多音字词表最长匹配**切分原文——命中词表（成语整体、专名）的片段整体转拼音，未命中片段逐字转（`github.com/mozillazg/go-pinyin`，StyleTone 带声调符号）；词表在 `biz/consts` 集中维护（36 计成语整体拼音 + 教育专名 override），保证准确性
|
||||
- **标注幂等**：文本未变不重标（标注函数纯函数、无副作用）；已存在库的旧数据在启动时补标一次（扫描 `*_pinyin` 为空的记录）
|
||||
- **朗读音频（M1.5 降级方案）**：audio 字段全空且无 TTS 账号时——**前端降级朗读**：H5 端优先播文件（`uni.createInnerAudioContext`，有 `*_audio` 字段就播），无文件则用浏览器原生 `SpeechSynthesis`（zh-CN）朗读该文本，零成本立刻可听；朗读按钮统一封装 `ui-src/src/utils/speech.js`
|
||||
- **TTS 流水线（后续里程碑）**：与拼音同一"写时生成"流水线——TTS（如火山/微软）在初始化与后台保存时异步生成音频落 `workspace/uploads/audio/`，表存相对路径；文件名 `{表}_{内容id}_{文本hash}.mp3` 保证**幂等**（文本未变重复保存不重生成）；生成失败不阻塞内容落库，音频缺失时前端自动降级为浏览器朗读（前端零改动）
|
||||
- **静态资源**：Go 静态路由托管 `workspace/uploads/`，URL 直接进前端；元素素材（场景/人物/道具图片与名称音频）同样按"写时一次性"生成与上传，随内容接口返回
|
||||
|
||||
### 4.7 缓存与并发
|
||||
### 4.7 触控互动组件（M1.5：互动形态 2/3/5/7/8）
|
||||
|
||||
设计 4.3 定义 8 种互动形态，M1 仅实现 1 选项选择。M1.5 补齐**触控 5 种**：2 道具选择、3 步骤排序、5 拖拽放置、7 找线索、8 连线配对（4 动作过关、6 接取收集留 M3）。实现遵循「**互动入口节点 + 成功/失败双出口**」模型，后端 choose 接口与判分零改动。
|
||||
|
||||
**互动入口节点模型**：每关在决策树入口前插入一个互动节点（`interaction_type` 2/3/5/7/8 按关卡轮换），其选项表预置两个出口——成功（`next` 指向原入口节点）与失败（`next` 指向本关首个失败终局节点）；`is_entry` 标记迁移到互动节点（仍满足"每关恰好 1 个入口"约束）。互动组件判定结果后提交对应出口选项，走既有 choose → 终局结算链路。失败即进失败终局（正常判分 -10，连续失败保护生效）；成功进原决策树，原树结构零改动、完美逻辑不受影响。
|
||||
|
||||
**config 数据（程序化生成，不手写内容）**：全部由该关元素派生——道具列表 = 本关所有选项的 `prop_id` 去重；正确答案 = 最佳分支选项的道具（`best_prop`）。种子初始化时 `seed.go` 为每关生成互动节点与 config：
|
||||
|
||||
| 类型 | config.kind | 组件玩法 | 判定 |
|
||||
| --- | --- | --- | --- |
|
||||
| 2 道具选择 | `prop_pick` | 展示道具卡，点选一个 | 选中 = best_prop |
|
||||
| 7 找线索 | `find_spot` | 场景中若干"可疑点"（道具卡排布），点击寻找 | 点中 = best_prop |
|
||||
| 5 拖拽放置 | `drag_place` | 把道具拖到目标框 | 放下的是 best_prop |
|
||||
| 3 步骤排序 | `step_sort` | 拖拽排序道具（正确顺序 = 本关选项 sort_order 序） | 全序正确 |
|
||||
| 8 连线配对 | `link_match` | 左列人物 ↔ 右列道具，两两连线 | 人物-道具配对与选项 prop 关联一致 |
|
||||
|
||||
config JSON 结构（`scene_node.config`，前端解析渲染）：`{"kind":"prop_pick","items":[{"id":1,"name":"画","e_type":3},...],"answer":3,"persons":[...]}`（link_match 含 persons + 答案对）。选项文本预置「成功 / 没成功」，`feedback` 写互动点评。
|
||||
|
||||
**前端组件**（`ui-src/src/components/interactions/`，uni-app touch 事件 + CSS/SVG，无游戏引擎）：`PropPick.vue`（点选）/ `FindSpot.vue`（点选定位）/ `DragPlace.vue`（touchstart/move/end 拖拽）/ `StepSort.vue`（拖拽排序）/ `LinkMatch.vue`（SVG 画线 + 点选配对）；统一接口 `(config) → {success: bool}`，`play.vue` 按 `interaction_type` 分发渲染，完成后提交对应出口选项。失败出口提交后同普通终局显示结算（无星），成功出口继续决策树。
|
||||
|
||||
**视觉素材（M1.5 生成管线）**：场景插画、角色立绘、道具图标、计策卡图标由离线生成管线（见 4.8）产出 PNG 打包入客户端，`element.image` 存 `/static/generated/...` 相对路径；生成前以 `ui-src/src/utils/visual.js` 的 emoji + 渐变色映射兜底（未生成素材的元素按名称映射渲染，组件零改动）。
|
||||
|
||||
### 4.8 视觉素材与对比点评生成管线（M1.5：oMLX 离线一次性生成）
|
||||
|
||||
儿童画面的场景插画、角色立绘、道具图标、计策卡图标与"每个选择的对比点评"均为**内容型数据，离线生成一次、打包/入库后运行时零生成依赖**——不占线上成本、不依赖线上 LLM 可用性。生成工具 `cmd/genasset/`（独立 Go 程序，仅开发机运行，不进入服务运行链路）。
|
||||
|
||||
**LLM 接入（本机 oMLX，OpenAI 兼容）**：
|
||||
- Endpoint：`POST http://127.0.0.1:18080/v1/chat/completions`（本地无鉴权，model=`Qwen3.5-9B-MLX-4bit`），配置在 `config.yml` 的 `genasset` 段（endpoint/model/timeout/max_tokens），可切换任意 OpenAI 兼容服务
|
||||
- **必须关闭思维链**：请求体带 `chat_template_kwargs: {"enable_thinking": false}`（Qwen3.5 思考文本默认混入 content，破坏 JSON/SVG 解析）
|
||||
- 生成预算 `max_tokens=24576`；本地 9B 模型约 5 tok/s，单张 SVG 需 1-3 分钟，HTTP 超时 600s、失败重试 3 次（调用模式参照 rag-local 项目 chat_service.go）
|
||||
- 生成输出一律要求 JSON（SVG 代码包在 JSON 字段中返回），解析失败重试
|
||||
|
||||
**生成清单与幂等**：
|
||||
- 场景插画 SVG（每场景 1 张，`level.scene_id` 去重）、角色立绘 SVG（每角色 1 张，`scene_node.character_id` 去重）、道具图标 SVG（每道具 1 个，`node_option.prop_id` 去重）、计策卡图标 SVG（36 张）
|
||||
- 对比点评：每个决策选项 2 条（`feedback_pros` / `feedback_cons`），含触控互动成功/失败出口
|
||||
- 产物先落 `workspace/genasset/`（SVG 源），已存在即跳过（`--force` 重生成）；SVG 经 `ui-src/scripts/svg2png.mjs`（sharp，devDependency）转 PNG@2x 后复制入 `ui-src/static/generated/{scene,char,prop,strategy}/`，随五端打包；**小程序 `<image>` 不支持 SVG，客户端统一用 PNG**
|
||||
- 入库回填：`element.image` ← `/static/generated/...png`；`node_option.feedback_pros/cons` ← 生成的点评；未回填字段前端按 visual.js 兜底
|
||||
|
||||
**风格约定（prompt 约束）**：简笔卡通、粗线条、暖色调（米黄/橙/青绿）、画面无文字、适合 4-8 岁；场景含环境主体物（操场有滑梯/球门），角色为 Q 版全身（儿童形象），道具为单一主体图标。
|
||||
|
||||
**对比点评与反馈展示**：
|
||||
- 存储：`node_option` 加 `feedback_pros`（好处）/ `feedback_cons`（不足·错过的更好选择）两列（DDL 见 3 节），儿童化语言 20-40 字
|
||||
- 展示：反馈弹层三段式——「你的选择」→「✓ 好处」→「✗ 对比」（如"如果选 B，会更快找到帮手"）；触控互动成功出口点评=好处+鼓励，失败出口=坏处+温柔引导（不指责）
|
||||
- 路线回顾：结算页展示整局选择路径（前端 play 过程本地累积：每步「选项文本 + 好处一句话」），孩子回看"一路的选择与价值"；`user_route_log` 仍照常服务端落库
|
||||
|
||||
**动效与动画**：正确/失败/结算动画为 CSS 代码实现（弹跳/彩带/星星弹出），不属于素材生成范畴，不走 LLM；角色表情用立绘 + 前端 emoji 徽章叠加（😊/😢/😮 角标），避免每角色生成 3 张表情变体。
|
||||
|
||||
### 4.9 缓存与并发
|
||||
|
||||
- 读接口（strategy 列表、level 详情、prize 列表、badge 列表）走 `gdb.CacheOption`，TTL 取 `database.cache.ttl`
|
||||
- 写操作后清对应缓存：内容修改（后台）→ 清内容缓存；判分/兑换 → 清用户相关缓存
|
||||
@@ -411,7 +473,7 @@ CREATE TABLE admin_user (
|
||||
- 并行点：种子初始化无并行需求；批量节点/选项加载（≤100 分批 IN）主 goroutine 串行即可，无需 grpool
|
||||
- 锁：兑换/签到等防重入场景用 `common.WithLock`（内存锁即可，单实例部署），key 用 `child:{id}:{业务}`
|
||||
|
||||
### 4.8 鉴权与安全
|
||||
### 4.10 鉴权与安全
|
||||
|
||||
- 前台家长账号体系：微信小程序用 `openid` 静默登录（code2session 换 openid）；H5/App 手机号注册 + token（`gf_token` 或自签 JWT，config 配置）。登录后持 parent token
|
||||
- 孩子维度接口（闯关/积分/兑换/报告）请求带 `child_id`，中间件校验归属（`child.parent_id == token.parent_id`），防越权访问他人孩子数据
|
||||
@@ -419,7 +481,7 @@ CREATE TABLE admin_user (
|
||||
- 判分、兑换等写接口一律服务端校验，前端只做展示
|
||||
- 上传接口（后台）限制文件类型与大小（图片/音频白名单）
|
||||
|
||||
### 4.9 家长中心与学习报告
|
||||
### 4.11 家长中心与学习报告
|
||||
|
||||
- 孩子档案：家长创建/修改多个孩子（年龄段、昵称），接口见 README API 清单
|
||||
- 学习报告（GET /api/parent/report）：按孩子聚合——已通关计策数、星星总数、最近学习时间、各计策完成状态、复习/探索徽章获得情况
|
||||
@@ -427,7 +489,7 @@ CREATE TABLE admin_user (
|
||||
- 实物奖品确认：redemption 列表按孩子展示，家长凭兑换码领取
|
||||
- 数据全部单表 SQL + 应用层内存组装（遵循无 JOIN 约束），报告接口低频调用可短缓存
|
||||
|
||||
### 4.10 践行与成长体系
|
||||
### 4.12 践行与成长体系
|
||||
|
||||
**生活践行任务**（知行合一）：章完美后任务下发（life_task 按 strategy 关联）→ 孩子端显示"和爸爸妈妈一起做"卡片 → 家长查看引导语、带孩子实践 → 家长确认（POST /api/task/confirm，可选照片）→ 积分到账 + 状态流转（1 已下发 → 2 待家长确认 → 3 已确认）。防刷：UNIQUE(child_id, task_id) + 家长确认为唯一权威入口。
|
||||
|
||||
@@ -437,13 +499,38 @@ CREATE TABLE admin_user (
|
||||
|
||||
**使用时长管理**：家长端设置每日限额（child.daily_limit_minutes，0=不限）；前端本地计时，达限额弹休息提醒（护眼）；单次会话 = 一关（5-10 分钟）天然切分学习时段。服务端仅存设置与展示（报告"今日学习时长"按当日活动估算），不强制中断——低龄应用以家长监督为主。
|
||||
|
||||
### 4.13 游戏化 UI 设计（M1.5：全面游戏化展示与交互）
|
||||
|
||||
低龄儿童界面原则：**图 > 字、大 > 小、动 > 静、声 > 默**。闯关页与结算页全面游戏化，全部用 CSS 动画 + WebAudio 合成音效实现，不引入新依赖、不依赖 LLM 生成动效。
|
||||
|
||||
**1. 场景沉浸**：闯关页顶部全宽场景横幅——背景用 `scene.image`（genasset 生成的场景插画 PNG），无素材时用 visual.js 的 emoji + 渐变兜底；场景横幅带缓慢漂浮装饰（CSS 动画飘动的云朵/星星 emoji，纯前端装饰不依赖素材）。
|
||||
|
||||
**2. 角色剧场**：角色立绘 `character.image` 卡片化展示（圆角大卡片 + 淡入弹跳进场），表情状态用 emoji 徽章叠加在立绘角标（😊 开心 / 😢 难过 / 😮 惊讶 / 🤔 思考），由当前节点的 result_type/互动成败切换，只做 1 张立绘 + 4 个 emoji 角标，不生成多表情素材。
|
||||
|
||||
**3. 选项卡片化**：选项从文字行改为大卡片——渐变彩色边框 + 圆形字母徽章（A/B/C 大字号）+ 道具图标（`option.prop.image` 或 emoji 兜底）+ 文本；按压/点击有缩放回弹动效（`:active` transform + 松手回弹）。
|
||||
|
||||
**4. 反馈演出**：选择后反馈弹层按阶段演出——弹入缩放动画 → 点评内容分段依次显现（你的选择 → ✓ 好处 → ✗ 对比，每段 200ms 淡入错峰）；正确选择弹层绿色系、失败选择暖色系；底部「继续」按钮呼吸光效。触控互动成功/失败走同一演出（成功撒小星星粒子、失败温柔 shake）。
|
||||
|
||||
**5. 进度与成就感**：关卡顶部显示步骤进度条（当前节点/总节点数，圆点 + 连线，前进时圆点点亮动画）；连续选择正确触发连击（🔥 ×2 提示，本地计数，不落库）。
|
||||
|
||||
**6. 声音**：`utils/sound.js` 用 WebAudio 合成短音效（不依赖音频文件）：点击 blip、正确 chime（上扬三音）、失败 soft buzz（低音柔和）、完成 fanfare、金币 coin——全部短促低龄友好；声音开关存本地（默认开）。小程序端 WebAudio 受限时静默降级（无音效，功能不受影响）。
|
||||
|
||||
**7. 结算狂欢**：结算页星星逐个弹出（现有 pop-in）+ 顶部彩带 confetti 粒子（CSS 动画，12 个 emoji/彩色纸屑随机下落旋转）；解锁徽章/计策卡/升级时对应卡片带光效浮现 + fanfare 音效；路线回顾卡片逐条滑入（左滑入 + 好处文字）。
|
||||
|
||||
**8. 地图页路线图**：关卡地图改为纵向路线图（计策卡图标为驿站节点，直线/曲线连接，当前关高亮呼吸光效，已通关点亮、未解锁灰显 + 锁形 emoji）；解锁新关时新节点弹跳入场。计策卡图标用 genasset 生成的 `strategy.icon` PNG，未生成用 emoji 兜底。
|
||||
|
||||
**9. 触控皮肤**：5 个互动组件沿用各自交互逻辑，视觉统一升级——道具选择/找线索：道具卡片化（图标大图 + 名称）；步骤排序：可拖动的彩色圆角块（拖起浮起 + 阴影，松手吸附到槽位）；拖拽放置：目标框虚线高亮（拖入时变实线 + 变色）；连线配对：左侧人物彩色圆卡、右侧道具卡，连线用 4 色轮换区分。
|
||||
|
||||
**视觉一致性**：配色固定暖色系（米黄底 `#fdf6ec`、橙 `#ff6b35` 主色、青绿 `#4ecdc4` 点缀），圆角统一 24rpx 大圆角、字号 ≥28rpx、行高 ≥1.8；所有素材图 CSS `object-fit: cover` + 圆角，缺图一律 emoji 兜底不破版。
|
||||
|
||||
## 5. 开发计划
|
||||
|
||||
| 里程碑 | 内容 | 验收标准 |
|
||||
| --- | --- | --- |
|
||||
| M1 骨架与闯关核心 | 前后端工程初始化、数据模型（家长/孩子/决策树/元素库/路径表/内容版本）+ 种子数据、家长注册登录与孩子档案、计策学堂、关卡地图、关卡详情（含元素）、分支决策与终局结算、进度与路径记录 | H5 端可完整走通「家长注册 → 建孩子档案 → 学堂 → 分支闯关（环境/人物/道具）→ 多路线拿最佳终局 → 完美解锁下一计」 |
|
||||
| M2 游戏化与成长 | 积分流水、签到、徽章、计策卡、完美与解锁流转、章末温故、智慧总结、成长等级、生活践行任务、时长管理、道具选择/步骤排序/接取收集互动、拼音/朗读资源接入 | 全激励闭环可用，完美解锁与教训分生效，温故/总结/生活任务闭环生效，成长等级与时长守护可用，多样互动（选择/排序/接取）可用，低龄档朗读生效 |
|
||||
| M3 兑换与后台 | 奖品兑换、兑换记录与发货（含家长确认领取与庆祝动画）、后台内容/奖品/徽章/生活任务/家长与孩子管理、学习报告、节点卡点统计、动作过关组件（跳跃/攀爬/躲避/奔跑）+ 拖拽/找线索 | 后台改内容前台即时生效（内容版本标记可重新挑战），实物兑换流程走通（确认领取闭环），家长报告与卡点统计可看，动作过关互动多端可用 |
|
||||
| M1 骨架与闯关核心 ✅ | 前后端工程初始化、数据模型（家长/孩子/决策树/元素库/路径表/内容版本）+ 种子数据、家长注册登录与孩子档案、计策学堂、关卡地图、关卡详情（含元素）、分支决策与终局结算（积分/完美/计策卡/解锁流转）、进度与路径记录 | H5 端可完整走通「家长注册 → 建孩子档案 → 学堂 → 分支闯关 → 多路线拿最佳终局 → 完美解锁下一计」 |
|
||||
| **M1.5 互动体验补齐（进行中）** | **拼音标注写时入库（全量 36 计）、朗读降级（浏览器语音，文件优先）、视觉素材离线生成管线（oMLX qwen 生成场景插画/角色立绘/道具图标/计策卡图标，SVG→PNG 打包入客户端）、对比点评（每个选项好处/坏处，反馈三段式 + 结算路线回顾）、场景/角色/道具视觉呈现、触控互动 5 种（2 道具选择 / 3 步骤排序 / 5 拖拽放置 / 7 找线索 / 8 连线配对，互动入口节点模型，后端 choose 零改动）、游戏化 UI（场景沉浸 / 角色剧场 / 选项卡片化 / 反馈演出 / 进度成就感 / WebAudio 音效 / 结算狂欢 / 地图路线图）** | **闯关不再是纯文字问答：场景有背景插画有朗读、文本有拼音注音、选项道具图标可视化、角色立绘 + 表情反馈、每个选择都有好处/坏处解释、结算路线回顾、每关入口先玩一个触控互动（成功进决策树 / 失败进失败终局）；界面全面游戏化——选项大卡片、反馈演出动画、音效反馈、结算彩带动画、地图路线图；全量 36 关可玩** |
|
||||
| M2 游戏化与成长 | 签到、徽章、章末温故、智慧总结、生活践行任务、时长管理、接取收集互动（6） | 全激励闭环可用，温故/总结/生活任务闭环生效，时长守护可用，接取收集互动可用 |
|
||||
| M3 兑换与后台 | 奖品兑换、兑换记录与发货（含家长确认领取与庆祝动画）、后台内容/奖品/徽章/生活任务/家长与孩子管理、学习报告、节点卡点统计、动作过关组件（跳跃/攀爬/躲避/奔跑） | 后台改内容前台即时生效（内容版本标记可重新挑战），实物兑换流程走通（确认领取闭环），家长报告与卡点统计可看，动作过关互动多端可用 |
|
||||
| M4 多端发布 | H5 内测 → 微信小程序提审 → Android/iOS/平板打包、平板布局适配 | 五端全部可运行 |
|
||||
|
||||
## 6. 风险与备选方案
|
||||
|
||||
Reference in New Issue
Block a user