feat: 更新图像资源和引导对话，提升学习体验
- 替换多个场景中的图像资源，确保视觉内容的准确性和一致性。 - 更新信件组件中的输入校验功能，提升用户填写体验。 - 调整引导对话文本，增强互动性和信息传达的清晰度。 - 引入结束窗口，鼓励用户深入了解鲁迅和孙中山的历史背景。
This commit is contained in:
zhongyidian committed
1 parent
5bdfdadede
commit
ac7bb420fd
69 files changed
+1166
-442
No files matched your search
@@ -3,6 +3,7 @@ import { useNavigate, useParams } from "react-router-dom";
|
||||
import { Image, DragFill, GuideSteps, GuideStepsItem } from "@/components";
|
||||
import type { DragFillResult } from "@/components";
|
||||
import ErrorAlert from "@/components/layout/alert/error-alert";
|
||||
import SuccessAlert from "@/components/layout/alert/success-alert";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
|
||||
const starName = "luxun";
|
||||
@@ -14,56 +15,64 @@ const dragItems = [
|
||||
name: "闰土",
|
||||
imagePath: "luxun/reflection/scene2/拖拽-润土",
|
||||
targetBlankId: "city-1-label-0", // 绍兴-人物
|
||||
errorHint: "闰土的故事和鲁迅的少年绍兴时光有关哦",
|
||||
errorHint: "❌闰土的故事和鲁迅的少年绍兴时光有关哦",
|
||||
successMessage: "✅答对啦! 闰土是鲁迅绍兴时期笔下的经典人物",
|
||||
},
|
||||
{
|
||||
id: "baicaoyuan",
|
||||
name: "《从百草园到三味书屋》",
|
||||
imagePath: "luxun/reflection/scene2/拖拽-百草园到三味书屋",
|
||||
targetBlankId: "city-1-label-1", // 绍兴-作品
|
||||
errorHint: "这个作品写的是鲁迅在绍兴的故事哦",
|
||||
errorHint: "❌这个作品写的是鲁迅在绍兴的故事哦",
|
||||
successMessage: "✅真棒! 这篇散文记录了鲁迅在绍兴的求学时光",
|
||||
},
|
||||
{
|
||||
id: "aqzhengzhuan",
|
||||
name: "《阿Q正传》",
|
||||
imagePath: "luxun/reflection/scene2/拖拽-阿Q正传",
|
||||
targetBlankId: "city-2-label-0", // 北京-作品
|
||||
errorHint: "这部经典小说和鲁迅在北京的创作有关哦",
|
||||
errorHint: "❌这部经典小说和鲁迅在北京的创作有关哦",
|
||||
successMessage: "✅答对啦! 《阿Q正传》是鲁迅小说的代表作, 诞生于北京",
|
||||
},
|
||||
{
|
||||
id: "jingshenshengli",
|
||||
name: '"精神胜利法"',
|
||||
imagePath: "luxun/reflection/scene2/拖拽-精神胜利法",
|
||||
targetBlankId: "city-2-label-1", // 北京-核心主题
|
||||
errorHint: "这个主题是《阿Q正传》的核心,和北京创作",
|
||||
errorHint: "❌这个主题是《阿Q正传》的核心, 和北京创作背景相关哦",
|
||||
successMessage: "✅没错! 《阿Q正传》画出了国人的灵魂, 以便疗救。",
|
||||
},
|
||||
{
|
||||
id: "guanzhudiceng",
|
||||
name: '"关注底层"',
|
||||
imagePath: "luxun/reflection/scene2/关注底层",
|
||||
targetBlankId: "city-3-label-0", // 厦门-创作方向
|
||||
errorHint: "这个创作方向是鲁迅在厦门的核心追求哦",
|
||||
errorHint: "❌这个创作方向是鲁迅在厦门的核心追求哦",
|
||||
successMessage: "✅答对啦!鲁迅在厦门任教时,依旧关注底层民众的命运",
|
||||
},
|
||||
{
|
||||
id: "zhaohuaxishi",
|
||||
name: "《朝花夕拾》",
|
||||
imagePath: "luxun/reflection/scene2/拖拽-朝花夕拾",
|
||||
targetBlankId: "city-4-label-0", // 广州-作品集
|
||||
errorHint: "这个作品集和鲁迅在广州的旅居时光有关哦",
|
||||
errorHint: "❌这个作品集和鲁迅在广州的旅居时光有关哦",
|
||||
successMessage: "✅真棒!《朝花夕拾》部分篇章在广州白云楼定稿",
|
||||
},
|
||||
{
|
||||
id: "gushixinbian",
|
||||
name: "《故事新编》",
|
||||
imagePath: "luxun/reflection/scene2/拖拽-故事新编",
|
||||
targetBlankId: "city-5-label-0", // 上海-作品
|
||||
errorHint: "再试试~这个作品和上海的创作故事更相关哦",
|
||||
errorHint: "❌再试试~这个作品和上海的创作故事更相关哦",
|
||||
successMessage: "✅答对啦!《故事新编》是鲁迅在上海故居完成的 经典作品集",
|
||||
},
|
||||
{
|
||||
id: "biweidaoqiang",
|
||||
name: '"笔为刀枪"',
|
||||
imagePath: "luxun/reflection/scene2/笔为刀枪",
|
||||
targetBlankId: "city-5-label-1", // 上海-创作中心
|
||||
errorHint: "这个初心是鲁迅在上海创作的核心哦",
|
||||
errorHint: "❌这个初心是鲁迅在上海创作的核心哦",
|
||||
successMessage: "✅没错!鲁迅在上海以笔为刃,批判黑暗的社会现实",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -153,10 +162,15 @@ const LuxunReflectionScene2 = () => {
|
||||
// 错误提示相关状态
|
||||
const [showErrorAlert, setShowErrorAlert] = useState(false);
|
||||
const [errorHint, setErrorHint] = useState("");
|
||||
// 成功提示相关状态
|
||||
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
|
||||
const [successMessage, setSuccessMessage] = useState("");
|
||||
// 引导对话是否显示
|
||||
const [guideVisible, setGuideVisible] = useState(true);
|
||||
// 通关提示对话是否显示
|
||||
const [completionGuideVisible, setCompletionGuideVisible] = useState(false);
|
||||
// 通关提示是否已经显示过（防止重复显示）
|
||||
const [completionGuideShown, setCompletionGuideShown] = useState(false);
|
||||
|
||||
// 转换为 DragFill 的 options
|
||||
const options = useMemo(
|
||||
@@ -200,6 +214,7 @@ const LuxunReflectionScene2 = () => {
|
||||
// 检查改变的结果是否有错误
|
||||
let hasError = false;
|
||||
let errorMessage = "";
|
||||
let successItem = null;
|
||||
|
||||
for (const result of changedResults) {
|
||||
const itemId = result.optionValue;
|
||||
@@ -211,6 +226,11 @@ const LuxunReflectionScene2 = () => {
|
||||
hasError = true;
|
||||
errorMessage = item.errorHint || "放置位置不正确，请再试试~";
|
||||
break; // 只显示第一个错误的提示
|
||||
} else if (item && item.targetBlankId === blankId) {
|
||||
// 如果放置正确，记录成功项（只记录第一个正确的）
|
||||
if (!successItem) {
|
||||
successItem = item;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -232,6 +252,12 @@ const LuxunReflectionScene2 = () => {
|
||||
return item && item.targetBlankId === blankId;
|
||||
});
|
||||
|
||||
// 如果拖拽正确，显示成功提示
|
||||
if (successItem) {
|
||||
setSuccessMessage(successItem.successMessage);
|
||||
setShowSuccessAlert(true);
|
||||
}
|
||||
|
||||
setDragFillValue(filteredValue);
|
||||
},
|
||||
[dragFillValue]
|
||||
@@ -244,8 +270,7 @@ const LuxunReflectionScene2 = () => {
|
||||
useEffect(() => {
|
||||
if (progress === totalTasks && !allCompleted) {
|
||||
setAllCompleted(true);
|
||||
// 任务完成后自动显示通关提示对话
|
||||
setCompletionGuideVisible(true);
|
||||
// 不在这里显示通关提示，等待所有成功提示关闭后再显示
|
||||
}
|
||||
}, [progress, totalTasks, allCompleted]);
|
||||
|
||||
@@ -254,6 +279,19 @@ const LuxunReflectionScene2 = () => {
|
||||
setErrorHint("");
|
||||
};
|
||||
|
||||
const handleSuccessAlertClose = () => {
|
||||
setShowSuccessAlert(false);
|
||||
setSuccessMessage("");
|
||||
};
|
||||
|
||||
// 当所有任务完成且成功提示关闭后，显示通关提示（只显示一次）
|
||||
useEffect(() => {
|
||||
if (allCompleted && !showSuccessAlert && !completionGuideShown) {
|
||||
setCompletionGuideVisible(true);
|
||||
setCompletionGuideShown(true);
|
||||
}
|
||||
}, [allCompleted, showSuccessAlert, completionGuideShown]);
|
||||
|
||||
// 获取每个标签区域已放置的元素
|
||||
const getLabelPlacedItem = (cityId: number, labelIndex: number) => {
|
||||
const blankId = `city-${cityId}-label-${labelIndex}`;
|
||||
@@ -394,19 +432,24 @@ const LuxunReflectionScene2 = () => {
|
||||
{/* 鲁迅画廊 */}
|
||||
<div className="absolute top-[calc(2.4rem+204px)] left-0 w-[995px] h-[467px] pt-16 pl-70 pr-10">
|
||||
{/* 提示图标 */}
|
||||
<div className="absolute left-14 top-35 flex items-center z-10 pointer-events-none">
|
||||
<img
|
||||
src={getStaticImage(
|
||||
`${starName}/reflection/scene2/鲁迅体悟拖一拖`
|
||||
)}
|
||||
alt="拖一拖"
|
||||
/>
|
||||
<img
|
||||
src={getStaticImage(
|
||||
`${starName}/reflection/scene2/鲁迅体悟拖一拖图标`
|
||||
)}
|
||||
alt="拖一拖图标"
|
||||
/>
|
||||
<div className="absolute left-14 top-35 space-y-2 z-10 pointer-events-none">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={getStaticImage(
|
||||
`${starName}/reflection/scene2/鲁迅体悟拖一拖`
|
||||
)}
|
||||
alt="拖一拖"
|
||||
/>
|
||||
<img
|
||||
src={getStaticImage(
|
||||
`${starName}/reflection/scene2/鲁迅体悟拖一拖图标`
|
||||
)}
|
||||
alt="拖一拖图标"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-45 leading-relaxed tracking-wider text-black text-3xl font-bold">
|
||||
请将右侧图标拖到左侧对应位置。
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 使用 DragFill 组件 */}
|
||||
@@ -490,10 +533,12 @@ const LuxunReflectionScene2 = () => {
|
||||
) : (
|
||||
// 未完成时显示提示内容
|
||||
<div className="space-y-8 text-center">
|
||||
<div className="text-black text-5xl font-bold">任务展示窗口</div>
|
||||
<div className="text-red-600 text-4xl font-bold">
|
||||
请将以下内容拖拽至正确位置
|
||||
<div className="text-black text-5xl font-bold mb-10">
|
||||
任务展示窗口
|
||||
</div>
|
||||
{/* <div className="text-red-600 text-4xl font-bold">
|
||||
请将以下内容拖拽至正确位置
|
||||
</div> */}
|
||||
<div className="grid grid-cols-4 gap-4 text-3xl font-bold">
|
||||
{dragItems.map((item) => {
|
||||
const isPlaced = dragFillValue.some(
|
||||
@@ -503,7 +548,7 @@ const LuxunReflectionScene2 = () => {
|
||||
<div
|
||||
key={item.id}
|
||||
className={`${
|
||||
isPlaced ? "text-green-600 line-through" : "text-black"
|
||||
isPlaced ? "text-green-600" : "text-black"
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
@@ -524,6 +569,14 @@ const LuxunReflectionScene2 = () => {
|
||||
onMaskClick={handleErrorAlertClose}
|
||||
/>
|
||||
|
||||
{/* 成功提示弹窗 */}
|
||||
<SuccessAlert
|
||||
visible={showSuccessAlert}
|
||||
title={successMessage}
|
||||
onClose={handleSuccessAlertClose}
|
||||
onContinue={handleSuccessAlertClose}
|
||||
/>
|
||||
|
||||
{/* 学习引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
|
||||
Reference in new issue
Block a user