feat:黄炎培对话对接中

src/pages/chenyun/place/place1.tsx

@@ -5,6 +5,7 @@ import {
   Image,
   Title,
   Overlay,
+  StudyGuideModal,
 } from "@/components";
 import { useNavigate, useParams } from "react-router-dom";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
@@ -15,11 +16,11 @@ import Cursor from "@/components/cursor";
 const starName = "chenyun";
 
 // 展品 ID 与资源路径映射，ID 用来做唯一标识
-const exhibitSrcMap: Record<1 | 2 | 3 | 4, string> = {
+const exhibitSrcMap: Record<1 | 2, string> = {
   1: "chenyun/place1/场景1展品1",
   2: "chenyun/place1/场景1展品2",
-  3: "chenyun/place1/场景1展品3",
-  4: "chenyun/place1/场景1展品4",
+  // 3: "chenyun/place1/场景1展品3",
+  // 4: "chenyun/place1/场景1展品4",
 };
 const ChenyunPlace1 = () => {
   const navigate = useNavigate();
@@ -27,18 +28,21 @@ const ChenyunPlace1 = () => {
     moduleName: string;
   }>();
 
+  // 学习引导弹窗
+  const [showGuideModal, setShowGuideModal] = useState(true);
+  // 对话结束后的学习引导弹窗
+  const [showAfterDialogGuide, setShowAfterDialogGuide] = useState(false);
+  const [afterDialogGuideShown, setAfterDialogGuideShown] = useState(false);
   // 学习说明对话框显示状态
   const [showIntroDialog, setShowIntroDialog] = useState(false);
   // 引导对话显示状态
-  const [visible, setVisible] = useState(true);
+  const [visible, setVisible] = useState(false);
   // 当前激活的展品 ID（只存 ID，不直接存路径，便于作为唯一标识）
-  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | 4 | null>(
-    null
-  );
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
   // 已浏览展品的 ID 集合
   const [visited, setVisited] = useState<Set<number>>(new Set());
 
-  const handleOpenExhibit = (index: 1 | 2 | 3 | 4) => {
+  const handleOpenExhibit = (index: 1 | 2) => {
     setActiveExhibitId(index);
   };
 
@@ -48,11 +52,11 @@ const ChenyunPlace1 = () => {
   };
 
   const progressCount = visited.size;
-  const total = 4;
+  const total = 2;
   const completed = progressCount >= total;
   const subtitle = completed
-    ? "探索陈云故居老宅堂屋(已完成)"
-    : `探索陈云故居老宅堂屋(${progressCount}/${total})`;
+    ? "探索陈云纪念馆老宅堂屋(已完成)"
+    : `探索陈云纪念馆老宅堂屋(${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;
@@ -96,17 +100,17 @@ const ChenyunPlace1 = () => {
         read={visited.has(2)}
       />
       {/* 展品3 */}
-      <Cursor
+      {/* <Cursor
         className="absolute right-170 bottom-60"
         onClick={() => handleOpenExhibit(3)}
         read={visited.has(3)}
-      />
+      /> */}
       {/* 展品4 */}
-      <Cursor
+      {/* <Cursor
         className="absolute right-98 top-130 cursor"
         onClick={() => handleOpenExhibit(4)}
         read={visited.has(4)}
-      />
+      /> */}
 
       {/* 继续前进 - 仅在完成所有展品后显示 */}
       {completed && (
@@ -136,6 +140,21 @@ const ChenyunPlace1 = () => {
         }}
       />
 
+      {/* 学习引导词 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => {
+          setShowGuideModal(false);
+          setVisible(true);
+        }}
+      >
+        同学你好，欢迎来到走进故居-对话学习模块！{"\n"}
+        进入陈云故居后，我们一起来了解陈云同志经历的7个阶段：“水乡少年
+        艰辛成长”、“商务启航 投身革命”、“苏区淬炼 崭露头角”、“延安担当
+        经济破局”、“恢复时期 经济奠基”、“建设时期 务实兴邦”、“改革浪潮
+        擘画实业”；
+      </StudyGuideModal>
+
       {/* 学习说明对话框 */}
       {showIntroDialog && (
         <Overlay
@@ -151,7 +170,13 @@ const ChenyunPlace1 = () => {
       {/* 引导 */}
       <GuideSteps
         visible={visible}
-        onVisibleChange={setVisible}
+        onVisibleChange={(nextVisible) => {
+          setVisible(nextVisible);
+          if (!nextVisible && !afterDialogGuideShown) {
+            setAfterDialogGuideShown(true);
+            setShowAfterDialogGuide(true);
+          }
+        }}
         showMask={true}
         highlightSelectors={[]}
       >
@@ -168,6 +193,19 @@ const ChenyunPlace1 = () => {
           父母去世后，由外婆抚养。陈云从小跟舅父廖文光和舅母廖倪氏一起生活。家里靠种田和做小生意勉强维持生计。
         </GuideStepsItem>
       </GuideSteps>
+
+      {/* 对话结束后的学习引导 */}
+      <StudyGuideModal
+        visible={showAfterDialogGuide}
+        onContinue={() => setShowAfterDialogGuide(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place2.tsx

@@ -6,6 +6,7 @@ import {
   Cursor,
   GuideSteps,
   GuideStepsItem,
+  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -38,6 +39,8 @@ const ChenyunPlace2 = () => {
   const [guideVisible, setGuideVisible] = useState(false);
   // GuideSteps 当前步骤
   const [guideStep, setGuideStep] = useState(0);
+  // 学习引导弹窗显示状态
+  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (index: 1 | 2) => {
     if (index === 1) {
@@ -157,6 +160,19 @@ const ChenyunPlace2 = () => {
           陈云在党内以“铁算盘”著称，他在经济工作中能熟练使用算盘，就得益于少年时在青浦县立乙种商业学校的学习。
         </GuideStepsItem>
       </GuideSteps>
+
+      {/* 对话结束后的学习引导 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place3.tsx

@@ -7,6 +7,7 @@ import {
   GuideSteps,
   GuideStepsItem,
   Video,
+  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -32,6 +33,8 @@ const ChenyunPlace3 = () => {
   const [guideVisible, setGuideVisible] = useState(false);
   // GuideSteps 当前步骤
   const [guideStep, setGuideStep] = useState(0);
+  // 学习引导弹窗显示状态
+  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (index: 1 | 2) => {
     if (index === 1) {
@@ -164,6 +167,19 @@ const ChenyunPlace3 = () => {
           陈云的珠算能力在商务印书馆工作期间有了很大提高。由于工作认真负责，三年的学徒期，陈云提前两年就破格到商务印书馆虹口分店（现为1925书局）当店员。
         </GuideStepsItem>
       </GuideSteps>
+
+      {/* 对话结束后的学习引导 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place4.tsx

@@ -6,6 +6,7 @@ import {
   Cursor,
   GuideSteps,
   GuideStepsItem,
+  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -32,6 +33,8 @@ const ChenyunPlace4 = () => {
   // 展品2的引导对话
   const [guideVisible2, setGuideVisible2] = useState(false);
   const [guideStep2, setGuideStep2] = useState(0);
+  // 学习引导弹窗
+  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (index: 1 | 2) => {
     if (index === 1) {
@@ -180,6 +183,19 @@ const ChenyunPlace4 = () => {
           陈云提议建立合作社，广泛吸收失业工人加入，多听取工人建议、增强企业管理的民主性，从而更好地建设苏区经济。这些做法为他日后主持全国财经工作积累了宝贵经验。
         </GuideStepsItem>
       </GuideSteps>
+
+      {/* 学习引导 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place5.tsx

@@ -6,6 +6,7 @@ import {
   Cursor,
   Video,
   Overlay,
+  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -36,6 +37,8 @@ const ChenyunPlace5 = () => {
     null
   );
   const [videoVisible3, setVideoVisible3] = useState(false);
+  // 学习引导弹窗
+  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (index: 1 | 2 | 3) => {
     if (index === 3) {
@@ -152,6 +155,19 @@ const ChenyunPlace5 = () => {
           setActiveExhibitId(null);
         }}
       />
+
+      {/* 学习引导 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place6.tsx

@@ -6,6 +6,7 @@ import {
   Cursor,
   GuideSteps,
   GuideStepsItem,
+  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -27,6 +28,8 @@ const ChenyunPlace6 = () => {
   const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
   const [guideVisible, setGuideVisible] = useState(false);
   const [guideStep, setGuideStep] = useState(0);
+  // 学习引导弹窗
+  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = () => {
     // 展品1：点击时同时打开展品和引导对话，从第1步开始
@@ -130,6 +133,19 @@ const ChenyunPlace6 = () => {
           陈云挂帅后的首仗就是打击投机、平抑物价。通过“银元之战”“两白一黑”战役等几次严峻斗争，只用不到一年时间，就迅速稳定了金融物价。
         </GuideStepsItem>
       </GuideSteps>
+
+      {/* 学习引导 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place7.tsx

@@ -10,6 +10,7 @@ import {
   type SingleChoiceOption,
   type DragFillResult,
   QuizPanel,
+  StudyGuideModal,
 } from "@/components";
 import { SuccessAlert, DragQuizPanel } from "@/components/layout";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
@@ -28,21 +29,24 @@ const exhibitSrcMap: Record<1, string> = {
 const QUIZ1_OPTIONS: SingleChoiceOption[] = [
   {
     value: "A",
-    label:
-      "A. 推动了淮海战役的胜利（错误选项，选后提示：淮海战役于1949年1月胜利结束，发生在这次“银元之战”前，不存在因果关系）",
+    label: "A. 推动了淮海战役的胜利",
   },
   {
     value: "B",
-    label:
-      "B. 有利于稳定人民的发行和地位（正确选项，选后提示：“银元之战”属于当时人民政府整顿金融的重要举措，黄金、银元投机不利于人民币币值稳定和流通，因此“银元之战”打击贵属投机活动，有利于稳定人民币的发行和地位）",
+    label: "B. 有利于稳定人民的发行和地位",
   },
   {
     value: "C",
-    label:
-      "C. 巩固了新中国人民政权（错误选项，选后提示：1949年6月新中国政权尚未建立）",
+    label: "C. 巩固了新中国人民政权",
   },
 ];
 
+// 题目1各选项对应的错误提示（原来写在选项括号中的内容）
+const QUIZ1_ERROR_HINTS: Record<string, string> = {
+  A: "淮海战役于1949年1月胜利结束，发生在这次“银元之战”前，不存在因果关系。",
+  C: "1949年6月新中国政权尚未建立。",
+};
+
 const ChenyunPlace7 = () => {
   const navigate = useNavigate();
   const { moduleName } = useParams<{
@@ -74,8 +78,13 @@ const ChenyunPlace7 = () => {
   const [successAlertVisible, setSuccessAlertVisible] = useState(false);
   // 标记拖拽题是否已完成
   const [quiz2Completed, setQuiz2Completed] = useState(false);
+  // 学习引导弹窗
+  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (_index: 1) => {
+    // 如果本场景学习已完成（拖拽题已答对），不再响应点击，避免重复播放
+    if (quiz2Completed) return;
+
     // 展品1：点击时显示视频1场景和引导对话1
     setVideoVisible1(true);
     setVideoPlaying(false); // 视频不自动播放
@@ -271,7 +280,11 @@ const ChenyunPlace7 = () => {
             // 显示成功提示
             setSuccessAlertVisible(true);
           } else {
-            setQuizError("再想一想，注意题干中的时间和提示信息哦～");
+            // 使用对应选项的错误提示，如果不存在则使用通用提示
+            setQuizError(
+              QUIZ1_ERROR_HINTS[val] ||
+                "再想一想，注意题干中的时间和提示信息哦～"
+            );
           }
         }}
       />
@@ -375,6 +388,19 @@ const ChenyunPlace7 = () => {
           />
         </div>
       )}
+
+      {/* 学习引导 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place8.tsx

@@ -6,6 +6,7 @@ import {
   Cursor,
   GuideSteps,
   GuideStepsItem,
+  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -29,6 +30,8 @@ const ChenyunPlace8 = () => {
   // 展品2的对话引导
   const [guideVisible, setGuideVisible] = useState(false);
   const [guideStep, setGuideStep] = useState(0);
+  // 学习引导弹窗
+  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (index: 1 | 2) => {
     setActiveExhibitId(index);
@@ -151,6 +154,19 @@ const ChenyunPlace8 = () => {
           陈云说："只有采用这种办法，才能保证我国人民生活日益增长的需要，才能制止投机活动，保证市场物价的稳定，才能使发展国民经济第一个五年计划得以顺利地进行。"
         </GuideStepsItem>
       </GuideSteps>
+
+      {/* 学习引导 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
     </div>
   );
 };

src/pages/chenyun/place/place9.tsx

@@ -7,6 +7,7 @@ import {
   Video,
   GuideSteps,
   GuideStepsItem,
+  StudyGuideModal,
 } from "@/components";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
@@ -34,6 +35,8 @@ const ChenyunPlace9 = () => {
   // 对话引导状态
   const [guideVisible, setGuideVisible] = useState(false);
   const [guideStep, setGuideStep] = useState(0);
+  // 学习引导弹窗
+  const [showGuideModal, setShowGuideModal] = useState(true);
 
   const handleOpenExhibit = (_index: 1) => {
     // 展品1：播放视频
@@ -151,7 +154,10 @@ const ChenyunPlace9 = () => {
           我们已经沿着陈云的足迹，从练塘水乡走到改革开放的前沿，读懂了他"适合老百姓的要求，做了一点事"的初心。
         </GuideStepsItem>
         <GuideStepsItem speaker="guide">
-          接下来，请你跨越时空，走进1949年刚解放时期的上海，参与到当时那场轰轰烈烈的"银元之战"和"米棉之战"之中去，在实践决策中体会，陈云"多谋善断""敢闯务实"的卓越智慧与战略魄力，感受我国集中力量办大事的制度优势如何在经济战场中彰显威力。
+          接下来，请你跨越时空，走进1949年刚解放时期的上海，参与到当时那场轰轰烈烈的"银元之战"和"米棉之战"之中去,在实践决策中体会，陈云"多谋善断""敢闯务实"的卓越智慧与战略魄力，
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          感受我国集中力量办大事的制度优势如何在经济战场中彰显威力。
         </GuideStepsItem>
       </GuideSteps>
 
@@ -170,6 +176,19 @@ const ChenyunPlace9 = () => {
           setActiveExhibitId(null);
         }}
       />
+
+      {/* 学习引导 */}
+      <StudyGuideModal
+        visible={showGuideModal}
+        onContinue={() => setShowGuideModal(false)}
+        ailgn="left"
+      >
+        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+        {"\n"}
+        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+        {"\n"}
+        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+      </StudyGuideModal>
     </div>
   );
 };