chore: fix import avatar error

2026-04-15 09:57:03 +08:00 · 2026-04-10 23:15:22 +08:00 · 2026-04-10 23:15:22 +08:00 · f46c45dd11
commit f46c45dd11
parent 53277d77c9
12 changed files with 35 additions and 44 deletions
--- a/web/app/components/apps/app-card.tsx
+++ b/web/app/components/apps/app-card.tsx
@ -5,7 +5,6 @@ import type { HtmlContentProps } from '@/app/components/base/popover'
 import type { Tag } from '@/app/components/base/tag-management/constant'
 import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
 import type { EnvironmentVariable } from '@/app/components/workflow/types'
-import type { WorkflowOnlineUser } from '@/models/app'
 import type { App } from '@/types/app'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
 import * as React from 'react'
@ -27,7 +26,6 @@ import {
  AlertDialogDescription,
  AlertDialogTitle,
 } from '@/app/components/base/ui/alert-dialog'
-import { UserAvatarList } from '@/app/components/base/user-avatar-list'
 import { toast } from '@/app/components/base/ui/toast'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { useAppContext } from '@/context/app-context'
@ -68,10 +66,9 @@ const AccessControl = dynamic(() => import('@/app/components/app/app-access-cont
 type AppCardProps = {
  app: App
  onRefresh?: () => void
-  onlineUsers?: WorkflowOnlineUser[]
 }

-const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
+const AppCard = ({ app, onRefresh }: AppCardProps) => {
  const { t } = useTranslation()
  const deleteAppNameInputId = useId()
  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
@ -363,19 +360,6 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
    return `${t('segment.editedAt', { ns: 'datasetDocuments' })} ${timeText}`
  }, [app.updated_at, app.created_at, t])

-  const onlineUserAvatars = useMemo(() => {
-    if (!onlineUsers.length)
-      return []
-
-    return onlineUsers
-      .map(user => ({
-        id: user.user_id || user.sid || '',
-        name: user.username || 'User',
-        avatar_url: user.avatar || undefined,
-      }))
-      .filter(user => !!user.id)
-  }, [onlineUsers])
-
  return (
    <>
      <div
@ -428,11 +412,6 @@ const AppCard = ({ app, onRefresh, onlineUsers = [] }: AppCardProps) => {
              </Tooltip>
            )}
          </div>
-          <div>
-            {onlineUserAvatars.length > 0 && (
-              <UserAvatarList users={onlineUserAvatars} maxVisible={3} size={20} />
-            )}
-          </div>
        </div>
        <div className="title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary">
          <div
--- a/web/app/components/base/user-avatar-list/index.tsx
+++ b/web/app/components/base/user-avatar-list/index.tsx
@ -1,6 +1,7 @@
 import type { FC } from 'react'
+import type { AvatarSize } from '@/app/components/base/ui/avatar'
 import { memo } from 'react'
-import Avatar from '@/app/components/base/avatar'
+import Avatar from '@/app/components/base/ui/avatar'
 import { getUserColor } from '@/app/components/workflow/collaboration/utils/user-color'
 import { useAppContext } from '@/context/app-context'

@ -13,15 +14,26 @@ type User = {
 type UserAvatarListProps = {
  users: User[]
  maxVisible?: number
-  size?: number
+  size?: AvatarSize
  className?: string
  showCount?: boolean
 }

+const avatarSizeToPx: Record<AvatarSize, number> = {
+  'xxs': 16,
+  'xs': 20,
+  'sm': 24,
+  'md': 32,
+  'lg': 36,
+  'xl': 40,
+  '2xl': 48,
+  '3xl': 64,
+}
+
 export const UserAvatarList: FC<UserAvatarListProps> = memo(({
  users,
  maxVisible = 3,
-  size = 24,
+  size = 'sm',
  className = '',
  showCount = true,
 }) => {
@ -64,8 +76,8 @@ export const UserAvatarList: FC<UserAvatarListProps> = memo(({
          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: size,
-            height: size,
+            width: avatarSizeToPx[size],
+            height: avatarSizeToPx[size],
          }}
        >
          +
--- a/web/app/components/workflow/comment/comment-icon.tsx
+++ b/web/app/components/workflow/comment/comment-icon.tsx
@ -221,7 +221,7 @@ export const CommentIcon: FC<CommentIconProps> = memo(({ comment, onClick, isAct
                <UserAvatarList
                  users={participants}
                  maxVisible={3}
-                  size={24}
+                  size="sm"
                />
              </div>
            </div>
--- a/web/app/components/workflow/comment/comment-input.spec.tsx
+++ b/web/app/components/workflow/comment/comment-input.spec.tsx
@ -35,7 +35,7 @@ vi.mock('@/context/app-context', () => ({
  }),
 }))

-vi.mock('@/app/components/base/avatar', () => ({
+vi.mock('@/app/components/base/ui/avatar', () => ({
  default: ({ name }: { name: string }) => <div data-testid="avatar">{name}</div>,
 }))

--- a/web/app/components/workflow/comment/comment-input.tsx
+++ b/web/app/components/workflow/comment/comment-input.tsx
@ -1,7 +1,7 @@
 import type { FC, PointerEvent as ReactPointerEvent } from 'react'
 import { memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Avatar from '@/app/components/base/avatar'
+import Avatar from '@/app/components/base/ui/avatar'
 import { useAppContext } from '@/context/app-context'
 import { cn } from '@/utils/classnames'
 import { MentionInput } from './mention-input'
@ -153,7 +153,7 @@ export const CommentInput: FC<CommentInputProps> = memo(({
              <Avatar
                avatar={userProfile.avatar_url}
                name={userProfile.name}
-                size={24}
+                size="sm"
                className="block size-full rounded-full"
              />
            </div>
--- a/web/app/components/workflow/comment/comment-preview.tsx
+++ b/web/app/components/workflow/comment/comment-preview.tsx
@ -38,7 +38,7 @@ const CommentPreview: FC<CommentPreviewProps> = ({ comment, onClick }) => {
        <UserAvatarList
          users={participants}
          maxVisible={3}
-          size={24}
+          size="sm"
        />
      </div>

--- a/web/app/components/workflow/comment/mention-input.tsx
+++ b/web/app/components/workflow/comment/mention-input.tsx
@ -17,9 +17,9 @@ import {
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import Textarea from 'react-textarea-autosize'
-import Avatar from '@/app/components/base/avatar'
 import Button from '@/app/components/base/button'
 import EnterKey from '@/app/components/base/icons/src/public/common/EnterKey'
+import Avatar from '@/app/components/base/ui/avatar'
 import { useParams } from '@/next/navigation'
 import { fetchMentionableUsers } from '@/service/workflow-comment'
 import { cn } from '@/utils/classnames'
@ -636,7 +636,7 @@ const MentionInputInner = forwardRef<HTMLTextAreaElement, MentionInputProps>(({
              <Avatar
                avatar={user.avatar_url || null}
                name={user.name}
-                size={24}
+                size="sm"
                className="shrink-0"
              />
              <div className="min-w-0 flex-1">
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@ -6,9 +6,9 @@ import { RiArrowDownSLine, RiArrowUpSLine, RiCheckboxCircleFill, RiCheckboxCircl
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useReactFlow, useViewport } from 'reactflow'
-import Avatar from '@/app/components/base/avatar'
 import Divider from '@/app/components/base/divider'
 import InlineDeleteConfirm from '@/app/components/base/inline-delete-confirm'
+import Avatar from '@/app/components/base/ui/avatar'
 import {
  DropdownMenu,
  DropdownMenuContent,
@ -127,7 +127,7 @@ const ThreadMessage: FC<{
        <Avatar
          name={authorName}
          avatar={avatarUrl || null}
-          size={24}
+          size="sm"
          className={cn('h-8 w-8 rounded-full')}
          backgroundColor={userColor}
        />
@ -558,7 +558,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                              <Avatar
                                name={reply.created_by_account?.name || t('comments.fallback.user', { ns: 'workflow' })}
                                avatar={reply.created_by_account?.avatar_url || null}
-                                size={24}
+                                size="sm"
                                className="h-8 w-8 rounded-full"
                              />
                            </div>
@ -607,7 +607,7 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
              <Avatar
                avatar={userProfile?.avatar_url || null}
                name={userProfile?.name || t('you', { ns: 'common' })}
-                size={24}
+                size="sm"
                className="h-8 w-8"
              />
              <div className="flex-1 rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-[2px] shadow-sm">
--- a/web/app/components/workflow/header/online-users.tsx
+++ b/web/app/components/workflow/header/online-users.tsx
@ -3,7 +3,7 @@ import type { OnlineUser } from '../collaboration/types/collaboration'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useEffect, useState } from 'react'
 import { useReactFlow } from 'reactflow'
-import Avatar from '@/app/components/base/avatar'
+import Avatar from '@/app/components/base/ui/avatar'
 import {
  Popover,
  PopoverContent,
@ -134,7 +134,7 @@ const OnlineUsers = () => {
                    <Avatar
                      name={user.username || 'User'}
                      avatar={getAvatarUrl(user)}
-                      size={24}
+                      size="sm"
                      className="ring-1 ring-components-panel-bg"
                      backgroundColor={userColor}
                    />
@ -204,7 +204,7 @@ const OnlineUsers = () => {
                        <Avatar
                          name={user.username || 'User'}
                          avatar={getAvatarUrl(user)}
-                          size={24}
+                          size="sm"
                          backgroundColor={userColor}
                        />
                      </div>
--- a/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx
@ -509,7 +509,7 @@ const BasePanel: FC<BasePanelProps> = ({
                <UserAvatarList
                  users={viewingUsers}
                  maxVisible={3}
-                  size={24}
+                  size="sm"
                />
              </div>
            )}
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/web/app/components/workflow/nodes/_base/node.tsx
@ -279,7 +279,7 @@ const BaseNode: FC<BaseNodeProps> = ({
                <UserAvatarList
                  users={viewingUsers}
                  maxVisible={3}
-                  size={24}
+                  size="sm"
                />
              </div>
            )}
--- a/web/app/components/workflow/panel/comments-panel/index.tsx
+++ b/web/app/components/workflow/panel/comments-panel/index.tsx
@ -150,7 +150,7 @@ const CommentsPanel = () => {
                  <UserAvatarList
                    users={c.participants}
                    maxVisible={3}
-                    size={24}
+                    size="sm"
                  />
                  <div className="ml-2 flex items-center">
                    {c.resolved