add
This commit is contained in:
ditiqi
parent
f2fe2d66be
commit
57f486ca6e
|
|
@ -1,4 +1,10 @@
|
|||
import React, { useRef, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import React, {
|
||||
useRef,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useState,
|
||||
} from "react";
|
||||
import { Carousel, Typography } from "antd";
|
||||
import {
|
||||
TeamOutlined,
|
||||
|
|
@ -30,13 +36,29 @@ interface PlatformStat {
|
|||
const HeroSection = () => {
|
||||
const carouselRef = useRef<CarouselRef>(null);
|
||||
const { statistics, slides } = useAppConfig();
|
||||
const [countStatistics, setCountStatistics] = useState<number>(4)
|
||||
const [countStatistics, setCountStatistics] = useState<number>(4);
|
||||
const platformStats: PlatformStat[] = useMemo(() => {
|
||||
return [
|
||||
{ icon: <TeamOutlined />, value: statistics.staffs, label: "注册学员" },
|
||||
{ icon: <StarOutlined />, value: statistics.courses, label: "精品课程" },
|
||||
{ icon: <BookOutlined />, value: statistics.lectures, label: '课程章节' },
|
||||
{ icon: <EyeOutlined />, value: statistics.reads, label: "观看次数" },
|
||||
{
|
||||
icon: <TeamOutlined />,
|
||||
value: statistics.staffs,
|
||||
label: "注册学员",
|
||||
},
|
||||
{
|
||||
icon: <StarOutlined />,
|
||||
value: statistics.courses,
|
||||
label: "精品课程",
|
||||
},
|
||||
{
|
||||
icon: <BookOutlined />,
|
||||
value: statistics.lectures,
|
||||
label: "课程章节",
|
||||
},
|
||||
{
|
||||
icon: <EyeOutlined />,
|
||||
value: statistics.reads,
|
||||
label: "观看次数",
|
||||
},
|
||||
];
|
||||
}, [statistics]);
|
||||
const handlePrev = useCallback(() => {
|
||||
|
|
@ -48,7 +70,7 @@ const HeroSection = () => {
|
|||
}, []);
|
||||
|
||||
const countNonZeroValues = (statistics: Record<string, number>): number => {
|
||||
return Object.values(statistics).filter(value => value !== 0).length;
|
||||
return Object.values(statistics).filter((value) => value !== 0).length;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -67,8 +89,8 @@ const HeroSection = () => {
|
|||
dots={{
|
||||
className: "carousel-dots !bottom-32 !z-20",
|
||||
}}>
|
||||
{Array.isArray(slides) ?
|
||||
(slides.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]"
|
||||
|
|
@ -87,9 +109,9 @@ const HeroSection = () => {
|
|||
<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
|
|
@ -108,31 +130,30 @@ const HeroSection = () => {
|
|||
</div>
|
||||
|
||||
{/* Stats Container */}
|
||||
{
|
||||
countStatistics > 1 && (
|
||||
<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
|
||||
<div className={`rounded-2xl grid grid-cols-${countStatistics} lg:grid-cols-${countStatistics} md:grid-cols-${countStatistics} gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]`}>
|
||||
{platformStats.map((stat, index) => {
|
||||
return stat.value
|
||||
? (<div
|
||||
key={index}
|
||||
className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-primary-50 text-primary-600 text-3xl transition-colors duration-300 group-hover:text-primary-700">
|
||||
{stat.icon}
|
||||
</div>
|
||||
<div className="text-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-1.5">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-gray-600 font-medium">
|
||||
{stat.label}
|
||||
</div>
|
||||
{countStatistics > 1 && (
|
||||
<div className="absolute -bottom-20 left-1/2 -translate-x-1/2 w-3/5 max-w-6xl px-4">
|
||||
<div
|
||||
className={`rounded-2xl grid grid-cols-${countStatistics} lg:grid-cols-${countStatistics} md:grid-cols-${countStatistics} gap-4 md:gap-8 p-6 md:p-8 bg-white border shadow-xl hover:shadow-2xl transition-shadow duration-500 will-change-[transform,box-shadow]`}>
|
||||
{platformStats.map((stat, index) => {
|
||||
return stat.value ? (
|
||||
<div
|
||||
key={index}
|
||||
className="text-center transform hover:-translate-y-1 hover:scale-105 transition-transform duration-300 ease-out">
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 mb-4 rounded-full bg-primary-50 text-primary-600 text-3xl transition-colors duration-300 group-hover:text-primary-700">
|
||||
{stat.icon}
|
||||
</div>
|
||||
) : null
|
||||
})}
|
||||
</div>
|
||||
<div className="text-2xl font-bold bg-gradient-to-r from-gray-800 to-gray-600 bg-clip-text text-transparent mb-1.5">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-gray-600 font-medium">
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -86,6 +86,20 @@ export function UserMenu() {
|
|||
setModalOpen(true);
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: <UserOutlined className="text-lg" />,
|
||||
label: "我创建的课程",
|
||||
action: () => {
|
||||
setModalOpen(true);
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: <UserOutlined className="text-lg" />,
|
||||
label: "我学习的课程",
|
||||
action: () => {
|
||||
setModalOpen(true);
|
||||
},
|
||||
},
|
||||
canManageAnyStaff && {
|
||||
icon: <SettingOutlined className="text-lg" />,
|
||||
label: "设置",
|
||||
|
|
@ -222,18 +236,20 @@ export function UserMenu() {
|
|||
focus:ring-2 focus:ring-[#00538E]/20
|
||||
group relative overflow-hidden
|
||||
active:scale-[0.99]
|
||||
${item.label === "注销"
|
||||
${
|
||||
item.label === "注销"
|
||||
? "text-[#B22234] hover:bg-red-50/80 hover:text-red-700"
|
||||
: "text-[#00538E] hover:bg-[#E6EEF5] hover:text-[#003F6A]"
|
||||
}`}>
|
||||
}`}>
|
||||
<span
|
||||
className={`w-5 h-5 flex items-center justify-center
|
||||
transition-all duration-200 ease-in-out
|
||||
group-hover:scale-110 group-hover:rotate-6
|
||||
group-hover:translate-x-0.5 ${item.label === "注销"
|
||||
? "group-hover:text-red-600"
|
||||
: "group-hover:text-[#003F6A]"
|
||||
}`}>
|
||||
group-hover:translate-x-0.5 ${
|
||||
item.label === "注销"
|
||||
? "group-hover:text-red-600"
|
||||
: "group-hover:text-[#003F6A]"
|
||||
}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span>{item.label}</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
export default function MyDutyPage() {
|
||||
|
||||
|
||||
|
||||
return <>
|
||||
</>
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default function MyLearningPage() {
|
||||
return <></>;
|
||||
}
|
||||
|
|
@ -288,14 +288,6 @@ model Visit {
|
|||
message Message? @relation(fields: [messageId], references: [id])
|
||||
messageId String? @map("message_id")
|
||||
lectureId String? @map("lecture_id") // 课时ID
|
||||
|
||||
// 学习数据
|
||||
// progress Float? @default(0) @map("progress") // 完成进度(0-100%)
|
||||
// isCompleted Boolean? @default(false) @map("is_completed") // 是否完成
|
||||
// lastPosition Int? @default(0) @map("last_position") // 视频播放位置(秒)
|
||||
// totalWatchTime Int? @default(0) @map("total_watch_time") // 总观看时长(秒)
|
||||
// // 时间记录
|
||||
// lastWatchedAt DateTime? @map("last_watched_at") // 最后观看时间
|
||||
createdAt DateTime @default(now()) @map("created_at") // 创建时间
|
||||
updatedAt DateTime @updatedAt @map("updated_at") // 更新时间
|
||||
deletedAt DateTime? @map("deleted_at") // 删除时间，可为空
|
||||
|
|
|
|||
Loading…
Reference in New Issue