feat: 添加音频资源和更新引导对话，提升学习体验

- 在多个场景中引入音频文件，增强互动性和沉浸感。
- 更新引导对话文本，确保信息准确性和一致性。
- 调整组件结构，清理冗余代码，提升可维护性。
- 引入结束窗口，鼓励用户深入了解黄炎培的教育理念。

src/pages/huangyanpei/place/place1.tsx

@@ -7,7 +7,7 @@ import {
   StudyGuideModal,
 } from "@/components";
 import { useNavigate, useParams } from "react-router-dom";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
 import { useState } from "react";
 import Cursor from "@/components/cursor";
 
@@ -119,6 +119,7 @@ const HuangyanpeiPlace1 = () => {
           setShowGuideModal(false);
           setVisible(true);
         }}
+        audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_01.mp3")}
       >
         同学你好，欢迎来到“走进故居·对话”学习模块！{"\n"}
         此刻你正站在黄炎培先生故居门前，接下来就跟着时光的脉络，拆解黄先生人生里五段滚烫的旅程：思想启蒙、教育实践、创立职教、延安对话、职教传薪。准备好一起走进这段炽热的岁月了吗？
@@ -135,12 +136,17 @@ const HuangyanpeiPlace1 = () => {
           }
         }}
         showMask={false}
-        highlightSelectors={[]}
       >
-        <GuideStepsItem speaker="student">
+        <GuideStepsItem
+          speaker="student"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_03.mp3")}
+        >
           小沪，这栋古色古香的江南大院，就是黄炎培先生从小生活、读书的地方吗
         </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_04.mp3")}
+        >
           没错，1878年10月1日，黄炎培先生就出生在当时江苏省川沙县城关镇（现上海市浦东新区川沙镇）的这处“内史第”，宅子原是他外祖父沈树镛家，也是他后来所说的“生于斯、读于斯、长于斯”之地。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
@@ -153,6 +159,7 @@ const HuangyanpeiPlace1 = () => {
         visible={showAfterDialogGuide}
         onContinue={() => setShowAfterDialogGuide(false)}
         ailgn="left"
+        audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_02.mp3")}
       >
         1.场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态。
         {"\n"}

src/pages/huangyanpei/place/place2.tsx

@@ -7,7 +7,7 @@ import {
   GuideStepsItem,
   GuideSteps,
 } from "@/components";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 import { useCursorController } from "@/hooks/useCursorController";
 
@@ -138,10 +138,16 @@ const HuangyanpeiPlace2 = () => {
         highlightSelectors={[]}
         zIndex={10000}
       >
-        <GuideStepsItem speaker="student">
+        <GuideStepsItem
+          speaker="student"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_05.mp3")}
+        >
           哇，这就是南洋公学！是不是现在上海交通大学的前身呀？黄炎培先生中了秀才之后，就来这里读书了吗？
         </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_06.mp3")}
+        >
           你说得特别对！1901年，黄炎培先生考入南洋公学（今上海交通大学）特班，当时的老师正是蔡元培先生。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">

src/pages/huangyanpei/place/place3.tsx

@@ -9,7 +9,7 @@ import {
   SingleChoiceQuizPanel,
 } from "@/components";
 import { SuccessAlert } from "@/components/layout";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 import { useCursorController } from "@/hooks/useCursorController";
 
@@ -186,10 +186,16 @@ const HuangyanpeiPlace3 = () => {
         highlightSelectors={[]}
         zIndex={10000}
       >
-        <GuideStepsItem speaker="student">
+        <GuideStepsItem
+          speaker="student"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_07.mp3")}
+        >
           这所川沙小学堂就是黄炎培先生“教育救国”的第一个试验田吧？我们现在学习的课程有专业课、实习实训课都提倡技能培养，当年他是不是也很注重动手能力呀？
         </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_08.mp3")}
+        >
           太有共鸣啦！1903年，24岁的黄炎培先生和好友张志鹤等人一起，把原来的“观澜书院”改成了“川沙小学堂”，他自己当校长。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
@@ -239,13 +245,18 @@ const HuangyanpeiPlace3 = () => {
         visible={guide12Visible}
         onVisibleChange={setGuide12Visible}
         showMask={true}
-        highlightSelectors={[]}
         zIndex={10000}
       >
-        <GuideStepsItem speaker="student">
+        <GuideStepsItem
+          speaker="student"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_09.mp3")}
+        >
           原来当年还有专门的女子学校呀?在那个年代,女孩子能上学是不是特别不容易?后来的浦东中学也是黄炎培先生办的吗?
         </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_10.mp3")}
+        >
           你观察得特别仔细！川沙小学堂开学没多久，黄炎培就和堂兄黄洪培、堂嫂陆开群一起，策划创建了“开群女学”——这所学校专门面向社会招收女学生，还用全力支持办学、腾出自家住房的陆开群名字命名。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">

src/pages/huangyanpei/place/place4.tsx

@@ -210,10 +210,16 @@ const HuangyanpeiPlace4 = () => {
         showMask={false}
         zIndex={10000}
       >
-        <GuideStepsItem speaker="student">
+        <GuideStepsItem
+          speaker="student"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_13.mp3")}
+        >
           真没想到中华职校还组织过义勇军！我们现在也会参加国防教育、志愿服务，当年的职业教育不仅教技能，还这么注重爱国主义教育呀？
         </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_14.mp3")}
+        >
           没错！黄炎培先生一直怀揣着“教育救国”的理想，职业教育从来都和国家命运紧紧连在一起。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
@@ -241,10 +247,16 @@ const HuangyanpeiPlace4 = () => {
         highlightSelectors={[]}
         zIndex={10000}
       >
-        <GuideStepsItem speaker="student">
+        <GuideStepsItem
+          speaker="student"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_11.mp3")}
+        >
           职业教育这个词是黄炎培先生创造的吗？
         </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_12.mp3")}
+        >
           这个词不是他创造的，但体系是他建立的。1917年5月6日，黄炎培联合蔡元培、张謇等48位有识之士，在上海成立了“中华职业教育社”，并发表了《中华职业教育社宣言》。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
@@ -266,7 +278,10 @@ const HuangyanpeiPlace4 = () => {
         showMask={false}
         zIndex={10000}
       >
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_15.mp3")}
+        >
           这期间，1935年中华职业教育社还与荣氏三兄弟合作，再申新三厂办理劳动工自治区，对工人进行文化教育。
         </GuideStepsItem>
       </GuideSteps>

src/pages/huangyanpei/place/place5.tsx

@@ -182,10 +182,16 @@ const HuangyanpeiPlace5 = () => {
         showMask={false}
         zIndex={10000}
       >
-        <GuideStepsItem speaker="student">
+        <GuideStepsItem
+          speaker="student"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_16.mp3")}
+        >
           抗战胜利后，黄炎培先生除了继续推进职业教育，还参与了政党活动呀？他创建民主政团同盟，是想为国家做些什么呢？
         </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_17.mp3")}
+        >
           这和当时的历史背景分不开。1940年，国民党政府还坚持“攘外必先安内”的政策，让国共两党的关系越来越紧张。黄炎培等有识之士看到这种严峻形势，觉得中间派应该联合起来，为国家寻求一条和平发展的道路。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
@@ -215,10 +221,16 @@ const HuangyanpeiPlace5 = () => {
         highlightSelectors={[]}
         zIndex={10000}
       >
-        <GuideStepsItem speaker="student">
+        <GuideStepsItem
+          speaker="student"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_18.mp3")}
+        >
           哇！这就是历史课上学的“窑洞对”！黄炎培先生和毛主席的这次谈话，是不是谈到了“历史周期率”呀？
         </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_19.mp3")}
+        >
           完全正确！1945年7月1日，黄炎培以国民参政员的身份，带着考察团一行六人赴延安考察，中共中央领导人毛泽东、朱德、周恩来等都亲自到机场迎接。7月4日，他和毛泽东主席长谈了十几个小时，这场对话能和诸葛亮的“隆中对”相媲美。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">

src/pages/huangyanpei/place/place6.tsx

@@ -7,7 +7,7 @@ import {
   GuideSteps,
   GuideStepsItem,
 } from "@/components";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 import { EndingOverlay } from "@/components/overlay/EndingOverlay";
 
@@ -127,10 +127,16 @@ const HuangyanpeiPlace6 = () => {
         highlightSelectors={[]}
         zIndex={10000}
       >
-        <GuideStepsItem speaker="student">
+        <GuideStepsItem
+          speaker="student"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_20.mp3")}
+        >
           新中国成立后,黄炎培先生还继续从事教育工作吗?我们现在的中职教育体系,是不是也有他当年的理念呀?
         </GuideStepsItem>
-        <GuideStepsItem speaker="guide">
+        <GuideStepsItem
+          speaker="guide"
+          audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_21.mp3")}
+        >
           当然啦!1949年10月19日,71岁的黄炎培出任政务院副总理兼轻工业部部长,依然没有放下他毕生追求的职业教育事业。他把中华职教社的骨干力量全部调到北京,亲自起草《关于改革学制的决定》。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
@@ -151,6 +157,8 @@ const HuangyanpeiPlace6 = () => {
           setHasShownEnding(true);
           setLeave(true);
         }}
+        animationSpeed={200}
+        audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_22.mp3")}
       />
     </div>
   );