mirror of
https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git
synced 2025-05-20 01:28:36 +08:00
refactor: improve layout and structure of ProviderDetail component (#18523)
This commit is contained in:
GuanMu
GitHub
parent
de750a67ec
commit
1ce2c7f3e8
@ -236,27 +236,29 @@ 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='mb-3 flex'>
|
<div className="shrink-0">
|
||||||
<Icon src={collection.icon} />
|
<div className='mb-3 flex'>
|
||||||
<div className="ml-3 w-0 grow">
|
<Icon src={collection.icon} />
|
||||||
<div className="flex h-5 items-center">
|
<div className="ml-3 w-0 grow">
|
||||||
<Title title={collection.label[language]} />
|
<div className="flex h-5 items-center">
|
||||||
|
<Title title={collection.label[language]} />
|
||||||
|
</div>
|
||||||
|
<div className='mb-1 flex h-4 items-center justify-between'>
|
||||||
|
<OrgInfo
|
||||||
|
className="mt-0.5"
|
||||||
|
packageNameClassName='w-auto'
|
||||||
|
orgName={collection.author}
|
||||||
|
packageName={collection.name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='mb-1 flex h-4 items-center justify-between'>
|
<div className='flex gap-1'>
|
||||||
<OrgInfo
|
<ActionButton onClick={onHide}>
|
||||||
className="mt-0.5"
|
<RiCloseLine className='h-4 w-4' />
|
||||||
packageNameClassName='w-auto'
|
</ActionButton>
|
||||||
orgName={collection.author}
|
|
||||||
packageName={collection.name}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='flex gap-1'>
|
|
||||||
<ActionButton onClick={onHide}>
|
|
||||||
<RiCloseLine className='h-4 w-4' />
|
|
||||||
</ActionButton>
|
|
||||||
</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,85 +294,84 @@ 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 && (collection.type === CollectionType.builtIn) && 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 && (
|
|
||||||
<Button
|
|
||||||
variant='secondary'
|
|
||||||
size='small'
|
|
||||||
onClick={() => {
|
|
||||||
if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
|
|
||||||
showSettingAuthModal()
|
|
||||||
}}
|
|
||||||
disabled={!isCurrentWorkspaceManager}
|
|
||||||
>
|
|
||||||
<Indicator className='mr-2' color={'green'} />
|
|
||||||
{t('tools.auth.authorized')}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!isDetailLoading && (collection.type === CollectionType.builtIn) && 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>
|
|
||||||
<span className='px-1'>·</span>
|
|
||||||
<span className='text-util-colors-orange-orange-600'>{t('tools.auth.setup').toLocaleUpperCase()}</span>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant='primary'
|
|
||||||
className={cn('my-3 w-full shrink-0')}
|
|
||||||
onClick={() => {
|
|
||||||
if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
|
|
||||||
showSettingAuthModal()
|
|
||||||
}}
|
|
||||||
disabled={!isCurrentWorkspaceManager}
|
|
||||||
>
|
|
||||||
{t('tools.auth.unauthorized')}
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{/* Custom type */}
|
|
||||||
{!isDetailLoading && (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) && (
|
|
||||||
<div className='system-sm-semibold-uppercase text-text-secondary'>
|
|
||||||
<span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{!isDetailLoading && (
|
{!isDetailLoading && (
|
||||||
<div className='mt-1 py-2'>
|
<>
|
||||||
{collection.type !== CollectionType.workflow && toolList.map(tool => (
|
<div className="shrink-0">
|
||||||
<ToolItem
|
{(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && isAuthed && (
|
||||||
key={tool.name}
|
<div className='system-sm-semibold-uppercase mb-1 flex h-6 items-center justify-between text-text-secondary'>
|
||||||
disabled={false}
|
{t('plugin.detailPanel.actionNum', { num: toolList.length, action: toolList.length > 1 ? 'actions' : 'action' })}
|
||||||
// disabled={needAuth && (isBuiltIn || isModel) && !isAuthed}
|
{needAuth && (
|
||||||
collection={collection}
|
<Button
|
||||||
tool={tool}
|
variant='secondary'
|
||||||
isBuiltIn={isBuiltIn}
|
size='small'
|
||||||
isModel={isModel}
|
onClick={() => {
|
||||||
/>
|
if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
|
||||||
))}
|
showSettingAuthModal()
|
||||||
{collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
|
}}
|
||||||
<div key={item.name} className='mb-1 py-1'>
|
disabled={!isCurrentWorkspaceManager}
|
||||||
<div className='mb-1 flex items-center gap-2'>
|
>
|
||||||
<span className='code-sm-semibold text-text-secondary'>{item.name}</span>
|
<Indicator className='mr-2' color={'green'} />
|
||||||
<span className='system-xs-regular text-text-tertiary'>{item.type}</span>
|
{t('tools.auth.authorized')}
|
||||||
<span className='system-xs-medium text-text-warning-secondary'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
|
</Button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className='system-xs-regular text-text-tertiary'>{item.llm_description}</div>
|
)}
|
||||||
</div>
|
{(collection.type === CollectionType.builtIn || collection.type === CollectionType.model) && needAuth && !isAuthed && (
|
||||||
))}
|
<>
|
||||||
</div>
|
<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='px-1'>·</span>
|
||||||
|
<span className='text-util-colors-orange-orange-600'>{t('tools.auth.setup').toLocaleUpperCase()}</span>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant='primary'
|
||||||
|
className={cn('my-3 w-full shrink-0')}
|
||||||
|
onClick={() => {
|
||||||
|
if (collection.type === CollectionType.builtIn || collection.type === CollectionType.model)
|
||||||
|
showSettingAuthModal()
|
||||||
|
}}
|
||||||
|
disabled={!isCurrentWorkspaceManager}
|
||||||
|
>
|
||||||
|
{t('tools.auth.unauthorized')}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{(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>
|
||||||
|
)}
|
||||||
|
{(collection.type === CollectionType.workflow) && (
|
||||||
|
<div className='system-sm-semibold-uppercase text-text-secondary'>
|
||||||
|
<span className=''>{t('tools.createTool.toolInput.title').toLocaleUpperCase()}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</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}
|
||||||
|
collection={collection}
|
||||||
|
tool={tool}
|
||||||
|
isBuiltIn={isBuiltIn}
|
||||||
|
isModel={isModel}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{collection.type === CollectionType.workflow && (customCollection as WorkflowToolProviderResponse)?.tool?.parameters.map(item => (
|
||||||
|
<div key={item.name} className='mb-1 py-1'>
|
||||||
|
<div className='mb-1 flex items-center gap-2'>
|
||||||
|
<span className='code-sm-semibold text-text-secondary'>{item.name}</span>
|
||||||
|
<span className='system-xs-regular text-text-tertiary'>{item.type}</span>
|
||||||
|
<span className='system-xs-medium text-text-warning-secondary'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
|
||||||
|
</div>
|
||||||
|
<div className='system-xs-regular text-text-tertiary'>{item.llm_description}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{showSettingAuth && (
|
{showSettingAuth && (
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user