estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: Optimize component styles and interactions (#23250) (#23251)

Browse Source
This commit is contained in:
HyaCinth
2025-08-01 14:18:38 +08:00
committed by GitHub
parent da5c003f97
commit f7016fd922
3 changed files with 31 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/app/components/plugins/marketplace/empty/index.tsx
View File

@@ -28,7 +28,7 @@ const Empty = ({
<div
key={index}
className={cn(
'mb-3 mr-3 h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
'mb-3 mr-3 h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
index % 4 === 3 && 'mr-0',
index > 11 && 'mb-0',
lightCard && 'bg-background-default-lighter opacity-75',

1
web/app/components/workflow/block-selector/tool/action-item.tsx
View File

@@ -34,6 +34,7 @@ const ToolItem: FC<Props> = ({
<Tooltip
key={payload.name}
position='right'
needsDelay={false}
popupClassName='!p-0 !px-3 !py-2.5 !w-[200px] !leading-[18px] !text-xs !text-gray-700 !border-[0.5px] !border-black/5 !rounded-xl !shadow-lg'
popupContent={(
<div>

56
web/app/components/workflow/nodes/agent/components/tool-icon.tsx
View File

@@ -61,37 +61,39 @@ export const ToolIcon = memo(({ providerName }: ToolIconProps) => {
>
<div
className={classNames(
'relative flex size-5 items-center justify-center rounded-[6px] border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge',
'relative',
)}
ref={containerRef}
>
{(() => {
if (iconFetchError || !icon)
<div className="flex size-5 items-center justify-center overflow-hidden rounded-[6px] border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge">
{(() => {
if (iconFetchError || !icon)
return <Group className="h-3 w-3 opacity-35" />
if (typeof icon === 'string') {
return <img
src={icon}
alt='tool icon'
className={classNames(
'size-3.5 h-full w-full object-cover',
notSuccess && 'opacity-50',
)}
onError={() => setIconFetchError(true)}
/>
}
if (typeof icon === 'object') {
return <AppIcon
className={classNames(
'size-3.5 h-full w-full object-cover',
notSuccess && 'opacity-50',
)}
icon={icon?.content}
background={icon?.background}
/>
}
return <Group className="h-3 w-3 opacity-35" />
if (typeof icon === 'string') {
return <img
src={icon}
alt='tool icon'
className={classNames(
'size-3.5 h-full w-full object-cover',
notSuccess && 'opacity-50',
)}
onError={() => setIconFetchError(true)}
/>
}
if (typeof icon === 'object') {
return <AppIcon
className={classNames(
'size-3.5 h-full w-full object-cover',
notSuccess && 'opacity-50',
)}
icon={icon?.content}
background={icon?.background}
/>
}
return <Group className="h-3 w-3 opacity-35" />
})()}
{indicator && <Indicator color={indicator} className="absolute right-[-1px] top-[-1px]" />}
})()}
</div>
{indicator && <Indicator color={indicator} className="absolute -right-[1px] -top-[1px]" />}
</div>
</Tooltip>
})