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>
2026-05-11 07:00:05 +08:00
parent b91855095b
commit 86e259a500
12 changed files with 324 additions and 84 deletions
@@ -7,9 +7,9 @@ interface FirearmParams extends PageQueryParams {
 }

 /**
- * 查询武器列表
+ * Fetch firearm list
 *
- * @param params 分页查询参数¬
+ * @param params Paged query parameters
 */
 export async function getFirearms(params?: FirearmParams): Promise<Page<Firearm>> {
  let uri = "/firearms"
@@ -28,9 +28,9 @@ export async function getFirearms(params?: FirearmParams): Promise<Page<Firearm>
 }

 /**
- * 根据 ID 查询武器
+ * Fetch firearm by ID
 *
- * @param id 武器 ID
+ * @param id Firearm ID
 */
 export async function getFirearm(id: number): Promise<Firearm> {
  const { data } = await WebClient.get<Firearm>(`/firearms/${id}`)
@@ -38,7 +38,7 @@ export async function getFirearm(id: number): Promise<Firearm> {
 }

 /**
- * 新建武器
+ * Create firearm
 * @param request
 */
 export async function addFirearm(request: AddFirearmRequest): Promise<Firearm> {
@@ -0,0 +1,17 @@
+import React from "react"
+
+interface MarkdownRendererProps {
+  /** HTML string processed by vite-plugin-markdown */
+  html: string
+  /** Optional custom class name */
+  className?: string
+}
+
+export default function MarkdownRenderer({ html, className = "" }: MarkdownRendererProps) {
+  return (
+    <article
+      className={`prose prose-slate max-w-none dark:prose-invert ${className}`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+}
@@ -1,6 +1,7 @@
@layer theme, base, antd, components, utilities;

@import 'tailwindcss';
+@plugin "@tailwindcss/typography";

 html, body {
  margin: 0;
@@ -56,7 +57,7 @@ html, body {

 .nav-item:hover::after,
 .nav-item.active::after {
-  height: 80%;  /* 向上打光的高度，可以调整 */
+  height: 80%;  /* Height of the upward glow; adjustable. */
 }

 .nav-item:hover,
@@ -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>
@@ -0,0 +1,6 @@
+declare module "*.md" {
+  const attributes: Record<string, any>
+  const html: string
+  const toc: { level: string; content: string; slug: string }[]
+  export { attributes, html, toc }
+}
@@ -0,0 +1,34 @@
+import { Tabs } from "antd"
+import { useSearchParams } from "react-router-dom"
+import MarkdownRenderer from "@/components/markdown-renderer"
+import { html as EulaHtml } from "@/docs/EULA.md"
+import { html as PrivacyHtml } from "@/docs/PrivacyPolicy.md"
+
+const tabKeys = new Set(["eula", "privacy"])
+
+export default function LegalPage() {
+  const [searchParams, setSearchParams] = useSearchParams()
+  const rawTab = searchParams.get("tab")
+  const activeTab = rawTab && tabKeys.has(rawTab) ? rawTab : "eula"
+
+  return (
+    <div className="mx-auto max-w-4xl">
+      <Tabs
+        activeKey={activeTab}
+        onChange={(key) => setSearchParams({ tab: key })}
+        items={[
+          {
+            key: "eula",
+            label: "最终用户许可协议",
+            children: <MarkdownRenderer html={EulaHtml} />,
+          },
+          {
+            key: "privacy",
+            label: "隐私政策",
+            children: <MarkdownRenderer html={PrivacyHtml} />,
+          },
+        ]}
+      />
+    </div>
+  )
+}
@@ -40,6 +40,10 @@ const router = createBrowserRouter(
          path: "mod-codes",
          lazy: lazy(() => import("@/page/mod-codes")),
        },
+        {
+          path: "legal",
+          lazy: lazy(() => import("@/page/legal"))
+        }
      ],
    },
    {