fix(ui): 标题拖拽pointerEvents修复 + T字放大28px + 成片thumb白边修复 #1601

Merged

xiaoxia merged 1 commits from fix/title-drag-pointer-events-and-size into develop 2026-09-01 12:56:55 +08:00

Conversation 2 Commits 1 Files Changed 4

+4 -104

xiaoxia commented 2026-09-01 12:46:36 +08:00

Owner

Copy Link

Copy Source

修复三个 UI 问题

1. 标题拖拽无法触发（PR #1593 遗留 bug）

• 原因：标题叠加层容器设 pointerEvents: "none"，内层标题块未覆盖，导致 onPointerDown 永远不触发
• 修复：内层标题块加 pointerEvents: "auto"

2. 标题预设 T 字太小看不清

• 原因：.xx-title-preset-preview-text 无 font-size，继承默认太小
• 修复：加 font-size: 28px，正方形卡片内更清晰辨识样式效果

3. 成片库竖屏视频左右白边

• 原因：.xx-product-thumb 用 display: grid; place-items: center，竖屏视频被居中而非填满
• 修复：移除 display: grid; place-items: center，让子元素直接 stretch 填满容器

## 修复三个 UI 问题 ### 1. 标题拖拽无法触发（PR #1593 遗留 bug） - **原因**：标题叠加层容器设 `pointerEvents: "none"`，内层标题块未覆盖，导致 onPointerDown 永远不触发 - **修复**：内层标题块加 `pointerEvents: "auto"` ### 2. 标题预设 T 字太小看不清 - **原因**：`.xx-title-preset-preview-text` 无 font-size，继承默认太小 - **修复**：加 `font-size: 28px`，正方形卡片内更清晰辨识样式效果 ### 3. 成片库竖屏视频左右白边 - **原因**：`.xx-product-thumb` 用 `display: grid; place-items: center`，竖屏视频被居中而非填满 - **修复**：移除 `display: grid; place-items: center`，让子元素直接 stretch 填满容器

xiaoxia added 1 commit 2026-09-01 12:46:36 +08:00

fix(ui): 标题拖拽pointerEvents修复 + T字放大 + 成片白边修复 ... cedf021aec

1. FrontendPreviewPlayer: 标题拖拽块加 pointerEvents:auto，
   解决被父容器 pointerEvents:none 拦截导致无法拖拽
2. generate.css: 标题预设卡片 T 字 font-size:28px，
   缩小卡片内更清晰辨识样式效果
3. products.css: 移除 .xx-product-thumb 的 display:grid +
   place-items:center，让视频缩略图直接 stretch 填满容器，
   消除竖屏视频左右白边

auto-approve-bot commented 2026-09-01 12:51:26 +08:00

Collaborator

Copy Link

Copy Source

代码审查结果 - PR #1601

⚠️ 问题（0个需要修改）

无

💡 建议（1个可选）

1. apps/web/src/pages/products/products.css：移除了多个类（如 .xx-player-play-btn, .xx-player-close-btn, .xx-player-video-wrap 等）中的 display: grid 和 place-items: center 属性。这些属性通常用于内容居中，移除后可能导致按钮或容器内的元素布局错位（如默认左上角对齐）。建议确认这些组件在新的布局流下显示位置是否符合设计预期，或确认是否有其他样式（如 Flexbox）接管了布局职责。

---

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好

---

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

## 代码审查结果 - PR #1601 ### ⚠️ 问题（0个需要修改） 无 ### 💡 建议（1个可选） 1. **apps/web/src/pages/products/products.css**：移除了多个类（如 `.xx-player-play-btn`, `.xx-player-close-btn`, `.xx-player-video-wrap` 等）中的 `display: grid` 和 `place-items: center` 属性。这些属性通常用于内容居中，移除后可能导致按钮或容器内的元素布局错位（如默认左上角对齐）。建议确认这些组件在新的布局流下显示位置是否符合设计预期，或确认是否有其他样式（如 Flexbox）接管了布局职责。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能良好 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-09-01 04:51:26 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

xiaoxia merged commit a3f615a2d1 into develop 2026-09-01 12:56:55 +08:00

gitea-actions bot commented 2026-09-01 12:59:52 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

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

xiaoxia referenced this issue from a commit 2026-09-01 13:09:03 +08:00

fix: 恢复 package-lock.json，修复 @testing-library/dom 缺失导致的测试失败

xiaoxia referenced this pull request 2026-09-01 13:09:14 +08:00

fix: 恢复 package-lock.json 修复测试依赖缺失 #1603

Sign in to join this conversation.

Reviewers

No Reviewers

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#1601