feat:碎片完善

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