rht

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

@@ -9,6 +9,7 @@ import FixedHeader from "@web/src/components/layout/fix-header";
 import { useForm } from "antd/es/form/Form";
 import { api } from "@nice/client";
 import { MainLayoutContext } from "../layout";
+import CarouselUrlInput from "@web/src/components/common/input/CarouselUrlInput";
 
 export default function BaseSettingPage() {
 	const { update, baseSetting } = useAppConfig();
@@ -134,11 +135,11 @@ export default function BaseSettingPage() {
 							<MultiAvatarUploader></MultiAvatarUploader>
 						</Form.Item>
 					</div>
-					<div className="p-2 grid grid-cols-8 gap-2 border-b">
+					<div className="p-2 grid grid-cols-4 gap-2 border-b">
 						<Form.Item
 							label="首页轮播图链接"
 							name={["appConfig", "slideLinks"]}>
-								
+							<CarouselUrlInput ></CarouselUrlInput>
 						</Form.Item>
 					</div>
 					{/* <div

apps/web/src/app/main/home/components/HeroSection.tsx

@@ -16,6 +16,7 @@ import {
 } from "@ant-design/icons";
 import type { CarouselRef } from "antd/es/carousel";
 import { useAppConfig } from "@nice/client";
+import { useNavigate } from "react-router-dom";
 
 const { Title, Text } = Typography;
 
@@ -37,6 +38,7 @@ 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 [
 			{
@@ -91,11 +93,12 @@ const HeroSection = () => {
 					}}>
 					{Array.isArray(slides) ? (
 						slides.map((item, index) => (
-							<div key={index} className="relative h-[600px]">
-								<div
-									onClick={() => {
-										// slideLinks?.[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)`,

apps/web/src/components/common/input/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>
+        </>
+
+    );
+}