初始化

2026-09-07 18:24:55 +08:00
1 parent 34474bd5fc
commit b638b541d0
@@ -0,0 +1,129 @@
+"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);
+}