WuYongJie/gongxiangp2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restore material type and shop badges on cards

Browse Source
This commit is contained in:
WuYongJie 2026-09-24 15:30:58 +08:00
parent 756f9c9575
commit 2e7235c704
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/home/MaterialCard.test.tsx
View File

@ -67,6 +67,17 @@ describe('MaterialCard', () => {
jest.clearAllMocks()
})
test.each(['任务-AI原图', '直播切片', '音乐', '证书-检测报告'])('%s 的类型和店铺应独立于截断的元信息展示', (materialType) => {
render(<MaterialCard {...defaultProps} material={{ ...baseMaterial, materialType }} />)
const typeBadge = screen.getByLabelText(`素材类型：${materialType}`)
const shopBadge = screen.getByLabelText('使用店铺：旗舰店')
expect(typeBadge.closest('[data-material-link]')).not.toBeNull()
expect(shopBadge.closest('[aria-label="素材分类信息"]')).not.toBeNull()
expect(typeBadge.closest('.truncate')).toBeNull()
expect(shopBadge.closest('.truncate')).toBeNull()
})
test('AI 导入素材应显示 AI生成 标签', () => {
render(<MaterialCard {...defaultProps} />)

21
components/home/MaterialCard.tsx
View File

@ -564,6 +564,14 @@ export default function MaterialCard({
</div>
)}
{material.materialType && (
<div className="pointer-events-none absolute inset-x-2 top-2 z-40 flex justify-end">
<span aria-label={`素材类型：${material.materialType}`} className="max-w-full break-words rounded-[8px] bg-[#1a1c1d] px-2.5 py-1.5 text-xs font-medium leading-5 text-white">
{material.materialType}
</span>
</div>
)}
{/* 转码进度显示 */}
{renderTranscodeProgress()}
@ -589,6 +597,13 @@ export default function MaterialCard({
<h3 className="truncate font-display text-[16px] font-semibold tracking-[-0.03em] text-[#1a1c1d]">
{materialDisplayTitle}
</h3>
<div aria-label="素材分类信息" className="mt-2 flex flex-wrap gap-1.5 text-xs font-medium leading-5 [&>span]:max-w-full [&>span]:break-words [&>span]:rounded-[6px] [&>span]:px-2 [&>span]:py-0.5">
{material.categoryName && <span aria-label={`使用店铺：${material.categoryName}`} className="bg-[#e6f4ff] text-[#0050cb]">{material.categoryName}</span>}
{material.sceneName && <span aria-label={`场景：${material.sceneName}`} className="bg-[#edf5f1] text-[#087052]">{material.sceneName}</span>}
{isTaskDetailMaterial && <span className="bg-[#f0f0f5] text-[#525b94]">{getTaskDetailSourceTypeLabel(material.taskDetailSourceType)}</span>}
{!isTaskDetailMaterial && material.isAiGenerated && <span className="bg-[#f0f0f5] text-[#525b94]">AI生成</span>}
{material.materialType === '3D场景' && material.renderer && <span className="bg-[#f3f4f5] text-[#52565b]">{material.renderer}</span>}
</div>
{(material.materialType === '直播切片' && (material.liveDate || material.liveHost || material.livePlatform)) && (
<p className="mt-1 truncate text-[12px] leading-relaxed text-[#86898e]">
{material.livePlatform && <span>{material.livePlatform}</span>}
@ -600,12 +615,6 @@ export default function MaterialCard({
{fileSizeLabel && <><span className="font-en tabular-nums tracking-[0.04em]">{fileSizeLabel}</span> · </>}
{material.authorName && <><span>{material.authorName}</span> · </>}
<span className="font-en tabular-nums tracking-[0.04em]">{format(new Date(material.createdAt), 'yyyy.MM.dd')}</span>
{material.materialType && <> · <span>{material.materialType}</span></>}
{material.categoryName && <> · <span>{material.categoryName}</span></>}
{material.sceneName && <> · <span>{material.sceneName}</span></>}
{isTaskDetailMaterial && <> · <span>{getTaskDetailSourceTypeLabel(material.taskDetailSourceType)}</span></>}
{!isTaskDetailMaterial && material.isAiGenerated && <> · <span>AI生成</span></>}
{material.materialType === '3D场景' && material.renderer && <> · <span>{material.renderer}</span></>}
</p>
<p
className="mt-1 cursor-pointer truncate font-en text-[11px] tracking-[0.04em] text-[#86898e] hover:text-[#1a1c1d]"