feat:碎片完善

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