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 0000000..77e196b Binary files /dev/null and b/public/pic/item/attr/cm_icon_stat_attack.png differ diff --git a/public/pic/item/attr/cm_icon_stat_crit_chance.png b/public/pic/item/attr/cm_icon_stat_crit_chance.png new file mode 100644 index 0000000..c193f7a Binary files /dev/null and b/public/pic/item/attr/cm_icon_stat_crit_chance.png differ 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 0000000..9f20d1a Binary files /dev/null and b/public/pic/item/attr/cm_icon_stat_crit_damage.png differ 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 0000000..e49f32a Binary files /dev/null and b/public/pic/item/attr/cm_icon_stat_defense.png differ 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 0000000..da3632c Binary files /dev/null and b/public/pic/item/attr/cm_icon_stat_effect_resistance.png differ 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 0000000..5bf4baf Binary files /dev/null and b/public/pic/item/attr/cm_icon_stat_effectiveness.png differ diff --git a/public/pic/item/attr/cm_icon_stat_health.png b/public/pic/item/attr/cm_icon_stat_health.png new file mode 100644 index 0000000..e98fb26 Binary files /dev/null and b/public/pic/item/attr/cm_icon_stat_health.png differ 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 0000000..d5de97d Binary files /dev/null and b/public/pic/item/attr/cm_icon_stat_speed.png differ diff --git a/public/pic/item/set/Health.png b/public/pic/item/set/Health.png new file mode 100644 index 0000000..16256b1 Binary files /dev/null and b/public/pic/item/set/Health.png differ diff --git a/public/pic/item/set/Immunity.png b/public/pic/item/set/Immunity.png new file mode 100644 index 0000000..ac64caf Binary files /dev/null and b/public/pic/item/set/Immunity.png differ 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 (
{/* 左侧：头像+导航 */}