fix: 修复PreviewVideoPanel JSX结构-将视频+Canvas叠加层移出!showTitlePreview块

- 预览成功+Canvas标题叠加层提升到顶层，仅在 hasPreview 条件下渲染
- 空状态/生成中/生成失败/预览信息添加 !showTitlePreview 守卫
- 修复 Canvas overlay 在 showTitlePreview=true 时永远不渲染的死代码问题

apps/web/src/pages/generate/GeneratePage.tsx

@@ -12,7 +12,10 @@
 import React, { useState, useMemo } from "react"
 import { Modal, message } from "antd"
 import { useNavigate } from "react-router-dom"
+import { useQuery } from "@tanstack/react-query"
 import type { VoiceClone } from "@/api/voice-clone"
+import { getAssetsByKind } from "@/api/assets/assets"
+import type { AssetItem } from "@/api/assets/types"
 import { useCloneProgress } from "@/hooks/useCloneProgress"
 import CloneModal from "@/components/voice/CloneModal"
 import GenerateHeader from "./components/GenerateHeader"
@@ -81,7 +84,7 @@ const GeneratePage: React.FC = () => {
   const sourceVideoUrl = useMemo(() => {
     const firstId = selectedMaterials[0]
     if (!firstId) return undefined
-    const asset = videoAssets.find((a) => a.id === firstId)
+    const asset = videoAssets.find((a: AssetItem) => a.id === firstId)
     return asset?.file_url
   }, [selectedMaterials, videoAssets])
 

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

@@ -16,6 +16,7 @@ import { PlayCircleOutlined, LoadingOutlined } from "@ant-design/icons"
 import type { PreviewResult, PreviewStatus } from "../hooks/useStep5Preview"
 import type { TitleSettings } from "../types"
 import { drawTitleOnCanvas } from "../utils/drawTitleOnCanvas"
+import TitlePreviewCanvas from "./title/TitlePreviewCanvas"
 
 interface PreviewVideoPanelProps {
   previewStatus: PreviewStatus
@@ -51,7 +52,6 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   const hasPreview = previewStatus === "ready" && previewResult
   const isLoading = previewStatus === "pending" || previewStatus === "generating"
   const isError = previewStatus === "error"
-  const showTitlePreview = !!titleSettings
   const videoAspectStyle = { aspectRatio: (videoRatio || "16:9").replace(":", "/") }
 
   // video 模式 refs
@@ -203,105 +203,97 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
         </div>
       )}
 
-      {/* 非 Step4 模式才显示以下内容 */}
-      {!showTitlePreview && (
-        <>
-          {/* 空状态：还没生成预览 */}
-          {previewStatus === "idle" && (
-            <div className="xx-preview-empty">
-              <PlayCircleOutlined
-                style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
-              />
-              <p className="xx-preview-empty-title">暂无预览</p>
-              <p className="xx-preview-empty-desc">在第 3 步生成预览后在此查看</p>
-            </div>
-          )}
+      {/* 空状态：还没生成预览（非 Step4 模式） */}
+      {!showTitlePreview && previewStatus === "idle" && (
+        <div className="xx-preview-empty">
+          <PlayCircleOutlined
+            style={{ fontSize: 48, color: "var(--text-tertiary)", marginBottom: 12 }}
+          />
+          <p className="xx-preview-empty-title">暂无预览</p>
+          <p className="xx-preview-empty-desc">在第 3 步生成预览后在此查看</p>
+        </div>
+      )}
 
-          {/* 生成中 */}
-          {isLoading && (
-            <div className="xx-preview-loading-panel">
-              <div className="xx-preview-video" style={videoAspectStyle}>
-                <div className="xx-preview-loading-center">
-                  <LoadingOutlined style={{ fontSize: 36, color: "#fff" }} spin />
-                  <p style={{ marginTop: 12, color: "rgba(255,255,255,0.8)", fontSize: 14 }}>
-                    {previewStatus === "pending" ? "排队中..." : `生成中 ${progress}%`}
-                  </p>
-                </div>
-              </div>
-              <div className="xx-preview-progress-bar-wrap">
-                <div className="xx-preview-progress-fill" style={{ width: `${progress}%` }} />
-              </div>
-            </div>
-          )}
-
-          {/* 生成失败 */}
-          {isError && (
-            <div className="xx-preview-error-panel">
-              <div className="xx-preview-video xx-preview-video--error" style={videoAspectStyle}>
-                <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
-              </div>
-              <p className="xx-preview-error-msg">
-                {typeof previewError === "string" && previewError ? previewError : "请重试"}
+      {/* 生成中（非 Step4 模式） */}
+      {!showTitlePreview && isLoading && (
+        <div className="xx-preview-loading-panel">
+          <div className="xx-preview-video" style={videoAspectStyle}>
+            <div className="xx-preview-loading-center">
+              <LoadingOutlined style={{ fontSize: 36, color: "#fff" }} spin />
+              <p style={{ marginTop: 12, color: "rgba(255,255,255,0.8)", fontSize: 14 }}>
+                {previewStatus === "pending" ? "排队中..." : `生成中 ${progress}%`}
               </p>
-              <button className="xx-btn xx-btn-ghost xx-btn-block" onClick={onRegenerate}>
-                重新生成
-              </button>
             </div>
-          )}
+          </div>
+          <div className="xx-preview-progress-bar-wrap">
+            <div className="xx-preview-progress-fill" style={{ width: `${progress}%` }} />
+          </div>
+        </div>
+      )}
 
-          {/* 预览成功 + Canvas 标题叠加 */}
-          {hasPreview && (
-            <div ref={containerRef} style={{ position: "relative" }}>
-              <div className="xx-preview-video" style={videoAspectStyle}>
-                <video
-                  ref={videoRef}
-                  src={previewResult.videoUrl}
-                  controls
-                  preload="metadata"
-                  onLoadedMetadata={handleVideoLoaded}
-                />
-              </div>
-              {showTitlePreview && (
-                <canvas
-                  ref={canvasRef}
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    height: "100%",
-                    zIndex: 1,
-                    pointerEvents: "none",
-                  }}
-                />
-              )}
-            </div>
-          )}
+      {/* 生成失败（非 Step4 模式） */}
+      {!showTitlePreview && isError && (
+        <div className="xx-preview-error-panel">
+          <div className="xx-preview-video xx-preview-video--error" style={videoAspectStyle}>
+            <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
+          </div>
+          <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>
+        </div>
+      )}
 
