From c13ff309246e7e70ae0902b5aabb0a04022b80bf Mon Sep 17 00:00:00 2001 From: hxt Date: Thu, 24 Apr 2025 22:02:20 +0800 Subject: [PATCH] =?UTF-8?q?style(Lineup):=20=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E6=A0=BC=E5=BC=8F=E5=92=8C=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整了代码的缩进和空格，提高了可读性 -修复了一些小的语法问题，如缺少逗号等 - 优化了部分长行的换行方式，提高了代码的整洁度 --- src/App.tsx | 4 +- src/api/index.ts | 24 ++++- src/components/Navbar.tsx | 183 ++++++++------------------------- src/pages/Lineup.tsx | 209 +++++++++++++++++++++++--------------- 4 files changed, 195 insertions(+), 225 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 4153a6d..9bf127b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -124,7 +124,8 @@ const App: React.FC = () => {
- } /> + } /> + } /> } /> { } /> } /> } /> - } /> } />
diff --git a/src/api/index.ts b/src/api/index.ts index 35ec13a..b20e72e 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -16,6 +16,7 @@ export interface GvgTeamQueryParams { export interface HeroInfo { heroCode: string; headImgUrl: string; + heroName: string; } // 阵容数据接口 @@ -44,9 +45,22 @@ export interface Response { msg: string; } +// 英雄列表接口 +export interface Hero { + id: number; + heroCode: string; + heroName: string; + nickName: string; + headImgUrl: string; +} + // 查询 GVG 阵容列表 -export const getGvgTeamList = async () => { - const response = await Api.get("/epic/hero/team-list"); +export const getGvgTeamList = async (heroCodes?: string[]) => { + const params = new URLSearchParams(); + if (heroCodes && heroCodes.length > 0) { + params.append('heroCodes', heroCodes.join(',')); + } + const response = await Api.get(`/epic/hero/team-list?${params.toString()}`); return response; }; @@ -58,3 +72,9 @@ export const getGvgTeamDetail = async (id: number) => { } throw new Error(response.msg || "获取阵容详情失败"); }; + +// 查询所有英雄列表 +export const getHeroList = async () => { + const response = await Api.get("/epic/hero/list-all"); + return response; +}; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 54136e3..8e13e27 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -5,6 +5,21 @@ interface NavbarProps { onLoginClick: () => void; } +interface NavItem { + path: string; + label: string; +} + +const navItems: NavItem[] = [ + { path: "/", label: "对战阵容" }, + { path: "/home", label: "主页" }, + { path: "/characters", label: "角色列表" }, + { path: "/builds", label: "配装攻略" }, + { path: "/battles", label: "对战信息" }, + { path: "/news", label: "资讯中心" }, + { path: "/community", label: "社区" } +]; + const Navbar: React.FC = ({ onLoginClick }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const location = useLocation(); @@ -16,81 +31,24 @@ const Navbar: React.FC = ({ onLoginClick }) => {
- 战神纪元 + 第七史诗
- - 主页 - - - 角色列表 - - - 配装攻略 - - - 对战信息 - - - 对战阵容 - - - 资讯中心 - - - 社区 - + {navItems.map((item) => ( + + {item.label} + + ))}
@@ -117,76 +75,19 @@ const Navbar: React.FC = ({ onLoginClick }) => { {isMenuOpen && (
- - 主页 - - - 角色列表 - - - 配装攻略 - - - 对战信息 - - - 对战阵容 - - - 资讯中心 - - - 社区 - + {navItems.map((item) => ( + + {item.label} + + ))} {difficulties.map((difficulty) => (
- {/* 标签筛选 */} -
-
- {availableTags.map((tag) => ( - - ))} + {/* 英雄多选下拉框 */} +
+
setIsDropdownOpen(!isDropdownOpen)} + > +
+ {selectedHeroes.length > 0 ? ( + selectedHeroes.map((hero) => ( +
+ {hero.heroName} + +
+ )) + ) : ( + 选择防守英雄（最多3个） + )} +
+ + ▼ +
+ + {isDropdownOpen && ( +
+
+ setSearchInput(e.target.value)} + placeholder="输入英雄名称或昵称搜索..." + className="w-full px-3 py-2 bg-[#1A1412] text-[#E6B17E] border border-[#C17F59]/30 rounded-md focus:outline-none focus:border-[#C17F59]" + onClick={(e) => e.stopPropagation()} + /> +
+ {filteredHeroes.map((hero) => ( +
h.id === hero.id) + ? "bg-[#2A211E] text-[#E6B17E]" + : "text-[#E6B17E] hover:bg-[#2A211E]" + } ${selectedHeroes.length >= 3 && !selectedHeroes.find(h => h.id === hero.id) ? "opacity-50 cursor-not-allowed" : ""}`} + onClick={() => { + if (selectedHeroes.length < 3 || selectedHeroes.find(h => h.id === hero.id)) { + handleHeroSelect(hero); + } + }} + > +
+ {hero.heroName} + {hero.heroName} + {hero.nickName && ( + ({hero.nickName}) + )} +
+
+ ))} +
+ )}
{/* 加载状态 */} {loading && (
-
+
)} @@ -161,15 +214,13 @@ const Lineup: React.FC = () => {

防守阵容

{lineup.defenseHeroInfos.map((hero, index) => ( -
+
{hero.heroCode} -
+
{hero.heroName}
@@ -182,15 +233,13 @@ const Lineup: React.FC = () => {

进攻阵容

{lineup.attackHeroInfos.map((hero, index) => ( -
+
{hero.heroCode} -
+
{hero.heroName}