diff --git a/src/assets/images/components/overlay/bg.png b/src/assets/images/components/overlay/bg.png new file mode 100644 index 0000000..1ec18f2 Binary files /dev/null and b/src/assets/images/components/overlay/bg.png differ diff --git a/src/assets/images/entrance/经济.png b/src/assets/images/entrance/经济.png deleted file mode 100644 index efef1ac..0000000 Binary files a/src/assets/images/entrance/经济.png and /dev/null differ diff --git a/src/assets/images/entrance/经济巨擎.png b/src/assets/images/entrance/经济巨擎.png new file mode 100644 index 0000000..190995a Binary files /dev/null and b/src/assets/images/entrance/经济巨擎.png differ diff --git a/src/assets/images/entrance/艺术名家.png b/src/assets/images/entrance/艺术名家.png index 5715901..dbd356b 100644 Binary files a/src/assets/images/entrance/艺术名家.png and b/src/assets/images/entrance/艺术名家.png differ diff --git a/src/assets/images/entrance/革命先驱.png b/src/assets/images/entrance/革命先驱.png index b12bb1d..fdf3ea7 100644 Binary files a/src/assets/images/entrance/革命先驱.png and b/src/assets/images/entrance/革命先驱.png differ diff --git a/src/assets/images/maozedong/毛泽东故居底图.png b/src/assets/images/maozedong/毛泽东故居底图.png index 8ffecc3..87fac7d 100644 Binary files a/src/assets/images/maozedong/毛泽东故居底图.png and b/src/assets/images/maozedong/毛泽东故居底图.png differ diff --git a/src/components/exhibit/ExhibitOverlay.tsx b/src/components/exhibit/ExhibitOverlay.tsx index 0ec619c..2d30261 100644 --- a/src/components/exhibit/ExhibitOverlay.tsx +++ b/src/components/exhibit/ExhibitOverlay.tsx @@ -372,6 +372,28 @@ const ExhibitOverlay = ({ // 指针抬起 const handlePointerUp = useCallback( (e: React.PointerEvent) => { + 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} > { {clue.title} {typeof clue.content === "string" ? ( -
+
{clue.content}
) : ( -
+
{clue.content}
)} diff --git a/src/components/layout/quiz/DragQuizPanel.tsx b/src/components/layout/quiz/DragQuizPanel.tsx index 7afc7f7..5ca5fe4 100644 --- a/src/components/layout/quiz/DragQuizPanel.tsx +++ b/src/components/layout/quiz/DragQuizPanel.tsx @@ -24,7 +24,7 @@ const DragQuizPanel = ({ >
{/* 题干卡片 */} -
+
{title &&
{title}
}
diff --git a/src/components/letter/LetterToChenyun.tsx b/src/components/letter/LetterToChenyun.tsx index 0d4c77b..f0db563 100644 --- a/src/components/letter/LetterToChenyun.tsx +++ b/src/components/letter/LetterToChenyun.tsx @@ -30,7 +30,7 @@ const LetterToChenyun = ({ 我是____专业的学生。今天，我怀着崇敬又激动的心情，参观了位于上海市青浦区练塘镇的陈云纪念馆，学习了您“不唯上、不唯书、只唯____”的做事准则，还有“综合平衡”“人民至上”的经济思想。我深刻体会到，这些精神不仅是建设年代的智慧结晶，更是新时代指引我们前行的思想灯塔。 -作为新时代大学生，我会在专业学习中____，像您当年练珠算、搞调查那样精益求精；未来无论从事什么工作，都要把服务群众____放在首位；面对困难时不退缩，像您当年稳定物价、推进实业那样，用____本领（结合所学专业）为国家发展贡献自己的力量！ +作为新时代学生，我会在专业学习中____，像您当年练珠算、搞调查那样精益求精；未来无论从事什么工作，都要把服务群众、____放在首位；面对困难时不退缩，像您当年稳定物价、推进实业那样，用____本领（结合所学专业）为国家发展贡献自己的力量！ 站在新时代的起点，我一定以____为志向，勤学苦练，传承精神，让您的务实担当在青春里扎根，让奋斗在建设祖国的实践中绽放光彩！`; @@ -90,10 +90,26 @@ const LetterToChenyun = ({
{(() => { 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 ( -
+
{segments.map((part, partIndex) => { const isLast = partIndex === segments.length - 1; if (isLast) { diff --git a/src/components/letter/LetterToHuangyanpei.tsx b/src/components/letter/LetterToHuangyanpei.tsx index 61d0436..3d83615 100644 --- a/src/components/letter/LetterToHuangyanpei.tsx +++ b/src/components/letter/LetterToHuangyanpei.tsx @@ -93,10 +93,26 @@ const LetterToHuangyanpei = ({
{(() => { 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 ( -
+
{segments.map((part, partIndex) => { const isLast = partIndex === segments.length - 1; if (isLast) { diff --git a/src/components/letter/LetterToLuxun.tsx b/src/components/letter/LetterToLuxun.tsx index 0a3e81f..e4872e0 100644 --- a/src/components/letter/LetterToLuxun.tsx +++ b/src/components/letter/LetterToLuxun.tsx @@ -91,10 +91,26 @@ const LetterToLuxun = ({
{(() => { 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 ( -
+
{segments.map((part, partIndex) => { const isLast = partIndex === segments.length - 1; if (isLast) { diff --git a/src/components/letter/LetterToSunzhongshan.tsx b/src/components/letter/LetterToSunzhongshan.tsx index 970b836..f742a3a 100644 --- a/src/components/letter/LetterToSunzhongshan.tsx +++ b/src/components/letter/LetterToSunzhongshan.tsx @@ -91,10 +91,26 @@ const LetterToSunzhongshan = ({
{(() => { 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 ( -
+
{segments.map((part, partIndex) => { const isLast = partIndex === segments.length - 1; if (isLast) { diff --git a/src/pages/chenyun/internalization.tsx b/src/pages/chenyun/internalization.tsx index c7c5b1a..585cc13 100644 --- a/src/pages/chenyun/internalization.tsx +++ b/src/pages/chenyun/internalization.tsx @@ -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(null); + const audioRef = useRef(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 = () => { ({ value: opt.value, label: opt.label, @@ -232,7 +242,7 @@ const ChenyunInternalization = () => { ({ 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`)} /> + {/* 内化结束后的背景音乐 */} +
); }; diff --git a/src/pages/chenyun/place/place5.tsx b/src/pages/chenyun/place/place5.tsx index ca9fdba..6239a2d 100644 --- a/src/pages/chenyun/place/place5.tsx +++ b/src/pages/chenyun/place/place5.tsx @@ -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); }} /> - - {/* 学习引导 */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/chenyun/place/place6.tsx b/src/pages/chenyun/place/place6.tsx index ba61ffe..be0812b 100644 --- a/src/pages/chenyun/place/place6.tsx +++ b/src/pages/chenyun/place/place6.tsx @@ -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 = () => { 陈云挂帅后的首仗就是打击投机、平抑物价。通过“银元之战”“两白一黑”战役等几次严峻斗争，只用不到一年时间，就迅速稳定了金融物价。 - - {/* 学习引导 */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/chenyun/place/place7.tsx b/src/pages/chenyun/place/place7.tsx index ba2e58d..ceb382b 100644 --- a/src/pages/chenyun/place/place7.tsx +++ b/src/pages/chenyun/place/place7.tsx @@ -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(""); // 标记拖拽题是否已完成 const [quiz2Completed, setQuiz2Completed] = useState(false); - // 学习引导弹窗 - const [showGuideModal, setShowGuideModal] = useState(true); const handleOpenExhibit = (_index: 1) => { // 如果本场景学习已完成（拖拽题已答对），不再响应点击，避免重复播放 @@ -282,7 +279,7 @@ const ChenyunPlace7 = () => { { { />
)} - - {/* 学习引导 */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/chenyun/place/place8.tsx b/src/pages/chenyun/place/place8.tsx index 2efa8f6..b97938c 100644 --- a/src/pages/chenyun/place/place8.tsx +++ b/src/pages/chenyun/place/place8.tsx @@ -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项重点工程。当时陈云重点抓重工业建设和粮食保障，通过“统购统销”稳定粮价，为重点工程项目筑牢根基，亲手铺就了我国工业化的起步之路。 - - {/* 学习引导 */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/chenyun/place/place9.tsx b/src/pages/chenyun/place/place9.tsx index 9721883..93a4985 100644 --- a/src/pages/chenyun/place/place9.tsx +++ b/src/pages/chenyun/place/place9.tsx @@ -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); }} /> - - {/* 学习引导 */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/chenyun/reflection/constants.tsx b/src/pages/chenyun/reflection/constants.tsx index 39b61b2..b60085d 100644 --- a/src/pages/chenyun/reflection/constants.tsx +++ b/src/pages/chenyun/reflection/constants.tsx @@ -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 = { diff --git a/src/pages/chenyun/reflection/constants/mimian.ts b/src/pages/chenyun/reflection/constants/mimian.ts index 60e27a4..d83952e 100644 --- a/src/pages/chenyun/reflection/constants/mimian.ts +++ b/src/pages/chenyun/reflection/constants/mimian.ts @@ -25,8 +25,8 @@ export const MIMIAN_CLUE_DATA: Record< "mimian-intelligence": { type: "text", title: "投机商情报", - content: `申新财团囤积棉纱3万件, - 扬言"控制纱布就能控制上海"。`, + content: `申新财团囤积棉纱3万件 + 扬言"控制纱布就能控制上海"`, }, // 米棉之战 - 全国物资分布 "mimian-distribution": { diff --git a/src/pages/chenyun/reflection/constants/yinyuan.tsx b/src/pages/chenyun/reflection/constants/yinyuan.tsx index 48b8a19..38ccdb3 100644 --- a/src/pages/chenyun/reflection/constants/yinyuan.tsx +++ b/src/pages/chenyun/reflection/constants/yinyuan.tsx @@ -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": { diff --git a/src/pages/chenyun/reflection/index.tsx b/src/pages/chenyun/reflection/index.tsx index 4b93235..e0743ab 100644 --- a/src/pages/chenyun/reflection/index.tsx +++ b/src/pages/chenyun/reflection/index.tsx @@ -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)} /> + {/* 银元之战视频前的标题提示弹窗 */} + { + setShowPreYinyuanAlert(false); + setPlayingVideo("yinyuan"); + }} + /> + {/* 视频处理组件 */} {/* 米棉之战 - 旁白1（图2） */} { + if (value === "A") { + return "很抱歉，你选错了！当时物价上涨已波及多地区，局部限购无法阻止投机商转移物资炒作。上海米、棉依赖外部供应，本地物资匮乏，限购既不解决缺口，还会加剧民众恐慌，扰乱市场秩序。请你再思考一下吧！"; + } else if (value === "B") { + return "很抱歉，你选错了！当时国民党滥发货币导致的贬值阴影未消，民众对新货币缺乏信任。此时增发人民币，会使货币供应量远超物资总量，重蹈贬值覆辙，削弱人民币信用，让投机气焰更盛。请你再思考一下吧！"; + } + }} onSubmit={onQuiz2Submit} /> {/* 米棉之战 - 成功提示框2（单选题2答对后） */} - {/* 米棉之战 - 旁白5（结束语）改用 StudyGuideModal 展示 */} - - 从"银元之战"查封投机枢纽、稳固人民币根基,到"米棉之战"全国统筹调运、集中抛售击溃投机势力,这场经济战线的"淮海战役",不仅平定了物价、安定了民心,更印证了"全国一盘棋"的战略智慧与制度优势。当市场秩序重归稳定,新生政权在经济领域站稳脚跟,这份由陈云同志等老一辈革命家铸就的治理经验,也为新时代经济建设埋下了思想伏笔,等待我们在传承中探索新的实践路径。 - + text={ + '从"银元之战"查封投机枢纽、稳固人民币根基,到"米棉之战"全国统筹调运、集中抛售击溃投机势力,这场经济战线的"淮海战役",不仅平定了物价、安定了民心,更印证了"全国一盘棋"的战略智慧与制度优势。当市场秩序重归稳定,新生政权在经济领域站稳脚跟,这份由陈云同志等老一辈革命家铸就的治理经验,也为新时代经济建设埋下了思想伏笔,等待我们在传承中探索新的实践路径。' + } + /> ); }; - diff --git a/src/pages/chenyun/reflection/shared/ClueItem.tsx b/src/pages/chenyun/reflection/shared/ClueItem.tsx index 3e6eed1..1815fae 100644 --- a/src/pages/chenyun/reflection/shared/ClueItem.tsx +++ b/src/pages/chenyun/reflection/shared/ClueItem.tsx @@ -65,7 +65,15 @@ export const ClueItem = ({
@@ -83,4 +91,3 @@ export const ClueItem = ({
); }; - diff --git a/src/pages/chenyun/reflection/shared/EndingOverlay.tsx b/src/pages/chenyun/reflection/shared/EndingOverlay.tsx new file mode 100644 index 0000000..d20ecd9 --- /dev/null +++ b/src/pages/chenyun/reflection/shared/EndingOverlay.tsx @@ -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 ( +
+ {/* 文本内容层 */} +
+
+ {displayedText} +
+ + {/* 底部渐隐提示条，仅做视觉平衡 */} + {/*
*/} +
+
+ ); +}; diff --git a/src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx b/src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx index b4d9fea..19ce3b6 100644 --- a/src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx +++ b/src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx @@ -21,6 +21,8 @@ export interface YinyuanBattleProps { isAllViewed: boolean; /** 线索状态 */ clueStates: Record; + /** 米棉之战是否已解决 */ + 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); } diff --git a/src/pages/chenyun/reflection/yinyuan/YinyuanQuizzes.tsx b/src/pages/chenyun/reflection/yinyuan/YinyuanQuizzes.tsx index 08164ea..9b8b87e 100644 --- a/src/pages/chenyun/reflection/yinyuan/YinyuanQuizzes.tsx +++ b/src/pages/chenyun/reflection/yinyuan/YinyuanQuizzes.tsx @@ -46,7 +46,7 @@ export const YinyuanQuizzes = ({ {/* 多选题1 - 点击引导图标后显示 */} ); }; - diff --git a/src/pages/entrance/index.tsx b/src/pages/entrance/index.tsx index 447eb8e..dcbe623 100644 --- a/src/pages/entrance/index.tsx +++ b/src/pages/entrance/index.tsx @@ -76,7 +76,7 @@ const EntranceBackgroundMap: Record = { }, }, economic: { - backgroundImage: getBackgroundImage("entrance/经济"), + backgroundImage: getBackgroundImage("entrance/经济巨擎"), Star: { Star1: { image: getStaticImage("entrance/荣德生-解锁"), diff --git a/src/pages/huangyanpei/internalization.tsx b/src/pages/huangyanpei/internalization.tsx index 8a7ced9..7fbf165 100644 --- a/src/pages/huangyanpei/internalization.tsx +++ b/src/pages/huangyanpei/internalization.tsx @@ -153,11 +153,22 @@ const HuangyanpeiInternalization = () => { const [showLetter, setShowLetter] = useState(false); const [showStudyGuide, setShowStudyGuide] = useState(false); const videoRef = useRef(null); + const audioRef = useRef(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`)} /> + {/* 内化结束后的背景音乐 */} +
); }; diff --git a/src/pages/huangyanpei/place/place3.tsx b/src/pages/huangyanpei/place/place3.tsx index c8dc724..bf10025 100644 --- a/src/pages/huangyanpei/place/place3.tsx +++ b/src/pages/huangyanpei/place/place3.tsx @@ -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年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。 - - {/* 学习引导（进入场景即显示，与 place1 保持一致） */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/huangyanpei/place/place4.tsx b/src/pages/huangyanpei/place/place4.tsx index e7e6375..be2b568 100644 --- a/src/pages/huangyanpei/place/place4.tsx +++ b/src/pages/huangyanpei/place/place4.tsx @@ -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 保持一致） */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/huangyanpei/place/place5.tsx b/src/pages/huangyanpei/place/place5.tsx index 0939587..8ee85cb 100644 --- a/src/pages/huangyanpei/place/place5.tsx +++ b/src/pages/huangyanpei/place/place5.tsx @@ -5,7 +5,6 @@ import { Image, Cursor, Video, - StudyGuideModal, GuideSteps, GuideStepsItem, SingleChoiceQuizPanel, @@ -32,8 +31,6 @@ const HuangyanpeiPlace5 = () => { const [visited, setVisited] = useState>(new Set()); const [videoVisible, setVideoVisible] = useState(false); const videoRef = useRef(null); - // 学习引导弹窗（进入场景即显示） - const [showGuideModal, setShowGuideModal] = useState(true); // 展品2视频后的对话引导状态 const [guideVisible, setGuideVisible] = useState(false); // 题目显示状态 @@ -223,18 +220,6 @@ const HuangyanpeiPlace5 = () => { }} /> - {/* 学习引导（进入场景即显示，与 place1 保持一致） */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/huangyanpei/place/place6.tsx b/src/pages/huangyanpei/place/place6.tsx index 4a54f9f..5e2f463 100644 --- a/src/pages/huangyanpei/place/place6.tsx +++ b/src/pages/huangyanpei/place/place6.tsx @@ -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>(new Set()); - // 学习引导弹窗（进入场景即显示） - const [showGuideModal, setShowGuideModal] = useState(true); // 对话引导状态 const [guideVisible, setGuideVisible] = useState(false); @@ -124,19 +121,6 @@ const HuangyanpeiPlace6 = () => { 黄炎培先生曾说过:"我要把最后一滴血,滴在职业教育的讲台上。"他用一生践行了这句话,而我们现在中职教育强调的"工学结合、德技并修",正是对他"手脑并用、注重实践"理念的传承和发展。 - - {/* 学习引导（进入场景即显示，与 place1 保持一致） */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/luxun/internalization.tsx b/src/pages/luxun/internalization.tsx index c22d1de..6e90220 100644 --- a/src/pages/luxun/internalization.tsx +++ b/src/pages/luxun/internalization.tsx @@ -109,11 +109,22 @@ const LuxunInternalization = () => { const [showLetter, setShowLetter] = useState(false); const [showStudyGuide, setShowStudyGuide] = useState(false); const videoRef = useRef(null); + const audioRef = useRef(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`)} /> + {/* 内化结束后的背景音乐 */} +
); }; diff --git a/src/pages/luxun/place/place3.tsx b/src/pages/luxun/place/place3.tsx index b3b41c8..b8161ac 100644 --- a/src/pages/luxun/place/place3.tsx +++ b/src/pages/luxun/place/place3.tsx @@ -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 = () => { 太对了!鲁迅和瞿秋白的故事不仅在于《海上述林》的字里行间,这座小楼的三楼也藏着他们为了革命事业并肩战斗的初心。 - - {/* 学习引导 */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/luxun/place/place4.tsx b/src/pages/luxun/place/place4.tsx index a834303..5cded50 100644 --- a/src/pages/luxun/place/place4.tsx +++ b/src/pages/luxun/place/place4.tsx @@ -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 = () => { 在互动中，读懂先生笔墨间的温度与力量。 - - {/* 学习引导 */} - { - setShowGuideModal(false); - setIntroGuideVisible(true); - setIntroGuideStep(0); - }} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/sunzhongshan/internalization.tsx b/src/pages/sunzhongshan/internalization.tsx index f8b870f..5802657 100644 --- a/src/pages/sunzhongshan/internalization.tsx +++ b/src/pages/sunzhongshan/internalization.tsx @@ -118,11 +118,22 @@ const ChenyunInternalization = () => { const [showLetter, setShowLetter] = useState(false); const [showStudyGuide, setShowStudyGuide] = useState(false); const videoRef = useRef(null); + const audioRef = useRef(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`)} /> + {/* 内化结束后的背景音乐 */} +
); }; diff --git a/src/pages/sunzhongshan/place/place3.tsx b/src/pages/sunzhongshan/place/place3.tsx index 59b7954..1b5c3e0 100644 --- a/src/pages/sunzhongshan/place/place3.tsx +++ b/src/pages/sunzhongshan/place/place3.tsx @@ -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 = () => { 后来俄国十月革命胜利,上海《民国日报》最先在中国报道了这个消息。 - - {/* 学习引导（进入场景即显示，与 place1 保持一致） */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); }; diff --git a/src/pages/sunzhongshan/place/place4.tsx b/src/pages/sunzhongshan/place/place4.tsx index a76a53a..5cec014 100644 --- a/src/pages/sunzhongshan/place/place4.tsx +++ b/src/pages/sunzhongshan/place/place4.tsx @@ -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>(new Set()); @@ -182,23 +180,6 @@ const SunzhongshanPlace4 = () => { 是的。然而长期操劳国事使得孙中山先生身体抱恙。在生命最后的时间里,他仍在为国奔走,始终未曾停歇。看看这张拍摄于1924年11月17日的照片吧。 - - {/* 学习引导（进入场景即显示，与 place1 保持一致） */} - { - setShowGuideModal(false); - // 关闭学习引导后显示对话 - setShowInitialDialog(true); - }} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态； - {"\n"} - 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习； -
); };