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