From 59ca3b2bbd42e581417ef2c243193fbbad93039d Mon Sep 17 00:00:00 2001 From: v0 Date: Wed, 14 Jan 2026 05:17:59 +0000 Subject: [PATCH] refactor: full product interaction system redesign Refactor homepage, reading modal, matching feature, and user profile for improved UX #VERCEL_SKIP Co-authored-by: undefined --- app/my/page.tsx | 238 +++++++-------- app/page.tsx | 136 +-------- components/bottom-nav.tsx | 78 ++--- components/home-screen.tsx | 532 +++++++++++++++++++++++++++++++++ components/match-modal.tsx | 215 ------------- components/matching-circle.tsx | 171 +++++++++++ components/reading-modal.tsx | 125 ++++++++ lib/book-data.ts | 257 +++++++++------- 8 files changed, 1124 insertions(+), 628 deletions(-) create mode 100644 components/home-screen.tsx delete mode 100644 components/match-modal.tsx create mode 100644 components/matching-circle.tsx create mode 100644 components/reading-modal.tsx diff --git a/app/my/page.tsx b/app/my/page.tsx index 1ade62e..e6bc295 100644 --- a/app/my/page.tsx +++ b/app/my/page.tsx @@ -2,177 +2,149 @@ import { useState, useEffect } from "react" import Link from "next/link" -import { User, ShoppingBag, Share2, LogOut, ChevronRight, BookOpen, Copy, Check } from "lucide-react" +import { User, ShoppingBag, Share2, LogOut, ChevronRight, BookOpen } from "lucide-react" import { useStore } from "@/lib/store" import { AuthModal } from "@/components/modules/auth/auth-modal" -import { getFullBookPrice, getAllSections } from "@/lib/book-data" +import { getFullBookPrice } from "@/lib/book-data" export default function MyPage() { const { user, isLoggedIn, logout } = useStore() const [showAuthModal, setShowAuthModal] = useState(false) const [mounted, setMounted] = useState(false) - const [copied, setCopied] = useState(false) useEffect(() => { setMounted(true) }, []) - const copyCode = () => { - if (user?.referralCode) { - navigator.clipboard.writeText(user.referralCode) - setCopied(true) - setTimeout(() => setCopied(false), 2000) - } - } - if (!mounted) { return ( -
-
+
+
) } if (!isLoggedIn) { return ( -
-
- +
+
+
+
+ +
+

登录后查看更多

+

查看购买记录、分销收益

+ +
-

登录后查看更多

-

查看购买记录、分销收益

- setShowAuthModal(false)} />
) } - const totalSections = getAllSections().length - const purchasedCount = user?.hasFullBook ? totalSections : user?.purchasedSections.length || 0 - const purchaseProgress = Math.round((purchasedCount / totalSections) * 100) const fullBookPrice = getFullBookPrice() return ( -
- {/* 用户信息头部 */} -
-
-
- +
+ {/* User Profile Header */} +
+
+
+
+ +
+
+

{user?.nickname || "用户"}

+

{user?.phone}

+
-
-

{user?.nickname || "用户"}

-

{user?.phone}

+ + {/* Stats */} +
+
+

+ {user?.hasFullBook ? "全部" : user?.purchasedSections.length || 0} +

+

已购章节

+
+
+

¥{(user?.earnings || 0).toFixed(1)}

+

累计收益

+
- - {/* 数据统计卡片 */} -
- {/* 购买进度 */} -
-
- 购买进度 - {purchaseProgress}% -
-
-
-
-

- {user?.hasFullBook ? "全书" : `${purchasedCount}/${totalSections}`} -

-

已购章节

-
- - {/* 分销收益 */} -
-
- 累计收益 - -
-

¥{(user?.earnings || 0).toFixed(2)}

-

推荐{user?.referralCount || 0}人

-
-
- - {/* 购买整本书提示 */} - {!user?.hasFullBook && ( - -
-
-
- -
-

购买整本书

-

解锁全部{totalSections}章内容

-
-
- ¥{fullBookPrice} -
-
- - )}
- {/* 菜单列表 */} -
-
- -
- - 我的购买 -
-
- {purchasedCount}章 - -
- + {/* Menu Items */} +
+
+ {/* Purchase prompt */} + {!user?.hasFullBook && ( + +
+
+
+ + 购买整本书 +
+ ¥{fullBookPrice} +
+
+ + )} - -
- - 分销收益 -
-
- ¥{(user?.earnings || 0).toFixed(1)} - -
- -
+ {/* Menu List - simplified, removed settings and docs */} +
+ +
+ + 我的购买 +
+ + - {/* 邀请码 */} -
-
-
-

我的邀请码

- {user?.referralCode} -
- + +
+ + 分销收益 +
+
+ ¥{(user?.earnings || 0).toFixed(1)} + +
+
-

分享给好友，好友购买你获得90%佣金

-
- {/* 退出登录 */} - + {/* Referral Code */} +
+
+
+

我的邀请码

+ {user?.referralCode} +
+ +
+
+ + {/* Logout */} + +
) diff --git a/app/page.tsx b/app/page.tsx index 028beb2..f2e9ad5 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,133 +1,9 @@ -"use client" +import { HomeScreen } from "@/components/home-screen" +import { getBookStructure } from "@/lib/book-file-system" -import { useState, useEffect } from "react" -import Link from "next/link" -import { ChevronRight, Sparkles, User } from "lucide-react" -import { bookData, getAllSections, getFullBookPrice } from "@/lib/book-data" -import { useStore } from "@/lib/store" -import { AuthModal } from "@/components/modules/auth/auth-modal" +export const dynamic = "force-dynamic" -export default function HomePage() { - const [sectionsCount, setSectionsCount] = useState(64) - const [isAuthOpen, setIsAuthOpen] = useState(false) - const { isLoggedIn, user } = useStore() - - useEffect(() => { - const sections = getAllSections() - setSectionsCount(sections.length) - }, []) - - // 计算每篇的章节数 - const partsWithCount = bookData.map((part) => ({ - ...part, - chaptersCount: part.chapters.length, - sectionsCount: part.chapters.reduce((acc, c) => acc + c.sections.length, 0), - })) - - return ( -
- {/* 背景 */} -
-
- - {/* 顶部用户状态栏 */} -
-
-
- - Soul · 派对房 -
- {isLoggedIn ? ( - - - {user?.nickname} - - ) : ( - - )} -
-
- - {/* 书籍信息头部 */} -
-

- 一场SOUL的 - 创业实验场 -

-

来自Soul派对房的真实商业故事

- - {/* 统计数据 */} -
-
- {sectionsCount} - 章节 -
-
-
- 5 - 大篇 -
-
-
- 作者 - 卡若 -
-
-
- - {/* 目录列表 - 紧凑显示在首页 */} -
-
- {partsWithCount.map((part, index) => ( - -
- {/* 序号 */} -
- {part.number} -
- - {/* 内容 */} -
-
-

{part.title}

- {part.sectionsCount}章 -
-

{part.subtitle}

-
- - -
- - ))} -
- - {/* 序言和尾声 */} -
- -
-

序言

-

为什么我每天早上6点在Soul开播?

-
- - -
-

尾声

-

努力不是关键，选择才是

-
- -
- - {/* 底部提示 */} -

首章免费 · 单章¥1 · 全书¥{getFullBookPrice()}

-
- - setIsAuthOpen(false)} /> -
- ) +export default async function HomePage() { + const parts = getBookStructure() + return } diff --git a/components/bottom-nav.tsx b/components/bottom-nav.tsx index 36e5900..c5f3689 100644 --- a/components/bottom-nav.tsx +++ b/components/bottom-nav.tsx @@ -2,56 +2,60 @@ import Link from "next/link" import { usePathname } from "next/navigation" -import { Home, User, Handshake } from "lucide-react" -import { useState } from "react" -import { MatchModal } from "@/components/match-modal" +import { Home, User } from "lucide-react" export function BottomNav() { const pathname = usePathname() - const [showMatch, setShowMatch] = useState(false) - // 在管理后台不显示底部导航 - if (pathname.startsWith("/admin")) { + // 在文档页面和管理后台不显示底部导航 + if (pathname.startsWith("/documentation") || pathname.startsWith("/admin")) { return null } + const navItems = [ + { href: "/", icon: Home, label: "首页" }, + { href: "/match", emoji: "🤝", label: "匹配合作" }, + { href: "/my", icon: User, label: "我的" }, + ] + return ( <> - {/* iOS风格底部导航 - 只有3个按钮，匹配在当前页面弹窗 */} -