Tour 引导

基本使用

适用于引导场景

tsx

import { useState } from "react";
import { Tour } from "@lite-code/pro-shineout";
import { Button, Divider } from "shineout";

const App = () => {
  const [openTour, setOpenTour] = useState(false);
  // 定义步骤
  const steps = [
    {
      target: "#page-title", // 对应 ID
      title: "欢迎使用",
      content: "这是系统的首页标题，你可以在这里看到当前模块名称。",
    },
    {
      target: ".action-btn", // 对应 Class
      title: "操作区域",
      content: "点击这里可以创建一个新的项目。",
    },
    {
      target: '[data-tour="settings"]', // 对应属性选择器
      title: "设置",
      content: "这里是个人设置中心。",
    },
  ];

  return (
    <div style={{ padding: 40 }}>
      {/* 目标元素 1 */}
      <h1 id="page-title">仪表盘 Dashboard</h1>

      <p>这是一些正文内容...</p>

      {/* 目标元素 2 */}
      <button className="action-btn" style={{ marginRight: 20 }}>
        新建项目
      </button>

      {/* 目标元素 3 */}
      <span data-tour="settings" style={{ float: "right" }}>
        ⚙️ 设置
      </span>

      <Divider />

      <Button type="primary" onClick={() => setOpenTour(true)}>
        开启引导
      </Button>

      {/* 引入组件 */}
      <Tour
        open={openTour}
        steps={steps}
        onClose={() => setOpenTour(false)}
        onFinish={() => console.log("引导完成！")}
      />
    </div>
  );
};

export default App;