feat:init

This commit is contained in:
zhongyidian committed 2025-12-29 19:19:10 +08:00
1 parent 53d0eeac6b
commit ae0c050010
494 files changed
+17701 -2318

No files matched your search

+56
View File
@@ -0,0 +1,56 @@
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
import { Image } from "@/components";
const Sunzhongshan = () => {
const navigate = useNavigate();
const { moduleName } = useParams<{
moduleName: string;
}>();
// starName 固定为 sunzhongshan
const starName = "sunzhongshan";
if (!moduleName) {
return null;
}
return (
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: getBackgroundImage(`${starName}/孙中山-首页`),
}}
>
<Image
className="absolute right-37 top-22"
src={getStaticImage("components/革命先驱故居-返回")}
button
onClick={() => navigate(`/entrance/${moduleName}`)}
/>
<div className="absolute right-20 top-75 flex flex-col space-y-10">
{/* 对话 */}
<Image
button
src={getStaticImage("star/一-解锁")}
onClick={() => navigate(`/${moduleName}/${starName}/place1`)}
/>
{/* 体悟 */}
<Image
button
src={getStaticImage("star/二-解锁")}
onClick={() => navigate(`/${moduleName}/${starName}/reflection`)}
/>
{/* 内化 */}
<Image
button
src={getStaticImage("star/三-解锁")}
onClick={() => navigate(`/${moduleName}/${starName}/internalization`)}
/>
</div>
</div>
);
};
export default Sunzhongshan;
@@ -0,0 +1,38 @@
import { useNavigate, useParams } from "react-router-dom";
import { Image } from "@/components";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
const starName = "sunzhongshan";
const SunzhongshanInternalization = () => {
const navigate = useNavigate();
const { moduleName } = useParams<{
moduleName: string;
}>();
return (
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: getBackgroundImage(`${starName}/internalization/底图`),
}}
>
<Image
className="absolute right-5 top-5"
src={getStaticImage("components/离开")}
button
onClick={() => {
if (moduleName && starName) {
navigate(`/${moduleName}/${starName}/home`);
}
}}
/>
<div className="flex items-center justify-center h-full">
<div className="text-white text-4xl">孙中山故居-内化模块(待完善)</div>
</div>
</div>
);
};
export default SunzhongshanInternalization;
+168
View File
@@ -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;
+151
View File
@@ -0,0 +1,151 @@
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";
const starName = "sunzhongshan";
const exhibitSrcMap: Record<1 | 2 | 3 | 4, string> = {
1: "sunzhongshan/place2/铁路计划图",
2: "sunzhongshan/place2/陆军大元帅时佩带的指挥刀",
3: "sunzhongshan/place2/917.9.10孙中山就任中华民国军政府海陆军大元帅留影",
4: "sunzhongshan/place2/实业计划",
};
const SunzhongshanPlace2 = () => {
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 [guideVisible, setGuideVisible] = useState(false);
const [guideStep, setGuideStep] = useState(0);
const handleOpenExhibit = (index: 1 | 2 | 3 | 4) => {
// if (index === 1) {
// setActiveExhibitId(1);
// setGuideVisible(true);
// setGuideStep(0);
// } else {
setActiveExhibitId(index);
// }
};
const handleGuideStepChange = (step: number) => {
setGuideStep(step);
};
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(`sunzhongshan/place2/背景`),
}}
>
<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-160 top-114"
onClick={() => handleOpenExhibit(1)}
read={visited.has(1)}
/>
<Cursor
className="absolute left-235 bottom-95"
onClick={() => handleOpenExhibit(2)}
read={visited.has(2)}
/>
<Cursor
className="absolute left-241.5 top-119"
onClick={() => handleOpenExhibit(3)}
read={visited.has(3)}
/>
<Cursor
className="absolute right-120 bottom-78"
onClick={() => handleOpenExhibit(4)}
read={visited.has(4)}
/>
{completed && (
<Image
className="absolute bottom-5 right-115"
src={getStaticImage("components/place/r-前进")}
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);
}}
/>
{/* <GuideSteps
visible={guideVisible}
onVisibleChange={setGuideVisible}
currentStep={guideStep}
onStepChange={handleGuideStepChange}
showMask={false}
highlightSelectors={[]}
zIndex={10000}
>
<GuideStepsItem speaker="student">
孙中山先生是如何讨袁护法、捍卫共和的?
</GuideStepsItem>
<GuideStepsItem speaker="guide">
让我们继续探索孙中山先生讨袁护法、捍卫共和的历程...
</GuideStepsItem>
</GuideSteps> */}
</div>
);
};
export default SunzhongshanPlace2;
+116
View File
@@ -0,0 +1,116 @@
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 = "sunzhongshan";
const exhibitSrcMap: Record<1 | 2 | 3 | 4, string> = {
1: "sunzhongshan/place3/李大钊给胡适的信",
2: "sunzhongshan/place3/中国国民党第一次全国代表大会宣言",
3: "sunzhongshan/place3/星期评论",
4: "sunzhongshan/place3/社会主义的精义",
};
const SunzhongshanPlace3 = () => {
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(`sunzhongshan/place3/背景`),
}}
>
<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-198 top-118"
onClick={() => handleOpenExhibit(1)}
read={visited.has(1)}
/>
<Cursor
className="absolute left-210 top-140"
onClick={() => handleOpenExhibit(2)}
read={visited.has(2)}
/>
<Cursor
className="absolute right-182 bottom-95"
onClick={() => handleOpenExhibit(3)}
read={visited.has(3)}
/>
<Cursor
className="absolute right-158 bottom-95"
onClick={() => handleOpenExhibit(4)}
read={visited.has(4)}
/>
{completed && (
<Image
className="absolute bottom-0 right-110"
src={getStaticImage("components/place/r-前进")}
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 SunzhongshanPlace3;
+101
View File
@@ -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 = "sunzhongshan";
const exhibitSrcMap: Record<1 | 2, string> = {
1: "sunzhongshan/place4/国事遗嘱",
2: "sunzhongshan/place4/上海各界人士在外滩码头欢迎孙中山",
};
const SunzhongshanPlace4 = () => {
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(`sunzhongshan/place4/背景`),
}}
>
<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 right-209 top-128"
onClick={() => handleOpenExhibit(1)}
read={visited.has(1)}
/>
<Cursor
className="absolute right-150 top-88"
onClick={() => handleOpenExhibit(2)}
read={visited.has(2)}
/>
{completed && (
<Image
className="absolute bottom-0 right-140"
src={getStaticImage("components/place/l-前进")}
button
onClick={() => {
navigate(`/${moduleName}/${starName}`);
}}
/>
)}
<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 SunzhongshanPlace4;
+38
View File
@@ -0,0 +1,38 @@
import { useNavigate, useParams } from "react-router-dom";
import { Image } from "@/components";
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
const starName = "sunzhongshan";
const SunzhongshanReflection = () => {
const navigate = useNavigate();
const { moduleName } = useParams<{
moduleName: string;
}>();
return (
<div
className="w-full h-full bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: getBackgroundImage(`${starName}/reflection/底图`),
}}
>
<Image
className="absolute right-5 top-5"
src={getStaticImage("components/离开")}
button
onClick={() => {
if (moduleName && starName) {
navigate(`/${moduleName}/${starName}/home`);
}
}}
/>
<div className="flex items-center justify-center h-full">
<div className="text-white text-4xl">孙中山故居-体悟模块(待完善)</div>
</div>
</div>
);
};
export default SunzhongshanReflection;