更新

frontend/src/features/home/ui/ScriptEditor.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
-import { FileText, Languages, Loader2, RotateCcw, Sparkles } from "lucide-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" },
@@ -23,6 +24,10 @@ interface ScriptEditorProps {
   isTranslating: boolean;
   hasOriginalText: boolean;
   onRestoreOriginal: () => void;
+  savedScripts: SavedScript[];
+  onSaveScript: () => void;
+  onLoadScript: (content: string) => void;
+  onDeleteScript: (id: string) => void;
 }
 
 export function ScriptEditor({
@@ -35,9 +40,15 @@ export function ScriptEditor({
   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;
@@ -50,21 +61,81 @@ export function ScriptEditor({
     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">
+        <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="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"
+            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" />
             文案提取助手
@@ -73,22 +144,22 @@ export function ScriptEditor({
             <button
               onClick={() => setShowLangMenu((prev) => !prev)}
               disabled={isTranslating || !text.trim()}
-              className={`px-2 py-1 text-xs rounded transition-all whitespace-nowrap ${
+              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 ? (
-                <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">
+                <>
                   <Languages className="h-3.5 w-3.5" />
                   AI多语言
-                </span>
+                </>
               )}
             </button>
             {showLangMenu && (
@@ -120,21 +191,21 @@ export function ScriptEditor({
           <button
             onClick={onGenerateMeta}
             disabled={isGeneratingMeta || !text.trim()}
-            className={`px-2 py-1 text-xs rounded transition-all whitespace-nowrap ${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 ? (
-              <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>
@@ -145,9 +216,20 @@ export function ScriptEditor({
         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">
+      <div className="flex items-center justify-between mt-2 text-sm text-gray-400">
         <span>{text.length} 字</span>
-        <span>预计时长: ~{Math.ceil(text.length / 4)} 秒</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>
   );