160 lines
4.8 KiB
TypeScript
160 lines
4.8 KiB
TypeScript
import { useState } from "react";
|
|
import {
|
|
ExhibitOverlay,
|
|
Title,
|
|
Image,
|
|
Cursor,
|
|
Video,
|
|
Overlay,
|
|
} from "@/components";
|
|
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
|
import { useNavigate, useParams } from "react-router-dom";
|
|
|
|
// starName 固定为 chenyun
|
|
const starName = "chenyun";
|
|
|
|
// 展品 ID 与资源路径映射
|
|
const exhibitSrcMap: Record<1 | 2 | 3, string> = {
|
|
1: "chenyun/place5/场景5展品1",
|
|
2: "chenyun/place5/场景5展品2",
|
|
3: "chenyun/place5/场景5展品3",
|
|
};
|
|
// 展品描述映射
|
|
const exhibitDescriptionMap: Record<1 | 2 | 3, string> = {
|
|
1: "",
|
|
2: "延安时期因为国民党的封锁，陕甘宁边区经济困难。陈云转战陕甘宁边区主持财经工作，他遇到了很多经济难题。1944年新春伊始，陈云开始担任西北财经办事处副主任，工作转到财经方面，这是陈云以主要精力从事领导经济工作的开始。当时，陕甘宁边区在国民党严密封锁下，财经状况严峻，边区物价猛涨，老百姓日常生活必需的布匹和粮食十分缺乏。国民党顽固派封锁边区，企图“不让一粒粮、一尺布进入边区”，同时千方百计阻止边区食盐出口。",
|
|
3: "",
|
|
};
|
|
const ChenyunPlace5 = () => {
|
|
const navigate = useNavigate();
|
|
const { moduleName } = useParams<{
|
|
moduleName: string;
|
|
}>();
|
|
|
|
const [visited, setVisited] = useState<Set<number>>(new Set());
|
|
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
|
|
null
|
|
);
|
|
const [videoVisible3, setVideoVisible3] = useState(false);
|
|
|
|
const handleOpenExhibit = (index: 1 | 2 | 3) => {
|
|
if (index === 3) {
|
|
// 展品3：播放视频，不打开展品
|
|
setVideoVisible3(true);
|
|
return;
|
|
}
|
|
setActiveExhibitId(index);
|
|
};
|
|
|
|
const progressCount = visited.size;
|
|
const total = 3;
|
|
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(`chenyun/place5/场景5`),
|
|
}}
|
|
>
|
|
{/* 标题 */}
|
|
<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}/place4`);
|
|
}
|
|
}}
|
|
/>
|
|
|
|
{/* 展品1 */}
|
|
<Cursor
|
|
className="absolute left-30 top-70"
|
|
onClick={() => handleOpenExhibit(1)}
|
|
read={visited.has(1)}
|
|
/>
|
|
{/* 展品2 */}
|
|
<Cursor
|
|
className="absolute left-107 top-72"
|
|
onClick={() => handleOpenExhibit(2)}
|
|
read={visited.has(2)}
|
|
/>
|
|
|
|
{/* 展品3 */}
|
|
<Cursor
|
|
className="absolute right-170 top-84"
|
|
onClick={() => handleOpenExhibit(3)}
|
|
read={visited.has(3)}
|
|
/>
|
|
|
|
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
|
{completed && (
|
|
<Image
|
|
className="absolute bottom-5 right-20"
|
|
src={getStaticImage("chenyun/place5/继续前进4")}
|
|
button
|
|
onClick={() => {
|
|
navigate(`/${moduleName}/${starName}/place6`);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 展品3视频播放（全屏） */}
|
|
{videoVisible3 && (
|
|
<Video
|
|
src={getPublicPath("video/chenyun/chenyun_07.mp4")}
|
|
className="w-full h-full"
|
|
autoPlay
|
|
playsInline
|
|
showSkipButton
|
|
onEnded={() => {
|
|
setVideoVisible3(false);
|
|
setVisited((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(3);
|
|
return next;
|
|
});
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 遮罩层 */}
|
|
<ExhibitOverlay
|
|
visible={activeExhibitId !== null}
|
|
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
|
description={
|
|
activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
|
|
}
|
|
autoPlayDescription={activeExhibitId === 2}
|
|
onClose={() => {
|
|
if (activeExhibitId !== null) {
|
|
setVisited((prev) => {
|
|
const next = new Set(prev);
|
|
next.add(activeExhibitId);
|
|
return next;
|
|
});
|
|
}
|
|
setActiveExhibitId(null);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ChenyunPlace5;
|