From 5cf5373696c94bb698286ffbd3682e364c26abbd Mon Sep 17 00:00:00 2001 From: hxt Date: Sat, 24 May 2025 11:01:41 +0800 Subject: [PATCH] =?UTF-8?q?feat(CharacterDetail):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E8=A7=92=E8=89=B2=E9=85=8D=E8=A3=85=E6=8E=A8=E8=8D=90=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 新增配装推荐模块，包括平均属性、主流套装占比和具体Builds - 添加属性图标和套装图标映射 - 实现角色基础属性展示 - 优化技能列表和印记集中展示 --- public/pic/item/attr/cm_icon_stat_attack.png | Bin 0 -> 619 bytes .../item/attr/cm_icon_stat_crit_chance.png | Bin 0 -> 738 bytes .../item/attr/cm_icon_stat_crit_damage.png | Bin 0 -> 699 bytes public/pic/item/attr/cm_icon_stat_defense.png | Bin 0 -> 660 bytes .../attr/cm_icon_stat_effect_resistance.png | Bin 0 -> 693 bytes .../item/attr/cm_icon_stat_effectiveness.png | Bin 0 -> 828 bytes public/pic/item/attr/cm_icon_stat_health.png | Bin 0 -> 595 bytes public/pic/item/attr/cm_icon_stat_speed.png | Bin 0 -> 574 bytes public/pic/item/set/Health.png | Bin 0 -> 2346 bytes public/pic/item/set/Immunity.png | Bin 0 -> 2345 bytes src/pages/CharacterDetail.tsx | 287 +++++++++++++++++- src/pages/Characters.tsx | 4 +- 12 files changed, 274 insertions(+), 17 deletions(-) create mode 100644 public/pic/item/attr/cm_icon_stat_attack.png create mode 100644 public/pic/item/attr/cm_icon_stat_crit_chance.png create mode 100644 public/pic/item/attr/cm_icon_stat_crit_damage.png create mode 100644 public/pic/item/attr/cm_icon_stat_defense.png create mode 100644 public/pic/item/attr/cm_icon_stat_effect_resistance.png create mode 100644 public/pic/item/attr/cm_icon_stat_effectiveness.png create mode 100644 public/pic/item/attr/cm_icon_stat_health.png create mode 100644 public/pic/item/attr/cm_icon_stat_speed.png create mode 100644 public/pic/item/set/Health.png create mode 100644 public/pic/item/set/Immunity.png diff --git a/public/pic/item/attr/cm_icon_stat_attack.png b/public/pic/item/attr/cm_icon_stat_attack.png new file mode 100644 index 0000000000000000000000000000000000000000..77e196b93a896e588c3d9e76c586ce33484f52ff GIT binary patch literal 619 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI13?%1G+4BcToeb~^aRt(F@aWMa2>Zy9BU`p? zadUHnOCd9U{`~p%>({GSubw-1?)2%?$B!T1xpU{bb?fHOpWofxot&KP=;(;79>{+E z`t_YVcW&Icaq;5Cy?gggo;-NswPKLxZ8^( z$EGBBI;ksgF#r5|=h~HvClBq~FmG~1fSru!+lO~=p5C%z!SrbpI$DZyGNYXN|9t-V z;nk~W_xG+{HKTj=M@~5g21b5Q7sn8d^HV2W&pQ+#;9{vKG5el%ivWj!!j>;~|NjSm zoH|j*dg7upuW#O*JNJxzX&?vJ{-#F)57bxR(97Aio+Z=hX5;+Tna31sS*G!}{yO9r z+n6mG`%ukOY}cfBOX{>*SuIyyTl1>5wy7sk&-S})rsKak+f(KmEmy1vnmf(p`8Jt} zvIQIq^tPV$;@>oJ<&jO>+4e6x*3Nl@<#o;BWvjg_@_%NtT@rcokHMWvd;d zi~hX0X|Z6r5ZQ8Voii+&)?5LZ!aq=3)lGN%a{KC{@&i+hK7csqN0e12%yye|NmEV z=eYn`o+Uwk!3+(2vZfjrj`buN{{3`s-Q1~tj#lC?9$dM2t~EVAGQh{(?#=bHr*~{! zzG(LJlH5=(*7r|u-?)C{(7ru87tWm2QK=*Pb<>8`OJ=cKM(CerU|`Jhba4#PINv+z zdeI>R5trf(y}3EbZx|LjbIf({c)$1F|Njd;IOd#rqWW7+c5PU>yY>GI6E|o7U9;wn zei28`jqqD7WoM!x$J^EoNok9AWgger`j!&C@*lE@|f@hgSg^K@-_@FQ;=qn6~H2fxJ(eK|9$`|Im^CwuOBLYtc>q z^*2om%}#ATzD2@6OUNg|?wA?>#d$Wxk*`}0vj&*CRGvFH`_xC@l`FEfZa;mqjXA>U z16#Pg!0~aZSFH@RT{WxoXGrHNRQDg!-L7X~#2T+3u3k h3boo*Ymfb2oqz0-)@6f>F@d1?_H^}gS?83{1OOQmNEQG9 literal 0 HcmV?d00001 diff --git a/public/pic/item/attr/cm_icon_stat_crit_damage.png b/public/pic/item/attr/cm_icon_stat_crit_damage.png new file mode 100644 index 0000000000000000000000000000000000000000..9f20d1a9320bcf976778c2294bd4392514cecb8c GIT binary patch literal 699 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI13?%1G+4BcTT@COFaRt&4Fm2kjii!##J0&Fr zCdSa&*~!Dh1Lp!62M!$AwQE;jUtdg2Oh`zGmzS5Jp`og(DzX|N``52u@87?_apT6- zt5+{xym;iuk=3hL&zUo)si`R|D+^8WpFe-zzJ2@R#fuXsPHY2%4I4JBTeoh(f(4T% zP0G*DcXf3&H#bMt_4Vu54C6qZZJRDM`?X?dVmS@*^?XR%$(ZSm7QR%A^7XVy*oEA9N4jDVQi$1G}oVZ zuPz@ycKFb)&5Nh>7YBRTfBX3M>BDR7ZG4ZI5B*|bVD$HNaSYKo-#YPm(IEo?w!J$N zlR5Ub$T|5gEWb3l`oDXZ$Z_Vx87KcuN_+n9^4y-_q?I!YXQ~M7(tfP>uAWwhs#LzwEuxb7Ho<-R%gA=%`nm9Cbx8Vqxn&&R%#EnAz*c z7cHrgvPrF3W1D7|^xtD5%eL&&KJ+fs?!9XiU*grOPuDa*E%iN{y2@MQ_ODy*?QRn% z_VJ$RKGAmgz0oO~Q@VMl{G8V586CIHGt>TRBNZ&N{f+Y0!-5k_%&cn#&uTkvvClXm z@71%YZrPbRHz#Wx+gbB0vUCrhsDD9`dF`h)vnkx*pIjTz_)W8J3n1H ux%fugLb==PR{hpw4iKEaQ_kgC{XRyo>l*EA@3FoIMXjf+pUXO@geCwL95dSh literal 0 HcmV?d00001 diff --git a/public/pic/item/attr/cm_icon_stat_defense.png b/public/pic/item/attr/cm_icon_stat_defense.png new file mode 100644 index 0000000000000000000000000000000000000000..e49f32afa697145b616fae55098a5252c7f52bb4 GIT binary patch literal 660 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI13?%1G+4BcToeA&>aRt(Fz{A7y=g*&a@7@7L ze*XM<@ZiC`ygVHp9k_xoU%oti`0&o1I~OlrT)cR3Q&W?em>5L%+qZ8oUc9(>@7~Ru zH&2~9wR`vOl`B^+TefWC#EF%am9DO?%F4>p($YZ1FJHdAa^=dobLTd0+&FLEyq=z( z_V)ImAdnL=!Ryzrf!1BUdiB_`V}}nP-mzoH`t|FlPoJKVk&&93nw*>*7#L`7ZVuG= z|NsB0ltWj6Ea#FSzhH)jB%S8J@1uU5UEEU@#P{XN!<&0nx0P6Yd;R$Sl~V`yZCXC1 ztKIp{?dwN&ZdfN0@`$ddt$@eq={|BdCIMv-E^3))$U z^mK(!PxhnDmI~gN1^TX^(G9WH-+sxYT{Ekn@nW<`)7kSD3a=8?Pq{iZ8P~7-`FUDI z)?tCK&629?mAShX++WJ|Y7xVy13B$`{mQ@2WXup;Fok(bZjeQEiQd%~li5zL8*(F- zNQySH<#A+WePxZldgEd1v5aii3ry=Ygc*4Qw0)+Y&o*(HTM_tlk^2E|HH%FXQ*En` zd(C8TnQ}ltu~V}DVQ0(lo_41le#^`+3464xJsGc7GH%Je1p^y>2I? z-$%tSPuKf;&x%%9_{>V??24?F+SmMQZwhtzzgl|k&$qqrB9>?Jv9UBu$0YBXcw6Id Zcf4(>*)gGNIX6&@db;|#taD0e0ss}RFH!&i literal 0 HcmV?d00001 diff --git a/public/pic/item/attr/cm_icon_stat_effect_resistance.png b/public/pic/item/attr/cm_icon_stat_effect_resistance.png new file mode 100644 index 0000000000000000000000000000000000000000..da3632cfdad82dea86535fc2fb1763cb00a45c26 GIT binary patch literal 693 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI13?%1G+4BcTT?+6CaRt&q@bl--lP6CC8PA?Q zOH52uP*4DgGB6xEbZFuC5{?B5)}n zFG_&XHG26bhF`ja_`QK>lcn6J#t`CUw3|j%=fp~ubkPpd)KzLD`h=49Aso* zVD$BLaSYKo-#h81-)jRA*Uht5dd@Q0QnHNst#0bPodxd4{{G+Z;-|D=>VyQ_8Q1~`5U&qZIQjoAZN;UK4h|s?vH~Zleiy<2X8iT7Q3WZ zIxqE1gTt)b8*Qah=g!pHcKX!Dy(uSM>UZ{iZM&^{F~82rZ|*EL^{D4N)=GW#`uVR- zNS*i9{ z1ihCZ*!;uzRf?&m&Y5*(MqzyuFI!&_E?8L~FymwI-H=P|#=gN;yOeCgc`nwau8Gv~ zTRwNq)H31i+&_Pv&v1G_>wlt@)8%5b55GcOmflFIH<96SFFSdC57U-uCZBc73V{L3 Oz~JfX=d#Wzp$PySk3k9m literal 0 HcmV?d00001 diff --git a/public/pic/item/attr/cm_icon_stat_effectiveness.png b/public/pic/item/attr/cm_icon_stat_effectiveness.png new file mode 100644 index 0000000000000000000000000000000000000000..5bf4bafe592afb18e31e4a361f6c9951278309d4 GIT binary patch literal 828 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI13?%1G+4BcTeGc#maRt&4@ZrM;AmiDyXHrs9 z-@kwV`t|Gk_wP@hJh^Y*zL_&;iin5^2nfK`GQ4~D?#-Jw4<0UJF z#_!+1fBg9I@ZrN_$BwOAw{G?7)s2mf(b3UfUS7`5&Tz$_K7D%m^5x^lkMG>MbK}O1 zvuDrl*|TT+_U&7?Y}vSR|Ne zu_JqzO`F)+7;CSl`1jS>eY@uOcUf6*pWM80-QorH61#R@Vqjog;pyTSqH(@-Qh3p; z00GwDnhFz*Z#+pjU@6#Rc<$rV&Ht}fsC-zy`-@@e?yM`jRO@QGSJpoNdth0AQr*^5 z;`TW<8Wyb{Z zQEh%_&na?GZ@MM8ds&&~s>o{s?8{xX?_Ddu*%|t?XU(&To7!8C@t9>D>g2Eb5%nWQ zc5l(13&{#Ewzu<_Ml5Uh)YhGQu}6Q^y8Rczq>|O1zDel+{$jFp$RQUmt37|d+h}-R z%`x2)?s|&Ze2TSH$&%flTlLK&F8vAGH-+JtGSA7q$8N@m#BRNNIX%g3Wy%7fHNK)J zPROcjab=5(r+ePrf2H5#sPWSYvz|2^O*NnS<@|R8x$MFk#={?_a&Dg8Zg6i=Pt)VI rZ~3FEd*{w|+n4e9t?y^uQ$MEpN41zKXm|2DfD(D$761G9@7J$ij~_q2 zbLY;@n>Vjsy?XB4xzf^7e}8{_dwaODZ{NPXfB*jJ)2H|D-8+8#`1^c%PE3NpKP4a>hD-9;iO=~!w@o1N~Wo%?__w36) z-YwIZta!gI^Iy7{|z%HLkG u$;u5^7qw(>ykF~Zborb0+wz>g|J*O%e$|diudP!J6yBb$elF{r5}E*6Aqp@6 literal 0 HcmV?d00001 diff --git a/public/pic/item/attr/cm_icon_stat_speed.png b/public/pic/item/attr/cm_icon_stat_speed.png new file mode 100644 index 0000000000000000000000000000000000000000..d5de97d2088f90a379b5530d27f40fc2af87b58c GIT binary patch literal 574 zcmeAS@N?(olHy`uVBq!ia0vp^QXtI13?%1G+4BcTZ4B@UaRt&q@bl+S2m?;uzJ2@b z*|QrrZcIo>P*qiBXJ>~?0U3Y({CWTW{pr)Ej~+c*Qc{wcnJFnL2~qIr)2By|9^Jcl z@6@SN`}XZyy?XVODO0+-x*8iBZES4#`1p{`L1zE@_3PEESI?e3yLRo`g$ozuCfte)6h=;v;vCdbF|>&?qM*H0bay>sUD^5b)O1Q{3@nLJ$_ zLp08}UV2{EWFXOy7$?f^?cfmQKKH8CuJm{R4@udzE&cQ1@6-8YbF(61%3P+kW@yys(=x z(Vq9K7H?umPdcnNo#k^%$V00KelB5OSKnXwx;tWv>#97jnTHRqc)EE4yTJtMU;DkX fy0$&q*ctOy{H2Qa`>V_S!LjG*>gTe~DWM4fuY&!^ literal 0 HcmV?d00001 diff --git a/public/pic/item/set/Health.png b/public/pic/item/set/Health.png new file mode 100644 index 0000000000000000000000000000000000000000..16256b17fccc51cfdc2979a46b7aa24080a20766 GIT binary patch literal 2346 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 literal 0 HcmV?d00001 diff --git a/public/pic/item/set/Immunity.png b/public/pic/item/set/Immunity.png new file mode 100644 index 0000000000000000000000000000000000000000..ac64caf03a0e4ec4a59999192824453a9178758d GIT binary patch literal 2345 zcmXYyc{tSH7ssbaOj$Joi4&{o|(DBN5zSC>R6+aa&tiII^)_B4(^5byi(cTM-Hq<73?l!hMvJgYD;N{x~^lrY)|wJZj=`Ky{k?U|r11 z(xA>KDFYQzHOZddc7`pDnNP|SN(fj|oQI8pPHAysMmW|AZk2cof0q!D9qZ@qj*0WR z7!~9j;EDBeu(!2wQP;U}`joY{1|q^$H{r4o&hgYWjA5h~TvbNU#z0P6UbrsFewlKE z)*J!=oxpniVkdsQ%$pQp3GB51UrE5nyx-4b+U__vr8@48rf-j=Yz^IBA4sH=Bj%o6 zAAR7_f8Xt&Xlnpy2WX|kB=@dtmyXPf0HYfCkh4FQ@uM;LOO1cSZTqrVn_|2bbE#_K zZ87tG&RSpmO7G3D4PjGt*QV=&s1-gvcU@}|?11eiV73yVKLVy70<*=yByoK-cXu@B zcXu?c6+hP+K3Wkv_6YZ;1WV4vQt~hrH*9l5EHVSk09qCBjRbru*qkc(-kZhfOWznw z`q>`WP7KPAw5uf8=7(A^_geu*3ouu<@uPHyTDtkYm{J-0p+2U!@N!d@d-EOF##9t3 z()#Yj6(QE!SA;tvoj`0{G>!#2Z0;BL{KBta^AN$sv!YTfjCsAKc{TCXm4!LPl8K7q z>dG?j{u*O3XmfpYeQlxvY0mufXJ>0|ZFO#9Y=rW-Aj)HZcV}mNYhz<=VstRf&*eOm z$+G;}-{0HY+x;t6lckOImpv~!o68GxGtvnx3rl}Z|JnXC?)=sE_V(t+#>O(^>nCbI zxjY{RbpnBo=vZ5rIqQ#9j7OkPc!4-V^&+2sSqdIX*HwX9EdKt#BC9l$KZ$f?@(VU{ zb#`{Ty@-C(gKz+r|Af5>VXOsj-T38V?&rMEl*Djh_jJmi@(~JSf@Cm=mg-5Q%n!{T z#Bt~oc4a>o{HtZPA_m&>_o%GjtS}nl>CoWlG$EiBFAfLP;oZs|p5OA2S{kpl3$Lc7gOt;06=h<#?~Oe5nR1g+HF#2`KQl{y#7%m9m8;B}a8ot{;O|Gi*4Nc+B{+Qtl`V zP2uS6;nV4*lnGu`lw&?xKDi}%CuG_rE=nt1LEb?i4x}>d!{a}~UAc2HynU>EqC4qLZE2isv(vB4?$J%F4qx${+HZ7c#%{p-(iQ(Hl!4pGCH2_w}Y3w=X!N|3g;;^p>zb#C2p@FW{B z#J22J4Y{7~1Ign3C44yJ?so^oW_(@tyvYzLT=k4xeJ=-06;=}yynib|mY6~jNl)V_ zHoE?;C-+eEyWa{vXC5eQ4lr;vw?E{Ebm9cOywnPep#NG?sX!cNs;H%9ZKAv`sZ^gZ z%{*e0nlX%QaBXolo(j5it4~|8^b=d{#`6!m((}YgkE|CR0T@N~tXJWaGqCa8$}qg| zS6pJRh`^YViVBzP0ugrRXP<|C*MhyEc<{Xvhzg_$bcCo&S)>mp^|yPq_Fh~5W|ji` zSjdm~xS*wsvLZxE6z3qlEN}IrJlK0{#+2+HAg?y9Sr1=pJVbR*nILHf4famc=|2U0 z$8?L{F%&h?C^_}teJitrc74$SH>oHa@l0}b6~?WYk=m3)I?|fnE~2gOf73_f<iN*8l2|P&X_%x?Y;AS_IPAyyN?@j>HdJS zV}@7b7HLMAGnw+RHx_Fc7Jfx^C>vqERCM2vEK>JPbhB=lM+~9OCbmrn>A6 zUa#kSyKp!n6|}EC%*=eBM82e+0^j<;97zK0+}z=L^0D(+s-fknzkj_o9BEN+?wR;M DpLt@< literal 0 HcmV?d00001 diff --git a/src/pages/CharacterDetail.tsx b/src/pages/CharacterDetail.tsx index b8853cc..a6d2d19 100644 --- a/src/pages/CharacterDetail.tsx +++ b/src/pages/CharacterDetail.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React, {useEffect} from 'react'; export interface Skill { name: string; @@ -41,9 +41,113 @@ interface CharacterDetailProps { }; } -const CharacterDetail: React.FC = ({ character }) => { +// mock数据类型定义 +interface GearSetRate { + setNames: string[]; // 每个set下可有1-3个套装 + percent: number; +} + +interface BuildStats { + attack: number; + defense: number; + health: number; + critChance: number; + critDamage: number; + effectiveness: number; + effectResistance: number; + speed: number; +} + +interface BuildInfo { + stats: BuildStats; + gearSets: string[]; + artifact: { + name: string; + img?: string; + }; +} + +// mock数据 +const mockAverageStats: BuildStats = { + attack: 1887, + defense: 2136, + health: 17809, + critChance: 99, + critDamage: 267, + effectiveness: 1, + effectResistance: 2, + speed: 173, +}; + +const mockGearSetRates: GearSetRate[] = [ + {setNames: ['免疫', '吸血'], percent: 40.37}, + {setNames: ['暴击', '吸血', '速度'], percent: 28.7}, + {setNames: ['生命'], percent: 7.4}, + {setNames: ['命中', '防御'], percent: 5.1}, // 测试多余set不会显示 +]; + +const mockBuilds: BuildInfo[] = [ + { + stats: { + attack: 1769, + defense: 2156, + health: 19281, + critChance: 102, + critDamage: 273, + effectiveness: 22, + effectResistance: 0, + speed: 168, + }, + gearSets: ['生命', '吸血', '吸血'], + artifact: {name: '伊赛丽亚的誓约', img: ''}, + }, + { + stats: { + attack: 1957, + defense: 2090, + health: 18369, + critChance: 100, + critDamage: 271, + effectiveness: 0, + effectResistance: 0, + speed: 178, + }, + gearSets: ['暴击', '吸血'], + artifact: {name: '圣洁的遗物', img: ''}, + }, + { + stats: { + attack: 1894, + defense: 2030, + health: 19053, + critChance: 100, + critDamage: 272, + effectiveness: 0, + effectResistance: 0, + speed: 183, + }, + gearSets: ['暴击', '吸血'], + artifact: {name: '伊赛丽亚的誓约', img: ''}, + }, +]; + +// 套装图标映射 +const setIconMap: Record = { + 'Health': '/pic/item/set/Health.png', + 'Immunity': '/pic/item/set/Immunity.png', + '生命': '/pic/item/set/Health.png', + '免疫': '/pic/item/set/Immunity.png', +}; + +// 神器图片映射 +const artifactImgMap: Record = { + 'Elbris Ritual Sword': 'https://epic7db.com/images/artifacts/elbris-ritual-sword.webp', + '伊赛丽亚的誓约': 'https://epic7db.com/images/artifacts/elbris-ritual-sword.webp', +}; + +const CharacterDetail: React.FC = ({character}) => { useEffect(() => { - window.scrollTo({ top: 0, behavior: 'auto' }); + window.scrollTo({top: 0, behavior: 'auto'}); }, []); const renderStars = (count: number) => { @@ -76,15 +180,28 @@ const CharacterDetail: React.FC = ({ character }) => { ); }; + // 属性图标占位 + const statIcons: Record = { + attack: '⚔️', + defense: '🛡️', + health: '❤️', + critChance: '🎯', + critDamage: '💥', + effectiveness: '🎲', + effectResistance: '🚫', + speed: '💨', + }; + return (
{/* 左侧：头像+导航 */}