feat:修改英文双引号
This commit is contained in:
kevinzhu committed
commit
4a2be3b4d0
1351 files changed
+56547
No files matched your search
@@ -0,0 +1,365 @@
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
Image,
|
||||
Title,
|
||||
Cursor,
|
||||
StudyGuideModal,
|
||||
} from '@/components'
|
||||
import { MatchQuizPanel, MultipleChoiceQuizPanel } from '@/components/layout/quiz'
|
||||
import { SuccessAlert } from '@/components/layout'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage } from '@/lib/utils'
|
||||
import { useState } from 'react'
|
||||
import { useCursorController } from '@/hooks/useCursorController'
|
||||
import { usePuzzleAnimation } from '@/contexts/PuzzleAnimationContext'
|
||||
import { useLuxunStore, saveLuxunStore } from '@/store/luxunStore'
|
||||
|
||||
// starName 固定为 luxun
|
||||
const starName = 'luxun'
|
||||
|
||||
// 展品 ID 与资源路径映射，ID 用来做唯一标识
|
||||
const exhibitSrcMap: Record<1 | 2, string> = {
|
||||
1: 'luxun/place1/展品1',
|
||||
2: 'luxun/place1/展品2',
|
||||
}
|
||||
|
||||
const LuxunPlace1 = () => {
|
||||
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 [visible, setVisible] = useState(false)
|
||||
const [visibleIndex, setVisibleIndex] = useState(0)
|
||||
|
||||
// 打开展品2后的对话显示状态
|
||||
const [showAfterExhibitDialog, setShowAfterExhibitDialog] = useState(false)
|
||||
const [afterExhibitDialogStep, setAfterExhibitDialogStep] = useState(0)
|
||||
// 当前激活的展品 ID（只存 ID，不直接存路径，便于作为唯一标识）
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null)
|
||||
// 使用持久化的访问状态
|
||||
const place = 'place1'
|
||||
const { markExhibitVisited, getVisitedExhibits, setLastVisitedPlace } = useLuxunStore()
|
||||
|
||||
// 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
|
||||
const visitedExhibits = getVisitedExhibits(place)
|
||||
const visited = new Set(visitedExhibits)
|
||||
// 连线题显示状态（展品1关闭后）
|
||||
const [showMatchQuiz, setShowMatchQuiz] = useState(false)
|
||||
// 连线题成功提示状态
|
||||
const [showMatchQuizSuccess, setShowMatchQuizSuccess] = useState(false)
|
||||
const [showExhibit2Quiz, setShowExhibit2Quiz] = useState(false)
|
||||
const [showExhibit2QuizSuccess, setShowExhibit2QuizSuccess] = useState(false)
|
||||
|
||||
// Cursor 顺序控制：1 -> 2
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1],
|
||||
dependencies: {
|
||||
2: [1],
|
||||
},
|
||||
visited: visited,
|
||||
})
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
if (index === 1) {
|
||||
setVisibleIndex(0)
|
||||
setVisible(true)
|
||||
}
|
||||
|
||||
if (index === 2) {
|
||||
setAfterExhibitDialogStep(0)
|
||||
setShowAfterExhibitDialog(true)
|
||||
}
|
||||
setActiveExhibitId(index)
|
||||
}
|
||||
|
||||
const progressCount = visited.size
|
||||
const total = 2
|
||||
const completed = progressCount >= total
|
||||
|
||||
// 当两个展品都浏览完成后，自动显示对话
|
||||
// useEffect(() => {
|
||||
// if (completed && !afterExhibitDialogShown) {
|
||||
// setShowAfterExhibitDialog(true);
|
||||
// setAfterExhibitDialogShown(true);
|
||||
// }
|
||||
// }, [completed, afterExhibitDialogShown]);
|
||||
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(`luxun/place1/背景`),
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<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-[calc(50%-48px)] top-80"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 展品2 */}
|
||||
<Cursor
|
||||
className="absolute left-[calc(50%)] bottom-60"
|
||||
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('place2')
|
||||
saveLuxunStore()
|
||||
navigate(`/${moduleName}/${starName}/place2`)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 遮罩层 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ''}
|
||||
onOpen={() => {
|
||||
if (activeExhibitId === 1) {
|
||||
triggerPuzzleAnimation(1)
|
||||
}
|
||||
if (activeExhibitId === 2) {
|
||||
triggerPuzzleAnimation(2)
|
||||
}
|
||||
}}
|
||||
// description={
|
||||
// activeExhibitId == 1
|
||||
// ? `1892-1898年，少年时期在绍兴三味书屋求学积淀；\n1919-1923年，于北京八道湾参加新文化运动、酝酿《阿Q正传》；\n1926年9-12月，赴厦门大学任教期间聚焦底层创作杂文；\n1927年3-9月，广州白云楼整理旧作定稿《朝花夕拾》部分篇章。`
|
||||
// : undefined
|
||||
// }
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
// 如果是展品1关闭，显示连线题
|
||||
if (activeExhibitId === 1) {
|
||||
setShowMatchQuiz(true)
|
||||
} else {
|
||||
setShowExhibit2Quiz(true)
|
||||
}
|
||||
}
|
||||
setActiveExhibitId(null)
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 学习引导词 */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => {
|
||||
setShowGuideModal(false)
|
||||
if (!visible && !afterDialogGuideShown) {
|
||||
setAfterDialogGuideShown(true)
|
||||
setShowAfterDialogGuide(true)
|
||||
}
|
||||
}}
|
||||
audioSrc={getPublicPath('audio/luxun/mp3_luxun_02.mp3')}
|
||||
ailgn="left"
|
||||
>
|
||||
1.场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态。
|
||||
{'\n'}
|
||||
2.在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点开查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习。
|
||||
{'\n'}
|
||||
3.所有动态光点的展品全部学习后才能进入下一个场景学习。
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 引导 */}
|
||||
<GuideSteps
|
||||
visible={visible}
|
||||
currentStep={visibleIndex}
|
||||
onStepChange={setVisibleIndex}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setVisible(nextVisible)
|
||||
}}
|
||||
showMask={false}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student" audioSrc={getPublicPath('audio/luxun/mp3_luxun_03.mp3')}>
|
||||
小沪！我知道鲁迅是1933年搬到大陆新村9号的，那在这之前他为什么会选择来到上海，又有哪些思想转变呢？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/luxun/mp3_luxun_04.mp3')}>
|
||||
你问得很关键！从1892-1898年少年时期在绍兴三味书屋求学积淀，到1919-1923年于北京八道湾参加新文化运动、酝酿《阿Q正传》，再到1926年9-12月赴厦门大学任教期间聚焦底层创作杂文。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
1927年3-9月广州白云楼整理旧作定稿《朝花夕拾》部分篇章，鲁迅的创作足迹跨越南北，而1927年是鲁迅思想的重要转折点，这一年他在广州亲历了“四一二”反革命政变，亲眼看见进步青年和革命志士倒在血泊中，曾经对“温和改革”的幻想彻底破灭。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
此前他写下《狂人日记》《阿Q正传》批判封建礼教，参加语丝社针砭时弊，但始终在“彷徨”中摸索救国之路。广州的血雨腥风，让他认清了反动派的真面目。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 对话结束后的学习引导 */}
|
||||
<StudyGuideModal
|
||||
visible={showAfterDialogGuide}
|
||||
onContinue={() => setShowAfterDialogGuide(false)}
|
||||
audioSrc={getPublicPath('audio/luxun/mp3_luxun_01.mp3')}
|
||||
>
|
||||
{`同学你好，欢迎来到“走进故居·对话”学习模块！
|
||||
此刻你正立在鲁迅故居的一楼客厅里，接下来请随旧时光的纹路，一同翻开先生思想长卷里的5段深刻轨迹：风雨前夕的思想淬炼、杂文集里的匕首与投枪、历史新编中的现实呐喊、为亡友编纂的精神丰碑、6平方米的红色庇护所。准备好共赴这场笔尖与灵魂的滚烫相遇了吗？`}
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 浏览完展品后的对话 */}
|
||||
<GuideSteps
|
||||
visible={showAfterExhibitDialog}
|
||||
currentStep={afterExhibitDialogStep}
|
||||
onStepChange={setAfterExhibitDialogStep}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setShowAfterExhibitDialog(nextVisible)
|
||||
}}
|
||||
showMask={false}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student" audioSrc={getPublicPath('audio/luxun/mp3_luxun_05.mp3')}>
|
||||
这张照片也是鲁迅在上海期间的住所吗？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/luxun/mp3_luxun_06.mp3')}>
|
||||
不错！1927年10月，鲁迅带着许广平来到上海，先住进了虹口区横浜路景云里。在景云里的两年半，他结识了冯雪峰等共产党员，参与发起中国左翼作家联盟，从"独战的英雄"转变为革命文艺战线的旗手。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
这段时间他写下《三闲集》《二心集》，表达他在当时历史条件下针对社会现象、文化问题和论战的看法与社会批判，此间还翻译了大量马列文艺理论著作，为此后的战斗打下了坚实思想基础。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide" audioSrc={getPublicPath('audio/luxun/mp3_luxun_07.mp3')}>
|
||||
鲁迅在发起成立左联后，为躲避国民党当局监视，1930年5月，与许广平、周海婴迁居到拉摩斯公寓。1933年4月，受战火纷扰影响，为安全及健康计，同时也为了更方便开展革命文化工作，鲁迅以"内山书店职员"的名义，搬到了大陆新村9号。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="student" audioSrc={getPublicPath('audio/luxun/mp3_luxun_08.mp3')}>
|
||||
这个过程的确十分曲折。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 连线题（展品1关闭后） */}
|
||||
<MatchQuizPanel
|
||||
visible={showMatchQuiz}
|
||||
title="【连线】请将左侧的日期与右侧对应的事件进行连线："
|
||||
leftItems={[
|
||||
{ id: '1', label: '1892-1898年' },
|
||||
{ id: '2', label: '1919-1923年' },
|
||||
{ id: '3', label: '1926年9-12月' },
|
||||
{ id: '4', label: '1927年3-9月' },
|
||||
]}
|
||||
rightItems={[
|
||||
{ id: 'a', label: '在绍兴三味书屋求学积淀' },
|
||||
{ id: 'b', label: '于北京八道湾参加新文化运动、酝酿《阿Q正传》' },
|
||||
{ id: 'c', label: '赴厦门大学任教,聚焦底层创作杂文' },
|
||||
{ id: 'd', label: '在广州白云楼整理旧作定稿《朝花夕拾》部分篇章' },
|
||||
]}
|
||||
correctMatches={[
|
||||
{ leftId: '1', rightId: 'a' },
|
||||
{ leftId: '2', rightId: 'b' },
|
||||
{ leftId: '3', rightId: 'c' },
|
||||
{ leftId: '4', rightId: 'd' },
|
||||
]}
|
||||
errorMessage="连线不正确，请重新尝试！"
|
||||
onSubmit={(matches, isCorrect) => {
|
||||
if (isCorrect) {
|
||||
setShowMatchQuiz(false)
|
||||
setShowMatchQuizSuccess(true)
|
||||
}
|
||||
}}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
{/* 连线题成功提示 */}
|
||||
<SuccessAlert
|
||||
title="恭喜你，匹配正确！"
|
||||
visible={showMatchQuizSuccess}
|
||||
onContinue={() => {
|
||||
setShowMatchQuizSuccess(false)
|
||||
// 标记展品1为已访问
|
||||
markExhibitVisited(place, 1)
|
||||
}}
|
||||
onClose={() => {
|
||||
setShowMatchQuizSuccess(false)
|
||||
// 标记展品1为已访问
|
||||
markExhibitVisited(place, 1)
|
||||
}}
|
||||
/>
|
||||
|
||||
<MultipleChoiceQuizPanel
|
||||
visible={showExhibit2Quiz}
|
||||
title="【多选】鲁迅先生居住在上海景云里的两年半，写下的作品包括："
|
||||
options={[
|
||||
{ value: 'A', label: 'A. 阿 Q 正传' },
|
||||
{ value: 'B', label: 'B. 三闲集' },
|
||||
{ value: 'C', label: 'C. 二心集' },
|
||||
{ value: 'D', label: 'D. 朝花夕拾' },
|
||||
]}
|
||||
correctAnswer={['B', 'C']}
|
||||
errorMessage={(selectedValues) => {
|
||||
const picked = new Set(selectedValues)
|
||||
|
||||
if (picked.has('A')) {
|
||||
return '《阿 Q 正传》创作于 1921—1922 年，最初发表于《晨报副刊》，早于鲁迅居住在上海景云里时期。请你再想想吧！'
|
||||
}
|
||||
if (picked.has('D')) {
|
||||
return '《朝花夕拾》创作于 1926 年，最初以《旧事重提》为总题发表，早于鲁迅居住在上海景云里时期。请你再想想吧！'
|
||||
}
|
||||
return '请你再想想吧！'
|
||||
}}
|
||||
onSubmit={(_values, isCorrect) => {
|
||||
if (isCorrect) {
|
||||
setShowExhibit2Quiz(false)
|
||||
setShowExhibit2QuizSuccess(true)
|
||||
}
|
||||
}}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
<SuccessAlert
|
||||
title="恭喜你，选择正确！"
|
||||
visible={showExhibit2QuizSuccess}
|
||||
onContinue={() => {
|
||||
setShowExhibit2QuizSuccess(false)
|
||||
markExhibitVisited(place, 2)
|
||||
}}
|
||||
onClose={() => {
|
||||
setShowExhibit2QuizSuccess(false)
|
||||
markExhibitVisited(place, 2)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LuxunPlace1
|
||||
Reference in new issue
Block a user