feat: 更新场景和组件，优化用户体验

- 更新多个场景中的引导对话，提升学习互动性。
- 修改组件以清理不必要的学习引导弹窗，简化用户流程。
- 调整文本内容，确保信息准确性和一致性。
- 添加背景音乐控制，增强沉浸式体验。

src/pages/huangyanpei/internalization.tsx

@@ -153,11 +153,22 @@ const HuangyanpeiInternalization = () => {
   const [showLetter, setShowLetter] = useState(false);
   const [showStudyGuide, setShowStudyGuide] = useState(false);
   const videoRef = useRef<VideoRef>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
 
   useEffect(() => {
     setVisible(true);
   }, []);
 
+  // 组件卸载时清理背景音乐
+  useEffect(() => {
+    return () => {
+      if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+      }
+    };
+  }, []);
+
   const handleVideoCanPlay = () => {
     if (showVideo && videoRef.current) {
       videoRef.current.play().catch((error) => {
@@ -349,6 +360,13 @@ const HuangyanpeiInternalization = () => {
         onClick={() => navigate(`/${moduleName}/${starName}/home`)}
       />
 
+      {/* 内化结束后的背景音乐 */}
+      <audio
+        ref={audioRef}
+        src={getPublicPath("audio/letter/4不忘初心.m4a")}
+        loop
+      />
+
       {showVideo && (
         <Video
           ref={videoRef}
@@ -361,6 +379,14 @@ const HuangyanpeiInternalization = () => {
           onEnded={() => {
             setShowVideo(false);
             setPostGuideVisible(true);
+            if (audioRef.current) {
+              audioRef.current.currentTime = 0;
+              audioRef.current
+                .play()
+                .catch((error) => {
+                  console.warn("背景音乐播放失败:", error);
+                });
+            }
           }}
         />
       )}
@@ -418,6 +444,10 @@ const HuangyanpeiInternalization = () => {
       <StudyGuideModal
         visible={showStudyGuide}
         onContinue={() => {
+          if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current.currentTime = 0;
+          }
           setShowStudyGuide(false);
           navigate(`/${moduleName}/${starName}/home`);
         }}

src/pages/huangyanpei/place/place2.tsx

@@ -4,7 +4,6 @@ import {
   Title,
   Image,
   Cursor,
-  StudyGuideModal,
   GuideStepsItem,
   GuideSteps,
 } from "@/components";
@@ -24,8 +23,6 @@ const HuangyanpeiPlace2 = () => {
     moduleName: string;
   }>();
 
-  // 学习引导弹窗（进入场景即显示）
-  const [showGuideModal, setShowGuideModal] = useState(true);
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
   const [visited, setVisited] = useState<Set<number>>(new Set());
 
@@ -146,19 +143,6 @@ const HuangyanpeiPlace2 = () => {
           可就在这一年，南洋公学发生了著名的“墨水瓶风潮”，他毅然跟着蔡元培先生退学，转入蔡先生创办的中国教育会，正式开启了自己“教育救国”的实践。
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/huangyanpei/place/place3.tsx

@@ -4,7 +4,6 @@ import {
   Title,
   Image,
   Cursor,
-  StudyGuideModal,
   GuideSteps,
   GuideStepsItem,
   SingleChoiceQuizPanel,
@@ -27,8 +26,6 @@ const HuangyanpeiPlace3 = () => {
     moduleName: string;
   }>();
 
-  // 学习引导弹窗（进入场景即显示）
-  const [showGuideModal, setShowGuideModal] = useState(true);
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
     null
   );
@@ -252,19 +249,6 @@ const HuangyanpeiPlace3 = () => {
           建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢!1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/huangyanpei/place/place4.tsx

@@ -4,7 +4,6 @@ import {
   Title,
   Image,
   Cursor,
-  StudyGuideModal,
   GuideSteps,
   GuideStepsItem,
   SingleChoiceQuizPanel,
@@ -31,8 +30,6 @@ const HuangyanpeiPlace4 = () => {
     moduleName: string;
   }>();
 
-  // 学习引导弹窗（进入场景即显示）
-  const [showGuideModal, setShowGuideModal] = useState(true);
   const [activeExhibitId, setActiveExhibitId] = useState<
     1 | 2 | 3 | 4 | 5 | null
   >(null);
@@ -239,19 +236,6 @@ const HuangyanpeiPlace4 = () => {
           setShowSuccessAlert(false);
         }}
       />
-
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/huangyanpei/place/place5.tsx

@@ -5,7 +5,6 @@ import {
   Image,
   Cursor,
   Video,
-  StudyGuideModal,
   GuideSteps,
   GuideStepsItem,
   SingleChoiceQuizPanel,
@@ -32,8 +31,6 @@ const HuangyanpeiPlace5 = () => {
   const [visited, setVisited] = useState<Set<number>>(new Set());
   const [videoVisible, setVideoVisible] = useState(false);
   const videoRef = useRef<VideoRef>(null);
-  // 学习引导弹窗（进入场景即显示）
-  const [showGuideModal, setShowGuideModal] = useState(true);
   // 展品2视频后的对话引导状态
   const [guideVisible, setGuideVisible] = useState(false);
   // 题目显示状态
@@ -223,18 +220,6 @@ const HuangyanpeiPlace5 = () => {
         }}
       />
 
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/huangyanpei/place/place6.tsx

@@ -4,7 +4,6 @@ import {
   Title,
   Image,
   Cursor,
-  StudyGuideModal,
   GuideSteps,
   GuideStepsItem,
 } from "@/components";
@@ -25,8 +24,6 @@ const HuangyanpeiPlace6 = () => {
 
   const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
   const [visited, setVisited] = useState<Set<number>>(new Set());
-  // 学习引导弹窗（进入场景即显示）
-  const [showGuideModal, setShowGuideModal] = useState(true);
   // 对话引导状态
   const [guideVisible, setGuideVisible] = useState(false);
 
@@ -124,19 +121,6 @@ const HuangyanpeiPlace6 = () => {
           黄炎培先生曾说过:"我要把最后一滴血,滴在职业教育的讲台上。"他用一生践行了这句话,而我们现在中职教育强调的"工学结合、德技并修",正是对他"手脑并用、注重实践"理念的传承和发展。
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };