From dc9658b003bfc6ba7b42049978afdc5d18d72f62 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Tue, 20 Jan 2026 17:03:03 +0800
Subject: [PATCH] perf(web): avoid per-node tree query subscription

---
 .../components/workflow/skill/file-tree/index.tsx   |  8 ++++++--
 .../workflow/skill/file-tree/tree-node.tsx          | 13 +++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/web/app/components/workflow/skill/file-tree/index.tsx b/web/app/components/workflow/skill/file-tree/index.tsx
index c004acaa0a..85f6c055b4 100644
--- a/web/app/components/workflow/skill/file-tree/index.tsx
+++ b/web/app/components/workflow/skill/file-tree/index.tsx
@@ -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>
diff --git a/web/app/components/workflow/skill/file-tree/tree-node.tsx b/web/app/components/workflow/skill/file-tree/tree-node.tsx
index 01fe16f9bd..02a61b27be 100644
--- a/web/app/components/workflow/skill/file-tree/tree-node.tsx
+++ b/web/app/components/workflow/skill/file-tree/tree-node.tsx
@@ -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,