mit einem Klick
slide-mobile-player-custom-action-slot
// 当调整 `markdown-flow-ui` 的 `Slide` 移动端播放器控制栏,尤其涉及 `playerCustomActions` 的桥接型节点、占位空槽和 more icon 入口时使用本技能。
// 当调整 `markdown-flow-ui` 的 `Slide` 移动端播放器控制栏,尤其涉及 `playerCustomActions` 的桥接型节点、占位空槽和 more icon 入口时使用本技能。
| name | slide-mobile-player-custom-action-slot |
| description | 当调整 `markdown-flow-ui` 的 `Slide` 移动端播放器控制栏,尤其涉及 `playerCustomActions` 的桥接型节点、占位空槽和 more icon 入口时使用本技能。 |
移动端 Slide 播放器应固定保留左侧 more icon 槽位;无论是否存在 playerCustomActions,都要保持底部控制栏的按钮数量与视觉布局一致。
当 more icon 需要承载设置能力时,优先复用播放器内部浮层,内容保持最小集合,默认只放标题和当前场景真正需要的设置项。
若设置项里出现“竖屏 / 横屏”这类方向切换,不要复用 isFullscreen 语义;应维护独立的移动端屏幕方向状态,并让舞台、交互浮层和播放器作为同一视口一起旋转。
playerCustomActions,播放器组件只负责保留入口位和栅格,不擅自改写业务层状态流。Player 只负责状态控制与事件透传,避免把结构、文案和样式继续内联在 Player.tsx 中。Slide 对外 props 透传国际化文本,不在 Player 或浮层组件内部根据 document.lang 自行推断语言。transform: rotate(90deg),优先新增旋转视口容器,让 Slide 主舞台、loading、interaction overlay 和 player 同步旋转;不要只旋转单个子节点,避免宽高和定位基准错位。DialogPortal,横屏模式下应把 portal 容器挂到已旋转的视口节点,而不是默认挂到 body,否则浮层方向会与舞台不一致。onBack;header 本身不要内置头像或标题默认结构,内容区只保留自定义渲染槽位。path 的 fill,避免残留黑色底盘。24px,并只给播放按钮增加白色描边,不要给左右前进/后退按钮也套上边框。padding: 12px 24px,并把 header 高度合并到顶部内边距里一起计算。click/tap,不要绑定在 pointerdown、touchstart 或滚动起手事件上。Slide 对外暴露只读回调,例如 onMobileViewModeChange(viewMode);同时导出 MobileViewMode 类型,避免业务层手写字符串字面量。max-width 或视口宽度断点;优先基于设备能力判断,例如 pointer: coarse、hover: none、maxTouchPoints,并把结果收敛为统一的语义状态或根 class,供 JS 逻辑与 CSS 一起复用。@media (max-width: ...) 中,迁移时应同步改造组件逻辑和样式入口,优先改成 .slide--mobile-device 这类语义 class 驱动,避免横屏时误切到桌面布局。rotate(90deg);只有在竖屏设备里强制进入横屏展示时,才使用旋转视口去模拟横屏。sm:hidden 之类基于宽度断点的 class 控制显隐;横屏手机宽度变大后,这类断点会把真实移动端浮层误隐藏。slide--mobile-landscape 与 slide--mobile-landscape-native;设置面板的选中项仍基于生效后的 screen mode,同步反映真实设备方向。IframeSandbox 或包裹层桥接“唤醒 player”事件,移动端可滚动场景不要绑定 pointerdown、mousedown、touchstart;应只在 click/tap 这类明确激活事件上唤醒,避免真机滚动把 header/player 误显示出来。slide__viewport 做 rotate(90deg);应只切换横屏态的 header/player/overlay 布局语义,让舞台继续沿当前视口方向渲染。Slide 对外 API 已把移动端模式语义从“横屏 / 竖屏”收敛成“fullscreen / nonFullscreen”,新增或修改 props、state、回调和文案字段时应沿用这套命名,例如 fullscreenHeader、onMobileViewModeChange、fullscreenLabel、nonFullscreenLabel;不要再混用旧的 landscape / portrait 字段名。Slide 在进入 fullscreen 后需要追加短时引导提示,应拆成独立组件挂在 Slide 视口层,而不是把 overlay 结构直接内联在 Slide.tsx 或 Player.tsx;提示文案优先并入现有 playerTexts 这类国际化对象统一透传,默认展示后约 2s 自动关闭。
30a. 若产品明确不需要移动端进入 fullscreen 后的旋转/体验提示,应同时移除提示组件渲染与进入 fullscreen 时的唤起状态逻辑,不要只清空文案或把时长改成 0,避免残留遮罩闪现。Slide 根节点内额外挂一个独立节点,并使用 fixed + top/left: 0 + width/height: 100dvw/100dvh + max-height: 100dvh + 高 z-index 这类样式;若产品只要求占位遮罩而非视觉蒙层,不要给它加 background,并默认加上 pointer-events: none 避免挡住现有交互。fullscreen 时设备本身已经处于横屏优先视口,不要再弹“请旋转屏幕”这类提示;这类引导只应出现在竖屏进入全屏、仍需要用户主动旋转设备的场景。Slide 在移动端无论横屏还是竖屏都以“非全屏”作为默认初始态,不要再把设备物理方向或宽高比自动映射成 fullscreen;应仅在用户显式切换后进入全屏,并让设置面板默认选中 nonFullscreen。24px 内缩,不要把标题下方也误做成 inset divider。16px;像字幕开关这类右侧控制,默认使用 24x24 的点击区域,再在里面放实际的开关图形,避免视觉尺寸和点击热区混在一起。Slide 进入 fullscreen 后需要统一修改顶部 header 与底部 player 的视觉风格,优先把前景色与渐变背景抽成同一组 fullscreen chrome CSS 变量,由 header、player controls 与返回 icon 共同复用;不要分别写死两套颜色,避免后续一侧漏改。text-foreground / text-white 等 class 会把新主题色覆盖掉。header height + gap,底部至少等于 player height + gap;不要只给顶部加 padding,否则内容会被底部 player 遮挡。console.log 或调试输出。Slide 播放器按钮顺序。保持 `markdown-flow-ui` 中基于 iframe 的幻灯片(`Slide`)步骤常驻挂载,通过 CSS `display` 切换可见性。当幻灯片导航需要降低 iframe 重载耗时、要把 `is_renderable` 驱动的卸载渲染改为“隐藏但已挂载”策略、或在预加载改造中保持 `is_new`、`diff`、交互步骤语义不变时使用本技能。
修复或排查 `markdown-flow-ui` 的 `ContentRender` 在关闭打字机效果时首屏空白、helper 行先于正文出现等首次渲染时序问题时使用本技能。
为 `markdown-flow-ui` 的 `ContentRender` 新增或更新“后端整句到达、前端按固定节奏做打字机输出”的 story 时使用本技能。
修改 `markdown-flow-ui` 的 `MarkdownFlowEditor` 国际化语言时使用本技能,尤其适用于新增 locale、补充编辑器文案资源、以及让上游项目传入的语言配置安全落到编辑器内部的场景。
为 `markdown-flow-ui` 的幻灯片(`Slide`)新增或更新可模拟流式播放的 `story` 时使用本技能,尤其适用于通过 `StreamingSlidePreview` 渲染、且为单元素 iframe 承载 `html` 的幻灯片场景。
统一 `markdown-flow-ui` 中 `ContentRender`、`IframeSandbox`、`Slide` 等场景的 loading 遮罩表现时使用本技能。