youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-04 01:18:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main' into feat/support-agent-sandbox

Browse Source
This commit is contained in:
yyh
2026-03-25 13:45:58 +08:00
parent 720c950f9e b1cfd835f5
commit 76b8f7ee4b
3 changed files with 191 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/app/components/base/avatar/index.tsx
View File

@ -2,7 +2,7 @@ import type { ImageLoadingStatus } from '@base-ui/react/avatar'
import { Avatar as BaseAvatar } from '@base-ui/react/avatar'
import { cn } from '@/utils/classnames'
const SIZES = {
export const avatarSizeClasses = {
'xxs': { root: 'size-4', text: 'text-[7px]' },
'xs': { root: 'size-5', text: 'text-[8px]' },
'sm': { root: 'size-6', text: 'text-[10px]' },
@ -13,45 +13,50 @@ const SIZES = {
'3xl': { root: 'size-16', text: 'text-2xl' },
} as const
export type AvatarSize = keyof typeof SIZES
export type AvatarSize = keyof typeof avatarSizeClasses
export const getAvatarSizeClassNames = (size: AvatarSize) => avatarSizeClasses[size]
export type AvatarProps = {
name: string
avatar: string | null
size?: AvatarSize
className?: string
backgroundColor?: string
onLoadingStatusChange?: (status: ImageLoadingStatus) => void
}
const BASE_CLASS = 'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-primary-600'
export const AvatarRoot = BaseAvatar.Root
export const AvatarImage = BaseAvatar.Image
export const AvatarFallback = BaseAvatar.Fallback
export const avatarPartClassNames = {
root: 'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full bg-primary-600',
image: 'absolute inset-0 size-full object-cover',
fallback: 'flex size-full items-center justify-center font-medium text-white',
} as const
export const Avatar = ({
name,
avatar,
size = 'md',
className,
backgroundColor,
onLoadingStatusChange,
}: AvatarProps) => {
const sizeConfig = SIZES[size]
const sizeClassNames = getAvatarSizeClassNames(size)
return (
<BaseAvatar.Root
className={cn(BASE_CLASS, sizeConfig.root, className)}
style={backgroundColor ? { backgroundColor } : undefined}
>
<AvatarRoot className={cn(avatarPartClassNames.root, sizeClassNames.root, className)}>
{avatar && (
<BaseAvatar.Image
<AvatarImage
src={avatar}
alt={name}
className="absolute inset-0 size-full object-cover"
className={avatarPartClassNames.image}
onLoadingStatusChange={onLoadingStatusChange}
/>
)}
<BaseAvatar.Fallback className={cn('font-medium text-white', sizeConfig.text)}>
<AvatarFallback className={cn(avatarPartClassNames.fallback, sizeClassNames.text)}>
{name?.[0]?.toLocaleUpperCase()}
</BaseAvatar.Fallback>
</BaseAvatar.Root>
</AvatarFallback>
</AvatarRoot>
)
}