feat:修改英文双引号
This commit is contained in:
kevinzhu committed
commit
4a2be3b4d0
1351 files changed
+56547
No files matched your search
@@ -0,0 +1,340 @@
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
Image,
|
||||
Title,
|
||||
Overlay,
|
||||
StudyGuideModal,
|
||||
} from '@/components'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage } from '@/lib/utils'
|
||||
import { useState, useEffect } from 'react'
|
||||
import Cursor from '@/components/cursor'
|
||||
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
|
||||
import { useChenyunStore, saveChenyunStore } from '@/store/chenyunStore'
|
||||
import { useCursorController } from '@/hooks/useCursorController'
|
||||
|
||||
// starName 固定为 chenyun
|
||||
const starName = 'chenyun'
|
||||
|
||||
// 展品 ID 与资源路径映射，ID 用来做唯一标识
|
||||
const exhibitSrcMap: Record<1 | 2, string> = {
|
||||
1: 'chenyun/place1/场景1展品1',
|
||||
2: 'chenyun/place1/场景1展品2',
|
||||
// 3: "chenyun/place1/场景1展品3",
|
||||
// 4: "chenyun/place1/场景1展品4",
|
||||
}
|
||||
const ChenyunPlace1 = () => {
|
||||
const navigate = useNavigate()
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string
|
||||
}>()
|
||||
|
||||
// 获取碎片动画触发方法
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
|
||||
// 学习引导弹窗
|
||||
const [showGuideModal, setShowGuideModal] = useState(true)
|
||||
// 对话结束后的学习引导弹窗
|
||||
const [showAfterDialogGuide, setShowAfterDialogGuide] = useState(false)
|
||||
const [afterDialogGuideShown, setAfterDialogGuideShown] = useState(false)
|
||||
// 学习说明对话框显示状态
|
||||
const [showIntroDialog, setShowIntroDialog] = useState(false)
|
||||
// 引导对话显示状态
|
||||
const [visible, setVisible] = useState(false)
|
||||
// 当前激活的展品 ID（只存 ID，不直接存路径，便于作为唯一标识）
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null)
|
||||
|
||||
// 使用持久化的访问状态
|
||||
const place = 'place1'
|
||||
const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useChenyunStore()
|
||||
|
||||
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
|
||||
const visitedExhibits = getVisitedExhibits(place)
|
||||
const visited = new Set(visitedExhibits)
|
||||
|
||||
// Cursor 控制器：使用依赖映射实现自动解锁
|
||||
// cursor 1 初始启用，cursor 2 依赖展品1（当展品1被访问后自动解锁）
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1],
|
||||
dependencies: {
|
||||
2: [1], // cursor 2 依赖展品 1，当展品1被访问后自动解锁
|
||||
},
|
||||
visited, // 传入数组，而不是 Set
|
||||
})
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
setActiveExhibitId(index)
|
||||
// ExhibitOverlay 打开时会自动通过 onOpen 通知 ResidenceLayout 执行动画
|
||||
}
|
||||
|
||||
const handleStartLearning = () => {
|
||||
setShowIntroDialog(false)
|
||||
setVisible(true)
|
||||
}
|
||||
|
||||
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/place1/场景1`),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<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}/home`)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1 */}
|
||||
<Cursor
|
||||
className="absolute left-145 top-100"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 展品2 */}
|
||||
<Cursor
|
||||
className="absolute left-198 top-100"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
{/* 展品3 */}
|
||||
{/* <Cursor
|
||||
className="absolute right-170 bottom-60"
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
read={visited.has(3)}
|
||||
/> */}
|
||||
{/* 展品4 */}
|
||||
{/* <Cursor
|
||||
className="absolute right-98 top-130 cursor"
|
||||
onClick={() => handleOpenExhibit(4)}
|
||||
read={visited.has(4)}
|
||||
/> */}
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-0"
|
||||
src={getStaticImage('chenyun/place1/继续前进')}
|
||||
button
|
||||
onClick={() => {
|
||||
setLastVisitedPlace('place2')
|
||||
saveChenyunStore()
|
||||
navigate(`/${moduleName}/${starName}/place2`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 遮罩层 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
||||
onOpen={() => {
|
||||
// 示例：展品1对应碎片1，展品2对应碎片2
|
||||
// 根据实际需求调用 triggerPuzzleAnimation
|
||||
if (activeExhibitId === 1) {
|
||||
triggerPuzzleAnimation(1)
|
||||
}
|
||||
}}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
markExhibitVisited(place, activeExhibitId)
|
||||
// cursor 状态会根据 visited 自动更新，无需手动调用 enable
|
||||
}
|
||||
setActiveExhibitId(null)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 学习引导词 */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => {
|
||||
setShowGuideModal(false)
|
||||
setVisible(true)
|
||||
}}
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_02.mp3')}
|
||||
ailgn="left"
|
||||
>
|
||||
1.场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态。
|
||||
{'\n'}
|
||||
2.在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点开查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习。
|
||||
{'\n'}
|
||||
3.所有动态光点的展品全部学习后才能进入下一个场景学习。
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 学习说明对话框 */}
|
||||
{showIntroDialog && (
|
||||
<Overlay
|
||||
selectors={[]}
|
||||
visible={showIntroDialog}
|
||||
maskColor="rgba(0, 0, 0, 0.6)"
|
||||
zIndex={50}
|
||||
>
|
||||
<LearningIntroduction handleStartLearning={handleStartLearning} />
|
||||
</Overlay>
|
||||
)}
|
||||
|
||||
{/* 场景对话 */}
|
||||
<GuideSteps
|
||||
visible={visible}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setVisible(nextVisible)
|
||||
if (!nextVisible && !afterDialogGuideShown) {
|
||||
setAfterDialogGuideShown(true)
|
||||
setShowAfterDialogGuide(true)
|
||||
}
|
||||
}}
|
||||
showMask={false}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_03.mp3')}
|
||||
>
|
||||
小沪！这就是陈云小时候生活的房子吗？看起来和普通农家差不多，他童年过得艰苦吗？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_04.mp3')}
|
||||
>
|
||||
这座房子就是陈云故居，位于上海市青浦区练塘镇下塘街95号，是一座坐南朝北、面向河畔的两层楼江南民居。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
实际上是陈云舅父母的家，也是少年陈云从4岁至14岁生活的地方。童年的陈云，家庭生活十分不幸。他两岁时父亲病故，四岁时，母亲也悲苦地死去。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
父母去世后，由外婆抚养。六岁时，外婆去世，陈云过继给舅父母当养子。陈云从小跟舅父廖文光和舅母廖倪氏一起生活。家里靠种田和做小生意勉强维持生计。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 对话结束后的学习引导 */}
|
||||
<StudyGuideModal
|
||||
visible={showAfterDialogGuide}
|
||||
onContinue={() => setShowAfterDialogGuide(false)}
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_01.mp3')}
|
||||
firstLineIndent="2em"
|
||||
>
|
||||
同学你好，欢迎来到“走进故居·对话”学习模块！{'\n'}
|
||||
此刻你正站在陈云同志的故居堂屋里，接下来请跟着时光的脚步，
|
||||
一起翻开他人生的7帧珍贵篇章：水乡少年·艰辛成长、商务启航·投身革命、
|
||||
苏区淬炼·崭露头角、延安担当·经济破局、恢复时期·经济奠基、建设时期·务实兴邦、
|
||||
改革浪潮·擘画实业。准备好一起走进这段滚烫的岁月了吗？
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 学习说明内容
|
||||
const LearningIntroduction = ({ handleStartLearning }: { handleStartLearning: () => void }) => {
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="relative w-full h-full bg-linear-to-b from-[#f5f1e8] via-[#ede8dc] to-[#e8e0d1] shadow-[0_20px_60px_rgba(0,0,0,0.4)] border-4 border-[#d4c5a9] overflow-hidden">
|
||||
{/* 内容层 */}
|
||||
<div className="relative h-full w-full p-16 pb-20 overflow-hidden flex flex-col">
|
||||
{/* 装饰性顶部线条 */}
|
||||
<div className="absolute top-0 left-0 right-0 h-2 bg-linear-to-r from-transparent via-[#c9b99b] to-transparent"></div>
|
||||
|
||||
{/* 标题 */}
|
||||
<div className="text-center mb-8 shrink-0">
|
||||
<h1 className="text-6xl font-bold text-[#5c4a37] mb-4 tracking-wide">
|
||||
走进故居-对话模块学习说明
|
||||
</h1>
|
||||
<div className="w-32 h-1 bg-linear-to-r from-transparent via-[#8b7355] to-transparent mx-auto"></div>
|
||||
</div>
|
||||
|
||||
{/* 介绍文字 */}
|
||||
<div className="mb-8 space-y-4 shrink-0">
|
||||
<p className="text-3xl text-[#6b5d47] leading-relaxed text-center font-medium">
|
||||
同学你好，欢迎来到走进故居-对话学习模块!
|
||||
</p>
|
||||
<p className="text-3xl text-[#6b5d47] leading-relaxed text-center">
|
||||
进入陈云故居场景后，我们将通过参观陈云故居和陈云纪念馆的形式，带你游览陈云同志经历的7个阶段:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 7个阶段列表 - 卡片式设计 */}
|
||||
<div className="mb-8 bg-[rgba(255,255,255,0.6)] rounded-2xl p-6 border-2 border-[#d4c5a9] flex-shrink-0">
|
||||
<div className="flex flex-wrap items-center justify-center gap-4 text-2xl">
|
||||
{[
|
||||
'水乡少年 艰辛成长',
|
||||
'商务启航 投身革命',
|
||||
'苏区淬炼 崭露头角',
|
||||
'延安担当 经济破局',
|
||||
'恢复时期 经济奠基',
|
||||
'建设时期 务实兴邦',
|
||||
'改革浪潮 擘画实业',
|
||||
].map((stage, index, array) => (
|
||||
<div key={index} className="flex items-center">
|
||||
<span className="px-4 py-2 bg-[rgba(139,115,85,0.15)] rounded-lg text-[#5c4a37] font-semibold">
|
||||
{stage}
|
||||
</span>
|
||||
{index < array.length - 1 && (
|
||||
<span className="mx-2 text-[#8b7355] font-bold text-3xl">→</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 功能说明列表 */}
|
||||
<div className="mb-8 space-y-4 flex-1 overflow-hidden">
|
||||
<div className="h-full overflow-hidden">
|
||||
{[
|
||||
'走进故居-对话学习模块会包含多个场景，场景中有蓝色动态光点的展品，表示未浏览，可通过点击光点来学习展品背后的故事，学习展品后蓝色动态光点会变为绿色静态光点，表示已浏览。',
|
||||
'场景中的展品有可能会包含一个或多个拼图，游览过程中如获得拼图，会自动掉落拼图并收入拼图盒中，拼图盒可以点开查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习。',
|
||||
'所有有蓝色动态光点的展品全部学习后才能进入下一个场景进行学习。',
|
||||
'每个阶段学习过后，会有学习回顾环节，以导图的形式总结了阶段的学习内容。',
|
||||
].map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-start gap-6 bg-[rgba(255,255,255,0.4)] rounded-xl p-6 border-l-4 border-[#8b7355] mb-4"
|
||||
>
|
||||
<span className="shrink-0 w-12 h-12 bg-linear-to-br from-[#8b7355] to-[#6b5d47] text-white text-3xl font-bold rounded-full flex items-center justify-center shadow-md">
|
||||
{index + 1}
|
||||
</span>
|
||||
<p className="text-2xl text-[#5c4a37] leading-relaxed flex-1 pt-1">{feature}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 开始学习按钮 */}
|
||||
<div className="flex justify-center shrink-0">
|
||||
<button
|
||||
onClick={handleStartLearning}
|
||||
className="relative cursor-pointer px-20 py-5 bg-linear-to-r from-[#8b7355] to-[#6b5d47] text-white text-4xl font-bold rounded-2xl shadow-[0_8px_20px_rgba(139,115,85,0.4)] hover:shadow-[0_12px_30px_rgba(139,115,85,0.6)] hover:from-[#9b8365] hover:to-[#7b6d57] transition-all duration-300 active:scale-95 border-2 border-[#a08f75]"
|
||||
>
|
||||
<span className="relative z-10">开始学习</span>
|
||||
<div className="absolute inset-0 bg-linear-to-r from-transparent via-white to-transparent opacity-0 hover:opacity-20 rounded-2xl transition-opacity duration-300"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChenyunPlace1
|
||||
@@ -0,0 +1,210 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { ExhibitOverlay, Title, Image, Cursor, GuideSteps, GuideStepsItem } 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'
|
||||
|
||||
// starName 固定为 chenyun
|
||||
const starName = 'chenyun'
|
||||
|
||||
// 展品 ID 与资源路径映射
|
||||
const exhibitSrcMap: Record<1 | 2, string> = {
|
||||
1: 'chenyun/place2/场景2展品1',
|
||||
2: 'chenyun/place2/场景2展品2',
|
||||
}
|
||||
|
||||
// 展品描述映射（当前未使用，若后续需要可恢复）
|
||||
const ChenyunPlace2 = () => {
|
||||
const navigate = useNavigate()
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string
|
||||
}>()
|
||||
|
||||
// 获取碎片动画触发方法
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
|
||||
// 当前激活展品 ID，只存 ID 做唯一标识
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null)
|
||||
|
||||
// 使用持久化的访问状态
|
||||
const place = 'place2'
|
||||
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,
|
||||
})
|
||||
// GuideSteps 显示状态
|
||||
const [guideVisible, setGuideVisible] = useState(false)
|
||||
// GuideSteps 当前步骤
|
||||
const [guideVisible2, setGuideVisible2] = useState(false)
|
||||
const [guideStep2, setGuideStep2] = useState(0)
|
||||
|
||||
const [guideStep, setGuideStep] = useState(0)
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
if (index === 1) {
|
||||
// 展品1：点击时同时打开展品和引导对话，从第1步开始
|
||||
setActiveExhibitId(1)
|
||||
setGuideVisible(true)
|
||||
setGuideStep(0)
|
||||
} else {
|
||||
// 展品2：点击时同时打开展品和引导对话，从第1步开始
|
||||
setActiveExhibitId(2)
|
||||
setGuideVisible2(true)
|
||||
setGuideStep2(0)
|
||||
setActiveExhibitId(index)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听GuideSteps步骤变化，仅同步当前步骤
|
||||
const handleGuideStepChange = (step: number) => {
|
||||
setGuideStep(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/place2/场景2`),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<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-100 top-100"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 展品2 */}
|
||||
<Cursor
|
||||
className="absolute left-210 top-100"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-160"
|
||||
src={getStaticImage('chenyun/place2/继续前进2')}
|
||||
button
|
||||
onClick={() => {
|
||||
setLastVisitedPlace('place3')
|
||||
saveChenyunStore()
|
||||
navigate(`/${moduleName}/${starName}/place3`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 遮罩层 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
||||
onOpen={() => {
|
||||
if (activeExhibitId === 1) {
|
||||
triggerPuzzleAnimation(2)
|
||||
} else if (activeExhibitId === 2) {
|
||||
triggerPuzzleAnimation(3)
|
||||
}
|
||||
}}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
markExhibitVisited(place, activeExhibitId)
|
||||
}
|
||||
setActiveExhibitId(null)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
onVisibleChange={setGuideVisible}
|
||||
currentStep={guideStep}
|
||||
onStepChange={handleGuideStepChange}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_05.mp3')}
|
||||
>
|
||||
那陈云是怎么有机会到图中的青浦县立乙种商业学校读书的呀？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_06.mp3')}
|
||||
>
|
||||
因为家贫，初小读完的陈云便辍学在家。后在舅母亲戚的资助下，陈云才到青浦县立乙种商业学校学习珠算和记账的，他在很短时间里就基本掌握了珠算，还初步学会写账，这为陈云日后从事经济工作打下了基础。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
陈云在党内以“铁算盘”著称，他在经济工作中能熟练使用算盘，就得益于少年时在青浦县立乙种商业学校的学习。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 展品2的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible2}
|
||||
onVisibleChange={setGuideVisible2}
|
||||
currentStep={guideStep2}
|
||||
onStepChange={(step) => setGuideStep2(step)}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_07.mp3')}
|
||||
>
|
||||
这里有一幅陈云题写的颜安小学，请问陈云在这所学校读过书吗？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_08.mp3')}
|
||||
>
|
||||
是的，陈云在青浦县立乙种商业学校学习了一个多月后，又因经济困难不得不辍学回家。多亏当地知识分子、颜安小学校长杜枢，他免费保荐陈云入颜安小学高小部读书。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
颜安小学实行的新式教育开阔了陈云的视野，五四运动后，颜安小学师生积极投入反帝爱国运动，为陈云日后加入中国共产党埋下了思想的种子。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChenyunPlace2
|
||||
@@ -0,0 +1,251 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
Video,
|
||||
SelectFillQuizPanel,
|
||||
} from '@/components'
|
||||
import { SuccessAlert } from '@/components/layout'
|
||||
import type { SelectFillResult } from '@/components/layout/quiz'
|
||||
import { getBackgroundImage, getStaticImage, getPublicPath } 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'
|
||||
|
||||
// starName 固定为 chenyun
|
||||
const starName = 'chenyun'
|
||||
|
||||
// 展品 ID 与资源路径映射
|
||||
const exhibitSrcMap: Record<1 | 2, string> = {
|
||||
1: 'chenyun/place3/场景3展品1',
|
||||
2: 'chenyun/place3/场景3展品2',
|
||||
}
|
||||
const ChenyunPlace3 = () => {
|
||||
const navigate = useNavigate()
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string
|
||||
}>()
|
||||
|
||||
// 获取碎片动画触发方法
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null)
|
||||
|
||||
// 使用持久化的访问状态
|
||||
const place = 'place3'
|
||||
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,
|
||||
})
|
||||
const [videoVisible, setVideoVisible] = useState(false)
|
||||
const [quizVisible, setQuizVisible] = useState(false)
|
||||
const [successAlertVisible, setSuccessAlertVisible] = useState(false)
|
||||
// GuideSteps 显示状态
|
||||
const [guideVisible, setGuideVisible] = useState(false)
|
||||
// GuideSteps 当前步骤
|
||||
const [guideStep, setGuideStep] = useState(0)
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
if (index === 1) {
|
||||
// 展品1：点击时同时打开展品和引导对话，从第1步开始
|
||||
setActiveExhibitId(1)
|
||||
setGuideVisible(true)
|
||||
setGuideStep(0)
|
||||
} else {
|
||||
// 展品2：先播放视频，结束后再打开展品
|
||||
setVideoVisible(true)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听GuideSteps步骤变化，仅同步当前步骤
|
||||
const handleGuideStepChange = (step: number) => {
|
||||
setGuideStep(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/place3/场景3`),
|
||||
}}
|
||||
>
|
||||
{/* 标题 商务启航·投身革命*/}
|
||||
<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}/place2`)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1 */}
|
||||
<Cursor
|
||||
className="absolute right-200 bottom-75"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 展品2 */}
|
||||
<Cursor
|
||||
className="absolute right-130 bottom-75"
|
||||
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('place4')
|
||||
saveChenyunStore()
|
||||
navigate(`/${moduleName}/${starName}/place4`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 展品2视频播放遮罩（全屏） */}
|
||||
{videoVisible && (
|
||||
<div className="fixed inset-0 z-11001 bg-black">
|
||||
<Video
|
||||
src={getPublicPath('video/chenyun/chenyun_04.mp4')}
|
||||
autoPlay
|
||||
playsInline
|
||||
showSkipButton
|
||||
controls={false}
|
||||
onEnded={() => {
|
||||
setVideoVisible(false)
|
||||
setQuizVisible(true)
|
||||
}}
|
||||
onSkip={() => {
|
||||
setVideoVisible(false)
|
||||
setQuizVisible(true)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<SelectFillQuizPanel
|
||||
visible={quizVisible}
|
||||
titlePrefix="【填空】"
|
||||
titleSuffix="年八九月间，陈云由董亦湘、恽雨棠两人介绍，加入中国共产党。"
|
||||
blanks={[{ id: 'd1' }, { id: 'd2' }, { id: 'd3' }, { id: 'd4' }]}
|
||||
options={[
|
||||
{ value: '0', label: '0' },
|
||||
{ value: '1', label: '1' },
|
||||
{ value: '2', label: '2' },
|
||||
{ value: '3', label: '3' },
|
||||
{ value: '4', label: '4' },
|
||||
{ value: '5', label: '5' },
|
||||
{ value: '6', label: '6' },
|
||||
{ value: '7', label: '7' },
|
||||
{ value: '8', label: '8' },
|
||||
{ value: '9', label: '9' },
|
||||
]}
|
||||
correctAnswers={{
|
||||
d1: '1',
|
||||
d2: '9',
|
||||
d3: '2',
|
||||
d4: '5',
|
||||
}}
|
||||
errorMessage="一九二五年八九月间，陈云由董亦湘、恽雨棠两人介绍，加入中国共产党。这是陈云思想上的重大转变，是他新的政治生命的开始。请你再想想吧！"
|
||||
onSubmit={(_results: SelectFillResult[], isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
setQuizVisible(false)
|
||||
setSuccessAlertVisible(true)
|
||||
}
|
||||
}}
|
||||
onError={(_error: string) => {}}
|
||||
submitText="确定"
|
||||
zIndex={10000}
|
||||
/>
|
||||
|
||||
<SuccessAlert
|
||||
visible={successAlertVisible}
|
||||
onContinue={() => {
|
||||
setSuccessAlertVisible(false)
|
||||
markExhibitVisited(place, 2)
|
||||
triggerPuzzleAnimation(5)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 遮罩层 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
||||
onOpen={() => {
|
||||
if (activeExhibitId === 1) {
|
||||
triggerPuzzleAnimation(4)
|
||||
}
|
||||
}}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
markExhibitVisited(place, activeExhibitId)
|
||||
}
|
||||
setActiveExhibitId(null)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
onVisibleChange={setGuideVisible}
|
||||
currentStep={guideStep}
|
||||
onStepChange={handleGuideStepChange}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_09.mp3')}
|
||||
>
|
||||
陈云14岁就去了上海商务印书馆当学徒，他主要负责哪些工作呢？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_10.mp3')}
|
||||
>
|
||||
从颜安小学毕业后，陈云进入了商务印书馆当学徒，开始在柜台接待顾客，打珠算、写信封、练包装、理货物、修文具。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
陈云的珠算能力在商务印书馆工作期间有了很大提高。由于工作认真负责，三年的学徒期，陈云提前两年就破格到商务印书馆虹口分店（现为1925书局）当店员。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChenyunPlace3
|
||||
@@ -0,0 +1,289 @@
|
||||
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
|
||||
@@ -0,0 +1,262 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
Video,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
MultipleChoiceQuizPanel,
|
||||
} from '@/components'
|
||||
import { getBackgroundImage, getStaticImage, getPublicPath } 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 | 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 { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(null)
|
||||
|
||||
// 使用持久化的访问状态
|
||||
const place = 'place5'
|
||||
const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useChenyunStore()
|
||||
|
||||
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
|
||||
const visitedExhibits = getVisitedExhibits(place)
|
||||
const visited = new Set(visitedExhibits)
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1, 2],
|
||||
dependencies: { 3: [1, 2] },
|
||||
visited,
|
||||
})
|
||||
const [videoVisible3, setVideoVisible3] = useState(false)
|
||||
const [quiz3Visible, setQuiz3Visible] = useState(false)
|
||||
const [successAlert3Visible, setSuccessAlert3Visible] = useState(false)
|
||||
|
||||
// 展品1引导对话
|
||||
const [guideVisible, setGuideVisible] = useState(false)
|
||||
const [guideStep, setGuideStep] = useState(0)
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2 | 3) => {
|
||||
if (index === 3) {
|
||||
// 展品3：播放视频，不打开展品
|
||||
setVideoVisible3(true)
|
||||
return
|
||||
}
|
||||
if (index === 2) {
|
||||
setGuideVisible(true)
|
||||
setGuideStep(0)
|
||||
}
|
||||
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)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 展品2 */}
|
||||
<Cursor
|
||||
className="absolute left-107 top-72"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
|
||||
{/* 展品3 */}
|
||||
<Cursor
|
||||
className="absolute right-170 top-84"
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
read={visited.has(3)}
|
||||
disabled={!isEnabled(3)}
|
||||
/>
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-5 right-20"
|
||||
src={getStaticImage('chenyun/place5/继续前进4')}
|
||||
button
|
||||
onClick={() => {
|
||||
setLastVisitedPlace('place6')
|
||||
saveChenyunStore()
|
||||
navigate(`/${moduleName}/${starName}/place6`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 展品1的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
onVisibleChange={setGuideVisible}
|
||||
currentStep={guideStep}
|
||||
onStepChange={(step) => setGuideStep(step)}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_15.mp3')}
|
||||
>
|
||||
小沪，延安时期因为国民党的封锁，陕甘宁边区经济困难。陈云转战陕甘宁边区主持财经工作，他一定遇到了很多经济难题吧。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_16.mp3')}
|
||||
>
|
||||
1944年新春伊始，陈云开始担任西北财经办事处副主任，工作转到财经方面，这是陈云以主要精力从事领导经济工作的开始。当时，陕甘宁边区在国民党严密封锁下，财经状况严峻，边区物价猛涨，老百姓日常生活必需的布匹和粮食十分缺乏。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
国民党顽固派封锁边区，企图“不让一粒粮、一尺布进入边区”，同时千方百计阻止边区食盐出口。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 展品3视频播放（全屏） */}
|
||||
{videoVisible3 && (
|
||||
<Video
|
||||
src={getPublicPath('video/chenyun/chenyun_07.mp4')}
|
||||
className="w-full h-full"
|
||||
autoPlay
|
||||
playsInline
|
||||
showSkipButton
|
||||
onEnded={() => {
|
||||
setVideoVisible3(false)
|
||||
setQuiz3Visible(true)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 展品3视频后的题目 + 成功提示（使用 ScaledPortal） */}
|
||||
<ScaledPortal enabled={quiz3Visible || successAlert3Visible} zIndex={10050}>
|
||||
<>
|
||||
<MultipleChoiceQuizPanel
|
||||
visible={quiz3Visible}
|
||||
title="【多选】陈云主持陕甘宁边区财经工作期间，提出的解决当时经济困难的应对之策包括："
|
||||
options={[
|
||||
{ value: 'A', label: 'A.实行贸易统一' },
|
||||
{
|
||||
value: 'B',
|
||||
label: 'B.事先准确估计情况，预测市场商情，以争取主动',
|
||||
},
|
||||
{
|
||||
value: 'C',
|
||||
label: 'C.不断总结封锁状态下对外贸易的经验，摸索实现等价交换的途径',
|
||||
},
|
||||
{
|
||||
value: 'D',
|
||||
label: 'D.贸易公司对边区内部贸易也要采取市场上做生意的办法',
|
||||
},
|
||||
{ value: 'E', label: 'E.做贸易工作的干部要精通业务' },
|
||||
]}
|
||||
correctAnswer={['A', 'B', 'C', 'D', 'E']}
|
||||
minSelections={1}
|
||||
maxSelections={5}
|
||||
errorMessage="你的选择还不够全面哦~请你再想想吧！"
|
||||
onSubmit={(_values, isCorrect) => {
|
||||
if (isCorrect) {
|
||||
setQuiz3Visible(false)
|
||||
setSuccessAlert3Visible(true)
|
||||
}
|
||||
}}
|
||||
zIndex={10000}
|
||||
/>
|
||||
|
||||
<SuccessAlert
|
||||
visible={successAlert3Visible}
|
||||
onContinue={() => {
|
||||
setSuccessAlert3Visible(false)
|
||||
markExhibitVisited(place, 3)
|
||||
triggerPuzzleAnimation(8)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</ScaledPortal>
|
||||
|
||||
{/* 遮罩层 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
||||
// description={
|
||||
// activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
|
||||
// }
|
||||
autoPlayDescription={activeExhibitId === 2}
|
||||
onOpen={() => {
|
||||
if (activeExhibitId === 2) {
|
||||
triggerPuzzleAnimation(7)
|
||||
}
|
||||
}}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
markExhibitVisited(place, activeExhibitId)
|
||||
}
|
||||
setActiveExhibitId(null)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChenyunPlace5
|
||||
@@ -0,0 +1,149 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { ExhibitOverlay, Title, Image, Cursor, GuideSteps, GuideStepsItem } 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'
|
||||
|
||||
// starName 固定为 chenyun
|
||||
const starName = 'chenyun'
|
||||
|
||||
// 展品 ID 与资源路径映射
|
||||
const exhibitSrcMap: Record<1, string> = {
|
||||
1: 'chenyun/place6/场景6展品1',
|
||||
}
|
||||
const ChenyunPlace6 = () => {
|
||||
const navigate = useNavigate()
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string
|
||||
}>()
|
||||
|
||||
// 获取碎片动画触发方法
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null)
|
||||
|
||||
// 使用持久化的访问状态
|
||||
const place = 'place6'
|
||||
const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useChenyunStore()
|
||||
|
||||
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
|
||||
const visitedExhibits = getVisitedExhibits(place)
|
||||
const visited = new Set(visitedExhibits)
|
||||
const [guideVisible, setGuideVisible] = useState(false)
|
||||
const [guideStep, setGuideStep] = useState(0)
|
||||
|
||||
const handleOpenExhibit = () => {
|
||||
// 展品1：点击时同时打开展品和引导对话，从第1步开始
|
||||
setActiveExhibitId(1)
|
||||
setGuideVisible(true)
|
||||
setGuideStep(0)
|
||||
}
|
||||
|
||||
const handleGuideStepChange = (step: number) => {
|
||||
setGuideStep(step)
|
||||
}
|
||||
|
||||
const progressCount = visited.size
|
||||
const total = 1
|
||||
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/place6/场景6`),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<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}/place5`)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1 */}
|
||||
<Cursor
|
||||
className="absolute left-230 bottom-80"
|
||||
onClick={handleOpenExhibit}
|
||||
read={visited.has(1)}
|
||||
/>
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-0"
|
||||
src={getStaticImage('chenyun/place6/继续前进5')}
|
||||
button
|
||||
onClick={() => {
|
||||
setLastVisitedPlace('place7')
|
||||
saveChenyunStore()
|
||||
navigate(`/${moduleName}/${starName}/place7`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 遮罩层 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
||||
onOpen={() => {
|
||||
if (activeExhibitId === 1) {
|
||||
triggerPuzzleAnimation(9)
|
||||
}
|
||||
}}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
markExhibitVisited(place, activeExhibitId)
|
||||
}
|
||||
setActiveExhibitId(null)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
onVisibleChange={setGuideVisible}
|
||||
currentStep={guideStep}
|
||||
onStepChange={handleGuideStepChange}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_17.mp3')}
|
||||
>
|
||||
这是中央人民政府院财政经济委员会的印章，到这个时候陈云已经从地方到中央工作了吗？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_18.mp3')}
|
||||
>
|
||||
是的，新中国刚成立时，中国共产党接管的是一个民穷财尽、物价飞涨的烂摊子。面对财政经济上的严重困难，陈云在1949年受命担任新成立的中央财政经济委员会（简称中财委）主任，主持领导全国财政经济工作。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
陈云挂帅后的首仗就是打击投机、平抑物价。通过“银元之战”“两白一黑”战役等几次严峻斗争，只用不到一年时间，就迅速稳定了金融物价。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChenyunPlace6
|
||||
@@ -0,0 +1,406 @@
|
||||
import { useCallback, useRef, useState } from 'react'
|
||||
import {
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
Video,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
type SingleChoiceOption,
|
||||
type DragFillResult,
|
||||
SingleChoiceQuizPanel,
|
||||
} from '@/components'
|
||||
import { SuccessAlert, DragQuizPanel } from '@/components/layout'
|
||||
import { getBackgroundImage, getStaticImage, getPublicPath } from '@/lib/utils'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import type { VideoRef } from '@/components/video'
|
||||
import { useChenyunStore, saveChenyunStore } from '@/store/chenyunStore'
|
||||
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
|
||||
|
||||
const STAR_NAME = 'chenyun'
|
||||
const PLACE = 'place7'
|
||||
const EXHIBIT_ID = 1
|
||||
const PUZZLE_PIECE_ID = 10
|
||||
const TOTAL_EXHIBITS = 1
|
||||
|
||||
// ─── 资源路径 ───
|
||||
const BACKGROUND_KEY = `${STAR_NAME}/${PLACE}/场景7`
|
||||
const CONTINUE_IMAGE_KEY = `${STAR_NAME}/${PLACE}/继续前进`
|
||||
const VIDEO_1_SRC = getPublicPath(`video/${STAR_NAME}/chenyun_10.mp4`)
|
||||
const VIDEO_2_SRC = getPublicPath(`video/${STAR_NAME}/chenyun_11.mp4`)
|
||||
const AUDIO_PREFIX = `audio/${STAR_NAME}`
|
||||
|
||||
// ─── 题目1：单选 ───
|
||||
const QUIZ1_OPTIONS: SingleChoiceOption[] = [
|
||||
{ value: 'A', label: 'A.推动了淮海战役的胜利' },
|
||||
{ value: 'B', label: 'B.有利于稳定人民币的发行和地位' },
|
||||
{ value: 'C', label: 'C.巩固了新中国人民政权' },
|
||||
]
|
||||
|
||||
const QUIZ1_CORRECT: string = 'B'
|
||||
|
||||
const QUIZ1_TITLE =
|
||||
'【单选】1949年6月，中共中央指示打击银元投机活动，金条、银元一律由人民银行挂牌收兑，铁路交通事业，税收一律收人民币。同时，上海军管会查封了证券大楼。这次“银元之战”：'
|
||||
|
||||
const QUIZ1_ERROR_HINTS: Record<string, string> = {
|
||||
A: '淮海战役于1949年1月胜利结束，发生在这次“银元之战”前，不存在因果关系。请你再想想吧！',
|
||||
C: '1949年6月新中国政权尚未建立。请你再想想吧',
|
||||
}
|
||||
|
||||
const QUIZ1_FALLBACK_HINT = '再想一想，注意题干中的时间和提示信息哦～'
|
||||
|
||||
const QUIZ1_SUCCESS_CONTENT =
|
||||
'“银元之战”属于当时人民政府整顿金融的重要举措，黄金、银元投机不利于人民币币值稳定和流通，因此“银元之战”打击贵金属投机活动，有利于稳定人民币的发行和地位。'
|
||||
|
||||
// ─── 题目2：拖拽 ───
|
||||
const QUIZ2_BLANKS = [
|
||||
{ id: 'blank-1', label: '____' },
|
||||
{ id: 'blank-2', label: '____' },
|
||||
{ id: 'blank-3', label: '____' },
|
||||
]
|
||||
|
||||
const QUIZ2_OPTIONS = [
|
||||
{ value: '棉纱', label: '棉纱' },
|
||||
{ value: '大米', label: '大米' },
|
||||
{ value: '煤炭', label: '煤炭' },
|
||||
{ value: '石油', label: '石油' },
|
||||
]
|
||||
|
||||
const QUIZ2_CORRECT_SET = new Set(['棉纱', '大米', '煤炭'])
|
||||
|
||||
const QUIZ2_PREFIX =
|
||||
'【拖拽】新中国成立后，为了稳定物价，中央政府组织了“两白一黑”的集中调运，“两白一黑”指的是'
|
||||
|
||||
const QUIZ2_ERROR = '石油当时不是主要调控对象。请你再想想吧！'
|
||||
|
||||
const isQuiz2Correct = (answers: DragFillResult[]): boolean => {
|
||||
if (answers.length !== QUIZ2_CORRECT_SET.size) return false
|
||||
const filled = new Set(answers.map((a) => a.optionValue))
|
||||
if (filled.size !== QUIZ2_CORRECT_SET.size) return false
|
||||
for (const value of QUIZ2_CORRECT_SET) {
|
||||
if (!filled.has(value)) return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const ChenyunPlace7 = () => {
|
||||
const navigate = useNavigate()
|
||||
const { moduleName } = useParams<{ moduleName: string }>()
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useChenyunStore()
|
||||
|
||||
const visited = new Set(getVisitedExhibits(PLACE))
|
||||
const completed = visited.size >= TOTAL_EXHIBITS
|
||||
|
||||
// ─── 第一阶段：视频1 + 对话1 + 单选题 ───
|
||||
const videoRef1 = useRef<VideoRef>(null)
|
||||
const [video1Visible, setVideo1Visible] = useState(false)
|
||||
const [video1Playing, setVideo1Playing] = useState(false)
|
||||
const [guide1Visible, setGuide1Visible] = useState(false)
|
||||
const [guide1Step, setGuide1Step] = useState(0)
|
||||
const [quiz1Visible, setQuiz1Visible] = useState(false)
|
||||
const [quiz1Completed, setQuiz1Completed] = useState(false)
|
||||
|
||||
// ─── 第二阶段：视频2 + 对话2 + 拖拽题 ───
|
||||
const videoRef2 = useRef<VideoRef>(null)
|
||||
const [video2Visible, setVideo2Visible] = useState(false)
|
||||
const [video2Playing, setVideo2Playing] = useState(false)
|
||||
const [guide2Visible, setGuide2Visible] = useState(false)
|
||||
const [guide2Step, setGuide2Step] = useState(0)
|
||||
const [quiz2Visible, setQuiz2Visible] = useState(false)
|
||||
const [quiz2Value, setQuiz2Value] = useState<DragFillResult[]>([])
|
||||
const [quiz2Error, setQuiz2Error] = useState('')
|
||||
const [quiz2Completed, setQuiz2Completed] = useState(false)
|
||||
|
||||
// ─── 成功提示 ───
|
||||
const [successVisible, setSuccessVisible] = useState(false)
|
||||
const [successContent, setSuccessContent] = useState('')
|
||||
|
||||
// ─── 流程辅助 ───
|
||||
const resetFlow = useCallback(() => {
|
||||
setVideo1Visible(false)
|
||||
setVideo1Playing(false)
|
||||
setGuide1Visible(false)
|
||||
setGuide1Step(0)
|
||||
setQuiz1Visible(false)
|
||||
setQuiz1Completed(false)
|
||||
|
||||
setVideo2Visible(false)
|
||||
setVideo2Playing(false)
|
||||
setGuide2Visible(false)
|
||||
setGuide2Step(0)
|
||||
setQuiz2Visible(false)
|
||||
setQuiz2Value([])
|
||||
setQuiz2Error('')
|
||||
setQuiz2Completed(false)
|
||||
|
||||
setSuccessVisible(false)
|
||||
setSuccessContent('')
|
||||
}, [])
|
||||
|
||||
const enterPhase1 = useCallback(() => {
|
||||
setVideo1Visible(true)
|
||||
setVideo1Playing(false)
|
||||
setGuide1Visible(true)
|
||||
setGuide1Step(0)
|
||||
}, [])
|
||||
|
||||
const enterPhase2 = useCallback(() => {
|
||||
setVideo2Visible(true)
|
||||
setVideo2Playing(false)
|
||||
setGuide2Visible(true)
|
||||
setGuide2Step(0)
|
||||
}, [])
|
||||
|
||||
// 点击展品光标：每次都从头走完整流程
|
||||
const handleOpenExhibit = useCallback(() => {
|
||||
resetFlow()
|
||||
enterPhase1()
|
||||
}, [resetFlow, enterPhase1])
|
||||
|
||||
// 对话1 结束 → 播放视频1
|
||||
const handleGuide1VisibleChange = (visible: boolean) => {
|
||||
setGuide1Visible(visible)
|
||||
if (!visible && video1Visible) {
|
||||
setVideo1Playing(true)
|
||||
videoRef1.current?.play()
|
||||
}
|
||||
}
|
||||
|
||||
// 对话2 结束 → 播放视频2
|
||||
const handleGuide2VisibleChange = (visible: boolean) => {
|
||||
setGuide2Visible(visible)
|
||||
if (!visible && video2Visible) {
|
||||
setVideo2Playing(true)
|
||||
videoRef2.current?.play()
|
||||
}
|
||||
}
|
||||
|
||||
// 视频1 结束：标记访问 + 触发拼图 + 出题1
|
||||
const handleVideo1Ended = () => {
|
||||
setVideo1Playing(false)
|
||||
markExhibitVisited(PLACE, EXHIBIT_ID)
|
||||
triggerPuzzleAnimation(PUZZLE_PIECE_ID)
|
||||
setQuiz1Visible(true)
|
||||
}
|
||||
|
||||
// 题1 答对：弹成功提示，关闭后进入第二阶段
|
||||
const handleQuiz1Submit = () => {
|
||||
setQuiz1Visible(false)
|
||||
setQuiz1Completed(true)
|
||||
setSuccessContent(QUIZ1_SUCCESS_CONTENT)
|
||||
setSuccessVisible(true)
|
||||
}
|
||||
|
||||
// 视频2 结束：出题2
|
||||
const handleVideo2Ended = () => {
|
||||
setVideo2Playing(false)
|
||||
setQuiz2Visible(true)
|
||||
}
|
||||
|
||||
// 题2 实时校验：填齐后判定
|
||||
const handleQuiz2Change = (val: DragFillResult[]) => {
|
||||
setQuiz2Value(val)
|
||||
setQuiz2Error('')
|
||||
if (val.length < QUIZ2_CORRECT_SET.size) return
|
||||
|
||||
if (!isQuiz2Correct(val)) {
|
||||
setQuiz2Error(QUIZ2_ERROR)
|
||||
return
|
||||
}
|
||||
|
||||
setQuiz2Visible(false)
|
||||
setVideo1Visible(false)
|
||||
setVideo2Visible(false)
|
||||
setQuiz2Completed(true)
|
||||
setSuccessContent('')
|
||||
setSuccessVisible(true)
|
||||
}
|
||||
|
||||
// 成功提示关闭：题1答对后才进入第二阶段；题2答对后则停留在场景
|
||||
const handleSuccessDismiss = () => {
|
||||
setSuccessVisible(false)
|
||||
if (quiz1Completed && !quiz2Completed && !quiz2Visible) {
|
||||
enterPhase2()
|
||||
}
|
||||
}
|
||||
|
||||
if (!moduleName) return null
|
||||
|
||||
const subtitle = completed ? '已完成' : `${visited.size}/${TOTAL_EXHIBITS}`
|
||||
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(BACKGROUND_KEY) }}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<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={() => navigate(`/${moduleName}/${STAR_NAME}/place6`)}
|
||||
/>
|
||||
|
||||
{/* 展品1 光标 */}
|
||||
<Cursor
|
||||
className="absolute left-230 top-88"
|
||||
onClick={handleOpenExhibit}
|
||||
read={visited.has(EXHIBIT_ID)}
|
||||
/>
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-0"
|
||||
src={getStaticImage(CONTINUE_IMAGE_KEY)}
|
||||
button
|
||||
onClick={() => {
|
||||
setLastVisitedPlace('place8')
|
||||
saveChenyunStore()
|
||||
navigate(`/${moduleName}/${STAR_NAME}/place8`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 视频1（全屏） */}
|
||||
{video1Visible && (
|
||||
<div className="fixed inset-0 z-9999 bg-black">
|
||||
<Video
|
||||
ref={videoRef1}
|
||||
src={VIDEO_1_SRC}
|
||||
className="w-full h-full"
|
||||
autoPlay={video1Playing}
|
||||
playsInline
|
||||
preload="auto"
|
||||
muted={!video1Playing}
|
||||
showSkipButton
|
||||
onEnded={handleVideo1Ended}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 对话1（叠加在视频1之上） */}
|
||||
<GuideSteps
|
||||
visible={guide1Visible}
|
||||
onVisibleChange={handleGuide1VisibleChange}
|
||||
currentStep={guide1Step}
|
||||
onStepChange={setGuide1Step}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10001}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath(`${AUDIO_PREFIX}/mp3_chenyun_19.mp3`)}
|
||||
>
|
||||
那"银元之战"是如何取得胜利的呢？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath(`${AUDIO_PREFIX}/mp3_chenyun_20.mp3`)}
|
||||
>
|
||||
由于通货膨胀，国民党发行的法币、金圆券变成了一堆废纸。当时坊间流传“大街过三道，物价跳三跳”。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
有人计算，一百元法币，在一九三七年可买两头牛，一九四五年只能买两个鸡蛋，一九四七年只能买一个煤球，到一九四九年五月连一粒米也买不到。可见，当时通货膨胀多么严重。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
打击投机资本，稳定金融物价，陈云代中央起草《中共中央关于打击银元使人民币占领阵地的指示》，提出以强硬手段打击投机势力。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 题目1：单选 */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={quiz1Visible}
|
||||
zIndex={10002}
|
||||
title={QUIZ1_TITLE}
|
||||
options={QUIZ1_OPTIONS}
|
||||
correctAnswer={QUIZ1_CORRECT}
|
||||
onSubmit={handleQuiz1Submit}
|
||||
onWrongSelect={(val) => QUIZ1_ERROR_HINTS[val] || QUIZ1_FALLBACK_HINT}
|
||||
/>
|
||||
|
||||
{/* 视频2（全屏） */}
|
||||
{video2Visible && (
|
||||
<div className="fixed inset-0 z-10010 bg-black">
|
||||
<Video
|
||||
ref={videoRef2}
|
||||
src={VIDEO_2_SRC}
|
||||
className="w-full h-full"
|
||||
autoPlay={video2Playing}
|
||||
playsInline
|
||||
preload="auto"
|
||||
muted={!video2Playing}
|
||||
showSkipButton
|
||||
skipText="跳过"
|
||||
onEnded={handleVideo2Ended}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 对话2（叠加在视频2之上） */}
|
||||
<GuideSteps
|
||||
visible={guide2Visible}
|
||||
onVisibleChange={handleGuide2VisibleChange}
|
||||
currentStep={guide2Step}
|
||||
onStepChange={setGuide2Step}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10011}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath(`${AUDIO_PREFIX}/mp3_chenyun_21.mp3`)}
|
||||
>
|
||||
那"两白一黑"战役是如何打赢的呢？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath(`${AUDIO_PREFIX}/mp3_chenyun_22.mp3`)}
|
||||
>
|
||||
“银元之战”的胜利并没有遏制住投机者的嚣张气焰，物价稳定仅十几天后，投机者就由银元投机转向“两白一黑”的投机，即：棉纱、大米和煤炭，引发了又一次全国性涨价狂潮。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 题目2：拖拽 */}
|
||||
<DragQuizPanel
|
||||
visible={quiz2Visible}
|
||||
zIndex={10012}
|
||||
questionPrefix={QUIZ2_PREFIX}
|
||||
questionSuffix="。"
|
||||
options={QUIZ2_OPTIONS}
|
||||
blanks={QUIZ2_BLANKS}
|
||||
value={quiz2Value}
|
||||
error={quiz2Error}
|
||||
onChange={handleQuiz2Change}
|
||||
/>
|
||||
|
||||
{/* 成功提示（盖在视频/题目之上） */}
|
||||
{successVisible && (
|
||||
<div className="fixed inset-0" style={{ zIndex: 20000 }}>
|
||||
<SuccessAlert
|
||||
visible
|
||||
title="恭喜你, 选择正确!"
|
||||
content={successContent}
|
||||
onClose={handleSuccessDismiss}
|
||||
onContinue={handleSuccessDismiss}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChenyunPlace7
|
||||
@@ -0,0 +1,317 @@
|
||||
import { useState } from 'react'
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
MultipleChoiceQuizPanel,
|
||||
SingleChoiceQuizPanel,
|
||||
} 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/place8/场景8展品1',
|
||||
2: 'chenyun/place8/场景8展品2',
|
||||
}
|
||||
const ChenyunPlace8 = () => {
|
||||
const navigate = useNavigate()
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string
|
||||
}>()
|
||||
|
||||
// 获取碎片动画触发方法
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null)
|
||||
|
||||
// 使用持久化的访问状态
|
||||
const place = 'place8'
|
||||
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,
|
||||
})
|
||||
// 展品2的对话引导
|
||||
const [guideVisible, setGuideVisible] = useState(false)
|
||||
const [guideStep, setGuideStep] = useState(0)
|
||||
const [guideVisible2, setGuideVisible2] = useState(false)
|
||||
const [guideStep2, setGuideStep2] = useState(0)
|
||||
const [quizVisible, setQuizVisible] = useState(false)
|
||||
const [successAlertVisible, setSuccessAlertVisible] = useState(false)
|
||||
const [quizPassed, setQuizPassed] = useState(false)
|
||||
// 关闭对话后出现的“统购统销”单选题
|
||||
const [closeQuizVisible, setCloseQuizVisible] = useState(false)
|
||||
const [closeSuccessAlertVisible, setCloseSuccessAlertVisible] = useState(false)
|
||||
const [closeQuizPassed, setCloseQuizPassed] = useState(false)
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
setActiveExhibitId(index)
|
||||
if (index === 1) {
|
||||
setGuideVisible2(true)
|
||||
setGuideStep2(0)
|
||||
setQuizPassed(false)
|
||||
}
|
||||
// 如果是展品2，显示对话引导
|
||||
if (index === 2) {
|
||||
setGuideVisible(true)
|
||||
setGuideStep(0)
|
||||
}
|
||||
}
|
||||
|
||||
// 监听对话引导步骤变化
|
||||
const handleGuideStepChange = (step: number) => {
|
||||
setGuideStep(step)
|
||||
}
|
||||
|
||||
// 监听对话引导完成
|
||||
const handleGuideVisibleChange = (visible: boolean) => {
|
||||
setGuideVisible(visible)
|
||||
}
|
||||
|
||||
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/place8/场景8`),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<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}/place7`)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1 */}
|
||||
<Cursor
|
||||
className="absolute right-175 top-75"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 展品2 */}
|
||||
<Cursor
|
||||
className="absolute right-100 bottom-55"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-150"
|
||||
src={getStaticImage('chenyun/place8/继续前进6')}
|
||||
button
|
||||
onClick={() => {
|
||||
setLastVisitedPlace('place9')
|
||||
saveChenyunStore()
|
||||
navigate(`/${moduleName}/${starName}/place9`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 遮罩层 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
||||
onOpen={() => {
|
||||
if (activeExhibitId === 1) {
|
||||
triggerPuzzleAnimation(11)
|
||||
}
|
||||
}}
|
||||
// description={
|
||||
// activeExhibitId === 1
|
||||
// ? `打赢“银元之战”“两白一黑”战役的过程彰显了中国共产党治理经济的卓越能力！这里有一份“一五”计划报告的手稿，陈云在“一五”计划的编制中做出了重大贡献。
|
||||
// 一九五四年，陈云的主要工作之一，就是主持编制第一个五年计划纲要。这次编制工作是在前四次基础上进行的，陈云提出计划编制工作中要注意几个问题：首先是工业投资金额，其次是市场供应和人民生活，第三是农业发展速度，这三个问题对编制计划有指导意义。第一个五年计划纲要草案的重点是优先发展重工业，特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障，通过“统购统销”稳定粮价，为重点工程项目筑牢根基，亲手铺就了我国工业化的起步之路。`
|
||||
// : undefined
|
||||
// }
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
markExhibitVisited(place, activeExhibitId)
|
||||
}
|
||||
setActiveExhibitId(null)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品2的对话引导 - 在展品遮罩层上方显示 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
onVisibleChange={handleGuideVisibleChange}
|
||||
currentStep={guideStep}
|
||||
onStepChange={handleGuideStepChange}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10001}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_25.mp3')}
|
||||
>
|
||||
您讲的“统购统销”是不是和这里我们看到的粮票有直接关系啊？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_26.mp3')}
|
||||
>
|
||||
不错，随着大规模经济建设的展开，全国粮、棉、油等主要农产品严重紧缺，供求矛盾尖锐。陈云经过调查研究，反复比较，权衡利弊得失，终于下决心采用在农村征购，在城市配售的解决粮食问题的办法，也就是后来所说的“统购统销”。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
陈云说：“只有采用这种办法，才能保证我国人民生活日益增长的需要，才能制止投机活动，保证市场物价的稳定，才能使发展国民经济第一个五年计划得以顺利地进行。”
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 打赢“银元之战”“两白一黑”战役的过程真的是彰显了中国共产党治理经济的卓越能力！这里有一份“一五”计划报告的手稿，陈云在“一五”计划的编制中做出了什么贡献吗？ */}
|
||||
|
||||
<GuideSteps
|
||||
visible={guideVisible2}
|
||||
onVisibleChange={(visible) => {
|
||||
setGuideVisible2(visible)
|
||||
// 关闭对话后，如果还未完成该题，则弹出题目
|
||||
if (!visible && !closeQuizPassed) {
|
||||
setCloseQuizVisible(true)
|
||||
}
|
||||
}}
|
||||
currentStep={guideStep2}
|
||||
onStepChange={(step) => {
|
||||
// 在第 3 句（guideStep2 === 2）结束后，进入下一句前先弹题
|
||||
if (step === 3 && !quizPassed) {
|
||||
setGuideStep2(2)
|
||||
setQuizVisible(true)
|
||||
return
|
||||
}
|
||||
setGuideStep2(step)
|
||||
}}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10001}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_23.mp3')}
|
||||
>
|
||||
打赢“银元之战”“两白一黑”战役的过程真的是彰显了中国共产党治理经济的卓越能力！这里有一份“一五”计划报告的手稿，陈云在“一五”计划的编制中做出了什么贡献吗？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_24.mp3')}
|
||||
>
|
||||
一九五四年，陈云的主要工作之一，就是主持编制第一个五年计划纲要。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
这次编制工作是在前四次基础上进行的，陈云提出计划编制工作中要注意几个问题：首先是工业投资金额，其次是市场供应和人民生活，第三是农业发展速度，这三个问题对编制计划有指导意义。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
第一个五年计划纲要草案的重点是优先发展重工业，特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障，通过“统购统销”稳定粮价，为重点工程项目筑牢根基，亲手铺就了我国工业化的起步之路。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* “这三个问题…”结束后的题目 + 成功提示（使用 ScaledPortal） */}
|
||||
<ScaledPortal enabled={quizVisible || successAlertVisible} zIndex={10050}>
|
||||
<>
|
||||
<MultipleChoiceQuizPanel
|
||||
visible={quizVisible}
|
||||
title="【多选】陈云主持编制第一个五年计划纲要时提出计划编制工作中要注意的问题包括："
|
||||
options={[
|
||||
{ value: 'A', label: 'A.工业投资金额' },
|
||||
{ value: 'B', label: 'B.市场供应和人民生活' },
|
||||
{ value: 'C', label: 'C.农业发展速度' },
|
||||
]}
|
||||
correctAnswer={['A', 'B', 'C']}
|
||||
minSelections={1}
|
||||
maxSelections={3}
|
||||
errorMessage="你的选择还不够全面哦~请你再想想吧！"
|
||||
onSubmit={(_values, isCorrect) => {
|
||||
if (isCorrect) {
|
||||
setQuizVisible(false)
|
||||
setSuccessAlertVisible(true)
|
||||
}
|
||||
}}
|
||||
zIndex={10000}
|
||||
/>
|
||||
|
||||
<SuccessAlert
|
||||
visible={successAlertVisible}
|
||||
onContinue={() => {
|
||||
setSuccessAlertVisible(false)
|
||||
setQuizPassed(true)
|
||||
setGuideVisible2(true)
|
||||
setGuideStep2(3)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</ScaledPortal>
|
||||
|
||||
{/* 关闭对话后出现的题目（单选） + 成功提示（使用 ScaledPortal） */}
|
||||
<ScaledPortal enabled={closeQuizVisible || closeSuccessAlertVisible} zIndex={10050}>
|
||||
<>
|
||||
<SingleChoiceQuizPanel
|
||||
visible={closeQuizVisible}
|
||||
title="【单选】第一个五年计划纲要草案的重点是优先发展重工业，特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障，通过“____”稳定粮价。"
|
||||
options={[
|
||||
{ value: 'A', label: 'A.优先分配' },
|
||||
{ value: 'B', label: 'B.统购统销' },
|
||||
{ value: 'C', label: 'C.依靠进口' },
|
||||
]}
|
||||
correctAnswer="B"
|
||||
errorMessage="请你再想想吧！"
|
||||
onWrongSelect={() => '这不是当时陈云稳定粮价的方法。请你再想想吧！'}
|
||||
onSubmit={(_value, isCorrect) => {
|
||||
if (!isCorrect) return
|
||||
setCloseQuizVisible(false)
|
||||
setCloseSuccessAlertVisible(true)
|
||||
}}
|
||||
zIndex={10000}
|
||||
/>
|
||||
|
||||
<SuccessAlert
|
||||
visible={closeSuccessAlertVisible}
|
||||
onContinue={() => {
|
||||
setCloseSuccessAlertVisible(false)
|
||||
// setCloseQuizPassed(true);
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</ScaledPortal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChenyunPlace8
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useState, useRef } from 'react'
|
||||
import { Title, Image, Cursor, Video, GuideSteps, GuideStepsItem } from '@/components'
|
||||
import { getBackgroundImage, getStaticImage, getPublicPath } from '@/lib/utils'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import type { VideoRef } from '@/components/video'
|
||||
import { useChenyunStore, saveChenyunStore } from '@/store/chenyunStore'
|
||||
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
|
||||
import { setCourseTimeProgress } from '@/lib/utils/api-common'
|
||||
|
||||
// starName 固定为 chenyun
|
||||
const starName = 'chenyun'
|
||||
|
||||
const ChenyunPlace9 = () => {
|
||||
const navigate = useNavigate()
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string
|
||||
}>()
|
||||
|
||||
// 获取碎片动画触发方法
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
|
||||
// const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null)
|
||||
|
||||
// 使用持久化的访问状态
|
||||
const place = 'place9'
|
||||
const { markExhibitVisited, getVisitedExhibits } = useChenyunStore()
|
||||
|
||||
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
|
||||
const visitedExhibits = getVisitedExhibits(place)
|
||||
const visited = new Set(visitedExhibits)
|
||||
// 视频播放状态
|
||||
const [videoVisible, setVideoVisible] = useState(false)
|
||||
const [videoPlaying, setVideoPlaying] = useState(false)
|
||||
const videoRef = useRef<VideoRef>(null)
|
||||
// 对话引导状态
|
||||
const [guideVisible, setGuideVisible] = useState(false)
|
||||
const [guideStep, setGuideStep] = useState(0)
|
||||
|
||||
const handleOpenExhibit = (_index: 1) => {
|
||||
// 展品1：播放视频
|
||||
setVideoVisible(true)
|
||||
setVideoPlaying(true)
|
||||
}
|
||||
|
||||
// 监听对话引导步骤变化
|
||||
const handleGuideStepChange = (step: number) => {
|
||||
setGuideStep(step)
|
||||
}
|
||||
|
||||
// 监听对话引导完成
|
||||
const handleGuideVisibleChange = (visible: boolean) => {
|
||||
setGuideVisible(visible)
|
||||
if (!visible && videoVisible) {
|
||||
setVideoVisible(false)
|
||||
}
|
||||
}
|
||||
|
||||
const progressCount = visited.size
|
||||
const total = 1
|
||||
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/place9/场景9`),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<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}/place8`)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1 */}
|
||||
<Cursor
|
||||
className="absolute right-26 top-88"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
/>
|
||||
|
||||
{/* 离开场景 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-0"
|
||||
src={getStaticImage('chenyun/place9/离开场景')}
|
||||
button
|
||||
onClick={() => {
|
||||
setCourseTimeProgress(22)
|
||||
saveChenyunStore()
|
||||
navigate(`/${moduleName}/${starName}/home`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 展品1视频播放（全屏） */}
|
||||
{videoVisible && (
|
||||
<div className="fixed inset-0 z-9999 bg-black">
|
||||
<Video
|
||||
ref={videoRef}
|
||||
src={getPublicPath('video/chenyun/chenyun_14.mp4')}
|
||||
className="w-full h-full"
|
||||
autoPlay={videoPlaying}
|
||||
playsInline
|
||||
preload="auto"
|
||||
muted={!videoPlaying}
|
||||
showSkipButton
|
||||
skipText="跳过"
|
||||
onEnded={() => {
|
||||
setVideoPlaying(false)
|
||||
markExhibitVisited(place, 1)
|
||||
// 视频播放完成后，显示对话引导
|
||||
setGuideVisible(true)
|
||||
setGuideStep(0)
|
||||
triggerPuzzleAnimation(12)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 视频播放完成后的对话引导 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
onVisibleChange={handleGuideVisibleChange}
|
||||
currentStep={guideStep}
|
||||
onStepChange={handleGuideStepChange}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10001}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_27.mp3')}
|
||||
>
|
||||
我们已经沿着陈云的足迹，从练塘水乡走到改革开放的前沿，读懂了他“适合老百姓的要求，做了一点事”的初心。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
接下来，请你跨越时空，走进1949年刚解放时期的上海，参与到当时那场轰轰烈烈的“银元之战”和“米棉之战”之中去。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
在实践决策中体会陈云“多谋善断”“敢闯务实”的卓越智慧与战略魄力，感受我国集中力量办大事的制度优势如何在经济战场中彰显威力。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 遮罩层 */}
|
||||
{/* <ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
markExhibitVisited(place, activeExhibitId)
|
||||
}
|
||||
setActiveExhibitId(null)
|
||||
}}
|
||||
/> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChenyunPlace9
|
||||
Reference in new issue
Block a user