-          {/* 预览信息 */}
-          {hasPreview && previewResult && (
-            <div className="xx-preview-info">
-              <div className="xx-preview-info-row">
-                <span>时长</span>
-                <span>
-                  {(typeof previewResult.duration === "number"
-                    ? previewResult.duration
-                    : 0
-                  ).toFixed(1)}{" "}
-                  秒
-                </span>
-              </div>
-              <div className="xx-preview-info-row">
-                <span>片段数</span>
-                <span>{previewResult.clipCount} 段</span>
-              </div>
-              <div className="xx-preview-info-row">
-                <span>比例</span>
-                <span>{videoRatio}</span>
-              </div>
-            </div>
+      {/* 预览成功 + Canvas 标题叠加 */}
+      {hasPreview && (
+        <div ref={containerRef} style={{ position: "relative" }}>
+          <div className="xx-preview-video" style={videoAspectStyle}>
+            <video
+              ref={videoRef}
+              src={previewResult.videoUrl}
+              controls
+              preload="metadata"
+              onLoadedMetadata={handleVideoLoaded}
+            />
+          </div>
+          {showTitlePreview && (
+            <canvas
+              ref={canvasRef}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                zIndex: 1,
+                pointerEvents: "none",
+              }}
+            />
           )}
-        </>
+        </div>
+      )}
+
+      {/* 预览信息（非 Step4 模式） */}
+      {!showTitlePreview && hasPreview && previewResult && (
+        <div className="xx-preview-info">
+          <div className="xx-preview-info-row">
+            <span>时长</span>
+            <span>
+              {(typeof previewResult.duration === "number" ? previewResult.duration : 0).toFixed(1)}{" "}
+              秒
+            </span>
+          </div>
+          <div className="xx-preview-info-row">
+            <span>片段数</span>
+            <span>{previewResult.clipCount} 段</span>
+          </div>
+          <div className="xx-preview-info-row">
+            <span>比例</span>
+            <span>{videoRatio}</span>
+          </div>
+        </div>
       )}
     </div>
   )

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

@@ -8,7 +8,6 @@ import type { TitleSettings } from "../types"
 import { useStep4Title } from "../hooks/useStep4Title"
 import AiTitleGenerator from "./title/AiTitleGenerator"
 import TitleStylePanel from "./title/TitleStylePanel"
-import TitlePreviewCanvas from "./title/TitlePreviewCanvas"
 
 interface Step4TitleSettingsProps {
   titleSettings: TitleSettings