add
This commit is contained in:
ditiqi
parent
8bf670074d
commit
9c228e4c5f
|
|
@ -56,7 +56,7 @@ export default function BaseSettingPage() {
|
||||||
meta: {
|
meta: {
|
||||||
...baseSetting,
|
...baseSetting,
|
||||||
appConfig: {
|
appConfig: {
|
||||||
...baseSetting.appConfig,
|
...(baseSetting?.appConfig || {}),
|
||||||
...appConfig,
|
...appConfig,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -49,10 +49,26 @@ const HeroSection = () => {
|
||||||
const carouselRef = useRef<CarouselRef>(null);
|
const carouselRef = useRef<CarouselRef>(null);
|
||||||
const { statistics, baseSetting } = useAppConfig();
|
const { statistics, baseSetting } = useAppConfig();
|
||||||
const platformStats: PlatformStat[] = [
|
const platformStats: PlatformStat[] = [
|
||||||
{ icon: <TeamOutlined />, value: statistics.staffs.toString(), label: "注册学员" },
|
{
|
||||||
{ icon: <StarOutlined />, value: statistics.courses.toString(), label: "精品课程" },
|
icon: <TeamOutlined />,
|
||||||
{ icon: <BookOutlined />, value: statistics.lectures.toString(), label: '课程章节' },
|
value: statistics.staffs.toString(),
|
||||||
{ icon: <EyeOutlined />, value: statistics.reads.toString(), label: "观看次数" },
|
label: "注册学员",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <StarOutlined />,
|
||||||
|
value: statistics.courses.toString(),
|
||||||
|
label: "精品课程",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <BookOutlined />,
|
||||||
|
value: statistics.lectures.toString(),
|
||||||
|
label: "课程章节",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <EyeOutlined />,
|
||||||
|
value: statistics.reads.toString(),
|
||||||
|
label: "观看次数",
|
||||||
|
},
|
||||||
];
|
];
|
||||||
const handlePrev = useCallback(() => {
|
const handlePrev = useCallback(() => {
|
||||||
carouselRef.current?.prev();
|
carouselRef.current?.prev();
|
||||||
|
|
@ -61,10 +77,10 @@ const HeroSection = () => {
|
||||||
const handleNext = useCallback(() => {
|
const handleNext = useCallback(() => {
|
||||||
carouselRef.current?.next();
|
carouselRef.current?.next();
|
||||||
}, []);
|
}, []);
|
||||||
const { slides } = useAppConfig()
|
const { slides } = useAppConfig();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log(statistics)
|
console.log(statistics);
|
||||||
}, [statistics])
|
}, [statistics]);
|
||||||
return (
|
return (
|
||||||
<section className="relative ">
|
<section className="relative ">
|
||||||
<div className="group">
|
<div className="group">
|
||||||
|
|
@ -76,8 +92,8 @@ const HeroSection = () => {
|
||||||
dots={{
|
dots={{
|
||||||
className: "carousel-dots !bottom-32 !z-20",
|
className: "carousel-dots !bottom-32 !z-20",
|
||||||
}}>
|
}}>
|
||||||
{Array.isArray(slides)?
|
{Array.isArray(slides) ? (
|
||||||
(slides.map((item, index) => (
|
slides.map((item, index) => (
|
||||||
<div key={index} className="relative h-[600px]">
|
<div key={index} className="relative h-[600px]">
|
||||||
<div
|
<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]"
|
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]"
|
||||||
|
|
|
||||||
|
|
@ -3,66 +3,81 @@ import { useEffect, useState } from "react";
|
||||||
import { Upload, Progress, Button, Image, Form } from "antd";
|
import { Upload, Progress, Button, Image, Form } from "antd";
|
||||||
import { DeleteOutlined } from "@ant-design/icons";
|
import { DeleteOutlined } from "@ant-design/icons";
|
||||||
import AvatarUploader from "./AvatarUploader";
|
import AvatarUploader from "./AvatarUploader";
|
||||||
import { isEqual } from 'lodash';
|
import { isEqual } from "lodash";
|
||||||
|
|
||||||
interface MultiAvatarUploaderProps {
|
interface MultiAvatarUploaderProps {
|
||||||
value?: string[];
|
value?: string[];
|
||||||
onChange?: (value: string[]) => void;
|
onChange?: (value: string[]) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function MultiAvatarUploader({
|
export function MultiAvatarUploader({
|
||||||
value,
|
value,
|
||||||
onChange,
|
onChange,
|
||||||
}: MultiAvatarUploaderProps) {
|
}: MultiAvatarUploaderProps) {
|
||||||
const [imageList, setImageList] = useState<string[]>(value || [])
|
const [imageList, setImageList] = useState<string[]>(value || []);
|
||||||
const [previewImage, setPreviewImage] = useState<string>("");
|
const [previewImage, setPreviewImage] = useState<string>("");
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isEqual(value, imageList)) {
|
if (!isEqual(value, imageList)) {
|
||||||
setImageList(value || []);
|
setImageList(value || []);
|
||||||
}
|
}
|
||||||
}, [value]);
|
}, [value]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
onChange?.(imageList)
|
onChange?.(imageList);
|
||||||
}, [imageList])
|
}, [imageList]);
|
||||||
return <>
|
return (
|
||||||
<div className="flex gap-2 mb-2" style={{ width: "1200px" }}>
|
<>
|
||||||
{imageList.map((image, index) => {
|
<div className="flex gap-2 mb-2" style={{ width: "1200px" }}>
|
||||||
return (
|
{(imageList || [])?.map((image, index) => {
|
||||||
<div className="mr-2px relative" key={index} style={{ width: "200px", height: "100px" }} >
|
return (
|
||||||
<Image alt="" style={{ width: "200px", height: "100px" }} src={image}
|
<div
|
||||||
preview={{
|
className="mr-2px relative"
|
||||||
visible: previewImage === image,
|
key={index}
|
||||||
onVisibleChange: (visible) =>
|
style={{ width: "200px", height: "100px" }}>
|
||||||
setPreviewImage(visible ? image || "" : "")
|
<Image
|
||||||
}} >
|
alt=""
|
||||||
</Image>
|
style={{ width: "200px", height: "100px" }}
|
||||||
<Button
|
src={image}
|
||||||
type="text"
|
preview={{
|
||||||
danger
|
visible: previewImage === image,
|
||||||
icon={<DeleteOutlined className="text-red" />}
|
onVisibleChange: (visible) =>
|
||||||
onClick={() => image && setImageList(imageList.filter((_, i) => i !== index))}
|
setPreviewImage(
|
||||||
style={{
|
visible ? image || "" : ""
|
||||||
position: "absolute", // 绝对定位
|
),
|
||||||
top: "0", // 顶部对齐
|
}}></Image>
|
||||||
right: "0", // 右侧对齐
|
<Button
|
||||||
zIndex: 1, // 确保按钮在图片上方
|
type="text"
|
||||||
padding: "4px", // 调整按钮内边距
|
danger
|
||||||
backgroundColor: "rgba(255, 255, 255, 0.2)", // 半透明背景
|
icon={<DeleteOutlined className="text-red" />}
|
||||||
borderRadius: "50%", // 圆形按钮
|
onClick={() =>
|
||||||
}}
|
image &&
|
||||||
|
setImageList(
|
||||||
/>
|
imageList.filter((_, i) => i !== index)
|
||||||
</div>
|
)
|
||||||
)
|
}
|
||||||
})}
|
style={{
|
||||||
</div>
|
position: "absolute", // 绝对定位
|
||||||
<div className="flex">
|
top: "0", // 顶部对齐
|
||||||
<AvatarUploader showCover={false} successText={'轮播图上传成功'} onChange={(value) => {
|
right: "0", // 右侧对齐
|
||||||
console.log(value);
|
zIndex: 1, // 确保按钮在图片上方
|
||||||
setImageList([...imageList, value])
|
padding: "4px", // 调整按钮内边距
|
||||||
}}></AvatarUploader>
|
backgroundColor: "rgba(255, 255, 255, 0.2)", // 半透明背景
|
||||||
</div>
|
borderRadius: "50%", // 圆形按钮
|
||||||
|
}}
|
||||||
</>;
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div className="flex">
|
||||||
|
<AvatarUploader
|
||||||
|
showCover={false}
|
||||||
|
successText={"轮播图上传成功"}
|
||||||
|
onChange={(value) => {
|
||||||
|
console.log(value);
|
||||||
|
setImageList([...imageList, value]);
|
||||||
|
}}></AvatarUploader>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
export default MultiAvatarUploader;
|
export default MultiAvatarUploader;
|
||||||
Loading…
Reference in New Issue