fix(assets): 骨架屏网格列数同步真实网格(6列)+响应式断点对齐 #1560

Merged

auto-approve-bot merged 1 commits from fix/skeleton-grid-columns-sync into develop 2026-08-30 22:21:02 +08:00

Conversation 5 Commits 1 Files Changed 1

+17 -1

xiaoxia commented 2026-08-30 21:56:47 +08:00

Owner

Copy Link

Copy Source

背景

#1558（素材卡片尺寸缩小）上线验证时发现遗漏点：素材库加载态骨架屏 .xx-assets-skeleton-grid 仍是 repeat(4, 1fr)，且没有任何响应式媒体查询覆盖。导致：

• 页面初次加载/切换视频库时，骨架屏显示 4 列
• 数据加载完成后真实网格是 6 列，发生布局跳变
• 窄屏下骨架屏仍保持 4 列（真实网格已降为 3/2/1 列），小屏拥挤错位

改动

仅 apps/web/src/pages/assets/assets.css：

1. .xx-assets-skeleton-grid 基础列数 repeat(4, 1fr) → repeat(6, 1fr)，与 .xx-asset-grid 一致
2. 四个响应式断点同步对齐真实网格：
   • max-width: 1400px → 3 列
   • max-width: 1200px → 3 列
   • max-width: 768px → 2 列
   • max-width: 480px → 1 列

不改动

• 真实网格 .xx-asset-grid 及其列数（#1558 已上线）
• 骨架屏卡片结构、动画、占位内容
• 任何功能逻辑

验收

• 素材库加载时骨架屏 6 列，数据到达后无布局跳变
• 缩窄窗口，骨架屏随断点 6→3→2→1 列，与真实网格一致

关联

• #1558 素材上传即时刷新+卡片尺寸缩小（已部署 staging，本次为其样式收尾）

## 背景 #1558（素材卡片尺寸缩小）上线验证时发现遗漏点：素材库**加载态骨架屏** `.xx-assets-skeleton-grid` 仍是 `repeat(4, 1fr)`，且没有任何响应式媒体查询覆盖。导致： - 页面初次加载/切换视频库时，骨架屏显示 4 列 - 数据加载完成后真实网格是 6 列，发生布局跳变 - 窄屏下骨架屏仍保持 4 列（真实网格已降为 3/2/1 列），小屏拥挤错位 ## 改动 仅 `apps/web/src/pages/assets/assets.css`： 1. `.xx-assets-skeleton-grid` 基础列数 `repeat(4, 1fr)` → `repeat(6, 1fr)`，与 `.xx-asset-grid` 一致 2. 四个响应式断点同步对齐真实网格： - `max-width: 1400px` → 3 列 - `max-width: 1200px` → 3 列 - `max-width: 768px` → 2 列 - `max-width: 480px` → 1 列 ## 不改动 - 真实网格 `.xx-asset-grid` 及其列数（#1558 已上线） - 骨架屏卡片结构、动画、占位内容 - 任何功能逻辑 ## 验收 - 素材库加载时骨架屏 6 列，数据到达后无布局跳变 - 缩窄窗口，骨架屏随断点 6→3→2→1 列，与真实网格一致 ## 关联 - #1558 素材上传即时刷新+卡片尺寸缩小（已部署 staging，本次为其样式收尾）

xiaoxia added 1 commit 2026-08-30 21:56:48 +08:00

fix(assets): 骨架屏网格列数同步真实网格(6列)+响应式断点对齐 ... 2f9ee83b0b

#1558 卡片缩小后遗漏：加载态骨架屏 .xx-assets-skeleton-grid 仍是
repeat(4,1fr) 且无响应式覆盖，导致加载态 4 列、加载完跳变 6 列。
- 基础列数 4 -> 6，与 .xx-asset-grid 一致
- 1400px/1200px -> 3列，768px -> 2列，480px -> 1列 同步对齐

auto-approve-bot commented 2026-08-30 22:03:45 +08:00

Collaborator

Copy Link

Copy Source

【阻塞级判定】

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

📊 审查概览

• 整体评价：通过
• 建议级问题数量：0 个

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

无

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

无

✅ 良好实践

1. 保持骨架屏与实际内容布局一致：PR 修改了 .xx-assets-skeleton-grid 的列数（从 4 列改为 6 列）并在各个响应式断点（1400px, 1200px, 768px, 480px）下与 .xx-asset-grid 保持一致的列数配置。这能有效避免加载状态与加载完成状态之间的布局跳动，减少累积布局偏移（CLS），提升用户体验。

---

_{🤖 由 AI 代码审查机器人自动生成 | 2026-08-30 14:03:45 | 模型:}

### 【阻塞级判定】 - 是否存在阻塞级问题：否 - 阻塞级问题数量：0 个 ### 📊 审查概览 - 整体评价：通过 - 建议级问题数量：0 个 ### 🔴 阻塞级问题（必须修复） 无 ### 💡 改进建议（不阻塞合并） 无 ### ✅ 良好实践 1. **保持骨架屏与实际内容布局一致**：PR 修改了 `.xx-assets-skeleton-grid` 的列数（从 4 列改为 6 列）并在各个响应式断点（1400px, 1200px, 768px, 480px）下与 `.xx-asset-grid` 保持一致的列数配置。这能有效避免加载状态与加载完成状态之间的布局跳动，减少累积布局偏移（CLS），提升用户体验。 --- _{🤖 由 AI 代码审查机器人自动生成 | 2026-08-30 14:03:45 | 模型:} <!-- AI_CODE_REVIEW_AUTO_COMMENT -->

gitea-actions bot commented 2026-08-30 22:05:47 +08:00

Copy Link

Copy Source

🚀 预览环境已部署

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

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

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

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

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

auto-approve-bot approved these changes 2026-08-30 22:20:31 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot approved these changes 2026-08-30 22:20:31 +08:00

auto-approve-bot left a comment

Collaborator

Copy Link

Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。

auto-approve-bot merged commit fb197e8386 into develop 2026-08-30 22:21:02 +08:00

auto-approve-bot deleted branch fix/skeleton-grid-columns-sync 2026-08-30 22:21:03 +08:00

gitea-actions bot commented 2026-08-30 22:26:11 +08:00

Copy Link

Copy Source

🗑️ 预览环境已清理

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

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

🗑️ **预览环境已清理** PR #1560 已关闭或合并，对应的预览环境已被清理。 > 如有需要，可以重新打开 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#1560