add

apps/web/src/app/HeroSection.tsx

@@ -0,0 +1,157 @@
+import React, {
+	useRef,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
+import { Carousel, Typography } from "antd";
+import {
+	TeamOutlined,
+	BookOutlined,
+	StarOutlined,
+	LeftOutlined,
+	RightOutlined,
+	EyeOutlined,
+} from "@ant-design/icons";
+import type { CarouselRef } from "antd/es/carousel";
+import { useAppConfig } from "@nice/client";
+import { useNavigate } from "react-router-dom";
+
+interface PlatformStat {
+	icon: React.ReactNode;
+	value: number;
+	label: string;
+}
+
+const HeroSection = () => {
+	const carouselRef = useRef<CarouselRef>(null);
+	const { statistics, slides, slideLinks = [] } = useAppConfig();
+	const [countStatistics, setCountStatistics] = useState<number>(4);
+	const navigator = useNavigate()
+	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: "播放次数",
+			},
+		];
+	}, [statistics]);
+	const handlePrev = useCallback(() => {
+		carouselRef.current?.prev();
+	}, []);
+
+	const handleNext = useCallback(() => {
+		carouselRef.current?.next();
+	}, []);
+
+	const countNonZeroValues = (statistics: Record<string, number>): number => {
+		return Object.values(statistics).filter((value) => value !== 0).length;
+	};
+
+	useEffect(() => {
+		const count = countNonZeroValues(statistics);
+		console.log(count);
+		setCountStatistics(count);
+	}, [statistics]);
+	return (
+		<section className="relative ">
+			<div className="group">
+				<Carousel
+					ref={carouselRef}
+					autoplay
+					effect="fade"
+					className="h-[600px] mb-24"
+					dots={{
+						className: "carousel-dots !bottom-32 !z-20",
+					}}>
+					{Array.isArray(slides) ? (
+						slides.map((item, index) => (
+							<div key={index} className="relative h-[600px] cursor-pointer"
+								onClick={()=>{
+									if(slideLinks?.[index])window.open(slideLinks?.[index],"_blank")
+								}}
+							>
+								<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})`,
+										backfaceVisibility: "hidden",
+									}}
+								/>
+								{/* <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 */}
+								<div className="relative h-full max-w-7xl mx-auto px-6 lg:px-8"></div>
+							</div>
+						))
+					) : (
+						<div></div>
+					)}
+				</Carousel>
+
+				{/* Navigation Buttons */}
+				<button
+					onClick={handlePrev}
+					className="absolute left-4 md:left-8 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 bg-black/20 hover:bg-black/30 w-12 h-12 flex items-center justify-center rounded-full transform hover:scale-110 hover:shadow-lg"
+					aria-label="Previous slide">
+					<LeftOutlined className="text-white text-xl" />
+				</button>
+				<button
+					onClick={handleNext}
+					className="absolute right-4 md:right-8 top-1/2 -translate-y-1/2 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 bg-black/20 hover:bg-black/30 w-12 h-12 flex items-center justify-center rounded-full transform hover:scale-110 hover:shadow-lg"
+					aria-label="Next slide">
+					<RightOutlined className="text-white text-xl" />
+				</button>
+			</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>
+								</div>
+							) : null;
+						})}
+					</div>
+				</div>
+			)}
+		</section>
+	);
+};
+
+export default HeroSection;

apps/web/src/app/admin/base-setting/page.tsx

@@ -7,6 +7,8 @@ import { useForm } from "antd/es/form/Form";
 import { api } from "@nice/client";
 import AdminHeader from "@web/src/components/layout/admin/AdminHeader";
 import AvatarUploader from "@web/src/components/common/uploader/AvatarUploader";
+import MultiAvatarUploader from "@web/src/components/common/uploader/MultiAvatarUploader";
+import CarouselUrlInput from "@web/src/components/common/uploader/CarouselUrlInput";
 
 export default function BaseSettingPage() {
 	const { update, baseSetting } = useAppConfig();
@@ -114,6 +116,20 @@ export default function BaseSettingPage() {
 							<Input></Input>
 						</Form.Item>
 					</div>
+					<div className="p-2 grid grid-cols-8 gap-2 border-b">
+						<Form.Item
+							label="首页轮播图"
+							name={["appConfig", "slides"]}>
+							<MultiAvatarUploader></MultiAvatarUploader>
+						</Form.Item>
+					</div>
+					<div className="p-2 grid grid-cols-4 gap-2 border-b">
+						<Form.Item
+							label="首页轮播图链接"
+							name={["appConfig", "slideLinks"]}>
+							<CarouselUrlInput ></CarouselUrlInput>
+						</Form.Item>
+					</div>
 					<Form.Item label="写信须知" name={["appConfig", "notice"]}>
 						<Input.TextArea></Input.TextArea>
 					</Form.Item>

apps/web/src/components/common/uploader/AvatarUploader.tsx

@@ -12,6 +12,8 @@ export interface AvatarUploaderProps {
 	onChange?: (value: string) => void;
 	compressed?: boolean;
 	style?: React.CSSProperties; // 添加style属性
+	successText?: string;
+	showCover?: boolean;
 }
 
 interface UploadingFile {
@@ -31,12 +33,14 @@ const AvatarUploader: React.FC<AvatarUploaderProps> = ({
 	className,
 	placeholder = "点击上传",
 	style, // 解构style属性
+	successText = "上传成功",
+	showCover = true,
 }) => {
 	const { handleFileUpload, uploadProgress } = useTusUpload();
 	const [file, setFile] = useState<UploadingFile | null>(null);
 	const avatarRef = useRef<HTMLImageElement>(null);
 	const [previewUrl, setPreviewUrl] = useState<string>(value || "");
-
+	const [imageSrc, setImageSrc] = useState(value);
 	const [compressedUrl, setCompressedUrl] = useState<string>(value || "");
 	const [url, setUrl] = useState<string>(value || "");
 	const [uploading, setUploading] = useState(false);
@@ -44,7 +48,11 @@ const AvatarUploader: React.FC<AvatarUploaderProps> = ({
 	// 在组件中定义 key 状态
 	const [avatarKey, setAvatarKey] = useState(0);
 	const { token } = theme.useToken();
-
+	useEffect(() => {
+		if (!previewUrl || previewUrl?.length < 1) {
+			setPreviewUrl(value || "");
+		}
+	}, [value]);
 	const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
 		const selectedFile = event.target.files?.[0];
 		if (!selectedFile) return;
@@ -88,12 +96,12 @@ const AvatarUploader: React.FC<AvatarUploaderProps> = ({
 			// 使用 resolved 的最新值调用 onChange
 			// 强制刷新 Avatar 组件
 			setAvatarKey((prev) => prev + 1); // 修改 key 强制重新挂载
-			onChange?.(uploadedUrl);
 			console.log(uploadedUrl);
-			toast.success("头像上传成功");
+			onChange?.(uploadedUrl);
+			toast.success(successText);
 		} catch (error) {
 			console.error("上传错误:", error);
-			toast.error("头像上传失败");
+			toast.error("上传失败");
 			setFile((prev) => ({ ...prev!, status: "error" }));
 		} finally {
 			setUploading(false);
@@ -120,12 +128,20 @@ const AvatarUploader: React.FC<AvatarUploaderProps> = ({
 				accept="image/*"
 				style={{ display: "none" }}
 			/>
-			{previewUrl ? (
+			{(previewUrl && showCover) ? (
 				<Avatar
 					key={avatarKey}
 					ref={avatarRef}
 					src={previewUrl}
 					shape="square"
+					onError={() => {
+						if (value && previewUrl && imageSrc === value) {
+							// 当原始图片（value）加载失败时，切换到 previewUrl
+							setImageSrc(previewUrl);
+							return true; // 阻止默认的 fallback 行为，让它尝试新设置的 src
+						}
+						return false; // 如果 previewUrl 也失败了，显示默认头像
+					}}
 					className="w-full h-full object-cover"
 				/>
 			) : (

apps/web/src/components/common/uploader/CarouselUrlInput.tsx

@@ -0,0 +1,53 @@
+import { Button, Input } from "antd";
+import { useEffect, useState } from "react";
+
+export default function CarouselUrlInput(
+    { value, onChange }
+        : {
+            value?: string[];
+            onChange?: (value: string[]) => void;
+        }) {
+    const [url, setUrl] = useState<string>("");
+    const [urls, setUrls] = useState<string[]>(value || []);
+    const handleChange = (e) => {
+        if (e.target.value !== "") setUrl(e.target.value);
+    };
+    const handleDelete = (index) => {
+        setUrls((prevList) => {
+            // 创建一个新数组并移除指定索引的元素
+            const newList = [...prevList];
+            newList.splice(index, 1);
+            return newList;
+        });
+    };
+    useEffect(() => {
+        if (value) {
+            setUrls(value)
+        }
+    }, [value])
+    useEffect(() => {
+        onChange?.(urls);
+    }, [urls]);
+    return (
+        <>
+            <div className="w-full flex gap-2">
+                <Input className="w-[500px]" placeholder="请输入跳转链接" onChange={handleChange} />
+                <Button onClick={() => {
+                    if (url) setUrls((prevUrls) => [...prevUrls, url]);
+                }} type="primary">添加轮播图链接</Button>
+            </div>
+            <div>
+                <ul>
+                    {urls.map((item, index) => (
+                        <li className="flex justify-between mt-2 ml-1 p-2 bg-white rounded-lg" key={index}>
+                            <Input className="w-4/5" defaultValue={item} disabled />
+                            {/* <span className="w-6 block">{item}</span> */}
+                            <button className="text-red-500" onClick={() => handleDelete(index)}>删除</button>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </>
+
+    );
+}

apps/web/src/components/common/uploader/MultiAvatarUploader.tsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useState } from "react";
+import { Upload, Progress, Button, Image, Form } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
+import AvatarUploader from "./AvatarUploader";
+import { isEqual } from "lodash";
+
+interface MultiAvatarUploaderProps {
+	value?: string[];
+	onChange?: (value: string[]) => void;
+	className?: string;
+	placeholder?: string;
+	style?: React.CSSProperties;
+}
+
+export function MultiAvatarUploader({
+	value,
+	onChange,
+	className,
+	style,
+	placeholder = "点击上传",
+}: MultiAvatarUploaderProps) {
+	const [imageList, setImageList] = useState<string[]>(value || []);
+	const [previewImage, setPreviewImage] = useState<string>("");
+	useEffect(() => {
+		if (!isEqual(value, imageList)) {
+			setImageList(value || []);
+		}
+	}, [value]);
+	useEffect(() => {
+		onChange?.(imageList);
+	}, [imageList]);
+	return (
+		<>
+			<div className="flex gap-2 mb-2" style={{ width: "1200px" }}>
+				{(imageList || [])?.map((image, index) => {
+					return (
+						<div
+							className={`mr-2px relative ${className}`}
+							key={index}
+							style={{
+								width: "100px",
+								height: "100px",
+								...style,
+							}}>
+							<Image
+								alt=""
+								className={className}
+								style={{
+									width: "100px",
+									height: "100px",
+									...style,
+								}}
+								src={image}
+								preview={{
+									visible: previewImage === image,
+									onVisibleChange: (visible) =>
+										setPreviewImage(
+											visible ? image || "" : ""
+										),
+								}}></Image>
+							<Button
+								type="text"
+								danger
+								icon={<DeleteOutlined className="text-red" />}
+								onClick={() =>
+									image &&
+									setImageList(
+										imageList.filter((_, i) => i !== index)
+									)
+								}
+								style={{
+									position: "absolute", // 绝对定位
+									top: "0", // 顶部对齐
+									right: "0", // 右侧对齐
+									zIndex: 1, // 确保按钮在图片上方
+									padding: "4px", // 调整按钮内边距
+									backgroundColor: "rgba(255, 255, 255, 0.2)", // 半透明背景
+									borderRadius: "50%", // 圆形按钮
+								}}
+							/>
+						</div>
+					);
+				})}
+			</div>
+			<div className="flex">
+				<AvatarUploader
+					style={style}
+					className={className}
+					showCover={false}
+					placeholder={placeholder}
+					successText={"轮播图上传成功"}
+					onChange={(value) => {
+						console.log(value);
+						setImageList([...imageList, value]);
+					}}></AvatarUploader>
+			</div>
+		</>
+	);
+}
+export default MultiAvatarUploader;

apps/web/src/components/layout/main/TopPic.tsx

@@ -1,15 +1,17 @@
+import HeroSection from "@web/src/app/HeroSection";
 import usePublicImage from "@web/src/hooks/usePublicImage";
-
+// 
 export default function TopPic() {
 	const { imageUrl } = usePublicImage("logo.png");
 
 	return (
 		<div className="w-full overflow-hidden">
-			<img
+			{/* <img
 				src={imageUrl}
 				alt="Banner"
 				className="w-full h-auto object-cover"
-			/>
+			/> */}
+			<HeroSection/>
 		</div>
 	);
 }