mirror of https://github.com/langgenius/dify.git
block-icon
This commit is contained in:
StyleZhang
parent
13174aac18
commit
45ef4059f0
|
|
@ -14,11 +14,13 @@ import {
|
|||
TemplatingTransform,
|
||||
VariableX,
|
||||
} from '@/app/components/base/icons/src/vender/workflow'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
|
||||
type BlockIconProps = {
|
||||
type: BlockEnum
|
||||
size?: string
|
||||
className?: string
|
||||
icon?: any
|
||||
}
|
||||
const ICON_CONTAINER_CLASSNAME_SIZE_MAP: Record<string, string> = {
|
||||
sm: 'w-5 h-5 rounded-md shadow-xs',
|
||||
|
|
@ -57,6 +59,7 @@ const BlockIcon: FC<BlockIconProps> = ({
|
|||
type,
|
||||
size = 'sm',
|
||||
className,
|
||||
icon,
|
||||
}) => {
|
||||
return (
|
||||
<div className={`
|
||||
|
|
@ -66,7 +69,36 @@ const BlockIcon: FC<BlockIconProps> = ({
|
|||
${className}
|
||||
`}
|
||||
>
|
||||
{getIcon(type, 'w-3.5 h-3.5')}
|
||||
{
|
||||
type !== BlockEnum.Tool && (
|
||||
getIcon(type, 'w-3.5 h-3.5')
|
||||
)
|
||||
}
|
||||
{
|
||||
type === BlockEnum.Tool && icon && (
|
||||
<>
|
||||
{
|
||||
typeof icon === 'string'
|
||||
? (
|
||||
<div
|
||||
className='shrink-0 w-full h-full bg-cover bg-center rounded-md'
|
||||
style={{
|
||||
backgroundImage: `url(${icon})`,
|
||||
}}
|
||||
></div>
|
||||
)
|
||||
: (
|
||||
<AppIcon
|
||||
className='shrink-0 !w-full !h-full'
|
||||
size='tiny'
|
||||
icon={icon?.content}
|
||||
background={icon?.background}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -107,6 +107,7 @@ const Item = ({
|
|||
tool_name: tool.name,
|
||||
_icon: data.icon,
|
||||
title: tool.label[language],
|
||||
desc: tool.description[language],
|
||||
})}
|
||||
>
|
||||
<div className='absolute left-[22px] w-[1px] h-8 bg-black/5' />
|
||||
|
|
|
|||
|
|
@ -30,5 +30,6 @@ export type ToolDefaultValue = {
|
|||
provider_type: string
|
||||
tool_name: string
|
||||
title: string
|
||||
desc: string
|
||||
_icon: Collection['icon']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,10 @@ const NextStep = ({
|
|||
return (
|
||||
<div className='flex py-1'>
|
||||
<div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-xs'>
|
||||
<BlockIcon type={selectedNode!.data.type} />
|
||||
<BlockIcon
|
||||
type={selectedNode!.data.type}
|
||||
icon={selectedNode!.data._icon}
|
||||
/>
|
||||
</div>
|
||||
<Line linesNumber={branches ? branches.length : 1} />
|
||||
<div className='grow'>
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ const Item = ({
|
|||
}
|
||||
<BlockIcon
|
||||
type={data.type}
|
||||
icon={data._icon}
|
||||
className='shrink-0 mr-1.5'
|
||||
/>
|
||||
<div className='grow'>{data.title}</div>
|
||||
|
|
|
|||
|
|
@ -7,9 +7,7 @@ import {
|
|||
memo,
|
||||
} from 'react'
|
||||
import type { NodeProps } from '../../types'
|
||||
import { BlockEnum } from '@/app/components/workflow/types'
|
||||
import BlockIcon from '@/app/components/workflow/block-icon'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
|
||||
type BaseNodeProps = {
|
||||
children: ReactElement
|
||||
|
|
@ -31,40 +29,12 @@ const BaseNode: FC<BaseNodeProps> = ({
|
|||
`}
|
||||
>
|
||||
<div className='flex items-center px-3 pt-3 pb-2'>
|
||||
{
|
||||
type !== BlockEnum.Tool && (
|
||||
<BlockIcon
|
||||
className='shrink-0 mr-2'
|
||||
type={data.type}
|
||||
size='md'
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
type === BlockEnum.Tool && (
|
||||
<>
|
||||
{
|
||||
typeof data._icon === 'string'
|
||||
? (
|
||||
<div
|
||||
className='shrink-0 mr-2 w-6 h-6 bg-cover bg-center rounded-md'
|
||||
style={{
|
||||
backgroundImage: `url(${data._icon})`,
|
||||
}}
|
||||
></div>
|
||||
)
|
||||
: (
|
||||
<AppIcon
|
||||
className='shrink-0 mr-2'
|
||||
size='tiny'
|
||||
icon={data._icon?.content}
|
||||
background={data._icon?.background}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
<BlockIcon
|
||||
className='shrink-0 mr-2'
|
||||
type={data.type}
|
||||
size='md'
|
||||
icon={data._icon}
|
||||
/>
|
||||
<div
|
||||
title={data.title}
|
||||
className='grow text-[13px] font-semibold text-gray-700 truncate'
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ import { Play } from '@/app/components/base/icons/src/vender/line/mediaAndDevice
|
|||
import TooltipPlus from '@/app/components/base/tooltip-plus'
|
||||
import type { Node } from '@/app/components/workflow/types'
|
||||
import { BlockEnum } from '@/app/components/workflow/types'
|
||||
import AppIcon from '@/app/components/base/app-icon'
|
||||
|
||||
type BasePanelProps = {
|
||||
children: ReactElement
|
||||
|
|
@ -51,40 +50,12 @@ const BasePanel: FC<BasePanelProps> = ({
|
|||
<div className='w-[420px] h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl overflow-y-auto'>
|
||||
<div className='sticky top-0 bg-white border-b-[0.5px] border-black/5 z-10'>
|
||||
<div className='flex items-center px-4 pt-4 pb-1'>
|
||||
{
|
||||
type !== BlockEnum.Tool && (
|
||||
<BlockIcon
|
||||
className='shrink-0 mr-1'
|
||||
type={data.type}
|
||||
size='md'
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
type === BlockEnum.Tool && (
|
||||
<>
|
||||
{
|
||||
typeof data._icon === 'string'
|
||||
? (
|
||||
<div
|
||||
className='shrink-0 mr-2 w-6 h-6 bg-cover bg-center rounded-md'
|
||||
style={{
|
||||
backgroundImage: `url(${data._icon})`,
|
||||
}}
|
||||
></div>
|
||||
)
|
||||
: (
|
||||
<AppIcon
|
||||
className='shrink-0 mr-2'
|
||||
size='tiny'
|
||||
icon={data._icon?.content}
|
||||
background={data._icon?.background}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
<BlockIcon
|
||||
className='shrink-0 mr-1'
|
||||
type={data.type}
|
||||
icon={data._icon}
|
||||
size='md'
|
||||
/>
|
||||
<TitleInput
|
||||
value={data.title || ''}
|
||||
onChange={handleTitleChange}
|
||||
|
|
|
|||
Loading…
Reference in New Issue