feat: 更新组件和引导对话，增强用户体验

- 在多个组件中添加新的选择和填空功能，提升互动性。
- 更新引导对话文本，确保信息准确性和一致性。
- 引入新的选择组件，优化用户填写体验。
- 清理冗余代码，提升可维护性。

src/pages/huangyanpei/internalization.tsx

@@ -7,7 +7,8 @@ import {
   type VideoRef,
   type DragFillResult,
   LetterToHuangyanpei,
-  StudyGuideModal,
+  EndingOverlay,
+  Narration,
 } from "@/components";
 import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
 import { SuccessAlert, DragQuizPanel } from "@/components/layout";
@@ -87,7 +88,7 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
   },
   {
     id: "quiz-3",
-    time: 370, // 6:10
+    time: 360, // 6:10
     title: "题目3",
     prompt:
       '当年黄炎培先生有推广国货的爱国情怀，如今我们的"国货"已经自强自立，请将其中的国产企业/品牌放置到空格处',
@@ -136,6 +137,8 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
 const HuangyanpeiInternalization = () => {
   const navigate = useNavigate();
   const { moduleName } = useParams<{ moduleName: string }>();
+
+  const [narrationVisible, setNarrationVisible] = useState(false);
   const [activeSuccess, setActiveSuccess] = useState<string | null>(null);
   const [successContent, setSuccessContent] = useState<string>("");
   const [resumeCallback, setResumeCallback] = useState<(() => void) | null>(
@@ -156,7 +159,7 @@ const HuangyanpeiInternalization = () => {
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
   useEffect(() => {
-    setVisible(true);
+    setNarrationVisible(true);
   }, []);
 
   // 组件卸载时清理背景音乐
@@ -360,6 +363,17 @@ const HuangyanpeiInternalization = () => {
         onClick={() => navigate(`/${moduleName}/${starName}/home`)}
       />
 
+      <Narration
+        visible={narrationVisible}
+        onClose={() => {
+          setNarrationVisible(false);
+          setVisible(true);
+        }}
+        audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_27.mp3")}
+        text={`从川沙内史第的少年求学路，到中华职业教育社的拓荒征程，黄炎培先生用一生践行“教育救国”的初心，以“手脑并用”的理念为中国职业教育埋下火种。百年后的今天，这颗火种已长成燎原之势，照亮无数中职学子的成才之路。站在新时代的门槛上，我们回望先生的足迹，不仅是缅怀一段历史，更是要让“职教兴国”的精神，成为当代青年成长的指引。`}
+        animationSpeed={200}
+      />
+
       {/* 内化结束后的背景音乐 */}
       <audio
         ref={audioRef}
@@ -448,8 +462,10 @@ const HuangyanpeiInternalization = () => {
         }}
       />
 
-      <StudyGuideModal
+      <EndingOverlay
         visible={showStudyGuide}
+        text="恭喜你已经顺利完成了黄炎培故居的学习，请继续前往下一个故居吧！"
+        animationSpeed={200}
         onContinue={() => {
           if (audioRef.current) {
             audioRef.current.pause();
@@ -458,9 +474,8 @@ const HuangyanpeiInternalization = () => {
           setShowStudyGuide(false);
           navigate(`/${moduleName}/${starName}/home`);
         }}
-      >
-        恭喜你已经顺利完成了黄炎培故居的学习，请继续前往下一个故居吧！
-      </StudyGuideModal>
+        audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_31.mp3")}
+      />
     </div>
   );
 };

src/pages/huangyanpei/place/place4.tsx

@@ -282,7 +282,7 @@ const HuangyanpeiPlace4 = () => {
           speaker="guide"
           audioSrc={getPublicPath("audio/huangyanpei/mp3_huangyanpei_15.mp3")}
         >
-          这期间，1935年中华职业教育社还与荣氏三兄弟合作，再申新三厂办理劳动工自治区，对工人进行文化教育。
+          这期间，1935年中华职业教育社还与荣氏三兄弟合作，在申新三厂办理劳动工自治区，对工人进行文化教育。
         </GuideStepsItem>
       </GuideSteps>
 

src/pages/huangyanpei/reflection/components/game/BambooPuzzleGame.tsx

@@ -257,7 +257,7 @@ const BambooPuzzleGame = ({
               >
                 当年办学经费超紧张，没课本、没器材，黄先生就带着学生自己动手！
                 {"\n"}
-                快来一起做器具吧。
+                快来一起做教具吧。
               </StudyGuideModal>
 
               {/* 返回按钮 */}

src/pages/huangyanpei/reflection/scene4/TowelSalesDialog.tsx

@@ -210,7 +210,7 @@ const TowelSalesDialog = ({
                   {/* 题目文本 */}
                   <div className="flex-1">
                     <div className="text-4xl leading-relaxed">
-                      从以下话术里，挑选3句组成你的推销语 (拖拽至对话框)
+                      【拖拽】从以下话术里，挑选三句组成你的推销语，放置在国货毛巾上。
                     </div>
                   </div>