shanghai-residences/src/pages/chenyun/place/place3.tsx

import { useState } from "react";
import {
  ExhibitOverlay,
  Title,
  Image,
  Cursor,
  GuideSteps,
  GuideStepsItem,
  Video,
} from "@/components";
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";

// starName 固定为 chenyun
const starName = "chenyun";

// 展品 ID 与资源路径映射
const exhibitSrcMap: Record<1 | 2, string> = {
  1: "chenyun/place3/场景3展品1",
  2: "chenyun/place3/场景3展品2",
};
const ChenyunPlace3 = () => {
  const navigate = useNavigate();
  const { moduleName } = useParams<{
    moduleName: string;
  }>();

  const [visited, setVisited] = useState<Set<number>>(new Set());
  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
  const [videoVisible, setVideoVisible] = useState(false);
  // GuideSteps 显示状态
  const [guideVisible, setGuideVisible] = useState(false);
  // GuideSteps 当前步骤
  const [guideStep, setGuideStep] = useState(0);

  const handleOpenExhibit = (index: 1 | 2) => {
    if (index === 1) {
      // 展品1：点击时同时打开展品和引导对话，从第1步开始
      setActiveExhibitId(1);
      setGuideVisible(true);
      setGuideStep(0);
    } else {
      // 展品2：先播放视频，结束后再打开展品
      setVideoVisible(true);
    }
  };

  // 监听GuideSteps步骤变化，仅同步当前步骤
  const handleGuideStepChange = (step: number) => {
    setGuideStep(step);
  };

  const progressCount = visited.size;
  const total = 2;
  const completed = progressCount >= total;
  const subtitle = completed
    ? "探索该阶段相关资料(已完成)"
    : `探索该阶段相关资料(${progressCount}/${total})`;
  const subtitleClassName = completed
    ? "text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]"
    : undefined;
  return (
    <div
      className="w-full h-full bg-cover bg-center bg-no-repeat"
      style={{
        backgroundImage: getBackgroundImage(`chenyun/place3/场景3`),
      }}
    >
      {/* 标题  商务启航·投身革命*/}
      <Title
        title="商务启航·投身革命"
        subtitle={subtitle}
        subtitleClassName={subtitleClassName}
        className="absolute top-10 left-1/2 -translate-x-1/2"
      />

      {/* 返回上一章 */}
      <Image
        className="absolute right-5 top-5"
        src={getStaticImage("components/离开")}
        button
        onClick={() => {
          if (moduleName && starName) {
            navigate(`/${moduleName}/${starName}/place2`);
          }
        }}
      />

      {/* 展品1 */}
      <Cursor
        className="absolute right-200 bottom-75"
        onClick={() => handleOpenExhibit(1)}
        read={visited.has(1)}
      />
      {/* 展品2 */}
      <Cursor
        className="absolute right-130 bottom-75"
        onClick={() => handleOpenExhibit(2)}
        read={visited.has(2)}
      />

      {/* 继续前进 - 仅在完成所有展品后显示 */}
      {completed && (
        <Image
          className="absolute bottom-0 right-0"
          src={getStaticImage("chenyun/place3/继续前进3")}
          button
          onClick={() => {
            navigate(`/${moduleName}/${starName}/place4`);
          }}
        />
      )}

      {/* 展品2视频播放遮罩（全屏） */}
      {videoVisible && (
        <div className="fixed inset-0 z-[11001] bg-black">
          <Video
            src={getPublicPath("video/chenyun/chenyun_04.mp4")}
            autoPlay
            playsInline
            showSkipButton
            controls={false}
            onEnded={() => {
              setVideoVisible(false);
              setVisited((p) => new Set(p).add(2));
            }}
          />
        </div>
      )}

      {/* 遮罩层 */}
      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        onClose={() => {
          if (activeExhibitId !== null) {
            setVisited((prev) => {
              const next = new Set(prev);
              next.add(activeExhibitId);
              return next;
            });
          }
          setActiveExhibitId(null);
        }}
      />

      {/* 展品1的引导对话 */}
      <GuideSteps
        visible={guideVisible}
        onVisibleChange={setGuideVisible}
        currentStep={guideStep}
        onStepChange={handleGuideStepChange}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          陈云14岁就去了上海商务印书馆当学徒，他主要负责哪些工作呢？
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          从颜安小学毕业后，陈云进入了商务印书馆当学徒，开始在柜台接待顾客，打珠算、写信封、练包装、理货物、修文具。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          陈云的珠算能力在商务印书馆工作期间有了很大提高。由于工作认真负责，三年的学徒期，陈云提前两年就破格到商务印书馆虹口分店（现为1925书局）当店员。
        </GuideStepsItem>
      </GuideSteps>
    </div>
  );
};

export default ChenyunPlace3;