feat: add legal tabs and update header assets
Switch the legal page to tabbed EULA/privacy content with URL sync, update header styling, and migrate footer icons to Ant Design. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -2,10 +2,16 @@ import { Outlet, Link, NavLink } from "react-router-dom"
|
||||
import { useMemo } from "react"
|
||||
import dayjs from "dayjs"
|
||||
import { Dropdown } from "antd"
|
||||
import {
|
||||
FileTextOutlined,
|
||||
GithubOutlined,
|
||||
LockOutlined,
|
||||
LoginOutlined,
|
||||
} from "@ant-design/icons"
|
||||
import { AuthApi } from "@/api"
|
||||
import { useAppDispatch, useAppSelector } from "@/store/hooks"
|
||||
import { clearCurrentUser } from "@/store/auth-slice"
|
||||
import { useState } from 'react';
|
||||
import { useState } from "react"
|
||||
|
||||
/**
|
||||
* Main application component that serves as the root layout.
|
||||
@@ -15,7 +21,7 @@ export default function HeroLayout() {
|
||||
const today = useMemo(() => dayjs(), [])
|
||||
const user = useAppSelector((state) => state.auth.user)
|
||||
const dispatch = useAppDispatch()
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false)
|
||||
|
||||
async function handleLogout() {
|
||||
try {
|
||||
@@ -28,29 +34,29 @@ export default function HeroLayout() {
|
||||
return (
|
||||
<div className="bg-gray-50 ">
|
||||
{/* Navigation Header */}
|
||||
<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">
|
||||
<header className="bg-[#0b0f14] shadow-sm border-b">
|
||||
<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-white">《三角洲》指南</h1>
|
||||
</div>
|
||||
<nav className="flex h-full">
|
||||
<nav className="flex h-full">
|
||||
<NavLink
|
||||
to="/firearms"
|
||||
className={({ isActive }) =>
|
||||
`nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 ${isActive ? 'active' : ''
|
||||
`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`
|
||||
}
|
||||
>
|
||||
}>
|
||||
武器列表
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/mod-codes"
|
||||
className={({ isActive }) =>
|
||||
`nav-item inline-flex items-center px-10 h-full text-base font-medium transition-all duration-200 ${isActive ? 'active' : ''
|
||||
`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`
|
||||
}
|
||||
>
|
||||
}>
|
||||
改枪码
|
||||
</NavLink>
|
||||
{/* {user ? (
|
||||
@@ -102,71 +108,61 @@ export default function HeroLayout() {
|
||||
{/* Footer */}
|
||||
<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>
|
||||
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 仓库">
|
||||
<GithubOutlined className="text-base 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" />
|
||||
to="/legal?tab=eula"
|
||||
className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200">
|
||||
<FileTextOutlined className="text-lg 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" />
|
||||
to="/legal?tab=privacy"
|
||||
className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200">
|
||||
<LockOutlined className="text-lg opacity-80" />
|
||||
隐私政策
|
||||
</Link>
|
||||
<span className="text-gray-700 select-none">•</span>
|
||||
@@ -182,8 +178,7 @@ export default function HeroLayout() {
|
||||
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>
|
||||
@@ -191,9 +186,8 @@ export default function HeroLayout() {
|
||||
) : (
|
||||
<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" />
|
||||
className="flex items-center gap-1.5 text-gray-400 hover:text-white transition-colors duration-200">
|
||||
<LoginOutlined className="text-lg opacity-80" />
|
||||
登录
|
||||
</Link>
|
||||
)}
|
||||
@@ -201,11 +195,8 @@ export default function HeroLayout() {
|
||||
|
||||
<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>
|
||||
<p>© 2024-{today.year()} Zihlu Wang 和 OnixByte。使用 React 与 TypeScript 构建。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user