从零开始-文件资源管理器-05-可视窗口优化

添加页脚功能

参考 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

可视窗口优化

当前遇到问题

1. 当页面内容超出浏览器高度时，会出现滚动条。这时页眉的面包屑与页脚功是否可视会被滚动条影响。需要一直固定在页眉与页脚
2. 跳转再返回时默认是页面顶部。需要返回时滚动条需要定位至跳转前。

方案

1. 可使用 position: fixed css 属性固定页眉与页脚。但内容区域需要减掉页眉与页脚的高度。由于是使用 antd 组件，页眉也页脚的高度不可控。
2. 使用 flex:1 布局，然后给内容区域使用 flex: 1 自动撑满可用区域。为内容可视区域添加 overflow: scroll。可省去计算页眉与页脚的高度。
3. 使用虚拟 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

效果

git-repo

yangWs29/share-explorer