feat:黄炎培对话对接中

src/pages/huangyanpei/reflection/scene3.tsx

@@ -1,8 +1,11 @@
-import { useState } from "react";
-import { Title, Image, Cursor } from "@/components";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useState, useRef } from "react";
+import { Title, Image, Cursor, StudyGuideModal, Video } from "@/components";
+import { MultipleChoiceQuizPanel } from "@/components/layout/quiz";
+import { SuccessAlert, ErrorAlert } from "@/components/layout";
+import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 import ViseAssemblyDialog from "./scene3/ViseAssemblyDialog";
+import type { VideoRef } from "@/components/video";
 
 const starName = "huangyanpei";
 
@@ -12,15 +15,22 @@ const HuangyanpeiReflectionScene3 = () => {
     moduleName: string;
   }>();
 
+  const [showGuide1, setShowGuide1] = useState(true);
   const [showDialog, setShowDialog] = useState(false);
+  const [showQuiz, setShowQuiz] = useState(false);
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+  const [showErrorAlert, setShowErrorAlert] = useState(false);
+  const [showCompleteGuide, setShowCompleteGuide] = useState(false);
+  const [showVideo, setShowVideo] = useState(false);
   const [visited, setVisited] = useState<Set<number>>(new Set());
+  const videoRef = useRef<VideoRef>(null);
 
   if (!moduleName) {
     return null;
   }
 
   const progressCount = visited.size;
-  const total = 1;
+  const total = 2;
   const completed = progressCount >= total;
   const subtitle = completed
     ? "探索中华职业学院·立业之本·铁工科(已完成)"
@@ -50,22 +60,55 @@ const HuangyanpeiReflectionScene3 = () => {
         src={getStaticImage("components/离开")}
         button
         onClick={() => {
-          navigate(`/${moduleName}/${starName}/home`);
+          navigate(`/${moduleName}/${starName}/reflection2`);
         }}
       />
 
+      {/* 第一段引导 */}
+      <StudyGuideModal
+        visible={showGuide1}
+        onContinue={() => {
+          setShowGuide1(false);
+        }}
+      >
+        终于到中华职业学校啦！这里是中国近代职教的摇篮，"免学费、包分配"，还能学真手艺，快来练就一技之长。
+        {"\n"}
+        你选了学技术，那就来挑战制作中华职校的"明星产品"——台钳吧！当年这台钳还拿过巴拿马万国博览会金奖呢
+      </StudyGuideModal>
+
       {/* 互动展品光标：组装台钳互动 */}
       <Cursor
         className="absolute right-100 bottom-55"
-        onClick={() => setShowDialog(true)}
+        onClick={() => {
+          if (!showGuide1) {
+            if (visited.has(2)) {
+              setShowDialog(true);
+            } else {
+              setShowErrorAlert(true);
+            }
+          }
+        }}
         read={visited.has(1)}
       />
 
+      {/* 答题光标 */}
+      <Cursor
+        className="absolute left-145 top-68"
+        onClick={() => {
+          if (!showGuide1) {
+            setShowQuiz(true);
+          }
+        }}
+        read={visited.has(2)}
+      />
+
       {/* 组装台钳互动弹窗 */}
       <ViseAssemblyDialog
         visible={showDialog}
         onClose={() => setShowDialog(false)}
         onComplete={() => {
+          setShowDialog(false);
+          setShowCompleteGuide(true);
           setVisited((prev) => {
             const next = new Set(prev);
             next.add(1);
@@ -74,13 +117,80 @@ const HuangyanpeiReflectionScene3 = () => {
         }}
       />
 
+      {/* 多选题答题框 */}
+      <MultipleChoiceQuizPanel
+        visible={showQuiz}
+        title="题目1 (多选题) 制作台钳需要哪些工具?(多选)"
+        options={[
+          { value: "A", label: "A. 锯子" },
+          { value: "B", label: "B. 毛笔" },
+          { value: "C", label: "C. 锉刀" },
+          { value: "D", label: "D. 铁锤" },
+        ]}
+        correctAnswer={["A", "C", "D"]}
+        errorMessage="毛笔是写字的哦! 台钳是铁制品,得用锯子、锉刀、铁锤这些工具,再选一次。"
+        minSelections={1}
+        onSubmit={(values, isCorrect) => {
+          if (isCorrect) {
+            setShowQuiz(false);
+            setShowSuccessAlert(true);
+          }
+        }}
+        zIndex={10001}
+      />
+
+      {/* 成功提示弹窗 */}
+      <SuccessAlert
+        visible={showSuccessAlert}
+        title="满分!"
+        content='黄先生说"手脑并用",懂了理论,也要动手实践。'
+        onContinue={() => {
+          setShowSuccessAlert(false);
+          setVisited((prev) => new Set(prev).add(2));
+        }}
+        onClose={() => {
+          setShowSuccessAlert(false);
+        }}
+      />
+
+      {/* 错误提示：请先去学习制作台钳 */}
+      <ErrorAlert
+        visible={showErrorAlert}
+        text="请先去学习台钳制作知识吧！"
+        onClose={() => setShowErrorAlert(false)}
+      />
+
+      {/* 组装台钳完成提示 */}
+      <StudyGuideModal
+        visible={showCompleteGuide}
+        onContinue={() => setShowCompleteGuide(false)}
+        verticalAlign="center"
+      >
+        太厉害啦！你的台钳制作成功，和当年拿金奖的同款哦。
+      </StudyGuideModal>
+
       {completed && (
         <Image
           className="absolute bottom-0 right-4"
           src={getStaticImage("components/place/继续前进")}
           button
           onClick={() => {
-            navigate(`/${moduleName}/${starName}/reflection4`);
+            setShowVideo(true);
+          }}
+        />
+      )}
+
+      {showVideo && (
+        <Video
+          ref={videoRef}
+          src={getPublicPath("video/huangyanpei/huangyanpei_09.mp4")}
+          className="h-full w-full"
+          autoPlay
+          playsInline
+          showSkipButton
+          onEnded={() => {
+            setShowVideo(false);
+            navigate(`/${moduleName}/${starName}/home`);
           }}
         />
       )}