qiuchenfan
/
origin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rht02261019

This commit is contained in:
Rao 2025-02-26 10:19:17 +08:00
parent ec049f01bc
commit 23b72c2611
5 changed files with 126 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/src/app/main/courses/components/CourseCard.tsx
View File

@ -16,6 +16,7 @@ export default function CourseCard({ course }: CourseCardProps) {
const navigate = useNavigate();
const handleClick = (course: CourseDto) => {
navigate(`/course/${course.id}/detail`);
window.scrollTo({top: 0,behavior: "smooth",})
};
return (

17
apps/web/src/app/main/courses/components/FilterSection.tsx
View File

@ -7,6 +7,7 @@ import { api } from "@nice/client";
import { useSearchParams } from "react-router-dom";
import TermSelect from "@web/src/components/models/term/term-select";
import { useMainContext } from "../../layout/MainProvider";
import TermParentSelector from "@web/src/components/models/term/term-parent-selector";
export default function FilterSection() {
const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
@ -28,7 +29,19 @@ export default function FilterSection() {
<h3 className="text-lg font-medium mb-4">
{tax?.name}
</h3>
<TermSelect
<TermParentSelector
value={items}
slug = {tax?.slug}
className="w-70 max-h-[500px] overscroll-contain overflow-x-hidden"
onChange={(selected) =>
handleTermChange(
tax?.slug,
selected as string[]
)
}
taxonomyId={tax?.id}
></TermParentSelector>
{/* <TermSelect
// open
className="w-72"
value={items}
@ -46,7 +59,7 @@ export default function FilterSection() {
}></TermSelect>
{index < taxonomies.length - 1 && (
<Divider className="my-6" />
)}
)} */}
</div>
);
})}

104
apps/web/src/app/main/home/components/HeroSection.tsx
View File

