feat: add admin site config page and optimize my page

Add "Site Configuration" page and refactor "My" page
Expand store with site, menu, and page configurations.

#VERCEL_SKIP

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>
This commit is contained in:
v0
2026-01-14 07:57:58 +00:00
parent b487855d44
commit 7e1e2e7115
5 changed files with 555 additions and 117 deletions

View File

@@ -2,11 +2,21 @@
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { User, ChevronRight, Copy, Check, Home, List, Sparkles, Clock } from "lucide-react"
import { User, ChevronRight, Copy, Check, Home, List, TrendingUp, Gift, Star, Info } from "lucide-react"
import { useStore } from "@/lib/store"
import { AuthModal } from "@/components/modules/auth/auth-modal"
import { getFullBookPrice, getTotalSectionCount } from "@/lib/book-data"
function PlanetIcon({ className }: { className?: string }) {
return (
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
<circle cx="12" cy="12" r="8" fill="currentColor" opacity="0.9" />
<ellipse cx="12" cy="12" rx="11" ry="4" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.6" />
<circle cx="9" cy="10" r="1.5" fill="white" opacity="0.4" />
</svg>
)
}
export default function MyPage() {
const router = useRouter()
const { user, isLoggedIn, logout, getAllPurchases, settings } = useStore()
@@ -60,10 +70,10 @@ export default function MyPage() {
<List className="w-5 h-5 text-gray-500 mb-1" />
<span className="text-gray-500 text-xs"></span>
</button>
{/* 匹配按钮 - 更大更突出 */}
{/* 匹配按钮 - 小星球图标 */}
<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" />
<PlanetIcon className="w-7 h-7 text-white" />
</div>
<span className="text-gray-500 text-xs mt-1"></span>
</button>
@@ -84,81 +94,62 @@ export default function MyPage() {
<h1 className="text-lg font-medium text-[#00CED1]"></h1>
</div>
<div className="mx-4 mt-4 p-4 rounded-2xl bg-[#1c1c1e] border border-[#00CED1]/20">
{/* 用户卡片 - 突出个性化 */}
<div className="mx-4 mt-4 p-4 rounded-2xl bg-gradient-to-br from-[#1c1c1e] to-[#2c2c2e] border border-[#00CED1]/20">
<div className="flex items-center gap-3 mb-4">
<div className="w-14 h-14 rounded-full border-2 border-[#00CED1]/50 flex items-center justify-center">
<User className="w-7 h-7 text-white/30" />
<div className="w-16 h-16 rounded-full border-2 border-dashed border-[#00CED1]/50 flex items-center justify-center bg-gradient-to-br from-[#00CED1]/10 to-transparent">
<User className="w-8 h-8 text-white/30" />
</div>
<div>
<button onClick={() => setShowAuthModal(true)} className="text-[#00CED1] font-medium text-lg">
<div className="flex-1">
<button onClick={() => setShowAuthModal(true)} className="text-[#00CED1] font-semibold text-lg">
</button>
<p className="text-white/30 text-sm">ID: ---</p>
<p className="text-white/30 text-sm"></p>
</div>
<div className="px-3 py-1 rounded-full bg-[#00CED1]/20 border border-[#00CED1]/30">
<span className="text-[#00CED1] text-xs">VIP</span>
</div>
</div>
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-white/10">
<div className="text-center">
{/* 个性化数据 */}
<div className="grid grid-cols-3 gap-2 pt-4 border-t border-white/10">
<div className="text-center p-2 rounded-lg bg-white/5">
<p className="text-[#00CED1] text-xl font-bold">0</p>
<p className="text-white/40 text-xs"></p>
<p className="text-white/40 text-xs"></p>
</div>
<div className="text-center">
<div className="text-center p-2 rounded-lg bg-white/5">
<p className="text-[#00CED1] text-xl font-bold">0</p>
<p className="text-white/40 text-xs">()</p>
<p className="text-white/40 text-xs"></p>
</div>
<div className="text-center">
<div className="text-center p-2 rounded-lg bg-white/5">
<p className="text-[#00CED1] text-xl font-bold">0</p>
<p className="text-white/40 text-xs"></p>
</div>
</div>
</div>
{/* 关于作者入口 */}
<div className="mx-4 mt-4 p-4 rounded-2xl bg-gradient-to-r from-[#00CED1]/10 to-transparent border border-[#00CED1]/20">
<div className="flex items-center gap-4">
<div className="w-14 h-14 rounded-full bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center text-xl font-bold text-white">
{authorInfo.name.charAt(0)}
</div>
<div className="flex-1">
<h3 className="text-white font-semibold">{authorInfo.name}</h3>
<p className="text-gray-400 text-sm">{authorInfo.description}</p>
<div className="flex items-center gap-3 mt-1">
<span className="flex items-center gap-1 text-[#00CED1] text-xs">
<Clock className="w-3 h-3" />
{authorInfo.liveTime}
</span>
<span className="text-gray-500 text-xs">{authorInfo.platform}</span>
</div>
</div>
<button
onClick={() => router.push("/about")}
className="px-3 py-2 rounded-lg bg-[#00CED1] text-black text-sm font-medium"
>
</button>
</div>
</div>
{/* 分销中心 */}
<div className="mx-4 mt-4 p-4 rounded-2xl bg-[#1c1c1e] border border-white/5">
{/* 收益中心 - 突出收益 */}
<div className="mx-4 mt-4 p-4 rounded-2xl bg-gradient-to-r from-[#FFD700]/10 via-[#1c1c1e] to-[#1c1c1e] border border-[#FFD700]/20">
<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 className="w-8 h-8 rounded-lg bg-[#FFD700]/20 flex items-center justify-center">
<TrendingUp className="w-4 h-4 text-[#FFD700]" />
</div>
<span className="text-white font-medium"></span>
</div>
<span className="text-[#00CED1] text-sm bg-[#00CED1]/10 px-2 py-1 rounded">佣金比例: 90%</span>
<span className="text-[#FFD700] text-sm bg-[#FFD700]/10 px-3 py-1 rounded-full">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>
<div className="bg-gradient-to-r from-[#FFD700]/5 to-transparent rounded-xl p-4 mb-4">
<p className="text-white/50 text-sm text-center mb-1"></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="flex justify-center gap-8 mt-3">
<div className="text-center">
<p className="text-white/50 text-xs"></p>
<p className="text-white/40 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/40 text-xs"></p>
<p className="text-white font-medium">¥0.00</p>
</div>
</div>
@@ -167,9 +158,10 @@ export default function MyPage() {
<div className="grid grid-cols-2 gap-3 mb-4">
<button
onClick={() => setShowAuthModal(true)}
className="py-3 rounded-xl bg-[#00CED1] text-white font-medium"
className="py-3 rounded-xl bg-gradient-to-r from-[#FFD700] to-[#FFA500] text-black font-medium flex items-center justify-center gap-2"
>
广
<Gift className="w-4 h-4" />
</button>
<button
onClick={() => setShowAuthModal(true)}
@@ -179,17 +171,17 @@ export default function MyPage() {
</button>
</div>
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-white/10">
<div className="grid grid-cols-3 gap-2 pt-4 border-t border-white/10">
<div className="text-center">
<p className="text-[#00CED1] text-xl font-bold">0</p>
<p className="text-[#FFD700] text-xl font-bold">0</p>
<p className="text-white/40 text-xs"></p>
</div>
<div className="text-center">
<p className="text-[#00CED1] text-xl font-bold">0</p>
<p className="text-[#FFD700] text-xl font-bold">0</p>
<p className="text-white/40 text-xs"></p>
</div>
<div className="text-center">
<p className="text-[#00CED1] text-xl font-bold">90%</p>
<p className="text-[#FFD700] text-xl font-bold">90%</p>
<p className="text-white/40 text-xs"></p>
</div>
</div>
@@ -198,7 +190,7 @@ export default function MyPage() {
<div className="flex items-center justify-between">
<div>
<p className="text-white/50 text-xs"></p>
<p className="text-[#00CED1] font-mono text-lg">- - -</p>
<p className="text-[#FFD700] font-mono text-lg">- - -</p>
</div>
<button
onClick={() => setShowAuthModal(true)}
@@ -224,7 +216,7 @@ export default function MyPage() {
</button>
<button
onClick={() => setShowAuthModal(true)}
className="w-full flex items-center justify-between p-4 active:bg-white/5"
className="w-full 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>
@@ -232,6 +224,19 @@ export default function MyPage() {
</div>
<ChevronRight className="w-5 h-5 text-white/30" />
</button>
{/* 关于作者 - 小图标入口 */}
<button
onClick={() => router.push("/about")}
className="w-full flex items-center justify-between p-4 active:bg-white/5"
>
<div className="flex items-center gap-3">
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center">
<Info className="w-3 h-3 text-white" />
</div>
<span className="text-white"></span>
</div>
<ChevronRight className="w-5 h-5 text-white/30" />
</button>
</div>
<BottomNavBar />
@@ -250,79 +255,63 @@ export default function MyPage() {
<h1 className="text-lg font-medium text-[#00CED1]"></h1>
</div>
<div className="mx-4 mt-4 p-4 rounded-2xl bg-[#1c1c1e] border border-[#00CED1]/20">
{/* 用户卡片 - 突出个性化 */}
<div className="mx-4 mt-4 p-4 rounded-2xl bg-gradient-to-br from-[#1c1c1e] to-[#2c2c2e] border border-[#00CED1]/20">
<div className="flex items-center gap-3 mb-4">
<div className="w-14 h-14 rounded-full border-2 border-[#00CED1] flex items-center justify-center bg-gradient-to-br from-[#00CED1]/20 to-transparent">
<User className="w-7 h-7 text-[#00CED1]" />
<div className="w-16 h-16 rounded-full border-2 border-[#00CED1] flex items-center justify-center bg-gradient-to-br from-[#00CED1]/20 to-transparent">
<span className="text-2xl font-bold text-[#00CED1]">{user?.nickname?.charAt(0) || "U"}</span>
</div>
<div>
<p className="text-white font-medium text-lg">{user?.nickname || "用户"}</p>
<div className="flex-1">
<p className="text-white font-semibold text-lg">{user?.nickname || "用户"}</p>
<p className="text-white/30 text-sm">ID: {user?.id?.slice(-8) || "---"}</p>
</div>
<div className="px-3 py-1 rounded-full bg-[#00CED1]/20 border border-[#00CED1]/30">
<span className="text-[#00CED1] text-xs flex items-center gap-1">
<Star className="w-3 h-3" />
VIP
</span>
</div>
</div>
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-white/10">
<div className="text-center">
{/* 个性化数据 */}
<div className="grid grid-cols-3 gap-2 pt-4 border-t border-white/10">
<div className="text-center p-2 rounded-lg bg-white/5">
<p className="text-[#00CED1] text-xl font-bold">{purchasedCount}</p>
<p className="text-white/40 text-xs"></p>
<p className="text-white/40 text-xs"></p>
</div>
<div className="text-center">
<div className="text-center p-2 rounded-lg bg-white/5">
<p className="text-[#00CED1] text-xl font-bold">{readingMinutes}</p>
<p className="text-white/40 text-xs">()</p>
<p className="text-white/40 text-xs">()</p>
</div>
<div className="text-center">
<div className="text-center p-2 rounded-lg bg-white/5">
<p className="text-[#00CED1] 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-gradient-to-r from-[#00CED1]/10 to-transparent border border-[#00CED1]/20">
<div className="flex items-center gap-4">
<div className="w-14 h-14 rounded-full bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center text-xl font-bold text-white">
{authorInfo.name.charAt(0)}
</div>
<div className="flex-1">
<h3 className="text-white font-semibold">{authorInfo.name}</h3>
<p className="text-gray-400 text-sm">{authorInfo.description}</p>
<div className="flex items-center gap-3 mt-1">
<span className="flex items-center gap-1 text-[#00CED1] text-xs">
<Clock className="w-3 h-3" />
{authorInfo.liveTime}
</span>
<span className="text-gray-500 text-xs">{authorInfo.platform}</span>
</div>
</div>
<button
onClick={() => router.push("/about")}
className="px-3 py-2 rounded-lg bg-[#00CED1] text-black text-sm font-medium"
>
</button>
</div>
</div>
{/* 分销中心 */}
<div className="mx-4 mt-4 p-4 rounded-2xl bg-[#1c1c1e] border border-white/5">
{/* 收益中心 - 突出收益 */}
<div className="mx-4 mt-4 p-4 rounded-2xl bg-gradient-to-r from-[#FFD700]/10 via-[#1c1c1e] to-[#1c1c1e] border border-[#FFD700]/20">
<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 className="w-8 h-8 rounded-lg bg-[#FFD700]/20 flex items-center justify-center">
<TrendingUp className="w-4 h-4 text-[#FFD700]" />
</div>
<span className="text-white font-medium"></span>
</div>
<span className="text-[#00CED1] text-sm bg-[#00CED1]/10 px-2 py-1 rounded">佣金比例: 90%</span>
<span className="text-[#FFD700] text-sm bg-[#FFD700]/10 px-3 py-1 rounded-full">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>
<div className="bg-gradient-to-r from-[#FFD700]/5 to-transparent rounded-xl p-4 mb-4">
<p className="text-white/50 text-sm text-center mb-1"></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="flex justify-center gap-8 mt-3">
<div className="text-center">
<p className="text-white/50 text-xs"></p>
<p className="text-white/40 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/40 text-xs"></p>
<p className="text-white font-medium">¥{(user?.withdrawnEarnings || 0).toFixed(2)}</p>
</div>
</div>
@@ -331,9 +320,10 @@ export default function MyPage() {
<div className="grid grid-cols-2 gap-3 mb-4">
<button
onClick={() => router.push("/my/referral")}
className="py-3 rounded-xl bg-[#00CED1] text-white font-medium"
className="py-3 rounded-xl bg-gradient-to-r from-[#FFD700] to-[#FFA500] text-black font-medium flex items-center justify-center gap-2"
>
广
<Gift className="w-4 h-4" />
</button>
<button
onClick={() => router.push("/my/referral")}
@@ -343,17 +333,17 @@ export default function MyPage() {
</button>
</div>
<div className="grid grid-cols-3 gap-4 pt-4 border-t border-white/10">
<div className="grid grid-cols-3 gap-2 pt-4 border-t border-white/10">
<div className="text-center">
<p className="text-[#00CED1] text-xl font-bold">{user?.referralCount || 0}</p>
<p className="text-[#FFD700] text-xl font-bold">{user?.referralCount || 0}</p>
<p className="text-white/40 text-xs"></p>
</div>
<div className="text-center">
<p className="text-[#00CED1] text-xl font-bold">{completedOrders}</p>
<p className="text-[#FFD700] text-xl font-bold">{completedOrders}</p>
<p className="text-white/40 text-xs"></p>
</div>
<div className="text-center">
<p className="text-[#00CED1] text-xl font-bold">90%</p>
<p className="text-[#FFD700] text-xl font-bold">90%</p>
<p className="text-white/40 text-xs"></p>
</div>
</div>
@@ -362,7 +352,7 @@ export default function MyPage() {
<div className="flex items-center justify-between">
<div>
<p className="text-white/50 text-xs"></p>
<p className="text-[#00CED1] font-mono text-lg">{user?.referralCode || "---"}</p>
<p className="text-[#FFD700] font-mono text-lg">{user?.referralCode || "---"}</p>
</div>
<button
onClick={handleCopyCode}
@@ -389,7 +379,7 @@ export default function MyPage() {
</button>
<button
onClick={() => router.push("/my/bookmarks")}
className="w-full flex items-center justify-between p-4 active:bg-white/5"
className="w-full 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>
@@ -397,6 +387,19 @@ export default function MyPage() {
</div>
<ChevronRight className="w-5 h-5 text-white/30" />
</button>
{/* 关于作者 - 小图标入口 */}
<button
onClick={() => router.push("/about")}
className="w-full flex items-center justify-between p-4 active:bg-white/5"
>
<div className="flex items-center gap-3">
<div className="w-6 h-6 rounded-full bg-gradient-to-br from-[#00CED1] to-[#20B2AA] flex items-center justify-center">
<Info className="w-3 h-3 text-white" />
</div>
<span className="text-white"></span>
</div>
<ChevronRight className="w-5 h-5 text-white/30" />
</button>
</div>
<div className="mx-4 mt-4">