forked from 77media/video-flow
370 lines
13 KiB
TypeScript
370 lines
13 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, ReplaceAll } from 'lucide-react';
|
||
import { cn } from '@/public/lib/utils';
|
||
import SceneEditor from './scene-editor';
|
||
import FloatingGlassPanel from './FloatingGlassPanel';
|
||
import { ReplaceScenePanel, mockShots } from './replace-scene-panel';
|
||
import HorizontalScroller from './HorizontalScroller';
|
||
|
||
interface SceneEnvironment {
|
||
time: {
|
||
period: '清晨' | '上午' | '中午' | '下午' | '傍晚' | '夜晚' | '深夜';
|
||
specific?: string;
|
||
};
|
||
location: {
|
||
main: string;
|
||
detail?: string;
|
||
};
|
||
weather: {
|
||
type: '晴天' | '多云' | '雨天' | '雪天' | '雷暴' | '阴天';
|
||
description?: string;
|
||
};
|
||
atmosphere: {
|
||
lighting: string;
|
||
mood: string;
|
||
};
|
||
}
|
||
|
||
interface SceneTabContentProps {
|
||
currentSketchIndex: number;
|
||
}
|
||
|
||
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({
|
||
currentSketchIndex = 0
|
||
}: SceneTabContentProps) {
|
||
const thumbnailsRef = useRef<HTMLDivElement>(null);
|
||
const scriptsRef = useRef<HTMLDivElement>(null);
|
||
|
||
// 确保 taskSketch 是数组
|
||
const sketches: any[] = [];
|
||
|
||
const [localSketch, setLocalSketch] = useState(mockSketch);
|
||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||
const [isReplacePanelOpen, setIsReplacePanelOpen] = useState(false);
|
||
const [replacePanelKey, setReplacePanelKey] = useState(0);
|
||
const [ignoreReplace, setIgnoreReplace] = useState(false);
|
||
const [currentScene, setCurrentScene] = useState({
|
||
url: '',
|
||
script: ''
|
||
});
|
||
|
||
// 天气图标映射
|
||
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]);
|
||
|
||
const handleReplaceScene = (url: string) => {
|
||
// setCurrentScene({
|
||
// ...currentScene,
|
||
// url: url
|
||
// });
|
||
|
||
// setIsReplacePanelOpen(true);
|
||
};
|
||
|
||
const handleConfirmReplace = (selectedShots: string[], addToLibrary: boolean) => {
|
||
// 处理替换确认逻辑
|
||
console.log('Selected shots:', selectedShots);
|
||
console.log('Add to library:', addToLibrary);
|
||
setIsReplacePanelOpen(false);
|
||
};
|
||
|
||
const handleCloseReplacePanel = () => {
|
||
setIsReplacePanelOpen(false);
|
||
setIgnoreReplace(true);
|
||
};
|
||
|
||
const handleChangeScene = (index: number) => {
|
||
// if (currentScene?.url !== sketches[currentSketchIndex]?.url && !ignoreReplace) {
|
||
// // 提示 场景已修改，弹出替换场景面板
|
||
// if (isReplacePanelOpen) {
|
||
// setReplacePanelKey(replacePanelKey + 1);
|
||
// } else {
|
||
// setIsReplacePanelOpen(true);
|
||
// }
|
||
// return;
|
||
// }
|
||
// setCurrentScene(sketches[index]);
|
||
};
|
||
|
||
// 如果没有数据，显示空状态
|
||
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">
|
||
<HorizontalScroller
|
||
itemWidth={128}
|
||
gap={0}
|
||
selectedIndex={currentSketchIndex}
|
||
onItemClick={(i: number) => handleChangeScene(i)}
|
||
>
|
||
{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'
|
||
)}
|
||
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>
|
||
))}
|
||
{/* 新增占位符 */}
|
||
{/* <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> */}
|
||
</HorizontalScroller>
|
||
</div>
|
||
|
||
{/* 脚本预览行 - 单行滚动 */}
|
||
<div className="relative group">
|
||
<HorizontalScroller
|
||
itemWidth={'auto'}
|
||
gap={0}
|
||
selectedIndex={currentSketchIndex}
|
||
onItemClick={(i: number) => handleChangeScene(i)}
|
||
>
|
||
{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'
|
||
)}
|
||
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>
|
||
);
|
||
})}
|
||
</HorizontalScroller>
|
||
|
||
{/* 渐变遮罩 */}
|
||
<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 relative"
|
||
layoutId={`sketch-preview-${currentSketchIndex}`}
|
||
>
|
||
<img
|
||
src={currentScene?.url || sketches[currentSketchIndex]?.url}
|
||
alt={`Scene ${currentSketchIndex + 1}`}
|
||
className="w-full h-full object-cover"
|
||
/>
|
||
</motion.div>
|
||
</div>
|
||
{/* 右列：脚本编辑器 */}
|
||
<div className="space-y-4">
|
||
<SceneEditor
|
||
initialDescription={localSketch.script}
|
||
onDescriptionChange={(description) => {
|
||
setLocalSketch({
|
||
...localSketch,
|
||
script: description
|
||
});
|
||
}}
|
||
onReplaceScene={handleReplaceScene}
|
||
className="min-h-[200px]"
|
||
/>
|
||
{/* 重新生成按钮、替换形象按钮 */}
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<motion.button
|
||
onClick={() => handleReplaceScene('https://c.huiying.video/images/5740cb7c-6e08-478f-9e7c-bca7f78a2bf6.jpg')}
|
||
className="flex items-center justify-center gap-2 px-4 py-3 bg-pink-500/10 hover:bg-pink-500/20
|
||
text-pink-500 rounded-lg transition-colors"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
<ReplaceAll className="w-4 h-4" />
|
||
<span>Replace</span>
|
||
</motion.button>
|
||
<motion.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"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
<RefreshCw className="w-4 h-4" />
|
||
<span>Regenerate</span>
|
||
</motion.button>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* 替换场景面板 */}
|
||
<FloatingGlassPanel open={isReplacePanelOpen} width='500px' r_key={replacePanelKey}>
|
||
<ReplaceScenePanel
|
||
shots={mockShots}
|
||
scene={{
|
||
id: currentSketchIndex.toString(),
|
||
name: `场景 ${currentSketchIndex + 1}`,
|
||
avatarUrl: currentScene?.url || sketches[currentSketchIndex]?.url
|
||
}}
|
||
onClose={handleCloseReplacePanel}
|
||
onConfirm={handleConfirmReplace}
|
||
/>
|
||
</FloatingGlassPanel>
|
||
</div>
|
||
);
|
||
}
|