forked from 77media/video-flow
再调整样式和
This commit is contained in:
海龙
parent
21a8759bb6
commit
031cfb7928
@ -69,8 +69,8 @@ export function TopBar({
|
|||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const currentUser = localStorage.getItem("currentUser");
|
const token = localStorage.getItem("token");
|
||||||
if (JSON.parse(currentUser || "{}")?.token) {
|
if (token) {
|
||||||
setIsLogin(true);
|
setIsLogin(true);
|
||||||
} else {
|
} else {
|
||||||
setIsLogin(false);
|
setIsLogin(false);
|
||||||
@ -198,167 +198,186 @@ export function TopBar({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center space-x-4">
|
{
|
||||||
{/* Pricing Link */}
|
isLogin ?(<div className="flex items-center space-x-4">
|
||||||
<Button
|
{/* Pricing Link */}
|
||||||
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" }}>
|
|
||||||
<Button
|
<Button
|
||||||
ref={buttonRef}
|
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
console.log("Button clicked, current isOpen:", isOpen);
|
localStorage.setItem("callBackUrl", pathname);
|
||||||
if (!isOpen) {
|
window.open("/pricing", "_blank");
|
||||||
// 每次打开菜单时重新获取订阅信息
|
|
||||||
fetchSubscriptionInfo();
|
|
||||||
}
|
|
||||||
setIsOpen(!isOpen);
|
|
||||||
}}
|
}}
|
||||||
data-alt="user-menu-trigger"
|
className="text-gray-300 hover:text-white"
|
||||||
>
|
>
|
||||||
<User className="h-4 w-4" />
|
Pricing
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{mounted && isOpen
|
{/* Notifications */}
|
||||||
? ReactDOM.createPortal(
|
{/* <Button variant="ghost" size="sm" onClick={() => showQueueNotification(3, 10)}>
|
||||||
<motion.div
|
<Bell className="h-4 w-4" />
|
||||||
ref={menuRef}
|
</Button> */}
|
||||||
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>
|
|
||||||
|
|
||||||
{/* AI Points */}
|
{/* Theme Toggle */}
|
||||||
<div className="px-4 py-3 flex items-center justify-between">
|
{/* <Button
|
||||||
<div className="flex items-center space-x-2">
|
variant="ghost"
|
||||||
<Sparkles className="h-4 w-4" />
|
size="sm"
|
||||||
<span className="text-white underline text-sm">
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
||||||
{isLoadingSubscription ? '...' : `${credits} credits`}
|
>
|
||||||
</span>
|
<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>
|
</div>
|
||||||
<Button
|
|
||||||
variant="outline"
|
{/* AI Points */}
|
||||||
size="sm"
|
<div className="px-4 py-3 flex items-center justify-between">
|
||||||
className="text-white border-white hover:bg-white/10 rounded-full px-3 py-1 text-[10px]"
|
<div className="flex items-center space-x-2">
|
||||||
onClick={() => {
|
<Sparkles className="h-4 w-4" />
|
||||||
window.open("/pricing", "_blank");
|
<span className="text-white underline text-sm">
|
||||||
}}
|
{isLoadingSubscription ? '...' : `${credits} credits`}
|
||||||
>
|
</span>
|
||||||
Upgrade
|
</div>
|
||||||
</Button>
|
|
||||||
{subscriptionStatus === 'ACTIVE' && (
|
|
||||||
<Button
|
<Button
|
||||||
variant="outline"
|
variant="outline"
|
||||||
size="sm"
|
size="sm"
|
||||||
className="text-white border-white hover:bg-white/10 rounded-full px-3 py-1 text-[10px]"
|
className="text-white border-white hover:bg-white/10 rounded-full px-3 py-1 text-[10px]"
|
||||||
onClick={handleManageSubscription}
|
onClick={() => {
|
||||||
disabled={isManagingSubscription}
|
window.open("/pricing", "_blank");
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Manage
|
Upgrade
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
{subscriptionStatus === 'ACTIVE' && (
|
||||||
</div>
|
<Button
|
||||||
|
variant="outline"
|
||||||
{/* Menu Items */}
|
size="sm"
|
||||||
<div className="p-2">
|
className="text-white border-white hover:bg-white/10 rounded-full px-3 py-1 text-[10px]"
|
||||||
{/* <motion.button
|
onClick={handleManageSubscription}
|
||||||
whileHover={{ backgroundColor: 'rgba(255,255,255,0.1)' }}
|
disabled={isManagingSubscription}
|
||||||
className="w-full flex items-center space-x-2 px-3 py-2 rounded-md text-sm text-white"
|
>
|
||||||
onClick={() => router.push('/my-library')}
|
Manage
|
||||||
data-alt="my-library-button"
|
</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>
|
||||||
</div>
|
|
||||||
</motion.div>,
|
{/* Menu Items */}
|
||||||
document.body
|
<div className="p-2">
|
||||||
)
|
{/* <motion.button
|
||||||
: null}
|
whileHover={{ backgroundColor: 'rgba(255,255,255,0.1)' }}
|
||||||
</div>
|
className="w-full flex items-center space-x-2 px-3 py-2 rounded-md text-sm text-white"
|
||||||
</div>
|
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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -642,7 +642,7 @@ function HomeModule5() {
|
|||||||
: "text-white hover:text-gray-300"
|
: "text-white hover:text-gray-300"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
Yearly - <span className="text-[#FFCC6D]">10%</span>
|
Yearly - <span className="text-[#FFCC6D]">20%</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -51,7 +51,7 @@ export default function Login() {
|
|||||||
try {
|
try {
|
||||||
await loginUser(email, password);
|
await loginUser(email, password);
|
||||||
// 登录成功后跳转到首页
|
// 登录成功后跳转到首页
|
||||||
router.push("/");
|
router.push("/create");
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
console.error("Login failed:", error);
|
console.error("Login failed:", error);
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user