feat:鲁迅添加引导

2026-01-08 18:41:24 +08:00
1 parent e8dc5d4b95
commit 3129e01257
@@ -1,4 +1,12 @@
-import { ExhibitOverlay, Image, Title, Cursor } from "@/components";
+import {
+  ExhibitOverlay,
+  Image,
+  Title,
+  Cursor,
+  StudyGuideModal,
+  GuideSteps,
+  GuideStepsItem,
+} from "@/components";
 import { useNavigate, useParams } from "react-router-dom";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useState } from "react";
@@ -19,13 +27,57 @@ const LuxunPlace2 = () => {
    moduleName: string;
  }>();

+  // 学习引导弹窗
+  const [showGuideModal, setShowGuideModal] = useState(true);
+
  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) => {
-    setActiveExhibitId(index);
+    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;
@@ -63,19 +115,21 @@ const LuxunPlace2 = () => {
        }}
      />

-      {/* 展品 */}
+      {/* 光标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}
@@ -97,6 +151,11 @@ const LuxunPlace2 = () => {
      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        description={
+          activeExhibitId === 3
+            ? '这篇《中国人失掉自信力了吗》收录于《且介亭杂文》中，它将"匕首与投枪"的特质发挥到极致。当时国民党当局接连丧权辱国，一些文人却散布"中国人失掉自信力"的悲观论调，迎合反动派的卖国行径。鲁迅直接驳斥这种谬论，一针见血指出："我们从古以来，就有埋头苦干的人，有拼命硬干的人，有为民请命的人，有舍身求法的人……这就是中国的脊梁。"文字如利刃般戳破虚假论调，揭露了反动派掩盖自身无能、麻痹民众的阴谋，唤醒国人的民族自信，尽显战斗文字的锋芒与力量。'
+            : undefined
+        }
        onClose={() => {
          if (activeExhibitId !== null) {
            setVisited((prev) => {
@@ -108,6 +167,58 @@ const LuxunPlace2 = () => {
          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>
+
+      {/* 学习引导 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
    </div>
  );
 };