(null);
+ // 光标1的引导对话状态
+ const [guide1Visible, setGuide1Visible] = useState(false);
+ const [guide1Step, setGuide1Step] = useState(0);
// 展品2视频后的对话引导状态
const [guideVisible, setGuideVisible] = useState(false);
+ const [guideStep, setGuideStep] = useState(0);
// 题目显示状态
const [showQuiz, setShowQuiz] = useState(false);
// 成功提示状态
@@ -40,10 +44,13 @@ const HuangyanpeiPlace5 = () => {
const handleOpenExhibit = (index: 1 | 2) => {
if (index === 2) {
- // 展品2：点击时播放视频，不展示展品
- setVideoVisible(true);
+ // 展品2：点击时显示对话，再显示视频
+ setGuideStep(0);
+ setGuideVisible(true);
} else {
// 展品1：正常展示展品
+ setGuide1Step(0);
+ setGuide1Visible(true);
setActiveExhibitId(index);
}
};
@@ -113,7 +120,7 @@ const HuangyanpeiPlace5 = () => {
/>
)}
- {/* 展品2视频播放（全屏） */}
+ {/* 对话后显示展品2视频播放（全屏） */}
{videoVisible && (
@@ -136,11 +143,11 @@ const HuangyanpeiPlace5 = () => {
{
if (activeExhibitId !== null) {
@@ -154,38 +161,68 @@ const HuangyanpeiPlace5 = () => {
}}
/>
- {/* 展品2视频后的引导对话 */}
+ {/* 光标1的引导对话 */}
+ {
+ setGuide1Visible(visible);
+ }}
+ showMask={false}
+ zIndex={10000}
+ >
+
+ 抗战胜利后，黄炎培先生除了继续推进职业教育，还参与了政党活动呀？他创建民主政团同盟，是想为国家做些什么呢？
+
+
+ 这和当时的历史背景分不开。1940年，国民党政府还坚持“攘外必先安内”的政策，让国共两党的关系越来越紧张。黄炎培等有识之士看到这种严峻形势，觉得中间派应该联合起来，为国家寻求一条和平发展的道路。
+
+
+ 于是他联系了张君劢、梁漱溟等爱国同仁，后来又联合了第三党和无党派人士，准备成立统一的同盟。刚好这时发生了震惊中外的“皖南事变”，国共矛盾进一步激化，黄炎培心里特别着急，就加紧了筹备工作。
+
+
+ 1941年3月19日，中国民主政团同盟正式成立，参加成立会的有13人，选出了5位常委，黄炎培当选为第一任主席。
+
+
+ 1945年，他还创立了民主建国会并担任第一任主委，带领大家积极投入“反内战、保和平”的民主斗争，为国家的和平稳定奔走呼号。
+
+
+
+ {/* 光标2的引导对话 */}
{
setGuideVisible(visible);
- // 对话结束后显示题目
+ // 如果对话结束，显示视频
if (!visible) {
- setShowQuiz(true);
+ setVideoVisible(true);
}
}}
- showMask={true}
+ showMask={false}
highlightSelectors={[]}
zIndex={10000}
>
- 哇!这就是历史课上学的"窑洞对"!黄炎培先生和毛主席的这次谈话,是不是破解了"历史周期率"呀?
+ 哇！这就是历史课上学的“窑洞对”！黄炎培先生和毛主席的这次谈话，是不是谈到了“历史周期率”呀？
- 完全正确!1945年7月1日,黄炎培以国民参政员的身份,带着考察团一行六人赴延安考察,中共中央领导人毛泽东、朱德、周恩来等都亲自到机场迎接。7月4日,他和毛泽东主席长谈了十几个小时,这场对话能和诸葛亮的"隆中对"相媲美。
+ 完全正确！1945年7月1日，黄炎培以国民参政员的身份，带着考察团一行六人赴延安考察，中共中央领导人毛泽东、朱德、周恩来等都亲自到机场迎接。7月4日，他和毛泽东主席长谈了十几个小时，这场对话能和诸葛亮的“隆中对”相媲美。
- 谈话中,黄炎培提出了一个深刻的问题:"其兴也勃焉,其亡也忽焉",也就是历代王朝逃不开的"历史周期率"。毛泽东主席当场回答:"我们已经找到新路,这条新路就是民主。
+ 谈话中，黄炎培提出了一个深刻的问题：“其兴也勃焉，其亡也忽焉”，也就是历代王朝逃不开的“历史周期率”。毛泽东主席当场回答：“我们已经找到新路，我们能跳出这周期律，这条新路就是民主。”
- "后来,黄炎培把这段对话写进了《延安归来》这本书,一夜之间就畅销十万册,成为当时最热门的书籍,而"实行民主"也被大家称为破解历史周期率的"初版答案"。
+ 后来，黄炎培把这段对话写进了《延安归来》这本书，一夜之间就畅销十万册，成为当时最热门的书籍，而“实行民主”也被大家称为破解历史周期率的“初版答案”。
{/* 题目 */}
{
{ value: "D", label: "D. 武装斗争" },
]}
correctAnswer="A"
- errorMessage='1945年7月,黄炎培在延安向毛泽东提出"其兴也勃焉,其亡也忽焉"的历史周期率之问。毛泽东当即回答:"我们已经找到新路,这条新路就是民主。"黄炎培将这一对话写入《延安归来》,首次公开提出以"民主"破解历代王朝兴衰循环的命题。该书一夜之间畅销十万册,使"实行民主"成为当时社会各界瞩目的"初版答案",故选A。'
+ errorMessage="1945年7月，黄炎培在延安向毛泽东提出“其兴也勃焉，其亡也忽焉”的历史周期率之问。毛泽东回答：“我们已经找到新路，我们能跳出这周期律，这条新路就是民主。”黄炎培将这一对话写入《延安归来》，首次公开提出以“民主”破解历代王朝兴衰循环的命题。该书一夜之间畅销十万册，使“实行民主”成为当时社会各界瞩目的“初版答案”。"
onSubmit={(value, isCorrect) => {
if (isCorrect) {
setVideoVisible(false);
@@ -219,7 +256,6 @@ const HuangyanpeiPlace5 = () => {
setShowSuccessAlert(false);
}}
/>
-
);
};
diff --git a/src/pages/huangyanpei/place/place6.tsx b/src/pages/huangyanpei/place/place6.tsx
index 5e2f463..43178ff 100644
--- a/src/pages/huangyanpei/place/place6.tsx
+++ b/src/pages/huangyanpei/place/place6.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
import {
ExhibitOverlay,
Title,
@@ -9,6 +9,7 @@ import {
} from "@/components";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
+import { EndingOverlay } from "@/pages/chenyun/reflection/shared/EndingOverlay";
const starName = "huangyanpei";
@@ -26,6 +27,12 @@ const HuangyanpeiPlace6 = () => {
const [visited, setVisited] = useState>(new Set());
// 对话引导状态
const [guideVisible, setGuideVisible] = useState(false);
+ // 结束窗口状态
+ const [endingVisible, setEndingVisible] = useState(false);
+ // 是否已经显示过结束窗口（防止重复弹出）
+ const [hasShownEnding, setHasShownEnding] = useState(false);
+
+ const [Leave, setLeave] = useState(false);
const handleOpenExhibit = (index: 1) => {
// 同时打开展品和对话
@@ -33,6 +40,18 @@ const HuangyanpeiPlace6 = () => {
setGuideVisible(true);
};
+ // 当 cursor 已浏览后，显示结束窗口（只显示一次）
+ useEffect(() => {
+ if (visited.has(1) && !hasShownEnding && !endingVisible) {
+ // 延迟一下显示，确保展品关闭动画完成
+ const timer = setTimeout(() => {
+ setEndingVisible(true);
+ setHasShownEnding(true);
+ }, 500);
+ return () => clearTimeout(timer);
+ }
+ }, [visited, hasShownEnding, endingVisible]);
+
const progressCount = visited.size;
const total = 1;
const completed = progressCount >= total;
@@ -51,7 +70,7 @@ const HuangyanpeiPlace6 = () => {
}}
>
{
read={visited.has(1)}
/>
- {completed && (
+ {Leave && (
<Image
className="absolute bottom-0 right-4"
- src={getStaticImage("components/place/继续前进")}
+ src={getStaticImage("components/place/离开场景")}
button
onClick={() => {
navigate(`/${moduleName}/${starName}/home`);
@@ -104,7 +123,7 @@ const HuangyanpeiPlace6 = () => {
<GuideSteps
visible={guideVisible}
onVisibleChange={setGuideVisible}
- showMask={true}
+ showMask={false}
highlightSelectors={[]}
zIndex={10000}
>
@@ -112,7 +131,7 @@ const HuangyanpeiPlace6 = () => {
新中国成立后,黄炎培先生还继续从事教育工作吗?我们现在的中职教育体系,是不是也有他当年的理念呀?
</GuideStepsItem>
<GuideStepsItem speaker="guide">
- 当然啦!1949年10月19日,71岁的黄炎培出任政务院副总理兼轻工业部部长,依然没有放下他毕生追求的职业教育事业。他把中华职教社的骨干力量全部调到北京,亲自起草《关于改革学制的决定》...
+ 当然啦!1949年10月19日,71岁的黄炎培出任政务院副总理兼轻工业部部长,依然没有放下他毕生追求的职业教育事业。他把中华职教社的骨干力量全部调到北京,亲自起草《关于改革学制的决定》。
</GuideStepsItem>
<GuideStepsItem speaker="guide">
第一次把"中等专业学校"正式纳入国家学制,让职业教育有了明确的国家定位。1952年,他又推动建立了上海机械学校、南京航空学校等五所中专,这些学校为国家"一五"计划输送了6.3万名技术工人,为工业发展提供了坚实的人才支撑。
@@ -121,6 +140,18 @@ const HuangyanpeiPlace6 = () => {
黄炎培先生曾说过:"我要把最后一滴血,滴在职业教育的讲台上。"他用一生践行了这句话,而我们现在中职教育强调的"工学结合、德技并修",正是对他"手脑并用、注重实践"理念的传承和发展。
</GuideStepsItem>
</GuideSteps>
+
+ {/* 结束窗口 */}
+ <EndingOverlay
+ visible={endingVisible}
+ text={`从川沙"内史第"的求学少年，到中华职教社的拓荒者，再到新中国职业教育的奠基人，黄炎培先生用一生诠释了"教育救国"的初心。他曾说，教育不是把篮子装满，而是把灯点亮。想知道百年前的少年们，是怎样从懵懂学子，一步步成长为手握技能、心怀家国的青年吗？接下来，请你化身成为一名川沙少年，踏入1903年刚改制的川沙小学堂，跟着黄先生的脚步一路学习，一路成长，亲身体验那段热血又鲜活的青年成长之路吧！`}
+ onContinue={() => {
+ setEndingVisible(false);
+ // 标记为已显示过，防止再次弹出
+ setHasShownEnding(true);
+ setLeave(true);
+ }}
+ />
</div>
);
};