feat:添加孙中山场景

src/components/clue/ClueBookModal.tsx

@@ -0,0 +1,138 @@
+import { useState, useEffect } from "react";
+import { Image } from "@/components";
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { cn } from "@/lib/utils";
+import type { Clue } from "@/store/clueStore";
+
+export interface ClueBookModalProps {
+  visible: boolean;
+  clues: Clue[];
+  onClose: () => void;
+  getClueImage: (clueId: string) => string;
+  getClueDetailImage: (clueId: string) => string;
+}
+
+/**
+ * 线索簿组件 - 显示已收集的线索和详情
+ */
+export const ClueBookModal = ({
+  visible,
+  clues,
+  onClose,
+  getClueImage,
+  getClueDetailImage,
+}: ClueBookModalProps) => {
+  const [selectedClueId, setSelectedClueId] = useState<string | null>(null);
+
+  // 默认选中第一个已收集的线索
+  useEffect(() => {
+    if (visible && clues.length > 0 && !selectedClueId) {
+      const firstCollected = clues.find((c) => c.collected);
+      if (firstCollected) {
+        setSelectedClueId(firstCollected.id);
+      }
+    }
+  }, [visible, clues, selectedClueId]);
+
+  if (!visible) return null;
+
+  const selectedClue = clues.find((c) => c.id === selectedClueId);
+
+  return (
+    <div className="absolute inset-0 z-50 flex items-center justify-center">
+      {/* 蒙版背景 */}
+      {/* <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      /> */}
+
+      {/* 线索簿内容 */}
+      <div className="relative w-full h-full bg-cover bg-center bg-no-repeat">
+        {/* 背景图片 - 线索簿 */}
+        <div
+          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+          style={{
+            backgroundImage: getBackgroundImage(
+              "sunzhongshan/reflection/详情线索簿背景"
+            ),
+          }}
+        />
+
+        {/* 内容区域 */}
+        <div className="relative z-10 w-full h-full flex px-40 pb-40">
+          {/* 左侧：线索列表 */}
+          <div className="grid grid-cols-2 gap-x-10 pt-36">
+            {clues.length === 0 ? (
+              <div className="text-center text-gray-500 mt-8">暂无线索</div>
+            ) : (
+              clues.map((clue) => {
+                const isSelected = clue.id === selectedClueId;
+                const isCollected = clue.collected;
+
+                return (
+                  <div
+                    key={clue.id}
+                    // className={cn(
+                    //   "relative cursor-pointer transition-all duration-300",
+                    //   "hover:scale-105",
+                    //   isSelected && "scale-110 z-10",
+                    //
+                    // )}
+                    onClick={() => {
+                      if (isCollected) {
+                        setSelectedClueId(clue.id);
+                      }
+                    }}
+                  >
+                    {/* 线索缩略图 - 带倾斜效果 */}
+                    <Image
+                      src={
+                        isCollected
+                          ? getClueImage(clue.id)
+                          : getClueImage(clue.id)
+                      }
+                      className={cn(
+                        "hover:scale-110 hover:brightness-115 cursor-pointer transition-all duration-300",
+                        isSelected &&
+                          "scale-115 brightness-115 z-10 grayscale-0",
+                        !isCollected &&
+                          "opacity-50 grayscale cursor-not-allowed hover:scale-100 hover:brightness-100"
+                      )}
+                    />
+                  </div>
+                );
+              })
+            )}
+          </div>
+
+          {/* 右侧：线索详情或对话 */}
+          <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="relative w-full h-full text-center">
+                  <Image
+                    src={getClueDetailImage(selectedClue.id)}
+                    className="h-full"
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="text-center text-gray-500 text-4xl">
+                {selectedClue ? "该线索尚未收集" : "请选择一个线索查看详情"}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 关闭按钮 */}
+        <Image
+          className="absolute top-0 right-0 z-10"
+          src={getStaticImage(`sunzhongshan/reflection/关闭`)}
+          button
+          onClick={onClose}
+        />
+      </div>
+    </div>
+  );
+};