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-30 21:09:25 -07:00
parent 0a34f95587
commit c1aa738154
8 changed files with 192 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
apps/user/app/(main)/(content)/(user)/profile/change-password.tsx
View File

@ -3,7 +3,7 @@
import { updateUserPassword } from '@/services/user/user'; import { updateUserPassword } from '@/services/user/user';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@workspace/ui/components/button'; import { Button } from '@workspace/ui/components/button';
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card'; import { Card } from '@workspace/ui/components/card';
import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form'; import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
import { Input } from '@workspace/ui/components/input'; import { Input } from '@workspace/ui/components/input';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
@ -34,16 +34,11 @@ export default function ChangePassword() {
} }
return ( return (
<Card className='min-w-80'> <Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
<CardHeader className='bg-muted/50'> <div className={'mb-3'}>
<CardTitle className='flex items-center justify-between'> <div className={'text-xl font-bold'}>{t('accountSettings')}</div>
{t('accountSettings')} <div className={'text-[15px] font-light'}>修改登录密码</div>
<Button type='submit' size='sm' form='password-form'> </div>
{t('updatePassword')}
</Button>
</CardTitle>
</CardHeader>
<CardContent className='p-6'>
<Form {...form}> <Form {...form}>
<form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'> <form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<FormField <FormField
@ -52,7 +47,14 @@ export default function ChangePassword() {
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormControl> <FormControl>
<Input type='password' placeholder={t('newPassword')} {...field} /> <Input
className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
type='password'
placeholder={t('newPassword')}
{...field}
/>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -64,7 +66,14 @@ export default function ChangePassword() {
render={({ field }) => ( render={({ field }) => (
<FormItem> <FormItem>
<FormControl> <FormControl>
<Input type='password' placeholder={t('repeatNewPassword')} {...field} /> <Input
className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
type='password'
placeholder={t('repeatNewPassword')}
{...field}
/>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
@ -72,7 +81,18 @@ export default function ChangePassword() {
/> />
</form> </form>
</Form> </Form>
</CardContent> <div className={'mt-8 flex justify-center'}>
<Button
type='submit'
size='sm'
form='password-form'
className={
'h-full rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] px-[55px] py-[9px] text-xl font-bold text-white transition hover:bg-[#225BA9] hover:text-white'
}
>
保存
</Button>
</div>
</Card> </Card>
); );
} }

43
apps/user/app/(main)/(content)/(user)/profile/notify-settings.tsx
View File

@ -4,7 +4,7 @@ import useGlobalStore from '@/config/use-global';
import { updateUserNotify } from '@/services/user/user'; import { updateUserNotify } from '@/services/user/user';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@workspace/ui/components/button'; import { Button } from '@workspace/ui/components/button';
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card'; import { Card } from '@workspace/ui/components/card';
import { Form, FormControl, FormField, FormItem, FormLabel } from '@workspace/ui/components/form'; import { Form, FormControl, FormField, FormItem, FormLabel } from '@workspace/ui/components/form';
import { Switch } from '@workspace/ui/components/switch'; import { Switch } from '@workspace/ui/components/switch';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
@ -39,16 +39,11 @@ export default function NotifySettings() {
} }
return ( return (
<Card className='min-w-80'> <Card className='min-w-80 rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'>
<CardHeader className='bg-muted/50'> <div className={'mb-3'}>
<CardTitle className='flex items-center justify-between'> <div className={'text-xl font-bold'}>{t('notify.notificationSettings')}</div>
{t('notify.notificationSettings')} <div className={'text-[15px] font-light'}>是否邮箱通知推送</div>
<Button type='submit' size='sm' form='notify-form'> </div>
{t('notify.save')}
</Button>
</CardTitle>
</CardHeader>
<CardContent className='grid gap-6 p-6'>
<Form {...form}> <Form {...form}>
<form id='notify-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'> <form id='notify-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<div className='space-y-4'> <div className='space-y-4'>
@ -63,12 +58,19 @@ export default function NotifySettings() {
control={form.control} control={form.control}
name={name as any} name={name as any}
render={({ field }) => ( render={({ field }) => (
<FormItem className='flex items-center justify-between space-x-4'> <FormItem className='flex flex-col items-center justify-between space-x-4 rounded-[20px] bg-[#EAEAEA] py-2.5'>
<FormLabel className='text-muted-foreground'> <FormLabel className='text-muted-foreground text-sm text-[#848484]'>
{t(`notify.${label}`)} {t(`notify.${label}`)}
</FormLabel> </FormLabel>
<FormControl> <FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} /> <Switch
className={
'data-[state=checked]:border-[#87ACC8] data-[state=unchecked]:border-[#B1B2BC] data-[state-unchecked]:bg-[#D9D9D9] data-[state=checked]:bg-[#A8D4ED]'
}
thumbClassName={'border-[#D9D9D9] border'}
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormControl> </FormControl>
</FormItem> </FormItem>
)} )}
@ -77,7 +79,18 @@ export default function NotifySettings() {
</div> </div>
</form> </form>
</Form> </Form>
</CardContent> <div className={'mt-8 flex justify-center'}>
<Button
type='submit'
size='sm'
form='notify-form'
className={
'h-full rounded-[50px] border-0 border-[#0F2C53] bg-[#0F2C53] px-[55px] py-[9px] text-xl font-bold text-white transition hover:bg-[#225BA9] hover:text-white'
}
>
保存
</Button>
</div>
</Card> </Card>
); );
} }

4
apps/user/app/(main)/(content)/(user)/profile/page.tsx
View File

@ -5,9 +5,11 @@ import ThirdPartyAccounts from './third-party-accounts';
export default function Page() { export default function Page() {
return ( return (
<div className='flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:*:flex-auto'> <div className='flex flex-col gap-4 lg:flex-row lg:flex-wrap lg:*:flex-auto'>
<div className={'flex flex-auto flex-col gap-4'}>
<ThirdPartyAccounts /> <ThirdPartyAccounts />
<NotifySettings />
<ChangePassword /> <ChangePassword />
</div> </div>
<NotifySettings />
</div>
); );
} }

86
apps/user/app/(main)/(content)/(user)/profile/third-party-accounts.tsx
View File

@ -5,7 +5,7 @@ import useGlobalStore from '@/config/use-global';
import { bindOAuth, unbindOAuth, updateBindEmail, updateBindMobile } from '@/services/user/user'; import { bindOAuth, unbindOAuth, updateBindEmail, updateBindMobile } from '@/services/user/user';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { Button } from '@workspace/ui/components/button'; import { Button } from '@workspace/ui/components/button';
import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card'; import { Card } from '@workspace/ui/components/card';
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -16,7 +16,6 @@ import {
import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form'; import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
import { Input } from '@workspace/ui/components/input'; import { Input } from '@workspace/ui/components/input';
import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select'; import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
import { Icon } from '@workspace/ui/custom-components/icon';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { useState } from 'react'; import { useState } from 'react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
@ -234,75 +233,32 @@ export default function ThirdPartyAccounts() {
return ( return (
<> <>
<Card> <Card
<CardHeader className='bg-muted/50'> className={
<CardTitle>{t('title')}</CardTitle> 'rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
</CardHeader>
<CardContent className='p-6'>
<div className='space-y-4'>
{accounts.map((account) => {
const method = user?.auth_methods?.find((auth) => auth.auth_type === account.id);
const isEditing = account.id === 'email';
const currentValue = method?.auth_identifier || editValues[account.id];
let displayValue = '';
switch (account.id) {
case 'email':
displayValue = isEditing ? currentValue : method?.auth_identifier || '';
break;
default:
displayValue = method?.auth_identifier || t(`${account.id}.description`);
} }
return (
<div key={account.id} className='flex w-full flex-col gap-2'>
<span className='flex gap-3 font-medium'>
<Icon icon={account.icon} className='size-6' />
{account.name}
</span>
<div className='flex items-center gap-2'>
<Input
value={displayValue}
disabled={!isEditing}
className='bg-muted flex-1 truncate'
onChange={(e) =>
isEditing &&
setEditValues((prev) => ({ ...prev, [account.id]: e.target.value }))
}
onKeyDown={(e) => {
if (e.key === 'Enter' && isEditing) {
handleBasicAccountUpdate(account, currentValue);
}
}}
/>
{account.id === 'mobile' ? (
<MobileBindDialog onSuccess={getUserInfo}>
<Button
variant={method?.auth_identifier ? 'outline' : 'default'}
className='whitespace-nowrap'
> >
{t(method?.auth_identifier ? 'update' : 'bind')} <div className={'text-xl font-bold'}>{t('title')}</div>
</Button> <div className='mb-4 mt-1 text-sm text-[#666666]'>
</MobileBindDialog> {user?.auth_methods?.[0]?.auth_identifier}
) : ( </div>
<Button <div className={'mb-3'}>Email</div>
variant={method?.auth_identifier ? 'outline' : 'default'} <div className={'flex items-center gap-2'}>
onClick={() => <div
isEditing className={
? handleBasicAccountUpdate(account, currentValue) 'line-clamp-1 h-[60px] flex-1 rounded-[20px] bg-[#EAEAEA] px-5 text-xl leading-[60px] shadow-[inset_0px_0px_7.6px_0px_rgba(0,0,0,0.25)]'
: handleAccountAction(account)
} }
className='whitespace-nowrap'
> >
{t(isEditing ? 'save' : method?.auth_identifier ? 'unbind' : 'bind')} {user?.auth_methods?.[0]?.auth_identifier}
</Button> </div>
)} <div
className={
'h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center text-[16px] font-medium leading-[32px] text-white'
}
>
保存
</div> </div>
</div> </div>
);
})}
</div>
</CardContent>
</Card> </Card>
</> </>
); );

8
apps/user/app/auth/email/login-form.tsx
View File

@ -59,7 +59,9 @@ export default function LoginForm({
<FormItem className={'mb-5'}> <FormItem className={'mb-5'}>
<FormControl> <FormControl>
<Input <Input
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'} className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
placeholder='Email' placeholder='Email'
type='email' type='email'
{...field} {...field}
@ -76,7 +78,9 @@ export default function LoginForm({
<FormItem className={'mb-2'}> <FormItem className={'mb-2'}>
<FormControl> <FormControl>
<Input <Input
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'} className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
placeholder='password' placeholder='password'
type='password' type='password'
{...field} {...field}

18
apps/user/app/auth/email/register-form.tsx
View File

@ -102,7 +102,9 @@ export default function RegisterForm({
<FormItem> <FormItem>
<FormControl> <FormControl>
<Input <Input
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'} className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
placeholder='Enter your email...' placeholder='Enter your email...'
type='email' type='email'
{...field} {...field}
@ -119,7 +121,9 @@ export default function RegisterForm({
<FormItem> <FormItem>
<FormControl> <FormControl>
<Input <Input
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'} className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
placeholder='Enter your password...' placeholder='Enter your password...'
type='password' type='password'
{...field} {...field}
@ -136,7 +140,9 @@ export default function RegisterForm({
<FormItem> <FormItem>
<FormControl> <FormControl>
<Input <Input
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'} className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
disabled={loading} disabled={loading}
placeholder='Enter password again...' placeholder='Enter password again...'
type='password' type='password'
@ -158,7 +164,7 @@ export default function RegisterForm({
<Input <Input
disabled={loading} disabled={loading}
className={ className={
'h-[60px] flex-1 text-xl shadow-[inset_0_0_7.6px_0_#00000040]' 'h-[60px] flex-1 rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
} }
placeholder='Enter code...' placeholder='Enter code...'
type='text' type='text'
@ -186,7 +192,9 @@ export default function RegisterForm({
<FormItem> <FormItem>
<FormControl> <FormControl>
<Input <Input
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'} className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
disabled={loading || !!localStorage.getItem('invite')} disabled={loading || !!localStorage.getItem('invite')}
placeholder={t('invite')} placeholder={t('invite')}
{...field} {...field}

12
apps/user/app/auth/email/reset-form.tsx
View File

@ -65,7 +65,9 @@ export default function ResetForm({
<FormItem> <FormItem>
<FormControl> <FormControl>
<Input <Input
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'} className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
placeholder='Enter your email...' placeholder='Enter your email...'
type='email' type='email'
{...field} {...field}
@ -83,7 +85,9 @@ export default function ResetForm({
<FormControl> <FormControl>
<div className='flex items-center gap-8'> <div className='flex items-center gap-8'>
<Input <Input
className={'h-[60px] flex-1 text-xl shadow-[inset_0_0_7.6px_0_#00000040]'} className={
'h-[60px] flex-1 rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
disabled={loading} disabled={loading}
placeholder='Enter code...' placeholder='Enter code...'
type='text' type='text'
@ -110,7 +114,9 @@ export default function ResetForm({
<FormItem> <FormItem>
<FormControl> <FormControl>
<Input <Input
className={'h-[60px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'} className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
placeholder='Enter your new password...' placeholder='Enter your new password...'
type='password' type='password'
{...field} {...field}

14
packages/ui/src/components/switch.tsx
View File

@ -5,10 +5,12 @@ import * as React from 'react';
import { cn } from '@workspace/ui/lib/utils'; import { cn } from '@workspace/ui/lib/utils';
const Switch = React.forwardRef< interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
React.ElementRef<typeof SwitchPrimitives.Root>, thumbClassName?: string;
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> }
>(({ className, ...props }, ref) => (
const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
({ className, thumbClassName, ...props }, ref) => (
<SwitchPrimitives.Root <SwitchPrimitives.Root
className={cn( className={cn(
'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', 'focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
@ -20,10 +22,12 @@ const Switch = React.forwardRef<
<SwitchPrimitives.Thumb <SwitchPrimitives.Thumb
className={cn( className={cn(
'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0', 'bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
thumbClassName,
)} )}
/> />
</SwitchPrimitives.Root> </SwitchPrimitives.Root>
)); ),
);
Switch.displayName = SwitchPrimitives.Root.displayName; Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch }; export { Switch };