QiuYe UI
导航

Tour

产品引导组件：基于目标 selector 高亮页面元素并展示步骤 Popover，内置遮罩聚焦、Motion layoutId 迁移动画、进度显示、上一步/下一步/跳过与自动滚动定位。

tourguideonboardingpopoverspotlightmasklayoutIdmotionnavigation

快速预览

查看 Tour 组件的基本效果

Search workspace
Project health
Design
Build
Review

基本用法

使用 Tour 组件的基础示例

导入组件

1import { Tour } from "@/components/qiuye-ui/tour";
2import { Button } from "@/components/ui/button";
3import { useState } from "react";

使用组件

1const [open, setOpen] = useState(false);
2

3return (
4  <>
5    <Button onClick={() => setOpen(true)}>Start tour</Button>
6    <Tour
7      open={open}
8      onOpenChange={setOpen}
9      steps={[
10        {
11          target: "#sidebar",
12          title: "Navigation",
13          content: "Browse your projects here.",
14          placement: "right",
15        },
16        {
17          target: "#search",
18          title: "Search",
19          content: "Find anything in your workspace.",
20          placement: "bottom",
21        },
22      ]}
23    />
24  </>
25);

组件演示

查看组件的各种使用方式和效果

Product workspace

A compact dashboard mock for Tour interactions.

Search projects or reports
Active projects
8 live
Design system
Billing flow
Mobile QA
Docs
Insights
Velocity+18%
Open issues24
Review time2.1d

Release timeline

A long workspace view with checkpoints across the release cycle.

Planning
Approved

Scope, owners, and milestones are aligned for the next release.

2Development
3Quality review
4Go-to-market
Launch readiness
Final gate

Confirm production health, support coverage, and launch communications before release.