用途:本技能是叠加在 tour-guide 基础组件之上的样式层,用于把 Supademo 风格的产品导览外观落到项目中。它不包含交互机制(测量、滚动、步骤、分支、计时逻辑属于 tour-guide 技能),也不硬编码 Supademo 官方品牌色值。
主要能力:单一品牌令牌 --tour-brand 驱动全部配色;闪烁热点(约 12px 圆点加 animate-ping 扩散环,置于目标元素中心,外环透明度约 25%~30%);提示卡(圆角约 12px、柔和阴影、固定 1rem 字号、小箭头指向目标、S/M/L 三档宽度约 200/280/360px);控制条(左侧步骤计数、右侧返回/下一步按钮,按钮文案可自定义);顶部 2~3px 进度条;自动播放计时条(卡片上沿 2px,默认每步 2.5 秒,悬停暂停);入场淡入加轻微上滑,步骤之间不做位移动画;每个热点的背景遮罩可选 noDim。
使用方式:先确认项目已引入 tour-guide 组件,再设定 --tour-brand 与主题令牌(brand、theme、showProgress、showNav、showStepCount 映射到 TOUR_THEME),然后套用配方生成热点、卡片、控制条、进度与计时条、过渡和遮罩样式。
限制:缺少 tour-guide 组件时无法使用,需先搭好基础组件;UX 机制需求转交 tour-guide;其他产品风格应另建 tour-guide-<名称> 技能。Supademo 官方文档未公布精确色值与像素,本配方为按设计语言换算的估计值。自动打开默认关闭;跳过勾选框表示跳过框架类步骤而非关闭导览,其持久化需用 localStorage 与 window.name 双层并包 try/catch。切换勾选应即时重新测量并跳到首个内容步骤;页面无独立步骤时关闭导览。其余细节资料未提供。