From 824b181284972b2372ba4a79606df33efc76bbba Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Mon, 15 Dec 2025 17:57:42 +0800
Subject: [PATCH 01/10] feat: implement virtual list with sliding window for
 TreeExplorer

---
 src/components/common/TreeExplorer.vue       | 328 +++++++++++++++++--
 src/utils/__tests__/virtualListUtils.test.ts | 221 +++++++++++++
 src/utils/virtualListUtils.ts                | 136 ++++++++
 3 files changed, 651 insertions(+), 34 deletions(-)
 create mode 100644 src/utils/__tests__/virtualListUtils.test.ts
 create mode 100644 src/utils/virtualListUtils.ts

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 828d8ff45a..299baf8a64 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -1,45 +1,54 @@
 <template>
-  <Tree
-    v-model:expanded-keys="expandedKeys"
-    v-model:selection-keys="selectionKeys"
-    class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
-    :class="props.class"
-    :value="renderedRoot.children"
-    selection-mode="single"
-    :pt="{
-      nodeLabel: 'tree-explorer-node-label',
-      nodeContent: ({ context }) => ({
-        class: 'group/tree-node',
-        onClick: (e: MouseEvent) =>
-          onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
-        onContextmenu: (e: MouseEvent) =>
-          handleContextMenu(e, context.node as RenderedTreeExplorerNode)
-      }),
-      nodeToggleButton: () => ({
-        onClick: (e: MouseEvent) => {
-          e.stopImmediatePropagation()
-        }
-      })
-    }"
+  <div
+    ref="treeContainerRef"
+    class="tree-container overflow-y-auto max-h-[600px]"
+    @scroll="handleTreeScroll"
   >
-    <template #folder="{ node }">
-      <slot name="folder" :node="node">
-        <TreeExplorerTreeNode :node="node" />
-      </slot>
-    </template>
-    <template #node="{ node }">
-      <slot name="node" :node="node">
-        <TreeExplorerTreeNode :node="node" />
-      </slot>
-    </template>
-  </Tree>
+    <Tree
+      v-model:expanded-keys="expandedKeys"
+      v-model:selection-keys="selectionKeys"
+      class="tree-explorer px-2 py-0 2xl:px-4 bg-transparent"
+      :class="props.class"
+      :value="displayRoot.children"
+      selection-mode="single"
+      :pt="{
+        nodeLabel: 'tree-explorer-node-label',
+        nodeContent: ({ context }) => ({
+          class: 'group/tree-node',
+          onClick: (e: MouseEvent) =>
+            onNodeContentClick(e, context.node as RenderedTreeExplorerNode),
+          onContextmenu: (e: MouseEvent) =>
+            handleContextMenu(e, context.node as RenderedTreeExplorerNode)
+        }),
+        nodeToggleButton: () => ({
+          onClick: (e: MouseEvent) => {
+            e.stopImmediatePropagation()
+          }
+        }),
+        nodeChildren: ({ instance }) =>
+          getNodeChildrenStyle(instance?.node as RenderedTreeExplorerNode)
+      }"
+    >
+      <template #folder="{ node }">
+        <slot name="folder" :node="node">
+          <TreeExplorerTreeNode :node="node" />
+        </slot>
+      </template>
+      <template #node="{ node }">
+        <slot name="node" :node="node">
+          <TreeExplorerTreeNode :node="node" />
+        </slot>
+      </template>
+    </Tree>
+  </div>
   <ContextMenu ref="menu" :model="menuItems" />
 </template>
 <script setup lang="ts">
+import { useThrottleFn } from '@vueuse/core'
 import ContextMenu from 'primevue/contextmenu'
 import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
 import Tree from 'primevue/tree'
