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

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

src/pages/sunzhongshan/internalization.tsx

@@ -118,11 +118,22 @@ const ChenyunInternalization = () => {
   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) {
@@ -298,6 +309,13 @@ const ChenyunInternalization = () => {
         onClick={() => navigate(`/${moduleName}/${starName}/home`)}
       />
 
+      {/* 内化结束后的背景音乐 */}
+      <audio
+        ref={audioRef}
+        src={getPublicPath("audio/letter/2理想.m4a")}
+        loop
+      />
+
       {showVideo && (
         <Video
           ref={videoRef}
@@ -310,6 +328,14 @@ const ChenyunInternalization = () => {
           onEnded={() => {
             setShowVideo(false);
             setPostGuideVisible(true);
+            if (audioRef.current) {
+              audioRef.current.currentTime = 0;
+              audioRef.current
+                .play()
+                .catch((error) => {
+                  console.warn("背景音乐播放失败:", error);
+                });
+            }
           }}
         />
       )}
@@ -366,6 +392,10 @@ const ChenyunInternalization = () => {
       <StudyGuideModal
         visible={showStudyGuide}
         onContinue={() => {
+          if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current.currentTime = 0;
+          }
           setShowStudyGuide(false);
           navigate(`/${moduleName}/${starName}/home`);
         }}

src/pages/sunzhongshan/place/place2.tsx

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

src/pages/sunzhongshan/place/place3.tsx

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

src/pages/sunzhongshan/place/place4.tsx

@@ -30,10 +30,8 @@ const SunzhongshanPlace4 = () => {
     moduleName: string;
   }>();
 
-  // 学习引导弹窗（进入场景即显示）
-  const [showGuideModal, setShowGuideModal] = useState(true);
   // 关闭学习引导后显示的对话（图1）
-  const [showInitialDialog, setShowInitialDialog] = useState(false);
+  const [showInitialDialog, setShowInitialDialog] = useState(true);
   const [initialDialogStep, setInitialDialogStep] = useState(0);
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
   const [visited, setVisited] = useState<Set<number>>(new Set());
@@ -182,23 +180,6 @@ const SunzhongshanPlace4 = () => {
           是的。然而长期操劳国事使得孙中山先生身体抱恙。在生命最后的时间里,他仍在为国奔走,始终未曾停歇。看看这张拍摄于1924年11月17日的照片吧。
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => {
-          setShowGuideModal(false);
-          // 关闭学习引导后显示对话
-          setShowInitialDialog(true);
-        }}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };