背景

在频繁上线的 B 端项目中，往往难以通知到用户，这一版本究竟上线了哪一些新功能，因此需要功能引导。

目标

经过新功能引导系统，用户可以清晰的知道上线了哪些新功能，并且会简单使用。

设计

分类

  1. 日志类（版本号，版本更新日志等。不在此篇文章涉及范围之类）
  2. 入口类
    1. 组件级别：Tag 引导，Popover 引导
    2. 页面级别：旧页面跳转引导（独立做，视为页面生命周期功能）

  3. 步骤类

    1. 步骤引导（可以视为：有顺序的 Popover 引导）

      配置

      应该通过配置文件的方式来实现，方便维护（新增，修改，删除）。 ```typescript type GuideConfig = { // 当前引导的 key guideKey: string // 引导类型 type: ‘tag’ | ‘popover’ | ‘steps’ | ‘step’ // 被引导的组件的 key componentKey?: string // tag 配置 tagContent?: string tagColor?: string // popover 配置 popoverContent?: string // steps 配置 steps?: Array<{ // 单一步骤的组件 key componentKey: string // 单一步骤的内容 stepContent: string }>

    // 过期时间 expireTime: string // 过期版本 expireVersion: string // 点击过期 expireClick: boolean } ```

    过期机制

    要考虑 3 种过期机制：

  4. 时间过期：超过某个时间后过期。

  5. 版本过期：超过某个版本后过期。
  6. 点击过期：用户点击后过期（目前只考虑点击 1 次）。

任意一种过期，视为引导过期。

回看机制

用户往往有这样的一个操作习惯：看到引导后一直点击下一步，并为仔细看引导内容。所以要提供一种回看机制能让用户重新看一次引导。

删除机制

删除和过期、回看的联系比较紧密。有一些重要的功能引导（例如一个完整工作流的引导）往往需要回看，那么就不应该删除；有一些不重要的、实效性的功能引导（例如一个列表中新增了一个字段）就不太需要回看，一段时间后应该从代码种删除。

跨页机制

在步骤引导中，往往涉及跨页面的操作，所以需要提供跨页的机制，要能保存用户当前的步骤。

实现

Tag 引导

Tag 引导实现起来比较简单，就是在对应的组件旁加一个 Tag 来标识这是一个新功能。常见的地方比如：菜单、按钮、卡片等。

Popover 引导

Popover 引导与 Tag 引导类似，只是在组件上增加一个 Popover。

但要注意的是，Popover 引导由于对页面影响较大，因此增加过期机制，包括：时间过期，版本过期，点击后过期。在下面单独说明。

旧页面跳转引导

这种引导往往适用于开发了新页面代替旧页面，实现起来也很简单，就是在新页面增加一行引导文字即可。

步骤引导

步骤引导相对而言是比较复杂的，要注意处理以下几个点：

  1. 步骤引导的简单方式是：通过一个 Popover 对某个组件进行说明
  2. 步骤应该是配置化的，方便维护
  3. 步骤可以是跨页面的
  4. 步骤引导需要模拟用户操作（点击，操作）
  5. 要记录用户是否完成了引导
  6. 要记录用户当前到了第几步
  1. // 步骤引导配置
  2. type StepGuideConfig = Array<{
  3.   // 所在的页面
  4.     page: string
  5.   // 所在的组件 key
  6.   componentKey: string
  7.   // 引导信息
  8.   guide: string
  9.   // 点击下一步的回调
  10.   onNext: () => void
  11. }>