feat:init

2025-12-29 19:19:10 +08:00
1 parent 53d0eeac6b
commit ae0c050010
@@ -0,0 +1,164 @@
+import { useState } from "react";
+import {
+  ExhibitOverlay,
+  Title,
+  Image,
+  Cursor,
+  GuideSteps,
+  GuideStepsItem,
+} from "@/components";
+import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { useNavigate, useParams } from "react-router-dom";
+
+// starName 固定为 chenyun
+const starName = "chenyun";
+
+// 展品 ID 与资源路径映射
+const exhibitSrcMap: Record<1 | 2, string> = {
+  1: "chenyun/place2/场景2展品1",
+  2: "chenyun/place2/场景2展品2",
+};
+
+// 展品描述映射
+const exhibitDescriptionMap: Record<1 | 2, string> = {
+  1: "同学你看，这里有一幅陈云提写的颜安小学。陈云在青浦县乙种商业学校学习了一个多月后，又因经济困难不得不辍学回家。多亏当地知识分子、颜安小学校长杜枢，他免费保荐陈云入颜安小学高小部读书。颜安小学实行的新式教育开阔了陈云的视野，五四运动后，颜安小学师生积极投入反帝爱国运动，为陈云日后加入中国共产党埋下了思想的种子。",
+  2: "",
+};
+const ChenyunPlace2 = () => {
+  const navigate = useNavigate();
+  const { moduleName } = useParams<{
+    moduleName: string;
+  }>();
+
+  // 当前激活展品 ID，只存 ID 做唯一标识
+  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
+  // 已浏览展品 ID 集合
+  const [visited, setVisited] = useState<Set<number>>(new Set());
+  // GuideSteps 显示状态
+  const [guideVisible, setGuideVisible] = useState(false);
+  // GuideSteps 当前步骤
+  const [guideStep, setGuideStep] = useState(0);
+
+  const handleOpenExhibit = (index: 1 | 2) => {
+    if (index === 1) {
+      // 展品1：点击时同时打开展品和引导对话，从第1步开始
+      setActiveExhibitId(1);
+      setGuideVisible(true);
+      setGuideStep(0);
+    } else {
+      // 展品2：直接打开
+      setActiveExhibitId(index);
+    }
+  };
+
+  // 监听GuideSteps步骤变化，仅同步当前步骤
+  const handleGuideStepChange = (step: number) => {
+    setGuideStep(step);
+  };
+
+  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(`chenyun/place2/场景2`),
+      }}
+    >
+      {/* 标题 */}
+      <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`);
+          }
+        }}
+      />
+
+      {/* 展品1 */}
+      <Cursor
+        className="absolute left-100 top-100"
+        onClick={() => handleOpenExhibit(1)}
+        read={visited.has(1)}
+      />
+      {/* 展品2 */}
+      <Cursor
+        className="absolute left-210 top-100"
+        onClick={() => handleOpenExhibit(2)}
+        read={visited.has(2)}
+      />
+
+      {/* 继续前进 - 仅在完成所有展品后显示 */}
+      {completed && (
+        <Image
+          className="absolute bottom-0 right-160"
+          src={getStaticImage("chenyun/place2/继续前进2")}
+          button
+          onClick={() => {
+            navigate(`/${moduleName}/${starName}/place3`);
+          }}
+        />
+      )}
+
+      {/* 遮罩层 */}
+      <ExhibitOverlay
+        visible={activeExhibitId !== null}
+        src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
+        description={
+          activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
+        }
+        autoPlayDescription={activeExhibitId === 1}
+        onClose={() => {
+          if (activeExhibitId !== null) {
+            setVisited((prev) => {
+              const next = new Set(prev);
+              next.add(activeExhibitId);
+              return next;
+            });
+          }
+          setActiveExhibitId(null);
+        }}
+      />
+
+      {/* 展品1的引导对话 */}
+      <GuideSteps
+        visible={guideVisible}
+        onVisibleChange={setGuideVisible}
+        currentStep={guideStep}
+        onStepChange={handleGuideStepChange}
+        showMask={false}
+        highlightSelectors={[]}
+        zIndex={10000}
+      >
+        <GuideStepsItem speaker="student">
+          那陈云爷爷是怎么有机会到图中的青浦县乙种商业学校读书的呀？
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          因为家贫，初小读完的陈云便辍学在家。后在舅母亲戚的资助下，陈云才到青浦县乙种商业学校学习珠算和记账的，他在很短时间里就基本掌握了珠算，还初步学会写账，这为陈云日后从事经济工作打下了基础。
+        </GuideStepsItem>
+        <GuideStepsItem speaker="guide">
+          陈云在党内以“铁算盘”著称，他在经济工作中能熟练使用算盘，就得益于少年时在青浦县立乙种商业学校的学习。
+        </GuideStepsItem>
+      </GuideSteps>
+    </div>
+  );
+};
+
+export default ChenyunPlace2;