@ -1,10 +1,9 @@
import React, { useRef, useCallback, useEffect } from "react";
import { Button, Carousel, Typography } from "antd";
import React, { useRef, useCallback, useEffect, useMemo, useState } from "react";
import { Carousel, Typography } from "antd";
import {
TeamOutlined,
BookOutlined,
StarOutlined,
ClockCircleOutlined,
LeftOutlined,
RightOutlined,
EyeOutlined,
@ -24,36 +23,22 @@ interface CarouselItem {
interface PlatformStat {
icon: React.ReactNode;
value: string;
value: number;
label: string;
}
const carouselItems: CarouselItem[] = [
{
title: "探索编程世界",
desc: "从零开始学习编程，开启你的技术之旅",
image: "/images/banner1.jpg",
action: "立即开始",
color: "from-blue-600/90",
},
{
title: "人工智能课程",
desc: "掌握AI技术，引领未来发展",
image: "/images/banner2.jpg",
action: "了解更多",
color: "from-purple-600/90",
},
];
const HeroSection = () => {
const carouselRef = useRef<CarouselRef>(null);
const { statistics, baseSetting } = useAppConfig();
const platformStats: PlatformStat[] = [
{ icon: <TeamOutlined />, value: statistics.staffs.toString(), label: "注册学员" },
{ icon: <StarOutlined />, value: statistics.courses.toString(), label: "精品课程" },
{ icon: <BookOutlined />, value: statistics.lectures.toString(), label: '课程章节' },
{ icon: <EyeOutlined />, value: statistics.reads.toString(), label: "观看次数" },
];
const { statistics, slides } = useAppConfig();
const [countStatistics, setCountStatistics] = useState<number>(0)
const platformStats: PlatformStat[] = useMemo(() => {
return [
{ icon: <TeamOutlined />, value: statistics.staffs, label: "注册学员" },
{ icon: <StarOutlined />, value: statistics.courses, label: "精品课程" },
{ icon: <BookOutlined />, value: statistics.lectures, label: '课程章节' },
{ icon: <EyeOutlined />, value: statistics.reads, label: "观看次数" },
];
}, [statistics]);
const handlePrev = useCallback(() => {
carouselRef.current?.prev();
}, []);
@ -61,11 +46,16 @@ const HeroSection = () => {
const handleNext = useCallback(() => {
carouselRef.current?.next();
}, []);
const { slides } = useAppConfig()
const countNonZeroValues = (statistics: Record<string, number>): number => {
return Object.values(statistics).filter(value => value !== 0).length;
};
useEffect(() => {
//slides.push(('https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50'))
//console.log(slides)
}, [])
const count = countNonZeroValues(statistics);
console.log(count);
setCountStatistics(count);
}, [statistics]);
return (
<section className="relative ">
<div className="group">
@ -77,7 +67,7 @@ const HeroSection = () => {
dots={{
className: "carousel-dots !bottom-32 !z-20",
}}>
{Array.isArray(slides)?
{Array.isArray(slides) ?
(slides.map((item, index) => (
<div key={index} className="relative h-[600px]">
<div
@ -97,9 +87,9 @@ const HeroSection = () => {
<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
</div>
))
) : (
<div></div>
)}
) : (
<div></div>
)}
</Carousel>
{/* Navigation Buttons */}
@ -118,25 +108,31 @@ const HeroSection = () => {
</div>
{/* Stats Container */}
<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-2/3 max-w-6xl px-4">
<div className="rounded-2xl grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]">
{platformStats.map((stat, index) => (
<div
key={index}
className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out">
<div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-primary-50 text-primary-600 text-3xl transition-colors duration-300 group-hover:text-primary-700">
{stat.icon}
</div>
<div className="text-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-1.5">
{stat.value}
</div>
<div className="text-gray-600 font-medium">
{stat.label}
</div>
{
countStatistics > 1 && (
<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
<div className={`rounded-2xl grid grid-cols-${countStatistics} md:grid-cols-${countStatistics} gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]`}>
{platformStats.map((stat, index) => {
return stat.value
? (<div
key={index}
className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out">
<div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-primary-50 text-primary-600 text-3xl transition-colors duration-300 group-hover:text-primary-700">
{stat.icon}
</div>
<div className="text-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-1.5">
{stat.value}
</div>
<div className="text-gray-600 font-medium">
{stat.label}
</div>
</div>
) : null
})}
</div>
))}
</div>
</div>
</div>
)
}
</section>
);
};

55
apps/web/src/components/models/term/term-parent-selector.tsx Normal file
View File

@ -0,0 +1,55 @@
import { api } from "@nice/client/";
import { Checkbox, Form } from "antd";
import { TermDto } from "@nice/common";
import { useCallback, useEffect, useState } from "react";
export default function TermParentSelector({
value,
onChange,
className,
placeholder = "选择分类",
multiple = true,
taxonomyId,
domainId,
style,
}: any) {
const utils = api.useUtils();
const [selectedValues, setSelectedValues] = useState<string[]>([]); // 用于存储选中的值
const [termsData, setTermsData] = useState<any[]>([]);
const {
data,
isLoading,
}: { data: TermDto[]; isLoading: boolean } = api.term.findMany.useQuery({
where: {
taxonomy: {
id: taxonomyId,
},
parentId: null
},
});
const handleCheckboxChange = (checkedValues: string[]) => {
setSelectedValues(checkedValues); // 更新选中的值
if (onChange) {
onChange(checkedValues); // 调用外部传入的 onChange 回调
}
};
return (
<div className={className} style={style}>
<Form onFinish={null}>
<Form.Item name="categories">
<Checkbox.Group onChange={handleCheckboxChange}>
{data?.map((category) => (
<div className="w-full h-9 p-2 my-1">
<Checkbox className="text-base text-slate-700" key={category.id} value={category.id}>
{category.name}
</Checkbox>
</div>
))}
</Checkbox.Group>
</Form.Item>
</Form>
</div>
)
}

10
apps/web/src/routes/index.tsx
View File

@ -68,11 +68,11 @@ export const routes: CustomRouteObject[] = [
path: "profiles",
},
// 课程预览页面
{
path: "coursePreview/:id?",
element: <CoursePreview></CoursePreview>,
},
// // 课程预览页面
// {
// path: "coursePreview/:id?",
// element: <CoursePreview></CoursePreview>,
// },
],
},
{