From 2b4731c12efb29a147897d0c08748b8797bfcb7b Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Sun, 30 Aug 2026 18:31:39 +0800
Subject: [PATCH] =?UTF-8?q?feat(assets):=20=E4=B8=8A=E4=BC=A0=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E5=8D=B3=E6=97=B6=E5=88=B7=E6=96=B0=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E7=BD=91=E6=A0=BC+=E5=8D=A1=E7=89=87=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?=E7=BC=A9=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 apps/web/src/pages/assets/assets.css          | 24 +++++++++----------
 .../src/pages/assets/hooks/useAssetUpload.ts  |  7 ++++--
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/pages/assets/assets.css b/apps/web/src/pages/assets/assets.css
index c76ff4bc2..041d98d5e 100644
--- a/apps/web/src/pages/assets/assets.css
+++ b/apps/web/src/pages/assets/assets.css
@@ -215,7 +215,7 @@
    ============================================================ */
 .xx-asset-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(6, 1fr);
   gap: 14px;
 }
 
@@ -234,7 +234,7 @@
 .xx-asset-card:hover {
   border-color: var(--primary-color);
   box-shadow: var(--shadow-sm);
-  transform: translateY(-2px);
+  transform: translateY(-1px);
 }
 
 .xx-asset-card:active {
@@ -244,7 +244,7 @@
 
 /* 缩略图 */
 .xx-asset-thumb {
-  aspect-ratio: 9 / 16;
+  aspect-ratio: 3 / 4;
   position: relative;
   overflow: hidden;
   display: grid;
@@ -260,22 +260,22 @@
 }
 
 .xx-asset-thumb-placeholder {
-  font-size: var(--font-size-3xl);
+  font-size: var(--font-size-xl);
   opacity: 0.7;
 }
 
 /* 播放按钮 */
 .xx-asset-play {
   position: absolute;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   border-radius: var(--radius-full);
   background: rgba(255, 255, 255, 0.25);
   backdrop-filter: blur(4px);
   display: grid;
   place-items: center;
   color: var(--text-inverse);
-  font-size: var(--font-size-md);
+  font-size: var(--font-size-sm);
   transition: var(--transition-all);
 }
 
@@ -332,8 +332,8 @@
   position: absolute;
   bottom: var(--space-sm, 8px);
   right: var(--space-sm, 8px);
-  width: 28px;
-  height: 28px;
+  width: 24px;
+  height: 24px;
   border-radius: var(--radius-full, 999px);
   background: rgba(0, 0, 0, 0.45);
   backdrop-filter: blur(4px);
@@ -380,12 +380,12 @@
 
 /* 卡片信息 */
 .xx-asset-info {
-  padding: 12px;
+  padding: 8px;
 }
 
 .xx-asset-name {
-  margin: 0 0 6px;
-  font-size: var(--font-size-sm);
+  margin: 0 0 4px;
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   color: var(--text-primary);
   white-space: nowrap;
diff --git a/apps/web/src/pages/assets/hooks/useAssetUpload.ts b/apps/web/src/pages/assets/hooks/useAssetUpload.ts
index 36d128c2a..bb0fd8599 100644
--- a/apps/web/src/pages/assets/hooks/useAssetUpload.ts
+++ b/apps/web/src/pages/assets/hooks/useAssetUpload.ts
@@ -45,9 +45,12 @@ export function useAssetUpload({ effectiveLibId }: { effectiveLibId: string }) {
 
   /** 刷新素材列表（prepare 后/complete 后调用，让卡片即时出现/流转） */
   const refreshList = useCallback(() => {
-    queryClient.invalidateQueries({ queryKey: ["assets"] })
+    // 使用 refetchQueries 强制立即重新获取，避免 staleTime 导致延迟
+    if (effectiveLibId) {
+      queryClient.refetchQueries({ queryKey: ["assets", effectiveLibId] })
+    }
     queryClient.invalidateQueries({ queryKey: ["asset-libraries"] })
-  }, [queryClient])
+  }, [queryClient, effectiveLibId])
 
   /** 执行单个文件的完整上传流程（prepare→transfer→complete） */
   const runUpload = useCallback(
-- 
2.54.0