feat:碎片完善

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