feat: 添加全局键盘快捷键和更新故居数据,提升用户体验

- 在 main.tsx 中添加全局键盘快捷键功能,允许用户通过 Ctrl+Shift+R 重置所有缓存。
- 更新多个故居的拼图数据,增加黄炎培和鲁迅的相关信息,丰富学习内容。
- 调整 ResidenceLayout 组件以支持新的故居,确保数据一致性。
- 清理不再使用的拼图布局配置文件,提升代码整洁性。
This commit is contained in:
zhongyidian committed 2026-01-28 15:08:28 +08:00
1 parent 8ba36a4a1a
commit a365964f54
155 files changed
+1387 -348

No files matched your search

+32 -1
View File
@@ -14,6 +14,7 @@ import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
import { SuccessAlert, DragQuizPanel } from "@/components/layout";
import { MultipleChoiceQuizPanel } from "@/components/layout/quiz";
import { GuideSteps, GuideStepsItem } from "@/components";
import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
type QuizOption = {
value: string;
@@ -138,6 +139,8 @@ const HuangyanpeiInternalization = () => {
const navigate = useNavigate();
const { moduleName } = useParams<{ moduleName: string }>();
const { triggerPuzzleAnimation } = usePuzzleAnimation();
const [narrationVisible, setNarrationVisible] = useState(false);
const [activeSuccess, setActiveSuccess] = useState<string | null>(null);
const [successContent, setSuccessContent] = useState<string>("");
@@ -154,8 +157,10 @@ const HuangyanpeiInternalization = () => {
const [showVideo, setShowVideo] = useState(false);
const [postGuideVisible, setPostGuideVisible] = useState(false);
const [showLetter, setShowLetter] = useState(false);
const [showLetterVideo, setShowLetterVideo] = useState(false);
const [showStudyGuide, setShowStudyGuide] = useState(false);
const videoRef = useRef<VideoRef>(null);
const letterVideoRef = useRef<VideoRef>(null);
const audioRef = useRef<HTMLAudioElement | null>(null);
useEffect(() => {
@@ -180,6 +185,15 @@ const HuangyanpeiInternalization = () => {
}
};
// 信件视频加载完成后自动播放
const handleLetterVideoCanPlay = () => {
if (showLetterVideo && letterVideoRef.current) {
letterVideoRef.current.play().catch((error) => {
console.warn("信件视频播放失败:", error);
});
}
};
const anchors: VideoAnchor[] = useMemo(
() =>
QUIZ_ANCHORS.map((item) => {
@@ -275,6 +289,7 @@ const HuangyanpeiInternalization = () => {
const cb = resumeCallback;
setResumeCallback(null);
cb?.();
triggerPuzzleAnimation(16);
}}
/>
</>
@@ -343,6 +358,7 @@ const HuangyanpeiInternalization = () => {
successContent,
dragQuizValues,
dragQuizErrors,
triggerPuzzleAnimation,
]
);
@@ -458,10 +474,25 @@ const HuangyanpeiInternalization = () => {
onSubmit={(values: string[]) => {
console.log("提交信件", values);
setShowLetter(false);
setShowStudyGuide(true);
setShowLetterVideo(true);
}}
/>
{/* 信件关闭后的视频 */}
{showLetterVideo && (
<Video
ref={letterVideoRef}
src={getPublicPath("video/letter/neihua_jixin.mp4")}
className="h-full w-full"
playsInline
onCanPlay={handleLetterVideoCanPlay}
onEnded={() => {
setShowLetterVideo(false);
setShowStudyGuide(true);
}}
/>
)}
<EndingOverlay
visible={showStudyGuide}
text="恭喜你已经顺利完成了黄炎培故居的学习,请继续前往下一个故居吧!"