AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-05-19 17:18:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve layout and structure of ProviderDetail component (#18523)

Browse Source
This commit is contained in:
GuanMu 2025-04-22 13:57:45 +08:00 committed by GitHub
parent de750a67ec
commit 1ce2c7f3e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 95 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/app/components/tools/provider/detail.tsx
View File

@ -236,7 +236,8 @@ const ProviderDetail = ({
positionCenter={false} positionCenter={false}
panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')} panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
> >
<div className='p-4'> <div className='flex h-full flex-col p-4'>
<div className="shrink-0">
<div className='mb-3 flex'> <div className='mb-3 flex'>
<Icon src={collection.icon} /> <Icon src={collection.icon} />
<div className="ml-3 w-0 grow"> <div className="ml-3 w-0 grow">
@ -258,6 +259,7 @@ const ProviderDetail = ({
</ActionButton> </ActionButton>
</div> </div>
</div> </div>
</div>
{!!collection.description[language] && ( {!!collection.description[language] && (
<Description text={collection.description[language]} descriptionLineRows={2}></Description> <Description text={collection.description[language]} descriptionLineRows={2}></Description>
)} )}
@ -292,11 +294,12 @@ const ProviderDetail = ({
</> </>
)} )}
</div> </div>
{/* Tools */} <div className='flex min-h-0 flex-1 flex-col pt-3'>
<div className='pt-3'>
{isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>} {isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
{/* Builtin type */} {!isDetailLoading && (
{!isDetailLoading && (collection.type === CollectionType.builtIn) && isAuthed && ( <>
<div className="shrink-0">
{(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && isAuthed && (
<div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'> <div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'>
{t('plugin.detailPanel.actionNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })} {t('plugin.detailPanel.actionNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
{needAuth && ( {needAuth && (
@ -315,7 +318,7 @@ const ProviderDetail = ({
)} )}
</div> </div>
)} )}
{!isDetailLoading && (collection.type === CollectionType.builtIn) && needAuth && !isAuthed && ( {(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && needAuth && !isAuthed && (
<> <>
<div className='system-sm-semibold-uppercase text-text-secondary'> <div className='system-sm-semibold-uppercase text-text-secondary'>
<span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span> <span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
@ -335,25 +338,22 @@ const ProviderDetail = ({
</Button> </Button>
</> </>
)} )}
{/* Custom type */} {(collection.type === CollectionType.custom) && (
{!isDetailLoading && (collection.type === CollectionType.custom) && (
<div className='system-sm-semibold-uppercase text-text-secondary'> <div className='system-sm-semibold-uppercase text-text-secondary'>
<span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span> <span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
</div> </div>
)} )}
{/* Workflow type */} {(collection.type === CollectionType.workflow) && (
{!isDetailLoading && (collection.type === CollectionType.workflow) && (
<div className='system-sm-semibold-uppercase text-text-secondary'> <div className='system-sm-semibold-uppercase text-text-secondary'>
<span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span> <span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>
</div> </div>
)} )}
{!isDetailLoading && ( </div>
<div className='mt-1 py-2'> <div className='mt-1 flex-1 overflow-y-auto py-2'>
{collection.type !== CollectionType.workflow && toolList.map(tool => ( {collection.type !== CollectionType.workflow && toolList.map(tool => (
<ToolItem <ToolItem
key={tool.name} key={tool.name}
disabled={false} disabled={false}
// disabled={needAuth && (isBuiltIn || isModel) && !isAuthed}
collection={collection} collection={collection}
tool={tool} tool={tool}
isBuiltIn={isBuiltIn} isBuiltIn={isBuiltIn}
@ -371,6 +371,7 @@ const ProviderDetail = ({
</div> </div>
))} ))}
</div> </div>
</>
)} )}
</div> </div>
{showSettingAuth && ( {showSettingAuth && (