feat:完善黄炎培对话引导

src/components/exhibit/ExhibitDescriptionNarration.tsx

@@ -136,7 +136,7 @@ const ExhibitDescriptionNarration = ({
           exit={{ opacity: 0, x: -20 }}
           transition={{ duration: 0.3 }}
           className={cn(
-            "max-w-[500px] px-12 py-14",
+            "max-w-[580px] px-12 py-14",
             "shadow-black/60",
             "relative overflow-hidden",
             className

src/components/exhibit/ExhibitOverlay.tsx

@@ -490,7 +490,7 @@ const ExhibitOverlay = ({
                     text={description}
                     visible={visible}
                     autoPlay={autoPlayDescription}
-                    className="absolute left-30 top-1/2 -translate-y-1/2"
+                    className="absolute left-20 top-1/2 -translate-y-1/2"
                   />
                 )}
 

src/components/layout/quiz/SingleChoiceQuizPanel.tsx

@@ -84,7 +84,7 @@ const SingleChoiceQuizPanel = ({
     >
       <div className="relative w-[1728px] h-[972px] flex flex-col items-center justify-center">
         {/* 题干卡片 */}
-        <div className="w-[1600px] min-h-[260px] rounded-[32px] bg-black px-20 py-14 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
+        <div className="w-[1600px] rounded-[32px] bg-black px-20 py-14 shadow-[0_20px_60px_rgba(240,190,117,0.8)] border-4 border-[#d4c5a9]">
           <div className="text-[34px] leading-relaxed text-white">{title}</div>
         </div>
 
@@ -101,7 +101,7 @@ const SingleChoiceQuizPanel = ({
                 onClick={() => handleOptionClick(option.value)}
               >
                 <div
-                  className="w-[1431px] h-[156px] flex items-center px-16 text-[28px] leading-snug text-[#fdf5e6] bg-cover bg-center bg-no-repeat transition-all duration-150"
+                  className="w-[1431px] max-h-[156px] min-h-[100px] flex items-center px-16 text-[28px] leading-snug text-[#fdf5e6] bg-cover bg-center bg-no-repeat transition-all duration-150"
                   style={{
                     backgroundImage: getBackgroundImage(
                       isSelected

src/pages/huangyanpei/place/place3.tsx

@@ -63,16 +63,13 @@ const HuangyanpeiPlace3 = () => {
   // 监听光标3的引导对话关闭
   const handleGuide3VisibleChange = (visible: boolean) => {
     setGuide3Visible(visible);
-    if (!visible) {
-      // 对话结束后显示题目
-      setShowQuiz3(true);
-    }
   };
 
   // 处理光标3题目提交
   const handleQuiz3Submit = (value: string, isCorrect: boolean) => {
     if (isCorrect) {
       setShowQuiz3(false);
+      setVisited((prev) => prev.add(3));
     }
   };
 
@@ -154,12 +151,16 @@ const HuangyanpeiPlace3 = () => {
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
         onClose={() => {
           if (activeExhibitId !== null) {
+            setActiveExhibitId(null);
+            if (activeExhibitId === 3) {
+              setShowQuiz3(true);
+              return;
+            }
             setVisited((prev) => {
               const next = new Set(prev);
               next.add(activeExhibitId);
               return next;
             });
-            setActiveExhibitId(null);
           } else {
             setActiveExhibitId(null);
           }
@@ -209,7 +210,6 @@ const HuangyanpeiPlace3 = () => {
         correctAnswer="B"
         errorMessage='1903年,黄炎培将"观澜书院"改制为"川沙小学堂",自任校长,率先打破传统经学模式,在课程表中首次列入算术、格致(近代自然科学)、体操和乡土调查四门新学科,并实行"半日授课、半日实习"的教学方式,开创了近代中国小学融入科学、体育与实践教育的新风,因此选项B正确。'
         onSubmit={handleQuiz3Submit}
-        zIndex={10001}
       />
 
       {/* 光标1、2的引导对话 */}
@@ -224,14 +224,13 @@ const HuangyanpeiPlace3 = () => {
           原来当年还有专门的女子学校呀?在那个年代,女孩子能上学是不是特别不容易?后来的浦东中学也是黄炎培先生办的吗?
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          你观察得特别仔细!
+          你观察得特别仔细!川沙小学堂开学没多久,黄炎培就和堂兄黄洪培、堂嫂陆开群一起,策划创建了"开群女校"——这所学校专门面向社会招收女学生,还用全力支持办学、腾出自家住房的陆开群名字命名,直接开创了浦东地区女子教育的先河...
-          川沙小学堂开学没多久,黄炎培就和堂兄黄洪培、堂嫂陆开群一起,策划创建了"开群女校"——这所学校专门面向社会招收女学生,还用全力支持办学、腾出自家住房的陆开群名字命名,直接开创了浦东地区女子教育的先河,让很多女孩子有了读书的机会。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          到了1906年,上海营造业宗师杨斯盛捐资30万两白银,在浦东六里桥购地40多亩创办浦东中学,特意邀请黄炎培担任首任校长。校舍是黄炎培亲自设计的,杨斯盛先生亲自监工,建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢!
+          让很多女孩子有了读书的机会。到了1906年,上海营造业宗师杨斯盛捐资30万两白银,在浦东六里桥购地40多亩创办浦东中学,特意邀请黄炎培担任首任校长。校舍是黄炎培亲自设计的,杨斯盛先生亲自监工...
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。
+          建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢!1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。
         </GuideStepsItem>
       </GuideSteps>
 

src/pages/huangyanpei/place/place4.tsx

@@ -1,13 +1,18 @@
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import {
   ExhibitOverlay,
   Title,
   Image,
   Cursor,
   StudyGuideModal,
+  GuideSteps,
+  GuideStepsItem,
+  SingleChoiceQuizPanel,
+  Video,
 } from "@/components";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
+import type { VideoRef } from "@/components/video";
 
 const starName = "huangyanpei";
 
@@ -32,10 +37,34 @@ const HuangyanpeiPlace4 = () => {
   >(null);
   const [visited, setVisited] = useState<Set<number>>(new Set());
 
+  // 光标3、4的引导对话状态（在两者都浏览后显示）
+  const [guide34Visible, setGuide34Visible] = useState(false);
+  const [guide34Shown, setGuide34Shown] = useState(false);
+  // 视频显示状态
+  const [showVideo, setShowVideo] = useState(false);
+  // 题目显示状态
+  const [showQuiz, setShowQuiz] = useState(false);
+  const videoRef = useRef<VideoRef>(null);
+
   const handleOpenExhibit = (index: 1 | 2 | 3 | 4 | 5) => {
     setActiveExhibitId(index);
   };
 
+  // 监听visited变化，当光标3、4都浏览后显示引导对话
+  useEffect(() => {
+    if (visited.has(3) && visited.has(5) && !guide34Shown) {
+      setGuide34Shown(true);
+      setGuide34Visible(true);
+    }
+  }, [visited, guide34Shown]);
+
+  // 处理题目提交
+  const handleQuizSubmit = (value: string, isCorrect: boolean) => {
+    if (isCorrect) {
+      setShowQuiz(false);
+    }
+  };
+
   const progressCount = visited.size;
   const total = 5;
   const completed = progressCount >= total;
@@ -71,26 +100,31 @@ const HuangyanpeiPlace4 = () => {
         }}
       />
 
+      {/* 光标1 */}
       <Cursor
         className="absolute left-42 top-78"
         onClick={() => handleOpenExhibit(1)}
         read={visited.has(1)}
       />
+      {/* 光标2 */}
       <Cursor
         className="absolute left-40 top-132"
         onClick={() => handleOpenExhibit(2)}
         read={visited.has(2)}
       />
+      {/* 光标3 */}
       <Cursor
         className="absolute left-125 top-100"
         onClick={() => handleOpenExhibit(3)}
         read={visited.has(3)}
       />
+      {/* 光标4 */}
       <Cursor
         className="absolute right-62 top-102"
         onClick={() => handleOpenExhibit(4)}
         read={visited.has(4)}
       />
+      {/* 光标5 */}
       <Cursor
         className="absolute right-205 top-110"
         onClick={() => handleOpenExhibit(5)}
@@ -108,8 +142,16 @@ const HuangyanpeiPlace4 = () => {
         />
       )}
 
+      {/* 展品1、2、4出现描述 */}
       <ExhibitOverlay
         visible={activeExhibitId !== null}
+        description={
+          activeExhibitId === 1 ||
+          activeExhibitId === 2 ||
+          activeExhibitId === 4
+            ? "黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。“八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。这期间，1935年中华职业教育社还与荣氏三兄弟合作，在申新三厂办理劳动工自治区，对工人进行文化教育。"
+            : undefined
+        }
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
         onClose={() => {
           if (activeExhibitId !== null) {
@@ -123,6 +165,66 @@ const HuangyanpeiPlace4 = () => {
         }}
       />
 
+      {/* 光标3、4的引导对话 */}
+      <GuideSteps
+        visible={guide34Visible}
+        onVisibleChange={(visible) => {
+          setGuide34Visible(visible);
+          // 对话结束后播放视频
+          if (!visible) {
+            setShowVideo(true);
+          }
+        }}
+        showMask={true}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          职业教育这个词是黄炎培先生创造的吗？
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培与蔡元培、张謇等48位有识之士在上海成立"中华职业教育社"，并发表《宣言》，直指当时教育的问题——"今之教育，为少数人升官发财，非为多数人衣食住行"。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          1918年，他在上海陆家浜创办中华职业学校。最初开设三个科目：铁工、木工和纽扣制作。招生广告明确写着"免学费、包分配"。首批招收78人，还推出了响亮的口号"双手万能、手脑并用"。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          这所学校特别厉害，教室和车间连在一起，学生可以一边学理论，一边练技能。学校铁工厂制作的台钳，后来还成了"国货精品"，甚至在巴拿马万国博览会上拿过金奖呢！
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 视频播放 */}
+      {showVideo && (
+        <Video
+          ref={videoRef}
+          src={getPublicPath("video/huangyanpei/huangyanpei_05.mp4")}
+          className="fixed inset-0 z-[20000]"
+          autoPlay
+          playsInline
+          showSkipButton
+          onEnded={() => {
+            setShowVideo(false);
+            setShowQuiz(true);
+          }}
+        />
+      )}
+
+      {/* 题目 */}
+      <SingleChoiceQuizPanel
+        visible={showQuiz}
+        title='中华职业学校首批招生78人,凭借( )口号和"免学费、包分配"的优待,开创了中国近代职业教育的先河。'
+        options={[
+          { value: "A", label: "A. 学而优则仕" },
+          { value: "B", label: "B. 双手万能、手脑并用" },
+          { value: "C", label: "C. 实业救国、教育兴国" },
+          { value: "D", label: "D. 民主科学、救国救民" },
+        ]}
+        correctAnswer="B"
+        errorMessage='1918年黄炎培在上海创办中华职业学校,首批招78人,以"免学费、包分配"的实惠和"双手万能、手脑并用"的响亮口号,打破"学而优则仕"的传统观念,首设铁工、木工、纽扣科,把课堂与车间合一,开创了中国近代职业教育的先河,因此选B。'
+        onSubmit={handleQuizSubmit}
+        zIndex={10001}
+      />
+
       {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
       <StudyGuideModal
         visible={showGuideModal}

src/pages/huangyanpei/place/place5.tsx

@@ -6,7 +6,11 @@ import {
   Cursor,
   Video,
   StudyGuideModal,
+  GuideSteps,
+  GuideStepsItem,
+  SingleChoiceQuizPanel,
 } 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";
@@ -30,6 +34,12 @@ const HuangyanpeiPlace5 = () => {
   const videoRef = useRef<VideoRef>(null);
   // 学习引导弹窗（进入场景即显示）
   const [showGuideModal, setShowGuideModal] = useState(true);
+  // 展品2视频后的对话引导状态
+  const [guideVisible, setGuideVisible] = useState(false);
+  // 题目显示状态
+  const [showQuiz, setShowQuiz] = useState(false);
+  // 成功提示状态
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
 
   const handleOpenExhibit = (index: 1 | 2) => {
     if (index === 2) {
@@ -82,11 +92,13 @@ const HuangyanpeiPlace5 = () => {
         }}
       />
 
+      {/* 光标1 */}
       <Cursor
         className="absolute left-35 top-108"
         onClick={() => handleOpenExhibit(1)}
         read={visited.has(1)}
       />
+      {/* 光标2 */}
       <Cursor
         className="absolute right-112 top-108"
         onClick={() => handleOpenExhibit(2)}
@@ -118,12 +130,8 @@ const HuangyanpeiPlace5 = () => {
             showSkipButton
             skipText="跳过"
             onEnded={() => {
-              setVideoVisible(false);
+              // 视频结束后显示对话引导
-              setVisited((prev) => {
+              setGuideVisible(true);
-                const next = new Set(prev);
-                next.add(2);
-                return next;
-              });
             }}
           />
         </div>
@@ -131,6 +139,11 @@ const HuangyanpeiPlace5 = () => {
 
       <ExhibitOverlay
         visible={activeExhibitId !== null}
+        description={
+          activeExhibitId === 1
+            ? '1940年,国民党政府还坚持"攘外必先安内"的政策,让国共两党的关系越来越紧张。黄炎培等有识之士看到这种严峻形势,觉得中间派应该联合起来,为国家寻求一条和平发展的道路。于是他联系了张君励、梁漱溟等爱国同仁,后来又联合了第三党和无党派人士,准备成立统一的同盟。刚好这时发生了震惊中外的"皖南事变",国共矛盾进一步激化,黄炎培心里特别着急,就加紧了筹备工作。1941年3月19日,中国民主政团同盟正式成立,参加成立会的有13人,选出了5位常委,黄炎培当选为第一任主席。1945年,他还创立了民主建国会并担任第一任主委,带领大家积极投入"反内战、保和平"的民主斗争,为国家的和平稳定奔走呼号。'
+            : undefined
+        }
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
         onClose={() => {
           if (activeExhibitId !== null) {
@@ -144,6 +157,72 @@ const HuangyanpeiPlace5 = () => {
         }}
       />
 
+      {/* 展品2视频后的引导对话 */}
+      <GuideSteps
+        visible={guideVisible}
+        onVisibleChange={(visible) => {
+          setGuideVisible(visible);
+          // 对话结束后显示题目
+          if (!visible) {
+            setShowQuiz(true);
+          }
+        }}
+        showMask={true}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          哇!这就是历史课上学的"窑洞对"!黄炎培先生和毛主席的这次谈话,是不是破解了"历史周期率"呀?
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          完全正确!1945年7月1日,黄炎培以国民参政员的身份,带着考察团一行六人赴延安考察,中共中央领导人毛泽东、朱德、周恩来等都亲自到机场迎接。7月4日,他和毛泽东主席长谈了十几个小时,这场对话能和诸葛亮的"隆中对"相媲美。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          谈话中,黄炎培提出了一个深刻的问题:"其兴也勃焉,其亡也忽焉",也就是历代王朝逃不开的"历史周期率"。毛泽东主席当场回答:"我们已经找到新路,这条新路就是民主。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          "后来,黄炎培把这段对话写进了《延安归来》这本书,一夜之间就畅销十万册,成为当时最热门的书籍,而"实行民主"也被大家称为破解历史周期率的"初版答案"。
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 题目 */}
+      <SingleChoiceQuizPanel
+        visible={showQuiz}
+        title='《延安归来》中"破解历史周期率"的"初版答案"一夜畅销十万册,其提出的核心对策是( )'
+        options={[
+          { value: "A", label: "A. 实行民主" },
+          { value: "B", label: "B. 发展经济" },
+          { value: "C", label: "C. 加强党建" },
+          { value: "D", label: "D. 武装斗争" },
+        ]}
+        correctAnswer="A"
+        errorMessage='1945年7月,黄炎培在延安向毛泽东提出"其兴也勃焉,其亡也忽焉"的历史周期率之问。毛泽东当即回答:"我们已经找到新路,这条新路就是民主。"黄炎培将这一对话写入《延安归来》,首次公开提出以"民主"破解历代王朝兴衰循环的命题。该书一夜之间畅销十万册,使"实行民主"成为当时社会各界瞩目的"初版答案",故选A。'
+        onSubmit={(value, isCorrect) => {
+          if (isCorrect) {
+            setVideoVisible(false);
+            setShowQuiz(false);
+            setShowSuccessAlert(true);
+          }
+        }}
+        zIndex={10001}
+      />
+
+      {/* 成功提示 */}
+      <SuccessAlert
+        visible={showSuccessAlert}
+        onContinue={() => {
+          setShowSuccessAlert(false);
+          setVisited((prev) => {
+            const next = new Set(prev);
+            next.add(2);
+            return next;
+          });
+        }}
+        onClose={() => {
+          setShowSuccessAlert(false);
+        }}
+      />
+
       {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
       <StudyGuideModal
         visible={showGuideModal}

src/pages/huangyanpei/place/place6.tsx

@@ -5,6 +5,8 @@ import {
   Image,
   Cursor,
   StudyGuideModal,
+  GuideSteps,
+  GuideStepsItem,
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -25,9 +27,13 @@ const HuangyanpeiPlace6 = () => {
   const [visited, setVisited] = useState<Set<number>>(new Set());
   // 学习引导弹窗（进入场景即显示）
   const [showGuideModal, setShowGuideModal] = useState(true);
+  // 对话引导状态
+  const [guideVisible, setGuideVisible] = useState(false);
 
   const handleOpenExhibit = (index: 1) => {
+    // 同时打开展品和对话
     setActiveExhibitId(index);
+    setGuideVisible(true);
   };
 
   const progressCount = visited.size;
@@ -77,7 +83,7 @@ const HuangyanpeiPlace6 = () => {
           src={getStaticImage("components/place/继续前进")}
           button
           onClick={() => {
-          navigate(`/${moduleName}/${starName}/reflection`);
+            navigate(`/${moduleName}/${starName}/home`);
           }}
         />
       )}
@@ -97,6 +103,28 @@ const HuangyanpeiPlace6 = () => {
         }}
       />
 
+      {/* 对话引导 */}
+      <GuideSteps
+        visible={guideVisible}
+        onVisibleChange={setGuideVisible}
+        showMask={true}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          新中国成立后,黄炎培先生还继续从事教育工作吗?我们现在的中职教育体系,是不是也有他当年的理念呀?
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          当然啦!1949年10月19日,71岁的黄炎培出任政务院副总理兼轻工业部部长,依然没有放下他毕生追求的职业教育事业。他把中华职教社的骨干力量全部调到北京,亲自起草《关于改革学制的决定》,第一次把"中等专业学校"正式纳入国家学制,让职业教育有了明确的国家定位。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          1952年,他又推动建立了上海机械学校、南京航空学校等五所中专,这些学校为国家"一五"计划输送了6.3万名技术工人,为工业发展提供了坚实的人才支撑。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          黄炎培先生曾说过:"我要把最后一滴血,滴在职业教育的讲台上。"他用一生践行了这句话,而我们现在中职教育强调的"工学结合、德技并修",正是对他"手脑并用、注重实践"理念的传承和发展。
+        </GuideStepsItem>
+      </GuideSteps>
+
       {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
       <StudyGuideModal
         visible={showGuideModal}