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>
   );
 };