feat:init

src/components/layout/clue/ClueContent.tsx

@@ -0,0 +1,71 @@
+import { Image } from "@/components";
+import { getStaticImage } from "@/lib/utils";
+import { ClueData } from "./types";
+import DialogueContent from "./DialogueContent";
+
+export interface ClueContentProps {
+  /** 线索数据 */
+  clue: ClueData;
+}
+
+/**
+ * 线索内容组件
+ * 根据线索类型渲染不同的内容
+ */
+const ClueContent = ({ clue }: ClueContentProps) => {
+  switch (clue.type) {
+    case "text":
+      return (
+        <div className="w-full h-full flex flex-col items-center justify-center gap-4">
+          <h2 className="text-4xl font-bold text-[#896a27] mb-4 text-center">
+            {clue.title}
+          </h2>
+          {typeof clue.content === "string" ? (
+            <div className="text-3xl leading-16 text-[#896a27] whitespace-pre-line text-center">
+              {clue.content}
+            </div>
+          ) : (
+            <div className="text-3xl leading-16 text-[#896a27] text-center">
+              {clue.content}
+            </div>
+          )}
+        </div>
+      );
+
+    case "map":
+      return (
+        <div className="w-full h-full flex items-center justify-center">
+          <Image
+            src={getStaticImage(clue.mapImage)}
+            className="max-w-full max-h-full object-contain"
+            alt="地图"
+          />
+        </div>
+      );
+
+    case "audio":
+      return (
+        <div className="w-full h-full flex items-center justify-center">
+          <div className="text-5xl leading-relaxed text-white whitespace-pre-line text-center ">
+            {clue.text}
+          </div>
+          <Image
+            className="absolute left-0 bottom-10 w-full "
+            src={getStaticImage(clue.audioImage)}
+            alt="录音"
+          />
+        </div>
+      );
+
+    case "dialogue":
+      return <DialogueContent clue={clue} />;
+
+    case "custom":
+      return <>{clue.content}</>;
+
+    default:
+      return null;
+  }
+};
+
+export default ClueContent;