From 67936f382d6c06c4957a8261cdc3d05ef95c579c Mon Sep 17 00:00:00 2001
From: hxt <hxt1377@163.com>
Date: Thu, 29 May 2025 22:45:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor(src):=20=E4=BC=98=E5=8C=96=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E5=92=8C=E9=A1=B5=E9=9D=A2=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 更新导航栏显示内容，增加对战信息页面
- 调整首页路由，改为角色列表页面
- 更新 CharacterDetail 页面，增加职业和星级信息展示
- 修改 Characters 页面，使用中文标签替换英文
---
 src/App.tsx                   |  6 ++---
 src/components/Navbar.tsx     |  5 ++--
 src/pages/CharacterDetail.tsx | 50 ++++++++++++++++++++++++++---------
 src/pages/Characters.tsx      | 14 +++++-----
 4 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f333084..430e7d8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -124,14 +124,14 @@ const App: React.FC = () => {
 				<Navbar onLoginClick={handleLoginClick} />
 				<main className="pt-16">
 					<Routes>
-						<Route path="/" element={<Lineup />} />
+						<Route path="/" element={<Characters />} />
 						<Route path="/home" element={<Home />} />
 						<Route path="/characters" element={<Characters />} />
 						<Route 
 							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="/battles" element={<Battles />} />
 						<Route path="/community" element={<Community />} />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 9a9532d..5369e8a 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -11,9 +11,10 @@ interface NavItem {
 }
 
 const navItems: NavItem[] = [
-	{ path: "/", label: "对战阵容" },
+	{ path: "/", label: "角色列表" },
+	{ path: "/gvg", label: "对战信息" },
 	// { path: "/home", label: "主页" },
-	{ path: "/characters", label: "角色列表" },
+	// { path: "/characters", label: "角色列表" },
 	// { path: "/builds", label: "配装攻略" },
 	// { path: "/battles", label: "对战信息" },
 	// { path: "/news", label: "资讯中心" },
diff --git a/src/pages/CharacterDetail.tsx b/src/pages/CharacterDetail.tsx
index 822c94a..56e1366 100644
--- a/src/pages/CharacterDetail.tsx
+++ b/src/pages/CharacterDetail.tsx
@@ -457,7 +457,8 @@ const CharacterDetail: React.FC = () => {
                         <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="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>
                                 <div className="divide-y divide-[#C17F59]/20">
                                     {Object.entries(heroSetAvgVO).map(([key, value]) => {
@@ -466,7 +467,8 @@ const CharacterDetail: React.FC = () => {
                                         return (
                                             <div key={key} className="flex items-center justify-between py-2">
                                                 <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>
                                                 </div>
                                                 <span className="font-bold text-[#E6B17E] ml-2">
@@ -478,12 +480,14 @@ const CharacterDetail: React.FC = () => {
                                 </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>
                                 <div className="space-y-4">
                                     {heroSetPercentVOS.map((set, idx) => (
                                         <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}}>
                                                 套装 {idx + 1} ({formatPercent(set.percent)}% 使用比例)
                                             </div>
@@ -501,7 +505,8 @@ const CharacterDetail: React.FC = () => {
                                                             <img src={setIconMap[name]} alt={name}
                                                                  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>
@@ -513,17 +518,34 @@ const CharacterDetail: React.FC = () => {
                             </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>
                             <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} 
+                                        <div className="relative w-80 h-80 rounded-lg mb-2 overflow-hidden">
+                                            <img
+                                                src={artifact.imageUrl}
                                                 alt={artifact.artifactName}
                                                 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>
                                         <span className="text-[#E6B17E] font-bold text-base text-center mb-1">
                                             {artifact.artifactName}
@@ -554,7 +576,8 @@ const CharacterDetail: React.FC = () => {
                                                 return (
                                                     <div key={key} className="flex items-center justify-between py-2">
                                                         <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>
                                                         </div>
                                                         <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">
                                                 {build.arfPic ? (
-                                                    <img 
-                                                        src={build.arfPic} 
+                                                    <img
+                                                        src={build.arfPic}
                                                         alt={build.arfName || '神器图片'}
                                                         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>
                                             {/* 神器名称 */}
diff --git a/src/pages/Characters.tsx b/src/pages/Characters.tsx
index ddc6247..ae1f85e 100644
--- a/src/pages/Characters.tsx
+++ b/src/pages/Characters.tsx
@@ -22,10 +22,10 @@ const ROLES = [
 	{ key: 'manauser', label: 'Soul Weaver', img: '/pic/role/manauser.png' },
 ];
 const STAR_OPTIONS = [
-	{ label: "All Stars", value: 0 },
-	{ label: "3 Stars", value: 3 },
-	{ label: "4 Stars", value: 4 },
-	{ label: "5 Stars", value: 5 },
+	{ label: "全部", value: 0 },
+	{ label: "3 星", value: 3 },
+	{ label: "4 星", value: 4 },
+	{ label: "5 星", value: 5 },
 ];
 
 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">
 				<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]">
-						All Epic Seven Heroes
+						全部角色信息
 					</span>
 				</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"}`}
 									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>
 							))}
 						</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"}`}
 									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>
 							))}
 						</div>