feat: no data placeholder

This commit is contained in:
Joel
2025-06-27 10:36:54 +08:00
parent d114485abd
commit bc1e4c88e0
8 changed files with 150 additions and 0 deletions

View File

@ -0,0 +1,31 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import cn from '@/utils/classnames'
import { Group } from '@/app/components/base/icons/src/vender/other'
import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
import { useTranslation } from 'react-i18next'
type Props = {
className: string
noPlugins?: boolean
}
const NoDataPlaceholder: FC<Props> = ({
className,
noPlugins,
}) => {
const { t } = useTranslation()
const icon = noPlugins ? (<Group className='size-6 text-text-quaternary' />) : (<SearchMenu className='size-8 text-text-tertiary' />)
const text = t(`plugin.autoUpdate.noPluginPlaceholder.${noPlugins ? 'noInstalled' : 'noFound'}`)
return (
<div className={cn('flex items-center justify-center', className)}>
<div className='flex flex-col items-center'>
{icon}
<div className='system-sm-regular mt-2 text-text-tertiary'>{text}</div>
</div>
</div>
)
}
export default React.memo(NoDataPlaceholder)

View File

@ -13,6 +13,7 @@ import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
import ToolItem from './tool-item'
import Loading from '@/app/components/base/loading'
import NoDataPlaceholder from './no-data-placeholder'
type Props = {
trigger: React.ReactNode
@ -100,6 +101,10 @@ const ToolPicker: FC<Props> = ({
</div>
)
const noData = (
<NoDataPlaceholder className='h-[396px]' noPlugins={!query} />
)
return (
<PortalToFollowElem
placement='top'
@ -145,6 +150,7 @@ const ToolPicker: FC<Props> = ({
</div>
</div>
{!isLoading && list.length > 0 && listContent}
{!isLoading && list.length === 0 && noData}
{isLoading && loadingContent}
</div>
</PortalToFollowElemContent>