feat(web): issue detail 页面加入 breadcrumb

packages/web/src/components/breadcrumb.tsx

@@ -0,0 +1,22 @@
+import Link from 'next/link'
+import type { FC } from 'react'
+import useBreadcrumb from '~/hooks/useBreadcrumb'
+
+const Breadcrumb: FC = () => {
+  const [breadcrumbs] = useBreadcrumb()
+
+  return (
+    <div className="text-sm breadcrumbs">
+      <ul>
+        {
+          breadcrumbs
+            .slice(0, breadcrumbs.length - 1)
+            .map(v => (<li key={v.path}><Link href={v.path}><a>{v.breadcrumb}</a></Link></li>))
+        }
+        <li>{breadcrumbs.at(-1)?.breadcrumb}</li>
+      </ul>
+    </div>
+  )
+}
+
+export default Breadcrumb

packages/web/src/hooks/useBreadcrumb.ts

@@ -0,0 +1,27 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+
+interface Breadcrumb {
+  breadcrumb: string
+  path: string
+}
+export default function useBreadcrumb() {
+  const router = useRouter()
+  const [breadcrumbs, setBreadcrumbs] = useState<Breadcrumb[]>([])
+  useEffect(() => {
+    if (router) {
+      const linkPath = router.asPath.split('/')
+      linkPath.shift()
+
+      const pathArray = linkPath.map((path, i) => {
+        return {
+          breadcrumb: path,
+          path: `/${linkPath.slice(0, i + 1).join('/')}`,
+        }
+      })
+      setBreadcrumbs(pathArray)
+    }
+  }, [router])
+
+  return [breadcrumbs] as const
+}

packages/web/src/pages/issues/[id].tsx

@@ -1,5 +1,6 @@
 import type { GetServerSideProps, NextPage } from 'next'
 import type { Issue, OhbugEventLike } from 'types'
+import Breadcrumb from '~/components/breadcrumb'
 import IssueDetailActions from '~/components/issueDetailAction'
 import IssueDetailProfile from '~/components/issueDetailProfile'
 import IssueDetailStack from '~/components/issueDetailStack'
@@ -39,6 +40,8 @@ export const getServerSideProps: GetServerSideProps<Props> = async(context) => {
 const Detail: NextPage<Props> = ({ issue, event, trends }) => {
   return (
     <div>
+      <Breadcrumb />
+
       <IssueDetailTitle issue={issue} />
 
       <IssueDetailProfile event={event} />