youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-05 18:08:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(skill-editor): add blank area context menu and align search/add styles

Browse Source 
Add right-click context menu for file tree blank area with New File,
New Folder, and Upload Files options. Also align search input and
add button styles to match Figma design specs (24px height, 6px radius).
This commit is contained in:
yyh
2026-01-19 11:38:59 +08:00
parent 5f707c5585
commit 021f055c36
6 changed files with 125 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/app/components/workflow/skill/file-tree/tree-context-menu.tsx
View File

@ -9,6 +9,7 @@ import { useCallback, useMemo, useRef } from 'react'
import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
import { useSkillAssetTreeData } from '../hooks/use-skill-asset-tree'
import { findNodeById } from '../utils/tree-utils'
import BlankAreaMenu from './blank-area-menu'
import NodeMenu from './node-menu'
type TreeContextMenuProps = {
@ -29,13 +30,17 @@ const TreeContextMenu: FC<TreeContextMenuProps> = ({ treeRef }) => {
handleClose()
}, ref)
const nodeId = contextMenu?.nodeId
const treeChildren = treeData?.children
const targetNode = useMemo(() => {
if (!contextMenu?.nodeId || !treeData?.children)
if (!nodeId || !treeChildren)
return null
return findNodeById(treeData.children, contextMenu.nodeId)
}, [contextMenu?.nodeId, treeData?.children])
return findNodeById(treeChildren, nodeId)
}, [nodeId, treeChildren])
const isFolder = targetNode?.node_type === 'folder'
const isBlankArea = contextMenu?.type === 'blank'
if (!contextMenu)
return null
@ -49,12 +54,18 @@ const TreeContextMenu: FC<TreeContextMenuProps> = ({ treeRef }) => {
left: contextMenu.left,
}}
>
<NodeMenu
type={isFolder ? 'folder' : 'file'}
nodeId={contextMenu.nodeId}
onClose={handleClose}
treeRef={treeRef}
/>
{isBlankArea
? (
<BlankAreaMenu onClose={handleClose} />
)
: (
<NodeMenu
type={isFolder ? 'folder' : 'file'}
nodeId={contextMenu.nodeId}
onClose={handleClose}
treeRef={treeRef}
/>
)}
</div>
)
}