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

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