如何在Blazor应用中创建页面引导游览及新功能教程提示框？

你说的这种新用户引导提示框，行业标准叫法是新手引导（Onboarding Tour）或功能指引tooltip，用这个关键词搜索能找到更精准的资源。下面提供两种落地方案：

一、自定义轻量引导组件（适合简单需求） #

如果不需要复杂的元素高亮、跨页引导，自己封装组件成本很低：

1. 创建引导提示组件 #

新建FeatureTourTooltip.razor文件：

<div class="tour-tooltip @(IsVisible ? "show" : "")" style="top:@TopPx; left:@LeftPx;">
    <div class="tour-content">
        <h4>@Title</h4>
        <p>@Message</p>
        <button class="tour-next-btn" @onclick="OnNext">@NextText</button>
        @if (AllowSkip)
        {
            <button class="tour-skip-btn" @onclick="OnSkip">跳过引导</button>
        }
    </div>
</div>

@code {
    [Parameter] public bool IsVisible { get; set; }
    [Parameter] public string Title { get; set; }
    [Parameter] public string Message { get; set; }
    [Parameter] public string NextText { get; set; } = "下一步";
    [Parameter] public bool AllowSkip { get; set; } = true;
    [Parameter] public int TopPx { get; set; }
    [Parameter] public int LeftPx { get; set; }
    [Parameter] public EventCallback OnNext { get; set; }
    [Parameter] public EventCallback OnSkip { get; set; }
}

2. 添加样式 #

在wwwroot/css/app.css中加入：

.tour-tooltip {
    position: fixed;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 16px;
    z-index: 9999;
    display: none;
}

.tour-tooltip.show {
    display: block;
}

.tour-content {
    min-width: 280px;
}

.tour-next-btn, .tour-skip-btn {
    margin-top: 12px;
    margin-right: 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.tour-next-btn {
    background: #007bff;
    color: white;
}

.tour-skip-btn {
    background: #f0f0f0;
    color: #333;
}

3. 实现多步骤引导流程 #

在目标页面（比如Index.razor）中使用，同时记录用户是否已看过引导：

@page "/"
@inject ILocalStorageService LocalStorage

<h1>欢迎使用我的Blazor应用</h1>
<button id="create-btn" class="btn-primary">创建新项目</button>
<button id="settings-btn" class="btn-secondary">进入设置</button>

<FeatureTourTooltip 
    IsVisible="@(CurrentStep != 0)"
    Title="@StepTitles[CurrentStep]"
    Message="@StepMessages[CurrentStep]"
    TopPx="@StepPositions[CurrentStep].Top"
    LeftPx="@StepPositions[CurrentStep].Left"
    OnNext="NextStep"
    OnSkip="EndTour" />

@code {
    private int CurrentStep { get; set; }

    private readonly Dictionary<int, string> StepTitles = new()
    {
        {1, "创建你的第一个项目"},
        {2, "个性化你的设置"}
    };

    private readonly Dictionary<int, string> StepMessages = new()
    {
        {1, "点击这个按钮快速创建首个项目，支持多种模板"},
        {2, "在这里可以调整应用主题、通知等个性化选项"}
    };

    private readonly Dictionary<int, (int Top, int Left)> StepPositions = new()
    {
        {1, (80, 100)},
        {2, (80, 250)}
    };

    protected override async Task OnInitializedAsync()
    {
        var hasSeenTour = await LocalStorage.GetItemAsync<bool>("hasSeenTour");
        CurrentStep = hasSeenTour ? 0 : 1;
    }

    private void NextStep()
    {
        CurrentStep = CurrentStep == 2 ? 0 : CurrentStep + 1;
        if (CurrentStep == 0) EndTour();
    }

    private async void EndTour()
    {
        CurrentStep = 0;
        await LocalStorage.SetItemAsync("hasSeenTour", true);
    }
}

注：Blazor Server环境可以用ISession替代ILocalStorageService来存储引导状态

二、使用现成组件库（适合复杂引导） #

如果需要元素高亮、自动定位、跨页面引导等进阶功能，直接用成熟组件库更高效：

• Blazor Tour：专注新手引导的轻量组件，支持步骤高亮、自定义样式、自动定位。
  核心用法示例：

  <TourComponent 
      Steps="@TourSteps"
      IsOpen="@ShowTour"
      OnFinish="() => ShowTour = false" />
  
  @code {
      private bool ShowTour = true;
      private List<TourStep> TourSteps = new()
      {
          new TourStep
          {
              TargetSelector = "#create-btn",
              Title = "创建项目",
              Description = "点击这里开始你的项目之旅",
              Placement = Placement.Bottom
          },
          new TourStep
          {
              TargetSelector = "#settings-btn",
              Title = "个性化设置",
              Description = "调整你的应用偏好",
              Placement = Placement.Right
          }
      };
  }
  

• Radzen Blazor：自带RadzenTour组件，适合已使用Radzen生态的项目。

• Syncfusion Blazor：提供功能完备的Tour组件，支持自定义模板与事件回调。

关键注意事项 #

• 引导步骤控制在3-5步以内，避免用户疲劳。
• 必须提供跳过选项，尊重用户选择。
• 用本地存储记录引导状态，避免重复展示。

内容的提问来源于stack exchange，提问作者Rod