feat:黄炎培对话对接中

2026-01-07 21:08:38 +08:00
1 parent 3611a0857a
commit 6ab184b328
@@ -1,5 +1,14 @@
-import { useState } from "react";
-import { ExhibitOverlay, Title, Image, Cursor } from "@/components";
+import { useState, useEffect } from "react";
+import {
+  ExhibitOverlay,
+  Title,
+  Image,
+  Cursor,
+  StudyGuideModal,
+  GuideSteps,
+  GuideStepsItem,
+  SingleChoiceQuizPanel,
+} from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";

@@ -17,15 +26,64 @@ const HuangyanpeiPlace3 = () => {
    moduleName: string;
  }>();

+  // 学习引导弹窗（进入场景即显示）
+  const [showGuideModal, setShowGuideModal] = useState(true);
  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);
+
+  // 光标1、2的引导对话状态（在两者都浏览后显示）
+  const [guide12Visible, setGuide12Visible] = useState(false);
+  const [guide12Shown, setGuide12Shown] = useState(false);
+
  const handleOpenExhibit = (index: 1 | 2 | 3) => {
-    setActiveExhibitId(index);
+    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);
+    if (!visible) {
+      // 对话结束后显示题目
+      setShowQuiz3(true);
+    }
+  };
+
+  // 处理光标3题目提交
+  const handleQuiz3Submit = (value: string, isCorrect: boolean) => {
+    if (isCorrect) {
+      setShowQuiz3(false);
+    }
+  };
+
+  // 监听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;
@@ -61,16 +119,19 @@ const HuangyanpeiPlace3 = () => {
        }}
      />

+      {/* 光标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)}
@@ -98,10 +159,94 @@ const HuangyanpeiPlace3 = () => {
              next.add(activeExhibitId);
              return next;
            });
+            setActiveExhibitId(null);
+          } else {
+            setActiveExhibitId(null);
          }
-          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>
+        <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年,黄炎培将"观澜书院"改制为"川沙小学堂",自任校长,率先打破传统经学模式,在课程表中首次列入算术、格致(近代自然科学)、体操和乡土调查四门新学科,并实行"半日授课、半日实习"的教学方式,开创了近代中国小学融入科学、体育与实践教育的新风,因此选项B正确。'
+        onSubmit={handleQuiz3Submit}
+        zIndex={10001}
+      />
+
+      {/* 光标1、2的引导对话 */}
+      <GuideSteps
+        visible={guide12Visible}
+        onVisibleChange={setGuide12Visible}
+        showMask={true}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          原来当年还有专门的女子学校呀?在那个年代,女孩子能上学是不是特别不容易?后来的浦东中学也是黄炎培先生办的吗?
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          你观察得特别仔细!
+          川沙小学堂开学没多久,黄炎培就和堂兄黄洪培、堂嫂陆开群一起,策划创建了"开群女校"——这所学校专门面向社会招收女学生,还用全力支持办学、腾出自家住房的陆开群名字命名,直接开创了浦东地区女子教育的先河,让很多女孩子有了读书的机会。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          到了1906年,上海营造业宗师杨斯盛捐资30万两白银,在浦东六里桥购地40多亩创办浦东中学,特意邀请黄炎培担任首任校长。校舍是黄炎培亲自设计的,杨斯盛先生亲自监工,建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢!
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
    </div>
  );
 };