AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-14 11:25:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

list loading

Browse Source
This commit is contained in:
jZonG 2025-05-09 14:38:37 +08:00
parent 5fd352c562
commit 32f87db951
3 changed files with 84 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
web/app/components/tools/mcp/detail/content.tsx
View File

@ -1,5 +1,5 @@
'use client'
import React, { useCallback } from 'react'
import React, { useCallback, useState } from 'react'
import type { FC } from 'react'
import { useBoolean } from 'ahooks'
import { useTranslation } from 'react-i18next'
@ -7,6 +7,7 @@ import { useAppContext } from '@/context/app-context'
import {
RiCloseLine,
RiLoader2Line,
RiLoopLeftLine,
} from '@remixicon/react'
import type { ToolWithProvider } from '../../../workflow/types'
import Icon from '@/app/components/plugins/card/base/card-icon'
@ -16,6 +17,7 @@ import Confirm from '@/app/components/base/confirm'
import Indicator from '@/app/components/header/indicator'
import MCPModal from '../modal'
import OperationDropdown from './operation-dropdown'
import ListLoading from './list-loading'
import { useDeleteMCP, useUpdateMCP } from '@/service/use-tools'
import cn from '@/utils/classnames'
@ -80,6 +82,8 @@ const MCPDetailContent: FC<Props> = ({
}
}, [detail, showDeleting, hideDeleting, hideDeleteConfirm, onUpdate])
const [loading, setLoading] = useState(true)
if (!detail)
return null
@ -142,23 +146,48 @@ const MCPDetailContent: FC<Props> = ({
)}
</div>
</div>
<div className='grow overflow-y-auto'>
{!detail.is_team_authorization && (
<div className='flex h-full w-full flex-col items-center justify-center'>
<div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizingRequired')}</div>
{deleting && <div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizing')}</div>}
<div className='system-sm-regular text-text-tertiary'>{t('tools.mcp.authorizeTip')}</div>
<div className='grow'>
<div className='flex shrink-0 justify-between gap-2 px-4 pb-1 pt-2'>
<div className='flex h-6 items-center'>
<div className='system-sm-semibold-uppercase text-text-secondary'>{t('tools.mcp.gettingTools')}</div>
{/* <div className='text-text-secondary system-sm-semibold-uppercase'>{t('tools.mcp.updateTools')}</div> */}
</div>
<div>
<Button size='small'>
<RiLoopLeftLine className='mr-1 h-3.5 w-3.5' />
{t('tools.mcp.update')}
</Button>
{/* <Button size='small'>
<RiLoader2Line className='h-3.5 w-3.5 mr-1 animate-spin' />
{t('tools.mcp.updating')}
</Button> */}
</div>
</div>
{loading && (
<div className='flex h-full w-full grow flex-col overflow-hidden px-4 pb-4'>
<ListLoading />
</div>
)}
{detail.is_team_authorization && (
<div className='flex h-full w-full flex-col items-center justify-center'>
<div className='system-sm-regular mb-3 text-text-tertiary'>{t('tools.mcp.toolsEmpty')}</div>
<Button
variant='primary'
onClick={() => {
// TODO
}}
>{t('tools.mcp.getTools')}</Button>
{!loading && (
<div className='grow overflow-y-auto'>
{!detail.is_team_authorization && (
<div className='flex h-full w-full flex-col items-center justify-center'>
<div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizingRequired')}</div>
{deleting && <div className='system-md-medium mb-1 text-text-secondary'>{t('tools.mcp.authorizing')}</div>}
<div className='system-sm-regular text-text-tertiary'>{t('tools.mcp.authorizeTip')}</div>
</div>
)}
{detail.is_team_authorization && (
<div className='flex h-full w-full flex-col items-center justify-center'>
<div className='system-sm-regular mb-3 text-text-tertiary'>{t('tools.mcp.toolsEmpty')}</div>
<Button
variant='primary'
onClick={() => {
// TODO
}}
>{t('tools.mcp.getTools')}</Button>
</div>
)}
</div>
)}
</div>

37
web/app/components/tools/mcp/detail/list-loading.tsx Normal file
View File

@ -0,0 +1,37 @@
'use client'
import React from 'react'
import cn from '@/utils/classnames'
const ListLoading = () => {
return (
<div className={cn('space-y-2')}>
<div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
<div className='h-2 w-[180px] rounded-sm bg-text-quaternary opacity-20'></div>
<div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
<div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
</div>
<div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
<div className='h-2 w-[148px] rounded-sm bg-text-quaternary opacity-20'></div>
<div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
<div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
</div>
<div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
<div className='h-2 w-[196px] rounded-sm bg-text-quaternary opacity-20'></div>
<div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
<div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
</div>
<div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
<div className='h-2 w-[148px] rounded-sm bg-text-quaternary opacity-20'></div>
<div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
<div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
</div>
<div className='space-y-3 rounded-xl bg-components-panel-on-panel-item-bg-hover p-4'>
<div className='h-2 w-[180px] rounded-sm bg-text-quaternary opacity-20'></div>
<div className='h-2 rounded-sm bg-text-quaternary opacity-10'></div>
<div className='mr-10 h-2 rounded-sm bg-text-quaternary opacity-10'></div>
</div>
</div>
)
}
export default ListLoading

4
web/i18n/en-US/tools.ts
View File

@ -184,8 +184,8 @@ const translation = {
authorizeTip: 'After authorization, tools will be displayed here.',
update: 'Update',
updating: 'Updating',
gettingTools: 'Getting Tools',
updateTools: 'Updating Tools',
gettingTools: 'Getting Tools...',
updateTools: 'Updating Tools...',
toolsEmpty: 'Tools not loaded',
getTools: 'Get tools',
},