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

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

src/pages/chenyun/internalization.tsx

@@ -42,7 +42,7 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
     id: "quiz-1",
     time: Math.ceil(5.52 * 60), //5.52分钟
     title: "题目1",
-    prompt: "陈云经济思想的核心内容指的是( )。",
+    prompt: "陈云经济思想的核心内容指的是(\xa0\xa0\xa0\xa0)。",
     type: "multiple",
     options: [
       { value: "A", label: "综合平衡", isCorrect: true },
@@ -59,7 +59,7 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
     id: "quiz-2",
     time: Math.ceil(10.01 * 60),
     title: "题目2",
-    prompt: "陈云说过以下哪些话能着重体现出他的经济思想。",
+    prompt: "陈云说过以下哪些话能着重体现出他的经济思想？",
     type: "multiple",
     options: [
       {
@@ -68,10 +68,10 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
         isCorrect: true,
       },
       { value: "B", label: "无农不稳,无粮则乱", isCorrect: true },
-      { value: "C", label: "个人名利淡如水,党的事业重如山。", isCorrect: true },
+      { value: "C", label: "个人名利淡如水,党的事业重如山", isCorrect: true },
       {
         value: "D",
-        label: "领导机关制定政策,要用百分之九十以上的时间作调查研究工作。",
+        label: "领导机关制定政策,要用百分之九十以上的时间作调查研究工作",
         isCorrect: true,
       },
     ],
@@ -80,19 +80,18 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
     id: "quiz-3",
     time: Math.ceil(16.04 * 60),
     title: "题目3",
-    prompt: "我们新时代的青年可以从陈云同志身上学习到哪些精神",
+    prompt: "新时代的青年可以从陈云身上学习到",
     type: "drag",
     options: [
-      { value: "积极的人生态度", label: "积极的人生态度", isCorrect: true },
-      { value: "刻苦的学习精神", label: "刻苦的学习精神", isCorrect: true },
-      { value: "朴素的节俭精神", label: "朴素的节俭精神", isCorrect: true },
-      { value: "实事求是的精神", label: "实事求是的精神", isCorrect: true },
+      { value: "积极的人生态度", label: "A.积极的人生态度", isCorrect: true },
+      { value: "刻苦的学习精神", label: "B.刻苦的学习精神", isCorrect: true },
+      { value: "朴素的节俭精神", label: "C.朴素的节俭精神", isCorrect: true },
+      { value: "实事求是的精神", label: "D.实事求是的精神" },
     ],
     blanks: [
       { id: "blank-1", label: "____" },
       { id: "blank-2", label: "____" },
       { id: "blank-3", label: "____" },
-      { id: "blank-4", label: "____" },
     ],
   },
 ];
