更新 模板描述&banner展开按钮动画

components/HomeBanner.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState, useRef } from "react";
 import { fetchSettingByCode } from "@/api/serversetting";
-import { X, ChevronUp, ChevronDown } from "lucide-react";
+import { X, ChevronUp, ChevronsDown } from "lucide-react";
 import { ChatInputBox } from "@/components/ChatInputBox/ChatInputBox";
 import { VideoCreationForm } from '@/components/pages/create-video/CreateInput';
 
@@ -194,11 +194,6 @@ export default function HomeBanner() {
               <ChevronUp className="h-5 w-5" />
             </button>
           </div>
-          {isFlying ? (
-            <button type="button" onClick={handleBannerClick} className="bg-white/50 rounded-full absolute left-[-15px] bottom-[-20px] h-5 w-5">
-              <ChevronDown 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}
@@ -235,6 +230,12 @@ export default function HomeBanner() {
             )
           ) : null}
         </div>
+
+        {isFlying ? (
+          <button type="button" onClick={handleBannerClick} className="bg-white/50 rounded-full absolute left-4 bottom-3 h-5 w-5 animate-bounce">
+            <ChevronsDown className="inset-0 h-5 w-5" />
+          </button>
+        ) : null}
       </section>
 
       {/* Base content - always present under the banner */}

components/pages/create-video/CreateInput/VideoCreationForm.tsx

@@ -81,6 +81,7 @@ export default function VideoCreationForm() {
     const characterInputRef = useRef<HTMLInputElement>(null);
     const sceneInputRef = useRef<HTMLInputElement>(null);
     const propInputRef = useRef<HTMLInputElement>(null);
+    const mainTextInputRef = useRef<HTMLTextAreaElement>(null);
     const { uploadFile } = useUploadFile();
 
     /** Clear current template related states */
@@ -105,6 +106,9 @@ export default function VideoCreationForm() {
         setInputPlaceholder(template.generateText || template.name);
         setTemplateTitle(template.name);
         handleConfigChange('pcode', template.pcode || '');
+        setTimeout(() => {
+            mainTextInputRef.current?.focus();
+        }, 0);
     };
 
     /** Handle file upload */
@@ -346,10 +350,10 @@ export default function VideoCreationForm() {
             {/* Main Content Area with Border */}
             <div
                 data-alt="content-container"
-                className="flex-1 border border-white/10 rounded-3xl bg-gradient-to-br from-[#1a1a1a]/50 to-[#0a0a0a]/50 backdrop-blur-sm overflow-hidden flex flex-col"
+                className="flex-1 pt-2 border border-white/10 rounded-3xl bg-gradient-to-br from-[#1a1a1a]/50 to-[#0a0a0a]/50 backdrop-blur-sm overflow-hidden flex flex-col"
             >
                 {templateTitle && (
-                    <div data-alt="template-title" className="px-4 pt-2 flex items-center">
+                    <div data-alt="template-title" className="px-4 flex items-center">
                         <div data-alt="template-title-text" className="text-white text-xs font-bold truncate">
                             {templateTitle}
                         </div>
@@ -374,14 +378,23 @@ export default function VideoCreationForm() {
                         />
                     </div>
                 )}
-
+                {/* Template Description */}
+                {inputPlaceholder && (
+                    <div data-alt="template-description-wrapper" className="px-4">
+                        <div data-alt="template-description-text" className="italic text-white/50 text-sm">{inputPlaceholder}</div>
+                    </div>
+                )}
                 {/* Text Input Area - Middle */}
                 {shouldShowInput && (
-                    <div data-alt="text-input-wrapper" className="flex-1 px-4 py-4">
+                    <div data-alt="text-input-wrapper" className="flex-1 flex px-4 py-2">
+                        {isTemplateSelected?.freeInput[0].input_name && (
+                            <div data-alt="template-description-text" className="text-custom-blue text-sm pr-2">{isTemplateSelected?.freeInput[0].input_name}</div>
+                        )}
                         <textarea
                             data-alt="main-text-input"
+                            ref={mainTextInputRef}
                             className="w-full h-full bg-transparent text-gray-300 text-base placeholder-gray-500 resize-none outline-none border-none"
-                            placeholder={inputPlaceholder || "Describe the story you want to make..."}
+                            placeholder={isTemplateSelected?.freeInput[0].user_tips || "Describe the story you want to make..."}
                             value={inputText}
                             onChange={(e) => setInputText(e.target.value)}
                         />
@@ -489,7 +502,7 @@ export default function VideoCreationForm() {
                                                         >
                                                             <span className="truncate">{tpl.name}</span>
                                                             {/* Floating actions on hover, right-aligned and overlaying the name */}
-                                                            <div className="absolute px-2 right-2 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity z-10">
+                                                            <div className="absolute right-0 top-1/2 -translate-y-1/2 flex items-center gap-1 opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity z-10">
                                                                 <button
                                                                     data-alt={`mention-template-use-${tplKey}`}
                                                                     className="px-0 py-1 text-xs rounded-full hover:text-custom-blue/80"