beenull/WebChat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: avatar is not displayed completely

Browse source
This commit is contained in:
molvqingtai 2024-10-10 05:13:01 +08:00
parent 05ee49e7c4
commit de97d05528
6 changed files with 33 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/content/components/DanmakuMessage.tsx
View file

@ -34,7 +34,7 @@ const DanmakuMessage: FC<PromptItemProps> = ({ data, className, onMouseEnter, on
)} )}
> >
<Avatar className="size-5"> <Avatar className="size-5">
<AvatarImage src={data.userAvatar} alt="avatar" /> <AvatarImage src={data.userAvatar} className="size-full" alt="avatar" />
<AvatarFallback>{data.username.at(0)}</AvatarFallback> <AvatarFallback>{data.username.at(0)}</AvatarFallback>
</Avatar> </Avatar>
<div className="max-w-40 overflow-hidden text-ellipsis">{data.body}</div> <div className="max-w-40 overflow-hidden text-ellipsis">{data.body}</div>

2
src/app/content/components/MessageItem.tsx
View file

@ -32,7 +32,7 @@ const MessageItem: FC<MessageItemProps> = (props) => {
className={cn('box-border grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4', props.className)} className={cn('box-border grid grid-cols-[auto_1fr] gap-x-2 px-4 first:pt-4 last:pb-4', props.className)}
> >
<Avatar> <Avatar>
<AvatarImage src={props.data.userAvatar} alt="avatar" /> <AvatarImage src={props.data.userAvatar} className="size-full" alt="avatar" />
<AvatarFallback>{props.data.username.at(0)}</AvatarFallback> <AvatarFallback>{props.data.username.at(0)}</AvatarFallback>
</Avatar> </Avatar>
<div className="overflow-hidden"> <div className="overflow-hidden">

4
src/app/content/components/PromptItem.tsx
View file

@ -13,9 +13,9 @@ export interface PromptItemProps {
const PromptItem: FC<PromptItemProps> = ({ data, className }) => { const PromptItem: FC<PromptItemProps> = ({ data, className }) => {
return ( return (
<div className={cn('flex justify-center py-1 px-4', className)}> <div className={cn('flex justify-center py-1 px-4', className)}>
<Badge variant="secondary" className="gap-x-2 rounded-full font-medium text-slate-400"> <Badge variant="secondary" className="gap-x-2 rounded-full px-2 font-medium text-slate-400">
<Avatar className="size-4"> <Avatar className="size-4">
<AvatarImage src={data.userAvatar} alt="avatar" /> <AvatarImage src={data.userAvatar} className="size-full" alt="avatar" />
<AvatarFallback>{data.username.at(0)}</AvatarFallback> <AvatarFallback>{data.username.at(0)}</AvatarFallback>
</Avatar> </Avatar>
{data.body} {data.body}

2
src/app/content/views/Setup/index.tsx
View file

@ -104,7 +104,7 @@ const Setup: FC = () => {
<div className="m-auto flex flex-col items-center justify-center gap-y-8 pb-40 drop-shadow-lg"> <div className="m-auto flex flex-col items-center justify-center gap-y-8 pb-40 drop-shadow-lg">
<BlurFade key={userInfo?.avatar} inView> <BlurFade key={userInfo?.avatar} inView>
<Avatar className="size-24 cursor-pointer border-4 border-white "> <Avatar className="size-24 cursor-pointer border-4 border-white ">
<AvatarImage src={userInfo?.avatar} alt="avatar" /> <AvatarImage src={userInfo?.avatar} className="size-full" alt="avatar" />
<AvatarFallback> <AvatarFallback>
<UserIcon size={30} className="text-slate-400" /> <UserIcon size={30} className="text-slate-400" />
</AvatarFallback> </AvatarFallback>

2
src/app/options/components/AvatarSelect.tsx
View file

@ -58,7 +58,7 @@ const AvatarSelect = React.forwardRef<HTMLInputElement, AvatarSelectProps>(
className className
)} )}
> >
<AvatarImage src={value} alt="avatar" /> <AvatarImage src={value} className="size-full" alt="avatar" />
<AvatarFallback> <AvatarFallback>
<ImagePlusIcon size={30} className="text-slate-400 group-hover:text-slate-500" /> <ImagePlusIcon size={30} className="text-slate-400 group-hover:text-slate-500" />
</AvatarFallback> </AvatarFallback>

42
src/app/options/components/ProfileForm.tsx
View file

@ -92,31 +92,43 @@ const ProfileForm = () => {
return ( return (
<Form {...form}> <Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit)} autoComplete="off" className="relative w-[450px] space-y-8 p-14"> <form
onSubmit={form.handleSubmit(handleSubmit)}
autoComplete="off"
className="relative w-[450px] space-y-8 p-14 pt-20"
>
<FormField <FormField
control={form.control} control={form.control}
name="avatar" name="avatar"
render={({ field }) => ( render={({ field }) => (
<FormItem className="absolute inset-x-1 top-0 mx-auto grid w-fit -translate-y-1/2 justify-items-center"> <FormItem className="absolute inset-x-1 top-0 mx-auto grid w-fit -translate-y-1/3 justify-items-center">
<FormControl> <FormControl>
<BlurFade key={form.getValues().avatar} duration={0.1}> <div className="flex flex-col items-center gap-2">
<AvatarSelect <BlurFade key={form.getValues().avatar} duration={0.1}>
compressSize={MAX_AVATAR_SIZE} <AvatarSelect
onError={handleError} compressSize={MAX_AVATAR_SIZE}
onWarning={handleWarning} onError={handleError}
className="shadow-lg" onWarning={handleWarning}
{...field} className="shadow-lg"
></AvatarSelect> {...field}
</BlurFade> ></AvatarSelect>
</BlurFade>
<Button
type="button"
size="xs"
className="mx-auto flex items-center gap-x-2"
onClick={handleRefreshAvatar}
>
<RefreshCcwIcon size={14} />
Ugly Avatar
</Button>
</div>
</FormControl> </FormControl>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
<Button type="button" size="xs" className="mx-auto flex items-center gap-x-2" onClick={handleRefreshAvatar}>
<RefreshCcwIcon size={14} />
Ugly Avatar
</Button>
<FormField <FormField
control={form.control} control={form.control}
name="name" name="name"