feat:碎片完善

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