feat:鲁迅添加引导

src/pages/luxun/place/place3.tsx

@@ -1,7 +1,17 @@
-import { ExhibitOverlay, Image, Title, Cursor } from "@/components";
+import {
+  ExhibitOverlay,
+  Image,
+  Title,
+  Cursor,
+  StudyGuideModal,
+  GuideSteps,
+  GuideStepsItem,
+  SingleChoiceQuizPanel,
+} from "@/components";
 import { useNavigate, useParams } from "react-router-dom";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useState } from "react";
+import SuccessAlert from "@/components/layout/alert/success-alert";
 
 // starName 固定为 luxun
 const starName = "luxun";
@@ -15,19 +25,84 @@ const exhibitSrcMap: Record<1 | 2 | 3 | 4 | 5, string> = {
   5: "luxun/place3/10",
 };
 
+const quiz2DefaultError = "再想一想，注意题干中的时间和提示信息哦～";
+const quiz2Explanations: Record<string, string> = {
+  A: "鲁迅身处旧中国文艺思惰僵化、缺乏革新活力的时代，他认为“没有拿来的，人不能自成为新人”。翻译外国作品正是为了打破文化封闭，为中国文艺引进新思想、新方法，为沉寂的文坛注入新血液。",
+  B: "当时中国青年普遍受传统旧思想束缚，接触先进文化的渠道有限。鲁迅希望通过翻译外国进步作品，让青年接触世界范围内的先进文化理念、思想成果，拓宽视野、启发心智，助力青年觉醒。",
+  C: "鲁迅的核心斗争方式是“以笔为刃”，通过文学创作、翻译、杂文批判等方式开展思想启蒙和文化斗争，从未直接参与武装革命的战略部署。",
+  D: "在国民党“文化围剿”、进步思想遭严控的背景下，鲁迅将翻译视为重要的斗争武器——通过引进外国进步文学、马克思主义理论等，揭露旧中国的黑暗与愚昧，唤醒民众的思想意识，助力思想启蒙运动。",
+};
+
+// 光标5-题目：纪念瞿秋白的译文集
+const quiz5DefaultError = "再想一想，结合前面的旁白内容哦～";
+const quiz5Explanations: Record<string, string> = {
+  A: "《仿自由书》是鲁迅在上海创作的杂文集，收录了1933年所作的多篇杂文，核心内容是针砭国民党当局的虚伪统治、批判社会乱象，并非为纪念瞿秋白编校的译文集。",
+  B: "《南腔北调集》是鲁迅的一部杂文集，收录了1927年至1933年的杂文作品，书名源于鲁迅对自己文章“不入调、不入流”的自嘲，内容涵盖文化批判、社会评论等，与纪念瞿秋白及译文集无关。",
+  C: "恭喜你，选对啦。",
+  D: "《故事新编》是鲁迅的历史小说集，酝酿多年后在大陆新村9号完成定稿。作品以神话传说、历史典故为载体借古讽今，批判现实社会的腐朽与愚昧，并非译文集，更与纪念瞿秋白无关。",
+};
+
 const LuxunPlace3 = () => {
   const navigate = useNavigate();
   const { moduleName } = useParams<{
     moduleName: string;
   }>();
 
+  // 学习引导弹窗
+  const [showGuideModal, setShowGuideModal] = useState(true);
+
   const [activeExhibitId, setActiveExhibitId] = useState<
     1 | 2 | 3 | 4 | 5 | null
   >(null);
   const [visited, setVisited] = useState<Set<number>>(new Set());
 
+  // 光标1的引导对话状态
+  const [guide1Visible, setGuide1Visible] = useState(false);
+  const [guide1Step, setGuide1Step] = useState(0);
+
+  // 光标2的题目状态
+  const [quiz2Visible, setQuiz2Visible] = useState(false);
+  const [successAlert2Visible, setSuccessAlert2Visible] = useState(false);
+  const [quiz2Error, setQuiz2Error] = useState(quiz2DefaultError);
+
+  // 光标3的引导对话状态
+  const [guide3Visible, setGuide3Visible] = useState(false);
+  const [guide3Step, setGuide3Step] = useState(0);
+
+  // 光标4的引导对话状态
+  const [guide4Visible, setGuide4Visible] = useState(false);
+  const [guide4Step, setGuide4Step] = useState(0);
+
+  // 光标5的题目 & 成功提示 & 引导对话状态
+  const [quiz5Visible, setQuiz5Visible] = useState(false);
+  const [quiz5Error, setQuiz5Error] = useState(quiz5DefaultError);
+  const [successAlert5Visible, setSuccessAlert5Visible] = useState(false);
+  const [guide5Visible, setGuide5Visible] = useState(false);
+  const [guide5Step, setGuide5Step] = useState(0);
+
   const handleOpenExhibit = (index: 1 | 2 | 3 | 4 | 5) => {
-    setActiveExhibitId(index);
+    if (index === 1) {
+      // 光标1：点击时同时打开展品和引导对话
+      setActiveExhibitId(1);
+      setGuide1Visible(true);
+      setGuide1Step(0);
+    } else if (index === 2) {
+      // 光标2：只打开展品（带描述）
+      setActiveExhibitId(2);
+    } else if (index === 3) {
+      // 光标3：点击时同时打开展品和引导对话
+      setActiveExhibitId(3);
+      setGuide3Visible(true);
+      setGuide3Step(0);
+    } else if (index === 4) {
+      // 光标4：点击时同时打开展品和引导对话
+      setActiveExhibitId(4);
+      setGuide4Visible(true);
+      setGuide4Step(0);
+    } else {
+      // 光标5：先打开展品，关闭后进入答题
+      setActiveExhibitId(index);
+    }
   };
 
   const progressCount = visited.size;
@@ -65,31 +140,35 @@ const LuxunPlace3 = () => {
         }}
       />
 
