diff --git a/eslint.config.ts b/eslint.config.ts index ff03589..70a39d5 100644 --- a/eslint.config.ts +++ b/eslint.config.ts @@ -5,7 +5,7 @@ import reactRefresh from "eslint-plugin-react-refresh"; import tseslint from "typescript-eslint"; export default tseslint.config( - { ignores: ["dist", "node_modules"] }, + { ignores: ["dist", "node_modules", "vite.config.ts"] }, { extends: [js.configs.recommended, ...tseslint.configs.recommended], files: ["**/*.{ts,tsx}"], diff --git a/package.json b/package.json index 51b4c62..66e1fd7 100644 --- a/package.json +++ b/package.json @@ -57,5 +57,10 @@ "typescript": "^5.9.3", "typescript-eslint": "^8.46.1", "vite": "^7.1.7" + }, + "pnpm": { + "onlyBuiltDependencies": [ + "core-js" + ] } } diff --git a/src/assets/images/components/close.png b/src/assets/images/components/close.png new file mode 100644 index 0000000..3f7d1d3 Binary files /dev/null and b/src/assets/images/components/close.png differ diff --git a/src/assets/images/entrance/文教名人.png b/src/assets/images/entrance/文教名人.png new file mode 100644 index 0000000..0ed36dd Binary files /dev/null and b/src/assets/images/entrance/文教名人.png differ diff --git a/src/assets/images/menu/模块-文教名人.png b/src/assets/images/menu/模块-文教名人.png new file mode 100644 index 0000000..aa49a70 Binary files /dev/null and b/src/assets/images/menu/模块-文教名人.png differ diff --git a/src/components/exhibit/ExhibitOverlay.tsx b/src/components/exhibit/ExhibitOverlay.tsx index 237fb9d..0ec619c 100644 --- a/src/components/exhibit/ExhibitOverlay.tsx +++ b/src/components/exhibit/ExhibitOverlay.tsx @@ -53,7 +53,7 @@ const ExhibitOverlay = ({ onOpen, }: ExhibitOverlayProps) => { const maskSrc = getStaticImage("components/蒙版遮罩"); - const backSrc = getStaticImage("components/关闭"); + const backSrc = getStaticImage("components/close"); // 获取缩放参数,用于视觉对齐 const { scale, offsetX, offsetY, DESIGN_WIDTH, DESIGN_HEIGHT } = useScale(); diff --git a/src/pages/Menu.tsx b/src/pages/Menu.tsx index 855893a..d5ea9c7 100644 --- a/src/pages/Menu.tsx +++ b/src/pages/Menu.tsx @@ -18,9 +18,9 @@ const Menu = () => { }, { id: 2, - name: "文化名人", + name: "文教名人", moduleName: "cultural", - image: "menu/模块-文化名人", + image: "menu/模块-文教名人", }, { id: 3, diff --git a/src/pages/chenyun/place/place1.tsx b/src/pages/chenyun/place/place1.tsx index bfe64aa..88c65e0 100644 --- a/src/pages/chenyun/place/place1.tsx +++ b/src/pages/chenyun/place/place1.tsx @@ -167,7 +167,7 @@ const ChenyunPlace1 = () => { 进入陈云故居后,我们一起来了解陈云同志经历的7个阶段:“水乡少年 艰辛成长”、“商务启航 投身革命”、“苏区淬炼 崭露头角”、“延安担当 经济破局”、“恢复时期 经济奠基”、“建设时期 务实兴邦”、“改革浪潮 - 擘画实业”; + 擘画实业”。 {/* 学习说明对话框 */} @@ -196,16 +196,16 @@ const ChenyunPlace1 = () => { highlightSelectors={[]} > - 小沪!这就是陈云爷爷小时候生活的房子吗?看起来和普通农家差不多,他童年过得艰苦吗? + 小沪!这就是陈云小时候生活的房子吗?看起来和普通农家差不多,他童年过得艰苦吗? - 这座房子就是陈云故居,位于上海市青浦区练塘镇下塘街95号,是一座坐南朝北、面向河畔的两层楼江南民居。... + 这座房子就是陈云故居,位于上海市青浦区练塘镇下塘街95号,是一座坐南朝北、面向河畔的两层楼江南民居。 - 实际上是陈云舅父母的家,也是少年陈云从4岁至14岁生活的地方。童年的陈云,家庭生活十分不幸。他两岁时父亲病故,四岁时,母亲也悲苦地死去... + 实际上是陈云舅父母的家,也是少年陈云从4岁至14岁生活的地方。童年的陈云,家庭生活十分不幸。他两岁时父亲病故,四岁时,母亲也悲苦地死去。 - 父母去世后,由外婆抚养。陈云从小跟舅父廖文光和舅母廖倪氏一起生活。家里靠种田和做小生意勉强维持生计。 + 父母去世后,由外婆抚养。六岁时,外婆去世,陈云过继给舅父母当养子。陈云从小跟舅父廖文光和舅母廖倪氏一起生活。家里靠种田和做小生意勉强维持生计。 @@ -215,11 +215,11 @@ const ChenyunPlace1 = () => { onContinue={() => setShowAfterDialogGuide(false)} ailgn="left" > - 1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态; + 1.场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态。 {"\n"} - 2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习; + 2.在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习。 {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习; + 3.所有动态光点的展品全部学习后才能进入下一个场景学习。 ); @@ -287,10 +287,10 @@ const LearningIntroduction = ({
{[ - "走进故居-对话学习模块会包含多个场景,场景中有蓝色动态光点的展品,表示未浏览,可通过点击光点来学习展品背后的故事,学习展品后蓝色动态光点会变为绿色静态光点,表示已浏览;", - "场景中的展品有可能会包含一个或多个拼图,游览过程中如获得拼图,会自动掉落拼图并收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习;", - "所有有蓝色动态光点的展品全部学习后才能进入下一个场景进行学习;", - "每个阶段学习过后,会有学习回顾环节,以导图的形式总结了阶段的学习内容;", + "走进故居-对话学习模块会包含多个场景,场景中有蓝色动态光点的展品,表示未浏览,可通过点击光点来学习展品背后的故事,学习展品后蓝色动态光点会变为绿色静态光点,表示已浏览。", + "场景中的展品有可能会包含一个或多个拼图,游览过程中如获得拼图,会自动掉落拼图并收入拼图盒中,拼图盒可以点开查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习。", + "所有有蓝色动态光点的展品全部学习后才能进入下一个场景进行学习。", + "每个阶段学习过后,会有学习回顾环节,以导图的形式总结了阶段的学习内容。", ].map((feature, index) => (
{ // GuideSteps 显示状态 const [guideVisible, setGuideVisible] = useState(false); // GuideSteps 当前步骤 + const [guideVisible2, setGuideVisible2] = useState(false); + const [guideStep2, setGuideStep2] = useState(0); + const [guideStep, setGuideStep] = useState(0); - // 学习引导弹窗显示状态 - const [showGuideModal, setShowGuideModal] = useState(true); const handleOpenExhibit = (index: 1 | 2) => { if (index === 1) { @@ -60,7 +60,10 @@ const ChenyunPlace2 = () => { setGuideVisible(true); setGuideStep(0); } else { - // 展品2:直接打开 + // 展品2:点击时同时打开展品和引导对话,从第1步开始 + setActiveExhibitId(2); + setGuideVisible2(true); + setGuideStep2(0); setActiveExhibitId(index); } }; @@ -135,10 +138,6 @@ const ChenyunPlace2 = () => { { if (activeExhibitId === 1) { triggerPuzzleAnimation(2); @@ -165,7 +164,7 @@ const ChenyunPlace2 = () => { zIndex={10000} > - 那陈云爷爷是怎么有机会到图中的青浦县乙种商业学校读书的呀? + 那陈云是怎么有机会到图中的青浦县乙种商业学校读书的呀? 因为家贫,初小读完的陈云便辍学在家。后在舅母亲戚的资助下,陈云才到青浦县乙种商业学校学习珠算和记账的,他在很短时间里就基本掌握了珠算,还初步学会写账,这为陈云日后从事经济工作打下了基础。 @@ -175,18 +174,26 @@ const ChenyunPlace2 = () => { - {/* 对话结束后的学习引导 */} - setShowGuideModal(false)} - ailgn="left" + {/* 展品2的引导对话 */} + setGuideStep2(step)} + showMask={false} + highlightSelectors={[]} + zIndex={10000} > - 1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态; - {"\n"} - 2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习; - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习; - + + 这里有一幅陈云提写的颜安小学,请问陈云在这所学校读过书吗? + + + 是的,陈云在青浦县乙种商业学校学习了一个多月后,又因经济困难不得不辍学回家。多亏当地知识分子、颜安小学校长杜枢,他免费保荐陈云入颜安小学高小部读书。 + + + 颜安小学实行的新式教育开阔了陈云的视野,五四运动后,颜安小学师生积极投入反帝爱国运动,为陈云日后加入中国共产党埋下了思想的种子。 + +
); }; diff --git a/src/pages/chenyun/place/place3.tsx b/src/pages/chenyun/place/place3.tsx index 360872a..febbaf5 100644 --- a/src/pages/chenyun/place/place3.tsx +++ b/src/pages/chenyun/place/place3.tsx @@ -7,7 +7,6 @@ import { GuideSteps, GuideStepsItem, Video, - StudyGuideModal, } from "@/components"; import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils"; import { useNavigate, useParams } from "react-router-dom"; @@ -45,8 +44,6 @@ const ChenyunPlace3 = () => { const [guideVisible, setGuideVisible] = useState(false); // GuideSteps 当前步骤 const [guideStep, setGuideStep] = useState(0); - // 学习引导弹窗显示状态 - const [showGuideModal, setShowGuideModal] = useState(true); const handleOpenExhibit = (index: 1 | 2) => { if (index === 1) { @@ -181,19 +178,6 @@ const ChenyunPlace3 = () => { 陈云的珠算能力在商务印书馆工作期间有了很大提高。由于工作认真负责,三年的学徒期,陈云提前两年就破格到商务印书馆虹口分店(现为1925书局)当店员。 - - {/* 对话结束后的学习引导 */} - setShowGuideModal(false)} - ailgn="left" - > - 1、场景中出现动态光点的展品表示未浏览,可通过点击光点来了解展品背后的故事,通过滚轮可以放大展品,浏览展品后蓝色动态光点会变为已浏览状态; - {"\n"} - 2、在学习过程中会掉落拼图碎片,拼图碎片会自动收入拼图盒中,拼图盒可以点击查看当前拼图收集情况,点击单个拼图可以回到获得拼图的场景再次学习; - {"\n"} - 3、所有动态光点的展品全部学习后才能进入下一个场景学习; -
); }; diff --git a/src/pages/chenyun/place/place4.tsx b/src/pages/chenyun/place/place4.tsx index dcc2b2d..484eb37 100644 --- a/src/pages/chenyun/place/place4.tsx +++ b/src/pages/chenyun/place/place4.tsx @@ -161,7 +161,7 @@ const ChenyunPlace4 = () => { zIndex={10000} > - 这组史料看起来陈云爷爷前往中央苏区了,他在中央苏区主要负责哪些工作呢? + 这组史料看起来陈云前往中央苏区了,他在中央苏区主要负责哪些工作呢? 1932年3月,陈云担任中共临时中央政治局常委,兼任全国总工会党团书记。1933年1月,陈云离开上海前往中央苏区首府瑞金,继续参加中共中央和全国总工会的领导工作。 @@ -188,10 +188,10 @@ const ChenyunPlace4 = () => { 苏区的经济工作一定不简单,陈云是如何开展工作的呢? - 中央苏区时期的经济斗争,是陈云经济工作能力的“淬炼场”。陈云分析了“左”倾经济政策的表现、危害以及原因,他强调,当务之急是重新严格审查各个企业、工厂以及商店、大小作坊的实际承受力和经济支付能力, + 中央苏区时期的经济斗争,是陈云经济工作能力的“淬炼场”。陈云分析了“左”倾经济政策的表现、危害以及原因。 - 从实际出发,实事求是地制定符合中央苏维埃区域每一个工厂、企业、作坊发展需求的劳动政策。 + 他强调,当务之急是重新严格审查各个企业、工厂以及商店、大小作坊的实际承受力和经济支付能力。从实际出发,实事求是地制定符合中央苏维埃区域每一个工厂、企业、作坊发展需求的劳动政策。 陈云提议建立合作社,广泛吸收失业工人加入,多听取工人建议、增强企业管理的民主性,从而更好地建设苏区经济。这些做法为他日后主持全国财经工作积累了宝贵经验。 diff --git a/src/pages/chenyun/place/place5.tsx b/src/pages/chenyun/place/place5.tsx index f79fc83..ca9fdba 100644 --- a/src/pages/chenyun/place/place5.tsx +++ b/src/pages/chenyun/place/place5.tsx @@ -5,8 +5,9 @@ import { Image, Cursor, Video, - Overlay, StudyGuideModal, + GuideSteps, + GuideStepsItem, } from "@/components"; import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils"; import { useNavigate, useParams } from "react-router-dom"; @@ -53,12 +54,20 @@ const ChenyunPlace5 = () => { // 学习引导弹窗 const [showGuideModal, setShowGuideModal] = useState(true); + // 展品1引导对话 + const [guideVisible, setGuideVisible] = useState(false); + const [guideStep, setGuideStep] = useState(0); + const handleOpenExhibit = (index: 1 | 2 | 3) => { if (index === 3) { // 展品3:播放视频,不打开展品 setVideoVisible3(true); return; } + if (index === 2) { + setGuideVisible(true); + setGuideStep(0); + } setActiveExhibitId(index); }; @@ -130,6 +139,27 @@ const ChenyunPlace5 = () => { /> )} + {/* 展品1的引导对话 */} + setGuideStep(step)} + showMask={false} + highlightSelectors={[]} + zIndex={10000} + > + + 小沪,延安时期因为国民党的封锁,陕甘宁边区经济困难。陈云转战陕甘宁边区主持财经工作,他一定遇到了很多经济难题吧。 + + + 1944年新春伊始,陈云开始担任西北财经办事处副主任,工作转到财经方面,这是陈云以主要精力从事领导经济工作的开始。当时,陕甘宁边区在国民党严密封锁下,财经状况严峻,边区物价猛涨,老百姓日常生活必需的布匹和粮食十分缺乏。 + + + 国民党顽固派封锁边区,企图“不让一粒粮、一尺布进入边区”,同时千方百计阻止边区食盐出口。 + + + {/* 展品3视频播放(全屏) */} {videoVisible3 && ( + {/* 打赢“银元之战”“两白一黑”战役的过程真的是彰显了中国共产党治理经济的卓越能力!这里有一份“一五”计划报告的手稿,陈云在“一五”计划的编制中做出了什么贡献吗? */} + + setGuideVisible2(visible)} + currentStep={guideStep2} + onStepChange={(step) => setGuideStep2(step)} + showMask={false} + highlightSelectors={[]} + zIndex={10001} + > + + 您讲的"统购统销"打赢“银元之战”“两白一黑”战役的过程真的是彰显了中国共产党治理经济的卓越能力!这里有一份“一五”计划报告的手稿,陈云在“一五”计划的编制中做出了什么贡献吗? + + + 一九五四年,陈云的主要工作之一,就是主持编制第一个五年计划纲要。 + + + 这次编制工作是在前四次基础上进行的,陈云提出计划编制工作中要注意几个问题:首先是工业投资金额,其次是市场供应和人民生活,第三是农业发展速度,这三个问题对编制计划有指导意义。 + + + 第一个五年计划纲要草案的重点是优先发展重工业,特别是156项重点工程。当时陈云重点抓重工业建设和粮食保障,通过“统购统销”稳定粮价,为重点工程项目筑牢根基,亲手铺就了我国工业化的起步之路。 + + + {/* 学习引导 */} { > {/* 标题 */} { 我们已经沿着陈云的足迹,从练塘水乡走到改革开放的前沿,读懂了他"适合老百姓的要求,做了一点事"的初心。 </GuideStepsItem> <GuideStepsItem speaker="guide"> - 接下来,请你跨越时空,走进1949年刚解放时期的上海,参与到当时那场轰轰烈烈的"银元之战"和"米棉之战"之中去,在实践决策中体会,陈云"多谋善断""敢闯务实"的卓越智慧与战略魄力, + 接下来,请你跨越时空,走进1949年刚解放时期的上海,参与到当时那场轰轰烈烈的"银元之战"和"米棉之战"之中去,在实践决策中体会。 </GuideStepsItem> <GuideStepsItem speaker="guide"> - 感受我国集中力量办大事的制度优势如何在经济战场中彰显威力。 + 陈云"多谋善断""敢闯务实"的卓越智慧与战略魄力,感受我国集中力量办大事的制度优势如何在经济战场中彰显威力。 </GuideStepsItem> </GuideSteps> diff --git a/src/pages/chenyun/reflection/mimian/MimianBattle.tsx b/src/pages/chenyun/reflection/mimian/MimianBattle.tsx index f3f61a9..a4c18ec 100644 --- a/src/pages/chenyun/reflection/mimian/MimianBattle.tsx +++ b/src/pages/chenyun/reflection/mimian/MimianBattle.tsx @@ -109,7 +109,7 @@ export const MimianBattle = ({ state.setMimianSuccessAlertContent(""); // 显示旁白2(图4) state.setShowMimianNarration2(true); - + // 检查碎片14是否已解锁,如果未解锁则触发动画 const pieceId = 14; if (!isPuzzleUnlocked(starName, pieceId)) { diff --git a/src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx b/src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx index c366b18..b4d9fea 100644 --- a/src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx +++ b/src/pages/chenyun/reflection/yinyuan/YinyuanBattle.tsx @@ -152,7 +152,7 @@ export const YinyuanBattle = ({ // 关闭聚光灯、标记银元之战为已解决、显示走势图 state.setIsYinyuanSolved(true); state.setShowSuccessAlert(false); - + // 检查碎片13是否已解锁,如果未解锁则触发动画 const pieceId = 13; if (!isPuzzleUnlocked(starName, pieceId)) { @@ -236,4 +236,3 @@ export const YinyuanBattle = ({ </> ); }; - diff --git a/src/pages/entrance/index.tsx b/src/pages/entrance/index.tsx index 0e12f04..447eb8e 100644 --- a/src/pages/entrance/index.tsx +++ b/src/pages/entrance/index.tsx @@ -46,7 +46,7 @@ const EntranceBackgroundMap: Record<ModuleName, EntranceBackground> = { }, }, cultural: { - backgroundImage: getBackgroundImage("entrance/文化名人"), + backgroundImage: getBackgroundImage("entrance/文教名人"), Star: { Star1: { image: getStaticImage("entrance/鲁迅故居-解锁"), diff --git a/src/pages/maozedong/demo.tsx b/src/pages/maozedong/demo.tsx index 7aef09f..1673f98 100644 --- a/src/pages/maozedong/demo.tsx +++ b/src/pages/maozedong/demo.tsx @@ -134,7 +134,7 @@ const Home = () => { return ( <div> {/* BGM 循环播放 */} - <audio ref={bgmRef} src={getPublicPath("audio/BGM.mp3")} loop /> + <audio ref={bgmRef} src={getPublicPath("audio/test.mp3")} loop /> <Video src={getPublicPath("video/maozedong/demo.mp4")} className="w-full h-full aspect-video" diff --git a/src/router/modules/chenyun.tsx b/src/router/modules/chenyun.tsx index 09fc21b..a77ee66 100644 --- a/src/router/modules/chenyun.tsx +++ b/src/router/modules/chenyun.tsx @@ -49,7 +49,7 @@ export const ChenyunRoutes: RouteObject[] = [ path: "place2", element: <ChenyunPlace2 />, handle: { - videoSrc: "video/chenyun/cunyun_02.mp4", + videoSrc: "video/chenyun/chenyun_02.mp4", }, }, { diff --git a/tsconfig.json b/tsconfig.json index 8f64aa4..edeef9e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -34,6 +34,6 @@ "allowSyntheticDefaultImports": true, "forceConsistentCasingInFileNames": true }, - "include": ["src"], + "include": ["src", "vite.config.ts", "eslint.config.ts", "types/**/*.d.ts"], "exclude": ["node_modules", "dist"] } diff --git a/tsconfig.node.json b/tsconfig.node.json index c953b46..b22760d 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -4,6 +4,7 @@ "lib": ["ES2023"], "module": "ESNext", "skipLibCheck": true, + "types": ["node"], /* Bundler mode */ "moduleResolution": "bundler", @@ -19,5 +20,5 @@ "noFallthroughCasesInSwitch": true, "noUncheckedIndexedAccess": true }, - "include": ["vite.config.ts", "eslint.config.ts"] + "include": ["vite.config.ts", "eslint.config.ts", "types/**/*.d.ts"] } diff --git a/types/vite-plugin-react.d.ts b/types/vite-plugin-react.d.ts new file mode 100644 index 0000000..e8b924a --- /dev/null +++ b/types/vite-plugin-react.d.ts @@ -0,0 +1,6 @@ +declare module "@vitejs/plugin-react" { + const plugin: any; + export default plugin; +} + + diff --git a/vite.config.ts b/vite.config.ts index ebc13b2..9f69dee 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -15,4 +15,28 @@ export default defineConfig({ host: "0.0.0.0", // 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"; + } + }, + }, + }, + }, });