从零开始-文件资源管理器-04-面包屑导航

面包屑导航

url：domain/path/[[...path]]

目前可以通过 url 的的结构信息定位当前目录的情况，但是无法快速的前进与后退。所以使用"面包屑"来完成这一功能

功能实现

安装依赖

bash 复制代码

cd /explorer

pnpm i axios ahooks

文件树

lua 复制代码

explorer/src/app/path/[[...path]]/layout.tsx
explorer/src/app/path/api/readdir/route.ts
explorer/src/components/breadcrumb-dropdown-readdir/index.tsx
explorer/src/components/explorer-breadcrumb/index.tsx
explorer/src/components/use-replace-pathname.ts

文件路径：explorer/src/app/path/api/readdir/route.ts

新增一个获取指定目录的接口

typescript 复制代码

import { NextRequest, NextResponse } from 'next/server'
import { readdir } from '@/explorer-manager/src/main.mjs'

export type SearchParamsType = {
  path: string
  only_dir: '0' | '1'
  only_file: '0' | '1'
  has_file_stat: '0' | '1'
}

export const GET = async (req: NextRequest) => {
  const { path, only_dir, only_file, has_file_stat } = Object.fromEntries(req.nextUrl.searchParams) as SearchParamsType

  return NextResponse.json({ readdir: readdir(path, { only_dir, only_file, has_file_stat }) })
}

文件路径：explorer/src/app/path/[[...path]]/layout.tsx

将面包屑组件添加至 layout 的 Card 组件 title 部分。

typescript 复制代码

import React from 'react'
import { readdir } from '@/explorer-manager/src/main.mjs'
import { PathContextProvider } from '@/app/path/context'
import { Card } from 'antd'
import ExplorerBreadcrumb from '@/components/explorer-breadcrumb'

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}>
      <Card title={<ExplorerBreadcrumb />}>{children}</Card>
    </PathContextProvider>
  )
}

export default Layout

文件路径：explorer/src/components/explorer-breadcrumb/index.tsx

面包屑组件，使用 Antd 的 Breadcrumb 组件。跟目录"/"使用 home icon 替代

typescript 复制代码

'use client'
import React from 'react'
import Link from 'next/link'
import { HomeOutlined } from '@ant-design/icons'
import { usePathname } from 'next/navigation'
import { Breadcrumb, Space } from 'antd'
import BreadcrumbDropdownReaddir from '@/components/breadcrumb-dropdown-readdir'

type ItemType = { title: string; href: string }

const ExplorerBreadcrumb: React.FC = () => {
  const pathname = usePathname() || ''

  return (
    <Space>
      <Breadcrumb
        items={decodeURIComponent(pathname)
          .split('/')
          .filter(Boolean)
          .reduce<ItemType[]>((p, c) => {
            const last = p[p.length - 1]

            return p.concat({ title: c, href: [last?.href, c].join('/') })
          }, [])
          .map(({ title, href }, k, { length }) => {
            return {
              title:
                length === k + 1 && length !== 1 ? (
                  title
                ) : (
                  <BreadcrumbDropdownReaddir title={title} href={href}>
                    <Link href={href}>{k === 0 ? <HomeOutlined /> : title}</Link>
                  </BreadcrumbDropdownReaddir>
                ),
            }
          })}
      />
    </Space>
  )
}

export default ExplorerBreadcrumb

文件路径：explorer/src/components/breadcrumb-dropdown-readdir/index.tsx

鼠标 hover 某个路径时，下拉出现当前路径下文件夹菜单，方便快速跳转。

当菜单超出最大高度时滚动显示。会高亮当前路径上的文件。使用 dom 的 scrollIntoView 方法，确保高亮的菜单在可视区域内。

显示时对菜单项进行 decodeURIComponent 处理，保证显示的文本正确。

typescript 复制代码

import React, { useRef } from 'react'
import { Dropdown, Menu } from 'antd'
import { useMount, useRequest } from 'ahooks'
import axios from 'axios'
import { ReaddirListType } from '@/explorer-manager/src/type'
import { encodePathItem, pathExp } from '@/components/use-replace-pathname'
import Link from 'next/link'
import { FolderOpenOutlined, FolderOutlined } from '@ant-design/icons'
import { usePathname } from 'next/navigation'

const ScrollIntoView: React.FC<{ is_open: boolean; className?: string }> = ({ is_open, className }) => {
  const ref = useRef<HTMLDivElement>(null)

  useMount(() => {
    is_open && ref.current?.scrollIntoView({ block: 'center', behavior: 'instant' })
  })

  return is_open ? <FolderOpenOutlined ref={ref} className={className} /> : <FolderOutlined className={className} />
}

const BreadcrumbDropdownReaddir: React.FC<React.PropsWithChildren & { title: string; href: string }> = ({
  children,
  href,
  title,
}) => {
  const pathname = usePathname() || ''

  const { data = [], runAsync } = useRequest(
    () =>
      axios
        .get<{ readdir: ReaddirListType }>('/path/api/readdir', {
          params: { path: href.replace(pathExp, ''), only_dir: 1 },
        })
        .then(({ data: { readdir } }) => {
          return readdir
        }),
    { manual: true, cacheKey: `readdir-${href}`, staleTime: 60 * 1000 },
  )

  const open_dit_text =
    decodeURIComponent(pathname).split([title, '/'].join('')).pop()?.split('/').filter(Boolean).shift() || ''

  return (
    <Dropdown
      destroyPopupOnHide={true}
      arrow={true}
      trigger={['hover']}
      dropdownRender={() => {
        return (
          <Menu
            selectedKeys={[open_dit_text]}
            style={{ maxHeight: '50vw', overflow: 'scroll' }}
            items={data?.map((item) => {
              const is_open = open_dit_text === item.name

              return {
                label: (
                  <Link href={encodePathItem(`${href}/${item.name}`)} prefetch={false}>
                    {item.name}
                  </Link>
                ),
                key: item.name,
                icon: <ScrollIntoView is_open={is_open} />,
              }
            })}
          />
        )
      }}
      onOpenChange={(open) => {
        open && runAsync().then()
      }}
    >
      {children}
    </Dropdown>
  )
}

export default BreadcrumbDropdownReaddir

文件路径：explorer/src/components/use-replace-pathname.ts

对路径进行操作 hooks 文件，对路径字符串项 encodeURIComponent 处理

typescript 复制代码

export const pathExp = /(^/)?path/

export const encodePathItem = (path: string) => {
  return path
    .split('/')
    .map((text) => encodeURIComponent(text))
    .join('/')
}

效果

git-repo

yangWs29/share-explorer