feat:黄炎培对话对接中
This commit is contained in:
zhongyidian committed
1 parent
3611a0857a
commit
6ab184b328
125 files changed
+6617
-2391
No files matched your search
@@ -4,6 +4,7 @@ import {
|
||||
GuideStepsItem,
|
||||
Image,
|
||||
Title,
|
||||
StudyGuideModal,
|
||||
} from "@/components";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
@@ -24,8 +25,13 @@ const HuangyanpeiPlace1 = () => {
|
||||
moduleName: string;
|
||||
}>();
|
||||
|
||||
// 学习引导弹窗
|
||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||
// 对话结束后的学习引导弹窗
|
||||
const [showAfterDialogGuide, setShowAfterDialogGuide] = useState(false);
|
||||
const [afterDialogGuideShown, setAfterDialogGuideShown] = useState(false);
|
||||
// 引导对话显示状态
|
||||
const [visible, setVisible] = useState(true);
|
||||
const [visible, setVisible] = useState(false);
|
||||
// 当前激活的展品 ID（只存 ID，不直接存路径，便于作为唯一标识）
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
|
||||
// 已浏览展品的 ID 集合
|
||||
@@ -81,8 +87,8 @@ const HuangyanpeiPlace1 = () => {
|
||||
{/* 继续前进 - 仅在完成所有展品后显示 */}
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-[calc(50%-140px)] right-80"
|
||||
src={getStaticImage("huangyanpei/place1/3_005")}
|
||||
className="absolute bottom-0 right-0"
|
||||
src={getStaticImage("/components/place/继续前进")}
|
||||
button
|
||||
onClick={() => {
|
||||
navigate(`/${moduleName}/${starName}/place2`);
|
||||
@@ -106,20 +112,56 @@ const HuangyanpeiPlace1 = () => {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 学习引导词 */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => {
|
||||
setShowGuideModal(false);
|
||||
setVisible(true);
|
||||
}}
|
||||
>
|
||||
同学你好，欢迎来到走进故居-对话学习模块！{"\n"}
|
||||
{
|
||||
"进入黄炎培故居后，我们一起来了解黄炎培先生经历的5个阶段：““思想启蒙”-> “教育实践”-> “创立职教”-> “延安对话”-> 职教传薪;"
|
||||
}
|
||||
</StudyGuideModal>
|
||||
|
||||
{/* 引导 */}
|
||||
<GuideSteps
|
||||
visible={visible}
|
||||
onVisibleChange={setVisible}
|
||||
onVisibleChange={(nextVisible) => {
|
||||
setVisible(nextVisible);
|
||||
if (!nextVisible && !afterDialogGuideShown) {
|
||||
setAfterDialogGuideShown(true);
|
||||
setShowAfterDialogGuide(true);
|
||||
}
|
||||
}}
|
||||
showMask={true}
|
||||
highlightSelectors={[]}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
小沪！这就是黄炎培先生曾经生活过的地方吗？
|
||||
小沪，这栋古色古香的江南大院，就是黄炎培先生从小生活、读书的地方吗
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
是的，这里就是黄炎培故居。让我们一起来探索黄炎培先生的思想启蒙之路...
|
||||
没错，1878年10月1日，黄炎培先生就出生在当时江苏省川沙县城关镇（现上海市浦东新区川沙镇）的这处“内史第”，宅子原是他姑祖父沈树镛家，也是他后来所说的“生于斯、读于斯、长于斯”之地。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
1890年，川沙创办“观澜书院”，12岁的黄炎培以第一名的成绩考入，每天提着母亲亲手缝制的布书包，往返十里路求学，一点都不叫苦。1893年他去上海应县考，松江府复试名列前茅；1899年，在松江府试中更是以第一名的成绩中了秀才。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 对话结束后的学习引导 */}
|
||||
<StudyGuideModal
|
||||
visible={showAfterDialogGuide}
|
||||
onContinue={() => setShowAfterDialogGuide(false)}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
|
||||
{"\n"}
|
||||
2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
|
||||
{"\n"}
|
||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习；
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
import { useState } from "react";
|
||||
import { ExhibitOverlay, Title, Image, Cursor } from "@/components";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
StudyGuideModal,
|
||||
GuideStepsItem,
|
||||
GuideSteps,
|
||||
} from "@/components";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
@@ -16,11 +24,31 @@ const HuangyanpeiPlace2 = () => {
|
||||
moduleName: string;
|
||||
}>();
|
||||
|
||||
// 学习引导弹窗（进入场景即显示）
|
||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// GuideSteps 当前步骤
|
||||
const [guideStep, setGuideStep] = useState(0);
|
||||
// GuideSteps 显示状态
|
||||
const [guideVisible, setGuideVisible] = useState(false);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
setActiveExhibitId(index);
|
||||
if (index === 1) {
|
||||
// 展品1：点击时同时打开展品和引导对话，从第1步开始
|
||||
setActiveExhibitId(1);
|
||||
setGuideVisible(true);
|
||||
setGuideStep(0);
|
||||
} else {
|
||||
// 展品2：直接打开
|
||||
setActiveExhibitId(index);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听GuideSteps步骤变化，仅同步当前步骤
|
||||
const handleGuideStepChange = (step: number) => {
|
||||
setGuideStep(step);
|
||||
};
|
||||
|
||||
const progressCount = visited.size;
|
||||
@@ -94,6 +122,43 @@ const HuangyanpeiPlace2 = () => {
|
||||
setActiveExhibitId(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 展品1的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guideVisible}
|
||||
onVisibleChange={setGuideVisible}
|
||||
currentStep={guideStep}
|
||||
onStepChange={handleGuideStepChange}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
哇，这就是南洋公学！是不是现在上海交通大学的前身呀？黄炎培先生中了秀才之后，就来这里读书了吗？
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
你说得特别对！1901年，黄炎培先生考入南洋公学（今上海交通大学）特班，当时的老师正是蔡元培先生。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
蔡先生一句“中国教育之病，在于学与术分离”，让他瞬间醍醐灌顶，明白了教育不能只谈书本、脱离实际。1902年，黄炎培去南京参加江南乡试，成功中了举人；
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
可就在这一年，南洋公学发生了著名的“墨水瓶风潮”，他毅然跟着蔡元培先生退学，转入蔡先生创办的中国教育会，正式开启了自己“教育救国”的实践。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 学习引导（进入场景即显示，与 place1 保持一致） */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => setShowGuideModal(false)}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
|
||||
{"\n"}
|
||||
2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
|
||||
{"\n"}
|
||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习；
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
import { useState } from "react";
|
||||
import { ExhibitOverlay, Title, Image, Cursor } from "@/components";
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
StudyGuideModal,
|
||||
GuideSteps,
|
||||
GuideStepsItem,
|
||||
SingleChoiceQuizPanel,
|
||||
} from "@/components";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
@@ -17,15 +26,64 @@ const HuangyanpeiPlace3 = () => {
|
||||
moduleName: string;
|
||||
}>();
|
||||
|
||||
// 学习引导弹窗（进入场景即显示）
|
||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
|
||||
null
|
||||
);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
// 光标3的引导对话状态
|
||||
const [guide3Visible, setGuide3Visible] = useState(false);
|
||||
const [guide3Step, setGuide3Step] = useState(0);
|
||||
// 光标3的题目显示状态
|
||||
const [showQuiz3, setShowQuiz3] = useState(false);
|
||||
|
||||
// 光标1、2的引导对话状态（在两者都浏览后显示）
|
||||
const [guide12Visible, setGuide12Visible] = useState(false);
|
||||
const [guide12Shown, setGuide12Shown] = useState(false);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2 | 3) => {
|
||||
setActiveExhibitId(index);
|
||||
if (index === 3) {
|
||||
// 光标3：点击时同时打开展品和引导对话
|
||||
setActiveExhibitId(3);
|
||||
setGuide3Visible(true);
|
||||
setGuide3Step(0);
|
||||
} else {
|
||||
// 光标1、2：直接打开
|
||||
setActiveExhibitId(index);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听光标3的引导对话步骤变化
|
||||
const handleGuide3StepChange = (step: number) => {
|
||||
setGuide3Step(step);
|
||||
};
|
||||
|
||||
// 监听光标3的引导对话关闭
|
||||
const handleGuide3VisibleChange = (visible: boolean) => {
|
||||
setGuide3Visible(visible);
|
||||
if (!visible) {
|
||||
// 对话结束后显示题目
|
||||
setShowQuiz3(true);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理光标3题目提交
|
||||
const handleQuiz3Submit = (value: string, isCorrect: boolean) => {
|
||||
if (isCorrect) {
|
||||
setShowQuiz3(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 监听visited变化，当光标1、2都浏览后显示引导对话
|
||||
useEffect(() => {
|
||||
if (visited.has(1) && visited.has(2) && !guide12Shown) {
|
||||
setGuide12Shown(true);
|
||||
setGuide12Visible(true);
|
||||
}
|
||||
}, [visited, guide12Shown]);
|
||||
|
||||
const progressCount = visited.size;
|
||||
const total = 3;
|
||||
const completed = progressCount >= total;
|
||||
@@ -61,16 +119,19 @@ const HuangyanpeiPlace3 = () => {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 光标1 */}
|
||||
<Cursor
|
||||
className="absolute left-32 top-105"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
/>
|
||||
{/* 光标2 */}
|
||||
<Cursor
|
||||
className="absolute left-172 top-90"
|
||||
onClick={() => handleOpenExhibit(2)}
|
||||
read={visited.has(2)}
|
||||
/>
|
||||
{/* 光标3 */}
|
||||
<Cursor
|
||||
className="absolute right-92 top-108"
|
||||
onClick={() => handleOpenExhibit(3)}
|
||||
@@ -98,10 +159,94 @@ const HuangyanpeiPlace3 = () => {
|
||||
next.add(activeExhibitId);
|
||||
return next;
|
||||
});
|
||||
setActiveExhibitId(null);
|
||||
} else {
|
||||
setActiveExhibitId(null);
|
||||
}
|
||||
setActiveExhibitId(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 光标3的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guide3Visible}
|
||||
onVisibleChange={handleGuide3VisibleChange}
|
||||
currentStep={guide3Step}
|
||||
onStepChange={handleGuide3StepChange}
|
||||
showMask={false}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
川沙小学堂是不是黄炎培先生"教育救国"的第一个试验田啊?还有黄炎培先生是不是就像现在教育这样,也有专业课程、实用课程,也很注重动手能力啊?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
你说得特别对！1903年，年仅24岁的黄炎培就和好友张志鹤等人一起，把原来的"观澜书院"改制成"川沙小学堂"，黄炎培出任校长。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
学校的课程设置非常大胆创新，首次引入算术、"格致"（也就是现在说的自然科学）、体操、乡土调查等新学科。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
学校采用"半日读书、半日手工"的模式，特别注重实际应用，这也是中国最早的"半日授课、半日实习"的雏形。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
办学资金紧张，没有钱买课本，黄炎培就亲自带领大家刻蜡板来印刷；没有体育器材，他就带着学生用竹子做成双杠...整个学校完全是凭着满腔热情办起来的！
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 光标3的题目 */}
|
||||
<SingleChoiceQuizPanel
|
||||
visible={showQuiz3}
|
||||
title='黄炎培1903年把川沙"观澜书院"改成"川沙小学堂"后,课程表首次出现下列哪组学科?'
|
||||
options={[
|
||||
{ value: "A", label: "A. 经学、策论、八股文" },
|
||||
{
|
||||
value: "B",
|
||||
label: "B. 算术、格致、体操、乡土调查",
|
||||
},
|
||||
{ value: "C", label: "C. 外语、逻辑、演讲、社交" },
|
||||
{ value: "D", label: "D. 绘画、声乐、舞蹈、戏剧" },
|
||||
]}
|
||||
correctAnswer="B"
|
||||
errorMessage='1903年,黄炎培将"观澜书院"改制为"川沙小学堂",自任校长,率先打破传统经学模式,在课程表中首次列入算术、格致(近代自然科学)、体操和乡土调查四门新学科,并实行"半日授课、半日实习"的教学方式,开创了近代中国小学融入科学、体育与实践教育的新风,因此选项B正确。'
|
||||
onSubmit={handleQuiz3Submit}
|
||||
zIndex={10001}
|
||||
/>
|
||||
|
||||
{/* 光标1、2的引导对话 */}
|
||||
<GuideSteps
|
||||
visible={guide12Visible}
|
||||
onVisibleChange={setGuide12Visible}
|
||||
showMask={true}
|
||||
highlightSelectors={[]}
|
||||
zIndex={10000}
|
||||
>
|
||||
<GuideStepsItem speaker="student">
|
||||
原来当年还有专门的女子学校呀?在那个年代,女孩子能上学是不是特别不容易?后来的浦东中学也是黄炎培先生办的吗?
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
你观察得特别仔细!
|
||||
川沙小学堂开学没多久,黄炎培就和堂兄黄洪培、堂嫂陆开群一起,策划创建了"开群女校"——这所学校专门面向社会招收女学生,还用全力支持办学、腾出自家住房的陆开群名字命名,直接开创了浦东地区女子教育的先河,让很多女孩子有了读书的机会。
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
到了1906年,上海营造业宗师杨斯盛捐资30万两白银,在浦东六里桥购地40多亩创办浦东中学,特意邀请黄炎培担任首任校长。校舍是黄炎培亲自设计的,杨斯盛先生亲自监工,建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢!
|
||||
</GuideStepsItem>
|
||||
<GuideStepsItem speaker="guide">
|
||||
1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。
|
||||
</GuideStepsItem>
|
||||
</GuideSteps>
|
||||
|
||||
{/* 学习引导（进入场景即显示，与 place1 保持一致） */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => setShowGuideModal(false)}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
|
||||
{"\n"}
|
||||
2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
|
||||
{"\n"}
|
||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习；
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,15 +1,22 @@
|
||||
import { useState } from "react";
|
||||
import { ExhibitOverlay, Title, Image, Cursor } from "@/components";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
StudyGuideModal,
|
||||
} from "@/components";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
const starName = "huangyanpei";
|
||||
|
||||
const exhibitSrcMap: Record<1 | 2 | 3 | 4, string> = {
|
||||
const exhibitSrcMap: Record<1 | 2 | 3 | 4 | 5, string> = {
|
||||
1: "huangyanpei/place4/6_006",
|
||||
2: "huangyanpei/place4/6_007",
|
||||
3: "huangyanpei/place4/6_008",
|
||||
4: "huangyanpei/place4/6_009",
|
||||
5: "huangyanpei/place4/6_010",
|
||||
};
|
||||
|
||||
const HuangyanpeiPlace4 = () => {
|
||||
@@ -18,17 +25,19 @@ const HuangyanpeiPlace4 = () => {
|
||||
moduleName: string;
|
||||
}>();
|
||||
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | 4 | null>(
|
||||
null
|
||||
);
|
||||
// 学习引导弹窗（进入场景即显示）
|
||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<
|
||||
1 | 2 | 3 | 4 | 5 | null
|
||||
>(null);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2 | 3 | 4) => {
|
||||
const handleOpenExhibit = (index: 1 | 2 | 3 | 4 | 5) => {
|
||||
setActiveExhibitId(index);
|
||||
};
|
||||
|
||||
const progressCount = visited.size;
|
||||
const total = 4;
|
||||
const total = 5;
|
||||
const completed = progressCount >= total;
|
||||
const subtitle = completed
|
||||
? "探索黄炎培创立职教(已完成)"
|
||||
@@ -82,6 +91,11 @@ const HuangyanpeiPlace4 = () => {
|
||||
onClick={() => handleOpenExhibit(4)}
|
||||
read={visited.has(4)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute right-205 top-110"
|
||||
onClick={() => handleOpenExhibit(5)}
|
||||
read={visited.has(5)}
|
||||
/>
|
||||
|
||||
{completed && (
|
||||
<Image
|
||||
@@ -108,6 +122,19 @@ const HuangyanpeiPlace4 = () => {
|
||||
setActiveExhibitId(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 学习引导（进入场景即显示，与 place1 保持一致） */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => setShowGuideModal(false)}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
|
||||
{"\n"}
|
||||
2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
|
||||
{"\n"}
|
||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习；
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
import { useState, useRef } from "react";
|
||||
import { ExhibitOverlay, Title, Image, Cursor, Video } from "@/components";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
Video,
|
||||
StudyGuideModal,
|
||||
} from "@/components";
|
||||
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import type { VideoRef } from "@/components/video";
|
||||
@@ -21,6 +28,8 @@ const HuangyanpeiPlace5 = () => {
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
const [videoVisible, setVideoVisible] = useState(false);
|
||||
const videoRef = useRef<VideoRef>(null);
|
||||
// 学习引导弹窗（进入场景即显示）
|
||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
if (index === 2) {
|
||||
@@ -49,6 +58,12 @@ const HuangyanpeiPlace5 = () => {
|
||||
backgroundImage: getBackgroundImage(`huangyanpei/place5/7_001`),
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={getStaticImage("huangyanpei/place5/7_003")}
|
||||
alt=""
|
||||
className="absolute top-72 right-37"
|
||||
/>
|
||||
|
||||
<Title
|
||||
title="延安对话"
|
||||
subtitle={subtitle}
|
||||
@@ -94,10 +109,9 @@ const HuangyanpeiPlace5 = () => {
|
||||
<div className="fixed inset-0 z-[9999] bg-black">
|
||||
<Video
|
||||
ref={videoRef}
|
||||
src={getPublicPath(
|
||||
"video/chenyun/8陈云纪念馆16大米价格暴涨_x264.mp4"
|
||||
)}
|
||||
src={getPublicPath("video/huangyanpei/huangyanpei_07.mp4")}
|
||||
className="w-full h-full"
|
||||
controls
|
||||
autoPlay
|
||||
playsInline
|
||||
preload="auto"
|
||||
@@ -129,6 +143,19 @@ const HuangyanpeiPlace5 = () => {
|
||||
setActiveExhibitId(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 学习引导（进入场景即显示，与 place1 保持一致） */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => setShowGuideModal(false)}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
|
||||
{"\n"}
|
||||
2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
|
||||
{"\n"}
|
||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习；
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
import { useState } from "react";
|
||||
import { ExhibitOverlay, Title, Image, Cursor } from "@/components";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
StudyGuideModal,
|
||||
} from "@/components";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
@@ -17,6 +23,8 @@ const HuangyanpeiPlace6 = () => {
|
||||
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
// 学习引导弹窗（进入场景即显示）
|
||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||
|
||||
const handleOpenExhibit = (index: 1) => {
|
||||
setActiveExhibitId(index);
|
||||
@@ -88,6 +96,19 @@ const HuangyanpeiPlace6 = () => {
|
||||
setActiveExhibitId(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 学习引导（进入场景即显示，与 place1 保持一致） */}
|
||||
<StudyGuideModal
|
||||
visible={showGuideModal}
|
||||
onContinue={() => setShowGuideModal(false)}
|
||||
ailgn="left"
|
||||
>
|
||||
1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
|
||||
{"\n"}
|
||||
2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
|
||||
{"\n"}
|
||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习；
|
||||
</StudyGuideModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,155 +0,0 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import {
|
||||
ExhibitOverlay,
|
||||
Title,
|
||||
Image,
|
||||
Cursor,
|
||||
BambooPuzzleGame,
|
||||
} from "@/components";
|
||||
import { SuccessAlert } from "@/components/layout";
|
||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
const starName = "huangyanpei";
|
||||
|
||||
const exhibitSrcMap: Record<1 | 2, string> = {
|
||||
1: "huangyanpei/place7/9_004",
|
||||
2: "huangyanpei/place7/场景7展品2",
|
||||
};
|
||||
|
||||
const HuangyanpeiPlace7 = () => {
|
||||
const navigate = useNavigate();
|
||||
const { moduleName } = useParams<{
|
||||
moduleName: string;
|
||||
}>();
|
||||
|
||||
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
|
||||
const [visited, setVisited] = useState<Set<number>>(new Set());
|
||||
const [showGame, setShowGame] = useState(false);
|
||||
const [gameCompleted, setGameCompleted] = useState(false);
|
||||
const [showSuccessAlert, setShowSuccessAlert] = useState(false);
|
||||
|
||||
const handleOpenExhibit = (index: 1 | 2) => {
|
||||
setActiveExhibitId(index);
|
||||
};
|
||||
|
||||
const progressCount = visited.size;
|
||||
const total = 2;
|
||||
const completed = progressCount >= total;
|
||||
const subtitle = completed
|
||||
? "探索川沙小学堂·启蒙之始(已完成)"
|
||||
: `探索川沙小学堂·启蒙之始(${progressCount}/${total})`;
|
||||
const subtitleClassName = completed
|
||||
? "text-[#fff998] [text-shadow:_0_8px_8px_rgba(0,0,0,0.35),_0_0_16px_rgba(0,0,0,0.25)]"
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full h-full bg-cover bg-center bg-no-repeat"
|
||||
style={{
|
||||
backgroundImage: getBackgroundImage(`huangyanpei/place7/9_001`),
|
||||
}}
|
||||
>
|
||||
<Title
|
||||
title="跨越时空"
|
||||
subtitle={subtitle}
|
||||
subtitleClassName={subtitleClassName}
|
||||
className="absolute top-10 left-1/2 -translate-x-1/2"
|
||||
/>
|
||||
|
||||
<Image
|
||||
className="absolute right-5 top-5"
|
||||
src={getStaticImage("components/离开")}
|
||||
button
|
||||
onClick={() => {
|
||||
if (moduleName && starName) {
|
||||
navigate(`/${moduleName}/${starName}/place6`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<Cursor
|
||||
className="absolute left-68 top-55"
|
||||
onClick={() => handleOpenExhibit(1)}
|
||||
read={visited.has(1)}
|
||||
/>
|
||||
<Cursor
|
||||
className="absolute left-160 bottom-50"
|
||||
onClick={() => {
|
||||
// 如果游戏已完成，不再打开
|
||||
if (!gameCompleted) {
|
||||
setShowGame(true);
|
||||
}
|
||||
}}
|
||||
read={gameCompleted}
|
||||
/>
|
||||
|
||||
{completed && (
|
||||
<Image
|
||||
className="absolute bottom-0 right-0"
|
||||
src={getStaticImage("huangyanpei/place7/9btn")}
|
||||
button
|
||||
onClick={() => {
|
||||
navigate(`/${moduleName}/${starName}/home`);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<ExhibitOverlay
|
||||
visible={activeExhibitId !== null}
|
||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
||||
onClose={() => {
|
||||
if (activeExhibitId !== null) {
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(activeExhibitId);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
setActiveExhibitId(null);
|
||||
}}
|
||||
/>
|
||||
|
||||
<BambooPuzzleGame
|
||||
visible={showGame}
|
||||
onClose={() => {
|
||||
setShowGame(false);
|
||||
}}
|
||||
onComplete={() => {
|
||||
// 游戏完成后，显示成功提示
|
||||
setShowGame(false);
|
||||
setShowSuccessAlert(true);
|
||||
}}
|
||||
/>
|
||||
|
||||
<SuccessAlert
|
||||
visible={showSuccessAlert}
|
||||
title="拼单杠成功！"
|
||||
onContinue={useCallback(() => {
|
||||
console.log("onContinue called, showSuccessAlert:", showSuccessAlert);
|
||||
// 直接设置为 false，不使用函数式更新
|
||||
setShowSuccessAlert(false);
|
||||
setGameCompleted(true);
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(2);
|
||||
return next;
|
||||
});
|
||||
}, [showSuccessAlert])}
|
||||
onClose={useCallback(() => {
|
||||
console.log("onClose called, showSuccessAlert:", showSuccessAlert);
|
||||
// 直接设置为 false，不使用函数式更新
|
||||
setShowSuccessAlert(false);
|
||||
setGameCompleted(true);
|
||||
setVisited((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.add(2);
|
||||
return next;
|
||||
});
|
||||
}, [showSuccessAlert])}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HuangyanpeiPlace7;
|
||||
Reference in new issue
Block a user