feat:鲁迅添加引导

src/pages/huangyanpei/internalization.tsx

@@ -29,6 +29,7 @@ type QuizAnchor = {
   type: "single" | "multiple" | "drag";
   options: QuizOption[];
   blanks?: { id: string; label: string }[];
+  explanation?: string;
 };
 
 const starName = "huangyanpei";
@@ -47,12 +48,12 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
       {
         value: "B",
         label: "自动控制",
-        explanation:
-          "这一工程理论框架成形于20世纪中叶，70年代实现集中控制，新中国成立前，没有相关学科基础、设备与技术条件",
       },
       { value: "C", label: "木工", isCorrect: true },
       { value: "D", label: "纽扣科", isCorrect: true },
     ],
+    explanation:
+      "自动控制”这一工程理论框架成形于20世纪中叶，70年代实现集中控制，在民国时期，没有相关学科基础、设备与技术条件",
   },
   {
     id: "quiz-2",
@@ -75,7 +76,6 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
       {
         value: "C",
         label: "学习四书五经、八股文",
-        explanation: "黄炎培认为教育不能只谈书本、脱离实际",
       },
       {
         value: "D",
@@ -83,6 +83,7 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
         isCorrect: true,
       },
     ],
+    explanation: "黄炎培认为教育不能只谈书本、脱离实际",
   },
   {
     id: "quiz-3",
@@ -125,10 +126,10 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
       {
         value: "D",
         label: "美术设计与制作→影像与影视技术",
-        explanation:
-          "两个专业为不同技能方向的学习，前者为平面绘画等，后者以视频为主",
       },
     ],
+    explanation:
+      "美术设计与制作专业侧重于平面设计，而影像与影视技术专业侧重于影视特效后期，两者的专业核心课程涉及的软硬件也有差异",
   },
 ];
 
@@ -286,7 +287,9 @@ const HuangyanpeiInternalization = () => {
                     label: `${opt.value}. ${opt.label}`,
                   }))}
                   correctAnswer={correctAnswers}
-                  errorMessage="再思考一下，注意选择所有正确答案。"
+                  errorMessage={
+                    item.explanation || "再思考一下，注意选择所有正确答案。"
+                  }
                   onSubmit={(values: string[], isCorrect: boolean) => {
                     if (isCorrect) {
                       setActiveSuccess(item.id);

src/pages/huangyanpei/place/place3.tsx

@@ -9,6 +9,7 @@ import {
   GuideStepsItem,
   SingleChoiceQuizPanel,
 } from "@/components";
+import { SuccessAlert } from "@/components/layout";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -38,6 +39,8 @@ const HuangyanpeiPlace3 = () => {
   const [guide3Step, setGuide3Step] = useState(0);
   // 光标3的题目显示状态
   const [showQuiz3, setShowQuiz3] = useState(false);
+  // 成功提示状态
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
 
   // 光标1、2的引导对话状态（在两者都浏览后显示）
   const [guide12Visible, setGuide12Visible] = useState(false);
@@ -69,7 +72,7 @@ const HuangyanpeiPlace3 = () => {
   const handleQuiz3Submit = (value: string, isCorrect: boolean) => {
     if (isCorrect) {
       setShowQuiz3(false);
-      setVisited((prev) => prev.add(3));
+      setShowSuccessAlert(true);
     }
   };
 
@@ -212,6 +215,22 @@ const HuangyanpeiPlace3 = () => {
         onSubmit={handleQuiz3Submit}
       />
 
+      {/* 成功提示 */}
+      <SuccessAlert
+        visible={showSuccessAlert}
+        onContinue={() => {
+          setShowSuccessAlert(false);
+          setVisited((prev) => {
+            const next = new Set(prev);
+            next.add(3);
+            return next;
+          });
+        }}
+        onClose={() => {
+          setShowSuccessAlert(false);
+        }}
+      />
+
       {/* 光标1、2的引导对话 */}
       <GuideSteps
         visible={guide12Visible}

src/pages/huangyanpei/place/place4.tsx

@@ -10,6 +10,7 @@ import {
   SingleChoiceQuizPanel,
   Video,
 } from "@/components";
+import { SuccessAlert } from "@/components/layout";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 import type { VideoRef } from "@/components/video";
@@ -44,6 +45,8 @@ const HuangyanpeiPlace4 = () => {
   const [showVideo, setShowVideo] = useState(false);
   // 题目显示状态
   const [showQuiz, setShowQuiz] = useState(false);
+  // 成功提示状态
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
   const videoRef = useRef<VideoRef>(null);
 
   const handleOpenExhibit = (index: 1 | 2 | 3 | 4 | 5) => {
@@ -62,6 +65,7 @@ const HuangyanpeiPlace4 = () => {
   const handleQuizSubmit = (value: string, isCorrect: boolean) => {
     if (isCorrect) {
       setShowQuiz(false);
+      setShowSuccessAlert(true);
     }
   };
 
@@ -225,6 +229,17 @@ const HuangyanpeiPlace4 = () => {
         zIndex={10001}
       />
 
+      {/* 成功提示 */}
+      <SuccessAlert
+        visible={showSuccessAlert}
+        onContinue={() => {
+          setShowSuccessAlert(false);
+        }}
+        onClose={() => {
+          setShowSuccessAlert(false);
+        }}
+      />
+
       {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
       <StudyGuideModal
         visible={showGuideModal}

src/pages/huangyanpei/place/place6.tsx

@@ -115,10 +115,10 @@ const HuangyanpeiPlace6 = () => {
           新中国成立后,黄炎培先生还继续从事教育工作吗?我们现在的中职教育体系,是不是也有他当年的理念呀?
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          当然啦!1949年10月19日,71岁的黄炎培出任政务院副总理兼轻工业部部长,依然没有放下他毕生追求的职业教育事业。他把中华职教社的骨干力量全部调到北京,亲自起草《关于改革学制的决定》,第一次把"中等专业学校"正式纳入国家学制,让职业教育有了明确的国家定位。
+          当然啦!1949年10月19日,71岁的黄炎培出任政务院副总理兼轻工业部部长,依然没有放下他毕生追求的职业教育事业。他把中华职教社的骨干力量全部调到北京,亲自起草《关于改革学制的决定》...
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          1952年,他又推动建立了上海机械学校、南京航空学校等五所中专,这些学校为国家"一五"计划输送了6.3万名技术工人,为工业发展提供了坚实的人才支撑。
+          第一次把"中等专业学校"正式纳入国家学制,让职业教育有了明确的国家定位。1952年,他又推动建立了上海机械学校、南京航空学校等五所中专,这些学校为国家"一五"计划输送了6.3万名技术工人,为工业发展提供了坚实的人才支撑。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
           黄炎培先生曾说过:"我要把最后一滴血,滴在职业教育的讲台上。"他用一生践行了这句话,而我们现在中职教育强调的"工学结合、德技并修",正是对他"手脑并用、注重实践"理念的传承和发展。