fix: 预览功能4项优化
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 23s
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 36s
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
AI Code Review / AI Code Review (pull_request) Successful in 1m54s
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 1m6s
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 19s
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
PR Automation / Auto Approve on CI Green (pull_request) Successful in 2m44s
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 41s
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 1m31s
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 6m51s
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 4m4s
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 26m42s
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
CI/CD Pipeline / CI Gate (pull_request) Successful in 5s
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 42s
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 2m39s

1. 预览数量输入改造:保留1/2/3快捷按钮,新增InputNumber数字输入框(1~10)
2. 前端并发创建预览任务:for循环串行await改为Promise.all并行请求
3. 预览卡片视频播放修复:添加controls autoPlay muted loop属性
4. 预览卡片视频填充修复:objectFit从contain改为cover,裁切填充不留白
This commit is contained in:
Frontend Agent
2026-08-08 00:25:15 +08:00
parent 9414dc1318
commit bd9623fd20
2 changed files with 20 additions and 5 deletions
@@ -11,6 +11,7 @@ import {
ExclamationCircleFilled,
ClockCircleOutlined,
} from "@ant-design/icons"
import { InputNumber } from "antd"
import type { PreviewItem, PreviewStatus } from "../hooks/useStep4Preview"
interface Step4GeneratePreviewProps {
@@ -65,7 +66,7 @@ const Step4GeneratePreview: React.FC<Step4GeneratePreviewProps> = ({
{isIdle && (
<div style={{ marginBottom: 16, display: "flex", alignItems: "center", gap: 12 }}>
<span style={{ fontSize: 14, color: "#666" }}></span>
<div style={{ display: "flex", gap: 8 }}>
<div style={{ display: "flex", gap: 8, alignItems: "center" }}>
{PREVIEW_COUNT_OPTIONS.map((opt) => (
<button
key={opt.value}
@@ -85,6 +86,15 @@ const Step4GeneratePreview: React.FC<Step4GeneratePreviewProps> = ({
{opt.label}
</button>
))}
<InputNumber
min={1}
max={10}
value={previewCount}
onChange={(val) => val && onPreviewCountChange(val)}
style={{ width: 70 }}
placeholder="自定义"
/>
<span style={{ fontSize: 12, color: "#999", marginLeft: 4 }}>1~10</span>
</div>
{previewCount > 1 && (
<span style={{ fontSize: 12, color: "#999" }}></span>
@@ -163,11 +173,15 @@ const Step4GeneratePreview: React.FC<Step4GeneratePreviewProps> = ({
{item.status === "ready" && item.result && (
<video
src={item.result.videoUrl}
controls
autoPlay
muted
loop
preload="metadata"
style={{
width: "100%",
height: "100%",
objectFit: "contain",
objectFit: "cover",
}}
/>
)}
@@ -323,8 +323,8 @@ export function useStep4Preview({
const assetIds = materialMode === "auto" ? smartSelectedIds : selectedMaterials
// 并发创建所有预览任务
for (let i = 0; i < previewCount; i++) {
// 并发创建所有预览任务Promise.all 并行请求,减少串行等待)
const createTasks = Array.from({ length: previewCount }, async (_, i) => {
try {
const response = await createPreview({
template_id: selectedTemplate,
@@ -344,7 +344,8 @@ export function useStep4Preview({
prev.map((it) => (it.index === i ? { ...it, status: "error", error: errMsg } : it)),
)
}
}
})
await Promise.all(createTasks)
}, [
selectedTemplate,
materialTotal,