feat: 更新拖拽题功能和图像资源，提升学习体验
- 在 DragQuizPanel 组件中添加空白分隔符功能，增强用户交互性。 - 更新多个场景中的图像资源，确保视觉内容的准确性和一致性。 - 调整引导对话文本，提升信息传达的清晰度。 - 引入新的拖拽题逻辑，优化用户填写体验。
This commit is contained in:
zhongyidian committed
1 parent
9184c41cc7
commit
cf64e7ec50
25 files changed
+726
-241
No files matched your search
@@ -10,6 +10,7 @@ import {
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useCursorController } from "@/hooks/useCursorController";
|
||||
|
||||
// starName 固定为 luxun
|
||||
const starName = "luxun";
|
||||
@@ -45,6 +46,15 @@ const LuxunPlace1 = () => {
|
||||
// 已浏览展品的 ID 集合
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// Cursor 顺序控制：1 -> 2
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1],
|
||||
dependencies: {
|
||||
2: [1],
|
||||
},
|
||||
visited: visited,
|
||||
});
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
if (index === 1) {
|
||||
setVisibleIndex(0);
|
||||
@@ -102,12 +112,14 @@ const LuxunPlace1 = () => {
|
||||
className="absolute left-[calc(50%-48px)] top-80"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 展品2 */}
|
||||
<Cursor
|
||||
className="absolute left-[calc(50%)] bottom-60"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
|
||||
{/* 继续前进 - 仅在完成所有展品且对话结束后显示 */}
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useState } from "react";
|
||||
import { useCursorController } from "@/hooks/useCursorController";
|
||||
|
||||
// starName 固定为 luxun
|
||||
const starName = "luxun";
|
||||
@@ -31,6 +32,16 @@ const LuxunPlace2 = () => {
|
||||
);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// Cursor 顺序控制：1 -> 2 -> 3
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1],
|
||||
dependencies: {
|
||||
2: [1],
|
||||
3: [2],
|
||||
},
|
||||
visited: visited,
|
||||
});
|
||||
|
||||
// 光标1的引导对话状态
|
||||
const [guide1Visible, setGuide1Visible] = useState(false);
|
||||
const [guide1Step, setGuide1Step] = useState(0);
|
||||
@@ -123,6 +134,7 @@ const LuxunPlace2 = () => {
|
||||
size={0.4}
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 光标2 */}
|
||||
<Cursor
|
||||
@@ -130,6 +142,7 @@ const LuxunPlace2 = () => {
|
||||
size={0.4}
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
{/* 光标3 */}
|
||||
<Cursor
|
||||
@@ -137,6 +150,7 @@ const LuxunPlace2 = () => {
|
||||
size={0.4}
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
read={visited.has(3)}
|
||||
disabled={!isEnabled(3)}
|
||||
/>
|
||||
{completed && (
|
||||
<Image
|
||||
|
||||
@@ -11,6 +11,7 @@ import { useNavigate, useParams } from "react-router-dom";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useState } from "react";
|
||||
import SuccessAlert from "@/components/layout/alert/success-alert";
|
||||
import { useCursorController } from "@/hooks/useCursorController";
|
||||
|
||||
// starName 固定为 luxun
|
||||
const starName = "luxun";
|
||||
@@ -52,6 +53,18 @@ const LuxunPlace3 = () => {
|
||||
>(null);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// Cursor 顺序控制：1 -> 2 -> 3 -> 4 -> 5
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1],
|
||||
dependencies: {
|
||||
2: [1],
|
||||
3: [2],
|
||||
4: [3],
|
||||
5: [4],
|
||||
},
|
||||
visited: visited,
|
||||
});
|
||||
|
||||
// 光标1的引导对话状态
|
||||
const [guide1Visible, setGuide1Visible] = useState(false);
|
||||
const [guide1Step, setGuide1Step] = useState(0);
|
||||
@@ -148,6 +161,7 @@ const LuxunPlace3 = () => {
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
size={0.6}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
{/* 光标2 */}
|
||||
<Cursor
|
||||
@@ -155,6 +169,7 @@ const LuxunPlace3 = () => {
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
size={0.6}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
{/* 光标3 */}
|
||||
<Cursor
|
||||
@@ -162,6 +177,7 @@ const LuxunPlace3 = () => {
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
size={0.6}
|
||||
read={visited.has(3)}
|
||||
disabled={!isEnabled(3)}
|
||||
/>
|
||||
{/* 光标4 */}
|
||||
<Cursor
|
||||
@@ -169,6 +185,7 @@ const LuxunPlace3 = () => {
|
||||
onClick={() => handleOpenExhibit(4)}
|
||||
size={0.6}
|
||||
read={visited.has(4)}
|
||||
disabled={!isEnabled(4)}
|
||||
/>
|
||||
{/* 光标5 */}
|
||||
<Cursor
|
||||
@@ -176,6 +193,7 @@ const LuxunPlace3 = () => {
|
||||
onClick={() => handleOpenExhibit(5)}
|
||||
size={0.6}
|
||||
read={visited.has(5)}
|
||||
disabled={!isEnabled(5)}
|
||||
/>
|
||||
|
||||
{completed && (
|
||||
|
||||
@@ -12,6 +12,7 @@ import { useNavigate, useParams } from "react-router-dom";
|
||||
import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
|
||||
import { useState } from "react";
|
||||
import SuccessAlert from "@/components/layout/alert/success-alert";
|
||||
import { useCursorController } from "@/hooks/useCursorController";
|
||||
|
||||
// starName 固定为 luxun
|
||||
const starName = "luxun";
|
||||
@@ -45,6 +46,16 @@ const LuxunPlace5 = () => {
|
||||
);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// Cursor 顺序控制：1 -> 2 -> 3
|
||||
const { isEnabled } = useCursorController({
|
||||
initialEnabled: [1],
|
||||
dependencies: {
|
||||
2: [1],
|
||||
3: [2],
|
||||
},
|
||||
visited: visited,
|
||||
});
|
||||
|
||||
// 光标2的题目状态
|
||||
const [quizVisible, setQuizVisible] = useState(false);
|
||||
const [quizError, setQuizError] = useState(quizDefaultError);
|
||||
@@ -108,16 +119,19 @@ const LuxunPlace5 = () => {
|
||||
className="absolute left-167 bottom-30"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
disabled={!isEnabled(1)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute left-228 bottom-30"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
disabled={!isEnabled(2)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute right-115 bottom-18 z-20"
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
read={visited.has(3)}
|
||||
disabled={!isEnabled(3)}
|
||||
/>
|
||||
|
||||
{completed && (
|
||||
@@ -190,10 +204,10 @@ const LuxunPlace5 = () => {
|
||||
visible={quizVisible}
|
||||
title="【单选】上海鲁迅故居三楼客房被称为“红色庇护所”，以下哪位共产党人曾在此避难并与鲁迅探讨革命议题？"
|
||||
options={[
|
||||
{ value: "A", label: "陈独秀" },
|
||||
{ value: "B", label: "瞿秋白" },
|
||||
{ value: "C", label: "李大钊" },
|
||||
{ value: "D", label: "周恩来" },
|
||||
{ value: "A", label: "A.陈独秀" },
|
||||
{ value: "B", label: "B.瞿秋白" },
|
||||
{ value: "C", label: "C.李大钊" },
|
||||
{ value: "D", label: "D.周恩来" },
|
||||
]}
|
||||
correctAnswer="B"
|
||||
errorMessage={quizError}
|
||||
|
||||
Reference in new issue
Block a user