node.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > node.js > node文件大小磁盘空间

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

作者:寒露

这篇文章主要为大家介绍了node管理统计文件大小并显示目录磁盘空间状态的从零实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

explorer-manager

新增依赖

pnpm i node-df 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

以上就是node统计文件大小并显示目录磁盘空间状态从零实现的详细内容,更多关于node统计文件大小磁盘空间的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文