添加页脚功能
参考 MacOS 的 Finder 页脚格式
- 显示当前文件夹下有多少项目
- 当前磁盘可用空间（该功能暂缓再实现）
- table 与 card 样式改变按钮
文件树
explorer/src/app/path/[[...path]]/layout-footer.tsx
explorer/src/app/path/[[...path]]/page.tsx
explorer/src/app/path/layout.tsx
explorer/src/components/display-type.tsx
explorer/src/components/readdir-count.tsx
文件路径：explorer/src/app/path/[[...path]]/layout-footer.tsx
页脚组件，目前包含当前页面项目总数、切换 table 与 card 呈现
'use client'
import React from 'react'
import { Flex, Layout, Space } from 'antd'
import ReaddirCount from '@/components/readdir-count'
import ChangeColumn from '@/components/change-column'
import DisplayType from '@/components/display-type'
const LayoutFooter: React.FC = () => {
return (
<Layout.Footer style={{ padding: '0px 20px' }}>
<Flex style={{ width: '100%', height: '40px' }} align="center">
<Flex flex={1}>
<Space>
<ReaddirCount />
</Space>
</Flex>
<Flex justify="flex-end" flex={1}>
<Space>
<DisplayType />
</Space>
</Flex>
</Flex>
</Layout.Footer>
)
}
export default LayoutFooter
文件路径：explorer/src/components/readdir-count.tsx
'use client'
import React from 'react'
import { Space } from 'antd'
import { usePathContext } from '@/app/path/context'
const ReaddirCount: React.FC = () => {
const { readdir } = usePathContext()
return (
<Space>
<span>{readdir.length}</span>
<span>个项目</span>
</Space>
)
}
export default ReaddirCount
文件路径：explorer/src/app/path/[[...path]]/page.tsx
移除之前添加的切换显示样式按钮
'use client'
import React from 'react'
import CardDisplay from '@/app/path/[[...path]]/card-display'
import TableDisplay from '@/app/path/[[...path]]/tale-display'
import { usePathContext } from '@/app/path/context'
const Page: React.FC = () => {
const { display_type } = usePathContext()
return <>{display_type === 'table' ? <TableDisplay /> : <CardDisplay />}</>
}
export default Page
文件路径：explorer/src/components/display-type.tsx
改变显示状态组件。之前的按钮 display 文案变为 icon 区分显示
import React from 'react'
import { Button, Space } from 'antd'
import { usePathContext } from '@/app/path/context'
import { AppstoreOutlined, TableOutlined } from '@ant-design/icons'
const DisplayType: React.FC = () => {
const { display_type, changeDisplayType } = usePathContext()
return (
<Space>
{display_type === 'table' && (
<Button
icon={<AppstoreOutlined />}
onClick={() => {
changeDisplayType('card')
}}
/>
)}
{display_type === 'card' && (
<Button
icon={<TableOutlined />}
onClick={() => {
changeDisplayType('table')
}}
/>
)}
</Space>
)
}
export default DisplayType
可视窗口优化
当前遇到问题
- 当页面内容超出浏览器高度时，会出现滚动条。这时页眉的面包屑与页脚功是否可视会被滚动条影响。需要一直固定在页眉与页脚
- 跳转再返回时默认是页面顶部。需要返回时滚动条需要定位至跳转前。
方案
- 可使用 position: fixed css 属性固定页眉与页脚。但内容区域需要减掉页眉与页脚的高度。由于是使用 antd 组件，页眉也页脚的高度不可控。
- 使用 flex:1 布局，然后给内容区域使用 flex: 1 自动撑满可用区域。为内容可视区域添加 overflow: scroll。可省去计算页眉与页脚的高度。
- 使用虚拟 scroll 组件。相对于原生滚动，可能会出现性能问题。
结合当前应用场景，使用方案 2 来处理页面滚动
文件树
explorer/src/app/path/[[...path]]/layout-content.tsx
explorer/src/app/path/[[...path]]/layout.tsx
explorer/src/app/path/[[...path]]/page.tsx
explorer/src/app/path/layout.tsx
文件路径：explorer/src/app/path/[[...path]]/layout-content.tsx
当点击时，记录当前滚动条的位置，用于返回时恢复滚动条
'use client'
import React, { useEffect, useRef } from 'react'
import { Layout } from 'antd'
import { usePathname } from 'next/navigation'
const height_map = new Map()
const LayoutContent: React.FC<React.PropsWithChildren> = ({ children }) => {
const ref = useRef<HTMLDivElement>(null)
const pathname = usePathname()
useEffect(() => {
const scroll_top = height_map.get(pathname) || 0
if (scroll_top) {
ref.current?.scrollTo(0, scroll_top)
}
}, [pathname, ref])
return (
<Layout.Content
ref={ref}
style={{
overscrollBehavior: 'contain',
overflowY: 'scroll',
}}
onClick={(e) => {
height_map.set(pathname, e.currentTarget.scrollTop)
}}
>
{children}
</Layout.Content>
)
}
export default LayoutContent
文件路径：explorer/src/app/path/[[...path]]/layout.tsx
将之前的面包屑组件移至上一层的 layout 中
import React from 'react'
import { readdir } from '@/explorer-manager/src/main.mjs'
import { PathContextProvider } from '@/app/path/context'
import LayoutFooter from '@/app/path/[[...path]]/layout-footer'
import LayoutContent from '@/app/path/[[...path]]/layout-content'
const Layout: React.FC<React.PropsWithChildren & { params: { path: string[] } }> = ({
children,
params: { path = [] },
}) => {
const readdirList = readdir(path.join('/'), { only_dir: '0', only_file: '0', has_file_stat: '1' })
return (
<PathContextProvider value={readdirList}>
<LayoutContent>{children}</LayoutContent>
<LayoutFooter />
</PathContextProvider>
)
}
export default Layout
文件路径：explorer/src/app/path/layout.tsx
接管面包屑的 layout 组件，并添加 flex 的 css 属性。用于实现内部滚动
import React from 'react'
import ExplorerBreadcrumb from '@/components/explorer-breadcrumb'
import { Card } from 'antd'
const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
return (
<Card
bordered={false}
title={<ExplorerBreadcrumb />}
style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
bodyStyle={{ padding: '16px 0 0 0', display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden' }}
>
{children}
</Card>
)
}
export default Layout
效果
截屏2023-12-13 16.40.30.png
