shanghai-residences/src/pages/luxun/place/place2.tsx

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

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

// 展品 ID 与资源路径映射
const exhibitSrcMap: Record<1 | 2 | 3, string> = {
  1: "luxun/place2/展品3",
  2: "luxun/place2/展品4",
  3: "luxun/place2/展品5",
};

const LuxunPlace2 = () => {
  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());

  // 光标1的引导对话状态
  const [guide1Visible, setGuide1Visible] = useState(false);
  const [guide1Step, setGuide1Step] = useState(0);

  // 光标2的引导对话状态
  const [guide2Visible, setGuide2Visible] = useState(false);
  const [guide2Step, setGuide2Step] = useState(0);

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

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

  // 监听光标1的引导对话关闭
  const handleGuide1VisibleChange = (visible: boolean) => {
    setGuide1Visible(visible);
  };

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

  // 监听光标2的引导对话关闭
  const handleGuide2VisibleChange = (visible: boolean) => {
    setGuide2Visible(visible);
  };

  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(`luxun/place2/背景`),
      }}
    >
      <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}/place1`);
          }
        }}
      />

      {/* 光标1 */}
      <Cursor
        className="absolute right-218 bottom-104"
        size={0.4}
        onClick={() => handleOpenExhibit(1)}
        read={visited.has(1)}
      />
      {/* 光标2 */}
      <Cursor
        className="absolute right-225 bottom-95"
        size={0.4}
        onClick={() => handleOpenExhibit(2)}
        read={visited.has(2)}
      />
      {/* 光标3 */}
      <Cursor
        className="absolute right-232 bottom-84"
        size={0.4}
        onClick={() => handleOpenExhibit(3)}
        read={visited.has(3)}
      />

      {completed && (
        <Image
          className="absolute bottom-10 left-42"
          src={getStaticImage("luxun/place2/前进")}
          button
          onClick={() => {
            navigate(`/${moduleName}/${starName}/place3`);
          }}
        />
      )}

      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        description={
          activeExhibitId === 3
            ? '这篇《中国人失掉自信力了吗》收录于《且介亭杂文》中，它将"匕首与投枪"的特质发挥到极致。当时国民党当局接连丧权辱国，一些文人却散布"中国人失掉自信力"的悲观论调，迎合反动派的卖国行径。鲁迅直接驳斥这种谬论，一针见血指出："我们从古以来，就有埋头苦干的人，有拼命硬干的人，有为民请命的人，有舍身求法的人……这就是中国的脊梁。"文字如利刃般戳破虚假论调，揭露了反动派掩盖自身无能、麻痹民众的阴谋，唤醒国人的民族自信，尽显战斗文字的锋芒与力量。'
            : undefined
        }
        onClose={() => {
          if (activeExhibitId !== null) {
            setVisited((prev) => {
              const next = new Set(prev);
              next.add(activeExhibitId);
              return next;
            });
          }
          setActiveExhibitId(null);
        }}
      />

      {/* 光标1的引导对话 */}
      <GuideSteps
        visible={guide1Visible}
        onVisibleChange={handleGuide1VisibleChange}
        currentStep={guide1Step}
        onStepChange={handleGuide1StepChange}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          小沪,这里的《且介亭杂文》就是鲁迅先生在大陆新村9号创作的吧,有人将先生的杂文评价为"匕首与投枪",《且介亭杂文》中有具体体现吗?
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          当然有!20世纪30年代,国民党"文化围剿"愈烈,进步思想遭严控,鲁迅在大陆新村9号创作出《且介亭杂文》等集子。这些杂文聚焦文化乱象与社会沉疴,篇幅精炼却直击要害,像匕首般刺穿虚伪表象,似投枪般直戳问题核心...
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          用锋利文字与黑暗势力对峙,成为那个时代最具战斗力的思想武器,"匕首与投枪"的赞誉恰是其战斗性的生动写照。
        </GuideStepsItem>
      </GuideSteps>

      {/* 光标2的引导对话 */}
      <GuideSteps
        visible={guide2Visible}
        onVisibleChange={handleGuide2VisibleChange}
        currentStep={guide2Step}
        onStepChange={handleGuide2StepChange}
        showMask={false}
        highlightSelectors={[]}
        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          那《南腔北调集》这个名字又有什么深意呢?
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          这是鲁迅的自嘲,他曾说"我不会说绵软的苏白,不会打响亮的京腔,不入调,不入流",所以戏称自己的文章是"南腔北调"。这本书里的《〈守常全集》题记》,赞美了李大钊同志,说"他的遗文却将永驻,因为这是先驱者的遗产,革命史上的丰碑。"
        </GuideStepsItem>
      </GuideSteps>
    </div>
  );
};

export default LuxunPlace2;