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
@@ -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);
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
Reference in new issue
Block a user