拓冰网站定制 
【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载open-slide 是一个面向 Agent 的幻灯片框架页面上每个组件都渲染在固定 1920×1080 画布上。本文讲解其分步揭示Stepped reveals原语Steps/Step如何让一页内容按节拍逐条出现让观众跟随讲者节奏阅读而非提前扫完。你将掌握二者的导入与用法、四条核心规则直接子元素、即时渲染的非 Step 内容、多块组合顺序、入场方向决定初始状态、duration参数与动画细节以及何时使用、何时避免的实战判断并能在apps/demo/slides/build-on-reveal/中找到完整可运行的示例。一、Steps/Step是什么分步揭示的含义是一次只揭晓一页内容中的一个节拍而不是一开始就展示全部。实现上把需要延迟展示的部分包进Step把这一组Step再包进Steps。键盘上每按一次→就揭开下一个Step最后一个Step揭开后再按→才前进到下一页。←则把最后一次揭示剥回去逐步回退。典型用途是分阶段引导注意力——先展示铺垫框架再展示后果最后是转折让观众以讲者的语速阅读而不是提前读到结尾。基本用法如下import { Step, Steps } from open-slide/core; Steps Stepdiv style{BULLET_ROW}An audience reads faster than a presenter speaks./div/Step Stepdiv style{BULLET_ROW}Showing every bullet at once invites pre-reading./div/Step Stepdiv style{BULLET_ROW}Revealing in time stages attention./div/Step /Steps在仓库中apps/demo/slides/build-on-reveal/index.tsx就是官方提供的完整分步示例演示工作区随项目一同发布。写作分步页面之前建议先通读这份示例即使不读下面给出的规则与代码片段也已足够。二、四条核心规则规则一Step必须是Steps的直接子元素一个Step如果嵌套得更深或者根本没有Steps父元素它会完整渲染、什么都不延迟。这是最容易踩的坑代码看起来没错但揭示功能悄悄失效。原因可以追溯到源码packages/core/src/app/lib/step-context.tsx中的Steps组件通过Children.toArray(children)做扁平化并且只对isValidElement(child) child.type Step的元素注入_revealed标记其余子元素原样透传。规则二非Step子元素立即渲染放进Steps里的普通元素如大标题或开场段落会从第一帧就显示只有Step块会等待。这就是标题常驻、正文分步headline always, body in turn模式Steps h2Not everything has to wait./h2{/* visible immediately */} SteppFirst, set the stage…/p/Step SteppThen, layer the consequence…/p/Step /Steps上述模式的真实演示见apps/demo/slides/build-on-reveal/index.tsx中的Mixed页面大标题与引导段非 Step立即可见三个Step段落则等待每次按键揭示。规则三多个Steps块按文档顺序组合同一页可以出现多个Steps块它们按文档顺序依次构建第一个块的所有步骤全部揭示完第二个块才开始←则按相反顺序回退。这个模式适合先左后右构建的双栏布局每栏各拥有自己的Stepsdiv style{COL}StepsStep…/StepStep…/Step/Steps/div{/* finishes first */} div style{COL}StepsStep…/StepStep…/Step/Steps/div{/* then this */}源码层面StepHost同样位于packages/core/src/app/lib/step-context.tsx维护一个按注册顺序排列的控制器列表advance()从前到后遍历retreat()从后向前遍历第一个有动作可做的控制器被调用。这正是左栏先完成、右栏后开始的底层保证。build-on-reveal示例的Columns页面即为双栏双块的标准实现。规则四入场方向决定起始状态——同样内容两种节奏这是分步揭示与简单显示/隐藏最本质的区别。源码中EntryDirection类型为forward | backward | jump定义于step-context.tsx向前进入从前一页按→进入页面从空开始逐步构建从后一页回退进入或通过概览网格直接跳入页面完全呈现每个步骤都已揭示。player.tsx中handleIndexChange根据delta同步设置entryDirectiondelta 1 → forwarddelta -1 → backward其余jump并保证在下一页的Steps挂载读取前同步落定。Steps组件的初始状态也由此决定host?.entryDirection forward ? 0 : stepCount向前为 0其他方向为完整步骤数。因此设计页面时必须让它在两种方式下都成立缩略图或概览跳入时应看起来完整而非空白。三、动画细节duration与减少动态偏好Step默认在duration毫秒内淡入默认值为 180ms。需要调整时传入Step duration{...}Step duration{300}…/Step底层实现step-context.tsx的Step组件是一个包裹div未揭示时opacity: 0且visibility: hidden揭示时opacity: 1过渡曲线为cubic-bezier(0, 0, 0.2, 1)Material Design 标准强调曲线。它还调用usePrefersReducedMotion()见packages/core/src/app/lib/use-prefers-reduced-motion.ts当用户系统开启prefers-reduced-motion: reduce时动画自动坍缩为瞬时切换ms 0。不需要你写降级方案。组件同时通过data-osd-step属性暴露状态revealed/pending这也是框架内部与测试定位步骤状态的标准挂钩。四、什么时候该用分步揭示当想法的顺序本身是重点时使用收尾在最后一项的清单、层层铺垫的结论、before/after 对比。注意不要条件反射地把每页内容都包进Step——需要一眼看懂的页面主视觉标题、单条引语、整页图表整体呈现反而更有力。从源码看分步揭示是一个纯时机timing机制而非装饰packages/core/src/app/lib/export-html.ts在导出静态 HTML 时会把每个[data-osd-step]元素全部写进标记并用内联脚本按方向重建揭示状态向前进入从shown 0起逐步递增跳入/回退则shown 步骤总数全部揭示。这与交互层的行为严格一致说明完整呈现 vs 逐步构建是框架级的设计约定。五、反模式❌条件反射地给每页内容都包Step。分步揭示服务于顺序即重点的内容一页能一眼看懂的内容主视觉标题、单条引语、图表整体展示更强。❌Step不是Steps的直接子元素嵌套更深或没有Steps父元素。它会完整渲染、什么都不延迟——揭示静默失效。六、从测试用例看运行时行为框架的 Playwright 端到端测试直接验证了上述规则可作为行为基准packages/core/e2e/tests/present.spec.ts的 steps reveal one by one before the page advances进入steps示例页后按→先翻到第二页此时两个[data-osd-steppending]全部未揭示连续按→依次变为 1 个、2 个revealed再按→才前进到第三页按←回退到第二页时两个步骤已是完全揭示状态印证回退进入 完整呈现。packages/core/e2e/tests/viewer.spec.ts的 steps render fully revealed in the editor编辑器画布中步骤始终完整揭示2 个revealed、0 个pending即编辑态等同于跳入的完整呈现视角。七、在完整工作流中的位置packages/core/skills/slide-authoring/SKILL.md将Steps/Step列为页面的基础原语之一并要求使用前先读references/steps.md即本文对应的参考文档。撰写分步页面时的相关约束还包括页面固定 1920×1080 画布、内容必须落在 100–160px 内边距内、Step的直接子元素要求同时出现在自检清单中。如果项目里存在slides/build-on-reveal/demo 工作区随项目附带它就是分步页面的权威示例对应apps/demo/slides/build-on-reveal/index.tsx。一句话总结分步揭示是用Steps包裹一组直接子Step让每次→揭开一个节拍标题常驻、正文分步多块按文档顺序组合入场方向决定起始状态——而这一切的目的是让揭示成为时机timing而不是装饰。赞分享【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载相关推荐终极Marp演讲现场控制指南掌握演示节奏的10个高级功能终极Marp演讲现场控制指南掌握演示节奏的10个高级功能 Marp是一个使用纯Markdown编写演示文稿的生态系统让你能够轻松创建专业的幻灯片并掌控演讲节前端文档30实用工具集PowerToys如何让你的Windows效率提升300%30实用工具集PowerToys如何让你的Windows效率提升300% Microsoft PowerToys是一套免费开源的Windows生产力工具集桌面应用开发工具form-builder组件全解析从Input到Upload的17种表单元素实战教程form builder组件全解析从Input到Upload的17种表单元素实战教程 form builder是一款好用的PHP表单生成器能快速生成现代化的后端低代码上一篇ComfyUI-Manager 工作流分享 API3 步接入 6 个平台的完整指南下一篇用 Go 与 gqlgen 构建 GraphQL 服务器Hackernews 克隆入门导读创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 open-slide 分步揭示原语：用 `＜Steps＞` / `＜Step＞` 掌控演讲节奏
【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载open-slide 是一个面向 Agent 的幻灯片框架页面上每个组件都渲染在固定 1920×1080 画布上。本文讲解其分步揭示Stepped reveals原语Steps/Step如何让一页内容按节拍逐条出现让观众跟随讲者节奏阅读而非提前扫完。你将掌握二者的导入与用法、四条核心规则直接子元素、即时渲染的非 Step 内容、多块组合顺序、入场方向决定初始状态、duration参数与动画细节以及何时使用、何时避免的实战判断并能在apps/demo/slides/build-on-reveal/中找到完整可运行的示例。一、Steps/Step是什么分步揭示的含义是一次只揭晓一页内容中的一个节拍而不是一开始就展示全部。实现上把需要延迟展示的部分包进Step把这一组Step再包进Steps。键盘上每按一次→就揭开下一个Step最后一个Step揭开后再按→才前进到下一页。←则把最后一次揭示剥回去逐步回退。典型用途是分阶段引导注意力——先展示铺垫框架再展示后果最后是转折让观众以讲者的语速阅读而不是提前读到结尾。基本用法如下import { Step, Steps } from open-slide/core; Steps Stepdiv style{BULLET_ROW}An audience reads faster than a presenter speaks./div/Step Stepdiv style{BULLET_ROW}Showing every bullet at once invites pre-reading./div/Step Stepdiv style{BULLET_ROW}Revealing in time stages attention./div/Step /Steps在仓库中apps/demo/slides/build-on-reveal/index.tsx就是官方提供的完整分步示例演示工作区随项目一同发布。写作分步页面之前建议先通读这份示例即使不读下面给出的规则与代码片段也已足够。二、四条核心规则规则一Step必须是Steps的直接子元素一个Step如果嵌套得更深或者根本没有Steps父元素它会完整渲染、什么都不延迟。这是最容易踩的坑代码看起来没错但揭示功能悄悄失效。原因可以追溯到源码packages/core/src/app/lib/step-context.tsx中的Steps组件通过Children.toArray(children)做扁平化并且只对isValidElement(child) child.type Step的元素注入_revealed标记其余子元素原样透传。规则二非Step子元素立即渲染放进Steps里的普通元素如大标题或开场段落会从第一帧就显示只有Step块会等待。这就是标题常驻、正文分步headline always, body in turn模式Steps h2Not everything has to wait./h2{/* visible immediately */} SteppFirst, set the stage…/p/Step SteppThen, layer the consequence…/p/Step /Steps上述模式的真实演示见apps/demo/slides/build-on-reveal/index.tsx中的Mixed页面大标题与引导段非 Step立即可见三个Step段落则等待每次按键揭示。规则三多个Steps块按文档顺序组合同一页可以出现多个Steps块它们按文档顺序依次构建第一个块的所有步骤全部揭示完第二个块才开始←则按相反顺序回退。这个模式适合先左后右构建的双栏布局每栏各拥有自己的Stepsdiv style{COL}StepsStep…/StepStep…/Step/Steps/div{/* finishes first */} div style{COL}StepsStep…/StepStep…/Step/Steps/div{/* then this */}源码层面StepHost同样位于packages/core/src/app/lib/step-context.tsx维护一个按注册顺序排列的控制器列表advance()从前到后遍历retreat()从后向前遍历第一个有动作可做的控制器被调用。这正是左栏先完成、右栏后开始的底层保证。build-on-reveal示例的Columns页面即为双栏双块的标准实现。规则四入场方向决定起始状态——同样内容两种节奏这是分步揭示与简单显示/隐藏最本质的区别。源码中EntryDirection类型为forward | backward | jump定义于step-context.tsx向前进入从前一页按→进入页面从空开始逐步构建从后一页回退进入或通过概览网格直接跳入页面完全呈现每个步骤都已揭示。player.tsx中handleIndexChange根据delta同步设置entryDirectiondelta 1 → forwarddelta -1 → backward其余jump并保证在下一页的Steps挂载读取前同步落定。Steps组件的初始状态也由此决定host?.entryDirection forward ? 0 : stepCount向前为 0其他方向为完整步骤数。因此设计页面时必须让它在两种方式下都成立缩略图或概览跳入时应看起来完整而非空白。三、动画细节duration与减少动态偏好Step默认在duration毫秒内淡入默认值为 180ms。需要调整时传入Step duration{...}Step duration{300}…/Step底层实现step-context.tsx的Step组件是一个包裹div未揭示时opacity: 0且visibility: hidden揭示时opacity: 1过渡曲线为cubic-bezier(0, 0, 0.2, 1)Material Design 标准强调曲线。它还调用usePrefersReducedMotion()见packages/core/src/app/lib/use-prefers-reduced-motion.ts当用户系统开启prefers-reduced-motion: reduce时动画自动坍缩为瞬时切换ms 0。不需要你写降级方案。组件同时通过data-osd-step属性暴露状态revealed/pending这也是框架内部与测试定位步骤状态的标准挂钩。四、什么时候该用分步揭示当想法的顺序本身是重点时使用收尾在最后一项的清单、层层铺垫的结论、before/after 对比。注意不要条件反射地把每页内容都包进Step——需要一眼看懂的页面主视觉标题、单条引语、整页图表整体呈现反而更有力。从源码看分步揭示是一个纯时机timing机制而非装饰packages/core/src/app/lib/export-html.ts在导出静态 HTML 时会把每个[data-osd-step]元素全部写进标记并用内联脚本按方向重建揭示状态向前进入从shown 0起逐步递增跳入/回退则shown 步骤总数全部揭示。这与交互层的行为严格一致说明完整呈现 vs 逐步构建是框架级的设计约定。五、反模式❌条件反射地给每页内容都包Step。分步揭示服务于顺序即重点的内容一页能一眼看懂的内容主视觉标题、单条引语、图表整体展示更强。❌Step不是Steps的直接子元素嵌套更深或没有Steps父元素。它会完整渲染、什么都不延迟——揭示静默失效。六、从测试用例看运行时行为框架的 Playwright 端到端测试直接验证了上述规则可作为行为基准packages/core/e2e/tests/present.spec.ts的 steps reveal one by one before the page advances进入steps示例页后按→先翻到第二页此时两个[data-osd-steppending]全部未揭示连续按→依次变为 1 个、2 个revealed再按→才前进到第三页按←回退到第二页时两个步骤已是完全揭示状态印证回退进入 完整呈现。packages/core/e2e/tests/viewer.spec.ts的 steps render fully revealed in the editor编辑器画布中步骤始终完整揭示2 个revealed、0 个pending即编辑态等同于跳入的完整呈现视角。七、在完整工作流中的位置packages/core/skills/slide-authoring/SKILL.md将Steps/Step列为页面的基础原语之一并要求使用前先读references/steps.md即本文对应的参考文档。撰写分步页面时的相关约束还包括页面固定 1920×1080 画布、内容必须落在 100–160px 内边距内、Step的直接子元素要求同时出现在自检清单中。如果项目里存在slides/build-on-reveal/demo 工作区随项目附带它就是分步页面的权威示例对应apps/demo/slides/build-on-reveal/index.tsx。一句话总结分步揭示是用Steps包裹一组直接子Step让每次→揭开一个节拍标题常驻、正文分步多块按文档顺序组合入场方向决定起始状态——而这一切的目的是让揭示成为时机timing而不是装饰。赞分享【免费下载链接】open-slideA slide framework built for agents.项目地址https://gitcode.com/gh_mirrors/op/open-slide点击查看免费下载相关推荐终极Marp演讲现场控制指南掌握演示节奏的10个高级功能终极Marp演讲现场控制指南掌握演示节奏的10个高级功能 Marp是一个使用纯Markdown编写演示文稿的生态系统让你能够轻松创建专业的幻灯片并掌控演讲节前端文档30实用工具集PowerToys如何让你的Windows效率提升300%30实用工具集PowerToys如何让你的Windows效率提升300% Microsoft PowerToys是一套免费开源的Windows生产力工具集桌面应用开发工具form-builder组件全解析从Input到Upload的17种表单元素实战教程form builder组件全解析从Input到Upload的17种表单元素实战教程 form builder是一款好用的PHP表单生成器能快速生成现代化的后端低代码上一篇ComfyUI-Manager 工作流分享 API3 步接入 6 个平台的完整指南下一篇用 Go 与 gqlgen 构建 GraphQL 服务器Hackernews 克隆入门导读创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考