feat:init

src/pages/chenyun/place/place5.tsx

@@ -0,0 +1,159 @@
+import { useState } from "react";
+import {
+  ExhibitOverlay,
+  Title,
+  Image,
+  Cursor,
+  Video,
+  Overlay,
+} from "@/components";
+import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+
+// starName 固定为 chenyun
+const starName = "chenyun";
+
+// 展品 ID 与资源路径映射
+const exhibitSrcMap: Record<1 | 2 | 3, string> = {
+  1: "chenyun/place5/场景5展品1",
+  2: "chenyun/place5/场景5展品2",
+  3: "chenyun/place5/场景5展品3",
+};
+// 展品描述映射
+const exhibitDescriptionMap: Record<1 | 2 | 3, string> = {
+  1: "",
+  2: "延安时期因为国民党的封锁，陕甘宁边区经济困难。陈云转战陕甘宁边区主持财经工作，他遇到了很多经济难题。1944年新春伊始，陈云开始担任西北财经办事处副主任，工作转到财经方面，这是陈云以主要精力从事领导经济工作的开始。当时，陕甘宁边区在国民党严密封锁下，财经状况严峻，边区物价猛涨，老百姓日常生活必需的布匹和粮食十分缺乏。国民党顽固派封锁边区，企图“不让一粒粮、一尺布进入边区”，同时千方百计阻止边区食盐出口。",
+  3: "",
+};
+const ChenyunPlace5 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
+    null
+  );
+  const [videoVisible3, setVideoVisible3] = useState(false);
+
+  const handleOpenExhibit = (index: 1 | 2 | 3) => {
+    if (index === 3) {
+      // 展品3：播放视频，不打开展品
+      setVideoVisible3(true);
+      return;
+    }
+    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(`chenyun/place5/场景5`),
+      }}
+    >
+      {/* 标题 */}
+      <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`);
+          }
+        }}
+      />
+
+      {/* 展品1 */}
+      <Cursor
+        className="absolute left-30 top-70"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+      {/* 展品2 */}
+      <Cursor
+        className="absolute left-107 top-72"
+        onClick={() => handleOpenExhibit(2)}
+        read={visited.has(2)}
+      />
+
+      {/* 展品3 */}
+      <Cursor
+        className="absolute right-170 top-84"
+        onClick={() => handleOpenExhibit(3)}
+        read={visited.has(3)}
+      />
+
+      {/* 继续前进 - 仅在完成所有展品后显示 */}
+      {completed && (
+        <Image
+          className="absolute bottom-5 right-20"
+          src={getStaticImage("chenyun/place5/继续前进4")}
+          button
+          onClick={() => {
+            navigate(`/${moduleName}/${starName}/place6`);
+          }}
+        />
+      )}
+
+      {/* 展品3视频播放（全屏） */}
+      {videoVisible3 && (
+        <Video
+          src={getPublicPath("video/chenyun/chenyun_07.mp4")}
+          className="w-full h-full"
+          autoPlay
+          playsInline
+          showSkipButton
+          onEnded={() => {
+            setVideoVisible3(false);
+            setVisited((prev) => {
+              const next = new Set(prev);
+              next.add(3);
+              return next;
+            });
+          }}
+        />
+      )}
+
+      {/* 遮罩层 */}
+      <ExhibitOverlay
+        visible={activeExhibitId !== null}
+        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        description={
+          activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
+        }
+        autoPlayDescription={activeExhibitId === 2}
+        onClose={() => {
+          if (activeExhibitId !== null) {
+            setVisited((prev) => {
+              const next = new Set(prev);
+              next.add(activeExhibitId);
+              return next;
+            });
+          }
+          setActiveExhibitId(null);
+        }}
+      />
+    </div>
+  );
+};
+
+export default ChenyunPlace5;