feat:init

2025-12-29 19:19:10 +08:00
1 parent 53d0eeac6b
commit ae0c050010
@@ -0,0 +1,150 @@
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+import { Image } from "@/components";
+//英文命名 "革命先驱" | "文化名人" | "艺术名家" | "经济巨擘"
+type ModuleName = "revolutionary" | "cultural" | "artistic" | "economic";
+
+interface Star {
+  image: string;
+  name: string;
+  starName: string;
+}
+
+interface EntranceBackground {
+  backgroundImage: string;
+  //Star1
+  Star: {
+    Star1: Star;
+    Star2: Star;
+  };
+}
+
+/**
+ * 故居入口页
+ * 根据模块名称显示不同的背景图
+ * 根据模块名称显示不同的进入按钮
+ * 革命先驱：毛泽东、孙中山
+ * 文化名人：鲁迅、黄炎培
+ * 艺术名家：聂耳、刘海栗
+ * 经济巨擘：荣德生、陈云
+ *
+ */
+const EntranceBackgroundMap: Record<ModuleName, EntranceBackground> = {
+  revolutionary: {
+    backgroundImage: getBackgroundImage("entrance/革命先驱"),
+    Star: {
+      Star1: {
+        image: getStaticImage("entrance/毛泽东故居入口"),
+        name: "毛泽东",
+        starName: "maozedong",
+      },
+      Star2: {
+        image: getStaticImage("entrance/孙中山故居入口-解锁"),
+        name: "孙中山",
+        starName: "sunzhongshan",
+      },
+    },
+  },
+  cultural: {
+    backgroundImage: getBackgroundImage("entrance/文化名人"),
+    Star: {
+      Star1: {
+        image: getStaticImage("entrance/鲁迅故居-解锁"),
+        name: "鲁迅",
+        starName: "luxun",
+      },
+      Star2: {
+        image: getStaticImage("entrance/黄元培-解锁"),
+        name: "黄炎培",
+        starName: "huangyanpei",
+      },
+    },
+  },
+  artistic: {
+    backgroundImage: getBackgroundImage("entrance/艺术名家"),
+    Star: {
+      Star1: {
+        image: "",
+        name: "聂耳",
+        starName: "nieer",
+      },
+      Star2: {
+        image: "",
+        name: "刘海栗",
+        starName: "liuhaili",
+      },
+    },
+  },
+  economic: {
+    backgroundImage: getBackgroundImage("entrance/经济"),
+    Star: {
+      Star1: {
+        image: getStaticImage("entrance/荣德生-解锁"),
+        name: "荣德生",
+        starName: "rongdesheng",
+      },
+      Star2: {
+        image: getStaticImage("entrance/陈云故居-解锁"),
+        name: "陈云",
+        starName: "chenyun",
+      },
+    },
+  },
+};
+
+const Entrance = () => {
+  const { moduleName } = useParams();
+  const navigate = useNavigate();
+  //   const decodedModuleName = decodeURIComponent(moduleName || "");
+  const { backgroundImage, Star } =
+    EntranceBackgroundMap[moduleName as ModuleName] || {};
+  if (!Star) {
+    return null;
+  }
+  const { Star1, Star2 } = Star;
+  return (
+    <div
+      className="w-full h-full bg-cover bg-center bg-no-repeat"
+      style={{ backgroundImage }}
+    >
+      <Image
+        className="absolute bottom-5 right-5"
+        src={getStaticImage("entrance/入口-返回")}
+        button
+        onClick={() => navigate("/menu")}
+      />
+      {/* 名人1 */}
+      <Image
+        className="absolute left-73 top-[calc(50%+38px)] -translate-y-1/2"
+        src={Star1.image}
+      />
+      {Star1.image && (
+        <Image
+          className="absolute left-90.5 bottom-40"
+          src={getStaticImage("entrance/点击前往浏览")}
+          button
+          onClick={() => navigate(`/${moduleName}/${Star1.starName}/home`)}
+        />
+      )}
+      {/* 名人2 */}
+      <Image
+        className="absolute right-77.5 top-[calc(50%+39px)] -translate-y-1/2"
+        src={Star2.image}
+      />
+      {Star2.image && (
+        <Image
+          className="absolute right-90.5 bottom-40"
+          src={getStaticImage("entrance/点击前往浏览")}
+          button
+          onClick={() => navigate(`/${moduleName}/${Star2.starName}/home`)}
+        />
+      )}
+      {/* <Image
+        className="absolute right-5 top-1/2 -translate-y-1/2"
+        src={Star2.image}
+      /> */}
+    </div>
+  );
+};
+
+export default Entrance;