feat:init

src/pages/huangyanpei/place/place1.tsx

@@ -0,0 +1,127 @@
+import {
+  ExhibitOverlay,
+  GuideSteps,
+  GuideStepsItem,
+  Image,
+  Title,
+} from "@/components";
+import { useNavigate, useParams } from "react-router-dom";
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useState } from "react";
+import Cursor from "@/components/cursor";
+
+// starName 固定为 huangyanpei
+const starName = "huangyanpei";
+
+// 展品 ID 与资源路径映射，ID 用来做唯一标识
+const exhibitSrcMap: Record<1, string> = {
+  1: "huangyanpei/place1/3_003",
+};
+
+const HuangyanpeiPlace1 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  // 引导对话显示状态
+  const [visible, setVisible] = useState(true);
+  // 当前激活的展品 ID（只存 ID，不直接存路径，便于作为唯一标识）
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
+  // 已浏览展品的 ID 集合
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+
+  const handleOpenExhibit = (index: 1 | null) => {
+    setActiveExhibitId(index);
+  };
+
+  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/place1/3_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={() => {
+          if (moduleName && starName) {
+            navigate(`/${moduleName}/${starName}/home`);
+          }
+        }}
+      />
+
+      {/* 展品1 */}
+      <Cursor
+        className="absolute left-[calc(50%-8px)] bottom-100"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+
+      {/* 继续前进 - 仅在完成所有展品后显示 */}
+      {completed && (
+        <Image
+          className="absolute bottom-[calc(50%-140px)] right-80"
+          src={getStaticImage("huangyanpei/place1/3_005")}
+          button
+          onClick={() => {
+            navigate(`/${moduleName}/${starName}/place2`);
+          }}
+        />
+      )}
+
+      {/* 遮罩层 */}
+      <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);
+        }}
+      />
+
+      {/* 引导 */}
+      <GuideSteps
+        visible={visible}
+        onVisibleChange={setVisible}
+        showMask={true}
+        highlightSelectors={[]}
+      >
+        <GuideStepsItem speaker="student">
+          小沪！这就是黄炎培先生曾经生活过的地方吗？
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          是的，这里就是黄炎培故居。让我们一起来探索黄炎培先生的思想启蒙之路...
+        </GuideStepsItem>
+      </GuideSteps>
+    </div>
+  );
+};
+
+export default HuangyanpeiPlace1;

src/pages/huangyanpei/place/place2.tsx

@@ -0,0 +1,101 @@
+import { useState } from "react";
+import { ExhibitOverlay, Title, Image, Cursor } from "@/components";
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+
+const starName = "huangyanpei";
+
+const exhibitSrcMap: Record<1 | 2, string> = {
+  1: "huangyanpei/place2/4_004",
+  2: "huangyanpei/place2/4_005",
+};
+
+const HuangyanpeiPlace2 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+
+  const handleOpenExhibit = (index: 1 | 2) => {
+    setActiveExhibitId(index);
+  };
+
+  const progressCount = visited.size;
+  const total = 2;
+  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/place2/4_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={() => {
+          if (moduleName && starName) {
+            navigate(`/${moduleName}/${starName}/place1`);
+          }
+        }}
+      />
+
+      <Cursor
+        className="absolute left-132 top-132"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+      <Cursor
+        className="absolute left-240 top-132"
+        onClick={() => handleOpenExhibit(2)}
+        read={visited.has(2)}
+      />
+
+      {completed && (
+        <Image
+          className="absolute bottom-0 right-4"
+          src={getStaticImage("components/place/继续前进")}
+          button
+          onClick={() => {
+            navigate(`/${moduleName}/${starName}/place3`);
+          }}
+        />
+      )}
+
+      <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);
+        }}
+      />
+    </div>
+  );
+};
+
+export default HuangyanpeiPlace2;

src/pages/huangyanpei/place/place3.tsx

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { ExhibitOverlay, Title, Image, Cursor } from "@/components";
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+
+const starName = "huangyanpei";
+
+const exhibitSrcMap: Record<1 | 2 | 3, string> = {
+  1: "huangyanpei/place3/5_005",
+  2: "huangyanpei/place3/5_006",
+  3: "huangyanpei/place3/5_007",
+};
+
+const HuangyanpeiPlace3 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
+    null
+  );
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+
+  const handleOpenExhibit = (index: 1 | 2 | 3) => {
+    setActiveExhibitId(index);
+  };
+
+  const progressCount = visited.size;
+  const total = 3;
+  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/place3/5_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={() => {
+          if (moduleName && starName) {
+            navigate(`/${moduleName}/${starName}/place2`);
+          }
+        }}
+      />
+
+      <Cursor
+        className="absolute left-32 top-105"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+      <Cursor
+        className="absolute left-172 top-90"
+        onClick={() => handleOpenExhibit(2)}
+        read={visited.has(2)}
+      />
+      <Cursor
+        className="absolute right-92 top-108"
+        onClick={() => handleOpenExhibit(3)}
+        read={visited.has(3)}
+      />
+
+      {completed && (
+        <Image
+          className="absolute bottom-0 right-4"
+          src={getStaticImage("components/place/继续前进")}
+          button
+          onClick={() => {
+            navigate(`/${moduleName}/${starName}/place4`);
+          }}
+        />
+      )}
+
+      <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);
+        }}
+      />
+    </div>
+  );
+};
+
+export default HuangyanpeiPlace3;

src/pages/huangyanpei/place/place4.tsx

@@ -0,0 +1,115 @@
+import { useState } from "react";
+import { ExhibitOverlay, Title, Image, Cursor } from "@/components";
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+
+const starName = "huangyanpei";
+
+const exhibitSrcMap: Record<1 | 2 | 3 | 4, string> = {
+  1: "huangyanpei/place4/6_006",
+  2: "huangyanpei/place4/6_007",
+  3: "huangyanpei/place4/6_008",
+  4: "huangyanpei/place4/6_009",
+};
+
+const HuangyanpeiPlace4 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | 4 | null>(
+    null
+  );
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+
+  const handleOpenExhibit = (index: 1 | 2 | 3 | 4) => {
+    setActiveExhibitId(index);
+  };
+
+  const progressCount = visited.size;
+  const total = 4;
+  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/place4/6_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={() => {
+          if (moduleName && starName) {
+            navigate(`/${moduleName}/${starName}/place3`);
+          }
+        }}
+      />
+
+      <Cursor
+        className="absolute left-42 top-78"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+      <Cursor
+        className="absolute left-40 top-132"
+        onClick={() => handleOpenExhibit(2)}
+        read={visited.has(2)}
+      />
+      <Cursor
+        className="absolute left-125 top-100"
+        onClick={() => handleOpenExhibit(3)}
+        read={visited.has(3)}
+      />
+      <Cursor
+        className="absolute right-62 top-102"
+        onClick={() => handleOpenExhibit(4)}
+        read={visited.has(4)}
+      />
+
+      {completed && (
+        <Image
+          className="absolute bottom-0 right-4"
+          src={getStaticImage("components/place/继续前进")}
+          button
+          onClick={() => {
+            navigate(`/${moduleName}/${starName}/place5`);
+          }}
+        />
+      )}
+
+      <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);
+        }}
+      />
+    </div>
+  );
+};
+
+export default HuangyanpeiPlace4;

src/pages/huangyanpei/place/place5.tsx

@@ -0,0 +1,136 @@
+import { useState, useRef } from "react";
+import { ExhibitOverlay, Title, Image, Cursor, Video } from "@/components";
+import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+import type { VideoRef } from "@/components/video";
+
+const starName = "huangyanpei";
+
+const exhibitSrcMap: Record<1 | 2, string> = {
+  1: "huangyanpei/place5/7_004",
+  2: "huangyanpei/place5/场景5展品2",
+};
+
+const HuangyanpeiPlace5 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+  const [videoVisible, setVideoVisible] = useState(false);
+  const videoRef = useRef<VideoRef>(null);
+
+  const handleOpenExhibit = (index: 1 | 2) => {
+    if (index === 2) {
+      // 展品2：点击时播放视频，不展示展品
+      setVideoVisible(true);
+    } else {
+      // 展品1：正常展示展品
+      setActiveExhibitId(index);
+    }
+  };
+
+  const progressCount = visited.size;
+  const total = 2;
+  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/place5/7_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={() => {
+          if (moduleName && starName) {
+            navigate(`/${moduleName}/${starName}/place4`);
+          }
+        }}
+      />
+
+      <Cursor
+        className="absolute left-35 top-108"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+      <Cursor
+        className="absolute right-112 top-108"
+        onClick={() => handleOpenExhibit(2)}
+        read={visited.has(2)}
+      />
+
+      {completed && (
+        <Image
+          className="absolute bottom-0 right-4"
+          src={getStaticImage("components/place/继续前进")}
+          button
+          onClick={() => {
+            navigate(`/${moduleName}/${starName}/place6`);
+          }}
+        />
+      )}
+
+      {/* 展品2视频播放（全屏） */}
+      {videoVisible && (
+        <div className="fixed inset-0 z-[9999] bg-black">
+          <Video
+            ref={videoRef}
+            src={getPublicPath(
+              "video/chenyun/8陈云纪念馆16大米价格暴涨_x264.mp4"
+            )}
+            className="w-full h-full"
+            autoPlay
+            playsInline
+            preload="auto"
+            showSkipButton
+            skipText="跳过"
+            onEnded={() => {
+              setVideoVisible(false);
+              setVisited((prev) => {
+                const next = new Set(prev);
+                next.add(2);
+                return next;
+              });
+            }}
+          />
+        </div>
+      )}
+
+      <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);
+        }}
+      />
+    </div>
+  );
+};
+
+export default HuangyanpeiPlace5;

