add

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

@@ -1,9 +1,13 @@
-import { Card, Rate, Tag ,Typography,Button} from 'antd';
+import { Card, Rate, Tag, Typography, Button } from "antd";
-import { Course } from '../mockData';
+import { Course } from "../mockData";
-import { UserOutlined, ClockCircleOutlined, PlayCircleOutlined, TeamOutlined } from '@ant-design/icons';
+import {
-import { CourseDto } from '@nice/common';
+	UserOutlined,
-import { useNavigate } from 'react-router-dom';
+	ClockCircleOutlined,
-
+	PlayCircleOutlined,
+	TeamOutlined,
+} from "@ant-design/icons";
+import { CourseDto } from "@nice/common";
+import { useNavigate } from "react-router-dom";
 
 interface CourseCardProps {
 	course: CourseDto;
@@ -13,7 +17,7 @@ export default function CourseCard({ course }: CourseCardProps) {
 	const navigate = useNavigate();
 	const handleClick = (course: CourseDto) => {
 		navigate(`/course/${course.id}/detail`);
-  }
+	};
 	return (
 		<Card
 			onClick={() => handleClick(course)}
@@ -25,46 +29,44 @@ export default function CourseCard({ course }: CourseCardProps) {
 				<div className="relative h-56 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
 					<div
 						className="absolute inset-0 bg-cover bg-center transform transition-all duration-700 ease-out group-hover:scale-110"
-          style={{ backgroundImage: `url(${course?.meta?.thumbnail})` }}
+						style={{
+							backgroundImage: `url(${course?.meta?.thumbnail})`,
+						}}
 					/>
 					<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-80 group-hover:opacity-60 transition-opacity duration-300" />
 					<PlayCircleOutlined className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl text-white/90 opacity-0 group-hover:opacity-100 transition-all duration-300" />
 				</div>
-    }
+			}>
-  >
 			<div className="px-4">
 				<div className="flex gap-2 mb-4">
 					<Tag
 						color="blue"
-          className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"
+						className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0">
-        >
+						{course.terms?.[0].name}
-          {course.terms[0].name}
 					</Tag>
 					<Tag
 						color={
-            course.terms[1].name === '入门'
+							course.terms?.[1].name === "入门"
-              ? 'green'
+								? "green"
-              : course.terms[1].name === '中级'
+								: course.terms?.[1].name === "中级"
-                ? 'blue'
+									? "blue"
-                : 'purple'
+									: "purple"
 						}
-          className="px-3 py-1 rounded-full border-0"
+						className="px-3 py-1 rounded-full border-0">
-        >
+						{course.terms?.[1].name}
-          {course.terms[1].name}
 					</Tag>
 				</div>
 				<Title
 					level={4}
-        className="mb-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left"
+					className="mb-4 line-clamp-2 font-bold leading-snug text-gray-800 hover:text-blue-600 transition-colors duration-300 group-hover:scale-[1.02] transform origin-left">
-      >
+					<button> {course.title}</button>
-        <button > {course.title}</button>
 				</Title>
 
 				<div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
 					<TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
 					<div className="ml-2 flex items-center flex-grow">
 						<Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300 truncate max-w-[120px]">
-            {course?.depts[0]?.name}
+							{course?.depts?.[0]?.name}
 						</Text>
 					</div>
 					<span className="text-xs font-medium text-gray-500">
@@ -72,18 +74,15 @@ export default function CourseCard({ course }: CourseCardProps) {
 					</span>
 				</div>
 
-
 				<div className="pt-4 border-t border-gray-100 text-center">
 					<Button
 						type="primary"
 						size="large"
 						className="w-full shadow-[0_8px_20px_-6px_rgba(59,130,246,0.5)] hover:shadow-[0_12px_24px_-6px_rgba(59,130,246,0.6)] 
-            transform hover:translate-y-[-2px] transition-all duration-500 ease-out"
+            transform hover:translate-y-[-2px] transition-all duration-500 ease-out">
-        >
 						立即学习
 					</Button>
 				</div>
-
 			</div>
 		</Card>
 	);

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

@@ -1,36 +1,66 @@
-import { Pagination, Empty } from 'antd';
+import { Pagination, Empty } from "antd";
-import { Course } from '../mockData';
+import CourseCard from "./CourseCard";
-import CourseCard from './CourseCard';
+import { CourseDto, Prisma } from "@nice/common";
-import {CourseDto} from '@nice/common'
+import { api } from "@nice/client";
+import { DefaultArgs } from "@prisma/client/runtime/library";
+import { useEffect, useMemo, useState } from "react";
 interface CourseListProps {
-  courses: CourseDto[];
+	params?: {
-  total: number;
+		page?: number;
-  pageSize: number;
+		pageSize?: number;
-  currentPage: number;
+		where?: Prisma.PostWhereInput;
-  onPageChange: (page: number) => void;
+		select?: Prisma.PostSelect<DefaultArgs>;
+	};
 }
+interface CoursesPagnationProps {
+	data: {
+		items: CourseDto[];
+		totalPages: number;
+	};
+	isLoading: boolean;
+}
+export default function CourseList({ params }: CourseListProps) {
+	const [currentPage, setCurrentPage] = useState<number>(params?.page || 1);
+	const { data, isLoading }: CoursesPagnationProps =
+		api.post.findManyWithPagination.useQuery({
+			...params,
+			page: currentPage,
+		});
+	const totalPages = useMemo(() => {
+		if (data && !isLoading) {
+			return data?.totalPages;
+		}
+		return 1;
+	}, [data, isLoading]);
 
-export default function CourseList({
+	const courses = useMemo(() => {
-  courses,
+		if (data && !isLoading) {
-  total,
+			return data?.items;
-  pageSize,
+		}
-  currentPage,
+		return [];
-  onPageChange,
+	}, [data, isLoading]);
-}: CourseListProps) {
+
+	useEffect(() => {
+		setCurrentPage(params?.page || 1);
+	}, [params?.page]);
+	function onPageChange(page: number, pageSize: number) {
+		setCurrentPage(page);
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}
 	return (
 		<div className="space-y-6">
 			{courses.length > 0 ? (
 				<>
 					<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {courses.map(course => (
+						{courses.map((course) => (
 							<CourseCard key={course.id} course={course} />
 						))}
 					</div>
 					<div className="flex justify-center mt-8">
 						<Pagination
 							current={currentPage}
-              total={total}
+							total={totalPages}
-              pageSize={pageSize}
+							pageSize={params?.pageSize}
 							onChange={onPageChange}
 							showSizeChanger={false}
 						/>

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

@@ -1,66 +0,0 @@
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CourseList } from "@web/src/components/models/course/list/course-list";
-import { Button } from "@web/src/components/common/element/Button";
-import { api } from "@nice/client";
-import { useState } from "react";
-import { CourseCard } from "@web/src/components/models/course/card/CourseCard";
-import { useNavigate } from "react-router-dom";
-import { useAuth } from "@web/src/providers/auth-provider";
-
-export default function InstructorCoursesPage() {
-	const navigate = useNavigate();
-	const [currentPage, setCurrentPage] = useState(1);
-	const { user } = useAuth();
-
-	const { data: paginationRes, refetch } =
-		api.post.findManyWithPagination.useQuery({
-			page: currentPage,
-			pageSize: 8,
-			where: {
-				instructors: {
-					some: {
-						instructorId: user?.id,
-					},
-				},
-			},
-		});
-
-	const handlePageChange = (page: number) => {
-		setCurrentPage(page);
-		refetch();
-	};
-
-	return (
-		<div className="bg-slate-50 px-4 py-8 sm:px-6 lg:px-8">
-			<div className="mx-auto max-w-7xl">
-				<div className="mb-8 flex items-center justify-between">
-					<h1 className="text-3xl font-semibold text-slate-800">
-						我教授的课程
-					</h1>
-					<Button
-						onClick={() => navigate("/course/editor")}
-						variant="primary"
-						leftIcon={<PlusIcon className="w-5 h-5" />}>
-						创建课程
-					</Button>
-				</div>
-				<CourseList
-					totalPages={paginationRes?.totalPages}
-					onPageChange={handlePageChange}
-					currentPage={currentPage}
-					courses={paginationRes?.items as any}
-					renderItem={(course) => (
-						<CourseCard
-							onClick={() => {
-								navigate(`/course/${course.id}/editor`, {
-									replace: true,
-								});
-							}}
-							course={course}
-						/>
-					)}
-				/>
-			</div>
-		</div>
-	);
-}

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

@@ -1,48 +0,0 @@
-import { CourseList } from "@web/src/components/models/course/list/course-list";
-import { api } from "@nice/client";
-import { useState } from "react";
-import { CourseCard } from "@web/src/components/models/course/card/CourseCard";
-import { useAuth } from "@web/src/providers/auth-provider";
-
-export default function StudentCoursesPage() {
-	const [currentPage, setCurrentPage] = useState(1);
-	const { user } = useAuth();
-
-	const { data: paginationRes, refetch } =
-		api.post.findManyWithPagination.useQuery({
-			page: currentPage,
-			pageSize: 8,
-			where: {
-				enrollments: {
-					some: {
-						studentId: user?.id,
-					},
-				},
-			},
-		});
-
-	const handlePageChange = (page: number) => {
-		setCurrentPage(page);
-		refetch();
-	};
-
-	return (
-		<div className="bg-slate-50 px-4 py-8 sm:px-6 lg:px-8">
-			<div className="mx-auto max-w-7xl">
-				<div className="mb-8">
-					<h1 className="text-3xl font-semibold text-slate-800 mb-4">
-						我参加的课程
-					</h1>
-				</div>
-				<CourseList
-					totalPages={paginationRes?.totalPages}
-					onPageChange={handlePageChange}
-					currentPage={currentPage}
-					courses={paginationRes?.items as any}
-					renderItem={(course) => (
-						<CourseCard course={course}></CourseCard>
-					)}></CourseList>
-			</div>
-		</div>
-	);
-}

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

@@ -1,19 +1,17 @@
-import { useState } from "react";
+import { useContext, 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, useSearchParams } from "react-router-dom";
 import { UserMenu } from "./UserMenu/UserMenu";
 import { NavigationMenu } from "./NavigationMenu";
-
+import { useMainContext } from "./MainProvider";
 const { Header } = Layout;
 
 export function MainHeader() {
-	const [searchValue, setSearchValue] = useState("");
 	const { isAuthenticated, user } = useAuth();
 	const navigate = useNavigate();
-	const [searchParams,setSearchParams] = useSearchParams();
+	const { searchValue, setSearchValue } = useMainContext();
-
 	return (
 		<Header className="select-none flex items-center justify-center bg-white shadow-md border-b border-gray-100 fixed w-full z-30">
 			<div className="w-full max-w-screen-2xl px-4 md:px-6 mx-auto flex items-center justify-between h-full">
@@ -37,16 +35,17 @@ export function MainHeader() {
 							value={searchValue}
 							onChange={(e) => setSearchValue(e.target.value)}
 							onPressEnter={(e) => {
-								//console.log(e)
+								if (
-								//setSearchValue("");
+									!window.location.pathname.startsWith(
-								setSearchParams((prev)=>{
+										"/courses/"
-									if(searchParams.get("category")) prev.delete("category")
+									)
-									return prev
+								) {
-								})
+									navigate(`/courses/`);
-								navigate(
+									window.scrollTo({
-									`/courses/?searchValue=${searchValue}`
+										top: 0,
-								);
+										behavior: "smooth",
-								window.scrollTo({ top: 0, behavior: "smooth" });
+									});
+								}
 							}}
 						/>
 					</div>

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

@@ -1,19 +1,21 @@
-import { Layout } from 'antd';
+import { Layout } from "antd";
-import { Outlet } from 'react-router-dom';
+import { Outlet } from "react-router-dom";
-import { MainHeader } from './MainHeader';
+import { MainHeader } from "./MainHeader";
-import { MainFooter } from './MainFooter';
+import { MainFooter } from "./MainFooter";
+import { MainProvider } from "./MainProvider";
 
 const { Content } = Layout;
 
 export function MainLayout() {
 	return (
+		<MainProvider>
 			<Layout className="min-h-screen">
-
 				<MainHeader />
 				<Content className="mt-16 bg-gray-50">
 					<Outlet />
 				</Content>
 				<MainFooter />
 			</Layout>
+		</MainProvider>
 	);
 }

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

@@ -0,0 +1,31 @@
+import React, { createContext, ReactNode, useContext, useState } from "react";
+
+interface MainContextType {
+	searchValue?: string;
+	setSearchValue?: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const MainContext = createContext<MainContextType | null>(null);
+interface MainProviderProps {
+	children: ReactNode;
+}
+
+export function MainProvider({ children }: MainProviderProps) {
+	const [searchValue, setSearchValue] = useState("");
+	return (
+		<MainContext.Provider
+			value={{
+				searchValue,
+				setSearchValue,
+			}}>
+			{children}
+		</MainContext.Provider>
+	);
+}
+export const useMainContext = () => {
+	const context = useContext(MainContext);
+	if (!context) {
+		throw new Error("useMainContext must be used within MainProvider");
+	}
+	return context;
+};

apps/web/src/routes/index.tsx

@@ -8,8 +8,6 @@ import {
 import ErrorPage from "../app/error";
 import WithAuth from "../components/utils/with-auth";
 import LoginPage from "../app/login";
-import StudentCoursesPage from "../app/main/courses/student/page";
-import InstructorCoursesPage from "../app/main/courses/instructor/page";
 import HomePage from "../app/main/home/page";
 import { CourseDetailPage } from "../app/main/course/detail/page";
 import { CourseBasicForm } from "../components/models/course/editor/form/CourseBasicForm";
@@ -41,7 +39,6 @@ export type CustomRouteObject =
 	| CustomIndexRouteObject
 	| CustomNonIndexRouteObject;
 export const routes: CustomRouteObject[] = [
-	
 	{
 		path: "/",
 		errorElement: <ErrorPage />,
@@ -66,39 +63,16 @@ export const routes: CustomRouteObject[] = [
 						path: "courses",
 						element: <CoursesPage></CoursesPage>,
 					},
-					{
+
-						path: "my-courses",
-					},
 					{
 						path: "profiles",
 					},
-					{
+
-						path: "courses",
-						children: [
-							{
-								path: "student",
-								element: (
-									<WithAuth>
-										<StudentCoursesPage />
-									</WithAuth>
-								),
-							},
-							{
-								path: "instructor",
-								element: (
-									<WithAuth>
-										<InstructorCoursesPage />
-									</WithAuth>
-								),
-							},
-						],
-					},
 					// 课程预览页面
 					{
 						path: "coursePreview/:id?",
-						element:<CoursePreview></CoursePreview>
+						element: <CoursePreview></CoursePreview>,
-					}
+					},
-					
 				],
 			},
 			{
@@ -106,20 +80,27 @@ export const routes: CustomRouteObject[] = [
 				children: [
 					{
 						path: ":id?/editor",
-						element: <CourseEditorLayout></CourseEditorLayout>,
+						element: (
+							<WithAuth>
+								<CourseEditorLayout></CourseEditorLayout>
+							</WithAuth>
+						),
 						children: [
 							{
 								index: true,
-								element: <CourseBasicForm></CourseBasicForm>,
+								element: (
+									<WithAuth>
+										<CourseBasicForm></CourseBasicForm>
+									</WithAuth>
+								),
 							},
-							// {
+
-							// 	path: "goal",
-							// 	element: <CourseGoalForm></CourseGoalForm>,
-							// },
 							{
 								path: "content",
 								element: (
+									<WithAuth>
 										<CourseContentForm></CourseContentForm>
+									</WithAuth>
 								),
 							},
 							// {
@@ -146,5 +127,4 @@ export const routes: CustomRouteObject[] = [
 	},
 ];
 
-
 export const router = createBrowserRouter(routes);