feat: support expand the selected file struct

This commit is contained in:
Joel 2026-01-19 15:38:43 +08:00
parent 1dfee05b7e
commit f9fd234cf8
2 changed files with 28 additions and 5 deletions

View File

@ -13,7 +13,7 @@ import Loading from '@/app/components/base/loading'
import TreeGuideLines from '@/app/components/workflow/skill/file-tree/tree-guide-lines'
import { useSkillAssetTreeData } from '@/app/components/workflow/skill/hooks/use-skill-asset-tree'
import { getFileIconType } from '@/app/components/workflow/skill/utils/file-utils'
import { toOpensObject } from '@/app/components/workflow/skill/utils/tree-utils'
import { findNodeById, getAncestorIds, toOpensObject } from '@/app/components/workflow/skill/utils/tree-utils'
import { useStore, useWorkflowStore } from '@/app/components/workflow/store'
import { cn } from '@/utils/classnames'
@ -109,9 +109,15 @@ FilePickerTreeNode.displayName = 'FilePickerTreeNode'
type FilePickerPanelProps = {
onSelectNode: (node: TreeNodeData) => void
focusNodeId?: string
syncExpandedState?: boolean
}
const FilePickerPanel: FC<FilePickerPanelProps> = ({ onSelectNode }) => {
const FilePickerPanel: FC<FilePickerPanelProps> = ({
onSelectNode,
focusNodeId,
syncExpandedState = true,
}) => {
const { t } = useTranslation('workflow')
const { data: treeData, isLoading, error } = useSkillAssetTreeData()
const expandedFolderIds = useStore(s => s.expandedFolderIds)
@ -120,7 +126,19 @@ const FilePickerPanel: FC<FilePickerPanelProps> = ({ onSelectNode }) => {
const containerSize = useSize(containerRef)
const treeNodes = useMemo(() => treeData?.children || [], [treeData?.children])
const initialOpenState = useMemo(() => toOpensObject(expandedFolderIds), [expandedFolderIds])
const initialOpenState = useMemo(() => {
const nextState = syncExpandedState ? toOpensObject(expandedFolderIds) : {}
if (!focusNodeId || treeNodes.length === 0)
return nextState
const focusNode = findNodeById(treeNodes, focusNodeId)
const ancestorIds = getAncestorIds(focusNodeId, treeNodes)
ancestorIds.forEach(id => (nextState[id] = true))
if (focusNode?.node_type === 'folder')
nextState[focusNode.id] = true
return nextState
}, [expandedFolderIds, focusNodeId, syncExpandedState, treeNodes])
const renderNode = useCallback((props: NodeRendererProps<TreeNodeData>) => (
<FilePickerTreeNode {...props} onSelectNode={onSelectNode} />
@ -171,7 +189,8 @@ const FilePickerPanel: FC<FilePickerPanelProps> = ({ onSelectNode }) => {
openByDefault={false}
initialOpenState={initialOpenState}
onToggle={(id) => {
storeApi.getState().toggleFolder(id)
if (syncExpandedState)
storeApi.getState().toggleFolder(id)
}}
disableDrag
disableDrop

View File

@ -80,7 +80,11 @@ const FileReferenceBlock: FC<FileReferenceBlockProps> = ({ nodeKey, resourceId }
</span>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className="z-[1000]">
<FilePickerPanel onSelectNode={handleSelect} />
<FilePickerPanel
onSelectNode={handleSelect}
focusNodeId={resourceId}
syncExpandedState={false}
/>
</PortalToFollowElemContent>
</PortalToFollowElem>
)