feat:碎片完善

src/pages/chenyun/place/place1.tsx

@@ -11,6 +11,8 @@ import { useNavigate, useParams } from "react-router-dom";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useState } from "react";
 import Cursor from "@/components/cursor";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
+import { useChenyunStore } from "@/store/chenyunStore";
 
 // starName 固定为 chenyun
 const starName = "chenyun";
@@ -28,6 +30,9 @@ const ChenyunPlace1 = () => {
     moduleName: string;
   }>();
 
+  // 获取碎片动画触发方法
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+
   // 学习引导弹窗
   const [showGuideModal, setShowGuideModal] = useState(true);
   // 对话结束后的学习引导弹窗
@@ -39,11 +44,18 @@ const ChenyunPlace1 = () => {
   const [visible, setVisible] = useState(false);
   // 当前激活的展品 ID（只存 ID，不直接存路径，便于作为唯一标识）
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
-  // 已浏览展品的 ID 集合
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+
+  // 使用持久化的访问状态
+  const place = "place1";
+  const { markExhibitVisited, getVisitedExhibits } = useChenyunStore();
+
+  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
+  const visitedExhibits = getVisitedExhibits(place);
+  const visited = new Set(visitedExhibits);
 
   const handleOpenExhibit = (index: 1 | 2) => {
     setActiveExhibitId(index);
+    // ExhibitOverlay 打开时会自动通过 onOpen 通知 ResidenceLayout 执行动画
   };
 
   const handleStartLearning = () => {
@@ -128,13 +140,16 @@ const ChenyunPlace1 = () => {
       <ExhibitOverlay
         visible={activeExhibitId !== null}
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        onOpen={() => {
+          // 示例：展品1对应碎片1，展品2对应碎片2
+          // 根据实际需求调用 triggerPuzzleAnimation
+          if (activeExhibitId === 1) {
+            triggerPuzzleAnimation(1);
+          }
+        }}
         onClose={() => {
           if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+            markExhibitVisited(place, activeExhibitId);
           }
           setActiveExhibitId(null);
         }}

src/pages/chenyun/place/place2.tsx

@@ -10,6 +10,8 @@ import {
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
+import { useChenyunStore } from "@/store/chenyunStore";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
 
 // starName 固定为 chenyun
 const starName = "chenyun";
@@ -31,10 +33,19 @@ const ChenyunPlace2 = () => {
     moduleName: string;
   }>();
 
+  // 获取碎片动画触发方法
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+
   // 当前激活展品 ID，只存 ID 做唯一标识
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
-  // 已浏览展品 ID 集合
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+
+  // 使用持久化的访问状态
+  const place = "place2";
+  const { markExhibitVisited, getVisitedExhibits } = useChenyunStore();
+
+  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
+  const visitedExhibits = getVisitedExhibits(place);
+  const visited = new Set(visitedExhibits);
   // GuideSteps 显示状态
   const [guideVisible, setGuideVisible] = useState(false);
   // GuideSteps 当前步骤
@@ -128,13 +139,16 @@ const ChenyunPlace2 = () => {
           activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
         }
         autoPlayDescription={activeExhibitId === 1}
+        onOpen={() => {
+          if (activeExhibitId === 1) {
+            triggerPuzzleAnimation(2);
+          } else if (activeExhibitId === 2) {
+            triggerPuzzleAnimation(3);
+          }
+        }}
         onClose={() => {
           if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+            markExhibitVisited(place, activeExhibitId);
           }
           setActiveExhibitId(null);
         }}

src/pages/chenyun/place/place3.tsx

@@ -11,6 +11,8 @@ import {
 } from "@/components";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
+import { useChenyunStore } from "@/store/chenyunStore";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
 
 // starName 固定为 chenyun
 const starName = "chenyun";
@@ -26,8 +28,18 @@ const ChenyunPlace3 = () => {
     moduleName: string;
   }>();
 
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+  // 获取碎片动画触发方法
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
+
+  // 使用持久化的访问状态
+  const place = "place3";
+  const { markExhibitVisited, getVisitedExhibits } = useChenyunStore();
+
+  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
+  const visitedExhibits = getVisitedExhibits(place);
+  const visited = new Set(visitedExhibits);
   const [videoVisible, setVideoVisible] = useState(false);
   // GuideSteps 显示状态
   const [guideVisible, setGuideVisible] = useState(false);
@@ -125,7 +137,8 @@ const ChenyunPlace3 = () => {
             controls={false}
             onEnded={() => {
               setVideoVisible(false);
-              setVisited((p) => new Set(p).add(2));
+              markExhibitVisited(place, 2);
+              triggerPuzzleAnimation(5);
             }}
           />
         </div>
@@ -135,13 +148,14 @@ const ChenyunPlace3 = () => {
       <ExhibitOverlay
         visible={activeExhibitId !== null}
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        onOpen={() => {
+          if (activeExhibitId === 1) {
+            triggerPuzzleAnimation(4);
+          }
+        }}
         onClose={() => {
           if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+            markExhibitVisited(place, activeExhibitId);
           }
           setActiveExhibitId(null);
         }}

src/pages/chenyun/place/place4.tsx

@@ -10,6 +10,8 @@ import {
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
+import { useChenyunStore } from "@/store/chenyunStore";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
 
 // starName 固定为 chenyun
 const starName = "chenyun";
@@ -25,8 +27,19 @@ const ChenyunPlace4 = () => {
     moduleName: string;
   }>();
 
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+  // 获取碎片动画触发方法
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
+
+  // 使用持久化的访问状态
+  const place = "place4";
+  const { isExhibitVisited, markExhibitVisited, getVisitedExhibits } =
+    useChenyunStore();
+
+  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
+  const visitedExhibits = getVisitedExhibits(place);
+  const visited = new Set(visitedExhibits);
   // 展品1引导对话
   const [guideVisible, setGuideVisible] = useState(false);
   const [guideStep, setGuideStep] = useState(0);
@@ -124,13 +137,14 @@ const ChenyunPlace4 = () => {
       <ExhibitOverlay
         visible={activeExhibitId !== null}
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        onOpen={() => {
+          if (activeExhibitId === 1) {
+            triggerPuzzleAnimation(6);
+          }
+        }}
         onClose={() => {
           if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+            markExhibitVisited(place, activeExhibitId);
           }
           setActiveExhibitId(null);
         }}

src/pages/chenyun/place/place5.tsx

@@ -10,6 +10,8 @@ import {
 } from "@/components";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
+import { useChenyunStore } from "@/store/chenyunStore";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
 
 // starName 固定为 chenyun
 const starName = "chenyun";
@@ -32,10 +34,21 @@ const ChenyunPlace5 = () => {
     moduleName: string;
   }>();
 
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+  // 获取碎片动画触发方法
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
     null
   );
+
+  // 使用持久化的访问状态
+  const place = "place5";
+  const { isExhibitVisited, markExhibitVisited, getVisitedExhibits } =
+    useChenyunStore();
+
+  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
+  const visitedExhibits = getVisitedExhibits(place);
+  const visited = new Set(visitedExhibits);
   const [videoVisible3, setVideoVisible3] = useState(false);
   // 学习引导弹窗
   const [showGuideModal, setShowGuideModal] = useState(true);
@@ -127,11 +140,8 @@ const ChenyunPlace5 = () => {
           showSkipButton
           onEnded={() => {
             setVideoVisible3(false);
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(3);
-              return next;
-            });
+            markExhibitVisited(place, 3);
+            triggerPuzzleAnimation(8);
           }}
         />
       )}
