JS實(shí)現(xiàn)面包屑導(dǎo)航功能從零開(kāi)始示例

更新時(shí)間：2023年12月21日 16:25:13 作者：寒露

這篇文章主要為大家介紹了JS實(shí)現(xiàn)面包屑導(dǎo)航功能從零開(kāi)始示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

面包屑導(dǎo)航

url：domain/path/[[…path]]

目前可以通過(guò) url 的的結(jié)構(gòu)信息定位當(dāng)前目錄的情況，但是無(wú)法快速的前進(jìn)與后退。所以使用“面包屑”來(lái)完成這一功能

功能實(shí)現(xiàn)

安裝依賴(lài)

cd /explorer
pnpm i axios ahooks

文件樹(shù)

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

新增一個(gè)獲取指定目錄的接口

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 部分。

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 替代

'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

鼠標(biāo) hover 某個(gè)路徑時(shí)，下拉出現(xiàn)當(dāng)前路徑下文件夾菜單，方便快速跳轉(zhuǎn)。

當(dāng)菜單超出最大高度時(shí)滾動(dòng)顯示。會(huì)高亮當(dāng)前路徑上的文件。使用 dom 的 scrollIntoView 方法，確保高亮的菜單在可視區(qū)域內(nèi)。

顯示時(shí)對(duì)菜單項(xiàng)進(jìn)行 decodeURIComponent 處理，保證顯示的文本正確。

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

對(duì)路徑進(jìn)行操作 hooks 文件，對(duì)路徑字符串項(xiàng) encodeURIComponent 處理

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