src/pages/huangyanpei/place/place6.tsx

@@ -0,0 +1,95 @@
+import { useState } from "react";
+import { ExhibitOverlay, Title, Image, Cursor } from "@/components";
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+
+const starName = "huangyanpei";
+
+const exhibitSrcMap: Record<1, string> = {
+  1: "huangyanpei/place6/8_003",
+};
+
+const HuangyanpeiPlace6 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+
+  const handleOpenExhibit = (index: 1) => {
+    setActiveExhibitId(index);
+  };
+
+  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/place6/8_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={() => {
+          if (moduleName && starName) {
+            navigate(`/${moduleName}/${starName}/place5`);
+          }
+        }}
+      />
+
+      <Cursor
+        className="absolute right-27 top-110"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+
+      {completed && (
+        <Image
+          className="absolute bottom-0 right-4"
+          src={getStaticImage("components/place/继续前进")}
+          button
+          onClick={() => {
+          navigate(`/${moduleName}/${starName}/reflection`);
+          }}
+        />
+      )}
+
+      <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);
+        }}
+      />
+    </div>
+  );
+};
+
+export default HuangyanpeiPlace6;

src/pages/huangyanpei/place/place7.tsx

@@ -0,0 +1,155 @@
+import { useState, useCallback } from "react";
+import {
+  ExhibitOverlay,
+  Title,
+  Image,
+  Cursor,
+  BambooPuzzleGame,
+} from "@/components";
+import { SuccessAlert } from "@/components/layout";
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+
+const starName = "huangyanpei";
+
+const exhibitSrcMap: Record<1 | 2, string> = {
+  1: "huangyanpei/place7/9_004",
+  2: "huangyanpei/place7/场景7展品2",
+};
+
+const HuangyanpeiPlace7 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+  const [showGame, setShowGame] = useState(false);
+  const [gameCompleted, setGameCompleted] = useState(false);
+  const [showSuccessAlert, setShowSuccessAlert] = useState(false);
+
+  const handleOpenExhibit = (index: 1 | 2) => {
+    setActiveExhibitId(index);
+  };
+
+  const progressCount = visited.size;
+  const total = 2;
+  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/place7/9_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={() => {
+          if (moduleName && starName) {
+            navigate(`/${moduleName}/${starName}/place6`);
+          }
+        }}
+      />
+
+      <Cursor
+        className="absolute left-68 top-55"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+      <Cursor
+        className="absolute left-160 bottom-50"
+        onClick={() => {
+          // 如果游戏已完成，不再打开
+          if (!gameCompleted) {
+            setShowGame(true);
+          }
+        }}
+        read={gameCompleted}
+      />
+
+      {completed && (
+        <Image
+          className="absolute bottom-0 right-0"
+          src={getStaticImage("huangyanpei/place7/9btn")}
+          button
+          onClick={() => {
+            navigate(`/${moduleName}/${starName}/home`);
+          }}
+        />
+      )}
+
+      <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);
+        }}
+      />
+
+      <BambooPuzzleGame
+        visible={showGame}
+        onClose={() => {
+          setShowGame(false);
+        }}
+        onComplete={() => {
+          // 游戏完成后，显示成功提示
+          setShowGame(false);
+          setShowSuccessAlert(true);
+        }}
+      />
+
+      <SuccessAlert
+        visible={showSuccessAlert}
+        title="拼单杠成功！"
+        onContinue={useCallback(() => {
+          console.log("onContinue called, showSuccessAlert:", showSuccessAlert);
+          // 直接设置为 false，不使用函数式更新
+          setShowSuccessAlert(false);
+          setGameCompleted(true);
+          setVisited((prev) => {
+            const next = new Set(prev);
+            next.add(2);
+            return next;
+          });
+        }, [showSuccessAlert])}
+        onClose={useCallback(() => {
+          console.log("onClose called, showSuccessAlert:", showSuccessAlert);
+          // 直接设置为 false，不使用函数式更新
+          setShowSuccessAlert(false);
+          setGameCompleted(true);
+          setVisited((prev) => {
+            const next = new Set(prev);
+            next.add(2);
+            return next;
+          });
+        }, [showSuccessAlert])}
+      />
+    </div>
+  );
+};
+
+export default HuangyanpeiPlace7;