更新 banner自动收起

components/FamousTemplate.tsx

@@ -39,7 +39,7 @@ const FamousTemplate: React.FC = () => {
     <section data-alt="famous-template" className="w-full">
       <div data-alt="famous-template-header" className="mb-4 flex items-center">
         <h2 data-alt="famous-template-title" className="text-xl py-4 font-semibold text-white">
-          Scene Sparks
+          Hot Templates
         </h2>
         <div data-alt="template-tabs" className="flex items-center gap-2 ml-4">
           {(["all", "music", "animation", "thriller"] as const).map((tab) => (
@@ -50,7 +50,7 @@ const FamousTemplate: React.FC = () => {
               onClick={() => setActiveTab(tab)}
               className={`px-3 py-1 italic rounded-none text-sm transition-colors border ${
                 activeTab === tab
-                  ? "border-white/60 bg-white/80 text-slate-900"
+                  ? "border-white/60 bg-white/60 text-slate-900"
                   : "border-white/20 text-white/80 hover:border-white/40 hover:bg-white/10"
               }`}
             >

components/HomeBanner.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import { fetchSettingByCode } from "@/api/serversetting";
+import { X, Eclipse } from "lucide-react";
+import { ChatInputBox } from "@/components/ChatInputBox/ChatInputBox";
 
 export const HOME_BANNER_CODE = "homeBanner";
 
@@ -34,6 +36,32 @@ export default function HomeBanner() {
   const [config, setConfig] = useState<HomeBannerConfig | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
+  const [isFlying, setIsFlying] = useState<boolean>(false);
+  const autoCollapseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleDismiss = () => {
+    setIsFlying(true);
+  };
+
+  const handleBannerClick = () => {
+    if (isFlying) {
+      setIsFlying(false);
+    }
+  };
+
+  // Auto collapse after mount (3s)
+  useEffect(() => {
+    if (autoCollapseTimerRef.current) return;
+    autoCollapseTimerRef.current = setTimeout(() => {
+      setIsFlying(true);
+    }, 3000);
+    return () => {
+      if (autoCollapseTimerRef.current) {
+        clearTimeout(autoCollapseTimerRef.current);
+        autoCollapseTimerRef.current = null;
+      }
+    };
+  }, []);
 
   useEffect(() => {
     let active = true;
@@ -98,9 +126,15 @@ export default function HomeBanner() {
   }
 
   return (
+    <div data-alt="home-banner-wrapper" className="relative w-full mx-auto p-0 overflow-hidden">
+      {/* Banner overlay - stacked above */}
       <section
         data-alt="home-banner"
-      className="relative isolate overflow-hidden rounded-3xl px-6 py-16 text-white border-2 border-transparent hover:border-custom-blue/50 transition-all duration-300"
+        className={`absolute inset-0 z-10 isolate overflow-hidden rounded-3xl px-6 py-6 text-white border-2 border-transparent hover:border-custom-blue/50 transition-all duration-500 ease-in-out ${
+          isFlying
+            ? "cursor-pointer translate-x-[90%] -translate-y-[70%] scale-[0.85] opacity-95 rotate-3"
+            : "translate-x-0 translate-y-0 scale-100 opacity-100 rotate-0"
+        }`}
         aria-label="Home banner"
       >
         {backgroundImage ? (
@@ -116,8 +150,25 @@ export default function HomeBanner() {
 
         <div
           data-alt="banner-content"
-        className="relative flex max-w-4xl flex-col items-center gap-4 text-center md:items-start md:text-left"
+          className="relative flex flex-col items-center gap-4 text-center md:items-start md:text-left"
         >
+          {/* Dismiss button */}
+          <div className="absolute right-0 top-0">
+            <button
+              data-alt="banner-dismiss"
+              type="button"
+              onClick={handleDismiss}
+              className="text-white hover:bg-white/20 rounded-full p-2"
+              aria-label="Dismiss banner"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          </div>
+          {isFlying ? (
+            <button type="button" onClick={handleBannerClick} className="absolute left-[-15px] bottom-[-20px] h-5 w-5">
+              <Eclipse className="inset-0 h-5 w-5" />
+            </button>
+          ) : null}
           {eyebrow ? (
             <span data-alt="banner-eyebrow" className="text-xs font-semibold uppercase tracking-[0.3em] text-white/70">
               {eyebrow}
@@ -155,5 +206,11 @@ export default function HomeBanner() {
           ) : null}
         </div>
       </section>
+
+      {/* Base content - always present under the banner */}
+      <div data-alt="home-banner-base" className="relative bg-transparent py-6 min-h-[300px]">
+        <ChatInputBox noData={false} />
+      </div>
+    </div>
   );
 }