106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
|
import { XMarkIcon, BookOpenIcon } from "@heroicons/react/24/outline";
|
||
|
|
import {
|
||
|
|
ChevronDownIcon,
|
||
|
|
ClockIcon,
|
||
|
|
PlayCircleIcon,
|
||
|
|
} from "@heroicons/react/24/outline";
|
||
|
|
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
|
||
|
|
import React, { useState, useRef, useContext } from "react";
|
||
|
|
import { motion, AnimatePresence } from "framer-motion";
|
||
|
|
import { SectionDto } from "@nice/common";
|
||
|
|
import { SyllabusHeader } from "./SyllabusHeader";
|
||
|
|
import { SectionItem } from "./SectionItem";
|
||
|
|
import { CollapsedButton } from "./CollapsedButton";
|
||
|
|
import { CourseDetailContext } from "../CourseDetailContext";
|
||
|
|
|
||
|
|
interface CourseSyllabusProps {
|
||
|
|
sections: SectionDto[];
|
||
|
|
onLectureClick?: (lectureId: string) => void;
|
||
|
|
isOpen: boolean;
|
||
|
|
onToggle: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CourseSyllabus: React.FC<CourseSyllabusProps> = ({
|
||
|
|
sections,
|
||
|
|
onLectureClick,
|
||
|
|
isOpen,
|
||
|
|
onToggle,
|
||
|
|
}) => {
|
||
|
|
const { isHeaderVisible } = useContext(CourseDetailContext);
|
||
|
|
const [expandedSections, setExpandedSections] = useState<string[]>([]);
|
||
|
|
const sectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
|
||
|
|
|
||
|
|
const toggleSection = (sectionId: string) => {
|
||
|
|
setExpandedSections((prev) =>
|
||
|
|
prev.includes(sectionId)
|
||
|
|
? prev.filter((id) => id !== sectionId)
|
||
|
|
: [...prev, sectionId]
|
||
|
|
);
|
||
|
|
|
||
|
|
setTimeout(() => {
|
||
|
|
sectionRefs.current[sectionId]?.scrollIntoView({
|
||
|
|
behavior: "smooth",
|
||
|
|
block: "start",
|
||
|
|
});
|
||
|
|
}, 100);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<AnimatePresence>
|
||
|
|
{/* 收起时的悬浮按钮 */}
|
||
|
|
{!isOpen && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0 }}
|
||
|
|
animate={{ opacity: 1 }}
|
||
|
|
exit={{ opacity: 0 }}
|
||
|
|
className="fixed top-1/3 right-0 -translate-y-1/2 z-20">
|
||
|
|
<CollapsedButton onToggle={onToggle} />
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
<motion.div
|
||
|
|
initial={false}
|
||
|
|
animate={{
|
||
|
|
width: isOpen ? "25%" : "0",
|
||
|
|
right: 0,
|
||
|
|
top: isHeaderVisible ? "64px" : "0",
|
||
|
|
}}
|
||
|
|
className="fixed top-0 bottom-0 z-20 bg-white shadow-xl">
|
||
|
|
<AnimatePresence>
|
||
|
|
{isOpen && (
|
||
|
|
<motion.div
|
||
|
|
initial={{ opacity: 0, x: 20 }}
|
||
|
|
animate={{ opacity: 1, x: 0 }}
|
||
|
|
exit={{ opacity: 0, x: 20 }}
|
||
|
|
className="h-full flex flex-col">
|
||
|
|
<SyllabusHeader onToggle={onToggle} />
|
||
|
|
|
||
|
|
<div className="flex-1 overflow-y-auto p-4">
|
||
|
|
<div className="space-y-4">
|
||
|
|
{sections.map((section) => (
|
||
|
|
<SectionItem
|
||
|
|
key={section.id}
|
||
|
|
ref={(el) =>
|
||
|
|
(sectionRefs.current[
|
||
|
|
section.id
|
||
|
|
] = el)
|
||
|
|
}
|
||
|
|
section={section}
|
||
|
|
isExpanded={expandedSections.includes(
|
||
|
|
section.id
|
||
|
|
)}
|
||
|
|
onToggle={toggleSection}
|
||
|
|
onLectureClick={onLectureClick}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</motion.div>
|
||
|
|
)}
|
||
|
|
</AnimatePresence>
|
||
|
|
</motion.div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|