fix: 实现标题实时预览覆盖层，修复 titleConfig 未使用 TS6133 错误

2026-09-09 17:32:12 +08:00
parent b1930e594d
commit 005cff1ce5
2 changed files with 29 additions and 3 deletions
@@ -217,6 +217,7 @@ const AiAvatarPage: React.FC = () => {
              selectedVideo={state.selectedVideo}
              onSelectVideo={() => state.setShowAssetPicker(true)}
              onRemoveVideo={state.removeVideo}
+              titleConfig={state.titleConfig}
            />
          </div>
        </div>
@@ -4,13 +4,15 @@
 * - 已选视频：竖屏 9:16 预览播放器 + 视频信息卡片 + 移除按钮
 */
 import type { AssetItem } from "@/api/assets"
+import type { AiAvatarTitleConfig } from "../types"
+import { getFontFamily } from "@/pages/generate/constants"

 export interface PanelVideoSelectorProps {
  selectedVideo: AssetItem | null
  /** 触发打开素材库弹窗 */
  onSelectVideo: () => void
  onRemoveVideo: () => void
-  titleConfig?: unknown
+  titleConfig?: AiAvatarTitleConfig
 }

 /** 格式化时长（秒 → mm:ss） */
@@ -55,13 +57,36 @@ export function PanelVideoSelector({

  return (
    <div>
-      {/* 竖屏 9:16 视频预览播放器 */}
-      <div className="aa-video-preview">
+      {/* 竖屏 9:16 视频预览播放器 + 标题实时预览 */}
+      <div className="aa-video-preview" style={{ position: "relative" }}>
        {fileUrl ? (
          <video src={fileUrl} poster={selectedVideo.thumbnail_url} controls playsInline />
        ) : (
          <div className="aa-video-preview__placeholder">视频暂不可预览</div>
        )}
+        {titleConfig?.title && (
+          <div
+            style={{
+              position: "absolute",
+              left: "50%",
+              transform: "translateX(-50%)",
+              ...(titleConfig.position === "top" ? { top: "10%" } : titleConfig.position === "bottom" ? { bottom: "10%" } : { top: "50%", transform: "translate(-50%, -50%)" }),
+              fontSize: titleConfig.size,
+              fontFamily: `"${titleConfig.font}", sans-serif`,
+              color: titleConfig.color,
+              fontWeight: titleConfig.bold ? 700 : 400,
+              fontStyle: titleConfig.italic ? "italic" : "normal",
+              textShadow: titleConfig.shadow ? "2px 2px 4px rgba(0,0,0,0.7)" : undefined,
+              WebkitTextStroke: titleConfig.stroke ? "1px rgba(0,0,0,0.5)" : undefined,
+              pointerEvents: "none",
+              zIndex: 10,
+              maxWidth: "90%",
+              textAlign: "center",
+            }}
+          >
+            {titleConfig.title}
+          </div>
+        )}
      </div>

      {/* 视频信息卡片：文件名 / 时长 / 分辨率 */}