From 9dc4318893f585fc2d9afcdb3306fda976441dc7 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Tue, 1 Sep 2026 00:38:25 +0800
Subject: [PATCH] =?UTF-8?q?feat(products):=20=E6=88=90=E7=89=87=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E8=A1=A5=E5=85=A8=E5=88=86=E8=BE=A8=E7=8E=87/?=
 =?UTF-8?q?=E6=97=B6=E9=95=BF/=E5=A4=A7=E5=B0=8F/=E6=9F=A5=E9=87=8D?=
 =?UTF-8?q?=E7=8E=87=E4=BF=A1=E6=81=AF=20+=20=E7=AB=96=E5=B1=8F=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91cover=E5=A1=AB=E6=BB=A1=20+=20=E7=B4=A0=E6=9D=90?=
 =?UTF-8?q?=E5=8C=B9=E9=85=8DTab=E6=94=B9=E5=90=8DAI=E6=99=BA=E8=83=BD?=
 =?UTF-8?q?=E5=8C=B9=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/material/MaterialModeTabs.tsx  |  2 +-
 .../pages/products/components/ProductCard.tsx | 19 ++++++++++++++-----
 apps/web/src/pages/products/products.css      | 19 +++++++++++++++++--
 3 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/pages/generate/components/material/MaterialModeTabs.tsx b/apps/web/src/pages/generate/components/material/MaterialModeTabs.tsx
index d733f15e1..4b0d8bd10 100644
--- a/apps/web/src/pages/generate/components/material/MaterialModeTabs.tsx
+++ b/apps/web/src/pages/generate/components/material/MaterialModeTabs.tsx
@@ -23,7 +23,7 @@ const MaterialModeTabs: React.FC<MaterialModeTabsProps> = ({ mode, onModeChange
         onClick={() => onModeChange("auto")}
         type="button"
       >
-        选择视频库自动匹配
+        AI智能匹配
       </button>
     </div>
   )
diff --git a/apps/web/src/pages/products/components/ProductCard.tsx b/apps/web/src/pages/products/components/ProductCard.tsx
index 366e7762e..8f1ff35ad 100644
--- a/apps/web/src/pages/products/components/ProductCard.tsx
+++ b/apps/web/src/pages/products/components/ProductCard.tsx
@@ -11,7 +11,7 @@ import {
 } from "@ant-design/icons"
 import type { ProductItem } from "../types"
 import { statusConfig, reviewStatusConfig } from "../constants"
-import { formatTime } from "../utils"
+import { formatTime, formatSize } from "../utils"
 
 interface ProductCardProps {
   product: ProductItem
@@ -210,11 +210,20 @@ export const ProductCard: React.FC<ProductCardProps> = ({
           <span className={`xx-product-status ${st.className}`}>{st.text}</span>
           <span className="xx-product-date">{product.date}</span>
         </div>
-        {product.duplicateRate > 0 && (
-          <span className={`xx-product-dup-rate ${dupClass}`}>
-            查重率：{product.duplicateRate.toFixed(1)}%
+        <div className="xx-product-meta-grid">
+          <span className="xx-product-meta-item">分辨率：{product.resolution || "-"}</span>
+          <span className="xx-product-meta-item">
+            时长：{product.duration > 0 ? formatTime(product.duration) : "-"}
           </span>
-        )}
+          <span className="xx-product-meta-item">大小：{formatSize(product.fileSize)}</span>
+          <span
+            className={`xx-product-meta-item xx-product-dup-rate${
+              product.duplicateRate > 0 ? ` ${dupClass}` : ""
+            }`}
+          >
+            查重率：{product.duplicateRate > 0 ? `${product.duplicateRate.toFixed(1)}%` : "-"}
+          </span>
+        </div>
       </div>
 
       {/* 操作按钮 */}
diff --git a/apps/web/src/pages/products/products.css b/apps/web/src/pages/products/products.css
index d289f0954..1df3cdc38 100644
--- a/apps/web/src/pages/products/products.css
+++ b/apps/web/src/pages/products/products.css
@@ -276,11 +276,11 @@
   background-position: center;
 }
 
-/* 内联视频播放器 */
+/* 内联视频播放器（cover 填满容器，竖屏视频不留左右空白） */
 .xx-product-thumb-video {
   width: 100%;
   height: 100%;
-  object-fit: contain;
+  object-fit: cover;
   display: block;
 }
 
@@ -347,6 +347,21 @@
   gap: var(--space-xs);
 }
 
+/* 卡片信息网格：分辨率/时长 一行，大小/查重率 一行 */
+.xx-product-meta-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px var(--space-sm);
+}
+
+.xx-product-meta-item {
+  font-size: var(--font-size-xs);
+  color: var(--text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* 状态标签 */
 .xx-product-status {
   padding: 2px 10px;
-- 
2.54.0