feat: 更新配置和组件,添加引导对话
- 更新 ESLint 配置以忽略 vite.config.ts 文件。 - 在 package.json 中添加 pnpm 配置。 - 修改 tsconfig 文件以包含 vite.config.ts 和 eslint.config.ts。 - 在多个场景中添加引导对话,增强用户学习体验。 - 更新组件中的文本和描述,确保一致性和准确性。
This commit is contained in:
1 parent
046501705f
commit
d226283e15
24 files changed
+186
-93
No files matched your search
+1
-1
@@ -5,7 +5,7 @@ import reactRefresh from "eslint-plugin-react-refresh";
|
|||||||
import tseslint from "typescript-eslint";
|
import tseslint from "typescript-eslint";
|
||||||
|
|
||||||
export default tseslint.config(
|
export default tseslint.config(
|
||||||
{ ignores: ["dist", "node_modules"] },
|
{ ignores: ["dist", "node_modules", "vite.config.ts"] },
|
||||||
{
|
{
|
||||||
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
files: ["**/*.{ts,tsx}"],
|
files: ["**/*.{ts,tsx}"],
|
||||||
|
|||||||
@@ -57,5 +57,10 @@
|
|||||||
"typescript": "^5.9.3",
|
"typescript": "^5.9.3",
|
||||||
"typescript-eslint": "^8.46.1",
|
"typescript-eslint": "^8.46.1",
|
||||||
"vite": "^7.1.7"
|
"vite": "^7.1.7"
|
||||||
|
},
|
||||||
|
"pnpm": {
|
||||||
|
"onlyBuiltDependencies": [
|
||||||
|
"core-js"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
@@ -53,7 +53,7 @@ const ExhibitOverlay = ({
|
|||||||
onOpen,
|
onOpen,
|
||||||
}: ExhibitOverlayProps) => {
|
}: ExhibitOverlayProps) => {
|
||||||
const maskSrc = getStaticImage("components/蒙版遮罩");
|
const maskSrc = getStaticImage("components/蒙版遮罩");
|
||||||
const backSrc = getStaticImage("components/关闭");
|
const backSrc = getStaticImage("components/close");
|
||||||
|
|
||||||
// 获取缩放参数,用于视觉对齐
|
// 获取缩放参数,用于视觉对齐
|
||||||
const { scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale();
|
const { scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale();
|
||||||
|
|||||||
+2
-2
@@ -18,9 +18,9 @@ const Menu = () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 2,
|
id: 2,
|
||||||
name: "文化名人",
|
name: "文教名人",
|
||||||
moduleName: "cultural",
|
moduleName: "cultural",
|
||||||
image: "menu/模块-文化名人",
|
image: "menu/模块-文教名人",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 3,
|
id: 3,
|
||||||
|
|||||||
@@ -167,7 +167,7 @@ const ChenyunPlace1 = () => {
|
|||||||
进入陈云故居后,我们一起来了解陈云同志经历的7个阶段:“水乡少年
|
进入陈云故居后,我们一起来了解陈云同志经历的7个阶段:“水乡少年
|
||||||
艰辛成长”、“商务启航 投身革命”、“苏区淬炼 崭露头角”、“延安担当
|
艰辛成长”、“商务启航 投身革命”、“苏区淬炼 崭露头角”、“延安担当
|
||||||
经济破局”、“恢复时期 经济奠基”、“建设时期 务实兴邦”、“改革浪潮
|
经济破局”、“恢复时期 经济奠基”、“建设时期 务实兴邦”、“改革浪潮
|
||||||
擘画实业”;
|
擘画实业”。
|
||||||
</StudyGuideModal>
|
</StudyGuideModal>
|
||||||
|
|
||||||
{/* 学习说明对话框 */}
|
{/* 学习说明对话框 */}
|
||||||
@@ -196,16 +196,16 @@ const ChenyunPlace1 = () => {
|
|||||||
highlightSelectors={[]}
|
highlightSelectors={[]}
|
||||||
>
|
>
|
||||||
<GuideStepsItem speaker="student">
|
<GuideStepsItem speaker="student">
|
||||||
小沪!这就是陈云爷爷小时候生活的房子吗?看起来和普通农家差不多,他童年过得艰苦吗?
|
小沪!这就是陈云小时候生活的房子吗?看起来和普通农家差不多,他童年过得艰苦吗?
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
这座房子就是陈云故居,位于上海市青浦区练塘镇下塘街95号,是一座坐南朝北、面向河畔的两层楼江南民居。...
|
这座房子就是陈云故居,位于上海市青浦区练塘镇下塘街95号,是一座坐南朝北、面向河畔的两层楼江南民居。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
实际上是陈云舅父母的家,也是少年陈云从4岁至14岁生活的地方。童年的陈云,家庭生活十分不幸。他两岁时父亲病故,四岁时,母亲也悲苦地死去...
|
实际上是陈云舅父母的家,也是少年陈云从4岁至14岁生活的地方。童年的陈云,家庭生活十分不幸。他两岁时父亲病故,四岁时,母亲也悲苦地死去。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
父母去世后,由外婆抚养。陈云从小跟舅父廖文光和舅母廖倪氏一起生活。家里靠种田和做小生意勉强维持生计。
|
父母去世后,由外婆抚养。六岁时,外婆去世,陈云过继给舅父母当养子。陈云从小跟舅父廖文光和舅母廖倪氏一起生活。家里靠种田和做小生意勉强维持生计。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
</GuideSteps>
|
</GuideSteps>
|
||||||
|
|
||||||
@@ -215,11 +215,11 @@ const ChenyunPlace1 = () => {
|
|||||||
onContinue={() => setShowAfterDialogGuide(false)}
|
onContinue={() => setShowAfterDialogGuide(false)}
|
||||||
ailgn="left"
|
ailgn="left"
|
||||||
>
|
>
|
||||||
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
|
1.场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态。
|
||||||
{"\n"}
|
{"\n"}
|
||||||
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
|
2.在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习。
|
||||||
{"\n"}
|
{"\n"}
|
||||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
|
3.所有动态光点的展品全部学习后才能进入下一个场景学习。
|
||||||
</StudyGuideModal>
|
</StudyGuideModal>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -287,10 +287,10 @@ const LearningIntroduction = ({
|
|||||||
<div className="mb-8 space-y-4 flex-1 overflow-hidden">
|
<div className="mb-8 space-y-4 flex-1 overflow-hidden">
|
||||||
<div className="h-full overflow-hidden">
|
<div className="h-full overflow-hidden">
|
||||||
{[
|
{[
|
||||||
"走进故居-对话学习模块会包含多个场景,场景中有蓝色动态光点的展品,表示未浏览,可通过点击光点来学习展品背后的故事,学习展品后蓝色动态光点会变为绿色静态光点,表示已浏览;",
|
"走进故居-对话学习模块会包含多个场景,场景中有蓝色动态光点的展品,表示未浏览,可通过点击光点来学习展品背后的故事,学习展品后蓝色动态光点会变为绿色静态光点,表示已浏览。",
|
||||||
"场景中的展品有可能会包含一个或多个拼图,游览过程中如获得拼图,会自动掉落拼图并收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;",
|
"场景中的展品有可能会包含一个或多个拼图,游览过程中如获得拼图,会自动掉落拼图并收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习。",
|
||||||
"所有有蓝色动态光点的展品全部学习后才能进入下一个场景进行学习;",
|
"所有有蓝色动态光点的展品全部学习后才能进入下一个场景进行学习。",
|
||||||
"每个阶段学习过后,会有学习回顾环节,以导图的形式总结了阶段的学习内容;",
|
"每个阶段学习过后,会有学习回顾环节,以导图的形式总结了阶段的学习内容。",
|
||||||
].map((feature, index) => (
|
].map((feature, index) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
|
|||||||
@@ -6,7 +6,6 @@ import {
|
|||||||
Cursor,
|
Cursor,
|
||||||
GuideSteps,
|
GuideSteps,
|
||||||
GuideStepsItem,
|
GuideStepsItem,
|
||||||
StudyGuideModal,
|
|
||||||
} from "@/components";
|
} from "@/components";
|
||||||
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
import { getBackgroundImage, getStaticImage } from "@/lib/utils";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
@@ -49,9 +48,10 @@ const ChenyunPlace2 = () => {
|
|||||||
// GuideSteps 显示状态
|
// GuideSteps 显示状态
|
||||||
const [guideVisible, setGuideVisible] = useState(false);
|
const [guideVisible, setGuideVisible] = useState(false);
|
||||||
// GuideSteps 当前步骤
|
// GuideSteps 当前步骤
|
||||||
|
const [guideVisible2, setGuideVisible2] = useState(false);
|
||||||
|
const [guideStep2, setGuideStep2] = useState(0);
|
||||||
|
|
||||||
const [guideStep, setGuideStep] = useState(0);
|
const [guideStep, setGuideStep] = useState(0);
|
||||||
// 学习引导弹窗显示状态
|
|
||||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
|
||||||
|
|
||||||
const handleOpenExhibit = (index: 1 | 2) => {
|
const handleOpenExhibit = (index: 1 | 2) => {
|
||||||
if (index === 1) {
|
if (index === 1) {
|
||||||
@@ -60,7 +60,10 @@ const ChenyunPlace2 = () => {
|
|||||||
setGuideVisible(true);
|
setGuideVisible(true);
|
||||||
setGuideStep(0);
|
setGuideStep(0);
|
||||||
} else {
|
} else {
|
||||||
// 展品2:直接打开
|
// 展品2:点击时同时打开展品和引导对话,从第1步开始
|
||||||
|
setActiveExhibitId(2);
|
||||||
|
setGuideVisible2(true);
|
||||||
|
setGuideStep2(0);
|
||||||
setActiveExhibitId(index);
|
setActiveExhibitId(index);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -135,10 +138,6 @@ const ChenyunPlace2 = () => {
|
|||||||
<ExhibitOverlay
|
<ExhibitOverlay
|
||||||
visible={activeExhibitId !== null}
|
visible={activeExhibitId !== null}
|
||||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
||||||
description={
|
|
||||||
activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
|
|
||||||
}
|
|
||||||
autoPlayDescription={activeExhibitId === 1}
|
|
||||||
onOpen={() => {
|
onOpen={() => {
|
||||||
if (activeExhibitId === 1) {
|
if (activeExhibitId === 1) {
|
||||||
triggerPuzzleAnimation(2);
|
triggerPuzzleAnimation(2);
|
||||||
@@ -165,7 +164,7 @@ const ChenyunPlace2 = () => {
|
|||||||
zIndex={10000}
|
zIndex={10000}
|
||||||
>
|
>
|
||||||
<GuideStepsItem speaker="student">
|
<GuideStepsItem speaker="student">
|
||||||
那陈云爷爷是怎么有机会到图中的青浦县乙种商业学校读书的呀?
|
那陈云是怎么有机会到图中的青浦县乙种商业学校读书的呀?
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
因为家贫,初小读完的陈云便辍学在家。后在舅母亲戚的资助下,陈云才到青浦县乙种商业学校学习珠算和记账的,他在很短时间里就基本掌握了珠算,还初步学会写账,这为陈云日后从事经济工作打下了基础。
|
因为家贫,初小读完的陈云便辍学在家。后在舅母亲戚的资助下,陈云才到青浦县乙种商业学校学习珠算和记账的,他在很短时间里就基本掌握了珠算,还初步学会写账,这为陈云日后从事经济工作打下了基础。
|
||||||
@@ -175,18 +174,26 @@ const ChenyunPlace2 = () => {
|
|||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
</GuideSteps>
|
</GuideSteps>
|
||||||
|
|
||||||
{/* 对话结束后的学习引导 */}
|
{/* 展品2的引导对话 */}
|
||||||
<StudyGuideModal
|
<GuideSteps
|
||||||
visible={showGuideModal}
|
visible={guideVisible2}
|
||||||
onContinue={() => setShowGuideModal(false)}
|
onVisibleChange={setGuideVisible2}
|
||||||
ailgn="left"
|
currentStep={guideStep2}
|
||||||
|
onStepChange={(step) => setGuideStep2(step)}
|
||||||
|
showMask={false}
|
||||||
|
highlightSelectors={[]}
|
||||||
|
zIndex={10000}
|
||||||
>
|
>
|
||||||
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
|
<GuideStepsItem speaker="student">
|
||||||
{"\n"}
|
这里有一幅陈云提写的颜安小学,请问陈云在这所学校读过书吗?
|
||||||
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
|
</GuideStepsItem>
|
||||||
{"\n"}
|
<GuideStepsItem speaker="guide">
|
||||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
|
是的,陈云在青浦县乙种商业学校学习了一个多月后,又因经济困难不得不辍学回家。多亏当地知识分子、颜安小学校长杜枢,他免费保荐陈云入颜安小学高小部读书。
|
||||||
</StudyGuideModal>
|
</GuideStepsItem>
|
||||||
|
<GuideStepsItem speaker="guide">
|
||||||
|
颜安小学实行的新式教育开阔了陈云的视野,五四运动后,颜安小学师生积极投入反帝爱国运动,为陈云日后加入中国共产党埋下了思想的种子。
|
||||||
|
</GuideStepsItem>
|
||||||
|
</GuideSteps>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import {
|
|||||||
GuideSteps,
|
GuideSteps,
|
||||||
GuideStepsItem,
|
GuideStepsItem,
|
||||||
Video,
|
Video,
|
||||||
StudyGuideModal,
|
|
||||||
} from "@/components";
|
} from "@/components";
|
||||||
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
@@ -45,8 +44,6 @@ const ChenyunPlace3 = () => {
|
|||||||
const [guideVisible, setGuideVisible] = useState(false);
|
const [guideVisible, setGuideVisible] = useState(false);
|
||||||
// GuideSteps 当前步骤
|
// GuideSteps 当前步骤
|
||||||
const [guideStep, setGuideStep] = useState(0);
|
const [guideStep, setGuideStep] = useState(0);
|
||||||
// 学习引导弹窗显示状态
|
|
||||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
|
||||||
|
|
||||||
const handleOpenExhibit = (index: 1 | 2) => {
|
const handleOpenExhibit = (index: 1 | 2) => {
|
||||||
if (index === 1) {
|
if (index === 1) {
|
||||||
@@ -181,19 +178,6 @@ const ChenyunPlace3 = () => {
|
|||||||
陈云的珠算能力在商务印书馆工作期间有了很大提高。由于工作认真负责,三年的学徒期,陈云提前两年就破格到商务印书馆虹口分店(现为1925书局)当店员。
|
陈云的珠算能力在商务印书馆工作期间有了很大提高。由于工作认真负责,三年的学徒期,陈云提前两年就破格到商务印书馆虹口分店(现为1925书局)当店员。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
</GuideSteps>
|
</GuideSteps>
|
||||||
|
|
||||||
{/* 对话结束后的学习引导 */}
|
|
||||||
<StudyGuideModal
|
|
||||||
visible={showGuideModal}
|
|
||||||
onContinue={() => setShowGuideModal(false)}
|
|
||||||
ailgn="left"
|
|
||||||
>
|
|
||||||
1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态;
|
|
||||||
{"\n"}
|
|
||||||
2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;
|
|
||||||
{"\n"}
|
|
||||||
3、所有动态光点的展品全部学习后才能进入下一个场景学习;
|
|
||||||
</StudyGuideModal>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -161,7 +161,7 @@ const ChenyunPlace4 = () => {
|
|||||||
zIndex={10000}
|
zIndex={10000}
|
||||||
>
|
>
|
||||||
<GuideStepsItem speaker="student">
|
<GuideStepsItem speaker="student">
|
||||||
这组史料看起来陈云爷爷前往中央苏区了,他在中央苏区主要负责哪些工作呢?
|
这组史料看起来陈云前往中央苏区了,他在中央苏区主要负责哪些工作呢?
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
1932年3月,陈云担任中共临时中央政治局常委,兼任全国总工会党团书记。1933年1月,陈云离开上海前往中央苏区首府瑞金,继续参加中共中央和全国总工会的领导工作。
|
1932年3月,陈云担任中共临时中央政治局常委,兼任全国总工会党团书记。1933年1月,陈云离开上海前往中央苏区首府瑞金,继续参加中共中央和全国总工会的领导工作。
|
||||||
@@ -188,10 +188,10 @@ const ChenyunPlace4 = () => {
|
|||||||
苏区的经济工作一定不简单,陈云是如何开展工作的呢?
|
苏区的经济工作一定不简单,陈云是如何开展工作的呢?
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
中央苏区时期的经济斗争,是陈云经济工作能力的“淬炼场”。陈云分析了“左”倾经济政策的表现、危害以及原因,他强调,当务之急是重新严格审查各个企业、工厂以及商店、大小作坊的实际承受力和经济支付能力,
|
中央苏区时期的经济斗争,是陈云经济工作能力的“淬炼场”。陈云分析了“左”倾经济政策的表现、危害以及原因。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
从实际出发,实事求是地制定符合中央苏维埃区域每一个工厂、企业、作坊发展需求的劳动政策。
|
他强调,当务之急是重新严格审查各个企业、工厂以及商店、大小作坊的实际承受力和经济支付能力。从实际出发,实事求是地制定符合中央苏维埃区域每一个工厂、企业、作坊发展需求的劳动政策。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
陈云提议建立合作社,广泛吸收失业工人加入,多听取工人建议、增强企业管理的民主性,从而更好地建设苏区经济。这些做法为他日后主持全国财经工作积累了宝贵经验。
|
陈云提议建立合作社,广泛吸收失业工人加入,多听取工人建议、增强企业管理的民主性,从而更好地建设苏区经济。这些做法为他日后主持全国财经工作积累了宝贵经验。
|
||||||
|
|||||||
@@ -5,8 +5,9 @@ import {
|
|||||||
Image,
|
Image,
|
||||||
Cursor,
|
Cursor,
|
||||||
Video,
|
Video,
|
||||||
Overlay,
|
|
||||||
StudyGuideModal,
|
StudyGuideModal,
|
||||||
|
GuideSteps,
|
||||||
|
GuideStepsItem,
|
||||||
} from "@/components";
|
} from "@/components";
|
||||||
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
|
||||||
import { useNavigate, useParams } from "react-router-dom";
|
import { useNavigate, useParams } from "react-router-dom";
|
||||||
@@ -53,12 +54,20 @@ const ChenyunPlace5 = () => {
|
|||||||
// 学习引导弹窗
|
// 学习引导弹窗
|
||||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||||
|
|
||||||
|
// 展品1引导对话
|
||||||
|
const [guideVisible, setGuideVisible] = useState(false);
|
||||||
|
const [guideStep, setGuideStep] = useState(0);
|
||||||
|
|
||||||
const handleOpenExhibit = (index: 1 | 2 | 3) => {
|
const handleOpenExhibit = (index: 1 | 2 | 3) => {
|
||||||
if (index === 3) {
|
if (index === 3) {
|
||||||
// 展品3:播放视频,不打开展品
|
// 展品3:播放视频,不打开展品
|
||||||
setVideoVisible3(true);
|
setVideoVisible3(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (index === 2) {
|
||||||
|
setGuideVisible(true);
|
||||||
|
setGuideStep(0);
|
||||||
|
}
|
||||||
setActiveExhibitId(index);
|
setActiveExhibitId(index);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -130,6 +139,27 @@ const ChenyunPlace5 = () => {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{/* 展品1的引导对话 */}
|
||||||
|
<GuideSteps
|
||||||
|
visible={guideVisible}
|
||||||
|
onVisibleChange={setGuideVisible}
|
||||||
|
currentStep={guideStep}
|
||||||
|
onStepChange={(step) => setGuideStep(step)}
|
||||||
|
showMask={false}
|
||||||
|
highlightSelectors={[]}
|
||||||
|
zIndex={10000}
|
||||||
|
>
|
||||||
|
<GuideStepsItem speaker="student">
|
||||||
|
小沪,延安时期因为国民党的封锁,陕甘宁边区经济困难。陈云转战陕甘宁边区主持财经工作,他一定遇到了很多经济难题吧。
|
||||||
|
</GuideStepsItem>
|
||||||
|
<GuideStepsItem speaker="guide">
|
||||||
|
1944年新春伊始,陈云开始担任西北财经办事处副主任,工作转到财经方面,这是陈云以主要精力从事领导经济工作的开始。当时,陕甘宁边区在国民党严密封锁下,财经状况严峻,边区物价猛涨,老百姓日常生活必需的布匹和粮食十分缺乏。
|
||||||
|
</GuideStepsItem>
|
||||||
|
<GuideStepsItem speaker="guide">
|
||||||
|
国民党顽固派封锁边区,企图“不让一粒粮、一尺布进入边区”,同时千方百计阻止边区食盐出口。
|
||||||
|
</GuideStepsItem>
|
||||||
|
</GuideSteps>
|
||||||
|
|
||||||
{/* 展品3视频播放(全屏) */}
|
{/* 展品3视频播放(全屏) */}
|
||||||
{videoVisible3 && (
|
{videoVisible3 && (
|
||||||
<Video
|
<Video
|
||||||
@@ -150,9 +180,9 @@ const ChenyunPlace5 = () => {
|
|||||||
<ExhibitOverlay
|
<ExhibitOverlay
|
||||||
visible={activeExhibitId !== null}
|
visible={activeExhibitId !== null}
|
||||||
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
src={activeExhibitId ? exhibitSrcMap[activeExhibitId] : ""}
|
||||||
description={
|
// description={
|
||||||
activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
|
// activeExhibitId ? exhibitDescriptionMap[activeExhibitId] : undefined
|
||||||
}
|
// }
|
||||||
autoPlayDescription={activeExhibitId === 2}
|
autoPlayDescription={activeExhibitId === 2}
|
||||||
onOpen={() => {
|
onOpen={() => {
|
||||||
if (activeExhibitId === 2) {
|
if (activeExhibitId === 2) {
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import {
|
|||||||
GuideStepsItem,
|
GuideStepsItem,
|
||||||
type SingleChoiceOption,
|
type SingleChoiceOption,
|
||||||
type DragFillResult,
|
type DragFillResult,
|
||||||
QuizPanel,
|
SingleChoiceQuizPanel,
|
||||||
StudyGuideModal,
|
StudyGuideModal,
|
||||||
} from "@/components";
|
} from "@/components";
|
||||||
import { SuccessAlert, DragQuizPanel } from "@/components/layout";
|
import { SuccessAlert, DragQuizPanel } from "@/components/layout";
|
||||||
@@ -89,6 +89,7 @@ const ChenyunPlace7 = () => {
|
|||||||
const [quiz2Value, setQuiz2Value] = useState<DragFillResult[]>([]);
|
const [quiz2Value, setQuiz2Value] = useState<DragFillResult[]>([]);
|
||||||
// 成功提示
|
// 成功提示
|
||||||
const [successAlertVisible, setSuccessAlertVisible] = useState(false);
|
const [successAlertVisible, setSuccessAlertVisible] = useState(false);
|
||||||
|
const [successAlertContent, setSuccessAlertContent] = useState<string>("");
|
||||||
// 标记拖拽题是否已完成
|
// 标记拖拽题是否已完成
|
||||||
const [quiz2Completed, setQuiz2Completed] = useState(false);
|
const [quiz2Completed, setQuiz2Completed] = useState(false);
|
||||||
// 学习引导弹窗
|
// 学习引导弹窗
|
||||||
@@ -272,30 +273,33 @@ const ChenyunPlace7 = () => {
|
|||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
有人计算,一百元法币,在一九三七年可买两头牛,一九四五年只能买两个鸡蛋,一九四七年只能买一个煤球,到一九四九年五月连一粒米也买不到。可见,当时通货膨胀多么严重。
|
有人计算,一百元法币,在一九三七年可买两头牛,一九四五年只能买两个鸡蛋,一九四七年只能买一个煤球,到一九四九年五月连一粒米也买不到。可见,当时通货膨胀多么严重。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
|
<GuideStepsItem speaker="guide">
|
||||||
|
打击投机资本,稳定金融物价,陈云代中央起草《中共中央关于打击银元使人民币占领阵地的指示》,提出以强硬手段打击投机势力。
|
||||||
|
</GuideStepsItem>
|
||||||
</GuideSteps>
|
</GuideSteps>
|
||||||
|
|
||||||
{/* 单选题1:在视频1结束后出现(点击即判定) */}
|
{/* 单选题1:在视频1结束后出现(点击即判定) */}
|
||||||
<QuizPanel
|
<SingleChoiceQuizPanel
|
||||||
visible={quizVisible}
|
visible={quizVisible}
|
||||||
zIndex={10002}
|
zIndex={10002}
|
||||||
title="题目1(单选题):1949年6月,中央央指导打击银元投机活动,金条、银元一律由人民银行挂牌收兑,铁路交通事业、税收一律收入人民币。同时,上海军管会查封了证券大楼。这次“银元之战”()"
|
title={`题目1(单选题):1949年6月,中共中央指示打击银元投机活动,金条、银元一律由人民银行挂牌收兑,铁路交通事业,税收一律收人民币。同时,上海军管会查封了证券大楼。这次“银元之战”(\xa0\xa0\xa0\xa0)。`}
|
||||||
options={QUIZ1_OPTIONS}
|
options={QUIZ1_OPTIONS}
|
||||||
value={quizAnswer}
|
correctAnswer={"B"}
|
||||||
error={quizError}
|
errorMessage={quizError}
|
||||||
onChange={(val) => {
|
onSubmit={(val) => {
|
||||||
setQuizAnswer(val);
|
setQuizAnswer(val);
|
||||||
if (val === "B") {
|
setQuizVisible(false);
|
||||||
setQuizVisible(false);
|
setQuizError("");
|
||||||
setQuizError("");
|
// 显示成功提示
|
||||||
// 显示成功提示
|
setSuccessAlertVisible(true);
|
||||||
setSuccessAlertVisible(true);
|
setSuccessAlertContent(
|
||||||
} else {
|
"“银元之战”属于当时人民政府整顿金融的重要举措,黄金、银元投机不利于人民币币值稳定和流通,因此“银元之战”打击贵金属投机活动,有利于稳定人民币的发行和地位"
|
||||||
// 使用对应选项的错误提示,如果不存在则使用通用提示
|
);
|
||||||
setQuizError(
|
}}
|
||||||
QUIZ1_ERROR_HINTS[val] ||
|
onWrongSelect={(val) => {
|
||||||
"再想一想,注意题干中的时间和提示信息哦~"
|
return (
|
||||||
);
|
QUIZ1_ERROR_HINTS[val] || "再想一想,注意题干中的时间和提示信息哦~"
|
||||||
}
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@@ -371,6 +375,7 @@ const ChenyunPlace7 = () => {
|
|||||||
<SuccessAlert
|
<SuccessAlert
|
||||||
visible={successAlertVisible}
|
visible={successAlertVisible}
|
||||||
title="恭喜你, 选择正确!"
|
title="恭喜你, 选择正确!"
|
||||||
|
content={successAlertContent}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setSuccessAlertVisible(false);
|
setSuccessAlertVisible(false);
|
||||||
// 如果是单选题答对且拖拽题还没开始,继续进入第二阶段
|
// 如果是单选题答对且拖拽题还没开始,继续进入第二阶段
|
||||||
|
|||||||
@@ -43,11 +43,17 @@ const ChenyunPlace8 = () => {
|
|||||||
// 展品2的对话引导
|
// 展品2的对话引导
|
||||||
const [guideVisible, setGuideVisible] = useState(false);
|
const [guideVisible, setGuideVisible] = useState(false);
|
||||||
const [guideStep, setGuideStep] = useState(0);
|
const [guideStep, setGuideStep] = useState(0);
|
||||||
|
const [guideVisible2, setGuideVisible2] = useState(false);
|
||||||
|
const [guideStep2, setGuideStep2] = useState(0);
|
||||||
// 学习引导弹窗
|
// 学习引导弹窗
|
||||||
const [showGuideModal, setShowGuideModal] = useState(true);
|
const [showGuideModal, setShowGuideModal] = useState(true);
|
||||||
|
|
||||||
const handleOpenExhibit = (index: 1 | 2) => {
|
const handleOpenExhibit = (index: 1 | 2) => {
|
||||||
setActiveExhibitId(index);
|
setActiveExhibitId(index);
|
||||||
|
if (index === 1) {
|
||||||
|
setGuideVisible2(true);
|
||||||
|
setGuideStep2(0);
|
||||||
|
}
|
||||||
// 如果是展品2,显示对话引导
|
// 如果是展品2,显示对话引导
|
||||||
if (index === 2) {
|
if (index === 2) {
|
||||||
setGuideVisible(true);
|
setGuideVisible(true);
|
||||||
@@ -135,11 +141,12 @@ const ChenyunPlace8 = () => {
|
|||||||
triggerPuzzleAnimation(11);
|
triggerPuzzleAnimation(11);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
description={
|
// description={
|
||||||
activeExhibitId === 1
|
// activeExhibitId === 1
|
||||||
? `打赢"银元之战""两白一黑"战役的过程彰显了中国共产党治理经济的卓越能力!这里有一份"一五"计划报告的手稿,陈云在"一五"计划的编制中做出了重大贡献。一九五四年,陈云的主要工作之一,就是主持编制第一个五年计划纲要。这次编制工作是在前四次基础上进行的,陈云提出计划编制工作中要注意几个问题:首先是工业投资金额,其次是市场供应和人民生活,第三是农业发展速度,这三个问题对编制计划有指导意义。第一个五年计划纲要草案的重点是优先发展重工业,特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障,通过"统购统销"稳定粮价,为重点工程项目筑牢根基,亲手铺就了我国工业化的起步之路。`
|
// ? `打赢"银元之战""两白一黑"战役的过程彰显了中国共产党治理经济的卓越能力!这里有一份"一五"计划报告的手稿,陈云在"一五"计划的编制中做出了重大贡献。
|
||||||
: undefined
|
// 一九五四年,陈云的主要工作之一,就是主持编制第一个五年计划纲要。这次编制工作是在前四次基础上进行的,陈云提出计划编制工作中要注意几个问题:首先是工业投资金额,其次是市场供应和人民生活,第三是农业发展速度,这三个问题对编制计划有指导意义。第一个五年计划纲要草案的重点是优先发展重工业,特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障,通过"统购统销"稳定粮价,为重点工程项目筑牢根基,亲手铺就了我国工业化的起步之路。`
|
||||||
}
|
// : undefined
|
||||||
|
// }
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
if (activeExhibitId !== null) {
|
if (activeExhibitId !== null) {
|
||||||
markExhibitVisited(place, activeExhibitId);
|
markExhibitVisited(place, activeExhibitId);
|
||||||
@@ -169,6 +176,31 @@ const ChenyunPlace8 = () => {
|
|||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
</GuideSteps>
|
</GuideSteps>
|
||||||
|
|
||||||
|
{/* 打赢“银元之战”“两白一黑”战役的过程真的是彰显了中国共产党治理经济的卓越能力!这里有一份“一五”计划报告的手稿,陈云在“一五”计划的编制中做出了什么贡献吗? */}
|
||||||
|
|
||||||
|
<GuideSteps
|
||||||
|
visible={guideVisible2}
|
||||||
|
onVisibleChange={(visible) => setGuideVisible2(visible)}
|
||||||
|
currentStep={guideStep2}
|
||||||
|
onStepChange={(step) => setGuideStep2(step)}
|
||||||
|
showMask={false}
|
||||||
|
highlightSelectors={[]}
|
||||||
|
zIndex={10001}
|
||||||
|
>
|
||||||
|
<GuideStepsItem speaker="student">
|
||||||
|
您讲的"统购统销"打赢“银元之战”“两白一黑”战役的过程真的是彰显了中国共产党治理经济的卓越能力!这里有一份“一五”计划报告的手稿,陈云在“一五”计划的编制中做出了什么贡献吗?
|
||||||
|
</GuideStepsItem>
|
||||||
|
<GuideStepsItem speaker="guide">
|
||||||
|
一九五四年,陈云的主要工作之一,就是主持编制第一个五年计划纲要。
|
||||||
|
</GuideStepsItem>
|
||||||
|
<GuideStepsItem speaker="guide">
|
||||||
|
这次编制工作是在前四次基础上进行的,陈云提出计划编制工作中要注意几个问题:首先是工业投资金额,其次是市场供应和人民生活,第三是农业发展速度,这三个问题对编制计划有指导意义。
|
||||||
|
</GuideStepsItem>
|
||||||
|
<GuideStepsItem speaker="guide">
|
||||||
|
第一个五年计划纲要草案的重点是优先发展重工业,特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障,通过“统购统销”稳定粮价,为重点工程项目筑牢根基,亲手铺就了我国工业化的起步之路。
|
||||||
|
</GuideStepsItem>
|
||||||
|
</GuideSteps>
|
||||||
|
|
||||||
{/* 学习引导 */}
|
{/* 学习引导 */}
|
||||||
<StudyGuideModal
|
<StudyGuideModal
|
||||||
visible={showGuideModal}
|
visible={showGuideModal}
|
||||||
|
|||||||
@@ -88,7 +88,7 @@ const ChenyunPlace9 = () => {
|
|||||||
>
|
>
|
||||||
{/* 标题 */}
|
{/* 标题 */}
|
||||||
<Title
|
<Title
|
||||||
title="改革时期·擘画实业"
|
title="改革浪潮·擘画实业"
|
||||||
subtitle={subtitle}
|
subtitle={subtitle}
|
||||||
subtitleClassName={subtitleClassName}
|
subtitleClassName={subtitleClassName}
|
||||||
className="absolute top-10 left-1/2 -translate-x-1/2"
|
className="absolute top-10 left-1/2 -translate-x-1/2"
|
||||||
@@ -164,10 +164,10 @@ const ChenyunPlace9 = () => {
|
|||||||
我们已经沿着陈云的足迹,从练塘水乡走到改革开放的前沿,读懂了他"适合老百姓的要求,做了一点事"的初心。
|
我们已经沿着陈云的足迹,从练塘水乡走到改革开放的前沿,读懂了他"适合老百姓的要求,做了一点事"的初心。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
接下来,请你跨越时空,走进1949年刚解放时期的上海,参与到当时那场轰轰烈烈的"银元之战"和"米棉之战"之中去,在实践决策中体会,陈云"多谋善断""敢闯务实"的卓越智慧与战略魄力,
|
接下来,请你跨越时空,走进1949年刚解放时期的上海,参与到当时那场轰轰烈烈的"银元之战"和"米棉之战"之中去,在实践决策中体会。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
<GuideStepsItem speaker="guide">
|
<GuideStepsItem speaker="guide">
|
||||||
感受我国集中力量办大事的制度优势如何在经济战场中彰显威力。
|
陈云"多谋善断""敢闯务实"的卓越智慧与战略魄力,感受我国集中力量办大事的制度优势如何在经济战场中彰显威力。
|
||||||
</GuideStepsItem>
|
</GuideStepsItem>
|
||||||
</GuideSteps>
|
</GuideSteps>
|
||||||
|
|
||||||
|
|||||||
@@ -109,7 +109,7 @@ export const MimianBattle = ({
|
|||||||
state.setMimianSuccessAlertContent("");
|
state.setMimianSuccessAlertContent("");
|
||||||
// 显示旁白2(图4)
|
// 显示旁白2(图4)
|
||||||
state.setShowMimianNarration2(true);
|
state.setShowMimianNarration2(true);
|
||||||
|
|
||||||
// 检查碎片14是否已解锁,如果未解锁则触发动画
|
// 检查碎片14是否已解锁,如果未解锁则触发动画
|
||||||
const pieceId = 14;
|
const pieceId = 14;
|
||||||
if (!isPuzzleUnlocked(starName, pieceId)) {
|
if (!isPuzzleUnlocked(starName, pieceId)) {
|
||||||
|
|||||||
@@ -152,7 +152,7 @@ export const YinyuanBattle = ({
|
|||||||
// 关闭聚光灯、标记银元之战为已解决、显示走势图
|
// 关闭聚光灯、标记银元之战为已解决、显示走势图
|
||||||
state.setIsYinyuanSolved(true);
|
state.setIsYinyuanSolved(true);
|
||||||
state.setShowSuccessAlert(false);
|
state.setShowSuccessAlert(false);
|
||||||
|
|
||||||
// 检查碎片13是否已解锁,如果未解锁则触发动画
|
// 检查碎片13是否已解锁,如果未解锁则触发动画
|
||||||
const pieceId = 13;
|
const pieceId = 13;
|
||||||
if (!isPuzzleUnlocked(starName, pieceId)) {
|
if (!isPuzzleUnlocked(starName, pieceId)) {
|
||||||
@@ -236,4 +236,3 @@ export const YinyuanBattle = ({
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -46,7 +46,7 @@ const EntranceBackgroundMap: Record<ModuleName, EntranceBackground> = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
cultural: {
|
cultural: {
|
||||||
backgroundImage: getBackgroundImage("entrance/文化名人"),
|
backgroundImage: getBackgroundImage("entrance/文教名人"),
|
||||||
Star: {
|
Star: {
|
||||||
Star1: {
|
Star1: {
|
||||||
image: getStaticImage("entrance/鲁迅故居-解锁"),
|
image: getStaticImage("entrance/鲁迅故居-解锁"),
|
||||||
|
|||||||
@@ -134,7 +134,7 @@ const Home = () => {
|
|||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
{/* BGM 循环播放 */}
|
{/* BGM 循环播放 */}
|
||||||
<audio ref={bgmRef} src={getPublicPath("audio/BGM.mp3")} loop />
|
<audio ref={bgmRef} src={getPublicPath("audio/test.mp3")} loop />
|
||||||
<Video
|
<Video
|
||||||
src={getPublicPath("video/maozedong/demo.mp4")}
|
src={getPublicPath("video/maozedong/demo.mp4")}
|
||||||
className="w-full h-full aspect-video"
|
className="w-full h-full aspect-video"
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ export const ChenyunRoutes: RouteObject[] = [
|
|||||||
path: "place2",
|
path: "place2",
|
||||||
element: <ChenyunPlace2 />,
|
element: <ChenyunPlace2 />,
|
||||||
handle: {
|
handle: {
|
||||||
videoSrc: "video/chenyun/cunyun_02.mp4",
|
videoSrc: "video/chenyun/chenyun_02.mp4",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
+1
-1
@@ -34,6 +34,6 @@
|
|||||||
"allowSyntheticDefaultImports": true,
|
"allowSyntheticDefaultImports": true,
|
||||||
"forceConsistentCasingInFileNames": true
|
"forceConsistentCasingInFileNames": true
|
||||||
},
|
},
|
||||||
"include": ["src"],
|
"include": ["src", "vite.config.ts", "eslint.config.ts", "types/**/*.d.ts"],
|
||||||
"exclude": ["node_modules", "dist"]
|
"exclude": ["node_modules", "dist"]
|
||||||
}
|
}
|
||||||
+2
-1
@@ -4,6 +4,7 @@
|
|||||||
"lib": ["ES2023"],
|
"lib": ["ES2023"],
|
||||||
"module": "ESNext",
|
"module": "ESNext",
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
"types": ["node"],
|
||||||
|
|
||||||
/* Bundler mode */
|
/* Bundler mode */
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
@@ -19,5 +20,5 @@
|
|||||||
"noFallthroughCasesInSwitch": true,
|
"noFallthroughCasesInSwitch": true,
|
||||||
"noUncheckedIndexedAccess": true
|
"noUncheckedIndexedAccess": true
|
||||||
},
|
},
|
||||||
"include": ["vite.config.ts", "eslint.config.ts"]
|
"include": ["vite.config.ts", "eslint.config.ts", "types/**/*.d.ts"]
|
||||||
}
|
}
|
||||||
Vendored
+6
@@ -0,0 +1,6 @@
|
|||||||
|
declare module "@vitejs/plugin-react" {
|
||||||
|
const plugin: any;
|
||||||
|
export default plugin;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -15,4 +15,28 @@ export default defineConfig({
|
|||||||
host: "0.0.0.0",
|
host: "0.0.0.0",
|
||||||
// port: 5000,
|
// port: 5000,
|
||||||
},
|
},
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks: (id) => {
|
||||||
|
// 将 components/index.ts 和它导出的组件放在同一个 chunk,避免循环依赖
|
||||||
|
if (
|
||||||
|
id.includes("components/index") ||
|
||||||
|
id.includes("components/guide/StudyGuideModal") ||
|
||||||
|
id.includes("components/clue/ClueHintModal") ||
|
||||||
|
id.includes("components/clue/ClueBookModal")
|
||||||
|
) {
|
||||||
|
return "components-shared";
|
||||||
|
}
|
||||||
|
// 将其他 guide 和 clue 组件也放在同一个 chunk
|
||||||
|
if (
|
||||||
|
id.includes("components/guide") ||
|
||||||
|
id.includes("components/clue")
|
||||||
|
) {
|
||||||
|
return "components-shared";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
Reference in new issue
Block a user