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
讀取文件夾大小蜕着，一個按鈕放置在點(diǎn)擊卡片右上角的 “…” 的下拉菜單內(nèi)的“信息”菜單內(nèi)严里。一個位于卡片視圖的左下角，有個icon，點(diǎn)擊后計算當(dāng)前文件夾大小厉膀。
讀取文件夾大小
創(chuàng)建 floder-size 組件，
里面包含一個 FolderSize 組件二拐，用于顯示完整文案 “文件夾大小：[size]”
一個 FolderSizeBtn凳兵，用于點(diǎn)擊時加載 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 />
效果
截屏2023-12-18 14.16.17.png
截屏2023-12-18 14.16.24.png
截屏2023-12-18 14.22.31.png
