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">
<AvatarImage src={data.userAvatar} alt="avatar" />
<AvatarImage src={data.userAvatar} className="size-full" alt="avatar" />
<AvatarFallback>{data.username.at(0)}</AvatarFallback>
</Avatar>
<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)}
>
<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>
</Avatar>
<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 }) => {
return (
<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">
<AvatarImage src={data.userAvatar} alt="avatar" />
<AvatarImage src={data.userAvatar} className="size-full" alt="avatar" />
<AvatarFallback>{data.username.at(0)}</AvatarFallback>
</Avatar>
{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">
<BlurFade key={userInfo?.avatar} inView>
<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>
<UserIcon size={30} className="text-slate-400" />
</AvatarFallback>

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

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

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

@ -92,31 +92,43 @@ const ProfileForm = () => {
return (
<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
control={form.control}
name="avatar"
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>
<BlurFade key={form.getValues().avatar} duration={0.1}>
<AvatarSelect
compressSize={MAX_AVATAR_SIZE}
onError={handleError}
onWarning={handleWarning}
className="shadow-lg"
{...field}
></AvatarSelect>
</BlurFade>
<div className="flex flex-col items-center gap-2">
<BlurFade key={form.getValues().avatar} duration={0.1}>
<AvatarSelect
compressSize={MAX_AVATAR_SIZE}
onError={handleError}
onWarning={handleWarning}
className="shadow-lg"
{...field}
></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>
<FormMessage />
</FormItem>
)}
/>
<Button type="button" size="xs" className="mx-auto flex items-center gap-x-2" onClick={handleRefreshAvatar}>
<RefreshCcwIcon size={14} />
Ugly Avatar
</Button>
<FormField
control={form.control}
name="name"