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

100
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,45 +34,65 @@ 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')} <Form {...form}>
</Button> <form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
</CardTitle> <FormField
</CardHeader> control={form.control}
<CardContent className='p-6'> name='password'
<Form {...form}> render={({ field }) => (
<form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'> <FormItem>
<FormField <FormControl>
control={form.control} <Input
name='password' className={
render={({ field }) => ( 'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
<FormItem> }
<FormControl> type='password'
<Input type='password' placeholder={t('newPassword')} {...field} /> placeholder={t('newPassword')}
</FormControl> {...field}
<FormMessage /> />
</FormItem> </FormControl>
)} <FormMessage />
/> </FormItem>
<FormField )}
control={form.control} />
name='repeat_password' <FormField
render={({ field }) => ( control={form.control}
<FormItem> name='repeat_password'
<FormControl> render={({ field }) => (
<Input type='password' placeholder={t('repeatNewPassword')} {...field} /> <FormItem>
</FormControl> <FormControl>
<FormMessage /> <Input
</FormItem> className={
)} 'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
/> }
</form> type='password'
</Form> placeholder={t('repeatNewPassword')}
</CardContent> {...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
<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>
); );
} }

93
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,45 +39,58 @@ 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')} <Form {...form}>
</Button> <form id='notify-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
</CardTitle> <div className='space-y-4'>
</CardHeader> {[
<CardContent className='grid gap-6 p-6'> { name: 'enable_balance_notify', label: 'balanceChange' },
<Form {...form}> { name: 'enable_login_notify', label: 'login' },
<form id='notify-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'> { name: 'enable_subscribe_notify', label: 'subscribe' },
<div className='space-y-4'> { name: 'enable_trade_notify', label: 'finance' },
{[ ].map(({ name, label }) => (
{ name: 'enable_balance_notify', label: 'balanceChange' }, <FormField
{ name: 'enable_login_notify', label: 'login' }, key={name}
{ name: 'enable_subscribe_notify', label: 'subscribe' }, control={form.control}
{ name: 'enable_trade_notify', label: 'finance' }, name={name as any}
].map(({ name, label }) => ( render={({ field }) => (
<FormField <FormItem className='flex flex-col items-center justify-between space-x-4 rounded-[20px] bg-[#EAEAEA] py-2.5'>
key={name} <FormLabel className='text-muted-foreground text-sm text-[#848484]'>
control={form.control} {t(`notify.${label}`)}
name={name as any} </FormLabel>
render={({ field }) => ( <FormControl>
<FormItem className='flex items-center justify-between space-x-4'> <Switch
<FormLabel className='text-muted-foreground'> className={
{t(`notify.${label}`)} 'data-[state=checked]:border-[#87ACC8] data-[state=unchecked]:border-[#B1B2BC] data-[state-unchecked]:bg-[#D9D9D9] data-[state=checked]:bg-[#A8D4ED]'
</FormLabel> }
<FormControl> thumbClassName={'border-[#D9D9D9] border'}
<Switch checked={field.value} onCheckedChange={field.onChange} /> checked={field.value}
</FormControl> onCheckedChange={field.onChange}
</FormItem> />
)} </FormControl>
/> </FormItem>
))} )}
</div> />
</form> ))}
</Form> </div>
</CardContent> </form>
</Form>
<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>
); );
} }

6
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'>
<ThirdPartyAccounts /> <div className={'flex flex-auto flex-col gap-4'}>
<ThirdPartyAccounts />
<ChangePassword />
</div>
<NotifySettings /> <NotifySettings />
<ChangePassword />
</div> </div>
); );
} }

96
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'> <div className={'text-xl font-bold'}>{t('title')}</div>
{accounts.map((account) => { <div className='mb-4 mt-1 text-sm text-[#666666]'>
const method = user?.auth_methods?.find((auth) => auth.auth_type === account.id); {user?.auth_methods?.[0]?.auth_identifier}
const isEditing = account.id === 'email'; </div>
const currentValue = method?.auth_identifier || editValues[account.id]; <div className={'mb-3'}>Email</div>
let displayValue = ''; <div className={'flex items-center gap-2'}>
<div
switch (account.id) { className={
case 'email': '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)]'
displayValue = isEditing ? currentValue : method?.auth_identifier || ''; }
break; >
default: {user?.auth_methods?.[0]?.auth_identifier}
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')}
</Button>
</MobileBindDialog>
) : (
<Button
variant={method?.auth_identifier ? 'outline' : 'default'}
onClick={() =>
isEditing
? handleBasicAccountUpdate(account, currentValue)
: handleAccountAction(account)
}
className='whitespace-nowrap'
>
{t(isEditing ? 'save' : method?.auth_identifier ? 'unbind' : 'bind')}
</Button>
)}
</div>
</div>
);
})}
</div> </div>
</CardContent> <div
className={
'h-[32px] w-[110px] rounded-full bg-[#D9D9D9] text-center text-[16px] font-medium leading-[32px] text-white'
}
>
保存
</div>
</div>
</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}

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

@ -5,25 +5,29 @@ 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) => (
<SwitchPrimitives.Root const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
className={cn( ({ className, thumbClassName, ...props }, ref) => (
'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', <SwitchPrimitives.Root
className,
)}
{...props}
ref={ref}
>
<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', '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',
className,
)} )}
/> {...props}
</SwitchPrimitives.Root> ref={ref}
)); >
<SwitchPrimitives.Thumb
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',
thumbClassName,
)}
/>
</SwitchPrimitives.Root>
),
);
Switch.displayName = SwitchPrimitives.Root.displayName; Switch.displayName = SwitchPrimitives.Root.displayName;
export { Switch }; export { Switch };