-import { computed, provide, ref } from 'vue'
+import { computed, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
@@ -54,6 +63,14 @@ import type {
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
 import { combineTrees, findNodeByKey } from '@/utils/treeUtil'
+import type { WindowRange } from '@/utils/virtualListUtils'
+import {
+  applyWindow as applyWindowUtil,
+  calculateSpacerHeights,
+  createInitialWindowRange,
+  shiftWindowBackward as shiftWindowBackwardUtil,
+  shiftWindowForward as shiftWindowForwardUtil
+} from '@/utils/virtualListUtils'
 
 const expandedKeys = defineModel<Record<string, boolean>>('expandedKeys', {
   required: true
@@ -84,12 +101,241 @@ const {
   }
 )
 
+// Sliding window configuration
+const WINDOW_SIZE = 60
+const BUFFER_SIZE = 20
+const NODE_HEIGHT = 28 // Approximate height per tree node in pixels
+
+// For each parent node, track the sliding window range [start, end)
+const parentWindowRanges = ref<Record<string, WindowRange>>({})
+
+// Track previous expanded keys to detect collapse events
+const prevExpandedKeys = ref<Record<string, boolean>>({})
+
+// Reset window ranges when nodes are collapsed
+watch(
+  expandedKeys,
+  (newKeys) => {
+    for (const key in prevExpandedKeys.value) {
+      if (prevExpandedKeys.value[key] && !newKeys[key]) {
+        delete parentWindowRanges.value[key]
+      }
+    }
+    prevExpandedKeys.value = { ...newKeys }
+  },
+  { deep: true }
+)
+
+// Ref to access the tree container for scroll detection
+const treeContainerRef = ref<HTMLDivElement | null>(null)
+
+// Calculate total top and bottom spacer heights from all expanded nodes
+const getTotalSpacerHeights = () => {
+  let topTotal = 0
+  let bottomTotal = 0
+
+  const calculateForNode = (node: RenderedTreeExplorerNode) => {
+    if (!node.children || node.leaf) return
+    const isExpanded = expandedKeys.value?.[node.key] ?? false
+    if (!isExpanded) return
+
+    const totalChildren = node.children.length
+    const range = parentWindowRanges.value[node.key] ?? {
+      start: 0,
+      end: Math.min(WINDOW_SIZE, totalChildren)
+    }
+
+    topTotal += range.start * NODE_HEIGHT
+    bottomTotal += (totalChildren - range.end) * NODE_HEIGHT
+
+    // Recursively check children in the window
+    for (let i = range.start; i < range.end && i < node.children.length; i++) {
+      calculateForNode(node.children[i])
+    }
+  }
+
+  for (const child of renderedRoot.value.children || []) {
+    calculateForNode(child)
+  }
+
+  return { topTotal, bottomTotal }
+}
+
+// Reset window to the beginning for a single node (recursive)
+const resetNodeWindowToTop = (node: RenderedTreeExplorerNode) => {
+  if (!node.children || node.leaf) return
+  const isExpanded = expandedKeys.value?.[node.key] ?? false
+  if (!isExpanded) return
+
+  parentWindowRanges.value[node.key] = createInitialWindowRange(
+    node.children.length,
+    WINDOW_SIZE
+  )
+
+  // Recursively reset children
+  for (const child of node.children) {
+    resetNodeWindowToTop(child)
+  }
+}
+
+// Reset all windows to the beginning
+const resetWindowsToTop = () => {
+  for (const parent of renderedRoot.value.children || []) {
+    resetNodeWindowToTop(parent)
+  }
+}
+
+// Scroll handler with throttling
+const handleTreeScroll = useThrottleFn(() => {
+  if (!treeContainerRef.value) return
+
+  const container = treeContainerRef.value
+  const scrollTop = container.scrollTop
+  const scrollHeight = container.scrollHeight
+  const clientHeight = container.clientHeight
+
+  // Special case: when scrolled to top, reset all windows to start
+  if (scrollTop === 0) {
+    resetWindowsToTop()
+    return
+  }
+
+  const { topTotal, bottomTotal } = getTotalSpacerHeights()
+  const realContentHeight = scrollHeight - topTotal - bottomTotal
+  const adjustedScrollTop = Math.max(0, scrollTop - topTotal)
+  const scrollPercentage =
+    realContentHeight > 0
+      ? (adjustedScrollTop + clientHeight) / realContentHeight
+      : 1
+
+  // When scrolling near bottom (70%), shift window forward
+  if (scrollPercentage > 0.7) {
+    shiftWindowsForward()
+  }
+  // When scrolling near top (30%), shift window backward
+  if (scrollPercentage < 0.3) {
+    shiftWindowsBackward()
+  }
+}, 100)
+
+// Shift window forward for a single node (recursive)
+const shiftNodeWindowForward = (node: RenderedTreeExplorerNode) => {
+  if (!node.children || node.leaf) return
+  const isExpanded = expandedKeys.value?.[node.key] ?? false
+  if (!isExpanded) return
+
+  const totalChildren = node.children.length
+  const range =
+    parentWindowRanges.value[node.key] ??
+    createInitialWindowRange(totalChildren, WINDOW_SIZE)
+  const newRange = shiftWindowForwardUtil(
+    range,
+    totalChildren,
+    BUFFER_SIZE,
+    WINDOW_SIZE
+  )
+  if (newRange) {
+    parentWindowRanges.value[node.key] = newRange
+  }
+
+  // Recursively process children in current window
+  for (let i = range.start; i < range.end && i < node.children.length; i++) {
+    shiftNodeWindowForward(node.children[i])
+  }
+}
+
+// Shift all windows forward (load more at end)
+const shiftWindowsForward = () => {
+  for (const parent of renderedRoot.value.children || []) {
+    shiftNodeWindowForward(parent)
+  }
+}
+
+// Shift window backward for a single node (recursive)
+const shiftNodeWindowBackward = (node: RenderedTreeExplorerNode) => {
+  if (!node.children || node.leaf) return
+  const isExpanded = expandedKeys.value?.[node.key] ?? false
+  if (!isExpanded) return
+
+  const totalChildren = node.children.length
+  const range =
+    parentWindowRanges.value[node.key] ??
+    createInitialWindowRange(totalChildren, WINDOW_SIZE)
+  const newRange = shiftWindowBackwardUtil(
+    range,
+    totalChildren,
+    BUFFER_SIZE,
+    WINDOW_SIZE
+  )
+  if (newRange) {
+    parentWindowRanges.value[node.key] = newRange
+  }
+
+  // Recursively process children in current window
+  for (let i = range.start; i < range.end && i < node.children.length; i++) {
+    shiftNodeWindowBackward(node.children[i])
+  }
+}
+
+// Shift all windows backward (load more at start)
+const shiftWindowsBackward = () => {
+  for (const parent of renderedRoot.value.children || []) {
+    shiftNodeWindowBackward(parent)
+  }
+}
+
 const renderedRoot = computed<RenderedTreeExplorerNode>(() => {
   const renderedRoot = fillNodeInfo(props.root)
   return newFolderNode.value
     ? combineTrees(renderedRoot, newFolderNode.value)
     : renderedRoot
 })
+
+// Apply sliding window to limit visible children
+const applyWindow = (
+  node: RenderedTreeExplorerNode
+): RenderedTreeExplorerNode =>
+  applyWindowUtil(node, parentWindowRanges.value, WINDOW_SIZE)
+
+// Final tree to display with sliding window applied
+const displayRoot = computed<RenderedTreeExplorerNode>(() => {
+  return {
+    ...renderedRoot.value,
+    children: (renderedRoot.value.children || []).map(applyWindow)
+  }
+})
+
+// Get spacer heights for a node's children container
+const getNodeChildrenStyle = (node: RenderedTreeExplorerNode | undefined) => {
+  if (!node?.children || node.leaf) {
+    return { class: 'virtual-node-children' }
+  }
+
+  // Get the original node from renderedRoot to access full children count
+  const originalNode = findNodeByKey(renderedRoot.value, node.key)
+  if (!originalNode?.children) {
+    return { class: 'virtual-node-children' }
+  }
+
+  const totalChildren = originalNode.children.length
+  const range =
+    parentWindowRanges.value[node.key] ??
+    createInitialWindowRange(totalChildren, WINDOW_SIZE)
+
+  const { topSpacer, bottomSpacer } = calculateSpacerHeights(
+    totalChildren,
+    range,
+    NODE_HEIGHT
+  )
+
+  return {
+    class: 'virtual-node-children',
+    style: {
+      '--top-spacer': `${topSpacer}px`,
+      '--bottom-spacer': `${bottomSpacer}px`
+    }
+  }
+}
 const getTreeNodeIcon = (node: TreeExplorerNode) => {
   if (node.getIcon) {
     const icon = node.getIcon()
@@ -106,6 +352,7 @@ const getTreeNodeIcon = (node: TreeExplorerNode) => {
   const isExpanded = expandedKeys.value?.[node.key] ?? false
   return isExpanded ? 'pi pi-folder-open' : 'pi pi-folder'
 }
+
 const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
   const children = node.children?.map(fillNodeInfo) ?? []
   const totalLeaves = node.leaf
@@ -253,6 +500,19 @@ defineExpose({
   flex-grow: 1;
 }
 
+/* Virtual scrolling spacers using CSS pseudo-elements (only for ul) */
+:deep(ul.virtual-node-children)::before {
+  content: '';
+  display: block;
+  height: var(--top-spacer, 0);
+}
+
+:deep(ul.virtual-node-children)::after {
+  content: '';
+  display: block;
+  height: var(--bottom-spacer, 0);
+}
+
 /*
  * The following styles are necessary to avoid layout shift when dragging nodes over folders.
  * By setting the position to relative on the parent and using an absolutely positioned pseudo-element,
diff --git a/src/utils/__tests__/virtualListUtils.test.ts b/src/utils/__tests__/virtualListUtils.test.ts
new file mode 100644
index 0000000000..af451c40bf
--- /dev/null
+++ b/src/utils/__tests__/virtualListUtils.test.ts
@@ -0,0 +1,221 @@
+import { describe, expect, it } from 'vitest'
+
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+import type { WindowRange } from '../virtualListUtils'
+import {
+  applyWindow,
+  calculateScrollPercentage,
+  calculateSpacerHeights,
+  createInitialWindowRange,
+  shiftWindowBackward,
+  shiftWindowForward
+} from '../virtualListUtils'
+
+describe('virtualListUtils', () => {
+  describe('createInitialWindowRange', () => {
+    it('creates range starting from 0', () => {
+      const range = createInitialWindowRange(100, 60)
+      expect(range).toEqual({ start: 0, end: 60 })
+    })
+
+    it('caps end at totalChildren when less than windowSize', () => {
+      const range = createInitialWindowRange(30, 60)
+      expect(range).toEqual({ start: 0, end: 30 })
+    })
+
+    it('handles zero children', () => {
+      const range = createInitialWindowRange(0, 60)
+      expect(range).toEqual({ start: 0, end: 0 })
+    })
+  })
+
+  describe('shiftWindowForward', () => {
+    it('shifts window forward by buffer size', () => {
+      const currentRange: WindowRange = { start: 0, end: 60 }
+      const result = shiftWindowForward(currentRange, 100, 20, 60)
+      expect(result).toEqual({ start: 20, end: 80 })
+    })
+
+    it('returns null when already at end', () => {
+      const currentRange: WindowRange = { start: 40, end: 100 }
+      const result = shiftWindowForward(currentRange, 100, 20, 60)
+      expect(result).toBeNull()
+    })
+
+    it('caps end at totalChildren', () => {
+      const currentRange: WindowRange = { start: 30, end: 90 }
+      const result = shiftWindowForward(currentRange, 100, 20, 60)
+      expect(result).toEqual({ start: 40, end: 100 })
+    })
+
+    it('adjusts start to maintain window size when near end', () => {
+      const currentRange: WindowRange = { start: 20, end: 80 }
+      const result = shiftWindowForward(currentRange, 95, 20, 60)
+      expect(result).toEqual({ start: 35, end: 95 })
+    })
+  })
+
+  describe('shiftWindowBackward', () => {
+    it('shifts window backward by buffer size', () => {
+      const currentRange: WindowRange = { start: 40, end: 100 }
+      const result = shiftWindowBackward(currentRange, 100, 20, 60)
+      expect(result).toEqual({ start: 20, end: 80 })
+    })
+
+    it('returns null when already at start', () => {
+      const currentRange: WindowRange = { start: 0, end: 60 }
+      const result = shiftWindowBackward(currentRange, 100, 20, 60)
+      expect(result).toBeNull()
+    })
+
+    it('caps start at 0', () => {
+      const currentRange: WindowRange = { start: 10, end: 70 }
+      const result = shiftWindowBackward(currentRange, 100, 20, 60)
+      expect(result).toEqual({ start: 0, end: 60 })
+    })
+
+    it('caps end at totalChildren when window would exceed', () => {
+      const currentRange: WindowRange = { start: 20, end: 50 }
+      const result = shiftWindowBackward(currentRange, 50, 20, 60)
+      expect(result).toEqual({ start: 0, end: 50 })
+    })
+  })
+
+  describe('calculateSpacerHeights', () => {
+    it('calculates correct spacer heights', () => {
+      const range: WindowRange = { start: 20, end: 80 }
+      const result = calculateSpacerHeights(100, range, 28)
+      expect(result).toEqual({
+        topSpacer: 20 * 28,
+        bottomSpacer: 20 * 28
+      })
+    })
+
+    it('returns zero spacers when window covers all children', () => {
+      const range: WindowRange = { start: 0, end: 50 }
+      const result = calculateSpacerHeights(50, range, 28)
+      expect(result).toEqual({
+        topSpacer: 0,
+        bottomSpacer: 0
+      })
+    })
+
+    it('handles window at start', () => {
+      const range: WindowRange = { start: 0, end: 60 }
+      const result = calculateSpacerHeights(100, range, 28)
+      expect(result).toEqual({
+        topSpacer: 0,
+        bottomSpacer: 40 * 28
+      })
+    })
+
+    it('handles window at end', () => {
+      const range: WindowRange = { start: 40, end: 100 }
+      const result = calculateSpacerHeights(100, range, 28)
+      expect(result).toEqual({
+        topSpacer: 40 * 28,
+        bottomSpacer: 0
+      })
+    })
+  })
+
+  describe('calculateScrollPercentage', () => {
+    it('calculates percentage correctly', () => {
+      const result = calculateScrollPercentage(500, 2000, 400, 0, 0)
+      expect(result).toBeCloseTo(0.45)
+    })
+
+    it('adjusts for top spacer height', () => {
+      const result = calculateScrollPercentage(600, 2000, 400, 200, 200)
+      // realContentHeight = 2000 - 200 - 200 = 1600
+      // adjustedScrollTop = max(0, 600 - 200) = 400
+      // percentage = (400 + 400) / 1600 = 0.5
+      expect(result).toBeCloseTo(0.5)
+    })
+
+    it('returns 1 when realContentHeight is 0', () => {
+      const result = calculateScrollPercentage(0, 100, 50, 50, 50)
+      expect(result).toBe(1)
+    })
+
+    it('handles scrollTop less than topSpacerHeight', () => {
+      const result = calculateScrollPercentage(100, 2000, 400, 200, 200)
+      // adjustedScrollTop = max(0, 100 - 200) = 0
+      // realContentHeight = 1600
+      // percentage = (0 + 400) / 1600 = 0.25
+      expect(result).toBeCloseTo(0.25)
+    })
+  })
+
+  describe('applyWindow', () => {
+    const createMockNode = (
+      key: string,
+      children?: RenderedTreeExplorerNode[]
+    ): RenderedTreeExplorerNode => ({
+      key,
+      label: `Node ${key}`,
+      leaf: !children,
+      children,
+      totalLeaves: children ? children.length : 1,
+      icon: 'pi pi-file',
+      type: children ? 'folder' : 'node'
+    })
+
+    it('returns leaf node unchanged', () => {
+      const leafNode = createMockNode('leaf')
+      const result = applyWindow(leafNode, {}, 60)
+      expect(result).toEqual(leafNode)
+    })
+
+    it('returns node with empty children unchanged', () => {
+      const emptyFolderNode = createMockNode('folder', [])
+      const result = applyWindow(emptyFolderNode, {}, 60)
+      expect(result).toEqual(emptyFolderNode)
+    })
+
+    it('applies default window when no range specified', () => {
+      const children = Array.from({ length: 100 }, (_, i) =>
+        createMockNode(`child-${i}`)
+      )
+      const parentNode = createMockNode('parent', children)
+      const result = applyWindow(parentNode, {}, 60)
+      expect(result.children).toHaveLength(60)
+      expect(result.children?.[0].key).toBe('child-0')
+      expect(result.children?.[59].key).toBe('child-59')
+    })
+
+    it('applies specified window range', () => {
+      const children = Array.from({ length: 100 }, (_, i) =>
+        createMockNode(`child-${i}`)
+      )
+      const parentNode = createMockNode('parent', children)
+      const windowRanges = { parent: { start: 20, end: 80 } }
+      const result = applyWindow(parentNode, windowRanges, 60)
+      expect(result.children).toHaveLength(60)
+      expect(result.children?.[0].key).toBe('child-20')
+      expect(result.children?.[59].key).toBe('child-79')
+    })
+
+    it('applies window recursively to nested children', () => {
+      const grandchildren = Array.from({ length: 100 }, (_, i) =>
+        createMockNode(`grandchild-${i}`)
+      )
+      const child = createMockNode('child', grandchildren)
+      const parentNode = createMockNode('parent', [child])
+      const windowRanges = { child: { start: 10, end: 30 } }
+      const result = applyWindow(parentNode, windowRanges, 60)
+      expect(result.children?.[0].children).toHaveLength(20)
+      expect(result.children?.[0].children?.[0].key).toBe('grandchild-10')
+    })
+
+    it('handles window larger than children count', () => {
+      const children = Array.from({ length: 30 }, (_, i) =>
+        createMockNode(`child-${i}`)
+      )
+      const parentNode = createMockNode('parent', children)
+      const result = applyWindow(parentNode, {}, 60)
+      expect(result.children).toHaveLength(30)
+    })
+  })
+})
diff --git a/src/utils/virtualListUtils.ts b/src/utils/virtualListUtils.ts
new file mode 100644
index 0000000000..8686d559cd
--- /dev/null
+++ b/src/utils/virtualListUtils.ts
@@ -0,0 +1,136 @@
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+
+export interface WindowRange {
+  start: number
+  end: number
+}
+
+/**
+ * Apply a sliding window to limit visible children of a node
+ * @param node - The node to apply the window to
+ * @param windowRanges - Map of node keys to their window ranges
+ * @param windowSize - Maximum number of items in the window
+ * @returns The node with windowed children
+ */
+export const applyWindow = (
+  node: RenderedTreeExplorerNode,
+  windowRanges: Record<string, WindowRange>,
+  windowSize: number
+): RenderedTreeExplorerNode => {
+  if (!node.children || node.leaf || node.children.length === 0) {
+    return node
+  }
+
+  const totalChildren = node.children.length
+  const range = windowRanges[node.key] ?? {
+    start: 0,
+    end: Math.min(windowSize, totalChildren)
+  }
+
+  // Recursively apply window to children
+  const windowedChildren = node.children
+    .slice(range.start, range.end)
+    .map((child) => applyWindow(child, windowRanges, windowSize))
+
+  return {
+    ...node,
+    children: windowedChildren
+  }
+}
+
+/**
+ * Shift window forward (load more at end)
+ * @param currentRange - Current window range
+ * @param totalChildren - Total number of children
+ * @param bufferSize - Number of items to shift
+ * @param windowSize - Maximum window size
+ * @returns New window range, or null if no shift needed
+ */
+export const shiftWindowForward = (
+  currentRange: WindowRange,
+  totalChildren: number,
+  bufferSize: number,
+  windowSize: number
+): WindowRange | null => {
+  if (currentRange.end >= totalChildren) {
+    return null
+  }
+  const newEnd = Math.min(currentRange.end + bufferSize, totalChildren)
+  const newStart = Math.max(0, newEnd - windowSize)
+  return { start: newStart, end: newEnd }
+}
+
+/**
+ * Shift window backward (load more at start)
+ * @param currentRange - Current window range
+ * @param totalChildren - Total number of children
+ * @param bufferSize - Number of items to shift
+ * @param windowSize - Maximum window size
+ * @returns New window range, or null if no shift needed
+ */
+export const shiftWindowBackward = (
+  currentRange: WindowRange,
+  totalChildren: number,
+  bufferSize: number,
+  windowSize: number
+): WindowRange | null => {
+  if (currentRange.start <= 0) {
+    return null
+  }
+  const newStart = Math.max(0, currentRange.start - bufferSize)
+  const newEnd = Math.min(newStart + windowSize, totalChildren)
+  return { start: newStart, end: newEnd }
+}
+
+/**
+ * Calculate spacer heights for a node's children
+ * @param totalChildren - Total number of children
+ * @param range - Current window range
+ * @param nodeHeight - Height of each node in pixels
+ * @returns Top and bottom spacer heights
+ */
+export const calculateSpacerHeights = (
+  totalChildren: number,
+  range: WindowRange,
+  nodeHeight: number
+): { topSpacer: number; bottomSpacer: number } => {
+  const topSpacer = range.start * nodeHeight
+  const bottomSpacer = Math.max(0, totalChildren - range.end) * nodeHeight
+  return { topSpacer, bottomSpacer }
+}
+
+/**
+ * Create initial window range for a node
+ * @param totalChildren - Total number of children
+ * @param windowSize - Maximum window size
+ * @returns Initial window range starting from 0
+ */
+export const createInitialWindowRange = (
+  totalChildren: number,
+  windowSize: number
+): WindowRange => ({
+  start: 0,
+  end: Math.min(windowSize, totalChildren)
+})
+
+/**
+ * Calculate scroll percentage adjusted for spacer heights
+ * @param scrollTop - Current scroll position
+ * @param scrollHeight - Total scrollable height
+ * @param clientHeight - Visible height
+ * @param topSpacerHeight - Combined top spacer height
+ * @param bottomSpacerHeight - Combined bottom spacer height
+ * @returns Scroll percentage between 0 and 1
+ */
+export const calculateScrollPercentage = (
+  scrollTop: number,
+  scrollHeight: number,
+  clientHeight: number,
+  topSpacerHeight: number,
+  bottomSpacerHeight: number
+): number => {
+  const realContentHeight = scrollHeight - topSpacerHeight - bottomSpacerHeight
+  if (realContentHeight <= 0) return 1
+  const adjustedScrollTop = Math.max(0, scrollTop - topSpacerHeight)
+  return (adjustedScrollTop + clientHeight) / realContentHeight
+}

From 50be5c9cd5f688e927196eade58c747bcaefb0c6 Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Mon, 15 Dec 2025 18:50:56 +0800
Subject: [PATCH 02/10] fix: set tree container max height to calc(100vh -
 144px)

---
 src/components/common/TreeExplorer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 299baf8a64..043a373273 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="treeContainerRef"
-    class="tree-container overflow-y-auto max-h-[600px]"
+    class="tree-container overflow-y-auto max-h-[calc(100vh-144px)]"
     @scroll="handleTreeScroll"
   >
     <Tree

From de70e5dbb40390c11690ad7754827c33b1b8e741 Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Mon, 15 Dec 2025 18:58:01 +0800
Subject: [PATCH 03/10] refactor: use calculateScrollPercentage utility
 function

Apply suggestion from coderabbitai bot
---
 src/components/common/TreeExplorer.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 043a373273..afb87e2a29 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -66,6 +66,7 @@ import { combineTrees, findNodeByKey } from '@/utils/treeUtil'
 import type { WindowRange } from '@/utils/virtualListUtils'
 import {
   applyWindow as applyWindowUtil,
+  calculateScrollPercentage,
   calculateSpacerHeights,
   createInitialWindowRange,
   shiftWindowBackward as shiftWindowBackwardUtil,
@@ -201,12 +202,13 @@ const handleTreeScroll = useThrottleFn(() => {
   }
 
   const { topTotal, bottomTotal } = getTotalSpacerHeights()
-  const realContentHeight = scrollHeight - topTotal - bottomTotal
-  const adjustedScrollTop = Math.max(0, scrollTop - topTotal)
-  const scrollPercentage =
-    realContentHeight > 0
-      ? (adjustedScrollTop + clientHeight) / realContentHeight
-      : 1
+  const scrollPercentage = calculateScrollPercentage(
+    scrollTop,
+    scrollHeight,
+    clientHeight,
+    topTotal,
+    bottomTotal
+  )
 
   // When scrolling near bottom (70%), shift window forward
   if (scrollPercentage > 0.7) {

From 00d32a01da258605aad8d9300a101585bccfaca8 Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Mon, 15 Dec 2025 19:49:48 +0800
Subject: [PATCH 04/10] refactor: optimize TreeExplorer based on coderabbitai
 suggestions

---
 src/components/common/TreeExplorer.vue | 44 ++++++++++++++++++--------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index afb87e2a29..38dc381d0d 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -62,7 +62,7 @@ import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import { combineTrees, findNodeByKey } from '@/utils/treeUtil'
+import { combineTrees } from '@/utils/treeUtil'
 import type { WindowRange } from '@/utils/virtualListUtils'
 import {
   applyWindow as applyWindowUtil,
@@ -106,23 +106,22 @@ const {
 const WINDOW_SIZE = 60
 const BUFFER_SIZE = 20
 const NODE_HEIGHT = 28 // Approximate height per tree node in pixels
+const SCROLL_FORWARD_THRESHOLD = 0.7 // Shift window forward when scrolled past 70%
+const SCROLL_BACKWARD_THRESHOLD = 0.3 // Shift window backward when scrolled below 30%
 
 // For each parent node, track the sliding window range [start, end)
 const parentWindowRanges = ref<Record<string, WindowRange>>({})
 
-// Track previous expanded keys to detect collapse events
-const prevExpandedKeys = ref<Record<string, boolean>>({})
-
 // Reset window ranges when nodes are collapsed
 watch(
   expandedKeys,
-  (newKeys) => {
-    for (const key in prevExpandedKeys.value) {
-      if (prevExpandedKeys.value[key] && !newKeys[key]) {
+  (newKeys, oldKeys) => {
+    if (!oldKeys) return
+    for (const key in oldKeys) {
+      if (oldKeys[key] && !newKeys[key]) {
         delete parentWindowRanges.value[key]
       }
     }
-    prevExpandedKeys.value = { ...newKeys }
   },
   { deep: true }
 )
@@ -175,7 +174,9 @@ const resetNodeWindowToTop = (node: RenderedTreeExplorerNode) => {
 
   // Recursively reset children
   for (const child of node.children) {
-    resetNodeWindowToTop(child)
+    if (expandedKeys.value?.[child.key]) {
+      resetNodeWindowToTop(child)
+    }
   }
 }
 
@@ -211,11 +212,11 @@ const handleTreeScroll = useThrottleFn(() => {
   )
 
   // When scrolling near bottom (70%), shift window forward
-  if (scrollPercentage > 0.7) {
+  if (scrollPercentage > SCROLL_FORWARD_THRESHOLD) {
     shiftWindowsForward()
   }
   // When scrolling near top (30%), shift window backward
-  if (scrollPercentage < 0.3) {
+  if (scrollPercentage < SCROLL_BACKWARD_THRESHOLD) {
     shiftWindowsBackward()
   }
 }, 100)
@@ -293,6 +294,21 @@ const renderedRoot = computed<RenderedTreeExplorerNode>(() => {
     : renderedRoot
 })
 
+// Build a lookup map for O(1) node access instead of O(n) tree traversal
+const nodeKeyMap = computed<Record<string, RenderedTreeExplorerNode>>(() => {
+  const map: Record<string, RenderedTreeExplorerNode> = {}
+  const buildMap = (node: RenderedTreeExplorerNode) => {
+    map[node.key] = node
+    if (node.children) {
+      for (const child of node.children) {
+        buildMap(child)
+      }
+    }
+  }
+  buildMap(renderedRoot.value)
+  return map
+})
+
 // Apply sliding window to limit visible children
 const applyWindow = (
   node: RenderedTreeExplorerNode
@@ -313,8 +329,8 @@ const getNodeChildrenStyle = (node: RenderedTreeExplorerNode | undefined) => {
     return { class: 'virtual-node-children' }
   }
 
-  // Get the original node from renderedRoot to access full children count
-  const originalNode = findNodeByKey(renderedRoot.value, node.key)
+  // Use lookup map for O(1) access instead of O(n) tree traversal
+  const originalNode = nodeKeyMap.value[node.key]
   if (!originalNode?.children) {
     return { class: 'virtual-node-children' }
   }
@@ -485,7 +501,7 @@ defineExpose({
    * @param targetNodeKey - The key of the node where the folder will be added under
    */
   addFolderCommand: (targetNodeKey: string) => {
-    const targetNode = findNodeByKey(renderedRoot.value, targetNodeKey)
+    const targetNode = nodeKeyMap.value[targetNodeKey]
     if (targetNode) {
       addFolderCommand(targetNode)
     }

From cbf229233717b49b09022b4e344eb1645d70736d Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Mon, 15 Dec 2025 20:01:29 +0800
Subject: [PATCH 05/10] refactor: extract common shiftNodeWindow helper
 function

Apply DRY principle suggestion from coderabbitai
---
 src/components/common/TreeExplorer.vue | 60 ++++++++------------------
 1 file changed, 17 insertions(+), 43 deletions(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 38dc381d0d..ecd24753dc 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -221,8 +221,12 @@ const handleTreeScroll = useThrottleFn(() => {
   }
 }, 100)
 
-// Shift window forward for a single node (recursive)
-const shiftNodeWindowForward = (node: RenderedTreeExplorerNode) => {
+// Shift window for a single node in given direction (recursive)
+type ShiftDirection = 'forward' | 'backward'
+const shiftNodeWindow = (
+  node: RenderedTreeExplorerNode,
+  direction: ShiftDirection
+) => {
   if (!node.children || node.leaf) return
   const isExpanded = expandedKeys.value?.[node.key] ?? false
   if (!isExpanded) return
@@ -231,62 +235,32 @@ const shiftNodeWindowForward = (node: RenderedTreeExplorerNode) => {
   const range =
     parentWindowRanges.value[node.key] ??
     createInitialWindowRange(totalChildren, WINDOW_SIZE)
-  const newRange = shiftWindowForwardUtil(
-    range,
-    totalChildren,
-    BUFFER_SIZE,
-    WINDOW_SIZE
-  )
-  if (newRange) {
-    parentWindowRanges.value[node.key] = newRange
-  }
-
-  // Recursively process children in current window
-  for (let i = range.start; i < range.end && i < node.children.length; i++) {
-    shiftNodeWindowForward(node.children[i])
-  }
-}
-
-// Shift all windows forward (load more at end)
-const shiftWindowsForward = () => {
-  for (const parent of renderedRoot.value.children || []) {
-    shiftNodeWindowForward(parent)
-  }
-}
 
-// Shift window backward for a single node (recursive)
-const shiftNodeWindowBackward = (node: RenderedTreeExplorerNode) => {
-  if (!node.children || node.leaf) return
-  const isExpanded = expandedKeys.value?.[node.key] ?? false
-  if (!isExpanded) return
+  const shiftFn =
+    direction === 'forward' ? shiftWindowForwardUtil : shiftWindowBackwardUtil
+  const newRange = shiftFn(range, totalChildren, BUFFER_SIZE, WINDOW_SIZE)
 
-  const totalChildren = node.children.length
-  const range =
-    parentWindowRanges.value[node.key] ??
-    createInitialWindowRange(totalChildren, WINDOW_SIZE)
-  const newRange = shiftWindowBackwardUtil(
-    range,
-    totalChildren,
-    BUFFER_SIZE,
-    WINDOW_SIZE
-  )
   if (newRange) {
     parentWindowRanges.value[node.key] = newRange
   }
 
   // Recursively process children in current window
   for (let i = range.start; i < range.end && i < node.children.length; i++) {
-    shiftNodeWindowBackward(node.children[i])
+    shiftNodeWindow(node.children[i], direction)
   }
 }
 
-// Shift all windows backward (load more at start)
-const shiftWindowsBackward = () => {
+// Shift all windows in given direction
+const shiftWindows = (direction: ShiftDirection) => {
   for (const parent of renderedRoot.value.children || []) {
-    shiftNodeWindowBackward(parent)
+    shiftNodeWindow(parent, direction)
   }
 }
 
+// Convenience functions for forward/backward
+const shiftWindowsForward = () => shiftWindows('forward')
+const shiftWindowsBackward = () => shiftWindows('backward')
+
 const renderedRoot = computed<RenderedTreeExplorerNode>(() => {
   const renderedRoot = fillNodeInfo(props.root)
   return newFolderNode.value

From b1b78820d0f6b941be322f1a5f8e10f27ae543c2 Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Mon, 15 Dec 2025 20:20:14 +0800
Subject: [PATCH 06/10] refactor: apply coderabbitai suggestions

- Use createInitialWindowRange and calculateSpacerHeights in getTotalSpacerHeights
- Use active range after shift for recursive window processing
- Remove unused export from findNodeByKey
---
 src/components/common/TreeExplorer.vue | 27 +++++++++++++++++---------
 src/utils/treeUtil.ts                  |  5 +----
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index ecd24753dc..75d281f0ae 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -140,13 +140,17 @@ const getTotalSpacerHeights = () => {
     if (!isExpanded) return
 
     const totalChildren = node.children.length
-    const range = parentWindowRanges.value[node.key] ?? {
-      start: 0,
-      end: Math.min(WINDOW_SIZE, totalChildren)
-    }
-
-    topTotal += range.start * NODE_HEIGHT
-    bottomTotal += (totalChildren - range.end) * NODE_HEIGHT
+    const range =
+      parentWindowRanges.value[node.key] ??
+      createInitialWindowRange(totalChildren, WINDOW_SIZE)
+
+    const { topSpacer, bottomSpacer } = calculateSpacerHeights(
+      totalChildren,
+      range,
+      NODE_HEIGHT
+    )
+    topTotal += topSpacer
+    bottomTotal += bottomSpacer
 
     // Recursively check children in the window
     for (let i = range.start; i < range.end && i < node.children.length; i++) {
@@ -244,8 +248,13 @@ const shiftNodeWindow = (
     parentWindowRanges.value[node.key] = newRange
   }
 
-  // Recursively process children in current window
-  for (let i = range.start; i < range.end && i < node.children.length; i++) {
+  // Recursively process children in the active window (after shift)
+  const activeRange = newRange ?? range
+  for (
+    let i = activeRange.start;
+    i < activeRange.end && i < node.children.length;
+    i++
+  ) {
     shiftNodeWindow(node.children[i], direction)
   }
 }
diff --git a/src/utils/treeUtil.ts b/src/utils/treeUtil.ts
index 21f1e45d67..74d27c32d7 100644
--- a/src/utils/treeUtil.ts
+++ b/src/utils/treeUtil.ts
@@ -105,10 +105,7 @@ export function sortedTree(
   return newNode
 }
 
-export const findNodeByKey = <T extends TreeNode>(
-  root: T,
-  key: string
-): T | null => {
+const findNodeByKey = <T extends TreeNode>(root: T, key: string): T | null => {
   if (root.key === key) {
     return root
   }

From 12db16fe18e3aa7749135bcbe94cd10f5cf7246c Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Mon, 15 Dec 2025 20:26:53 +0800
Subject: [PATCH 07/10] refactor: extract SCROLL_THROTTLE_MS constant and
 inline applyWindow

Apply coderabbitai suggestions
---
 src/components/common/TreeExplorer.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 75d281f0ae..fab58a098f 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -108,6 +108,7 @@ const BUFFER_SIZE = 20
 const NODE_HEIGHT = 28 // Approximate height per tree node in pixels
 const SCROLL_FORWARD_THRESHOLD = 0.7 // Shift window forward when scrolled past 70%
 const SCROLL_BACKWARD_THRESHOLD = 0.3 // Shift window backward when scrolled below 30%
+const SCROLL_THROTTLE_MS = 100 // Throttle scroll handler to every 100ms
 
 // For each parent node, track the sliding window range [start, end)
 const parentWindowRanges = ref<Record<string, WindowRange>>({})
@@ -223,7 +224,7 @@ const handleTreeScroll = useThrottleFn(() => {
   if (scrollPercentage < SCROLL_BACKWARD_THRESHOLD) {
     shiftWindowsBackward()
   }
-}, 100)
+}, SCROLL_THROTTLE_MS)
 
 // Shift window for a single node in given direction (recursive)
 type ShiftDirection = 'forward' | 'backward'
@@ -293,16 +294,14 @@ const nodeKeyMap = computed<Record<string, RenderedTreeExplorerNode>>(() => {
 })
 
 // Apply sliding window to limit visible children
-const applyWindow = (
-  node: RenderedTreeExplorerNode
-): RenderedTreeExplorerNode =>
-  applyWindowUtil(node, parentWindowRanges.value, WINDOW_SIZE)
 
 // Final tree to display with sliding window applied
 const displayRoot = computed<RenderedTreeExplorerNode>(() => {
   return {
     ...renderedRoot.value,
-    children: (renderedRoot.value.children || []).map(applyWindow)
+    children: (renderedRoot.value.children || []).map((node) =>
+      applyWindowUtil(node, parentWindowRanges.value, WINDOW_SIZE)
+    )
   }
 })
 

From e36f0e61e6dce0fb6f95b0bfb5e26297efef8ab8 Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Mon, 15 Dec 2025 22:16:31 +0800
Subject: [PATCH 08/10] fix: add error handling for async node.handleClick

Wrap node.handleClick() with errorHandling.wrapWithErrorHandlingAsync
to prevent unhandled promise rejections
---
 src/components/common/TreeExplorer.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index fab58a098f..7343f5c695 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -368,6 +368,7 @@ const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
     isEditingLabel: node.key === renameEditingNode.value?.key
   }
 }
+const errorHandling = useErrorHandling()
 const onNodeContentClick = async (
   e: MouseEvent,
   node: RenderedTreeExplorerNode
@@ -376,7 +377,9 @@ const onNodeContentClick = async (
     selectionKeys.value = {}
   }
   if (node.handleClick) {
-    await node.handleClick(e)
+    await errorHandling.wrapWithErrorHandlingAsync(async () => {
+      await node.handleClick?.(e)
+    }, node.handleError)()
   }
   emit('nodeClick', node, e)
 }
@@ -390,7 +393,6 @@ const extraMenuItems = computed(() => {
     : []
 })
 const renameEditingNode = ref<RenderedTreeExplorerNode | null>(null)
-const errorHandling = useErrorHandling()
 const handleNodeLabelEdit = async (
   node: RenderedTreeExplorerNode,
   newName: string

From 8c8b72edbcc06a8b6a57d860ede4e883a95b4bfd Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Mon, 15 Dec 2025 22:19:49 +0800
Subject: [PATCH 09/10] refactor: extract nested ternary into early return
 pattern

---
 src/components/common/TreeExplorer.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index 7343f5c695..d91ab9e8c2 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -386,11 +386,11 @@ const onNodeContentClick = async (
 const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
 const menuTargetNode = ref<RenderedTreeExplorerNode | null>(null)
 const extraMenuItems = computed(() => {
-  return menuTargetNode.value?.contextMenuItems
-    ? typeof menuTargetNode.value.contextMenuItems === 'function'
-      ? menuTargetNode.value.contextMenuItems(menuTargetNode.value)
-      : menuTargetNode.value.contextMenuItems
-    : []
+  const contextMenuItems = menuTargetNode.value?.contextMenuItems
+  if (!contextMenuItems) return []
+  return typeof contextMenuItems === 'function'
+    ? contextMenuItems(menuTargetNode.value!)
+    : contextMenuItems
 })
 const renameEditingNode = ref<RenderedTreeExplorerNode | null>(null)
 const handleNodeLabelEdit = async (

From cac8e5d5e53ebda7d0258eba8ba039d025916cba Mon Sep 17 00:00:00 2001
From: Yourz <crazilou@vip.qq.com>
Date: Wed, 17 Dec 2025 23:38:41 +0800
Subject: [PATCH 10/10] fix: solve blank sidebar

---
 src/components/common/TreeExplorer.vue | 133 +++++++++++++++----------
 1 file changed, 83 insertions(+), 50 deletions(-)

diff --git a/src/components/common/TreeExplorer.vue b/src/components/common/TreeExplorer.vue
index d91ab9e8c2..27bf035569 100644
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -3,6 +3,7 @@
     ref="treeContainerRef"
     class="tree-container overflow-y-auto max-h-[calc(100vh-144px)]"
     @scroll="handleTreeScroll"
+    @mouseleave="handleMouseLeave"
   >
     <Tree
       v-model:expanded-keys="expandedKeys"
@@ -109,6 +110,7 @@ const NODE_HEIGHT = 28 // Approximate height per tree node in pixels
 const SCROLL_FORWARD_THRESHOLD = 0.7 // Shift window forward when scrolled past 70%
 const SCROLL_BACKWARD_THRESHOLD = 0.3 // Shift window backward when scrolled below 30%
 const SCROLL_THROTTLE_MS = 100 // Throttle scroll handler to every 100ms
+const MAX_SCROLL_ITERATIONS = 5
 
 // For each parent node, track the sliding window range [start, end)
 const parentWindowRanges = ref<Record<string, WindowRange>>({})
@@ -192,42 +194,76 @@ const resetWindowsToTop = () => {
   }
 }
 
-// Scroll handler with throttling
-const handleTreeScroll = useThrottleFn(() => {
+const handleMouseLeave = (): void => {
   if (!treeContainerRef.value) return
-
   const container = treeContainerRef.value
-  const scrollTop = container.scrollTop
-  const scrollHeight = container.scrollHeight
-  const clientHeight = container.clientHeight
 
-  // Special case: when scrolled to top, reset all windows to start
-  if (scrollTop === 0) {
+  if (container.scrollTop === 0) {
     resetWindowsToTop()
     return
   }
 
+  const scrollPercentage = recalcScrollPercentage(container)
+
+  if (scrollPercentage > SCROLL_FORWARD_THRESHOLD) {
+    shiftWindowsForward()
+  } else if (scrollPercentage < SCROLL_BACKWARD_THRESHOLD) {
+    shiftWindowsBackward()
+  }
+}
+
+// Recalculate scroll percentage with current spacer heights
+const recalcScrollPercentage = (container: HTMLDivElement): number => {
   const { topTotal, bottomTotal } = getTotalSpacerHeights()
-  const scrollPercentage = calculateScrollPercentage(
-    scrollTop,
-    scrollHeight,
-    clientHeight,
+  return calculateScrollPercentage(
+    container.scrollTop,
+    container.scrollHeight,
+    container.clientHeight,
     topTotal,
     bottomTotal
   )
+}
 
-  // When scrolling near bottom (70%), shift window forward
-  if (scrollPercentage > SCROLL_FORWARD_THRESHOLD) {
+// Scroll handler with throttling
+// In very fast scrolls, a single window shift might not be enough to
+// "catch up" with the scroll position, especially once the cursor leaves
+// the sidebar and further scroll events stop firing.
+// We conservatively allow a few iterations per scroll event to realign
+// the active window with the current scroll position.
+const handleTreeScroll = useThrottleFn((): void => {
+  if (!treeContainerRef.value) return
+  const container = treeContainerRef.value
+
+  if (container.scrollTop === 0) {
+    resetWindowsToTop()
+    return
+  }
+
+  let iterations = 0
+  let scrollPercentage = recalcScrollPercentage(container)
+
+  while (
+    scrollPercentage > SCROLL_FORWARD_THRESHOLD &&
+    iterations < MAX_SCROLL_ITERATIONS
+  ) {
     shiftWindowsForward()
+    iterations += 1
+    scrollPercentage = recalcScrollPercentage(container)
   }
-  // When scrolling near top (30%), shift window backward
-  if (scrollPercentage < SCROLL_BACKWARD_THRESHOLD) {
+
+  while (
+    scrollPercentage < SCROLL_BACKWARD_THRESHOLD &&
+    iterations < MAX_SCROLL_ITERATIONS
+  ) {
     shiftWindowsBackward()
+    iterations += 1
+    scrollPercentage = recalcScrollPercentage(container)
   }
 }, SCROLL_THROTTLE_MS)
 
 // Shift window for a single node in given direction (recursive)
 type ShiftDirection = 'forward' | 'backward'
+
 const shiftNodeWindow = (
   node: RenderedTreeExplorerNode,
   direction: ShiftDirection
@@ -272,10 +308,8 @@ const shiftWindowsForward = () => shiftWindows('forward')
 const shiftWindowsBackward = () => shiftWindows('backward')
 
 const renderedRoot = computed<RenderedTreeExplorerNode>(() => {
-  const renderedRoot = fillNodeInfo(props.root)
-  return newFolderNode.value
-    ? combineTrees(renderedRoot, newFolderNode.value)
-    : renderedRoot
+  const root = fillNodeInfo(props.root)
+  return newFolderNode.value ? combineTrees(root, newFolderNode.value) : root
 })
 
 // Build a lookup map for O(1) node access instead of O(n) tree traversal
@@ -293,17 +327,13 @@ const nodeKeyMap = computed<Record<string, RenderedTreeExplorerNode>>(() => {
   return map
 })
 
-// Apply sliding window to limit visible children
-
 // Final tree to display with sliding window applied
-const displayRoot = computed<RenderedTreeExplorerNode>(() => {
-  return {
-    ...renderedRoot.value,
-    children: (renderedRoot.value.children || []).map((node) =>
-      applyWindowUtil(node, parentWindowRanges.value, WINDOW_SIZE)
-    )
-  }
-})
+const displayRoot = computed<RenderedTreeExplorerNode>(() => ({
+  ...renderedRoot.value,
+  children: (renderedRoot.value.children || []).map((node) =>
+    applyWindowUtil(node, parentWindowRanges.value, WINDOW_SIZE)
+  )
+}))
 
 // Get spacer heights for a node's children container
 const getNodeChildrenStyle = (node: RenderedTreeExplorerNode | undefined) => {
@@ -336,19 +366,15 @@ const getNodeChildrenStyle = (node: RenderedTreeExplorerNode | undefined) => {
     }
   }
 }
-const getTreeNodeIcon = (node: TreeExplorerNode) => {
+const getTreeNodeIcon = (node: TreeExplorerNode): string => {
   if (node.getIcon) {
     const icon = node.getIcon()
-    if (icon) {
-      return icon
-    }
-  } else if (node.icon) {
-    return node.icon
-  }
-  // node.icon is undefined
-  if (node.leaf) {
-    return 'pi pi-file'
+    if (icon) return icon
   }
+  if (node.icon) return node.icon
+
+  if (node.leaf) return 'pi pi-file'
+
   const isExpanded = expandedKeys.value?.[node.key] ?? false
   return isExpanded ? 'pi pi-folder-open' : 'pi pi-folder'
 }
@@ -364,27 +390,31 @@ const fillNodeInfo = (node: TreeExplorerNode): RenderedTreeExplorerNode => {
     children,
     type: node.leaf ? 'node' : 'folder',
     totalLeaves,
-    badgeText: node.getBadgeText ? node.getBadgeText() : undefined,
+    badgeText: node.getBadgeText?.() ?? undefined,
     isEditingLabel: node.key === renameEditingNode.value?.key
   }
 }
 const errorHandling = useErrorHandling()
+
 const onNodeContentClick = async (
   e: MouseEvent,
   node: RenderedTreeExplorerNode
-) => {
+): Promise<void> => {
   if (!storeSelectionKeys) {
     selectionKeys.value = {}
   }
   if (node.handleClick) {
-    await errorHandling.wrapWithErrorHandlingAsync(async () => {
-      await node.handleClick?.(e)
-    }, node.handleError)()
+    await errorHandling.wrapWithErrorHandlingAsync(
+      () => node.handleClick?.(e),
+      node.handleError
+    )()
   }
   emit('nodeClick', node, e)
 }
 const menu = ref<InstanceType<typeof ContextMenu> | null>(null)
 const menuTargetNode = ref<RenderedTreeExplorerNode | null>(null)
+const renameEditingNode = ref<RenderedTreeExplorerNode | null>(null)
+
 const extraMenuItems = computed(() => {
   const contextMenuItems = menuTargetNode.value?.contextMenuItems
   if (!contextMenuItems) return []
@@ -392,11 +422,11 @@ const extraMenuItems = computed(() => {
     ? contextMenuItems(menuTargetNode.value!)
     : contextMenuItems
 })
-const renameEditingNode = ref<RenderedTreeExplorerNode | null>(null)
+
 const handleNodeLabelEdit = async (
   node: RenderedTreeExplorerNode,
   newName: string
-) => {
+): Promise<void> => {
   await errorHandling.wrapWithErrorHandlingAsync(
     async () => {
       if (node.key === newFolderNode.value?.key) {
@@ -411,6 +441,7 @@ const handleNodeLabelEdit = async (
     }
   )()
 }
+
 provide(InjectKeyHandleEditLabelFunction, handleNodeLabelEdit)
 
 const { t } = useI18n()
@@ -459,7 +490,7 @@ const menuItems = computed<MenuItem[]>(() =>
 const handleContextMenu = (e: MouseEvent, node: RenderedTreeExplorerNode) => {
   menuTargetNode.value = node
   emit('contextMenu', node, e)
-  if (menuItems.value.filter((item) => item.visible).length > 0) {
+  if (menuItems.value.some((item) => item.visible)) {
     menu.value?.show(e)
   }
 }
@@ -467,10 +498,12 @@ const handleContextMenu = (e: MouseEvent, node: RenderedTreeExplorerNode) => {
 const wrapCommandWithErrorHandler = (
   command: (event: MenuItemCommandEvent) => void,
   { isAsync = false }: { isAsync: boolean }
-) => {
+):
+  | ((event: MenuItemCommandEvent) => void)
+  | ((event: MenuItemCommandEvent) => Promise<void>) => {
   return isAsync
     ? errorHandling.wrapWithErrorHandlingAsync(
-        command as (...args: any[]) => Promise<any>,
+        command as (event: MenuItemCommandEvent) => Promise<void>,
         menuTargetNode.value?.handleError
       )
     : errorHandling.wrapWithErrorHandling(