init

2025-08-15 16:16:41 +08:00
commit 182abccc60
171 changed files with 26833 additions and 0 deletions
--- a/src/pages/LivePage/index.jsx
+++ b/src/pages/LivePage/index.jsx
@@ -0,0 +1,163 @@
+import React, { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { mockData } from "@/data/mockData";
+import VideoPlayer from "@/components/VideoPlayer";
+import CourseList from "./components/CourseList";
+import LiveInfo from "./components/LiveInfo";
+import StageProgress from "@/components/StageProgress";
+import "./index.css";
+
+const LivePage = () => {
+  // 从mockData获取数据
+  const { courseUnits, currentLive, liveConfig } = mockData;
+  const location = useLocation();
+
+  // 状态管理
+  const [currentCourse, setCurrentCourse] = useState(currentLive);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  // 处理从Dashboard传递的课程参数
+  useEffect(() => {
+    if (location.state?.courseId) {
+      // 在courseUnits中查找对应的课程
+      let targetCourse = null;
+      for (const unit of courseUnits) {
+        const foundCourse = unit.courses.find(
+          (course) => course.id === location.state.courseId
+        );
+        if (foundCourse) {
+          targetCourse = foundCourse;
+          break;
+        }
+      }
+
+      if (targetCourse) {
+        // 创建新的直播信息对象
+        const newLiveInfo = {
+          courseId: targetCourse.id,
+          title: targetCourse.title,
+          teacher: targetCourse.teacher,
+          startTime: targetCourse.startTime,
+          endTime: targetCourse.endTime,
+          viewers: targetCourse.viewCount,
+          description: targetCourse.description,
+          status: targetCourse.status,
+          duration: "1小时30分钟",
+        };
+        setCurrentCourse(newLiveInfo);
+      } else {
+        // No course found
+      }
+    }
+  }, [location.state, courseUnits]);
+
+  // 处理课程选择
+  const handleCourseSelect = (course) => {
+    // 创建新的直播信息对象，包含完整的课程信息
+    const newLiveInfo = {
+      courseId: course.id,
+      title: course.title,
+      teacher: course.teacher,
+      startTime:
+        course.startTime ||
+        `${course.date.replace(/\./g, "-")} ${course.time.split("-")[0]}`,
+      endTime: course.endTime,
+      viewers: course.viewCount,
+      description: course.description,
+      status: course.status,
+      duration: "1小时30分钟",
+    };
+
+    setCurrentCourse(newLiveInfo);
+  };
+
+  // 处理全屏状态变化
+  const handleFullscreenChange = (fullscreen) => {
+    setIsFullscreen(fullscreen);
+  };
+
+  // 处理回放请求
+  const handleReplayRequest = () => {
+    if (currentCourse) {
+      // 创建回放状态的课程信息
+      const replayLiveInfo = {
+        ...currentCourse,
+        status: "replay",
+      };
+      setCurrentCourse(replayLiveInfo);
+    }
+  };
+
+  return (
+    <div className={`live-page ${isFullscreen ? "fullscreen" : ""}`}>
+      {/* 学习阶段进度条 - 与首页保持一致（仅非全屏时显示，不显示阻塞警示） */}
+      {!isFullscreen && <StageProgress />}
+
+      {/* 直播主要内容区域 */}
+      <div className="live-main-content">
+        {/* 左侧区域：视频 + 老师信息 */}
+        <div className="left-section">
+          {/* 视频区域 */}
+          <div className="video-area">
+            {/* 视频标题栏 */}
+            <div className="video-title-bar">
+              <h1 className="course-title">
+                {currentCourse?.title || "课程直播间"}
+              </h1>
+              <div className="course-status-info">
+                <div
+                  className={`status-indicator ${
+                    currentCourse?.status || "offline"
+                  }`}
+                >
+                  <span className="status-dot"></span>
+                  {liveConfig?.statusTypes?.[currentCourse?.status]?.name ||
+                    "离线"}
+                </div>
+                {currentCourse?.viewers > 0 && (
+                  <div className="viewer-count">
+                    👁 {currentCourse.viewers}人观看
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 视频播放器容器 */}
+            <div className="video-container">
+              <VideoPlayer
+                title={currentCourse?.title}
+                isLive={currentCourse?.status === "live"}
+                courseStatus={currentCourse?.status}
+                startTime={currentCourse?.startTime}
+                endTime={currentCourse?.endTime}
+                onReplayRequest={handleReplayRequest}
+                onFullscreenChange={handleFullscreenChange}
+              />
+            </div>
+          </div>
+
+          {/* 老师信息区域（仅非全屏时显示） */}
+          {!isFullscreen && (
+            <div className="teacher-section">
+              <LiveInfo liveInfo={currentCourse} statusConfig={liveConfig} />
+            </div>
+          )}
+        </div>
+
+        {/* 右侧区域：课程列表（仅非全屏时显示） */}
+        {!isFullscreen && (
+          <div className="right-section">
+            <CourseList
+              courseUnits={courseUnits}
+              currentCourseId={currentCourse?.courseId}
+              onCourseSelect={handleCourseSelect}
+              statusConfig={liveConfig}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default LivePage;