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

Merged

xiaoxia merged 6 commits from fix/1800-1893-ux into develop 2026-09-15 23:31:33 +08:00

Conversation 2 Commits 6 Files Changed 3

+100 -48

xiaoxia commented 2026-09-15 18:51:24 +08:00

Owner

Copy Link

Copy Source

概述

一个小 PR 同时修两处 UI/UX 问题：

1. #1800 批量生成进度卡片列宽过窄、标题与进度条重叠

根因：

• generate.css 里 .xx-batch-gen-grid 默认 minmax(160px, 180px)，但组件 JSX 用 inline style 硬编码 minmax(280px, 320px)，两套规则冲突；inline 赢，但 .xx-batch-gen-card 没有 width:100%。
• 卡片标题是单个 <span> 同时承载图标和文本，缺少 flex:1 / min-width:0 触发 ellipsis，长标题横向溢出到相邻卡片的进度条区域，造成"重叠"视觉。

修复：

• 移除 inline gridTemplateColumns 和卡片 maxWidth: 320，把 grid 规则统一放到 CSS：
  • 列宽改为 repeat(auto-fill, minmax(300px, 360px))，大屏多列时更宽松；
  • justify-items: stretch + 卡片 width:100%; box-sizing:border-box，卡片自动撑满列宽；
• 标题拆成两个 span：图标（xx-batch-gen-card-icon flex-shrink:0）+ 文本（xx-batch-gen-card-title-text flex:1;min-width:0;ellipsis;nowrap），父级 flex 容器也加 min-width:0 保证 ellipsis 生效；
• 窄屏单列上限从 320px 同步放宽到 360px。

2. #1893 文案库 AI 入口 UX 细节

• 「AI 生成标题」按钮 disabled 时 hover 没提示： antd Button 在 disabled 状态下吞掉原生 title，改为 <Tooltip><span><Button/></span></Tooltip> 包裹；
• 「AI 改写」按钮 content 为空时仍可点： 改为 disabled={contentEmpty} + Tooltip，和标题按钮一致；loading 时也禁用；
• 改写结果二次打开残留旧内容： 打开弹窗时 setRewriteResult(null) 清空；
• 改写 loading 时还能关弹窗： 改为 maskClosable={!rewriteLoading} closable={!rewriteLoading} + onCancel 判断，和抖音提取弹窗一致；footer「关闭」按钮 loading 时 disabled；
• 风格 Select 在改写中可切换： 加 disabled={rewriteLoading}。

不改

• AI 三接口仍然走真实 API，CRUD 仍走 SCRIPTS_API_MOCK=true，未动 CRUD 逻辑；
• 未改 AI Rewrite 风格枚举、默认值、接口超时；
• 未改批量生成轮询/数据结构，仅调整卡片外层布局和标题 DOM。

验收

• 批量生成 3+ 视频，长标题不再与进度条/相邻卡片重叠，显示省略号；
• 窗口 1280/1440/1920 下卡片列数自动适配；<960px 单列居中；
• content 为空时「AI 改写」「AI 生成标题」按钮均 disabled，悬停有提示；
• 改写 loading 时弹窗无法通过 mask/X/Esc 关闭；
• 抖音提取弹窗行为保持不变。

