forked from 77media/video-flow
移动端首页适配
This commit is contained in:
海龙
parent
dd59bd9b28
commit
5b9004c3ed
@ -165,10 +165,13 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed right-0 top-0 h-16 header z-[999]"
|
||||
style={{ isolation: "isolate", left: collapsed ? "3rem" : "16rem" }}
|
||||
>
|
||||
<div
|
||||
className="fixed right-0 top-0 h-16 header z-[999]"
|
||||
style={{
|
||||
isolation: "isolate",
|
||||
left: pathname === "/" ? "0" : (collapsed ? "2.5rem" : "16rem")
|
||||
}}
|
||||
>
|
||||
<div className="h-full flex items-center justify-between pr-6 pl-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div
|
||||
@ -212,7 +215,11 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
|
||||
{pathname === "/" ? (
|
||||
<div
|
||||
data-alt="go-started-button"
|
||||
className="z-100 pointer-events-auto bg-white text-black rounded-full px-4 py-2 cursor-pointer transition-opacity opacity-100 hover:opacity-80 text-sm font-medium"
|
||||
className="z-100 pointer-events-auto bg-white text-black rounded-full cursor-pointer transition-opacity opacity-100 hover:opacity-80 font-medium
|
||||
/* 移动端适配 */
|
||||
px-2 py-1.5 text-xs
|
||||
/* 平板及以上适配 */
|
||||
sm:px-4 sm:py-2 sm:text-sm"
|
||||
onClick={() => router.push("/movies")}
|
||||
>
|
||||
Go Started
|
||||
@ -289,67 +296,67 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
|
||||
data-alt="user-menu-dropdown"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<UserCard plan_name={currentUser.plan_name}>
|
||||
<div className="relative z-[2] w-full h-full flex flex-col text-white p-3">
|
||||
{/* 顶部用户信息 */}
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
|
||||
{currentUser.username
|
||||
? currentUser.username.charAt(0)
|
||||
: "MF"}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
{currentUser.name || currentUser.username}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-300 truncate">
|
||||
{currentUser.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI 积分 */}
|
||||
<div className="flex items-center justify-center space-x-3 mb-4">
|
||||
<div className="p-2 rounded-full bg-white/10 backdrop-blur-sm">
|
||||
<Sparkles className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<span className="text-white text-base font-semibold">
|
||||
{isLoadingSubscription
|
||||
? "Loading..."
|
||||
: `${credits} credits`}
|
||||
</span>
|
||||
<UserCard plan_name={currentUser.plan_name}>
|
||||
<div className="relative z-[2] w-full h-full flex flex-col text-white p-3">
|
||||
{/* 顶部用户信息 */}
|
||||
<div className="flex items-center space-x-3 mb-3">
|
||||
<div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
|
||||
{currentUser.username
|
||||
? currentUser.username.charAt(0)
|
||||
: "MF"}
|
||||
</div>
|
||||
|
||||
{/* 操作按钮区域 */}
|
||||
<div className="flex-1 flex flex-row justify-center items-end">
|
||||
<button
|
||||
className="flex-1 bg-transparent border border-white/30 text-white text-xs py-0.5 h-6 rounded hover:bg-white/10 transition-colors"
|
||||
onClick={() => {
|
||||
window.open("/pricing", "_blank");
|
||||
}}
|
||||
>
|
||||
Upgrade
|
||||
</button>
|
||||
|
||||
{currentUser.plan_name !== "none" && (
|
||||
<button
|
||||
className="flex-1 bg-transparent border border-gray-400/30 text-gray-300 text-xs py-0.5 h-6 rounded hover:bg-gray-400/10 transition-colors disabled:opacity-50"
|
||||
onClick={handleManageSubscription}
|
||||
disabled={isManagingSubscription}
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="flex-1 bg-transparent border border-red-400/50 text-red-300 text-xs py-0.5 h-6 rounded hover:bg-red-400/10 transition-colors"
|
||||
onClick={() => logoutUser()}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-sm font-semibold text-white truncate">
|
||||
{currentUser.name || currentUser.username}
|
||||
</h3>
|
||||
<p className="text-xs text-gray-300 truncate">
|
||||
{currentUser.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</UserCard>
|
||||
</div>
|
||||
|
||||
{/* AI 积分 */}
|
||||
<div className="flex items-center justify-center space-x-3 mb-4">
|
||||
<div className="p-2 rounded-full bg-white/10 backdrop-blur-sm">
|
||||
<Sparkles className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<span className="text-white text-base font-semibold">
|
||||
{isLoadingSubscription
|
||||
? "Loading..."
|
||||
: `${credits} credits`}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮区域 */}
|
||||
<div className="flex-1 flex flex-row justify-center items-end">
|
||||
<button
|
||||
className="flex-1 bg-transparent border border-white/30 text-white text-xs py-0.5 h-6 rounded hover:bg-white/10 transition-colors"
|
||||
onClick={() => {
|
||||
window.open("/pricing", "_blank");
|
||||
}}
|
||||
>
|
||||
Upgrade
|
||||
</button>
|
||||
|
||||
{currentUser.plan_name !== "none" && (
|
||||
<button
|
||||
className="flex-1 bg-transparent border border-gray-400/30 text-gray-300 text-xs py-0.5 h-6 rounded hover:bg-gray-400/10 transition-colors disabled:opacity-50"
|
||||
onClick={handleManageSubscription}
|
||||
disabled={isManagingSubscription}
|
||||
>
|
||||
Manage
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="flex-1 bg-transparent border border-red-400/50 text-red-300 text-xs py-0.5 h-6 rounded hover:bg-red-400/10 transition-colors"
|
||||
onClick={() => logoutUser()}
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</UserCard>
|
||||
</motion.div>,
|
||||
document.body
|
||||
)
|
||||
@ -357,22 +364,30 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center space-x-4">
|
||||
<div
|
||||
data-alt="login-button"
|
||||
className="z-100 pointer-events-auto text-gray-300 hover:text-white cursor-pointer px-3 py-2 rounded transition-colors text-sm"
|
||||
onClick={() => router.push("/signup")}
|
||||
>
|
||||
Sign Up
|
||||
</div>
|
||||
<div
|
||||
data-alt="go-started-button"
|
||||
className="z-100 pointer-events-auto bg-white text-black rounded-full px-4 py-2 cursor-pointer transition-opacity opacity-100 hover:opacity-80 text-sm font-medium"
|
||||
onClick={() => router.push("/movies")}
|
||||
>
|
||||
Go Started
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2 sm:space-x-4">
|
||||
<div
|
||||
data-alt="login-button"
|
||||
className="z-100 pointer-events-auto text-gray-300 hover:text-white cursor-pointer rounded transition-colors
|
||||
/* 移动端适配 */
|
||||
px-2 py-1.5 text-xs
|
||||
/* 平板及以上适配 */
|
||||
sm:px-3 sm:py-2 sm:text-sm"
|
||||
onClick={() => router.push("/signup")}
|
||||
>
|
||||
Sign Up
|
||||
</div>
|
||||
<div
|
||||
data-alt="go-started-button"
|
||||
className="z-100 pointer-events-auto bg-white text-black rounded-full cursor-pointer transition-opacity opacity-100 hover:opacity-80 font-medium
|
||||
/* 移动端适配 */
|
||||
px-2 py-1.5 text-xs
|
||||
/* 平板及以上适配 */
|
||||
sm:px-4 sm:py-2 sm:text-sm"
|
||||
onClick={() => router.push("/movies")}
|
||||
>
|
||||
Go Started
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user