237 lines
9.4 KiB
TypeScript
237 lines
9.4 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
||
import { FileText, History, Languages, Loader2, RotateCcw, Save, Sparkles, Trash2 } from "lucide-react";
|
||
import type { SavedScript } from "@/features/home/model/useSavedScripts";
|
||
|
||
const LANGUAGES = [
|
||
{ code: "English", label: "英语 English" },
|
||
{ code: "日本語", label: "日语 日本語" },
|
||
{ code: "한국어", label: "韩语 한국어" },
|
||
{ code: "Français", label: "法语 Français" },
|
||
{ code: "Deutsch", label: "德语 Deutsch" },
|
||
{ code: "Español", label: "西班牙语 Español" },
|
||
{ code: "Русский", label: "俄语 Русский" },
|
||
{ code: "Italiano", label: "意大利语 Italiano" },
|
||
{ code: "Português", label: "葡萄牙语 Português" },
|
||
];
|
||
|
||
interface ScriptEditorProps {
|
||
text: string;
|
||
onChangeText: (value: string) => void;
|
||
onOpenExtractModal: () => void;
|
||
onGenerateMeta: () => void;
|
||
isGeneratingMeta: boolean;
|
||
onTranslate: (targetLang: string) => void;
|
||
isTranslating: boolean;
|
||
hasOriginalText: boolean;
|
||
onRestoreOriginal: () => void;
|
||
savedScripts: SavedScript[];
|
||
onSaveScript: () => void;
|
||
onLoadScript: (content: string) => void;
|
||
onDeleteScript: (id: string) => void;
|
||
}
|
||
|
||
export function ScriptEditor({
|
||
text,
|
||
onChangeText,
|
||
onOpenExtractModal,
|
||
onGenerateMeta,
|
||
isGeneratingMeta,
|
||
onTranslate,
|
||
isTranslating,
|
||
hasOriginalText,
|
||
onRestoreOriginal,
|
||
savedScripts,
|
||
onSaveScript,
|
||
onLoadScript,
|
||
onDeleteScript,
|
||
}: ScriptEditorProps) {
|
||
const [showLangMenu, setShowLangMenu] = useState(false);
|
||
const langMenuRef = useRef<HTMLDivElement>(null);
|
||
const [showHistoryMenu, setShowHistoryMenu] = useState(false);
|
||
const historyMenuRef = useRef<HTMLDivElement>(null);
|
||
|
||
useEffect(() => {
|
||
if (!showLangMenu) return;
|
||
const handleClickOutside = (e: MouseEvent) => {
|
||
if (langMenuRef.current && !langMenuRef.current.contains(e.target as Node)) {
|
||
setShowLangMenu(false);
|
||
}
|
||
};
|
||
document.addEventListener("mousedown", handleClickOutside);
|
||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||
}, [showLangMenu]);
|
||
|
||
useEffect(() => {
|
||
if (!showHistoryMenu) return;
|
||
const handleClickOutside = (e: MouseEvent) => {
|
||
if (historyMenuRef.current && !historyMenuRef.current.contains(e.target as Node)) {
|
||
setShowHistoryMenu(false);
|
||
}
|
||
};
|
||
document.addEventListener("mousedown", handleClickOutside);
|
||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||
}, [showHistoryMenu]);
|
||
|
||
const handleSelectLang = (langCode: string) => {
|
||
setShowLangMenu(false);
|
||
onTranslate(langCode);
|
||
};
|
||
|
||
const formatDate = (ts: number) => {
|
||
const d = new Date(ts);
|
||
return `${(d.getMonth() + 1).toString().padStart(2, "0")}-${d.getDate().toString().padStart(2, "0")} ${d.getHours().toString().padStart(2, "0")}:${d.getMinutes().toString().padStart(2, "0")}`;
|
||
};
|
||
|
||
return (
|
||
<div className="relative z-10 bg-white/5 rounded-2xl p-4 sm:p-6 border border-white/10 backdrop-blur-sm">
|
||
<div className="mb-4 space-y-3">
|
||
<h2 className="text-base sm:text-lg font-semibold text-white flex items-center gap-2">
|
||
✍️ 文案提取与编辑
|
||
</h2>
|
||
<div className="flex gap-2 flex-wrap justify-end items-center">
|
||
{/* 历史文案 */}
|
||
<div className="relative" ref={historyMenuRef}>
|
||
<button
|
||
onClick={() => setShowHistoryMenu((prev) => !prev)}
|
||
className="h-7 px-2.5 text-xs rounded transition-all whitespace-nowrap bg-gray-600 hover:bg-gray-500 text-white inline-flex items-center gap-1"
|
||
>
|
||
<History className="h-3.5 w-3.5" />
|
||
历史文案
|
||
</button>
|
||
{showHistoryMenu && (
|
||
<div className="absolute left-0 top-full mt-1 z-50 bg-gray-800 border border-white/10 rounded-lg shadow-xl py-1 min-w-[220px] max-h-[280px] overflow-y-auto">
|
||
{savedScripts.length === 0 ? (
|
||
<div className="px-3 py-3 text-xs text-gray-500 text-center">暂无保存的文案</div>
|
||
) : (
|
||
savedScripts.map((script) => (
|
||
<div
|
||
key={script.id}
|
||
className="flex items-center gap-1 px-3 py-1.5 hover:bg-white/10 transition-colors group"
|
||
>
|
||
<button
|
||
onClick={() => {
|
||
onLoadScript(script.content);
|
||
setShowHistoryMenu(false);
|
||
}}
|
||
className="flex-1 text-left min-w-0"
|
||
>
|
||
<div className="text-xs text-gray-200 truncate">{script.name}</div>
|
||
<div className="text-[10px] text-gray-500">{formatDate(script.savedAt)}</div>
|
||
</button>
|
||
<button
|
||
onClick={(e) => {
|
||
e.stopPropagation();
|
||
onDeleteScript(script.id);
|
||
}}
|
||
className="opacity-0 group-hover:opacity-100 p-1 text-gray-500 hover:text-red-400 transition-all shrink-0"
|
||
>
|
||
<Trash2 className="h-3 w-3" />
|
||
</button>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={onOpenExtractModal}
|
||
className="h-7 px-2.5 text-xs rounded transition-all whitespace-nowrap bg-purple-600 hover:bg-purple-700 text-white inline-flex items-center gap-1"
|
||
>
|
||
<FileText className="h-3.5 w-3.5" />
|
||
文案提取助手
|
||
</button>
|
||
<div className="relative" ref={langMenuRef}>
|
||
<button
|
||
onClick={() => setShowLangMenu((prev) => !prev)}
|
||
disabled={isTranslating || !text.trim()}
|
||
className={`h-7 px-2.5 text-xs rounded transition-all whitespace-nowrap inline-flex items-center gap-1 ${
|
||
isTranslating || !text.trim()
|
||
? "bg-gray-600 cursor-not-allowed text-gray-400"
|
||
: "bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 text-white"
|
||
}`}
|
||
>
|
||
{isTranslating ? (
|
||
<>
|
||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||
翻译中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Languages className="h-3.5 w-3.5" />
|
||
AI多语言
|
||
</>
|
||
)}
|
||
</button>
|
||
{showLangMenu && (
|
||
<div className="absolute right-0 top-full mt-1 z-50 bg-gray-800 border border-white/10 rounded-lg shadow-xl py-1 min-w-[160px]">
|
||
{hasOriginalText && (
|
||
<>
|
||
<button
|
||
onClick={() => { setShowLangMenu(false); onRestoreOriginal(); }}
|
||
className="w-full text-left px-3 py-1.5 text-xs text-amber-400 hover:bg-white/10 transition-colors flex items-center gap-1"
|
||
>
|
||
<RotateCcw className="h-3 w-3" />
|
||
还原原文
|
||
</button>
|
||
<div className="border-t border-white/10 my-1" />
|
||
</>
|
||
)}
|
||
{LANGUAGES.map((lang) => (
|
||
<button
|
||
key={lang.code}
|
||
onClick={() => handleSelectLang(lang.code)}
|
||
className="w-full text-left px-3 py-1.5 text-xs text-gray-200 hover:bg-white/10 transition-colors"
|
||
>
|
||
{lang.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={onGenerateMeta}
|
||
disabled={isGeneratingMeta || !text.trim()}
|
||
className={`h-7 px-2.5 text-xs rounded transition-all whitespace-nowrap inline-flex items-center gap-1 ${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 ? (
|
||
<>
|
||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||
生成中...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Sparkles className="h-3.5 w-3.5" />
|
||
AI生成标题标签
|
||
</>
|
||
)}
|
||
</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 items-center justify-between mt-2 text-sm text-gray-400">
|
||
<span>{text.length} 字</span>
|
||
<button
|
||
onClick={onSaveScript}
|
||
disabled={!text.trim()}
|
||
className={`px-2.5 py-1 text-xs rounded transition-all flex items-center gap-1 ${
|
||
!text.trim()
|
||
? "bg-gray-700 cursor-not-allowed text-gray-500"
|
||
: "bg-amber-600/80 hover:bg-amber-600 text-white"
|
||
}`}
|
||
>
|
||
<Save className="h-3 w-3" />
|
||
保存文案
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|