feat:init
This commit is contained in:
zhongyidian committed
1 parent
53d0eeac6b
commit
ae0c050010
494 files changed
+17701
-2318
No files matched your search
@@ -0,0 +1,187 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
} from "@/components";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
// starName 固定为 chenyun
|
||||
const starName = "chenyun";
|
||||
|
||||
// 展品 ID 与资源路径映射
|
||||
const exhibitSrcMap: Record<1 | 2, string> = {
|
||||
1: "chenyun/place4/场景4展品1",
|
||||
2: "chenyun/place4/场景4展品2",
|
||||
};
|
||||
const ChenyunPlace4 = () => {
|
||||
const navigate = useNavigate();
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string;
|
||||
}>();
|
||||
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
|
||||
// 展品1引导对话
|
||||
const [guideVisible, setGuideVisible] = useState(false);
|
||||
const [guideStep, setGuideStep] = useState(0);
|
||||
// 展品2的引导对话
|
||||
const [guideVisible2, setGuideVisible2] = useState(false);
|
||||
const [guideStep2, setGuideStep2] = useState(0);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
if (index === 1) {
|
||||
// 展品1：点击时同时打开展品和引导对话
|
||||
setActiveExhibitId(1);
|
||||
setGuideVisible(true);
|
||||
setGuideStep(0);
|
||||
} else {
|
||||
// 展品2：点击时同时打开展品和引导对话
|
||||
setActiveExhibitId(2);
|
||||
setGuideVisible2(true);
|
||||
setGuideStep2(0);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听GuideSteps步骤变化，仅同步当前步骤
|
||||
const handleGuideStepChange = (step: number) => {
|
||||
setGuideStep(step);
|
||||
};
|
||||
|
||||
const handleGuideStepChange2 = (step: number) => {
|
||||
setGuideStep2(step);
|
||||
};
|
||||
|
||||
const progressCount = visited.size;
|
||||
const total = 2;
|
||||
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/place4/场景4`),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<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}/place3`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1 */}
|
||||
<Cursor
|
||||
className="absolute left-180 top-120"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
/>
|
||||
{/* 展品2 */}
|
||||
<Cursor
|
||||
className="absolute right-2 top-100"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
/>
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-0"
|
||||
src={getStaticImage("chenyun/place3/继续前进3")}
|
||||
button
|
||||
onClick={() => {
|
||||
navigate(`/${moduleName}/${starName}/place5`);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 遮罩层 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(activeExhibitId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
setActiveExhibitId(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
onVisibleChange={setGuideVisible}
|
||||
currentStep={guideStep}
|
||||
onStepChange={handleGuideStepChange}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
这组史料看起来陈云爷爷前往中央苏区了，他在中央苏区主要负责哪些工作呢？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
1932年3月，陈云担任中共临时中央政治局常委，兼任全国总工会党团书记。1933年1月，陈云离开上海前往中央苏区首府瑞金，继续参加中共中央和全国总工会的领导工作。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
虽然陈云在中央苏区的任务主要是领导工人运动，但是陈云总是能针对一些棘手的经济问题提出较出色的建议。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
在中央苏区时期，陈云也关注和积极参与解决了许多经济难题。1934年，在中共六届五中全会上，陈云被选为中央政治局委员、常委，兼任中央白区工作部部长。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 展品2的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible2}
|
||||
onVisibleChange={setGuideVisible2}
|
||||
currentStep={guideStep2}
|
||||
onStepChange={handleGuideStepChange2}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
苏区的经济工作一定不简单，陈云是如何开展工作的呢？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
中央苏区时期的经济斗争，是陈云经济工作能力的“淬炼场”。陈云分析了“左”倾经济政策的表现、危害以及原因，他强调，当务之急是重新严格审查各个企业、工厂以及商店、大小作坊的实际承受力和经济支付能力，
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
从实际出发，实事求是地制定符合中央苏维埃区域每一个工厂、企业、作坊发展需求的劳动政策。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
陈云提议建立合作社，广泛吸收失业工人加入，多听取工人建议、增强企业管理的民主性，从而更好地建设苏区经济。这些做法为他日后主持全国财经工作积累了宝贵经验。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChenyunPlace4;
|
||||
Reference in new issue
Block a user