完善原生内容卡与H5详情分工

2026-03-27 21:03:55 +08:00
parent 0e0a724025
commit 0703fd47a2
21 changed files with 903 additions and 83 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,9 @@ dist/
 build/
 coverage/
 project.private.config.json
+project.config.json
+private.wx0c8b079993bb9d7a.key
+wX5FOd926R.txt
 *.log
 npm-debug.log*
 yarn-debug.log*
--- a/doc/config-option-dictionary.md
+++ b/doc/config-option-dictionary.md
@@ -195,6 +195,18 @@
 - 类型：`string`
 - 说明：打点完成后自动弹出的标题

+#### `template`
+
+- 类型：`string`
+- 说明：原生内容卡模板
+- 当前支持：
+  - `minimal`
+  - `story`
+  - `focus`
+- 建议默认值：
+  - 起点/终点：`focus`
+  - 普通点：`story`
+
 #### `body`

 - 类型：`string`
@@ -233,11 +245,86 @@
  - 普通点：`1`
  - 终点：`2`

+#### `contentExperience`
+
+- 类型：`object`
+- 说明：打点完成后使用的体验承载配置
+- 当前支持：
+  - `native`
+  - `h5`
+
+#### `contentExperience.type`
+
+- 类型：`string`
+- 说明：自动弹出内容的承载方式
+- 当前支持：
+  - `native`
+  - `h5`
+
+#### `contentExperience.url`
+
+- 类型：`string`
+- 说明：当 `type = "h5"` 时对应的 H5 页面地址
+
+#### `contentExperience.bridge`
+
+- 类型：`string`
+- 说明：H5 bridge 版本
+- 建议默认值：`"content-v1"`
+
+#### `contentExperience.presentation`
+
+- 类型：`string`
+- 说明：H5 内容的展示形态
+- 当前支持：
+  - `sheet`
+  - `dialog`
+  - `fullscreen`
+- 建议默认值：`sheet`
+
+#### `clickExperience`
+
+- 类型：`object`
+- 说明：点击控制点时使用的体验承载配置
+- 当前支持：
+  - `native`
+  - `h5`
+
+#### `clickExperience.type`
+
+- 类型：`string`
+- 说明：点击内容的承载方式
+- 当前支持：
+  - `native`
+  - `h5`
+
+#### `clickExperience.url`
+
+- 类型：`string`
+- 说明：当 `type = "h5"` 时对应的 H5 页面地址
+
+#### `clickExperience.bridge`
+
+- 类型：`string`
+- 说明：H5 bridge 版本
+- 建议默认值：`"content-v1"`
+
+#### `clickExperience.presentation`
+
+- 类型：`string`
+- 说明：点击内容的展示形态
+- 当前支持：
+  - `sheet`
+  - `dialog`
+  - `fullscreen`
+- 建议默认值：`sheet`
+
 ### 6.3 示例

 ```json
 "controlOverrides": {
  "start-1": {
+    "template": "focus",
    "title": "比赛开始",
    "body": "从这里出发，先熟悉地图方向。",
    "autoPopup": true,
@@ -247,6 +334,7 @@
    "clickBody": "点击起点可再次查看起跑说明。"
  },
  "control-2": {
+    "template": "minimal",
    "score": 20,
    "title": "教学楼南侧",
    "body": "这里是重要转折点。",
@@ -254,9 +342,22 @@
    "once": true,
    "priority": 1,
    "clickTitle": "教学楼南侧",
-    "clickBody": "这个点配置成点击查看。"
+    "clickBody": "这个点配置成点击查看。",
+    "contentExperience": {
+      "type": "h5",
+      "url": "https://example.com/content/control-2",
+      "bridge": "content-v1",
+      "presentation": "sheet"
+    },
+    "clickExperience": {
+      "type": "h5",
+      "url": "https://example.com/content/control-2-click",
+      "bridge": "content-v1",
+      "presentation": "dialog"
+    }
  },
  "finish-1": {
+    "template": "focus",
    "title": "比赛结束",
    "body": "恭喜完成本次路线。",
    "autoPopup": true,
--- a/doc/experience-shell-proposal.md
+++ b/doc/experience-shell-proposal.md
@@ -0,0 +1,232 @@
+# Experience Shell 方案
+
+本文档用于定义小程序中 H5 定制内容的承载方式。目标不是把 H5 做成真正的同页弹窗，而是做成：
+
+- 独立页面路由
+- 原生壳子控制外观
+- `web-view` 只负责内容区
+
+这样既保留了 H5 的定制能力，也能让用户感受更接近“弹窗”或“抽屉”。
+
+---
+
+## 1. 设计目标
+
+当前 H5 内容页已经能打开，但整页全屏切换比较生硬，用户体验不够好。  
+新的 `experience-shell` 目标是：
+
+- 视觉上像弹窗
+- 保持原生关闭、回退、失败兜底逻辑
+- 不把地图主页面和 `web-view` 强绑在一起
+- 为后续结果页 H5、文创内容 H5 复用
+
+---
+
+## 2. 核心原则
+
+### 2.1 不做真正同页 H5 弹窗
+
+微信小程序里的 `web-view` 更适合放在独立页面中承载。  
+不要尝试把 `web-view` 直接叠在地图页上方做真弹窗，否则后续很容易遇到：
+
+- 层级冲突
+- 手势冲突
+- iOS / Android 表现不一致
+- 遮罩和关闭逻辑变脏
+
+### 2.2 原生壳子 + H5 内容区
+
+最终结构应该是：
+
+- 原生遮罩
+- 原生标题栏
+- 原生关闭按钮
+- `web-view` 内容区
+
+也就是：
+
+```text
+experience-shell
+  ├─ backdrop
+  ├─ native header
+  └─ web-view body
+```
+
+---
+
+## 3. 支持的展示方式
+
+第一阶段只支持 3 种：
+
+- `sheet`
+- `dialog`
+- `fullscreen`
+
+### 3.1 `sheet`
+
+适合：
+
+- 打点后的文创内容
+- 拍照任务
+- 轻互动内容
+
+视觉：
+
+- 自底部升起
+- 圆角卡片
+- 半透明暗背景
+
+### 3.2 `dialog`
+
+适合：
+
+- 结果页
+- 中短内容
+- 重要说明
+
+视觉：
+
+- 居中大卡片
+- 更聚焦
+
+### 3.3 `fullscreen`
+
+适合：
+
+- 长内容
+- 强定制专题页
+- 复杂表单/小游戏
+
+---
+
+## 4. 配置结构
+
+H5 内容配置建议支持：
+
+```json
+{
+  "type": "h5",
+  "url": "https://example.com/content/control-1",
+  "bridge": "content-v1",
+  "presentation": "sheet"
+}
+```
+
+字段说明：
+
+- `type`
+  当前支持 `native` / `h5`
+- `url`
+  H5 页面地址
+- `bridge`
+  bridge 版本
+- `presentation`
+  展示方式，支持：
+  - `sheet`
+  - `dialog`
+  - `fullscreen`
+
+默认值建议：
+
+- 内容体验默认 `sheet`
+- 结果页默认 `dialog`
+
+---
+
+## 5. 原生壳子职责
+
+原生壳子负责：
+
+- 遮罩
+- 标题、副标题
+- 关闭按钮
+- 页面进入/退出动画
+- H5 打开失败回退
+
+原生壳子不负责：
+
+- H5 页面内部业务逻辑
+- H5 具体视觉排版
+
+---
+
+## 6. 关闭与回退逻辑
+
+### 6.1 原生关闭
+
+原生必须始终支持：
+
+- 右上/头部关闭
+- 返回键关闭
+- 失败时自动关闭并回退
+
+### 6.2 H5 请求关闭
+
+H5 可以通过 bridge 发：
+
+- `close`
+
+然后由原生统一关闭壳子页。
+
+### 6.3 H5 失败回退
+
+如果出现：
+
+- URL 无效
+- 页面打不开
+- bridge 初始化失败
+
+统一回退到：
+
+- 原生内容卡
+- 原生结果页
+
+---
+
+## 7. 动画建议
+
+### `sheet`
+
+- 遮罩淡入
+- 面板自下而上出现
+
+### `dialog`
+
+- 遮罩淡入
+- 面板轻微放大进入
+
+### `lite`
+
+在低端机或 `lite` 模式下：
+
+- 只保留 opacity
+- 降低位移动画强度
+
+---
+
+## 8. 推荐接入顺序
+
+### 第一阶段
+
+- 先把当前 `experience-webview` 升级成 shell
+- 先支持 `sheet`
+- 先接 `content-v1`
+
+### 第二阶段
+
+- 补 `dialog`
+- 结果页 H5 开始复用壳子
+
+### 第三阶段
+
+- 主题样式可配置
+- 过场动画接入
+
+---
+
+## 9. 一句话结论
+
+小程序里的 H5 不应该直接作为“生硬全页”使用，也不应该强行做成“地图页上的真弹窗”。  
+最稳的方案是：
+
+**独立页面承载，但由原生壳子把它做成 `sheet / dialog / fullscreen` 三种体验形态。**
--- a/doc/h5-experience-integration-proposal.md
+++ b/doc/h5-experience-integration-proposal.md
@@ -29,7 +29,7 @@
 当前最适合 H5 承接的是：

 - 结算页
- 打点后的定制内容页
+- 打点后的定制**详情页/互动页**
 - 文创详情页
 - 活动品牌页
 - 富图文任务页
@@ -45,6 +45,7 @@
 - HUD
 - GPS / 心率等实时能力主链
 - 需要强实时状态同步的高频游戏弹层
+- 游戏中的即时原生内容弹窗

 一句话：

@@ -52,6 +53,28 @@

 ---

+## 2.1 当前阶段的定案
+
+经过真机验证，当前项目已经明确：
+
+- 小程序 `web-view` 在企业主体环境下可以正常打开
+- 但它不适合作为“原生弹窗里的局部 H5 内容区”使用
+- 真机上更接近整页原生容器，局部裁切、壳子覆盖、原生关闭按钮都不稳定
+
+因此当前正式定案为：
+
+- **打点后的即时内容：原生内容卡**
+- **H5：只作为详情页 / 互动任务页 / 全屏结果页**
+
+也就是说：
+
+- `content popup` 继续原生
+- 原生内容卡上提供 `查看详情`
+- 点 `查看详情` 后再进入 H5
+- H5 打不开时，原生内容卡继续兜底
+
+---
+
 ## 3. 总体架构

 推荐分成三层：
@@ -93,12 +116,12 @@

 ### 4.1 Content Experience Page

-用于游戏中途的内容体验页。
+用于游戏中途的**详情体验页**或**互动任务页**。

 典型场景：

- 控制点打卡后弹文创详情
- 控制点点击后查看图文内容
+- 控制点打卡后点击 `查看详情`
+- 控制点点击后进入图文详情页
 - 拍照上传任务
 - 语音留言任务
 - 小游戏互动页
@@ -129,6 +152,7 @@
 - 打点成功必须先由原生确认
 - 比赛结束必须先由原生确认
 - H5 只是附加体验，不拥有核心状态
+- 原生内容卡必须先可独立工作

 ### 原则 2：H5 打不开时回退原生

@@ -185,6 +209,11 @@ H5 可以展示、收集信息、提交任务结果。
 }
 ```

