feat:修改英文双引号
This commit is contained in:
kevinzhu committed
commit
4a2be3b4d0
1351 files changed
+56547
No files matched your search
@@ -0,0 +1,320 @@
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
Image,
|
||||
Title,
|
||||
MultipleChoiceQuizPanel,
|
||||
Video,
|
||||
type VideoRef,
|
||||
} from '@/components'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage } from '@/lib/utils'
|
||||
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'
|
||||
|
||||
// 展品 ID 与资源路径映射，ID 用来做唯一标识
|
||||
const exhibitSrcMap: Record<1 | 2, string> = {
|
||||
1: 'maozedong/place2/场景2展品1',
|
||||
2: 'maozedong/place2/场景2展品2',
|
||||
}
|
||||
|
||||
const MaozedongPlace2 = () => {
|
||||
const navigate = useNavigate()
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string
|
||||
}>()
|
||||
|
||||
// 获取碎片动画触发方法
|
||||
const { triggerPuzzleAnimation } = usePuzzleAnimation()
|
||||
|
||||
// 当前激活的展品 ID
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null)
|
||||
// 持久化接入
|
||||
const markVisited = useMaozedongStore((s) => s.markExhibitVisited)
|
||||
const getVisited = useMaozedongStore((s) => s.getVisitedExhibits)
|
||||
const setLastVisitedPlace = useMaozedongStore((s) => s.setLastVisitedPlace)
|
||||
const persistedVisited = useMemo(() => new Set(getVisited('place2') as (1 | 2)[]), [getVisited])
|
||||
const [visited, setVisited] = useState<Set<1 | 2>>(() => new Set(persistedVisited))
|
||||
|
||||
// 展品1的对话引导状态
|
||||
const [guideVisible1, setGuideVisible1] = useState(false)
|
||||
const [guideStep1, setGuideStep1] = useState(0)
|
||||
|
||||
// 展品2的对话引导状态
|
||||
const [guideVisible2, setGuideVisible2] = useState(false)
|
||||
const [guideStep2, setGuideStep2] = useState(0)
|
||||
|
||||
// 展品1对话结束后播放的视频状态（播完后再出题目）
|
||||
const [showVideo, setShowVideo] = useState(false)
|
||||
const videoRef = useRef<VideoRef>(null)
|
||||
|
||||
// 展品1对话结束后的多选题
|
||||
const [quizVisible, setQuizVisible] = useState(false)
|
||||
const [quizPassed, setQuizPassed] = useState(false)
|
||||
const [successAlertVisible, setSuccessAlertVisible] = useState(false)
|
||||
|
||||
// Cursor 顺序控制：1 -> 2
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1],
|
||||
dependencies: {
|
||||
2: [1],
|
||||
},
|
||||
visited,
|
||||
})
|
||||
|
||||
const handleOpenExhibit = (id: 1 | 2) => {
|
||||
setActiveExhibitId(id)
|
||||
if (id === 1) {
|
||||
setGuideVisible1(true)
|
||||
setGuideStep1(0)
|
||||
// 重新进入时重置题目完成状态
|
||||
setQuizPassed(false)
|
||||
} else if (id === 2) {
|
||||
// 展品2：先看展品，关闭展品后再显示对话
|
||||
setGuideVisible2(false)
|
||||
setGuideStep2(0)
|
||||
}
|
||||
}
|
||||
|
||||
// 展品1对话步骤变化
|
||||
const handleGuideStepChange1 = (step: number) => {
|
||||
setGuideStep1(step)
|
||||
}
|
||||
|
||||
// 展品1对话完成
|
||||
const handleGuideVisibleChange1 = (visible: boolean) => {
|
||||
setGuideVisible1(visible)
|
||||
if (!visible && !quizPassed) {
|
||||
setShowVideo(true)
|
||||
}
|
||||
}
|
||||
|
||||
// 展品2对话步骤变化
|
||||
const handleGuideStepChange2 = (step: number) => {
|
||||
setGuideStep2(step)
|
||||
}
|
||||
|
||||
// 展品2对话完成
|
||||
const handleGuideVisibleChange2 = (visible: boolean) => {
|
||||
setGuideVisible2(visible)
|
||||
}
|
||||
|
||||
const progressCount = visited.size
|
||||
const total = 2
|
||||
const completed = progressCount >= total
|
||||
const subtitle = completed ? '已完成' : `${progressCount}/${total}`
|
||||
|
||||
if (!moduleName) return null
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: getBackgroundImage(`${starName}/place2/场景2`),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<Title
|
||||
title="播撒红色火种"
|
||||
subtitle={subtitle}
|
||||
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-217 bottom-145"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 光标2 */}
|
||||
<Cursor
|
||||
className="absolute right-92 bottom-105"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-0"
|
||||
src={getStaticImage('components/place/继续前进')}
|
||||
button
|
||||
onClick={() => {
|
||||
setLastVisitedPlace('place3')
|
||||
saveMaozedongStore()
|
||||
navigate(`/${moduleName}/${starName}/place3`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 展品遮罩层 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
||||
onOpen={() => {
|
||||
if (activeExhibitId === 1) {
|
||||
triggerPuzzleAnimation(3)
|
||||
}
|
||||
if (activeExhibitId === 2) {
|
||||
triggerPuzzleAnimation(4)
|
||||
}
|
||||
}}
|
||||
onClose={() => {
|
||||
const currentId = activeExhibitId
|
||||
|
||||
if (currentId !== null) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev)
|
||||
next.add(currentId)
|
||||
markVisited('place2', currentId)
|
||||
saveMaozedongStore()
|
||||
return next
|
||||
})
|
||||
}
|
||||
setActiveExhibitId(null)
|
||||
|
||||
// 展品2：关闭后显示对话
|
||||
if (currentId === 2) {
|
||||
setGuideStep2(0)
|
||||
setGuideVisible2(true)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1对话结束后播放的视频：播放完毕后出现题目 */}
|
||||
{showVideo && (
|
||||
<ScaledPortal zIndex={20000}>
|
||||
<Video
|
||||
ref={videoRef}
|
||||
src={getPublicPath('video/maozedong/mzd_002.mp4')}
|
||||
className="absolute inset-0 w-full h-full"
|
||||
autoPlay
|
||||
playsInline
|
||||
showSkipButton
|
||||
onEnded={() => {
|
||||
setShowVideo(false)
|
||||
setQuizVisible(true)
|
||||
}}
|
||||
/>
|
||||
</ScaledPortal>
|
||||
)}
|
||||
|
||||
{/* 展品1的对话引导（文字+语音播报占位） */}
|
||||
<GuideSteps
|
||||
visible={guideVisible1}
|
||||
onVisibleChange={handleGuideVisibleChange1}
|
||||
currentStep={guideStep1}
|
||||
onStepChange={handleGuideStepChange1}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10001}
|
||||
>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/maozedong/mp3_mzd_05.mp3')}
|
||||
>
|
||||
中共一大定了“推翻资产阶级政权”的目标，但中共二大提
|
||||
出了“反帝反封建的民主革命纲领”，为什么会有这样的转变呢?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/maozedong/mp3_mzd_06.mp3')}>
|
||||
中共一大时我们中国共产党刚成立，像刚学走路的孩子，
|
||||
目标很宏大——“建立无产阶级专政”“消灭阶级”。但毛主席回到湖南后，
|
||||
做了实际调查发现必须先解决“眼前的敌人”。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem
|
||||
speaker="student"
|
||||
audioSrc={getPublicPath('audio/maozedong/mp3_mzd_07.mp3')}
|
||||
>
|
||||
“眼前的敌人”?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/maozedong/mp3_mzd_08.mp3')}>
|
||||
对！想想看1922年长沙的码头工人罢工，安源的路矿工人罢工，他们的敌人是谁？是外国资本家，是军阀。中共二大时毛主席虽然没有出席，但完全赞同“最低纲领”——打倒军阀、推翻帝国主义压迫，实现民族独立和人民民主。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
这就像盖房子，得先把地基打好；等打倒了军阀和帝国主义，再谈社会主义也不迟。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 展品2的对话引导 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible2}
|
||||
onVisibleChange={handleGuideVisibleChange2}
|
||||
currentStep={guideStep2}
|
||||
onStepChange={handleGuideStepChange2}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10001}
|
||||
>
|
||||
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/maozedong/mp3_mzd_09.mp3')}>
|
||||
后来喊出的“打倒列强，除军阀”的口号，就是从这儿来的。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 展品1对话结束后的多选题 + 成功提示（使用 ScaledPortal） */}
|
||||
<ScaledPortal enabled={quizVisible || successAlertVisible} zIndex={10050}>
|
||||
<>
|
||||
<MultipleChoiceQuizPanel
|
||||
visible={quizVisible}
|
||||
title="【多选】1922年7月16日至23日，中国共产党第二次全国代表大会在上海南成都路辅德里625号召开。大会制定了党的最低纲领和最高纲领，党的最低纲领，即党在民主革命阶段的纲领是："
|
||||
options={[
|
||||
{ value: 'A', label: 'A.打倒军阀，建立国内和平' },
|
||||
{
|
||||
value: 'B',
|
||||
label: 'B.推翻国际帝国主义的压迫，达到中华民族的完全独立',
|
||||
},
|
||||
{ value: 'C', label: 'C.统一中国为真正的民主共和国' },
|
||||
]}
|
||||
correctAnswer={['A', 'B', 'C']}
|
||||
minSelections={1}
|
||||
maxSelections={3}
|
||||
errorMessage={(selectedValues) => {
|
||||
if (selectedValues.length < 3) {
|
||||
return '你还没有全面了解中共二大提出的党的最低纲领哦。请你再想想吧！'
|
||||
}
|
||||
return '还不太对，再仔细对照对话内容想一想吧～'
|
||||
}}
|
||||
onSubmit={(_values, isCorrect) => {
|
||||
if (isCorrect) {
|
||||
setQuizVisible(false)
|
||||
setQuizPassed(true)
|
||||
setSuccessAlertVisible(true)
|
||||
}
|
||||
}}
|
||||
zIndex={10000}
|
||||
/>
|
||||
|
||||
<SuccessAlert
|
||||
visible={successAlertVisible}
|
||||
onContinue={() => {
|
||||
setSuccessAlertVisible(false)
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
</ScaledPortal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MaozedongPlace2
|
||||
Reference in new issue
Block a user