feat:碎片完善

src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx

@@ -8,6 +8,9 @@ import { YinyuanClues } from "./YinyuanClues";
 import { YinyuanQuizzes } from "./YinyuanQuizzes";
 import { YinyuanGuides } from "./YinyuanGuides";
 import { useYinyuanState } from "./useYinyuanState";
+import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
+import { usePuzzleStore } from "@/store/puzzleStore";
+import { starName } from "../constants";
 import type { FileType } from "../shared/types";
 import type { ClueData } from "@/components/layout";
 
@@ -24,8 +27,6 @@ export interface YinyuanBattleProps {
   onClueClick: (clue: ClueData, clueKey: string) => void;
   /** 播放视频回调 */
   onPlayVideo: (fileType: FileType) => void;
-  /** 银元之战解决状态变化回调 */
-  onSolvedChange?: (solved: boolean) => void;
 }
 
 /**
@@ -39,16 +40,10 @@ export const YinyuanBattle = ({
   onFileClick,
   onClueClick,
   onPlayVideo,
-  onSolvedChange,
 }: YinyuanBattleProps) => {
   const state = useYinyuanState();
-
-  // 当银元之战解决状态变化时，通知父组件
-  useEffect(() => {
-    if (onSolvedChange) {
-      onSolvedChange(state.isYinyuanSolved);
-    }
-  }, [state.isYinyuanSolved, onSolvedChange]);
+  const { triggerPuzzleAnimation } = usePuzzleAnimation();
+  const { isPuzzleUnlocked } = usePuzzleStore();
 
   // 监听"前往解决"按钮出现的条件，显示第一个提示
   useEffect(() => {
@@ -157,6 +152,12 @@ export const YinyuanBattle = ({
     // 关闭聚光灯、标记银元之战为已解决、显示走势图
     state.setIsYinyuanSolved(true);
     state.setShowSuccessAlert(false);
+    
+    // 检查碎片13是否已解锁，如果未解锁则触发动画
+    const pieceId = 13;
+    if (!isPuzzleUnlocked(starName, pieceId)) {
+      triggerPuzzleAnimation(pieceId);
+    }
   };
 
   // 处理走势图点击

src/pages/chenyun/reflection/yinyuan/YinyuanGuides.tsx

@@ -78,11 +78,9 @@ export const YinyuanGuides = ({
         visible={showTrendChartDetail}
         src="chenyun/reflection/银元价格走势图"
         description={`以上海为中心，代表"人民币信用"的绿色区域迅速覆盖全市，并向外辐射。`}
-        disableDrag={true}
         onClick={onTrendChartClick}
         onClose={onTrendChartDetailClose}
       />
     </>
   );
 };
-

src/pages/chenyun/reflection/yinyuan/useYinyuanState.ts

@@ -3,39 +3,45 @@
  * 管理银元之战相关的所有状态
  */
 import { useState } from "react";
+import { useChenyunStore } from "@/store/chenyunStore";
 
 /**
  * 银元之战状态管理 Hook
  * @returns 银元之战的所有状态和更新函数
  */
 export const useYinyuanState = () => {
+  // 直接从 store 获取持久化的解决状态，不需要本地状态
+  const { isYinyuanSolved, setYinyuanSolved } = useChenyunStore();
+
+  // 更新解决状态时，直接更新 store
+  const handleSetIsYinyuanSolved = (solved: boolean) => {
+    setYinyuanSolved(solved);
+  };
+
   // 多选题1相关状态
   const [showQuiz1, setShowQuiz1] = useState(false);
-  
+
   // 旁白文字状态（图2）
   const [showNarration2, setShowNarration2] = useState(false);
   const [narration2Text, setNarration2Text] = useState("");
-  
+
   // 多选题2相关状态
   const [showQuiz2, setShowQuiz2] = useState(false);
-  
+
   // 成功提示框状态
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
-  
-  // 银元之战解决状态
-  const [isYinyuanSolved, setIsYinyuanSolved] = useState(false);
-  
+
   // 走势图图标显示状态（控制文件上的走势图图标是否显示）
   const [showTrendChartIcon, setShowTrendChartIcon] = useState(true);
-  
+
   // 走势图大图显示状态
   const [showTrendChartDetail, setShowTrendChartDetail] = useState(false);
-  
+
   // 三个引导提示框状态
   const [showGuide1, setShowGuide1] = useState(false); // 前往解决按钮出现后的提示
   const [showGuide2, setShowGuide2] = useState(false); // 走势图出现后的提示
   const [showGuide3, setShowGuide3] = useState(false); // 走势图大图打开后的提示
-  
+
   // 记录是否已经显示过这些提示（避免重复显示）
   const [hasShownGuide1, setHasShownGuide1] = useState(false);
   const [hasShownGuide2, setHasShownGuide2] = useState(false);
@@ -47,27 +53,27 @@ export const useYinyuanState = () => {
     setShowQuiz1,
     showQuiz2,
     setShowQuiz2,
-    
+
     // 旁白相关状态
     showNarration2,
     setShowNarration2,
     narration2Text,
     setNarration2Text,
-    
+
     // 成功提示框状态
     showSuccessAlert,
     setShowSuccessAlert,
-    
+
     // 解决状态
     isYinyuanSolved,
-    setIsYinyuanSolved,
-    
+    setIsYinyuanSolved: handleSetIsYinyuanSolved,
+
     // 走势图相关状态
     showTrendChartIcon,
     setShowTrendChartIcon,
     showTrendChartDetail,
     setShowTrendChartDetail,
-    
+
     // 引导提示状态
     showGuide1,
     setShowGuide1,
@@ -83,4 +89,3 @@ export const useYinyuanState = () => {
     setHasShownGuide3,
   };
 };
-