kever/epic-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(src): 优化导航栏和页面路由

Browse Source 
- 更新导航栏显示内容，增加对战信息页面
- 调整首页路由，改为角色列表页面
- 更新 CharacterDetail 页面，增加职业和星级信息展示
- 修改 Characters 页面，使用中文标签替换英文
This commit is contained in:
hxt
2025-05-29 22:45:19 +08:00
parent ca42e9e373
commit 67936f382d
4 changed files with 50 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.tsx
View File

@@ -124,14 +124,14 @@ const App: React.FC = () => {
<Navbar onLoginClick={handleLoginClick} /> <Navbar onLoginClick={handleLoginClick} />
<main className="pt-16"> <main className="pt-16">
<Routes> <Routes>
<Route path="/" element={<Lineup />} /> <Route path="/" element={<Characters />} />
<Route path="/home" element={<Home />} /> <Route path="/home" element={<Home />} />
<Route path="/characters" element={<Characters />} /> <Route path="/characters" element={<Characters />} />
<Route <Route
path="/character/:heroCode" path="/character/:heroCode"
element={<CharacterDetail character={mockCharacterData} />} element={<CharacterDetail />}
/> />
<Route path="/news" element={<News />} /> <Route path="/gvg" element={<Lineup />} />
<Route path="/builds" element={<Builds />} /> <Route path="/builds" element={<Builds />} />
<Route path="/battles" element={<Battles />} /> <Route path="/battles" element={<Battles />} />
<Route path="/community" element={<Community />} /> <Route path="/community" element={<Community />} />

5
src/components/Navbar.tsx
View File

@@ -11,9 +11,10 @@ interface NavItem {
} }
const navItems: NavItem[] = [ const navItems: NavItem[] = [
{ path: "/", label: "对战阵容" }, { path: "/", label: "角色列表" },
{ path: "/gvg", label: "对战信息" },
// { path: "/home", label: "主页" }, // { path: "/home", label: "主页" },
{ path: "/characters", label: "角色列表" }, // { path: "/characters", label: "角色列表" },
// { path: "/builds", label: "配装攻略" }, // { path: "/builds", label: "配装攻略" },
// { path: "/battles", label: "对战信息" }, // { path: "/battles", label: "对战信息" },
// { path: "/news", label: "资讯中心" }, // { path: "/news", label: "资讯中心" },

50
src/pages/CharacterDetail.tsx
View File

@@ -457,7 +457,8 @@ const CharacterDetail: React.FC = () => {
<h2 className="text-xl font-bold text-[#E6B17E] mb-4">角色配装推荐</h2> <h2 className="text-xl font-bold text-[#E6B17E] mb-4">角色配装推荐</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
{/* 平均属性 */} {/* 平均属性 */}
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg p-6 border border-[#C17F59]/30 flex flex-col gap-2 h-full justify-between"> <div
className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg p-6 border border-[#C17F59]/30 flex flex-col gap-2 h-full justify-between">
<h3 className="text-lg font-semibold text-[#C17F59] mb-2">平均属性</h3> <h3 className="text-lg font-semibold text-[#C17F59] mb-2">平均属性</h3>
<div className="divide-y divide-[#C17F59]/20"> <div className="divide-y divide-[#C17F59]/20">
{Object.entries(heroSetAvgVO).map(([key, value]) => { {Object.entries(heroSetAvgVO).map(([key, value]) => {
@@ -466,7 +467,8 @@ const CharacterDetail: React.FC = () => {
return ( return (
<div key={key} className="flex items-center justify-between py-2"> <div key={key} className="flex items-center justify-between py-2">
<div className="flex items-center gap-2 min-w-[110px]"> <div className="flex items-center gap-2 min-w-[110px]">
<img src={ATTR_ICON_MAP[displayKey]} alt={displayKey} className="w-6 h-6"/> <img src={ATTR_ICON_MAP[displayKey]} alt={displayKey}
className="w-6 h-6"/>
<span>{ATTR_LABEL_MAP[displayKey]}</span> <span>{ATTR_LABEL_MAP[displayKey]}</span>
</div> </div>
<span className="font-bold text-[#E6B17E] ml-2"> <span className="font-bold text-[#E6B17E] ml-2">
@@ -478,12 +480,14 @@ const CharacterDetail: React.FC = () => {
</div> </div>
</div> </div>
{/* 主流套装占比 */} {/* 主流套装占比 */}
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg p-6 border border-[#C17F59]/30 flex flex-col gap-2 h-full justify-between"> <div
className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg p-6 border border-[#C17F59]/30 flex flex-col gap-2 h-full justify-between">
<h3 className="text-lg font-semibold text-[#C17F59] mb-2">主流套装占比</h3> <h3 className="text-lg font-semibold text-[#C17F59] mb-2">主流套装占比</h3>
<div className="space-y-4"> <div className="space-y-4">
{heroSetPercentVOS.map((set, idx) => ( {heroSetPercentVOS.map((set, idx) => (
<div key={idx} className=""> <div key={idx} className="">
<div className="bg-[#bcbcbc]/20 bg-[#C1BEB7]/30 px-4 py-2 font-bold text-[#222] text-base rounded-t" <div
className="bg-[#bcbcbc]/20 bg-[#C1BEB7]/30 px-4 py-2 font-bold text-[#222] text-base rounded-t"
style={{background: '#bcbcbc', color: '#222', opacity: 0.7}}> style={{background: '#bcbcbc', color: '#222', opacity: 0.7}}>
套装 {idx + 1} ({formatPercent(set.percent)}% 使用比例) 套装 {idx + 1} ({formatPercent(set.percent)}% 使用比例)
</div> </div>
@@ -501,7 +505,8 @@ const CharacterDetail: React.FC = () => {
<img src={setIconMap[name]} alt={name} <img src={setIconMap[name]} alt={name}
className="w-8 h-8 mr-1"/> className="w-8 h-8 mr-1"/>
) : ( ) : (
<span className="w-8 h-8 inline-block flex items-center justify-center text-[#C17F59]">?</span> <span
className="w-8 h-8 inline-flex items-center justify-center text-[#C17F59]">?</span>
)} )}
<span>{name}</span> <span>{name}</span>
</span> </span>
@@ -513,17 +518,34 @@ const CharacterDetail: React.FC = () => {
</div> </div>
</div> </div>
{/* 神器使用占比 */} {/* 神器使用占比 */}
<div className="bg-gradient-to-br from-[#2A211E] to-[#1A1412] rounded-lg p-8 border border-[#C17F59]/30 mb-6"> <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> <h3 className="text-lg font-semibold text-[#C17F59] mb-6">神器使用占比</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
{heroDetail.heroArtifactPercentVOS?.map((artifact: ArtifactPercent, idx: number) => ( {heroDetail.heroArtifactPercentVOS?.map((artifact: ArtifactPercent, idx: number) => (
<div key={idx} className="flex flex-col items-center"> <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"> <div className="relative w-80 h-80 rounded-lg mb-2 overflow-hidden">
<img <img
src={artifact.imageUrl} src={artifact.imageUrl}
alt={artifact.artifactName} alt={artifact.artifactName}
className="w-full h-full object-contain" className="w-full h-full object-contain"
/> />
{/* 左上角职业信息 */}
{artifact.role && (
<div className="absolute top-2 left-16 rounded-lg p-2">
{/*<img */}
{/* src={`/pic/role/${artifact.role}.png`} */}
{/* alt={artifact.role}*/}
{/* className="w-8 h-8 brightness-175 contrast-175 drop-shadow-[0_0_2px_rgba(255,255,255,0.8)]"*/}
{/*/>*/}
</div>
)}
{/* 右上角星级信息 */}
<div className="absolute top-2 right-16 flex flex-col gap-1 rounded-lg p-1">
{Array(parseInt(artifact.rarity)).fill(0).map((_, i) => (
<img key={i} src="/pic/star.png" alt="star" className="w-6 h-6"/>
))}
</div>
</div> </div>
<span className="text-[#E6B17E] font-bold text-base text-center mb-1"> <span className="text-[#E6B17E] font-bold text-base text-center mb-1">
{artifact.artifactName} {artifact.artifactName}
@@ -554,7 +576,8 @@ const CharacterDetail: React.FC = () => {
return ( return (
<div key={key} className="flex items-center justify-between py-2"> <div key={key} className="flex items-center justify-between py-2">
<div className="flex items-center gap-2 min-w-[110px]"> <div className="flex items-center gap-2 min-w-[110px]">
<img src={ATTR_ICON_MAP[displayKey]} alt={displayKey} className="w-6 h-6"/> <img src={ATTR_ICON_MAP[displayKey]} alt={displayKey}
className="w-6 h-6"/>
<span>{ATTR_LABEL_MAP[displayKey]}</span> <span>{ATTR_LABEL_MAP[displayKey]}</span>
</div> </div>
<span className="font-bold text-[#E6B17E] ml-2"> <span className="font-bold text-[#E6B17E] ml-2">
@@ -583,13 +606,14 @@ const CharacterDetail: React.FC = () => {
{/* 神器图片 */} {/* 神器图片 */}
<div className="flex-1 flex flex-col items-center justify-center"> <div className="flex-1 flex flex-col items-center justify-center">
{build.arfPic ? ( {build.arfPic ? (
<img <img
src={build.arfPic} src={build.arfPic}
alt={build.arfName || '神器图片'} alt={build.arfName || '神器图片'}
className="w-64 h-64 object-contain rounded mb-2" className="w-64 h-64 object-contain rounded mb-2"
/> />
) : ( ) : (
<div className="w-24 h-24 rounded bg-[#2A211E] flex items-center justify-center text-3xl text-[#C17F59] mb-2">?</div> <div
className="w-24 h-24 rounded bg-[#2A211E] flex items-center justify-center text-3xl text-[#C17F59] mb-2">?</div>
)} )}
</div> </div>
{/* 神器名称 */} {/* 神器名称 */}

14
src/pages/Characters.tsx
View File

@@ -22,10 +22,10 @@ const ROLES = [
{ key: 'manauser', label: 'Soul Weaver', img: '/pic/role/manauser.png' }, { key: 'manauser', label: 'Soul Weaver', img: '/pic/role/manauser.png' },
]; ];
const STAR_OPTIONS = [ const STAR_OPTIONS = [
{ label: "All Stars", value: 0 }, { label: "全部", value: 0 },
{ label: "3 Stars", value: 3 }, { label: "3 星", value: 3 },
{ label: "4 Stars", value: 4 }, { label: "4 星", value: 4 },
{ label: "5 Stars", value: 5 }, { label: "5 星", value: 5 },
]; ];
const ROLE_LABELS: Record<string, string> = { const ROLE_LABELS: Record<string, string> = {
@@ -135,7 +135,7 @@ const Characters: React.FC = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative py-24"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative py-24">
<h1 className="text-4xl font-bold text-center mb-8"> <h1 className="text-4xl font-bold text-center mb-8">
<span className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]"> <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#E6B17E] via-[#C17F59] to-[#A66D4F]">
All Epic Seven Heroes 全部角色信息
</span> </span>
</h1> </h1>
@@ -202,7 +202,7 @@ const Characters: React.FC = () => {
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${selectedElement === el.key ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"}`} className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${selectedElement === el.key ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"}`}
onClick={() => setSelectedElement(el.key)} onClick={() => setSelectedElement(el.key)}
> >
{el.img ? <img src={el.img} alt={el.key} className="w-6 h-6" /> : 'All'} {el.img ? <img src={el.img} alt={el.key} className="w-6 h-6" /> : '全部'}
</button> </button>
))} ))}
</div> </div>
@@ -216,7 +216,7 @@ const Characters: React.FC = () => {
className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${selectedRole === role.key ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"}`} className={`px-4 py-2 rounded-md flex items-center gap-2 cursor-pointer whitespace-nowrap !rounded-button border ${selectedRole === role.key ? "bg-gradient-to-r from-[#C17F59] to-[#A66D4F] text-[#1A1412] border-[#C17F59]" : "bg-[#1A1412] hover:bg-[#2A211E] text-[#E6B17E] border-[#C17F59]/30"}`}
onClick={() => setSelectedRole(role.key)} onClick={() => setSelectedRole(role.key)}
> >
{role.img ? <img src={role.img} alt={role.key} className="w-6 h-6" /> : 'All'} {role.img ? <img src={role.img} alt={role.key} className="w-6 h-6" /> : '全部'}
</button> </button>
))} ))}
</div> </div>