新功能分步引导

新功能上线后，用户面对陌生界面该怎么办？

当团队上线新的看板、工具箱入口或关键交互路径时，用户首次访问时往往不知道该点哪里。常见的做法是产品内嵌静态帮助文档，但这种方式跳出流程、学习成本高；或者用一次性弹窗，但信息密度低、容易错过关键步骤。更糟的是，有些方案每次刷新都强制弹出引导，打断操作流，用户很快产生抵触情绪。

这个技能要解决的就是：如何用分步引导（Step-by-Step Tour）的方式，让用户在真实界面里完成关键操作，同时避免重复打扰。

它是怎么工作的

核心思路是：选择器 + 文案 → Tour.addStep() → start()。每一步绑定一个稳定的 CSS 选择器（如 .dashboard-toolbar），并配置对应的说明文案。当满足触发条件时，启动引导流程，高亮当前步骤对应的元素，用户点击下一步后逐步展示。

关键机制包括：

• 仅首次或版本变更时启动：引导只在用户第一次访问，或应用版本更新后触发，避免每次刷新都弹窗。
• 完成状态持久化：用户完成或取消引导后，将结果写入 localStorage，后续访问不再强制弹出。
• 依赖 shepherd.js：底层使用 Shepherd.js 作为引导引擎，需要引入其官方 CSS 样式。
• 稳定选择器约束：每一步必须绑定一个稳定的 attachTo.element 选择器；如果元素不存在，则跳过该步或取消整个引导，避免空白遮罩。

推荐实现路径：

1. 安装 shepherd.js 并引入 CSS。
2. 在首屏组件 onMounted 时，根据条件调用 startFeatureTour()。
3. 自测三步流程：能否点完、刷新后是否不再弹出。

适用边界与注意点

适合场景：

• 上线新看板、工具箱入口时做首次引导。
• Demo 演示时快速展示“三步上手”流程。
• 与 Driver.js 等其他引导库分场景使用，不混用同一套步骤配置。

不适用或需谨慎：

• 不要将此方案与 Driver.js 混用同一套步骤配置却不区分库，否则可能出现样式冲突或逻辑混乱。
• 选择器失效时不要强制 start()，否则用户会看到空白遮罩，体验反而下降。
• 不做远程配置中心下发导览脚本，所有逻辑本地维护，保证可控性。

这个技能适合需要快速上线分步引导、但又不想每次刷新都打断用户的场景。如果你需要更轻量的方案或对样式有更高定制需求，可能需要评估其他库。