feat: 更新线索提示功能和图像资源，提升用户体验

- 在 ClueBookModal 组件中添加线索提示图像功能，增强互动性。
- 更新多个场景中的引导对话文本，确保信息准确性和一致性。
- 替换和更新多个图像资源，提升视觉内容的准确性。
- 调整完成提示弹窗文本，优化用户体验。

src/components/clue/ClueBookModal.tsx

@@ -10,6 +10,7 @@ export interface ClueBookModalProps {
   onClose: () => void;
   getClueImage: (clueId: string) => string;
   getClueDetailImage: (clueId: string) => string;
+  getClueHintImage?: (clueId: string) => string | null;
 }
 
 /**
@@ -21,8 +22,10 @@ export const ClueBookModal = ({
   onClose,
   getClueImage,
   getClueDetailImage,
+  getClueHintImage,
 }: ClueBookModalProps) => {
   const [selectedClueId, setSelectedClueId] = useState<string | null>(null);
+  const [showClueHint, setShowClueHint] = useState(false);
 
   // 默认选中第一个已收集的线索
   useEffect(() => {
@@ -34,6 +37,18 @@ export const ClueBookModal = ({
     }
   }, [visible, clues, selectedClueId]);
 
+  // 当切换线索时，关闭线索提示
+  useEffect(() => {
+    setShowClueHint(false);
+  }, [selectedClueId]);
+
+  // 检查当前线索是否有提示
+  const hasClueHint = (clueId: string): boolean => {
+    if (!getClueHintImage) return false;
+    const hintImage = getClueHintImage(clueId);
+    return hintImage !== null && hintImage !== undefined;
+  };
+
   if (!visible) return null;
 
   const selectedClue = clues.find((c) => c.id === selectedClueId);
@@ -108,13 +123,45 @@ export const ClueBookModal = ({
           {/* 右侧：线索详情或对话 */}
           <div className="flex-1 px-10 flex items-center justify-center pt-58">
             {selectedClue && selectedClue.collected ? (
-              <div className="w-full h-full flex flex-col items-center justify-center">
+              <div className="w-full h-full flex flex-col items-center justify-center relative">
                 {/* 显示线索详情图片 */}
-                <div className="relative w-full h-full text-center">
+                <div className="relative h-full text-center">
                   <Image
                     src={getClueDetailImage(selectedClue.id)}
                     className="h-full"
                   />
+                  {/* 线索提示描述（覆盖在详情图片上） */}
+                  {showClueHint &&
+                    hasClueHint(selectedClue.id) &&
+                    getClueHintImage && (
+                      <div className="absolute inset-0 z-20 flex items-center justify-center">
+                        <div className="relative h-full">
+                          <Image
+                            src={getClueHintImage(selectedClue.id)!}
+                            className="h-full"
+                          />
+                          {/* 关闭按钮 */}
+                          <Image
+                            className="absolute top-0 right-0 z-30"
+                            src={getStaticImage(`sunzhongshan/reflection/关闭`)}
+                            button
+                            onClick={() => setShowClueHint(false)}
+                          />
+                        </div>
+                      </div>
+                    )}
+                  {/* 线索提示按钮（右下角） */}
+                  {hasClueHint(selectedClue.id) && (
+                    <div className="absolute bottom-10 right-0 z-10">
+                      <Image
+                        src={getStaticImage(
+                          `sunzhongshan/reflection/内置线索提示按钮`
+                        )}
+                        button
+                        onClick={() => setShowClueHint(true)}
+                      />
+                    </div>
+                  )}
                 </div>
               </div>
             ) : (