## 概述 一个小 PR 同时修两处 UI/UX 问题： ### 1. #1800 批量生成进度卡片列宽过窄、标题与进度条重叠 **根因：** - `generate.css` 里 `.xx-batch-gen-grid` 默认 `minmax(160px, 180px)`，但组件 JSX 用 inline style 硬编码 `minmax(280px, 320px)`，两套规则冲突；inline 赢，但 `.xx-batch-gen-card` 没有 `width:100%`。 - 卡片标题是单个 `<span>` 同时承载图标和文本，缺少 `flex:1 / min-width:0` 触发 ellipsis，长标题横向溢出到相邻卡片的进度条区域，造成"重叠"视觉。 **修复：** - 移除 inline `gridTemplateColumns` 和卡片 `maxWidth: 320`，把 grid 规则统一放到 CSS： - 列宽改为 `repeat(auto-fill, minmax(300px, 360px))`，大屏多列时更宽松； - `justify-items: stretch` + 卡片 `width:100%; box-sizing:border-box`，卡片自动撑满列宽； - 标题拆成两个 span：图标（`xx-batch-gen-card-icon flex-shrink:0`）+ 文本（`xx-batch-gen-card-title-text flex:1;min-width:0;ellipsis;nowrap`），父级 flex 容器也加 `min-width:0` 保证 ellipsis 生效； - 窄屏单列上限从 320px 同步放宽到 360px。 ### 2. #1893 文案库 AI 入口 UX 细节 - **「AI 生成标题」按钮 disabled 时 hover 没提示：** antd Button 在 `disabled` 状态下吞掉原生 `title`，改为 `<Tooltip><span><Button/></span></Tooltip>` 包裹； - **「AI 改写」按钮 content 为空时仍可点：** 改为 `disabled={contentEmpty}` + Tooltip，和标题按钮一致；loading 时也禁用； - **改写结果二次打开残留旧内容：** 打开弹窗时 `setRewriteResult(null)` 清空； - **改写 loading 时还能关弹窗：** 改为 `maskClosable={!rewriteLoading} closable={!rewriteLoading}` + onCancel 判断，和抖音提取弹窗一致；footer「关闭」按钮 loading 时 disabled； - **风格 Select 在改写中可切换：** 加 `disabled={rewriteLoading}`。 ### 不改 - AI 三接口仍然走真实 API，CRUD 仍走 `SCRIPTS_API_MOCK=true`，未动 CRUD 逻辑； - 未改 AI Rewrite 风格枚举、默认值、接口超时； - 未改批量生成轮询/数据结构，仅调整卡片外层布局和标题 DOM。 ## 验收 - [x] 批量生成 3+ 视频，长标题不再与进度条/相邻卡片重叠，显示省略号； - [x] 窗口 1280/1440/1920 下卡片列数自动适配；<960px 单列居中； - [x] content 为空时「AI 改写」「AI 生成标题」按钮均 disabled，悬停有提示； - [x] 改写 loading 时弹窗无法通过 mask/X/Esc 关闭； - [x] 抖音提取弹窗行为保持不变。

xiaoxia added 3 commits 2026-09-15 18:51:24 +08:00

fix(generate): #1800 批量生成进度卡片布局修复 - 移除 inline grid/maxWidth，放宽列宽 minmax(300,360)，标题图标/文本拆分 flex 防溢出 014fa59090

fix(generate): #1800 批量进度卡片 CSS 重写 - grid 列宽放宽、卡片 width:100%、标题 flex+ellipsis 兜底、窄屏单列上限 360 526e25d70a

fix(scripts): #1893 AI 入口 UX 细节修复 - disabled 按钮用 Tooltip+span 包裹保证提示可见、content 为空时禁用改写按钮并重置旧结果、改写 loading 时禁关弹窗、风格选择 loading 禁用 90a0d55c34

xiaoxia added 1 commit 2026-09-15 18:51:24 +08:00

fix(scripts): #1893 AI 入口 UX 细节修复 - disabled 按钮用 Tooltip+span 包裹保证提示可见、content 为空时禁用改写按钮并重置旧结果、改写 loading 时禁关弹窗、风格选择 loading 禁用 90a0d55c34

gitea-actions bot commented 2026-09-15 18:53:05 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

项目	详情
PR号	#1937
预览链接	https://pr-1937.preview.xiaoxiajianji.com
API环境	staging

💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。

🔄 每次提交新代码后预览环境会自动更新。

🗑️ PR 关闭或合并后，预览环境会自动清理。

🚀 **预览环境已部署** | 项目 | 详情 | |------|------| | PR号 | #1937 | | 预览链接 | [https://pr-1937.preview.xiaoxiajianji.com](https://pr-1937.preview.xiaoxiajianji.com) | | API环境 | staging | > 💡 预览环境使用 staging API 数据，请勿在预览环境中操作重要数据。 > > 🔄 每次提交新代码后预览环境会自动更新。 > > 🗑️ PR 关闭或合并后，预览环境会自动清理。

xiaoxia added 1 commit 2026-09-15 18:56:13 +08:00

fix(generate): #1800 批量进度卡片 - prettier 41831f2648

xiaoxia added 1 commit 2026-09-15 18:56:21 +08:00

fix(generate): #1800 CSS - prettier 8ea71581fe

xiaoxia added 1 commit 2026-09-15 18:56:31 +08:00

fix(scripts): #1893 UX - prettier a73c1a4c83

xiaoxia merged commit ab90a5ec9f into develop 2026-09-15 23:31:33 +08:00

gitea-actions bot commented 2026-09-15 23:50:44 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

PR #1937 已关闭或合并，对应的预览环境已被清理。

如有需要，可以重新打开 PR 来重新生成预览环境。

🗑️ **预览环境已清理** PR #1937 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 PR 来重新生成预览环境。

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot frontend-dev xiaoxia

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1937