first commit

2026-02-18 23:14:42 +08:00 · 2025-08-12 21:50:58 +08:00
commit 8b9be4bb19
121 changed files with 36497 additions and 0 deletions
--- a/src/components/MobileBottomNav.tsx
+++ b/src/components/MobileBottomNav.tsx
@@ -0,0 +1,124 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+'use client';
+
+import { Cat, Clover, Film, Home, Search, Star, Tv } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+interface MobileBottomNavProps {
+  /**
+   * 主动指定当前激活的路径。当未提供时，自动使用 usePathname() 获取的路径。
+   */
+  activePath?: string;
+}
+
+const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
+  const pathname = usePathname();
+
+  // 当前激活路径：优先使用传入的 activePath，否则回退到浏览器地址
+  const currentActive = activePath ?? pathname;
+
+  const [navItems, setNavItems] = useState([
+    { icon: Home, label: '首页', href: '/' },
+    { icon: Search, label: '搜索', href: '/search' },
+    {
+      icon: Film,
+      label: '电影',
+      href: '/douban?type=movie',
+    },
+    {
+      icon: Tv,
+      label: '剧集',
+      href: '/douban?type=tv',
+    },
+    {
+      icon: Cat,
+      label: '动漫',
+      href: '/douban?type=anime',
+    },
+    {
+      icon: Clover,
+      label: '综艺',
+      href: '/douban?type=show',
+    },
+  ]);
+
+  useEffect(() => {
+    const runtimeConfig = (window as any).RUNTIME_CONFIG;
+    if (runtimeConfig?.CUSTOM_CATEGORIES?.length > 0) {
+      setNavItems((prevItems) => [
+        ...prevItems,
+        {
+          icon: Star,
+          label: '自定义',
+          href: '/douban?type=custom',
+        },
+      ]);
+    }
+  }, []);
+
+  const isActive = (href: string) => {
+    const typeMatch = href.match(/type=([^&]+)/)?.[1];
+
+    // 解码URL以进行正确的比较
+    const decodedActive = decodeURIComponent(currentActive);
+    const decodedItemHref = decodeURIComponent(href);
+
+    return (
+      decodedActive === decodedItemHref ||
+      (decodedActive.startsWith('/douban') &&
+        decodedActive.includes(`type=${typeMatch}`))
+    );
+  };
+
+  return (
+    <nav
+      className='md:hidden fixed left-0 right-0 z-[600] bg-white/90 backdrop-blur-xl border-t border-gray-200/50 overflow-hidden dark:bg-gray-900/80 dark:border-gray-700/50'
+      style={{
+        /* 紧贴视口底部，同时在内部留出安全区高度 */
+        bottom: 0,
+        paddingBottom: 'env(safe-area-inset-bottom)',
+        minHeight: 'calc(3.5rem + env(safe-area-inset-bottom))',
+      }}
+    >
+      <ul className='flex items-center overflow-x-auto scrollbar-hide'>
+        {navItems.map((item) => {
+          const active = isActive(item.href);
+          return (
+            <li
+              key={item.href}
+              className='flex-shrink-0'
+              style={{ width: '20vw', minWidth: '20vw' }}
+            >
+              <Link
+                href={item.href}
+                className='flex flex-col items-center justify-center w-full h-14 gap-1 text-xs'
+              >
+                <item.icon
+                  className={`h-6 w-6 ${
+                    active
+                      ? 'text-green-600 dark:text-green-400'
+                      : 'text-gray-500 dark:text-gray-400'
+                  }`}
+                />
+                <span
+                  className={
+                    active
+                      ? 'text-green-600 dark:text-green-400'
+                      : 'text-gray-600 dark:text-gray-300'
+                  }
+                >
+                  {item.label}
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+};
+
+export default MobileBottomNav;