fix(skill): add throttle to folder toggle and validate pinTab

- Use es-toolkit throttle with leading edge to prevent folder toggle
  flickering on double-click (3 toggles reduced to 1)
- Add validation in pinTab to check if file exists in openTabIds
This commit is contained in:
yyh
2026-01-16 11:07:56 +08:00
parent a30fb5909b
commit 17990512ce
2 changed files with 13 additions and 5 deletions

View File

@ -4,8 +4,9 @@ import type { NodeRendererProps } from 'react-arborist'
import type { TreeNodeData } from '../type'
import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
import { RiFolderLine, RiFolderOpenLine, RiMoreFill } from '@remixicon/react'
import { throttle } from 'es-toolkit/function'
import * as React from 'react'
import { useCallback, useState } from 'react'
import { useCallback, useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
import {
@ -34,11 +35,16 @@ const TreeNode = ({ node, style, dragHandle }: NodeRendererProps<TreeNodeData>)
const fileIconType = !isFolder ? getFileIconType(node.data.name) : null
const throttledToggle = useMemo(
() => throttle(() => node.toggle(), 300, { edges: ['leading'] }),
[node],
)
const handleClick = (e: React.MouseEvent) => {
e.stopPropagation()
node.select()
if (isFolder)
node.toggle()
throttledToggle()
else
storeApi.getState().openTab(node.data.id, { pinned: false })
}
@ -46,14 +52,14 @@ const TreeNode = ({ node, style, dragHandle }: NodeRendererProps<TreeNodeData>)
const handleDoubleClick = (e: React.MouseEvent) => {
e.stopPropagation()
if (isFolder)
node.toggle()
throttledToggle()
else
storeApi.getState().openTab(node.data.id, { pinned: true })
}
const handleToggle = (e: React.MouseEvent) => {
e.stopPropagation()
node.toggle()
throttledToggle()
}
const handleContextMenu = useCallback((e: React.MouseEvent) => {

View File

@ -91,7 +91,9 @@ export const createTabSlice: StateCreator<TabSliceShape> = (set, get) => ({
},
pinTab: (fileId: string) => {
const { previewTabId } = get()
const { previewTabId, openTabIds } = get()
if (!openTabIds.includes(fileId))
return
if (previewTabId === fileId)
set({ previewTabId: null })
},