feat: enhance ecommerce UI — sidebar, transitions, ratio options, cancel buttons, i18n fixes

src/features/ecommerce/EcommerceVideoWorkspace.tsx

@@ -44,6 +44,7 @@ interface EcommerceVideoWorkspaceProps {
   onRequestLogin?: () => void;
   onOpenHistory?: () => void;
   triggerPlan?: number;
+  saveRef?: { current: (() => void) | null };
 }
 
 const ALL_STEPS: PlanStep[] = [
@@ -108,6 +109,7 @@ export default function EcommerceVideoWorkspace({
   onRequestLogin,
   onOpenHistory,
   triggerPlan,
+  saveRef,
 }: EcommerceVideoWorkspaceProps) {
   const [stage, setStage] = useState<EcommerceVideoStage>("idle");
   const [planResult, setPlanResult] = useState<EcommerceVideoPlanResult | null>(null);
@@ -195,6 +197,32 @@ export default function EcommerceVideoWorkspace({
     }).catch(() => {});
   }, [stage, planResult, scenes, sourceImageUrls, platform, aspectRatio, durationSeconds, resolution]);
 
+  // ── Expose manual save via ref ──────────────────────────
+  const planResultRef = useRef(planResult);
+  planResultRef.current = planResult;
+  const scenesRef = useRef(scenes);
+  scenesRef.current = scenes;
+  const sourceImageUrlsRef = useRef(sourceImageUrls);
+  sourceImageUrlsRef.current = sourceImageUrls;
+
+  useEffect(() => {
+    if (!saveRef) return;
+    saveRef.current = () => {
+      const currentPlan = planResultRef.current;
+      const currentScenes = scenesRef.current;
+      const currentSources = sourceImageUrlsRef.current;
+      if (!currentPlan || !currentScenes.length) return;
+      const title = currentPlan.storyboard?.video_title || currentPlan.summary?.product_name || "电商广告视频";
+      saveVideoHistory({
+        title,
+        config: { platform, aspectRatio, durationSeconds, resolution },
+        plan: currentPlan as unknown as Record<string, unknown>,
+        scenes: currentScenes.map((s) => ({ sceneId: s.sceneId, prompt: s.prompt, imageUrl: s.imageUrl, videoUrl: s.resultUrl })),
+        sourceImageUrls: currentSources,
+      }).catch(() => {});
+    };
+  }, [saveRef, platform, aspectRatio, durationSeconds, resolution]);
+
   // ── Keep-alive: resume polling for running tasks ──────────
   useEffect(() => {
     if (keepalivePollingStartedRef.current) return;