feat:黄炎培对话对接中

src/pages/luxun/reflection/scene3.tsx

@@ -1,139 +1,281 @@
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { Title, Image, Cursor, ExhibitOverlay } from "@/components";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { Image } from "@/components";
+import { SingleChoiceQuizPanel } from "@/components/layout/quiz";
 
 const starName = "luxun";
 
-const routeMap: Record<1 | 2 | 3 | 4, string> = {
-  1: "luxun/reflection/scene3/绍兴到北京",
-  2: "luxun/reflection/scene3/北京到厦门",
-  3: "luxun/reflection/scene3/厦门广州",
-  4: "luxun/reflection/scene3/广州上海",
-};
-
-const themeMap: Record<5 | 6, string> = {
-  5: "luxun/reflection/scene3/家国情怀",
-  6: "luxun/reflection/scene3/批判现实",
-};
+// 提示图标位置类型
+type HintPosition = "luxun1" | "jiaguo" | "piping" | "luxun2" | "none";
 
 const LuxunReflectionScene3 = () => {
   const navigate = useNavigate();
   const { moduleName } = useParams<{
     moduleName: string;
   }>();
+  const [showTopics, setShowTopics] = useState(false); // 是否显示"家国情怀"和"批判现实"
+  const [hintPosition, setHintPosition] = useState<HintPosition>("luxun1"); // 提示图标位置
+  const [showQuiz1, setShowQuiz1] = useState(false); // 是否显示题目1
+  const [showQuiz2, setShowQuiz2] = useState(false); // 是否显示题目2
+  const [completedQuiz1, setCompletedQuiz1] = useState(false); // 题目1是否完成
+  const [completedQuiz2, setCompletedQuiz2] = useState(false); // 题目2是否完成
+  const [showSummary, setShowSummary] = useState(false); // 是否显示总结
 
-  const [activeRouteId, setActiveRouteId] = useState<1 | 2 | 3 | 4 | null>(null);
-  const [activeThemeId, setActiveThemeId] = useState<5 | 6 | null>(null);
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+  const allCompleted = completedQuiz1 && completedQuiz2;
+  const progress = (completedQuiz1 ? 1 : 0) + (completedQuiz2 ? 1 : 0);
+  const totalTasks = 2;
 
-  const handleOpenRoute = (routeId: 1 | 2 | 3 | 4) => {
-    setActiveRouteId(routeId);
+  // 点击"鲁迅1"的处理
+  const handleLuxun1Click = () => {
+    setShowTopics(true);
+    setHintPosition("jiaguo"); // 提示图标移动到"家国情怀"左侧
   };
 
-  const handleOpenTheme = (themeId: 5 | 6) => {
-    setActiveThemeId(themeId);
+  // 点击"家国情怀"的处理
+  const handleJiaguoClick = () => {
+    if (!showTopics) return; // 必须先点击"鲁迅1"
+    setShowQuiz1(true);
   };
 
-  const progressCount = visited.size;
-  const total = 6;
-  const completed = progressCount >= total;
-  const subtitle = completed
-    ? "探索精神传承·思想之光(已完成)"
-    : `探索精神传承·思想之光(${progressCount}/${total})`;
-  const subtitleClassName = completed
-    ? "text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]"
-    : undefined;
+  // 点击"批判现实"的处理
+  const handlePipingClick = () => {
+    if (!completedQuiz1) return; // 必须先完成题目1
+    setShowQuiz2(true);
+  };
+
+  // 题目1提交处理
+  const handleQuiz1Submit = (value: string, isCorrect: boolean) => {
+    if (isCorrect) {
+      setCompletedQuiz1(true);
+      setShowQuiz1(false);
+      setHintPosition("piping"); // 提示图标移动到"批判现实"旁边
+    }
+  };
+
+  // 题目2提交处理
+  const handleQuiz2Submit = (value: string, isCorrect: boolean) => {
+    if (isCorrect) {
+      setCompletedQuiz2(true);
+      setShowQuiz2(false);
+      setHintPosition("luxun2"); // 提示图标移动到"鲁迅2"旁边
+    }
+  };
+
+  // 点击"鲁迅2"的处理
+  const handleLuxun2Click = () => {
+    if (allCompleted) {
+      setShowSummary(true);
+      setHintPosition("none"); // 隐藏提示图标
+    }
+  };
 
   return (
     <div
-      className="w-full h-full bg-cover bg-center bg-no-repeat"
+      className="select-none flex justify-between w-full h-full bg-cover bg-center bg-no-repeat gap-10 relative"
       style={{
-        backgroundImage: getBackgroundImage(`${starName}/reflection/scene3/底图`),
+        backgroundImage: getBackgroundImage(
+          `${starName}/reflection/scene3/底图`
+        ),
       }}
     >
-      <Title
-        title="跨越时空"
-        subtitle={subtitle}
-        subtitleClassName={subtitleClassName}
-        className="absolute top-10 left-1/2 -translate-x-1/2"
-      />
-
+      {/* 离开按钮 */}
       <Image
-        className="absolute right-5 top-5"
-        src={getStaticImage(`${starName}/reflection/scene3/离开`)}
+        className="absolute right-5 top-5 z-10"
+        src={getStaticImage(`${starName}/reflection/scene1/离开`)}
         button
         onClick={() => {
           if (moduleName && starName) {
-            navigate(`/${moduleName}/${starName}/home`);
+            navigate(`/${moduleName}/${starName}/reflection2`);
           }
         }}
       />
 
-      {/* 路线点击区域 - 根据实际位置调整 */}
-      <Cursor
-        className="absolute left-20 top-30"
-        onClick={() => handleOpenRoute(1)}
-        read={visited.has(1)}
-      />
-      <Cursor
-        className="absolute left-40 top-35"
-        onClick={() => handleOpenRoute(2)}
-        read={visited.has(2)}
-      />
-      <Cursor
-        className="absolute left-60 top-40"
-        onClick={() => handleOpenRoute(3)}
-        read={visited.has(3)}
-      />
-      <Cursor
-        className="absolute left-50 top-50"
-        onClick={() => handleOpenRoute(4)}
-        read={visited.has(4)}
+      {/* 左侧：鲁迅的文学足迹 - 地图区域 */}
+      <div className="w-[44.5%] h-full relative">
+        {/* 家国情怀 - 根据showTopics控制显示 */}
+        {showTopics && (
+          <img
+            className={`absolute top-75 left-70 cursor-pointer transition-opacity ${
+              completedQuiz1 ? "opacity-50" : ""
+            }`}
+            src={getStaticImage(`${starName}/reflection/scene3/家国情怀`)}
+            alt="家国情怀"
+            onClick={handleJiaguoClick}
+          />
+        )}
+        {/* 批判现实 - 根据showTopics和completedQuiz1控制显示 */}
+        {showTopics && (
+          <img
+            className={`absolute bottom-15 left-120 cursor-pointer transition-opacity ${
+              completedQuiz2 ? "opacity-50" : ""
+            }`}
+            src={getStaticImage(`${starName}/reflection/scene3/批判现实`)}
+            alt="批判现实"
+            onClick={handlePipingClick}
+          />
+        )}
+
+        {/* 提示图标 - 家国情怀左侧 */}
+        {hintPosition === "jiaguo" && showTopics && (
+          <div className="absolute top-100 left-85  z-10 pointer-events-none">
+            <img
+              className="animate-finger-bounce scale-x-[-1]"
+              draggable={false}
+              src={getStaticImage(
+                `${starName}/reflection/scene1/鲁迅体悟点一点图标`
+              )}
+              alt="点一点图标"
+            />
+            <img
+              draggable={false}
+              src={getStaticImage(
+                `${starName}/reflection/scene1/鲁迅体悟改版点一点`
+              )}
+              alt="点一点"
+            />
+          </div>
+        )}
+
+        {/* 提示图标 - 批判现实旁边 */}
+        {hintPosition === "piping" && showTopics && completedQuiz1 && (
+          <div className="absolute bottom-0 left-180 z-10 pointer-events-none">
+            <img
+              className="animate-finger-bounce scale-x-[-1]"
+              draggable={false}
+              src={getStaticImage(
+                `${starName}/reflection/scene1/鲁迅体悟点一点图标`
+              )}
+              alt="点一点图标"
+            />
+            <img
+              draggable={false}
+              src={getStaticImage(
+                `${starName}/reflection/scene1/鲁迅体悟改版点一点`
+              )}
+              alt="点一点"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* 右侧区域 */}
+      <div className="flex-1 relative">
+        {/* 任务进度 */}
+        <div className="absolute top-6 left-[23.8%] w-[430px] h-51 flex justify-center items-center">
+          <span className="text-white text-[54px] font-bold [text-shadow:_0px_0px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921,_6px_6px_4px_#b37921]">
+            {allCompleted
+              ? "任务进度已完成"
+              : `任务进度：(${progress}/${totalTasks})`}
+          </span>
+        </div>
+        {/* 鲁迅精神内核 */}
+        <div className="absolute top-[calc(2.4rem+204px)] left-0 w-[995px] h-[525px] pt-16 px-10">
+          <div className="flex items-center justify-between">
+            {/* 提示图标 - 鲁迅1左侧 */}
+            {hintPosition === "luxun1" && (
+              <div className="absolute left-80 top-60 flex items-center z-10 pointer-events-none">
+                <img
+                  className="animate-finger-bounce scale-x-[-1]"
+                  draggable={false}
+                  src={getStaticImage(
+                    `${starName}/reflection/scene1/鲁迅体悟点一点图标`
+                  )}
+                  alt="点一点图标"
+                />
+                <img
+                  draggable={false}
+                  src={getStaticImage(
+                    `${starName}/reflection/scene1/鲁迅体悟改版点一点`
+                  )}
+                  alt="点一点"
+                />
+              </div>
+            )}
+            <img
+              className="cursor-pointer"
+              src={getStaticImage(`${starName}/reflection/scene3/鲁迅1`)}
+              alt="鲁迅精神内核"
+              onClick={handleLuxun1Click}
+            />
+            <img
+              className="cursor-pointer"
+              src={getStaticImage(`${starName}/reflection/scene3/鲁迅2`)}
+              alt="鲁迅精神内核"
+              onClick={handleLuxun2Click}
+            />
+            {/* 提示图标 - 鲁迅2旁边 */}
+            {hintPosition === "luxun2" && allCompleted && (
+              <div className="absolute right-0 top-70  z-10 pointer-events-none">
+                <img
+                  className="animate-finger-bounce scale-x-[-1]"
+                  draggable={false}
+                  src={getStaticImage(
+                    `${starName}/reflection/scene1/鲁迅体悟点一点图标`
+                  )}
+                  alt="点一点图标"
+                />
+                <img
+                  draggable={false}
+                  src={getStaticImage(
+                    `${starName}/reflection/scene1/鲁迅体悟改版点一点`
+                  )}
+                  alt="点一点"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+        {/* 精神总结 */}
+        <div className="absolute bottom-2 right-8 w-[995px] h-[285px] px-2  py-12">
+          {showSummary ? (
+            // 点击鲁迅2后显示总结内容
+            <div className="h-full px-8 overflow-y-auto custom-scrollbar">
+              <div className="space-y-0">
+                <div className="text-red-600 text-4xl font-bold leading-relaxed">
+                  1、批判现实 (他以犀利的文笔批判封建传统);
+                </div>
+                <div className="text-red-600 text-4xl font-bold leading-relaxed">
+                  2、关注底层 (他笔下的主角多是社会底层);
+                </div>
+                <div className="text-red-600 text-4xl font-bold leading-relaxed">
+                  3、家国情怀 (他投身新文化与左翼运动);
+                </div>
+              </div>
+            </div>
+          ) : (
+            // 未完成时显示提示内容
+            <div className="text-center text-black text-4xl font-bold">
+              请跟随小手指点一点，完成操作和题目以查看总结
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 题目1：家国情怀 */}
+      <SingleChoiceQuizPanel
+        visible={showQuiz1}
+        title="【单选题】先生的作品《狂人日记》、《阿Q正传》都在揭露的是()"
+        options={[
+          { value: "A", label: "A. 旧时代的黑暗与愚昧" },
+          { value: "B", label: "B. 生活中的小美好" },
+        ]}
+        correctAnswer="A"
+        errorMessage='不是哦,先生的小说核心是批判而非歌颂哦!"请结合阿Q的碎片回忆一下吧!"'
+        onSubmit={handleQuiz1Submit}
       />
 
-      {/* 主题点击区域 */}
-      <Cursor
-        className="absolute left-30 top-60"
-        onClick={() => handleOpenTheme(5)}
-        read={visited.has(5)}
-      />
-      <Cursor
-        className="absolute left-70 top-55"
-        onClick={() => handleOpenTheme(6)}
-        read={visited.has(6)}
-      />
-
-      {/* 路线展品弹窗 */}
-      <ExhibitOverlay
-        visible={activeRouteId !== null}
-        src={activeRouteId ? routeMap[activeRouteId] : ""}
-        onClose={() => {
-          if (activeRouteId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeRouteId);
-              return next;
-            });
-          }
-          setActiveRouteId(null);
-        }}
-      />
-
-      {/* 主题展品弹窗 */}
-      <ExhibitOverlay
-        visible={activeThemeId !== null}
-        src={activeThemeId ? themeMap[activeThemeId] : ""}
-        onClose={() => {
-          if (activeThemeId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeThemeId);
-              return next;
-            });
-          }
-          setActiveThemeId(null);
-        }}
+      {/* 题目2：批判现实 */}
+      <SingleChoiceQuizPanel
+        visible={showQuiz2}
+        title="【单选题】先生辗转多地创作,核心追求是()"
+        options={[
+          { value: "A", label: "A. 唤醒国人,改变社会" },
+          { value: "B", label: "B. 只为个人成名" },
+        ]}
+        correctAnswer="A"
+        errorMessage='不是哦,先生的创作从不是为了自己哦!"请回忆先生"弃医从文"的初心。"'
+        onSubmit={handleQuiz2Submit}
       />
     </div>
   );