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

+27 -1
View File
@@ -118,8 +118,10 @@ const ChenyunInternalization = () => {
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(() => {
@@ -145,6 +147,15 @@ const ChenyunInternalization = () => {
});
}
};
// 信件视频加载完成后自动播放
const handleLetterVideoCanPlay = () => {
if (showLetterVideo && letterVideoRef.current) {
letterVideoRef.current.play().catch((error) => {
console.warn("信件视频播放失败:", error);
});
}
};
const anchors: VideoAnchor[] = useMemo(
() =>
QUIZ_ANCHORS.map((item) => {
@@ -413,10 +424,25 @@ const ChenyunInternalization = () => {
// 提交信件的逻辑(values 为多个填空的内容)
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="恭喜你已经顺利完成了陈云纪念馆的学习,至此,你已经完成了本课程所有故居的学习,