feat: remove LuxunReflection component and update routing for new reflection scenes
- Deleted the LuxunReflection component. - Updated routing to include new reflection scenes: reflection2 and reflection3.
This commit is contained in:
1 parent
cad38e43df
commit
dd1cabfb87
49 files changed
+522
-39
No files matched your search
@@ -0,0 +1,142 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Title, Image, Cursor, ExhibitOverlay } from "@/components";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
|
||||
const starName = "luxun";
|
||||
|
||||
const routeMap: Record<1 | 2 | 3 | 4, string> = {
|
||||
1: "luxun/reflection/scene3/绍兴到北京",
|
||||
2: "luxun/reflection/scene3/北京到厦门",
|
||||
3: "luxun/reflection/scene3/厦门广州",
|
||||
4: "luxun/reflection/scene3/广州上海",
|
||||
};
|
||||
|
||||
const themeMap: Record<5 | 6, string> = {
|
||||
5: "luxun/reflection/scene3/家国情怀",
|
||||
6: "luxun/reflection/scene3/批判现实",
|
||||
};
|
||||
|
||||
const LuxunReflectionScene3 = () => {
|
||||
const navigate = useNavigate();
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string;
|
||||
}>();
|
||||
|
||||
const [activeRouteId, setActiveRouteId] = useState<1 | 2 | 3 | 4 | null>(null);
|
||||
const [activeThemeId, setActiveThemeId] = useState<5 | 6 | null>(null);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
const handleOpenRoute = (routeId: 1 | 2 | 3 | 4) => {
|
||||
setActiveRouteId(routeId);
|
||||
};
|
||||
|
||||
const handleOpenTheme = (themeId: 5 | 6) => {
|
||||
setActiveThemeId(themeId);
|
||||
};
|
||||
|
||||
const progressCount = visited.size;
|
||||
const total = 6;
|
||||
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(`${starName}/reflection/scene3/底图`),
|
||||
}}
|
||||
>
|
||||
<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(`${starName}/reflection/scene3/离开`)}
|
||||
button
|
||||
onClick={() => {
|
||||
if (moduleName && starName) {
|
||||
navigate(`/${moduleName}/${starName}/home`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 路线点击区域 - 根据实际位置调整 */}
|
||||
<Cursor
|
||||
className="absolute left-20 top-30"
|
||||
onClick={() => handleOpenRoute(1)}
|
||||
read={visited.has(1)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute left-40 top-35"
|
||||
onClick={() => handleOpenRoute(2)}
|
||||
read={visited.has(2)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute left-60 top-40"
|
||||
onClick={() => handleOpenRoute(3)}
|
||||
read={visited.has(3)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute left-50 top-50"
|
||||
onClick={() => handleOpenRoute(4)}
|
||||
read={visited.has(4)}
|
||||
/>
|
||||
|
||||
{/* 主题点击区域 */}
|
||||
<Cursor
|
||||
className="absolute left-30 top-60"
|
||||
onClick={() => handleOpenTheme(5)}
|
||||
read={visited.has(5)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute left-70 top-55"
|
||||
onClick={() => handleOpenTheme(6)}
|
||||
read={visited.has(6)}
|
||||
/>
|
||||
|
||||
{/* 路线展品弹窗 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeRouteId !== null}
|
||||
src={activeRouteId ? routeMap[activeRouteId] : ""}
|
||||
onClose={() => {
|
||||
if (activeRouteId !== null) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(activeRouteId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
setActiveRouteId(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 主题展品弹窗 */}
|
||||
<ExhibitOverlay
|
||||
visible={activeThemeId !== null}
|
||||
src={activeThemeId ? themeMap[activeThemeId] : ""}
|
||||
onClose={() => {
|
||||
if (activeThemeId !== null) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(activeThemeId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
setActiveThemeId(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default LuxunReflectionScene3;
|
||||
Reference in new issue
Block a user