76 lines
3.1 KiB
TypeScript
76 lines
3.1 KiB
TypeScript
|
|
||
|
|
import React from 'react';
|
||
|
|
import { GenerationStep } from '../types';
|
||
|
|
import { Wand2, Download, FolderOpen, Settings } from 'lucide-react';
|
||
|
|
import PipelineVisualizer from './PipelineVisualizer';
|
||
|
|
|
||
|
|
interface HeaderProps {
|
||
|
|
step: GenerationStep;
|
||
|
|
setStep: (step: GenerationStep) => void;
|
||
|
|
isAnalyzing: boolean;
|
||
|
|
onSave: () => void;
|
||
|
|
onLoadRef: React.RefObject<HTMLInputElement>;
|
||
|
|
onLoad: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||
|
|
onOpenSettings: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Header: React.FC<HeaderProps> = ({
|
||
|
|
step,
|
||
|
|
setStep,
|
||
|
|
isAnalyzing,
|
||
|
|
onSave,
|
||
|
|
onLoadRef,
|
||
|
|
onLoad,
|
||
|
|
onOpenSettings
|
||
|
|
}) => {
|
||
|
|
return (
|
||
|
|
<header className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-[95%] max-w-7xl">
|
||
|
|
{/* Height increased to h-28 to prevent clipping of Visualizer labels */}
|
||
|
|
<div className="glass-card rounded-2xl px-6 h-28 flex items-center justify-between shadow-2xl shadow-black/50 relative">
|
||
|
|
|
||
|
|
{/* Logo */}
|
||
|
|
<div
|
||
|
|
className="flex items-center gap-3 cursor-pointer group z-10 shrink-0"
|
||
|
|
onClick={() => setStep(GenerationStep.PROJECT_SELECTION)}
|
||
|
|
>
|
||
|
|
<div className="w-10 h-10 bg-gradient-to-br from-indigo-500 via-purple-600 to-pink-500 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/30 group-hover:scale-105 transition-transform">
|
||
|
|
<Wand2 className="text-white w-5 h-5" />
|
||
|
|
</div>
|
||
|
|
<div className="hidden md:block">
|
||
|
|
<h1 className="font-bold text-xl tracking-tight text-white group-hover:text-glow transition-all">
|
||
|
|
Lumina <span className="font-light opacity-70">Studio</span>
|
||
|
|
</h1>
|
||
|
|
<p className="text-[10px] text-zinc-400 uppercase tracking-widest">AI 影視神經網絡流水線</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Pipeline Visualizer (The DAG) */}
|
||
|
|
<div className="flex-1 px-8 hidden lg:block h-full">
|
||
|
|
<PipelineVisualizer
|
||
|
|
currentStep={step}
|
||
|
|
onNavigate={(s) => setStep(s)}
|
||
|
|
isProcessing={isAnalyzing}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Actions */}
|
||
|
|
<div className="flex items-center gap-3 shrink-0 z-10">
|
||
|
|
<button onClick={onSave} className="p-2.5 text-zinc-400 hover:text-green-400 hover:bg-white/5 rounded-full transition-all" title="匯出專案 (Zip)">
|
||
|
|
<Download className="w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
<button onClick={() => onLoadRef.current?.click()} className="p-2.5 text-zinc-400 hover:text-blue-400 hover:bg-white/5 rounded-full transition-all" title="匯入專案 (Zip)">
|
||
|
|
<FolderOpen className="w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
<input type="file" ref={onLoadRef} accept=".zip" className="hidden" onChange={onLoad} />
|
||
|
|
<div className="w-px h-8 bg-white/10 mx-2" />
|
||
|
|
<button onClick={onOpenSettings} className="p-2.5 text-zinc-400 hover:text-white hover:bg-white/5 rounded-full transition-all" title="設定">
|
||
|
|
<Settings className="w-5 h-5" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Header;
|