设计和实现 React 应用程序的 Ant Design 全球应用之旅

import react, { useref, usestate } from 'react';
import { ellipsisoutlined } from '@ant-design/icons';
import { button, divider, space, tour } from 'antd';

const app = () => {
  const ref1 = useref(null);
  const ref2 = useref(null);
  const ref3 = useref(null);

  const [open, setopen] = usestate(false);

  const steps = [
    { title: 'upload file', description: 'put your files here.', target: () => ref1.current },
    { title: 'save', description: 'save your changes.', target: () => ref2.current },
    { title: 'other actions', description: 'click to see other actions.', target: () => ref3.current },
  ];

  return (
    <>
      <button type="primary" onclick={() => setopen(true)}>begin tour</button>
      <divider />
      <space>
        <button ref={ref1}>upload</button>
        <button ref={ref2} type="primary">save</button>
        <button ref={ref3} icon={<ellipsisoutlined />} />
      </space>
      <tour open={open} onclose={() => setopen(false)} steps={steps} />
    </>
  );
};

export default app;

import { routerprovider } from "react-router-dom";
import approuter from "./routes";

export default function app() {
  return <routerprovider router={approuter} />;
}

export const route_names = {
  home: "/",
  about: "/about",
};

import applayout from "./applayout";
import { createbrowserrouter } from "react-router-dom";
import { route_names } from "./routenames";
import { home } from "./components/home";
import { about } from "./components/about";
import { result } from "antd";
import {tourprovider} from "./tourcontext";

const getitem = (label, key, icon, to, children = [], type) => {
  return !to
    ? {
      key,
      icon,
      children,
      label,
      type,
    }
    : {
      key,
      icon,
      to,
      label,
    };
};

const getroute = (path, element, params = null) => {
  return {
    path,
    element,
  };
};

const withapplayout = (component) => <tourprovider><applayout>{component}</applayout></tourprovider>;

export const routeitems = [
  getitem("home", "home", null, route_names.home),
  getitem("about", "about", null, route_names.about),
];

const approuter = createbrowserrouter([
  getroute(route_names.home, withapplayout(<home />)),
  getroute(route_names.about, withapplayout(<about />)),
  getroute(
    "*",
    <result
      status="404"
      title="404"
      subtitle="sorry, the page you visited does not exist."
    />
  ),
]);

export default approuter;

import react, { createcontext, usestate, useeffect } from "react";
import { usenavigate } from "react-router-dom";
import { app_tours } from "./steps";

const tourcontext = createcontext();

export const tourprovider = ({ children }) => {
  const [istouractive, settouractive] = usestate(false);
  const navigate = usenavigate();

  useeffect(() => {
    if (istouractive) {
      navigate("/home"); // redirect to the starting point of the tour
    }
  }, [istouractive, navigate]);

  return (
    <tourcontext.provider value={{ istouractive, settouractive, steps: app_tours }}>
      {children}
    </tourcontext.provider>
  );
};

export default tourcontext;

const gettourstepelement = (id) => document.queryselector(`[data-tour-id="${id}"]`);

export const app_tours = {
  "/home": [
    { title: "upload file", description: "put your files here.", target: () => gettourstepelement("upload") },
    { title: "save", description: "save your changes.", target: () => gettourstepelement("save") },
    { type: "navigate", to: "/about", title: "about us", description: "learn more about us." },
  ],
  "/about": [
    { title: "about us", description: "here's what we are all about.", target: () => gettourstepelement("about") },
  ],
};

import react, { usecontext } from "react";
import { tour } from "antd";
import { usenavigate } from "react-router-dom";
import tourcontext from "./tourcontext";

export const globaltour = () => {
  const { istouractive, steps, settouractive } = usecontext(tourcontext);
  const navigate = usenavigate();

  return (
    <tour
      open={istouractive}
      onclose={() => settouractive(false)}
      steps={steps}
      onchange={(current) => {
        const step = steps[current];
        if (step.type === "navigate") {
          navigate(step.to);
        }
      }}
    />
  );
};

import react, { usecontext } from "react";
import { layout, button } from "antd";
import { link } from "react-router-dom";
import tourcontext from "./tourcontext";
import { globaltour } from "./globaltour";

const { header, content, footer } = layout;

const applayout = ({ children }) => {
  const { settouractive } = usecontext(tourcontext);

  return (
    <layout>
      <header>
        <link to="/home">home</link>
        <link to="/about">about</link>
        <button onclick={() => settouractive(true)}>start tour</button>
      </header>
      <content>{children}</content>
      <footer>© {new date().getfullyear()} my app</footer>
      <globaltour />
    </layout>
  );
};

export default applayout;

import { button, space } from "antd";
import { ellipsisoutlined } from "@ant-design/icons";
export const home = () => {
  return (
    <>
      <button data-tour-id="upload" >upload</button>
      <button data-tour-id="save" type="primary">
        save
      </button>
      <button data-tour-id="actions" icon={<ellipsisoutlined />} />
    </>
  );
};

export const About = () => {
  return <div data-tour-id="about">About</div>;
};