rht02251256

apps/web/src/app/main/courses/components/FilterSection.tsx

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

apps/web/src/app/main/courses/page.tsx

@@ -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 pageSize = 12;
  	const [isAll,setIsAll] = useState(true)
 	const [searchParams, setSearchParams] = useSearchParams();
-	let coursesData = []
+	
- 	let isCourseLoading = false
+	const [coursesData, setCoursesData] = useState<CourseDto[]>([]);
-	if(!searchParams.get('searchValue')){
+	const [isCourseLoading, setIsCourseLoading] = useState(false);
-		console.log('no category')
+	const [totalPagesNum, setTotalPagesNum] = useState(0);
-		const {data,isLoading} = api.post.findManyWithPagination.useQuery({
+	
+	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
+		console.log(data)
-		isCourseLoading = isLoading
+		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
+		useEffect(()=>{
-		isCourseLoading = isLoading
+			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}

apps/web/src/app/main/home/components/CategorySection.tsx

@@ -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" />

apps/web/src/app/main/home/components/CoursesSection.tsx

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

apps/web/src/app/main/home/components/HeroSection.tsx

@@ -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: <TeamOutlined />, value: statistics.staffs.toString(), label: "注册学员" },
-		{ icon: <BookOutlined />, value: "1,000+", label: "精品课程" },
+		{ icon: <StarOutlined />, value: statistics.courses.toString(), label: "精品课程" },
-		// { icon: <StarOutlined />, value: '98%', label: '好评度' },
+		{ icon: <BookOutlined />, value: statistics.lectures.toString(), label: '课程章节' },
-		{ icon: <EyeOutlined />, value: "4552", 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="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-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="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}

apps/web/src/app/main/layout/MainHeader.tsx

@@ -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}`
 								);