feat: 对口型生成弹窗（加载动画+进度+取消按钮）

apps/web/src/pages/ai-avatar/AiAvatar.css

@@ -1150,3 +1150,29 @@
   flex-direction: column;
   gap: 4px;
 }
+
+/* ─ 对口型生成弹窗 Spinner ── */
+.aa-lipsync-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid #f0f0f5;
+  border-top-color: #6366f1;
+  border-radius: 50%;
+  animation: aa-spin 0.8s linear infinite;
+}
+
+@keyframes aa-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.aa-btn--danger {
+  background: #ff4d4f;
+  color: #fff;
+  border: none;
+}
+
+.aa-btn--danger:hover {
+  background: #ff7875;
+}

apps/web/src/pages/ai-avatar/AiAvatarPage.tsx

@@ -34,6 +34,11 @@ const AiAvatarPage: React.FC = () => {
     cover: false,
   })
 
+  /* ── 对口型生成弹窗 ── */
+  const [showLipsyncModal, setShowLipsyncModal] = useState(false)
+  const [lipsyncStatus, setLipsyncStatus] = useState<"generating" | "completed" | "failed">("generating")
+  const [lipsyncErrorMessage, setLipsyncErrorMessage] = useState("")
+
   /* ── 对口型轮询 ── */
   const lipsyncTimerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 
@@ -56,6 +61,11 @@ const AiAvatarPage: React.FC = () => {
       return
     }
     try {
+      // 显示生成弹窗
+      setShowLipsyncModal(true)
+      setLipsyncStatus("generating")
+      setLipsyncErrorMessage("")
+      
       // ① 先按素材 id 拿 file_url（#1809 补充：对齐后端新参数 video_url）
       console.log("[对口型] 开始生成:", {
         videoId: video.id,
@@ -71,6 +81,7 @@ const AiAvatarPage: React.FC = () => {
       const videoUrl = asset?.file_url
       if (!videoUrl) {
         console.error("[对口型] file_url 为空，asset:", asset)
+        setShowLipsyncModal(false)
         message.error("获取出镜视频播放地址失败，请重新选择素材")
         return
       }
@@ -84,20 +95,23 @@ const AiAvatarPage: React.FC = () => {
       const job = await createLipsyncJob(payload)
       console.log("[对口型] createLipsyncJob 响应:", { id: job.id, status: job.status })
       state.setLipsyncJob(job)
-      message.success("对口型任务已提交，生成中…")
       // 开始轮询
       if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
       lipsyncTimerRef.current = setInterval(async () => {
         try {
           const updated = await getLipsyncJob(job.id)
           state.setLipsyncJob(updated)
-          if (updated.status === "completed" || updated.status === "failed") {
+          if (updated.status === "completed") {
             if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
-            if (updated.status === "completed") {
+            setLipsyncStatus("completed")
+            setTimeout(() => {
+              setShowLipsyncModal(false)
               message.success("对口型视频生成完成")
-            } else {
-              message.error(updated.error_message || "对口型生成失败")
-            }
+            }, 1000)
+          } else if (updated.status === "failed") {
+            if (lipsyncTimerRef.current) clearInterval(lipsyncTimerRef.current)
+            setLipsyncStatus("failed")
+            setLipsyncErrorMessage(updated.error_message || "对口型生成失败")
           }
         } catch {
           // 忽略轮询错误（轮询期间不打扰用户）
@@ -109,11 +123,23 @@ const AiAvatarPage: React.FC = () => {
         data: (err as { response?: { data?: unknown } })?.response?.data,
         message: err instanceof Error ? err.message : String(err),
       })
+      setShowLipsyncModal(false)
       message.error(err instanceof Error ? err.message : "对口型任务提交失败，请重试")
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [state.selectedVideo, state.selectedVoice, state.scriptText])
 
+  // 取消对口型生成
+  const handleCancelLipsync = useCallback(() => {
+    if (lipsyncTimerRef.current) {
+      clearInterval(lipsyncTimerRef.current)
+      lipsyncTimerRef.current = null
+    }
+    setShowLipsyncModal(false)
+    setLipsyncStatus("generating")
+    setLipsyncErrorMessage("")
+  }, [])
+
   // 清理轮询
   useEffect(() => {
     return () => {
@@ -293,6 +319,56 @@ const AiAvatarPage: React.FC = () => {
           onRemove={state.removeBRollSegment}
         />
       )}
+
+      {/* 对口型生成弹窗 */}
+      {showLipsyncModal && (
+        <div className="aa-modal-overlay" onClick={handleCancelLipsync}>
+          <div className="aa-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="aa-modal__header">
+              <span className="aa-modal__title">对口型生成</span>
+              <button className="aa-modal__close" onClick={handleCancelLipsync}>
+                ✕
+              </button>
+            </div>
+            <div className="aa-modal__body" style={{ display: "flex", flexDirection: "column", alignItems: "center", padding: "40px 20px" }}>
+              {lipsyncStatus === "generating" && (
+                <>
+                  <div className="aa-lipsync-spinner" />
+                  <div style={{ marginTop: 20, fontSize: 15, color: "#1a1a2e" }}>对口型视频生成中…</div>
+                  <div style={{ marginTop: 8, fontSize: 13, color: "#8c8ca1" }}>请勿关闭页面，完成后将自动提示</div>
+                </>
+              )}
+              {lipsyncStatus === "completed" && (
+                <>
+                  <div style={{ fontSize: 48 }}>✅</div>
+                  <div style={{ marginTop: 16, fontSize: 15, color: "#1a1a2e" }}>对口型视频生成完成</div>
+                </>
+              )}
+              {lipsyncStatus === "failed" && (
+                <>
+                  <div style={{ fontSize: 48 }}>❌</div>
+                  <div style={{ marginTop: 16, fontSize: 15, color: "#1a1a2e" }}>对口型生成失败</div>
+                  {lipsyncErrorMessage && (
+                    <div style={{ marginTop: 8, fontSize: 13, color: "#ff4d4f" }}>{lipsyncErrorMessage}</div>
+                  )}
+                </>
+              )}
+            </div>
+            <div className="aa-modal__footer">
+              {lipsyncStatus === "generating" && (
+                <button className="aa-btn aa-btn--danger" onClick={handleCancelLipsync}>
+                  取消生成
+                </button>
+              )}
+              {lipsyncStatus !== "generating" && (
+                <button className="aa-btn" onClick={handleCancelLipsync}>
+                  关闭
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }