fnvtk/soul-yongping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement iOS-style UI, payment, referral, and reading experience improvements

Browse Source
This commit is contained in:
卡若
2026-01-09 12:24:15 +08:00
parent d781dc07ed
commit 326c9e6905
12 changed files with 1173 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/bottom-nav.tsx
View File

@@ -2,7 +2,7 @@
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, MessageCircle, User } from "lucide-react"
import { Home, MessageCircle, User, BookOpen } from "lucide-react"
import { useState } from "react"
import { QRCodeModal } from "./modules/marketing/qr-code-modal"
@@ -10,20 +10,23 @@ export function BottomNav() {
const pathname = usePathname()
const [showQRModal, setShowQRModal] = useState(false)
if (pathname.startsWith("/documentation")) {
// 在文档页面和管理后台不显示底部导航
if (pathname.startsWith("/documentation") || pathname.startsWith("/admin")) {
return null
}
const navItems = [
{ href: "/", icon: Home, label: "首页" },
{ href: "/chapters", icon: BookOpen, label: "目录" },
{ action: () => setShowQRModal(true), icon: MessageCircle, label: "派对群" },
{ href: "/my", icon: User, label: "我的" },
]
return (
<>
<nav className="fixed bottom-0 left-0 right-0 z-40 bg-[#0f2137]/95 backdrop-blur-md border-t border-gray-700/50">
<div className="flex items-center justify-around py-3 max-w-lg mx-auto">
{/* iOS风格底部导航 */}
<nav className="fixed bottom-0 left-0 right-0 z-40 glass-nav safe-bottom">
<div className="flex items-center justify-around py-2 max-w-lg mx-auto">
{navItems.map((item, index) => {
const isActive = item.href ? pathname === item.href : false
const Icon = item.icon
@@ -33,10 +36,18 @@ export function BottomNav() {
<button
key={index}
onClick={item.action}
className="flex flex-col items-center py-2 px-6 text-gray-400 hover:text-[#38bdac] transition-colors"
className="flex flex-col items-center py-2 px-4 sm:px-6 touch-feedback transition-all duration-200"
>
<Icon className="w-6 h-6 mb-1" />
<span className="text-xs">{item.label}</span>
<div className={`w-7 h-7 flex items-center justify-center mb-1 transition-colors ${
isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
}`}>
<Icon className="w-6 h-6" strokeWidth={isActive ? 2.5 : 1.5} />
</div>
<span className={`text-[10px] font-medium transition-colors ${
isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
}`}>
{item.label}
</span>
</button>
)
}
@@ -45,12 +56,22 @@ export function BottomNav() {
<Link
key={index}
href={item.href!}
className={`flex flex-col items-center py-2 px-6 transition-colors ${
isActive ? "text-[#38bdac]" : "text-gray-400 hover:text-white"
}`}
className="flex flex-col items-center py-2 px-4 sm:px-6 touch-feedback transition-all duration-200"
>
<Icon className="w-6 h-6 mb-1" />
<span className="text-xs">{item.label}</span>
<div className={`w-7 h-7 flex items-center justify-center mb-1 transition-colors ${
isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
}`}>
<Icon className="w-6 h-6" strokeWidth={isActive ? 2.5 : 1.5} />
</div>
<span className={`text-[10px] font-medium transition-colors ${
isActive ? "text-[var(--app-brand)]" : "text-[var(--app-text-tertiary)]"
}`}>
{item.label}
</span>
{/* 激活指示器 */}
{isActive && (
<div className="absolute -bottom-0.5 w-1 h-1 rounded-full bg-[var(--app-brand)]" />
)}
</Link>
)
})}