feat: 添加全局键盘快捷键和更新故居数据,提升用户体验
- 在 main.tsx 中添加全局键盘快捷键功能,允许用户通过 Ctrl+Shift+R 重置所有缓存。 - 更新多个故居的拼图数据,增加黄炎培和鲁迅的相关信息,丰富学习内容。 - 调整 ResidenceLayout 组件以支持新的故居,确保数据一致性。 - 清理不再使用的拼图布局配置文件,提升代码整洁性。
This commit is contained in:
1 parent
8ba36a4a1a
commit
a365964f54
155 files changed
+1387
-348
No files matched your search
@@ -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="恭喜你已经顺利完成了黄炎培故居的学习,请继续前往下一个故居吧!"
|
||||
|
||||
Reference in new issue
Block a user