feat: 添加黄炎培相关场景和引导对话

- 新增黄炎培故居的图像资源，丰富视觉内容。
- 更新多个场景中的引导对话，提升学习互动性和历史背景的准确性。
- 调整文本内容，确保信息的一致性和流畅性。
- 引入结束窗口，增强用户体验，鼓励用户深入了解黄炎培的教育理念。

src/pages/huangyanpei/place/place1.tsx

@@ -120,10 +120,8 @@ const HuangyanpeiPlace1 = () => {
           setVisible(true);
         }}
       >
-        同学你好，欢迎来到走进故居-对话学习模块！{"\n"}
-        {
-          "进入黄炎培故居后，我们一起来了解黄炎培先生经历的5个阶段：““思想启蒙”-> “教育实践”-> “创立职教”-> “延安对话”-> 职教传薪;"
-        }
+        同学你好，欢迎来到“走进故居·对话”学习模块！{"\n"}
+        此刻你正站在黄炎培先生故居门前，接下来就跟着时光的脉络，拆解黄先生人生里五段滚烫的旅程：思想启蒙、教育实践、创立职教、延安对话、职教传薪。准备好一起走进这段炽热的岁月了吗？
       </StudyGuideModal>
 
       {/* 引导 */}
@@ -136,14 +134,14 @@ const HuangyanpeiPlace1 = () => {
             setShowAfterDialogGuide(true);
           }
         }}
-        showMask={true}
+        showMask={false}
         highlightSelectors={[]}
       >
         <GuideStepsItem speaker="student">
           小沪，这栋古色古香的江南大院，就是黄炎培先生从小生活、读书的地方吗
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          没错，1878年10月1日，黄炎培先生就出生在当时江苏省川沙县城关镇（现上海市浦东新区川沙镇）的这处“内史第”，宅子原是他姑祖父沈树镛家，也是他后来所说的“生于斯、读于斯、长于斯”之地。
+          没错，1878年10月1日，黄炎培先生就出生在当时江苏省川沙县城关镇（现上海市浦东新区川沙镇）的这处“内史第”，宅子原是他外祖父沈树镛家，也是他后来所说的“生于斯、读于斯、长于斯”之地。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
           1890年，川沙创办“观澜书院”，12岁的黄炎培以第一名的成绩考入，每天提着母亲亲手缝制的布书包，往返十里路求学，一点都不叫苦。1893年他去上海应县考，松江府复试名列前茅；1899年，在松江府试中更是以第一名的成绩中了秀才。

src/pages/huangyanpei/place/place3.tsx

