feat: 首页添加用户登录状态指示器
- 已登录:右上角显示头像 + 用户名,点击进入个人中心 - 未登录:右上角显示"登录"按钮,点击弹出注册/登录弹窗
This commit is contained in:
+49
-1
@@ -1,12 +1,27 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect, useCallback } from "react";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { Zap, Gift, Clock, ChevronRight } from "lucide-react";
|
import { Zap, Gift, Clock, ChevronRight, User } from "lucide-react";
|
||||||
import BrandLogo from "@/components/BrandLogo";
|
import BrandLogo from "@/components/BrandLogo";
|
||||||
|
import { getCachedProfile } from "@/lib/userId";
|
||||||
|
import AuthModal from "@/components/AuthModal";
|
||||||
|
import type { UserProfile } from "@/types";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const [profile, setProfile] = useState<UserProfile | null>(null);
|
||||||
|
const [showAuth, setShowAuth] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setProfile(getCachedProfile());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleAuth = useCallback((p: UserProfile) => {
|
||||||
|
setProfile(p);
|
||||||
|
setShowAuth(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-10 overflow-y-auto scrollbar-none">
|
<div className="relative flex min-h-dvh flex-col items-center bg-background px-5 py-10 overflow-y-auto scrollbar-none">
|
||||||
@@ -14,6 +29,32 @@ export default function LandingPage() {
|
|||||||
<div className="pointer-events-none fixed left-1/2 top-0 -translate-x-1/2 -translate-y-1/3 h-[420px] w-[420px] rounded-full bg-orange-500/8 blur-3xl" />
|
<div className="pointer-events-none fixed left-1/2 top-0 -translate-x-1/2 -translate-y-1/3 h-[420px] w-[420px] rounded-full bg-orange-500/8 blur-3xl" />
|
||||||
<div className="pointer-events-none fixed left-1/4 top-1/2 h-[300px] w-[300px] rounded-full bg-purple-500/5 blur-3xl" />
|
<div className="pointer-events-none fixed left-1/4 top-1/2 h-[300px] w-[300px] rounded-full bg-purple-500/5 blur-3xl" />
|
||||||
|
|
||||||
|
{/* User indicator */}
|
||||||
|
<motion.div
|
||||||
|
className="mb-4 flex w-full max-w-sm justify-end"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ delay: 0.1 }}
|
||||||
|
>
|
||||||
|
{profile ? (
|
||||||
|
<button
|
||||||
|
onClick={() => router.push("/profile")}
|
||||||
|
className="flex items-center gap-2 rounded-full bg-surface/80 px-3 py-1.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated"
|
||||||
|
>
|
||||||
|
<span className="text-sm">{profile.avatar}</span>
|
||||||
|
<span className="text-xs font-semibold text-gray-300">{profile.username}</span>
|
||||||
|
</button>
|
||||||
|
) : (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowAuth(true)}
|
||||||
|
className="flex items-center gap-1.5 rounded-full bg-surface/80 px-3 py-1.5 text-xs font-medium text-muted ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated hover:text-gray-300"
|
||||||
|
>
|
||||||
|
<User size={13} />
|
||||||
|
登录
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<motion.div
|
<motion.div
|
||||||
className="flex flex-col items-center gap-4"
|
className="flex flex-col items-center gap-4"
|
||||||
@@ -147,6 +188,13 @@ export default function LandingPage() {
|
|||||||
>
|
>
|
||||||
NOWHATEVER — 拒绝随便,从今天开始
|
NOWHATEVER — 拒绝随便,从今天开始
|
||||||
</motion.p>
|
</motion.p>
|
||||||
|
|
||||||
|
<AuthModal
|
||||||
|
open={showAuth}
|
||||||
|
onClose={() => setShowAuth(false)}
|
||||||
|
onAuth={handleAuth}
|
||||||
|
defaultTab="register"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user