feat:鲁迅添加引导

src/pages/luxun/reflection/scene3.tsx

@@ -1,7 +1,7 @@
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Image } from "@/components";
+import { Image, GuideSteps, GuideStepsItem } from "@/components";
 import { SingleChoiceQuizPanel } from "@/components/layout/quiz";
 
 const starName = "luxun";
@@ -21,11 +21,22 @@ const LuxunReflectionScene3 = () => {
   const [completedQuiz1, setCompletedQuiz1] = useState(false); // 题目1是否完成
   const [completedQuiz2, setCompletedQuiz2] = useState(false); // 题目2是否完成
   const [showSummary, setShowSummary] = useState(false); // 是否显示总结
+  const [completionGuideVisible, setCompletionGuideVisible] = useState(false); // 通关提示对话是否显示
 
   const allCompleted = completedQuiz1 && completedQuiz2;
   const progress = (completedQuiz1 ? 1 : 0) + (completedQuiz2 ? 1 : 0);
   const totalTasks = 2;
 
+  // 当显示总结后，延迟1秒显示通关提示对话
+  useEffect(() => {
+    if (showSummary) {
+      const timer = setTimeout(() => {
+        setCompletionGuideVisible(true);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }
+  }, [showSummary]);
+
   // 点击"鲁迅1"的处理
   const handleLuxun1Click = () => {
     setShowTopics(true);
@@ -277,6 +288,23 @@ const LuxunReflectionScene3 = () => {
         errorMessage='不是哦,先生的创作从不是为了自己哦!"请回忆先生"弃医从文"的初心。"'
         onSubmit={handleQuiz2Submit}
       />
+
+      {/* 通关提示对话 */}
+      <GuideSteps
+        visible={completionGuideVisible}
+        onVisibleChange={(visible) => {
+          if (!visible) {
+            setCompletionGuideVisible(false);
+          }
+        }}
+        showMask={false}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="guide">
+          恭喜你读懂了鲁迅的文字与初心,愿这份精神能伴你前行
+        </GuideStepsItem>
+      </GuideSteps>
     </div>
   );
 };