@@ -178,26 +178,23 @@ const HuangyanpeiPlace3 = () => {
         zIndex={10000}
       >
         <GuideStepsItem speaker="student">
-          川沙小学堂是不是黄炎培先生"教育救国"的第一个试验田啊?还有黄炎培先生是不是就像现在教育这样,也有专业课程、实用课程,也很注重动手能力啊?
+          这所川沙小学堂就是黄炎培先生“教育救国”的第一个试验田吧？我们现在学习的课程有专业课、实习实训课都提倡技能培养，当年他是不是也很注重动手能力呀？
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          你说得特别对！1903年，年仅24岁的黄炎培就和好友张志鹤等人一起，把原来的"观澜书院"改制成"川沙小学堂"，黄炎培出任校长。
+          太有共鸣啦！1903年，24岁的黄炎培先生和好友张志鹤等人一起，把原来的“观澜书院”改成了“川沙小学堂”，他自己当校长。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          学校的课程设置非常大胆创新，首次引入算术、"格致"（也就是现在说的自然科学）、体操、乡土调查等新学科。
+          这所学校的课程表可太有突破性了——破天荒出现了算术、格致（也就是咱们现在说的自然科学）、体操、乡土调查这些新学科，还实行“半天读书、半天做手工”的模式，特别注重实践。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          学校采用"半日读书、半日手工"的模式，特别注重实际应用，这也是中国最早的"半日授课、半日实习"的雏形。
-        </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
-          办学资金紧张，没有钱买课本，黄炎培就亲自带领大家刻蜡板来印刷；没有体育器材，他就带着学生用竹子做成双杠...整个学校完全是凭着满腔热情办起来的！
+          当时办学经费特别紧张，没钱买课本，他就带头刻蜡版油印；缺体育器材，就带着学生用毛竹做单杠，完全是凭着一腔热血办学呢！这也是中国最早的“半日授课、半日实习”雏形。
         </GuideStepsItem>
       </GuideSteps>
 
       {/* 光标3的题目 */}
       <SingleChoiceQuizPanel
         visible={showQuiz3}
-        title='黄炎培1903年把川沙"观澜书院"改成"川沙小学堂"后,课程表首次出现下列哪组学科?'
+        title='【单选】黄炎培1903年把川沙"观澜书院"改成"川沙小学堂"后,课程表首次出现下列哪组学科?'
         options={[
           { value: "A", label: "A. 经学、策论、八股文" },
           {
@@ -208,7 +205,7 @@ const HuangyanpeiPlace3 = () => {
           { value: "D", label: "D. 绘画、声乐、舞蹈、戏剧" },
         ]}
         correctAnswer="B"
-        errorMessage='1903年,黄炎培将"观澜书院"改制为"川沙小学堂",自任校长,率先打破传统经学模式,在课程表中首次列入算术、格致(近代自然科学)、体操和乡土调查四门新学科,并实行"半日授课、半日实习"的教学方式,开创了近代中国小学融入科学、体育与实践教育的新风,因此选项B正确。'
+        errorMessage="1903年，黄炎培将“观澜书院”改制为“川沙小学堂”，自任校长，率先打破传统经学模式，在课程表中首次列入算术、格致（近代自然科学）、体操和乡土调查四门新学科，并实行“半日授课、半日实习”的教学方式，开创了近代中国小学融入科学、体育与实践教育的新风。"
         onSubmit={handleQuiz3Submit}
       />
 
@@ -240,13 +237,19 @@ const HuangyanpeiPlace3 = () => {
           原来当年还有专门的女子学校呀?在那个年代,女孩子能上学是不是特别不容易?后来的浦东中学也是黄炎培先生办的吗?
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          你观察得特别仔细!川沙小学堂开学没多久,黄炎培就和堂兄黄洪培、堂嫂陆开群一起,策划创建了"开群女校"——这所学校专门面向社会招收女学生,还用全力支持办学、腾出自家住房的陆开群名字命名,直接开创了浦东地区女子教育的先河...
+          你观察得特别仔细！川沙小学堂开学没多久，黄炎培就和堂兄黄洪培、堂嫂陆开群一起，策划创建了“开群女学”——这所学校专门面向社会招收女学生，还用全力支持办学、腾出自家住房的陆开群名字命名。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          让很多女孩子有了读书的机会。到了1906年,上海营造业宗师杨斯盛捐资30万两白银,在浦东六里桥购地40多亩创办浦东中学,特意邀请黄炎培担任首任校长。校舍是黄炎培亲自设计的,杨斯盛先生亲自监工...
+          这所学校直接开创了浦东地区女子教育的先河，让很多女孩子有了读书的机会。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢!1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。
+          到了1906年，上海营造业宗师杨斯盛捐资30万两白银，在浦东六里桥购地40多亩创办浦东中学，特意邀请黄炎培担任首任校长。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          校舍是黄炎培亲自设计的，杨斯盛先生亲自监工，建成后有能容纳千人的大礼堂和两座教学楼，是近代上海第一所完全中学呢！
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          1912年，黄炎培担任江苏省署教育司司长，任职期间一直倡导实用主义教育，强调教育要和生产劳动结合起来，这也为后来的职业教育打下了坚实基础。
         </GuideStepsItem>
       </GuideSteps>
     </div>

src/pages/huangyanpei/place/place4.tsx

@@ -35,9 +35,18 @@ const HuangyanpeiPlace4 = () => {
   >(null);
   const [visited, setVisited] = useState<Set<number>>(new Set());
 
+  // 光标1的引导对话状态
+  const [guide1Visible, setGuide1Visible] = useState(false);
+  const [guide1Step, setGuide1Step] = useState(0);
+
   // 光标3、4的引导对话状态（在两者都浏览后显示）
   const [guide34Visible, setGuide34Visible] = useState(false);
   const [guide34Shown, setGuide34Shown] = useState(false);
+
+  // 光标5的引导对话状态
+  const [guide5Visible, setGuide5Visible] = useState(false);
+  const [guide5Step, setGuide5Step] = useState(0);
+
   // 视频显示状态
   const [showVideo, setShowVideo] = useState(false);
   // 题目显示状态
@@ -48,6 +57,15 @@ const HuangyanpeiPlace4 = () => {
 
   const handleOpenExhibit = (index: 1 | 2 | 3 | 4 | 5) => {
     setActiveExhibitId(index);
+    if (index === 1) {
+      setGuide1Step(0);
+      setGuide1Visible(true);
+    }
+
+    if (index === 4) {
+      setGuide5Step(0);
+      setGuide5Visible(true);
+    }
   };
 
   // 监听visited变化，当光标3、4都浏览后显示引导对话
@@ -67,7 +85,7 @@ const HuangyanpeiPlace4 = () => {
   };
 
   const progressCount = visited.size;
-  const total = 5;
+  const total = 4;
   const completed = progressCount >= total;
   const subtitle = completed
     ? "探索黄炎培创立职教(已完成)"
@@ -103,16 +121,17 @@ const HuangyanpeiPlace4 = () => {
 
       {/* 光标1 */}
       <Cursor
-        className="absolute left-42 top-78"
+        className="absolute left-42 top-102"
         onClick={() => handleOpenExhibit(1)}
+        size={1}
         read={visited.has(1)}
       />
       {/* 光标2 */}
-      <Cursor
+      {/* <Cursor
         className="absolute left-40 top-132"
         onClick={() => handleOpenExhibit(2)}
         read={visited.has(2)}
-      />
+      /> */}
       {/* 光标3 */}
       <Cursor
         className="absolute left-125 top-100"
@@ -146,13 +165,13 @@ const HuangyanpeiPlace4 = () => {
       {/* 展品1、2、4出现描述 */}
       <ExhibitOverlay
         visible={activeExhibitId !== null}
-        description={
-          activeExhibitId === 1 ||
-          activeExhibitId === 2 ||
-          activeExhibitId === 4
-            ? "黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。“八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。这期间，1935年中华职业教育社还与荣氏三兄弟合作，在申新三厂办理劳动工自治区，对工人进行文化教育。"
-            : undefined
-        }
+        // description={
+        //   activeExhibitId === 1 ||
+        //   activeExhibitId === 2 ||
+        //   activeExhibitId === 4
+        //     ? "黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。“八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。这期间，1935年中华职业教育社还与荣氏三兄弟合作，在申新三厂办理劳动工自治区，对工人进行文化教育。"
+        //     : undefined
+        // }
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
         onClose={() => {
           if (activeExhibitId !== null) {
@@ -166,7 +185,35 @@ const HuangyanpeiPlace4 = () => {
         }}
       />
 
-      {/* 光标3、4的引导对话 */}
+      {/* 光标1的对话 */}
+      <GuideSteps
+        visible={guide1Visible}
+        currentStep={guide1Step}
+        onStepChange={setGuide1Step}
+        onVisibleChange={(visible) => {
+          setGuide1Visible(visible);
+        }}
+        showMask={false}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          真没想到中华职校还组织过义勇军！我们现在也会参加国防教育、志愿服务，当年的职业教育不仅教技能，还这么注重爱国主义教育呀？
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          没错！黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          1932年“一・二八”事变爆发，黄炎培立刻组织了抗日救国研究会，一边支援前线输送军需，一边维持地方秩序、稳定金融市场，还创办了“一・二八”残废院，专门收容受伤战士和无家可归的难民。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          “八・一三”抗战爆发后，他担任上海抗战后援会主席，组织民众设难民所、医疗队和后方医院，还成立了青年战地服务团，冒着枪林弹雨为前线军队服务。他自己不顾日机轰炸的危险，九次往返南京与上海之间，协助政府募集救国公债。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          正是这样的全民抗敌，粉碎了日军“一个月灭亡中国”的狂妄企图。
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 光标3、5的引导对话 */}
       <GuideSteps
         visible={guide34Visible}
         onVisibleChange={(visible) => {
@@ -176,7 +223,7 @@ const HuangyanpeiPlace4 = () => {
             setShowVideo(true);
           }
         }}
-        showMask={true}
+        showMask={false}
         highlightSelectors={[]}
         zIndex={10000}
       >
@@ -184,16 +231,32 @@ const HuangyanpeiPlace4 = () => {
           职业教育这个词是黄炎培先生创造的吗？
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培与蔡元培、张謇等48位有识之士在上海成立"中华职业教育社"，并发表《宣言》，直指当时教育的问题——"今之教育，为少数人升官发财，非为多数人衣食住行"。
+          这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培联合蔡元培、张謇等48位有识之士，在上海成立了“中华职业教育社”，并发表了《中华职业教育社宣言》。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          1918年，他在上海陆家浜创办中华职业学校。最初开设三个科目：铁工、木工和纽扣制作。招生广告明确写着"免学费、包分配"。首批招收78人，还推出了响亮的口号"双手万能、手脑并用"。
+          1918年，他在上海陆家浜创办中华职业学校，开设铁工、木工、珐琅、纽扣四科，招生广告明确写着“免学费、包分配”。首批招收78人，还推出了响亮的口号“双手万能、手脑并用”。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
           这所学校特别厉害，教室和车间连在一起，学生可以一边学理论，一边练技能。学校铁工厂制作的台钳，后来还成了"国货精品"，甚至在巴拿马万国博览会上拿过金奖呢！
         </GuideStepsItem>
       </GuideSteps>
 
+      {/* 光标4的对话 */}
+      <GuideSteps
+        visible={guide5Visible}
+        currentStep={guide5Step}
+        onStepChange={setGuide5Step}
+        onVisibleChange={(visible) => {
+          setGuide5Visible(visible);
+        }}
+        showMask={false}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="guide">
+          这期间，1935年中华职业教育社还与荣氏三兄弟合作，再申新三厂办理劳动工自治区，对工人进行文化教育。
+        </GuideStepsItem>
+      </GuideSteps>
+
       {/* 视频播放 */}
       {showVideo && (
         <Video
@@ -213,7 +276,7 @@ const HuangyanpeiPlace4 = () => {
       {/* 题目 */}
       <SingleChoiceQuizPanel
         visible={showQuiz}
-        title='中华职业学校首批招生78人,凭借( )口号和"免学费、包分配"的优待,开创了中国近代职业教育的先河。'
+        title={`【单选】中华职业学校首批招生78人,凭借(\xa0\xa0\xa0\xa0)口号和"免学费、包分配"的优待,开创了中国近代职业教育的先河。`}
         options={[
           { value: "A", label: "A. 学而优则仕" },
           { value: "B", label: "B. 双手万能、手脑并用" },
@@ -221,7 +284,7 @@ const HuangyanpeiPlace4 = () => {
           { value: "D", label: "D. 民主科学、救国救民" },
         ]}
         correctAnswer="B"
-        errorMessage='1918年黄炎培在上海创办中华职业学校,首批招78人,以"免学费、包分配"的实惠和"双手万能、手脑并用"的响亮口号,打破"学而优则仕"的传统观念,首设铁工、木工、纽扣科,把课堂与车间合一,开创了中国近代职业教育的先河,因此选B。'
+        errorMessage="1918年黄炎培在上海创办中华职业学校，首批招78人，以“免学费、包分配”的实惠和“双手万能、手脑并用”的响亮口号，打破“学而优则仕”的传统观念，设铁工、木工、珐琅、纽扣科，把课堂与车间合一，开创了中国近代职业教育的先河。"
         onSubmit={handleQuizSubmit}
         zIndex={10001}
       />

src/pages/huangyanpei/place/place5.tsx

@@ -31,8 +31,12 @@ const HuangyanpeiPlace5 = () => {
   const [visited, setVisited] = useState<Set<number>>(new Set());
   const [videoVisible, setVideoVisible] = useState(false);
   const videoRef = useRef<VideoRef>(null);
+  // 光标1的引导对话状态
+  const [guide1Visible, setGuide1Visible] = useState(false);
+  const [guide1Step, setGuide1Step] = useState(0);
   // 展品2视频后的对话引导状态
   const [guideVisible, setGuideVisible] = useState(false);
+  const [guideStep, setGuideStep] = useState(0);
   // 题目显示状态
   const [showQuiz, setShowQuiz] = useState(false);
   // 成功提示状态
@@ -40,10 +44,13 @@ const HuangyanpeiPlace5 = () => {
 
   const handleOpenExhibit = (index: 1 | 2) => {
     if (index === 2) {
-      // 展品2：点击时播放视频，不展示展品
-      setVideoVisible(true);
+      // 展品2：点击时显示对话，再显示视频
+      setGuideStep(0);
+      setGuideVisible(true);
     } else {
       // 展品1：正常展示展品
+      setGuide1Step(0);
+      setGuide1Visible(true);
       setActiveExhibitId(index);
     }
   };
@@ -113,7 +120,7 @@ const HuangyanpeiPlace5 = () => {
         />
       )}
 
-      {/* 展品2视频播放（全屏） */}
+      {/* 对话后显示展品2视频播放（全屏） */}
       {videoVisible && (
         <div className="fixed inset-0 z-[9999] bg-black">
           <Video
@@ -127,8 +134,8 @@ const HuangyanpeiPlace5 = () => {
             showSkipButton
             skipText="跳过"
             onEnded={() => {
-              // 视频结束后显示对话引导
-              setGuideVisible(true);
+              // 对话结束后显示题目
+              setShowQuiz(true);
             }}
           />
         </div>
@@ -136,11 +143,11 @@ const HuangyanpeiPlace5 = () => {
 
       <ExhibitOverlay
         visible={activeExhibitId !== null}
-        description={
-          activeExhibitId === 1
-            ? '1940年,国民党政府还坚持"攘外必先安内"的政策,让国共两党的关系越来越紧张。黄炎培等有识之士看到这种严峻形势,觉得中间派应该联合起来,为国家寻求一条和平发展的道路。于是他联系了张君励、梁漱溟等爱国同仁,后来又联合了第三党和无党派人士,准备成立统一的同盟。刚好这时发生了震惊中外的"皖南事变",国共矛盾进一步激化,黄炎培心里特别着急,就加紧了筹备工作。1941年3月19日,中国民主政团同盟正式成立,参加成立会的有13人,选出了5位常委,黄炎培当选为第一任主席。1945年,他还创立了民主建国会并担任第一任主委,带领大家积极投入"反内战、保和平"的民主斗争,为国家的和平稳定奔走呼号。'
-            : undefined
-        }
+        // description={
+        //   activeExhibitId === 1
+        //     ? '1940年,国民党政府还坚持"攘外必先安内"的政策,让国共两党的关系越来越紧张。黄炎培等有识之士看到这种严峻形势,觉得中间派应该联合起来,为国家寻求一条和平发展的道路。于是他联系了张君励、梁漱溟等爱国同仁,后来又联合了第三党和无党派人士,准备成立统一的同盟。刚好这时发生了震惊中外的"皖南事变",国共矛盾进一步激化,黄炎培心里特别着急,就加紧了筹备工作。1941年3月19日,中国民主政团同盟正式成立,参加成立会的有13人,选出了5位常委,黄炎培当选为第一任主席。1945年,他还创立了民主建国会并担任第一任主委,带领大家积极投入"反内战、保和平"的民主斗争,为国家的和平稳定奔走呼号。'
+        //     : undefined
+        // }
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
         onClose={() => {
           if (activeExhibitId !== null) {
@@ -154,38 +161,68 @@ const HuangyanpeiPlace5 = () => {
         }}
       />
 
-      {/* 展品2视频后的引导对话 */}
+      {/* 光标1的引导对话 */}
+      <GuideSteps
+        visible={guide1Visible}
+        currentStep={guide1Step}
+        onStepChange={setGuide1Step}
+        onVisibleChange={(visible) => {
+          setGuide1Visible(visible);
+        }}
+        showMask={false}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          抗战胜利后，黄炎培先生除了继续推进职业教育，还参与了政党活动呀？他创建民主政团同盟，是想为国家做些什么呢？
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          这和当时的历史背景分不开。1940年，国民党政府还坚持“攘外必先安内”的政策，让国共两党的关系越来越紧张。黄炎培等有识之士看到这种严峻形势，觉得中间派应该联合起来，为国家寻求一条和平发展的道路。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          于是他联系了张君劢、梁漱溟等爱国同仁，后来又联合了第三党和无党派人士，准备成立统一的同盟。刚好这时发生了震惊中外的“皖南事变”，国共矛盾进一步激化，黄炎培心里特别着急，就加紧了筹备工作。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          1941年3月19日，中国民主政团同盟正式成立，参加成立会的有13人，选出了5位常委，黄炎培当选为第一任主席。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          1945年，他还创立了民主建国会并担任第一任主委，带领大家积极投入“反内战、保和平”的民主斗争，为国家的和平稳定奔走呼号。
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 光标2的引导对话 */}
       <GuideSteps
         visible={guideVisible}
+        currentStep={guideStep}
+        onStepChange={setGuideStep}
         onVisibleChange={(visible) => {
           setGuideVisible(visible);
-          // 对话结束后显示题目
+          // 如果对话结束，显示视频
           if (!visible) {
-            setShowQuiz(true);
+            setVideoVisible(true);
           }
         }}
-        showMask={true}
+        showMask={false}
         highlightSelectors={[]}
         zIndex={10000}
       >
         <GuideStepsItem speaker="student">
-          哇!这就是历史课上学的"窑洞对"!黄炎培先生和毛主席的这次谈话,是不是破解了"历史周期率"呀?
+          哇！这就是历史课上学的“窑洞对”！黄炎培先生和毛主席的这次谈话，是不是谈到了“历史周期率”呀？
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          完全正确!1945年7月1日,黄炎培以国民参政员的身份,带着考察团一行六人赴延安考察,中共中央领导人毛泽东、朱德、周恩来等都亲自到机场迎接。7月4日,他和毛泽东主席长谈了十几个小时,这场对话能和诸葛亮的"隆中对"相媲美。
+          完全正确！1945年7月1日，黄炎培以国民参政员的身份，带着考察团一行六人赴延安考察，中共中央领导人毛泽东、朱德、周恩来等都亲自到机场迎接。7月4日，他和毛泽东主席长谈了十几个小时，这场对话能和诸葛亮的“隆中对”相媲美。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          谈话中,黄炎培提出了一个深刻的问题:"其兴也勃焉,其亡也忽焉",也就是历代王朝逃不开的"历史周期率"。毛泽东主席当场回答:"我们已经找到新路,这条新路就是民主。
+          谈话中，黄炎培提出了一个深刻的问题：“其兴也勃焉，其亡也忽焉”，也就是历代王朝逃不开的“历史周期率”。毛泽东主席当场回答：“我们已经找到新路，我们能跳出这周期律，这条新路就是民主。”
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          "后来,黄炎培把这段对话写进了《延安归来》这本书,一夜之间就畅销十万册,成为当时最热门的书籍,而"实行民主"也被大家称为破解历史周期率的"初版答案"。
+          后来，黄炎培把这段对话写进了《延安归来》这本书，一夜之间就畅销十万册，成为当时最热门的书籍，而“实行民主”也被大家称为破解历史周期率的“初版答案”。
         </GuideStepsItem>
       </GuideSteps>
 
       {/* 题目 */}
       <SingleChoiceQuizPanel
         visible={showQuiz}
-        title='《延安归来》中"破解历史周期率"的"初版答案"一夜畅销十万册,其提出的核心对策是( )'
+        title={`【单选】《延安归来》中"破解历史周期率"的"初版答案"一夜畅销十万册,其提出的核心对策是(\xa0\xa0\xa0\xa0)。`}
         options={[
           { value: "A", label: "A. 实行民主" },
           { value: "B", label: "B. 发展经济" },
@@ -193,7 +230,7 @@ const HuangyanpeiPlace5 = () => {
           { value: "D", label: "D. 武装斗争" },
         ]}
         correctAnswer="A"
-        errorMessage='1945年7月,黄炎培在延安向毛泽东提出"其兴也勃焉,其亡也忽焉"的历史周期率之问。毛泽东当即回答:"我们已经找到新路,这条新路就是民主。"黄炎培将这一对话写入《延安归来》,首次公开提出以"民主"破解历代王朝兴衰循环的命题。该书一夜之间畅销十万册,使"实行民主"成为当时社会各界瞩目的"初版答案",故选A。'
+        errorMessage="1945年7月，黄炎培在延安向毛泽东提出“其兴也勃焉，其亡也忽焉”的历史周期率之问。毛泽东回答：“我们已经找到新路，我们能跳出这周期律，这条新路就是民主。”黄炎培将这一对话写入《延安归来》，首次公开提出以“民主”破解历代王朝兴衰循环的命题。该书一夜之间畅销十万册，使“实行民主”成为当时社会各界瞩目的“初版答案”。"
         onSubmit={(value, isCorrect) => {
           if (isCorrect) {
             setVideoVisible(false);
@@ -219,7 +256,6 @@ const HuangyanpeiPlace5 = () => {
           setShowSuccessAlert(false);
         }}
       />
-
     </div>
   );
 };

src/pages/huangyanpei/place/place6.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import {
   ExhibitOverlay,
   Title,
@@ -9,6 +9,7 @@ import {
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
+import { EndingOverlay } from "@/pages/chenyun/reflection/shared/EndingOverlay";
 
 const starName = "huangyanpei";
 
@@ -26,6 +27,12 @@ const HuangyanpeiPlace6 = () => {
   const [visited, setVisited] = useState<Set<number>>(new Set());
   // 对话引导状态
   const [guideVisible, setGuideVisible] = useState(false);
+  // 结束窗口状态
+  const [endingVisible, setEndingVisible] = useState(false);
+  // 是否已经显示过结束窗口（防止重复弹出）
+  const [hasShownEnding, setHasShownEnding] = useState(false);
+
+  const [Leave, setLeave] = useState(false);
 
   const handleOpenExhibit = (index: 1) => {
     // 同时打开展品和对话
@@ -33,6 +40,18 @@ const HuangyanpeiPlace6 = () => {
     setGuideVisible(true);
   };
 
+  // 当 cursor 已浏览后，显示结束窗口（只显示一次）
+  useEffect(() => {
+    if (visited.has(1) && !hasShownEnding && !endingVisible) {
+      // 延迟一下显示，确保展品关闭动画完成
+      const timer = setTimeout(() => {
+        setEndingVisible(true);
+        setHasShownEnding(true);
+      }, 500);
+      return () => clearTimeout(timer);
+    }
+  }, [visited, hasShownEnding, endingVisible]);
+
   const progressCount = visited.size;
   const total = 1;
   const completed = progressCount >= total;
@@ -51,7 +70,7 @@ const HuangyanpeiPlace6 = () => {
       }}
     >
       <Title
-        title="执教传薪"
+        title="职教传薪"
         subtitle={subtitle}
         subtitleClassName={subtitleClassName}
         className="absolute top-10 left-1/2 -translate-x-1/2"
@@ -74,10 +93,10 @@ const HuangyanpeiPlace6 = () => {
         read={visited.has(1)}
       />
 
-      {completed && (
+      {Leave && (
         <Image
           className="absolute bottom-0 right-4"
-          src={getStaticImage("components/place/继续前进")}
+          src={getStaticImage("components/place/离开场景")}
           button
           onClick={() => {
             navigate(`/${moduleName}/${starName}/home`);
@@ -104,7 +123,7 @@ const HuangyanpeiPlace6 = () => {
       <GuideSteps
         visible={guideVisible}
         onVisibleChange={setGuideVisible}
-        showMask={true}
+        showMask={false}
         highlightSelectors={[]}
         zIndex={10000}
       >
@@ -112,7 +131,7 @@ const HuangyanpeiPlace6 = () => {
           新中国成立后,黄炎培先生还继续从事教育工作吗?我们现在的中职教育体系,是不是也有他当年的理念呀?
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          当然啦!1949年10月19日,71岁的黄炎培出任政务院副总理兼轻工业部部长,依然没有放下他毕生追求的职业教育事业。他把中华职教社的骨干力量全部调到北京,亲自起草《关于改革学制的决定》...
+          当然啦!1949年10月19日,71岁的黄炎培出任政务院副总理兼轻工业部部长,依然没有放下他毕生追求的职业教育事业。他把中华职教社的骨干力量全部调到北京,亲自起草《关于改革学制的决定》。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
           第一次把"中等专业学校"正式纳入国家学制,让职业教育有了明确的国家定位。1952年,他又推动建立了上海机械学校、南京航空学校等五所中专,这些学校为国家"一五"计划输送了6.3万名技术工人,为工业发展提供了坚实的人才支撑。
@@ -121,6 +140,18 @@ const HuangyanpeiPlace6 = () => {
           黄炎培先生曾说过:"我要把最后一滴血,滴在职业教育的讲台上。"他用一生践行了这句话,而我们现在中职教育强调的"工学结合、德技并修",正是对他"手脑并用、注重实践"理念的传承和发展。
         </GuideStepsItem>
       </GuideSteps>
+
+      {/* 结束窗口 */}
+      <EndingOverlay
+        visible={endingVisible}
+        text={`从川沙"内史第"的求学少年，到中华职教社的拓荒者，再到新中国职业教育的奠基人，黄炎培先生用一生诠释了"教育救国"的初心。他曾说，教育不是把篮子装满，而是把灯点亮。想知道百年前的少年们，是怎样从懵懂学子，一步步成长为手握技能、心怀家国的青年吗？接下来，请你化身成为一名川沙少年，踏入1903年刚改制的川沙小学堂，跟着黄先生的脚步一路学习，一路成长，亲身体验那段热血又鲜活的青年成长之路吧！`}
+        onContinue={() => {
+          setEndingVisible(false);
+          // 标记为已显示过，防止再次弹出
+          setHasShownEnding(true);
+          setLeave(true);
+        }}
+      />
     </div>
   );
 };