feat: 完善黄炎培体悟

src/pages/huangyanpei/reflection/scene4.tsx

@@ -1,30 +1,52 @@
-import { useState } from "react";
-import { Title, Image, Cursor, ExhibitOverlay } from "@/components";
+import { useState, useCallback } from "react";
+import { Title, Image, Cursor } from "@/components";
+import { MultipleChoiceQuizPanel } from "@/components/layout/quiz";
+import { SuccessAlert } from "@/components/layout";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
+import TowelSalesDialog from "./scene4/TowelSalesDialog";
 
 const starName = "huangyanpei";
 
-const exhibitSrcMap: Record<1, string> = {
-  // 预留展品图片路径：请在 images 中放置对应资源
-  1: "huangyanpei/reflection/scene4/12_002",
-};
-
 const HuangyanpeiReflectionScene4 = () => {
   const navigate = useNavigate();
   const { moduleName } = useParams<{
     moduleName: string;
   }>();
 
-  const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
+  const [_activeExhibitId, _setActiveExhibitId] = useState<1 | 2 | null>(null);
   const [visited, setVisited] = useState<Set<number>>(new Set());
+  const [showQuiz1, setShowQuiz1] = useState(false);
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+  const [showTowelDialog, setShowTowelDialog] = useState(false);
+
+  // 处理成功提示的继续和关闭
+  const handleSuccessAlertContinue = useCallback(() => {
+    setShowSuccessAlert(false);
+    // 更新visited状态
+    setVisited((prev) => {
+      const next = new Set(prev);
+      next.add(1);
+      return next;
+    });
+  }, []);
+
+  const handleSuccessAlertClose = useCallback(() => {
+    setShowSuccessAlert(false);
+    // 更新visited状态
+    setVisited((prev) => {
+      const next = new Set(prev);
+      next.add(1);
+      return next;
+    });
+  }, []);
 
   if (!moduleName) {
     return null;
   }
 
   const progressCount = visited.size;
-  const total = 1;
+  const total = 2;
   const completed = progressCount >= total;
   const subtitle = completed
     ? "探索中华职业学院·立业之本·商科(已完成)"
@@ -58,26 +80,77 @@ const HuangyanpeiReflectionScene4 = () => {
         }}
       />
 
-      {/* 互动展品光标：后续可替换为拖拽/选择类互动 */}
+      {/* 互动展品光标1 */}
       <Cursor
-        className="absolute left-100 top-96"
-        onClick={() => setActiveExhibitId(1)}
+        className="absolute left-100 bottom-88"
+        onClick={() => setShowQuiz1(true)}
         read={visited.has(1)}
       />
 
-      {/* 展品遮罩：当前使用单张图片，占位为后续互动内容 */}
-      <ExhibitOverlay
-        visible={activeExhibitId !== null}
-        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
-        onClose={() => {
-          if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+      {/* 互动展品光标2 */}
+      <Cursor
+        className="absolute right-82 bottom-88"
+        onClick={() => setShowTowelDialog(true)}
+        read={visited.has(2)}
+      />
+
+      {/* 选择题1：中华职校商科的核心教学目标 */}
+      <MultipleChoiceQuizPanel
+        visible={showQuiz1}
+        title={`题目 1 (多选题)\n\n中华职校商科的核心教学目标是什么? (多选)`}
+        options={[
+          {
+            value: "A",
+            label: "A. 教会学生投机倒把",
+          },
+          {
+            value: "B",
+            label: "B. 培养诚信经营人才",
+          },
+          {
+            value: "C",
+            label: "C. 推广国货支援实业",
+          },
+          {
+            value: "D",
+            label: "D. 只为个人发财致富",
+          },
+        ]}
+        correctAnswer={["B", "C"]}
+        errorMessage='不对哦! 黄先生倡导"商科要为民族工商业服务", 商科是要培养诚信经营、助力国货发展的人才, 可不能想着投机发财呀, 再选一次;'
+        minSelections={1}
+        onSubmit={(values: string[], isCorrect: boolean) => {
+          if (isCorrect) {
+            // 答题成功：关闭选择题，显示成功提示
+            setShowQuiz1(false);
+            setShowSuccessAlert(true);
           }
-          setActiveExhibitId(null);
+        }}
+        onError={(_error: string) => {
+          // 答题错误时的处理（组件内部已显示错误信息）
+        }}
+      />
+
+      {/* 答题成功提示 */}
+      <SuccessAlert
+        visible={showSuccessAlert}
+        title="满分!"
+        content="诚信是经商之本, 推广国货是商科学生的责任, 这正是黄先生的办学初衷。"
+        onContinue={handleSuccessAlertContinue}
+        onClose={handleSuccessAlertClose}
+      />
+
+      {/* 毛巾推销语拖拽对话框 */}
+      <TowelSalesDialog
+        visible={showTowelDialog}
+        onClose={() => setShowTowelDialog(false)}
+        onComplete={() => {
+          // 完成拖拽后更新visited状态
+          setVisited((prev) => {
+            const next = new Set(prev);
+            next.add(2);
+            return next;
+          });
         }}
       />