feat: 更新场景和组件,优化用户体验

- 更新多个场景中的引导对话,提升学习互动性。
- 修改组件以清理不必要的学习引导弹窗,简化用户流程。
- 调整文本内容,确保信息准确性和一致性。
- 添加背景音乐控制,增强沉浸式体验。
This commit is contained in:
zhongyidian committed 2026-01-13 18:48:10 +08:00
1 parent d226283e15
commit 71f607f6a3
46 files changed
+423 -372

No files matched your search

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

+23 -2
View File
@@ -372,6 +372,28 @@ const ExhibitOverlay = ({
// 指针抬起
const handlePointerUp = useCallback(
(e: React.PointerEvent<HTMLDivElement>) => {
const dragStart = dragStartRef.current;
// 检测是否是点击(移动距离很小)
if (dragStart && dragStart.pointerId === e.pointerId && onClick) {
// 计算从按下到抬起的移动距离
const dx = e.clientX - dragStart.startX;
const dy = e.clientY - dragStart.startY;
const distance = Math.hypot(dx, dy);
// 如果移动距离小于 5px,认为是点击而不是拖拽
if (distance < 5) {
// 检查 transform 是否改变,如果改变了说明是拖拽
const transformChanged =
Math.abs(transformRef.current.x - dragStart.startTransform.x) >
0.1 ||
Math.abs(transformRef.current.y - dragStart.startTransform.y) > 0.1;
if (!transformChanged) {
onClick();
}
}
}
// 释放指针捕获
if (containerRef.current) {
try {
@@ -405,7 +427,7 @@ const ExhibitOverlay = ({
setIsDragging(pointers.current.size > 0);
},
[]
[onClick]
);
// 双击重置
@@ -541,7 +563,6 @@ const ExhibitOverlay = ({
WebkitPerspective: "1000",
perspective: "1000",
}}
onClick={onClick}
>
<Image
src={exhibitSrc}
+2 -2
View File
@@ -21,11 +21,11 @@ const ClueContent = ({ clue }: ClueContentProps) => {
{clue.title}
</h2>
{typeof clue.content === "string" ? (
<div className="text-3xl leading-16 text-[#896a27] whitespace-pre-line text-center">
<div className="text-3xl leading-16 text-[#896a27] whitespace-pre-line">
{clue.content}
</div>
) : (
<div className="text-3xl leading-16 text-[#896a27] text-center">
<div className="text-3xl leading-16 text-[#896a27]">
{clue.content}
</div>
)}
+1 -1
View File
@@ -24,7 +24,7 @@ const DragQuizPanel = ({
>
<div className="relative w-[1728px] h-[972px] flex flex-col items-center pt-12 pb-14">
{/* 题干卡片 */}
<div className="w-[1600px] rounded-[32px] bg-black/90 px-20 py-12 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
<div className="w-[1700px] rounded-[32px] bg-black/90 px-20 py-12 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
<div className="text-[32px] leading-relaxed text-white">
{title && <div className="mb-4">{title}</div>}
<div>
+18 -2
View File
@@ -30,7 +30,7 @@ const LetterToChenyun = ({
我是____专业的学生。今天,我怀着崇敬又激动的心情,参观了位于上海市青浦区练塘镇的陈云纪念馆,学习了您“不唯上、不唯书、只唯____”的做事准则,还有“综合平衡”“人民至上”的经济思想。我深刻体会到,这些精神不仅是建设年代的智慧结晶,更是新时代指引我们前行的思想灯塔。
作为新时代大学生,我会在专业学习中____,像您当年练珠算、搞调查那样精益求精;未来无论从事什么工作,都要把服务群众____放在首位;面对困难时不退缩,像您当年稳定物价、推进实业那样,用____本领(结合所学专业)为国家发展贡献自己的力量!
作为新时代学生,我会在专业学习中____,像您当年练珠算、搞调查那样精益求精;未来无论从事什么工作,都要把服务群众、____放在首位;面对困难时不退缩,像您当年稳定物价、推进实业那样,用____本领(结合所学专业)为国家发展贡献自己的力量!
站在新时代的起点,我一定以____为志向,勤学苦练,传承精神,让您的务实担当在青春里扎根,让奋斗在建设祖国的实践中绽放光彩!`;
@@ -90,10 +90,26 @@ const LetterToChenyun = ({
<div className="text-[#4e402e] text-[26px] leading-relaxed">
{(() => {
let placeholderIndex = 0;
let foundNiHao = false;
return letterContent.split("\n").map((line, lineIndex) => {
// 检测是否已经找到"您好"行
if (line.includes("您好")) {
foundNiHao = true;
}
// "您好"行之后的非空行需要首行缩进
const needsIndent =
foundNiHao &&
line.trim() !== "" &&
!line.includes("您好");
const segments = line.split("____");
return (
<div key={lineIndex} className="mb-6">
<div
key={lineIndex}
className="mb-6"
style={needsIndent ? { textIndent: "2em" } : {}}
>
{segments.map((part, partIndex) => {
const isLast = partIndex === segments.length - 1;
if (isLast) {
+17 -1
View File
@@ -93,10 +93,26 @@ const LetterToHuangyanpei = ({
<div className="text-[#4e402e] text-[26px] leading-relaxed">
{(() => {
let placeholderIndex = 0;
let foundNiHao = false;
return letterContent.split("\n").map((line, lineIndex) => {
// 检测是否已经找到"您好"行
if (line.includes("您好")) {
foundNiHao = true;
}
// "您好"行之后的非空行需要首行缩进
const needsIndent =
foundNiHao &&
line.trim() !== "" &&
!line.includes("您好");
const segments = line.split("____");
return (
<div key={lineIndex} className="mb-0">
<div
key={lineIndex}
className="mb-0"
style={needsIndent ? { textIndent: "2em" } : {}}
>
{segments.map((part, partIndex) => {
const isLast = partIndex === segments.length - 1;
if (isLast) {
+17 -1
View File
@@ -91,10 +91,26 @@ const LetterToLuxun = ({
<div className="text-[#4e402e] text-[26px] leading-relaxed">
{(() => {
let placeholderIndex = 0;
let foundNiHao = false;
return letterContent.split("\n").map((line, lineIndex) => {
// 检测是否已经找到"您好"行
if (line.includes("您好")) {
foundNiHao = true;
}
// "您好"行之后的非空行需要首行缩进
const needsIndent =
foundNiHao &&
line.trim() !== "" &&
!line.includes("您好");
const segments = line.split("____");
return (
<div key={lineIndex} className="mb-2">
<div
key={lineIndex}
className="mb-2"
style={needsIndent ? { textIndent: "2em" } : {}}
>
{segments.map((part, partIndex) => {
const isLast = partIndex === segments.length - 1;
if (isLast) {
+17 -1
View File
@@ -91,10 +91,26 @@ const LetterToSunzhongshan = ({
<div className="text-[#4e402e] text-[26px] leading-relaxed">
{(() => {
let placeholderIndex = 0;
let foundNiHao = false;
return letterContent.split("\n").map((line, lineIndex) => {
// 检测是否已经找到"您好"行
if (line.includes("您好")) {
foundNiHao = true;
}
// "您好"行之后的非空行需要首行缩进
const needsIndent =
foundNiHao &&
line.trim() !== "" &&
!line.includes("您好");
const segments = line.split("____");
return (
<div key={lineIndex} className="mb-2">
<div
key={lineIndex}
className="mb-2"
style={needsIndent ? { textIndent: "2em" } : {}}
>
{segments.map((part, partIndex) => {
const isLast = partIndex === segments.length - 1;
if (isLast) {
+45 -17
View File
@@ -42,7 +42,7 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
id: "quiz-1",
time: Math.ceil(5.52 * 60), //5.52分钟
title: "题目1",
prompt: "陈云经济思想的核心内容指的是( )。",
prompt: "陈云经济思想的核心内容指的是(\xa0\xa0\xa0\xa0)。",
type: "multiple",
options: [
{ value: "A", label: "综合平衡", isCorrect: true },
@@ -59,7 +59,7 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
id: "quiz-2",
time: Math.ceil(10.01 * 60),
title: "题目2",
prompt: "陈云说过以下哪些话能着重体现出他的经济思想。",
prompt: "陈云说过以下哪些话能着重体现出他的经济思想?",
type: "multiple",
options: [
{
@@ -68,10 +68,10 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
isCorrect: true,
},
{ value: "B", label: "无农不稳,无粮则乱", isCorrect: true },
{ value: "C", label: "个人名利淡如水,党的事业重如山。", isCorrect: true },
{ value: "C", label: "个人名利淡如水,党的事业重如山", isCorrect: true },
{
value: "D",
label: "领导机关制定政策,要用百分之九十以上的时间作调查研究工作。",
label: "领导机关制定政策,要用百分之九十以上的时间作调查研究工作",
isCorrect: true,
},
],
@@ -80,19 +80,18 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
id: "quiz-3",
time: Math.ceil(16.04 * 60),
title: "题目3",
prompt: "我们新时代的青年可以从陈云同志身上学习到哪些精神",
prompt: "新时代的青年可以从陈云身上学习到",
type: "drag",
options: [
{ value: "积极的人生态度", label: "积极的人生态度", isCorrect: true },
{ value: "刻苦的学习精神", label: "刻苦的学习精神", isCorrect: true },
{ value: "朴素的节俭精神", label: "朴素的节俭精神", isCorrect: true },
{ value: "实事求是的精神", label: "实事求是的精神", isCorrect: true },
{ value: "积极的人生态度", label: "A.积极的人生态度", isCorrect: true },
{ value: "刻苦的学习精神", label: "B.刻苦的学习精神", isCorrect: true },
{ value: "朴素的节俭精神", label: "C.朴素的节俭精神", isCorrect: true },
{ value: "实事求是的精神", label: "D.实事求是的精神" },
],
blanks: [
{ id: "blank-1", label: "____" },
{ id: "blank-2", label: "____" },
{ id: "blank-3", label: "____" },
{ id: "blank-4", label: "____" },
],
},
];
@@ -120,11 +119,23 @@ const ChenyunInternalization = () => {
const [showLetter, setShowLetter] = useState(false);
const [showStudyGuide, setShowStudyGuide] = useState(false);
const videoRef = useRef<VideoRef>(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
useEffect(() => {
setVisible(true);
}, []);
// 组件卸载时清理背景音乐
useEffect(() => {
const audio = audioRef.current;
return () => {
if (audio) {
audio.pause();
audio.currentTime = 0;
}
};
}, []);
// 视频加载完成后自动播放
const handleVideoCanPlay = () => {
if (showVideo && videoRef.current) {
@@ -179,9 +190,8 @@ const ChenyunInternalization = () => {
<DragQuizPanel
visible={activeSuccess !== item.id}
zIndex={10000}
title={`${item.title}(拖拽)`}
questionPrefix={`${item.prompt}(`}
questionSuffix=")?"
questionPrefix={`【拖拽】${item.prompt}`}
questionSuffix="等精神。(ABC)"
options={item.options.map((opt) => ({
value: opt.value,
label: opt.label,
@@ -232,7 +242,7 @@ const ChenyunInternalization = () => {
<MultipleChoiceQuizPanel
visible={activeSuccess !== item.id}
zIndex={10000}
title={`${item.title}(多选题):${item.prompt}`}
title={`【多选】${item.prompt}`}
options={item.options.map((opt) => ({
value: opt.value,
label: `${opt.value}. ${opt.label}`,
@@ -282,6 +292,7 @@ const ChenyunInternalization = () => {
successContent,
dragQuizValues,
dragQuizErrors,
triggerPuzzleAnimation,
]
);
@@ -302,6 +313,13 @@ const ChenyunInternalization = () => {
onClick={() => navigate(`/${moduleName}/${starName}/home`)}
/>
{/* 内化结束后的背景音乐 */}
<audio
ref={audioRef}
src={getPublicPath("audio/letter/8如愿.m4a")}
loop
/>
{showVideo && (
<Video
ref={videoRef}
@@ -314,6 +332,12 @@ const ChenyunInternalization = () => {
onEnded={() => {
setShowVideo(false);
setPostGuideVisible(true);
if (audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current.play().catch((error) => {
console.warn("背景音乐播放失败:", error);
});
}
}}
/>
)}
@@ -337,7 +361,7 @@ const ChenyunInternalization = () => {
他用“全国一盘棋”思路化解危机的案例太震撼了,那你能再跟我讲讲,支撑这些成就的核心经济思想是什么吗?
</GuideStepsItem>
<GuideStepsItem speaker="guide">
针对你的这个问题,今天我们有幸邀请到了中国中共党史学会理事,全国陈云思想生平研究会常务理事兼副秘书长,中共一大纪念馆陈列研究部主任,研究馆员房中老师。关于你的问题,我想房老师会给你指点迷津!...
针对你的这个问题,今天我们有幸邀请到了中国中共党史学会理事,全国陈云思想生平研究会常务理事兼副秘书长,中共一大纪念馆陈列研究部主任,研究馆员房中老师。关于你的问题,我想房老师会给你指点迷津!
</GuideStepsItem>
</GuideSteps>
@@ -355,13 +379,13 @@ const ChenyunInternalization = () => {
zIndex={60}
>
<GuideStepsItem speaker="student">
听完房主任的讲解,从陈云爷爷童年成长的水乡故居,到他主持"银元之战""米棉之战"的史料,再到那台称量粮食的天平、握不住的铅笔头,我真切感受到他"不唯上、不唯书、只唯实"的精神,也懂了他"为老百姓做事"的初心...
感谢房老师的讲解!从陈云童年成长的水乡故居,到他主持"银元之战""米棉之战"的史料,再到那台称量粮食的天平、握不住的铅笔头,我真切感受到他"不唯上、不唯书、只唯实"的精神,也懂了他"为老百姓做事"的初心。
</GuideStepsItem>
<GuideStepsItem speaker="student">
这些都让我特别受触动!
</GuideStepsItem>
<GuideStepsItem speaker="guide">
你的感悟很深刻!陈云同志用一生诠释了"务实"和"为人民服务"——从破解沿海地区经济困境,到掌管国家工业化蓝图,再到改革开放时力挺轻纺、钢铁建设支援,每一步都扎根实际、心系百姓。
你的感悟很深刻!陈云同志用一生诠释了“务实”与“为民”——从破解边区经济困境,到擘画国家工业化蓝图,再到改革开放时力挺宝钢建设,每一步都扎根实际、心系百姓。
</GuideStepsItem>
<GuideStepsItem speaker="guide">
你不妨把这份触动凝练成几句心里话,既总结参观的收获,也想想未来该如何践行这份精神,用自己的行动传承这份初心吧!
@@ -382,6 +406,10 @@ const ChenyunInternalization = () => {
<StudyGuideModal
visible={showStudyGuide}
onContinue={() => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
}
setShowStudyGuide(false);
navigate(`/${moduleName}/${starName}/home`);
}}
+5 -5
View File
@@ -163,11 +163,11 @@ const ChenyunPlace1 = () => {
setVisible(true);
}}
>
同学你好,欢迎来到走进故居-对话学习模块!{"\n"}
进入陈云故居后,我们一起来了解陈云同志经历的7个阶段:“水乡少年
艰辛成长”、“商务启航 投身革命”、“苏区淬炼 崭露头角”、“延安担当
经济破局”、“恢复时期 经济奠基”、“建设时期 务实兴邦”、“改革浪潮
擘画实业”。
同学你好,欢迎来到“走进故居·对话”学习模块!{"\n"}
此刻你正站在陈云同志的故居堂屋里,接下来请跟着时光的脚步,
一起翻开他人生的7帧珍贵篇章:水乡少年·艰辛成长、商务启航·投身革命、
苏区淬炼·崭露头角、延安担当·经济破局、恢复时期·经济奠基、建设时期·务实兴邦、
改革浪潮·擘画实业。准备好一起走进这段滚烫的岁月了吗?
</StudyGuideModal>
{/* 学习说明对话框 */}
-16
View File
@@ -6,7 +6,6 @@ import {
Cursor,
GuideSteps,
GuideStepsItem,
StudyGuideModal,
} from "@/components";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
@@ -46,8 +45,6 @@ const ChenyunPlace4 = () => {
// 展品2的引导对话
const [guideVisible2, setGuideVisible2] = useState(false);
const [guideStep2, setGuideStep2] = useState(0);
// 学习引导弹窗
const [showGuideModal, setShowGuideModal] = useState(true);
const handleOpenExhibit = (index: 1 | 2) => {
if (index === 1) {
@@ -197,19 +194,6 @@ const ChenyunPlace4 = () => {
陈云提议建立合作社,广泛吸收失业工人加入,多听取工人建议、增强企业管理的民主性,从而更好地建设苏区经济。这些做法为他日后主持全国财经工作积累了宝贵经验。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导 */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-16
View File
@@ -5,7 +5,6 @@ import {
Image,
Cursor,
Video,
StudyGuideModal,
GuideSteps,
GuideStepsItem,
} from "@/components";
@@ -51,8 +50,6 @@ const ChenyunPlace5 = () => {
const visitedExhibits = getVisitedExhibits(place);
const visited = new Set(visitedExhibits);
const [videoVisible3, setVideoVisible3] = useState(false);
// 学习引导弹窗
const [showGuideModal, setShowGuideModal] = useState(true);
// 展品1引导对话
const [guideVisible, setGuideVisible] = useState(false);
@@ -196,19 +193,6 @@ const ChenyunPlace5 = () => {
setActiveExhibitId(null);
}}
/>
{/* 学习引导 */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-16
View File
@@ -6,7 +6,6 @@ import {
Cursor,
GuideSteps,
GuideStepsItem,
StudyGuideModal,
} from "@/components";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
@@ -41,8 +40,6 @@ const ChenyunPlace6 = () => {
const visited = new Set(visitedExhibits);
const [guideVisible, setGuideVisible] = useState(false);
const [guideStep, setGuideStep] = useState(0);
// 学习引导弹窗
const [showGuideModal, setShowGuideModal] = useState(true);
const handleOpenExhibit = () => {
// 展品1:点击时同时打开展品和引导对话,从第1步开始
@@ -147,19 +144,6 @@ const ChenyunPlace6 = () => {
陈云挂帅后的首仗就是打击投机、平抑物价。通过“银元之战”“两白一黑”战役等几次严峻斗争,只用不到一年时间,就迅速稳定了金融物价。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导 */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
+2 -19
View File
@@ -10,7 +10,6 @@ import {
type SingleChoiceOption,
type DragFillResult,
SingleChoiceQuizPanel,
StudyGuideModal,
} from "@/components";
import { SuccessAlert, DragQuizPanel } from "@/components/layout";
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
@@ -92,8 +91,6 @@ const ChenyunPlace7 = () => {
const [successAlertContent, setSuccessAlertContent] = useState<string>("");
// 标记拖拽题是否已完成
const [quiz2Completed, setQuiz2Completed] = useState(false);
// 学习引导弹窗
const [showGuideModal, setShowGuideModal] = useState(true);
const handleOpenExhibit = (_index: 1) => {
// 如果本场景学习已完成(拖拽题已答对),不再响应点击,避免重复播放
@@ -282,7 +279,7 @@ const ChenyunPlace7 = () => {
<SingleChoiceQuizPanel
visible={quizVisible}
zIndex={10002}
title={`题目1(单选题):1949年6月,中共中央指示打击银元投机活动,金条、银元一律由人民银行挂牌收兑,铁路交通事业,税收一律收人民币。同时,上海军管会查封了证券大楼。这次“银元之战”(\xa0\xa0\xa0\xa0)。`}
title={`【单选】1949年6月,中共中央指示打击银元投机活动,金条、银元一律由人民银行挂牌收兑,铁路交通事业,税收一律收人民币。同时,上海军管会查封了证券大楼。这次“银元之战”(\xa0\xa0\xa0\xa0)。`}
options={QUIZ1_OPTIONS}
correctAnswer={"B"}
errorMessage={quizError}
@@ -347,8 +344,7 @@ const ChenyunPlace7 = () => {
<DragQuizPanel
visible={quiz2Visible}
zIndex={10012}
title="题目2(拖拽)"
questionPrefix='新中国成立后,为了稳定物价,中央政府组织了"两白一黑"的集中调运,"两白一黑"指的是('
questionPrefix='【拖拽】新中国成立后,为了稳定物价,中央政府组织了"两白一黑"的集中调运,"两白一黑"指的是('
questionSuffix=")。"
options={QUIZ2_OPTIONS}
blanks={QUIZ2_BLANKS}
@@ -399,19 +395,6 @@ const ChenyunPlace7 = () => {
/>
</div>
)}
{/* 学习引导 */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-16
View File
@@ -6,7 +6,6 @@ import {
Cursor,
GuideSteps,
GuideStepsItem,
StudyGuideModal,
} from "@/components";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
@@ -45,8 +44,6 @@ const ChenyunPlace8 = () => {
const [guideStep, setGuideStep] = useState(0);
const [guideVisible2, setGuideVisible2] = useState(false);
const [guideStep2, setGuideStep2] = useState(0);
// 学习引导弹窗
const [showGuideModal, setShowGuideModal] = useState(true);
const handleOpenExhibit = (index: 1 | 2) => {
setActiveExhibitId(index);
@@ -200,19 +197,6 @@ const ChenyunPlace8 = () => {
第一个五年计划纲要草案的重点是优先发展重工业,特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障,通过“统购统销”稳定粮价,为重点工程项目筑牢根基,亲手铺就了我国工业化的起步之路。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导 */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-16
View File
@@ -7,7 +7,6 @@ import {
Video,
GuideSteps,
GuideStepsItem,
StudyGuideModal,
} from "@/components";
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
@@ -48,8 +47,6 @@ const ChenyunPlace9 = () => {
// 对话引导状态
const [guideVisible, setGuideVisible] = useState(false);
const [guideStep, setGuideStep] = useState(0);
// 学习引导弹窗
const [showGuideModal, setShowGuideModal] = useState(true);
const handleOpenExhibit = (_index: 1) => {
// 展品1:播放视频
@@ -182,19 +179,6 @@ const ChenyunPlace9 = () => {
setActiveExhibitId(null);
}}
/>
{/* 学习引导 */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
+3 -3
View File
@@ -6,9 +6,9 @@ import type { ClueData } from "@/components/layout";
export const starName = "chenyun";
// 欢迎语文案(使用 StudyGuideModal 展示)
export const WELCOME_TEXT = `同学你好,欢迎来到跨越时空-体悟学习模块!
我们即将跨越时空,穿越到"银元之战"和"米棉之战"两个沉浸式场景,来感受陈云同志在1949年的上海是如何应对当时混乱的经济秩序的。`;
export const WELCOME_TEXT = `同学你好,欢迎来到“跨越时空·体悟”学习模块!
请登陆“时空回溯・亲历时代”体验仓,下一站:1949,上海。
你将扎进“银元之战”的旋涡,踏过“米棉之战”的浪潮,以陈云同志特派员的身份体验陈云如何以智破局,稳稳托住这座城的经济天平。时空门已开,准备好入戏了吗?`;
// 视频配置
export const VIDEO_CONFIG = {
@@ -25,8 +25,8 @@ export const MIMIAN_CLUE_DATA: Record<
"mimian-intelligence": {
type: "text",
title: "投机商情报",
content: `申新财团囤积棉纱3万件,
扬言"控制纱布就能控制上海"。`,
content: `申新财团囤积棉纱3万件
扬言"控制纱布就能控制上海"`,
},
// 米棉之战 - 全国物资分布
"mimian-distribution": {
@@ -25,10 +25,10 @@ export const YINYUAN_CLUE_DATA: Record<
"yinyuan-clue1": {
type: "text",
title: "线索一",
content: `沪市银元价格连日暴涨,
5月27日一块银元值100人民币,
6月3日涨到720元,
6月4日涨到1100元。`,
content: `沪市银元价格连日暴涨
5月27日一块银元值100人民币
6月3日涨到720元
6月4日涨到1100元`,
},
// 银元之战 - 线索2
"yinyuan-clue2": {
+31 -4
View File
@@ -4,10 +4,11 @@
*/
import { Image, StudyGuideModal } from "@/components";
import ErrorAlert from "@/components/layout/alert/error-alert";
import TitleAlert from "@/components/layout/alert/title-alert";
import ClueOverlay from "@/components/layout/clue";
import type { ClueData } from "@/components/layout";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
import { useState, useEffect } from "react";
import { useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { WELCOME_TEXT, starName } from "./constants";
import { useClueStates } from "./shared/useClueStates";
@@ -66,6 +67,9 @@ const ChenyunReflection = () => {
/** 米棉之战解锁错误提示 */
const [showMimianLockError, setShowMimianLockError] = useState(false);
/** 银元之战视频前的引导弹窗 */
const [showPreYinyuanAlert, setShowPreYinyuanAlert] = useState(false);
// ========== 线索状态管理 ==========
const {
clueStates,
@@ -74,8 +78,8 @@ const ChenyunReflection = () => {
markClueAsViewed,
} = useClueStates();
// ========== 银元之战状态(从 store 获取) ==========
const { isYinyuanSolved } = useChenyunStore();
// ========== 银元之战和米棉之战状态(从 store 获取) ==========
const { isYinyuanSolved, isMimianSolved } = useChenyunStore();
// ========== 事件处理函数 ==========
@@ -96,7 +100,13 @@ const ChenyunReflection = () => {
return;
}
// 播放对应视频
// 银元之战:先弹出引导,再播放视频
if (fileType === "yinyuan") {
setShowPreYinyuanAlert(true);
return;
}
// 其他文件(如米棉之战)直接播放视频
setPlayingVideo(fileType);
};
@@ -218,9 +228,15 @@ const ChenyunReflection = () => {
expandedFile={expandedFile}
isAllViewed={isYinyuanAllViewed}
clueStates={clueStates}
isMimianSolved={isMimianSolved}
onFileClick={() => handleFileClick("yinyuan")}
onClueClick={handleClueClick}
onPlayVideo={(fileType) => {
// 播放银元之战视频前,先弹出标题提示
if (fileType === "yinyuan") {
setShowPreYinyuanAlert(true);
return;
}
setPlayingVideo(fileType);
}}
/>
@@ -281,6 +297,17 @@ const ChenyunReflection = () => {
onMaskClick={() => setShowMimianLockError(false)}
/>
{/* 银元之战视频前的标题提示弹窗 */}
<TitleAlert
visible={showPreYinyuanAlert}
title=""
subtitle="1949年5月,上海解放。"
onClose={() => {
setShowPreYinyuanAlert(false);
setPlayingVideo("yinyuan");
}}
/>
{/* 视频处理组件 */}
<VideoHandler
playingVideo={playingVideo}
@@ -87,20 +87,8 @@ export const MimianBattle = ({
state.setMimianSuccessAlertContent(
`恭喜你,选择正确!结合当时市场情况,陈云同志在会上做出了"全国一盘棋"的指示。全国统筹调运粮食、棉花、煤炭填补缺口,筑牢物资基础。关键节点集中抛售,让跟风囤货的投机商无力承接,因亏本和高利贷纷纷破产,快速平抑物价、稳固人民币地位。`
);
} else {
// 根据选项显示不同的错误信息
if (value === "A") {
state.setShowMimianSuccessAlert(true);
state.setMimianSuccessAlertContent(
"很抱歉,你选错了!当时物价上涨已波及多地区,局部限购无法阻止投机商转移物资炒作。上海米、棉依赖外部供应,本地物资匮乏,限购既不解决缺口,还会加剧民众恐慌,扰乱市场秩序。请你再思考一下吧!"
);
} else if (value === "B") {
state.setShowMimianSuccessAlert(true);
state.setMimianSuccessAlertContent(
"很抱歉,你选错了!当时国民党滥发货币导致的贬值阴影未消,民众对新货币缺乏信任。此时增发人民币,会使货币供应量远超物资总量,重蹈贬值覆辙,削弱人民币信用,让投机气焰更盛。请你再思考一下吧!"
);
}
}
// 选错时,错误信息已经在题目面板中通过 onWrongSelect 显示,不需要额外的 SuccessAlert
};
// 处理成功提示框2继续
@@ -2,8 +2,9 @@
* 米棉之战题目组件
* 包含单选题1-5、旁白1-3、成功提示框、结束语
*/
import { Narration, SingleChoiceQuizPanel, StudyGuideModal } from "@/components";
import { Narration, SingleChoiceQuizPanel } from "@/components";
import SuccessAlert from "@/components/layout/alert/success-alert";
import { EndingOverlay } from "../shared/EndingOverlay";
export interface MimianQuizzesProps {
/** 是否显示单选题1 */
@@ -97,7 +98,7 @@ export const MimianQuizzes = ({
{/* 米棉之战 - 单选题1(图1) */}
<SingleChoiceQuizPanel
visible={showQuiz1}
title='(单选题)投机商集中冲击"两白一黑"的核心目的是( )。'
title={`(单选)投机商集中冲击"两白一黑"的核心目的是(\xa0\xa0\xa0\xa0)。`}
options={[
{ value: "A", label: "A. 满足市场需求" },
{ value: "B", label: "B. 扰乱经济秩序、动摇政权" },
@@ -109,16 +110,14 @@ export const MimianQuizzes = ({
{/* 米棉之战 - 成功提示框1 */}
<SuccessAlert
visible={
showSuccessAlert && successAlertContent === "恭喜你,选择正确!"
}
visible={showSuccessAlert && successAlertContent === "恭喜你,选择正确!"}
title="恭喜你,选择正确!"
onContinue={onSuccessAlert1Continue}
/>
{/* 米棉之战 - 旁白1(图2) */}
<Narration
text="为了打击投机资本势力,面对上海米价、纱价等上涨,又同时影响到整个华东和华北、中南等地的情况。陈云于1949年7月17日率领中财委抵达上海,开展了一系列的举措,7月27日至8月15日,陈云主持召开了华东、华北、华中、东北、西北5个大区的财经会议,商讨解决上海和全国面临的严峻经济形势问题和对策。"
text="为了打击投机资本势力,面对上海米价、纱价等上涨,又同时影响到整个华东和华北、中南等地的情况,陈云于1949年7月17日率领中财委抵达上海,展开了一系列的举措,7月27日至8月15日,陈云主持召开了华东、华北、华中、东北、西北5个大区的财经会议,商讨解决上海和全国面临的严峻经济形势问题和对策。"
visible={showNarration1}
onClose={onNarration1Close}
enableAnimation={false}
@@ -127,22 +126,26 @@ export const MimianQuizzes = ({
{/* 米棉之战 - 单选题2(图3) */}
<SingleChoiceQuizPanel
visible={showQuiz2}
title="(单选题)你觉得此时解决上海和全国面临的严峻经济形势问题的对策应该是( )。"
title={`(单选)你觉得此时解决上海和全国面临的严峻经济形势问题的对策应该是(\xa0\xa0\xa0\xa0)。`}
options={[
{ value: "A", label: "A. 局部限购" },
{ value: "B", label: "B. 增发货币" },
{ value: "C", label: "C. 全国调运+集中抛售" },
]}
correctAnswer="C"
errorMessage="很抱歉,你选错了!请你再思考一下吧!"
onWrongSelect={(value) => {
if (value === "A") {
return "很抱歉,你选错了!当时物价上涨已波及多地区,局部限购无法阻止投机商转移物资炒作。上海米、棉依赖外部供应,本地物资匮乏,限购既不解决缺口,还会加剧民众恐慌,扰乱市场秩序。请你再思考一下吧!";
} else if (value === "B") {
return "很抱歉,你选错了!当时国民党滥发货币导致的贬值阴影未消,民众对新货币缺乏信任。此时增发人民币,会使货币供应量远超物资总量,重蹈贬值覆辙,削弱人民币信用,让投机气焰更盛。请你再思考一下吧!";
}
}}
onSubmit={onQuiz2Submit}
/>
{/* 米棉之战 - 成功提示框2(单选题2答对后) */}
<SuccessAlert
visible={
showSuccessAlert && successAlertContent.includes("全国一盘棋")
}
visible={showSuccessAlert && successAlertContent.includes("全国一盘棋")}
title="恭喜你,选择正确!"
content={successAlertContent}
onContinue={onSuccessAlert2Continue}
@@ -254,11 +257,11 @@ export const MimianQuizzes = ({
{
value: "A",
label:
"A:突然性、连续性大量抛售。在全国各地同时行动,上海、武汉、西安等地国营公司连续降价抛售粮棉,不给投机资本喘息之机",
"A.突然性、连续性大量抛售,在全国各地同时行动,上海、武汉、西安等地国营公司连续降价抛售粮棉,不给投机资本喘息之机",
},
{
value: "B",
label: `B:逐步降价,配合舆论引导,每日小幅降价,并通过报纸宣传政府物资充足,试图"劝退"投机商`,
label: `B.逐步降价,配合舆论引导,每日小幅降价,并通过报纸宣传政府物资充足,试图"劝退"投机商`,
},
]}
correctAnswer="A"
@@ -286,14 +289,14 @@ export const MimianQuizzes = ({
}}
/>
{/* 米棉之战 - 旁白5(结束语)改用 StudyGuideModal 展示 */}
<StudyGuideModal
{/* 米棉之战 - 旁白5(结束语)使用统一结语覆盖层组件 */}
<EndingOverlay
visible={showNarration5}
onContinue={onNarration5Continue}
>
从"银元之战"查封投机枢纽、稳固人民币根基,到"米棉之战"全国统筹调运、集中抛售击溃投机势力,这场经济战线的"淮海战役",不仅平定了物价、安定了民心,更印证了"全国一盘棋"的战略智慧与制度优势。当市场秩序重归稳定,新生政权在经济领域站稳脚跟,这份由陈云同志等老一辈革命家铸就的治理经验,也为新时代经济建设埋下了思想伏笔,等待我们在传承中探索新的实践路径。
</StudyGuideModal>
text={
'从"银元之战"查封投机枢纽、稳固人民币根基,到"米棉之战"全国统筹调运、集中抛售击溃投机势力,这场经济战线的"淮海战役",不仅平定了物价、安定了民心,更印证了"全国一盘棋"的战略智慧与制度优势。当市场秩序重归稳定,新生政权在经济领域站稳脚跟,这份由陈云同志等老一辈革命家铸就的治理经验,也为新时代经济建设埋下了思想伏笔,等待我们在传承中探索新的实践路径。'
}
/>
</>
);
};
@@ -65,7 +65,15 @@ export const ClueItem = ({
<div
className="absolute left-1/2 -translate-x-1/2 bottom-0"
style={{
marginLeft: viewedMarkOffset.left || (clueKey === "yinyuan-clue1" || clueKey === "yinyuan-clue2" ? "20px" : clueKey === "mimian-intelligence" ? "4px" : clueKey === "mimian-distribution" ? "12px" : "0"),
marginLeft:
viewedMarkOffset.left ||
(clueKey === "yinyuan-clue1" || clueKey === "yinyuan-clue2"
? "20px"
: clueKey === "mimian-intelligence"
? "4px"
: clueKey === "mimian-distribution"
? "12px"
: "0"),
bottom: viewedMarkOffset.bottom || (type === "phone" ? "0" : "0"),
}}
>
@@ -83,4 +91,3 @@ export const ClueItem = ({
</div>
);
};
@@ -0,0 +1,86 @@
import { useEffect, useState } from "react";
import { getStaticImage } from "@/lib/utils";
export interface EndingOverlayProps {
/** 是否可见 */
visible: boolean;
/** 中间显示的文本内容 */
text: string;
/** 点击继续回调 */
onContinue: () => void;
/** 文字动画速度(毫秒/字),默认 60ms */
animationSpeed?: number;
}
/**
* 反思模块统一的结语覆盖层
* 使用 components/overlay/bg 作为背景
*/
export const EndingOverlay = ({
visible,
text,
onContinue,
animationSpeed = 60,
}: EndingOverlayProps) => {
const [displayedText, setDisplayedText] = useState("");
const [isAnimating, setIsAnimating] = useState(false);
// 文字逐字动画
useEffect(() => {
if (!visible) {
setDisplayedText("");
setIsAnimating(false);
return;
}
let currentIndex = 0;
setDisplayedText("");
setIsAnimating(true);
const timer = setInterval(() => {
if (currentIndex < text.length) {
setDisplayedText(text.slice(0, currentIndex + 1));
currentIndex++;
} else {
setIsAnimating(false);
clearInterval(timer);
}
}, animationSpeed);
return () => clearInterval(timer);
}, [visible, text, animationSpeed]);
// 全部文字出现后 1 秒自动关闭
useEffect(() => {
if (!visible) return;
if (isAnimating) return;
if (!text || displayedText !== text) return;
const timer = setTimeout(() => {
onContinue();
}, 800);
return () => clearTimeout(timer);
}, [visible, isAnimating, displayedText, text, onContinue]);
if (!visible) return null;
return (
<div className="fixed inset-0 z-[10000] flex items-center justify-center bg-transparent">
{/* 文本内容层 */}
<div
className="relative z-10 flex items-center max-w-8xl py-50 px-24 h-[825px] bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: `url(${getStaticImage("components/overlay/bg")})`,
}}
>
<div className="text-4xl leading-relaxed text-[#7b3f00] font-semibold tracking-wide">
{displayedText}
</div>
{/* 底部渐隐提示条,仅做视觉平衡 */}
{/* <div className="mt-16 h-4 w-full bg-gradient-to-r from-transparent via-[rgba(0,0,0,0.35)] to-transparent rounded-full" /> */}
</div>
</div>
);
};
@@ -21,6 +21,8 @@ export interface YinyuanBattleProps {
isAllViewed: boolean;
/** 线索状态 */
clueStates: Record<string, boolean>;
/** 米棉之战是否已解决 */
isMimianSolved: boolean;
/** 文件点击回调 */
onFileClick: () => void;
/** 线索点击回调 */
@@ -37,6 +39,7 @@ export const YinyuanBattle = ({
expandedFile,
isAllViewed,
clueStates,
isMimianSolved,
onFileClick,
onClueClick,
onPlayVideo,
@@ -45,6 +48,18 @@ export const YinyuanBattle = ({
const { triggerPuzzleAnimation } = usePuzzleAnimation();
const { isPuzzleUnlocked } = usePuzzleStore();
// 当米棉之战解决后,隐藏银元之战的走势图
useEffect(() => {
if (isMimianSolved) {
state.setShowTrendChartIcon(false);
// 如果 guide2 正在显示,也关闭它
if (state.showGuide2) {
state.setShowGuide2(false);
}
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isMimianSolved]);
// 监听"前往解决"按钮出现的条件,显示第一个提示
useEffect(() => {
const shouldShowGuide1 =
@@ -77,11 +92,13 @@ export const YinyuanBattle = ({
]);
// 监听走势图图标出现的条件,显示第二个提示
// 注意:如果米棉之战已解决,则不显示走势图提示
useEffect(() => {
const shouldShowGuide2 =
state.isYinyuanSolved &&
state.showTrendChartIcon &&
!state.hasShownGuide2;
!state.hasShownGuide2 &&
!isMimianSolved; // 米棉之战解决后不再显示提示
if (shouldShowGuide2) {
// 延迟一下,确保走势图已经渲染
@@ -97,6 +114,7 @@ export const YinyuanBattle = ({
state.hasShownGuide2,
state.setShowGuide2,
state.setHasShownGuide2,
isMimianSolved,
]);
// 监听走势图大图打开的条件,显示第三个提示
@@ -125,7 +143,7 @@ export const YinyuanBattle = ({
// 关闭多选题1,显示旁白文字(图2)
state.setShowQuiz1(false);
state.setNarration2Text(
`六月五日,上海政府抛出十万银元,力图以银元制服银元,使价格回跌。全市举行了"反对银元投机,保障人民生活"的游行和宣传。上海市军委会主任陈毅在全市集会上警告投机奸商"赶快洗手不干,否则勿谓言之不预"。但这两手收效仍微。十万银元被投机商人一吸而空,六月七日银元每元的价格涨到一千八百元人民币。陈云同志判断:'单纯的经济手段已不足以震慑敌人,必须辅以坚定的行政与法律手段。`
`六月五日,上海政府抛出十万银元,力图以银元制服银元,使价格回跌。全市举行了"反对银元投机,保障人民生活"的游行和宣传。上海市军委会主任陈毅在全市集会上警告投机奸商"赶快洗手不干,否则勿谓言之不预"。但这两手收效仍微。十万银元被投机商人一吸而空,六月七日银元每元的价格涨到一千八百元人民币。陈云同志判断:"单纯的经济手段已不足以震慑敌人,必须辅以坚定的行政与法律手段。"`
);
state.setShowNarration2(true);
}
@@ -46,7 +46,7 @@ export const YinyuanQuizzes = ({
{/* 多选题1 - 点击引导图标后显示 */}
<MultipleChoiceQuizPanel
visible={showQuiz1}
title="(多选题)面对银元投机狂潮,你认为首要突破口是? ()"
title="(多选题)面对银元投机狂潮,你认为首要突破口是? "
options={[
{ value: "A", label: "A. 政治攻势(警告、约谈)" },
{ value: "B", label: "B. 经济手段(抛售银元,以银元打银元)" },
@@ -75,11 +75,11 @@ export const YinyuanQuizzes = ({
{/* 多选题2(图3)- 关闭旁白后显示 */}
<MultipleChoiceQuizPanel
visible={showQuiz2}
title="(多选题)面对投机商的猖狂反扑,下一步应采取何种决定性措施?"
title="(多选题)面对投机商的猖狂反扑,下一步应采取哪些决定性措施?"
options={[
{ value: "A", label: "A. 加大银元抛售量,耗尽投机资本。" },
{ value: "B", label: "B. 查封投机核心场所,逮捕首要分子。" },
{ value: "C", label: "C. 颁布法令,严禁银元计价流通。" },
{ value: "A", label: "A. 加大银元抛售量,耗尽投机资本" },
{ value: "B", label: "B. 查封投机核心场所,逮捕首要分子" },
{ value: "C", label: "C. 颁布法令,严禁银元计价流通" },
]}
correctAnswer={["A", "B", "C"]}
errorMessage="单一措施效果有限,请尝试综合施策。"
@@ -103,4 +103,3 @@ export const YinyuanQuizzes = ({
</>
);
};
+1 -1
View File
@@ -76,7 +76,7 @@ const EntranceBackgroundMap: Record<ModuleName, EntranceBackground> = {
},
},
economic: {
backgroundImage: getBackgroundImage("entrance/经济"),
backgroundImage: getBackgroundImage("entrance/经济巨擎"),
Star: {
Star1: {
image: getStaticImage("entrance/荣德生-解锁"),
+30
View File
@@ -153,11 +153,22 @@ const HuangyanpeiInternalization = () => {
const [showLetter, setShowLetter] = useState(false);
const [showStudyGuide, setShowStudyGuide] = useState(false);
const videoRef = useRef<VideoRef>(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
useEffect(() => {
setVisible(true);
}, []);
// 组件卸载时清理背景音乐
useEffect(() => {
return () => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
}
};
}, []);
const handleVideoCanPlay = () => {
if (showVideo && videoRef.current) {
videoRef.current.play().catch((error) => {
@@ -349,6 +360,13 @@ const HuangyanpeiInternalization = () => {
onClick={() => navigate(`/${moduleName}/${starName}/home`)}
/>
{/* 内化结束后的背景音乐 */}
<audio
ref={audioRef}
src={getPublicPath("audio/letter/4不忘初心.m4a")}
loop
/>
{showVideo && (
<Video
ref={videoRef}
@@ -361,6 +379,14 @@ const HuangyanpeiInternalization = () => {
onEnded={() => {
setShowVideo(false);
setPostGuideVisible(true);
if (audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current
.play()
.catch((error) => {
console.warn("背景音乐播放失败:", error);
});
}
}}
/>
)}
@@ -418,6 +444,10 @@ const HuangyanpeiInternalization = () => {
<StudyGuideModal
visible={showStudyGuide}
onContinue={() => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
}
setShowStudyGuide(false);
navigate(`/${moduleName}/${starName}/home`);
}}
-16
View File
@@ -4,7 +4,6 @@ import {
Title,
Image,
Cursor,
StudyGuideModal,
GuideStepsItem,
GuideSteps,
} from "@/components";
@@ -24,8 +23,6 @@ const HuangyanpeiPlace2 = () => {
moduleName: string;
}>();
// 学习引导弹窗(进入场景即显示)
const [showGuideModal, setShowGuideModal] = useState(true);
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
const [visited, setVisited] = useState<Set<number>>(new Set());
@@ -146,19 +143,6 @@ const HuangyanpeiPlace2 = () => {
可就在这一年,南洋公学发生了著名的“墨水瓶风潮”,他毅然跟着蔡元培先生退学,转入蔡先生创办的中国教育会,正式开启了自己“教育救国”的实践。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导(进入场景即显示,与 place1 保持一致) */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-16
View File
@@ -4,7 +4,6 @@ import {
Title,
Image,
Cursor,
StudyGuideModal,
GuideSteps,
GuideStepsItem,
SingleChoiceQuizPanel,
@@ -27,8 +26,6 @@ const HuangyanpeiPlace3 = () => {
moduleName: string;
}>();
// 学习引导弹窗(进入场景即显示)
const [showGuideModal, setShowGuideModal] = useState(true);
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
null
);
@@ -252,19 +249,6 @@ const HuangyanpeiPlace3 = () => {
建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢!1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导(进入场景即显示,与 place1 保持一致) */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-16
View File
@@ -4,7 +4,6 @@ import {
Title,
Image,
Cursor,
StudyGuideModal,
GuideSteps,
GuideStepsItem,
SingleChoiceQuizPanel,
@@ -31,8 +30,6 @@ const HuangyanpeiPlace4 = () => {
moduleName: string;
}>();
// 学习引导弹窗(进入场景即显示)
const [showGuideModal, setShowGuideModal] = useState(true);
const [activeExhibitId, setActiveExhibitId] = useState<
1 | 2 | 3 | 4 | 5 | null
>(null);
@@ -239,19 +236,6 @@ const HuangyanpeiPlace4 = () => {
setShowSuccessAlert(false);
}}
/>
{/* 学习引导(进入场景即显示,与 place1 保持一致) */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-15
View File
@@ -5,7 +5,6 @@ import {
Image,
Cursor,
Video,
StudyGuideModal,
GuideSteps,
GuideStepsItem,
SingleChoiceQuizPanel,
@@ -32,8 +31,6 @@ const HuangyanpeiPlace5 = () => {
const [visited, setVisited] = useState<Set<number>>(new Set());
const [videoVisible, setVideoVisible] = useState(false);
const videoRef = useRef<VideoRef>(null);
// 学习引导弹窗(进入场景即显示)
const [showGuideModal, setShowGuideModal] = useState(true);
// 展品2视频后的对话引导状态
const [guideVisible, setGuideVisible] = useState(false);
// 题目显示状态
@@ -223,18 +220,6 @@ const HuangyanpeiPlace5 = () => {
}}
/>
{/* 学习引导(进入场景即显示,与 place1 保持一致) */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-16
View File
@@ -4,7 +4,6 @@ import {
Title,
Image,
Cursor,
StudyGuideModal,
GuideSteps,
GuideStepsItem,
} from "@/components";
@@ -25,8 +24,6 @@ const HuangyanpeiPlace6 = () => {
const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
const [visited, setVisited] = useState<Set<number>>(new Set());
// 学习引导弹窗(进入场景即显示)
const [showGuideModal, setShowGuideModal] = useState(true);
// 对话引导状态
const [guideVisible, setGuideVisible] = useState(false);
@@ -124,19 +121,6 @@ const HuangyanpeiPlace6 = () => {
黄炎培先生曾说过:"我要把最后一滴血,滴在职业教育的讲台上。"他用一生践行了这句话,而我们现在中职教育强调的"工学结合、德技并修",正是对他"手脑并用、注重实践"理念的传承和发展。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导(进入场景即显示,与 place1 保持一致) */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
+30
View File
@@ -109,11 +109,22 @@ const LuxunInternalization = () => {
const [showLetter, setShowLetter] = useState(false);
const [showStudyGuide, setShowStudyGuide] = useState(false);
const videoRef = useRef<VideoRef>(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
useEffect(() => {
setVisible(true);
}, []);
// 组件卸载时清理背景音乐
useEffect(() => {
return () => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
}
};
}, []);
const handleVideoCanPlay = () => {
if (showVideo && videoRef.current) {
videoRef.current.play().catch((error) => {
@@ -247,6 +258,13 @@ const LuxunInternalization = () => {
onClick={() => navigate(`/${moduleName}/${starName}/home`)}
/>
{/* 内化结束后的背景音乐 */}
<audio
ref={audioRef}
src={getPublicPath("audio/letter/3我和我的祖国.m4a")}
loop
/>
{showVideo && (
<Video
ref={videoRef}
@@ -259,6 +277,14 @@ const LuxunInternalization = () => {
onEnded={() => {
setShowVideo(false);
setPostGuideVisible(true);
if (audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current
.play()
.catch((error) => {
console.warn("背景音乐播放失败:", error);
});
}
}}
/>
)}
@@ -325,6 +351,10 @@ const LuxunInternalization = () => {
<StudyGuideModal
visible={showStudyGuide}
onContinue={() => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
}
setShowStudyGuide(false);
navigate(`/${moduleName}/${starName}/home`);
}}
-17
View File
@@ -3,7 +3,6 @@ import {
Image,
Title,
Cursor,
StudyGuideModal,
GuideSteps,
GuideStepsItem,
} from "@/components";
@@ -27,9 +26,6 @@ const LuxunPlace2 = () => {
moduleName: string;
}>();
// 学习引导弹窗
const [showGuideModal, setShowGuideModal] = useState(true);
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
null
);
@@ -206,19 +202,6 @@ const LuxunPlace2 = () => {
这是鲁迅的自嘲,他曾说"我不会说绵软的苏白,不会打响亮的京腔,不入调,不入流",所以戏称自己的文章是"南腔北调"。这本书里的《〈守常全集》题记》,赞美了李大钊同志,说"他的遗文却将永驻,因为这是先驱者的遗产,革命史上的丰碑。"
</GuideStepsItem>
</GuideSteps>
{/* 学习引导 */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-17
View File
@@ -3,7 +3,6 @@ import {
Image,
Title,
Cursor,
StudyGuideModal,
GuideSteps,
GuideStepsItem,
SingleChoiceQuizPanel,
@@ -48,9 +47,6 @@ const LuxunPlace3 = () => {
moduleName: string;
}>();
// 学习引导弹窗
const [showGuideModal, setShowGuideModal] = useState(true);
const [activeExhibitId, setActiveExhibitId] = useState<
1 | 2 | 3 | 4 | 5 | null
>(null);
@@ -437,19 +433,6 @@ const LuxunPlace3 = () => {
太对了!鲁迅和瞿秋白的故事不仅在于《海上述林》的字里行间,这座小楼的三楼也藏着他们为了革命事业并肩战斗的初心。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导 */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
+1 -21
View File
@@ -5,7 +5,6 @@ import {
Image,
Title,
Cursor,
StudyGuideModal,
SingleChoiceQuizPanel,
Video,
} from "@/components";
@@ -38,9 +37,7 @@ const LuxunPlace5 = () => {
moduleName: string;
}>();
// 学习引导弹窗
const [showGuideModal, setShowGuideModal] = useState(true);
const [introGuideVisible, setIntroGuideVisible] = useState(false);
const [introGuideVisible, setIntroGuideVisible] = useState(true);
const [introGuideStep, setIntroGuideStep] = useState(0);
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
@@ -298,23 +295,6 @@ const LuxunPlace5 = () => {
在互动中,读懂先生笔墨间的温度与力量。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导 */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => {
setShowGuideModal(false);
setIntroGuideVisible(true);
setIntroGuideStep(0);
}}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
@@ -118,11 +118,22 @@ const ChenyunInternalization = () => {
const [showLetter, setShowLetter] = useState(false);
const [showStudyGuide, setShowStudyGuide] = useState(false);
const videoRef = useRef<VideoRef>(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
useEffect(() => {
setVisible(true);
}, []);
// 组件卸载时清理背景音乐
useEffect(() => {
return () => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
}
};
}, []);
// 视频加载完成后自动播放
const handleVideoCanPlay = () => {
if (showVideo && videoRef.current) {
@@ -298,6 +309,13 @@ const ChenyunInternalization = () => {
onClick={() => navigate(`/${moduleName}/${starName}/home`)}
/>
{/* 内化结束后的背景音乐 */}
<audio
ref={audioRef}
src={getPublicPath("audio/letter/2理想.m4a")}
loop
/>
{showVideo && (
<Video
ref={videoRef}
@@ -310,6 +328,14 @@ const ChenyunInternalization = () => {
onEnded={() => {
setShowVideo(false);
setPostGuideVisible(true);
if (audioRef.current) {
audioRef.current.currentTime = 0;
audioRef.current
.play()
.catch((error) => {
console.warn("背景音乐播放失败:", error);
});
}
}}
/>
)}
@@ -366,6 +392,10 @@ const ChenyunInternalization = () => {
<StudyGuideModal
visible={showStudyGuide}
onContinue={() => {
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
}
setShowStudyGuide(false);
navigate(`/${moduleName}/${starName}/home`);
}}
-15
View File
@@ -6,7 +6,6 @@ import {
Cursor,
GuideSteps,
GuideStepsItem,
StudyGuideModal,
Video,
type VideoRef,
} from "@/components";
@@ -28,8 +27,6 @@ const SunzhongshanPlace2 = () => {
moduleName: string;
}>();
// 学习引导弹窗(进入场景即显示)
const [showGuideModal, setShowGuideModal] = useState(true);
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | 4 | null>(
null
);
@@ -256,18 +253,6 @@ const SunzhongshanPlace2 = () => {
/>
)}
{/* 学习引导(进入场景即显示,与 place1 保持一致) */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
-16
View File
@@ -4,7 +4,6 @@ import {
Title,
Image,
Cursor,
StudyGuideModal,
GuideSteps,
GuideStepsItem,
Video,
@@ -30,8 +29,6 @@ const SunzhongshanPlace3 = () => {
moduleName: string;
}>();
// 学习引导弹窗(进入场景即显示)
const [showGuideModal, setShowGuideModal] = useState(true);
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | 4 | null>(
null
);
@@ -356,19 +353,6 @@ const SunzhongshanPlace3 = () => {
后来俄国十月革命胜利,上海《民国日报》最先在中国报道了这个消息。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导(进入场景即显示,与 place1 保持一致) */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => setShowGuideModal(false)}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};
+1 -20
View File
@@ -30,10 +30,8 @@ const SunzhongshanPlace4 = () => {
moduleName: string;
}>();
// 学习引导弹窗(进入场景即显示)
const [showGuideModal, setShowGuideModal] = useState(true);
// 关闭学习引导后显示的对话(图1)
const [showInitialDialog, setShowInitialDialog] = useState(false);
const [showInitialDialog, setShowInitialDialog] = useState(true);
const [initialDialogStep, setInitialDialogStep] = useState(0);
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
const [visited, setVisited] = useState<Set<number>>(new Set());
@@ -182,23 +180,6 @@ const SunzhongshanPlace4 = () => {
是的。然而长期操劳国事使得孙中山先生身体抱恙。在生命最后的时间里,他仍在为国奔走,始终未曾停歇。看看这张拍摄于1924年11月17日的照片吧。
</GuideStepsItem>
</GuideSteps>
{/* 学习引导(进入场景即显示,与 place1 保持一致) */}
<StudyGuideModal
visible={showGuideModal}
onContinue={() => {
setShowGuideModal(false);
// 关闭学习引导后显示对话
setShowInitialDialog(true);
}}
ailgn="left"
>
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
{"\n"}
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
{"\n"}
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
</StudyGuideModal>
</div>
);
};