AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-05-19 09:09:51 +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}
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'>
<Icon src={collection.icon} />
<div className="ml-3 w-0 grow">
@ -258,6 +259,7 @@ const ProviderDetail = ({
</ActionButton>
</div>
</div>
</div>
{!!collection.description[language] && (
<Description text={collection.description[language]} descriptionLineRows={2}></Description>
)}
@ -292,11 +294,12 @@ const ProviderDetail = ({
</>
)}
</div>
{/* Tools */}
<div className='pt-3'>
<div className='flex min-h-0 flex-1 flex-col pt-3'>
{isDetailLoading && <div className='flex h-[200px]'><Loading type='app' /></div>}
{/* Builtin type */}
{!isDetailLoading && (collection.type === CollectionType.builtIn) && isAuthed && (
{!isDetailLoading && (
<>
<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'>
{t('plugin.detailPanel.actionNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
{needAuth && (
@ -315,7 +318,7 @@ const ProviderDetail = ({
)}
</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'>
<span className=''>{t('tools.includeToolNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' }).toLocaleUpperCase()}</span>
@ -335,25 +338,22 @@ const ProviderDetail = ({
</Button>
</>
)}
{/* Custom type */}
{!isDetailLoading && (collection.type === CollectionType.custom) && (
{(collection.type === CollectionType.custom) && (
<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>
</div>
)}
{/* Workflow type */}
{!isDetailLoading && (collection.type === CollectionType.workflow) && (
{(collection.type === CollectionType.workflow) && (
<div className='system-sm-semibold-uppercase text-text-secondary'>
<span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>
</div>
)}
{!isDetailLoading && (
<div className='mt-1 py-2'>
</div>
<div className='mt-1 flex-1 overflow-y-auto py-2'>
{collection.type !== CollectionType.workflow && toolList.map(tool => (
<ToolItem
key={tool.name}
disabled={false}
// disabled={needAuth && (isBuiltIn || isModel) && !isAuthed}
collection={collection}
tool={tool}
isBuiltIn={isBuiltIn}
@ -371,6 +371,7 @@ const ProviderDetail = ({
</div>
))}
</div>
</>
)}
</div>
{showSettingAuth && (