feat(index): 更新footer-更新header-添加header背景,footer图标

src/index.css

@@ -34,3 +34,32 @@ html, body {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
 }
+
+.nav-item {
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 0;
+  background: linear-gradient(to top, #22ffa7, transparent);
+  transition: height 0.2s ease-in-out;
+  opacity: 0.35;
+  pointer-events: none;
+  
+}
+
+.nav-item:hover::after,
+.nav-item.active::after {
+  height: 80%;  /* 向上打光的高度，可以调整 */
+}
+
+.nav-item:hover,
+.nav-item.active {
+  color: white;
+}

src/layout/hero-layout/index.tsx

@@ -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>