feat:完善黄炎培对话引导

2026-01-08 00:09:28 +08:00
1 parent 6ab184b328
commit e8dc5d4b95
@@ -6,7 +6,11 @@ import {
  Cursor,
  Video,
  StudyGuideModal,
+  GuideSteps,
+  GuideStepsItem,
+  SingleChoiceQuizPanel,
 } from "@/components";
+import { SuccessAlert } from "@/components/layout";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 import type { VideoRef } from "@/components/video";
@@ -30,6 +34,12 @@ const HuangyanpeiPlace5 = () => {
  const videoRef = useRef<VideoRef>(null);
  // 学习引导弹窗（进入场景即显示）
  const [showGuideModal, setShowGuideModal] = useState(true);
+  // 展品2视频后的对话引导状态
+  const [guideVisible, setGuideVisible] = useState(false);
+  // 题目显示状态
+  const [showQuiz, setShowQuiz] = useState(false);
+  // 成功提示状态
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);

  const handleOpenExhibit = (index: 1 | 2) => {
    if (index === 2) {
@@ -82,11 +92,13 @@ const HuangyanpeiPlace5 = () => {
        }}
      />

+      {/* 光标1 */}
      <Cursor
        className="absolute left-35 top-108"
        onClick={() => handleOpenExhibit(1)}
        read={visited.has(1)}
      />
+      {/* 光标2 */}
      <Cursor
        className="absolute right-112 top-108"
        onClick={() => handleOpenExhibit(2)}
@@ -118,12 +130,8 @@ const HuangyanpeiPlace5 = () => {
            showSkipButton
            skipText="跳过"
            onEnded={() => {
-              setVideoVisible(false);
-              setVisited((prev) => {
-                const next = new Set(prev);
-                next.add(2);
-                return next;
-              });
+              // 视频结束后显示对话引导
+              setGuideVisible(true);
            }}
          />
        </div>
@@ -131,6 +139,11 @@ const HuangyanpeiPlace5 = () => {

      <ExhibitOverlay
        visible={activeExhibitId !== null}
+        description={
+          activeExhibitId === 1
+            ? '1940年,国民党政府还坚持"攘外必先安内"的政策,让国共两党的关系越来越紧张。黄炎培等有识之士看到这种严峻形势,觉得中间派应该联合起来,为国家寻求一条和平发展的道路。于是他联系了张君励、梁漱溟等爱国同仁,后来又联合了第三党和无党派人士,准备成立统一的同盟。刚好这时发生了震惊中外的"皖南事变",国共矛盾进一步激化,黄炎培心里特别着急,就加紧了筹备工作。1941年3月19日,中国民主政团同盟正式成立,参加成立会的有13人,选出了5位常委,黄炎培当选为第一任主席。1945年,他还创立了民主建国会并担任第一任主委,带领大家积极投入"反内战、保和平"的民主斗争,为国家的和平稳定奔走呼号。'
+            : undefined
+        }
        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
        onClose={() => {
          if (activeExhibitId !== null) {
@@ -144,6 +157,72 @@ const HuangyanpeiPlace5 = () => {
        }}
      />

+      {/* 展品2视频后的引导对话 */}
+      <GuideSteps
+        visible={guideVisible}
+        onVisibleChange={(visible) => {
+          setGuideVisible(visible);
+          // 对话结束后显示题目
+          if (!visible) {
+            setShowQuiz(true);
+          }
+        }}
+        showMask={true}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          哇!这就是历史课上学的"窑洞对"!黄炎培先生和毛主席的这次谈话,是不是破解了"历史周期率"呀?
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          完全正确!1945年7月1日,黄炎培以国民参政员的身份,带着考察团一行六人赴延安考察,中共中央领导人毛泽东、朱德、周恩来等都亲自到机场迎接。7月4日,他和毛泽东主席长谈了十几个小时,这场对话能和诸葛亮的"隆中对"相媲美。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          谈话中,黄炎培提出了一个深刻的问题:"其兴也勃焉,其亡也忽焉",也就是历代王朝逃不开的"历史周期率"。毛泽东主席当场回答:"我们已经找到新路,这条新路就是民主。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          "后来,黄炎培把这段对话写进了《延安归来》这本书,一夜之间就畅销十万册,成为当时最热门的书籍,而"实行民主"也被大家称为破解历史周期率的"初版答案"。
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 题目 */}
+      <SingleChoiceQuizPanel
+        visible={showQuiz}
+        title='《延安归来》中"破解历史周期率"的"初版答案"一夜畅销十万册,其提出的核心对策是( )'
+        options={[
+          { value: "A", label: "A. 实行民主" },
+          { value: "B", label: "B. 发展经济" },
+          { value: "C", label: "C. 加强党建" },
+          { value: "D", label: "D. 武装斗争" },
+        ]}
+        correctAnswer="A"
+        errorMessage='1945年7月,黄炎培在延安向毛泽东提出"其兴也勃焉,其亡也忽焉"的历史周期率之问。毛泽东当即回答:"我们已经找到新路,这条新路就是民主。"黄炎培将这一对话写入《延安归来》,首次公开提出以"民主"破解历代王朝兴衰循环的命题。该书一夜之间畅销十万册,使"实行民主"成为当时社会各界瞩目的"初版答案",故选A。'
+        onSubmit={(value, isCorrect) => {
+          if (isCorrect) {
+            setVideoVisible(false);
+            setShowQuiz(false);
+            setShowSuccessAlert(true);
+          }
+        }}
+        zIndex={10001}
+      />
+
+      {/* 成功提示 */}
+      <SuccessAlert
+        visible={showSuccessAlert}
+        onContinue={() => {
+          setShowSuccessAlert(false);
+          setVisited((prev) => {
+            const next = new Set(prev);
+            next.add(2);
+            return next;
+          });
+        }}
+        onClose={() => {
+          setShowSuccessAlert(false);
+        }}
+      />
+
      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
      <StudyGuideModal
        visible={showGuideModal}