forked from 77media/video-flow
314 lines
11 KiB
TypeScript
314 lines
11 KiB
TypeScript
'use client';
|
|
|
|
import React, { useRef, useEffect, useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { Trash2, RefreshCw, Sun, Moon, Cloud, CloudRain, CloudSnow, CloudLightning, Sparkles, Clock, MapPin, Palette, Check, Plus } from 'lucide-react';
|
|
import { cn } from '@/public/lib/utils';
|
|
import SceneEditor from './scene-editor';
|
|
|
|
interface SceneEnvironment {
|
|
time: {
|
|
period: '清晨' | '上午' | '中午' | '下午' | '傍晚' | '夜晚' | '深夜';
|
|
specific?: string;
|
|
};
|
|
location: {
|
|
main: string;
|
|
detail?: string;
|
|
};
|
|
weather: {
|
|
type: '晴天' | '多云' | '雨天' | '雪天' | '雷暴' | '阴天';
|
|
description?: string;
|
|
};
|
|
atmosphere: {
|
|
lighting: string;
|
|
mood: string;
|
|
};
|
|
}
|
|
|
|
interface SceneTabContentProps {
|
|
taskSketch: any[];
|
|
currentSketchIndex: number;
|
|
onSketchSelect: (index: number) => void;
|
|
}
|
|
|
|
interface SceneSketch {
|
|
id: string;
|
|
script: string;
|
|
environment: SceneEnvironment;
|
|
}
|
|
|
|
// Mock 数据
|
|
const mockSketch: SceneSketch = {
|
|
id: '1',
|
|
script: '教室里洒满了温暖的阳光，透过窗户的光线在地板上画出了长长的影子。黑板上还留着上节课的板书，几个学生正在整理自己的书包。教室后排的绿植在微风中轻轻摇曳，为这个平静的午后增添了一丝生机。',
|
|
environment: {
|
|
time: {
|
|
period: '下午',
|
|
specific: '午后2点左右'
|
|
},
|
|
location: {
|
|
main: '教室',
|
|
detail: '高中教室，靠窗的位置'
|
|
},
|
|
weather: {
|
|
type: '晴天',
|
|
description: '阳光明媚，微风轻拂'
|
|
},
|
|
atmosphere: {
|
|
lighting: '自然光线充足，温暖的阳光从窗户斜射入室内',
|
|
mood: '安静祥和，充满生机与活力'
|
|
}
|
|
}
|
|
};
|
|
|
|
export function SceneTabContent({
|
|
taskSketch = [],
|
|
currentSketchIndex = 0,
|
|
onSketchSelect
|
|
}: SceneTabContentProps) {
|
|
const thumbnailsRef = useRef<HTMLDivElement>(null);
|
|
const scriptsRef = useRef<HTMLDivElement>(null);
|
|
|
|
// 确保 taskSketch 是数组
|
|
const sketches = Array.isArray(taskSketch) ? taskSketch : [];
|
|
|
|
const [localSketch, setLocalSketch] = useState(mockSketch);
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
|
|
// 天气图标映射
|
|
const weatherIcons = {
|
|
'晴天': Sun,
|
|
'多云': Cloud,
|
|
'雨天': CloudRain,
|
|
'雪天': CloudSnow,
|
|
'雷暴': CloudLightning,
|
|
'阴天': Cloud
|
|
};
|
|
|
|
// 时间选项
|
|
const timeOptions = ['清晨', '上午', '中午', '下午', '傍晚', '夜晚', '深夜'];
|
|
|
|
// 处理脚本更新
|
|
const handleScriptChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
|
setLocalSketch({
|
|
...localSketch,
|
|
script: e.target.value
|
|
});
|
|
|
|
// 自动调整文本框高度
|
|
if (textareaRef.current) {
|
|
textareaRef.current.style.height = 'auto';
|
|
textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
|
|
}
|
|
};
|
|
|
|
// 处理智能优化
|
|
const handleSmartOptimize = () => {
|
|
console.log('Optimizing scene description...');
|
|
// TODO: 调用 AI 优化接口
|
|
};
|
|
|
|
// 自动滚动到选中项
|
|
useEffect(() => {
|
|
if (thumbnailsRef.current && scriptsRef.current) {
|
|
const thumbnailContainer = thumbnailsRef.current;
|
|
const scriptContainer = scriptsRef.current;
|
|
|
|
// 计算缩略图滚动位置
|
|
const thumbnailWidth = thumbnailContainer.children[0]?.clientWidth ?? 0;
|
|
const thumbnailGap = 16; // gap-4 = 16px
|
|
const thumbnailScrollPosition = (thumbnailWidth + thumbnailGap) * currentSketchIndex;
|
|
|
|
// 计算脚本文字滚动位置
|
|
const scriptElement = scriptContainer.children[currentSketchIndex] as HTMLElement;
|
|
const scriptScrollPosition = scriptElement?.offsetLeft ?? 0;
|
|
|
|
// 平滑滚动到目标位置
|
|
thumbnailContainer.scrollTo({
|
|
left: thumbnailScrollPosition - thumbnailContainer.clientWidth / 2 + thumbnailWidth / 2,
|
|
behavior: 'smooth'
|
|
});
|
|
|
|
scriptContainer.scrollTo({
|
|
left: scriptScrollPosition - scriptContainer.clientWidth / 2 + scriptElement?.clientWidth / 2,
|
|
behavior: 'smooth'
|
|
});
|
|
}
|
|
}, [currentSketchIndex]);
|
|
|
|
// 如果没有数据，显示空状态
|
|
if (sketches.length === 0) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[400px] text-white/50">
|
|
<p>No scene data</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2">
|
|
{/* 上部分 */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
>
|
|
{/* 分镜缩略图行 */}
|
|
<div className="relative">
|
|
<div
|
|
ref={thumbnailsRef}
|
|
className="relative flex gap-4 overflow-x-auto p-2 hide-scrollbar"
|
|
>
|
|
<div className="flex gap-4 min-w-fit">
|
|
{sketches.map((sketch, index) => (
|
|
<motion.div
|
|
key={sketch.id || index}
|
|
className={cn(
|
|
'relative flex-shrink-0 w-32 aspect-video rounded-lg overflow-hidden cursor-pointer group',
|
|
currentSketchIndex === index ? 'ring-2 ring-blue-500' : 'hover:ring-2 hover:ring-blue-500/50'
|
|
)}
|
|
onClick={() => onSketchSelect(index)}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
<img
|
|
src={sketch.url}
|
|
alt={`Sketch ${index + 1}`}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute bottom-0 left-0 right-0 p-1 bg-gradient-to-t from-black/60 to-transparent">
|
|
<span className="text-xs text-white/90">Scene {index + 1}</span>
|
|
</div>
|
|
{/* 鼠标悬浮/移出 显示/隐藏 删除图标 */}
|
|
<div className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
console.log('Delete sketch');
|
|
}}
|
|
className="text-red-500"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
{/* 新增占位符 */}
|
|
<motion.div
|
|
className={cn(
|
|
'relative flex-shrink-0 w-32 aspect-video rounded-lg cursor-pointer',
|
|
'bg-white/5 hover:bg-white/10 transition-colors',
|
|
'flex items-center justify-center',
|
|
'border-2 border-dashed border-white/20 hover:border-white/30'
|
|
)}
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => console.log('Add new sketch')}
|
|
>
|
|
<div className="flex flex-col items-center gap-2 text-white/50">
|
|
<Plus className="w-6 h-6" />
|
|
<span className="text-xs">添加场景</span>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 脚本预览行 - 单行滚动 */}
|
|
<div className="relative group">
|
|
<div
|
|
ref={scriptsRef}
|
|
className="flex overflow-x-auto hide-scrollbar py-2 gap-1"
|
|
>
|
|
{sketches.map((script, index) => {
|
|
const isActive = currentSketchIndex === index;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
className={cn(
|
|
'flex-shrink-0 cursor-pointer transition-all duration-300',
|
|
isActive ? 'text-white' : 'text-white/50 hover:text-white/80'
|
|
)}
|
|
onClick={() => onSketchSelect(index)}
|
|
initial={false}
|
|
animate={{
|
|
scale: isActive ? 1.02 : 1,
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm whitespace-nowrap">
|
|
{script.script}
|
|
</span>
|
|
{index < sketches.length - 1 && (
|
|
<span className="text-white/20">|</span>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* 渐变遮罩 */}
|
|
<div className="absolute left-0 top-0 bottom-0 w-8 bg-gradient-to-r from-[#1a1b1e] to-transparent pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
<div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-[#1a1b1e] to-transparent pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* 下部分 */}
|
|
<motion.div
|
|
className="grid grid-cols-2 gap-6"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
>
|
|
{/* 左列：脚本编辑器 */}
|
|
<div className="space-y-4">
|
|
{/* 选中的分镜预览 */}
|
|
<motion.div
|
|
className="aspect-video rounded-lg overflow-hidden"
|
|
layoutId={`sketch-preview-${currentSketchIndex}`}
|
|
>
|
|
<img
|
|
src={sketches[currentSketchIndex]?.url}
|
|
alt={`Sketch ${currentSketchIndex + 1}`}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</motion.div>
|
|
{/* 操作按钮 */}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
onClick={() => console.log('Apply changes')}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 bg-green-500/10 hover:bg-green-500/20
|
|
text-green-500 rounded-lg transition-colors"
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
<span>应用</span>
|
|
</button>
|
|
<button
|
|
onClick={() => console.log('Regenerate')}
|
|
className="flex items-center justify-center gap-2 px-4 py-3 bg-blue-500/10 hover:bg-blue-500/20
|
|
text-blue-500 rounded-lg transition-colors"
|
|
>
|
|
<RefreshCw className="w-4 h-4" />
|
|
<span>Regenerate</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右列：环境设置 */}
|
|
<div className="space-y-4">
|
|
{/* 使用新的场景编辑器组件 */}
|
|
<SceneEditor
|
|
initialDescription={localSketch.script}
|
|
onDescriptionChange={(description) => {
|
|
setLocalSketch({
|
|
...localSketch,
|
|
script: description
|
|
});
|
|
}}
|
|
className="min-h-[200px]"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|