Tour 漫游引导
Tour 用分步浮层把用户带过关键入口、局部强调和最终动作。Rue 的实现参考了成熟组件库的能力模型，但视觉仍然保持自己的 card、badge 和 button 语言，不直接照搬现成面板样式。
Tour 覆盖的不只是静态外观，也包含完整执行逻辑：围绕真实 DOM target 做高亮、自动定位、切步滚动、非模态展示，以及自定义 indicator 和底部 actions。
何时使用
- 需要把新用户逐步带过核心入口、关键按钮或首次配置流程。
- 需要在复杂页面里突出某个局部区域，并配合文案解释当前操作目的。
- 需要把产品说明、轻 onboarding 和最终业务动作串成一条连续体验。
# 基础引导
点击 Basic 后，从 Upload、Save 到更多操作依次弹出讲解。
代码演示
点击 Basic 按钮后弹出引导
Action Bar
点击 Basic 后，会依次讲解 Upload、Save 和更多操作。
# 欢迎页与非模态
展示没有 target 的中心步骤，以及 mask=false 时的轻量引导方式。
欢迎页 + 非模态引导
适合把版本亮点和页面主内容穿在同一条体验线上。
Release Note
Shipping cockpit for product operations
把素材、上线窗口、审批节点和回放笔记收进同一块工作区，不必在多个页面之间反复跳转。
Launches
12
Reviews
5
Pending
2
# Placement 与交互洞口
切换 top/right/bottom/left，并验证高亮区默认仍可继续触发目标元素。
Placement 与高亮区实验
切换浮层方向时，目标按钮仍然可以在洞口区域被点击。
# 自定义指示器与动作区
通过 primary 主题、cover、indicatorsRender 和 actionsRender 把引导做成更完整的任务流。
自定义 indicator 与 actions
这套写法更接近常见分步引导的心智，但视觉和布局还是 Rue 自己的。
Launch Summary
One surface for launch, approval and playback
用一个页面完成素材汇总、审批流转、上线窗口对齐和上线后的回放，不再分散在多个工具里。
Brief
完成背景与目标归纳
Review
跨团队确认视觉与文案
Ship
统一 CTA 与发布时间窗
# API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
steps | 引导步骤数组，每步可独立配置 target、placement、mask、cover 与按钮文案。 | TourStepProps[] | [] |
open / defaultOpen | 受控或非受控地打开引导浮层。 | boolean | false |
current / defaultCurrent | 受控或非受控地指定当前步骤索引。 | number | 0 |
placement | 全局浮层位置，单步可继续覆盖。 | TourPlacement | bottom |
mask / disabledInteraction | 控制遮罩是否启用，以及高亮区是否允许继续交互。 | boolean | { color?: string; style?: object } / boolean | true / false |
gap | 调整高亮区与目标的间距和圆角，适合按钮、卡片、输入框等不同密度场景。 | { offset?: number | [number, number]; radius?: number } | { offset: 8, radius: 18 } |
arrow / closeIcon / type | 配置箭头、关闭按钮与主视觉主题。 | boolean | object / any / default | primary | true / x / default |
indicatorsRender / actionsRender | 自定义底部步骤指示器与整体操作区。 | (current, total) => any / (originNode, info) => any | - |
scrollIntoViewOptions | 步骤切换时自动把目标滚动进视口，可关闭或传入原生配置。 | boolean | ScrollIntoViewOptions | { block: center, inline: center, behavior: smooth } |
onChange / onClose / onFinish / onOpenChange | 监听步骤变化、关闭、完成和打开状态变化。 | function | - |
classNames / styles | 按语义节点扩展 root、mask、spotlight、panel、footer、indicator 等样式。 | object | - |