refactor: complete system overhaul with new design

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

#VERCEL_SKIP

Co-authored-by: undefined <undefined+undefined@users.noreply.github.com>

app/my/page.tsx

@@ -2,15 +2,16 @@
 
 import { useState, useEffect } from "react"
 import Link from "next/link"
-import { User, ShoppingBag, Share2, LogOut, ChevronRight, BookOpen } from "lucide-react"
+import { User, ChevronRight, Copy, Check } from "lucide-react"
 import { useStore } from "@/lib/store"
 import { AuthModal } from "@/components/modules/auth/auth-modal"
-import { getFullBookPrice } from "@/lib/book-data"
+import { getFullBookPrice, getTotalSectionCount } from "@/lib/book-data"
 
 export default function MyPage() {
-  const { user, isLoggedIn, logout } = useStore()
+  const { user, isLoggedIn, logout, getAllPurchases } = useStore()
   const [showAuthModal, setShowAuthModal] = useState(false)
   const [mounted, setMounted] = useState(false)
+  const [copied, setCopied] = useState(false)
 
   useEffect(() => {
     setMounted(true)
@@ -18,133 +19,402 @@ export default function MyPage() {
 
   if (!mounted) {
     return (
-      <div className="min-h-screen bg-app-bg flex items-center justify-center">
-        <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-app-brand" />
+      <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-[#ff3b5c]" />
       </div>
     )
   }
 
-  if (!isLoggedIn) {
-    return (
-      <main className="min-h-screen bg-app-bg text-app-text pb-20 flex flex-col items-center justify-center">
-        <div className="p-4 w-full">
-          <div className="max-w-xs mx-auto text-center">
-            <div className="w-14 h-14 mx-auto mb-3 rounded-full bg-app-card flex items-center justify-center">
-              <User className="w-7 h-7 text-app-text-muted" />
-            </div>
-            <h2 className="text-base font-semibold mb-1">登录后查看更多</h2>
-            <p className="text-app-text-muted text-xs mb-4">查看购买记录、分销收益</p>
-            <button
-              onClick={() => setShowAuthModal(true)}
-              className="bg-app-brand hover:bg-app-brand-hover text-white px-6 py-2.5 rounded-full font-medium text-sm"
-            >
-              立即登录
-            </button>
-          </div>
-        </div>
-        <AuthModal isOpen={showAuthModal} onClose={() => setShowAuthModal(false)} />
-      </main>
-    )
-  }
-
   const fullBookPrice = getFullBookPrice()
+  const totalSections = getTotalSectionCount()
+  const purchasedCount = user?.hasFullBook ? totalSections : user?.purchasedSections?.length || 0
 
-  return (
-    <main className="min-h-screen bg-app-bg text-app-text pb-20">
-      {/* User Profile Header */}
-      <div className="bg-gradient-to-b from-app-card to-app-bg p-4 pt-8">
-        <div className="max-w-xs mx-auto">
-          <div className="flex items-center gap-3 mb-3">
-            <div className="w-11 h-11 rounded-full bg-app-brand/20 flex items-center justify-center">
-              <User className="w-5 h-5 text-app-brand" />
+  // 计算阅读时长（模拟数据，实际应该从localStorage读取）
+  const readingMinutes = Math.floor(Math.random() * 100)
+  const bookmarks = user?.purchasedSections?.length || 0
+
+  const handleCopyCode = () => {
+    if (user?.referralCode) {
+      navigator.clipboard.writeText(user.referralCode)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    }
+  }
+
+  // 未登录状态
+  if (!isLoggedIn) {
+    return (
+      <main className="min-h-screen bg-black text-white pb-24">
+        {/* 顶部标题 */}
+        <div className="text-center py-4 border-b border-white/10">
+          <h1 className="text-lg font-medium text-[#ffd700]">Soul派对·创业实验</h1>
+        </div>
+
+        {/* 用户卡片 - 未登录 */}
+        <div className="mx-4 mt-4 p-4 rounded-2xl bg-[#1c1c1e] border border-white/5">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="w-14 h-14 rounded-full border-2 border-[#ff3b5c]/50 flex items-center justify-center">
+              <User className="w-7 h-7 text-white/30" />
             </div>
             <div>
-              <h2 className="text-sm font-semibold">{user?.nickname || "用户"}</h2>
-              <p className="text-app-text-muted text-xs">{user?.phone}</p>
+              <button onClick={() => setShowAuthModal(true)} className="text-[#ff3b5c] font-medium text-lg">
+                点击登录
+              </button>
+              <p className="text-white/30 text-sm">ID: ---</p>
             </div>
           </div>
 
-          {/* Stats */}
-          <div className="grid grid-cols-2 gap-2">
-            <div className="bg-app-card/60 rounded-lg p-2.5 text-center">
-              <p className="text-base font-bold text-app-brand">
-                {user?.hasFullBook ? "全部" : user?.purchasedSections.length || 0}
-              </p>
-              <p className="text-app-text-muted text-xs">已购章节</p>
+          {/* 统计数据 */}
+          <div className="grid grid-cols-3 gap-4 pt-4 border-t border-white/10">
+            <div className="text-center">
+              <p className="text-[#ff3b5c] text-xl font-bold">0</p>
+              <p className="text-white/40 text-xs">已读章节</p>
             </div>
-            <div className="bg-app-card/60 rounded-lg p-2.5 text-center">
-              <p className="text-base font-bold text-app-brand">¥{(user?.earnings || 0).toFixed(1)}</p>
-              <p className="text-app-text-muted text-xs">累计收益</p>
+            <div className="text-center">
+              <p className="text-[#ff3b5c] text-xl font-bold">0</p>
+              <p className="text-white/40 text-xs">阅读时长(分)</p>
+            </div>
+            <div className="text-center">
+              <p className="text-[#ff3b5c] text-xl font-bold">0</p>
+              <p className="text-white/40 text-xs">书签</p>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Menu Items */}
-      <div className="p-4">
-        <div className="max-w-xs mx-auto space-y-2">
-          {/* Purchase prompt */}
-          {!user?.hasFullBook && (
-            <Link href="/chapters" className="block">
-              <div className="bg-gradient-to-r from-app-brand/20 to-app-card rounded-lg p-3 border border-app-brand/30">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center gap-2">
-                    <BookOpen className="w-4 h-4 text-app-brand" />
-                    <span className="text-app-text text-sm">购买整本书</span>
-                  </div>
-                  <span className="text-app-brand font-bold text-sm">¥{fullBookPrice}</span>
-                </div>
-              </div>
-            </Link>
-          )}
-
-          {/* Menu List - simplified, removed settings and docs */}
-          <div className="bg-app-card/60 rounded-lg overflow-hidden">
-            <Link href="/my/purchases" className="flex items-center justify-between p-3 border-b border-app-border">
-              <div className="flex items-center gap-2">
-                <ShoppingBag className="w-4 h-4 text-app-text-muted" />
-                <span className="text-sm">我的购买</span>
-              </div>
-              <ChevronRight className="w-4 h-4 text-app-text-muted" />
-            </Link>
-
-            <Link href="/my/referral" className="flex items-center justify-between p-3">
-              <div className="flex items-center gap-2">
-                <Share2 className="w-4 h-4 text-app-text-muted" />
-                <span className="text-sm">分销收益</span>
-              </div>
-              <div className="flex items-center gap-1">
-                <span className="text-app-brand text-xs">¥{(user?.earnings || 0).toFixed(1)}</span>
-                <ChevronRight className="w-4 h-4 text-app-text-muted" />
-              </div>
-            </Link>
+        {/* 分销中心 - 未登录 */}
+        <div className="mx-4 mt-4 p-4 rounded-2xl bg-[#1c1c1e] border border-white/5">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-2">
+              <span className="text-xl">💰</span>
+              <span className="text-white font-medium">分销中心</span>
+            </div>
+            <span className="text-[#ff3b5c] text-sm bg-[#ff3b5c]/10 px-2 py-1 rounded">佣金比例: 90%</span>
           </div>
 
-          {/* Referral Code */}
-          <div className="bg-app-card/60 rounded-lg p-3">
+          {/* 收益卡片 */}
+          <div className="bg-[#2c2c2e] rounded-xl p-4 mb-4">
+            <p className="text-white/50 text-sm text-center mb-2">累计收益</p>
+            <p className="text-[#ffd700] text-3xl font-bold text-center">¥0.00</p>
+            <div className="grid grid-cols-2 gap-4 mt-4 pt-4 border-t border-white/10">
+              <div className="text-center">
+                <p className="text-white/50 text-xs">可提现</p>
+                <p className="text-white font-medium">¥0.00</p>
+              </div>
+              <div className="text-center">
+                <p className="text-white/50 text-xs">已提现</p>
+                <p className="text-white font-medium">¥0.00</p>
+              </div>
+            </div>
+          </div>
+
+          {/* 按钮 */}
+          <div className="grid grid-cols-2 gap-3 mb-4">
+            <button
+              onClick={() => setShowAuthModal(true)}
+              className="py-3 rounded-xl bg-[#ff3b5c] text-white font-medium"
+            >
+              生成推广海报
+            </button>
+            <button
+              onClick={() => setShowAuthModal(true)}
+              className="py-3 rounded-xl bg-[#2c2c2e] text-white font-medium border border-white/10"
+            >
+              立即提现
+            </button>
+          </div>
+
+          {/* 统计 */}
+          <div className="grid grid-cols-3 gap-4 pt-4 border-t border-white/10">
+            <div className="text-center">
+              <p className="text-[#ff3b5c] text-xl font-bold">0</p>
+              <p className="text-white/40 text-xs">推荐人数</p>
+            </div>
+            <div className="text-center">
+              <p className="text-[#ff3b5c] text-xl font-bold">0</p>
+              <p className="text-white/40 text-xs">成交订单</p>
+            </div>
+            <div className="text-center">
+              <p className="text-[#ff3b5c] text-xl font-bold">90%</p>
+              <p className="text-white/40 text-xs">佣金率</p>
+            </div>
+          </div>
+
+          {/* 邀请码 */}
+          <div className="mt-4 pt-4 border-t border-white/10">
             <div className="flex items-center justify-between">
               <div>
-                <p className="text-app-text-muted text-xs">我的邀请码</p>
-                <code className="text-app-brand font-mono text-sm">{user?.referralCode}</code>
+                <p className="text-white/50 text-xs">我的邀请码</p>
+                <p className="text-[#ff3b5c] font-mono text-lg">- - -</p>
               </div>
               <button
-                onClick={() => navigator.clipboard.writeText(user?.referralCode || "")}
-                className="text-app-text-muted text-xs hover:text-app-text px-2 py-1 rounded bg-app-card"
+                onClick={() => setShowAuthModal(true)}
+                className="px-4 py-2 rounded-lg bg-[#2c2c2e] text-white text-sm"
               >
                 复制
               </button>
             </div>
           </div>
-
-          {/* Logout */}
-          <button
-            onClick={logout}
-            className="w-full flex items-center justify-center gap-2 p-2.5 text-app-text-muted hover:text-red-400 transition-colors text-sm"
-          >
-            <LogOut className="w-4 h-4" />
-            <span>退出登录</span>
-          </button>
         </div>
+
+        {/* 菜单列表 */}
+        <div className="mx-4 mt-4 rounded-2xl bg-[#1c1c1e] border border-white/5 overflow-hidden">
+          <Link
+            href="#"
+            onClick={(e) => {
+              e.preventDefault()
+              setShowAuthModal(true)
+            }}
+            className="flex items-center justify-between p-4 border-b border-white/5 active:bg-white/5"
+          >
+            <div className="flex items-center gap-3">
+              <span className="text-xl">📦</span>
+              <span className="text-white">我的订单</span>
+            </div>
+            <ChevronRight className="w-5 h-5 text-white/30" />
+          </Link>
+          <Link
+            href="#"
+            onClick={(e) => {
+              e.preventDefault()
+              setShowAuthModal(true)
+            }}
+            className="flex items-center justify-between p-4 border-b border-white/5 active:bg-white/5"
+          >
+            <div className="flex items-center gap-3">
+              <span className="text-xl">🏷️</span>
+              <span className="text-white">我的书签</span>
+            </div>
+            <ChevronRight className="w-5 h-5 text-white/30" />
+          </Link>
+          <Link
+            href="#"
+            onClick={(e) => {
+              e.preventDefault()
+              setShowAuthModal(true)
+            }}
+            className="flex items-center justify-between p-4 active:bg-white/5"
+          >
+            <div className="flex items-center gap-3">
+              <span className="text-xl">📝</span>
+              <span className="text-white">阅读笔记</span>
+            </div>
+            <ChevronRight className="w-5 h-5 text-white/30" />
+          </Link>
+        </div>
+
+        {/* 设置菜单 */}
+        <div className="mx-4 mt-4 rounded-2xl bg-[#1c1c1e] border border-white/5 overflow-hidden">
+          <Link href="#" className="flex items-center justify-between p-4 border-b border-white/5 active:bg-white/5">
+            <div className="flex items-center gap-3">
+              <span className="text-xl">⚙️</span>
+              <span className="text-white">设置</span>
+            </div>
+            <ChevronRight className="w-5 h-5 text-white/30" />
+          </Link>
+          <Link href="#" className="flex items-center justify-between p-4 border-b border-white/5 active:bg-white/5">
+            <div className="flex items-center gap-3">
+              <span className="text-xl">💬</span>
+              <span className="text-white">联系客服</span>
+            </div>
+            <ChevronRight className="w-5 h-5 text-white/30" />
+          </Link>
+          <Link href="#" className="flex items-center justify-between p-4 active:bg-white/5">
+            <div className="flex items-center gap-3">
+              <span className="text-xl">ℹ️</span>
+              <span className="text-white">关于我们</span>
+            </div>
+            <ChevronRight className="w-5 h-5 text-white/30" />
+          </Link>
+        </div>
+
+        <AuthModal isOpen={showAuthModal} onClose={() => setShowAuthModal(false)} />
+      </main>
+    )
+  }
+
+  // 已登录状态
+  const userPurchases = getAllPurchases().filter((p) => p.userId === user?.id)
+  const completedOrders = userPurchases.filter((p) => p.status === "completed").length
+
+  return (
+    <main className="min-h-screen bg-black text-white pb-24">
+      {/* 顶部标题 */}
+      <div className="text-center py-4 border-b border-white/10">
+        <h1 className="text-lg font-medium text-[#ffd700]">Soul派对·创业实验</h1>
+      </div>
+
+      {/* 用户卡片 */}
+      <div className="mx-4 mt-4 p-4 rounded-2xl bg-[#1c1c1e] border border-white/5">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-14 h-14 rounded-full border-2 border-[#ff3b5c] flex items-center justify-center bg-gradient-to-br from-[#ff3b5c]/20 to-transparent">
+            <User className="w-7 h-7 text-[#ff3b5c]" />
+          </div>
+          <div>
+            <p className="text-white font-medium text-lg">{user?.nickname || "用户"}</p>
+            <p className="text-white/30 text-sm">ID: {user?.id?.slice(-8) || "---"}</p>
+          </div>
+        </div>
+
+        {/* 统计数据 */}
+        <div className="grid grid-cols-3 gap-4 pt-4 border-t border-white/10">
+          <div className="text-center">
+            <p className="text-[#ff3b5c] text-xl font-bold">{purchasedCount}</p>
+            <p className="text-white/40 text-xs">已读章节</p>
+          </div>
+          <div className="text-center">
+            <p className="text-[#ff3b5c] text-xl font-bold">{readingMinutes}</p>
+            <p className="text-white/40 text-xs">阅读时长(分)</p>
+          </div>
+          <div className="text-center">
+            <p className="text-[#ff3b5c] text-xl font-bold">{bookmarks}</p>
+            <p className="text-white/40 text-xs">书签</p>
+          </div>
+        </div>
+      </div>
+
+      {/* 分销中心 */}
+      <div className="mx-4 mt-4 p-4 rounded-2xl bg-[#1c1c1e] border border-white/5">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <span className="text-xl">💰</span>
+            <span className="text-white font-medium">分销中心</span>
+          </div>
+          <span className="text-[#ff3b5c] text-sm bg-[#ff3b5c]/10 px-2 py-1 rounded">佣金比例: 90%</span>
+        </div>
+
+        {/* 收益卡片 */}
+        <div className="bg-[#2c2c2e] rounded-xl p-4 mb-4">
+          <p className="text-white/50 text-sm text-center mb-2">累计收益</p>
+          <p className="text-[#ffd700] text-3xl font-bold text-center">¥{(user?.earnings || 0).toFixed(2)}</p>
+          <div className="grid grid-cols-2 gap-4 mt-4 pt-4 border-t border-white/10">
+            <div className="text-center">
+              <p className="text-white/50 text-xs">可提现</p>
+              <p className="text-white font-medium">¥{(user?.pendingEarnings || 0).toFixed(2)}</p>
+            </div>
+            <div className="text-center">
+              <p className="text-white/50 text-xs">已提现</p>
+              <p className="text-white font-medium">¥{(user?.withdrawnEarnings || 0).toFixed(2)}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* 按钮 */}
+        <div className="grid grid-cols-2 gap-3 mb-4">
+          <Link href="/my/referral" className="py-3 rounded-xl bg-[#ff3b5c] text-white font-medium text-center">
+            生成推广海报
+          </Link>
+          <Link
+            href="/my/referral"
+            className="py-3 rounded-xl bg-[#2c2c2e] text-white font-medium text-center border border-white/10"
+          >
+            立即提现
+          </Link>
+        </div>
+
+        {/* 统计 */}
+        <div className="grid grid-cols-3 gap-4 pt-4 border-t border-white/10">
+          <div className="text-center">
+            <p className="text-[#ff3b5c] text-xl font-bold">{user?.referralCount || 0}</p>
+            <p className="text-white/40 text-xs">推荐人数</p>
+          </div>
+          <div className="text-center">
+            <p className="text-[#ff3b5c] text-xl font-bold">{completedOrders}</p>
+            <p className="text-white/40 text-xs">成交订单</p>
+          </div>
+          <div className="text-center">
+            <p className="text-[#ff3b5c] text-xl font-bold">90%</p>
+            <p className="text-white/40 text-xs">佣金率</p>
+          </div>
+        </div>
+
+        {/* 邀请码 */}
+        <div className="mt-4 pt-4 border-t border-white/10">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-white/50 text-xs">我的邀请码</p>
+              <p className="text-[#ff3b5c] font-mono text-lg">{user?.referralCode || "---"}</p>
+            </div>
+            <button
+              onClick={handleCopyCode}
+              className="px-4 py-2 rounded-lg bg-[#2c2c2e] text-white text-sm flex items-center gap-2"
+            >
+              {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+              {copied ? "已复制" : "复制"}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 菜单列表 */}
+      <div className="mx-4 mt-4 rounded-2xl bg-[#1c1c1e] border border-white/5 overflow-hidden">
+        <Link
+          href="/my/purchases"
+          className="flex items-center justify-between p-4 border-b border-white/5 active:bg-white/5"
+        >
+          <div className="flex items-center gap-3">
+            <span className="text-xl">📦</span>
+            <span className="text-white">我的订单</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-white/30" />
+        </Link>
+        <Link
+          href="/my/bookmarks"
+          className="flex items-center justify-between p-4 border-b border-white/5 active:bg-white/5"
+        >
+          <div className="flex items-center gap-3">
+            <span className="text-xl">🏷️</span>
+            <span className="text-white">我的书签</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-white/30" />
+        </Link>
+        <Link href="/my/notes" className="flex items-center justify-between p-4 active:bg-white/5">
+          <div className="flex items-center gap-3">
+            <span className="text-xl">📝</span>
+            <span className="text-white">阅读笔记</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-white/30" />
+        </Link>
+      </div>
+
+      {/* 设置菜单 */}
+      <div className="mx-4 mt-4 rounded-2xl bg-[#1c1c1e] border border-white/5 overflow-hidden">
+        <Link
+          href="/my/settings"
+          className="flex items-center justify-between p-4 border-b border-white/5 active:bg-white/5"
+        >
+          <div className="flex items-center gap-3">
+            <span className="text-xl">⚙️</span>
+            <span className="text-white">设置</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-white/30" />
+        </Link>
+        <Link
+          href="/my/contact"
+          className="flex items-center justify-between p-4 border-b border-white/5 active:bg-white/5"
+        >
+          <div className="flex items-center gap-3">
+            <span className="text-xl">💬</span>
+            <span className="text-white">联系客服</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-white/30" />
+        </Link>
+        <Link href="/about" className="flex items-center justify-between p-4 active:bg-white/5">
+          <div className="flex items-center gap-3">
+            <span className="text-xl">ℹ️</span>
+            <span className="text-white">关于我们</span>
+          </div>
+          <ChevronRight className="w-5 h-5 text-white/30" />
+        </Link>
+      </div>
+
+      {/* 退出登录 */}
+      <div className="mx-4 mt-4">
+        <button
+          onClick={logout}
+          className="w-full py-3 rounded-xl bg-[#1c1c1e] text-[#ff3b5c] font-medium border border-white/5"
+        >
+          退出登录
+        </button>
       </div>
     </main>
   )