@@ -120,11 +119,23 @@ 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(() => {
+    const audio = audioRef.current;
+    return () => {
+      if (audio) {
+        audio.pause();
+        audio.currentTime = 0;
+      }
+    };
+  }, []);
+
   // 视频加载完成后自动播放
   const handleVideoCanPlay = () => {
     if (showVideo && videoRef.current) {
@@ -179,9 +190,8 @@ const ChenyunInternalization = () => {
                   <DragQuizPanel
                     visible={activeSuccess !== item.id}
                     zIndex={10000}
-                    title={`${item.title}（拖拽）`}
-                    questionPrefix={`${item.prompt}(`}
-                    questionSuffix=")?"
+                    questionPrefix={`【拖拽】${item.prompt}`}
+                    questionSuffix="等精神。（ABC）"
                     options={item.options.map((opt) => ({
                       value: opt.value,
                       label: opt.label,
@@ -232,7 +242,7 @@ const ChenyunInternalization = () => {
                 <MultipleChoiceQuizPanel
                   visible={activeSuccess !== item.id}
                   zIndex={10000}
-                  title={`${item.title}（多选题）：${item.prompt}`}
+                  title={`【多选】${item.prompt}`}
                   options={item.options.map((opt) => ({
                     value: opt.value,
                     label: `${opt.value}. ${opt.label}`,
@@ -282,6 +292,7 @@ const ChenyunInternalization = () => {
       successContent,
       dragQuizValues,
       dragQuizErrors,
+      triggerPuzzleAnimation,
     ]
   );
 
@@ -302,6 +313,13 @@ const ChenyunInternalization = () => {
         onClick={() => navigate(`/${moduleName}/${starName}/home`)}
       />
 
+      {/* 内化结束后的背景音乐 */}
+      <audio
+        ref={audioRef}
+        src={getPublicPath("audio/letter/8如愿.m4a")}
+        loop
+      />
+
       {showVideo && (
         <Video
           ref={videoRef}
@@ -314,6 +332,12 @@ const ChenyunInternalization = () => {
           onEnded={() => {
             setShowVideo(false);
             setPostGuideVisible(true);
+            if (audioRef.current) {
+              audioRef.current.currentTime = 0;
+              audioRef.current.play().catch((error) => {
+                console.warn("背景音乐播放失败:", error);
+              });
+            }
           }}
         />
       )}
@@ -337,7 +361,7 @@ const ChenyunInternalization = () => {
           他用“全国一盘棋”思路化解危机的案例太震撼了，那你能再跟我讲讲，支撑这些成就的核心经济思想是什么吗？
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          针对你的这个问题，今天我们有幸邀请到了中国中共党史学会理事，全国陈云思想生平研究会常务理事兼副秘书长，中共一大纪念馆陈列研究部主任，研究馆员房中老师。关于你的问题，我想房老师会给你指点迷津！...
+          针对你的这个问题，今天我们有幸邀请到了中国中共党史学会理事，全国陈云思想生平研究会常务理事兼副秘书长，中共一大纪念馆陈列研究部主任，研究馆员房中老师。关于你的问题，我想房老师会给你指点迷津！
         </GuideStepsItem>
       </GuideSteps>
 
@@ -355,13 +379,13 @@ const ChenyunInternalization = () => {
         zIndex={60}
       >
         <GuideStepsItem speaker="student">
-          听完房主任的讲解，从陈云爷爷童年成长的水乡故居，到他主持"银元之战""米棉之战"的史料，再到那台称量粮食的天平、握不住的铅笔头，我真切感受到他"不唯上、不唯书、只唯实"的精神，也懂了他"为老百姓做事"的初心...
+          感谢房老师的讲解！从陈云童年成长的水乡故居，到他主持"银元之战""米棉之战"的史料，再到那台称量粮食的天平、握不住的铅笔头，我真切感受到他"不唯上、不唯书、只唯实"的精神，也懂了他"为老百姓做事"的初心。
         </GuideStepsItem>
         <GuideStepsItem speaker="student">
           这些都让我特别受触动！
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          你的感悟很深刻！陈云同志用一生诠释了"务实"和"为人民服务"——从破解沿海地区经济困境，到掌管国家工业化蓝图，再到改革开放时力挺轻纺、钢铁建设支援，每一步都扎根实际、心系百姓。
+          你的感悟很深刻！陈云同志用一生诠释了“务实”与“为民”——从破解边区经济困境，到擘画国家工业化蓝图，再到改革开放时力挺宝钢建设，每一步都扎根实际、心系百姓。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
           你不妨把这份触动凝练成几句心里话，既总结参观的收获，也想想未来该如何践行这份精神，用自己的行动传承这份初心吧！
@@ -382,6 +406,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/chenyun/place/place1.tsx

@@ -163,11 +163,11 @@ const ChenyunPlace1 = () => {
           setVisible(true);
         }}
       >
-        同学你好，欢迎来到走进故居-对话学习模块！{"\n"}
-        进入陈云故居后，我们一起来了解陈云同志经历的7个阶段：“水乡少年
-        艰辛成长”、“商务启航 投身革命”、“苏区淬炼 崭露头角”、“延安担当
-        经济破局”、“恢复时期 经济奠基”、“建设时期 务实兴邦”、“改革浪潮
-        擘画实业”。
+        同学你好，欢迎来到“走进故居·对话”学习模块！{"\n"}
+        此刻你正站在陈云同志的故居堂屋里，接下来请跟着时光的脚步，
+        一起翻开他人生的7帧珍贵篇章：水乡少年·艰辛成长、商务启航·投身革命、
+        苏区淬炼·崭露头角、延安担当·经济破局、恢复时期·经济奠基、建设时期·务实兴邦、
+        改革浪潮·擘画实业。准备好一起走进这段滚烫的岁月了吗？
       </StudyGuideModal>
 
       {/* 学习说明对话框 */}

src/pages/chenyun/place/place4.tsx

@@ -6,7 +6,6 @@ import {
   Cursor,
   GuideSteps,
   GuideStepsItem,
-  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -46,8 +45,6 @@ const ChenyunPlace4 = () => {
   // 展品2的引导对话
   const [guideVisible2, setGuideVisible2] = useState(false);
   const [guideStep2, setGuideStep2] = useState(0);
-  // 学习引导弹窗
-  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (index: 1 | 2) => {
     if (index === 1) {
@@ -197,19 +194,6 @@ const ChenyunPlace4 = () => {
           陈云提议建立合作社，广泛吸收失业工人加入，多听取工人建议、增强企业管理的民主性，从而更好地建设苏区经济。这些做法为他日后主持全国财经工作积累了宝贵经验。
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导 */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place5.tsx

@@ -5,7 +5,6 @@ import {
   Image,
   Cursor,
   Video,
-  StudyGuideModal,
   GuideSteps,
   GuideStepsItem,
 } from "@/components";
@@ -51,8 +50,6 @@ const ChenyunPlace5 = () => {
   const visitedExhibits = getVisitedExhibits(place);
   const visited = new Set(visitedExhibits);
   const [videoVisible3, setVideoVisible3] = useState(false);
-  // 学习引导弹窗
-  const [showGuideModal, setShowGuideModal] = useState(true);
 
   // 展品1引导对话
   const [guideVisible, setGuideVisible] = useState(false);
@@ -196,19 +193,6 @@ const ChenyunPlace5 = () => {
           setActiveExhibitId(null);
         }}
       />
-
-      {/* 学习引导 */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place6.tsx

@@ -6,7 +6,6 @@ import {
   Cursor,
   GuideSteps,
   GuideStepsItem,
-  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -41,8 +40,6 @@ const ChenyunPlace6 = () => {
   const visited = new Set(visitedExhibits);
   const [guideVisible, setGuideVisible] = useState(false);
   const [guideStep, setGuideStep] = useState(0);
-  // 学习引导弹窗
-  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = () => {
     // 展品1：点击时同时打开展品和引导对话，从第1步开始
@@ -147,19 +144,6 @@ const ChenyunPlace6 = () => {
           陈云挂帅后的首仗就是打击投机、平抑物价。通过“银元之战”“两白一黑”战役等几次严峻斗争，只用不到一年时间，就迅速稳定了金融物价。
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导 */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place7.tsx

@@ -10,7 +10,6 @@ import {
   type SingleChoiceOption,
   type DragFillResult,
   SingleChoiceQuizPanel,
-  StudyGuideModal,
 } from "@/components";
 import { SuccessAlert, DragQuizPanel } from "@/components/layout";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
@@ -92,8 +91,6 @@ const ChenyunPlace7 = () => {
   const [successAlertContent, setSuccessAlertContent] = useState<string>("");
   // 标记拖拽题是否已完成
   const [quiz2Completed, setQuiz2Completed] = useState(false);
-  // 学习引导弹窗
-  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (_index: 1) => {
     // 如果本场景学习已完成（拖拽题已答对），不再响应点击，避免重复播放
@@ -282,7 +279,7 @@ const ChenyunPlace7 = () => {
       <SingleChoiceQuizPanel
         visible={quizVisible}
         zIndex={10002}
-        title={`题目1（单选题）：1949年6月，中共中央指示打击银元投机活动，金条、银元一律由人民银行挂牌收兑，铁路交通事业，税收一律收人民币。同时，上海军管会查封了证券大楼。这次“银元之战”(\xa0\xa0\xa0\xa0)。`}
+        title={`【单选】1949年6月，中共中央指示打击银元投机活动，金条、银元一律由人民银行挂牌收兑，铁路交通事业，税收一律收人民币。同时，上海军管会查封了证券大楼。这次“银元之战”(\xa0\xa0\xa0\xa0)。`}
         options={QUIZ1_OPTIONS}
         correctAnswer={"B"}
         errorMessage={quizError}
@@ -347,8 +344,7 @@ const ChenyunPlace7 = () => {
       <DragQuizPanel
         visible={quiz2Visible}
         zIndex={10012}
-        title="题目2（拖拽）"
-        questionPrefix='新中国成立后，为了稳定物价，中央政府组织了"两白一黑"的集中调运，"两白一黑"指的是（'
+        questionPrefix='【拖拽】新中国成立后，为了稳定物价，中央政府组织了"两白一黑"的集中调运，"两白一黑"指的是（'
         questionSuffix="）。"
         options={QUIZ2_OPTIONS}
         blanks={QUIZ2_BLANKS}
@@ -399,19 +395,6 @@ const ChenyunPlace7 = () => {
           />
         </div>
       )}
-
-      {/* 学习引导 */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place8.tsx

@@ -6,7 +6,6 @@ import {
   Cursor,
   GuideSteps,
   GuideStepsItem,
-  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -45,8 +44,6 @@ const ChenyunPlace8 = () => {
   const [guideStep, setGuideStep] = useState(0);
   const [guideVisible2, setGuideVisible2] = useState(false);
   const [guideStep2, setGuideStep2] = useState(0);
-  // 学习引导弹窗
-  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (index: 1 | 2) => {
     setActiveExhibitId(index);
@@ -200,19 +197,6 @@ const ChenyunPlace8 = () => {
           第一个五年计划纲要草案的重点是优先发展重工业，特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障，通过“统购统销”稳定粮价，为重点工程项目筑牢根基，亲手铺就了我国工业化的起步之路。
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导 */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place9.tsx

@@ -7,7 +7,6 @@ import {
   Video,
   GuideSteps,
   GuideStepsItem,
-  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -48,8 +47,6 @@ const ChenyunPlace9 = () => {
   // 对话引导状态
   const [guideVisible, setGuideVisible] = useState(false);
   const [guideStep, setGuideStep] = useState(0);
-  // 学习引导弹窗
-  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (_index: 1) => {
     // 展品1：播放视频
@@ -182,19 +179,6 @@ const ChenyunPlace9 = () => {
           setActiveExhibitId(null);
         }}
       />
-
-      {/* 学习引导 */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/reflection/constants.tsx

@@ -6,9 +6,9 @@ import type { ClueData } from "@/components/layout";
 export const starName = "chenyun";
 
 // 欢迎语文案（使用 StudyGuideModal 展示）
-export const WELCOME_TEXT = `同学你好，欢迎来到跨越时空-体悟学习模块！
-
-我们即将跨越时空，穿越到"银元之战"和"米棉之战"两个沉浸式场景，来感受陈云同志在1949年的上海是如何应对当时混乱的经济秩序的。`;
+export const WELCOME_TEXT = `同学你好，欢迎来到“跨越时空·体悟”学习模块！
+请登陆“时空回溯・亲历时代”体验仓，下一站：1949，上海。
+你将扎进“银元之战”的旋涡，踏过“米棉之战”的浪潮，以陈云同志特派员的身份体验陈云如何以智破局，稳稳托住这座城的经济天平。时空门已开，准备好入戏了吗？`;
 
 // 视频配置
 export const VIDEO_CONFIG = {

src/pages/chenyun/reflection/constants/mimian.ts

@@ -25,8 +25,8 @@ export const MIMIAN_CLUE_DATA: Record<
   "mimian-intelligence": {
     type: "text",
     title: "投机商情报",
-    content: `申新财团囤积棉纱3万件,
-      扬言"控制纱布就能控制上海"。`,
+    content: `申新财团囤积棉纱3万件
+      扬言"控制纱布就能控制上海"`,
   },
   // 米棉之战 - 全国物资分布
   "mimian-distribution": {

src/pages/chenyun/reflection/constants/yinyuan.tsx

@@ -25,10 +25,10 @@ export const YINYUAN_CLUE_DATA: Record<
   "yinyuan-clue1": {
     type: "text",
     title: "线索一",
-    content: `沪市银元价格连日暴涨,
-      5月27日一块银元值100人民币,
-      6月3日涨到720元,
-      6月4日涨到1100元。`,
+    content: `沪市银元价格连日暴涨
+      5月27日一块银元值100人民币
+      6月3日涨到720元
+      6月4日涨到1100元`,
   },
   // 银元之战 - 线索2
   "yinyuan-clue2": {

src/pages/chenyun/reflection/index.tsx

@@ -4,10 +4,11 @@
  */
 import { Image, StudyGuideModal } from "@/components";
 import ErrorAlert from "@/components/layout/alert/error-alert";
+import TitleAlert from "@/components/layout/alert/title-alert";
 import ClueOverlay from "@/components/layout/clue";
 import type { ClueData } from "@/components/layout";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { WELCOME_TEXT, starName } from "./constants";
 import { useClueStates } from "./shared/useClueStates";
@@ -66,6 +67,9 @@ const ChenyunReflection = () => {
   /** 米棉之战解锁错误提示 */
   const [showMimianLockError, setShowMimianLockError] = useState(false);
 
+  /** 银元之战视频前的引导弹窗 */
+  const [showPreYinyuanAlert, setShowPreYinyuanAlert] = useState(false);
+
   // ========== 线索状态管理 ==========
   const {
     clueStates,
@@ -74,8 +78,8 @@ const ChenyunReflection = () => {
     markClueAsViewed,
   } = useClueStates();
 
-  // ========== 银元之战状态（从 store 获取） ==========
-  const { isYinyuanSolved } = useChenyunStore();
+  // ========== 银元之战和米棉之战状态（从 store 获取） ==========
+  const { isYinyuanSolved, isMimianSolved } = useChenyunStore();
 
   // ========== 事件处理函数 ==========
 
@@ -96,7 +100,13 @@ const ChenyunReflection = () => {
       return;
     }
 
-    // 播放对应视频
+    // 银元之战：先弹出引导，再播放视频
+    if (fileType === "yinyuan") {
+      setShowPreYinyuanAlert(true);
+      return;
+    }
+
+    // 其他文件（如米棉之战）直接播放视频
     setPlayingVideo(fileType);
   };
 
@@ -218,9 +228,15 @@ const ChenyunReflection = () => {
           expandedFile={expandedFile}
           isAllViewed={isYinyuanAllViewed}
           clueStates={clueStates}
+          isMimianSolved={isMimianSolved}
           onFileClick={() => handleFileClick("yinyuan")}
           onClueClick={handleClueClick}
           onPlayVideo={(fileType) => {
+            // 播放银元之战视频前，先弹出标题提示
+            if (fileType === "yinyuan") {
+              setShowPreYinyuanAlert(true);
+              return;
+            }
             setPlayingVideo(fileType);
           }}
         />
@@ -281,6 +297,17 @@ const ChenyunReflection = () => {
         onMaskClick={() => setShowMimianLockError(false)}
       />
 
+      {/* 银元之战视频前的标题提示弹窗 */}
+      <TitleAlert
+        visible={showPreYinyuanAlert}
+        title=""
+        subtitle="1949年5月，上海解放。"
+        onClose={() => {
+          setShowPreYinyuanAlert(false);
+          setPlayingVideo("yinyuan");
+        }}
+      />
+
       {/* 视频处理组件 */}
       <VideoHandler
         playingVideo={playingVideo}

src/pages/chenyun/reflection/mimian/MimianBattle.tsx

@@ -87,20 +87,8 @@ export const MimianBattle = ({
       state.setMimianSuccessAlertContent(
         `恭喜你,选择正确!结合当时市场情况,陈云同志在会上做出了"全国一盘棋"的指示。全国统筹调运粮食、棉花、煤炭填补缺口,筑牢物资基础。关键节点集中抛售,让跟风囤货的投机商无力承接,因亏本和高利贷纷纷破产,快速平抑物价、稳固人民币地位。`
       );
-    } else {
-      // 根据选项显示不同的错误信息
-      if (value === "A") {
-        state.setShowMimianSuccessAlert(true);
-        state.setMimianSuccessAlertContent(
-          "很抱歉,你选错了!当时物价上涨已波及多地区,局部限购无法阻止投机商转移物资炒作。上海米、棉依赖外部供应,本地物资匮乏,限购既不解决缺口,还会加剧民众恐慌,扰乱市场秩序。请你再思考一下吧!"
-        );
-      } else if (value === "B") {
-        state.setShowMimianSuccessAlert(true);
-        state.setMimianSuccessAlertContent(
-          "很抱歉,你选错了!当时国民党滥发货币导致的贬值阴影未消,民众对新货币缺乏信任。此时增发人民币,会使货币供应量远超物资总量,重蹈贬值覆辙,削弱人民币信用,让投机气焰更盛。请你再思考一下吧!"
-        );
-      }
     }
+    // 选错时，错误信息已经在题目面板中通过 onWrongSelect 显示，不需要额外的 SuccessAlert
   };
 
   // 处理成功提示框2继续

src/pages/chenyun/reflection/mimian/MimianQuizzes.tsx

@@ -2,8 +2,9 @@
  * 米棉之战题目组件
  * 包含单选题1-5、旁白1-3、成功提示框、结束语
  */
-import { Narration, SingleChoiceQuizPanel, StudyGuideModal } from "@/components";
+import { Narration, SingleChoiceQuizPanel } from "@/components";
 import SuccessAlert from "@/components/layout/alert/success-alert";
+import { EndingOverlay } from "../shared/EndingOverlay";
 
 export interface MimianQuizzesProps {
   /** 是否显示单选题1 */
@@ -97,7 +98,7 @@ export const MimianQuizzes = ({
       {/* 米棉之战 - 单选题1（图1） */}
       <SingleChoiceQuizPanel
         visible={showQuiz1}
-        title='（单选题）投机商集中冲击"两白一黑"的核心目的是( )。'
+        title={`（单选）投机商集中冲击"两白一黑"的核心目的是(\xa0\xa0\xa0\xa0)。`}
         options={[
           { value: "A", label: "A. 满足市场需求" },
           { value: "B", label: "B. 扰乱经济秩序、动摇政权" },
@@ -109,16 +110,14 @@ export const MimianQuizzes = ({
 
       {/* 米棉之战 - 成功提示框1 */}
       <SuccessAlert
-        visible={
-          showSuccessAlert && successAlertContent === "恭喜你,选择正确!"
-        }
+        visible={showSuccessAlert && successAlertContent === "恭喜你,选择正确!"}
         title="恭喜你,选择正确!"
         onContinue={onSuccessAlert1Continue}
       />
 
       {/* 米棉之战 - 旁白1（图2） */}
       <Narration
-        text="为了打击投机资本势力,面对上海米价、纱价等上涨,又同时影响到整个华东和华北、中南等地的情况。陈云于1949年7月17日率领中财委抵达上海,开展了一系列的举措,7月27日至8月15日,陈云主持召开了华东、华北、华中、东北、西北5个大区的财经会议,商讨解决上海和全国面临的严峻经济形势问题和对策。"
+        text="为了打击投机资本势力,面对上海米价、纱价等上涨,又同时影响到整个华东和华北、中南等地的情况,陈云于1949年7月17日率领中财委抵达上海,展开了一系列的举措,7月27日至8月15日,陈云主持召开了华东、华北、华中、东北、西北5个大区的财经会议,商讨解决上海和全国面临的严峻经济形势问题和对策。"
         visible={showNarration1}
         onClose={onNarration1Close}
         enableAnimation={false}
@@ -127,22 +126,26 @@ export const MimianQuizzes = ({
       {/* 米棉之战 - 单选题2（图3） */}
       <SingleChoiceQuizPanel
         visible={showQuiz2}
-        title="（单选题）你觉得此时解决上海和全国面临的严峻经济形势问题的对策应该是( )。"
+        title={`（单选）你觉得此时解决上海和全国面临的严峻经济形势问题的对策应该是(\xa0\xa0\xa0\xa0)。`}
         options={[
           { value: "A", label: "A. 局部限购" },
           { value: "B", label: "B. 增发货币" },
           { value: "C", label: "C. 全国调运+集中抛售" },
         ]}
         correctAnswer="C"
-        errorMessage="很抱歉,你选错了!请你再思考一下吧!"
+        onWrongSelect={(value) => {
+          if (value === "A") {
+            return "很抱歉，你选错了！当时物价上涨已波及多地区，局部限购无法阻止投机商转移物资炒作。上海米、棉依赖外部供应，本地物资匮乏，限购既不解决缺口，还会加剧民众恐慌，扰乱市场秩序。请你再思考一下吧！";
+          } else if (value === "B") {
+            return "很抱歉，你选错了！当时国民党滥发货币导致的贬值阴影未消，民众对新货币缺乏信任。此时增发人民币，会使货币供应量远超物资总量，重蹈贬值覆辙，削弱人民币信用，让投机气焰更盛。请你再思考一下吧！";
+          }
+        }}
         onSubmit={onQuiz2Submit}
       />
 
       {/* 米棉之战 - 成功提示框2（单选题2答对后） */}
       <SuccessAlert
-        visible={
-          showSuccessAlert && successAlertContent.includes("全国一盘棋")
-        }
+        visible={showSuccessAlert && successAlertContent.includes("全国一盘棋")}
         title="恭喜你,选择正确!"
         content={successAlertContent}
         onContinue={onSuccessAlert2Continue}
@@ -254,11 +257,11 @@ export const MimianQuizzes = ({
           {
             value: "A",
             label:
-              "A:突然性、连续性大量抛售。在全国各地同时行动,上海、武汉、西安等地国营公司连续降价抛售粮棉,不给投机资本喘息之机",
+              "A.突然性、连续性大量抛售,在全国各地同时行动,上海、武汉、西安等地国营公司连续降价抛售粮棉,不给投机资本喘息之机",
           },
           {
             value: "B",
-            label: `B:逐步降价,配合舆论引导,每日小幅降价,并通过报纸宣传政府物资充足,试图"劝退"投机商`,
+            label: `B.逐步降价,配合舆论引导,每日小幅降价,并通过报纸宣传政府物资充足,试图"劝退"投机商`,
           },
         ]}
         correctAnswer="A"
@@ -286,14 +289,14 @@ export const MimianQuizzes = ({
         }}
       />
 
-      {/* 米棉之战 - 旁白5（结束语）改用 StudyGuideModal 展示 */}
-      <StudyGuideModal
+      {/* 米棉之战 - 旁白5（结束语）使用统一结语覆盖层组件 */}
+      <EndingOverlay
         visible={showNarration5}
         onContinue={onNarration5Continue}
-      >
-        从"银元之战"查封投机枢纽、稳固人民币根基,到"米棉之战"全国统筹调运、集中抛售击溃投机势力,这场经济战线的"淮海战役",不仅平定了物价、安定了民心,更印证了"全国一盘棋"的战略智慧与制度优势。当市场秩序重归稳定,新生政权在经济领域站稳脚跟,这份由陈云同志等老一辈革命家铸就的治理经验,也为新时代经济建设埋下了思想伏笔,等待我们在传承中探索新的实践路径。
-      </StudyGuideModal>
+        text={
+          '从"银元之战"查封投机枢纽、稳固人民币根基,到"米棉之战"全国统筹调运、集中抛售击溃投机势力,这场经济战线的"淮海战役",不仅平定了物价、安定了民心,更印证了"全国一盘棋"的战略智慧与制度优势。当市场秩序重归稳定,新生政权在经济领域站稳脚跟,这份由陈云同志等老一辈革命家铸就的治理经验,也为新时代经济建设埋下了思想伏笔,等待我们在传承中探索新的实践路径。'
+        }
+      />
     </>
   );
 };
-

src/pages/chenyun/reflection/shared/ClueItem.tsx

@@ -65,7 +65,15 @@ export const ClueItem = ({
         <div
           className="absolute left-1/2 -translate-x-1/2 bottom-0"
           style={{
-            marginLeft: viewedMarkOffset.left || (clueKey === "yinyuan-clue1" || clueKey === "yinyuan-clue2" ? "20px" : clueKey === "mimian-intelligence" ? "4px" : clueKey === "mimian-distribution" ? "12px" : "0"),
+            marginLeft:
+              viewedMarkOffset.left ||
+              (clueKey === "yinyuan-clue1" || clueKey === "yinyuan-clue2"
+                ? "20px"
+                : clueKey === "mimian-intelligence"
+                ? "4px"
+                : clueKey === "mimian-distribution"
+                ? "12px"
+                : "0"),
             bottom: viewedMarkOffset.bottom || (type === "phone" ? "0" : "0"),
           }}
         >
@@ -83,4 +91,3 @@ export const ClueItem = ({
     </div>
   );
 };
-

src/pages/chenyun/reflection/shared/EndingOverlay.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useState } from "react";
+import { getStaticImage } from "@/lib/utils";
+
+export interface EndingOverlayProps {
+  /** 是否可见 */
+  visible: boolean;
+  /** 中间显示的文本内容 */
+  text: string;
+  /** 点击继续回调 */
+  onContinue: () => void;
+  /** 文字动画速度（毫秒/字），默认 60ms */
+  animationSpeed?: number;
+}
+
+/**
+ * 反思模块统一的结语覆盖层
+ * 使用 components/overlay/bg 作为背景
+ */
+export const EndingOverlay = ({
+  visible,
+  text,
+  onContinue,
+  animationSpeed = 60,
+}: EndingOverlayProps) => {
+  const [displayedText, setDisplayedText] = useState("");
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  // 文字逐字动画
+  useEffect(() => {
+    if (!visible) {
+      setDisplayedText("");
+      setIsAnimating(false);
+      return;
+    }
+
+    let currentIndex = 0;
+    setDisplayedText("");
+    setIsAnimating(true);
+
+    const timer = setInterval(() => {
+      if (currentIndex < text.length) {
+        setDisplayedText(text.slice(0, currentIndex + 1));
+        currentIndex++;
+      } else {
+        setIsAnimating(false);
+        clearInterval(timer);
+      }
+    }, animationSpeed);
+
+    return () => clearInterval(timer);
+  }, [visible, text, animationSpeed]);
+
+  // 全部文字出现后 1 秒自动关闭
+  useEffect(() => {
+    if (!visible) return;
+    if (isAnimating) return;
+    if (!text || displayedText !== text) return;
+
+    const timer = setTimeout(() => {
+      onContinue();
+    }, 800);
+
+    return () => clearTimeout(timer);
+  }, [visible, isAnimating, displayedText, text, onContinue]);
+
+  if (!visible) return null;
+
+  return (
+    <div className="fixed inset-0 z-[10000] flex items-center justify-center bg-transparent">
+      {/* 文本内容层 */}
+      <div
+        className="relative z-10 flex items-center  max-w-8xl py-50 px-24 h-[825px] bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `url(${getStaticImage("components/overlay/bg")})`,
+        }}
+      >
+        <div className="text-4xl leading-relaxed text-[#7b3f00] font-semibold tracking-wide">
+          {displayedText}
+        </div>
+
+        {/* 底部渐隐提示条，仅做视觉平衡 */}
+        {/* <div className="mt-16 h-4 w-full bg-gradient-to-r from-transparent via-[rgba(0,0,0,0.35)] to-transparent rounded-full" /> */}
+      </div>
+    </div>
+  );
+};

src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx

@@ -21,6 +21,8 @@ export interface YinyuanBattleProps {
   isAllViewed: boolean;
   /** 线索状态 */
   clueStates: Record<string, boolean>;
+  /** 米棉之战是否已解决 */
+  isMimianSolved: boolean;
   /** 文件点击回调 */
   onFileClick: () => void;
   /** 线索点击回调 */
@@ -37,6 +39,7 @@ export const YinyuanBattle = ({
   expandedFile,
   isAllViewed,
   clueStates,
+  isMimianSolved,
   onFileClick,
   onClueClick,
   onPlayVideo,
@@ -45,6 +48,18 @@ export const YinyuanBattle = ({
   const { triggerPuzzleAnimation } = usePuzzleAnimation();
   const { isPuzzleUnlocked } = usePuzzleStore();
 
+  // 当米棉之战解决后，隐藏银元之战的走势图
+  useEffect(() => {
+    if (isMimianSolved) {
+      state.setShowTrendChartIcon(false);
+      // 如果 guide2 正在显示，也关闭它
+      if (state.showGuide2) {
+        state.setShowGuide2(false);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isMimianSolved]);
+
   // 监听"前往解决"按钮出现的条件，显示第一个提示
   useEffect(() => {
     const shouldShowGuide1 =
@@ -77,11 +92,13 @@ export const YinyuanBattle = ({
   ]);
 
   // 监听走势图图标出现的条件，显示第二个提示
+  // 注意：如果米棉之战已解决，则不显示走势图提示
   useEffect(() => {
     const shouldShowGuide2 =
       state.isYinyuanSolved &&
       state.showTrendChartIcon &&
-      !state.hasShownGuide2;
+      !state.hasShownGuide2 &&
+      !isMimianSolved; // 米棉之战解决后不再显示提示
 
     if (shouldShowGuide2) {
       // 延迟一下，确保走势图已经渲染
@@ -97,6 +114,7 @@ export const YinyuanBattle = ({
     state.hasShownGuide2,
     state.setShowGuide2,
     state.setHasShownGuide2,
+    isMimianSolved,
   ]);
 
   // 监听走势图大图打开的条件，显示第三个提示
@@ -125,7 +143,7 @@ export const YinyuanBattle = ({
       // 关闭多选题1，显示旁白文字（图2）
       state.setShowQuiz1(false);
       state.setNarration2Text(
-        `六月五日,上海政府抛出十万银元,力图以银元制服银元,使价格回跌。全市举行了"反对银元投机,保障人民生活"的游行和宣传。上海市军委会主任陈毅在全市集会上警告投机奸商"赶快洗手不干,否则勿谓言之不预"。但这两手收效仍微。十万银元被投机商人一吸而空,六月七日银元每元的价格涨到一千八百元人民币。陈云同志判断:'单纯的经济手段已不足以震慑敌人,必须辅以坚定的行政与法律手段。`
+        `六月五日,上海政府抛出十万银元,力图以银元制服银元,使价格回跌。全市举行了"反对银元投机,保障人民生活"的游行和宣传。上海市军委会主任陈毅在全市集会上警告投机奸商"赶快洗手不干,否则勿谓言之不预"。但这两手收效仍微。十万银元被投机商人一吸而空,六月七日银元每元的价格涨到一千八百元人民币。陈云同志判断:"单纯的经济手段已不足以震慑敌人,必须辅以坚定的行政与法律手段。"`
       );
       state.setShowNarration2(true);
     }

src/pages/chenyun/reflection/yinyuan/YinyuanQuizzes.tsx

@@ -46,7 +46,7 @@ export const YinyuanQuizzes = ({
       {/* 多选题1 - 点击引导图标后显示 */}
       <MultipleChoiceQuizPanel
         visible={showQuiz1}
-        title="（多选题）面对银元投机狂潮,你认为首要突破口是? ()"
+        title="（多选题）面对银元投机狂潮,你认为首要突破口是? "
         options={[
           { value: "A", label: "A. 政治攻势（警告、约谈）" },
           { value: "B", label: "B. 经济手段（抛售银元,以银元打银元）" },
@@ -75,11 +75,11 @@ export const YinyuanQuizzes = ({
       {/* 多选题2（图3）- 关闭旁白后显示 */}
       <MultipleChoiceQuizPanel
         visible={showQuiz2}
-        title="（多选题）面对投机商的猖狂反扑,下一步应采取何种决定性措施?"
+        title="（多选题）面对投机商的猖狂反扑,下一步应采取哪些决定性措施?"
         options={[
-          { value: "A", label: "A. 加大银元抛售量,耗尽投机资本。" },
-          { value: "B", label: "B. 查封投机核心场所,逮捕首要分子。" },
-          { value: "C", label: "C. 颁布法令,严禁银元计价流通。" },
+          { value: "A", label: "A. 加大银元抛售量,耗尽投机资本" },
+          { value: "B", label: "B. 查封投机核心场所,逮捕首要分子" },
+          { value: "C", label: "C. 颁布法令,严禁银元计价流通" },
         ]}
         correctAnswer={["A", "B", "C"]}
         errorMessage="单一措施效果有限,请尝试综合施策。"
@@ -103,4 +103,3 @@ export const YinyuanQuizzes = ({
     </>
   );
 };
-

src/pages/entrance/index.tsx

@@ -76,7 +76,7 @@ const EntranceBackgroundMap: Record<ModuleName, EntranceBackground> = {
     },
   },
   economic: {
-    backgroundImage: getBackgroundImage("entrance/经济"),
+    backgroundImage: getBackgroundImage("entrance/经济巨擎"),
     Star: {
       Star1: {
         image: getStaticImage("entrance/荣德生-解锁"),

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>
   );
 };

src/pages/luxun/internalization.tsx

@@ -109,11 +109,22 @@ const LuxunInternalization = () => {
   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) => {
@@ -247,6 +258,13 @@ const LuxunInternalization = () => {
         onClick={() => navigate(`/${moduleName}/${starName}/home`)}
       />
 
+      {/* 内化结束后的背景音乐 */}
+      <audio
+        ref={audioRef}
+        src={getPublicPath("audio/letter/3我和我的祖国.m4a")}
+        loop
+      />
+
       {showVideo && (
         <Video
           ref={videoRef}
@@ -259,6 +277,14 @@ const LuxunInternalization = () => {
           onEnded={() => {
             setShowVideo(false);
             setPostGuideVisible(true);
+            if (audioRef.current) {
+              audioRef.current.currentTime = 0;
+              audioRef.current
+                .play()
+                .catch((error) => {
+                  console.warn("背景音乐播放失败:", error);
+                });
+            }
           }}
         />
       )}
@@ -325,6 +351,10 @@ const LuxunInternalization = () => {
       <StudyGuideModal
         visible={showStudyGuide}
         onContinue={() => {
+          if (audioRef.current) {
+            audioRef.current.pause();
+            audioRef.current.currentTime = 0;
+          }
           setShowStudyGuide(false);
           navigate(`/${moduleName}/${starName}/home`);
         }}

src/pages/luxun/place/place2.tsx

@@ -3,7 +3,6 @@ import {
   Image,
   Title,
   Cursor,
-  StudyGuideModal,
   GuideSteps,
   GuideStepsItem,
 } from "@/components";
@@ -27,9 +26,6 @@ const LuxunPlace2 = () => {
     moduleName: string;
   }>();
 
-  // 学习引导弹窗
-  const [showGuideModal, setShowGuideModal] = useState(true);
-
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
     null
   );
@@ -206,19 +202,6 @@ const LuxunPlace2 = () => {
           这是鲁迅的自嘲,他曾说"我不会说绵软的苏白,不会打响亮的京腔,不入调,不入流",所以戏称自己的文章是"南腔北调"。这本书里的《〈守常全集》题记》,赞美了李大钊同志,说"他的遗文却将永驻,因为这是先驱者的遗产,革命史上的丰碑。"
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导 */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/luxun/place/place3.tsx

@@ -3,7 +3,6 @@ import {
   Image,
   Title,
   Cursor,
-  StudyGuideModal,
   GuideSteps,
   GuideStepsItem,
   SingleChoiceQuizPanel,
@@ -48,9 +47,6 @@ const LuxunPlace3 = () => {
     moduleName: string;
   }>();
 
-  // 学习引导弹窗
-  const [showGuideModal, setShowGuideModal] = useState(true);
-
   const [activeExhibitId, setActiveExhibitId] = useState<
     1 | 2 | 3 | 4 | 5 | null
   >(null);
@@ -437,19 +433,6 @@ const LuxunPlace3 = () => {
           太对了!鲁迅和瞿秋白的故事不仅在于《海上述林》的字里行间,这座小楼的三楼也藏着他们为了革命事业并肩战斗的初心。
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导 */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

src/pages/luxun/place/place4.tsx

@@ -5,7 +5,6 @@ import {
   Image,
   Title,
   Cursor,
-  StudyGuideModal,
   SingleChoiceQuizPanel,
   Video,
 } from "@/components";
@@ -38,9 +37,7 @@ const LuxunPlace5 = () => {
     moduleName: string;
   }>();
 
-  // 学习引导弹窗
-  const [showGuideModal, setShowGuideModal] = useState(true);
-  const [introGuideVisible, setIntroGuideVisible] = useState(false);
+  const [introGuideVisible, setIntroGuideVisible] = useState(true);
   const [introGuideStep, setIntroGuideStep] = useState(0);
 
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
@@ -298,23 +295,6 @@ const LuxunPlace5 = () => {
           在互动中，读懂先生笔墨间的温度与力量。
         </GuideStepsItem>
       </GuideSteps>
-
-      {/* 学习引导 */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => {
-          setShowGuideModal(false);
-          setIntroGuideVisible(true);
-          setIntroGuideStep(0);
-        }}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
     </div>
   );
 };

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>
   );
 };