opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-06-25 22:31:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: polish tool provider selection and detail drawer (#37940)

Browse Source
This commit is contained in:
yyh 2026-06-25 18:07:32 +08:00 committed by GitHub
parent e90c7ab8a7
commit 48dfbd60d6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/integrations/__tests__/tool-provider-list.spec.tsx
View File

@ -477,7 +477,7 @@ describe('ProviderList', () => {
fireEvent.click(screen.getByTestId('card-google-search'))
expect(screen.getByTestId('card-google-search')).toHaveClass('outline-[1.5px]', 'outline-components-option-card-option-selected-border')
expect(screen.getByTestId('card-google-search')).toHaveClass('after:ring-[1.5px]', 'after:ring-components-option-card-option-selected-border', 'after:ring-inset')
})
})

6
web/app/components/integrations/tool-provider-card.tsx
View File

@ -57,7 +57,7 @@ function IntegrationsToolProviderCard({
data-org={collection.plugin_id ? org : ''}
className={cn(
'group/tool-provider relative flex min-w-0 cursor-pointer flex-col overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-md',
current && 'outline-[1.5px] outline-components-option-card-option-selected-border',
current && 'after:pointer-events-none after:absolute after:inset-0 after:rounded-xl after:ring-[1.5px] after:ring-components-option-card-option-selected-border after:content-[\'\'] after:ring-inset',
)}
>
<div className="flex w-full shrink-0 items-center gap-3 px-4 pt-4 pb-2">
@ -97,10 +97,9 @@ function IntegrationsToolProviderCard({
data-org={collection.plugin_id ? org : ''}
className={cn(
'group/tool-provider relative flex min-w-[min(100%,496px)] flex-1 cursor-pointer flex-col overflow-hidden rounded-xl bg-background-section-burn p-[3px]',
current && 'outline-[1.5px] outline-components-option-card-option-selected-border',
current && 'after:pointer-events-none after:absolute after:inset-0 after:rounded-xl after:ring-[1.5px] after:ring-components-option-card-option-selected-border after:content-[\'\'] after:ring-inset',
)}
>
{shouldShowBuiltInBadge && <CornerMark className="z-20" text={builtInLabel} />}
<div className="relative flex w-full items-center gap-3 overflow-hidden rounded-[10px] border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-3 group-hover/tool-provider:bg-components-panel-on-panel-item-bg-hover">
<Icon src={collection.icon} size="large" />
<div className="flex min-w-0 flex-1 flex-col gap-0.5 py-px">
@ -136,6 +135,7 @@ function IntegrationsToolProviderCard({
</>
)}
</div>
{shouldShowBuiltInBadge && <CornerMark text={builtInLabel} />}
</div>
)
}

4
web/app/components/tools/provider/__tests__/detail.spec.tsx
View File

@ -192,7 +192,11 @@ describe('ProviderDetail', () => {
const dialog = screen.getByRole('dialog')
expect(document.querySelector('.absolute.inset-0.z-50.bg-transparent')).not.toBeInTheDocument()
expect(dialog.closest('.pointer-events-none')).toBeInTheDocument()
expect(dialog).toHaveClass(
'pointer-events-auto',
'touch-auto',
'data-[swipe-direction=right]:top-2',
'data-[swipe-direction=right]:right-2',
'data-[swipe-direction=right]:bottom-2',

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

@ -14,7 +14,6 @@ import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import {
Drawer,
DrawerBackdrop,
DrawerContent,
DrawerPopup,
DrawerPortal,
@ -259,7 +258,8 @@ const ProviderDetail = ({
return (
<Drawer
open={!!collection}
modal
modal={false}
disablePointerDismissal
swipeDirection="right"
onOpenChange={(open) => {
if (!open)
@ -267,9 +267,8 @@ const ProviderDetail = ({
}}
>
<DrawerPortal>
<DrawerBackdrop className="bg-transparent" />
<DrawerViewport>
<DrawerPopup className={cn('justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
<DrawerViewport className="pointer-events-none">
<DrawerPopup className={cn('pointer-events-auto touch-auto justify-start bg-components-panel-bg! p-0! shadow-xl data-[swipe-direction=right]:top-2 data-[swipe-direction=right]:right-2 data-[swipe-direction=right]:bottom-2 data-[swipe-direction=right]:h-[calc(100dvh-16px)] data-[swipe-direction=right]:w-[400px] data-[swipe-direction=right]:max-w-[calc(100vw-1rem)] data-[swipe-direction=right]:rounded-2xl data-[swipe-direction=right]:border-[0.5px] data-[swipe-direction=right]:border-components-panel-border')}>
<DrawerContent className="flex min-h-0 flex-1 flex-col p-0 pb-0">
<div className="flex h-full flex-col p-4">
<div className="shrink-0">