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}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user