293 lines
12 KiB
TypeScript
293 lines
12 KiB
TypeScript
/**
|
|
* 米棉之战题目组件
|
|
* 包含单选题1-5、旁白1-3、成功提示框、结束语
|
|
*/
|
|
import { Narration, SingleChoiceQuizPanel, EndingOverlay } from '@/components'
|
|
import SuccessAlert from '@/components/layout/alert/success-alert'
|
|
import { getPublicPath } from '@/lib/utils'
|
|
|
|
export interface MimianQuizzesProps {
|
|
/** 是否显示单选题1 */
|
|
showQuiz1: boolean
|
|
/** 是否显示旁白1 */
|
|
showNarration1: boolean
|
|
/** 是否显示单选题2 */
|
|
showQuiz2: boolean
|
|
/** 是否显示旁白2 */
|
|
showNarration2: boolean
|
|
/** 是否显示单选题3 */
|
|
showQuiz3: boolean
|
|
/** 是否显示单选题4 */
|
|
showQuiz4: boolean
|
|
/** 是否显示旁白3 */
|
|
showNarration3: boolean
|
|
/** 是否显示单选题5 */
|
|
showQuiz5: boolean
|
|
/** 是否显示旁白5（结束语） */
|
|
showNarration5: boolean
|
|
/** 是否显示成功提示框 */
|
|
showSuccessAlert: boolean
|
|
/** 成功提示框内容 */
|
|
successAlertContent: string
|
|
/** 单选题1提交回调 */
|
|
onQuiz1Submit: (value: string, isCorrect: boolean) => void
|
|
/** 成功提示框1继续回调 */
|
|
onSuccessAlert1Continue: () => void
|
|
/** 旁白1关闭回调 */
|
|
onNarration1Close: () => void
|
|
/** 单选题2提交回调 */
|
|
onQuiz2Submit: (value: string, isCorrect: boolean) => void
|
|
/** 成功提示框2继续回调 */
|
|
onSuccessAlert2Continue: () => void
|
|
/** 错误提示框继续回调 */
|
|
onErrorAlertContinue: () => void
|
|
/** 旁白2关闭回调 */
|
|
onNarration2Close: () => void
|
|
/** 单选题3提交回调 */
|
|
onQuiz3Submit: (value: string, isCorrect: boolean) => void
|
|
/** 单选题3成功/错误提示继续回调 */
|
|
onQuiz3AlertContinue: (isCorrect: boolean) => void
|
|
/** 单选题4提交回调 */
|
|
onQuiz4Submit: (value: string, isCorrect: boolean) => void
|
|
/** 单选题4成功/错误提示继续回调 */
|
|
onQuiz4AlertContinue: (isCorrect: boolean) => void
|
|
/** 旁白3关闭回调 */
|
|
onNarration3Close: () => void
|
|
/** 单选题5提交回调 */
|
|
onQuiz5Submit: (value: string, isCorrect: boolean) => void
|
|
/** 单选题5成功/错误提示继续回调 */
|
|
onQuiz5AlertContinue: (isEndSuccess: boolean) => void
|
|
/** 结束语继续回调 */
|
|
onNarration5Continue: () => void
|
|
}
|
|
|
|
/**
|
|
* 米棉之战题目组件
|
|
* 显示所有题目、旁白和提示框
|
|
*/
|
|
export const MimianQuizzes = ({
|
|
showQuiz1,
|
|
showNarration1,
|
|
showQuiz2,
|
|
showNarration2,
|
|
showQuiz3,
|
|
showQuiz4,
|
|
showNarration3,
|
|
showQuiz5,
|
|
showNarration5,
|
|
showSuccessAlert,
|
|
successAlertContent,
|
|
onQuiz1Submit,
|
|
onSuccessAlert1Continue,
|
|
onNarration1Close,
|
|
onQuiz2Submit,
|
|
onSuccessAlert2Continue,
|
|
onErrorAlertContinue,
|
|
onNarration2Close,
|
|
onQuiz3Submit,
|
|
onQuiz3AlertContinue,
|
|
onQuiz4Submit,
|
|
onQuiz4AlertContinue,
|
|
onNarration3Close,
|
|
onQuiz5Submit,
|
|
onQuiz5AlertContinue,
|
|
onNarration5Continue,
|
|
}: MimianQuizzesProps) => {
|
|
return (
|
|
<>
|
|
{/* 米棉之战 - 单选题1（图1） */}
|
|
<SingleChoiceQuizPanel
|
|
visible={showQuiz1}
|
|
title={`【单选】投机商集中冲击“两白一黑”的核心目的是：`}
|
|
options={[
|
|
{ value: 'A', label: 'A. 满足市场需求' },
|
|
{ value: 'B', label: 'B. 扰乱经济秩序、动摇政权' },
|
|
]}
|
|
correctAnswer="B"
|
|
errorMessage="很抱歉，你选错了！请你再思考一下吧！"
|
|
onSubmit={onQuiz1Submit}
|
|
/>
|
|
|
|
{/* 米棉之战 - 成功提示框1 */}
|
|
<SuccessAlert
|
|
visible={showSuccessAlert && successAlertContent === '恭喜你，选择正确！'}
|
|
title="恭喜你，选择正确!"
|
|
onContinue={onSuccessAlert1Continue}
|
|
/>
|
|
|
|
{/* 米棉之战 - 旁白1（图2） */}
|
|
<Narration
|
|
text="为了打击投机资本势力，面对上海米价、纱价等上涨，又同时影响到整个华东和华北、中南等地的情况，陈云于1949年7月17日率领中财委抵达上海，展开了一系列的举措，7月27日至8月15日，陈云主持召开了华东、华北、华中、东北、西北5个大区的财经会议，商讨解决上海和全国面临的严峻经济形势问题和对策。"
|
|
visible={showNarration1}
|
|
onClose={onNarration1Close}
|
|
enableAnimation={false}
|
|
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_32.mp3')}
|
|
/>
|
|
|
|
{/* 米棉之战 - 单选题2（图3） */}
|
|
<SingleChoiceQuizPanel
|
|
visible={showQuiz2}
|
|
title={`【单选】你觉得此时解决上海和全国面临的严峻经济形势问题的对策应该是：`}
|
|
options={[
|
|
{ value: 'A', label: 'A. 局部限购' },
|
|
{ value: 'B', label: 'B. 增发货币' },
|
|
{ value: 'C', label: 'C. 全国调运+集中抛售' },
|
|
]}
|
|
correctAnswer="C"
|
|
onWrongSelect={(value) => {
|
|
if (value === 'A') {
|
|
return '很抱歉，你选错了！当时物价上涨已波及多地区，局部限购无法阻止投机商转移物资炒作。上海米、棉依赖外部供应，本地物资匮乏，限购既不解决缺口，还会加剧民众恐慌，扰乱市场秩序。请你再思考一下吧！'
|
|
} else if (value === 'B') {
|
|
return '很抱歉，你选错了！当时国民党滥发货币导致的贬值阴影未消，民众对新货币缺乏信任。此时增发人民币，会使货币供应量远超物资总量，重蹈贬值覆辙，削弱人民币信用，让投机气焰更盛。请你再思考一下吧！'
|
|
}
|
|
}}
|
|
onSubmit={onQuiz2Submit}
|
|
/>
|
|
|
|
{/* 米棉之战 - 成功提示框2（单选题2答对后） */}
|
|
<SuccessAlert
|
|
visible={showSuccessAlert && successAlertContent.includes('全国一盘棋')}
|
|
title="恭喜你，选择正确！"
|
|
content={successAlertContent}
|
|
onContinue={onSuccessAlert2Continue}
|
|
/>
|
|
|
|
{/* 米棉之战 - 错误提示框（单选题2答错后） */}
|
|
{/* <SuccessAlert
|
|
visible={
|
|
showSuccessAlert &&
|
|
successAlertContent.includes("很抱歉") &&
|
|
!successAlertContent.includes("全国一盘棋")
|
|
}
|
|
title="很抱歉,你选错了!"
|
|
content={successAlertContent}
|
|
onContinue={onErrorAlertContinue}
|
|
/> */}
|
|
|
|
{/* 米棉之战 - 旁白2（图4） */}
|
|
<Narration
|
|
text={`根据“全国一盘棋”的指示，中央政府通过全国范围内的物资调配体系，从多个区域调运米、棉、煤等关键物资支援上海。可是地方在落实推进过程中碰到了现实问题，作为陈云同志的特派员，你应该如何与地方沟通。`}
|
|
visible={showNarration2}
|
|
onClose={onNarration2Close}
|
|
enableAnimation={false}
|
|
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_33.mp3')}
|
|
/>
|
|
|
|
{/* 米棉之战 - 单选题3（图5） */}
|
|
<SingleChoiceQuizPanel
|
|
visible={showQuiz3}
|
|
title="【单选】某地方粮站反馈“本地冬储粮不足，不愿外运”。"
|
|
options={[
|
|
{ value: 'A', label: 'A. 强制调运，否则追责' },
|
|
{
|
|
value: 'B',
|
|
label: 'B. 中央已协调东北补充常州冬储粮，先保障全国物价稳定',
|
|
},
|
|
]}
|
|
correctAnswer="B"
|
|
errorMessage="地方抵触，调运延误多天。请你再思考一下吧!"
|
|
onSubmit={onQuiz3Submit}
|
|
/>
|
|
|
|
{/* 米棉之战 - 单选题3成功/错误提示 */}
|
|
<SuccessAlert
|
|
visible={
|
|
showSuccessAlert &&
|
|
(successAlertContent.includes('地方配合') || successAlertContent.includes('地方抵触'))
|
|
}
|
|
title={'恭喜你,选择正确!'}
|
|
content={successAlertContent}
|
|
onContinue={() => {
|
|
const isCorrect = successAlertContent.includes('地方配合')
|
|
onQuiz3AlertContinue(isCorrect)
|
|
}}
|
|
/>
|
|
|
|
{/* 米棉之战 - 单选题4（图6） */}
|
|
<SingleChoiceQuizPanel
|
|
visible={showQuiz4}
|
|
title="【单选】某地方棉农担心外运后本地纱厂缺原料。"
|
|
options={[
|
|
{ value: 'A', label: 'A. 全国优先上海，本地暂时忍耐' },
|
|
{
|
|
value: 'B',
|
|
label: 'B. 上海纱厂稳定后，会优先供应本地布匹，实现全国共赢',
|
|
},
|
|
]}
|
|
correctAnswer="B"
|
|
errorMessage="棉农抵触，调运量减少。请你再思考一下吧!"
|
|
onSubmit={onQuiz4Submit}
|
|
/>
|
|
|
|
{/* 米棉之战 - 单选题4成功/错误提示 */}
|
|
<SuccessAlert
|
|
visible={
|
|
showSuccessAlert &&
|
|
(successAlertContent.includes('棉农支持') || successAlertContent.includes('棉农抵触'))
|
|
}
|
|
title={'恭喜你，选择正确！'}
|
|
content={successAlertContent}
|
|
onContinue={() => {
|
|
const isCorrect = successAlertContent.includes('棉农支持')
|
|
onQuiz4AlertContinue(isCorrect)
|
|
}}
|
|
/>
|
|
|
|
{/* 米棉之战 - 旁白3（图7） */}
|
|
<Narration
|
|
text="在以陈云为首的中财委的统一部署下，人民政府在全国范围内调配粮食、棉布和煤炭等商品，在准备充分后，政府开始行动。11月25日，市场物价处在高峰，进入总攻阶段。"
|
|
visible={showNarration3}
|
|
onClose={onNarration3Close}
|
|
enableAnimation={false}
|
|
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_34.mp3')}
|
|
/>
|
|
|
|
{/* 米棉之战 - 单选题5（图8） */}
|
|
<SingleChoiceQuizPanel
|
|
visible={showQuiz5}
|
|
title="【单选】此时，以下哪种举措能够一举获得胜利?"
|
|
options={[
|
|
{
|
|
value: 'A',
|
|
label:
|
|
'A.突然性、连续性大量抛售，在全国各地同时行动，上海、武汉、西安等地国营公司连续降价抛售粮棉，不给投机资本喘息之机',
|
|
},
|
|
{
|
|
value: 'B',
|
|
label: `B.逐步降价，配合舆论引导，每日小幅降价，并通过报纸宣传政府物资充足，试图"劝退"投机商`,
|
|
},
|
|
]}
|
|
correctAnswer="A"
|
|
errorMessage="很抱歉，你选错了！投机商此前曾吃下政府平价抛售物资获利。逐步降价加舆论引导难让其信服，他们会持续囤货，政府储备会被消耗，反而让投机商掌控节奏，无法遏制物价上涨。请你再思考一下吧!"
|
|
onSubmit={onQuiz5Submit}
|
|
/>
|
|
|
|
{/* 米棉之战 - 单选题5成功/错误提示 */}
|
|
<SuccessAlert
|
|
visible={
|
|
showSuccessAlert &&
|
|
(successAlertContent.includes('这契合米棉之战史实') ||
|
|
successAlertContent.includes('投机商此前曾吃下'))
|
|
}
|
|
title={'恭喜你,选择正确!'}
|
|
content={successAlertContent}
|
|
onContinue={() => {
|
|
const isEndSuccess = successAlertContent.includes('这契合米棉之战史实')
|
|
onQuiz5AlertContinue(isEndSuccess)
|
|
}}
|
|
/>
|
|
|
|
{/* 米棉之战 - 旁白5（结束语）使用统一结语覆盖层组件 */}
|
|
<EndingOverlay
|
|
visible={showNarration5}
|
|
onContinue={onNarration5Continue}
|
|
text={
|
|
'从“银元之战”查封投机枢纽、稳固人民币根基，到“米棉之战”全国统筹调运、集中抛售击溃投机势力，这场经济战线的“淮海战役”，不仅平定了物价、安定了民心，更印证了“全国一盘棋” strategic智慧与制度优势。当市场秩序重归稳定，新生政权在经济领域站稳脚跟，这份由陈云同志等老一辈革命家铸就的治理经验，也为新时代经济建设埋下了思想伏笔，等待我们在传承中探索新的实践路径。'
|
|
}
|
|
animationSpeed={200}
|
|
audioSrc={getPublicPath('audio/chenyun/mp3_chenyun_35.mp3')}
|
|
/>
|
|
</>
|
|
)
|
|
}
|