130 lines
3.6 KiB
TypeScript
130 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { type ReactNode, useMemo } from "react";
|
|
|
|
import {
|
|
Breadcrumb,
|
|
BreadcrumbItem,
|
|
BreadcrumbLink,
|
|
BreadcrumbList,
|
|
BreadcrumbPage,
|
|
BreadcrumbSeparator,
|
|
} from "@/components/ui/breadcrumb";
|
|
import { useI18n } from "@/core/i18n/hooks";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function WorkspaceContainer({
|
|
className,
|
|
children,
|
|
...props
|
|
}: React.ComponentProps<"div">) {
|
|
// h-full 而非 h-screen:本容器恒在 WorkspaceRoutes 的 SidebarInset(flex-1,确定高度)下,
|
|
// h-full 既跟随容器高度(无界等嵌套不再锁死整屏),又修掉原 h-screen=100vh 比可用区域
|
|
// 高出一个页头高度的溢出。
|
|
return (
|
|
<div className={cn("flex h-full w-full flex-col", className)} {...props}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function WorkspaceHeader({
|
|
className,
|
|
children,
|
|
rightActions,
|
|
...props
|
|
}: React.ComponentProps<"header"> & {
|
|
rightActions?: ReactNode;
|
|
}) {
|
|
const { t } = useI18n();
|
|
const pathname = usePathname();
|
|
const segments = useMemo(() => {
|
|
const parts = pathname?.split("/") || [];
|
|
if (parts.length > 0) {
|
|
return parts.slice(1, 3);
|
|
}
|
|
}, [pathname]);
|
|
return (
|
|
<header
|
|
className={cn(
|
|
"top-0 right-0 left-0 z-20 flex h-16 shrink-0 items-center justify-between gap-2 border-b backdrop-blur-sm transition-[width,height] ease-out group-has-data-[collapsible=icon]/sidebar-wrapper:h-12",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<div className="flex items-center gap-2 px-4">
|
|
<Breadcrumb>
|
|
<BreadcrumbList>
|
|
{segments?.[0] && (
|
|
<BreadcrumbItem className="hidden md:block">
|
|
<BreadcrumbLink asChild>
|
|
<Link href={`/${segments[0]}`}>
|
|
{nameOfSegment(segments[0], t)}
|
|
</Link>
|
|
</BreadcrumbLink>
|
|
</BreadcrumbItem>
|
|
)}
|
|
{segments?.[1] && (
|
|
<>
|
|
<BreadcrumbSeparator className="hidden md:block" />
|
|
<BreadcrumbItem>
|
|
{segments.length >= 2 ? (
|
|
<BreadcrumbLink asChild>
|
|
<Link href={`/${segments[0]}/${segments[1]}`}>
|
|
{nameOfSegment(segments[1], t)}
|
|
</Link>
|
|
</BreadcrumbLink>
|
|
) : (
|
|
<BreadcrumbPage>
|
|
{nameOfSegment(segments[1], t)}
|
|
</BreadcrumbPage>
|
|
)}
|
|
</BreadcrumbItem>
|
|
</>
|
|
)}
|
|
{children && (
|
|
<>
|
|
<BreadcrumbSeparator />
|
|
{children}
|
|
</>
|
|
)}
|
|
</BreadcrumbList>
|
|
</Breadcrumb>
|
|
</div>
|
|
{rightActions ? (
|
|
<div className="flex items-center gap-2 px-4">{rightActions}</div>
|
|
) : null}
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export function WorkspaceBody({
|
|
className,
|
|
children,
|
|
...props
|
|
}: React.ComponentProps<"main">) {
|
|
return (
|
|
<main
|
|
className={cn(
|
|
"relative flex min-h-0 w-full flex-1 flex-col items-center",
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
<div className="flex h-full w-full flex-col items-center">{children}</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
function nameOfSegment(
|
|
segment: string | undefined,
|
|
t: ReturnType<typeof useI18n>["t"],
|
|
) {
|
|
if (!segment) return t.common.home;
|
|
if (segment === "workspace") return t.breadcrumb.workspace;
|
|
if (segment === "chats") return t.breadcrumb.chats;
|
|
return segment[0]?.toUpperCase() + segment.slice(1);
|
|
}
|