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

rht02251256

This commit is contained in:
Rao 2025-02-25 12:56:53 +08:00
parent 4d995a24a9
commit 512b2420e3
6 changed files with 59 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@ function useGetTaxonomy({type}) : GetTaxonomyProps {
include:{
children :true
},
take:10, // 只取前10个
take:20, // 只取前10个
orderBy: {
createdAt: 'desc', // 按创建时间降序排列
},

61
apps/web/src/app/main/courses/page.tsx
View File

@ -7,19 +7,24 @@ import { courseDetailSelect, CourseDto, LectureType, PostType } from "@nice/comm
import { useSearchParams } from "react-router-dom";
import { set } from "idb-keyval";
interface paginationData {
items:CourseDto[],
totalPages:number
}
export default function CoursesPage() {
const [currentPage, setCurrentPage] = useState(1);
const [selectedCategory, setSelectedCategory] = useState("");
const [selectedLevel, setSelectedLevel] = useState("");
const pageSize = 9;
const [isAll,setIsAll] = useState(true)
const pageSize = 12;
const [isAll,setIsAll] = useState(true)
const [searchParams, setSearchParams] = useSearchParams();
let coursesData = []
let isCourseLoading = false
if(!searchParams.get('searchValue')){
console.log('no category')
const {data,isLoading} = api.post.findManyWithPagination.useQuery({
const [coursesData, setCoursesData] = useState<CourseDto[]>([]);
const [isCourseLoading, setIsCourseLoading] = useState(false);
const [totalPagesNum, setTotalPagesNum] = useState(0);
if(!searchParams.get('searchValue') && !searchParams.get('searchValue')){
const {data,isLoading} :{ data:paginationData,isLoading:boolean} = api.post.findManyWithPagination.useQuery({
where: {
type: PostType.COURSE,
terms:isAll?{}:{
@ -32,14 +37,21 @@ export default function CoursesPage() {
},
},
select:courseDetailSelect
pageSize,
page:currentPage,
select:courseDetailSelect,
});
coursesData = data?.items
isCourseLoading = isLoading
console.log(data)
useEffect(()=>{
console.log(currentPage);
setIsCourseLoading(isLoading)
setCoursesData(data?.items)
setTotalPagesNum(data?.totalPages)
},[currentPage,data])
}else{
console.log('searchValue:'+searchParams.get('searchValue'))
const searchValue = searchParams.get('searchValue')
const {data,isLoading} = api.post.findManyWithPagination.useQuery({
const {data,isLoading} :{ data:paginationData,isLoading:boolean}= api.post.findManyWithPagination.useQuery({
where: {
type: PostType.COURSE,
OR:[
@ -49,10 +61,15 @@ export default function CoursesPage() {
{ terms: { some: { name: { contains: searchValue, mode: 'insensitive' } } } }
]
},
select:courseDetailSelect
select:courseDetailSelect,
pageSize,
page:currentPage,
})
coursesData = data?.items
isCourseLoading = isLoading
useEffect(()=>{
setIsCourseLoading(isLoading)
setCoursesData(data?.items)
setTotalPagesNum(data?.totalPages)
},[currentPage])
}
useEffect(() => {
if(searchParams.get('searchValue')==''){
@ -93,13 +110,19 @@ export default function CoursesPage() {
setSelectedCategory(category);
setCurrentPage(1);
setIsAll(!category)
setSearchParams({ searchValue: ''});
setSearchParams(prev => {
prev.delete('searchValue');
return prev;
});
}}
onLevelChange={(level) => {
setSelectedLevel(level);
setCurrentPage(1);
setIsAll(!level)
setSearchParams({ searchValue: ''});
setSearchParams(prev => {
prev.delete('searchValue');
return prev;
});
}}
/>
</div>
@ -110,12 +133,12 @@ export default function CoursesPage() {
<div className="bg-white p-6 rounded-lg shadow-sm">
<div className="flex justify-between items-center mb-6">
<span className="text-gray-600">
共找到 {filteredCourses.length} 门课程
共找到 {totalPagesNum * pageSize || 0} 门课程
</span>
</div>
<CourseList
courses={paginatedCourses}
total={filteredCourses.length}
total={totalPagesNum * pageSize}
pageSize={pageSize}
currentPage={currentPage}
onPageChange={handlePageChange}

3
apps/web/src/app/main/home/components/CategorySection.tsx
View File

@ -3,7 +3,7 @@ import { Typography, Button, Spin } from 'antd';
import { stringToColor, TaxonomySlug, TermDto } from '@nice/common';
import { api,} from '@nice/client';
import { ControlOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useSearchParams } from 'react-router-dom';
const { Title, Text } = Typography;
@ -124,6 +124,7 @@ const CategorySection = () => {
onClick={()=>{
console.log(category.name)
navigate(`/courses?category=${category.name}`)
window.scrollTo({ top: 0, behavior: 'smooth' })
}}
>
<div className="absolute -inset-0.5 bg-gradient-to-r from-gray-200 to-gray-300 opacity-50 rounded-2xl transition-all duration-700 group-hover:opacity-75" />

2
apps/web/src/app/main/home/components/CoursesSection.tsx
View File

@ -56,7 +56,7 @@ function useFetchCoursesByCategory(category: string) {
terms:true
}
});
console.log("ss",data)
return { data, isLoading};
}

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

@ -48,12 +48,11 @@ const carouselItems: CarouselItem[] = [
const HeroSection = () => {
const carouselRef = useRef<CarouselRef>(null);
const { statistics, baseSetting } = useAppConfig();
const platformStats: PlatformStat[] = [
{ icon: <TeamOutlined />, value: "50,000+", label: "注册学员" },
{ icon: <BookOutlined />, value: "1,000+", label: "精品课程" },
// { icon: <StarOutlined />, value: '98%', label: '好评度' },
{ icon: <EyeOutlined />, value: "4552", label: "观看次数" },
{ 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 handlePrev = useCallback(() => {
carouselRef.current?.prev();
@ -119,8 +118,8 @@ const HeroSection = () => {
</div>
{/* Stats Container */}
<div className="absolute -bottom-24 left-1/2 -translate-x-1/2 w-1/2 max-w-6xl px-4">
<div className="rounded-2xl grid grid-cols-2 md:grid-cols-3 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]">
<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}

9
apps/web/src/app/main/layout/MainHeader.tsx
View File

@ -2,7 +2,7 @@ import { useState } from "react";
import { Input, Layout, Avatar, Button, Dropdown } from "antd";
import { EditFilled, SearchOutlined, UserOutlined } from "@ant-design/icons";
import { useAuth } from "@web/src/providers/auth-provider";
import { useNavigate } from "react-router-dom";
import { useNavigate, useSearchParams } from "react-router-dom";
import { UserMenu } from "./UserMenu/UserMenu";
import { NavigationMenu } from "./NavigationMenu";
@ -12,6 +12,7 @@ export function MainHeader() {
const [searchValue, setSearchValue] = useState("");
const { isAuthenticated, user } = useAuth();
const navigate = useNavigate();
const [searchParams,setSearchParams] = useSearchParams();
return (
<Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
@ -37,7 +38,11 @@ export function MainHeader() {
onChange={(e) => setSearchValue(e.target.value)}
onPressEnter={(e) => {
//console.log(e)
setSearchValue("");
//setSearchValue("");
setSearchParams((prev)=>{
if(searchParams.get("category")) prev.delete("category")
return prev
})
navigate(
`/courses/?searchValue=${searchValue}`
);