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

2.23

This commit is contained in:
Li1304553726 2025-02-24 19:10:38 +08:00
parent 939a313c9e
commit 7ee3838386
9 changed files with 111 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,6 @@
import React, { useState, useCallback, useEffect, useMemo } from 'react'; import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { Typography, Button } from 'antd'; import { Typography, Button } from 'antd';
import { stringToColor, TaxonomySlug, TermDto } from '@nice/common'; import { stringToColor, TaxonomySlug, TermDto } from '@nice/common';
import { api } from '@nice/client';
const { Title, Text } = Typography; const { Title, Text } = Typography;

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

@ -1,6 +1,6 @@
import React, { useState, useMemo, useEffect } from 'react'; import React, { useState, useMemo, useEffect } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Button, Card, Typography, Tag, Progress,Spin } from 'antd'; import { Button, Card, Typography, Tag, Progress, Spin } from 'antd';
import { import {
PlayCircleOutlined, PlayCircleOutlined,
UserOutlined, UserOutlined,
@ -8,36 +8,37 @@ import {
TeamOutlined, TeamOutlined,
StarOutlined, StarOutlined,
ArrowRightOutlined, ArrowRightOutlined,
EyeOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { TaxonomySlug, TermDto } from '@nice/common'; import { TaxonomySlug, TermDto } from '@nice/common';
import { api } from '@nice/client'; import { api } from '@nice/client';
// const {courseId} = useParams();
interface GetTaxonomyProps { interface GetTaxonomyProps {
categories: string[]; categories: string[];
isLoading: boolean; isLoading: boolean;
} }
function useGetTaxonomy({type}) : GetTaxonomyProps { function useGetTaxonomy({ type }): GetTaxonomyProps {
const {data,isLoading} :{data:TermDto[],isLoading:boolean}= api.term.findMany.useQuery({ const { data, isLoading }: { data: TermDto[], isLoading: boolean } = api.term.findMany.useQuery({
where:{ where: {
taxonomy: { taxonomy: {
//TaxonomySlug.CATEGORY //TaxonomySlug.CATEGORY
slug:type slug: type
} }
}, },
include:{ include: {
children :true children: true
}, },
take:10, // 只取前10个 take: 10, // 只取前10个
orderBy: { orderBy: {
createdAt: 'desc', // 按创建时间降序排列 createdAt: 'desc', // 按创建时间降序排列
}, },
}) })
const categories = useMemo(() => { const categories = useMemo(() => {
const allCategories = isLoading ? [] : data?.map((course) => course.name); const allCategories = isLoading ? [] : data?.map((course) => course.name);
return [...Array.from(new Set(allCategories))]; return [...Array.from(new Set(allCategories))];
}, [data]); }, [data]);
return {categories,isLoading} return { categories, isLoading }
} }
@ -63,7 +64,6 @@ interface CoursesSectionProps {
initialVisibleCoursesCount?: number; initialVisibleCoursesCount?: number;
} }
const CoursesSection: React.FC<CoursesSectionProps> = ({ const CoursesSection: React.FC<CoursesSectionProps> = ({
title, title,
description, description,
@ -73,12 +73,20 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
const navigate = useNavigate(); const navigate = useNavigate();
const [selectedCategory, setSelectedCategory] = useState<string>('全部'); const [selectedCategory, setSelectedCategory] = useState<string>('全部');
const [visibleCourses, setVisibleCourses] = useState(initialVisibleCoursesCount); const [visibleCourses, setVisibleCourses] = useState(initialVisibleCoursesCount);
const gateGory : GetTaxonomyProps = useGetTaxonomy({ const gateGory: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.CATEGORY, type: TaxonomySlug.CATEGORY,
}) })
const { data } = api.post.findMany.useQuery({
take: 10,
}
)
useEffect(() => { useEffect(() => {
console.log(data)
}, [data])
const handleClick = (course: Course) => {
navigate(`/courses?courseId=${course.id}/detail`);
}
})
const filteredCourses = useMemo(() => { const filteredCourses = useMemo(() => {
return selectedCategory === '全部' return selectedCategory === '全部'
? courses ? courses
@ -86,76 +94,74 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
}, [selectedCategory, courses]); }, [selectedCategory, courses]);
const displayedCourses = filteredCourses.slice(0, visibleCourses); const displayedCourses = filteredCourses.slice(0, visibleCourses);
return ( return (
<section className="relative py-16 overflow-hidden"> <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-4 relative"> <div className="max-w-screen-2xl mx-auto px-6 relative">
<div className="flex justify-between items-end mb-12"> <div className="flex justify-between items-end mb-16">
<div> <div>
<Title <Title
level={2} 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}
</Title> </Title>
<Text type="secondary" className="text-xl font-light"> <Text type="secondary" className="text-xl font-light text-gray-600">
{description} {description}
</Text> </Text>
</div> </div>
</div> </div>
<div className="mb-8 flex flex-wrap gap-3"> <div className="mb-12 flex flex-wrap gap-4">
{gateGory.isLoading ? <Spin className='m-3'/> : {gateGory.isLoading ? <Spin className='m-3' /> :
( (
<> <>
<Tag <Tag
color={selectedCategory === "全部" ? 'blue' : 'default'} color={selectedCategory === "全部" ? 'blue' : 'default'}
onClick={() => setSelectedCategory("全部")} onClick={() => setSelectedCategory("全部")}
className={`px-4 py-2 text-base cursor-pointer hover:scale-105 transform transition-all duration-300 ${selectedCategory === "全部" className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === "全部"
? 'shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)]' ? 'bg-blue-600 text-white shadow-lg'
: 'hover:shadow-md' : 'bg-white text-gray-600 hover:bg-gray-100'
}`} }`}
>全部</Tag> >全部</Tag>
{ {
gateGory.categories.map((category) => ( gateGory.categories.map((category) => (
<Tag <Tag
key={category} key={category}
color={selectedCategory === category ? 'blue' : 'default'} color={selectedCategory === category ? 'blue' : 'default'}
onClick={() => setSelectedCategory(category)} onClick={() => setSelectedCategory(category)}
className={`px-4 py-2 text-base cursor-pointer hover:scale-105 transform transition-all duration-300 ${selectedCategory === category className={`px-6 py-2 text-base cursor-pointer rounded-full transition-all duration-300 ${selectedCategory === category
? 'shadow-[0_2px_8px_-4px_rgba(59,130,246,0.5)]' ? 'bg-blue-600 text-white shadow-lg'
: 'hover:shadow-md' : 'bg-white text-gray-600 hover:bg-gray-100'
}`} }`}
> >
{category} {category}
</Tag> </Tag>
)) ))
} }
</> </>
) )
} }
</div> </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) => ( {displayedCourses.map((course) => (
<Card <Card
onClick={() => handleClick(course)}
key={course.id} key={course.id}
hoverable hoverable
className="group overflow-hidden rounded-2xl border-0 bg-white/70 backdrop-blur-sm className="group overflow-hidden rounded-2xl border border-gray-200 bg-white
shadow-[0_10px_40px_-15px_rgba(0,0,0,0.1)] hover:shadow-[0_20px_50px_-15px_rgba(0,0,0,0.15)] shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
transition-all duration-700 ease-out transform hover:-translate-y-1 will-change-transform"
cover={ 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 <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})` }} 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" /> <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-500 ease-out transform group-hover:scale-110 drop-shadow-lg" /> <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 && ( {course.progress > 0 && (
<div className="absolute bottom-0 left-0 right-0 backdrop-blur-md bg-black/20"> <div className="absolute bottom-0 left-0 right-0 backdrop-blur-md bg-black/30">
<Progress {/* <Progress
percent={course.progress} percent={course.progress}
showInfo={false} showInfo={false}
strokeColor={{ strokeColor={{
@ -163,17 +169,17 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
to: '#60a5fa', to: '#60a5fa',
}} }}
className="m-0" className="m-0"
/> /> */}
</div> </div>
)} )}
</div> </div>
} }
> >
<div className="px-2"> <div className="px-4">
<div className="flex gap-2 mb-4"> <div className="flex gap-2 mb-4">
<Tag <Tag
color="blue" 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} {course.category}
</Tag> </Tag>
@ -185,35 +191,28 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
? 'blue' ? 'blue'
: 'purple' : '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} {course.level}
</Tag> </Tag>
</div> </div>
<Title <Title
level={4} 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> </Title>
<div className="flex items-center mb-4 transition-all duration-300 group-hover:text-blue-500">
<UserOutlined className="mr-2 text-blue-500" /> <div className="flex items-center mb-4 p-2 rounded-lg transition-all duration-300 hover:bg-blue-50 group">
<Text className="text-gray-600 font-medium group-hover:text-blue-500"> <TeamOutlined className="text-blue-500 text-lg transform group-hover:scale-110 transition-transform duration-300" />
{course.instructor} <div className="ml-2 flex items-center flex-grow">
</Text> <Text className="font-medium text-blue-500 hover:text-blue-600 transition-colors duration-300">
</div> {course.instructor}
<div className="flex justify-between items-center mb-4 text-gray-500 text-sm"> </Text>
<span className="flex items-center"> </div>
<ClockCircleOutlined className="mr-1.5" /> <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">
{course.duration} <EyeOutlined className="ml-1.5 text-sm" />
</span> <span className="text-xs font-medium">观看次数{course.progress}%</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}
</span> </span>
</div> </div>
<div className="pt-4 border-t border-gray-100 text-center"> <div className="pt-4 border-t border-gray-100 text-center">
@ -226,25 +225,25 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
立即学习 立即学习
</Button> </Button>
</div> </div>
</div> </div>
</Card> </Card>
))} ))}
</div> </div>
{filteredCourses.length >= visibleCourses && ( {filteredCourses.length >= visibleCourses && (
<div className=' flex items-center gap-4 justify-between mt-6'> <div className='flex items-center gap-4 justify-between mt-12'>
<div className='h-[1px] flex-grow bg-gray-200'></div> <div className='h-[1px] flex-grow bg-gradient-to-r from-transparent via-gray-300 to-transparent'></div>
<div className="flex justify-end "> <div className="flex justify-end">
<div <Button
type="link"
onClick={() => navigate('/courses')} 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"
> >
查看更多 查看更多
<ArrowRightOutlined />
</div> </Button>
</div> </div>
</div> </div>
)} )}
</div> </div>

