67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { FileText, Loader2, Sparkles } from "lucide-react";
|
||
|
||
interface ScriptEditorProps {
|
||
text: string;
|
||
onChangeText: (value: string) => void;
|
||
onOpenExtractModal: () => void;
|
||
onGenerateMeta: () => void;
|
||
isGeneratingMeta: boolean;
|
||
}
|
||
|
||
export function ScriptEditor({
|
||
text,
|
||
onChangeText,
|
||
onOpenExtractModal,
|
||
onGenerateMeta,
|
||
isGeneratingMeta,
|
||
}: ScriptEditorProps) {
|
||
return (
|
||
<div className="bg-white/5 rounded-2xl p-6 border border-white/10 backdrop-blur-sm">
|
||
<div className="flex justify-between items-center gap-2 mb-4">
|
||
<h2 className="text-base sm:text-lg font-semibold text-white flex items-center gap-2 whitespace-nowrap">
|
||
✍️ 文案提取与编辑
|
||
</h2>
|
||
<div className="flex gap-2">
|
||
<button
|
||
onClick={onOpenExtractModal}
|
||
className="px-2 py-1 text-xs rounded transition-all whitespace-nowrap bg-purple-600 hover:bg-purple-700 text-white flex items-center gap-1"
|
||
>
|
||
<FileText className="h-3.5 w-3.5" />
|
||
文案提取助手
|
||
</button>
|
||
<button
|
||
onClick={onGenerateMeta}
|
||
disabled={isGeneratingMeta || !text.trim()}
|
||
className={`px-2 py-1 text-xs rounded transition-all whitespace-nowrap ${isGeneratingMeta || !text.trim()
|
||
? "bg-gray-600 cursor-not-allowed text-gray-400"
|
||
: "bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white"
|
||
}`}
|
||
>
|
||
{isGeneratingMeta ? (
|
||
<span className="flex items-center gap-1">
|
||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||
生成中...
|
||
</span>
|
||
) : (
|
||
<span className="flex items-center gap-1">
|
||
<Sparkles className="h-3.5 w-3.5" />
|
||
AI生成标题标签
|
||
</span>
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<textarea
|
||
value={text}
|
||
onChange={(e) => onChangeText(e.target.value)}
|
||
placeholder="请输入你想说的话..."
|
||
className="w-full h-40 bg-black/30 border border-white/10 rounded-xl p-4 text-white placeholder-gray-500 resize-none focus:outline-none focus:border-purple-500 transition-colors hide-scrollbar"
|
||
/>
|
||
<div className="flex justify-between mt-2 text-sm text-gray-400">
|
||
<span>{text.length} 字</span>
|
||
<span>预计时长: ~{Math.ceil(text.length / 4)} 秒</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|