feat:黄炎培对话对接中
This commit is contained in:
zhongyidian committed
1 parent
3611a0857a
commit
6ab184b328
125 files changed
+6617
-2391
No files matched your search
@@ -0,0 +1,281 @@
|
||||
/**
|
||||
* 米棉之战主组件
|
||||
* 整合米棉之战的所有子组件：文件、线索、题目
|
||||
*/
|
||||
import { useEffect } from "react";
|
||||
import { MimianFile } from "./MimianFile";
|
||||
import { MimianClues } from "./MimianClues";
|
||||
import { MimianQuizzes } from "./MimianQuizzes";
|
||||
import { useMimianState } from "./useMimianState";
|
||||
import type { FileType } from "../shared/types";
|
||||
import type { ClueData } from "@/components/layout";
|
||||
|
||||
export interface MimianBattleProps {
|
||||
/** 当前展开的文件 */
|
||||
expandedFile: FileType | null;
|
||||
/** 线索状态 */
|
||||
clueStates: Record<string, boolean>;
|
||||
/** 文件点击回调 */
|
||||
onFileClick: () => void;
|
||||
/** 线索点击回调 */
|
||||
onClueClick: (clue: ClueData, clueKey: string) => void;
|
||||
/** 是否所有线索都已查看 */
|
||||
isAllViewed: boolean;
|
||||
/** 收起文件回调 */
|
||||
onCollapseFile: () => void;
|
||||
/** 结束回调（返回首页） */
|
||||
onEnd: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 米棉之战主组件
|
||||
* 管理米棉之战的所有状态和逻辑
|
||||
*/
|
||||
export const MimianBattle = ({
|
||||
expandedFile,
|
||||
clueStates,
|
||||
onFileClick,
|
||||
onClueClick,
|
||||
isAllViewed,
|
||||
onCollapseFile,
|
||||
onEnd,
|
||||
}: MimianBattleProps) => {
|
||||
const state = useMimianState();
|
||||
|
||||
// 如果所有米棉之战线索都已查看，自动显示单选题1
|
||||
useEffect(() => {
|
||||
if (isAllViewed && !state.showMimianQuiz1) {
|
||||
state.setShowMimianQuiz1(true);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isAllViewed]);
|
||||
|
||||
// 处理单选题1提交
|
||||
const handleQuiz1Submit = (value: string, isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
state.setShowMimianQuiz1(false);
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent("恭喜你,选择正确!");
|
||||
}
|
||||
};
|
||||
|
||||
// 处理成功提示框1继续
|
||||
const handleSuccessAlert1Continue = () => {
|
||||
state.setShowMimianSuccessAlert(false);
|
||||
state.setMimianSuccessAlertContent("");
|
||||
// 显示旁白1（图2）
|
||||
state.setShowMimianNarration1(true);
|
||||
};
|
||||
|
||||
// 处理旁白1关闭
|
||||
const handleNarration1Close = () => {
|
||||
state.setShowMimianNarration1(false);
|
||||
// 显示单选题2
|
||||
state.setShowMimianQuiz2(true);
|
||||
};
|
||||
|
||||
// 处理单选题2提交
|
||||
const handleQuiz2Submit = (value: string, isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
state.setShowMimianQuiz2(false);
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent(
|
||||
`恭喜你,选择正确!结合当时市场情况,陈云同志在会上做出了"全国一盘棋"的指示。全国统筹调运粮食、棉花、煤炭填补缺口,筑牢物资基础。关键节点集中抛售,让跟风囤货的投机商无力承接,因亏本和高利贷纷纷破产,快速平抑物价、稳固人民币地位。`
|
||||
);
|
||||
} else {
|
||||
// 根据选项显示不同的错误信息
|
||||
if (value === "A") {
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent(
|
||||
"很抱歉,你选错了!当时物价上涨已波及多地区,局部限购无法阻止投机商转移物资炒作。上海米、棉依赖外部供应,本地物资匮乏,限购既不解决缺口,还会加剧民众恐慌,扰乱市场秩序。请你再思考一下吧!"
|
||||
);
|
||||
} else if (value === "B") {
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent(
|
||||
"很抱歉,你选错了!当时国民党滥发货币导致的贬值阴影未消,民众对新货币缺乏信任。此时增发人民币,会使货币供应量远超物资总量,重蹈贬值覆辙,削弱人民币信用,让投机气焰更盛。请你再思考一下吧!"
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 处理成功提示框2继续
|
||||
const handleSuccessAlert2Continue = () => {
|
||||
state.setShowMimianSuccessAlert(false);
|
||||
state.setMimianSuccessAlertContent("");
|
||||
// 显示旁白2（图4）
|
||||
state.setShowMimianNarration2(true);
|
||||
};
|
||||
|
||||
// 处理错误提示框继续
|
||||
const handleErrorAlertContinue = () => {
|
||||
state.setShowMimianSuccessAlert(false);
|
||||
state.setMimianSuccessAlertContent("");
|
||||
// 重新显示单选题2
|
||||
state.setShowMimianQuiz2(true);
|
||||
};
|
||||
|
||||
// 处理旁白2关闭
|
||||
const handleNarration2Close = () => {
|
||||
state.setShowMimianNarration2(false);
|
||||
// 显示单选题3
|
||||
state.setShowMimianQuiz3(true);
|
||||
};
|
||||
|
||||
// 处理单选题3提交
|
||||
const handleQuiz3Submit = (value: string, isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
state.setShowMimianQuiz3(false);
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent(
|
||||
"恭喜你,选择正确!地方配合,调运按时推进。"
|
||||
);
|
||||
} else {
|
||||
state.setShowMimianQuiz3(false);
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent(
|
||||
"很抱歉,你选错了!地方抵触,调运延误多天。请你再思考一下吧!"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理单选题3成功/错误提示继续
|
||||
const handleQuiz3AlertContinue = (isCorrect: boolean) => {
|
||||
state.setShowMimianSuccessAlert(false);
|
||||
state.setMimianSuccessAlertContent("");
|
||||
if (isCorrect) {
|
||||
// 答对后显示单选题4
|
||||
state.setShowMimianQuiz4(true);
|
||||
} else {
|
||||
// 答错后重新显示单选题3
|
||||
state.setShowMimianQuiz3(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理单选题4提交
|
||||
const handleQuiz4Submit = (value: string, isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
state.setShowMimianQuiz4(false);
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent(
|
||||
"恭喜你,选择正确!棉农支持,调运量足额完成。"
|
||||
);
|
||||
} else {
|
||||
state.setShowMimianQuiz4(false);
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent(
|
||||
"很抱歉,你选错了!棉农抵触,调运量减少。请你再思考一下吧!"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理单选题4成功/错误提示继续
|
||||
const handleQuiz4AlertContinue = (isCorrect: boolean) => {
|
||||
state.setShowMimianSuccessAlert(false);
|
||||
state.setMimianSuccessAlertContent("");
|
||||
if (isCorrect) {
|
||||
// 答对后显示旁白3
|
||||
state.setShowMimianNarration3(true);
|
||||
} else {
|
||||
// 答错后重新显示单选题4
|
||||
state.setShowMimianQuiz4(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理旁白3关闭
|
||||
const handleNarration3Close = () => {
|
||||
state.setShowMimianNarration3(false);
|
||||
// 显示单选题5
|
||||
state.setShowMimianQuiz5(true);
|
||||
};
|
||||
|
||||
// 处理单选题5提交
|
||||
const handleQuiz5Submit = (value: string, isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
// 标记米棉之战为已解决，并收起文件
|
||||
state.setIsMimianSolved(true);
|
||||
onCollapseFile();
|
||||
|
||||
state.setShowMimianQuiz5(false);
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent(
|
||||
"恭喜你,选择正确!这契合米棉之战史实,多地同步大量抛售,让借高利贷囤货的投机商措手不及。连续抛售使其无力承接,只得亏本抛售,最终纷纷破产,快速稳住物价。"
|
||||
);
|
||||
} else {
|
||||
state.setShowMimianQuiz5(false);
|
||||
state.setShowMimianSuccessAlert(true);
|
||||
state.setMimianSuccessAlertContent(
|
||||
"很抱歉,你选错了!投机商此前曾吃下政府平价抛售物资获利。逐步降价加舆论引导难让其信服,他们会持续囤货,政府储备会被消耗,反而让投机商掌控节奏,无法遏制物价上涨。请你再思考一下吧!"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理单选题5成功/错误提示继续
|
||||
const handleQuiz5AlertContinue = (isEndSuccess: boolean) => {
|
||||
state.setShowMimianSuccessAlert(false);
|
||||
state.setMimianSuccessAlertContent("");
|
||||
|
||||
if (isEndSuccess) {
|
||||
// 成功结束：保持 expandedFile 为 null，1 秒后弹出结束语 StudyGuideModal
|
||||
setTimeout(() => {
|
||||
state.setShowMimianNarration5(true);
|
||||
}, 1000);
|
||||
} else {
|
||||
// 答错后重新显示单选题5
|
||||
state.setShowMimianQuiz5(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理结束语继续
|
||||
const handleNarration5Continue = () => {
|
||||
state.setShowMimianNarration5(false);
|
||||
onEnd();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 文件组件 */}
|
||||
<MimianFile
|
||||
expandedFile={expandedFile}
|
||||
isSolved={state.isMimianSolved}
|
||||
onFileClick={onFileClick}
|
||||
/>
|
||||
|
||||
{/* 线索组件 */}
|
||||
<MimianClues
|
||||
expandedFile={expandedFile}
|
||||
clueStates={clueStates}
|
||||
onClueClick={onClueClick}
|
||||
/>
|
||||
|
||||
{/* 题目组件 */}
|
||||
<MimianQuizzes
|
||||
showQuiz1={state.showMimianQuiz1}
|
||||
showNarration1={state.showMimianNarration1}
|
||||
showQuiz2={state.showMimianQuiz2}
|
||||
showNarration2={state.showMimianNarration2}
|
||||
showQuiz3={state.showMimianQuiz3}
|
||||
showQuiz4={state.showMimianQuiz4}
|
||||
showNarration3={state.showMimianNarration3}
|
||||
showQuiz5={state.showMimianQuiz5}
|
||||
showNarration5={state.showMimianNarration5}
|
||||
showSuccessAlert={state.showMimianSuccessAlert}
|
||||
successAlertContent={state.mimianSuccessAlertContent}
|
||||
onQuiz1Submit={handleQuiz1Submit}
|
||||
onSuccessAlert1Continue={handleSuccessAlert1Continue}
|
||||
onNarration1Close={handleNarration1Close}
|
||||
onQuiz2Submit={handleQuiz2Submit}
|
||||
onSuccessAlert2Continue={handleSuccessAlert2Continue}
|
||||
onErrorAlertContinue={handleErrorAlertContinue}
|
||||
onNarration2Close={handleNarration2Close}
|
||||
onQuiz3Submit={handleQuiz3Submit}
|
||||
onQuiz3AlertContinue={handleQuiz3AlertContinue}
|
||||
onQuiz4Submit={handleQuiz4Submit}
|
||||
onQuiz4AlertContinue={handleQuiz4AlertContinue}
|
||||
onNarration3Close={handleNarration3Close}
|
||||
onQuiz5Submit={handleQuiz5Submit}
|
||||
onQuiz5AlertContinue={handleQuiz5AlertContinue}
|
||||
onNarration5Continue={handleNarration5Continue}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,130 @@
|
||||
/**
|
||||
* 米棉之战线索区域组件
|
||||
* 包含投机商情报、全国物资分布、对话的展示
|
||||
*/
|
||||
import { Image } from "@/components";
|
||||
import { cn, getStaticImage } from "@/lib/utils";
|
||||
import { ClueItem } from "../shared/ClueItem";
|
||||
import type { FileType } from "../shared/types";
|
||||
import type { ClueData } from "@/components/layout";
|
||||
import { MIMIAN_CLUE_DATA } from "../constants/mimian";
|
||||
|
||||
export interface MimianCluesProps {
|
||||
/** 当前展开的文件 */
|
||||
expandedFile: FileType | null;
|
||||
/** 线索状态 */
|
||||
clueStates: Record<string, boolean>;
|
||||
/** 线索点击回调 */
|
||||
onClueClick: (clue: ClueData, clueKey: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 米棉之战线索区域组件
|
||||
* 显示投机商情报、全国物资分布、对话
|
||||
*/
|
||||
export const MimianClues = ({
|
||||
expandedFile,
|
||||
clueStates,
|
||||
onClueClick,
|
||||
}: MimianCluesProps) => {
|
||||
const isExpanded = expandedFile === "mimian";
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 米棉之战：线索-投机商情报 */}
|
||||
<div
|
||||
className={cn([
|
||||
"absolute left-70 bottom-8 transition-all duration-300 delay-100",
|
||||
"hover:scale-105 hover:brightness-115",
|
||||
isExpanded
|
||||
? "opacity-100 translate-y-0"
|
||||
: "opacity-0 translate-y-10 pointer-events-none",
|
||||
])}
|
||||
>
|
||||
<ClueItem
|
||||
clueKey="mimian-intelligence"
|
||||
imageSrc="chenyun/reflection/投机商情报桌上"
|
||||
isViewed={clueStates["mimian-intelligence"] || false}
|
||||
onClick={() => {
|
||||
const clue = MIMIAN_CLUE_DATA["mimian-intelligence"];
|
||||
if (clue) {
|
||||
onClueClick(clue, "mimian-intelligence");
|
||||
}
|
||||
}}
|
||||
viewedMarkOffset={{ left: "4px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 米棉之战：线索-全国物资分布 */}
|
||||
<div
|
||||
className={cn([
|
||||
"absolute left-135 bottom-8 transition-all duration-300 delay-150",
|
||||
"hover:scale-105 hover:brightness-115",
|
||||
isExpanded
|
||||
? "opacity-100 translate-y-0"
|
||||
: "opacity-0 translate-y-10 pointer-events-none",
|
||||
])}
|
||||
>
|
||||
<ClueItem
|
||||
clueKey="mimian-distribution"
|
||||
imageSrc="chenyun/reflection/全国物资分布桌上"
|
||||
isViewed={clueStates["mimian-distribution"] || false}
|
||||
onClick={() => {
|
||||
const clue = MIMIAN_CLUE_DATA["mimian-distribution"];
|
||||
if (clue) {
|
||||
onClueClick(clue, "mimian-distribution");
|
||||
}
|
||||
}}
|
||||
viewedMarkOffset={{ left: "12px" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 米棉之战：消息（对话线索） */}
|
||||
<div
|
||||
className={cn([
|
||||
"absolute left-155 -top-118 transition-all duration-300 delay-200",
|
||||
"hover:scale-105 hover:brightness-115",
|
||||
isExpanded
|
||||
? "opacity-100 translate-y-0"
|
||||
: "opacity-0 -translate-y-10 pointer-events-none",
|
||||
])}
|
||||
>
|
||||
<div
|
||||
className="cursor-pointer"
|
||||
onClick={() => {
|
||||
const clue = MIMIAN_CLUE_DATA["mimian-dialogue"];
|
||||
if (clue) {
|
||||
onClueClick(clue, "mimian-dialogue");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Image src={getStaticImage("chenyun/reflection/对话气泡")} button />
|
||||
{/* 未倾听时显示三个点动画 */}
|
||||
{!clueStates["mimian-dialogue"] && (
|
||||
<div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 flex items-center justify-center">
|
||||
<div className="animate-dots flex gap-2">
|
||||
<span className="w-3 h-3 bg-gray-500 rounded-full inline-block" />
|
||||
<span className="w-3 h-3 bg-gray-500 rounded-full inline-block" />
|
||||
<span className="w-3 h-3 bg-gray-500 rounded-full inline-block" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* 已倾听标记 */}
|
||||
{clueStates["mimian-dialogue"] && (
|
||||
<div className="absolute left-1/2 -translate-x-1/2 bottom-16">
|
||||
<span
|
||||
className={cn([
|
||||
"text-[#ae6400] text-3xl font-bold whitespace-nowrap",
|
||||
"[text-shadow:_-4px_-4px_0_#ffffff,_4px_-4px_0_#ffffff,_-4px_4px_0_#ffffff,_4px_4px_0_#ffffff,_-5px_0_0_#ffffff,_5px_0_0_#ffffff,_0_-5px_0_#ffffff,_0_5px_0_#ffffff]",
|
||||
])}
|
||||
>
|
||||
已倾听
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
/**
|
||||
* 米棉之战文件组件
|
||||
* 包含文件展示
|
||||
*/
|
||||
import { Image } from "@/components";
|
||||
import { cn, getStaticImage } from "@/lib/utils";
|
||||
import type { FileType } from "../shared/types";
|
||||
|
||||
export interface MimianFileProps {
|
||||
/** 当前展开的文件 */
|
||||
expandedFile: FileType | null;
|
||||
/** 是否已解决 */
|
||||
isSolved: boolean;
|
||||
/** 文件点击回调 */
|
||||
onFileClick: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 米棉之战文件组件
|
||||
* 显示文件2，包含解决状态
|
||||
*/
|
||||
export const MimianFile = ({
|
||||
expandedFile,
|
||||
isSolved,
|
||||
onFileClick,
|
||||
}: MimianFileProps) => {
|
||||
return (
|
||||
<div
|
||||
className={cn([
|
||||
"relative left-90 cursor-pointer transition-all duration-500",
|
||||
expandedFile === null || expandedFile === "mimian"
|
||||
? "opacity-100 scale-100"
|
||||
: "opacity-0 scale-75 pointer-events-none",
|
||||
expandedFile !== "mimian" && "hover:scale-105 hover:brightness-115",
|
||||
])}
|
||||
onClick={onFileClick}
|
||||
>
|
||||
<Image src={getStaticImage("chenyun/reflection/文件2")} />
|
||||
<span
|
||||
className={cn([
|
||||
"absolute left-0 bottom-1/2",
|
||||
"w-full bg-black/60 px-4 py-2 rounded-2xl text-center",
|
||||
"text-white text-3xl font-bold tracking-widest",
|
||||
])}
|
||||
>
|
||||
{isSolved ? "02米棉之战(已解决)" : "02米棉之战(未解决)"}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,299 @@
|
||||
/**
|
||||
* 米棉之战题目组件
|
||||
* 包含单选题1-5、旁白1-3、成功提示框、结束语
|
||||
*/
|
||||
import { Narration, SingleChoiceQuizPanel, StudyGuideModal } from "@/components";
|
||||
import SuccessAlert from "@/components/layout/alert/success-alert";
|
||||
|
||||
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}
|
||||
/>
|
||||
|
||||
{/* 米棉之战 - 单选题2（图3） */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz2}
|
||||
title="（单选题）你觉得此时解决上海和全国面临的严峻经济形势问题的对策应该是( )。"
|
||||
options={[
|
||||
{ value: "A", label: "A. 局部限购" },
|
||||
{ value: "B", label: "B. 增发货币" },
|
||||
{ value: "C", label: "C. 全国调运+集中抛售" },
|
||||
]}
|
||||
correctAnswer="C"
|
||||
errorMessage="很抱歉,你选错了!请你再思考一下吧!"
|
||||
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}
|
||||
/>
|
||||
|
||||
{/* 米棉之战 - 单选题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={
|
||||
successAlertContent.includes("恭喜")
|
||||
? "恭喜你,选择正确!"
|
||||
: "很抱歉,你选错了!"
|
||||
}
|
||||
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={
|
||||
successAlertContent.includes("恭喜")
|
||||
? "恭喜你,选择正确!"
|
||||
: "很抱歉,你选错了!"
|
||||
}
|
||||
content={successAlertContent}
|
||||
onContinue={() => {
|
||||
const isCorrect = successAlertContent.includes("棉农支持");
|
||||
onQuiz4AlertContinue(isCorrect);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 米棉之战 - 旁白3（图7） */}
|
||||
<Narration
|
||||
text="在以陈云为首的中财委的统一部署下,人民政府在全国范围内调配粮食、棉布和煤炭等商品,在准备充分后,政府开始行动。11月25日,市场物价处在高峰,进入总攻阶段。"
|
||||
visible={showNarration3}
|
||||
onClose={onNarration3Close}
|
||||
enableAnimation={false}
|
||||
/>
|
||||
|
||||
{/* 米棉之战 - 单选题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={
|
||||
successAlertContent.includes("恭喜")
|
||||
? "恭喜你,选择正确!"
|
||||
: "很抱歉,你选错了!"
|
||||
}
|
||||
content={successAlertContent}
|
||||
onContinue={() => {
|
||||
const isEndSuccess =
|
||||
successAlertContent.includes("这契合米棉之战史实");
|
||||
onQuiz5AlertContinue(isEndSuccess);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 米棉之战 - 旁白5（结束语）改用 StudyGuideModal 展示 */}
|
||||
<StudyGuideModal
|
||||
visible={showNarration5}
|
||||
onContinue={onNarration5Continue}
|
||||
>
|
||||
从"银元之战"查封投机枢纽、稳固人民币根基,到"米棉之战"全国统筹调运、集中抛售击溃投机势力,这场经济战线的"淮海战役",不仅平定了物价、安定了民心,更印证了"全国一盘棋"的战略智慧与制度优势。当市场秩序重归稳定,新生政权在经济领域站稳脚跟,这份由陈云同志等老一辈革命家铸就的治理经验,也为新时代经济建设埋下了思想伏笔,等待我们在传承中探索新的实践路径。
|
||||
</StudyGuideModal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* 米棉之战状态管理 Hook
|
||||
* 管理米棉之战相关的所有状态
|
||||
*/
|
||||
import { useState } from "react";
|
||||
|
||||
/**
|
||||
* 米棉之战状态管理 Hook
|
||||
* @returns 米棉之战的所有状态和更新函数
|
||||
*/
|
||||
export const useMimianState = () => {
|
||||
// 单选题1相关状态
|
||||
const [showMimianQuiz1, setShowMimianQuiz1] = useState(false);
|
||||
|
||||
// 旁白1相关状态
|
||||
const [showMimianNarration1, setShowMimianNarration1] = useState(false);
|
||||
|
||||
// 单选题2相关状态
|
||||
const [showMimianQuiz2, setShowMimianQuiz2] = useState(false);
|
||||
|
||||
// 旁白2相关状态
|
||||
const [showMimianNarration2, setShowMimianNarration2] = useState(false);
|
||||
|
||||
// 单选题3相关状态
|
||||
const [showMimianQuiz3, setShowMimianQuiz3] = useState(false);
|
||||
|
||||
// 单选题4相关状态
|
||||
const [showMimianQuiz4, setShowMimianQuiz4] = useState(false);
|
||||
|
||||
// 旁白3相关状态
|
||||
const [showMimianNarration3, setShowMimianNarration3] = useState(false);
|
||||
|
||||
// 单选题5相关状态
|
||||
const [showMimianQuiz5, setShowMimianQuiz5] = useState(false);
|
||||
|
||||
// 旁白5相关状态（结束语）
|
||||
const [showMimianNarration5, setShowMimianNarration5] = useState(false);
|
||||
|
||||
// 米棉之战解决状态
|
||||
const [isMimianSolved, setIsMimianSolved] = useState(false);
|
||||
|
||||
// 米棉之战成功提示框状态
|
||||
const [showMimianSuccessAlert, setShowMimianSuccessAlert] = useState(false);
|
||||
const [mimianSuccessAlertContent, setMimianSuccessAlertContent] =
|
||||
useState("");
|
||||
|
||||
return {
|
||||
// 题目相关状态
|
||||
showMimianQuiz1,
|
||||
setShowMimianQuiz1,
|
||||
showMimianQuiz2,
|
||||
setShowMimianQuiz2,
|
||||
showMimianQuiz3,
|
||||
setShowMimianQuiz3,
|
||||
showMimianQuiz4,
|
||||
setShowMimianQuiz4,
|
||||
showMimianQuiz5,
|
||||
setShowMimianQuiz5,
|
||||
|
||||
// 旁白相关状态
|
||||
showMimianNarration1,
|
||||
setShowMimianNarration1,
|
||||
showMimianNarration2,
|
||||
setShowMimianNarration2,
|
||||
showMimianNarration3,
|
||||
setShowMimianNarration3,
|
||||
showMimianNarration5,
|
||||
setShowMimianNarration5,
|
||||
|
||||
// 成功提示框状态
|
||||
showMimianSuccessAlert,
|
||||
setShowMimianSuccessAlert,
|
||||
mimianSuccessAlertContent,
|
||||
setMimianSuccessAlertContent,
|
||||
|
||||
// 解决状态
|
||||
isMimianSolved,
|
||||
setIsMimianSolved,
|
||||
};
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user