2.23
This commit is contained in:
parent
939a313c9e
commit
7ee3838386
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useState, useCallback, useEffect, useMemo } from 'react';
|
||||
import { Typography, Button } from 'antd';
|
||||
import { stringToColor, TaxonomySlug, TermDto } from '@nice/common';
|
||||
import { api } from '@nice/client';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React, { useState, useMemo, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Button, Card, Typography, Tag, Progress,Spin } from 'antd';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import { Button, Card, Typography, Tag, Progress, Spin } from 'antd';
|
||||
import {
|
||||
PlayCircleOutlined,
|
||||
UserOutlined,
|
||||
|
|
@ -8,36 +8,37 @@ import {
|
|||
TeamOutlined,
|
||||
StarOutlined,
|
||||
ArrowRightOutlined,
|
||||
EyeOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { TaxonomySlug, TermDto } from '@nice/common';
|
||||
import { api } from '@nice/client';
|
||||
|
||||
// const {courseId} = useParams();
|
||||
interface GetTaxonomyProps {
|
||||
categories: string[];
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
function useGetTaxonomy({type}) : GetTaxonomyProps {
|
||||
const {data,isLoading} :{data:TermDto[],isLoading:boolean}= api.term.findMany.useQuery({
|
||||
where:{
|
||||
taxonomy: {
|
||||
//TaxonomySlug.CATEGORY
|
||||
slug:type
|
||||
}
|
||||
},
|
||||
include:{
|
||||
children :true
|
||||
},
|
||||
take:10, // 只取前10个
|
||||
orderBy: {
|
||||
createdAt: 'desc', // 按创建时间降序排列
|
||||
},
|
||||
function useGetTaxonomy({ type }): GetTaxonomyProps {
|
||||
const { data, isLoading }: { data: TermDto[], isLoading: boolean } = api.term.findMany.useQuery({
|
||||
where: {
|
||||
taxonomy: {
|
||||
//TaxonomySlug.CATEGORY
|
||||
slug: type
|
||||
}
|
||||
},
|
||||
include: {
|
||||
children: true
|
||||
},
|
||||
take: 10, // 只取前10个
|
||||
orderBy: {
|
||||
createdAt: 'desc', // 按创建时间降序排列
|
||||
},
|
||||
})
|
||||
const categories = useMemo(() => {
|
||||
const allCategories = isLoading ? [] : data?.map((course) => course.name);
|
||||
return [...Array.from(new Set(allCategories))];
|
||||
const allCategories = isLoading ? [] : data?.map((course) => course.name);
|
||||
return [...Array.from(new Set(allCategories))];
|
||||
}, [data]);
|
||||
return {categories,isLoading}
|
||||
return { categories, isLoading }
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -63,7 +64,6 @@ interface CoursesSectionProps {
|
|||
initialVisibleCoursesCount?: number;
|
||||
}
|
||||
|
||||
|
||||
const CoursesSection: React.FC<CoursesSectionProps> = ({
|
||||
title,
|
||||
description,
|
||||
|
|
@ -73,12 +73,20 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
const navigate = useNavigate();
|
||||
const [selectedCategory, setSelectedCategory] = useState<string>('全部');
|
||||
const [visibleCourses, setVisibleCourses] = useState(initialVisibleCoursesCount);
|
||||
const gateGory : GetTaxonomyProps = useGetTaxonomy({
|
||||
const gateGory: GetTaxonomyProps = useGetTaxonomy({
|
||||
type: TaxonomySlug.CATEGORY,
|
||||
})
|
||||
const { data } = api.post.findMany.useQuery({
|
||||
take: 10,
|
||||
}
|
||||
)
|
||||
useEffect(() => {
|
||||
|
||||
})
|
||||
console.log(data)
|
||||
}, [data])
|
||||
const handleClick = (course: Course) => {
|
||||
navigate(`/courses?courseId=${course.id}/detail`);
|
||||
}
|
||||
|
||||
const filteredCourses = useMemo(() => {
|
||||
return selectedCategory === '全部'
|
||||
? courses
|
||||
|
|
@ -86,76 +94,74 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
}, [selectedCategory, courses]);
|
||||
|
||||
const displayedCourses = filteredCourses.slice(0, visibleCourses);
|
||||
|
||||
return (
|
||||
<section className="relative py-16 overflow-hidden">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 relative">
|
||||
<div className="flex justify-between items-end mb-12">
|
||||
<section className="relative py-20 overflow-hidden bg-gradient-to-b from-gray-50 to-white">
|
||||
<div className="max-w-screen-2xl mx-auto px-6 relative">
|
||||
<div className="flex justify-between items-end mb-16">
|
||||
<div>
|
||||
<Title
|
||||
level={2}
|
||||
className="font-bold text-5xl mb-6 bg-gradient-to-r from-gray-900 via-blue-600 to-gray-800 bg-clip-text text-transparent motion-safe:animate-gradient-x"
|
||||
className="font-bold text-5xl mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent"
|
||||
>
|
||||
{title}
|
||||
</Title>
|
||||
<Text type="secondary" className="text-xl font-light">
|
||||
<Text type="secondary" className="text-xl font-light text-gray-600">
|
||||
{description}
|
||||
</Text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-8 flex flex-wrap gap-3">
|
||||
{gateGory.isLoading ? <Spin className='m-3'/> :
|
||||
<div className="mb-12 flex flex-wrap gap-4">
|
||||
{gateGory.isLoading ? <Spin className='m-3' /> :
|
||||
(
|
||||
<>
|
||||
<Tag
|
||||
color={selectedCategory === "全部" ? 'blue' : 'default'}
|
||||
onClick={() => setSelectedCategory("全部")}
|
||||
className={`px-4 py-2 text-base cursor-pointer hover:scale-105 transform transition-all duration-300 ${selectedCategory === "全部"
|
||||
? 'shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)]'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
>全部</Tag>
|
||||
{
|
||||
gateGory.categories.map((category) => (
|
||||
<Tag
|
||||
key={category}
|
||||
color={selectedCategory === category ? 'blue' : 'default'}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className={`px-4 py-2 text-base cursor-pointer hover:scale-105 transform transition-all duration-300 ${selectedCategory === category
|
||||
? 'shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)]'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
>
|
||||
{category}
|
||||
</Tag>
|
||||
))
|
||||
}
|
||||
<Tag
|
||||
color={selectedCategory === "全部" ? 'blue' : 'default'}
|
||||
onClick={() => setSelectedCategory("全部")}
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === "全部"
|
||||
? 'bg-blue-600 text-white shadow-lg'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>全部</Tag>
|
||||
{
|
||||
gateGory.categories.map((category) => (
|
||||
<Tag
|
||||
key={category}
|
||||
color={selectedCategory === category ? 'blue' : 'default'}
|
||||
onClick={() => setSelectedCategory(category)}
|
||||
className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
|
||||
? 'bg-blue-600 text-white shadow-lg'
|
||||
: 'bg-white text-gray-600 hover:bg-gray-100'
|
||||
}`}
|
||||
>
|
||||
{category}
|
||||
</Tag>
|
||||
))
|
||||
}
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{displayedCourses.map((course) => (
|
||||
<Card
|
||||
onClick={() => handleClick(course)}
|
||||
key={course.id}
|
||||
hoverable
|
||||
className="group overflow-hidden rounded-2xl border-0 bg-white/70 backdrop-blur-sm
|
||||
shadow-[0_10px_40px_-15px_rgba(0,0,0,0.1)] hover:shadow-[0_20px_50px_-15px_rgba(0,0,0,0.15)]
|
||||
transition-all duration-700 ease-out transform hover:-translate-y-1 will-change-transform"
|
||||
className="group overflow-hidden rounded-2xl border border-gray-200 bg-white
|
||||
shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
|
||||
cover={
|
||||
<div className="relative h-48 bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden">
|
||||
<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-1000 ease-out group-hover:scale-110"
|
||||
className="absolute inset-0 bg-cover bg-center transform transition-all duration-700 ease-out group-hover:scale-110"
|
||||
style={{ backgroundImage: `url(${course.thumbnail})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-black/60 via-black/40 to-transparent opacity-60 group-hover:opacity-40 transition-opacity duration-700" />
|
||||
<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-500 ease-out transform group-hover:scale-110 drop-shadow-lg" />
|
||||
<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" />
|
||||
{course.progress > 0 && (
|
||||
<div className="absolute bottom-0 left-0 right-0 backdrop-blur-md bg-black/20">
|
||||
<Progress
|
||||
<div className="absolute bottom-0 left-0 right-0 backdrop-blur-md bg-black/30">
|
||||
{/* <Progress
|
||||
percent={course.progress}
|
||||
showInfo={false}
|
||||
strokeColor={{
|
||||
|
|
@ -163,17 +169,17 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
to: '#60a5fa',
|
||||
}}
|
||||
className="m-0"
|
||||
/>
|
||||
/> */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="px-2">
|
||||
<div className="px-4">
|
||||
<div className="flex gap-2 mb-4">
|
||||
<Tag
|
||||
color="blue"
|
||||
className="px-3 py-1 rounded-full border-0 shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)] transition-all duration-300 hover:shadow-[0_4px_12px_-4px_rgba(59,130,246,0.6)]"
|
||||
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"
|
||||
>
|
||||
{course.category}
|
||||
</Tag>
|
||||
|
|
@ -185,35 +191,28 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
? 'blue'
|
||||
: 'purple'
|
||||
}
|
||||
className="px-3 py-1 rounded-full border-0 shadow-sm transition-all duration-300 hover:shadow-md"
|
||||
className="px-3 py-1 rounded-full border-0"
|
||||
>
|
||||
{course.level}
|
||||
</Tag>
|
||||
</div>
|
||||
<Title
|
||||
level={4}
|
||||
className="mb-4 line-clamp-2 font-bold leading-snug transition-colors duration-300 group-hover:text-blue-600"
|
||||
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"
|
||||
>
|
||||
{course.title}
|
||||
<button > {course.title}</button>
|
||||
</Title>
|
||||
<div className="flex items-center mb-4 transition-all duration-300 group-hover:text-blue-500">
|
||||
<UserOutlined className="mr-2 text-blue-500" />
|
||||
<Text className="text-gray-600 font-medium group-hover:text-blue-500">
|
||||
{course.instructor}
|
||||
</Text>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-4 text-gray-500 text-sm">
|
||||
<span className="flex items-center">
|
||||
<ClockCircleOutlined className="mr-1.5" />
|
||||
{course.duration}
|
||||
</span>
|
||||
<span className="flex items-center">
|
||||
<TeamOutlined className="mr-1.5" />
|
||||
{course.students.toLocaleString()}
|
||||
</span>
|
||||
<span className="flex items-center text-yellow-500">
|
||||
<StarOutlined className="mr-1.5" />
|
||||
{course.rating}
|
||||
|
||||
<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">
|
||||
{course.instructor}
|
||||
</Text>
|
||||
</div>
|
||||
<span className="flex items-center bg-blue-100 px-2 py-1 rounded-full text-blue-600 hover:bg-blue-200 transition-colors duration-300">
|
||||
<EyeOutlined className="ml-1.5 text-sm" />
|
||||
<span className="text-xs font-medium">观看次数{course.progress}%</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="pt-4 border-t border-gray-100 text-center">
|
||||
|
|
@ -226,25 +225,25 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
|
|||
立即学习
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredCourses.length >= visibleCourses && (
|
||||
<div className=' flex items-center gap-4 justify-between mt-6'>
|
||||
<div className='h-[1px] flex-grow bg-gray-200'></div>
|
||||
<div className="flex justify-end ">
|
||||
<div
|
||||
<div className='flex items-center gap-4 justify-between mt-12'>
|
||||
<div className='h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent'></div>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => navigate('/courses')}
|
||||
className="cursor-pointer tracking-widest text-gray-500 hover:text-primary font-medium flex items-center gap-2 transition-all duration-300 ease-in-out"
|
||||
className="flex items-center gap-2 text-gray-600 hover:text-blue-600 font-medium transition-colors duration-300"
|
||||
>
|
||||
查看更多
|
||||
|
||||
</div>
|
||||
|
||||
<ArrowRightOutlined />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import HeroSection from './components/HeroSection';
|
|||
import CategorySection from './components/CategorySection';
|
||||
import CoursesSection from './components/CoursesSection';
|
||||
import FeaturedTeachersSection from './components/FeaturedTeachersSection';
|
||||
import { useEffect } from 'react';
|
||||
import { api } from '@nice/client'
|
||||
const HomePage = () => {
|
||||
const mockCourses = [
|
||||
{
|
||||
|
|
@ -13,7 +15,7 @@ const HomePage = () => {
|
|||
level: '入门',
|
||||
duration: '36小时',
|
||||
category: '编程语言',
|
||||
progress: 0,
|
||||
progress: 16,
|
||||
thumbnail: '/images/course1.jpg',
|
||||
},
|
||||
{
|
||||
|
|
@ -49,7 +51,7 @@ const HomePage = () => {
|
|||
level: '高级',
|
||||
duration: '56小时',
|
||||
category: '编程语言',
|
||||
progress: 0,
|
||||
progress: 15,
|
||||
thumbnail: '/images/course4.jpg',
|
||||
},
|
||||
{
|
||||
|
|
@ -97,15 +99,13 @@ const HomePage = () => {
|
|||
level: '中级',
|
||||
duration: '40小时',
|
||||
category: '移动开发',
|
||||
progress: 0,
|
||||
progress: 70,
|
||||
thumbnail: '/images/course8.jpg',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<HeroSection />
|
||||
|
||||
<CoursesSection
|
||||
title="推荐课程"
|
||||
description="最受欢迎的精品课程，助你快速成长"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ interface CourseStatsProps {
|
|||
completionRate?: number;
|
||||
totalDuration?: number;
|
||||
}
|
||||
|
||||
export const CourseStats = ({
|
||||
averageRating,
|
||||
numberOfReviews,
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export function useLocalSettings() {
|
|||
() => getBaseUrl("http", parseInt(env.SERVER_PORT)),
|
||||
[getBaseUrl]
|
||||
);
|
||||
const websocketUrl = useMemo(() => getBaseUrl("ws", 3000), [getBaseUrl]);
|
||||
const websocketUrl = useMemo(() => parseInt(env.SERVER_PORT), [getBaseUrl]);
|
||||
const checkIsTusUrl = useCallback(
|
||||
(url: string) => {
|
||||
return url.startsWith(tusUrl);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import {
|
|||
IndexRouteObject,
|
||||
Link,
|
||||
NonIndexRouteObject,
|
||||
useParams,
|
||||
} from "react-router-dom";
|
||||
import ErrorPage from "../app/error";
|
||||
import WithAuth from "../components/utils/with-auth";
|
||||
|
|
@ -40,6 +41,7 @@ export type CustomRouteObject =
|
|||
| CustomIndexRouteObject
|
||||
| CustomNonIndexRouteObject;
|
||||
export const routes: CustomRouteObject[] = [
|
||||
|
||||
{
|
||||
path: "/",
|
||||
errorElement: <ErrorPage />,
|
||||
|
|
@ -144,4 +146,5 @@ export const routes: CustomRouteObject[] = [
|
|||
},
|
||||
];
|
||||
|
||||
|
||||
export const router = createBrowserRouter(routes);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import axios from 'axios';
|
||||
import { env } from '../env';
|
||||
const BASE_URL = `http://${env.SERVER_IP}:3000`
|
||||
const BASE_URL = `http://${env.SERVER_IP}:${env.SERVER_PORT}`
|
||||
const apiClient = axios.create({
|
||||
baseURL: BASE_URL,
|
||||
// withCredentials: true,
|
||||
|
|
|
|||
|
|
@ -101,6 +101,7 @@ server {
|
|||
internal;
|
||||
# 代理到认证服务
|
||||
proxy_pass http://host.docker.internal:3000/auth/file;
|
||||
|
||||
# 请求优化：不传递请求体
|
||||
proxy_pass_request_body off;
|
||||
proxy_set_header Content-Length "";
|
||||
|
|
|
|||
|
|
@ -268,7 +268,6 @@ model Message {
|
|||
visits Visit[]
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime? @updatedAt @map("updated_at")
|
||||
|
||||
@@index([type, createdAt])
|
||||
@@map("message")
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue