diff --git a/src/pages/sunzhongshan/place/place1.tsx b/src/pages/sunzhongshan/place/place1.tsx
index 3b09198..f623e45 100644
--- a/src/pages/sunzhongshan/place/place1.tsx
+++ b/src/pages/sunzhongshan/place/place1.tsx
@@ -460,10 +460,10 @@ const SunzhongshanPlace1 = () => {
孙中山先生领导的辛亥革命推动了中国社会的变革,可是这张《民立报》让我有点不明白,孙先生刚当上临时大总统,为什么又很快宣布"解职"了呀?
- 中华民国的建立有个重要背景——"南北议和"。辛亥革命中宣告独立的省份大多集中在中国南方,负隅顽抗的清政府将最后希望寄托在主导北洋军阀势力的袁世凯身上。
+ 中华民国的建立有个重要背景——"南北议和"。辛亥革命中宣告独立的省份大多集中在中国南方,负隅顽抗的清政府将最后希望寄托在主导北洋军阀势力的袁世凯身上。在列强支持下,袁世凯率军南下...
- 在列强支持下,袁世凯率军南下,一边以武力威胁革命势力,一边又迎合革命党人急于完成统一的愿望,诱使其开展和议。当时,革命党人力量还不够强。为避免国家陷入前途未卜的内战,孙中山先生发表声明:只要清帝退位,袁世凯赞成共和,就推举他做大总统。
+ 一边以武力威胁革命势力,一边又迎合革命党人急于完成统一的愿望,诱使其开展和议。当时,革命党人力量还不够强。为避免国家陷入前途未卜的内战,孙中山先生发表声明:只要清帝退位,袁世凯赞成共和,就推举他做大总统。
diff --git a/src/pages/sunzhongshan/place/place4.tsx b/src/pages/sunzhongshan/place/place4.tsx
index 82bfc02..a76a53a 100644
--- a/src/pages/sunzhongshan/place/place4.tsx
+++ b/src/pages/sunzhongshan/place/place4.tsx
@@ -1,12 +1,16 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
import {
ExhibitOverlay,
Title,
Image,
Cursor,
StudyGuideModal,
+ GuideSteps,
+ GuideStepsItem,
+ Video,
+ type VideoRef,
} from "@/components";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
const starName = "sunzhongshan";
@@ -16,6 +20,10 @@ const exhibitSrcMap: Record<1 | 2, string> = {
2: "sunzhongshan/place4/上海各界人士在外滩码头欢迎孙中山",
};
+// 光标1的展品描述内容（图2）
+const exhibit1Description =
+ '1924年10月,冯玉祥将军发动"北京政变",推翻了曹锟政府,邀请孙中山先生北上共商国是,希望能实现国家和平统一。孙先生认为"这是一个好机会",于是11月13日从广州出发北上,途经上海、日本、天津等地,一路宣传反帝、反封建主张。孙先生抵达上海时,外滩码头上聚集了前来欢迎的各界代表、群众四千多人。大家关心国家前途命运,拥护孙先生,认同他在《北上宣言》中提出的"废除不平等条约""召开国民会议"等主张,真心希望结束军阀割据,国家实现统一,民族实现独立。';
+
const SunzhongshanPlace4 = () => {
const navigate = useNavigate();
const { moduleName } = useParams<{
@@ -24,8 +32,16 @@ const SunzhongshanPlace4 = () => {
// 学习引导弹窗（进入场景即显示）
const [showGuideModal, setShowGuideModal] = useState(true);
+ // 关闭学习引导后显示的对话（图1）
+ const [showInitialDialog, setShowInitialDialog] = useState(false);
+ const [initialDialogStep, setInitialDialogStep] = useState(0);
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
const [visited, setVisited] = useState>(new Set());
+ // 光标1的视频状态
+ const [showVideo1, setShowVideo1] = useState(false);
+ const video1Ref = useRef(null);
+ // 光标1视频播放后的学习引导状态
+ const [showVideo1Guide, setShowVideo1Guide] = useState(false);
const handleOpenExhibit = (index: 1 | 2) => {
setActiveExhibitId(index);
@@ -91,11 +107,21 @@ const SunzhongshanPlace4 = () => {
{
- if (activeExhibitId !== null) {
+ const currentId = activeExhibitId;
+
+ if (currentId === 1) {
+ // 光标1：关闭窗口后播放视频
+ setActiveExhibitId(null);
+ setShowVideo1(true);
+ return;
+ }
+
+ if (currentId !== null) {
setVisited((prev) => {
const next = new Set(prev);
- next.add(activeExhibitId);
+ next.add(currentId);
return next;
});
}
@@ -103,10 +129,68 @@ const SunzhongshanPlace4 = () => {
}}
/>
+ {/* 光标1的视频 */}
+ {showVideo1 && (
+