feat:黄炎培对话对接中

src/pages/chenyun/reflection/yinyuan/YinyuanQuizzes.tsx

@@ -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}
+      />
+    </>
+  );
+};
+