@@ -144,13 +154,14 @@ const ChenyunPlace5 = () => {
           activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
         }
         autoPlayDescription={activeExhibitId === 2}
+        onOpen={() => {
+          if (activeExhibitId === 2) {
+            triggerPuzzleAnimation(7);
+          }
+        }}
         onClose={() => {
           if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+            markExhibitVisited(place, activeExhibitId);
           }
           setActiveExhibitId(null);
         }}

src/pages/chenyun/place/place6.tsx

@@ -10,6 +10,8 @@ import {
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
+import { useChenyunStore } from "@/store/chenyunStore";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
 
 // starName 固定为 chenyun
 const starName = "chenyun";
@@ -24,8 +26,19 @@ const ChenyunPlace6 = () => {
     moduleName: string;
   }>();
 
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+  // 获取碎片动画触发方法
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+
   const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
+
+  // 使用持久化的访问状态
+  const place = "place6";
+  const { isExhibitVisited, markExhibitVisited, getVisitedExhibits } =
+    useChenyunStore();
+
+  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
+  const visitedExhibits = getVisitedExhibits(place);
+  const visited = new Set(visitedExhibits);
   const [guideVisible, setGuideVisible] = useState(false);
   const [guideStep, setGuideStep] = useState(0);
   // 学习引导弹窗
@@ -101,13 +114,14 @@ const ChenyunPlace6 = () => {
       <ExhibitOverlay
         visible={activeExhibitId !== null}
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        onOpen={() => {
+          if (activeExhibitId === 1) {
+            triggerPuzzleAnimation(9);
+          }
+        }}
         onClose={() => {
           if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+            markExhibitVisited(place, activeExhibitId);
           }
           setActiveExhibitId(null);
         }}

src/pages/chenyun/place/place7.tsx

@@ -16,6 +16,8 @@ import { SuccessAlert, DragQuizPanel } from "@/components/layout";
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 import type { VideoRef } from "@/components/video";
+import { useChenyunStore } from "@/store/chenyunStore";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
 
 // starName 固定为 chenyun
 const starName = "chenyun";
@@ -53,8 +55,19 @@ const ChenyunPlace7 = () => {
     moduleName: string;
   }>();
 
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+  // 获取碎片动画触发方法
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+
   const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
+
+  // 使用持久化的访问状态
+  const place = "place7";
+  const { isExhibitVisited, markExhibitVisited, getVisitedExhibits } =
+    useChenyunStore();
+
+  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
+  const visitedExhibits = getVisitedExhibits(place);
+  const visited = new Set(visitedExhibits);
   const [videoVisible1, setVideoVisible1] = useState(false);
   const [videoPlaying, setVideoPlaying] = useState(false);
   const videoRef = useRef<VideoRef>(null);
@@ -231,11 +244,8 @@ const ChenyunPlace7 = () => {
             showSkipButton
             onEnded={() => {
               setVideoPlaying(false);
-              setVisited((prev) => {
-                const next = new Set(prev);
-                next.add(1);
-                return next;
-              });
+              markExhibitVisited(place, 1);
+              triggerPuzzleAnimation(10);
               // 视频播放完成后，出现单选题
               setQuizVisible(true);
             }}
@@ -349,11 +359,7 @@ const ChenyunPlace7 = () => {
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
         onClose={() => {
           if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+            markExhibitVisited(place, activeExhibitId);
           }
           setActiveExhibitId(null);
         }}

src/pages/chenyun/place/place8.tsx

@@ -10,6 +10,8 @@ import {
 } from "@/components";
 import { getBackgroundImage, getStaticImage } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
+import { useChenyunStore } from "@/store/chenyunStore";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
 
 // starName 固定为 chenyun
 const starName = "chenyun";
@@ -25,8 +27,19 @@ const ChenyunPlace8 = () => {
     moduleName: string;
   }>();
 
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+  // 获取碎片动画触发方法
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+
   const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
+
+  // 使用持久化的访问状态
+  const place = "place8";
+  const { isExhibitVisited, markExhibitVisited, getVisitedExhibits } =
+    useChenyunStore();
+
+  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
+  const visitedExhibits = getVisitedExhibits(place);
+  const visited = new Set(visitedExhibits);
   // 展品2的对话引导
   const [guideVisible, setGuideVisible] = useState(false);
   const [guideStep, setGuideStep] = useState(0);
@@ -117,6 +130,11 @@ const ChenyunPlace8 = () => {
       <ExhibitOverlay
         visible={activeExhibitId !== null}
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        onOpen={() => {
+          if (activeExhibitId === 1) {
+            triggerPuzzleAnimation(11);
+          }
+        }}
         description={
           activeExhibitId === 1
             ? `打赢"银元之战""两白一黑"战役的过程彰显了中国共产党治理经济的卓越能力！这里有一份"一五"计划报告的手稿，陈云在"一五"计划的编制中做出了重大贡献。一九五四年，陈云的主要工作之一，就是主持编制第一个五年计划纲要。这次编制工作是在前四次基础上进行的，陈云提出计划编制工作中要注意几个问题：首先是工业投资金额，其次是市场供应和人民生活，第三是农业发展速度，这三个问题对编制计划有指导意义。第一个五年计划纲要草案的重点是优先发展重工业，特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障，通过"统购统销"稳定粮价，为重点工程项目筑牢根基，亲手铺就了我国工业化的起步之路。`
@@ -124,11 +142,7 @@ const ChenyunPlace8 = () => {
         }
         onClose={() => {
           if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+            markExhibitVisited(place, activeExhibitId);
           }
           setActiveExhibitId(null);
         }}

src/pages/chenyun/place/place9.tsx

@@ -12,6 +12,8 @@ import {
 import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 import type { VideoRef } from "@/components/video";
+import { useChenyunStore } from "@/store/chenyunStore";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
 
 // starName 固定为 chenyun
 const starName = "chenyun";
@@ -26,8 +28,19 @@ const ChenyunPlace9 = () => {
     moduleName: string;
   }>();
 
-  const [visited, setVisited] = useState<Set<number>>(new Set());
+  // 获取碎片动画触发方法
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+
   const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
+
+  // 使用持久化的访问状态
+  const place = "place9";
+  const { isExhibitVisited, markExhibitVisited, getVisitedExhibits } =
+    useChenyunStore();
+
+  // 从 store 获取已访问的展品，转换为 Set 用于兼容现有代码
+  const visitedExhibits = getVisitedExhibits(place);
+  const visited = new Set(visitedExhibits);
   // 视频播放状态
   const [videoVisible, setVideoVisible] = useState(false);
   const [videoPlaying, setVideoPlaying] = useState(false);
@@ -127,14 +140,11 @@ const ChenyunPlace9 = () => {
             skipText="跳过"
             onEnded={() => {
               setVideoPlaying(false);
-              setVisited((prev) => {
-                const next = new Set(prev);
-                next.add(1);
-                return next;
-              });
+              markExhibitVisited(place, 1);
               // 视频播放完成后，显示对话引导
               setGuideVisible(true);
               setGuideStep(0);
+              triggerPuzzleAnimation(12);
             }}
           />
         </div>
@@ -167,11 +177,7 @@ const ChenyunPlace9 = () => {
         src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
         onClose={() => {
           if (activeExhibitId !== null) {
-            setVisited((prev) => {
-              const next = new Set(prev);
-              next.add(activeExhibitId);
-              return next;
-            });
+            markExhibitVisited(place, activeExhibitId);
           }
           setActiveExhibitId(null);
         }}