style(products+generate): 成片库播放按钮居中+卡片缩小+预设卡片紧凑化+深色T描边 #1610

Merged

xiaoxia merged 1 commits from fix/visual-polish-6items into develop 2026-09-01 16:49:58 +08:00

Conversation 5 Commits 1 Files Changed 3

+35 -16

xiaoxia commented 2026-09-01 16:37:59 +08:00

Owner

Copy Link

Copy Source

6项视觉修复（仅改视觉和交互，不改功能逻辑）

A. 成片库播放按钮居中

• .xx-product-play 从 position: relative 改为 position: absolute + top:50%; left:50%; transform:translate(-50%,-50%)
• 尺寸 44px→52px，加 flex 居中 + cursor:pointer
• hover 时 transform: translate(-50%,-50%) scale(1.1) 保持居中缩放

B. 成片库卡片缩小

• .xx-products-grid 从 repeat(4, 1fr) 改为 repeat(auto-fill, minmax(220px, 1fr))，自适应列数
• .xx-product-info padding 从 14px 缩小为 8px 10px

C. 预设样式间距缩小

• .xx-title-presets-grid gap 从 8px 改为 6px

D. 预设卡片尺寸统一缩小

• .xx-title-preset-card 从 52px×52px 改为 48px×48px

E. 网格列数调整

• .xx-title-presets-grid 从 repeat(6, 1fr) 改为 repeat(8, 1fr)

F. 深色文字 preset 加描边（深色背景下可见）

• fresh_minimal: WebkitTextStroke: 0.5px #888888
• business: WebkitTextStroke: 0.5px #999999
• handwriting: WebkitTextStroke: 0.5px #888888

不改的： 点击选中逻辑、预设内容、hover/active边框色、拖拽功能、查重率逻辑

## 6项视觉修复（仅改视觉和交互，不改功能逻辑） ### A. 成片库播放按钮居中 - `.xx-product-play` 从 `position: relative` 改为 `position: absolute` + `top:50%; left:50%; transform:translate(-50%,-50%)` - 尺寸 44px→52px，加 flex 居中 + cursor:pointer - hover 时 `transform: translate(-50%,-50%) scale(1.1)` 保持居中缩放 ### B. 成片库卡片缩小 - `.xx-products-grid` 从 `repeat(4, 1fr)` 改为 `repeat(auto-fill, minmax(220px, 1fr))`，自适应列数 - `.xx-product-info` padding 从 `14px` 缩小为 `8px 10px` ### C. 预设样式间距缩小 - `.xx-title-presets-grid` gap 从 `8px` 改为 `6px` ### D. 预设卡片尺寸统一缩小 - `.xx-title-preset-card` 从 `52px×52px` 改为 `48px×48px` ### E. 网格列数调整 - `.xx-title-presets-grid` 从 `repeat(6, 1fr)` 改为 `repeat(8, 1fr)` ### F. 深色文字 preset 加描边（深色背景下可见） - fresh_minimal: `WebkitTextStroke: 0.5px #888888` - business: `WebkitTextStroke: 0.5px #999999` - handwriting: `WebkitTextStroke: 0.5px #888888` **不改的：** 点击选中逻辑、预设内容、hover/active边框色、拖拽功能、查重率逻辑

xiaoxia added 1 commit 2026-09-01 16:37:59 +08:00

style(products+generate): 成片库播放按钮居中+卡片缩小+预设卡片紧凑化+深色T描边 ... a49769e66d

- products.css: .xx-product-play 改 absolute 居中定位(52px圆形)
- products.css: .xx-products-grid 改 auto-fill minmax(220px) 自适应列数
- products.css: .xx-product-info padding 14px -> 8px 10px
- generate.css: .xx-title-presets-grid gap 8px->6px, 列数 6->8
- generate.css: .xx-title-preset-card 52px->48px
- constants.ts: fresh_minimal/business/handwriting 加 WebkitTextStroke 描边

auto-approve-bot commented 2026-09-01 16:42:28 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

• 是否存在阻塞级问题：否
• 阻塞级问题数量：0 个

📊 审查概览

• 整体评价：有建议
• 建议级问题数量：2 个

🔴 阻塞级问题（必须修复）

无

💡 改进建议（不阻塞合并）

