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 -21
View File
@@ -7,6 +7,8 @@ import { useNavigate, useParams } from "react-router-dom";
import TowelSalesDialog from "./scene4/TowelSalesDialog";
import type { VideoRef } from "@/components/video";
import { QuizDialog } from "./components";
import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
import { useHuangyanpeiStore } from "@/store/huangyanpeiStore";
const starName = "huangyanpei";
@@ -16,8 +18,9 @@ const HuangyanpeiReflectionScene4 = () => {
moduleName: string;
}>();
const { triggerPuzzleAnimation } = usePuzzleAnimation();
const [_activeExhibitId, _setActiveExhibitId] = useState<1 | 2 | null>(null);
const [visited, setVisited] = useState<Set<number>>(new Set());
const [showQuiz1, setShowQuiz1] = useState(false);
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
const [showTowelDialog, setShowTowelDialog] = useState(false);
@@ -26,6 +29,15 @@ const HuangyanpeiReflectionScene4 = () => {
const [showGuide1, setShowGuide1] = useState(true);
const [showErrorAlertForQuiz, setShowErrorAlertForQuiz] = useState(false);
// 使用持久化的reflection cursor状态
const scene = "scene4";
const { markReflectionCursorVisited, getVisitedReflectionCursors } =
useHuangyanpeiStore();
// 从 store 获取已完成的cursor,转换为 Set 用于兼容现有代码
const visitedCursors = getVisitedReflectionCursors(scene);
const visited = new Set(visitedCursors);
//喇叭考题弹窗
const [showQuizDialog, setShowQuizDialog] = useState(false);
@@ -33,22 +45,14 @@ const HuangyanpeiReflectionScene4 = () => {
const handleSuccessAlertContinue = useCallback(() => {
setShowSuccessAlert(false);
// 更新visited状态
setVisited((prev) => {
const next = new Set(prev);
next.add(1);
return next;
});
}, []);
markReflectionCursorVisited(scene, 1);
}, [markReflectionCursorVisited, scene]);
const handleSuccessAlertClose = useCallback(() => {
setShowSuccessAlert(false);
// 更新visited状态
setVisited((prev) => {
const next = new Set(prev);
next.add(1);
return next;
});
}, []);
markReflectionCursorVisited(scene, 1);
}, [markReflectionCursorVisited, scene]);
if (!moduleName) {
return null;
@@ -106,14 +110,18 @@ const HuangyanpeiReflectionScene4 = () => {
{/* 互动展品光标1 */}
<Cursor
className="absolute left-100 bottom-88"
onClick={() => setShowQuiz1(true)}
onClick={() => {
setShowQuiz1(true);
}}
read={visited.has(1)}
/>
{/* 互动展品光标2 */}
<Cursor
className="absolute right-82 bottom-88"
onClick={() => setShowTowelDialog(true)}
onClick={() => {
setShowTowelDialog(true);
}}
read={visited.has(2)}
/>
@@ -166,11 +174,9 @@ const HuangyanpeiReflectionScene4 = () => {
onClose={() => setShowTowelDialog(false)}
onComplete={() => {
// 完成拖拽后更新visited状态
setVisited((prev) => {
const next = new Set(prev);
next.add(2);
return next;
});
markReflectionCursorVisited(scene, 2);
triggerPuzzleAnimation(15);
}}
/>
@@ -218,7 +224,7 @@ const HuangyanpeiReflectionScene4 = () => {
onClose={() => setShowQuizDialog(false)}
onComplete={() => {
setShowQuizDialog(false);
setVisited((prev) => new Set(prev).add(3));
markReflectionCursorVisited(scene, 3);
}}
/>