feat: 优化Hero组件，移除图片预加载，优化选择器

Author: PaloMiku

app/components/home/Hero.tsx

@@ -14,14 +14,11 @@ import { buttonVariants } from 'app/components/ui/button';
 import { LuCirclePlay } from "react-icons/lu";
 import { FaGithub } from "react-icons/fa";
 import { motion, AnimatePresence } from "framer-motion";
-import { ChevronLeft, ChevronRight } from "lucide-react";
 
 export function Hero() {
   const [currentImage, setCurrentImage] = useState(0);
-  const [isLoaded, setIsLoaded] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
 
   // 自动轮播功能
   useEffect(() => {
@@ -36,24 +33,6 @@ export function Hero() {
     };
   }, [isPaused]);
 
-  // 图片预加载
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      images.forEach((src) => {
-        const imgEl = document.createElement('img');
-        imgEl.src = src;
-      });
-    }
-  }, []);
-
-  const goToNext = () => {
-    setCurrentImage((prev) => (prev + 1) % images.length);
-  };
-
-  const goToPrev = () => {
-    setCurrentImage((prev) => (prev - 1 + images.length) % images.length);
-  };
-
   return (
     <div className="container relative z-[2] flex flex-col overflow-hidden rounded-lg bg-background px-6 pt-12 max-md:text-center md:px-12 md:pt-16">
       <div className="md:flex md:items-center md:gap-8 mb-8">
@@ -98,21 +77,19 @@ export function Hero() {
       </div>
 
       <div 
-        ref={containerRef}
         className="relative mt-6 md:mt-8 mb-12 overflow-visible"
         onMouseEnter={() => setIsPaused(true)}
         onMouseLeave={() => setIsPaused(false)}
       >
-        
         <div className="relative w-full overflow-visible">
           <div className="w-full mx-auto overflow-hidden rounded-xl ring-1 ring-foreground/5 shadow-xl shadow-foreground/5">
             <div className="relative aspect-video w-full bg-gradient-to-br from-secondary/20 to-secondary/10">
               <AnimatePresence initial={false} mode="wait">
                 <motion.div
                   key={currentImage}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: -10 }}
+                  initial={{ opacity: 0, scale: 0.95 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  exit={{ opacity: 0, scale: 0.95 }}
                   transition={{ duration: 0.5 }}
                   className="absolute inset-0"
                 >
@@ -124,62 +101,27 @@ export function Hero() {
                     quality={90}
                     priority={currentImage === 0}
                     className="object-cover w-full"
-                    onLoadingComplete={() => setIsLoaded(true)}
                   />
                 </motion.div>
               </AnimatePresence>
-              
-              {/* 加载指示器 */}
-              {!isLoaded && (
-                <div className="absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800/90">
-                  <div className="w-12 h-12 border-4 border-gray-300 dark:border-gray-600 border-t-primary rounded-full animate-spin"></div>
-                </div>
-              )}
-              
-              {/* 截图标题 */}
-              <div className="absolute bottom-0 left-0 right-0 p-4 md:p-6 bg-gradient-to-t from-black/60 to-transparent">
-                <div className="text-white font-medium text-lg md:text-xl">
-                  {imageNames[currentImage]}
-                </div>
-              </div>
             </div>
           </div>
 
-          {/* 左右箭头导航 */}
-          <button 
-            onClick={goToPrev}
-            className="absolute left-2 md:left-4 top-1/2 -translate-y-1/2 bg-background/80 dark:bg-background/60 backdrop-blur-sm p-2 rounded-full shadow-md hover:bg-background transition-colors border border-border"
-            aria-label="上一张"
-          >
-            <ChevronLeft className="h-5 w-5" />
-          </button>
-          
-          <button 
-            onClick={goToNext}
-            className="absolute right-2 md:right-4 top-1/2 -translate-y-1/2 bg-background/80 dark:bg-background/60 backdrop-blur-sm p-2 rounded-full shadow-md hover:bg-background transition-colors border border-border"
-            aria-label="下一张"
-          >
-            <ChevronRight className="h-5 w-5" />
-          </button>
-          
-          {/* 进度条指示器 */}
-          <div className="absolute bottom-[-20px] left-0 right-0 flex justify-center gap-2">
-            <div className="flex gap-1.5">
-              {images.map((_, index) => (
-                <button
-                  key={`dot-${index}`}
-                  onClick={() => setCurrentImage(index)}
-                  className="group p-2"
-                  aria-label={`查看${imageNames[index]}`}
-                >
-                  <div className={`h-1 w-6 rounded-full transition-all duration-500 ${
-                    index === currentImage 
-                      ? 'bg-primary w-10' 
-                      : 'bg-muted-foreground/30 group-hover:bg-muted-foreground/50'
-                  }`} />
-                </button>
-              ))}
-            </div>
+          <div className="absolute bottom-[calc(var(--spacing)*4)] left-1/2 -translate-x-1/2 z-[2] flex flex-row border border-[var(--color-fd-border)] rounded-full bg-[var(--color-fd-card)] p-1 shadow-md shadow-[var(--color-fd-background)]">
+            {imageNames.map((name, index) => (
+              <button
+                key={`title-${index}`}
+                onClick={() => setCurrentImage(index)}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-all ${
+                  index === currentImage
+                    ? 'bg-[var(--color-fd-accent)] text-[var(--color-fd-accent-foreground)]'
+                    : 'text-[var(--color-fd-muted-foreground)] hover:bg-[var(--color-fd-secondary)] hover:text-[var(--color-fd-secondary-foreground)]'
+                }`}
+                aria-label={`查看${name}`}
+              >
+                {name}
+              </button>
+            ))}
           </div>
         </div>
       </div>