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,238 @@
|
||||
/**
|
||||
* 银元之战主组件
|
||||
* 整合银元之战的所有子组件：文件、线索、题目、引导提示
|
||||
*/
|
||||
import { useEffect } from "react";
|
||||
import { YinyuanFile } from "./YinyuanFile";
|
||||
import { YinyuanClues } from "./YinyuanClues";
|
||||
import { YinyuanQuizzes } from "./YinyuanQuizzes";
|
||||
import { YinyuanGuides } from "./YinyuanGuides";
|
||||
import { useYinyuanState } from "./useYinyuanState";
|
||||
import type { FileType } from "../shared/types";
|
||||
import type { ClueData } from "@/components/layout";
|
||||
|
||||
export interface YinyuanBattleProps {
|
||||
/** 当前展开的文件 */
|
||||
expandedFile: FileType | null;
|
||||
/** 是否所有线索都已查看 */
|
||||
isAllViewed: boolean;
|
||||
/** 线索状态 */
|
||||
clueStates: Record<string, boolean>;
|
||||
/** 文件点击回调 */
|
||||
onFileClick: () => void;
|
||||
/** 线索点击回调 */
|
||||
onClueClick: (clue: ClueData, clueKey: string) => void;
|
||||
/** 播放视频回调 */
|
||||
onPlayVideo: (fileType: FileType) => void;
|
||||
/** 银元之战解决状态变化回调 */
|
||||
onSolvedChange?: (solved: boolean) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 银元之战主组件
|
||||
* 管理银元之战的所有状态和逻辑
|
||||
*/
|
||||
export const YinyuanBattle = ({
|
||||
expandedFile,
|
||||
isAllViewed,
|
||||
clueStates,
|
||||
onFileClick,
|
||||
onClueClick,
|
||||
onPlayVideo,
|
||||
onSolvedChange,
|
||||
}: YinyuanBattleProps) => {
|
||||
const state = useYinyuanState();
|
||||
|
||||
// 当银元之战解决状态变化时，通知父组件
|
||||
useEffect(() => {
|
||||
if (onSolvedChange) {
|
||||
onSolvedChange(state.isYinyuanSolved);
|
||||
}
|
||||
}, [state.isYinyuanSolved, onSolvedChange]);
|
||||
|
||||
// 监听"前往解决"按钮出现的条件，显示第一个提示
|
||||
useEffect(() => {
|
||||
const shouldShowGuide1 =
|
||||
isAllViewed &&
|
||||
!state.isYinyuanSolved &&
|
||||
!state.showQuiz1 &&
|
||||
!state.showNarration2 &&
|
||||
!state.showQuiz2 &&
|
||||
!state.showSuccessAlert &&
|
||||
!state.hasShownGuide1;
|
||||
|
||||
if (shouldShowGuide1) {
|
||||
// 延迟一下，确保按钮已经渲染
|
||||
const timer = setTimeout(() => {
|
||||
state.setShowGuide1(true);
|
||||
state.setHasShownGuide1(true);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [
|
||||
isAllViewed,
|
||||
state.isYinyuanSolved,
|
||||
state.showQuiz1,
|
||||
state.showNarration2,
|
||||
state.showQuiz2,
|
||||
state.showSuccessAlert,
|
||||
state.hasShownGuide1,
|
||||
state.setShowGuide1,
|
||||
state.setHasShownGuide1,
|
||||
]);
|
||||
|
||||
// 监听走势图图标出现的条件，显示第二个提示
|
||||
useEffect(() => {
|
||||
const shouldShowGuide2 =
|
||||
state.isYinyuanSolved &&
|
||||
state.showTrendChartIcon &&
|
||||
!state.hasShownGuide2;
|
||||
|
||||
if (shouldShowGuide2) {
|
||||
// 延迟一下，确保走势图已经渲染
|
||||
const timer = setTimeout(() => {
|
||||
state.setShowGuide2(true);
|
||||
state.setHasShownGuide2(true);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [
|
||||
state.isYinyuanSolved,
|
||||
state.showTrendChartIcon,
|
||||
state.hasShownGuide2,
|
||||
state.setShowGuide2,
|
||||
state.setHasShownGuide2,
|
||||
]);
|
||||
|
||||
// 监听走势图大图打开的条件，显示第三个提示
|
||||
useEffect(() => {
|
||||
const shouldShowGuide3 =
|
||||
state.showTrendChartDetail && !state.hasShownGuide3;
|
||||
|
||||
if (shouldShowGuide3) {
|
||||
// 延迟一下，确保大图已经打开
|
||||
const timer = setTimeout(() => {
|
||||
state.setShowGuide3(true);
|
||||
state.setHasShownGuide3(true);
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [
|
||||
state.showTrendChartDetail,
|
||||
state.hasShownGuide3,
|
||||
state.setShowGuide3,
|
||||
state.setHasShownGuide3,
|
||||
]);
|
||||
|
||||
// 处理多选题1提交
|
||||
const handleQuiz1Submit = (values: string[], isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
// 关闭多选题1，显示旁白文字（图2）
|
||||
state.setShowQuiz1(false);
|
||||
state.setNarration2Text(
|
||||
`六月五日,上海政府抛出十万银元,力图以银元制服银元,使价格回跌。全市举行了"反对银元投机,保障人民生活"的游行和宣传。上海市军委会主任陈毅在全市集会上警告投机奸商"赶快洗手不干,否则勿谓言之不预"。但这两手收效仍微。十万银元被投机商人一吸而空,六月七日银元每元的价格涨到一千八百元人民币。陈云同志判断:'单纯的经济手段已不足以震慑敌人,必须辅以坚定的行政与法律手段。`
|
||||
);
|
||||
state.setShowNarration2(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理旁白2关闭
|
||||
const handleNarration2Close = () => {
|
||||
state.setShowNarration2(false);
|
||||
// 关闭旁白后显示多选题2
|
||||
state.setShowQuiz2(true);
|
||||
};
|
||||
|
||||
// 处理多选题2提交
|
||||
const handleQuiz2Submit = (values: string[], isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
// 关闭多选题2，显示成功提示框
|
||||
state.setShowQuiz2(false);
|
||||
state.setShowSuccessAlert(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理成功提示框继续
|
||||
const handleSuccessAlertContinue = () => {
|
||||
// 关闭聚光灯、标记银元之战为已解决、显示走势图
|
||||
state.setIsYinyuanSolved(true);
|
||||
state.setShowSuccessAlert(false);
|
||||
};
|
||||
|
||||
// 处理走势图点击
|
||||
const handleTrendChartClick = () => {
|
||||
// 关闭第三个提示框
|
||||
state.setShowGuide3(false);
|
||||
// 点击走势图：隐藏文件上的走势图图标，播放米棉之战视频
|
||||
state.setShowTrendChartIcon(false);
|
||||
state.setShowTrendChartDetail(false);
|
||||
// 播放米棉之战视频
|
||||
onPlayVideo("mimian");
|
||||
};
|
||||
|
||||
// 处理走势图大图关闭
|
||||
const handleTrendChartDetailClose = () => {
|
||||
// 关闭第三个提示框
|
||||
state.setShowGuide3(false);
|
||||
state.setShowTrendChartDetail(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 文件组件 */}
|
||||
<YinyuanFile
|
||||
expandedFile={expandedFile}
|
||||
isSolved={state.isYinyuanSolved}
|
||||
showTrendChartIcon={state.showTrendChartIcon}
|
||||
isAllViewed={isAllViewed}
|
||||
showQuiz1={state.showQuiz1}
|
||||
showNarration2={state.showNarration2}
|
||||
showQuiz2={state.showQuiz2}
|
||||
showSuccessAlert={state.showSuccessAlert}
|
||||
onFileClick={onFileClick}
|
||||
onTrendChartClick={() => {
|
||||
state.setShowGuide2(false);
|
||||
state.setShowTrendChartDetail(true);
|
||||
}}
|
||||
onSolveClick={() => {
|
||||
state.setShowGuide1(false);
|
||||
state.setShowQuiz1(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 线索组件 */}
|
||||
<YinyuanClues
|
||||
expandedFile={expandedFile}
|
||||
clueStates={clueStates}
|
||||
onClueClick={onClueClick}
|
||||
/>
|
||||
|
||||
{/* 题目组件 */}
|
||||
<YinyuanQuizzes
|
||||
showQuiz1={state.showQuiz1}
|
||||
showNarration2={state.showNarration2}
|
||||
narration2Text={state.narration2Text}
|
||||
showQuiz2={state.showQuiz2}
|
||||
showSuccessAlert={state.showSuccessAlert}
|
||||
onQuiz1Submit={handleQuiz1Submit}
|
||||
onNarration2Close={handleNarration2Close}
|
||||
onQuiz2Submit={handleQuiz2Submit}
|
||||
onSuccessAlertContinue={handleSuccessAlertContinue}
|
||||
/>
|
||||
|
||||
{/* 引导提示组件 */}
|
||||
<YinyuanGuides
|
||||
showGuide1={state.showGuide1}
|
||||
showGuide2={state.showGuide2}
|
||||
showGuide3={state.showGuide3}
|
||||
showTrendChartDetail={state.showTrendChartDetail}
|
||||
onGuide1Close={() => state.setShowGuide1(false)}
|
||||
onGuide2Close={() => state.setShowGuide2(false)}
|
||||
onGuide3Close={() => state.setShowGuide3(false)}
|
||||
onTrendChartDetailClose={handleTrendChartDetailClose}
|
||||
onTrendChartClick={handleTrendChartClick}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
/**
|
||||
* 银元之战线索区域组件
|
||||
* 包含线索1、线索2、电话的展示
|
||||
*/
|
||||
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 { YINYUAN_CLUE_DATA } from "../constants/yinyuan";
|
||||
|
||||
export interface YinyuanCluesProps {
|
||||
/** 当前展开的文件 */
|
||||
expandedFile: FileType | null;
|
||||
/** 线索状态 */
|
||||
clueStates: Record<string, boolean>;
|
||||
/** 线索点击回调 */
|
||||
onClueClick: (clue: ClueData, clueKey: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 银元之战线索区域组件
|
||||
* 显示线索1、线索2和电话
|
||||
*/
|
||||
export const YinyuanClues = ({
|
||||
expandedFile,
|
||||
clueStates,
|
||||
onClueClick,
|
||||
}: YinyuanCluesProps) => {
|
||||
const isExpanded = expandedFile === "yinyuan";
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* 银元之战：线索1 */}
|
||||
<div
|
||||
className={cn([
|
||||
"absolute left-190 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="yinyuan-clue1"
|
||||
imageSrc="chenyun/reflection/线索1"
|
||||
isViewed={clueStates["yinyuan-clue1"] || false}
|
||||
onClick={() => {
|
||||
const clue = YINYUAN_CLUE_DATA["yinyuan-clue1"];
|
||||
if (clue) {
|
||||
onClueClick(clue, "yinyuan-clue1");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 银元之战：线索2 */}
|
||||
<div
|
||||
className={cn([
|
||||
"absolute left-265 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="yinyuan-clue2"
|
||||
imageSrc="chenyun/reflection/线索2"
|
||||
isViewed={clueStates["yinyuan-clue2"] || false}
|
||||
onClick={() => {
|
||||
const clue = YINYUAN_CLUE_DATA["yinyuan-clue2"];
|
||||
if (clue) {
|
||||
onClueClick(clue, "yinyuan-clue2");
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 电话 - 只有银元之战有 */}
|
||||
<div className="absolute right-50.5 -top-41">
|
||||
<div className="relative">
|
||||
{/* 响铃图标 */}
|
||||
{!clueStates["yinyuan-phone"] && isExpanded && (
|
||||
<Image
|
||||
className="absolute left-[45%] -translate-x-1/2 -top-32 animate-bounce"
|
||||
src={getStaticImage("chenyun/reflection/电话响")}
|
||||
/>
|
||||
)}
|
||||
{/* 电话 */}
|
||||
<div
|
||||
className={cn([
|
||||
isExpanded ? "cursor-pointer" : "pointer-events-none",
|
||||
])}
|
||||
onClick={() => {
|
||||
if (!isExpanded) return;
|
||||
const clue = YINYUAN_CLUE_DATA["yinyuan-phone"];
|
||||
if (clue) {
|
||||
onClueClick(clue, "yinyuan-phone");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Image src={getStaticImage("chenyun/reflection/电话")} button />
|
||||
</div>
|
||||
{/* 已接听标记 */}
|
||||
{clueStates["yinyuan-phone"] && isExpanded && (
|
||||
<div className="absolute left-[40%] -translate-x-1/2 bottom-0">
|
||||
<span
|
||||
className={cn([
|
||||
"text-[#ae6400] text-3xl font-bold",
|
||||
"[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,111 @@
|
||||
/**
|
||||
* 银元之战文件组件
|
||||
* 包含文件展示、走势图、前往解决按钮
|
||||
*/
|
||||
import { Image } from "@/components";
|
||||
import { cn, getStaticImage } from "@/lib/utils";
|
||||
import type { FileType } from "../shared/types";
|
||||
|
||||
export interface YinyuanFileProps {
|
||||
/** 当前展开的文件 */
|
||||
expandedFile: FileType | null;
|
||||
/** 是否已解决 */
|
||||
isSolved: boolean;
|
||||
/** 是否显示走势图图标 */
|
||||
showTrendChartIcon: boolean;
|
||||
/** 是否所有线索都已查看 */
|
||||
isAllViewed: boolean;
|
||||
/** 是否显示题目1 */
|
||||
showQuiz1: boolean;
|
||||
/** 是否显示旁白2 */
|
||||
showNarration2: boolean;
|
||||
/** 是否显示题目2 */
|
||||
showQuiz2: boolean;
|
||||
/** 是否显示成功提示框 */
|
||||
showSuccessAlert: boolean;
|
||||
/** 文件点击回调 */
|
||||
onFileClick: () => void;
|
||||
/** 走势图点击回调 */
|
||||
onTrendChartClick: () => void;
|
||||
/** 前往解决按钮点击回调 */
|
||||
onSolveClick: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 银元之战文件组件
|
||||
* 显示文件1，包含解决状态、走势图、前往解决按钮
|
||||
*/
|
||||
export const YinyuanFile = ({
|
||||
expandedFile,
|
||||
isSolved,
|
||||
showTrendChartIcon,
|
||||
isAllViewed,
|
||||
showQuiz1,
|
||||
showNarration2,
|
||||
showQuiz2,
|
||||
showSuccessAlert,
|
||||
onFileClick,
|
||||
onTrendChartClick,
|
||||
onSolveClick,
|
||||
}: YinyuanFileProps) => {
|
||||
return (
|
||||
<div
|
||||
id="yinyuan-file"
|
||||
className={cn([
|
||||
"relative left-60 cursor-pointer transition-all duration-500",
|
||||
expandedFile === null || expandedFile === "yinyuan"
|
||||
? "opacity-100 scale-100"
|
||||
: "opacity-0 scale-75 pointer-events-none",
|
||||
expandedFile !== "yinyuan" && "hover:scale-105 hover:brightness-115",
|
||||
])}
|
||||
onClick={onFileClick}
|
||||
>
|
||||
<Image src={getStaticImage("chenyun/reflection/文件1")} />
|
||||
<span
|
||||
className={cn([
|
||||
"absolute left-0 bottom-1/2 z-10",
|
||||
"w-full bg-black/60 px-4 py-2 rounded-2xl text-center",
|
||||
"text-white text-3xl font-bold tracking-widest",
|
||||
])}
|
||||
>
|
||||
{isSolved ? "01银元之战(已解决)" : "01银元之战(未解决)"}
|
||||
</span>
|
||||
|
||||
{/* 走势图 - 银元之战解决后显示，点击后隐藏 */}
|
||||
{isSolved && showTrendChartIcon && (
|
||||
<div
|
||||
className="absolute -top-40 left-1/2 -translate-x-1/2 cursor-pointer transition-all duration-300 hover:scale-105 z-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onTrendChartClick();
|
||||
}}
|
||||
>
|
||||
<Image src={getStaticImage("chenyun/reflection/走势图")} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 引导标志 - 只在所有线索查看完后显示-前往解决按钮-去做题 */}
|
||||
{isAllViewed &&
|
||||
!isSolved &&
|
||||
!showQuiz1 &&
|
||||
!showNarration2 &&
|
||||
!showQuiz2 &&
|
||||
!showSuccessAlert && (
|
||||
<div
|
||||
className="absolute top-0 w-full h-full"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onSolveClick();
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
className="translate-x-26 -translate-y-2"
|
||||
src={getStaticImage("chenyun/reflection/点击前往解决")}
|
||||
button
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* 银元之战引导提示组件
|
||||
* 包含三个引导提示：前往解决按钮、走势图、走势图大图
|
||||
*/
|
||||
import { StudyGuideModal } from "@/components";
|
||||
import { ExhibitOverlay } from "@/components";
|
||||
|
||||
export interface YinyuanGuidesProps {
|
||||
/** 是否显示引导提示1（前往解决按钮） */
|
||||
showGuide1: boolean;
|
||||
/** 是否显示引导提示2（走势图） */
|
||||
showGuide2: boolean;
|
||||
/** 是否显示引导提示3（走势图大图） */
|
||||
showGuide3: boolean;
|
||||
/** 是否显示走势图大图 */
|
||||
showTrendChartDetail: boolean;
|
||||
/** 引导提示1关闭回调 */
|
||||
onGuide1Close: () => void;
|
||||
/** 引导提示2关闭回调 */
|
||||
onGuide2Close: () => void;
|
||||
/** 引导提示3关闭回调 */
|
||||
onGuide3Close: () => void;
|
||||
/** 走势图大图关闭回调 */
|
||||
onTrendChartDetailClose: () => void;
|
||||
/** 走势图点击回调 */
|
||||
onTrendChartClick: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 银元之战引导提示组件
|
||||
* 显示三个引导提示和走势图大图
|
||||
*/
|
||||
export const YinyuanGuides = ({
|
||||
showGuide1,
|
||||
showGuide2,
|
||||
showGuide3,
|
||||
showTrendChartDetail,
|
||||
onGuide1Close,
|
||||
onGuide2Close,
|
||||
onGuide3Close,
|
||||
onTrendChartDetailClose,
|
||||
onTrendChartClick,
|
||||
}: YinyuanGuidesProps) => {
|
||||
return (
|
||||
<>
|
||||
{/* 引导提示1：前往解决按钮出现后 */}
|
||||
<StudyGuideModal
|
||||
visible={showGuide1}
|
||||
onContinue={onGuide1Close}
|
||||
verticalAlign="center"
|
||||
zIndex={130}
|
||||
>
|
||||
请跟随指示点击前往解决按钮
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 引导提示2：走势图出现后 */}
|
||||
<StudyGuideModal
|
||||
visible={showGuide2}
|
||||
onContinue={onGuide2Close}
|
||||
verticalAlign="center"
|
||||
zIndex={130}
|
||||
>
|
||||
请点击走势图
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 引导提示3：走势图大图打开后 */}
|
||||
<StudyGuideModal
|
||||
visible={showGuide3}
|
||||
onContinue={onGuide3Close}
|
||||
verticalAlign="center"
|
||||
zIndex={10000}
|
||||
>
|
||||
请点击银元价格走势图
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 走势图大图展示 - 使用 ExhibitOverlay */}
|
||||
<ExhibitOverlay
|
||||
visible={showTrendChartDetail}
|
||||
src="chenyun/reflection/银元价格走势图"
|
||||
description={`以上海为中心，代表"人民币信用"的绿色区域迅速覆盖全市，并向外辐射。`}
|
||||
disableDrag={true}
|
||||
onClick={onTrendChartClick}
|
||||
onClose={onTrendChartDetailClose}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* 银元之战题目组件
|
||||
* 包含多选题1、多选题2、旁白2
|
||||
*/
|
||||
import { Narration, MultipleChoiceQuizPanel } from "@/components";
|
||||
import SuccessAlert from "@/components/layout/alert/success-alert";
|
||||
|
||||
export interface YinyuanQuizzesProps {
|
||||
/** 是否显示多选题1 */
|
||||
showQuiz1: boolean;
|
||||
/** 是否显示旁白2 */
|
||||
showNarration2: boolean;
|
||||
/** 旁白2文本 */
|
||||
narration2Text: string;
|
||||
/** 是否显示多选题2 */
|
||||
showQuiz2: boolean;
|
||||
/** 是否显示成功提示框 */
|
||||
showSuccessAlert: boolean;
|
||||
/** 多选题1提交回调 */
|
||||
onQuiz1Submit: (values: string[], isCorrect: boolean) => void;
|
||||
/** 旁白2关闭回调 */
|
||||
onNarration2Close: () => void;
|
||||
/** 多选题2提交回调 */
|
||||
onQuiz2Submit: (values: string[], isCorrect: boolean) => void;
|
||||
/** 成功提示框继续回调 */
|
||||
onSuccessAlertContinue: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 银元之战题目组件
|
||||
* 显示多选题1、多选题2、旁白2和成功提示框
|
||||
*/
|
||||
export const YinyuanQuizzes = ({
|
||||
showQuiz1,
|
||||
showNarration2,
|
||||
narration2Text,
|
||||
showQuiz2,
|
||||
showSuccessAlert,
|
||||
onQuiz1Submit,
|
||||
onNarration2Close,
|
||||
onQuiz2Submit,
|
||||
onSuccessAlertContinue,
|
||||
}: YinyuanQuizzesProps) => {
|
||||
return (
|
||||
<>
|
||||
{/* 多选题1 - 点击引导图标后显示 */}
|
||||
<MultipleChoiceQuizPanel
|
||||
visible={showQuiz1}
|
||||
title="（多选题）面对银元投机狂潮,你认为首要突破口是? ()"
|
||||
options={[
|
||||
{ value: "A", label: "A. 政治攻势（警告、约谈）" },
|
||||
{ value: "B", label: "B. 经济手段（抛售银元,以银元打银元）" },
|
||||
{ value: "C", label: "C. 舆论动员（宣传人民币信用,发动群众）" },
|
||||
]}
|
||||
correctAnswer={["A", "B", "C"]}
|
||||
errorMessage="单一措施效果有限,请尝试综合施策。"
|
||||
minSelections={1}
|
||||
maxSelections={3}
|
||||
minSelectionsErrorMessage="单一措施效果有限,请尝试综合施策。"
|
||||
submitText="提交"
|
||||
onSubmit={onQuiz1Submit}
|
||||
onError={(error) => {
|
||||
console.log("错误信息:", error);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 旁白文字2（图2）- 多选题1答对后显示 */}
|
||||
<Narration
|
||||
text={narration2Text}
|
||||
visible={showNarration2}
|
||||
onClose={onNarration2Close}
|
||||
enableAnimation={false}
|
||||
/>
|
||||
|
||||
{/* 多选题2（图3）- 关闭旁白后显示 */}
|
||||
<MultipleChoiceQuizPanel
|
||||
visible={showQuiz2}
|
||||
title="（多选题）面对投机商的猖狂反扑,下一步应采取何种决定性措施?"
|
||||
options={[
|
||||
{ value: "A", label: "A. 加大银元抛售量,耗尽投机资本。" },
|
||||
{ value: "B", label: "B. 查封投机核心场所,逮捕首要分子。" },
|
||||
{ value: "C", label: "C. 颁布法令,严禁银元计价流通。" },
|
||||
]}
|
||||
correctAnswer={["A", "B", "C"]}
|
||||
errorMessage="单一措施效果有限,请尝试综合施策。"
|
||||
minSelections={1}
|
||||
maxSelections={3}
|
||||
minSelectionsErrorMessage="单一措施效果有限,请尝试综合施策。"
|
||||
submitText="提交"
|
||||
onSubmit={onQuiz2Submit}
|
||||
onError={(error) => {
|
||||
console.log("错误信息:", error);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 成功提示框 - 多选题2答对后显示 */}
|
||||
<SuccessAlert
|
||||
visible={showSuccessAlert}
|
||||
title="恭喜你, 选择正确!"
|
||||
content="陈云同志的意见是:三管齐下,但核心是查封投机核心场所,逮捕首要分子。擒贼先擒王,打掉指挥部。"
|
||||
onContinue={onSuccessAlertContinue}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
/**
|
||||
* 银元之战状态管理 Hook
|
||||
* 管理银元之战相关的所有状态
|
||||
*/
|
||||
import { useState } from "react";
|
||||
|
||||
/**
|
||||
* 银元之战状态管理 Hook
|
||||
* @returns 银元之战的所有状态和更新函数
|
||||
*/
|
||||
export const useYinyuanState = () => {
|
||||
// 多选题1相关状态
|
||||
const [showQuiz1, setShowQuiz1] = useState(false);
|
||||
|
||||
// 旁白文字状态（图2）
|
||||
const [showNarration2, setShowNarration2] = useState(false);
|
||||
const [narration2Text, setNarration2Text] = useState("");
|
||||
|
||||
// 多选题2相关状态
|
||||
const [showQuiz2, setShowQuiz2] = useState(false);
|
||||
|
||||
// 成功提示框状态
|
||||
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
|
||||
|
||||
// 银元之战解决状态
|
||||
const [isYinyuanSolved, setIsYinyuanSolved] = useState(false);
|
||||
|
||||
// 走势图图标显示状态（控制文件上的走势图图标是否显示）
|
||||
const [showTrendChartIcon, setShowTrendChartIcon] = useState(true);
|
||||
|
||||
// 走势图大图显示状态
|
||||
const [showTrendChartDetail, setShowTrendChartDetail] = useState(false);
|
||||
|
||||
// 三个引导提示框状态
|
||||
const [showGuide1, setShowGuide1] = useState(false); // 前往解决按钮出现后的提示
|
||||
const [showGuide2, setShowGuide2] = useState(false); // 走势图出现后的提示
|
||||
const [showGuide3, setShowGuide3] = useState(false); // 走势图大图打开后的提示
|
||||
|
||||
// 记录是否已经显示过这些提示（避免重复显示）
|
||||
const [hasShownGuide1, setHasShownGuide1] = useState(false);
|
||||
const [hasShownGuide2, setHasShownGuide2] = useState(false);
|
||||
const [hasShownGuide3, setHasShownGuide3] = useState(false);
|
||||
|
||||
return {
|
||||
// 题目相关状态
|
||||
showQuiz1,
|
||||
setShowQuiz1,
|
||||
showQuiz2,
|
||||
setShowQuiz2,
|
||||
|
||||
// 旁白相关状态
|
||||
showNarration2,
|
||||
setShowNarration2,
|
||||
narration2Text,
|
||||
setNarration2Text,
|
||||
|
||||
// 成功提示框状态
|
||||
showSuccessAlert,
|
||||
setShowSuccessAlert,
|
||||
|
||||
// 解决状态
|
||||
isYinyuanSolved,
|
||||
setIsYinyuanSolved,
|
||||
|
||||
// 走势图相关状态
|
||||
showTrendChartIcon,
|
||||
setShowTrendChartIcon,
|
||||
showTrendChartDetail,
|
||||
setShowTrendChartDetail,
|
||||
|
||||
// 引导提示状态
|
||||
showGuide1,
|
||||
setShowGuide1,
|
||||
showGuide2,
|
||||
setShowGuide2,
|
||||
showGuide3,
|
||||
setShowGuide3,
|
||||
hasShownGuide1,
|
||||
setHasShownGuide1,
|
||||
hasShownGuide2,
|
||||
setHasShownGuide2,
|
||||
hasShownGuide3,
|
||||
setHasShownGuide3,
|
||||
};
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user