node管理统计文件大小并显示目录磁盘空间状态从零实现

pnpm i node-df get-folder-size

import getFolderSize from 'get-folder-size'
export const getFolderSizeAction = async (path) => {
  return await getFolderSize.loose(formatPath(path))
}

import df from 'node-df'
import { formatPath } from './format-path.mjs'
/**
 *
 * @param {import('./type').DfOptType} opt
 * @returns {Promise<import('./type').DfResItemType[]>}
 */
export const getDF = async (opt = {}) => {
  return new Promise((res, rej) => {
    df(opt, (error, response) => {
      if (error) {
        rej(error)
      }
      res(response)
    })
  })
}
export const findDfInfo = async (path = '') => {
  const info = await getDF()
  const join_path = formatPath(path)
  return info
    .filter((item) => {
      return join_path.includes(item.mount)
    })
    .pop()
}

export type DfResItemType = {
  filesystem: string
  size: number
  used: number
  available: number
  capacity: number
  mount: string
}
export type DfOptType = Partial<{
  file: string
  prefixMultiplier: 'KiB|MiB|GiB|TiB|PiB|EiB|ZiB|YiB|MB|GB|TB|PB|EB|ZB|YB'
  isDisplayPrefixMultiplier: boolean
  precision: number
}>

'use client'
import React, { useState } from 'react'
import { useRequest } from 'ahooks'
import axios, { AxiosRequestConfig } from 'axios'
import { ResType } from '@/app/path/api/get-folder-size/route'
import Bit from '@/components/bit'
import { LoadingOutlined, ReloadOutlined } from '@ant-design/icons'
import { Button } from 'antd'
const getFolderSize = (config: AxiosRequestConfig) => axios.get<ResType>('/path/api/get-folder-size', config)
const useGetFolderSize = (path: string) => {
  const { data: size, loading } = useRequest(() =>
    getFolderSize({ params: { path: path } }).then(({ data }) => {
      return data.data
    }),
  )
  return { size, loading }
}
const FolderSize: React.FC<{ path: string; title?: string | null }> = ({ path, title = '文件夹大小' }) => {
  const { size, loading } = useGetFolderSize(path)
  return <>{loading ? <LoadingOutlined /> : <Bit title={title}>{size}</Bit>}</>
}
export const FolderSizeBtn: React.FC<{ path: string }> = ({ path }) => {
  const [show, changeShow] = useState(false)
  return (
    <>
      {show ? (
        <FolderSize path={path} title={null} />
      ) : (
        <Button icon={<ReloadOutlined />} onClick={() => changeShow(true)} />
      )}
    </>
  )
}
export default FolderSize

if (item.is_directory || is_show_img_exif) {
    menu.items?.push({
      icon: <InfoOutlined />,
      label: '信息',
      key: 'info',
      onClick: () => {
        if (item.is_directory) {
          modal.info({ title: path, content: <FolderSize path={path} />, width: 500 })
        } else {
          changeImgExif(preview_path)
        }
      },
    })
  }

...
import { FolderSizeBtn } from '@/components/folder-size'
import { useReplacePathname } from '@/components/use-replace-pathname'
const CardDisplay: React.FC = () => {
...
  const { joinSearchPath, joinPath } = useReplacePathname()
  return (
...
                  <Flex flex="1 0 auto" style={{ marginRight: 20 }}>
                    {item.is_directory ? (
                      <FolderSizeBtn path={joinSearchPath(item.name)} />
                    ) : (
                      <Bit>{item.stat.size}</Bit>
                    )}
                  </Flex>
...
  )
}
export default CardDisplay

'use client'
import createCtx from '@/lib/create-ctx'
import { DfResItemType } from '@/explorer-manager/src/type'
import React, { useEffect } from 'react'
import { useRequest } from 'ahooks'
import axios from 'axios'
import { usePathname } from 'next/navigation'
import Bit from '@/components/bit'
import { Space } from 'antd'
import { useReplacePathname } from '@/components/use-replace-pathname'
export const DfContext = createCtx<DfResItemType | null>(null!)
const UpdateDfInfo: React.FC = () => {
  const pathname = usePathname()
  const { replace_pathname } = useReplacePathname()
  const dispatch = DfContext.useDispatch()
  const { data = null } = useRequest(() =>
    axios
      .get<{ data: DfResItemType }>('/path/api/get-df', { params: { path: replace_pathname } })
      .then(({ data }) => data.data),
  )
  useEffect(() => {
    dispatch(data)
  }, [data, dispatch, pathname])
  return null
}
export const DfDisplay: React.FC = () => {
  const store = DfContext.useStore()
  return (
    <Space split="/">
      <Bit>{store?.available}</Bit>
      <Bit>{store?.size}</Bit>
    </Space>
  )
}
export const DfProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
  return (
    <DfContext.ContextProvider value={null}>
      <UpdateDfInfo />
      {children}
    </DfContext.ContextProvider>
  )
}

+import { DfProvider } from '@/components/df-context'

             <VideoPathProvider>
               <ImgExifProvider>
                 <MovePathProvider>
+                  <RenameProvider>
+                    <DfProvider>{children}</DfProvider>
+                  </RenameProvider>
                 </MovePathProvider>
               </ImgExifProvider>
             </VideoPathProvider>

+import { DfDisplay } from '@/components/df-context'
+import { ReloadReaddirButton } from '@/components/reload-readdir-button'
 const LayoutFooter: React.FC = () => {
   return (
@@ -12,12 +14,20 @@ const LayoutFooter: React.FC = () => {
       <Flex style={{ width: '100%', height: '40px' }} align="center">
         <Flex flex={1}>
           <Space>
+            <Space.Compact>
+              <ReloadReaddirButton />
+
+              <CreateFolderBtn />
+            </Space.Compact>
             <ReaddirCount />
           </Space>
         </Flex>
+        <Flex flex={1} justify="center" align="center">
+          <DfDisplay />
+        </Flex>
+
         <Flex justify="flex-end" flex={1}>
           <Space>
             <ChangeColumn />