10
apps/web/src/app/main/home/page.tsx
View File

@ -2,6 +2,8 @@ import HeroSection from './components/HeroSection';
import CategorySection from './components/CategorySection'; import CategorySection from './components/CategorySection';
import CoursesSection from './components/CoursesSection'; import CoursesSection from './components/CoursesSection';
import FeaturedTeachersSection from './components/FeaturedTeachersSection'; import FeaturedTeachersSection from './components/FeaturedTeachersSection';
import { useEffect } from 'react';
import { api } from '@nice/client'
const HomePage = () => { const HomePage = () => {
const mockCourses = [ const mockCourses = [
{ {
@ -13,7 +15,7 @@ const HomePage = () => {
level: '入门', level: '入门',
duration: '36小时', duration: '36小时',
category: '编程语言', category: '编程语言',
progress: 0, progress: 16,
thumbnail: '/images/course1.jpg', thumbnail: '/images/course1.jpg',
}, },
{ {
@ -49,7 +51,7 @@ const HomePage = () => {
level: '高级', level: '高级',
duration: '56小时', duration: '56小时',
category: '编程语言', category: '编程语言',
progress: 0, progress: 15,
thumbnail: '/images/course4.jpg', thumbnail: '/images/course4.jpg',
}, },
{ {
@ -97,15 +99,13 @@ const HomePage = () => {
level: '中级', level: '中级',
duration: '40小时', duration: '40小时',
category: '移动开发', category: '移动开发',
progress: 0, progress: 70,
thumbnail: '/images/course8.jpg', thumbnail: '/images/course8.jpg',
}, },
]; ];
return ( return (
<div className="min-h-screen"> <div className="min-h-screen">
<HeroSection /> <HeroSection />
<CoursesSection <CoursesSection
title="推荐课程" title="推荐课程"
description="最受欢迎的精品课程，助你快速成长" description="最受欢迎的精品课程，助你快速成长"

1
apps/web/src/components/models/course/card/CourseStats.tsx
View File

@ -6,7 +6,6 @@ interface CourseStatsProps {
completionRate?: number; completionRate?: number;
totalDuration?: number; totalDuration?: number;
} }
export const CourseStats = ({ export const CourseStats = ({
averageRating, averageRating,
numberOfReviews, numberOfReviews,

2
apps/web/src/hooks/useLocalSetting.ts
View File

@ -9,7 +9,7 @@ export function useLocalSettings() {
() => getBaseUrl("http", parseInt(env.SERVER_PORT)), () => getBaseUrl("http", parseInt(env.SERVER_PORT)),
[getBaseUrl] [getBaseUrl]
); );
const websocketUrl = useMemo(() => getBaseUrl("ws", 3000), [getBaseUrl]); const websocketUrl = useMemo(() => parseInt(env.SERVER_PORT), [getBaseUrl]);
const checkIsTusUrl = useCallback( const checkIsTusUrl = useCallback(
(url: string) => { (url: string) => {
return url.startsWith(tusUrl); return url.startsWith(tusUrl);

3
apps/web/src/routes/index.tsx
View File

@ -3,6 +3,7 @@ import {
IndexRouteObject, IndexRouteObject,
Link, Link,
NonIndexRouteObject, NonIndexRouteObject,
useParams,
} from "react-router-dom"; } from "react-router-dom";
import ErrorPage from "../app/error"; import ErrorPage from "../app/error";
import WithAuth from "../components/utils/with-auth"; import WithAuth from "../components/utils/with-auth";
@ -40,6 +41,7 @@ export type CustomRouteObject =
| CustomIndexRouteObject | CustomIndexRouteObject
| CustomNonIndexRouteObject; | CustomNonIndexRouteObject;
export const routes: CustomRouteObject[] = [ export const routes: CustomRouteObject[] = [
{ {
path: "/", path: "/",
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
@ -144,4 +146,5 @@ export const routes: CustomRouteObject[] = [
}, },
]; ];
export const router = createBrowserRouter(routes); export const router = createBrowserRouter(routes);

2
apps/web/src/utils/axios-client.ts
View File

@ -1,6 +1,6 @@
import axios from 'axios'; import axios from 'axios';
import { env } from '../env'; 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({ const apiClient = axios.create({
baseURL: BASE_URL, baseURL: BASE_URL,
// withCredentials: true, // withCredentials: true,

1
config/nginx/conf.d/web.conf
View File

@ -101,6 +101,7 @@ server {
internal; internal;
# 代理到认证服务 # 代理到认证服务
proxy_pass http://host.docker.internal:3000/auth/file; proxy_pass http://host.docker.internal:3000/auth/file;
# 请求优化：不传递请求体 # 请求优化：不传递请求体
proxy_pass_request_body off; proxy_pass_request_body off;
proxy_set_header Content-Length ""; proxy_set_header Content-Length "";

1
packages/common/prisma/schema.prisma
View File

@ -268,7 +268,6 @@ model Message {
visits Visit[] visits Visit[]
createdAt DateTime @default(now()) @map("created_at") createdAt DateTime @default(now()) @map("created_at")
updatedAt DateTime? @updatedAt @map("updated_at") updatedAt DateTime? @updatedAt @map("updated_at")
@@index([type, createdAt]) @@index([type, createdAt])
@@map("message") @@map("message")
} }