linfeng
/
training_data
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

asddsa

This commit is contained in:
ditiqi 2025-02-24 09:33:09 +08:00
parent d5070fa647
commit f8f508676a
1 changed files with 40 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
apps/web/src/components/models/course/detail/CourseSyllabus/CourseSyllabus.tsx
View File

@ -6,7 +6,6 @@ import {
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline"; import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
import React, { useState, useRef, useContext } from "react"; import React, { useState, useRef, useContext } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { SectionDto, TaxonomySlug } from "@nice/common"; import { SectionDto, TaxonomySlug } from "@nice/common";
import { SyllabusHeader } from "./SyllabusHeader"; import { SyllabusHeader } from "./SyllabusHeader";
import { SectionItem } from "./SectionItem"; import { SectionItem } from "./SectionItem";
@ -30,11 +29,7 @@ export const CourseSyllabus: React.FC<CourseSyllabusProps> = ({
const { isHeaderVisible } = useContext(CourseDetailContext); const { isHeaderVisible } = useContext(CourseDetailContext);
const [expandedSections, setExpandedSections] = useState<string[]>([]); const [expandedSections, setExpandedSections] = useState<string[]>([]);
const sectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({}); const sectionRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
// api.term.findMany.useQuery({
// where: {
// taxonomy: { slug: TaxonomySlug.CATEGORY },
// },
// });
const toggleSection = (sectionId: string) => { const toggleSection = (sectionId: string) => {
setExpandedSections((prev) => setExpandedSections((prev) =>
prev.includes(sectionId) prev.includes(sectionId)
@ -42,43 +37,31 @@ export const CourseSyllabus: React.FC<CourseSyllabusProps> = ({
: [...prev, sectionId] : [...prev, sectionId]
); );
setTimeout(() => { // 直接滚动，无需延迟
sectionRefs.current[sectionId]?.scrollIntoView({ sectionRefs.current[sectionId]?.scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "start", block: "start",
}); });
}, 100);
}; };
return ( return (
<> <>
<AnimatePresence> {/* 收起按钮直接显示 */}
{/* 收起时的悬浮按钮 */}
{!isOpen && ( {!isOpen && (
<motion.div <div className="fixed top-1/3 right-0 -translate-y-1/2 z-20">
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} /> <CollapsedButton onToggle={onToggle} />
</motion.div> </div>
)} )}
</AnimatePresence>
<motion.div <div
initial={false} style={{
animate={{
width: isOpen ? "25%" : "0", width: isOpen ? "25%" : "0",
right: 0, right: 0,
top: isHeaderVisible ? "64px" : "0", top: isHeaderVisible ? "64px" : "0",
}} }}
className="fixed top-0 bottom-0 z-20 bg-white shadow-xl"> className="fixed top-0 bottom-0 z-20 bg-white shadow-xl">
<AnimatePresence>
{isOpen && ( {isOpen && (
<motion.div <div className="h-full flex flex-col">
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 20 }}
className="h-full flex flex-col">
<SyllabusHeader onToggle={onToggle} /> <SyllabusHeader onToggle={onToggle} />
<div className="flex-1 overflow-y-auto p-4"> <div className="flex-1 overflow-y-auto p-4">
@ -87,9 +70,8 @@ export const CourseSyllabus: React.FC<CourseSyllabusProps> = ({
<SectionItem <SectionItem
key={section.id} key={section.id}
ref={(el) => ref={(el) =>
(sectionRefs.current[ (sectionRefs.current[section.id] =
section.id el)
] = el)
} }
index={index + 1} index={index + 1}
section={section} section={section}
@ -102,10 +84,9 @@ export const CourseSyllabus: React.FC<CourseSyllabusProps> = ({
))} ))}
</div> </div>
</div> </div>
</motion.div> </div>
)} )}
</AnimatePresence> </div>
</motion.div>
</> </>
); );
}; };