e.stopPropagation()}
+ style={{ perspective: "1200px" }}
>
- {/* 信纸背景 */}
- ![信纸]({getStaticImage("components/letter/信底")})
-
- {/* 标题 - 垂直显示在左侧 */}
-
- {/* 信件内容区域 */}
-
diff --git a/src/components/narration/Narration.tsx b/src/components/narration/Narration.tsx
index 7dca629..38ea500 100644
--- a/src/components/narration/Narration.tsx
+++ b/src/components/narration/Narration.tsx
@@ -1,5 +1,6 @@
import { useState, useEffect } from "react";
import { cn } from "@/lib/utils";
+import { useAudioManager } from "@/hooks/useAudioManager";
export interface NarrationProps {
/** 旁白文本 */
@@ -16,6 +17,10 @@ export interface NarrationProps {
enableAnimation?: boolean;
/** 文字动画速度（毫秒/字），默认 100ms */
animationSpeed?: number;
+ /** 覆盖层出现时是否自动播放音频（默认 true） */
+ autoPlayAudio?: boolean;
+ /** 音频分组 id，相同 channel 内互斥，不同 channel 可同时播放；不传则全局互斥 */
+ audioChannelId?: string;
}
/**
@@ -34,18 +39,33 @@ const Narration = ({
className,
enableAnimation = true,
animationSpeed = 100,
+ autoPlayAudio = true,
+ audioChannelId,
}: NarrationProps) => {
const [displayedText, setDisplayedText] = useState("");
const [isAnimating, setIsAnimating] = useState(true);
- const [audio, setAudio] = useState
+ {/* 编辑态 / 只读态：Y 轴翻转切换 */}
+
+ {/* 前面：编辑态 */}
+ {/* 编辑态：信纸背景 */}
+
- 写给黄炎培先生的信
-
-
-
- {/* 笔的图片 */}
-
- {(() => {
- let placeholderIndex = 0;
- let foundNiHao = false;
- return letterContent.split("\n").map((line, lineIndex) => {
- // 检测是否已经找到"您好"行
- if (line.includes("您好")) {
- foundNiHao = true;
- }
+ {/* 标题 - 垂直显示在左侧 */}
+
-
+
- // "您好"行之后的非空行需要首行缩进
- const needsIndent =
- foundNiHao &&
- line.trim() !== "" &&
- !line.includes("您好");
-
- const segments = line.split("____");
- return (
-
+ 写给黄炎培先生的信
+
+
- {segments.map((part, partIndex) => {
- const isLast = partIndex === segments.length - 1;
- if (isLast) {
- return (
-
- {part}
-
- );
+ {/* 信件内容区域（可编辑） */}
+
+
+ {/* 笔的图片 */}
+
+
+
+ {(() => {
+ let placeholderIndex = 0;
+ let foundNiHao = false;
+ return letterContent
+ .split("\n")
+ .map((line, lineIndex) => {
+ // 检测是否已经找到"您好"行
+ if (line.includes("您好")) {
+ foundNiHao = true;
}
- const currentIndex = placeholderIndex++;
+ // "您好"行之后的非空行需要首行缩进
+ const needsIndent =
+ foundNiHao &&
+ line.trim() !== "" &&
+ !line.includes("您好");
+
+ const segments = line.split("____");
return (
-
- {part}
- {
- const next = [...blankValues];
- next[currentIndex] = e.target.value;
- setBlankValues(next);
- }}
- />
-
+
- );
- });
- })()}
+ });
+ })()}
+
+ {segments.map((part, partIndex) => {
+ const isLast =
+ partIndex === segments.length - 1;
+ if (isLast) {
+ return (
+
+ {part}
+
+ );
+ }
+
+ const currentIndex = placeholderIndex++;
+ return (
+
+ {part}
+ {
+ const next = [...blankValues];
+ next[currentIndex] = e.target.value;
+ setBlankValues(next);
+
+ // 用户再次输入时，清除该空的错误高亮
+ if (blankErrors[currentIndex]) {
+ const nextErrs = [...blankErrors];
+ nextErrs[currentIndex] = false;
+ setBlankErrors(nextErrs);
+ }
+ }}
+ />
+
+ );
+ })}
+
);
- })}
-
+ ![笔]({getStaticImage("components/letter/笔")})
+
+
+ {/* 提交按钮：切换到只读信件态 */}
+
+ {
+ if (!validateBlanks()) return;
+ setSubmitted(true);
+ }}
+ button
+ />
+
-
-
+ {/* 背面：只读态 */}
+
+ {/* 只读态：新背景 */}
+ ![信件]({getStaticImage("components/letter/信")})
+ {
+ setSubmitted(false);
+ }}
+ />
- {/* 提交按钮 */}
-
+
- onSubmit?.(blankValues)}
- button
- />
-
+ {/* 信件内容区域（只读） */}
+
+
+
+ {/* 寄出按钮：关闭窗口 */}
+
+ {(() => {
+ let placeholderIndex = 0;
+ let foundNiHao = false;
+ return letterContent
+ .split("\n")
+ .map((line, lineIndex) => {
+ if (line.includes("您好")) {
+ foundNiHao = true;
+ }
- {/* 寄信图标（可选，如果需要的话） */}
-
+
- ![寄信]({getStaticImage("components/letter/寄信图标")})
-
+ const needsIndent =
+ foundNiHao &&
+ line.trim() !== "" &&
+ !line.includes("您好");
+
+ const segments = line.split("____");
+ return (
+
+ {segments.map((part, partIndex) => {
+ const isLast =
+ partIndex === segments.length - 1;
+ if (isLast) {
+ return (
+
+ {part}
+
+ );
+ }
+
+ const currentIndex = placeholderIndex++;
+ const value = blankValues[currentIndex] ?? "";
+
+ return (
+
+ {part}
+ {value || " "}
+
+ );
+ })}
+
+ );
+ });
+ })()}
+
+ {
+ onSubmit?.(blankValues);
+ }}
+ button
+ />
+
+
-
- ),
- },
- // 米棉之战 - 投机商情报
- "mimian-intelligence": {
- type: "text",
- title: "投机商情报",
- content: `申新财团囤积棉纱3万件,
- 扬言"控制纱布就能控制上海"。`,
- },
- // 米棉之战 - 全国物资分布
- "mimian-distribution": {
- type: "map",
- mapImage: "chenyun/reflection/全国物资分布",
- },
- // 米棉之战 - 对话线索
- "mimian-dialogue": {
- type: "dialogue",
- dialogues: [
- {
- character: "群众1",
- avatar: "chenyun/reflection/群众1",
- text: "米价一天涨三次，家里快断粮了",
- },
- {
- character: "群众2",
- avatar: "chenyun/reflection/群众2",
- text: "钱庄都在囤媒，冬天没法取暖",
- },
- ],
- },
- // 银元之战 - 电话线索
- "yinyuan-phone": {
- type: "audio",
- text: `人民币进不了上海市场,问题很严重。必须让人民币站稳脚跟。`,
- audioImage: "chenyun/reflection/录音",
- },
-};
diff --git a/src/pages/chenyun/reflection/constants/mimian.ts b/src/pages/chenyun/reflection/constants/mimian.ts
index d83952e..ff79a33 100644
--- a/src/pages/chenyun/reflection/constants/mimian.ts
+++ b/src/pages/chenyun/reflection/constants/mimian.ts
@@ -4,7 +4,7 @@
*/
import type { ReactNode } from "react";
import { getPublicPath } from "@/lib/utils";
-import type { ClueData } from "@/components/layout";
+import type { ClueData } from "../clue/types";
// 米棉之战视频配置
export const MIMIAN_VIDEO_CONFIG = {
@@ -19,7 +19,7 @@ export const MIMIAN_VIDEO_CONFIG = {
// 米棉之战线索数据配置
export const MIMIAN_CLUE_DATA: Record<
string,
- ClueData & { content?: ReactNode }
+ ClueData & { content?: ReactNode; audioSrc?: string }
> = {
// 米棉之战 - 投机商情报
"mimian-intelligence": {
diff --git a/src/pages/chenyun/reflection/constants/shared.ts b/src/pages/chenyun/reflection/constants/shared.ts
index ab01f3f..80c7b46 100644
--- a/src/pages/chenyun/reflection/constants/shared.ts
+++ b/src/pages/chenyun/reflection/constants/shared.ts
@@ -7,7 +7,6 @@
export const starName = "chenyun";
// 欢迎语文案（使用 StudyGuideModal 展示）
-export const WELCOME_TEXT = `同学你好，欢迎来到跨越时空-体悟学习模块！
-
-我们即将跨越时空，穿越到"银元之战"和"米棉之战"两个沉浸式场景，来感受陈云同志在1949年的上海是如何应对当时混乱的经济秩序的。`;
-
+export const WELCOME_TEXT = `同学你好，欢迎来到“跨越时空·体悟”学习模块！
+请登陆“时空回溯・亲历时代”体验仓，下一站：1949年，上海。
+你将扎进“银元之战”的旋涡，踏过“米棉之战”的浪潮，以陈云同志特派员的身份体验陈云如何以智破局，稳稳托住这座城的经济天平。时空门已开，准备好入戏了吗？`;
diff --git a/src/pages/chenyun/reflection/constants/yinyuan.tsx b/src/pages/chenyun/reflection/constants/yinyuan.tsx
index 38ccdb3..fd54af2 100644
--- a/src/pages/chenyun/reflection/constants/yinyuan.tsx
+++ b/src/pages/chenyun/reflection/constants/yinyuan.tsx
@@ -4,7 +4,7 @@
*/
import { type ReactNode } from "react";
import { getPublicPath } from "@/lib/utils";
-import type { ClueData } from "@/components/layout";
+import type { ClueData } from "../clue/types";
// 银元之战视频配置
export const YINYUAN_VIDEO_CONFIG = {
@@ -19,7 +19,7 @@ export const YINYUAN_VIDEO_CONFIG = {
// 银元之战线索数据配置
export const YINYUAN_CLUE_DATA: Record<
string,
- ClueData & { content?: ReactNode }
+ ClueData & { content?: ReactNode; audioSrc?: string }
> = {
// 银元之战 - 线索1
"yinyuan-clue1": {
@@ -48,5 +48,6 @@ export const YINYUAN_CLUE_DATA: Record<
type: "audio",
text: `人民币进不了上海市场,问题很严重。必须让人民币站稳脚跟。`,
audioImage: "chenyun/reflection/录音",
+ audioSrc: getPublicPath("audio/chenyun/mp3_chenyun_30.mp3"),
},
};
diff --git a/src/pages/chenyun/reflection/index.tsx b/src/pages/chenyun/reflection/index.tsx
index e0743ab..67147a2 100644
--- a/src/pages/chenyun/reflection/index.tsx
+++ b/src/pages/chenyun/reflection/index.tsx
@@ -5,19 +5,25 @@
import { Image, StudyGuideModal } from "@/components";
import ErrorAlert from "@/components/layout/alert/error-alert";
import TitleAlert from "@/components/layout/alert/title-alert";
-import ClueOverlay from "@/components/layout/clue";
-import type { ClueData } from "@/components/layout";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import ClueOverlay from "@/pages/chenyun/reflection/clue";
+import type { ClueData } from "./clue/types";
+import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
import { useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
-import { WELCOME_TEXT, starName } from "./constants";
+import {
+ WELCOME_TEXT,
+ starName,
+ YINYUAN_VIDEO_CONFIG,
+ MIMIAN_VIDEO_CONFIG,
+ CLUE_DATA,
+} from "./constants";
import { useClueStates } from "./shared/useClueStates";
import { VideoHandler } from "./shared/VideoHandler";
import { YinyuanBattle } from "./yinyuan/YinyuanBattle";
import { MimianBattle } from "./mimian/MimianBattle";
import type { FileType } from "./shared/types";
-import { YINYUAN_VIDEO_CONFIG } from "./constants/yinyuan";
-import { MIMIAN_VIDEO_CONFIG } from "./constants/mimian";
+// import { } from "./constants/yinyuan";
+// import { } from "./constants/mimian";
import { useChenyunStore } from "@/store/chenyunStore";
const ChenyunReflection = () => {
@@ -81,6 +87,9 @@ const ChenyunReflection = () => {
// ========== 银元之战和米棉之战状态（从 store 获取） ==========
const { isYinyuanSolved, isMimianSolved } = useChenyunStore();
+ //线索音频
+ const [clueAudioSrc, setClueAudioSrc] = useState("");
+
// ========== 事件处理函数 ==========
/**
@@ -173,8 +182,13 @@ const ChenyunReflection = () => {
* @param clueKey 线索键名
*/
const handleClueClick = (clue: ClueData, clueKey: string) => {
+ console.log(clueKey);
setCurrentClue(clue);
setCurrentClueKey(clueKey);
+ // 从合并后的 CLUE_DATA 中直接查找 audioSrc
+ const audioSrc =
+ (CLUE_DATA[clueKey] as { audioSrc?: string })?.audioSrc || "";
+ setClueAudioSrc(audioSrc);
setShowClueOverlay(true);
};
@@ -259,6 +273,7 @@ const ChenyunReflection = () => {
onContinue={() => {
setShowWelcomeGuide(false);
}}
+ audioSrc={getPublicPath("audio/chenyun/mp3_chenyun_28.mp3")}
>
{WELCOME_TEXT}
@@ -326,6 +341,7 @@ const ChenyunReflection = () => {
visible={showClueOverlay}
clue={currentClue}
onClose={handleClueOverlayClose}
+ audioSrc={clueAudioSrc}
/>
)}
diff --git a/src/pages/chenyun/reflection/mimian/MimianBattle.tsx b/src/pages/chenyun/reflection/mimian/MimianBattle.tsx
index aa65040..0416fc5 100644
--- a/src/pages/chenyun/reflection/mimian/MimianBattle.tsx
+++ b/src/pages/chenyun/reflection/mimian/MimianBattle.tsx
@@ -11,7 +11,7 @@ import { usePuzzleAnimation } from "@/contexts/PuzzleAnimationContext";
import { usePuzzleStore } from "@/store/puzzleStore";
import { starName } from "../constants";
import type { FileType } from "../shared/types";
-import type { ClueData } from "@/components/layout";
+import type { ClueData } from "../clue/types";
export interface MimianBattleProps {
/** 当前展开的文件 */
@@ -85,7 +85,7 @@ export const MimianBattle = ({
state.setShowMimianQuiz2(false);
state.setShowMimianSuccessAlert(true);
state.setMimianSuccessAlertContent(
- `恭喜你,选择正确!结合当时市场情况,陈云同志在会上做出了"全国一盘棋"的指示。全国统筹调运粮食、棉花、煤炭填补缺口,筑牢物资基础。关键节点集中抛售,让跟风囤货的投机商无力承接,因亏本和高利贷纷纷破产,快速平抑物价、稳固人民币地位。`
+ `结合当时市场情况,陈云同志在会上做出了"全国一盘棋"的指示。全国统筹调运粮食、棉花、煤炭填补缺口,筑牢物资基础。关键节点集中抛售,让跟风囤货的投机商无力承接,因亏本和高利贷纷纷破产,快速平抑物价、稳固人民币地位。`
);
}
// 选错时，错误信息已经在题目面板中通过 onWrongSelect 显示，不需要额外的 SuccessAlert
@@ -125,15 +125,7 @@ export const MimianBattle = ({
if (isCorrect) {
state.setShowMimianQuiz3(false);
state.setShowMimianSuccessAlert(true);
- state.setMimianSuccessAlertContent(
- "恭喜你,选择正确!地方配合,调运按时推进。"
- );
- } else {
- state.setShowMimianQuiz3(false);
- state.setShowMimianSuccessAlert(true);
- state.setMimianSuccessAlertContent(
- "很抱歉,你选错了!地方抵触,调运延误多天。请你再思考一下吧!"
- );
+ state.setMimianSuccessAlertContent("地方配合,调运按时推进。");
}
};
@@ -155,15 +147,13 @@ export const MimianBattle = ({
if (isCorrect) {
state.setShowMimianQuiz4(false);
state.setShowMimianSuccessAlert(true);
- state.setMimianSuccessAlertContent(
- "恭喜你,选择正确!棉农支持,调运量足额完成。"
- );
+ state.setMimianSuccessAlertContent("棉农支持,调运量足额完成。");
} else {
- state.setShowMimianQuiz4(false);
- state.setShowMimianSuccessAlert(true);
- state.setMimianSuccessAlertContent(
- "很抱歉,你选错了!棉农抵触,调运量减少。请你再思考一下吧!"
- );
+ // state.setShowMimianQuiz4(false);
+ // state.setShowMimianSuccessAlert(true);
+ // state.setMimianSuccessAlertContent(
+ // "很抱歉,你选错了!棉农抵触,调运量减少。请你再思考一下吧!"
+ // );
}
};
@@ -197,13 +187,7 @@ export const MimianBattle = ({
state.setShowMimianQuiz5(false);
state.setShowMimianSuccessAlert(true);
state.setMimianSuccessAlertContent(
- "恭喜你,选择正确!这契合米棉之战史实,多地同步大量抛售,让借高利贷囤货的投机商措手不及。连续抛售使其无力承接,只得亏本抛售,最终纷纷破产,快速稳住物价。"
- );
- } else {
- state.setShowMimianQuiz5(false);
- state.setShowMimianSuccessAlert(true);
- state.setMimianSuccessAlertContent(
- "很抱歉,你选错了!投机商此前曾吃下政府平价抛售物资获利。逐步降价加舆论引导难让其信服,他们会持续囤货,政府储备会被消耗,反而让投机商掌控节奏,无法遏制物价上涨。请你再思考一下吧!"
+ "这契合米棉之战史实,多地同步大量抛售,让借高利贷囤货的投机商措手不及。连续抛售使其无力承接,只得亏本抛售,最终纷纷破产,快速稳住物价。"
);
}
};
diff --git a/src/pages/chenyun/reflection/mimian/MimianClues.tsx b/src/pages/chenyun/reflection/mimian/MimianClues.tsx
index 85a13af..ad930ea 100644
--- a/src/pages/chenyun/reflection/mimian/MimianClues.tsx
+++ b/src/pages/chenyun/reflection/mimian/MimianClues.tsx
@@ -6,7 +6,7 @@ import { Image } from "@/components";
import { cn, getStaticImage } from "@/lib/utils";
import { ClueItem } from "../shared/ClueItem";
import type { FileType } from "../shared/types";
-import type { ClueData } from "@/components/layout";
+import type { ClueData } from "../clue/types";
import { MIMIAN_CLUE_DATA } from "../constants/mimian";
export interface MimianCluesProps {
@@ -127,4 +127,3 @@ export const MimianClues = ({
);
};
-
diff --git a/src/pages/chenyun/reflection/mimian/MimianQuizzes.tsx b/src/pages/chenyun/reflection/mimian/MimianQuizzes.tsx
index 31d494c..09351e2 100644
--- a/src/pages/chenyun/reflection/mimian/MimianQuizzes.tsx
+++ b/src/pages/chenyun/reflection/mimian/MimianQuizzes.tsx
@@ -2,9 +2,9 @@
* 米棉之战题目组件
* 包含单选题1-5、旁白1-3、成功提示框、结束语
*/
-import { Narration, SingleChoiceQuizPanel } from "@/components";
+import { Narration, SingleChoiceQuizPanel, EndingOverlay } from "@/components";
import SuccessAlert from "@/components/layout/alert/success-alert";
-import { EndingOverlay } from "../shared/EndingOverlay";
+import { getPublicPath } from "@/lib/utils";
export interface MimianQuizzesProps {
/** 是否显示单选题1 */
@@ -121,6 +121,7 @@ export const MimianQuizzes = ({
visible={showNarration1}
onClose={onNarration1Close}
enableAnimation={false}
+ audioSrc={getPublicPath("audio/chenyun/mp3_chenyun_32.mp3")}
/>
{/* 米棉之战 - 单选题2（图3） */}
@@ -152,7 +153,7 @@ export const MimianQuizzes = ({
/>
{/* 米棉之战 - 错误提示框（单选题2答错后） */}
-
- 南京路的先施、永安、大新、新新等四大公司率先拒收人民币,甚至用银元标价。
-
- 其他商户纷纷仿效,人民币在市场交易中地位下降。
-
+ {/* 背景蒙版 */}
+ {maskSrc && (
+
+
+
+
+ {/* 成功提示 */}
+
+ {/* 顶部：题目文本和毛巾区域 */}
+
+
+ {/* 题目文本 */}
+
+
+
+ {/* 底部：可选话术区域 - 使用 DragFill */}
+
+
+
+ {/* 右侧：毛巾区域 */}
+
+ 【单选】
+
+
+ 国难当头,黄先生说“职教救国”,中华职校的师生都行动起来了!你要加入哪支爱国队伍?
+
+
+
+
+ {
+ const index = options.findIndex(
+ (opt) => opt.value === option.value
+ );
+ return (
+
+ 答题区
+
+
+ {options.map((option, index) => (
+
+
+ {/* {
+ setSuccessVisible(true);
+ }}
+ >
+ {index + 1}. {option.label}
+
+ ))}
+
+ {index + 1}. {option.label}
+
+ );
+ }}
+ renderDragging={(option) => {
+ return (
+
+ {option.label}
+
+ );
+ }}
+ renderBlank={() => {
+ // 返回隐藏元素，实际的空白区域在页面中通过 data-blank-id 定位
+ return ;
+ }}
+ /> */}
+
{/* 题目文本 */}
>(new Set());
+ // Cursor 顺序控制：1 -> 2 -> 3 -> 4
+ const { isEnabled } = useCursorController({
+ initialEnabled: [1],
+ dependencies: {
+ 2: [1],
+ 3: [2],
+ 4: [3],
+ },
+ visited: visited,
+ });
+
// 光标1的对话状态
const [guide1Visible, setGuide1Visible] = useState(false);
const [guide1Step, setGuide1Step] = useState(0);
@@ -112,22 +124,26 @@ const SunzhongshanPlace3 = () => {
className="absolute left-198 top-118"
onClick={() => handleOpenExhibit(1)}
read={visited.has(1)}
+ disabled={!isEnabled(1)}
/>
handleOpenExhibit(2)}
read={visited.has(2)}
+ disabled={!isEnabled(2)}
/>
handleOpenExhibit(3)}
read={visited.has(3)}
+ disabled={!isEnabled(3)}
/>
handleOpenExhibit(4)}
read={visited.has(4)}
+ disabled={!isEnabled(4)}
/>
{completed && (
@@ -246,9 +262,9 @@ const SunzhongshanPlace3 = () => {
= {
};
// 光标1的展品描述内容（图2）
-const exhibit1Description =
- '1924年10月,冯玉祥将军发动"北京政变",推翻了曹锟政府,邀请孙中山先生北上共商国是,希望能实现国家和平统一。孙先生认为"这是一个好机会",于是11月13日从广州出发北上,途经上海、日本、天津等地,一路宣传反帝、反封建主张。孙先生抵达上海时,外滩码头上聚集了前来欢迎的各界代表、群众四千多人。大家关心国家前途命运,拥护孙先生,认同他在《北上宣言》中提出的"废除不平等条约""召开国民会议"等主张,真心希望结束军阀割据,国家实现统一,民族实现独立。';
+// const exhibit1Description =
+// '1924年10月,冯玉祥将军发动"北京政变",推翻了曹锟政府,邀请孙中山先生北上共商国是,希望能实现国家和平统一。孙先生认为"这是一个好机会",于是11月13日从广州出发北上,途经上海、日本、天津等地,一路宣传反帝、反封建主张。孙先生抵达上海时,外滩码头上聚集了前来欢迎的各界代表、群众四千多人。大家关心国家前途命运,拥护孙先生,认同他在《北上宣言》中提出的"废除不平等条约""召开国民会议"等主张,真心希望结束军阀割据,国家实现统一,民族实现独立。';
const SunzhongshanPlace4 = () => {
const navigate = useNavigate();
@@ -35,14 +36,32 @@ const SunzhongshanPlace4 = () => {
const [initialDialogStep, setInitialDialogStep] = useState(0);
const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | null>(null);
const [visited, setVisited] = useState>(new Set());
+
+ // Cursor 顺序控制：1 -> 2
+ const { isEnabled } = useCursorController({
+ initialEnabled: [2],
+ dependencies: {
+ 1: [2],
+ },
+ visited: visited,
+ });
// 光标1的视频状态
const [showVideo1, setShowVideo1] = useState(false);
const video1Ref = useRef(null);
// 光标1视频播放后的学习引导状态
const [showVideo1Guide, setShowVideo1Guide] = useState(false);
+ // 光标2的对话状态
+ const [guide2Visible, setGuide2Visible] = useState(false);
+ const [guide2Step, setGuide2Step] = useState(0);
+
const handleOpenExhibit = (index: 1 | 2) => {
setActiveExhibitId(index);
+ if (index === 2) {
+ console.log(index);
+ setGuide2Step(0);
+ setGuide2Visible(true);
+ }
};
const progressCount = visited.size;
@@ -84,11 +103,13 @@ const SunzhongshanPlace4 = () => {
className="absolute right-209 top-128"
onClick={() => handleOpenExhibit(1)}
read={visited.has(1)}
+ disabled={!isEnabled(1)}
/>
handleOpenExhibit(2)}
read={visited.has(2)}
+ disabled={!isEnabled(2)}
/>
{completed && (
@@ -105,7 +126,7 @@ const SunzhongshanPlace4 = () => {
{
const currentId = activeExhibitId;
@@ -144,9 +165,10 @@ const SunzhongshanPlace4 = () => {
/>
)}
- {/* 光标1视频播放后的学习引导 */}
- {
setShowVideo1Guide(false);
// 学习引导关闭后，修改cursor状态
@@ -156,10 +178,7 @@ const SunzhongshanPlace4 = () => {
return next;
});
}}
- ailgn="left"
- >
- 通过了解这些展品背后的故事，我们回顾了孙中山先生这位民主革命先驱伟大的一生，不仅看到了孙先生万难不辞、奔波海上的革命足迹，更感受到了他愈挫愈奋、攀登不已的革命精神。下面，让我们跨越时空回到黎明的前夜，与孙先生一起，探寻国家的出路。
-
+ />
{/* 关闭学习引导后显示的对话（图1） */}
{
是的。然而长期操劳国事使得孙中山先生身体抱恙。在生命最后的时间里,他仍在为国奔走,始终未曾停歇。看看这张拍摄于1924年11月17日的照片吧。
+
+ {/* 光标2的对话 */}
+ {
+ setGuide2Visible(nextVisible);
+ }}
+ showMask={false}
+ zIndex={10000}
+ >
+ 这是……外滩？
+
+ 没错。1924年10月，冯玉祥将军发动“北京政变”，推翻了曹锟政府，邀请孙中山先生北上共商国是，希望能实现国家和平统一。
+
+
+ 孙先生认为“这是一个好机会”，于是11月13日从广州出发北上，途经上海、日本、天津等地，一路宣传反帝、反封建主张。孙先生抵达上海时，外滩码头上聚集了前来欢迎的各界代表、群众四千多人。
+
+
+ 大家关心国家前途命运，拥护孙先生，认同他在《北上宣言》中提出的“废除不平等条约”“召开国民会议”等主张，真心希望结束军阀割据，国家实现统一，民族实现独立。
+
+
);
};
diff --git a/src/pages/sunzhongshan/reflection/index.tsx b/src/pages/sunzhongshan/reflection/index.tsx
index 5aefce4..dc77c22 100644
--- a/src/pages/sunzhongshan/reflection/index.tsx
+++ b/src/pages/sunzhongshan/reflection/index.tsx
@@ -130,9 +130,10 @@ const SunzhongshanReflection = () => {
{/* 学习引导弹窗 */}
- >(new Set());
+ // 展品2窗口关闭的对话状态
+ const [guide2CloseVisible, setGuide2CloseVisible] = useState(false);
+ const [guide2CloseStep, setGuide2CloseStep] = useState(0);
+
+ // Cursor 顺序控制：1 -> 2 -> 3 -> 4 -> 5
+ const { isEnabled } = useCursorController({
+ initialEnabled: [2],
+ dependencies: {
+ 1: [3],
+ 3: [4],
+ 4: [5],
+ 5: [2],
+ },
+ visited,
+ });
+
// 光标2的对话状态
const [guide2Visible, setGuide2Visible] = useState(false);
const [guide2Step, setGuide2Step] = useState(0);
@@ -140,30 +157,35 @@ const SunzhongshanPlace1 = () => {
className="absolute left-75 bottom-80"
onClick={() => handleOpenExhibit(1)}
read={visited.has(1)}
+ disabled={!isEnabled(1)}
/>
{/* 光标2 */}
handleOpenExhibit(2)}
read={visited.has(2)}
+ disabled={!isEnabled(2)}
/>
{/* 光标3 */}
handleOpenExhibit(3)}
read={visited.has(3)}
+ disabled={!isEnabled(3)}
/>
{/* 光标4 */}
handleOpenExhibit(4)}
read={visited.has(4)}
+ disabled={!isEnabled(4)}
/>
{/* 光标5 */}
handleOpenExhibit(5)}
read={visited.has(5)}
+ disabled={!isEnabled(5)}
/>
{/* 继续前进 - 仅在完成所有展品后显示 */}
@@ -188,6 +210,9 @@ const SunzhongshanPlace1 = () => {
if (currentId === 2) {
setGuide2Step(0);
setGuide2Visible(false);
+
+ setGuide2CloseStep(0);
+ setGuide2CloseVisible(true);
} else if (currentId === 5) {
setGuide5Step(0);
setGuide5Visible(false);
@@ -201,6 +226,9 @@ const SunzhongshanPlace1 = () => {
} else if (currentId === 3) {
setGuide3Step(0);
setGuide3Visible(false);
+ setActiveExhibitId(null);
+ setShowVideo4Second(true);
+ return;
} else if (currentId === 1) {
setGuide1Step(0);
setGuide1Visible(false);
@@ -228,8 +256,8 @@ const SunzhongshanPlace1 = () => {
setVisible(true);
}}
>
- {`同学你好，欢迎来到走进故居-对话学习模块！
-进入孙中山故居纪念馆后，我们一起来了解孙中山同志经历的7个阶段："立志救国 推翻帝制"、"讨袁护法 捍卫共和"、"与时俱进探索新路"、"抱病北上鞠躬尽瘁"、"革命先驱 永垂不朽"、"思想传承 影响深远"、"精神财富 激励后人"；`}
+ {`同学你好，欢迎来到“走进故居·对话”学习模块！
+ 此刻你正置身于孙中山故居堂屋，接下来请随时光的脚步，一同走进他人生中四段激情燃烧的岁月：立志救国·推翻帝制、讨袁护法·捍卫共和、与时俱进·探索新路、抱病北上·鞠躬尽瘁。做好准备了吗？开始探索这段波澜壮阔的历史征程吧！`}
{/* 引导 */}
@@ -242,7 +270,7 @@ const SunzhongshanPlace1 = () => {
setShowAfterDialogGuide(true);
}
}}
- showMask={true}
+ showMask={false}
highlightSelectors={[]}
>
@@ -259,11 +287,11 @@ const SunzhongshanPlace1 = () => {
onContinue={() => setShowAfterDialogGuide(false)}
ailgn="left"
>
- 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，浏览展品后蓝色动态光点会变为已浏览状态；
+ 1.场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态。
{"\n"}
- 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点开查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+ 2.在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习。
{"\n"}
- 3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+ 3.所有动态光点的展品全部学习后才能进入下一个场景学习。
{/* 光标2的对话 */}
@@ -281,7 +309,7 @@ const SunzhongshanPlace1 = () => {
});
}
}}
- showMask={true}
+ showMask={false}
highlightSelectors={[]}
zIndex={10000}
>
@@ -291,6 +319,25 @@ const SunzhongshanPlace1 = () => {
+ {/* 展品2窗口关闭的对话 */}
+ {
+ setGuide2CloseVisible(nextVisible);
+ }}
+ showMask={false}
+ zIndex={10000}
+ >
+
+ 原来孙先生早在青年时期就把国家前途命运放在了心上。
+
+
+ 不仅是关心，他还付诸了实际行动。看看这件展品。
+
+
+
{/* 光标5的对话 */}
{
{
visible={successAlert4Visible}
onContinue={() => {
setSuccessAlert4Visible(false);
- setShowVideo4Second(true);
+ // setShowVideo4Second(true);
+ setVisited((prev) => {
+ const next = new Set(prev);
+ next.add(4);
+ return next;
+ });
}}
onClose={() => {
setSuccessAlert4Visible(false);
- setShowVideo4Second(true);
}}
/>
@@ -421,12 +472,8 @@ const SunzhongshanPlace1 = () => {
showSkipButton
onEnded={() => {
setShowVideo4Second(false);
- // 修改cursor状态
- setVisited((prev) => {
- const next = new Set(prev);
- next.add(4);
- return next;
- });
+
+ setVisited((prev) => new Set([...prev, 3]));
}}
/>
)}
@@ -438,16 +485,8 @@ const SunzhongshanPlace1 = () => {
onStepChange={setGuide3Step}
onVisibleChange={(nextVisible) => {
setGuide3Visible(nextVisible);
- if (!nextVisible) {
- setVisited((prev) => {
- const next = new Set(prev);
- next.add(3);
- return next;
- });
- }
}}
showMask={false}
- highlightSelectors={[]}
zIndex={10000}
>
@@ -460,10 +499,10 @@ const SunzhongshanPlace1 = () => {
孙中山先生领导的辛亥革命推动了中国社会的变革,可是这张《民立报》让我有点不明白,孙先生刚当上临时大总统,为什么又很快宣布"解职"了呀?
- 中华民国的建立有个重要背景——"南北议和"。辛亥革命中宣告独立的省份大多集中在中国南方,负隅顽抗的清政府将最后希望寄托在主导北洋军阀势力的袁世凯身上。在列强支持下,袁世凯率军南下...
+ 中华民国的建立有个重要背景——"南北议和"。辛亥革命中宣告独立的省份大多集中在中国南方,负隅顽抗的清政府将最后希望寄托在主导北洋军阀势力的袁世凯身上。在列强支持下,袁世凯率军南下。
- 一边以武力威胁革命势力,一边又迎合革命党人急于完成统一的愿望,诱使其开展和议。当时,革命党人力量还不够强。为避免国家陷入前途未卜的内战,孙中山先生发表声明:只要清帝退位,袁世凯赞成共和,就推举他做大总统。
+ 他一边以武力威胁革命势力,一边又迎合革命党人急于完成统一的愿望,诱使其开展和议。当时,革命党人力量还不够强。为避免国家陷入前途未卜的内战,孙中山先生发表声明:只要清帝退位,袁世凯赞成共和,就推举他做大总统。
@@ -489,12 +528,12 @@ const SunzhongshanPlace1 = () => {
{
);
const [visited, setVisited] = useState>(new Set());
+ // Cursor 顺序控制：1 -> 2 -> 3 -> 4
+ const { isEnabled } = useCursorController({
+ initialEnabled: [1],
+ dependencies: {
+ 2: [1],
+ 3: [2],
+ 4: [3],
+ },
+ visited: visited,
+ });
+
// 光标1的对话状态
const [guide1Visible, setGuide1Visible] = useState(false);
const [guide1Step, setGuide1Step] = useState(0);
@@ -98,24 +110,28 @@ const SunzhongshanPlace2 = () => {
className="absolute left-160 top-114"
onClick={() => handleOpenExhibit(1)}
read={visited.has(1)}
+ disabled={!isEnabled(1)}
/>
{/* 光标2-陆军大元帅时佩带的指挥刀 */}
handleOpenExhibit(2)}
read={visited.has(2)}
+ disabled={!isEnabled(2)}
/>
{/* 光标3-917.9.10孙中山就任中华民国军政府海陆军大元帅留影 */}
handleOpenExhibit(3)}
read={visited.has(3)}
+ disabled={!isEnabled(3)}
/>
{/* 光标4-实业计划 */}
handleOpenExhibit(4)}
read={visited.has(4)}
+ disabled={!isEnabled(4)}
/>
{completed && (
@@ -225,7 +241,7 @@ const SunzhongshanPlace2 = () => {
真是一个宏伟的计划,可是在内忧外患的时局下,实现起来一定很艰难吧?
- 是的,1913年3月"宋教仁案"将国民党和袁世凯方面的矛盾推向高峰。不愿坐视袁世凯窃取辛亥革命果实后独揽大权,革命党人发动了"二次革命"。可惜革命失败,孙中山先生被迫流亡日本。
+ 是的,1913年3月"宋教仁案"将国民党和袁世凯方面的矛盾推向高峰。不愿坐视袁世凯窃取辛亥革命果实后独揽大权,革命党人发动了"二次革命"。可惜革命失败,孙中山先生被迫流亡海外。
袁世凯趁机撤销了他"筹办全国铁路全权"的职务,把铁路公司的事权交给了北京政府交通部,公司就这样解散了。
@@ -252,7 +268,6 @@ const SunzhongshanPlace2 = () => {
}}
/>
)}
-
);
};
diff --git a/src/pages/sunzhongshan/place/place3.tsx b/src/pages/sunzhongshan/place/place3.tsx
index 1b5c3e0..321ea5d 100644
--- a/src/pages/sunzhongshan/place/place3.tsx
+++ b/src/pages/sunzhongshan/place/place3.tsx
@@ -10,6 +10,7 @@ import {
type VideoRef,
type DragFillResult,
} from "@/components";
+import { useCursorController } from "@/hooks/useCursorController";
import { getBackgroundImage, getPublicPath, getStaticImage } from "@/lib/utils";
import { useNavigate, useParams } from "react-router-dom";
import { SuccessAlert, DragQuizPanel } from "@/components/layout";
@@ -34,6 +35,17 @@ const SunzhongshanPlace3 = () => {
);
const [visited, setVisited] = useState题目文本
从以下话术里，挑选3句组成你的推销语 (拖拽至对话框)
diff --git a/src/pages/luxun/place/place1.tsx b/src/pages/luxun/place/place1.tsx
index 0da7282..2857915 100644
--- a/src/pages/luxun/place/place1.tsx
+++ b/src/pages/luxun/place/place1.tsx
@@ -179,11 +179,11 @@ const LuxunPlace1 = () => {
onContinue={() => setShowAfterDialogGuide(false)}
ailgn="left"
>
- 1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
+ 1.场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态。
{"\n"}
- 2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点开查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
+ 2.在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习。
{"\n"}
- 3、所有动态光点的展品全部学习后才能进入下一个场景学习；
+ 3.所有动态光点的展品全部学习后才能进入下一个场景学习。
{/* 浏览完展品后的对话 */}
diff --git a/src/pages/sunzhongshan/place/place1.tsx b/src/pages/sunzhongshan/place/place1.tsx
index e0efa31..7dc8c94 100644
--- a/src/pages/sunzhongshan/place/place1.tsx
+++ b/src/pages/sunzhongshan/place/place1.tsx
@@ -15,6 +15,7 @@ import { useState, useRef } from "react";
import Cursor from "@/components/cursor";
import { SuccessAlert, DragQuizPanel } from "@/components/layout";
import { MultipleChoiceQuizPanel } from "@/components/layout/quiz";
+import { useCursorController } from "@/hooks/useCursorController";
// starName 固定为 sunzhongshan
const starName = "sunzhongshan";
@@ -48,6 +49,22 @@ const SunzhongshanPlace1 = () => {
// 已浏览展品的 ID 集合
const [visited, setVisited] = useState