feat: 更新图像资源和引导对话，提升学习体验

- 替换多个场景中的图像资源，确保视觉内容的准确性和一致性。
- 更新信件组件中的输入校验功能，提升用户填写体验。
- 调整引导对话文本，增强互动性和信息传达的清晰度。
- 引入结束窗口，鼓励用户深入了解鲁迅和孙中山的历史背景。

src/pages/luxun/internalization.tsx

@@ -7,6 +7,7 @@ import {
   type VideoRef,
   LetterToLuxun,
   StudyGuideModal,
+  Narration,
 } from "@/components";
 import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
 import { SuccessAlert } from "@/components/layout";
@@ -40,8 +41,8 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
   {
     id: "quiz-1",
     time: 155, // 2:35
-    title: "题目1",
-    prompt: "以下属于鲁迅先生作品的是( )。",
+    title: "",
+    prompt: "【多选】以下属于鲁迅先生作品的是( )。",
     type: "multiple",
     options: [
       { value: "A", label: "孔乙己", isCorrect: true },
@@ -53,43 +54,49 @@ const QUIZ_ANCHORS: QuizAnchor[] = [
   {
     id: "quiz-2",
     time: 355, // 5:55
-    title: "题目2",
-    prompt: "对于鼓励和培养青年一代，鲁迅先生的做法是( )。",
+    title: "",
+    prompt: "【多选】对于鼓励和培养青年一代，鲁迅先生的做法是( )。",
     type: "multiple",
     options: [
       { value: "A", label: "组织文学社团", isCorrect: true },
       { value: "B", label: "木刻运动", isCorrect: true },
       { value: "C", label: "写纪念烈士文章", isCorrect: true },
-      {
-        value: "D",
-        label: "让青年都去参军",
-      },
+      // {
+      //   value: "D",
+      //   label: "让青年都去参军",
+      // },
     ],
-    explanation:
-      "虽然鲁迅热爱革命，但他主要通过文学社团、木刻艺术和纪念文章来教育和启发青年，而不是通过参军来培养青年。",
+    // explanation:
+    //   "虽然鲁迅热爱革命，但他主要通过文学社团、木刻艺术和纪念文章来教育和启发青年，而不是通过参军来培养青年。",
+    explanation: "请你再想想吧！",
   },
   {
     id: "quiz-3",
     time: 420, // 7:00
-    title: "题目3",
-    prompt: "以下那句诗出自鲁迅的作品( )。",
+    title: "",
+    prompt: "【单选】以下那句诗出自鲁迅的作品( )。",
     type: "single",
     options: [
-      { value: "A", label: "寄意寒星荃不察，我以我血荐轩辕", isCorrect: true },
+      {
+        value: "A",
+        label: "寄意寒星荃不察，我以我血荐轩辕",
+        isCorrect: true,
+        explanation: "本句出自鲁迅的《自题小像》",
+      },
       {
         value: "B",
         label: "我自横刀向天笑，去留肝胆两昆仑",
-        explanation: "出自谭嗣同《狱中题壁》",
+        explanation: "本句出自谭嗣同的《狱中题壁》，请再想想吧！",
       },
       {
         value: "C",
         label: "此去泉台招旧部，旌旗十万斩阎罗",
-        explanation: "出自陈毅《梅岭三章》",
+        explanation: "本句出自陈毅的《梅岭三章》，请再想想吧！",
       },
       {
         value: "D",
         label: "雄关漫道真如铁，而今迈步从头越",
-        explanation: "出自毛泽东《忆秦娥·娄山关》",
+        explanation: "本句出自毛泽东的《忆秦娥・娄山关》，请再想想吧！",
       },
     ],
   },
@@ -103,6 +110,7 @@ const LuxunInternalization = () => {
   const [resumeCallback, setResumeCallback] = useState<(() => void) | null>(
     null
   );
+  const [showNarration, setShowNarration] = useState(true); // 是否显示旁白
   const [visible, setVisible] = useState(false);
   const [showVideo, setShowVideo] = useState(false);
   const [postGuideVisible, setPostGuideVisible] = useState(false);
@@ -111,9 +119,12 @@ const LuxunInternalization = () => {
   const videoRef = useRef<VideoRef>(null);
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
+  // 旁白关闭后显示对话引导
   useEffect(() => {
-    setVisible(true);
-  }, []);
+    if (!showNarration) {
+      setVisible(true);
+    }
+  }, [showNarration]);
 
   // 组件卸载时清理背景音乐
   useEffect(() => {
@@ -152,17 +163,40 @@ const LuxunInternalization = () => {
                 <SingleChoiceQuizPanel
                   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}`,
                   }))}
                   correctAnswer={correctAnswers[0]}
                   errorMessage="再思考一下，选择正确答案。"
+                  onWrongSelect={(value: string) => {
+                    // 为题目3提供详细的选项解释
+                    if (item.id === "quiz-3") {
+                      const selectedOption = item.options.find(
+                        (opt) => opt.value === value
+                      );
+                      return (
+                        selectedOption?.explanation ||
+                        "再思考一下，选择正确答案。"
+                      );
+                    }
+                    return undefined;
+                  }}
                   onSubmit={(value: string, isCorrect: boolean) => {
                     if (isCorrect) {
                       setActiveSuccess(item.id);
-                      setSuccessContent("回答正确，请继续探索。");
+                      // 为题目3提供正确答案的详细解释
+                      if (item.id === "quiz-3") {
+                        const correctOption = item.options.find(
+                          (opt) => opt.isCorrect
+                        );
+                        setSuccessContent(
+                          correctOption?.explanation || "回答正确，请继续探索。"
+                        );
+                      } else {
+                        setSuccessContent("回答正确，请继续探索。");
+                      }
                       setResumeCallback(() => resume);
                     }
                   }}
@@ -196,7 +230,7 @@ const LuxunInternalization = () => {
                 <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}`,
@@ -279,17 +313,24 @@ const LuxunInternalization = () => {
             setPostGuideVisible(true);
             if (audioRef.current) {
               audioRef.current.currentTime = 0;
-              audioRef.current
-                .play()
-                .catch((error) => {
-                  console.warn("背景音乐播放失败:", error);
-                });
+              audioRef.current.play().catch((error) => {
+                console.warn("背景音乐播放失败:", error);
+              });
             }
           }}
         />
       )}
 
-      {/* 引导 */}
+      {/* 旁白 */}
+      <Narration
+        visible={showNarration}
+        text={`走进上海鲁迅故居的红砖小楼，解锁了先生从绍兴到上海的文学足迹，我们读懂了他以笔为刃的战斗姿态，也见证了他与进步人士的革命情谊。那些针砭时弊的杂文、借古讽今的篇章，还有藏在6平方米客房里的红色坚守，都在诉说着先生的热忱。1907年，鲁迅先生在《文化偏至论》里写到："是故将生存两间，角逐列国是务，其首在立人，人立而后凡事举；若其道术，乃必尊个性而张精神。"先生认为，中华民族要屹立于世界民族之林，"首在立人"，"立人"思想从此贯穿在鲁迅先生的人生和作品中。`}
+        onClose={() => {
+          setShowNarration(false);
+        }}
+      />
+
+      {/* 对话引导 */}
       <GuideSteps
         visible={visible}
         onVisibleChange={(visible) => {
@@ -359,8 +400,7 @@ const LuxunInternalization = () => {
           navigate(`/${moduleName}/${starName}/home`);
         }}
       >
-        恭喜你已经顺利完成了鲁迅故居的学习，至此，你已经完成了本课程所有故居的学习，
-        希望你能有所收获，学习八位名人的优秀品质和精神，在新时代为中华民族伟大复兴发光发热！
+        恭喜你已经顺利完成了鲁迅故居的学习，请继续前往下一个故居吧！
       </StudyGuideModal>
     </div>
   );