From ab90a5ec9f5d726b78298fd2ba1c47591972f86c Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Tue, 15 Sep 2026 23:31:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20#1800=20=E6=89=B9=E9=87=8F=E7=94=9F?=
 =?UTF-8?q?=E6=88=90=E8=BF=9B=E5=BA=A6=E5=8D=A1=E7=89=87=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=20+=20#1893=20=E6=96=87=E6=A1=88=E5=BA=93=20AI=20=E5=85=A5?=
 =?UTF-8?q?=E5=8F=A3=20UX=20=E7=BB=86=E8=8A=82=20(#1937)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix: #1800 批量生成进度卡片布局 + #1893 文案库 AI 入口 UX 细节

- #1800: 卡片标题加 ellipsis 防溢出，grid 列宽 minmax(320px,1fr) max380px，card-head flex 布局
- #1893: AI 生成标题/改写按钮 disabled 时用 Tooltip 包裹 span，改写弹窗 loading 时禁关禁点
---
 .../components/BatchGenerationGrid.tsx        | 46 +++++++------
 apps/web/src/pages/generate/generate.css      | 35 ++++++++--
 apps/web/src/pages/scripts/ScriptLibrary.tsx  | 67 +++++++++++++------
 3 files changed, 100 insertions(+), 48 deletions(-)

diff --git a/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx b/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
index 0e2d5b0fb..001187adb 100644
--- a/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
+++ b/apps/web/src/pages/generate/components/BatchGenerationGrid.tsx
@@ -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>
 
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index 0f8a5c2df..cb5eff27e 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -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);
   }
 }
diff --git a/apps/web/src/pages/scripts/ScriptLibrary.tsx b/apps/web/src/pages/scripts/ScriptLibrary.tsx
index 1cc40c92a..123e4a5ef 100644
--- a/apps/web/src/pages/scripts/ScriptLibrary.tsx
+++ b/apps/web/src/pages/scripts/ScriptLibrary.tsx
@@ -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}