network-course/shanghai-residences
2
0 Fork 0
forked from zhongyidian/shanghai-residences
Code Pull Requests Activity

更新依赖项及历史人物相关内容资源

Browse Source 
- 更新 package.json 和 package-lock.json 中的依赖项
- 新增/更新陈云、黄炎培、鲁迅、孙中山的音频文件
- 新增场景和组件的图片资源
- 清理未使用的音频和图片文件
- 优化多个组件和页面的实现逻辑
This commit is contained in:
zhongyidian committed 2026-04-20 13:27:18 +08:00
1 parent b1d55b9464
commit e0fa47d21a
629 files changed
+24390 -2991
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/pages/maozedong/place/place4.tsx
+127 -68
View File
@@ -11,11 +11,13 @@ import {
} from '@/components'
import { useNavigate, useParams } from 'react-router-dom'
import { getBackgroundImage, getStaticImage, getPublicPath } from '@/lib/utils'
import { useEffect, useRef, useState } from 'react'
import { useMemo, useRef, useState } from 'react'
import Cursor from '@/components/cursor'
import { useCursorController } from '@/hooks/useCursorController'
import SuccessAlert from '@/components/layout/alert/success-alert'
import ScaledPortal from '@/components/layout/ScaledPortal'
import { useMaozedongStore, saveMaozedongStore } from '@/store/maozedongStore'
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
// starName 固定为 maozedong
const starName = 'maozedong'
@@ -35,28 +37,36 @@ const MaozedongPlace4 = () => {
moduleName: string
}>()
// 获取碎片动画触发方法
const { triggerPuzzleAnimation } = usePuzzleAnimation()
// 场景级引导对话显示状态（暂未使用，可根据需要开启）
const [visible, setVisible] = useState(false)
// 当前激活的展品 ID
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | 4 | 5 | null>(null)
// 已访问的展品（本页内状态；如需持久化可接入 store）
const [visited, setVisited] = useState<Set<1 | 2 | 3 | 4 | 5 | 6>>(() => new Set())
// 持久化接入
const markVisited = useMaozedongStore((s) => s.markExhibitVisited)
const getVisited = useMaozedongStore((s) => s.getVisitedExhibits)
const persistedVisited = useMemo(
() => new Set(getVisited('place4') as (1 | 2 | 3 | 4 | 5)[]),
[getVisited]
)
const [visited, setVisited] = useState<Set<1 | 2 | 3 | 4 | 5>>(() => new Set(persistedVisited))
// 光标1的对话状态
const [guide1Visible, setGuide1Visible] = useState(false)
const [guide1Step, setGuide1Step] = useState(0)
// 光标3+光标5均查看后的总结对话
const [guide35Visible, setGuide35Visible] = useState(false)
const [guide35Step, setGuide35Step] = useState(0)
const [guide35Shown, setGuide35Shown] = useState(false)
// 光标3的对话状态
const [guide3Visible, setGuide3Visible] = useState(false)
const [guide3Step, setGuide3Step] = useState(0)
// 光标4（展品4）对话
const [guide4Visible, setGuide4Visible] = useState(false)
const [guide4Step, setGuide4Step] = useState(0)
// 关闭展品4后的结束语
// 光标4关闭后的过场视频与总结对话
const [showVideo4, setShowVideo4] = useState(false)
const [guide4SummaryVisible, setGuide4SummaryVisible] = useState(false)
const [guide4SummaryStep, setGuide4SummaryStep] = useState(0)
const [endingVisible, setEndingVisible] = useState(false)
// 光标2的对话状态
@@ -94,27 +104,18 @@ const MaozedongPlace4 = () => {
setGuide2Visible(true)
setQuizStep(0)
}
if (id === 4) {
setGuide4Step(0)
setGuide4Visible(true)
if (id === 3) {
setGuide3Step(0)
setGuide3Visible(true)
}
}
// 光标3和光标5都已查看后，弹出一次总结对话（图1）
useEffect(() => {
if (guide35Shown) return
if (!visited.has(3) || !visited.has(5)) return
setGuide35Step(0)
setGuide35Visible(true)
setGuide35Shown(true)
}, [visited, guide35Shown])
if (!moduleName) return null
const progressCount = visited.size
const total = 5
const completed = progressCount >= total
const subtitle = completed ? '关于中共四大(已完成)' : `关于中共四大(${progressCount}/${total})`
const subtitle = completed ? '已完成' : `${progressCount}/${total}`
return (
<div
@@ -130,6 +131,17 @@ const MaozedongPlace4 = () => {
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`)
}
}}
/>
{completed && (
<Image
className="absolute right-0 bottom-0"
@@ -224,10 +236,13 @@ const MaozedongPlace4 = () => {
highlightSelectors={[]}
zIndex={10001}
>
<GuideStepsItem speaker="student">
<GuideStepsItem
speaker="student"
audioSrc={getPublicPath('audio/maozedong/mp3_mzd_15.mp3')}
>
看来中共四大明确提出了“无产阶级领导权”和“工农联盟”，这和毛主席的实践有关吗？
</GuideStepsItem>
<GuideStepsItem speaker="guide">
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/maozedong/mp3_mzd_16.mp3')}>
太有关系了！中共三大后毛主席到上海工作了一段时间，看到工人运动轰轰烈烈，
但农民还是“沉默的大多数”。
</GuideStepsItem>
@@ -249,29 +264,37 @@ const MaozedongPlace4 = () => {
highlightSelectors={[]}
zIndex={10001}
>
<GuideStepsItem speaker="student">那中共四大为什么召开呢？</GuideStepsItem>
<GuideStepsItem speaker="guide">
<GuideStepsItem
speaker="student"
audioSrc={getPublicPath('audio/maozedong/mp3_mzd_13.mp3')}
>
那中共四大为什么召开呢？
</GuideStepsItem>
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/maozedong/mp3_mzd_14.mp3')}>
因为此前中共三大虽然确定了国共合作的方针，但未明确解决
“谁领导革命”的问题。我们必须要明确“谁领导革命”“依靠谁革命” 这两个基本问题。
</GuideStepsItem>
</GuideSteps>
{/* 光标3 + 光标5 都已查看后的对话（图1） */}
{/* 光标3的对话：点击展品3时出现（图1） */}
<GuideSteps
visible={guide35Visible}
currentStep={guide35Step}
onStepChange={setGuide35Step}
visible={guide3Visible}
currentStep={guide3Step}
onStepChange={setGuide3Step}
onVisibleChange={(nextVisible) => {
setGuide35Visible(nextVisible)
setGuide3Visible(nextVisible)
}}
showMask={false}
highlightSelectors={[]}
zIndex={10001}
>
<GuideStepsItem speaker="student">
<GuideStepsItem
speaker="student"
audioSrc={getPublicPath('audio/maozedong/mp3_mzd_17.mp3')}
>
所以毛主席觉得，光靠工人不够，得把农民拉进革命队伍？
</GuideStepsItem>
<GuideStepsItem speaker="guide">
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/maozedong/mp3_mzd_18.mp3')}>
对！无产阶级要领导革命，必须联合农民——他们是工人阶级的“天然盟友”。
四大虽然还没有明确提出“农村包围城市”，但已经意识到农民问题的重要性。
</GuideStepsItem>
@@ -281,36 +304,30 @@ const MaozedongPlace4 = () => {
</GuideStepsItem>
</GuideSteps>
{/* 光标4打开展品4时出现的对话（图2、图3） */}
{/* 光标4视频结束后出现的总结对话（图1） */}
<GuideSteps
visible={guide4Visible}
currentStep={guide4Step}
onStepChange={setGuide4Step}
visible={guide4SummaryVisible}
currentStep={guide4SummaryStep}
onStepChange={setGuide4SummaryStep}
onVisibleChange={(nextVisible) => {
setGuide4Visible(nextVisible)
setGuide4SummaryVisible(nextVisible)
if (!nextVisible) {
setEndingVisible(true)
}
}}
showMask={false}
highlightSelectors={[]}
zIndex={10001}
>
<GuideStepsItem speaker="student">
这张照片看起来就是在四大前后拍摄的，那为什么全家福中缺少了男主人呢？
</GuideStepsItem>
<GuideStepsItem speaker="guide">
这是1924年杨开慧与毛岸英、毛岸青的合影，是这个家庭留下的唯一一张“全家福”，
被誉为“不完美的完美全家福”。说它“不完美”，是因为当时党的纪律要求重要人物不得拍照，“全家福”里缺少了男主人。
</GuideStepsItem>
<GuideStepsItem speaker="guide">
为何又要说它“完美”呢？是因为它完美地诠释了共产党人严格遵守党的规章制度，
舍小家为大家的家国情怀。六年后，照片中的杨开慧在湖南牺牲。二十六年后，毛岸英在朝鲜战场牺牲。
为了中国的革命事业，毛主席一家先后牺牲了六位亲人……
</GuideStepsItem>
<GuideStepsItem speaker="student">
<GuideStepsItem
speaker="student"
audioSrc={getPublicPath('audio/maozedong/mp3_mzd_19.mp3')}
>
为有牺牲多壮志，敢教日月换新天。小沪，通过您的讲解，
我明白了中共一大到四大是在艰难探索中不断前进的——从建党的理想，
到制定民主革命纲领；从国共合作，到发现农民的力量。这些探索对我们今天有什么启示呢？
</GuideStepsItem>
<GuideStepsItem speaker="guide">
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/maozedong/mp3_mzd_20.mp3')}>
同学问到了根子上！革命就像爬山，一开始可能看不清山顶的样子，
但只要沿着正确的方向，一步一步扎扎实实地走，总会离目标越来越近。
</GuideStepsItem>
@@ -320,7 +337,7 @@ const MaozedongPlace4 = () => {
把这些道理想通了，将来不管做什么事，都能脚踏实地。
</GuideStepsItem>
<GuideStepsItem speaker="guide">
“实事求是”这四个字， 是我们党一路走来的法宝，希望你也能记住。
“实事求是”这四个字，是我们党一路走来的法宝，希望你也能记住。
</GuideStepsItem>
</GuideSteps>
@@ -328,6 +345,23 @@ const MaozedongPlace4 = () => {
<ExhibitOverlay
visible={activeExhibitId !== null}
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
onOpen={() => {
if (activeExhibitId === 2) {
triggerPuzzleAnimation(8)
}
if (activeExhibitId === 1) {
triggerPuzzleAnimation(9)
}
if (activeExhibitId === 3) {
triggerPuzzleAnimation(10)
}
if (activeExhibitId === 4) {
triggerPuzzleAnimation(12)
}
if (activeExhibitId === 5) {
triggerPuzzleAnimation(11)
}
}}
onClose={() => {
const currentId = activeExhibitId
@@ -340,12 +374,17 @@ const MaozedongPlace4 = () => {
return
}
// 展品4：关闭后出现结束语（EndingOverlay）
// 展品4：关闭后播放视频，视频结束后显示总结对话，并立即标记已访问
if (currentId === 4) {
setGuide4Step(0)
setGuide4Visible(false)
setActiveExhibitId(null)
setEndingVisible(true)
setVisited((prev) => {
const next = new Set(prev)
next.add(4)
markVisited('place4', 4)
saveMaozedongStore()
return next
})
setShowVideo4(true)
return
}
@@ -353,6 +392,8 @@ const MaozedongPlace4 = () => {
setVisited((prev) => {
const next = new Set(prev)
next.add(currentId)
markVisited('place4', currentId)
saveMaozedongStore()
return next
})
}
@@ -360,27 +401,42 @@ const MaozedongPlace4 = () => {
}}
/>
{/* 结束语（图4）：关闭展品4后出现 */}
<EndingOverlay
visible={endingVisible}
text="我们通过毛主席在1921~1924年参加党的“一大、二大、三大、四大”等重大历史事件中所扮演的重要角色及他个人思想育理论成果的积累，深刻认识到早期共产党人一步一脚印探索中国革命道路的曲折历程。"
audioSrc={getPublicPath('audio/maozedong/mp3_mzd_21.mp3')}
text="我们已经了解了毛主席1924年前后居住在上海时所经历的重要事件。接下来，请你跨越时空，走进风云激荡的1924年，通过参与毛主席在筹备中共四大期间做出的几次关键选择，体悟早期共产党人探索革命道路的初心与智慧，体悟理论与实践结合的深刻意义。"
onContinue={() => {
setEndingVisible(false)
// 结束语关闭后，标记展品4为已查看
setVisited((prev) => {
const next = new Set(prev)
next.add(4)
return next
})
}}
animationSpeed={200}
/>
{/* 光标4：展品关闭后播放的视频 */}
{showVideo4 && (
<Video
src={getPublicPath('video/maozedong/mzd_02.mp4')}
className="fixed inset-0 z-20000"
autoPlay
playsInline
showSkipButton
onSkip={() => {
setShowVideo4(false)
setGuide4SummaryStep(0)
setGuide4SummaryVisible(true)
}}
onEnded={() => {
setShowVideo4(false)
setGuide4SummaryStep(0)
setGuide4SummaryVisible(true)
}}
/>
)}
{/* 光标2：展品关闭后播放的视频 */}
{showVideo2 && (
<Video
ref={video2Ref}
src={getPublicPath('video/sunzhongshan/sunzhongshan_03.mp4')}
src={getPublicPath('video/maozedong/mzd_5.mp4')}
className="fixed inset-0 z-20000"
autoPlay
playsInline
@@ -532,6 +588,9 @@ const MaozedongPlace4 = () => {
content={successAlertContent}
onContinue={() => {
setSuccessAlertVisible(false)
//答题结束，标记展品4为已查看
markVisited('place4', 2)
// 进入下一题
setQuizStep((prev) => {
const next = prev + 1