xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

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

Browse Source
This commit is contained in:
moux1024 2025-10-21 19:44:52 +08:00
parent 7406d2aceb
commit 94e18b8110
2 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/HomeBanner.tsx
View File

@ -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 */}

25
components/pages/create-video/CreateInput/VideoCreationForm.tsx
View File

@ -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"