forked from 77media/video-flow
再调整样式和
This commit is contained in:
海龙
parent
21a8759bb6
commit
031cfb7928
@ -69,8 +69,8 @@ export function TopBar({
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const currentUser = localStorage.getItem("currentUser");
|
||||
if (JSON.parse(currentUser || "{}")?.token) {
|
||||
const token = localStorage.getItem("token");
|
||||
if (token) {
|
||||
setIsLogin(true);
|
||||
} else {
|
||||
setIsLogin(false);
|
||||
@ -198,167 +198,186 @@ export function TopBar({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
{/* Pricing Link */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
localStorage.setItem("callBackUrl", pathname);
|
||||
window.open("/pricing", "_blank");
|
||||
}}
|
||||
className="text-gray-300 hover:text-white"
|
||||
>
|
||||
Pricing
|
||||
</Button>
|
||||
|
||||
{/* Notifications */}
|
||||
{/* <Button variant="ghost" size="sm" onClick={() => showQueueNotification(3, 10)}>
|
||||
<Bell className="h-4 w-4" />
|
||||
</Button> */}
|
||||
|
||||
{/* Theme Toggle */}
|
||||
{/* <Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
>
|
||||
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
</Button> */}
|
||||
|
||||
{/* User Menu */}
|
||||
<div className="relative" style={{ isolation: "isolate" }}>
|
||||
{
|
||||
isLogin ?(<div className="flex items-center space-x-4">
|
||||
{/* Pricing Link */}
|
||||
<Button
|
||||
ref={buttonRef}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
console.log("Button clicked, current isOpen:", isOpen);
|
||||
if (!isOpen) {
|
||||
// 每次打开菜单时重新获取订阅信息
|
||||
fetchSubscriptionInfo();
|
||||
}
|
||||
setIsOpen(!isOpen);
|
||||
localStorage.setItem("callBackUrl", pathname);
|
||||
window.open("/pricing", "_blank");
|
||||
}}
|
||||
data-alt="user-menu-trigger"
|
||||
className="text-gray-300 hover:text-white"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
Pricing
|
||||
</Button>
|
||||
|
||||
{mounted && isOpen
|
||||
? ReactDOM.createPortal(
|
||||
<motion.div
|
||||
ref={menuRef}
|
||||
initial={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "4rem",
|
||||
right: "1rem",
|
||||
width: "18rem",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
className="bg-[#1E1E1E] rounded-lg shadow-lg overflow-hidden"
|
||||
data-alt="user-menu-dropdown"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* User Info */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-semibold">
|
||||
MF
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">
|
||||
{currentUser.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{currentUser.email}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:text-red-400 transition-colors duration-200"
|
||||
onClick={() => {
|
||||
logoutUser();
|
||||
}}
|
||||
title="退出登录"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Notifications */}
|
||||
{/* <Button variant="ghost" size="sm" onClick={() => showQueueNotification(3, 10)}>
|
||||
<Bell className="h-4 w-4" />
|
||||
</Button> */}
|
||||
|
||||
{/* AI Points */}
|
||||
<div className="px-4 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
<span className="text-white underline text-sm">
|
||||
{isLoadingSubscription ? '...' : `${credits} credits`}
|
||||
</span>
|
||||
{/* Theme Toggle */}
|
||||
{/* <Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||
>
|
||||
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||
</Button> */}
|
||||
|
||||
{/* User Menu */}
|
||||
<div className="relative" style={{ isolation: "isolate" }}>
|
||||
<Button
|
||||
ref={buttonRef}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
console.log("Button clicked, current isOpen:", isOpen);
|
||||
if (!isOpen) {
|
||||
// 每次打开菜单时重新获取订阅信息
|
||||
fetchSubscriptionInfo();
|
||||
}
|
||||
setIsOpen(!isOpen);
|
||||
}}
|
||||
data-alt="user-menu-trigger"
|
||||
>
|
||||
<User className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{mounted && isOpen
|
||||
? ReactDOM.createPortal(
|
||||
<motion.div
|
||||
ref={menuRef}
|
||||
initial={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: -20 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
style={{
|
||||
position: "fixed",
|
||||
top: "4rem",
|
||||
right: "1rem",
|
||||
width: "18rem",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
className="bg-[#1E1E1E] rounded-lg shadow-lg overflow-hidden"
|
||||
data-alt="user-menu-dropdown"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* User Info */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-semibold">
|
||||
MF
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">
|
||||
{currentUser.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">
|
||||
{currentUser.email}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="cursor-pointer hover:text-red-400 transition-colors duration-200"
|
||||
onClick={() => {
|
||||
logoutUser();
|
||||
}}
|
||||
title="退出登录"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-white border-white hover:bg-white/10 rounded-full px-3 py-1 text-[10px]"
|
||||
onClick={() => {
|
||||
window.open("/pricing", "_blank");
|
||||
}}
|
||||
>
|
||||
Upgrade
|
||||
</Button>
|
||||
{subscriptionStatus === 'ACTIVE' && (
|
||||
|
||||
{/* AI Points */}
|
||||
<div className="px-4 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
<span className="text-white underline text-sm">
|
||||
{isLoadingSubscription ? '...' : `${credits} credits`}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-white border-white hover:bg-white/10 rounded-full px-3 py-1 text-[10px]"
|
||||
onClick={handleManageSubscription}
|
||||
disabled={isManagingSubscription}
|
||||
onClick={() => {
|
||||
window.open("/pricing", "_blank");
|
||||
}}
|
||||
>
|
||||
Manage
|
||||
Upgrade
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="p-2">
|
||||
{/* <motion.button
|
||||
whileHover={{ backgroundColor: 'rgba(255,255,255,0.1)' }}
|
||||
className="w-full flex items-center space-x-2 px-3 py-2 rounded-md text-sm text-white"
|
||||
onClick={() => router.push('/my-library')}
|
||||
data-alt="my-library-button"
|
||||
>
|
||||
<Library className="h-4 w-4" />
|
||||
<span>My Library</span>
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ backgroundColor: 'rgba(255,255,255,0.1)' }}
|
||||
className="w-full flex items-center space-x-2 px-3 py-2 rounded-md text-sm text-white"
|
||||
onClick={() => {
|
||||
// 处理退出登录
|
||||
setIsOpen(false);
|
||||
}}
|
||||
data-alt="logout-button"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
<span>Logout</span>
|
||||
</motion.button> */}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-4 px-3 py-2 text-xs text-gray-400 text-center">
|
||||
<div>Privacy Policy · Terms of Service</div>
|
||||
<div>250819215404 | 2025/8/20 06:00:50</div>
|
||||
{subscriptionStatus === 'ACTIVE' && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-white border-white hover:bg-white/10 rounded-full px-3 py-1 text-[10px]"
|
||||
onClick={handleManageSubscription}
|
||||
disabled={isManagingSubscription}
|
||||
>
|
||||
Manage
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>,
|
||||
document.body
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<div className="p-2">
|
||||
{/* <motion.button
|
||||
whileHover={{ backgroundColor: 'rgba(255,255,255,0.1)' }}
|
||||
className="w-full flex items-center space-x-2 px-3 py-2 rounded-md text-sm text-white"
|
||||
onClick={() => router.push('/my-library')}
|
||||
data-alt="my-library-button"
|
||||
>
|
||||
<Library className="h-4 w-4" />
|
||||
<span>My Library</span>
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ backgroundColor: 'rgba(255,255,255,0.1)' }}
|
||||
className="w-full flex items-center space-x-2 px-3 py-2 rounded-md text-sm text-white"
|
||||
onClick={() => {
|
||||
// 处理退出登录
|
||||
setIsOpen(false);
|
||||
}}
|
||||
data-alt="logout-button"
|
||||
>
|
||||
<LogOut className="h-4 w-4" />
|
||||
<span>Logout</span>
|
||||
</motion.button> */}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="mt-4 px-3 py-2 text-xs text-gray-400 text-center">
|
||||
<div>Privacy Policy · Terms of Service</div>
|
||||
<div>250819215404 | 2025/8/20 06:00:50</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>,
|
||||
document.body
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
</div>):(
|
||||
<div className="flex items-center space-x-4">
|
||||
<button
|
||||
data-alt="login-button"
|
||||
className="w-[8.5rem] h-[3rem] text-base text-gray-300 hover:text-white transition-colors"
|
||||
onClick={() => router.push("/login")}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
<button
|
||||
data-alt="signup-button"
|
||||
className="w-[8.5rem] h-[3rem] text-base bg-gray-200 text-gray-800 rounded-full hover:bg-white transition-colors"
|
||||
onClick={() => router.push("/signup")}
|
||||
>
|
||||
Sign Up
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -642,7 +642,7 @@ function HomeModule5() {
|
||||
: "text-white hover:text-gray-300"
|
||||
}`}
|
||||
>
|
||||
Yearly - <span className="text-[#FFCC6D]">10%</span>
|
||||
Yearly - <span className="text-[#FFCC6D]">20%</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -51,7 +51,7 @@ export default function Login() {
|
||||
try {
|
||||
await loginUser(email, password);
|
||||
// 登录成功后跳转到首页
|
||||
router.push("/");
|
||||
router.push("/create");
|
||||
} catch (error: any) {
|
||||
console.error("Login failed:", error);
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user