opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-15 09:57:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): adjust app card online avatars layout and counter alignment

Browse Source
This commit is contained in:
hjlarry 2026-04-12 17:56:53 +08:00
parent 0967ad5145
commit 1722c883f3
2 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/app/components/apps/app-card.tsx
View File

@ -406,33 +406,33 @@ const AppCard = ({ app, onlineUsers = [], onRefresh }: AppCardProps) => {
<div>·</div>
<div className="truncate" title={EditTimeText}>{EditTimeText}</div>
</div>
{onlinePresenceUsers.length > 0 && (
<div className="mt-1">
<UserAvatarList users={onlinePresenceUsers} size="xxs" maxVisible={4} />
</div>
)}
</div>
<div className="flex h-5 w-5 shrink-0 items-center justify-center">
{app.access_mode === AccessMode.PUBLIC && (
<Tooltip asChild={false} popupContent={t('accessItemsDescription.anyone', { ns: 'app' })}>
<RiGlobalLine className="h-4 w-4 text-text-quaternary" />
</Tooltip>
)}
{app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && (
<Tooltip asChild={false} popupContent={t('accessItemsDescription.specific', { ns: 'app' })}>
<RiLockLine className="h-4 w-4 text-text-quaternary" />
</Tooltip>
)}
{app.access_mode === AccessMode.ORGANIZATION && (
<Tooltip asChild={false} popupContent={t('accessItemsDescription.organization', { ns: 'app' })}>
<RiBuildingLine className="h-4 w-4 text-text-quaternary" />
</Tooltip>
)}
{app.access_mode === AccessMode.EXTERNAL_MEMBERS && (
<Tooltip asChild={false} popupContent={t('accessItemsDescription.external', { ns: 'app' })}>
<RiVerifiedBadgeLine className="h-4 w-4 text-text-quaternary" />
</Tooltip>
<div className="flex h-full shrink-0 flex-col items-end justify-between py-px">
{onlinePresenceUsers.length > 0 && (
<UserAvatarList users={onlinePresenceUsers} size="xxs" maxVisible={3} className="justify-end" />
)}
<div className="flex h-5 w-5 items-center justify-center">
{app.access_mode === AccessMode.PUBLIC && (
<Tooltip asChild={false} popupContent={t('accessItemsDescription.anyone', { ns: 'app' })}>
<RiGlobalLine className="h-4 w-4 text-text-quaternary" />
</Tooltip>
)}
{app.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && (
<Tooltip asChild={false} popupContent={t('accessItemsDescription.specific', { ns: 'app' })}>
<RiLockLine className="h-4 w-4 text-text-quaternary" />
</Tooltip>
)}
{app.access_mode === AccessMode.ORGANIZATION && (
<Tooltip asChild={false} popupContent={t('accessItemsDescription.organization', { ns: 'app' })}>
<RiBuildingLine className="h-4 w-4 text-text-quaternary" />
</Tooltip>
)}
{app.access_mode === AccessMode.EXTERNAL_MEMBERS && (
<Tooltip asChild={false} popupContent={t('accessItemsDescription.external', { ns: 'app' })}>
<RiVerifiedBadgeLine className="h-4 w-4 text-text-quaternary" />
</Tooltip>
)}
</div>
</div>
</div>
<div className="title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary">

21
web/app/components/base/user-avatar-list/index.tsx
View File

@ -72,16 +72,17 @@ export const UserAvatarList: FC<UserAvatarListProps> = memo(({
)}
{shouldShowCount && remainingCount > 0 && (
<div
className="flex items-center justify-center rounded-full bg-gray-500 text-[10px] leading-none text-white ring-2 ring-components-panel-bg"
style={{
zIndex: 0,
width: avatarSizeToPx[size],
height: avatarSizeToPx[size],
}}
>
+
{remainingCount}
<div className="relative shrink-0" style={{ zIndex: 0 }}>
<div
className="inline-flex items-center justify-center rounded-full bg-gray-500 text-[10px] leading-none text-white ring-2 ring-components-panel-bg"
style={{
width: avatarSizeToPx[size],
height: avatarSizeToPx[size],
}}
>
+
{remainingCount}
</div>
</div>
)}
</div>