refactor: redesign homepage and navigation based on trends

Update homepage layout and navigation to match current trends.

#VERCEL_SKIP

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

app/page.tsx

@@ -1,274 +1,252 @@
 "use client"
 
-import { useState, useEffect, useRef, useCallback } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
-import { ChevronRight, Sparkles, Lock, Share2 } from "lucide-react"
+import { Search, ChevronRight, BookOpen, Clock, TrendingUp, Users, Home, List, Sparkles, User } 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"
+import { bookData, getTotalSectionCount } from "@/lib/book-data"
 
 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 { user } = useStore()
+  const [mounted, setMounted] = useState(false)
+  const [searchQuery, setSearchQuery] = useState("")
 
-  const fullBookPrice = getFullBookPrice()
   const totalSections = getTotalSectionCount()
   const hasFullBook = user?.hasFullBook || false
+  const purchasedCount = hasFullBook ? totalSections : user?.purchasedSections?.length || 0
 
-  // 最新章节 - 使用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()
+    setMounted(true)
   }, [])
 
-  // 监听滚动进度
-  const handleScroll = useCallback(() => {
-    if (!contentRef.current) return
+  // 推荐章节
+  const featuredSections = [
+    { id: "1.1", title: "荷包：电动车出租的被动收入模式", tag: "免费", part: "真实的人" },
+    { id: "3.1", title: "3000万流水如何跑出来", tag: "热门", part: "真实的行业" },
+    { id: "8.1", title: "流量杠杆:抖音、Soul、飞书", tag: "推荐", part: "真实的赚钱" },
+  ]
 
-    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 latestSection = {
+    id: "9.14",
+    title: "大健康私域：一个月150万的70后",
+    part: "真实的赚钱",
   }
 
-  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
+  if (!mounted) {
+    return (
+      <div className="min-h-screen bg-black flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-[#00CED1]" />
+      </div>
+    )
+  }
 
   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>
+      {/* 顶部区域 */}
+      <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">
+              <BookOpen className="w-5 h-5 text-white" />
+            </div>
+            <div>
+              <h1 className="text-lg font-bold text-white">创业实验</h1>
+              <p className="text-xs text-gray-500">真实的商业世界</p>
             </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 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={() => router.push("/chapters")}
+          className="flex items-center gap-3 px-4 py-3 rounded-xl bg-[#1c1c1e] border border-white/5 cursor-pointer"
+        >
+          <Search className="w-4 h-4 text-gray-500" />
+          <span className="text-gray-500 text-sm">搜索章节...</span>
         </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}
+      <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>
-          {latestSection.isFree && (
-            <span className="text-xs text-[#00E5FF] bg-[#00E5FF]/10 px-2 py-0.5 rounded">免费</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>
-        <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 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={i}
-                className="h-4 bg-[#1c1c1e] rounded animate-pulse"
-                style={{ width: `${Math.random() * 40 + 60}%` }}
-              />
+                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>
-        ) : (
-          <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>
-        )}
+        </div>
 
-        {/* 付费墙 - 只在非免费章节且滚动超过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
+        {/* 五篇概览 */}
+        <div>
+          <h3 className="text-base font-semibold text-white mb-3">内容概览</h3>
+          <div className="grid grid-cols-2 gap-3">
+            {bookData.slice(0, 4).map((part) => (
+              <div
+                key={part.id}
                 onClick={() => router.push("/chapters")}
-                className="px-4 py-2 rounded-lg bg-[#ff3b5c] text-white text-sm font-medium flex items-center gap-1"
+                className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 cursor-pointer"
               >
-                查看目录
-                <ChevronRight className="w-4 h-4" />
-              </button>
-            </div>
+                <span className="text-[#00CED1] text-xs font-medium mb-1 block">第{part.number}篇</span>
+                <h4 className="text-white font-medium text-sm mb-1">{part.title}</h4>
+                <p className="text-gray-500 text-xs">{part.subtitle}</p>
+              </div>
+            ))}
           </div>
-        )}
+        </div>
+
+        {/* 数据统计 */}
+        <div className="grid grid-cols-3 gap-3">
+          <div className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 text-center">
+            <TrendingUp className="w-5 h-5 text-[#00CED1] mx-auto mb-2" />
+            <p className="text-white font-bold">3000万</p>
+            <p className="text-gray-500 text-xs">最高年流水</p>
+          </div>
+          <div className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 text-center">
+            <Users className="w-5 h-5 text-[#00CED1] mx-auto mb-2" />
+            <p className="text-white font-bold">55+</p>
+            <p className="text-gray-500 text-xs">真实案例</p>
+          </div>
+          <div className="p-4 rounded-xl bg-[#1c1c1e] border border-white/5 text-center">
+            <Clock className="w-5 h-5 text-[#00CED1] mx-auto mb-2" />
+            <p className="text-white font-bold">15年</p>
+            <p className="text-gray-500 text-xs">创业经验</p>
+          </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>
 
-      {/* 底部导航 */}
       <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]"
-            >
-              目录
+        <div className="px-4 py-2">
+          <div className="flex items-center justify-around">
+            <button className="flex flex-col items-center py-2 px-4">
+              <Home className="w-5 h-5 text-[#00CED1] mb-1" />
+              <span className="text-[#00CED1] text-xs font-medium">首页</span>
             </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 onClick={() => router.push("/chapters")} className="flex flex-col items-center py-2 px-4">
+              <List className="w-5 h-5 text-gray-500 mb-1" />
+              <span className="text-gray-500 text-xs">目录</span>
             </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 onClick={() => router.push("/match")} className="flex flex-col items-center py-2 px-6 -mt-4">
+              <div className="w-14 h-14 rounded-full bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center shadow-lg shadow-[#00CED1]/30">
+                <Sparkles className="w-6 h-6 text-white" />
+              </div>
+              <span className="text-[#00CED1] text-xs mt-1">匹配</span>
             </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 onClick={() => router.push("/my")} className="flex flex-col items-center py-2 px-4">
+              <User className="w-5 h-5 text-gray-500 mb-1" />
+              <span className="text-gray-500 text-xs">我的</span>
             </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>
   )
 }