xiaoxia/xiaoxia-saas
1
0
Fork 0
Code Issues 8 Pull Requests 8 Actions Packages Projects Releases 7 Wiki Activity

feat(assets): 上传完成即时刷新素材网格+卡片尺寸缩小 #1558

Merged
auto-approve-bot merged 1 commits from feat/upload-immediate-display-and-card-size into develop 2026-08-30 18:41:00 +08:00
Conversation 5 Commits 1 Files Changed 2
+17 -14
xiaoxia commented 2026-08-30 18:32:00 +08:00
Owner
Copy Link
Copy Source

改动

需求1：上传完成后立即在素材库网格显示

问题：上传完成后进度弹窗显示"已完成"，但素材库网格不刷新，要手动刷新页面才能看到新素材。

根因：useAssetUpload.ts 在 uploadAssetDirect 完成后调用 queryClient.invalidateQueries({ queryKey: ["assets"] })，但 useAssetsData.ts 查询的实际 key 是 ["assets", effectiveLibId]，虽然 invalidateQueries 应该匹配前缀，但受 staleTime: 30_000 影响，查询可能不会立即重新获取。

修复：

  • 将 invalidateQueries 改为 refetchQueries，使用精确 queryKey ["assets", effectiveLibId] 强制立即重新获取
  • 保留 invalidateQueries({ queryKey: ["asset-libraries"] }) 用于刷新视频库列表

需求2：素材卡片尺寸缩小约一半

改动：

  • .xx-asset-grid：repeat(4, 1fr) → repeat(6, 1fr)（同屏可见卡片从 4 张增到 6 张）
  • .xx-asset-thumb：aspect-ratio: 9/16 → 3/4（从极高比例改为较矮，视觉更平衡）
  • .xx-asset-info：padding: 12px → 8px
  • .xx-asset-name：margin: 0 0 6px → 4px，font-size: var(--font-size-sm) → var(--font-size-xs)
  • .xx-asset-play：width/height: 40px → 32px，font-size: var(--font-size-md) → var(--font-size-sm)
  • .xx-asset-delete：width/height: 28px → 24px
  • .xx-asset-card:hover transform：translateY(-2px) → translateY(-1px)
  • .xx-asset-thumb-placeholder：font-size: var(--font-size-3xl) → var(--font-size-xl)

响应式断点：保持不变（1400px: 3列, 1200px: 3列, 768px: 2列, 480px: 1列）

不改动：卡片选中/取消选中逻辑、全选/清空批量操作、播放/删除/诊断按钮功能、状态标签、左侧视频库列表布局与宽度、上传弹窗、筛选栏、搜索框、批量操作栏

验收

  • 单个视频上传完成后，素材库网格立刻出现该视频卡片（无需手动刷新）
  • staging 页面刷新后，同屏默认显示 6 张卡片，缩略图较矮，卡片整体比当前小约一半
  • hover/点击/选中/删除/播放/批量操作等全部正常
  • 响应式断点不崩

CI

  • TypeScript ✅
  • ESLint ✅
  • Prettier ✅
## 改动 ### 需求1：上传完成后立即在素材库网格显示 **问题**：上传完成后进度弹窗显示"已完成"，但素材库网格不刷新，要手动刷新页面才能看到新素材。 **根因**：useAssetUpload.ts 在 uploadAssetDirect 完成后调用 `queryClient.invalidateQueries({ queryKey: ["assets"] })`，但 useAssetsData.ts 查询的实际 key 是 `["assets", effectiveLibId]`，虽然 invalidateQueries 应该匹配前缀，但受 staleTime: 30_000 影响，查询可能不会立即重新获取。 **修复**： - 将 `invalidateQueries` 改为 `refetchQueries`，使用精确 queryKey `["assets", effectiveLibId]` 强制立即重新获取 - 保留 `invalidateQueries({ queryKey: ["asset-libraries"] })` 用于刷新视频库列表 ### 需求2：素材卡片尺寸缩小约一半 **改动**： - `.xx-asset-grid`：`repeat(4, 1fr)` → `repeat(6, 1fr)`（同屏可见卡片从 4 张增到 6 张） - `.xx-asset-thumb`：`aspect-ratio: 9/16` → `3/4`（从极高比例改为较矮，视觉更平衡） - `.xx-asset-info`：`padding: 12px` → `8px` - `.xx-asset-name`：`margin: 0 0 6px` → `4px`，`font-size: var(--font-size-sm)` → `var(--font-size-xs)` - `.xx-asset-play`：`width/height: 40px` → `32px`，`font-size: var(--font-size-md)` → `var(--font-size-sm)` - `.xx-asset-delete`：`width/height: 28px` → `24px` - `.xx-asset-card:hover transform`：`translateY(-2px)` → `translateY(-1px)` - `.xx-asset-thumb-placeholder`：`font-size: var(--font-size-3xl)` → `var(--font-size-xl)` **响应式断点**：保持不变（1400px: 3列, 1200px: 3列, 768px: 2列, 480px: 1列） **不改动**：卡片选中/取消选中逻辑、全选/清空批量操作、播放/删除/诊断按钮功能、状态标签、左侧视频库列表布局与宽度、上传弹窗、筛选栏、搜索框、批量操作栏 ## 验收 - 单个视频上传完成后，素材库网格立刻出现该视频卡片（无需手动刷新） - staging 页面刷新后，同屏默认显示 6 张卡片，缩略图较矮，卡片整体比当前小约一半 - hover/点击/选中/删除/播放/批量操作等全部正常 - 响应式断点不崩 ## CI - TypeScript ✅ - ESLint ✅ - Prettier ✅
xiaoxia added 1 commit 2026-08-30 18:32:00 +08:00
feat(assets): 上传完成即时刷新素材网格+卡片尺寸缩小
CI/CD Pipeline / Check push changed paths (pull_request) Has been skipped
Details
CI/CD Pipeline / Dedup Check - skip PR tests when covered by push pipeline (pull_request) Successful in 1s
Details
CI/CD Pipeline / Build Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Retag skipped Staging Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Staging (Watchtower auto-deploy) (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging E2E Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Staging API Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / ACR Image Cleanup (pull_request) Has been skipped
Details
CI/CD Pipeline / Check if frontend-only change (pull_request) Successful in 2m8s
Details
CI/CD Pipeline / Unit Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / PR Build Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Validate - Migration (alembic) (pull_request) Successful in 3m23s
Details
Preview Deploy / Deploy Preview Environment (pull_request) Successful in 3m33s
Details
PR Automation / Auto Merge on CI Green + Approved (pull_request) Successful in 4m2s
Details
AI Code Review / AI Code Review (pull_request) Successful in 4m7s
Details
CI/CD Pipeline / Validate - Type Check (mypy) (pull_request) Successful in 4m23s
Details
CI/CD Pipeline / Frontend Unit Tests (pull_request) Successful in 2m54s
Details
CI/CD Pipeline / PR Build Web Image (pull_request) Successful in 3m0s
Details
CI/CD Pipeline / Frontend Lint (pull_request) Successful in 3m18s
Details
PR Automation / Auto Approve on CI Green (pull_request) Successful in 5m27s
Details
CI/CD Pipeline / Validate - Code Quality (pull_request) Successful in 7m8s
Details
CI/CD Pipeline / Integration Tests (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production API Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Web Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Build Production Worker Image (pull_request) Has been skipped
Details
CI/CD Pipeline / Deploy Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Canary Release to Production (pull_request) Has been skipped
Details
CI/CD Pipeline / Production Browser E2E (pull_request) Has been skipped
Details
CI/CD Pipeline / CI Gate (pull_request) Successful in 28s
Details
Preview Cleanup / Cleanup Preview Environment (pull_request) Successful in 3m56s
Details
ACR Cleanup / ACR Image Cleanup (pull_request_target) Successful in 4m41s
Details
2b4731c12e 
- useAssetUpload: refetchQueries 替换 invalidateQueries，强制立即重新获取列表，避免 staleTime 延迟
- assets.css: 网格 4 列→6 列，缩略图 9:16→3:4，信息区 padding 12→8px，文件名 margin 6→4px + font-size sm→xs，播放按钮 40→32px，删除按钮 28→24px，hover translateY -2→-1px，占位符 font-size 3xl→xl
gitea-actions bot commented 2026-08-30 18:35:34 +08:00
Copy Link
Copy Source

🚀 预览环境已部署

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

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

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

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

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

代码审查结果 - PR #1558

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

无

💡 建议（1个可选）

  1. apps/web/src/pages/assets/assets.css 第218行：将网格列数从 4 列增加到 6 列属于较大的布局变更，建议确认在较小屏幕宽度（如平板或小窗口）下的响应式表现，必要时需配合媒体查询调整列数，避免在小屏设备上内容过于拥挤。

✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能无明显问题

🤖 由 AI 代码审查机器人自动生成 | 2026-08-30 10:36:05 | 模型:

## 代码审查结果 - PR #1558 ### ⚠️ 问题（0个需要修改） 无 ### 💡 建议（1个可选） 1. **apps/web/src/pages/assets/assets.css 第218行**：将网格列数从 4 列增加到 6 列属于较大的布局变更，建议确认在较小屏幕宽度（如平板或小窗口）下的响应式表现，必要时需配合媒体查询调整列数，避免在小屏设备上内容过于拥挤。 --- ✅ 格式检查通过 | ✅ 逻辑审查通过 | ✅ 性能无明显问题 --- <sub>🤖 由 AI 代码审查机器人自动生成 | 2026-08-30 10:36:05 | 模型: </sub> <!-- AI_CODE_REVIEW_AUTO_COMMENT -->
auto-approve-bot approved these changes 2026-08-30 18:37:28 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot approved these changes 2026-08-30 18:37:28 +08:00
auto-approve-bot left a comment
Collaborator
Copy Link
Copy Source

CI全绿，自动审批通过。

CI全绿，自动审批通过。
auto-approve-bot merged commit 63e68756ac into develop 2026-08-30 18:41:00 +08:00
auto-approve-bot deleted branch feat/upload-immediate-display-and-card-size 2026-08-30 18:41:00 +08:00
gitea-actions bot commented 2026-08-30 18:44:56 +08:00
Copy Link
Copy Source

🗑️ 预览环境已清理

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

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

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

No dependencies set.

Reference: xiaoxia/xiaoxia-saas#1558
Delete Branch "feat/upload-immediate-display-and-card-size"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?