feat(index): 更新footer-更新header-添加header背景,footer图标
This commit is contained in:
@@ -1,10 +1,11 @@
|
||||
import { Outlet, Link } from "react-router-dom"
|
||||
import { Outlet, Link, NavLink } from "react-router-dom"
|
||||
import { useMemo } from "react"
|
||||
import dayjs from "dayjs"
|
||||
import { Dropdown } from "antd"
|
||||
import { AuthApi } from "@/api"
|
||||
import { useAppDispatch, useAppSelector } from "@/store/hooks"
|
||||
import { clearCurrentUser } from "@/store/auth-slice"
|
||||
import { useState } from 'react';
|
||||
|
||||
/**
|
||||
* Main application component that serves as the root layout.
|
||||
@@ -14,6 +15,7 @@ export default function HeroLayout() {
|
||||
const today = useMemo(() => dayjs(), [])
|
||||
const user = useAppSelector((state) => state.auth.user)
|
||||
const dispatch = useAppDispatch()
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
|
||||
async function handleLogout() {
|
||||
try {
|
||||
@@ -24,30 +26,34 @@ export default function HeroLayout() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50">
|
||||
<div className="bg-gray-50 ">
|
||||
{/* Navigation Header */}
|
||||
<header className="bg-white shadow-sm border-b">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<header className="bg-white shadow-sm border-b bg-[url('/nav_bg.png')] bg-cover bg-center">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10 h-full">
|
||||
<div className="flex justify-between items-center h-20">
|
||||
<div className="flex items-center">
|
||||
<h1 className="text-xl font-semibold text-gray-900">
|
||||
三角洲行动改枪码库
|
||||
</h1>
|
||||
<h1 className="text-xl font-semibold text-gray-900 text-white">三角洲行动改枪码库</h1>
|
||||
</div>
|
||||
<nav className="flex space-x-8">
|
||||
<Link
|
||||
<nav className="flex h-full">
|
||||
<NavLink
|
||||
to="/firearms"
|
||||
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
|
||||
className={({ isActive }) =>
|
||||
`nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 ${isActive ? 'active' : ''
|
||||
} text-gray-500 hover:text-white`
|
||||
}
|
||||
>
|
||||
武器列表
|
||||
</Link>
|
||||
<Link
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/mod-codes"
|
||||
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
|
||||
className={({ isActive }) =>
|
||||
`nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 ${isActive ? 'active' : ''
|
||||
} text-gray-500 hover:text-white`
|
||||
}
|
||||
>
|
||||
改枪码
|
||||
</Link>
|
||||
{user ? (
|
||||
</NavLink>
|
||||
{/* {user ? (
|
||||
<Dropdown
|
||||
trigger={["hover"]}
|
||||
menu={{
|
||||
@@ -61,14 +67,14 @@ export default function HeroLayout() {
|
||||
],
|
||||
}}
|
||||
>
|
||||
<span className="cursor-pointer text-gray-700 px-3 py-2 rounded-md text-sm font-medium">
|
||||
<span className="nav-item inline-flex items-center px-10 h-full text-base font-medium text-gray-500 hover:text-white cursor-pointer">
|
||||
{user.username}
|
||||
</span>
|
||||
</Dropdown>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
|
||||
className="nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 text-gray-500 hover:text-white"
|
||||
>
|
||||
登录
|
||||
</Link>
|
||||
@@ -77,10 +83,10 @@ export default function HeroLayout() {
|
||||
href="https://github.com/zihluwang/delta-force-firearm-modification-codes"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
|
||||
className="nav-item inline-flex items-center px-10 h-full text-lg font-medium transition-all duration-200 text-gray-500 hover:text-white"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</a> */}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
@@ -94,11 +100,112 @@ export default function HeroLayout() {
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-white border-t">
|
||||
<div className="max-w-screen-2xl mx-auto py-4 px-4 sm:px-6 lg:px-10">
|
||||
<p className="text-center text-sm text-gray-500">
|
||||
© 2024-{today.year()} Zihlu Wang 和 OnixByte。使用 React 与 TypeScript 构建。
|
||||
</p>
|
||||
<footer className="bg-black border-t border-gray-800">
|
||||
<div className="max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-10 py-8">
|
||||
|
||||
|
||||
|
||||
<div className="flex flex-wrap justify-center items-center gap-x-6 gap-y-10 text-sm">
|
||||
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={() => setIsDropdownOpen(true)}
|
||||
onMouseLeave={() => setIsDropdownOpen(false)}
|
||||
>
|
||||
<button
|
||||
className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200 focus:outline-none"
|
||||
aria-label="GitHub 仓库"
|
||||
>
|
||||
<img
|
||||
src="/github-logo.png"
|
||||
alt=""
|
||||
className="w-5 h-5 opacity-80"
|
||||
/>
|
||||
<span>GitHub</span>
|
||||
<svg
|
||||
className={`w-3 h-3 transition-transform duration-200 ${isDropdownOpen ? 'rotate-180' : ''}`}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
{isDropdownOpen && (
|
||||
<div className="absolute top-full left-2/3 -translate-x-1/2 w-18 bg-gray-950 border border-gray-700 rounded-lg shadow-xl py-1 z-20 opacity-60">
|
||||
<a
|
||||
href="https://github.com/zihluwang/frontend-repo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white transition-colors"
|
||||
>
|
||||
前端
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/zihluwang/backend-repo"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 hover:text-white transition-colors"
|
||||
>
|
||||
后端
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<span className="text-gray-700 select-none">•</span>
|
||||
<Link
|
||||
to="/"
|
||||
className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200"
|
||||
>
|
||||
<img src="/footer-1.png" alt="" className="w-8 w-8 opacity-80" />
|
||||
EULA
|
||||
</Link>
|
||||
<span className="text-gray-700 select-none">•</span>
|
||||
<Link
|
||||
to="/"
|
||||
className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200"
|
||||
>
|
||||
<img src="/footer-2.png" alt="" className="w-8 w-8 opacity-80" />
|
||||
隐私政策
|
||||
</Link>
|
||||
<span className="text-gray-700 select-none">•</span>
|
||||
{user ? (
|
||||
<Dropdown
|
||||
trigger={["hover"]}
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: "logout",
|
||||
label: "退出登录",
|
||||
danger: true,
|
||||
onClick: handleLogout,
|
||||
},
|
||||
],
|
||||
}}
|
||||
>
|
||||
<span className="nav-item inline-flex items-center px-10 h-full text-base font-medium text-gray-500 hover:text-white cursor-pointer">
|
||||
{user.username}
|
||||
</span>
|
||||
</Dropdown>
|
||||
) : (
|
||||
<Link
|
||||
to="/login"
|
||||
className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200"
|
||||
>
|
||||
<img src="../../public/footer-3.png" alt="" className="w-8 w-8 opacity-80" />
|
||||
登录
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-800 my-6" />
|
||||
<div className="text-center text-xs text-gray-500">
|
||||
<p>
|
||||
© 2024-{today.year()} Zihlu Wang 和 OnixByte。使用 React 与 TypeScript 构建。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user