d5df83f35b
Remove unused pages, redesign author page, update homepage with new chapter display, and modify bottom navigation. #VERCEL_SKIP Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
275 lines
11 KiB
TypeScript
275 lines
11 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect, useRef, useCallback } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
import { ChevronRight, Sparkles, Lock, Share2 } from "lucide-react"
|
||
import { useStore } from "@/lib/store"
|
||
import { getFullBookPrice, getTotalSectionCount } from "@/lib/book-data"
|
||
import { AuthModal } from "@/components/modules/auth/auth-modal"
|
||
import { PaymentModal } from "@/components/payment-modal"
|
||
|
||
export default function HomePage() {
|
||
const router = useRouter()
|
||
const { user, isLoggedIn, hasPurchased } = useStore()
|
||
const [content, setContent] = useState<string>("")
|
||
const [isLoading, setIsLoading] = useState(true)
|
||
const [showPaywall, setShowPaywall] = useState(false)
|
||
const [readingProgress, setReadingProgress] = useState(0)
|
||
const [isAuthOpen, setIsAuthOpen] = useState(false)
|
||
const [isPaymentOpen, setIsPaymentOpen] = useState(false)
|
||
const [paymentType, setPaymentType] = useState<"section" | "fullbook">("section")
|
||
const contentRef = useRef<HTMLDivElement>(null)
|
||
|
||
const fullBookPrice = getFullBookPrice()
|
||
const totalSections = getTotalSectionCount()
|
||
const hasFullBook = user?.hasFullBook || false
|
||
|
||
// 最新章节 - 使用1.1作为示例
|
||
const latestSection = {
|
||
id: "1.1",
|
||
title: "荷包：电动车出租的被动收入模式",
|
||
price: 1,
|
||
isFree: true,
|
||
filePath: "book/第一篇｜真实的人/第1章｜人与人之间的底层逻辑/1.1 荷包：电动车出租的被动收入模式.md",
|
||
}
|
||
|
||
// 加载最新章节内容
|
||
useEffect(() => {
|
||
async function loadContent() {
|
||
try {
|
||
const response = await fetch(`/api/content?path=${encodeURIComponent(latestSection.filePath)}`)
|
||
if (response.ok) {
|
||
const data = await response.json()
|
||
setContent(data.content || "")
|
||
}
|
||
} catch (error) {
|
||
console.error("Failed to load content:", error)
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
loadContent()
|
||
}, [])
|
||
|
||
// 监听滚动进度
|
||
const handleScroll = useCallback(() => {
|
||
if (!contentRef.current) return
|
||
|
||
const scrollTop = window.scrollY
|
||
const docHeight = document.documentElement.scrollHeight - window.innerHeight
|
||
const progress = docHeight > 0 ? Math.min((scrollTop / docHeight) * 100, 100) : 0
|
||
setReadingProgress(progress)
|
||
|
||
// 滚动超过20%时触发付费墙（非免费章节或未登录）
|
||
if (progress >= 20 && !hasFullBook && !latestSection.isFree) {
|
||
setShowPaywall(true)
|
||
}
|
||
}, [hasFullBook])
|
||
|
||
useEffect(() => {
|
||
window.addEventListener("scroll", handleScroll)
|
||
return () => window.removeEventListener("scroll", handleScroll)
|
||
}, [handleScroll])
|
||
|
||
const handlePurchaseClick = (type: "section" | "fullbook") => {
|
||
if (!isLoggedIn) {
|
||
setIsAuthOpen(true)
|
||
return
|
||
}
|
||
setPaymentType(type)
|
||
setIsPaymentOpen(true)
|
||
}
|
||
|
||
const contentLines = content.split("\n").filter((line) => line.trim())
|
||
// 如果需要付费墙，只显示前20%内容
|
||
const displayContent =
|
||
showPaywall && !hasFullBook && !latestSection.isFree
|
||
? contentLines.slice(0, Math.ceil(contentLines.length * 0.2)).join("\n")
|
||
: content
|
||
|
||
return (
|
||
<div className="min-h-screen bg-black text-white pb-24">
|
||
{/* 阅读进度条 */}
|
||
<div className="fixed top-0 left-0 right-0 z-50 h-0.5 bg-[#1c1c1e]">
|
||
<div
|
||
className="h-full bg-gradient-to-r from-[#ff3b5c] to-[#ff6b8a] transition-all duration-150"
|
||
style={{ width: `${readingProgress}%` }}
|
||
/>
|
||
</div>
|
||
|
||
{/* 顶部标题区 */}
|
||
<header className="sticky top-0 z-40 bg-black/90 backdrop-blur-xl border-b border-white/5">
|
||
<div className="px-4 py-3">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-[#ffd700] text-lg font-semibold">Soul派对·创业实验</span>
|
||
<span className="text-[10px] text-[#ff3b5c] bg-[#ff3b5c]/10 px-2 py-0.5 rounded">最新</span>
|
||
</div>
|
||
<button
|
||
onClick={() => {
|
||
const url = window.location.href
|
||
navigator.clipboard.writeText(url)
|
||
alert("链接已复制")
|
||
}}
|
||
className="w-8 h-8 rounded-full bg-[#1c1c1e] flex items-center justify-center"
|
||
>
|
||
<Share2 className="w-4 h-4 text-gray-400" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 章节标题 */}
|
||
<div className="px-4 pt-6 pb-4">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="text-[#ff3b5c] text-sm font-medium bg-[#ff3b5c]/10 px-3 py-1 rounded-full">
|
||
{latestSection.id}
|
||
</span>
|
||
{latestSection.isFree && (
|
||
<span className="text-xs text-[#00E5FF] bg-[#00E5FF]/10 px-2 py-0.5 rounded">免费</span>
|
||
)}
|
||
</div>
|
||
<h1 className="text-xl font-bold text-white leading-tight">{latestSection.title}</h1>
|
||
<p className="text-gray-500 text-sm mt-2">第一篇｜真实的人</p>
|
||
</div>
|
||
|
||
{/* 内容区域 */}
|
||
<main ref={contentRef} className="px-4 pb-8">
|
||
{isLoading ? (
|
||
<div className="space-y-4">
|
||
{[...Array(8)].map((_, i) => (
|
||
<div
|
||
key={i}
|
||
className="h-4 bg-[#1c1c1e] rounded animate-pulse"
|
||
style={{ width: `${Math.random() * 40 + 60}%` }}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<article className="text-gray-300 leading-[1.9] text-[16px]">
|
||
{displayContent.split("\n").map(
|
||
(paragraph, index) =>
|
||
paragraph.trim() && (
|
||
<p key={index} className="mb-5">
|
||
{paragraph}
|
||
</p>
|
||
),
|
||
)}
|
||
</article>
|
||
)}
|
||
|
||
{/* 付费墙 - 只在非免费章节且滚动超过20%时显示 */}
|
||
{showPaywall && !hasFullBook && !latestSection.isFree && (
|
||
<div className="relative mt-4">
|
||
{/* 渐变遮罩 */}
|
||
<div className="absolute -top-32 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent pointer-events-none" />
|
||
|
||
{/* 付费卡片 */}
|
||
<div className="p-6 rounded-2xl bg-gradient-to-b from-[#1c1c1e] to-[#2c2c2e] border border-white/10">
|
||
<div className="text-center">
|
||
<div className="w-14 h-14 mx-auto mb-3 rounded-2xl bg-[#ff3b5c]/10 flex items-center justify-center">
|
||
<Lock className="w-7 h-7 text-[#ff3b5c]" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold text-white mb-2">解锁完整内容</h3>
|
||
<p className="text-gray-400 text-sm mb-5">{isLoggedIn ? "支付1元继续阅读" : "登录并支付1元继续阅读"}</p>
|
||
|
||
<div className="space-y-3 mb-4">
|
||
<button
|
||
onClick={() => handlePurchaseClick("section")}
|
||
className="w-full py-3 px-5 rounded-xl bg-[#ff3b5c] text-white font-medium active:scale-[0.98] transition-transform"
|
||
>
|
||
<div className="flex items-center justify-center gap-2">
|
||
<span>立即解锁</span>
|
||
<span className="text-lg font-bold">¥1</span>
|
||
</div>
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => handlePurchaseClick("fullbook")}
|
||
className="w-full py-3 px-5 rounded-xl bg-[#2c2c2e] border border-white/10 text-white font-medium active:scale-[0.98] transition-transform"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<Sparkles className="w-4 h-4 text-[#ffd700]" />
|
||
<span>解锁全部 {totalSections} 章</span>
|
||
</div>
|
||
<span className="text-[#ffd700]">¥{fullBookPrice}</span>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
|
||
<p className="text-xs text-gray-500">分享给好友购买，你可获得90%佣金</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 底部引导 - 免费章节或已购买时显示 */}
|
||
{!showPaywall && (
|
||
<div className="mt-8 p-4 rounded-xl bg-[#1c1c1e] border border-white/5">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<p className="text-white font-medium">想看更多内容？</p>
|
||
<p className="text-gray-500 text-sm mt-1">共 {totalSections} 章精彩内容</p>
|
||
</div>
|
||
<button
|
||
onClick={() => router.push("/chapters")}
|
||
className="px-4 py-2 rounded-lg bg-[#ff3b5c] text-white text-sm font-medium flex items-center gap-1"
|
||
>
|
||
查看目录
|
||
<ChevronRight className="w-4 h-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</main>
|
||
|
||
{/* 底部导航 */}
|
||
<nav className="fixed bottom-0 left-0 right-0 bg-[#1c1c1e]/95 backdrop-blur-xl border-t border-white/5 pb-safe-bottom">
|
||
<div className="px-4 py-3">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<button
|
||
onClick={() => router.push("/chapters")}
|
||
className="flex-1 py-2.5 rounded-xl bg-[#2c2c2e] text-white text-sm font-medium text-center active:bg-[#3c3c3e]"
|
||
>
|
||
目录
|
||
</button>
|
||
<button
|
||
onClick={() => router.push("/about")}
|
||
className="flex-1 py-2.5 rounded-xl bg-[#2c2c2e] text-white text-sm font-medium text-center active:bg-[#3c3c3e]"
|
||
>
|
||
作者
|
||
</button>
|
||
<button
|
||
onClick={() => router.push("/my")}
|
||
className="flex-1 py-2.5 rounded-xl bg-[#2c2c2e] text-white text-sm font-medium text-center active:bg-[#3c3c3e]"
|
||
>
|
||
我的
|
||
</button>
|
||
<button
|
||
onClick={() => handlePurchaseClick("fullbook")}
|
||
className="flex-1 py-2.5 rounded-xl bg-[#ff3b5c] text-white text-sm font-medium text-center active:scale-[0.98]"
|
||
>
|
||
购买
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* 登录弹窗 */}
|
||
<AuthModal isOpen={isAuthOpen} onClose={() => setIsAuthOpen(false)} />
|
||
|
||
{/* 支付弹窗 */}
|
||
<PaymentModal
|
||
isOpen={isPaymentOpen}
|
||
onClose={() => setIsPaymentOpen(false)}
|
||
type={paymentType}
|
||
sectionId={latestSection.id}
|
||
sectionTitle={latestSection.title}
|
||
amount={paymentType === "section" ? latestSection.price : fullBookPrice}
|
||
onSuccess={() => window.location.reload()}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|