Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 xiaoxia
|
ab90a5ec9f |
@@ -1,8 +1,14 @@
|
||||
/**
|
||||
* 第5步「确认生成」— 批量渲染进度网格（Issue #1677）
|
||||
* 第5步「确认生成」— 批量渲染进度网格（Issue #1677 / #1800 布局修复）
|
||||
*
|
||||
* N 个正式生成任务各自独立卡片：进度条 / 成功成片播放 / 失败原因 + 单独重试。
|
||||
* 数据来自 useGenerateVideo 的 batchTasks（useGenerationPolling 实时回传）。
|
||||
*
|
||||
* #1800 修复点：
|
||||
* - 不再用 inline style 硬编码 grid 列宽 / 卡片 maxWidth，改由 CSS 统一控制
|
||||
* （便于响应式 + 避免 inline 覆盖类规则）。
|
||||
* - 标题图标 + 文本拆分为独立 span，文本 span 加 flex:1/min-width:0/ellipsis，
|
||||
* 防止长标题在窄列里溢出导致与相邻卡片进度条视觉重叠。
|
||||
*/
|
||||
import React from "react"
|
||||
import { LoadingOutlined, CheckCircleFilled, CloseCircleOutlined } from "@ant-design/icons"
|
||||
@@ -34,36 +40,34 @@ const BatchGenerationGrid: React.FC<BatchGenerationGridProps> = ({
|
||||
完成 {tasks.filter((t) => t.status === "completed").length} / {tasks.length}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="xx-batch-gen-grid"
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 320px))",
|
||||
justifyContent: "center",
|
||||
justifyItems: "center",
|
||||
gap: 14,
|
||||
width: "100%",
|
||||
}}
|
||||
>
|
||||
{/* #1800: grid 列宽 / gap / justify 全部交由 .xx-batch-gen-grid CSS 控制 */}
|
||||
<div className="xx-batch-gen-grid">
|
||||
{sorted.map((task) => {
|
||||
const title = titles[task.variantIndex] || `视频 ${task.variantIndex + 1}`
|
||||
const video = (task.videos?.[0] || null) as GeneratedVideo | null
|
||||
return (
|
||||
<div
|
||||
key={task.taskId}
|
||||
className={`xx-batch-gen-card status-${task.status}`}
|
||||
style={{ maxWidth: 320 }}
|
||||
>
|
||||
<div key={task.taskId} className={`xx-batch-gen-card status-${task.status}`}>
|
||||
<div className="xx-batch-gen-card-head">
|
||||
<span className="xx-batch-gen-card-title" title={title}>
|
||||
{task.status === "completed" ? (
|
||||
<CheckCircleFilled style={{ color: "#52c41a", marginRight: 6 }} />
|
||||
<CheckCircleFilled
|
||||
className="xx-batch-gen-card-icon"
|
||||
style={{ color: "#52c41a" }}
|
||||
/>
|
||||
) : task.status === "failed" ? (
|
||||
<CloseCircleOutlined style={{ color: "#ef4444", marginRight: 6 }} />
|
||||
<CloseCircleOutlined
|
||||
className="xx-batch-gen-card-icon"
|
||||
style={{ color: "#ef4444" }}
|
||||
/>
|
||||
) : (
|
||||
<LoadingOutlined style={{ color: "#1677ff", marginRight: 6 }} />
|
||||
<LoadingOutlined
|
||||
className="xx-batch-gen-card-icon"
|
||||
style={{ color: "#1677ff" }}
|
||||
/>
|
||||
)}
|
||||
视频 {task.variantIndex + 1}：{title}
|
||||
<span className="xx-batch-gen-card-title-text">
|
||||
视频 {task.variantIndex + 1}：{title}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -3376,14 +3376,18 @@
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
第5步确认生成：批量渲染进度网格（Issue #1677）
|
||||
第5步确认生成：批量渲染进度网格（Issue #1677 / #1800 布局修复）
|
||||
- 列宽从 minmax(160,180) 放宽到 minmax(300,360)，避免进度条/标题挤压
|
||||
- 卡片 width:100% 撑满列宽，避免 inline maxWidth 硬编码
|
||||
- 标题图标/文本拆分 flex 布局，文本 ellipsis 长标题不溢出
|
||||
============================================================ */
|
||||
.xx-batch-gen-grid {
|
||||
justify-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 180px));
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
|
||||
justify-content: center;
|
||||
justify-items: stretch;
|
||||
gap: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.xx-batch-gen-card {
|
||||
@@ -3394,7 +3398,9 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.xx-batch-gen-card.status-completed {
|
||||
@@ -3410,14 +3416,30 @@
|
||||
.xx-batch-gen-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.xx-batch-gen-card-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #1a1a1a);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.xx-batch-gen-card-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.xx-batch-gen-card-title-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@@ -3427,6 +3449,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.xx-batch-gen-card-pct {
|
||||
@@ -3455,10 +3478,10 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ── 响应式：窄屏批量网格回退单列（.xx-canvas-grid 的窄屏限宽见网格定义处 #1741） ── */
|
||||
/* ── 响应式：窄屏批量网格回退单列 ── */
|
||||
@media (max-width: 960px) {
|
||||
.xx-batch-gen-grid {
|
||||
justify-items: center;
|
||||
grid-template-columns: minmax(0, 320px);
|
||||
grid-template-columns: minmax(0, 360px);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,6 +31,7 @@ import {
|
||||
Space,
|
||||
Spin,
|
||||
Tag,
|
||||
Tooltip,
|
||||
Typography,
|
||||
message,
|
||||
} from "antd"
|
||||
@@ -604,18 +605,25 @@ const ScriptLibrary: React.FC = () => {
|
||||
label={
|
||||
<span>
|
||||
名称
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<BulbOutlined />}
|
||||
loading={titleGenLoading}
|
||||
disabled={contentEmpty}
|
||||
onClick={handleGenerateTitles}
|
||||
{/* #1893 UX: disabled 时原生 title 在 antd Button 上不触发，
|
||||
用 Tooltip + span 包裹保证提示可见 */}
|
||||
<Tooltip
|
||||
title={contentEmpty ? "请先填写文案内容" : "基于正文 AI 生成 3 个候选标题"}
|
||||
style={{ padding: "0 4px", marginLeft: 4, height: 22 }}
|
||||
>
|
||||
✨ AI 生成标题
|
||||
</Button>
|
||||
<span style={{ display: "inline-flex", marginLeft: 4 }}>
|
||||
<Button
|
||||
type="link"
|
||||
size="small"
|
||||
icon={<BulbOutlined />}
|
||||
loading={titleGenLoading}
|
||||
disabled={contentEmpty}
|
||||
onClick={handleGenerateTitles}
|
||||
style={{ padding: "0 4px", height: 22 }}
|
||||
>
|
||||
✨ AI 生成标题
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
}
|
||||
rules={[{ required: true, message: "请填写文案名称" }, { max: 200 }]}
|
||||
@@ -662,16 +670,29 @@ const ScriptLibrary: React.FC = () => {
|
||||
options={REWRITE_STYLE_OPTIONS}
|
||||
style={{ width: 110 }}
|
||||
size="small"
|
||||
disabled={rewriteLoading}
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<RobotOutlined />}
|
||||
loading={rewriteLoading}
|
||||
onClick={() => setRewriteModalOpen(true)}
|
||||
>
|
||||
✨ AI 改写
|
||||
</Button>
|
||||
{rewriteResult && (
|
||||
{/* #1893 UX: content 为空时禁用改写按钮并给提示，避免用户点了才弹 warning */}
|
||||
<Tooltip title={contentEmpty ? "请先填写文案正文再改写" : ""}>
|
||||
<span style={{ display: "inline-flex" }}>
|
||||
<Button
|
||||
size="small"
|
||||
icon={<RobotOutlined />}
|
||||
loading={rewriteLoading}
|
||||
disabled={contentEmpty}
|
||||
onClick={() => {
|
||||
// 每次打开重置上一次结果，避免误看旧对比
|
||||
if (!rewriteLoading) {
|
||||
setRewriteResult(null)
|
||||
setRewriteModalOpen(true)
|
||||
}
|
||||
}}
|
||||
>
|
||||
✨ AI 改写
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
{rewriteResult && !contentEmpty && (
|
||||
<Button size="small" type="link" onClick={() => setRewriteModalOpen(true)}>
|
||||
查看上一次改写结果
|
||||
</Button>
|
||||
@@ -782,7 +803,9 @@ const ScriptLibrary: React.FC = () => {
|
||||
<Modal
|
||||
title={`✨ AI 改写（${rewriteStyle}风格）`}
|
||||
open={rewriteModalOpen}
|
||||
onCancel={() => setRewriteModalOpen(false)}
|
||||
onCancel={() => !rewriteLoading && setRewriteModalOpen(false)}
|
||||
maskClosable={!rewriteLoading}
|
||||
closable={!rewriteLoading}
|
||||
footer={
|
||||
rewriteResult ? (
|
||||
<Space>
|
||||
@@ -792,7 +815,9 @@ const ScriptLibrary: React.FC = () => {
|
||||
</Button>
|
||||
</Space>
|
||||
) : (
|
||||
<Button onClick={() => setRewriteModalOpen(false)}>关闭</Button>
|
||||
<Button disabled={rewriteLoading} onClick={() => setRewriteModalOpen(false)}>
|
||||
关闭
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
width={640}
|
||||
|
||||
Reference in New Issue
Block a user