1. [apps/web/src/pages/generate/generate.css: 1736] 标题预设网格布局响应式风险

   • 具体内容：将 grid-template-columns 修改为固定的 repeat(8, 1fr)。在移动端或窄屏设备上，8列布局可能导致卡片（48px宽 + 6px间距）总宽度超出容器，引发横向滚动或布局挤压。建议参考 products.css 的做法，使用 repeat(auto-fill, minmax(...)) 或添加媒体查询以适配小屏幕。

2. [apps/web/src/pages/products/products.css: 285] 播放按钮定位依赖父级上下文

   • 具体内容：将 .xx-product-play 的 position 修改为 absolute 并配合 transform 居中。此改动依赖于父元素（.xx-product-card）具有 position: relative（或非 static 定位）。请确认父级样式中已包含 position: relative，否则播放按钮将相对于最近的定位祖先元素定位，导致显示位置错误。

✅ 良好实践

• 响应式布局优化：apps/web/src/pages/products/products.css 中将产品网格布局改为 repeat(auto-fill, minmax(220px, 1fr))，这是一种优秀的响应式实践，能自动适应不同屏幕宽度。
• 交互细节完善：apps/web/src/pages/products/products.css 中为播放按钮添加了 backdrop-filter: blur(4px) 和居中布局，提升了 UI 的现代感和用户体验。
• 代码一致性：apps/web/src/pages/generate/constants.ts 中对多个预设样式的修改保持了代码风格的一致性。

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-09-01 08:42:28 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：有建议 - 建议级问题数量：2 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 1. **[apps/web/src/pages/generate/generate.css: 1736] 标题预设网格布局响应式风险** - 具体内容：将 `grid-template-columns` 修改为固定的 `repeat(8, 1fr)`。在移动端或窄屏设备上，8列布局可能导致卡片（48px宽 + 6px间距）总宽度超出容器，引发横向滚动或布局挤压。建议参考 `products.css` 的做法，使用 `repeat(auto-fill, minmax(...))` 或添加媒体查询以适配小屏幕。 2. **[apps/web/src/pages/products/products.css: 285] 播放按钮定位依赖父级上下文** - 具体内容：将 `.xx-product-play` 的 `position` 修改为 `absolute` 并配合 `transform` 居中。此改动依赖于父元素（`.xx-product-card`）具有 `position: relative`（或非 static 定位）。请确认父级样式中已包含 `position: relative`，否则播放按钮将相对于最近的定位祖先元素定位，导致显示位置错误。 ### ✅ 良好实践 - **响应式布局优化**：`apps/web/src/pages/products/products.css` 中将产品网格布局改为 `repeat(auto-fill, minmax(220px, 1fr))`，这是一种优秀的响应式实践，能自动适应不同屏幕宽度。 - **交互细节完善**：`apps/web/src/pages/products/products.css` 中为播放按钮添加了 `backdrop-filter: blur(4px)` 和居中布局，提升了 UI 的现代感和用户体验。 - **代码一致性**：`apps/web/src/pages/generate/constants.ts` 中对多个预设样式的修改保持了代码风格的一致性。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-09-01 08:42:28 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

gitea-actions bot commented 2026-09-01 16:43:17 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-09-01 16:43:51 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-09-01 16:43:51 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

xiaoxia merged commit b6ed45fc1b into develop 2026-09-01 16:49:58 +08:00

xiaoxia deleted branch fix/visual-polish-6items 2026-09-01 16:49:59 +08:00

gitea-actions bot commented 2026-09-01 16:53:03 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

Sign in to join this conversation.

Reviewers

No Reviewers

auto-approve-bot

Labels

Clear labels

P0

阻塞性，必须立即处理

P1

高优先级

P2

中优先级

P3

低优先级/后考虑

architecture

架构设计

backend

后端相关

blocked

阻塞中

bug

Bug修复

ci-bug

CI本身的bug

ci-optimization

CI优化类任务

ci-pipeline

CI流水线/workflow相关

cleanup

代码清理

devops

运维/部署/CI

documentation

文档相关

feature

新功能

frontend

前端相关

question

需要讨论确认

ready

PR CI通过，可合并

refactor

代码重构

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

auto-approve-bot xiaoxia

No Assignees

3 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1610