feat:init

src/pages/huangyanpei/reflection/scene3.tsx

@@ -0,0 +1,98 @@
+import { useState } from "react";
+import { Title, Image, Cursor, ExhibitOverlay } from "@/components";
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+
+const starName = "huangyanpei";
+
+const exhibitSrcMap: Record<1, string> = {
+  // 预留展品图片路径：请在 images 中放置对应资源
+  1: "huangyanpei/reflection/scene3/11_002",
+};
+
+const HuangyanpeiReflectionScene3 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+
+  if (!moduleName) {
+    return null;
+  }
+
+  const progressCount = visited.size;
+  const total = 1;
+  const completed = progressCount >= total;
+  const subtitle = completed
+    ? "探索中华职业学院·立业之本·铁工科(已完成)"
+    : `探索中华职业学院·立业之本·铁工科(${progressCount}/${total})`;
+  const subtitleClassName = completed
+    ? "text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]"
+    : undefined;
+
+  return (
+    <div
+      className="w-full h-full bg-cover bg-center bg-no-repeat"
+      style={{
+        backgroundImage: getBackgroundImage(
+          `huangyanpei/reflection/scene3_001`
+        ),
+      }}
+    >
+      <Title
+        title="跨越时空"
+        subtitle={subtitle}
+        subtitleClassName={subtitleClassName}
+        className="absolute top-10 left-1/2 -translate-x-1/2"
+      />
+
+      <Image
+        className="absolute right-5 top-5"
+        src={getStaticImage("components/离开")}
+        button
+        onClick={() => {
+          navigate(`/${moduleName}/${starName}/home`);
+        }}
+      />
+
+      {/* 互动展品光标：后续可替换为拖拽/选择类互动 */}
+      <Cursor
+        className="absolute left-96 top-90"
+        onClick={() => setActiveExhibitId(1)}
+        read={visited.has(1)}
+      />
+
+      {/* 展品遮罩：当前使用单张图片，占位为后续互动内容 */}
+      <ExhibitOverlay
+        visible={activeExhibitId !== null}
+        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        onClose={() => {
+          if (activeExhibitId !== null) {
+            setVisited((prev) => {
+              const next = new Set(prev);
+              next.add(activeExhibitId);
+              return next;
+            });
+          }
+          setActiveExhibitId(null);
+        }}
+      />
+
+      {completed && (
+        <Image
+          className="absolute bottom-0 right-4"
+          src={getStaticImage("components/place/继续前进")}
+          button
+          onClick={() => {
+            navigate(`/${moduleName}/${starName}/reflection4`);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default HuangyanpeiReflectionScene3;