从零开始-文件资源管理器-15-统计文件夹大小、当前目录磁盘空间状态

explorer-manager

新增依赖

pnpm i node-df get-folder-size

• node-df 执行 linux 的 df 命令，并将内容格式化为 node 可直接使用结构
• get-folder-size 快速统计文件夹占用大小

创建对应方法

分析文件夹大小

import getFolderSize from 'get-folder-size'

export const getFolderSizeAction = async (path) => {
  return await getFolderSize.loose(formatPath(path))
}

执行 df 命令文件

explorer-manager/src/df.mjs

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()
}

对应 type 文件

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
}>

explorer

读取文件夹大小，一个按钮放置在点击卡片右上角的 “…” 的下拉菜单内的“信息”菜单内。一个位于卡片视图的左下角，有个icon，点击后计算当前文件夹大小。

读取文件夹大小

创建 floder-size 组件，

里面包含一个 FolderSize 组件，用于显示完整文案 “文件夹大小：[size]”

一个 FolderSizeBtn，用于点击时加载 size 文案

'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)
        }
      },
    })
  }

判断当是目录时，直接弹出 modal.info 窗口，内容为 FolderSize 组件。

card-display.tsx 加入下面修改

...
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>
  )
}

分别将 DfProvider 组件插入 公共 explorer/src/app/path/context.tsx 内

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

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

DfDisplay 显示组件插入 explorer/src/app/path/[[...path]]/layout-footer.tsx 内

+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 />

效果

git-repo

yangWs29/share-explorer