feat: 更新图像资源和引导对话，提升学习体验

- 替换多个场景中的图像资源，确保视觉内容的准确性和一致性。 - 更新信件组件中的输入校验功能，提升用户填写体验。 - 调整引导对话文本，增强互动性和信息传达的清晰度。 - 引入结束窗口，鼓励用户深入了解鲁迅和孙中山的历史背景。
2026-01-18 01:41:53 +08:00
1 parent 5bdfdadede
commit ac7bb420fd
@@ -33,6 +33,8 @@ const LuxunPlace1 = () => {
  const [afterDialogGuideShown, setAfterDialogGuideShown] = useState(false);
  // 引导对话显示状态
  const [visible, setVisible] = useState(false);
+  const [visibleIndex, setVisibleIndex] = useState(0);
+
  // 浏览完展品后的对话显示状态
  const [showAfterExhibitDialog, setShowAfterExhibitDialog] = useState(false);
  const [afterExhibitDialogShown, setAfterExhibitDialogShown] = useState(false);
@@ -44,6 +46,10 @@ const LuxunPlace1 = () => {
  const [visited, setVisited] = useState<Set<number>>(new Set());

  const handleOpenExhibit = (index: 1 | 2) => {
+    if (index === 1) {
+      setVisibleIndex(0);
+      setVisible(true);
+    }
    setActiveExhibitId(index);
  };

@@ -120,11 +126,11 @@ const LuxunPlace1 = () => {
      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
-        description={
-          activeExhibitId == 1
-            ? `1892-1898年，少年时期在绍兴三味书屋求学积淀；\n1919-1923年，于北京八道湾参加新文化运动、酝酿《阿Q正传》；\n1926年9-12月，赴厦门大学任教期间聚焦底层创作杂文；\n1927年3-9月，广州白云楼整理旧作定稿《朝花夕拾》部分篇章。`
-            : undefined
-        }
+        // description={
+        //   activeExhibitId == 1
+        //     ? `1892-1898年，少年时期在绍兴三味书屋求学积淀；\n1919-1923年，于北京八道湾参加新文化运动、酝酿《阿Q正传》；\n1926年9-12月，赴厦门大学任教期间聚焦底层创作杂文；\n1927年3-9月，广州白云楼整理旧作定稿《朝花夕拾》部分篇章。`
+        //     : undefined
+        // }
        onClose={() => {
          if (activeExhibitId !== null) {
            setVisited((prev) => {
@@ -142,31 +148,35 @@ const LuxunPlace1 = () => {
        visible={showGuideModal}
        onContinue={() => {
          setShowGuideModal(false);
-          setVisible(true);
+          if (!visible && !afterDialogGuideShown) {
+            setAfterDialogGuideShown(true);
+            setShowAfterDialogGuide(true);
+          }
        }}
      >
-        {`同学你好，欢迎来到走进故居-对话学习模块！
-进入鲁迅故居后，我们一起来了解鲁迅先生经历的4个阶段："风雨前夕的思想淬炼"->"杂文集里的匕首与投枪"->"历史新编中的现实呐喊&为亡友编纂的精神丰碑"->"6平方米的红色庇护所"；`}
+        {`同学你好，欢迎来到“走进故居·对话”学习模块！
+此刻你正立在鲁迅故居的一楼客厅里，接下来请随旧时光的纹路，一同翻开先生思想长卷里的5段深刻轨迹：风雨前夕的思想淬炼、杂文集里的匕首与投枪、历史新编中的现实呐喊、为亡友编纂的精神丰碑、6平方米的红色庇护所。准备好共赴这场笔尖与灵魂的滚烫相遇了吗？`}
      </StudyGuideModal>

      {/* 引导 */}
      <GuideSteps
        visible={visible}
+        currentStep={visibleIndex}
+        onStepChange={setVisibleIndex}
        onVisibleChange={(nextVisible) => {
          setVisible(nextVisible);
-          if (!nextVisible && !afterDialogGuideShown) {
-            setAfterDialogGuideShown(true);
-            setShowAfterDialogGuide(true);
-          }
        }}
-        showMask={true}
-        highlightSelectors={[]}
+        showMask={false}
+        zIndex={10000}
      >
        <GuideStepsItem speaker="student">
          小沪！我知道鲁迅是1933年搬到大陆新村9号的，那在这之前他为什么会选择来到上海，又有哪些思想转变呢？
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
-          你问得很关键！而1927年是鲁迅思想的重要转折点，这一年他在广州亲历了"四一二"反革命政变，亲眼看见进步青年和革命志士倒在血泊中，曾经对"温和改革"的幻想彻底破灭。
+          你问得很关键！从1892-1898年少年时期在绍兴三味书屋求学积淀，到1919-1923年于北京八道湾参加新文化运动、酝酿《阿Q正传》，再到1926年9-12月赴厦门大学任教期间聚焦底层创作杂文。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          1927年3-9月广州白云楼整理旧作定稿《朝花夕拾》部分篇章，鲁迅的创作足迹跨越南北，而1927年是鲁迅思想的重要转折点，这一年他在广州亲历了"四一二"反革命政变，亲眼看见进步青年和革命志士倒在血泊中，曾经对"温和改革"的幻想彻底破灭。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          此前他写下《狂人日记》《阿Q正传》批判封建礼教，参加语丝社针砭时弊，但始终在"彷徨"中摸索救国之路。广州的血雨腥风，让他认清了反动派的真面目。
@@ -199,10 +209,10 @@ const LuxunPlace1 = () => {
        highlightSelectors={[]}
      >
        <GuideStepsItem speaker="student">
-          刚到上海的鲁迅住在哪里,又在做什么?
+          这张照片也是鲁迅在上海期间的住所吗？
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
-          1927年10月,鲁迅带着许广平来到上海,先住进了虹口区横浜路景云里。在景云里的两年半,他结识了冯雪峰等共产党员,参与发起中国左翼作家联盟,从"独战的英雄"转变为革命文艺战线的旗手。
+          不错！1927年10月,鲁迅带着许广平来到上海,先住进了虹口区横浜路景云里。在景云里的两年半,他结识了冯雪峰等共产党员,参与发起中国左翼作家联盟,从"独战的英雄"转变为革命文艺战线的旗手。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          这段时间他写下《三闲集》《二心集》,表达他在当时历史条件下针对社会现象、文化问题和论战的看法与社会批判,此间还翻译了大量马列文艺理论著作,为此后的战斗打下了坚实思想基础。
@@ -39,6 +39,10 @@ const LuxunPlace2 = () => {
  const [guide2Visible, setGuide2Visible] = useState(false);
  const [guide2Step, setGuide2Step] = useState(0);

+  // 光标3的引导对话状态
+  const [guide3Visible, setGuide3Visible] = useState(false);
+  const [guide3Step, setGuide3Step] = useState(0);
+
  const handleOpenExhibit = (index: 1 | 2 | 3) => {
    if (index === 1) {
      // 光标1：点击时同时打开展品和引导对话
@@ -50,6 +54,10 @@ const LuxunPlace2 = () => {
      setActiveExhibitId(2);
      setGuide2Visible(true);
      setGuide2Step(0);
+    } else if (index === 3) {
+      setActiveExhibitId(3);
+      setGuide3Visible(true);
+      setGuide3Step(0);
    } else {
      // 光标3：直接打开
      setActiveExhibitId(index);
@@ -99,7 +107,6 @@ const LuxunPlace2 = () => {
        subtitleClassName={subtitleClassName}
        className="absolute top-10 left-1/2 -translate-x-1/2"
      />
-
      <Image
        className="absolute right-5 top-5"
        src={getStaticImage("components/离开")}
@@ -110,7 +117,6 @@ const LuxunPlace2 = () => {
          }
        }}
      />
-
      {/* 光标1 */}
      <Cursor
        className="absolute right-218 bottom-104"
@@ -132,7 +138,6 @@ const LuxunPlace2 = () => {
        onClick={() => handleOpenExhibit(3)}
        read={visited.has(3)}
      />
-
      {completed && (
        <Image
          className="absolute bottom-10 left-42"
@@ -143,15 +148,14 @@ const LuxunPlace2 = () => {
          }}
        />
      )}
-
      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
-        description={
-          activeExhibitId === 3
-            ? '这篇《中国人失掉自信力了吗》收录于《且介亭杂文》中，它将"匕首与投枪"的特质发挥到极致。当时国民党当局接连丧权辱国，一些文人却散布"中国人失掉自信力"的悲观论调，迎合反动派的卖国行径。鲁迅直接驳斥这种谬论，一针见血指出："我们从古以来，就有埋头苦干的人，有拼命硬干的人，有为民请命的人，有舍身求法的人……这就是中国的脊梁。"文字如利刃般戳破虚假论调，揭露了反动派掩盖自身无能、麻痹民众的阴谋，唤醒国人的民族自信，尽显战斗文字的锋芒与力量。'
-            : undefined
-        }
+        // description={
+        //   activeExhibitId === 3
+        //     ? '这篇《中国人失掉自信力了吗》收录于《且介亭杂文》中，它将"匕首与投枪"的特质发挥到极致。当时国民党当局接连丧权辱国，一些文人却散布"中国人失掉自信力"的悲观论调，迎合反动派的卖国行径。鲁迅直接驳斥这种谬论，一针见血指出："我们从古以来，就有埋头苦干的人，有拼命硬干的人，有为民请命的人，有舍身求法的人……这就是中国的脊梁。"文字如利刃般戳破虚假论调，揭露了反动派掩盖自身无能、麻痹民众的阴谋，唤醒国人的民族自信，尽显战斗文字的锋芒与力量。'
+        //     : undefined
+        // }
        onClose={() => {
          if (activeExhibitId !== null) {
            setVisited((prev) => {
@@ -163,7 +167,6 @@ const LuxunPlace2 = () => {
          setActiveExhibitId(null);
        }}
      />
-
      {/* 光标1的引导对话 */}
      <GuideSteps
        visible={guide1Visible}
@@ -178,13 +181,12 @@ const LuxunPlace2 = () => {
          小沪,这里的《且介亭杂文》就是鲁迅先生在大陆新村9号创作的吧,有人将先生的杂文评价为"匕首与投枪",《且介亭杂文》中有具体体现吗?
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
-          当然有!20世纪30年代,国民党"文化围剿"愈烈,进步思想遭严控,鲁迅在大陆新村9号创作出《且介亭杂文》等集子。这些杂文聚焦文化乱象与社会沉疴,篇幅精炼却直击要害,像匕首般刺穿虚伪表象,似投枪般直戳问题核心...
+          当然有!20世纪30年代,国民党"文化围剿"愈烈,进步思想遭严控,鲁迅在大陆新村9号创作出《且介亭杂文》等集子。这些杂文聚焦文化乱象与社会沉疴,篇幅精炼却直击要害,像匕首般刺穿虚伪表象,似投枪般直戳问题核心。
        </GuideStepsItem>
        <GuideStepsItem speaker="guide">
          用锋利文字与黑暗势力对峙,成为那个时代最具战斗力的思想武器,"匕首与投枪"的赞誉恰是其战斗性的生动写照。
        </GuideStepsItem>
      </GuideSteps>
-
      {/* 光标2的引导对话 */}
      <GuideSteps
        visible={guide2Visible}
@@ -202,6 +204,29 @@ const LuxunPlace2 = () => {
          这是鲁迅的自嘲,他曾说"我不会说绵软的苏白,不会打响亮的京腔,不入调,不入流",所以戏称自己的文章是"南腔北调"。这本书里的《〈守常全集》题记》,赞美了李大钊同志,说"他的遗文却将永驻,因为这是先驱者的遗产,革命史上的丰碑。"
        </GuideStepsItem>
      </GuideSteps>
+      \{/* 光标3的引导对话 */}
+      <GuideSteps
+        visible={guide3Visible}
+        onVisibleChange={setGuide3Visible}
+        currentStep={guide3Step}
+        onStepChange={setGuide3Step}
+        showMask={false}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          我们初中学的《中国人失掉自信力了吗》就是收录于《且介亭杂文》中的！
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          那你应该更有体会！这篇《中国人失掉自信力了吗》是将“匕首与投枪”的特质发挥到极致。当时国民党当局接连丧权辱国，一些文人却散布“中国人失掉自信力”的悲观论调，迎合反动派的卖国行径。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          鲁迅直接驳斥这种谬论，一针见血指出：“我们从古以来，就有埋头苦干的人，有拼命硬干的人，有为民请命的人，有舍身求法的人……这就是中国的脊梁。”
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          文字如利刃般戳破虚假论调，揭露了反动派掩盖自身无能、麻痹民众的阴谋，唤醒国人的民族自信，尽显战斗文字的锋芒与力量。
+        </GuideStepsItem>
+      </GuideSteps>
    </div>
  );
 };
@@ -56,6 +56,10 @@ const LuxunPlace3 = () => {
  const [guide1Visible, setGuide1Visible] = useState(false);
  const [guide1Step, setGuide1Step] = useState(0);

+  // 光标2的引导对话状态
+  const [guide2Visible, setGuide2Visible] = useState(false);
+  const [guide2Step, setGuide2Step] = useState(0);
+
  // 光标2的题目状态
  const [quiz2Visible, setQuiz2Visible] = useState(false);
  const [successAlert2Visible, setSuccessAlert2Visible] = useState(false);
@@ -85,6 +89,8 @@ const LuxunPlace3 = () => {
    } else if (index === 2) {
      // 光标2：只打开展品（带描述）
      setActiveExhibitId(2);
+      setGuide2Visible(true);
+      setGuide2Step(0);
    } else if (index === 3) {
      // 光标3：点击时同时打开展品和引导对话
      setActiveExhibitId(3);
@@ -119,7 +125,7 @@ const LuxunPlace3 = () => {
      }}
    >
      <Title
-        title="历史新编中的现实呐喊&为亡友编纂的精神丰碑"
+        title={`历史新编中的现实呐喊\n为亡友编纂的精神丰碑`}
        subtitle={subtitle}
        subtitleClassName={subtitleClassName}
        className="absolute top-10 left-1/2 -translate-x-1/2"
@@ -186,13 +192,13 @@ const LuxunPlace3 = () => {
      <ExhibitOverlay
        visible={activeExhibitId !== null}
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
-        description={
-          activeExhibitId === 2
-            ? '本书里面还收录了《理水》,文章写的是大禹治水"三过家门而不入"的上古传说,实则藏着对现实的尖锐针砭。当时反动派统治腐朽,面对内忧外患只会粉饰太平,还有一群空谈理论、脱离实际的"学者"混淆视听。大禹带领民众跋山涉水、实地勘察,摒弃"堵"的旧法改用"疏"的良方,历经千辛万苦终平水患。这哪里是写古代治水?分明是在赞颂脚踏实地、敢破敢立的实干精神,讽刺那些庸碌无为的当权者与空谈家,用远古的正义之光映照现实的黑暗。'
-            : activeExhibitId === 5
-            ? "为了妥善出版亡友遗著,鲁迅亲自选稿、校对、设计封面。为了躲避反动派的审查,他还特意用“诸夏怀霜社”的名义出版,“怀霜”就是为了纪念瞿秋白。1936年《海上述林》上卷出版时,鲁迅的身体已经极度虚弱,但他仍一遍遍翻看样书,说“这是我对秋白最好的纪念”。"
-            : undefined
-        }
+        // description={
+        //   activeExhibitId === 2
+        //     ? '本书里面还收录了《理水》,文章写的是大禹治水"三过家门而不入"的上古传说,实则藏着对现实的尖锐针砭。当时反动派统治腐朽,面对内忧外患只会粉饰太平,还有一群空谈理论、脱离实际的"学者"混淆视听。大禹带领民众跋山涉水、实地勘察,摒弃"堵"的旧法改用"疏"的良方,历经千辛万苦终平水患。这哪里是写古代治水?分明是在赞颂脚踏实地、敢破敢立的实干精神,讽刺那些庸碌无为的当权者与空谈家,用远古的正义之光映照现实的黑暗。'
+        //     : activeExhibitId === 5
+        //     ? "为了妥善出版亡友遗著,鲁迅亲自选稿、校对、设计封面。为了躲避反动派的审查,他还特意用“诸夏怀霜社”的名义出版,“怀霜”就是为了纪念瞿秋白。1936年《海上述林》上卷出版时,鲁迅的身体已经极度虚弱,但他仍一遍遍翻看样书,说“这是我对秋白最好的纪念”。"
+        //     : undefined
+        // }
        onClose={() => {
          if (activeExhibitId === 2) {
            // 光标2：关闭展品框后显示题目
@@ -250,26 +256,47 @@ const LuxunPlace3 = () => {
        </GuideStepsItem>
      </GuideSteps>

+      {/* 光标2的引导对话 */}
+      <GuideSteps
+        visible={guide2Visible}
+        onVisibleChange={setGuide2Visible}
+        currentStep={guide2Step}
+        onStepChange={setGuide2Step}
+        showMask={false}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          这本书里面还收录了《理水》，是大禹治水的故事吗？
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          不错，文章写的是大禹治水“三过家门而不入”的上古传说，实则藏着对现实的尖锐针砭。当时反动派统治腐朽，面对内忧外患只会粉饰太平，还有一群空谈理论、脱离实际的“学者”混淆视听。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          大禹带领民众跋山涉水、实地勘察，摒弃“堵”的旧法改用“疏”的良方，历经千辛万苦终平水患。这哪里是写古代治水？分明是在赞颂脚踏实地、敢破敢立的实干精神，讽刺那些庸碌无为的当权者与空谈家，用远古的正义之光映照现实的黑暗。
+        </GuideStepsItem>
+      </GuideSteps>
+
      {/* 光标2的题目 */}
      <SingleChoiceQuizPanel
        visible={quiz2Visible}
-        title="鲁迅在上海大陆新村9号居住期间,翻译外国作品的核心目的不包括()"
+        title="【单选】鲁迅在上海大陆新村9号居住期间,翻译外国作品的核心目的不包括:"
        options={[
          {
            value: "A",
-            label: "为中国文艺引进新思想、新血液",
+            label: "A.为中国文艺引进新思想、新血液",
          },
          {
            value: "B",
-            label: "让中国青年接触更先进的文化理念",
+            label: "B.让中国青年接触更先进的文化理念",
          },
          {
            value: "C",
-            label: "直接参与武装革命的战略部署",
+            label: "C.直接参与武装革命的战略部署",
          },
          {
            value: "D",
-            label: "以翻译为武器助力思想启蒙",
+            label: "D.以翻译为武器助力思想启蒙",
          },
        ]}
        correctAnswer="C"
@@ -369,12 +396,12 @@ const LuxunPlace3 = () => {
      {/* 光标5的题目 */}
      <SingleChoiceQuizPanel
        visible={quiz5Visible}
-        title="鲁迅在上海大陆新村9号居住期间,为纪念瞿秋白编校的译文集是()"
+        title="【单选】鲁迅在上海大陆新村9号居住期间,为纪念瞿秋白编校的译文集是："
        options={[
-          { value: "A", label: "《仿自由书》" },
-          { value: "B", label: "《南腔北调集》" },
-          { value: "C", label: "《海上述林》" },
-          { value: "D", label: "《故事新编》" },
+          { value: "A", label: "A.《仿自由书》" },
+          { value: "B", label: "B.《南腔北调集》" },
+          { value: "C", label: "C.《海上述林》" },
+          { value: "D", label: "D.《故事新编》" },
        ]}
        correctAnswer="C"
        errorMessage={quiz5Error}
@@ -137,9 +137,9 @@ const LuxunPlace5 = () => {
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        description={
          activeExhibitId === 1
-            ? '"鲁迅是莱谟斯，是野兽的奶汁所喂养大的，是封建宗法社会的逆子，是绅士阶级的贰臣，而同时也是一些浪漫谛克的革命家的诤友！"'
+            ? '瞿秋白同志曾说，"鲁迅是莱谟斯，是野兽的奶汁所喂养大的，是封建宗法社会的逆子，是绅士阶级的贰臣，而同时也是一些浪漫谛克的革命家的诤友！"'
            : activeExhibitId === 2
-            ? '"人生得一知己足矣，斯世当以同怀视之"'
+            ? '鲁迅先生曾经抄录清朝诗人何瓦琴的对联赠给瞿秋白，"人生得一知己足矣，斯世当以同怀视之"'
            : undefined
        }
        onClose={() => {
@@ -188,7 +188,7 @@ const LuxunPlace5 = () => {
      {/* 光标2的题目 */}
      <SingleChoiceQuizPanel
        visible={quizVisible}
-        title="上海鲁迅故居三楼客房被称为“红色庇护所”，以下哪位共产党人曾在此避难并与鲁迅探讨革命议题"
+        title="【单选】上海鲁迅故居三楼客房被称为“红色庇护所”，以下哪位共产党人曾在此避难并与鲁迅探讨革命议题？"
        options={[
          { value: "A", label: "陈独秀" },
          { value: "B", label: "瞿秋白" },