105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useEffect } from "react"
|
|
import Link from "next/link"
|
|
import { usePathname } from "next/navigation"
|
|
import { Home, List, User, Users } from "lucide-react"
|
|
|
|
export function BottomNav() {
|
|
const pathname = usePathname()
|
|
const [matchEnabled, setMatchEnabled] = useState(false) // 默认隐藏，等配置加载后再显示
|
|
const [configLoaded, setConfigLoaded] = useState(false) // 配置是否已加载
|
|
|
|
// 在文档页面、管理后台、阅读页面和关于页面不显示底部导航
|
|
if (
|
|
pathname.startsWith("/documentation") ||
|
|
pathname.startsWith("/admin") ||
|
|
pathname.startsWith("/read") ||
|
|
pathname.startsWith("/about")
|
|
) {
|
|
return null
|
|
}
|
|
|
|
// 加载功能配置
|
|
useEffect(() => {
|
|
const loadConfig = async () => {
|
|
try {
|
|
const res = await fetch('/api/db/config')
|
|
const data = await res.json()
|
|
if (data.features) {
|
|
// 根据配置设置是否显示找伙伴按钮
|
|
setMatchEnabled(data.features.matchEnabled === true)
|
|
}
|
|
} catch (e) {
|
|
console.log('Load feature config error:', e)
|
|
// 加载失败时，默认不显示找伙伴按钮
|
|
setMatchEnabled(false)
|
|
} finally {
|
|
setConfigLoaded(true)
|
|
}
|
|
}
|
|
loadConfig()
|
|
}, [])
|
|
|
|
const navItems = [
|
|
{ href: "/", icon: Home, label: "首页" },
|
|
{ href: "/chapters", icon: List, label: "目录" },
|
|
...(matchEnabled ? [{ href: "/match", icon: Users, label: "找伙伴", isCenter: true }] : []),
|
|
{ href: "/my", icon: User, label: "我的" },
|
|
]
|
|
|
|
return (
|
|
<>
|
|
<nav className="fixed bottom-0 left-0 right-0 z-40 bg-[#1c1c1e]/95 backdrop-blur-xl border-t border-white/5 safe-bottom">
|
|
<div className="flex items-center justify-around py-2 max-w-lg mx-auto">
|
|
{navItems.map((item, index) => {
|
|
const isActive = pathname === item.href
|
|
const Icon = item.icon
|
|
|
|
// 中间的找伙伴按钮特殊处理
|
|
if (item.isCenter) {
|
|
return (
|
|
<Link key={index} href={item.href} className="flex flex-col items-center py-2 px-6 -mt-4">
|
|
<div
|
|
className={`w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition-all ${
|
|
isActive
|
|
? "bg-gradient-to-br from-[#00CED1] to-[#20B2AA] shadow-[#00CED1]/30"
|
|
: "bg-gradient-to-br from-[#00CED1] to-[#20B2AA] shadow-[#00CED1]/30"
|
|
}`}
|
|
>
|
|
<Icon className="w-7 h-7 text-white" />
|
|
</div>
|
|
<span className={`text-xs mt-1 ${isActive ? "text-[#00CED1] font-medium" : "text-gray-500"}`}>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
key={index}
|
|
href={item.href}
|
|
className="flex flex-col items-center py-2 px-4 touch-feedback transition-all duration-200"
|
|
>
|
|
<div
|
|
className={`w-6 h-6 flex items-center justify-center mb-1 transition-colors ${
|
|
isActive ? "text-[#00CED1]" : "text-gray-500"
|
|
}`}
|
|
>
|
|
<Icon className="w-5 h-5" strokeWidth={isActive ? 2 : 1.5} />
|
|
</div>
|
|
<span
|
|
className={`text-xs transition-colors ${isActive ? "text-[#00CED1] font-medium" : "text-gray-500"}`}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
)
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</>
|
|
)
|
|
}
|