81 lines
2.8 KiB
TypeScript
Executable File
81 lines
2.8 KiB
TypeScript
Executable File
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';
|
||
|
||
export function CoursePreview(){
|
||
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}/>,
|
||
}
|
||
];
|
||
|
||
return(
|
||
<div className="min-h-screen">
|
||
<CoursePreviewAllmsg previewMsg= {previewMsg} isLoading={courseIsLoading } items = {items}></CoursePreviewAllmsg>
|
||
</div>
|
||
)
|
||
} |