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

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

const starName = "huangyanpei";

const exhibitSrcMap: Record<1 | 2 | 3, string> = {
  1: "huangyanpei/place3/5_005",
  2: "huangyanpei/place3/5_006",
  3: "huangyanpei/place3/5_007",
};

const HuangyanpeiPlace3 = () => {
  const navigate = useNavigate();
  const { moduleName } = useParams<{
    moduleName: string;
  }>();

  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
    null
  );
  const [visited, setVisited] = useState<Set<number>>(new Set());

  // 光标3的引导对话状态
  const [guide3Visible, setGuide3Visible] = useState(false);
  const [guide3Step, setGuide3Step] = useState(0);
  // 光标3的题目显示状态
  const [showQuiz3, setShowQuiz3] = useState(false);
  // 成功提示状态
  const [showSuccessAlert, setShowSuccessAlert] = useState(false);

  // 光标1、2的引导对话状态（在两者都浏览后显示）
  const [guide12Visible, setGuide12Visible] = useState(false);
  const [guide12Shown, setGuide12Shown] = useState(false);

  const handleOpenExhibit = (index: 1 | 2 | 3) => {
    if (index === 3) {
      // 光标3：点击时同时打开展品和引导对话
      setActiveExhibitId(3);
      setGuide3Visible(true);
      setGuide3Step(0);
    } else {
      // 光标1、2：直接打开
      setActiveExhibitId(index);
    }
  };

  // 监听光标3的引导对话步骤变化
  const handleGuide3StepChange = (step: number) => {
    setGuide3Step(step);
  };

  // 监听光标3的引导对话关闭
  const handleGuide3VisibleChange = (visible: boolean) => {
    setGuide3Visible(visible);
  };

  // 处理光标3题目提交
  const handleQuiz3Submit = (value: string, isCorrect: boolean) => {
    if (isCorrect) {
      setShowQuiz3(false);
      setShowSuccessAlert(true);
    }
  };

  // 监听visited变化，当光标1、2都浏览后显示引导对话
  useEffect(() => {
    if (visited.has(1) && visited.has(2) && !guide12Shown) {
      setGuide12Shown(true);
      setGuide12Visible(true);
    }
  }, [visited, guide12Shown]);

  const progressCount = visited.size;
  const total = 3;
  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(`huangyanpei/place3/5_001`),
      }}
    >
      <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 left-32 top-105"
        onClick={() => handleOpenExhibit(1)}
        read={visited.has(1)}
      />
      {/* 光标2 */}
      <Cursor
        className="absolute left-172 top-90"
        onClick={() => handleOpenExhibit(2)}
        read={visited.has(2)}
      />
      {/* 光标3 */}
      <Cursor
        className="absolute right-92 top-108"
        onClick={() => handleOpenExhibit(3)}
        read={visited.has(3)}
      />

      {completed && (
        <Image
          className="absolute bottom-0 right-4"
          src={getStaticImage("components/place/继续前进")}
          button
          onClick={() => {
            navigate(`/${moduleName}/${starName}/place4`);
          }}
        />
      )}

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

      {/* 光标3的引导对话 */}
      <GuideSteps
        visible={guide3Visible}
        onVisibleChange={handleGuide3VisibleChange}
        currentStep={guide3Step}
        onStepChange={handleGuide3StepChange}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          这所川沙小学堂就是黄炎培先生“教育救国”的第一个试验田吧？我们现在学习的课程有专业课、实习实训课都提倡技能培养，当年他是不是也很注重动手能力呀？
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          太有共鸣啦！1903年，24岁的黄炎培先生和好友张志鹤等人一起，把原来的“观澜书院”改成了“川沙小学堂”，他自己当校长。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          这所学校的课程表可太有突破性了——破天荒出现了算术、格致（也就是咱们现在说的自然科学）、体操、乡土调查这些新学科，还实行“半天读书、半天做手工”的模式，特别注重实践。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          当时办学经费特别紧张，没钱买课本，他就带头刻蜡版油印；缺体育器材，就带着学生用毛竹做单杠，完全是凭着一腔热血办学呢！这也是中国最早的“半日授课、半日实习”雏形。
        </GuideStepsItem>
      </GuideSteps>

      {/* 光标3的题目 */}
      <SingleChoiceQuizPanel
        visible={showQuiz3}
        title='【单选】黄炎培1903年把川沙"观澜书院"改成"川沙小学堂"后,课程表首次出现下列哪组学科?'
        options={[
          { value: "A", label: "A. 经学、策论、八股文" },
          {
            value: "B",
            label: "B. 算术、格致、体操、乡土调查",
          },
          { value: "C", label: "C. 外语、逻辑、演讲、社交" },
          { value: "D", label: "D. 绘画、声乐、舞蹈、戏剧" },
        ]}
        correctAnswer="B"
        errorMessage="1903年，黄炎培将“观澜书院”改制为“川沙小学堂”，自任校长，率先打破传统经学模式，在课程表中首次列入算术、格致（近代自然科学）、体操和乡土调查四门新学科，并实行“半日授课、半日实习”的教学方式，开创了近代中国小学融入科学、体育与实践教育的新风。"
        onSubmit={handleQuiz3Submit}
      />

      {/* 成功提示 */}
      <SuccessAlert
        visible={showSuccessAlert}
        onContinue={() => {
          setShowSuccessAlert(false);
          setVisited((prev) => {
            const next = new Set(prev);
            next.add(3);
            return next;
          });
        }}
        onClose={() => {
          setShowSuccessAlert(false);
        }}
      />

      {/* 光标1、2的引导对话 */}
      <GuideSteps
        visible={guide12Visible}
        onVisibleChange={setGuide12Visible}
        showMask={true}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          原来当年还有专门的女子学校呀?在那个年代,女孩子能上学是不是特别不容易?后来的浦东中学也是黄炎培先生办的吗?
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          你观察得特别仔细！川沙小学堂开学没多久，黄炎培就和堂兄黄洪培、堂嫂陆开群一起，策划创建了“开群女学”——这所学校专门面向社会招收女学生，还用全力支持办学、腾出自家住房的陆开群名字命名。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          这所学校直接开创了浦东地区女子教育的先河，让很多女孩子有了读书的机会。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          到了1906年，上海营造业宗师杨斯盛捐资30万两白银，在浦东六里桥购地40多亩创办浦东中学，特意邀请黄炎培担任首任校长。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          校舍是黄炎培亲自设计的，杨斯盛先生亲自监工，建成后有能容纳千人的大礼堂和两座教学楼，是近代上海第一所完全中学呢！
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          1912年，黄炎培担任江苏省署教育司司长，任职期间一直倡导实用主义教育，强调教育要和生产劳动结合起来，这也为后来的职业教育打下了坚实基础。
        </GuideStepsItem>
      </GuideSteps>
    </div>
  );
};

export default HuangyanpeiPlace3;