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

refactor: complete system overhaul with new design

Browse Source 
Rebuilt user and match pages, simplified login, and updated bottom navigation.

#VERCEL_SKIP

Co-authored-by: undefined <undefined+undefined@users.noreply.github.com>
This commit is contained in:
v0
2026-01-14 05:41:44 +00:00
parent 1e25c7134a
commit 78867aac6d
5 changed files with 831 additions and 478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/chapter-content.tsx
View File

@@ -6,6 +6,7 @@ import { ChevronLeft, Lock, Share2, Sparkles } from "lucide-react"
import { type Section, getFullBookPrice, getTotalSectionCount } from "@/lib/book-data"
import { useStore } from "@/lib/store"
import { PaymentModal } from "./payment-modal"
import { AuthModal } from "./modules/auth/auth-modal"
interface ChapterContentProps {
section: Section & { filePath: string }
@@ -18,6 +19,7 @@ export function ChapterContent({ section, partTitle, chapterTitle }: ChapterCont
const [content, setContent] = useState<string>("")
const [isLoading, setIsLoading] = useState(true)
const [isPaymentOpen, setIsPaymentOpen] = useState(false)
const [isAuthOpen, setIsAuthOpen] = useState(false)
const [paymentType, setPaymentType] = useState<"section" | "fullbook">("section")
const [readingProgress, setReadingProgress] = useState(0)
@@ -68,25 +70,23 @@ export function ChapterContent({ section, partTitle, chapterTitle }: ChapterCont
const handlePurchaseClick = (type: "section" | "fullbook") => {
if (!isLoggedIn) {
router.push("/login")
setIsAuthOpen(true)
return
}
setPaymentType(type)
setIsPaymentOpen(true)
}
// 计算预览内容（前50%）
const contentLines = content.split("\n").filter((line) => line.trim())
const previewLineCount = Math.ceil(contentLines.length * 0.5)
const previewLineCount = Math.ceil(contentLines.length * 0.1) // 改为10%
const previewContent = contentLines.slice(0, previewLineCount).join("\n")
const hiddenContent = contentLines.slice(previewLineCount).join("\n")
return (
<div className="min-h-screen bg-black text-white">
{/* 阅读进度条 */}
<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-[#30d158] to-[#00c7be] transition-all duration-150"
className="h-full bg-gradient-to-r from-[#ff3b5c] to-[#ff6b8a] transition-all duration-150"
style={{ width: `${readingProgress}%` }}
/>
</div>
@@ -122,10 +122,10 @@ export function ChapterContent({ section, partTitle, chapterTitle }: ChapterCont
{/* 标题 */}
<div className="mb-8">
<div className="flex items-center gap-2 mb-3">
<span className="text-[#30d158] text-sm font-medium bg-[#30d158]/10 px-3 py-1 rounded-full">
<span className="text-[#ff3b5c] text-sm font-medium bg-[#ff3b5c]/10 px-3 py-1 rounded-full">
{section.id}
</span>
{section.isFree && <span className="text-xs text-[#30d158] bg-[#30d158]/10 px-2 py-0.5 rounded">免费</span>}
{section.isFree && <span className="text-xs text-[#00E5FF] bg-[#00E5FF]/10 px-2 py-0.5 rounded">免费</span>}
</div>
<h1 className="text-2xl font-bold text-white leading-tight">{section.title}</h1>
</div>
@@ -153,7 +153,6 @@ export function ChapterContent({ section, partTitle, chapterTitle }: ChapterCont
)}
</article>
) : (
// 付费墙：前半免费，后半付费
<div>
{/* 免费预览部分 */}
<article className="text-gray-300 leading-[1.9] text-[17px]">
@@ -175,12 +174,12 @@ export function ChapterContent({ section, partTitle, chapterTitle }: ChapterCont
{/* 付费提示卡片 */}
<div className="mt-8 p-6 rounded-2xl bg-gradient-to-b from-[#1c1c1e] to-[#2c2c2e] border border-white/10">
<div className="text-center">
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-[#30d158]/10 flex items-center justify-center">
<Lock className="w-8 h-8 text-[#30d158]" />
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-[#ff3b5c]/10 flex items-center justify-center">
<Lock className="w-8 h-8 text-[#ff3b5c]" />
</div>
<h3 className="text-xl font-semibold text-white mb-2">解锁完整内容</h3>
<p className="text-gray-400 text-sm mb-6">
已阅读50%，{isLoggedIn ? "购买后继续阅读" : "登录并购买后继续阅读"}
已阅读10%，{isLoggedIn ? "购买后继续阅读" : "登录并购买后继续阅读"}
</p>
{/* 购买选项 */}
@@ -191,13 +190,13 @@ export function ChapterContent({ section, partTitle, chapterTitle }: ChapterCont
>
<div className="flex items-center justify-between">
<span>购买本章</span>
<span className="text-[#30d158]">¥{section.price}</span>
<span className="text-[#ff3b5c]">¥{section.price}</span>
</div>
</button>
<button
onClick={() => handlePurchaseClick("fullbook")}
className="w-full py-3.5 px-6 rounded-xl bg-gradient-to-r from-[#30d158] to-[#00c7be] text-white font-medium active:scale-[0.98] transition-transform shadow-lg shadow-[#30d158]/20"
className="w-full py-3.5 px-6 rounded-xl bg-gradient-to-r from-[#ff3b5c] to-[#ff6b8a] text-white font-medium active:scale-[0.98] transition-transform shadow-lg shadow-[#ff3b5c]/20"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
@@ -219,6 +218,9 @@ export function ChapterContent({ section, partTitle, chapterTitle }: ChapterCont
)}
</main>
{/* 登录弹窗 */}
<AuthModal isOpen={isAuthOpen} onClose={() => setIsAuthOpen(false)} />
{/* 支付弹窗 */}
<PaymentModal
isOpen={isPaymentOpen}