xueteng/video-flow-b
1
0
Fork 0
forked from 77media/video-flow
Code Pull Requests Activity

新增 签到模块h5效果

Browse Source
This commit is contained in:
moux1024 2025-09-24 16:03:49 +08:00
parent 3e176bc265
commit 39556ebd3d
3 changed files with 26 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
components/layout/signin-box.tsx
View File

@ -61,10 +61,10 @@ export default function SigninPage() {
if (isInitialLoading) { if (isInitialLoading) {
return ( return (
<div className="mx-auto max-w-md space-y-6"> <div data-alt="signin-container" className="mx-auto w-full max-w-sm space-y-6">
<Card className="bg-transparent border-0 shadow-none"> <Card data-alt="loading-card" className="bg-transparent border-0 shadow-none">
<CardContent className="flex items-center justify-center py-12"> <CardContent data-alt="loading-content" className="flex items-center justify-center py-12">
<div className="flex items-center gap-2 text-muted-foreground"> <div data-alt="loading-indicator" className="flex items-center gap-2 text-muted-foreground">
<div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" /> <div className="w-4 h-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
Loading... Loading...
</div> </div>
@ -75,47 +75,53 @@ export default function SigninPage() {
} }
return ( return (
<div className="mx-auto max-w-md space-y-6"> <div data-alt="signin-container" className="mx-auto w-full max-w-sm space-y-6">
{/* Signin status card */} {/* Signin status card */}
<Card className="bg-transparent border-0 shadow-none"> <Card data-alt="signin-card" className="bg-transparent border-0 shadow-none">
<CardHeader className="text-center pb-4 pt-0"> <CardHeader data-alt="signin-header" className="text-center pb-4 pt-0">
<h1 className="text-3xl font-bold text-balance bg-gradient-to-r from-custom-blue to-custom-purple bg-clip-text text-transparent"> <h1 data-alt="signin-title" className="text-2xl sm:text-3xl font-bold text-balance bg-gradient-to-r from-custom-blue to-custom-purple bg-clip-text text-transparent">
Daily Sign-in Daily Sign-in
</h1> </h1>
<div className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<p className="text-muted-foreground">Sign in to earn credits. Credits are valid for 7 days</p> <p className="text-sm sm:text-base text-muted-foreground">Sign in to earn credits. Credits are valid for 7 days</p>
<div className="relative"> <div className="relative" data-alt="signin-help-wrapper">
<button <button
data-alt="signin-help-button"
onMouseEnter={() => setShowTip(true)} onMouseEnter={() => setShowTip(true)}
onMouseLeave={() => setShowTip(false)} onMouseLeave={() => setShowTip(false)}
className="p-1 rounded-full hover:bg-muted/50 transition-colors" onClick={() => setShowTip((v: boolean) => !v)}
className="p-2 rounded-full hover:bg-muted/50 transition-colors"
> >
<HelpCircle className="w-4 h-4 text-muted-foreground hover:text-foreground" /> <HelpCircle className="w-4 h-4 text-muted-foreground hover:text-foreground" />
</button> </button>
{showTip && ( {showTip && (
<div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-80 p-3 bg-popover border rounded-lg shadow-lg z-10"> <div
data-alt="signin-help-popover"
className="fixed left-1/2 -translate-x-1/2 bottom-16 inset-x-4 sm:inset-auto sm:absolute sm:bottom-full sm:left-1/2 sm:-translate-x-1/2 sm:mb-2
w-[92vw] max-w-sm sm:w-80 p-3 bg-popover border rounded-lg shadow-lg z-50 max-h-[60vh] overflow-auto"
>
<div className="text-sm space-y-1 text-left"> <div className="text-sm space-y-1 text-left">
<p className="font-medium text-foreground">Sign-in Rules</p> <p className="font-medium text-foreground">Sign-in Rules</p>
<p className="text-muted-foreground">• Daily sign-in earns 100 credits</p> <p className="text-muted-foreground">• Daily sign-in earns 100 credits</p>
<p className="text-muted-foreground">• Credits are valid for 7 days</p> <p className="text-muted-foreground">• Credits are valid for 7 days</p>
<p className="text-muted-foreground">• Expired credits will be automatically cleared</p> <p className="text-muted-foreground">• Expired credits will be automatically cleared</p>
</div> </div>
<div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover"></div> <div className="hidden sm:block absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-popover"></div>
</div> </div>
)} )}
</div> </div>
</div> </div>
</CardHeader> </CardHeader>
<CardContent className="space-y-6"> <CardContent data-alt="signin-content" className="space-y-6">
<div className="grid grid-cols-1 gap-4"> <div className="grid grid-cols-1 gap-4">
<div className="text-center p-6 rounded-lg bg-gradient-to-br from-custom-blue/20 via-custom-purple/20 to-custom-blue/10 border border-custom-blue/30"> <div data-alt="credits-card" className="text-center p-4 sm:p-6 rounded-lg bg-gradient-to-br from-custom-blue/20 via-custom-purple/20 to-custom-blue/10 border border-custom-blue/30">
<div className="flex items-center justify-center gap-2 mb-2"> <div className="flex items-center justify-center gap-2 mb-2">
<Coins className="w-6 h-6 text-primary" /> <Coins className="w-6 h-6 text-primary" />
<span className="text-sm text-muted-foreground">Earned Credits</span> <span className="text-sm text-muted-foreground">Earned Credits</span>
</div> </div>
<div className="text-3xl font-bold bg-gradient-to-r from-custom-blue to-custom-purple bg-clip-text text-transparent"> <div className="text-3xl sm:text-4xl font-bold bg-gradient-to-r from-custom-blue to-custom-purple bg-clip-text text-transparent">
{signinData.credits || 0} {signinData.credits || 0}
</div> </div>
</div> </div>
@ -124,9 +130,10 @@ export default function SigninPage() {
{/* Sign-in button */} {/* Sign-in button */}
<Button <Button
data-alt="signin-button"
onClick={handleSignin} onClick={handleSignin}
disabled={signinData.has_signin || isLoading} disabled={signinData.has_signin || isLoading}
className="w-full h-12 text-lg font-semibold bg-gradient-to-r from-custom-blue to-custom-purple hover:from-custom-blue/90 hover:to-custom-purple/90 text-white" className="w-full h-11 text-base sm:h-12 sm:text-lg font-semibold bg-gradient-to-r from-custom-blue to-custom-purple hover:from-custom-blue/90 hover:to-custom-purple/90 text-white"
size="lg" size="lg"
> >
{isLoading ? ( {isLoading ? (

6
components/layout/top-bar.tsx
View File

@ -568,10 +568,8 @@ export function TopBar({ collapsed, isDesktop=true }: { collapsed: boolean, isDe
data-alt="signin-modal" data-alt="signin-modal"
> >
<DialogTitle></DialogTitle> <DialogTitle></DialogTitle>
<div className="p-4"> <SigninBox />
<SigninBox /> </DialogContent>
</div>
</DialogContent>
</Dialog> </Dialog>
</div> </div>
); );

1
components/ui/VideoCoverflow.tsx
View File

@ -121,7 +121,6 @@ const VideoCoverflow: React.FC<VideoCoverflowProps> = ({
modules={isMobile ? [Autoplay, EffectCards] : [Autoplay, EffectCoverflow]} modules={isMobile ? [Autoplay, EffectCards] : [Autoplay, EffectCoverflow]}
effect={isMobile ? 'cards' : 'coverflow'} effect={isMobile ? 'cards' : 'coverflow'}
key={isMobile ? 'cards' : 'coverflow'} key={isMobile ? 'cards' : 'coverflow'}
data-test={isMobile}
centeredSlides centeredSlides
slidesPerView={isMobile ? 1 : 2} slidesPerView={isMobile ? 1 : 2}
loop loop