diff --git a/src/components/FileTree/icon.tsx b/src/components/FileTree/icon.tsx index 298775e..8e28487 100644 --- a/src/components/FileTree/icon.tsx +++ b/src/components/FileTree/icon.tsx @@ -19,7 +19,7 @@ function getIconHelper() { cache.set('txt', ); cache.set('closedDirectory', ); cache.set('openDirectory', ); - return function Icon(extension: string, name: string): ReactNode { + return function Icon(extension = '', name = ''): ReactNode { if (cache.has(extension)) return cache.get(extension); else if (cache.has(name)) return cache.get(name); else return ; diff --git a/src/components/FileTree/index.tsx b/src/components/FileTree/index.tsx index c72d085..ba41a3e 100644 --- a/src/components/FileTree/index.tsx +++ b/src/components/FileTree/index.tsx @@ -2,6 +2,7 @@ import React, { useState } from 'react'; import { getIcon } from './icon'; import { useDirs, type Directory, type File } from '@/hooks/useFile'; import { createStyles } from 'antd-style'; +import { LoadingOutlined } from '@ant-design/icons'; const useStyles = createStyles(({ token, css }) => { return { @@ -64,11 +65,13 @@ const FileDiv = ({ icon, selectedFile, onClick, + isLoading, }: { file: File | Directory; // 当前文件 icon?: string; // 图标名称 selectedFile: File | undefined; // 选中的文件 onClick: () => void; // 点击事件 + isLoading?: boolean; }) => { const isSelected = (selectedFile && selectedFile.path === file.path) as boolean; const pathArray = file.path.split('/'); @@ -87,7 +90,7 @@ const FileDiv = ({ }} onClick={onClick} > - + {name} ); @@ -108,13 +111,14 @@ const DirDiv = ({ }) => { let defaultOpen = selectedFile?.path.includes(directory.path); const [open, setOpen] = useState(defaultOpen); - const { data: res } = useDirs({ fullname: pkgName, spec }, directory.path, !open); + const { data: res, isLoading } = useDirs({ fullname: pkgName, spec }, directory.path, !open); return ( <> setOpen(!open)} /> {open ? ( @@ -130,8 +134,7 @@ const DirDiv = ({ ); }; -const FileIcon = ({ extension, name }: { name?: string; extension?: string }) => { - let icon = getIcon(extension || '', name || ''); +const FileIcon = ({ extension, name, isLoading }: { name?: string; extension?: string, isLoading: boolean }) => { return ( alignItems: 'center', }} > - {icon} + {isLoading ? : getIcon(extension, name)} ); };