feat:init

src/pages/sunzhongshan/place/place1.tsx

@@ -0,0 +1,168 @@
+import {
+  ExhibitOverlay,
+  GuideSteps,
+  GuideStepsItem,
+  Image,
+  Title,
+  Overlay,
+} 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 固定为 sunzhongshan
+const starName = "sunzhongshan";
+
+// 展品 ID 与资源路径映射，ID 用来做唯一标识
+const exhibitSrcMap: Record<1 | 2 | 3 | 4 | 5, string> = {
+  1: "sunzhongshan/place1/“南北议和”纪念章",
+  2: "sunzhongshan/place1/“四大寇”合影",
+  3: "sunzhongshan/place1/民立报",
+  4: "sunzhongshan/place1/申报",
+  5: "sunzhongshan/place1/郑观应的推荐信",
+};
+
+const SunzhongshanPlace1 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  // 学习说明对话框显示状态
+  const [showIntroDialog, setShowIntroDialog] = useState(false);
+  // 引导对话显示状态
+  const [visible, setVisible] = useState(true);
+  // 当前激活的展品 ID（只存 ID，不直接存路径，便于作为唯一标识）
+  const [activeExhibitId, setActiveExhibitId] = useState<
+    1 | 2 | 3 | 4 | 5 | null
+  >(null);
+  // 已浏览展品的 ID 集合
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+
+  const handleOpenExhibit = (index: 1 | 2 | 3 | 4 | 5) => {
+    setActiveExhibitId(index);
+  };
+
+  const handleStartLearning = () => {
+    setShowIntroDialog(false);
+    setVisible(true);
+  };
+
+  const progressCount = visited.size;
+  const total = 5;
+  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(`sunzhongshan/place1/背景`),
+      }}
+    >
+      {/* 标题 */}
+      <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-75 bottom-80"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+      {/* 展品2 */}
+      <Cursor
+        className="absolute left-108 bottom-118"
+        onClick={() => handleOpenExhibit(2)}
+        read={visited.has(2)}
+      />
+      {/* 展品3 */}
+      <Cursor
+        className="absolute left-165 bottom-90"
+        onClick={() => handleOpenExhibit(3)}
+        read={visited.has(3)}
+      />
+      {/* 展品4 */}
+      <Cursor
+        className="absolute right-192 bottom-118"
+        onClick={() => handleOpenExhibit(4)}
+        read={visited.has(4)}
+      />
+      {/* 展品5 */}
+      <Cursor
+        className="absolute right-188 bottom-88"
+        onClick={() => handleOpenExhibit(5)}
+        read={visited.has(5)}
+      />
+
+      {/* 继续前进 - 仅在完成所有展品后显示 */}
+      {completed && (
+        <Image
+          className="absolute bottom-10 right-0"
+          src={getStaticImage("components/place/r-3d前进")}
+          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="guide">
+          同学你好，欢迎来到走进故居-对话学习模块！
+          进入孙中山故居纪念馆后，我们一起来了解孙中山同志经历的7个阶段：“水乡少年
+          艰辛成长”、“商务启航 投身革命” ...
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          “苏区淬炼 崭露头角”、“延安担当 经济破局”、“恢复时期 经济奠基”
+          、“建设时期 务实兴邦”、“改革浪潮 擘画实业”
+        </GuideStepsItem>
+      </GuideSteps>
+    </div>
+  );
+};
+
+export default SunzhongshanPlace1;