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

.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*

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,

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` 三种体验形态。**

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

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 的作用

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"
         }
       }
     },

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"
         }
       }
     },

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,
     })

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,

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

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
 }

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({
+      const presentation = request.presentation || 'sheet'
-        title: request.title || '内容体验',
+      const panelHeightPx = presentation === 'dialog'
-        fail() {},
+        ? 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({})
+  },
 })

miniprogram/pages/experience-webview/experience-webview.json

@@ -1,3 +1,5 @@
 {
+  "navigationStyle": "custom",
+  "disableScroll": true,
   "navigationBarTitleText": "内容体验"
 }

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({
+      const presentation = request.presentation || 'sheet'
-        title: request.title || '内容体验',
+      const panelHeightPx = presentation === 'dialog'
-        fail: () => {},
+        ? 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({})
+  },
 })

miniprogram/pages/experience-webview/experience-webview.wxml

@@ -1,11 +1,27 @@
-<view wx:if="{{!webViewReady}}" class="experience-webview__loading">
+<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>
+
+    <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>
+      </view>
 
-<web-view
+      <web-view
         wx:if="{{webViewReady && webViewSrc}}"
+        style="height: 100%;"
         src="{{webViewSrc}}"
         bindmessage="handleWebViewMessage"
         binderror="handleWebViewError"
-></web-view>
+      ></web-view>
+    </view>
+  </view>
+</view>

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;

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',

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>

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 {
+.game-content-card--minimal .game-content-card__body {
-  margin-top: 16rpx;
+  margin-top: 10rpx;
-  font-size: 20rpx;
+  font-size: 22rpx;
-  color: #809284;
+}
+
+.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 {

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 } : {}),

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
+- 原生永远保底
+
+后面继续扩展：
+
+- 拍照上传
+- 语音留言
+- 小游戏
+- 定制结果页
+
+都会沿这条边界继续推进，而不是重新混在一个弹层里。