223 lines
9.3 KiB
TypeScript
223 lines
9.3 KiB
TypeScript
/**
|
||
* 一场SOUL的创业实验 - 首页
|
||
* 开发: 卡若
|
||
* 技术支持: 存客宝
|
||
*/
|
||
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { useRouter } from "next/navigation"
|
||
import { Search, ChevronRight, BookOpen } from "lucide-react"
|
||
import { useStore } from "@/lib/store"
|
||
import { bookData, getTotalSectionCount } from "@/lib/book-data"
|
||
import { SearchModal } from "@/components/search-modal"
|
||
import { BottomNav } from "@/components/bottom-nav"
|
||
|
||
export default function HomePage() {
|
||
const router = useRouter()
|
||
const { user } = useStore()
|
||
const [mounted, setMounted] = useState(false)
|
||
const [searchOpen, setSearchOpen] = useState(false)
|
||
|
||
const totalSections = getTotalSectionCount()
|
||
const hasFullBook = user?.hasFullBook || false
|
||
const purchasedCount = hasFullBook ? totalSections : user?.purchasedSections?.length || 0
|
||
|
||
useEffect(() => {
|
||
setMounted(true)
|
||
}, [])
|
||
|
||
// 推荐章节
|
||
const featuredSections = [
|
||
{ id: "1.1", title: "荷包：电动车出租的被动收入模式", tag: "免费", part: "真实的人" },
|
||
{ id: "3.1", title: "3000万流水如何跑出来", tag: "热门", part: "真实的行业" },
|
||
{ id: "8.1", title: "流量杠杆:抖音、Soul、飞书", tag: "推荐", part: "真实的赚钱" },
|
||
]
|
||
|
||
// 最新更新
|
||
const latestSection = {
|
||
id: "9.14",
|
||
title: "大健康私域：一个月150万的70后",
|
||
part: "真实的赚钱",
|
||
}
|
||
|
||
if (!mounted) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-black text-white pb-24">
|
||
{/* 顶部区域 */}
|
||
<header className="px-4 pt-6 pb-4">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center shadow-lg shadow-[#00CED1]/30">
|
||
<span className="text-white font-bold text-lg">S</span>
|
||
</div>
|
||
<div>
|
||
<h1 className="text-lg font-bold text-white">Soul<span className="text-[#00CED1]">创业实验</span></h1>
|
||
<p className="text-xs text-gray-500">来自派对房的真实故事</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-xs text-[#00CED1] bg-[#00CED1]/10 px-2 py-1 rounded-full">{totalSections}章</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 搜索栏 */}
|
||
<div
|
||
onClick={() => setSearchOpen(true)}
|
||
className="flex items-center gap-3 px-4 py-3 rounded-xl bg-[#1c1c1e] border border-white/5 cursor-pointer hover:border-[#00CED1]/30 transition-colors"
|
||
>
|
||
<Search className="w-4 h-4 text-gray-500" />
|
||
<span className="text-gray-500 text-sm">搜索章节...</span>
|
||
</div>
|
||
</header>
|
||
|
||
{/* 搜索弹窗 */}
|
||
<SearchModal open={searchOpen} onOpenChange={setSearchOpen} />
|
||
|
||
<main className="px-4 space-y-5">
|
||
{/* Banner卡片 - 最新章节 */}
|
||
<div
|
||
onClick={() => router.push(`/read/${latestSection.id}`)}
|
||
className="relative p-5 rounded-2xl overflow-hidden cursor-pointer"
|
||
style={{
|
||
background: "linear-gradient(135deg, #0d3331 0%, #1a1a2e 50%, #16213e 100%)",
|
||
}}
|
||
>
|
||
<div className="absolute top-0 right-0 w-32 h-32 opacity-20">
|
||
<div className="w-full h-full bg-[#00CED1] rounded-full blur-3xl" />
|
||
</div>
|
||
<span className="inline-block px-2 py-1 rounded text-xs bg-[#00CED1] text-black font-medium mb-3">
|
||
最新更新
|
||
</span>
|
||
<h2 className="text-lg font-bold text-white mb-2 pr-8">{latestSection.title}</h2>
|
||
<p className="text-sm text-gray-400 mb-3">{latestSection.part}</p>
|
||
<div className="flex items-center gap-2 text-[#00CED1] text-sm font-medium">
|
||
开始阅读
|
||
<ChevronRight className="w-4 h-4" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* 阅读进度卡 */}
|
||
<div className="p-4 rounded-2xl bg-[#1c1c1e] border border-white/5">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="text-sm font-medium text-white">我的阅读</h3>
|
||
<span className="text-xs text-gray-500">
|
||
{purchasedCount}/{totalSections}章
|
||
</span>
|
||
</div>
|
||
<div className="w-full h-2 bg-[#2c2c2e] rounded-full overflow-hidden mb-3">
|
||
<div
|
||
className="h-full bg-gradient-to-r from-[#00CED1] to-[#20B2AA] rounded-full transition-all"
|
||
style={{ width: `${(purchasedCount / totalSections) * 100}%` }}
|
||
/>
|
||
</div>
|
||
<div className="grid grid-cols-4 gap-3">
|
||
<div className="text-center">
|
||
<p className="text-[#00CED1] text-lg font-bold">{purchasedCount}</p>
|
||
<p className="text-gray-500 text-xs">已读</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<p className="text-white text-lg font-bold">{totalSections - purchasedCount}</p>
|
||
<p className="text-gray-500 text-xs">待读</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<p className="text-white text-lg font-bold">5</p>
|
||
<p className="text-gray-500 text-xs">篇章</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<p className="text-white text-lg font-bold">11</p>
|
||
<p className="text-gray-500 text-xs">章节</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 精选推荐 */}
|
||
<div>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className="text-base font-semibold text-white">精选推荐</h3>
|
||
<button onClick={() => router.push("/chapters")} className="text-xs text-[#00CED1] flex items-center gap-1">
|
||
查看全部
|
||
<ChevronRight className="w-3 h-3" />
|
||
</button>
|
||
</div>
|
||
<div className="space-y-3">
|
||
{featuredSections.map((section) => (
|
||
<div
|
||
key={section.id}
|
||
onClick={() => router.push(`/read/${section.id}`)}
|
||
className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 cursor-pointer active:scale-[0.98] transition-transform"
|
||
>
|
||
<div className="flex items-start justify-between">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="text-[#00CED1] text-xs font-medium">{section.id}</span>
|
||
<span
|
||
className={`text-xs px-2 py-0.5 rounded ${
|
||
section.tag === "免费"
|
||
? "bg-[#00CED1]/10 text-[#00CED1]"
|
||
: section.tag === "热门"
|
||
? "bg-pink-500/10 text-pink-400"
|
||
: "bg-purple-500/10 text-purple-400"
|
||
}`}
|
||
>
|
||
{section.tag}
|
||
</span>
|
||
</div>
|
||
<h4 className="text-white font-medium text-sm mb-1">{section.title}</h4>
|
||
<p className="text-gray-500 text-xs">{section.part}</p>
|
||
</div>
|
||
<ChevronRight className="w-4 h-4 text-gray-600 mt-1" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-base font-semibold text-white mb-3">内容概览</h3>
|
||
<div className="space-y-3">
|
||
{bookData.map((part) => (
|
||
<div
|
||
key={part.id}
|
||
onClick={() => router.push("/chapters")}
|
||
className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 cursor-pointer active:scale-[0.98] transition-transform"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#00CED1]/20 to-[#20B2AA]/10 flex items-center justify-center shrink-0">
|
||
<span className="text-[#00CED1] font-bold text-sm">{part.number}</span>
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h4 className="text-white font-medium text-sm mb-0.5">{part.title}</h4>
|
||
<p className="text-gray-500 text-xs truncate">{part.subtitle}</p>
|
||
</div>
|
||
<ChevronRight className="w-4 h-4 text-gray-600 shrink-0" />
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 序言入口 */}
|
||
<div
|
||
onClick={() => router.push("/read/preface")}
|
||
className="p-4 rounded-xl bg-gradient-to-r from-[#00CED1]/10 to-transparent border border-[#00CED1]/20 cursor-pointer"
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<h4 className="text-white font-medium text-sm mb-1">序言</h4>
|
||
<p className="text-gray-400 text-xs">为什么我每天早上6点在Soul开播?</p>
|
||
</div>
|
||
<span className="text-xs text-[#00CED1] bg-[#00CED1]/10 px-2 py-1 rounded">免费</span>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
|
||
{/* 使用统一的底部导航组件 */}
|
||
<BottomNav />
|
||
</div>
|
||
)
|
||
}
|