64 lines
2.3 KiB
TypeScript
64 lines
2.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import { useParams, useSelectedLayoutSegments } from "next/navigation";
|
||
|
|
import { ChevronRight, MoreHorizontal, Star } from "lucide-react";
|
||
|
|
import type { DocumentRecord } from "@/lib/documents";
|
||
|
|
import { findBreadcrumb } from "@/lib/documents";
|
||
|
|
import { usePageLayoutStore } from "@/store/page-layout";
|
||
|
|
|
||
|
|
interface BreadcrumbProps {
|
||
|
|
documents: DocumentRecord[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Breadcrumb({ documents }: BreadcrumbProps) {
|
||
|
|
const segments = useSelectedLayoutSegments();
|
||
|
|
const params = useParams<{ id?: string }>();
|
||
|
|
const paramId = typeof params?.id === "string" ? params.id : "";
|
||
|
|
const activeId = paramId || segments?.[1] || "";
|
||
|
|
const path = findBreadcrumb(documents, activeId);
|
||
|
|
const showInspector = usePageLayoutStore((state) => state.showInspector);
|
||
|
|
const toggleInspector = usePageLayoutStore((state) => state.toggleInspector);
|
||
|
|
|
||
|
|
if (!path.length) {
|
||
|
|
return <div className="text-sm text-gray-400">请选择一个页面</div>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex flex-1 items-center justify-between">
|
||
|
|
<nav className="flex items-center text-sm text-gray-500">
|
||
|
|
{path.map((node, index) => {
|
||
|
|
const isLast = index === path.length - 1;
|
||
|
|
return (
|
||
|
|
<span key={node.id} className="flex items-center">
|
||
|
|
{index > 0 && <ChevronRight className="mx-1 h-4 w-4 text-gray-400" />}
|
||
|
|
{isLast ? (
|
||
|
|
<span className="font-medium text-gray-900">{node.title || "无标题"}</span>
|
||
|
|
) : (
|
||
|
|
<Link href={`/documents/${node.id}`} className="wolai-blue">
|
||
|
|
{node.title || "无标题"}
|
||
|
|
</Link>
|
||
|
|
)}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
<div className="flex items-center gap-2 text-gray-500">
|
||
|
|
<button type="button" className="wolai-hover rounded-full px-3 py-1 text-sm">
|
||
|
|
<Star className="mr-1 inline h-4 w-4" />
|
||
|
|
收藏
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="wolai-hover rounded-full p-2 text-gray-500"
|
||
|
|
onClick={toggleInspector}
|
||
|
|
aria-label={showInspector ? "隐藏页面选项" : "显示页面选项"}
|
||
|
|
title={showInspector ? "隐藏页面选项" : "显示页面选项"}
|
||
|
|
>
|
||
|
|
<MoreHorizontal className="h-4 w-4" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|