+这个字段当前应理解为：
+
+- `contentExperience` = 原生内容卡上的 H5 **详情/互动扩展**
+- 不是直接顶替原生内容弹窗
+
 或：

 ```json
--- a/doc/hybrid-experience-architecture.md
+++ b/doc/hybrid-experience-architecture.md
@@ -10,6 +10,12 @@
 - 原生有限 DSL
 - H5 扩展页

+当前阶段已经进一步定案：
+
+- **即时内容弹窗：原生**
+- **详情页 / 互动任务页：H5**
+- **结算页：原生兜底 + H5 全屏增强**
+
 ---

 ## 1. 为什么需要混合方案
@@ -134,6 +140,7 @@

 - 品牌化结算页
 - 长图文故事页
+- 原生内容卡上的“查看详情”页
 - 拍照上传任务
 - 语音留言页
 - 小游戏互动页
@@ -180,6 +187,19 @@ H5 只负责：
 - 结束后至少能看到原生结果页
 - H5 打不开时，主流程不受影响

+## 4.4 不再尝试 H5 弹窗本体
+
+真机验证后，当前项目已经明确：
+
+- 小程序 `web-view` 不适合作为“原生弹窗里的局部 H5 内容区”
+- 它更适合作为整页/全屏体验容器来使用
+
+因此这条边界正式定为：
+
+- 原生内容卡负责即时弹窗体验
+- H5 不直接顶替原生弹窗
+- H5 只通过原生 CTA 进入详情页/任务页
+
 ---

 ## 5. 推荐的数据流
@@ -205,6 +225,18 @@ H5 只负责：

 **先稳定 ViewModel，再让模板与承载方式变化。**

+当前内容体验链已经调整成：
+
+```text
+控制点触发
+   ↓
+原生内容卡（template）
+   ↓
+CTA: 查看详情（可选）
+   ↓
+H5 详情页 / 互动任务页
+```
+
 ---

 ## 6. ViewModel 的作用
--- a/event/classic-sequential.json
+++ b/event/classic-sequential.json
@@ -23,27 +23,31 @@
    "CPRadius": 6,
    "controlOverrides": {
      "start-1": {
+        "template": "focus",
        "title": "比赛开始",
-        "body": "从这里出发，先熟悉地图方向，再推进到第一个目标点。",
+        "body": "从这里出发，先熟悉地图方向，再推进到第一个目标点。点击“查看详情”可打开 H5 详情页。",
        "autoPopup": true,
        "once": true,
        "priority": 1,
        "contentExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        },
        "clickTitle": "起点说明",
        "clickBody": "点击起点可再次查看起跑说明与路线背景。",
        "clickExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        }
      },
      "control-1": {
+        "template": "story",
        "title": "图书馆前广场",
-        "body": "这是第一检查点，完成后沿主路继续前进。",
+        "body": "这是第一检查点，完成后沿主路继续前进。卡片先原生弹出，再可进入 H5 详情。",
        "autoPopup": true,
        "once": false,
        "priority": 1,
@@ -52,17 +56,20 @@
        "contentExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        },
        "clickExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        }
      },
      "control-2": {
+        "template": "minimal",
        "title": "教学楼南侧",
-        "body": "注意这里地形开阔，适合快速判断下一段方向。",
+        "body": "注意这里地形开阔，适合快速判断下一段方向。这个点配置成手动查看后可进 H5。",
        "autoPopup": false,
        "once": true,
        "priority": 1,
@@ -71,10 +78,12 @@
        "clickExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        }
      },
      "control-3": {
+        "template": "story",
        "title": "湖边步道",
        "body": "经过这里时可以观察水边和林带的边界关系。",
        "autoPopup": true,
@@ -84,8 +93,9 @@
        "clickBody": "点击可查看更详细的路线观察建议。"
      },
      "finish-1": {
+        "template": "focus",
        "title": "终点到达",
-        "body": "恭喜完成本次顺序赛，准备查看结果。",
+        "body": "恭喜完成本次顺序赛，准备查看结果。这里也保留 H5 详情入口用于测试。",
        "autoPopup": true,
        "once": true,
        "priority": 2,
@@ -94,7 +104,8 @@
        "clickExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        }
      }
    },
--- a/event/score-o.json
+++ b/event/score-o.json
@@ -23,36 +23,44 @@
    "CPRadius": 6,
    "controlOverrides": {
      "start-1": {
+        "template": "focus",
        "title": "比赛开始",
-        "body": "从这里触发，先熟悉地图方向。",
+        "body": "从这里触发，先熟悉地图方向。原生内容卡会先弹出，再可进入 H5 详情。",
        "autoPopup": true,
        "once": true,
        "priority": 1,
        "contentExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        },
        "clickTitle": "积分赛起点",
        "clickBody": "点击起点可查看自由打点规则与终点说明。",
        "clickExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        }
      },
      "control-1": {
+        "template": "minimal",
        "score": 10,
        "clickTitle": "1号点",
        "clickBody": "这是一个基础积分点，适合作为开局热身。",
        "clickExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        }
      },
      "control-2": {
+        "template": "minimal",
        "score": 20,
+        "title": "2号点",
+        "body": "这个点配置成手动查看。点击“查看内容”后先出原生卡，再可进入 H5。",
        "autoPopup": false,
        "once": true,
        "priority": 1,
@@ -61,13 +69,15 @@
        "clickExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        }
      },
      "control-3": {
+        "template": "story",
        "score": 30,
        "title": "湖边步道",
-        "body": "这里适合短暂停留观察周边地形。",
+        "body": "这里适合短暂停留观察周边地形。自动弹原生内容卡，并提供 H5 详情入口。",
        "autoPopup": true,
        "once": false,
        "priority": 1,
@@ -76,7 +86,8 @@
        "contentExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        }
      },
      "control-4": {
@@ -86,6 +97,7 @@
        "score": 50
      },
      "control-6": {
+        "template": "focus",
        "score": 60,
        "title": "悬崖边",
        "body": "这里很危险啊。",
@@ -102,8 +114,9 @@
        "score": 80
      },
      "finish-1": {
+        "template": "focus",
        "title": "比赛结束",
-        "body": "恭喜完成本次路线，准备查看结果。",
+        "body": "恭喜完成本次路线，准备查看结果。这里也保留 H5 详情入口用于测试。",
        "autoPopup": true,
        "once": true,
        "priority": 2,
@@ -112,7 +125,8 @@
        "clickExperience": {
          "type": "h5",
          "url": "https://oss-mbh5.colormaprun.com/gotomars/h5/content-h5-test-template.html",
-          "bridge": "content-v1"
+          "bridge": "content-v1",
+          "presentation": "dialog"
        }
      }
    },
--- a/miniprogram/engine/map/mapEngine.ts
+++ b/miniprogram/engine/map/mapEngine.ts
@@ -227,8 +227,11 @@ export interface MapEngineViewState {
  punchFeedbackText: string
  punchFeedbackTone: 'neutral' | 'success' | 'warning'
  contentCardVisible: boolean
+  contentCardTemplate: 'minimal' | 'story' | 'focus'
  contentCardTitle: string
  contentCardBody: string
+  contentCardActionVisible: boolean
+  contentCardActionText: string
  pendingContentEntryVisible: boolean
  pendingContentEntryText: string
  punchButtonFxClass: string
@@ -252,6 +255,7 @@ export interface MapEngineCallbacks {
 }

 interface ContentCardEntry {
+  template: 'minimal' | 'story' | 'focus'
  title: string
  body: string
  motionClass: string
@@ -381,8 +385,11 @@ const VIEW_SYNC_KEYS: Array<keyof MapEngineViewState> = [
  'punchFeedbackText',
  'punchFeedbackTone',
  'contentCardVisible',
+  'contentCardTemplate',
  'contentCardTitle',
  'contentCardBody',
+  'contentCardActionVisible',
+  'contentCardActionText',
  'pendingContentEntryVisible',
  'pendingContentEntryText',
  'punchButtonFxClass',
@@ -1281,8 +1288,11 @@ export class MapEngine {
      punchFeedbackText: '',
      punchFeedbackTone: 'neutral',
      contentCardVisible: false,
+      contentCardTemplate: 'story',
      contentCardTitle: '',
      contentCardBody: '',
+      contentCardActionVisible: false,
+      contentCardActionText: '查看详情',
      pendingContentEntryVisible: false,
      pendingContentEntryText: '',
      punchButtonFxClass: '',
@@ -1801,8 +1811,10 @@ export class MapEngine {
    return {
      kind: 'content',
      title: title || resolved.control.label || '内容体验',
+      subtitle: resolved.displayMode === 'click' ? '点击查看内容' : '打点内容体验',
      url: experienceConfig.url,
      bridgeVersion: experienceConfig.bridge || 'content-v1',
+      presentation: experienceConfig.presentation || 'sheet',
      context: {
        eventId: this.configAppId || '',
        configTitle: this.state.mapName || '',
@@ -1847,33 +1859,13 @@ export class MapEngine {

  openContentCardEntry(item: ContentCardEntry): void {
    this.clearContentCardTimer()
-    if (item.h5Request && this.onOpenH5Experience) {
-      this.setState({
-        contentCardVisible: false,
-        contentCardFxClass: '',
-        pendingContentEntryVisible: false,
-        pendingContentEntryText: '',
-      }, true)
-      this.currentContentCardPriority = item.priority
-      this.currentContentCard = item
-      this.currentH5ExperienceOpen = true
-      if (item.once && item.contentKey) {
-        this.shownContentCardKeys[item.contentKey] = true
-      }
-      try {
-        this.onOpenH5Experience(item.h5Request)
-        return
-      } catch {
-        this.currentH5ExperienceOpen = false
-        this.currentContentCardPriority = 0
-        this.currentContentCard = null
-      }
-    }
-
    this.setState({
      contentCardVisible: true,
+      contentCardTemplate: item.template,
      contentCardTitle: item.title,
      contentCardBody: item.body,
+      contentCardActionVisible: !!item.h5Request,
+      contentCardActionText: '查看详情',
      contentCardFxClass: item.motionClass,
      pendingContentEntryVisible: false,
      pendingContentEntryText: '',
@@ -1883,18 +1875,77 @@ export class MapEngine {
    if (item.once && item.contentKey) {
      this.shownContentCardKeys[item.contentKey] = true
    }
+    if (item.h5Request) {
+      return
+    }
    this.contentCardTimer = setTimeout(() => {
      this.contentCardTimer = 0
      this.currentContentCardPriority = 0
      this.currentContentCard = null
      this.setState({
        contentCardVisible: false,
+        contentCardTemplate: 'story',
        contentCardFxClass: '',
+        contentCardActionVisible: false,
+        contentCardActionText: '查看详情',
      }, true)
      this.flushQueuedContentCards()
    }, 2600) as unknown as number
  }

+  openCurrentContentCardDetail(): void {
+    if (!this.currentContentCard) {
+      this.setState({
+        statusText: `当前没有可打开的内容详情 (${this.buildVersion})`,
+      }, true)
+      return
+    }
+
+    if (!this.currentContentCard.h5Request) {
+      this.setState({
+        statusText: `当前内容未配置 H5 详情 (${this.buildVersion})`,
+      }, true)
+      return
+    }
+
+    if (!this.onOpenH5Experience) {
+      this.setState({
+        statusText: `H5 详情入口未就绪 (${this.buildVersion})`,
+      }, true)
+      return
+    }
+
+    if (this.currentH5ExperienceOpen) {
+      this.setState({
+        statusText: `H5 详情页已在打开中 (${this.buildVersion})`,
+      }, true)
+      return
+    }
+
+    const request = this.currentContentCard.h5Request
+    this.clearContentCardTimer()
+    this.setState({
+      contentCardVisible: false,
+      contentCardTemplate: 'story',
+      contentCardTitle: '',
+      contentCardBody: '',
+      contentCardFxClass: '',
+      contentCardActionVisible: false,
+      contentCardActionText: '查看详情',
+    }, true)
+    this.currentH5ExperienceOpen = true
+
+    try {
+      this.onOpenH5Experience(request)
+    } catch {
+      this.currentH5ExperienceOpen = false
+      this.openContentCardEntry({
+        ...this.currentContentCard,
+        h5Request: null,
+      })
+    }
+  }
+
  flushQueuedContentCards(): void {
    if (this.state.contentCardVisible || !this.pendingContentCards.length) {
      this.syncPendingContentEntryState()
@@ -1949,8 +2000,11 @@ export class MapEngine {
      punchFeedbackTone: 'neutral',
      punchFeedbackFxClass: '',
      contentCardVisible: false,
+      contentCardTemplate: 'story',
      contentCardTitle: '',
      contentCardBody: '',
+      contentCardActionVisible: false,
+      contentCardActionText: '查看详情',
      pendingContentEntryVisible: this.getPendingManualContentCount() > 0,
      pendingContentEntryText: this.buildPendingContentEntryText(),
      contentCardFxClass: '',
@@ -2137,7 +2191,9 @@ export class MapEngine {
    const once = !!(options && options.once)
    const priority = options && typeof options.priority === 'number' ? options.priority : 0
    const contentKey = options && options.contentKey ? options.contentKey : ''
+    const resolved = this.resolveContentControlByKey(contentKey)
    const entry = {
+      template: resolved && resolved.control.displayContent ? resolved.control.displayContent.template : 'story',
      title,
      body,
      motionClass,
@@ -2182,7 +2238,12 @@ export class MapEngine {
    this.currentH5ExperienceOpen = false
    this.setState({
      contentCardVisible: false,
+      contentCardTemplate: 'story',
+      contentCardTitle: '',
+      contentCardBody: '',
      contentCardFxClass: '',
+      contentCardActionVisible: false,
+      contentCardActionText: '查看详情',
    }, true)
    this.flushQueuedContentCards()
  }
@@ -2228,6 +2289,7 @@ export class MapEngine {
    this.currentContentCardPriority = 0
    this.currentContentCard = null
    this.openContentCardEntry({
+      template: 'story',
      ...fallback,
      h5Request: null,
    })
--- a/miniprogram/game/content/courseToGameDefinition.ts
+++ b/miniprogram/game/content/courseToGameDefinition.ts
@@ -35,6 +35,7 @@ function applyExperienceOverride(
      url: null,
      bridge: 'content-v1',
      fallback: 'native',
+      presentation: 'sheet',
    }
  }

@@ -44,6 +45,7 @@ function applyExperienceOverride(
      url: override.url,
      bridge: override.bridge || (baseExperience ? baseExperience.bridge : 'content-v1'),
      fallback: override.fallback || 'native',
+      presentation: override.presentation || (baseExperience ? baseExperience.presentation : 'sheet'),
    }
  }

@@ -59,6 +61,7 @@ function applyDisplayContentOverride(
  }

  return {
+    template: override.template || baseContent.template,
    title: override.title || baseContent.title,
    body: override.body || baseContent.body,
    autoPopup: override.autoPopup !== undefined ? override.autoPopup : baseContent.autoPopup,
@@ -100,6 +103,7 @@ export function buildGameDefinitionFromCourse(
      sequence: null,
      score: null,
      displayContent: applyDisplayContentOverride({
+        template: 'focus',
        title: '比赛开始',
        body: `${start.label || '开始点'}已激活，按提示前往下一个目标点。`,
        autoPopup: true,
@@ -128,6 +132,7 @@ export function buildGameDefinitionFromCourse(
      sequence: control.sequence,
      score,
      displayContent: applyDisplayContentOverride({
+        template: 'story',
        title: score !== null ? `收集 ${label} (+${score}分)` : `收集 ${label}`,
        body: score !== null ? `${buildDisplayBody(label, control.sequence)} · ${score}分` : buildDisplayBody(label, control.sequence),
        autoPopup: true,
@@ -154,6 +159,7 @@ export function buildGameDefinitionFromCourse(
      sequence: null,
      score: null,
      displayContent: applyDisplayContentOverride({
+        template: 'focus',
        title: '完成路线',
        body: `${finish.label || '结束点'}已完成，准备查看本局结果。`,
        autoPopup: true,
--- a/miniprogram/game/core/gameDefinition.ts
+++ b/miniprogram/game/core/gameDefinition.ts
@@ -1,5 +1,6 @@
 import { type LonLatPoint } from '../../utils/projection'
 import { type GameAudioConfig } from '../audio/audioConfig'
+import { type H5ExperiencePresentation } from '../experience/h5Experience'

 export type GameMode = 'classic-sequential' | 'score-o'
 export type GameControlKind = 'start' | 'control' | 'finish'
@@ -10,6 +11,7 @@ export interface GameContentExperienceConfig {
  url: string | null
  bridge: string
  fallback: 'native'
+  presentation: H5ExperiencePresentation
 }

 export interface GameContentExperienceConfigOverride {
@@ -17,9 +19,11 @@ export interface GameContentExperienceConfigOverride {
  url?: string
  bridge?: string
  fallback?: 'native'
+  presentation?: H5ExperiencePresentation
 }

 export interface GameControlDisplayContent {
+  template: 'minimal' | 'story' | 'focus'
  title: string
  body: string
  autoPopup: boolean
@@ -32,6 +36,7 @@ export interface GameControlDisplayContent {
 }

 export interface GameControlDisplayContentOverride {
+  template?: 'minimal' | 'story' | 'focus'
  title?: string
  body?: string
  autoPopup?: boolean
--- a/miniprogram/game/experience/h5Experience.ts
+++ b/miniprogram/game/experience/h5Experience.ts
@@ -1,4 +1,5 @@
 export type H5ExperienceKind = 'content' | 'result'
+export type H5ExperiencePresentation = 'sheet' | 'dialog' | 'fullscreen'

 export interface H5ExperienceFallbackPayload {
  title: string
@@ -13,8 +14,10 @@ export interface H5ExperienceFallbackPayload {
 export interface H5ExperienceRequest {
  kind: H5ExperienceKind
  title: string
+  subtitle?: string
  url: string
  bridgeVersion: string
+  presentation: H5ExperiencePresentation
  context: Record<string, unknown>
  fallback: H5ExperienceFallbackPayload
 }
--- a/miniprogram/pages/experience-webview/experience-webview.js
+++ b/miniprogram/pages/experience-webview/experience-webview.js
@@ -39,19 +39,29 @@ function emitCloseAndBack(payload) {

 Page({
  data: {
+    pageTitle: '内容体验',
+    pageSubtitle: '',
+    presentation: 'sheet',
    webViewSrc: '',
    webViewReady: false,
    loadErrorText: '',
+    panelBodyHeightPx: 420,
  },

  onLoad() {
+    const systemInfo = wx.getSystemInfoSync()
+    const windowHeight = typeof systemInfo.windowHeight === 'number' ? systemInfo.windowHeight : 700
    pageResolved = false
    currentRequest = null
    currentEventChannel = null
    this.setData({
+      pageTitle: '内容体验',
+      pageSubtitle: '',
+      presentation: 'sheet',
      webViewSrc: '',
      webViewReady: false,
      loadErrorText: '',
+      panelBodyHeightPx: Math.max(420, Math.floor(windowHeight * 0.62)),
    })

    try {
@@ -66,14 +76,21 @@ Page({

    currentEventChannel.on('init', (request) => {
      currentRequest = request
-      wx.setNavigationBarTitle({
-        title: request.title || '内容体验',
-        fail() {},
-      })
+      const presentation = request.presentation || 'sheet'
+      const panelHeightPx = presentation === 'dialog'
+        ? Math.max(420, Math.floor(windowHeight * 0.7))
+        : presentation === 'fullscreen'
+          ? Math.max(520, windowHeight - 24)
+          : Math.max(420, Math.floor(windowHeight * 0.72))
+      const headerHeightPx = presentation === 'fullscreen' ? 84 : 76
      this.setData({
+        pageTitle: request.title || '内容体验',
+        pageSubtitle: request.subtitle || '',
+        presentation,
        webViewSrc: buildWebViewSrc(request),
        webViewReady: true,
        loadErrorText: '',
+        panelBodyHeightPx: Math.max(240, panelHeightPx - headerHeightPx),
      })
    })
  },
@@ -124,4 +141,8 @@ Page({
    })
    emitFallbackAndClose()
  },
+
+  handleCloseTap() {
+    emitCloseAndBack({})
+  },
 })
--- a/miniprogram/pages/experience-webview/experience-webview.json
+++ b/miniprogram/pages/experience-webview/experience-webview.json
@@ -1,3 +1,5 @@
 {
+  "navigationStyle": "custom",
+  "disableScroll": true,
  "navigationBarTitleText": "内容体验"
 }
--- a/miniprogram/pages/experience-webview/experience-webview.ts
+++ b/miniprogram/pages/experience-webview/experience-webview.ts
@@ -1,9 +1,13 @@
 import { type H5BridgeMessage, type H5ExperienceRequest } from '../../game/experience/h5Experience'

 type ExperienceWebViewPageData = {
+  pageTitle: string
+  pageSubtitle: string
+  presentation: 'sheet' | 'dialog' | 'fullscreen'
  webViewSrc: string
  webViewReady: boolean
  loadErrorText: string
+  panelBodyHeightPx: number
 }

 let currentRequest: H5ExperienceRequest | null = null
@@ -47,19 +51,29 @@ function emitCloseAndBack(payload?: Record<string, unknown>) {

 Page<ExperienceWebViewPageData, WechatMiniprogram.IAnyObject>({
  data: {
+    pageTitle: '内容体验',
+    pageSubtitle: '',
+    presentation: 'sheet',
    webViewSrc: '',
    webViewReady: false,
    loadErrorText: '',
+    panelBodyHeightPx: 420,
  },

  onLoad() {
+    const systemInfo = wx.getSystemInfoSync()
+    const windowHeight = typeof systemInfo.windowHeight === 'number' ? systemInfo.windowHeight : 700
    pageResolved = false
    currentRequest = null
    currentEventChannel = null
    this.setData({
+      pageTitle: '内容体验',
+      pageSubtitle: '',
+      presentation: 'sheet',
      webViewSrc: '',
      webViewReady: false,
      loadErrorText: '',
+      panelBodyHeightPx: Math.max(420, Math.floor(windowHeight * 0.62)),
    })

    try {
@@ -74,14 +88,21 @@ Page<ExperienceWebViewPageData, WechatMiniprogram.IAnyObject>({

    currentEventChannel.on('init', (request: H5ExperienceRequest) => {
      currentRequest = request
-      wx.setNavigationBarTitle({
-        title: request.title || '内容体验',
-        fail: () => {},
-      })
+      const presentation = request.presentation || 'sheet'
+      const panelHeightPx = presentation === 'dialog'
+        ? Math.max(420, Math.floor(windowHeight * 0.7))
+        : presentation === 'fullscreen'
+          ? Math.max(520, windowHeight - 24)
+          : Math.max(420, Math.floor(windowHeight * 0.72))
+      const headerHeightPx = presentation === 'fullscreen' ? 84 : 76
      this.setData({
+        pageTitle: request.title || '内容体验',
+        pageSubtitle: request.subtitle || '',
+        presentation,
        webViewSrc: buildWebViewSrc(request),
        webViewReady: true,
        loadErrorText: '',
+        panelBodyHeightPx: Math.max(240, panelHeightPx - headerHeightPx),
      })
    })
  },
@@ -133,4 +154,8 @@ Page<ExperienceWebViewPageData, WechatMiniprogram.IAnyObject>({
    })
    emitFallbackAndClose()
  },
+
+  handleCloseTap() {
+    emitCloseAndBack({})
+  },
 })
--- a/miniprogram/pages/experience-webview/experience-webview.wxml
+++ b/miniprogram/pages/experience-webview/experience-webview.wxml
@@ -1,11 +1,27 @@
-<view wx:if="{{!webViewReady}}" class="experience-webview__loading">
-  <view class="experience-webview__loading-title">内容页加载中</view>
-  <view wx:if="{{loadErrorText}}" class="experience-webview__loading-error">{{loadErrorText}}</view>
-</view>
+<view class="experience-shell experience-shell--{{presentation}}">
+  <view class="experience-shell__backdrop" catchtap="handleCloseTap"></view>
+  <view class="experience-shell__panel experience-shell__panel--{{presentation}}">
+    <view class="experience-shell__header">
+      <view class="experience-shell__header-copy">
+        <view class="experience-shell__title">{{pageTitle}}</view>
+        <view wx:if="{{pageSubtitle}}" class="experience-shell__subtitle">{{pageSubtitle}}</view>
+      </view>
+      <view class="experience-shell__close" catchtap="handleCloseTap">关闭</view>
+    </view>

-<web-view
-  wx:if="{{webViewReady && webViewSrc}}"
-  src="{{webViewSrc}}"
-  bindmessage="handleWebViewMessage"
-  binderror="handleWebViewError"
-></web-view>
+    <view class="experience-shell__body" style="height: {{panelBodyHeightPx}}px;">
+      <view wx:if="{{!webViewReady}}" class="experience-webview__loading">
+        <view class="experience-webview__loading-title">内容页加载中</view>
+        <view wx:if="{{loadErrorText}}" class="experience-webview__loading-error">{{loadErrorText}}</view>
+      </view>
+
+      <web-view
+        wx:if="{{webViewReady && webViewSrc}}"
+        style="height: 100%;"
+        src="{{webViewSrc}}"
+        bindmessage="handleWebViewMessage"
+        binderror="handleWebViewError"
+      ></web-view>
+    </view>
+  </view>
+</view>
--- a/miniprogram/pages/experience-webview/experience-webview.wxss
+++ b/miniprogram/pages/experience-webview/experience-webview.wxss
@@ -1,12 +1,94 @@
-.page {
-  height: 100%;
-}
 page {
-  background: #f5f7f6;
+  background: transparent;
+}
+
+.experience-shell {
+  position: relative;
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+.experience-shell__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(14, 18, 17, 0.48);
+}
+
+.experience-shell__panel {
+  position: absolute;
+  left: 24rpx;
+  right: 24rpx;
+  background: #f6faf7;
+  border: 2rpx solid rgba(21, 36, 27, 0.08);
+  box-shadow: 0 24rpx 64rpx rgba(19, 31, 25, 0.22);
+  overflow: hidden;
+}
+
+.experience-shell__panel--sheet {
+  bottom: 24rpx;
+  border-radius: 36rpx 36rpx 24rpx 24rpx;
+}
+
+.experience-shell__panel--dialog {
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 32rpx;
+}
+
+.experience-shell__panel--fullscreen {
+  top: 12rpx;
+  bottom: 12rpx;
+  left: 12rpx;
+  right: 12rpx;
+  border-radius: 24rpx;
+}
+
+.experience-shell__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20rpx;
+  padding: 24rpx 24rpx 18rpx;
+  background: linear-gradient(180deg, rgba(227, 243, 234, 0.96), rgba(246, 250, 247, 0.96));
+  border-bottom: 2rpx solid rgba(30, 63, 46, 0.08);
+}
+
+.experience-shell__header-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.experience-shell__title {
+  color: #13241c;
+  font-size: 32rpx;
+  font-weight: 700;
+  line-height: 1.25;
+}
+
+.experience-shell__subtitle {
+  margin-top: 6rpx;
+  color: #557463;
+  font-size: 22rpx;
+  line-height: 1.35;
+}
+
+.experience-shell__close {
+  flex-shrink: 0;
+  padding: 12rpx 22rpx;
+  border-radius: 999rpx;
+  background: rgba(23, 46, 34, 0.08);
+  color: #244432;
+  font-size: 24rpx;
+  font-weight: 600;
+}
+
+.experience-shell__body {
+  position: relative;
+  background: #f6faf7;
 }

 .experience-webview__loading {
-  min-height: 100vh;
+  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
--- a/miniprogram/pages/map/map.ts
+++ b/miniprogram/pages/map/map.ts
@@ -800,8 +800,11 @@ Page({
    punchFeedbackText: '',
    punchFeedbackTone: 'neutral',
    contentCardVisible: false,
+    contentCardTemplate: 'story',
    contentCardTitle: '',
    contentCardBody: '',
+    contentCardActionVisible: false,
+    contentCardActionText: '查看详情',
    punchButtonFxClass: '',
    panelProgressFxClass: '',
    panelDistanceFxClass: '',
@@ -1117,8 +1120,11 @@ Page({
      punchFeedbackText: '',
      punchFeedbackTone: 'neutral',
      contentCardVisible: false,
+      contentCardTemplate: 'story',
      contentCardTitle: '',
      contentCardBody: '',
+      contentCardActionVisible: false,
+      contentCardActionText: '查看详情',
      punchButtonFxClass: '',
      panelProgressFxClass: '',
      panelDistanceFxClass: '',
@@ -1903,6 +1909,19 @@ Page({
    }
  },

+  handleOpenContentCardDetail() {
+    if (mapEngine) {
+      wx.showToast({
+        title: '打开详情',
+        icon: 'none',
+        duration: 900,
+      })
+      mapEngine.openCurrentContentCardDetail()
+    }
+  },
+
+  handleContentCardTap() {},
+
  openH5Experience(request: H5ExperienceRequest) {
    wx.navigateTo({
      url: '/pages/experience-webview/experience-webview',
--- a/miniprogram/pages/map/map.wxml
+++ b/miniprogram/pages/map/map.wxml
@@ -29,13 +29,6 @@
    <view class="map-stage__stage-fx {{stageFxClass}}" wx:if="{{stageFxVisible}}"></view>

    <view class="game-punch-feedback game-punch-feedback--{{punchFeedbackTone}} {{punchFeedbackFxClass}}" wx:if="{{punchFeedbackVisible}}">{{punchFeedbackText}}</view>
-    <view class="game-content-card {{contentCardFxClass}}" wx:if="{{contentCardVisible}}" bindtap="handleCloseContentCard">
-      <view class="game-content-card__title">{{contentCardTitle}}</view>
-      <view class="game-content-card__body">{{contentCardBody}}</view>
-      <view class="game-content-card__hint">点击关闭</view>
-    </view>
-
-
    <view class="map-stage__overlay-center-layer" wx:if="{{!showDebugPanel && !showGameInfoPanel && !showResultScene && !showSystemSettingsPanel}}">
      <view class="center-scale-ruler" wx:if="{{centerScaleRulerVisible}}" style="left: {{centerScaleRulerCenterXPx}}px; top: {{centerScaleRulerZeroYPx}}px; height: {{centerScaleRulerHeightPx}}px;">
        <view class="center-scale-ruler__axis" style="bottom: {{centerScaleRulerAxisBottomPx}}px;"></view>
@@ -80,6 +73,23 @@
    </view>
  </view>

+  <view
+    class="game-content-card game-content-card--{{contentCardTemplate}} {{contentCardFxClass}}"
+    wx:if="{{contentCardVisible}}"
+    catchtap="handleContentCardTap"
+  >
+    <view class="game-content-card__title">{{contentCardTitle}}</view>
+    <view class="game-content-card__body">{{contentCardBody}}</view>
+    <view class="game-content-card__action-row {{contentCardActionVisible ? 'game-content-card__action-row--split' : ''}}">
+      <view
+        wx:if="{{contentCardActionVisible}}"
+        class="game-content-card__action"
+        catchtap="handleOpenContentCardDetail"
+      >{{contentCardActionText}}</view>
+      <view class="game-content-card__close" catchtap="handleCloseContentCard">关闭</view>
+    </view>
+  </view>
+
  <view class="game-punch-hint" wx:if="{{!showResultScene && showPunchHintBanner && punchHintText}}" style="top: {{topInsetHeight}}px;" catchtouchstart="handlePunchHintTap" catchtouchmove="handlePunchHintTap" catchtouchend="handlePunchHintTap">
    <view class="game-punch-hint__text">{{punchHintText}}</view>
    <view class="game-punch-hint__close" catchtouchstart="handlePunchHintTap" catchtouchmove="handlePunchHintTap" catchtouchend="handlePunchHintTap" catchtap="handleClosePunchHint">×</view>
--- a/miniprogram/pages/map/map.wxss
+++ b/miniprogram/pages/map/map.wxss
@@ -2003,7 +2003,24 @@
  background: rgba(248, 251, 244, 0.96);
  box-shadow: 0 18rpx 48rpx rgba(22, 48, 32, 0.18);
  box-sizing: border-box;
-  z-index: 17;
+  z-index: 33;
+  pointer-events: auto;
+}
+
+.game-content-card--minimal {
+  width: 396rpx;
+  padding: 24rpx 24rpx 20rpx;
+  border-radius: 24rpx;
+  background: rgba(248, 251, 244, 0.94);
+}
+
+.game-content-card--focus {
+  width: 468rpx;
+  padding: 30rpx 30rpx 26rpx;
+  border-radius: 30rpx;
+  background: linear-gradient(180deg, rgba(240, 248, 241, 0.98), rgba(248, 251, 244, 0.96));
+  box-shadow: 0 22rpx 54rpx rgba(22, 48, 32, 0.2);
+  border: 2rpx solid rgba(92, 139, 109, 0.14);
 }

 .game-content-card__title {
@@ -2013,6 +2030,15 @@
  color: #163020;
 }

+.game-content-card--minimal .game-content-card__title {
+  font-size: 30rpx;
+}
+
+.game-content-card--focus .game-content-card__title {
+  font-size: 36rpx;
+  color: #103020;
+}
+
 .game-content-card__body {
  margin-top: 12rpx;
  font-size: 24rpx;
@@ -2020,10 +2046,52 @@
  color: #45624b;
 }

-.game-content-card__hint {
-  margin-top: 16rpx;
-  font-size: 20rpx;
-  color: #809284;
+.game-content-card--minimal .game-content-card__body {
+  margin-top: 10rpx;
+  font-size: 22rpx;
+}
+
+.game-content-card--focus .game-content-card__body {
+  margin-top: 14rpx;
+  color: #3f5f49;
+}
+
+.game-content-card__action-row {
+  margin-top: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 16rpx;
+}
+
+.game-content-card__action-row--split {
+  justify-content: space-between;
+}
+
+.game-content-card__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 56rpx;
+  padding: 0 22rpx;
+  border-radius: 999rpx;
+  background: rgba(25, 78, 47, 0.1);
+  color: #18472d;
+  font-size: 22rpx;
+  font-weight: 700;
+}
+
+.game-content-card__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 56rpx;
+  padding: 0 22rpx;
+  border-radius: 999rpx;
+  background: rgba(16, 32, 20, 0.06);
+  color: #5a685f;
+  font-size: 22rpx;
+  font-weight: 600;
 }

 .game-content-card--fx-pop {
--- a/miniprogram/utils/remoteMapConfig.ts
+++ b/miniprogram/utils/remoteMapConfig.ts
@@ -250,6 +250,7 @@ function parseContentExperienceOverride(
    return {
      type: 'native',
      fallback: 'native',
+      presentation: 'sheet',
    }
  }

@@ -265,12 +266,19 @@ function parseContentExperienceOverride(
  const bridgeValue = typeof normalized.bridge === 'string' && normalized.bridge.trim()
    ? normalized.bridge.trim()
    : 'content-v1'
+  const rawPresentation = typeof normalized.presentation === 'string'
+    ? normalized.presentation.trim().toLowerCase()
+    : ''
+  const presentationValue = rawPresentation === 'dialog' || rawPresentation === 'fullscreen'
+    ? rawPresentation
+    : 'sheet'

  return {
    type: 'h5',
    url: resolveUrl(baseUrl, rawUrl),
    bridge: bridgeValue,
    fallback: 'native',
+    presentation: presentationValue,
  }
 }

@@ -818,6 +826,12 @@ function parseGameConfigFromJson(text: string, gameConfigUrl: string): ParsedGam
      const titleValue = typeof (item as Record<string, unknown>).title === 'string'
        ? ((item as Record<string, unknown>).title as string).trim()
        : ''
+      const templateRaw = typeof (item as Record<string, unknown>).template === 'string'
+        ? ((item as Record<string, unknown>).template as string).trim().toLowerCase()
+        : ''
+      const templateValue = templateRaw === 'minimal' || templateRaw === 'story' || templateRaw === 'focus'
+        ? templateRaw
+        : ''
      const bodyValue = typeof (item as Record<string, unknown>).body === 'string'
        ? ((item as Record<string, unknown>).body as string).trim()
        : ''
@@ -836,7 +850,8 @@ function parseGameConfigFromJson(text: string, gameConfigUrl: string): ParsedGam
      const hasOnce = typeof onceValue === 'boolean'
      const hasPriority = Number.isFinite(priorityNumeric)
      if (
-        titleValue
+        templateValue
+        || titleValue
        || bodyValue
        || clickTitleValue
        || clickBodyValue
@@ -847,6 +862,7 @@ function parseGameConfigFromJson(text: string, gameConfigUrl: string): ParsedGam
        || clickExperienceValue
      ) {
        controlContentOverrides[key] = {
+          ...(templateValue ? { template: templateValue } : {}),
          ...(titleValue ? { title: titleValue } : {}),
          ...(bodyValue ? { body: bodyValue } : {}),
          ...(clickTitleValue ? { clickTitle: clickTitleValue } : {}),
--- a/readme-develop.md
+++ b/readme-develop.md
@@ -1476,3 +1476,66 @@ GPS：
 详细说明见：

 - [platform-capability-notes.md](D:/dev/cmr-mini/doc/platform-capability-notes.md)
+
+---
+
+## 23. 内容体验与 H5 分工定案
+
+这一阶段又把“原生内容”和 “H5 定制内容”的边界试清楚了。
+
+### 23.1 已确认的边界
+
+在企业主体环境下：
+
+- `web-view` 已经可以正常打开
+- 但它不适合作为“原生弹窗里的局部 H5 内容区”
+- 真机上更接近整页原生容器
+
+因此当前正式定案为：
+
+- **即时内容弹窗：原生**
+- **详情页 / 互动任务页：H5**
+- **结果页：原生兜底 + H5 全屏增强**
+
+### 23.2 当前已经落地的内容体验链
+
+现在控制点内容已经不是单一文本弹层，而是：
+
+- 原生内容卡模板
+  - `minimal`
+  - `story`
+  - `focus`
+- 配置驱动的展示控制
+  - `title`
+  - `body`
+  - `clickTitle`
+  - `clickBody`
+  - `autoPopup`
+  - `once`
+  - `priority`
+- 原生内容卡 CTA
+  - `查看详情`
+
+当前行为是：
+
+- 打点或点击后先显示原生内容卡
+- 如果该内容配置了 H5 详情，则卡片中显示 `查看详情`
+- 点击后再进入 H5 详情页
+- H5 失败时继续回退原生内容
+
+### 23.3 这一步的意义
+
+这一步非常关键，因为它把过去“内容到底原生还是 H5”的混乱边界收清楚了：
+
+- 地图过程中的节奏控制，交给原生
+- 深度内容和强互动，交给 H5
+- 原生永远保底
+
+后面继续扩展：
+
+- 拍照上传
+- 语音留言
+- 小游戏
+- 定制结果页
+
+都会沿这条边界继续推进，而不是重新混在一个弹层里。