S-VPN/panel-web
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 首页出版效果

Browse Source
This commit is contained in:
speakeloudest
2025-07-27 00:18:31 -07:00
parent a9108fd392
commit f534c101dd
20 changed files with 444 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/user/app/(main)/page.tsx
-9
View File
@@ -10,7 +10,6 @@ import { redirect } from 'next/navigation';
import FooterCopyright from '@/components/main/FooterCopyright';
import FullScreenVideoBackground from '@/components/main/FullScreenVideoBackground';
import HomeContent from '@/components/main/HomeContent';
import Image from 'next/image';
export default async function Home() {
const Authorization = (await cookies()).get('Authorization')?.value;
@@ -39,14 +38,6 @@ export default async function Home() {
<HomeContent />
</main>
<FooterCopyright />
<Image
src={'./logo.png'}
height={37}
width={28}
className={'fixed bottom-8 left-1/2 -translate-x-1/2'}
alt='logo'
unoptimized
></Image>
</>
);
}
apps/user/app/auth/EmailAuthDialog/EmailAuthDialog.tsx
+40
View File
@@ -0,0 +1,40 @@
import EmailAuthForm from '@/app/auth/email/auth-form';
import CloseSvg from '@/components/CustomIcon/icons/close.svg';
import { Dialog, DialogContent, DialogTitle } from '@workspace/ui/components/dialog';
import Image from 'next/image';
import { forwardRef, useImperativeHandle, useState } from 'react';
export interface EmailAuthDialogRef {
show: () => void;
hide: () => void;
}
const EmailAuthDialog = forwardRef<EmailAuthDialogRef>((props, ref) => {
const [open, setOpen] = useState(false);
useImperativeHandle(ref, () => ({
show: () => setOpen(true),
hide: () => setOpen(false),
}));
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent
className={
'rounded-0 h-full w-full px-12 py-[4.5rem] md:h-auto md:w-[496px] md:!rounded-[50px]'
}
closeIcon={<Image src={CloseSvg} alt={'close'} />}
closeClassName={
'right-[40px] top-[30px] font-bold text-black opacity-100 focus:ring-0 focus:ring-offset-0'
}
>
<DialogTitle className={'sr-only'}>title</DialogTitle>
<div className={'min-h-[524px]'}>
<EmailAuthForm />
</div>
</DialogContent>
</Dialog>
);
});
export default EmailAuthDialog;
apps/user/app/auth/page.tsx → apps/user/app/auth/auth-page.tsx
View File
apps/user/app/auth/email/login-form.tsx
+48 -25
View File
@@ -49,15 +49,21 @@ export default function LoginForm({
return (
<>
<div className={'pb-9 pt-16 text-4xl font-bold'}>账户验证</div>
<Form {...form}>
<form onSubmit={handleSubmit} className='grid gap-6'>
<form onSubmit={handleSubmit} className=''>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormItem className={'mb-5'}>
<FormControl>
<Input placeholder='Enter your email...' type='email' {...field} />
<Input
className={'h-[60px] text-xl'}
placeholder='Email'
type='email'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
@@ -67,9 +73,14 @@ export default function LoginForm({
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormItem className={'mb-2'}>
<FormControl>
<Input placeholder='Enter your password...' type='password' {...field} />
<Input
className={'h-[60px] text-xl'}
placeholder='password'
type='password'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
@@ -80,7 +91,7 @@ export default function LoginForm({
control={form.control}
name='cf_token'
render={({ field }) => (
<FormItem>
<FormItem className={'last:mb-0'}>
<FormControl>
<CloudFlareTurnstile id='login' {...field} ref={turnstile} />
</FormControl>
@@ -89,27 +100,39 @@ export default function LoginForm({
)}
/>
)}
<Button type='submit' disabled={loading}>
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
{t('title')}
</Button>
<div className='flex w-full justify-between text-sm'>
<Button
variant='link'
type='button'
className='p-0'
onClick={() => onSwitchForm('reset')}
>
{t('forgotPassword')}
</Button>
<Button
variant='link'
className='p-0'
onClick={() => {
setInitialValues(undefined);
onSwitchForm('register');
}}
>
{t('registerAccount')}
</Button>
</div>
<div className='mt-6 flex justify-center'>
<Button
type='submit'
disabled={loading}
className='h-[64px] w-[219px] rounded-full border-[#0F2C53] bg-[#0F2C53] text-2xl font-bold hover:bg-[#225BA9] hover:text-white'
>
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
{t('title')}
</Button>
</div>
</form>
</Form>
<div className='mt-4 flex w-full justify-between text-sm'>
<Button variant='link' type='button' className='p-0' onClick={() => onSwitchForm('reset')}>
{t('forgotPassword')}
</Button>
<Button
variant='link'
className='p-0'
onClick={() => {
setInitialValues(undefined);
onSwitchForm('register');
}}
>
{t('registerAccount')}
</Button>
</div>
</>
);
}
apps/user/app/auth/email/register-form.tsx
+123 -99
View File
@@ -87,132 +87,156 @@ export default function RegisterForm({
return (
<>
<div className={'pb-9 text-4xl font-bold'}>注册账户</div>
{auth.register.stop_register ? (
<Markdown>{t('message')}</Markdown>
) : (
<Form {...form}>
<form onSubmit={handleSubmit} className='grid gap-6'>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder='Enter your email...' type='email' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder='Enter your password...' type='password' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='repeat_password'
render={({ field }) => (
<FormItem>
<FormControl>
<Input
disabled={loading}
placeholder='Enter password again...'
type='password'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{auth.email.enable_verify && (
<form onSubmit={handleSubmit}>
<div className='grid gap-5'>
<FormField
control={form.control}
name='code'
name='email'
render={({ field }) => (
<FormItem>
<FormControl>
<div className='flex items-center gap-2'>
<Input
disabled={loading}
placeholder='Enter code...'
type='text'
{...field}
value={field.value as string}
/>
<SendCode
type='email'
params={{
...form.getValues(),
type: 1,
}}
/>
</div>
<Input
className={'h-[60px] text-xl'}
placeholder='Enter your email...'
type='email'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<FormField
control={form.control}
name='invite'
render={({ field }) => (
<FormItem>
<FormControl>
<Input
disabled={loading || !!localStorage.getItem('invite')}
placeholder={t('invite')}
{...field}
value={field.value || ''}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{verify.enable_register_verify && (
<FormField
control={form.control}
name='cf_token'
name='password'
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='register' {...field} ref={turnstile} />
<Input
className={'h-[60px] text-xl'}
placeholder='Enter your password...'
type='password'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<Button type='submit' disabled={loading}>
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
{t('title')}
</Button>
<FormField
control={form.control}
name='repeat_password'
render={({ field }) => (
<FormItem>
<FormControl>
<Input
className={'h-[60px] text-xl'}
disabled={loading}
placeholder='Enter password again...'
type='password'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{auth.email.enable_verify && (
<FormField
control={form.control}
name='code'
render={({ field }) => (
<FormItem>
<FormControl>
<div className='flex items-center gap-8'>
<Input
disabled={loading}
className={'h-[60px] flex-1 text-xl'}
placeholder='Enter code...'
type='text'
{...field}
value={field.value as string}
/>
<SendCode
type='email'
params={{
...form.getValues(),
type: 1,
}}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<FormField
control={form.control}
name='invite'
render={({ field }) => (
<FormItem>
<FormControl>
<Input
className={'h-[60px] text-xl'}
disabled={loading || !!localStorage.getItem('invite')}
placeholder={t('invite')}
{...field}
value={field.value || ''}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{verify.enable_register_verify && (
<FormField
control={form.control}
name='cf_token'
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='register' {...field} ref={turnstile} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
</div>
<div className='text-right text-sm'>
{t('existingAccount')}&nbsp;
<Button
variant='link'
className='p-0'
onClick={() => {
setInitialValues(undefined);
onSwitchForm('login');
}}
>
{t('switchToLogin')}
</Button>
</div>
<div className='mt-6 flex justify-center'>
<Button
type='submit'
disabled={loading}
className='h-[64px] w-[219px] rounded-full border-[#0F2C53] bg-[#0F2C53] text-2xl font-bold hover:bg-[#225BA9] hover:text-white'
>
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
{t('title')}
</Button>
</div>
</form>
</Form>
)}
<div className='mt-4 text-right text-sm'>
{t('existingAccount')}&nbsp;
<Button
variant='link'
className='p-0'
onClick={() => {
setInitialValues(undefined);
onSwitchForm('login');
}}
>
{t('switchToLogin')}
</Button>
</div>
</>
);
}
apps/user/app/auth/email/reset-form.tsx
+93 -73
View File
@@ -54,92 +54,112 @@ export default function ResetForm({
return (
<>
<div className={'pb-9 pt-10 text-4xl font-bold'}>找回账户</div>
<Form {...form}>
<form onSubmit={handleSubmit} className='grid gap-6'>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder='Enter your email...' type='email' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='code'
render={({ field }) => (
<FormItem>
<FormControl>
<div className='flex items-center gap-2'>
<Input
disabled={loading}
placeholder='Enter code...'
type='text'
{...field}
value={field.value as string}
/>
<SendCode
type='email'
params={{
...form.getValues(),
type: 2,
}}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder='Enter your new password...' type='password' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{verify.enable_reset_password_verify && (
<form onSubmit={handleSubmit}>
<div className='grid gap-5'>
<FormField
control={form.control}
name='cf_token'
name='email'
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='reset' {...field} ref={turnstile} />
<Input
className={'h-[60px] text-xl'}
placeholder='Enter your email...'
type='email'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
<Button type='submit' disabled={loading}>
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
{t('title')}
</Button>
<FormField
control={form.control}
name='code'
render={({ field }) => (
<FormItem>
<FormControl>
<div className='flex items-center gap-8'>
<Input
className={'h-[60px] flex-1 text-xl'}
disabled={loading}
placeholder='Enter code...'
type='text'
{...field}
value={field.value as string}
/>
<SendCode
type='email'
params={{
...form.getValues(),
type: 2,
}}
/>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormControl>
<Input
className={'h-[60px] text-xl'}
placeholder='Enter your new password...'
type='password'
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
{verify.enable_reset_password_verify && (
<FormField
control={form.control}
name='cf_token'
render={({ field }) => (
<FormItem>
<FormControl>
<CloudFlareTurnstile id='reset' {...field} ref={turnstile} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
)}
</div>
<div className='text-right text-sm'>
{t('existingAccount')}&nbsp;
<Button
variant='link'
className='p-0'
onClick={() => {
setInitialValues(undefined);
onSwitchForm('login');
}}
>
{t('switchToLogin')}
</Button>
</div>
<div className='mt-6 flex justify-center'>
<Button
type='submit'
disabled={loading}
className='h-[64px] w-[219px] rounded-full border-[#0F2C53] bg-[#0F2C53] text-2xl font-bold hover:bg-[#225BA9] hover:text-white'
>
{loading && <Icon icon='mdi:loading' className='animate-spin' />}
{t('title')}
</Button>
</div>
</form>
</Form>
<div className='mt-4 text-right text-sm'>
{t('existingAccount')}&nbsp;
<Button
variant='link'
className='p-0'
onClick={() => {
setInitialValues(undefined);
onSwitchForm('login');
}}
>
{t('switchToLogin')}
</Button>
</div>
</>
);
}
apps/user/app/auth/send-code.tsx
+8 -1
View File
@@ -81,7 +81,14 @@ export default function SendCode({ type, params }: SendCodeProps) {
(type === 'email' ? !params.email : !params.telephone || !params.telephone_area_code);
return (
<Button type='button' onClick={handleSendCode} disabled={disabled}>
<Button
type='button'
className={
'h-[60px] w-[109px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] text-xl hover:bg-[#225BA9] hover:text-white'
}
onClick={handleSendCode}
disabled={disabled}
>
{seconds > 0 ? `${seconds}s` : t('get')}
</Button>
);
apps/user/app/bind/[platform]/certification.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export default function Certification({ platform, children }: CertificationProps
router.refresh();
})
.catch((error) => {
router.replace('/auth');
router.replace('/');
});
}, [pathname]);
apps/user/app/oauth/[platform]/certification.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export default function Certification({ platform, children }: CertificationProps
router.refresh();
})
.catch((error) => {
router.replace('/auth');
router.replace('/');
});
}, [pathname]);