youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-22 03:37:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: hover show tool icon

Browse Source
This commit is contained in:
Joel
2026-02-06 14:41:47 +08:00
parent 871ec3b0ca
commit 768bfa8a7e
2 changed files with 53 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/component.tsx
View File

@ -4,7 +4,7 @@ import type { ToolValue } from '@/app/components/workflow/block-selector/types'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import type { AppAssetTreeView } from '@/types/app-asset'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { RiAlertFill } from '@remixicon/react'
import { RiAlertFill, RiEqualizer2Line } from '@remixicon/react'
import * as React from 'react'
import { useEffect, useMemo, useState } from 'react'
import { createPortal } from 'react-dom'
@ -358,11 +358,31 @@ const ToolBlockComponent = ({
/>
)
})()
const hoverIcon = (
<RiEqualizer2Line
className={cn(
'hidden size-[14px]',
needAuthorization ? 'text-text-warning' : 'text-text-accent',
isInteractive && 'group-hover:block',
)}
/>
)
const normalIcon = (
<span className={cn('flex items-center justify-center', isInteractive && 'group-hover:hidden')}>
{iconNode}
</span>
)
const iconContent = (
<span className="flex size-4 items-center justify-center">
{normalIcon}
{isInteractive && hoverIcon}
</span>
)
if (!needAuthorization)
return iconNode
return iconContent
return (
<span className="flex size-4 items-center justify-center rounded-[5px] border border-components-panel-border-subtle bg-background-default-dodge">
{iconNode}
{iconContent}
</span>
)
}
@ -521,7 +541,7 @@ const ToolBlockComponent = ({
<span
ref={ref}
className={cn(
'inline-flex items-center gap-[2px] rounded-[5px] border py-px pl-px pr-[3px] shadow-xs',
'group inline-flex items-center gap-[2px] rounded-[5px] border py-px pl-px pr-[3px] shadow-xs',
isInteractive ? 'cursor-pointer' : 'cursor-default',
needAuthorization ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
isSelected && 'border-text-accent',

32
web/app/components/workflow/skill/editor/skill-editor/plugins/tool-block/tool-group-block-component.tsx
View File

@ -3,6 +3,7 @@ import type { PluginDetail } from '@/app/components/plugins/types'
import type { ToolParameter } from '@/app/components/tools/types'
import type { ToolValue } from '@/app/components/workflow/block-selector/types'
import type { ToolWithProvider } from '@/app/components/workflow/types'
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
import { RiAlertFill, RiCloseLine, RiEqualizer2Line } from '@remixicon/react'
import * as React from 'react'
import { useCallback, useEffect, useMemo, useState } from 'react'
@ -105,6 +106,7 @@ const ToolGroupBlockComponent = ({
nodeKey,
tools,
}: ToolGroupBlockComponentProps) => {
const [editor] = useLexicalComposerContext()
const [ref, isSelected] = useSelectOrDelete(nodeKey, DELETE_TOOL_BLOCK_COMMAND)
const { t } = useTranslation()
const authBadgeLabel = t('skillEditor.authorizationBadge', { ns: 'workflow' })
@ -113,6 +115,7 @@ const ToolGroupBlockComponent = ({
const toolBlockContext = useToolBlockContext()
const isUsingExternalMetadata = Boolean(toolBlockContext?.onMetadataChange)
const useModal = Boolean(toolBlockContext?.useModal)
const isInteractive = editor.isEditable()
const [isSettingOpen, setIsSettingOpen] = useState(false)
const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null)
const [expandedToolId, setExpandedToolId] = useState<string | null>(null)
@ -535,11 +538,31 @@ const ToolGroupBlockComponent = ({
/>
)
})()
const hoverIcon = (
<RiEqualizer2Line
className={cn(
'hidden size-[14px]',
needAuthorization ? 'text-text-warning' : 'text-text-accent',
isInteractive && 'group-hover:block',
)}
/>
)
const normalIcon = (
<span className={cn('flex items-center justify-center', isInteractive && 'group-hover:hidden')}>
{iconNode}
</span>
)
const iconContent = (
<span className="flex size-4 items-center justify-center">
{normalIcon}
{isInteractive && hoverIcon}
</span>
)
if (!needAuthorization)
return iconNode
return iconContent
return (
<span className="flex size-4 items-center justify-center rounded-[5px] border border-components-panel-border-subtle bg-background-default-dodge">
{iconNode}
{iconContent}
</span>
)
}
@ -779,12 +802,15 @@ const ToolGroupBlockComponent = ({
<span
ref={ref}
className={cn(
'inline-flex cursor-pointer items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
'inline-flex items-center gap-[2px] rounded-[5px] border px-px py-[1px] shadow-xs',
isInteractive ? 'group cursor-pointer' : 'cursor-default',
needAuthorization ? 'border-state-warning-active bg-state-warning-hover' : 'border-state-accent-hover-alt bg-state-accent-hover',
isSelected && 'border-text-accent',
)}
title={providerLabel}
onMouseDown={() => {
if (!isInteractive)
return
if (!toolItems.length)
return
setIsSettingOpen(true)