Merge pull request 'fix(#1197): 修复预览结果渲染 React Error #31 — 对象被直接渲染为 React child' (#1215) from fix/1197-react-error-31 into develop

apps/web/src/pages/generate/components/PreviewVideoPanel.tsx

@@ -68,7 +68,9 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
           <div className="xx-preview-video xx-preview-video--error">
             <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
           </div>
-          <p className="xx-preview-error-msg">{previewError || "请重试"}</p>
+          <p className="xx-preview-error-msg">
+            {typeof previewError === "string" && previewError ? previewError : "请重试"}
+          </p>
           <button className="xx-btn xx-btn-ghost xx-btn-block" onClick={onRegenerate}>
             重新生成
           </button>
@@ -87,7 +89,10 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
         <div className="xx-preview-info">
           <div className="xx-preview-info-row">
             <span>时长</span>
-            <span>{previewResult.duration.toFixed(1)} 秒</span>
+            <span>
+              {(typeof previewResult.duration === "number" ? previewResult.duration : 0).toFixed(1)}{" "}
+              秒
+            </span>
           </div>
           <div className="xx-preview-info-row">
             <span>片段数</span>

apps/web/src/pages/generate/components/Step3GeneratePreview.tsx

@@ -86,7 +86,9 @@ const Step3GeneratePreview: React.FC<Step3GeneratePreviewProps> = ({
         <div className="xx-preview-error">
           <ExclamationCircleFilled style={{ fontSize: 28, color: "#ef4444" }} />
           <p className="xx-preview-error-text">预览生成失败</p>
-          <p className="xx-preview-error-desc">{previewError || "请稍后重试"}</p>
+          <p className="xx-preview-error-desc">
+            {typeof previewError === "string" && previewError ? previewError : "请稍后重试"}
+          </p>
           <button className="xx-btn xx-btn-primary" onClick={onRegeneratePreview}>
             <ReloadOutlined /> 重新生成
           </button>
@@ -145,7 +147,11 @@ const Step3GeneratePreview: React.FC<Step3GeneratePreviewProps> = ({
               <div className="xx-preview-plan-row">
                 <span className="xx-preview-plan-label">实际时长</span>
                 <span className="xx-preview-plan-value">
-                  {previewResult.duration.toFixed(1)} 秒
+                  {(typeof previewResult.duration === "number"
+                    ? previewResult.duration
+                    : 0
+                  ).toFixed(1)}{" "}
+                  秒
                 </span>
               </div>
               <div className="xx-preview-plan-row">

apps/web/src/pages/generate/hooks/useStep3Preview.ts

@@ -6,6 +6,24 @@ import { useState, useCallback, useMemo, useEffect, useRef } from "react"
 import { createPreview, getPreviewStatus } from "@/api/generation"
 import type { PreviewTaskResponse, PreviewStatus as ApiPreviewStatus } from "@/api/generation"
 import type { EditingTemplate } from "@/api/editing-planner"
+import { safeExtractError } from "./generate-video/errorUtils"
+
+/** 安全地将值转为字符串，防止对象被直接渲染导致 React Error #31 */
+const safeString = (val: unknown, fallback: string): string => {
+  if (val == null) return fallback
+  const s = safeExtractError(val)
+  return s || fallback
+}
+
+/** 安全地将值转为数字，防止非数字值进入渲染 */
+const safeNumber = (val: unknown, fallback = 0): number => {
+  if (typeof val === "number" && !Number.isNaN(val)) return val
+  if (typeof val === "string") {
+    const n = Number(val)
+    return Number.isNaN(n) ? fallback : n
+  }
+  return fallback
+}
 
 interface UseStep3PreviewProps {
   templates: EditingTemplate[]
@@ -165,14 +183,14 @@ export function useStep3Preview({
         if (status === "completed") {
           setProgress(100)
           setPreviewResult({
-            taskId: data.task_id,
-            videoUrl: data.video_url ?? "",
-            clipCount: data.clip_count ?? 0,
-            transitionCount: data.transition_count ?? 0,
-            materialUsage: data.material_usage ?? 0,
-            duration: data.duration ?? 0,
-            fileSize: data.file_size ?? 0,
-            generateDuration: data.generate_duration ?? 0,
+            taskId: safeString(data.task_id, ""),
+            videoUrl: safeString(data.video_url, ""),
+            clipCount: safeNumber(data.clip_count),
+            transitionCount: safeNumber(data.transition_count),
+            materialUsage: safeNumber(data.material_usage),
+            duration: safeNumber(data.duration),
+            fileSize: safeNumber(data.file_size),
+            generateDuration: safeNumber(data.generate_duration),
             progress: 100,
           })
           setPreviewStatus("ready")
@@ -180,7 +198,7 @@ export function useStep3Preview({
         }
 
         if (status === "failed") {
-          setPreviewError(data.error_message || "预览生成失败，请重试")
+          setPreviewError(safeString(data.error_message, "预览生成失败，请重试"))
           setPreviewStatus("error")
           return
         }
@@ -192,7 +210,7 @@ export function useStep3Preview({
         }
 
         // pending / generating 状态继续轮询
-        setProgress(data.progress || 0)
+        setProgress(safeNumber(data.progress))
         if (status === "pending") {
           setPreviewStatus("pending")
           pollTimerRef.current = setTimeout(poll, 5000)
@@ -248,7 +266,7 @@ export function useStep3Preview({
       currentTaskIdRef.current = response.task_id
       pollPreviewStatus(response.task_id)
     } catch (e) {
-      setPreviewError(e instanceof Error ? e.message : "预览生成失败")
+      setPreviewError(safeString(e instanceof Error ? e.message : e, "预览生成失败"))
       setPreviewStatus("error")
     }
   }, [