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 { zodResolver } from '@hookform/resolvers/zod';
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 { Input } from '@workspace/ui/components/input';
import { useTranslations } from 'next-intl';
@ -34,45 +34,65 @@ export default function ChangePassword() {
}
return (
<Card className='min-w-80'>
<CardHeader className='bg-muted/50'>
<CardTitle className='flex items-center justify-between'>
{t('accountSettings')}
<Button type='submit' size='sm' form='password-form'>
{t('updatePassword')}
</Button>
</CardTitle>
</CardHeader>
<CardContent className='p-6'>
<Form {...form}>
<form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormControl>
<Input type='password' placeholder={t('newPassword')} {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='repeat_password'
render={({ field }) => (
<FormItem>
<FormControl>
<Input type='password' placeholder={t('repeatNewPassword')} {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</form>
</Form>
</CardContent>
<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)]'>
<div className={'mb-3'}>
<div className={'text-xl font-bold'}>{t('accountSettings')}</div>
<div className={'text-[15px] font-light'}>修改登录密码</div>
</div>
<Form {...form}>
<form id='password-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<FormField
control={form.control}
name='password'
render={({ field }) => (
<FormItem>
<FormControl>
<Input
className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
type='password'
placeholder={t('newPassword')}
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='repeat_password'
render={({ field }) => (
<FormItem>
<FormControl>
<Input
className={
'h-[60px] rounded-[20px] text-xl shadow-[inset_0_0_7.6px_0_#00000040]'
}
type='password'
placeholder={t('repeatNewPassword')}
{...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>
);
}

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 { zodResolver } from '@hookform/resolvers/zod';
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 { Switch } from '@workspace/ui/components/switch';
import { useTranslations } from 'next-intl';
@ -39,45 +39,58 @@ export default function NotifySettings() {
}
return (
<Card className='min-w-80'>
<CardHeader className='bg-muted/50'>
<CardTitle className='flex items-center justify-between'>
{t('notify.notificationSettings')}
<Button type='submit' size='sm' form='notify-form'>
{t('notify.save')}
</Button>
</CardTitle>
</CardHeader>
<CardContent className='grid gap-6 p-6'>
<Form {...form}>
<form id='notify-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<div className='space-y-4'>
{[
{ name: 'enable_balance_notify', label: 'balanceChange' },
{ name: 'enable_login_notify', label: 'login' },
{ name: 'enable_subscribe_notify', label: 'subscribe' },
{ name: 'enable_trade_notify', label: 'finance' },
].map(({ name, label }) => (
<FormField
key={name}
control={form.control}
name={name as any}
render={({ field }) => (
<FormItem className='flex items-center justify-between space-x-4'>
<FormLabel className='text-muted-foreground'>
{t(`notify.${label}`)}
</FormLabel>
<FormControl>
<Switch checked={field.value} onCheckedChange={field.onChange} />
</FormControl>
</FormItem>
)}
/>
))}
</div>
</form>
</Form>
</CardContent>
<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)]'>
<div className={'mb-3'}>
<div className={'text-xl font-bold'}>{t('notify.notificationSettings')}</div>
<div className={'text-[15px] font-light'}>是否邮箱通知推送</div>
</div>
<Form {...form}>
<form id='notify-form' onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
<div className='space-y-4'>
{[
{ name: 'enable_balance_notify', label: 'balanceChange' },
{ name: 'enable_login_notify', label: 'login' },
{ name: 'enable_subscribe_notify', label: 'subscribe' },
{ name: 'enable_trade_notify', label: 'finance' },
].map(({ name, label }) => (
<FormField
key={name}
control={form.control}
name={name as any}
render={({ field }) => (
<FormItem className='flex flex-col items-center justify-between space-x-4 rounded-[20px] bg-[#EAEAEA] py-2.5'>
<FormLabel className='text-muted-foreground text-sm text-[#848484]'>
{t(`notify.${label}`)}
</FormLabel>
<FormControl>
<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>
</FormItem>
)}
/>
))}
</div>
</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>
);
}

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() {
return (
<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 />
<ChangePassword />
</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 { zodResolver } from '@hookform/resolvers/zod';
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 {
Dialog,
DialogContent,
@ -16,7 +16,6 @@ import {
import { Form, FormControl, FormField, FormItem, FormMessage } from '@workspace/ui/components/form';
import { Input } from '@workspace/ui/components/input';
import { AreaCodeSelect } from '@workspace/ui/custom-components/area-code-select';
import { Icon } from '@workspace/ui/custom-components/icon';
import { useTranslations } from 'next-intl';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
@ -234,75 +233,32 @@ export default function ThirdPartyAccounts() {
return (
<>
<Card>
<CardHeader className='bg-muted/50'>
<CardTitle>{t('title')}</CardTitle>
</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')}
</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>
);
})}
<Card
className={
'rounded-[20px] border border-[#D9D9D9] p-6 text-[#666666] shadow-[0px_0px_52.6px_1px_rgba(15,44,83,0.05)]'
}
>
<div className={'text-xl font-bold'}>{t('title')}</div>
<div className='mb-4 mt-1 text-sm text-[#666666]'>
{user?.auth_methods?.[0]?.auth_identifier}
</div>
<div className={'mb-3'}>Email</div>
<div className={'flex items-center gap-2'}>
<div
className={
'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)]'
}
>
{user?.auth_methods?.[0]?.auth_identifier}
</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>
</>
);

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

@ -59,7 +59,9 @@ export default function LoginForm({
<FormItem className={'mb-5'}>
<FormControl>
<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'
type='email'
{...field}
@ -76,7 +78,9 @@ export default function LoginForm({
<FormItem className={'mb-2'}>
<FormControl>
<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'
type='password'
{...field}

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

@ -102,7 +102,9 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<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...'
type='email'
{...field}
@ -119,7 +121,9 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<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...'
type='password'
{...field}
@ -136,7 +140,9 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<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}
placeholder='Enter password again...'
type='password'
@ -158,7 +164,7 @@ export default function RegisterForm({
<Input
disabled={loading}
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...'
type='text'
@ -186,7 +192,9 @@ export default function RegisterForm({
<FormItem>
<FormControl>
<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')}
placeholder={t('invite')}
{...field}

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

@ -65,7 +65,9 @@ export default function ResetForm({
<FormItem>
<FormControl>
<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...'
type='email'
{...field}
@ -83,7 +85,9 @@ export default function ResetForm({
<FormControl>
<div className='flex items-center gap-8'>
<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}
placeholder='Enter code...'
type='text'
@ -110,7 +114,9 @@ export default function ResetForm({
<FormItem>
<FormControl>
<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...'
type='password'
{...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';
const Switch = React.forwardRef<
React.ElementRef<typeof SwitchPrimitives.Root>,
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
<SwitchPrimitives.Root
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',
className,
)}
{...props}
ref={ref}
>
<SwitchPrimitives.Thumb
interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
thumbClassName?: string;
}
const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
({ className, thumbClassName, ...props }, ref) => (
<SwitchPrimitives.Root
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,
)}
/>
</SwitchPrimitives.Root>
));
{...props}
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;
export { Switch };