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

style(Lineup): 优化代码格式和布局

Browse Source 
- 调整了代码的缩进和空格，提高了可读性
-修复了一些小的语法问题，如缺少逗号等
- 优化了部分长行的换行方式，提高了代码的整洁度
This commit is contained in:
hxt
2025-04-24 22:02:20 +08:00
parent 04f167d3d6
commit c13ff30924
4 changed files with 195 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/components/Navbar.tsx
View File

@@ -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<NavbarProps> = ({ onLoginClick }) => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const location = useLocation();
@@ -16,81 +31,24 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
<div className="flex items-center">
<div className="flex-shrink-0">
<Link to="/" className="text-2xl font-bold text-[#E6B17E] hover:text-[#F5C28A] transition-colors duration-200">
战神纪元
第七史诗
</Link>
</div>
<div className="hidden md:block ml-10">
<div className="flex items-baseline space-x-4">
<Link
to="/"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
主页
</Link>
<Link
to="/characters"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/characters"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
角色列表
</Link>
<Link
to="/builds"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/builds"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
配装攻略
</Link>
<Link
to="/battles"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/battles"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
对战信息
</Link>
<Link
to="/lineup"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/lineup"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
对战阵容
</Link>
<Link
to="/news"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/news"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
资讯中心
</Link>
<Link
to="/community"
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === "/community"
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
社区
</Link>
{navItems.map((item) => (
<Link
key={item.path}
to={item.path}
className={`px-4 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
location.pathname === item.path
? "text-[#E6B17E] bg-[#2A211E] shadow-md transform scale-105"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
{item.label}
</Link>
))}
</div>
</div>
</div>
@@ -117,76 +75,19 @@ const Navbar: React.FC<NavbarProps> = ({ onLoginClick }) => {
{isMenuOpen && (
<div className="md:hidden bg-[#1A1412] border-t border-[#C17F59]/30 shadow-lg">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<Link
to="/"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
主页
</Link>
<Link
to="/characters"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/characters"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
角色列表
</Link>
<Link
to="/builds"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/builds"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
配装攻略
</Link>
<Link
to="/battles"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/battles"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
对战信息
</Link>
<Link
to="/lineup"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/lineup"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
对战阵容
</Link>
<Link
to="/news"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/news"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
资讯中心
</Link>
<Link
to="/community"
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === "/community"
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
社区
</Link>
{navItems.map((item) => (
<Link
key={item.path}
to={item.path}
className={`block px-4 py-3 rounded-md text-base font-medium transition-all duration-200 ${
location.pathname === item.path
? "text-[#E6B17E] bg-[#2A211E] shadow-md"
: "text-[#C17F59] hover:bg-[#2A211E] hover:text-[#E6B17E] hover:shadow-md"
} !rounded-button whitespace-nowrap cursor-pointer`}
>
{item.label}
</Link>
))}
<button
onClick={onLoginClick}
className="block w-full text-left px-4 py-3 rounded-md text-base font-medium text-[#1A1412] bg-[#E6B17E] hover:bg-[#C17F59] hover:shadow-md !rounded-button whitespace-nowrap cursor-pointer transition-all duration-200"