feat:添加黄炎培成长之路页面内容；学业选择框和思想选择框
This commit is contained in:
zhongyidian committed
1 parent
ae0c050010
commit
66f460633a
5 files changed
+455
-29
No files matched your search
@@ -0,0 +1,201 @@
|
||||
import { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { cn, getStaticImage } from "@/lib/utils";
|
||||
import { Image } from "@/components";
|
||||
import { useScale } from "@/contexts/ScaleContext";
|
||||
|
||||
export interface ChoiceDialog1Props {
|
||||
/** 是否可见 */
|
||||
visible?: boolean;
|
||||
/** 关闭回调 */
|
||||
onClose?: () => void;
|
||||
/** 选择回调 */
|
||||
onSelect?: (choice: "读书" | "没出息" | "女子不能上学") => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 第一个选择弹窗：人物和三个选择
|
||||
* - 使用蒙版遮罩作为背景
|
||||
* - 显示人物10_004和三个选择选项
|
||||
*/
|
||||
const ChoiceDialog1 = ({
|
||||
visible = true,
|
||||
onClose,
|
||||
onSelect,
|
||||
}: ChoiceDialog1Props) => {
|
||||
const maskSrc = getStaticImage("components/蒙版遮罩");
|
||||
const backSrc = getStaticImage("components/关闭");
|
||||
const characterSrc = getStaticImage("huangyanpei/reflection/scene2/10_004");
|
||||
const choice1Src = getStaticImage("huangyanpei/reflection/scene2/10_005");
|
||||
const choice2Src = getStaticImage("huangyanpei/reflection/scene2/10_006");
|
||||
const choice3Src = getStaticImage("huangyanpei/reflection/scene2/10_007");
|
||||
|
||||
const { scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
// SSR 兼容
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const handleClose = useCallback(
|
||||
(e: React.MouseEvent<HTMLImageElement>) => {
|
||||
e.stopPropagation();
|
||||
onClose?.();
|
||||
},
|
||||
[onClose]
|
||||
);
|
||||
|
||||
const handleChoiceClick = useCallback(
|
||||
(choice: "读书" | "没出息" | "女子不能上学") => {
|
||||
onSelect?.(choice);
|
||||
onClose?.();
|
||||
},
|
||||
[onSelect, onClose]
|
||||
);
|
||||
|
||||
// 样式
|
||||
const overlayStyle = useMemo<React.CSSProperties>(
|
||||
() => ({
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
zIndex: 9999,
|
||||
pointerEvents: "none",
|
||||
}),
|
||||
[]
|
||||
);
|
||||
|
||||
const scaledContainerStyle = useMemo<React.CSSProperties>(
|
||||
() => ({
|
||||
position: "absolute",
|
||||
width: `${DESIGN_WIDTH}px`,
|
||||
height: `${DESIGN_HEIGHT}px`,
|
||||
left: `${offsetX}px`,
|
||||
top: `${offsetY}px`,
|
||||
transform: `scale(${scale})`,
|
||||
transformOrigin: "top left",
|
||||
overflow: "hidden",
|
||||
}),
|
||||
[scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT]
|
||||
);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
const content = (
|
||||
<AnimatePresence>
|
||||
{visible && (
|
||||
<motion.div
|
||||
key="choice-dialog-1"
|
||||
style={overlayStyle}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: "easeInOut" }}
|
||||
>
|
||||
<div style={scaledContainerStyle}>
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-0 flex flex-col items-center justify-center",
|
||||
"bg-black/70"
|
||||
)}
|
||||
style={{ pointerEvents: "auto" }}
|
||||
>
|
||||
{/* 背景蒙版 */}
|
||||
{maskSrc && (
|
||||
<Image
|
||||
src={maskSrc}
|
||||
className="absolute inset-0 w-full h-full object-cover select-none pointer-events-none"
|
||||
aria-hidden
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 返回按钮 */}
|
||||
{onClose && (
|
||||
<Image
|
||||
src={backSrc}
|
||||
onClick={handleClose}
|
||||
alt="返回"
|
||||
className="absolute top-5 right-5 z-20"
|
||||
button
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 内容区域 */}
|
||||
<div className="relative z-10 w-full h-full flex items-center justify-between px-20">
|
||||
{/* 人物 - 左侧 */}
|
||||
<div className="flex-shrink-0">
|
||||
<img src={characterSrc} alt="人物" />
|
||||
</div>
|
||||
|
||||
{/* 三个选择选项 - 右侧水平排列 */}
|
||||
<div className="flex items-center justify-center gap-16 flex-1">
|
||||
{/* 选择A：读书 */}
|
||||
<div
|
||||
className="flex flex-col items-center cursor-pointer transition-transform duration-200 hover:scale-105 active:scale-95"
|
||||
onClick={() => handleChoiceClick("读书")}
|
||||
>
|
||||
{/* 标签A */}
|
||||
<div className="text-7xl font-bold text-[#ffa500] mb-3 [text-shadow:_3px_3px_0_#fff,_-3px_-3px_0_#fff,_3px_-3px_0_#fff,_-3px_3px_0_#fff]">
|
||||
A
|
||||
</div>
|
||||
{/* 图标 */}
|
||||
<img src={choice1Src} alt="读书" className="mb-3" />
|
||||
{/* 文字说明 */}
|
||||
<div className="text-black text-4xl text-center leading-relaxed font-bold">
|
||||
读书只为
|
||||
<br />
|
||||
升官发财
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 选择B：没出息 */}
|
||||
<div
|
||||
className="flex flex-col items-center cursor-pointer transition-transform duration-200 hover:scale-105 active:scale-95"
|
||||
onClick={() => handleChoiceClick("没出息")}
|
||||
>
|
||||
{/* 标签B */}
|
||||
<div className="text-7xl font-bold text-[#ffa500] mb-3 [text-shadow:_3px_3px_0_#fff,_-3px_-3px_0_#fff,_3px_-3px_0_#fff,_-3px_3px_0_#fff]">
|
||||
B
|
||||
</div>
|
||||
{/* 图标 */}
|
||||
<img src={choice2Src} alt="没出息" className="mb-3" />
|
||||
{/* 文字说明 */}
|
||||
<div className="text-black text-4xl text-center leading-relaxed font-bold">
|
||||
手工劳作
|
||||
<br />
|
||||
没出息
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 选择C：女子不能上学 */}
|
||||
<div
|
||||
className="flex flex-col items-center cursor-pointer transition-transform duration-200 hover:scale-105 active:scale-95"
|
||||
onClick={() => handleChoiceClick("女子不能上学")}
|
||||
>
|
||||
{/* 标签C */}
|
||||
<div className="text-7xl font-bold text-[#ffa500] mb-3 [text-shadow:_3px_3px_0_#fff,_-3px_-3px_0_#fff,_3px_-3px_0_#fff,_-3px_3px_0_#fff]">
|
||||
C
|
||||
</div>
|
||||
{/* 图标 */}
|
||||
<img src={choice3Src} alt="女子不能上学" className="mb-3" />
|
||||
{/* 文字说明 */}
|
||||
<div className="text-black text-4xl text-center leading-relaxed font-bold">
|
||||
女子
|
||||
<br />
|
||||
不能上学
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
|
||||
return createPortal(content, document.body);
|
||||
};
|
||||
|
||||
export default ChoiceDialog1;
|
||||
Reference in new issue
Block a user