-      {/* 展品 */}
+      {/* 光标1 */}
       <Cursor
         className="absolute right-114 bottom-130"
         onClick={() => handleOpenExhibit(1)}
         size={0.6}
         read={visited.has(1)}
       />
+      {/* 光标2 */}
       <Cursor
         className="absolute right-130 bottom-115"
         onClick={() => handleOpenExhibit(2)}
         size={0.6}
         read={visited.has(2)}
       />
+      {/* 光标3 */}
       <Cursor
         className="absolute left-76 bottom-140"
         onClick={() => handleOpenExhibit(3)}
         size={0.6}
         read={visited.has(3)}
       />
+      {/* 光标4 */}
       <Cursor
         className="absolute right-238 bottom-125"
         onClick={() => handleOpenExhibit(4)}
         size={0.6}
         read={visited.has(4)}
       />
+      {/* 光标5 */}
       <Cursor
         className="absolute right-258 bottom-118"
         onClick={() => handleOpenExhibit(5)}
@@ -111,17 +190,266 @@ const LuxunPlace3 = () => {
       <ExhibitOverlay
         visible={activeExhibitId !== null}
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        description={
+          activeExhibitId === 2
+            ? '本书里面还收录了《理水》,文章写的是大禹治水"三过家门而不入"的上古传说,实则藏着对现实的尖锐针砭。当时反动派统治腐朽,面对内忧外患只会粉饰太平,还有一群空谈理论、脱离实际的"学者"混淆视听。大禹带领民众跋山涉水、实地勘察,摒弃"堵"的旧法改用"疏"的良方,历经千辛万苦终平水患。这哪里是写古代治水?分明是在赞颂脚踏实地、敢破敢立的实干精神,讽刺那些庸碌无为的当权者与空谈家,用远古的正义之光映照现实的黑暗。'
+            : activeExhibitId === 5
+            ? "为了妥善出版亡友遗著,鲁迅亲自选稿、校对、设计封面。为了躲避反动派的审查,他还特意用“诸夏怀霜社”的名义出版,“怀霜”就是为了纪念瞿秋白。1936年《海上述林》上卷出版时,鲁迅的身体已经极度虚弱,但他仍一遍遍翻看样书,说“这是我对秋白最好的纪念”。"
+            : undefined
+        }
         onClose={() => {
-          if (activeExhibitId !== null) {
+          if (activeExhibitId === 2) {
+            // 光标2：关闭展品框后显示题目
+            setActiveExhibitId(null);
+            setQuiz2Visible(true);
+          } else if (activeExhibitId === 5) {
+            // 光标5：关闭展品框后显示题目
+            setActiveExhibitId(null);
+            setQuiz5Visible(true);
+          } else if (activeExhibitId === 1 || activeExhibitId === 3) {
+            // 光标1和光标3：只关闭展品，不标记为已读（等对话关闭时再标记）
+            setActiveExhibitId(null);
+          } else if (activeExhibitId === 4) {
+            // 光标4：只关闭展品，不标记为已读（等对话关闭时再标记）
+            setActiveExhibitId(null);
+          } else {
+            // 其他光标：正常关闭并标记为已读
+            if (activeExhibitId !== null) {
+              setVisited((prev) => {
+                const next = new Set(prev);
+                next.add(activeExhibitId);
+                return next;
+              });
+            }
+            setActiveExhibitId(null);
+          }
+        }}
+      />
+
+      {/* 光标1的引导对话 */}
+      <GuideSteps
+        visible={guide1Visible}
+        onVisibleChange={(visible) => {
+          setGuide1Visible(visible);
+          if (!visible) {
+            // 对话关闭时，标记光标1为已读
             setVisited((prev) => {
               const next = new Set(prev);
-              next.add(activeExhibitId);
+              next.add(1);
               return next;
             });
           }
-          setActiveExhibitId(null);
+        }}
+        currentStep={guide1Step}
+        onStepChange={setGuide1Step}
+        showMask={false}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          小沪,书架上还有《故事新编》,这不是历史小说吗?鲁迅为什么要在这个时期写古代故事呢?
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          《故事新编》是鲁迅酝酿十几年的作品,最终在大陆新村9号完成定稿。表面上写的是神话传说和历史典故,实则句句都在影射现实。当时反动派妄图用复古思想麻痹民众,鲁迅就用"故事新编"的方式,借古讽今,唤醒民众。
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 光标2的题目 */}
+      <SingleChoiceQuizPanel
+        visible={quiz2Visible}
+        title="鲁迅在上海大陆新村9号居住期间,翻译外国作品的核心目的不包括()"
+        options={[
+          {
+            value: "A",
+            label: "为中国文艺引进新思想、新血液",
+          },
+          {
+            value: "B",
+            label: "让中国青年接触更先进的文化理念",
+          },
+          {
+            value: "C",
+            label: "直接参与武装革命的战略部署",
+          },
+          {
+            value: "D",
+            label: "以翻译为武器助力思想启蒙",
+          },
+        ]}
+        correctAnswer="C"
+        errorMessage={quiz2Error}
+        onSubmit={(value, isCorrect) => {
+          if (isCorrect) {
+            setQuiz2Error(quiz2DefaultError);
+            setQuiz2Visible(false);
+            setSuccessAlert2Visible(true);
+          }
+        }}
+        onWrongSelect={(value) => {
+          const explanation = quiz2Explanations[value];
+          if (explanation) {
+            setQuiz2Error(explanation);
+            return explanation;
+          }
+          setQuiz2Error(quiz2DefaultError);
+          return quiz2DefaultError;
+        }}
+        zIndex={10001}
+      />
+
+      {/* 光标2的成功提示 */}
+      <SuccessAlert
+        visible={successAlert2Visible}
+        content={
+          "鲁迅的核心斗争方式是“以笔为刃”，通过文学创作、翻译、杂文批判等方式开展思想启蒙和文化斗争，从未直接参与武装革命的战略部署。"
+        }
+        onContinue={() => {
+          setSuccessAlert2Visible(false);
+          // 标记光标2为已读
+          setVisited((prev) => {
+            const next = new Set(prev);
+            next.add(2);
+            return next;
+          });
         }}
       />
+
+      {/* 光标3的引导对话 */}
+      <GuideSteps
+        visible={guide3Visible}
+        onVisibleChange={(visible) => {
+          setGuide3Visible(visible);
+          if (!visible) {
+            // 对话关闭时，标记光标3为已读
+            setVisited((prev) => {
+              const next = new Set(prev);
+              next.add(3);
+              return next;
+            });
+          }
+        }}
+        currentStep={guide3Step}
+        onStepChange={setGuide3Step}
+        showMask={false}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          我还看到书架上有很多翻译作品,这也是他在这儿完成的吗?
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          没错!鲁迅在这儿翻译了《死魂灵》《表》等大量外国作品。他说"没有拿来的,人不能自成为新人",就是想通过翻译,为中国文艺引进新思想、新方法,让更多人看到世界的真相,找到救国的道路。
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 光标4的引导对话 */}
+      <GuideSteps
+        visible={guide4Visible}
+        onVisibleChange={(visible) => {
+          setGuide4Visible(visible);
+          if (!visible) {
+            // 对话关闭时，标记光标4为已读
+            setVisited((prev) => {
+              const next = new Set(prev);
+              next.add(4);
+              return next;
+            });
+          }
+        }}
+        currentStep={guide4Step}
+        onStepChange={setGuide4Step}
+        showMask={false}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          小沪,这两本书看起来格外厚重,它和鲁迅在这儿的经历有什么关联呢?
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          这不是鲁迅的著作,却是他在大陆新村9号倾注了全部心血的作品——为亡友瞿秋白编辑的译文集《海上述林》。1935年6月,瞿秋白被国民党反动派杀害,鲁迅悲痛万分,当即决定要为挚友出版译文集,让他的思想和精神流传下去。
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 光标5的题目 */}
+      <SingleChoiceQuizPanel
+        visible={quiz5Visible}
+        title="鲁迅在上海大陆新村9号居住期间,为纪念瞿秋白编校的译文集是()"
+        options={[
+          { value: "A", label: "《仿自由书》" },
+          { value: "B", label: "《南腔北调集》" },
+          { value: "C", label: "《海上述林》" },
+          { value: "D", label: "《故事新编》" },
+        ]}
+        correctAnswer="C"
+        errorMessage={quiz5Error}
+        onSubmit={(value, isCorrect) => {
+          if (isCorrect) {
+            setQuiz5Error(quiz5DefaultError);
+            setQuiz5Visible(false);
+            setSuccessAlert5Visible(true);
+          }
+        }}
+        onWrongSelect={(value) => {
+          const explanation = quiz5Explanations[value];
+          if (explanation) {
+            setQuiz5Error(explanation);
+            return explanation;
+          }
+          setQuiz5Error(quiz5DefaultError);
+          return quiz5DefaultError;
+        }}
+        zIndex={10001}
+      />
+
+      {/* 光标5的成功提示 */}
+      <SuccessAlert
+        visible={successAlert5Visible}
+        onContinue={() => {
+          setSuccessAlert5Visible(false);
+          // 标记光标5为已读
+          setVisited((prev) => {
+            const next = new Set(prev);
+            next.add(5);
+            return next;
+          });
+          // 打开光标5的引导对话
+          setGuide5Visible(true);
+          setGuide5Step(0);
+        }}
+      />
+
+      {/* 光标5的引导对话 */}
+      <GuideSteps
+        visible={guide5Visible}
+        onVisibleChange={(visible) => {
+          setGuide5Visible(visible);
+        }}
+        currentStep={guide5Step}
+        onStepChange={setGuide5Step}
+        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>
   );
 };