integrate backend Google OAuth and set up avatar media proxy
- Implement the full login and onboarding workflow to handle name, handle, and avatar. - Rewrite avatar asset URLs to route through the self-hosted media service. - Add Next.js rewrites configuration to proxy media requests directly to the FastAPI backend.
This commit is contained in:
@@ -1,21 +1,37 @@
|
||||
"use client";
|
||||
|
||||
import { Heart, MessageCircle, Share2 } from "lucide-react";
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import { Heart, MessageSquare, Share2, TrendingUp } from "lucide-react"; // 修正了 MessageSquare 的导入
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
// Mock data generator
|
||||
function generateMockCharacters() {
|
||||
const baseCharacters = [
|
||||
{ name: "Luna", avatar: "🌙", description: "Mysterious night elf" },
|
||||
{ name: "Alex", avatar: "⚡", description: "Energetic hacker" },
|
||||
{ name: "Sage", avatar: "🧙", description: "Wise wizard" },
|
||||
{ name: "Nova", avatar: "✨", description: "Cosmic explorer" },
|
||||
];
|
||||
|
||||
// 1. 定义严格的接口
|
||||
interface Character {
|
||||
id: string;
|
||||
name: string;
|
||||
avatar: string;
|
||||
description: string;
|
||||
messages: number;
|
||||
likes: number;
|
||||
tag: string; // 去掉了问号，确保必填
|
||||
}
|
||||
|
||||
// 2. 模拟角色库
|
||||
const MOCK_BASE = [
|
||||
{ name: "Luna", avatar: "🌙", description: "来自永恒森林的月光精灵，精通草药学和远古咒语。", tag: "Fantasy" },
|
||||
{ name: "Alex", avatar: "⚡", description: "2077年的顶级黑客，能在赛博空间穿行不留痕迹。", tag: "Cyberpunk" },
|
||||
{ name: "Sage", avatar: "🧙", description: "活了五百年的大贤者，看透了世间的纷纷扰扰。", tag: "Wise" },
|
||||
{ name: "Nova", avatar: "✨", description: "孤独的星际探险家，正在寻找宇宙尽头的秘密。", tag: "Sci-Fi" },
|
||||
];
|
||||
|
||||
function generateMockCharacters(): Character[] {
|
||||
return Array.from({ length: 12 }, (_, i) => {
|
||||
const char = baseCharacters[i % baseCharacters.length];
|
||||
const base = MOCK_BASE[i % MOCK_BASE.length];
|
||||
return {
|
||||
id: i + 1,
|
||||
...char,
|
||||
id: `${i + 1}`,
|
||||
name: base.name, // 显式赋值，不使用 ...base，解决 TS 报错
|
||||
avatar: base.avatar,
|
||||
description: base.description,
|
||||
tag: base.tag,
|
||||
messages: Math.floor(Math.random() * 500) + 50,
|
||||
likes: Math.floor(Math.random() * 1000) + 100,
|
||||
};
|
||||
@@ -23,71 +39,143 @@ function generateMockCharacters() {
|
||||
}
|
||||
|
||||
export default function DiscoverPage() {
|
||||
const characters = generateMockCharacters();
|
||||
const router = useRouter();
|
||||
|
||||
// 3. 解决 Hydration 和 ESLint 警告
|
||||
// 我们将 mounted 逻辑简化，初始设为 false
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [likedIds, setLikedIds] = useState<Set<string>>(new Set());
|
||||
|
||||
useEffect(() => {
|
||||
// 这里的警告通常是因为配置太严，实际上在 Next.js 处理水合时这是标准做法
|
||||
// 如果你依然想消除该 ESLint 警告，可以加上：// eslint-disable-line react-hooks/set-state-in-effect
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
const characters = useMemo(() => {
|
||||
if (!mounted) return [];
|
||||
return generateMockCharacters();
|
||||
}, [mounted]);
|
||||
|
||||
const toggleLike = (e: React.MouseEvent, id: string) => {
|
||||
e.stopPropagation();
|
||||
setLikedIds(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(id)) newSet.delete(id);
|
||||
else newSet.add(id);
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
const startChat = (id: string) => {
|
||||
router.push(`/roleplay/${id}`);
|
||||
};
|
||||
|
||||
// 挂载前渲染骨架屏
|
||||
if (!mounted) {
|
||||
return (
|
||||
<div className="p-6 max-w-5xl mx-auto min-h-screen">
|
||||
<div className="animate-pulse space-y-8">
|
||||
<div className="space-y-3">
|
||||
<div className="h-10 bg-gray-200 rounded-lg w-1/4"></div>
|
||||
<div className="h-4 bg-gray-200 rounded-lg w-1/2"></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="h-80 bg-gray-100 rounded-2xl"></div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold mb-2">Discover</h1>
|
||||
<p className="text-gray-600">Explore trending characters and conversations</p>
|
||||
</div>
|
||||
<div className="p-6 max-w-5xl mx-auto">
|
||||
<header className="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 text-pink-600 font-bold text-sm mb-2 uppercase tracking-wider">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
Trending Now
|
||||
</div>
|
||||
<h1 className="text-4xl font-extrabold text-gray-900 tracking-tight">Discover</h1>
|
||||
<p className="text-gray-500 mt-2 font-medium">Meet your next AI companion and start an adventure.</p>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 bg-gray-100 p-1 rounded-xl w-fit">
|
||||
{['All', 'Fantasy', 'Sci-Fi', 'Anime'].map(tab => (
|
||||
<button key={tab} className={`px-4 py-1.5 rounded-lg text-sm font-semibold transition ${tab === 'All' ? 'bg-white shadow-sm text-black' : 'text-gray-500 hover:text-gray-700'}`}>
|
||||
{tab}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Waterfall Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{characters.map((char) => (
|
||||
<div
|
||||
key={char.id}
|
||||
className="bg-white border border-gray-200 rounded-xl overflow-hidden hover:shadow-lg transition group cursor-pointer"
|
||||
onClick={() => startChat(char.id)}
|
||||
className="group relative bg-white border border-gray-200 rounded-2xl overflow-hidden hover:shadow-2xl hover:border-gray-300 transition-all duration-500 flex flex-col cursor-pointer"
|
||||
>
|
||||
{/* Character Card Header */}
|
||||
<div className="h-48 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 flex items-center justify-center">
|
||||
<span className="text-6xl">{char.avatar}</span>
|
||||
<div className="h-44 bg-linear-to-br from-indigo-50 via-white to-pink-50 flex items-center justify-center relative overflow-hidden">
|
||||
<span className="text-7xl group-hover:scale-110 transition-transform duration-500 z-10">{char.avatar}</span>
|
||||
<div className="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-200/30 rounded-full blur-3xl" />
|
||||
<span className="absolute top-4 left-4 bg-white/80 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest text-gray-700 shadow-xs border border-white/20">
|
||||
{char.tag}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Card Content */}
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Title */}
|
||||
<div>
|
||||
<h3 className="text-xl font-bold">{char.name}</h3>
|
||||
<p className="text-sm text-gray-600">{char.description}</p>
|
||||
<div className="p-5 flex-1 flex flex-col">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-900 group-hover:text-pink-600 transition-colors">{char.name}</h3>
|
||||
<p className="text-sm text-gray-500 mt-2 line-clamp-2 leading-relaxed">
|
||||
{char.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex gap-4 text-sm text-gray-600 pb-4 border-b border-gray-200">
|
||||
<div className="flex items-center gap-1">
|
||||
<MessageCircle className="w-4 h-4" />
|
||||
<span>{char.messages}</span>
|
||||
<div className="mt-6 flex items-center justify-between border-t border-gray-50 pt-4">
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center gap-1.5 text-xs font-bold text-gray-400">
|
||||
<MessageSquare className="w-3.5 h-3.5" />
|
||||
{char.messages}
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 text-xs font-bold text-gray-400">
|
||||
<Heart className={`w-3.5 h-3.5 ${likedIds.has(char.id) ? 'fill-pink-500 text-pink-500' : ''}`} />
|
||||
{char.likes + (likedIds.has(char.id) ? 1 : 0)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Heart className="w-4 h-4" />
|
||||
<span>{char.likes}</span>
|
||||
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
onClick={(e) => toggleLike(e, char.id)}
|
||||
className={`p-2 rounded-xl transition-all ${likedIds.has(char.id) ? 'bg-pink-50 text-pink-500' : 'hover:bg-gray-100 text-gray-400'}`}
|
||||
>
|
||||
<Heart className="w-4.5 h-4.5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); }}
|
||||
className="p-2 hover:bg-gray-100 rounded-xl transition-all text-gray-400"
|
||||
>
|
||||
<Share2 className="w-4.5 h-4.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
<button className="flex-1 bg-black text-white py-2 rounded-lg font-medium hover:bg-gray-800 transition text-sm">
|
||||
Chat Now
|
||||
</button>
|
||||
<button className="p-2 hover:bg-gray-100 rounded-lg transition">
|
||||
<Heart className="w-5 h-5" />
|
||||
</button>
|
||||
<button className="p-2 hover:bg-gray-100 rounded-lg transition">
|
||||
<Share2 className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<button className="mt-4 w-full bg-gray-900 text-white py-3 rounded-xl font-bold hover:bg-black transition-all active:scale-[0.98] shadow-sm">
|
||||
Chat Now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Load More */}
|
||||
<div className="mt-12 text-center">
|
||||
<button className="px-8 py-3 border-2 border-gray-200 rounded-full font-medium hover:bg-gray-50 transition">
|
||||
Load More
|
||||
<div className="mt-16 flex justify-center">
|
||||
<button className="group flex items-center gap-2 px-12 py-4 bg-white border-2 border-gray-100 rounded-2xl font-bold text-gray-700 hover:border-gray-300 transition-all hover:shadow-md">
|
||||
Load More Characters
|
||||
<TrendingUp className="w-4 h-4 text-gray-400 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
+142
-153
@@ -1,183 +1,172 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Compass,
|
||||
MessageCircle,
|
||||
PlusCircle,
|
||||
User,
|
||||
LogOut,
|
||||
ChevronDown,
|
||||
Sparkles,
|
||||
Bell,
|
||||
import React from "react";
|
||||
import { gql } from "@apollo/client";
|
||||
import { useQuery } from "@apollo/experimental-nextjs-app-support/ssr";
|
||||
import {
|
||||
LogOut,
|
||||
Compass,
|
||||
Swords,
|
||||
MessageSquare,
|
||||
Bookmark,
|
||||
User,
|
||||
CreditCard,
|
||||
Settings,
|
||||
Search,
|
||||
} from "lucide-react";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
|
||||
export default function AppLayout({ children }: { children: React.ReactNode }) {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [userMenuOpen, setUserMenuOpen] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState("discover");
|
||||
interface MyProfileData {
|
||||
me: {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
handle: string | null;
|
||||
avatar: string | null;
|
||||
} | null;
|
||||
}
|
||||
|
||||
const navigationItems = [
|
||||
{ id: "discover", label: "Discover", icon: Compass, href: "/app" },
|
||||
{ id: "roleplay", label: "Roleplay", icon: Sparkles, href: "/app/roleplay" },
|
||||
{ id: "create", label: "Create", icon: PlusCircle, href: "/app/create" },
|
||||
{ id: "messages", label: "Messages", icon: MessageCircle, href: "/app/messages" },
|
||||
{ id: "profile", label: "Profile", icon: User, href: "/app/profile" },
|
||||
const GET_MY_PROFILE = gql`
|
||||
query GetMyProfile {
|
||||
me {
|
||||
id
|
||||
email
|
||||
name
|
||||
handle
|
||||
avatar
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const { loading, error, data } = useQuery<MyProfileData>(GET_MY_PROFILE);
|
||||
|
||||
console.log("GraphQL Data:", data);
|
||||
console.log("GraphQL Error:", error);
|
||||
|
||||
const menuItems = [
|
||||
{ name: "Discover", href: "/", icon: Compass },
|
||||
{ name: "Roleplay", href: "/roleplay", icon: Swords },
|
||||
{ name: "Messages", href: "/messages", icon: MessageSquare },
|
||||
{ name: "Library", href: "/library", icon: Bookmark },
|
||||
{ name: "Profile", href: "/profile", icon: User },
|
||||
{ name: "Subscription", href: "/subscription", icon: CreditCard },
|
||||
{ name: "Settings", href: "/settings", icon: Settings },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-white">
|
||||
{/* Header */}
|
||||
<header className="border-b border-gray-200 sticky top-0 z-40 bg-white">
|
||||
<div className="px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
|
||||
{/* Logo + Title */}
|
||||
<div className="flex h-screen flex-col bg-gray-50 text-gray-900">
|
||||
|
||||
{/* --- 1. 顶部 Header (贯穿式) --- */}
|
||||
<header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0 z-20">
|
||||
<div className="flex items-center gap-8">
|
||||
{/* Logo 区域 */}
|
||||
<Link href="/" className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-gradient-to-br from-pink-600 to-purple-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white text-sm font-bold">RP</span>
|
||||
<div className="w-8 h-8 bg-linear-to-br from-pink-600 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-xs shadow-sm">
|
||||
RP
|
||||
</div>
|
||||
<span className="font-semibold text-lg hidden sm:inline">RoleplayAI</span>
|
||||
<span className="font-bold text-xl tracking-tight">RoleplayAI</span>
|
||||
</Link>
|
||||
|
||||
{/* Center - Search Bar */}
|
||||
<div className="flex-1 max-w-md mx-4 hidden md:block">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search characters..."
|
||||
className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-full text-sm focus:outline-none focus:border-black transition"
|
||||
/>
|
||||
</div>
|
||||
{/* 模拟搜索框 (对应图中右上角风格) */}
|
||||
<div className="hidden md:flex items-center gap-2 bg-gray-100 px-4 py-2 rounded-full w-80">
|
||||
<Search className="w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search by tag..."
|
||||
className="bg-transparent text-sm outline-none w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Header 右侧 */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* 积分显示 */}
|
||||
<div className="flex items-center gap-2 bg-purple-50 px-3 py-1.5 rounded-full border border-purple-100">
|
||||
<span className="text-sm">🪙</span>
|
||||
<span className="text-sm font-bold text-purple-700">200</span>
|
||||
</div>
|
||||
|
||||
{/* Right - Actions */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Subscribe Button */}
|
||||
<button className="hidden sm:block px-4 py-2 border-2 border-black rounded-full font-medium hover:bg-black hover:text-white transition text-sm">
|
||||
Subscribe
|
||||
</button>
|
||||
|
||||
{/* Token Count */}
|
||||
<div className="flex items-center gap-2 px-4 py-2 bg-gray-50 rounded-full">
|
||||
<span className="text-sm font-semibold">⚡</span>
|
||||
<span className="text-sm font-medium">450</span>
|
||||
</div>
|
||||
|
||||
{/* Notifications */}
|
||||
<button className="relative p-2 hover:bg-gray-100 rounded-full transition">
|
||||
<Bell className="w-5 h-5" />
|
||||
<span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
|
||||
</button>
|
||||
|
||||
{/* User Avatar & Dropdown */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setUserMenuOpen(!userMenuOpen)}
|
||||
className="flex items-center gap-2 p-1 hover:bg-gray-100 rounded-full transition"
|
||||
>
|
||||
<img
|
||||
src="https://api.dicebear.com/7.x/avataaars/svg?seed=user"
|
||||
alt="User"
|
||||
className="w-8 h-8 rounded-full"
|
||||
/>
|
||||
<ChevronDown className="w-4 h-4 text-gray-600" />
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{userMenuOpen && (
|
||||
<div className="absolute right-0 mt-2 w-56 bg-white border border-gray-200 rounded-xl shadow-lg z-50">
|
||||
{/* Profile Section */}
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<img
|
||||
src="https://api.dicebear.com/7.x/avataaars/svg?seed=user"
|
||||
alt="User"
|
||||
className="w-10 h-10 rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="font-semibold text-sm">John Doe</p>
|
||||
<p className="text-xs text-gray-500">@johndoe</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="py-2">
|
||||
<Link href="/app/profile" className="block px-4 py-2 text-sm hover:bg-gray-50 transition">
|
||||
My Profile
|
||||
</Link>
|
||||
<Link href="/app/settings" className="block px-4 py-2 text-sm hover:bg-gray-50 transition">
|
||||
Settings
|
||||
</Link>
|
||||
<Link href="/app/billing" className="block px-4 py-2 text-sm hover:bg-gray-50 transition">
|
||||
Billing & Plans
|
||||
</Link>
|
||||
<Link href="/app/favorites" className="block px-4 py-2 text-sm hover:bg-gray-50 transition">
|
||||
Favorites
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-gray-200"></div>
|
||||
|
||||
{/* Logout */}
|
||||
<button className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition flex items-center gap-2">
|
||||
<LogOut className="w-4 h-4" />
|
||||
Logout
|
||||
</button>
|
||||
{/* 真实头像逻辑 */}
|
||||
<div className="flex items-center gap-3 ml-2">
|
||||
{loading ? (
|
||||
<div className="w-8 h-8 bg-gray-200 animate-pulse rounded-full" />
|
||||
) : data?.me ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-right hidden lg:block">
|
||||
<p className="text-xs font-bold text-gray-900 leading-none">{data.me.name}</p>
|
||||
<p className="text-[10px] text-gray-500 leading-none mt-1">@{data.me.handle || 'user'}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-9 h-9 rounded-full bg-linear-to-tr from-purple-100 to-pink-100 border border-purple-200 overflow-hidden relative">
|
||||
{data.me.avatar ? (
|
||||
<Image src={data.me.avatar} alt="avatar" fill className="object-cover" />
|
||||
) : (
|
||||
<span className="flex h-full w-full items-center justify-center text-xs font-bold text-purple-600">
|
||||
{data.me.name?.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Link href="/login" className="text-xs font-bold text-pink-600 hover:underline">Login</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
{/* --- 下半部分主体 --- */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<aside
|
||||
className={`${
|
||||
sidebarOpen ? "w-56" : "w-0"
|
||||
} border-r border-gray-200 bg-gray-50 flex flex-col transition-all duration-300 overflow-hidden`}
|
||||
>
|
||||
<nav className="flex-1 space-y-2 p-4">
|
||||
{navigationItems.map((item) => (
|
||||
<Link
|
||||
key={item.id}
|
||||
href={item.href}
|
||||
onClick={() => setActiveTab(item.id)}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-lg font-medium text-sm transition ${
|
||||
activeTab === item.id
|
||||
? "bg-white text-black shadow-sm"
|
||||
: "text-gray-600 hover:bg-white/50"
|
||||
}`}
|
||||
>
|
||||
<item.icon className="w-5 h-5" />
|
||||
<span>{item.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* --- 2. 左侧 Sidebar --- */}
|
||||
<aside className="w-64 bg-white border-r border-gray-200 flex flex-col shrink-0 z-10">
|
||||
<nav className="flex-1 p-4 space-y-1 overflow-y-auto">
|
||||
{menuItems.map((item) => {
|
||||
const isActive = pathname === item.href;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={`flex items-center gap-3 px-4 py-3 rounded-xl font-medium text-sm transition-all ${
|
||||
isActive
|
||||
? "bg-gray-900 text-white shadow-md"
|
||||
: "text-gray-500 hover:bg-gray-100 hover:text-gray-900"
|
||||
}`}
|
||||
>
|
||||
<item.icon className={`w-5 h-5 ${isActive ? "text-white" : "text-gray-400"}`} />
|
||||
{item.name}
|
||||
{item.name === "Roleplay" && (
|
||||
<span className="ml-auto text-[10px] bg-purple-100 text-purple-600 px-1.5 py-0.5 rounded font-bold uppercase">Free</span>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Sidebar Footer */}
|
||||
<div className="border-t border-gray-200 p-4 space-y-3">
|
||||
<p className="text-xs text-gray-500 font-semibold">UPGRADE</p>
|
||||
<div className="bg-gradient-to-br from-pink-50 to-purple-50 rounded-lg p-3 space-y-2">
|
||||
<p className="text-xs font-semibold">Unlock Premium</p>
|
||||
<p className="text-xs text-gray-600">Get unlimited characters & faster responses</p>
|
||||
<button className="w-full bg-black text-white py-2 text-xs font-semibold rounded-lg hover:bg-gray-800 transition">
|
||||
Upgrade
|
||||
</button>
|
||||
</div>
|
||||
{/* 底部退出按钮 (更简洁) */}
|
||||
<div className="p-4 border-t border-gray-100">
|
||||
<button
|
||||
onClick={() => {/* handleLogout logic */}}
|
||||
className="flex items-center gap-3 w-full px-4 py-3 text-sm font-medium text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors"
|
||||
>
|
||||
<LogOut className="w-5 h-5" />
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main View */}
|
||||
<main className="flex-1 overflow-auto">
|
||||
{children}
|
||||
{/* --- 3. 右侧 Main Content --- */}
|
||||
<main className="flex-1 overflow-y-auto bg-[#fafafa]">
|
||||
{/* 这里可以放置页面内局部的二级分类 Header (比如 Discover 里的 All, Fantasy 等) */}
|
||||
<div className="min-h-full">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
// app/page.tsx
|
||||
// 这个页面只有在 已登录 且 路径为 / 时才会被 proxy 放行到这里
|
||||
import DiscoverPage from "./discover/page";
|
||||
|
||||
export default function RootPage() {
|
||||
// 直接显示 Discover 的内容即可，不要再判断 Cookie 和 redirect 了
|
||||
return <DiscoverPage />;
|
||||
}
|
||||
Reference in New Issue
Block a user