add .
This commit is contained in:
parent
ee087f0dbd
commit
6ad65b1e71
|
|
@ -58,24 +58,6 @@ export default function CourseCard({ course }: CourseCardProps) {
|
||||||
</Tag>
|
</Tag>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
{/* <Tag
|
|
||||||
color="blue"
|
|
||||||
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
|
|
||||||
{course.terms?.[0].name}
|
|
||||||
|
|
||||||
</Tag>
|
|
||||||
|
|
||||||
<Tag
|
|
||||||
color={
|
|
||||||
course.terms?.[1].name === "入门"
|
|
||||||
? "green"
|
|
||||||
: course.terms?.[1].name === "中级"
|
|
||||||
? "blue"
|
|
||||||
: "purple"
|
|
||||||
}
|
|
||||||
className="px-3 py-1 rounded-full border-0">
|
|
||||||
{course.terms?.[1].name}
|
|
||||||
</Tag> */}
|
|
||||||
</div>
|
</div>
|
||||||
<Title
|
<Title
|
||||||
level={4}
|
level={4}
|
||||||
|
|
@ -90,15 +72,12 @@ export default function CourseCard({ course }: CourseCardProps) {
|
||||||
{
|
{
|
||||||
course?.depts.length > 1 ?`${course.depts[0].name}等`:course.depts[0].name
|
course?.depts.length > 1 ?`${course.depts[0].name}等`:course.depts[0].name
|
||||||
}
|
}
|
||||||
{/* {course?.depts?.map((dept) => {return dept.name.length > 1 ?`${dept.name.slice}等`: dept.name})} */}
|
|
||||||
{/* {course?.depts?.map((dept)=>{return dept.name})} */}
|
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
<span className="text-xs font-medium text-gray-500">
|
<span className="text-xs font-medium text-gray-500">
|
||||||
{course?.meta?.views ? `观看次数 ${course?.meta?.views}` : null}
|
{course?.meta?.views ? `观看次数 ${course?.meta?.views}` : null}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="pt-4 border-t border-gray-100 text-center">
|
<div className="pt-4 border-t border-gray-100 text-center">
|
||||||
<Button
|
<Button
|
||||||
type="primary"
|
type="primary"
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,7 @@ const CategorySection = () => {
|
||||||
window.scrollTo({top: 0,behavior: "smooth",})
|
window.scrollTo({top: 0,behavior: "smooth",})
|
||||||
},[]);
|
},[]);
|
||||||
return (
|
return (
|
||||||
<section className="py-32 relative overflow-hidden">
|
<section className="py-8 relative overflow-hidden">
|
||||||
<div className="max-w-screen-2xl mx-auto px-4 relative">
|
<div className="max-w-screen-2xl mx-auto px-4 relative">
|
||||||
<div className="text-center mb-24">
|
<div className="text-center mb-24">
|
||||||
<Title
|
<Title
|
||||||
|
|
|
||||||
|
|
@ -6,98 +6,98 @@ import { CoursesSectionTag } from "./CoursesSectionTag";
|
||||||
import CourseList from "@web/src/components/models/course/list/CourseList";
|
import CourseList from "@web/src/components/models/course/list/CourseList";
|
||||||
import LookForMore from "./LookForMore";
|
import LookForMore from "./LookForMore";
|
||||||
interface GetTaxonomyProps {
|
interface GetTaxonomyProps {
|
||||||
categories: string[];
|
categories: string[];
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
}
|
}
|
||||||
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||||
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
|
const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
|
||||||
api.term.findMany.useQuery({
|
api.term.findMany.useQuery({
|
||||||
where: {
|
where: {
|
||||||
taxonomy: {
|
taxonomy: {
|
||||||
slug: type,
|
slug: type,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
take: 10, // 只取前10个
|
take: 10, // 只取前10个
|
||||||
});
|
});
|
||||||
const categories = useMemo(() => {
|
const categories = useMemo(() => {
|
||||||
const allCategories = isLoading
|
const allCategories = isLoading
|
||||||
? []
|
? []
|
||||||
: data?.map((course) => course.name);
|
: data?.map((course) => course.name);
|
||||||
return [...Array.from(new Set(allCategories))];
|
return [...Array.from(new Set(allCategories))];
|
||||||
}, [data]);
|
}, [data]);
|
||||||
return { categories, isLoading };
|
return { categories, isLoading };
|
||||||
}
|
}
|
||||||
const { Title, Text } = Typography;
|
const { Title, Text } = Typography;
|
||||||
interface CoursesSectionProps {
|
interface CoursesSectionProps {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
initialVisibleCoursesCount?: number;
|
initialVisibleCoursesCount?: number;
|
||||||
}
|
}
|
||||||
const CoursesSection: React.FC<CoursesSectionProps> = ({
|
const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
initialVisibleCoursesCount = 8,
|
initialVisibleCoursesCount = 8,
|
||||||
}) => {
|
}) => {
|
||||||
const [selectedCategory, setSelectedCategory] = useState<string>("全部");
|
const [selectedCategory, setSelectedCategory] = useState<string>("全部");
|
||||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||||
type: TaxonomySlug.CATEGORY,
|
type: TaxonomySlug.CATEGORY,
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
|
<section className="relative py-20 overflow-hidden bg-gradient-to-b from-blue-50 to-gray-50 ">
|
||||||
<div className="max-w-screen-2xl mx-auto px-6 relative">
|
<div className="max-w-screen-2xl mx-auto px-6 relative">
|
||||||
<div className="flex justify-between items-end mb-16">
|
<div className="flex justify-between items-end mb-16 bg-blue-100 rounded-lg p-6">
|
||||||
<div>
|
<div>
|
||||||
<Title
|
<Title
|
||||||
level={2}
|
level={2}
|
||||||
className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||||
{title}
|
{title}
|
||||||
</Title>
|
</Title>
|
||||||
<Text
|
<Text
|
||||||
type="secondary"
|
type="secondary"
|
||||||
className="text-xl font-light text-gray-600">
|
className="text-xl font-light text-gray-600">
|
||||||
{description}
|
{description}
|
||||||
</Text>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-12 flex flex-wrap gap-4">
|
<div className="mb-12 flex flex-wrap gap-4">
|
||||||
{gateGory.isLoading ? (
|
{gateGory.isLoading ? (
|
||||||
<Skeleton paragraph={{ rows: 2 }}></Skeleton>
|
<Skeleton paragraph={{ rows: 2 }}></Skeleton>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
{["全部", ...gateGory.categories].map(
|
{["全部", ...gateGory.categories].map(
|
||||||
(category, idx) => (
|
(category, idx) => (
|
||||||
<CoursesSectionTag
|
<CoursesSectionTag
|
||||||
key={idx}
|
key={idx}
|
||||||
category={category}
|
category={category}
|
||||||
selectedCategory={selectedCategory}
|
selectedCategory={selectedCategory}
|
||||||
setSelectedCategory={
|
setSelectedCategory={
|
||||||
setSelectedCategory
|
setSelectedCategory
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<CourseList
|
<CourseList
|
||||||
params={{
|
params={{
|
||||||
page: 1,
|
page: 1,
|
||||||
pageSize: initialVisibleCoursesCount,
|
pageSize: initialVisibleCoursesCount,
|
||||||
where: {
|
where: {
|
||||||
terms: !(selectedCategory === "全部")
|
terms: !(selectedCategory === "全部")
|
||||||
? {
|
? {
|
||||||
some: {
|
some: {
|
||||||
name: selectedCategory,
|
name: selectedCategory,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
: {},
|
: {},
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
showPagination={false}
|
showPagination={false}
|
||||||
cols={4}></CourseList>
|
cols={4}></CourseList>
|
||||||
<LookForMore to={"/courses"}></LookForMore>
|
<LookForMore to={"/courses"}></LookForMore>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default CoursesSection;
|
export default CoursesSection;
|
||||||
|
|
|
||||||
|
|
@ -9,9 +9,9 @@ const { Content } = Layout;
|
||||||
export function MainLayout() {
|
export function MainLayout() {
|
||||||
return (
|
return (
|
||||||
<MainProvider>
|
<MainProvider>
|
||||||
<Layout className="min-h-screen">
|
<Layout className="min-h-screen bg-gray-100">
|
||||||
<MainHeader />
|
<MainHeader />
|
||||||
<Content className="mt-16 bg-gray-50">
|
<Content className="mt-16 bg-gray-50 ">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</Content>
|
</Content>
|
||||||
<MainFooter />
|
<MainFooter />
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue