feat: 更新场景和组件，优化用户体验

- 更新多个场景中的引导对话，提升学习互动性。 - 修改组件以清理不必要的学习引导弹窗，简化用户流程。 - 调整文本内容，确保信息准确性和一致性。 - 添加背景音乐控制，增强沉浸式体验。
2026-01-13 18:48:10 +08:00
1 parent d226283e15
commit 71f607f6a3
@@ -4,7 +4,6 @@ import {
  Title,
  Image,
  Cursor,
-  StudyGuideModal,
  GuideStepsItem,
  GuideSteps,
 } from "@/components";
@@ -24,8 +23,6 @@ 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());

@@ -146,19 +143,6 @@ const HuangyanpeiPlace2 = () => {
          可就在这一年，南洋公学发生了著名的“墨水瓶风潮”，他毅然跟着蔡元培先生退学，转入蔡先生创办的中国教育会，正式开启了自己“教育救国”的实践。
        </GuideStepsItem>
      </GuideSteps>
-
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
    </div>
  );
 };
@@ -4,7 +4,6 @@ import {
  Title,
  Image,
  Cursor,
-  StudyGuideModal,
  GuideSteps,
  GuideStepsItem,
  SingleChoiceQuizPanel,
@@ -27,8 +26,6 @@ const HuangyanpeiPlace3 = () => {
    moduleName: string;
  }>();

-  // 学习引导弹窗（进入场景即显示）
-  const [showGuideModal, setShowGuideModal] = useState(true);
  const [activeExhibitId, setActiveExhibitId] = useState<1 | 2 | 3 | null>(
    null
  );
@@ -252,19 +249,6 @@ const HuangyanpeiPlace3 = () => {
          建成后有能容纳千人的大礼堂和两座教学楼,是近代上海第一所完全中学呢!1912年,黄炎培担任江苏省署教育司司长,任职期间一直倡导实用主义教育,强调教育要和生产劳动结合起来,这也为后来的职业教育打下了坚实基础。
        </GuideStepsItem>
      </GuideSteps>
-
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
    </div>
  );
 };
@@ -4,7 +4,6 @@ import {
  Title,
  Image,
  Cursor,
-  StudyGuideModal,
  GuideSteps,
  GuideStepsItem,
  SingleChoiceQuizPanel,
@@ -31,8 +30,6 @@ const HuangyanpeiPlace4 = () => {
    moduleName: string;
  }>();

-  // 学习引导弹窗（进入场景即显示）
-  const [showGuideModal, setShowGuideModal] = useState(true);
  const [activeExhibitId, setActiveExhibitId] = useState<
    1 | 2 | 3 | 4 | 5 | null
  >(null);
@@ -239,19 +236,6 @@ const HuangyanpeiPlace4 = () => {
          setShowSuccessAlert(false);
        }}
      />
-
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
    </div>
  );
 };
@@ -5,7 +5,6 @@ import {
  Image,
  Cursor,
  Video,
-  StudyGuideModal,
  GuideSteps,
  GuideStepsItem,
  SingleChoiceQuizPanel,
@@ -32,8 +31,6 @@ 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);
  // 展品2视频后的对话引导状态
  const [guideVisible, setGuideVisible] = useState(false);
  // 题目显示状态
@@ -223,18 +220,6 @@ const HuangyanpeiPlace5 = () => {
        }}
      />

-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
    </div>
  );
 };
@@ -4,7 +4,6 @@ import {
  Title,
  Image,
  Cursor,
-  StudyGuideModal,
  GuideSteps,
  GuideStepsItem,
 } from "@/components";
@@ -25,8 +24,6 @@ const HuangyanpeiPlace6 = () => {

  const [activeExhibitId, setActiveExhibitId] = useState<1 | null>(null);
  const [visited, setVisited] = useState<Set<number>>(new Set());
-  // 学习引导弹窗（进入场景即显示）
-  const [showGuideModal, setShowGuideModal] = useState(true);
  // 对话引导状态
  const [guideVisible, setGuideVisible] = useState(false);

@@ -124,19 +121,6 @@ const HuangyanpeiPlace6 = () => {
          黄炎培先生曾说过:"我要把最后一滴血,滴在职业教育的讲台上。"他用一生践行了这句话,而我们现在中职教育强调的"工学结合、德技并修",正是对他"手脑并用、注重实践"理念的传承和发展。
        </GuideStepsItem>
      </GuideSteps>
-
-      {/* 学习引导（进入场景即显示，与 place1 保持一致） */}
-      <StudyGuideModal
-        visible={showGuideModal}
-        onContinue={() => setShowGuideModal(false)}
-        ailgn="left"
-      >
-        1、场景中出现动态光点的展品表示未浏览，可通过点击光点来了解展品背后的故事，通过滚轮可以放大展品，浏览展品后蓝色动态光点会变为已浏览状态；
-        {"\n"}
-        2、在学习过程中会掉落拼图碎片，拼图碎片会自动收入拼图盒中，拼图盒可以点击查看当前拼图收集情况，点击单个拼图可以回到获得拼图的场景再次学习；
-        {"\n"}
-        3、所有动态光点的展品全部学习后才能进入下一个场景学习；
-      </StudyGuideModal>
    </div>
  );
 };