diff --git a/apps/web/src/app/main/home/components/CoursesSection.tsx b/apps/web/src/app/main/home/components/CoursesSection.tsx index 904f758..c6a2969 100755 --- a/apps/web/src/app/main/home/components/CoursesSection.tsx +++ b/apps/web/src/app/main/home/components/CoursesSection.tsx @@ -56,11 +56,11 @@ interface Course { progress: number; thumbnail: string; } - interface CoursesSectionProps { title: string; description: string; courses: Course[]; + isLoading:boolean initialVisibleCoursesCount?: number; } @@ -68,6 +68,7 @@ const CoursesSection: React.FC = ({ title, description, courses, + isLoading, initialVisibleCoursesCount = 8, }) => { const navigate = useNavigate(); @@ -76,15 +77,31 @@ const CoursesSection: React.FC = ({ const gateGory: GetTaxonomyProps = useGetTaxonomy({ type: TaxonomySlug.CATEGORY, }) - const { data } = api.post.findMany.useQuery({ - take: 8, - } - ) - useEffect(() => { - console.log(data,'成功') - }, [data]) + // const { data } = api.post.findMany.useQuery({ + // where: {}, // 必选参数 + // include: { // 关联查询 + // instructors: true + // }, + // orderBy: { // 排序规则 + // createdAt: 'desc' + // }, + // take: 8 + // }) + // useEffect(() => { + // // 添加空值保护 + // if (data && data.length > 0) { + // console.log('有效数据:', data) + // // 执行后续操作 + // } else { + // console.log('无数据或加载中') + // } + // }, [data]) + // const formatted = data?.map(course => ({ + // id: course.id, + // title: course.title + // })); const handleClick = (course: Course) => { - navigate(`/courses?courseId=${course.id}/detail`); + navigate(`/course?courseId=${course.id}/detail`); } const filteredCourses = useMemo(() => { @@ -93,7 +110,7 @@ const CoursesSection: React.FC = ({ : courses.filter((course) => course.category === selectedCategory); }, [selectedCategory, courses]); - const displayedCourses = filteredCourses.slice(0, visibleCourses); + const displayedCourses = isLoading ? [] : filteredCourses.slice(0, visibleCourses); return (
@@ -235,7 +252,7 @@ const CoursesSection: React.FC = ({ ))}
- {filteredCourses.length >= visibleCourses && ( + {filteredCourses?.length >= visibleCourses && (
diff --git a/apps/web/src/app/main/home/page.tsx b/apps/web/src/app/main/home/page.tsx index 8f59ac7..3a7b2af 100755 --- a/apps/web/src/app/main/home/page.tsx +++ b/apps/web/src/app/main/home/page.tsx @@ -3,123 +3,161 @@ import CategorySection from './components/CategorySection'; import CoursesSection from './components/CoursesSection'; import FeaturedTeachersSection from './components/FeaturedTeachersSection'; import { api } from '@nice/client'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; +interface Courses{ + id: number; + title: string; + instructor: string; + students: number; + rating: number; + level: string; + duration: string; + category: string; + progress: number; + thumbnail: string; +} const HomePage = () => { - const mockCourses = [ - { - id: 1, - title: 'Python 零基础入门', - instructor: '张教授', - students: 12000, - rating: 4.8, - level: '入门', - duration: '36小时', - category: '编程语言', - progress: 16, - thumbnail: '/images/course1.jpg', + // const mockCourses = [ + // { + // id: 1, + // title: 'Python 零基础入门', + // instructor: '张教授', + // students: 12000, + // rating: 4.8, + // level: '入门', + // duration: '36小时', + // category: '编程语言', + // progress: 16, + // thumbnail: '/images/course1.jpg', + // }, + // { + // id: 2, + // title: '数据结构与算法', + // instructor: '李教授', + // students: 8500, + // rating: 4.9, + // level: '进阶', + // duration: '48小时', + // category: '计算机基础', + // progress: 35, + // thumbnail: '/images/course2.jpg', + // }, + // { + // id: 3, + // title: '前端开发实战', + // instructor: '王教授', + // students: 10000, + // rating: 4.7, + // level: '中级', + // duration: '42小时', + // category: '前端开发', + // progress: 68, + // thumbnail: '/images/course3.jpg', + // }, + // { + // id: 4, + // title: 'Java企业级开发', + // instructor: '刘教授', + // students: 9500, + // rating: 4.6, + // level: '高级', + // duration: '56小时', + // category: '编程语言', + // progress: 15, + // thumbnail: '/images/course4.jpg', + // }, + // { + // id: 5, + // title: '人工智能基础', + // instructor: '陈教授', + // students: 11000, + // rating: 4.9, + // level: '中级', + // duration: '45小时', + // category: '人工智能', + // progress: 20, + // thumbnail: '/images/course5.jpg', + // }, + // { + // id: 6, + // title: '大数据分析', + // instructor: '赵教授', + // students: 8000, + // rating: 4.8, + // level: '进阶', + // duration: '50小时', + // category: '数据科学', + // progress: 45, + // thumbnail: '/images/course6.jpg', + // }, + // { + // id: 7, + // title: '云计算实践', + // instructor: '孙教授', + // students: 7500, + // rating: 4.7, + // level: '高级', + // duration: '48小时', + // category: '云计算', + // progress: 15, + // thumbnail: '/images/course7.jpg', + // }, + // { + // id: 8, + // title: '移动应用开发', + // instructor: '周教授', + // students: 9000, + // rating: 4.8, + // level: '中级', + // duration: '40小时', + // category: '移动开发', + // progress: 70, + // thumbnail: '/images/course8.jpg', + // }, + // ]; + const { data ,isLoading}: { data: Courses[] , isLoading:boolean} = api.post.findMany.useQuery({ + where: {}, + include: { + instructors: true, }, - { - id: 2, - title: '数据结构与算法', - instructor: '李教授', - students: 8500, - rating: 4.9, - level: '进阶', - duration: '48小时', - category: '计算机基础', - progress: 35, - thumbnail: '/images/course2.jpg', + orderBy: { + createdAt: 'desc' // 按创建时间降序排列 }, - { - id: 3, - title: '前端开发实战', - instructor: '王教授', - students: 10000, - rating: 4.7, - level: '中级', - duration: '42小时', - category: '前端开发', - progress: 68, - thumbnail: '/images/course3.jpg', - }, - { - id: 4, - title: 'Java企业级开发', - instructor: '刘教授', - students: 9500, - rating: 4.6, - level: '高级', - duration: '56小时', - category: '编程语言', - progress: 15, - thumbnail: '/images/course4.jpg', - }, - { - id: 5, - title: '人工智能基础', - instructor: '陈教授', - students: 11000, - rating: 4.9, - level: '中级', - duration: '45小时', - category: '人工智能', - progress: 20, - thumbnail: '/images/course5.jpg', - }, - { - id: 6, - title: '大数据分析', - instructor: '赵教授', - students: 8000, - rating: 4.8, - level: '进阶', - duration: '50小时', - category: '数据科学', - progress: 45, - thumbnail: '/images/course6.jpg', - }, - { - id: 7, - title: '云计算实践', - instructor: '孙教授', - students: 7500, - rating: 4.7, - level: '高级', - duration: '48小时', - category: '云计算', - progress: 15, - thumbnail: '/images/course7.jpg', - }, - { - id: 8, - title: '移动应用开发', - instructor: '周教授', - students: 9000, - rating: 4.8, - level: '中级', - duration: '40小时', - category: '移动开发', - progress: 70, - thumbnail: '/images/course8.jpg', - }, - ]; - return ( -
- - - {/* { + if (data) { + console.log('mockCourses data:', data); + } + }, [data]); + + // 数据处理逻辑 +// 修正依赖数组 +return ( +
+ + + {/* {formattedCourses.map((course)=>{ + return ( + <> + course.title + + ) + })} */} + {/* */} - - {/* */} -
- ); + + {/* */} +
+); }; export default HomePage; \ No newline at end of file diff --git a/packages/client/src/api/hooks/useAppConfig.ts b/packages/client/src/api/hooks/useAppConfig.ts index 0b00ffd..5be578e 100755 --- a/packages/client/src/api/hooks/useAppConfig.ts +++ b/packages/client/src/api/hooks/useAppConfig.ts @@ -3,15 +3,15 @@ import { AppConfigSlug, BaseSetting } from "@nice/common"; import { useCallback, useEffect, useMemo, useState } from "react"; export function useAppConfig() { - const utils = api.useUtils() + const utils = api.useUtils(); const [baseSetting, setBaseSetting] = useState(); const { data, isLoading }: { data: any; isLoading: boolean } = api.app_config.findFirst.useQuery({ - where: { slug: AppConfigSlug.BASE_SETTING } + where: { slug: AppConfigSlug.BASE_SETTING }, }); const handleMutationSuccess = useCallback(() => { - utils.app_config.invalidate() + utils.app_config.invalidate(); }, [utils]); // Use the generic success handler in mutations @@ -28,7 +28,6 @@ export function useAppConfig() { if (data?.meta) { setBaseSetting(JSON.parse(data?.meta)); } - }, [data, isLoading]); const splashScreen = useMemo(() => { return baseSetting?.appConfig?.splashScreen; @@ -36,8 +35,10 @@ export function useAppConfig() { const devDept = useMemo(() => { return baseSetting?.appConfig?.devDept; }, [baseSetting]); + const slides = useMemo(() => { + return baseSetting?.appConfig?.slides || []; + }, [baseSetting]); return { - create, deleteMany, update, @@ -45,5 +46,6 @@ export function useAppConfig() { splashScreen, devDept, isLoading, + slides, }; } diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index 084316a..2d6a2ef 100755 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -43,6 +43,7 @@ export interface BaseSetting { appConfig?: { splashScreen?: string; devDept?: string; + slides?: []; }; } export type RowModelResult = {