node管理統(tǒng)計文件大小并顯示目錄磁盤空間狀態(tài)從零實現(xiàn)

更新時間：2023年12月21日 15:29:36 作者：寒露

這篇文章主要為大家介紹了node管理統(tǒng)計文件大小并顯示目錄磁盤空間狀態(tài)的從零實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

explorer-manager

新增依賴

pnpm i node-df get-folder-size

node-df 執(zhí)行 linux 的 df 命令，并將內(nèi)容格式化為 node 可直接使用結(jié)構(gòu)
get-folder-size 快速統(tǒng)計文件夾占用大小

創(chuàng)建對應(yīng)方法

分析文件夾大小

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

執(zhí)行 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()
}

對應(yīng) 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

讀取文件夾大小，一個按鈕放置在點擊卡片右上角的 “…” 的下拉菜單內(nèi)的“信息”菜單內(nèi)。一個位于卡片視圖的左下角，有個icon，點擊后計算當(dāng)前文件夾大小。

讀取文件夾大小

創(chuàng)建 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)
        }
      },
    })
  }

判斷當(dāng)是目錄時，直接彈出 modal.info 窗口，內(nèi)容為 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

顯示當(dāng)前目錄磁盤空間狀態(tài)

創(chuàng)建上下文文件

'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 內(nèi)

+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 內(nèi)

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