feat:鲁迅添加引导

src/pages/luxun/reflection/scene2.tsx

@@ -1,8 +1,7 @@
 import { useState, useEffect, useMemo, useCallback } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Image, DragFill } from "@/components";
+import { Image, DragFill, GuideSteps, GuideStepsItem } from "@/components";
 import type { DragFillResult } from "@/components";
-import SuccessAlert from "@/components/layout/alert/success-alert";
 import ErrorAlert from "@/components/layout/alert/error-alert";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 
@@ -149,13 +148,15 @@ const LuxunReflectionScene2 = () => {
   // DragFill 的值
   const [dragFillValue, setDragFillValue] = useState<DragFillResult[]>([]);
 
-  // 是否显示成功提示
-  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
   // 是否全部完成
   const [allCompleted, setAllCompleted] = useState(false);
   // 错误提示相关状态
   const [showErrorAlert, setShowErrorAlert] = useState(false);
   const [errorHint, setErrorHint] = useState("");
+  // 引导对话是否显示
+  const [guideVisible, setGuideVisible] = useState(true);
+  // 通关提示对话是否显示
+  const [completionGuideVisible, setCompletionGuideVisible] = useState(false);
 
   // 转换为 DragFill 的 options
   const options = useMemo(
@@ -243,14 +244,11 @@ const LuxunReflectionScene2 = () => {
   useEffect(() => {
     if (progress === totalTasks && !allCompleted) {
       setAllCompleted(true);
-      setShowSuccessAlert(true);
+      // 任务完成后自动显示通关提示对话
+      setCompletionGuideVisible(true);
     }
   }, [progress, totalTasks, allCompleted]);
 
-  const handleSuccessAlertClose = () => {
-    setShowSuccessAlert(false);
-  };
-
   const handleErrorAlertClose = () => {
     setShowErrorAlert(false);
     setErrorHint("");
@@ -518,14 +516,6 @@ const LuxunReflectionScene2 = () => {
         </div>
       </div>
 
-      {/* 成功提示弹窗 */}
-      <SuccessAlert
-        visible={showSuccessAlert}
-        title="恭喜你, 完成所有任务!"
-        onClose={handleSuccessAlertClose}
-        onContinue={handleSuccessAlertClose}
-      />
-
       {/* 错误提示弹窗 */}
       <ErrorAlert
         visible={showErrorAlert}
@@ -533,6 +523,32 @@ const LuxunReflectionScene2 = () => {
         onClose={handleErrorAlertClose}
         onMaskClick={handleErrorAlertClose}
       />
+
+      {/* 学习引导对话 */}
+      <GuideSteps
+        visible={guideVisible}
+        onVisibleChange={setGuideVisible}
+        showMask={false}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="guide">
+          这些线索藏在先生的文字里,长按卡片拖到对应地标旁,还原创作故事!
+        </GuideStepsItem>
+      </GuideSteps>
+
+      {/* 通关提示对话 */}
+      <GuideSteps
+        visible={completionGuideVisible}
+        onVisibleChange={setCompletionGuideVisible}
+        showMask={false}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="guide">
+          你读懂了鲁迅文字与土地的联结,再深入看看文字里的初心!
+        </GuideStepsItem>
+      </GuideSteps>
     </div>
   );
 };