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

perf(web): avoid per-node tree query subscription

Browse Source
This commit is contained in:
yyh
2026-01-20 17:03:03 +08:00
parent b527921f3f
commit dc9658b003
2 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/app/components/workflow/skill/file-tree/index.tsx
View File

@ -1,6 +1,6 @@
'use client'
import type { NodeApi, TreeApi } from 'react-arborist'
import type { NodeApi, NodeRendererProps, TreeApi } from 'react-arborist'
import type { TreeNodeData } from '../type'
import type { OpensObject } from '@/app/components/workflow/store/workflow/skill-editor/file-tree-slice'
import { RiDragDropLine } from '@remixicon/react'
@ -145,6 +145,10 @@ const FileTree: React.FC<FileTreeProps> = ({ className }) => {
})
}, [storeApi, treeRef])
const renderTreeNode = useCallback((props: NodeRendererProps<TreeNodeData>) => {
return <TreeNode {...props} treeChildren={treeChildren} />
}, [treeChildren])
useSyncTreeWithActiveTab({
treeRef,
activeTabId,
@ -260,7 +264,7 @@ const FileTree: React.FC<FileTreeProps> = ({ className }) => {
disableDrag
disableDrop
>
{TreeNode}
{renderTreeNode}
</Tree>
</div>
</div>

13
web/app/components/workflow/skill/file-tree/tree-node.tsx
View File

@ -4,7 +4,7 @@ import type { NodeRendererProps } from 'react-arborist'
import type { TreeNodeData } from '../type'
import { RiMoreFill } from '@remixicon/react'
import * as React from 'react'
import { useCallback, useMemo, useState } from 'react'
import { useCallback, useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
PortalToFollowElem,
@ -14,7 +14,6 @@ import {
import { useStore } from '@/app/components/workflow/store'
import { cn } from '@/utils/classnames'
import { useFolderFileDrop } from '../hooks/use-folder-file-drop'
import { useSkillAssetTreeData } from '../hooks/use-skill-asset-tree'
import { useTreeNodeHandlers } from '../hooks/use-tree-node-handlers'
import { useUnifiedDrag } from '../hooks/use-unified-drag'
import NodeMenu from './node-menu'
@ -22,9 +21,11 @@ import TreeEditInput from './tree-edit-input'
import TreeGuideLines from './tree-guide-lines'
import { TreeNodeIcon } from './tree-node-icon'
const emptyTreeChildren: TreeNodeData[] = []
type TreeNodeProps = NodeRendererProps<TreeNodeData> & {
treeChildren: TreeNodeData[]
}
const TreeNode = ({ node, style }: NodeRendererProps<TreeNodeData>) => {
const TreeNode = ({ node, style, treeChildren }: TreeNodeProps) => {
const { t } = useTranslation('workflow')
const isFolder = node.data.node_type === 'folder'
const isSelected = node.isSelected
@ -35,10 +36,6 @@ const TreeNode = ({ node, style }: NodeRendererProps<TreeNodeData>) => {
const [showDropdown, setShowDropdown] = useState(false)
// Get tree data from TanStack Query cache (no extra request)
const { data: treeData } = useSkillAssetTreeData()
const treeChildren = useMemo(() => treeData?.children ?? emptyTreeChildren, [treeData?.children])
const {
handleClick,
handleDoubleClick,