feat: 孙中山对话完善
This commit is contained in:
zhongyidian committed
1 parent
786f29a2f7
commit
b3d30100da
6 files changed
+98
-14
No files matched your search
@@ -460,10 +460,10 @@ const SunzhongshanPlace1 = () => {
|
||||
孙中山先生领导的辛亥革命推动了中国社会的变革,可是这张《民立报》让我有点不明白,孙先生刚当上临时大总统,为什么又很快宣布"解职"了呀?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
中华民国的建立有个重要背景——"南北议和"。辛亥革命中宣告独立的省份大多集中在中国南方,负隅顽抗的清政府将最后希望寄托在主导北洋军阀势力的袁世凯身上。
|
||||
中华民国的建立有个重要背景——"南北议和"。辛亥革命中宣告独立的省份大多集中在中国南方,负隅顽抗的清政府将最后希望寄托在主导北洋军阀势力的袁世凯身上。在列强支持下,袁世凯率军南下...
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
在列强支持下,袁世凯率军南下,一边以武力威胁革命势力,一边又迎合革命党人急于完成统一的愿望,诱使其开展和议。当时,革命党人力量还不够强。为避免国家陷入前途未卜的内战,孙中山先生发表声明:只要清帝退位,袁世凯赞成共和,就推举他做大总统。
|
||||
一边以武力威胁革命势力,一边又迎合革命党人急于完成统一的愿望,诱使其开展和议。当时,革命党人力量还不够强。为避免国家陷入前途未卜的内战,孙中山先生发表声明:只要清帝退位,袁世凯赞成共和,就推举他做大总统。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
|
||||
@@ -1,12 +1,16 @@
|
||||
import { useState } from "react";
|
||||
import { useState, useRef } from "react";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
StudyGuideModal,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
Video,
|
||||
type VideoRef,
|
||||
} from "@/components";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
const starName = "sunzhongshan";
|
||||
@@ -16,6 +20,10 @@ const exhibitSrcMap: Record<1 | 2, string> = {
|
||||
2: "sunzhongshan/place4/上海各界人士在外滩码头欢迎孙中山",
|
||||
};
|
||||
|
||||
// 光标1的展品描述内容（图2）
|
||||
const exhibit1Description =
|
||||
'1924年10月,冯玉祥将军发动"北京政变",推翻了曹锟政府,邀请孙中山先生北上共商国是,希望能实现国家和平统一。孙先生认为"这是一个好机会",于是11月13日从广州出发北上,途经上海、日本、天津等地,一路宣传反帝、反封建主张。孙先生抵达上海时,外滩码头上聚集了前来欢迎的各界代表、群众四千多人。大家关心国家前途命运,拥护孙先生,认同他在《北上宣言》中提出的"废除不平等条约""召开国民会议"等主张,真心希望结束军阀割据,国家实现统一,民族实现独立。';
|
||||
|
||||
const SunzhongshanPlace4 = () => {
|
||||
const navigate = useNavigate();
|
||||
const { moduleName } = useParams<{
|
||||
@@ -24,8 +32,16 @@ const SunzhongshanPlace4 = () => {
|
||||
|
||||
// 学习引导弹窗（进入场景即显示）
|
||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||
// 关闭学习引导后显示的对话（图1）
|
||||
const [showInitialDialog, setShowInitialDialog] = useState(false);
|
||||
const [initialDialogStep, setInitialDialogStep] = useState(0);
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
// 光标1的视频状态
|
||||
const [showVideo1, setShowVideo1] = useState(false);
|
||||
const video1Ref = useRef<VideoRef>(null);
|
||||
// 光标1视频播放后的学习引导状态
|
||||
const [showVideo1Guide, setShowVideo1Guide] = useState(false);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
setActiveExhibitId(index);
|
||||
@@ -91,11 +107,21 @@ const SunzhongshanPlace4 = () => {
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
||||
description={activeExhibitId === 2 ? exhibit1Description : undefined}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
const currentId = activeExhibitId;
|
||||
|
||||
if (currentId === 1) {
|
||||
// 光标1：关闭窗口后播放视频
|
||||
setActiveExhibitId(null);
|
||||
setShowVideo1(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentId !== null) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(activeExhibitId);
|
||||
next.add(currentId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
@@ -103,10 +129,68 @@ const SunzhongshanPlace4 = () => {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 光标1的视频 */}
|
||||
{showVideo1 && (
|
||||
<Video
|
||||
ref={video1Ref}
|
||||
src={getPublicPath("video/sunzhongshan/sunzhongshan_10.mp4")}
|
||||
className="fixed inset-0 z-[20000]"
|
||||
autoPlay
|
||||
playsInline
|
||||
showSkipButton
|
||||
onEnded={() => {
|
||||
setShowVideo1(false);
|
||||
// 视频播放结束后，显示学习引导
|
||||
setShowVideo1Guide(true);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 光标1视频播放后的学习引导 */}
|
||||
<StudyGuideModal
|
||||
visible={showVideo1Guide}
|
||||
onContinue={() => {
|
||||
setShowVideo1Guide(false);
|
||||
// 学习引导关闭后，修改cursor状态
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(1);
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
ailgn="left"
|
||||
>
|
||||
通过了解这些展品背后的故事，我们回顾了孙中山先生这位民主革命先驱伟大的一生，不仅看到了孙先生万难不辞、奔波海上的革命足迹，更感受到了他愈挫愈奋、攀登不已的革命精神。下面，让我们跨越时空回到黎明的前夜，与孙先生一起，探寻国家的出路。
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 关闭学习引导后显示的对话（图1） */}
|
||||
<GuideSteps
|
||||
visible={showInitialDialog}
|
||||
currentStep={initialDialogStep}
|
||||
onStepChange={setInitialDialogStep}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setShowInitialDialog(nextVisible);
|
||||
}}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
革命终于有了可靠的盟友,统一战线建立;北伐战争在有条不紊地筹备中,国家统一在望,孙中山先生一定十分欣慰吧?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
是的。然而长期操劳国事使得孙中山先生身体抱恙。在生命最后的时间里,他仍在为国奔走,始终未曾停歇。看看这张拍摄于1924年11月17日的照片吧。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 学习引导（进入场景即显示，与 place1 保持一致） */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => setShowGuideModal(false)}
|
||||
onContinue={() => {
|
||||
setShowGuideModal(false);
|
||||
// 关闭学习引导后显示对话
|
||||
setShowInitialDialog(true);
|
||||
}}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
|
||||
|
||||
Reference in new issue
Block a user