更新依赖项及历史人物相关内容资源
- 更新 package.json 和 package-lock.json 中的依赖项 - 新增/更新陈云、黄炎培、鲁迅、孙中山的音频文件 - 新增场景和组件的图片资源 - 清理未使用的音频和图片文件 - 优化多个组件和页面的实现逻辑
This commit is contained in:
zhongyidian committed
1 parent
b1d55b9464
commit
e0fa47d21a
629 files changed
+24390
-2991
No files matched your search
@@ -10,11 +10,12 @@ import {
|
||||
} from '@/components'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { getBackgroundImage, getStaticImage, getPublicPath } from '@/lib/utils'
|
||||
import { 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 { saveZhanglepingStore, useZhanglepingStore } from '@/store/zhanglepingStore'
|
||||
|
||||
// starName 固定为 zhangleping
|
||||
const starName = 'zhangleping'
|
||||
@@ -34,13 +35,22 @@ const ZhanglepingPlace3 = () => {
|
||||
}>()
|
||||
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(null)
|
||||
const [visited, setVisited] = useState<Set<1 | 2 | 3>>(() => new Set())
|
||||
// 持久化接入
|
||||
const markVisited = useZhanglepingStore((s) => s.markExhibitVisited)
|
||||
const getVisited = useZhanglepingStore((s) => s.getVisitedExhibits)
|
||||
const setLastVisitedPlace = useZhanglepingStore((s) => s.setLastVisitedPlace)
|
||||
const persistedVisited = useMemo(
|
||||
() => new Set(getVisited('place3') as (1 | 2 | 3)[]),
|
||||
[getVisited]
|
||||
)
|
||||
const [visited, setVisited] = useState<Set<1 | 2 | 3>>(() => new Set(persistedVisited))
|
||||
|
||||
const [guideVisible1, setGuideVisible1] = useState(false)
|
||||
const [guideStep1, setGuideStep1] = useState(0)
|
||||
|
||||
const [guideVisible2, setGuideVisible2] = useState(false)
|
||||
const [guideStep2, setGuideStep2] = useState(0)
|
||||
// 展品2对话已移除（保留占位，避免未来扩展时大改）
|
||||
const [_guideVisible2, _setGuideVisible2] = useState(false)
|
||||
const [_guideStep2, _setGuideStep2] = useState(0)
|
||||
|
||||
const [guideVisible3, setGuideVisible3] = useState(false)
|
||||
const [guideStep3, setGuideStep3] = useState(0)
|
||||
@@ -52,7 +62,9 @@ const ZhanglepingPlace3 = () => {
|
||||
const [successAlert2Visible, setSuccessAlert2Visible] = useState(false)
|
||||
const [successAlert2Content, setSuccessAlert2Content] = useState('')
|
||||
|
||||
// 展品3对话结束后的两道单选题
|
||||
// 展品3对话结束后的讲解视频 + 两道单选题
|
||||
const [showVideo3, setShowVideo3] = useState(false)
|
||||
const video3Ref = useRef<VideoRef>(null)
|
||||
const [quiz3Visible, setQuiz3Visible] = useState(false)
|
||||
const [quiz3Step, setQuiz3Step] = useState<1 | 2>(1)
|
||||
const [quiz3Finished, setQuiz3Finished] = useState(false)
|
||||
@@ -73,9 +85,7 @@ const ZhanglepingPlace3 = () => {
|
||||
const total = 3
|
||||
const progressCount = visited.size
|
||||
const completed = progressCount >= total
|
||||
const subtitle = completed
|
||||
? '搜索该阶段相关资料(已完成)'
|
||||
: `搜索该阶段相关资料(${progressCount}/${total})`
|
||||
const subtitle = completed ? '已完成' : `${progressCount}/${total}`
|
||||
|
||||
const handleOpenExhibit = (id: 1 | 2 | 3) => {
|
||||
setActiveExhibitId(id)
|
||||
@@ -83,8 +93,8 @@ const ZhanglepingPlace3 = () => {
|
||||
setGuideVisible1(true)
|
||||
setGuideStep1(0)
|
||||
} else if (id === 2) {
|
||||
setGuideVisible2(true)
|
||||
setGuideStep2(0)
|
||||
// 展品2：去掉对话，打开弹窗同时直接播放讲解视频（其余逻辑保持不变）
|
||||
setShowVideo3(true)
|
||||
} else {
|
||||
setGuideVisible3(true)
|
||||
setGuideStep3(0)
|
||||
@@ -147,6 +157,8 @@ const ZhanglepingPlace3 = () => {
|
||||
src={getStaticImage('components/place/继续前进')}
|
||||
button
|
||||
onClick={() => {
|
||||
setLastVisitedPlace('place4')
|
||||
saveZhanglepingStore()
|
||||
navigate(`/${moduleName}/${starName}/place4`)
|
||||
}}
|
||||
/>
|
||||
@@ -162,10 +174,16 @@ const ZhanglepingPlace3 = () => {
|
||||
highlightSelectors={[]}
|
||||
zIndex={10001}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/zhangleping/mp3_zhangleping_12.mp3')}
|
||||
>
|
||||
那我明白了！这个戴上红领巾的三毛体现的应该是已经摆脱苦难的中国人民了。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/zhangleping/mp3_zhangleping_13.mp3')}
|
||||
>
|
||||
确实如此。这幅名叫《向日葵》的画选自于1950—1965年的《三毛日记》。像这样的“新三毛”形象再次发生重要转变是自1949年新中国成立之后，三毛戴上红领巾，成为新中国的少先队员。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
@@ -176,26 +194,8 @@ const ZhanglepingPlace3 = () => {
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 展品2：三毛形象的特点 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible2}
|
||||
onVisibleChange={setGuideVisible2}
|
||||
currentStep={guideStep2}
|
||||
onStepChange={setGuideStep2}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10001}
|
||||
>
|
||||
<GuideStepsItem speaker="guide">
|
||||
早期三毛以一个滑稽幽默、调皮活泼的上海弄堂儿童形象出现。抗战胜利后，张先生重返上海开启了新的创作历程，自1950年6月起开始居住在五原路288弄3号，直至1992年9月辞世，张先生在这里度过了他艺术生涯中极为重要的创作时期。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
他先是根据抗战前线的经历见闻创作了《三毛从军记》，后又以自己耳闻目睹的社会现实，创作了《三毛流浪记》，三毛的形象也逐步转变为承载民族苦难与底层儿童命运的象征。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
三毛身上的每一处伤痕、每一次遭遇，可以说都真实折射出了当时社会的困顿与民众的疾苦，也是为什么说这个时期，先生的画作更像是一面“镜子”。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
{/* 展品2：三毛形象的特点（原对话已移除） */}
|
||||
{/* 现改为：打开展品窗口的同时直接播放讲解视频 */}
|
||||
|
||||
{/* 展品3：三毛的社会影响 */}
|
||||
<GuideSteps
|
||||
@@ -214,10 +214,16 @@ const ZhanglepingPlace3 = () => {
|
||||
highlightSelectors={[]}
|
||||
zIndex={10001}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/zhangleping/mp3_zhangleping_10.mp3')}
|
||||
>
|
||||
小沪，我一直知道张乐平先生被称为“三毛之父”，但是今天才发现张先生笔下成长时期的三毛看起来比早期的三毛多了一些磨难，张先生塑造的这样一个小流浪儿也在跟着时代一起成长吗？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
<GuideStepsItem
|
||||
speaker="guide"
|
||||
audioSrc={getPublicPath('audio/zhangleping/mp3_zhangleping_11.mp3')}
|
||||
>
|
||||
你的感受很准确。三毛初次亮相于1935年的上海，他的创作者张乐平先生也开创了中国无文字儿童连环漫画之先河。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
@@ -240,6 +246,7 @@ const ZhanglepingPlace3 = () => {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.add(3)
|
||||
markVisited('place3', 3)
|
||||
return next
|
||||
})
|
||||
}
|
||||
@@ -247,6 +254,7 @@ const ZhanglepingPlace3 = () => {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.add(activeExhibitId)
|
||||
markVisited('place3', activeExhibitId)
|
||||
return next
|
||||
})
|
||||
}
|
||||
@@ -259,7 +267,7 @@ const ZhanglepingPlace3 = () => {
|
||||
{showVideo2 && (
|
||||
<Video
|
||||
ref={video2Ref}
|
||||
src={getPublicPath('video/sunzhongshan/sunzhongshan_03.mp4')}
|
||||
src={getPublicPath('video/zhangleping/zhangleping_5.mp4')}
|
||||
className="fixed inset-0 z-20000"
|
||||
autoPlay
|
||||
playsInline
|
||||
@@ -323,6 +331,26 @@ const ZhanglepingPlace3 = () => {
|
||||
</>
|
||||
</ScaledPortal>
|
||||
|
||||
{/* 展品2对话结束后的讲解视频 */}
|
||||
{showVideo3 && (
|
||||
<ScaledPortal enabled={true} zIndex={10050}>
|
||||
<Video
|
||||
ref={video3Ref}
|
||||
src={getPublicPath('video/zhangleping/zhangleping_5.mp4')}
|
||||
className="fixed inset-0 z-20000"
|
||||
autoPlay
|
||||
playsInline
|
||||
showSkipButton
|
||||
onEnded={() => {
|
||||
setShowVideo3(false)
|
||||
}}
|
||||
onSkip={() => {
|
||||
setShowVideo3(false)
|
||||
}}
|
||||
/>
|
||||
</ScaledPortal>
|
||||
)}
|
||||
|
||||
{/* 展品3对话结束后的两道单选题 + 每题答对后的提示（使用 ScaledPortal） */}
|
||||
<ScaledPortal enabled={quiz3Visible || successAlert3Visible} zIndex={10050}>
|
||||
<>
|
||||
|
||||
Reference in new issue
Block a user