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