279 lines
14 KiB
TypeScript
279 lines
14 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useCallback } from "react";
|
||
import { Loader2 } from "lucide-react";
|
||
import { useScriptExtraction } from "./script-extraction/useScriptExtraction";
|
||
import { AppModal, AppModalHeader } from "@/shared/ui/AppModal";
|
||
|
||
interface ScriptExtractionModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
onApply?: (text: string) => void;
|
||
}
|
||
|
||
export default function ScriptExtractionModal({
|
||
isOpen,
|
||
onClose,
|
||
onApply,
|
||
}: ScriptExtractionModalProps) {
|
||
const {
|
||
isLoading,
|
||
script,
|
||
error,
|
||
step,
|
||
dragActive,
|
||
selectedFile,
|
||
activeTab,
|
||
inputUrl,
|
||
setActiveTab,
|
||
setInputUrl,
|
||
handleDrag,
|
||
handleDrop,
|
||
handleFileChange,
|
||
handleExtract,
|
||
copyToClipboard,
|
||
resetToConfig,
|
||
clearSelectedFile,
|
||
clearInputUrl,
|
||
} = useScriptExtraction({ isOpen });
|
||
|
||
// 快捷键：Enter 提交（仅在 config 步骤）
|
||
const canExtract = (activeTab === "file" && selectedFile) || (activeTab === "url" && inputUrl.trim());
|
||
|
||
const handleKeyDown = useCallback((e: KeyboardEvent) => {
|
||
if (e.key === "Enter" && !e.shiftKey && step === "config" && canExtract && !isLoading) {
|
||
e.preventDefault();
|
||
handleExtract();
|
||
}
|
||
}, [step, canExtract, isLoading, handleExtract]);
|
||
|
||
useEffect(() => {
|
||
if (!isOpen) return;
|
||
document.addEventListener("keydown", handleKeyDown);
|
||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||
}, [isOpen, handleKeyDown]);
|
||
|
||
if (!isOpen) return null;
|
||
|
||
const handleApplyAndClose = (text: string) => {
|
||
onApply?.(text);
|
||
onClose();
|
||
};
|
||
|
||
const handleExtractNext = () => {
|
||
resetToConfig();
|
||
clearSelectedFile();
|
||
clearInputUrl();
|
||
};
|
||
|
||
return (
|
||
<AppModal
|
||
isOpen={isOpen}
|
||
onClose={onClose}
|
||
panelClassName="w-full max-w-2xl max-h-[90vh] rounded-2xl border border-white/10 bg-[#171821]/95 shadow-[0_24px_80px_rgba(0,0,0,0.55)] overflow-hidden flex flex-col"
|
||
closeOnOverlay
|
||
>
|
||
<AppModalHeader title="📜 文案提取助手" onClose={onClose} />
|
||
|
||
{/* Content */}
|
||
<div className="flex-1 overflow-y-auto p-6">
|
||
{step === "config" && (
|
||
<div className="space-y-6">
|
||
{/* Tabs */}
|
||
<div className="flex p-1 bg-white/5 rounded-xl border border-white/10">
|
||
<button
|
||
onClick={() => setActiveTab("url")}
|
||
className={`flex-1 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "url"
|
||
? "bg-purple-600 text-white shadow-lg"
|
||
: "text-gray-400 hover:text-white hover:bg-white/5"
|
||
}`}
|
||
>
|
||
🔗 粘贴链接
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab("file")}
|
||
className={`flex-1 py-2 rounded-lg text-sm font-medium transition-all ${activeTab === "file"
|
||
? "bg-purple-600 text-white shadow-lg"
|
||
: "text-gray-400 hover:text-white hover:bg-white/5"
|
||
}`}
|
||
>
|
||
📂 上传文件
|
||
</button>
|
||
</div>
|
||
|
||
{/* URL Input Area */}
|
||
{activeTab === "url" && (
|
||
<div className="space-y-2 py-4">
|
||
<div className="relative">
|
||
<input
|
||
type="text"
|
||
value={inputUrl}
|
||
onChange={(e) => setInputUrl(e.target.value)}
|
||
placeholder="请粘贴抖音、B站等主流平台视频链接..."
|
||
className="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-4 text-white placeholder-gray-500 focus:outline-none focus:border-purple-500 transition-colors"
|
||
/>
|
||
{inputUrl && (
|
||
<button
|
||
onClick={clearInputUrl}
|
||
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-white"
|
||
>
|
||
✕
|
||
</button>
|
||
)}
|
||
</div>
|
||
<p className="text-xs text-gray-500 pl-1">
|
||
支持抖音、B站、微博、小红书等主流平台视频链接
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* File Upload Area */}
|
||
{activeTab === "file" && (
|
||
<div
|
||
className={`border-2 border-dashed rounded-xl p-8 text-center transition-colors ${dragActive
|
||
? "border-purple-500 bg-purple-500/10"
|
||
: "border-white/10 hover:border-white/20"
|
||
}`}
|
||
onDragEnter={handleDrag}
|
||
onDragLeave={handleDrag}
|
||
onDragOver={handleDrag}
|
||
onDrop={handleDrop}
|
||
>
|
||
{selectedFile ? (
|
||
<div className="space-y-2">
|
||
<p className="text-white">{selectedFile.name}</p>
|
||
<p className="text-sm text-gray-400">
|
||
{(selectedFile.size / 1024 / 1024).toFixed(2)} MB
|
||
</p>
|
||
<button
|
||
onClick={clearSelectedFile}
|
||
className="text-xs text-purple-400 hover:text-purple-300"
|
||
>
|
||
重新选择
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
<div className="text-4xl">📁</div>
|
||
<p className="text-gray-400">
|
||
拖放视频/音频文件到此处，或
|
||
<label className="text-purple-400 hover:text-purple-300 cursor-pointer">
|
||
点击选择
|
||
<input
|
||
type="file"
|
||
accept=".mp4,.mov,.avi,.mp3,.wav,.m4a"
|
||
onChange={handleFileChange}
|
||
className="hidden"
|
||
/>
|
||
</label>
|
||
</p>
|
||
<p className="text-xs text-gray-500">
|
||
支持 MP4, MOV, AVI, MP3, WAV, M4A
|
||
</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Error */}
|
||
{error && (
|
||
<div className="bg-red-500/10 border border-red-500/30 rounded-xl p-4">
|
||
<p className="text-red-400 text-sm">{error}</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Action Button */}
|
||
<div className="flex gap-3 pt-2">
|
||
<button
|
||
onClick={onClose}
|
||
className="flex-1 py-3 px-4 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-colors"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
onClick={handleExtract}
|
||
disabled={
|
||
(activeTab === "file" && !selectedFile) ||
|
||
(activeTab === "url" && !inputUrl.trim()) ||
|
||
isLoading
|
||
}
|
||
className="flex-1 py-3 px-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 disabled:opacity-50 disabled:cursor-not-allowed text-white rounded-xl transition-all font-medium shadow-lg flex items-center justify-center gap-2"
|
||
>
|
||
{isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : null}
|
||
开始提取
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{step === "processing" && (
|
||
<div className="flex flex-col items-center justify-center py-20">
|
||
<div className="relative w-20 h-20 mb-6">
|
||
<div className="absolute inset-0 border-4 border-purple-500/30 rounded-full"></div>
|
||
<div className="absolute inset-0 border-4 border-t-purple-500 rounded-full animate-spin"></div>
|
||
</div>
|
||
<h4 className="text-xl font-medium text-white mb-2">
|
||
正在处理中...
|
||
</h4>
|
||
<p className="text-sm text-gray-400 text-center max-w-sm px-4">
|
||
{activeTab === "url" && "正在下载视频..."}
|
||
<br />
|
||
正在进行语音识别...
|
||
<br />
|
||
<span className="opacity-75">
|
||
大文件可能需要几分钟，请不要关闭窗口
|
||
</span>
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{step === "result" && (
|
||
<div className="space-y-5">
|
||
<div className="flex justify-between items-center">
|
||
<h4 className="font-semibold text-gray-300 flex items-center gap-2">
|
||
🎙️ 识别结果
|
||
</h4>
|
||
<span className="text-xs text-gray-400">{script.length} 字</span>
|
||
</div>
|
||
|
||
<div className="bg-white/5 border border-white/10 rounded-xl p-4 max-h-72 overflow-y-auto hide-scrollbar">
|
||
<p className="text-gray-200 text-sm leading-relaxed whitespace-pre-wrap">
|
||
{script}
|
||
</p>
|
||
</div>
|
||
|
||
<div className={`grid ${onApply ? "grid-cols-2 sm:grid-cols-4" : "grid-cols-2 sm:grid-cols-3"} gap-2`}>
|
||
{onApply && (
|
||
<button
|
||
onClick={() => handleApplyAndClose(script)}
|
||
className="py-2.5 px-3 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white rounded-lg transition-colors text-sm"
|
||
>
|
||
填入文案
|
||
</button>
|
||
)}
|
||
<button
|
||
onClick={() => copyToClipboard(script)}
|
||
className="py-2.5 px-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors text-sm"
|
||
>
|
||
复制
|
||
</button>
|
||
<button
|
||
onClick={handleExtractNext}
|
||
className="py-2.5 px-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors text-sm"
|
||
>
|
||
提取下一个
|
||
</button>
|
||
<button
|
||
onClick={onClose}
|
||
className="py-2.5 px-3 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors text-sm"
|
||
>
|
||
关闭
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</AppModal>
|
||
);
|
||
}
|