Tour
TsgcHTMLComponent_Tour：用于新用户引导的产品导览。它用聚光灯和卡片逐步突出页面上的元素，可在首次访问时自动启动，也可通过按钮或由服务器启动，并通过服务器事件报告每个用户的进度。适用于 Delphi、C++ Builder 和 .NET。
TsgcHTMLComponent_Tour：用于新用户引导的产品导览。它用聚光灯和卡片逐步突出页面上的元素，可在首次访问时自动启动，也可通过按钮或由服务器启动，并通过服务器事件报告每个用户的进度。适用于 Delphi、C++ Builder 和 .NET。
添加 步骤，让每一步指向一个元素，然后设置 AutoStart 或添加一个开始按钮。OnStepChange、OnSkip 和 OnComplete 会告诉服务器每个用户进行到了哪里。
TsgcHTMLComponent_Tour，每一步在 步骤 中对应一个 TsgcHTMLTourStep
一个以 JSON 保存配置的隐藏元素和导览脚本，样式内嵌，没有外部文件，也不需要 CDN
Delphi, C++ Builder, .NET
使用 AutoStart 时，浏览器第一次打开页面时导览会自动启动，开始按钮则可随时重新播放。分配了 HTMXEngine 后，浏览器会提交带有处理程序的事件。
uses
sgcHTML_Session, sgcHTML_Component_Tour;
// 只创建一次：页面渲染之后它仍响应服务器事件
oTour := TsgcHTMLComponent_Tour.Create(Self);
oTour.Name := 'onboarding';
oTour.AutoStart := True;
oTour.HTMXEngine := HTMXEngine1;
oTour.OnComplete := TourComplete;
oTour.OnSkip := TourSkip;
with oTour.Steps.Add do
begin
Title := 'Welcome'; // 没有目标：居中的卡片
Content := '<p>Take a minute to see what is where.</p>';
end;
with oTour.Steps.Add do
begin
Target := '#sidebar';
Title := 'Navigation';
Content := '<p>Every module of the app is here.</p>';
Placement := trpRight;
end;
sHtml := oTour.HTML + oTour.GetStartButtonHTML('Restart tour');
procedure TForm1.TourComplete(Sender: TObject; var aResponse: string);
var
oSession: TsgcHTMLSession;
begin
oSession := sgcHTMLRequestSession; // 本次请求的会话
if oSession <> nil then
SaveOnboardingDone(oSession.UserID); // 您自己的代码
end;
procedure TForm1.TourSkip(Sender: TObject; aStep: Integer; var aResponse: string);
var
oSession: TsgcHTMLSession;
begin
oSession := sgcHTMLRequestSession;
if oSession <> nil then
SaveOnboardingSkipped(oSession.UserID, aStep);
end;@* 每个步骤的内容就是其卡片的 HTML *@
<sgc-tour name="onboarding" auto-start="true" on-complete="Model.TourDone" on-skip="Model.TourSkipped">
<sgc-tour-step title="Welcome"><p>Take a minute to see what is where.</p></sgc-tour-step>
<sgc-tour-step target="#sidebar" title="Navigation" placement="right">
<p>Every module of the app is here.</p>
</sgc-tour-step>
<sgc-tour-step target="#btnSettings" title="Settings" image="/img/settings.png">
<p>Change the theme and your profile here.</p>
</sgc-tour-step>
</sgc-tour>using esegece.sgcWebSockets;
var tour = new TsgcHTMLComponent_Tour { Name = "onboarding" };
tour.AutoStart = true;
tour.HTMXEngine = htmxEngine;
tour.OnComplete += TourDone;
tour.OnSkip += TourSkipped;
var step = tour.Steps.Add();
step.Title = "Welcome";
step.Content = "<p>Take a minute to see what is where.</p>";
step = tour.Steps.Add();
step.Target = "#sidebar";
step.Title = "Navigation";
step.Content = "<p>Every module of the app is here.</p>";
step.Placement = TsgcHTMLTourPlacement.trpRight;
string html = tour.HTML + tour.GetStartButtonHTML("Restart tour");
public void TourDone(object sender, ref string response)
{
SaveOnboardingDone(User.Identity?.Name);
}
public void TourSkipped(object sender, int step, ref string response)
{
SaveOnboardingSkipped(User.Identity?.Name, step);
}向新用户展示什么在哪里的首次体验，以及在您的服务器上记录每位用户进行到了哪里。
每一步都用暗化背景中的聚光灯镂空来突出一个元素，并在旁边显示一张卡片，其中有标题、HTML 内容、可选的图像、带进度点的步骤计数，以及“上一步”“下一步”“跳过导览”和“完成”按钮。没有目标的步骤会把卡片居中显示在页面上。
首次访问时自动启动（AutoStart）、通过按钮（GetStartButtonHTML，或任意元素上的 data-sgc-tour-start）、通过您自己的脚本（GetStartScript），或由服务器为某一位用户启动（GetStartHTML）。
“完成”或“跳过导览”会以 StorageKey 为键保存在浏览器的 localStorage 中，默认是 sgc-tour:<Name>，AutoStart 在该浏览器中不会再次启动导览。更改 StorageKey 可以向所有人展示修订后的导览。
目标缺失或被隐藏的步骤，例如用户没有的角色的面板，在两个方向上都会被跳过，计数只统计可以显示的步骤。卡片始终位于视口之内，在窄屏幕上会回退到下方、上方或居中。
卡片是以其标题命名的对话框。步骤显示时，焦点移到“下一步”，导览结束时返回原处，在模态卡片中 Tab 会在其按钮之间循环。方向键在步骤之间移动，Esc 退出，polite 实时区域会播报“第 n 步，共 m 步：标题”。
按钮和步骤文本提供库的 17 种语言。从右到左的页面会镜像位置和方向键，卡片会复制页面的 data-bs-theme，因此会跟随深色主题。样式在导览启动时添加，结束时移除。
您最常用到的成员。
每一步都有 Target（CSS 选择器，取第一个匹配项）或 TargetComponent、纯文本的 Title、经 sgcHTMLSanitizeHTML 清理的 HTML Content、经过 sgcHTMLSanitizeURL 的 Image URL、Placement，以及它自己的 ShowBackdrop 和 ScrollIntoView。
ShowBackdrop、ShowProgress 和 ShowSkip 分别开关背景、带圆点的计数和“跳过导览”按钮。Padding（默认为 6）是目标周围的像素间距，AllowKeyboard 启用 Esc 和方向键，CloseOnBackdropClick 让点击背景时退出导览。
OnStepChange 在每次显示一个步骤时触发，OnSkip 在用户于结束前离开时触发并带有步骤索引，OnComplete 在用户于最后一步按下“完成”时触发。浏览器只提交带有处理程序的事件，步骤 之外的步骤索引会被拒绝。
处理程序在请求的线程上运行，sgcHTMLRequestSession 在该线程上提供会话和用户。如果返回的 HTML 元素标有 hx-swap-oob="true"，您在 aResponse 中返回的 HTML 就会被 htmx 换入。
分配 HTMXEngine，或设置 ActionURL 并从您自己的路由调用 DispatchComponentEvent('tour', Params, Response)。两者都没有时，导览在浏览器中运行，不提交任何内容。页面上有 htmx 时通过 htmx.ajax 提交，否则通过 XMLHttpRequest 并带上页面的 CSRF meta 标签提交。
GetStartHTML 返回一个片段，在接收它的浏览器中启动导览，可作为 htmx 响应，也可推送到某个连接。开始按钮、GetStartScript 和 GetStartHTML 会忽略浏览器中保存的条目。
window.sgcHTMLTour 提供 start(id[, step])、next、back、end、reset 和 active。每个函数都接受导览的 id，即 GetElementIdentifier 的值。reset 会移除保存的条目，因此 AutoStart 会再次运行导览。
在 Razor 视图中，<sgc-tour name="..."> Tag Helper 渲染导览，每一步对应一个 <sgc-tour-step> 子元素，其内容就是卡片的 HTML。首次渲染会为每个引擎和名称创建一个组件，并注册到 AddSgcHtml 的引擎，因此在页面渲染之后它仍会响应其服务器事件。
Demos\60.HTML\01.RunTime\29.Tour 是端口 8131 上的 sgc Cloud Console：带聚光灯的八步首次使用导览、同一页面上的第二个“新增内容”导览、工具栏按钮、统计卡片和表单字段上的工具提示，以及服务器按用户记录的引导漏斗。设计时、Lazarus 和 .NET 版本与之对应。