staff_data/apps/web/src/app/main/course/preview/page.tsx

81 lines
2.8 KiB
TypeScript
Raw Normal View History

2025-02-24 08:52:50 +08:00
import { Skeleton, type TabsProps } from 'antd';
import { CoursePreviewAllmsg } from "./components/coursePreviewAllmsg";
import { CoursePreviewTabmsg } from "./components/couresPreviewTabmsg";
import { CoursePreviewMsg } from "./type";
import { api } from '@nice/client'
import { useNavigate, useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';
import { courseDetailSelect, CourseDto } from '@nice/common';
2025-02-21 17:02:51 +08:00
export function CoursePreview(){
2025-02-24 08:52:50 +08:00
const { id } = useParams()
const { data:course,isLoading:courseIsLoading}:{data:CourseDto,isLoading:boolean}= api.post.findFirst.useQuery({
where:{
id
},
select:courseDetailSelect
})
// course.sections[0].lectures[0]
// `/course/${course.id}/detail/${Lecture.id}`
useEffect(() => {
if(!courseIsLoading){
setPreviewMsg({
videoPreview: course?.meta?.thumbnail,
Title: course?.title,
SubTitle:course?.subTitle,
Description:course?.content,
ToCourseUrl:`/course/${id}`,
isLoading:courseIsLoading
})
}
},[courseIsLoading])
const [previewMsg,setPreviewMsg] = useState({
videoPreview: '',
Title: '',
SubTitle:'',
Description:'',
ToCourseUrl:'',
isLoading:courseIsLoading
})
const tapData = [
{
title: '掌握R语言的基本概念语法',
description: '学生将学习R语言和RStudio的基本知识',
},
{
title: '掌握R语言的基本概念语法',
description: '学生将学习R语言的变量、数据类型、循环和条件语句等',
},
{
title: '掌握R语言的数据导入管理',
description: '学生将学会如何将数据导入R环境并且使用各种类型的数据',
},
{
title: '掌握R语言的基本数据清洗',
description: '学生将学会使用R语言进行数据清洗、整理和管理',
},
{
title: '掌握R语言的基本数据统计',
description: '学生将学会使用R语言进行基本的数据统计',
},
{
title: '掌握R语言的基本绘图功能',
description: '学生将学会使用R语言基本的绘图功能和ggplot2的应用',
},
];
const isLoading = false
const items: TabsProps['items'] = [
{
key: '1',
label: '课程学习目标',
children: isLoading ? <Skeleton className='my-5' active />: <CoursePreviewTabmsg data={tapData}/>,
}
];
2025-02-21 17:02:51 +08:00
return(
<div className="min-h-screen">
2025-02-24 08:52:50 +08:00
<CoursePreviewAllmsg previewMsg= {previewMsg} isLoading={courseIsLoading } items = {items}></CoursePreviewAllmsg>
2025-02-21 17:02:51 +08:00
</div>
)
}