mirror of
https://github.com/langgenius/dify.git
synced 2026-05-02 16:38:04 +08:00
388ee087c0
Add right-click context menu and "..." dropdown button for folders in the file tree, enabling file operations within any folder: - New File: Create empty file via Blob upload - New Folder: Create subfolder - Upload File: Upload multiple files to folder - Upload Folder: Upload entire folder structure preserving hierarchy Implementation includes: - FileOperationsMenu: Shared menu component for both triggers - FileTreeContextMenu: Right-click menu with absolute positioning - FileTreeNode: Added context menu and dropdown button for folders - Store slice for context menu state management - i18n strings for en-US and zh-Hans
50 lines
1.2 KiB
TypeScript
50 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import type { FC } from 'react'
|
|
import { useClickAway } from 'ahooks'
|
|
import * as React from 'react'
|
|
import { useCallback, useRef } from 'react'
|
|
import FileOperationsMenu from './file-operations-menu'
|
|
import { useSkillEditorStore, useSkillEditorStoreApi } from './store'
|
|
|
|
/**
|
|
* FileTreeContextMenu - Right-click context menu for file tree
|
|
*
|
|
* Renders at absolute position when contextMenu state is set.
|
|
* Uses useClickAway to close when clicking outside.
|
|
*/
|
|
const FileTreeContextMenu: FC = () => {
|
|
const ref = useRef<HTMLDivElement>(null)
|
|
const contextMenu = useSkillEditorStore(s => s.contextMenu)
|
|
const storeApi = useSkillEditorStoreApi()
|
|
|
|
const handleClose = useCallback(() => {
|
|
storeApi.getState().setContextMenu(null)
|
|
}, [storeApi])
|
|
|
|
useClickAway(() => {
|
|
handleClose()
|
|
}, ref)
|
|
|
|
if (!contextMenu)
|
|
return null
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="fixed z-[100]"
|
|
style={{
|
|
top: contextMenu.top,
|
|
left: contextMenu.left,
|
|
}}
|
|
>
|
|
<FileOperationsMenu
|
|
nodeId={contextMenu.nodeId}
|
|
onClose={handleClose}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default React.memo(FileTreeContextMenu)
|