qiuchenfan
/
origin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of http://113.45.157.195:3003/insiinc/re-mooc

This commit is contained in:
ditiqi 2025-02-25 12:32:23 +08:00
parent b36d90d011 9db19fa02a
commit 33da2c8a72
7 changed files with 82 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/server/src/auth/utils.ts
View File

@ -155,6 +155,7 @@ export class UserProfileService {
where: { id },
select: {
id: true,
avatar:true,
deptId: true,
department: true,
domainId: true,

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

@ -84,9 +84,6 @@ const CategorySection = () => {
// description: term.description
// })) || [];
// },[data])
const handleMouseEnter = useCallback((index: number) => {
setHoveredIndex(index);
}, []);

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

@ -1,6 +1,6 @@
import React, { useState, useMemo, useEffect } from 'react';
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
import { Button, Card, Typography, Tag, Progress, Spin } from 'antd';
import { Button, Card, Typography, Tag, Progress, Spin, Empty } from 'antd';
import {
PlayCircleOutlined,
UserOutlined,
@ -10,14 +10,13 @@ import {
ArrowRightOutlined,
EyeOutlined,
} from '@ant-design/icons';
import { TaxonomySlug, TermDto } from '@nice/common';
import { CourseDto, 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: {
@ -40,6 +39,26 @@ function useGetTaxonomy({ type }): GetTaxonomyProps {
}, [data]);
return { categories, isLoading }
}
// 不同分类跳转
function useFetchCoursesByCategory(category: string) {
const isAll = category === '全部';
const { data, isLoading }: { data: CourseDto[], isLoading: boolean } = api.post.findMany.useQuery({
where: isAll ? {} : {
terms: {
some: {
name: category
},
},
},
take: 8,
include: {
terms: true
}
});
return { data, isLoading };
}
const { Title, Text } = Typography;
@ -60,10 +79,11 @@ interface CoursesSectionProps {
title: string;
description: string;
courses: Course[];
isLoading:boolean
isLoading: boolean
initialVisibleCoursesCount?: number;
}
const CoursesSection: React.FC<CoursesSectionProps> = ({
title,
description,
@ -77,40 +97,24 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
const gateGory: GetTaxonomyProps = useGetTaxonomy({
type: TaxonomySlug.CATEGORY,
})
// 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(`/course?courseId=${course.id}/detail`);
const { data, isLoading: isDataLoading } = useFetchCoursesByCategory(selectedCategory);
useEffect(() => {
console.log('data:', data)
})
const handleClick = (course: CourseDto) => {
navigate(`/course/${course.id}/detail`);
}
useEffect(() => {
console.log('data:', data)
})
const filteredCourses = useMemo(() => {
return selectedCategory === '全部'
? courses
: courses.filter((course) => course.category === selectedCategory);
}, [selectedCategory, courses]);
? data
: data?.filter(c => c.terms.some(t => t.name === selectedCategory));
}, [selectedCategory, data]);
const displayedCourses = isLoading ? [] : filteredCourses.slice(0, visibleCourses);
const displayedCourses = isDataLoading ? [] : filteredCourses?.slice(0, visibleCourses);
return (
<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">
@ -140,32 +144,37 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
: '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)
console.log(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>
))
{gateGory.categories.map((category) => (
<Tag
key={category}
color={selectedCategory === category ? 'blue' : 'default'}
onClick={() => {
setSelectedCategory(category)
console.log(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-8">
{displayedCourses.map((course) => (
{displayedCourses.length=== 0 ? (
<div className="col-span-full">
<Empty description="暂无课程" image={Empty.PRESENTED_IMAGE_DEFAULT} />
</div>
) : displayedCourses?.map((course) => (
<Card
onClick={() => handleClick(course)}
key={course.id}
@ -176,23 +185,10 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
<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.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" />
{course.progress > 0 && (
<div className="absolute bottom-0 left-0 right-0 backdrop-blur-md bg-black/30">
{/* <Progress
percent={course.progress}
showInfo={false}
strokeColor={{
from: '#3b82f6',
to: '#60a5fa',
}}
className="m-0"
/> */}
</div>
)}
</div>
}
>
@ -202,19 +198,19 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
color="blue"
className="px-3 py-1 rounded-full bg-blue-100 text-blue-600 border-0"
>
{course.category}
{course.terms[0].name}
</Tag>
<Tag
color={
course.level === '入门'
course.terms[1].name === '入门'
? 'green'
: course.level === '中级'
: course.terms[1].name === '中级'
? 'blue'
: 'purple'
}
className="px-3 py-1 rounded-full border-0"
>
{course.level}
{course.terms[1].name}
</Tag>
</div>
<Title
@ -228,12 +224,11 @@ const CoursesSection: React.FC<CoursesSectionProps> = ({
<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 className="text-xs font-medium">观看次数{course?.meta?.views}次</span>
</span>
</div>
<div className="pt-4 border-t border-gray-100 text-center">

18
apps/web/src/app/main/home/components/HeroSection.tsx
View File

@ -1,4 +1,4 @@
import React, { useRef, useCallback } from "react";
import React, { useRef, useCallback, useEffect } from "react";
import { Button, Carousel, Typography } from "antd";
import {
TeamOutlined,
@ -62,7 +62,11 @@ const HeroSection = () => {
const handleNext = useCallback(() => {
carouselRef.current?.next();
}, []);
//const {slides:carouselItems} = useAppConfig()
const { slides } = useAppConfig()
useEffect(() => {
//slides.push(('https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50'))
//console.log(slides)
}, [])
return (
<section className="relative ">
<div className="group">
@ -74,20 +78,20 @@ const HeroSection = () => {
dots={{
className: "carousel-dots !bottom-32 !z-20",
}}>
{Array.isArray(carouselItems) ? (
carouselItems.map((item, index) => (
{Array.isArray(slides)?
(slides.map((item, index) => (
<div key={index} className="relative h-[600px]">
<div
className="absolute inset-0 bg-cover bg-center transform transition-[transform,filter] duration-[2000ms] group-hover:scale-105 group-hover:brightness-110 will-change-[transform,filter]"
style={{
//backgroundImage: `url(https://s.cn.bing.net/th?id=OHR.GiantCuttlefish_ZH-CN0670915878_1920x1080.webp&qlt=50)`,
backgroundImage: `url(${item.image})`,
backgroundImage: `url(${item})`,
backfaceVisibility: "hidden",
}}
/>
<div
{/* <div
className={`absolute inset-0 bg-gradient-to-r ${item.color} to-transparent opacity-90 mix-blend-overlay transition-opacity duration-500`}
/>
/> */}
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
{/* Content Container */}

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

@ -137,7 +137,7 @@ const HomePage = () => {
return (
<div className="min-h-screen">
<HeroSection />
<CoursesSection
title="推荐课程"
description="最受欢迎的精品课程，助你快速成长"

2
apps/web/src/app/main/layout/MainFooter.tsx
View File

@ -8,7 +8,7 @@ export function MainFooter() {
{/* 开发组织信息 */}
<div className="text-center md:text-left space-y-2">
<h3 className="text-white font-semibold text-sm flex items-center justify-center md:justify-start">
创新高地 软件小组
软件与数据小组
</h3>
<p className="text-gray-400 text-xs italic">
提供技术支持

2
apps/web/src/app/main/layout/UserMenu/UserForm.tsx
View File

@ -84,7 +84,7 @@ export default function StaffForm() {
form.setFieldValue("officerId", data.officerId);
form.setFieldValue("phoneNumber", data.phoneNumber);
form.setFieldValue("enabled", data.enabled);
form.setFieldValue("enabled", data.avatar);
form.setFieldValue("avatar", data.avatar);
}
}, [data]);
// useEffect(() => {