teach_sys_Demo/src/pages/PublicCourses/index.jsx

import { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";
import CoursesVideoPlayer from "@/components/CoursesVideoPlayer";
import PublicCourseList from "@/components/PublicCourseList";
import { mockData } from "@/data/mockData";
import "./index.css";

const PublicCourses = () => {
  // 默认不选中任何课程，显示黑屏状态
  const [selectedCourse, setSelectedCourse] = useState(null);
  const [searchParams] = useSearchParams();
  
  // 检查URL参数，如果有courseId则自动打开对应课程
  useEffect(() => {
    const courseId = searchParams.get('courseId');
    const courseTitle = searchParams.get('courseTitle');
    
    if (courseId || courseTitle) {
      // 查找对应的课程
      const publicCourses = mockData.publicCourses || [];
      const targetCourse = publicCourses.find(course => 
        course.id === courseId || course.title === courseTitle
      );
      
      if (targetCourse) {
        setSelectedCourse(targetCourse);
      }
    }
  }, [searchParams]);

  const handleCourseClick = (course) => {
    setSelectedCourse(course);
  };

  return (
    <div className="public-courses-page">
      <div className="public-courses-content">
        <CoursesVideoPlayer 
          selectedCourse={selectedCourse} 
          teacherData={mockData.teacherData} 
          unitPosters={mockData.publicCourseBackgrounds}
          isPublicCourse={true}
        />
        <PublicCourseList onCourseClick={handleCourseClick} />
      </div>
    </div>
  );
};

export default PublicCourses;