From 8dfa2f5e48f51b67974097f351d9dba522cb1c84 Mon Sep 17 00:00:00 2001
From: hu xiaotong <416314413@163.com>
Date: Thu, 29 May 2025 17:28:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(CharacterDetail):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=A5=9E=E5=99=A8=E4=BD=BF=E7=94=A8=E5=8D=A0=E6=AF=94=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在角色详情页面增加神器使用占比模块
- 新增 ArtifactPercent 和 HeroDetailResp 接口用于处理神器数据
- 实现神器信息的渲染，包括图片、名称和使用率
---
 src/pages/CharacterDetail.tsx | 101 ++++++++++++++++++++++++++++++++--
 1 file changed, 95 insertions(+), 6 deletions(-)

diff --git a/src/pages/CharacterDetail.tsx b/src/pages/CharacterDetail.tsx
index 20bb07e..ae98c12 100644
--- a/src/pages/CharacterDetail.tsx
+++ b/src/pages/CharacterDetail.tsx
@@ -44,12 +44,6 @@ interface CharacterDetailProps {
     };
 }
 
-// mock数据类型定义
-interface GearSetRate {
-    setNames: string[]; // 每个set下可有1-3个套装
-    percent: number;
-}
-
 interface BuildStats {
     attack: number;
     defense: number;
@@ -70,6 +64,78 @@ interface BuildInfo {
     };
 }
 
+interface ArtifactPercent {
+    artifactCode: string;
+    artifactName: string;
+    rarity: string;
+    role: string;
+    imageUrl: string;
+    percent: number;
+}
+
+interface HeroDetailResp {
+    heroRespSimpleVO: {
+        id: string;
+        heroCode: string;
+        heroName: string;
+        nickName: string | null;
+        headImgUrl: string;
+        stars: number;
+        role: string;
+        attribute: string;
+    };
+    hero60AttributeVO: {
+        cp: number;
+        atk: number;
+        hp: number;
+        spd: number;
+        def: number;
+        chc: number;
+        chd: number;
+        dac: number;
+        eff: number;
+        efr: number;
+    };
+    heroSetAvgVO: {
+        atk: number;
+        hp: number;
+        spd: number;
+        def: number;
+        chc: number;
+        chd: number;
+        dac: number;
+        eff: number;
+        efr: number;
+    };
+    heroSetPercentVOS: {
+        setName: string;
+        percent: number;
+    }[];
+    heroArtifactPercentVOS: ArtifactPercent[];
+    heroSetShows: {
+        cp: number;
+        atk: number;
+        hp: number;
+        spd: number;
+        def: number;
+        chc: number;
+        chd: number;
+        dac: number;
+        eff: number;
+        efr: number;
+        hds: string;
+        ctr: string;
+        arfName: string;
+        arfPic: string;
+    }[];
+}
+
+// mock数据类型定义
+interface GearSetRate {
+    setNames: string[]; // 每个set下可有1-3个套装
+    percent: number;
+}
+
 // mock数据
 const mockAverageStats: BuildStats = {
     attack: 1887,
@@ -445,6 +511,29 @@ const CharacterDetail: React.FC = () => {
                                 </div>
                             </div>
                         </div>
+                        {/* 神器使用占比 */}
+                        <div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg p-8 border border-[#C17F59]/30 mb-6">
+                            <h3 className="text-lg font-semibold text-[#C17F59] mb-6">神器使用占比</h3>
+                            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+                                {heroDetail.heroArtifactPercentVOS?.map((artifact: ArtifactPercent, idx: number) => (
+                                    <div key={idx} className="flex flex-col items-center">
+                                        <div className="w-80 h-80 rounded-lg mb-2 overflow-hidden flex items-center justify-center">
+                                            <img 
+                                                src={artifact.imageUrl} 
+                                                alt={artifact.artifactName}
+                                                className="w-full h-full object-contain"
+                                            />
+                                        </div>
+                                        <span className="text-[#E6B17E] font-bold text-base text-center mb-1">
+                                            {artifact.artifactName}
+                                        </span>
+                                        <span className="text-white/70 text-base text-center">
+                                            使用率 {formatPercent(artifact.percent)}%
+                                        </span>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
                         {/* 下方builds，两列布局 */}
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                             {heroSetShows.map((build, idx) => (