feat(products): 成片卡片信息补全(分辨率/时长/大小/查重率)+ 竖屏视频cover填满 + Tab改名AI智能匹配 #1589

Merged
auto-approve-bot merged 1 commits from feat/product-card-info-fix into develop 2026-09-01 00:51:07 +08:00
3 changed files with 32 additions and 8 deletions
@@ -23,7 +23,7 @@ const MaterialModeTabs: React.FC<MaterialModeTabsProps> = ({ mode, onModeChange
onClick={() => onModeChange("auto")}
type="button"
>
AI智能匹配
</button>
</div>
)
@@ -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>
{/* 操作按钮 */}
+17 -2
View File
@@ -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;