zhongyidian
cf64e7ec50
- 在 DragQuizPanel 组件中添加空白分隔符功能，增强用户交互性。 - 更新多个场景中的图像资源，确保视觉内容的准确性和一致性。 - 调整引导对话文本，提升信息传达的清晰度。 - 引入新的拖拽题逻辑，优化用户填写体验。
276 lines
8.9 KiB
TypeScript
276 lines
8.9 KiB
TypeScript
import { useState, useRef } from "react";
|
|
import {
|
|
ExhibitOverlay,
|
|
Title,
|
|
Image,
|
|
Cursor,
|
|
GuideSteps,
|
|
GuideStepsItem,
|
|
Video,
|
|
type VideoRef,
|
|
} from "@/components";
|
|
import { useCursorController } from "@/hooks/useCursorController";
|
|
import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
const starName = "sunzhongshan";
|
|
|
|
const exhibitSrcMap: Record<1 | 2 | 3 | 4, string> = {
|
|
1: "sunzhongshan/place2/铁路计划图",
|
|
2: "sunzhongshan/place2/陆军大元帅时佩带的指挥刀",
|
|
3: "sunzhongshan/place2/917.9.10孙中山就任中华民国军政府海陆军大元帅留影",
|
|
4: "sunzhongshan/place2/实业计划",
|
|
};
|
|
|
|
const SunzhongshanPlace2 = () => {
|
|
const navigate = useNavigate();
|
|
const { moduleName } = useParams<{
|
|
moduleName: string;
|
|
}>();
|
|
|
|
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | 4 | null>(
|
|
null
|
|
);
|
|
const [visited, setVisited] = useState<Set<number>>(new Set());
|
|
|
|
// Cursor 顺序控制：1 -> 2 -> 3 -> 4
|
|
const { isEnabled } = useCursorController({
|
|
initialEnabled: [1],
|
|
dependencies: {
|
|
2: [3],
|
|
3: [4],
|
|
4: [1],
|
|
},
|
|
visited: visited,
|
|
});
|
|
|
|
// 光标1的对话状态
|
|
const [guide1Visible, setGuide1Visible] = useState(false);
|
|
const [guide1Step, setGuide1Step] = useState(0);
|
|
// 光标1的视频状态
|
|
const [showVideo1, setShowVideo1] = useState(false);
|
|
const video1Ref = useRef<VideoRef>(null);
|
|
|
|
// 光标4的对话状态
|
|
const [guide4Visible, setGuide4Visible] = useState(false);
|
|
const [guide4Step, setGuide4Step] = useState(0);
|
|
|
|
// 光标2的视频状态
|
|
const [showVideo2, setShowVideo2] = useState(false);
|
|
const video2Ref = useRef<VideoRef>(null);
|
|
|
|
const handleOpenExhibit = (index: 1 | 2 | 3 | 4) => {
|
|
setActiveExhibitId(index);
|
|
// 根据不同的展品显示对应的对话，并重置进度
|
|
if (index === 1) {
|
|
setGuide1Step(0);
|
|
setGuide1Visible(true);
|
|
} else if (index === 4) {
|
|
setGuide4Step(0);
|
|
setGuide4Visible(true);
|
|
}
|
|
};
|
|
|
|
const progressCount = visited.size;
|
|
const total = 4;
|
|
const completed = progressCount >= total;
|
|
const subtitle = completed
|
|
? "探索孙中山故居纪念馆老宅堂屋(已完成)"
|
|
: `探索孙中山故居纪念馆老宅堂屋(${progressCount}/${total})`;
|
|
const subtitleClassName = completed
|
|
? "text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]"
|
|
: undefined;
|
|
|
|
return (
|
|
<div
|
|
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: getBackgroundImage(`sunzhongshan/place2/背景`),
|
|
}}
|
|
>
|
|
<Title
|
|
title="讨袁护法·捍卫共和"
|
|
subtitle={subtitle}
|
|
subtitleClassName={subtitleClassName}
|
|
className="absolute top-10 left-1/2 -translate-x-1/2"
|
|
/>
|
|
|
|
<Image
|
|
className="absolute right-5 top-5"
|
|
src={getStaticImage("components/离开")}
|
|
button
|
|
onClick={() => {
|
|
if (moduleName && starName) {
|
|
navigate(`/${moduleName}/${starName}/place1`);
|
|
}
|
|
}}
|
|
/>
|
|
{/* 光标1-铁路计划图 */}
|
|
<Cursor
|
|
className="absolute left-160 top-114"
|
|
onClick={() => handleOpenExhibit(1)}
|
|
read={visited.has(1)}
|
|
disabled={!isEnabled(1)}
|
|
/>
|
|
{/* 光标2-陆军大元帅时佩带的指挥刀 */}
|
|
<Cursor
|
|
className="absolute left-235 bottom-95"
|
|
onClick={() => handleOpenExhibit(2)}
|
|
read={visited.has(2)}
|
|
disabled={!isEnabled(2)}
|
|
/>
|
|
{/* 光标3-917.9.10孙中山就任中华民国军政府海陆军大元帅留影 */}
|
|
<Cursor
|
|
className="absolute left-241.5 top-119"
|
|
onClick={() => handleOpenExhibit(3)}
|
|
read={visited.has(3)}
|
|
disabled={!isEnabled(3)}
|
|
/>
|
|
{/* 光标4-实业计划 */}
|
|
<Cursor
|
|
className="absolute right-120 bottom-78"
|
|
onClick={() => handleOpenExhibit(4)}
|
|
read={visited.has(4)}
|
|
disabled={!isEnabled(4)}
|
|
/>
|
|
|
|
{completed && (
|
|
<Image
|
|
className="absolute bottom-5 right-115"
|
|
src={getStaticImage("components/place/r-前进")}
|
|
button
|
|
onClick={() => {
|
|
navigate(`/${moduleName}/${starName}/place3`);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<ExhibitOverlay
|
|
visible={activeExhibitId !== null}
|
|
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
|
onClose={() => {
|
|
const currentId = activeExhibitId;
|
|
// 关闭展品框时，重置所有对话的进度并隐藏对话，确保遮罩层正确清理
|
|
setGuide1Step(0);
|
|
setGuide1Visible(false);
|
|
setGuide4Step(0);
|
|
setGuide4Visible(false);
|
|
|
|
// 关闭展品框时，重置对应对话的进度并隐藏对话
|
|
if (currentId === 1) {
|
|
// 光标1：关闭窗口后播放视频
|
|
setActiveExhibitId(null);
|
|
setShowVideo1(true);
|
|
return;
|
|
} else if (currentId === 2) {
|
|
// 光标2：关闭窗口后播放视频
|
|
setActiveExhibitId(null);
|
|
setShowVideo2(true);
|
|
return;
|
|
} else if (currentId === 4) {
|
|
// 光标4：正常关闭，更新visited状态
|
|
}
|
|
if (currentId !== null) {
|
|
setVisited((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(currentId);
|
|
return next;
|
|
});
|
|
}
|
|
setActiveExhibitId(null);
|
|
}}
|
|
/>
|
|
|
|
{/* 光标1的对话 */}
|
|
<GuideSteps
|
|
visible={guide1Visible}
|
|
currentStep={guide1Step}
|
|
onStepChange={setGuide1Step}
|
|
onVisibleChange={(nextVisible) => {
|
|
setGuide1Visible(nextVisible);
|
|
}}
|
|
showMask={false}
|
|
highlightSelectors={[]}
|
|
zIndex={10000}
|
|
>
|
|
<GuideStepsItem speaker="student">
|
|
这张大大的路线图好复杂,上面画满了铁路线,这是孙中山先生规划的吗?
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
对!这是中国铁路总公司的路线图。孙中山先生辞去临时大总统后,致力于国家的实业建设。他认为"交通为实业之母,铁路又为交通之母"。要让国家强大,首先要发展实业,投身铁路规划与建设就是其中一项重要实践。
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
旁边这本《实业计划》中译稿手稿,就是他对中国实业发展的整体构想,里面不仅有铁路,还有港口、工厂等规划。这个计划也是孙先生在上海居住期间完成的。
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
|
|
{/* 光标1的视频 */}
|
|
{showVideo1 && (
|
|
<Video
|
|
ref={video1Ref}
|
|
src={getPublicPath("video/sunzhongshan/sunzhongshan_05.mp4")}
|
|
className="fixed inset-0 z-[20000]"
|
|
autoPlay
|
|
playsInline
|
|
showSkipButton
|
|
onEnded={() => {
|
|
setShowVideo1(false);
|
|
// 修改cursor状态
|
|
setVisited((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(1);
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 光标4的对话 */}
|
|
<GuideSteps
|
|
visible={guide4Visible}
|
|
currentStep={guide4Step}
|
|
onStepChange={setGuide4Step}
|
|
onVisibleChange={(nextVisible) => {
|
|
setGuide4Visible(nextVisible);
|
|
}}
|
|
showMask={false}
|
|
highlightSelectors={[]}
|
|
zIndex={10000}
|
|
>
|
|
<GuideStepsItem speaker="student">
|
|
真是一个宏伟的计划,可是在内忧外患的时局下,实现起来一定很艰难吧?
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
是的,1913年3月"宋教仁案"将国民党和袁世凯方面的矛盾推向高峰。不愿坐视袁世凯窃取辛亥革命果实后独揽大权,革命党人发动了"二次革命"。可惜革命失败,孙中山先生被迫流亡海外。
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
袁世凯趁机撤销了他"筹办全国铁路全权"的职务,把铁路公司的事权交给了北京政府交通部,公司就这样解散了。
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
|
|
{/* 光标2的视频 */}
|
|
{showVideo2 && (
|
|
<Video
|
|
ref={video2Ref}
|
|
src={getPublicPath("video/sunzhongshan/sunzhongshan_06.mp4")}
|
|
className="fixed inset-0 z-[20000]"
|
|
autoPlay
|
|
playsInline
|
|
showSkipButton
|
|
onEnded={() => {
|
|
setShowVideo2(false);
|
|
// 修改cursor状态
|
|
setVisited((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(2);
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SunzhongshanPlace2;
|