From 786f29a2f71ca8b2e668ad684305a64081744f92 Mon Sep 17 00:00:00 2001 From: join_zhong Date: Fri, 9 Jan 2026 01:20:13 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E5=AD=99=E4=B8=AD=E5=B1=B1=E5=AF=B9?= =?UTF-8?q?=E8=AF=9D=E5=89=8D3=E4=B8=AA=E5=9C=BA=E6=99=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/luxun/place/place1.tsx | 2 +- src/pages/sunzhongshan/place/place1.tsx | 418 ++++++++++++++++++++++-- src/pages/sunzhongshan/place/place2.tsx | 174 ++++++++-- src/pages/sunzhongshan/place/place3.tsx | 270 ++++++++++++++- src/pages/sunzhongshan/place/place4.tsx | 23 +- 5 files changed, 830 insertions(+), 57 deletions(-) diff --git a/src/pages/luxun/place/place1.tsx b/src/pages/luxun/place/place1.tsx index 9fb8a6e..0da7282 100644 --- a/src/pages/luxun/place/place1.tsx +++ b/src/pages/luxun/place/place1.tsx @@ -146,7 +146,7 @@ const LuxunPlace1 = () => { }} > {`同学你好，欢迎来到走进故居-对话学习模块！ -进入鲁迅故居后，我们一起来了解鲁迅先生经历的5个阶段："风雨前夕的思想淬炼"->"杂文集里的匕首与投枪"->"历史新编中的现实呐喊"->"为亡友编纂的精神丰碑"->"6平方米的红色庇护所"；`} +进入鲁迅故居后，我们一起来了解鲁迅先生经历的4个阶段："风雨前夕的思想淬炼"->"杂文集里的匕首与投枪"->"历史新编中的现实呐喊&为亡友编纂的精神丰碑"->"6平方米的红色庇护所"；`} {/* 引导 */} diff --git a/src/pages/sunzhongshan/place/place1.tsx b/src/pages/sunzhongshan/place/place1.tsx index 0213192..3b09198 100644 --- a/src/pages/sunzhongshan/place/place1.tsx +++ b/src/pages/sunzhongshan/place/place1.tsx @@ -4,12 +4,17 @@ import { GuideStepsItem, Image, Title, - Overlay, + StudyGuideModal, + Video, + type VideoRef, + type DragFillResult, } from "@/components"; import { useNavigate, useParams } from "react-router-dom"; -import { getBackgroundImage, getStaticImage } from "@/lib/utils"; -import { useState } from "react"; +import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils"; +import { useState, useRef } from "react"; import Cursor from "@/components/cursor"; +import { SuccessAlert, DragQuizPanel } from "@/components/layout"; +import { MultipleChoiceQuizPanel } from "@/components/layout/quiz"; // starName 固定为 sunzhongshan const starName = "sunzhongshan"; @@ -29,10 +34,13 @@ const SunzhongshanPlace1 = () => { moduleName: string; }>(); - // 学习说明对话框显示状态 - const [showIntroDialog, setShowIntroDialog] = useState(false); + // 学习引导弹窗 + const [showGuideModal, setShowGuideModal] = useState(true); + // 对话结束后的学习引导弹窗 + const [showAfterDialogGuide, setShowAfterDialogGuide] = useState(false); + const [afterDialogGuideShown, setAfterDialogGuideShown] = useState(false); // 引导对话显示状态 - const [visible, setVisible] = useState(true); + const [visible, setVisible] = useState(false); // 当前激活的展品 ID（只存 ID，不直接存路径，便于作为唯一标识） const [activeExhibitId, setActiveExhibitId] = useState< 1 | 2 | 3 | 4 | 5 | null @@ -40,13 +48,55 @@ const SunzhongshanPlace1 = () => { // 已浏览展品的 ID 集合 const [visited, setVisited] = useState>(new Set()); + // 光标2的对话状态 + const [guide2Visible, setGuide2Visible] = useState(false); + const [guide2Step, setGuide2Step] = useState(0); + // 光标5的对话状态 + const [guide5Visible, setGuide5Visible] = useState(false); + const [guide5Step, setGuide5Step] = useState(0); + // 光标4的对话状态 + const [guide4Visible, setGuide4Visible] = useState(false); + const [guide4Step, setGuide4Step] = useState(0); + // 光标4的视频状态 + const [showVideo4, setShowVideo4] = useState(false); + const video4Ref = useRef(null); + // 光标4的拖拽题状态 + const [dragQuiz4Visible, setDragQuiz4Visible] = useState(false); + const [dragQuiz4Value, setDragQuiz4Value] = useState([]); + const [dragQuiz4Error, setDragQuiz4Error] = useState(""); + const [successAlert4Visible, setSuccessAlert4Visible] = useState(false); + // 光标4的第二个视频状态 + const [showVideo4Second, setShowVideo4Second] = useState(false); + const video4SecondRef = useRef(null); + // 光标3的对话状态 + const [guide3Visible, setGuide3Visible] = useState(false); + const [guide3Step, setGuide3Step] = useState(0); + // 光标1的对话状态 + const [guide1Visible, setGuide1Visible] = useState(false); + const [guide1Step, setGuide1Step] = useState(0); + // 光标1的多选题状态 + const [quiz1Visible, setQuiz1Visible] = useState(false); + const [successAlert1Visible, setSuccessAlert1Visible] = useState(false); + const handleOpenExhibit = (index: 1 | 2 | 3 | 4 | 5) => { setActiveExhibitId(index); - }; - - const handleStartLearning = () => { - setShowIntroDialog(false); - setVisible(true); + // 根据不同的展品显示对应的对话，并重置进度 + if (index === 2) { + setGuide2Step(0); + setGuide2Visible(true); + } else if (index === 5) { + setGuide5Step(0); + setGuide5Visible(true); + } else if (index === 4) { + setGuide4Step(0); + setGuide4Visible(true); + } else if (index === 3) { + setGuide3Step(0); + setGuide3Visible(true); + } else if (index === 1) { + setGuide1Step(0); + setGuide1Visible(true); + } }; const progressCount = visited.size; @@ -85,31 +135,31 @@ const SunzhongshanPlace1 = () => { }} /> - {/* 展品1 */} + {/* 光标1 */} handleOpenExhibit(1)} read={visited.has(1)} /> - {/* 展品2 */} + {/* 光标2 */} handleOpenExhibit(2)} read={visited.has(2)} /> - {/* 展品3 */} + {/* 光标3 */} handleOpenExhibit(3)} read={visited.has(3)} /> - {/* 展品4 */} + {/* 光标4 */} handleOpenExhibit(4)} read={visited.has(4)} /> - {/* 展品5 */} + {/* 光标5 */} handleOpenExhibit(5)} @@ -133,10 +183,36 @@ const SunzhongshanPlace1 = () => { visible={activeExhibitId !== null} src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""} onClose={() => { - if (activeExhibitId !== null) { + const currentId = activeExhibitId; + // 关闭展品框时，重置对应对话的进度并隐藏对话 + if (currentId === 2) { + setGuide2Step(0); + setGuide2Visible(false); + } else if (currentId === 5) { + setGuide5Step(0); + setGuide5Visible(false); + } else if (currentId === 4) { + setGuide4Step(0); + setGuide4Visible(false); + // 光标4：关闭窗口后播放视频 + setActiveExhibitId(null); + setShowVideo4(true); + return; + } else if (currentId === 3) { + setGuide3Step(0); + setGuide3Visible(false); + } else if (currentId === 1) { + setGuide1Step(0); + setGuide1Visible(false); + // 光标1：关闭窗口后显示题目 + setActiveExhibitId(null); + setQuiz1Visible(true); + return; + } + if (currentId !== null) { setVisited((prev) => { const next = new Set(prev); - next.add(activeExhibitId); + next.add(currentId); return next; }); } @@ -144,23 +220,315 @@ const SunzhongshanPlace1 = () => { }} /> + {/* 学习引导词 */} + { + setShowGuideModal(false); + setVisible(true); + }} + > + {`同学你好，欢迎来到走进故居-对话学习模块！ +进入孙中山故居纪念馆后，我们一起来了解孙中山同志经历的7个阶段："立志救国 推翻帝制"、"讨袁护法 捍卫共和"、"与时俱进探索新路"、"抱病北上鞠躬尽瘁"、"革命先驱 永垂不朽"、"思想传承 影响深远"、"精神财富 激励后人"；`} + + {/* 引导 */} { + setVisible(nextVisible); + if (!nextVisible && !afterDialogGuideShown) { + setAfterDialogGuideShown(true); + setShowAfterDialogGuide(true); + } + }} showMask={true} highlightSelectors={[]} > - - 同学你好，欢迎来到走进故居-对话学习模块！ - 进入孙中山故居纪念馆后，我们一起来了解孙中山同志经历的7个阶段：“水乡少年 - 艰辛成长”、“商务启航 投身革命” ... + + 小沪，老师说过，孙中山先生早年学习的是医学。从治病救人到革命救国，他为什么会做出这种转变呢？ - “苏区淬炼 崭露头角”、“延安担当 经济破局”、“恢复时期 经济奠基” - 、“建设时期 务实兴邦”、“改革浪潮 擘画实业” + 来看看这张孙中山先生青年时期的相片吧。 + + {/* 对话结束后的学习引导 */} + setShowAfterDialogGuide(false)} + ailgn="left" + > + 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，浏览展品后蓝色动态光点会变为已浏览状态； + {"\n"} + 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点开查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习； + {"\n"} + 3、所有动态光点的展品全部学习后才能进入下一个场景学习； + + + {/* 光标2的对话 */} + { + setGuide2Visible(nextVisible); + if (!nextVisible) { + setVisited((prev) => { + const next = new Set(prev); + next.add(2); + return next; + }); + } + }} + showMask={true} + highlightSelectors={[]} + zIndex={10000} + > + "革命四杰"? + + 是呀,这是孙中山先生在香港西医书院就读之时与同学的留影。孙先生1887年入学,其间广泛阅读西方自然科学和社会政治学说书籍。常与同学陈少白、尤列、杨鹤龄一起畅谈革命,抨击时政,被戏称为"四大寇"。 + + + + {/* 光标5的对话 */} + { + setGuide5Visible(nextVisible); + if (!nextVisible) { + setVisited((prev) => { + const next = new Set(prev); + next.add(5); + return next; + }); + } + }} + showMask={false} + highlightSelectors={[]} + zIndex={10000} + > + + 这是郑观应写给盛宣怀的信。 + + + 是的。1894年,孙中山先生回乡起草了"上李鸿章书",希望劝谏清政府改良救国。他多方寻找上书门径,这就是作为同乡和前辈的郑观应帮忙写给盛宣怀,希望他向李鸿章推荐孙先生的书信。 + + + + {/* 光标4的对话 */} + { + setGuide4Visible(nextVisible); + }} + showMask={false} + highlightSelectors={[]} + zIndex={10000} + > + + 哇!这张《申报》好震撼,"中华民国万岁""孙大总统万岁",就连发行日期写的都是"中华民国元年元月二日"! + + + 没错!资产阶级民主革命的尝试走过了风雨兼程的十余年,这一过程中孙中山先生一直在探寻救国道路,1905年孙先生在亲自撰写的《民报》发刊词中明确提出了三民主义,即民族、民权、民生这一资产阶级民主革命的政纲。 + + + + {/* 光标4的第一个视频 */} + {showVideo4 && ( +