feat:黄炎培对话对接中

src/pages/huangyanpei/reflection/scene4.tsx

@@ -1,10 +1,11 @@
-import { useState, useCallback } from "react";
-import { Title, Image, Cursor } from "@/components";
+import { useState, useCallback, useRef } from "react";
+import { Title, Image, Cursor, Video, StudyGuideModal } from "@/components";
 import { MultipleChoiceQuizPanel } from "@/components/layout/quiz";
 import { SuccessAlert } from "@/components/layout";
-import { getBackgroundImage, getStaticImage } from "@/lib/utils";
+import { getBackgroundImage, getStaticImage, getPublicPath } from "@/lib/utils";
 import { useNavigate, useParams } from "react-router-dom";
 import TowelSalesDialog from "./scene4/TowelSalesDialog";
+import type { VideoRef } from "@/components/video";
 
 const starName = "huangyanpei";
 
@@ -19,6 +20,9 @@ const HuangyanpeiReflectionScene4 = () => {
   const [showQuiz1, setShowQuiz1] = useState(false);
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
   const [showTowelDialog, setShowTowelDialog] = useState(false);
+  const [showVideo, setShowVideo] = useState(false);
+  const videoRef = useRef<VideoRef>(null);
+  const [showGuide1, setShowGuide1] = useState(true);
 
   // 处理成功提示的继续和关闭
   const handleSuccessAlertContinue = useCallback(() => {
@@ -76,7 +80,7 @@ const HuangyanpeiReflectionScene4 = () => {
         src={getStaticImage("components/离开")}
         button
         onClick={() => {
-          navigate(`/${moduleName}/${starName}/home`);
+          navigate(`/${moduleName}/${starName}/reflection2`);
         }}
       />
 
@@ -160,6 +164,33 @@ const HuangyanpeiReflectionScene4 = () => {
           src={getStaticImage("components/place/继续前进")}
           button
           onClick={() => {
+            setShowVideo(true);
+          }}
+        />
+      )}
+
+      {/* 第一段引导 */}
+      <StudyGuideModal
+        visible={showGuide1}
+        onContinue={() => {
+          setShowGuide1(false);
+        }}
+      >
+        终于到中华职业学校啦！这里是中国近代职教的摇篮，“免学费、包分配”，还能学真手艺，快来练就一技之长。
+        {"\n"}
+        现在要完成你的第一个任务：推销中华职校生产的“国货精品”——手工纽扣和纯棉毛巾！当年学生们就是带着这些国货，走街串巷做推销呢
+      </StudyGuideModal>
+
+      {showVideo && (
+        <Video
+          ref={videoRef}
+          src={getPublicPath("video/huangyanpei/huangyanpei_09.mp4")}
+          className="h-full w-full"
+          autoPlay
+          showSkipButton
+          playsInline
+          onEnded={() => {
+            setShowVideo(false);
             navigate(`/${moduleName}/${starName}/home`);
           }}
         />