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 (
|
return (
|
||||||
<div
|
<div
|
||||||
className="fixed right-0 top-0 h-16 header z-[999]"
|
className="fixed right-0 top-0 h-16 header z-[999]"
|
||||||
style={{ isolation: "isolate", left: collapsed ? "3rem" : "16rem" }}
|
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="h-full flex items-center justify-between pr-6 pl-4">
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-4">
|
||||||
<div
|
<div
|
||||||
@ -212,7 +215,11 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
|
|||||||
{pathname === "/" ? (
|
{pathname === "/" ? (
|
||||||
<div
|
<div
|
||||||
data-alt="go-started-button"
|
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")}
|
onClick={() => router.push("/movies")}
|
||||||
>
|
>
|
||||||
Go Started
|
Go Started
|
||||||
@ -289,67 +296,67 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
|
|||||||
data-alt="user-menu-dropdown"
|
data-alt="user-menu-dropdown"
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
>
|
>
|
||||||
<UserCard plan_name={currentUser.plan_name}>
|
<UserCard plan_name={currentUser.plan_name}>
|
||||||
<div className="relative z-[2] w-full h-full flex flex-col text-white p-3">
|
<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="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">
|
<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
|
||||||
? currentUser.username.charAt(0)
|
? currentUser.username.charAt(0)
|
||||||
: "MF"}
|
: "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>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
{/* 操作按钮区域 */}
|
<h3 className="text-sm font-semibold text-white truncate">
|
||||||
<div className="flex-1 flex flex-row justify-center items-end">
|
{currentUser.name || currentUser.username}
|
||||||
<button
|
</h3>
|
||||||
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"
|
<p className="text-xs text-gray-300 truncate">
|
||||||
onClick={() => {
|
{currentUser.email}
|
||||||
window.open("/pricing", "_blank");
|
</p>
|
||||||
}}
|
|
||||||
>
|
|
||||||
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>
|
||||||
</div>
|
</div>
|
||||||
</UserCard>
|
|
||||||
|
{/* 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>,
|
</motion.div>,
|
||||||
document.body
|
document.body
|
||||||
)
|
)
|
||||||
@ -357,22 +364,30 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center space-x-4">
|
<div className="flex items-center space-x-2 sm:space-x-4">
|
||||||
<div
|
<div
|
||||||
data-alt="login-button"
|
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"
|
className="z-100 pointer-events-auto text-gray-300 hover:text-white cursor-pointer rounded transition-colors
|
||||||
onClick={() => router.push("/signup")}
|
/* 移动端适配 */
|
||||||
>
|
px-2 py-1.5 text-xs
|
||||||
Sign Up
|
/* 平板及以上适配 */
|
||||||
</div>
|
sm:px-3 sm:py-2 sm:text-sm"
|
||||||
<div
|
onClick={() => router.push("/signup")}
|
||||||
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"
|
Sign Up
|
||||||
onClick={() => router.push("/movies")}
|
</div>
|
||||||
>
|
<div
|
||||||
Go Started
|
data-alt="go-started-button"
|
||||||
</div>
|
className="z-100 pointer-events-auto bg-white text-black rounded-full cursor-pointer transition-opacity opacity-100 hover:opacity-80 font-medium
|
||||||
</div>
|
/* 移动端适配 */
|
||||||
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user