290 lines
10 KiB
TypeScript
290 lines
10 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import {
|
|
ExhibitOverlay,
|
|
Title,
|
|
Image,
|
|
Cursor,
|
|
GuideSteps,
|
|
GuideStepsItem,
|
|
MultipleChoiceQuizPanel,
|
|
} from '@/components'
|
|
import { getBackgroundImage, getPublicPath, getStaticImage } from '@/lib/utils'
|
|
import { useNavigate, useParams } from 'react-router-dom'
|
|
import { useChenyunStore, saveChenyunStore } from '@/store/chenyunStore'
|
|
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
|
|
import { useCursorController } from '@/hooks/useCursorController'
|
|
import SuccessAlert from '@/components/layout/alert/success-alert'
|
|
import ScaledPortal from '@/components/layout/ScaledPortal'
|
|
|
|
// 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 { triggerPuzzleAnimation } = usePuzzleAnimation()
|
|
|
|
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null)
|
|
|
|
// 使用持久化的访问状态
|
|
const place = 'place4'
|
|
const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useChenyunStore()
|
|
|
|
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
|
|
const visitedExhibits = getVisitedExhibits(place)
|
|
const visited = new Set(visitedExhibits)
|
|
const { isEnabled } = useCursorController({
|
|
initialEnabled: [1],
|
|
dependencies: { 2: [1] },
|
|
visited,
|
|
})
|
|
// 展品1引导对话
|
|
const [guideVisible, setGuideVisible] = useState(false)
|
|
const [guideStep, setGuideStep] = useState(0)
|
|
// 展品2的引导对话
|
|
const [guideVisible2, setGuideVisible2] = useState(false)
|
|
const [guideStep2, setGuideStep2] = useState(0)
|
|
|
|
// 展品2关闭后的题目状态（多选）
|
|
const [quiz2Visible, setQuiz2Visible] = useState(false)
|
|
const [successAlert2Visible, setSuccessAlert2Visible] = useState(false)
|
|
|
|
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)}
|
|
disabled={!isEnabled(1)}
|
|
/>
|
|
{/* 展品2 */}
|
|
<Cursor
|
|
className="absolute right-2 top-100"
|
|
onClick={() => handleOpenExhibit(2)}
|
|
read={visited.has(2)}
|
|
disabled={!isEnabled(2)}
|
|
/>
|
|
|
|
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
|
{completed && (
|
|
<Image
|
|
className="absolute bottom-0 right-0"
|
|
src={getStaticImage('chenyun/place3/继续前进3')}
|
|
button
|
|
onClick={() => {
|
|
setLastVisitedPlace('place5')
|
|
saveChenyunStore()
|
|
navigate(`/${moduleName}/${starName}/place5`)
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* 遮罩层 */}
|
|
<ExhibitOverlay
|
|
visible={activeExhibitId !== null}
|
|
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
|
onOpen={() => {
|
|
if (activeExhibitId === 1) {
|
|
triggerPuzzleAnimation(6)
|
|
}
|
|
}}
|
|
onClose={() => {
|
|
// 展品2：关闭后先进入答题，答对后再标记已读
|
|
if (activeExhibitId === 2) {
|
|
setActiveExhibitId(null)
|
|
setQuiz2Visible(true)
|
|
return
|
|
}
|
|
|
|
// 其他展品：关闭即标记已读
|
|
if (activeExhibitId !== null) {
|
|
markExhibitVisited(place, activeExhibitId)
|
|
}
|
|
setActiveExhibitId(null)
|
|
}}
|
|
/>
|
|
|
|
{/* 展品2的题目 + 成功提示（使用 ScaledPortal 保证层级与缩放） */}
|
|
<ScaledPortal enabled={quiz2Visible || successAlert2Visible} zIndex={10050}>
|
|
<>
|
|
<MultipleChoiceQuizPanel
|
|
visible={quiz2Visible}
|
|
title="【多选】中央苏区时期，陈云开展经济工作的主要做法包括："
|
|
options={[
|
|
{
|
|
value: 'A',
|
|
label: 'A.从实际出发，实事求是地制定符合企业发展需求的劳动政策',
|
|
},
|
|
{
|
|
value: 'B',
|
|
label: 'B.提议建立合作社，吸收失业工人并增强企业管理的民主性',
|
|
},
|
|
{
|
|
value: 'C',
|
|
label: 'C.照搬“左”倾经济政策，严格推行统一的劳动标准',
|
|
},
|
|
{
|
|
value: 'D',
|
|
label: 'D.审查企业、作坊的实际承受能力，避免政策脱离实际',
|
|
},
|
|
]}
|
|
correctAnswer={['A', 'B', 'D']}
|
|
minSelections={1}
|
|
maxSelections={4}
|
|
errorMessage={(selectedValues) => {
|
|
// 选了 C：给出截图中的专属提示
|
|
if (selectedValues.includes('C')) {
|
|
return '陈云反对“左”倾错误。请你再想想吧！'
|
|
}
|
|
// 没选 C 但仍不正确：通常是“选不全”
|
|
return '你的选择还不够全面哦~请你再想想吧！'
|
|
}}
|
|
onSubmit={(_values, isCorrect) => {
|
|
if (isCorrect) {
|
|
setQuiz2Visible(false)
|
|
setSuccessAlert2Visible(true)
|
|
}
|
|
}}
|
|
zIndex={10000}
|
|
/>
|
|
|
|
<SuccessAlert
|
|
visible={successAlert2Visible}
|
|
onContinue={() => {
|
|
setSuccessAlert2Visible(false)
|
|
markExhibitVisited(place, 2)
|
|
}}
|
|
/>
|
|
</>
|
|
</ScaledPortal>
|
|
|
|
{/* 展品1的引导对话 */}
|
|
<GuideSteps
|
|
visible={guideVisible}
|
|
onVisibleChange={setGuideVisible}
|
|
currentStep={guideStep}
|
|
onStepChange={handleGuideStepChange}
|
|
showMask={false}
|
|
highlightSelectors={[]}
|
|
zIndex={10000}
|
|
>
|
|
<GuideStepsItem
|
|
speaker="student"
|
|
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_11.mp3')}
|
|
>
|
|
这组史料看起来陈云前往中央苏区了，他在中央苏区主要负责哪些工作呢？
|
|
</GuideStepsItem>
|
|
<GuideStepsItem
|
|
speaker="guide"
|
|
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_12.mp3')}
|
|
>
|
|
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"
|
|
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_13.mp3')}
|
|
>
|
|
苏区的经济工作一定不简单，陈云是如何开展工作的呢？
|
|
</GuideStepsItem>
|
|
<GuideStepsItem
|
|
speaker="guide"
|
|
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_14.mp3')}
|
|
>
|
|
中央苏区时期的经济斗争，是陈云经济工作能力的“淬炼场”。陈云分析了“左”倾经济政策的表现、危害以及原因。
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
他强调，当务之急是重新严格审查各个企业、工厂以及商店、大小作坊的实际承受力和经济支付能力。从实际出发，实事求是地制定符合中央苏维埃区域每一个工厂、企业、作坊发展需求的劳动政策。
|
|
</GuideStepsItem>
|
|
<GuideStepsItem speaker="guide">
|
|
陈云提议建立合作社，广泛吸收失业工人加入，多听取工人建议、增强企业管理的民主性，从而更好地建设苏区经济。这些做法为他日后主持全国财经工作积累了宝贵经验。
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ChenyunPlace4
|