From 2e7235c70459ce60ef2c9e190dd12c4bf4955a9b Mon Sep 17 00:00:00 2001
From: WuYongJie <549727955@qq.com>
Date: Thu, 24 Sep 2026 15:30:58 +0800
Subject: [PATCH] fix: restore material type and shop badges on cards

---
 components/home/MaterialCard.test.tsx | 11 +++++++++++
 components/home/MaterialCard.tsx      | 21 +++++++++++++++------
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/components/home/MaterialCard.test.tsx b/components/home/MaterialCard.test.tsx
index a22906d..271544b 100644
--- a/components/home/MaterialCard.test.tsx
+++ b/components/home/MaterialCard.test.tsx
@@ -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} />)
 
diff --git a/components/home/MaterialCard.tsx b/components/home/MaterialCard.tsx
index cc1aa2c..c5d14d7 100644
--- a/components/home/MaterialCard.tsx
+++ b/components/home/MaterialCard.tsx
@@ -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]"