更新依赖项及历史人物相关内容资源
- 更新 package.json 和 package-lock.json 中的依赖项 - 新增/更新陈云、黄炎培、鲁迅、孙中山的音频文件 - 新增场景和组件的图片资源 - 清理未使用的音频和图片文件 - 优化多个组件和页面的实现逻辑
This commit is contained in:
1 parent
b1d55b9464
commit
e0fa47d21a
629 files changed
+24390
-2991
No files matched your search
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState, useRef } from 'react'
|
||||
import { useMemo, useState, useRef, useEffect } from 'react'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import {
|
||||
Image,
|
||||
@@ -14,6 +14,7 @@ import { SuccessAlert, DragQuizPanel } from '@/components/layout'
|
||||
import { MultipleChoiceQuizPanel } from '@/components/layout/quiz'
|
||||
import { GuideSteps, GuideStepsItem } from '@/components'
|
||||
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
|
||||
import { setCourseTimeProgress } from '@/lib/utils/api-common'
|
||||
type QuizOption = {
|
||||
value: string
|
||||
label: string
|
||||
@@ -147,27 +148,13 @@ const ChenyunInternalization = () => {
|
||||
const [showVideo, setShowVideo] = useState(false)
|
||||
const [postGuideVisible, setPostGuideVisible] = useState(false)
|
||||
const [showLetter, setShowLetter] = useState(false)
|
||||
const [showLetterVideo, setShowLetterVideo] = useState(false)
|
||||
const [showStudyGuide, setShowStudyGuide] = useState(false)
|
||||
const videoRef = useRef<VideoRef>(null)
|
||||
const letterVideoRef = useRef<VideoRef>(null)
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
setVisible(true)
|
||||
}, [])
|
||||
|
||||
// 组件卸载时清理背景音乐
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current
|
||||
return () => {
|
||||
if (audio) {
|
||||
audio.pause()
|
||||
audio.currentTime = 0
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
// 视频加载完成后自动播放
|
||||
const handleVideoCanPlay = () => {
|
||||
if (showVideo && videoRef.current) {
|
||||
@@ -177,14 +164,6 @@ const ChenyunInternalization = () => {
|
||||
}
|
||||
}
|
||||
|
||||
// 信件视频加载完成后自动播放
|
||||
const handleLetterVideoCanPlay = () => {
|
||||
if (showLetterVideo && letterVideoRef.current) {
|
||||
letterVideoRef.current.play().catch((error) => {
|
||||
console.warn('信件视频播放失败:', error)
|
||||
})
|
||||
}
|
||||
}
|
||||
const anchors: VideoAnchor[] = useMemo(
|
||||
() =>
|
||||
QUIZ_ANCHORS.map((item) => {
|
||||
@@ -243,7 +222,7 @@ const ChenyunInternalization = () => {
|
||||
<SuccessAlert
|
||||
visible={activeSuccess === item.id}
|
||||
title="恭喜你, 选择正确!"
|
||||
content="回答正确,请继续探索。"
|
||||
content=""
|
||||
onContinue={() => {
|
||||
setActiveSuccess(null)
|
||||
triggerPuzzleAnimation(16)
|
||||
@@ -357,9 +336,6 @@ const ChenyunInternalization = () => {
|
||||
onClick={() => navigate(`/${moduleName}/${starName}/home`)}
|
||||
/>
|
||||
|
||||
{/* 内化结束后的背景音乐 */}
|
||||
<audio ref={audioRef} src={getPublicPath('audio/letter/8如愿.m4a')} loop />
|
||||
|
||||
{showVideo && (
|
||||
<Video
|
||||
ref={videoRef}
|
||||
@@ -372,12 +348,6 @@ const ChenyunInternalization = () => {
|
||||
onEnded={() => {
|
||||
setShowVideo(false)
|
||||
setPostGuideVisible(true)
|
||||
if (audioRef.current) {
|
||||
audioRef.current.currentTime = 0
|
||||
audioRef.current.play().catch((error) => {
|
||||
console.warn('背景音乐播放失败:', error)
|
||||
})
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
@@ -445,40 +415,25 @@ const ChenyunInternalization = () => {
|
||||
{/* 信件组件:视频引导结束后弹出,带飞入和放大动画 */}
|
||||
<LetterToChenyun
|
||||
visible={showLetter}
|
||||
onSubmit={(values) => {
|
||||
// 提交信件的逻辑(values 为多个填空的内容)
|
||||
console.log('提交信件', values)
|
||||
onClose={() => {
|
||||
setShowLetter(false)
|
||||
setShowLetterVideo(true)
|
||||
}}
|
||||
onAnimationEnd={() => {
|
||||
setShowStudyGuide(true)
|
||||
}}
|
||||
showVideo={true}
|
||||
/>
|
||||
|
||||
{/* 信件关闭后的视频 */}
|
||||
{showLetterVideo && (
|
||||
<Video
|
||||
ref={letterVideoRef}
|
||||
src={getPublicPath('video/letter/neihua_jixin.mp4')}
|
||||
className="h-full w-full"
|
||||
playsInline
|
||||
onCanPlay={handleLetterVideoCanPlay}
|
||||
onEnded={() => {
|
||||
setShowLetterVideo(false)
|
||||
setShowStudyGuide(true)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<EndingOverlay
|
||||
visible={showStudyGuide}
|
||||
text="恭喜你已经顺利完成了陈云纪念馆的学习,至此,你已经完成了本课程所有故居的学习,
|
||||
希望你能有所收获,学习八位名人的优秀品质和精神,在新时代为中华民族伟大复兴发光发热!"
|
||||
text="亲爱的同学,恭喜你圆满完成了陈云纪念馆的学习,也顺利走完了本课程所有名人故居的探访之旅。
|
||||
在这段旅程里,你与八位伟大的灵魂跨越时空对话,触摸他们的理想与热忱,感受他们的坚韧与担当。这些宝贵的精神财富,早已融入民族的血脉,此刻也正成为你心中的光。
|
||||
新时代的征程已在脚下,愿你带着这份收获与感动,将先辈的精神化作前行的力量,在属于我们的时代里,勇敢发光发热,为中华民族的伟大复兴贡献自己的一份力量。
|
||||
"
|
||||
animationSpeed={200}
|
||||
onContinue={() => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause()
|
||||
audioRef.current.currentTime = 0
|
||||
}
|
||||
setShowStudyGuide(false)
|
||||
setCourseTimeProgress(24)
|
||||
navigate(`/${moduleName}/${starName}/home`)
|
||||
}}
|
||||
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_40.mp3')}
|
||||
|
||||
Reference in new issue
Block a user