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

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