"use client"

import * as React from "react"
import { PanelLeftIcon } from "lucide-react"

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import { Button } from "@/components/ui/button"
import { SheetTrigger } from "@/components/ui/sheet"
import { cn } from "@/lib/utils"

import {
  formatLabel,
  NAV_WIDTH_CLASS,
  NAV_WIDTH_TRANSITION,
  useAppShellLabels,
  type AppShellLabels,
} from "./config"
import { NavLink, type NavLinkBehavior } from "./nav-link"
import { ThemeToggle } from "./theme-toggle"
import { UserMenu, type AppShellUser } from "./user-menu"

type AppShellBrand = {
  name: string
  /** Logo 节点，建议 32×32 的 SVG / 图片；不传则用名称首字生成方块 */
  logo?: React.ReactNode
  /** 名称下方的一行说明，仅在侧栏展开的桌面端显示 */
  tagline?: string
  /** 点击品牌区跳转的地址，默认 "/" */
  href?: string
}

type AppHeaderProps = Omit<React.ComponentProps<"header">, "children"> & {
  brand: AppShellBrand
  collapsed: boolean
  onToggleCollapsed: () => void
  /** 面包屑：分组 → 模块 → 页面 */
  trail: string[]
  actions?: React.ReactNode
  themeToggle: boolean
  user?: AppShellUser
  userMenu?: React.ReactNode
  onSignOut?: () => void
  navigation?: NavLinkBehavior
  labels?: Partial<AppShellLabels>
}

/** 固定顶栏：左侧品牌区（宽度与一级导航对齐）+ 折叠按钮 + 面包屑 + 右侧操作区。 */
function AppHeader({
  className,
  brand,
  collapsed,
  onToggleCollapsed,
  trail,
  actions,
  themeToggle,
  user,
  userMenu,
  onSignOut,
  navigation,
  labels,
  ...props
}: AppHeaderProps) {
  const text = useAppShellLabels(labels)
  const toggleLabel = collapsed ? text.expandSidebar : text.collapseSidebar
  return (
    <header
      data-slot="app-shell-header"
      data-collapsed={collapsed ? "" : undefined}
      className={cn(
        "relative z-30 shrink-0 border-b border-sidebar-border bg-background",
        className
      )}
      {...props}
    >
      <div className="flex h-14 items-center">
        <div
          className={cn(
            "h-full shrink-0 border-r border-sidebar-border bg-sidebar px-3 sm:px-4",
            NAV_WIDTH_CLASS.brand,
            NAV_WIDTH_TRANSITION
          )}
        >
          <NavLink
            href={brand.href ?? "/"}
            navigation={navigation}
            aria-label={formatLabel(text.brandHome, brand.name)}
            className={cn(
              "flex h-full min-w-0 items-center gap-2.5 rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring/50 max-[800px]:justify-center group-data-[collapsed]/app-shell:justify-center"
            )}
          >
            <span className="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-lg">
              {brand.logo ?? (
                <span
                  aria-hidden="true"
                  className="flex size-full items-center justify-center bg-primary text-sm font-semibold text-primary-foreground"
                >
                  {brand.name.trim().slice(0, 1).toUpperCase()}
                </span>
              )}
            </span>
            <span className="hidden min-w-0 leading-tight min-[800px]:block min-[800px]:group-data-[collapsed]/app-shell:hidden">
              <span className="block truncate text-sm font-semibold">
                {brand.name}
              </span>
              {brand.tagline ? (
                <span className="block truncate text-[11px] text-muted-foreground">
                  {brand.tagline}
                </span>
              ) : null}
            </span>
          </NavLink>
        </div>

        <div className="flex min-w-0 flex-1 items-center gap-1.5 px-3 sm:px-4">
          <SheetTrigger
            render={
              <Button
                variant="ghost"
                size="icon"
                className="-ml-1 min-[800px]:hidden"
                aria-label={text.openNavigation}
              />
            }
          >
            <PanelLeftIcon />
          </SheetTrigger>
          <Button
            variant="ghost"
            size="icon"
            className="-ml-1 hidden min-[800px]:inline-flex"
            onClick={onToggleCollapsed}
            aria-label={toggleLabel}
            aria-expanded={!collapsed}
            title={toggleLabel}
          >
            <PanelLeftIcon />
          </Button>

          {trail.length > 0 ? (
            <Breadcrumb aria-label={text.breadcrumb} className="min-w-0">
              <BreadcrumbList className="flex-nowrap gap-1 overflow-hidden">
                {trail.map((label, index) => {
                  const last = index === trail.length - 1
                  return last ? (
                    <BreadcrumbItem
                      key={`${label}-${index}`}
                      className="min-w-0"
                    >
                      <BreadcrumbPage className="truncate font-semibold">
                        {label}
                      </BreadcrumbPage>
                    </BreadcrumbItem>
                  ) : (
                    // 分隔符本身是 <li>，必须和 BreadcrumbItem 并列，嵌套会触发水合错误
                    <React.Fragment key={`${label}-${index}`}>
                      <BreadcrumbItem className="hidden shrink-0 lg:inline-flex">
                        {label}
                      </BreadcrumbItem>
                      <BreadcrumbSeparator className="hidden shrink-0 lg:flex lg:items-center" />
                    </React.Fragment>
                  )
                })}
              </BreadcrumbList>
            </Breadcrumb>
          ) : null}

          <div className="ml-auto flex shrink-0 items-center gap-1 sm:gap-1.5">
            {actions}
            {themeToggle ? <ThemeToggle labels={labels} /> : null}
            {user ? (
              <UserMenu user={user} onSignOut={onSignOut} labels={labels}>
                {userMenu}
              </UserMenu>
            ) : null}
          </div>
        </div>
      </div>
    </header>
  )
}

export { AppHeader }
export type { AppHeaderProps, AppShellBrand }

58:["$","$L50",null,{"lines":189,"collapse":false,"children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$82"}}]}] 83:T20b5,

import { DEFAULT_STORAGE_KEY } from "./config"

type AppShellScriptProps = {
  /** 与 AppShell 的 `storageKey` 保持一致 */
  storageKey?: string
}

/**
 * 首帧脚本：在浏览器解析 HTML 时（早于首次绘制与水合）读取 localStorage，
 * 把折叠状态写到所在元素（AppShell 根元素）的 `data-collapsed`，
 * 侧栏宽度、图标栏等样式据此在水合前就是正确状态，刷新不再闪烁。
 * 没有本地记录时不动，保持服务端渲染的 `defaultCollapsed`。
 *
 * 必须作为 AppShell 根元素的子节点渲染（AppShell 已自动放好），
 * 脚本通过 `document.currentScript.parentElement` 找到根元素。
 */
function AppShellScript({ storageKey = DEFAULT_STORAGE_KEY }: AppShellScriptProps) {
  // 键里的 "<" 转义，防止提前闭合 <script>
  const key = JSON.stringify(storageKey).replace(/</g, "\\u003c")
  const html = `(function(){try{var v=localStorage.getItem(${key});if(v===null)return;var e=document.currentScript.parentElement;if(v==="1")e.setAttribute("data-collapsed","");else e.removeAttribute("data-collapsed")}catch(_){}})()`

  return (
    <script
      data-slot="app-shell-script"
      // 服务端输出可执行脚本；客户端渲染（路由跳转进来）时改为 text/plain，
      // 避免 React 对 <script> 的开发警告——此时 React 自己按 localStorage 渲染，无需脚本
      type={typeof window === "undefined" ? "text/javascript" : "text/plain"}
      suppressHydrationWarning
      dangerouslySetInnerHTML={{ __html: html }}
    />
  )
}

export { AppShellScript }
export type { AppShellScriptProps }

5a:["$","$L50",null,{"lines":35,"collapse":false,"children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$83"}}]}] 84:T967d,

"use client"

import * as React from "react"
import { ChevronRightIcon } from "lucide-react"

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { cn } from "@/lib/utils"

import { useAppShellLabels, type AppShellLabels } from "./config"
import { NavLink, type NavLinkBehavior } from "./nav-link"
import {
  isModule,
  moduleHref,
  type NavConfig,
  type NavEntry,
  type NavSection,
  type ResolvedNav,
} from "./nav-types"

type PrimaryNavProps = Omit<React.ComponentProps<"nav">, "children"> & {
  config: NavConfig
  /** 当前页面对应的导航位置，由 resolveNav 得到 */
  active?: ResolvedNav
  /**
   * 图标栏模式：只显示图标，名称放到 Tooltip 与读屏文本里。
   * 外观由祖先 `.group/app-shell[data-collapsed]` 决定（水合前即生效），
   * 这个 prop 只负责 Tooltip 的开关；抽屉里的导航在 AppShell 之外，始终展开。
   */
  collapsed?: boolean
  navigation?: NavLinkBehavior
  labels?: Partial<AppShellLabels>
}

/** 一级导航：分组标题 + 条目；模块条目指向其第一个子项，选中时左侧出现二级侧栏。 */
function PrimaryNav({
  className,
  config,
  active,
  collapsed = false,
  navigation,
  labels,
  ...props
}: PrimaryNavProps) {
  const text = useAppShellLabels(labels)

  function renderEntry(entry: NavEntry) {
    const isGroup = isModule(entry)
    const selected = isGroup
      ? active?.module?.id === entry.id
      : active?.item.id === entry.id
    const Icon = entry.icon
    const badge = isGroup ? undefined : entry.badge
    const link = (
      <NavLink
        data-slot="app-shell-nav-item"
        data-active={selected ? "" : undefined}
        href={isGroup ? moduleHref(entry) : entry.href}
        navigation={navigation}
        aria-current={selected ? (isGroup ? "true" : "page") : undefined}
        className={cn(
          "relative flex h-10 w-full min-w-0 items-center gap-3 rounded-md px-3 text-sm transition-colors outline-none group-data-[collapsed]/app-shell:justify-center group-data-[collapsed]/app-shell:px-2 focus-visible:ring-3 focus-visible:ring-ring/50 motion-reduce:transition-none",
          selected
            ? "bg-primary/10 font-medium text-sidebar-foreground shadow-[inset_3px_0_0_var(--primary)]"
            : "text-sidebar-foreground/70 hover:bg-primary/5 hover:text-sidebar-foreground"
        )}
      >
        <Icon className="size-4 shrink-0" aria-hidden="true" />
        {/* 折叠与否只靠 CSS 切换，水合前就是正确的外观；折叠时名称保留为读屏文本 */}
        <span className="min-w-0 flex-1 truncate group-data-[collapsed]/app-shell:sr-only">
          {entry.label}
        </span>
        {badge !== undefined ? (
          <>
            <span className="rounded-full bg-primary/10 px-1.5 text-[11px] leading-5 font-medium text-primary tabular-nums group-data-[collapsed]/app-shell:hidden">
              {badge}
            </span>
            <span
              aria-hidden="true"
              className="absolute top-2 right-2 hidden size-1.5 rounded-full bg-primary group-data-[collapsed]/app-shell:block"
            />
          </>
        ) : null}
        {isGroup ? (
          <ChevronRightIcon
            className="size-3 shrink-0 opacity-40 group-data-[collapsed]/app-shell:hidden"
            aria-hidden="true"
          />
        ) : null}
      </NavLink>
    )
    return (
      <li key={entry.id}>
        {/* 始终包一层 Tooltip，仅折叠时启用，避免折叠切换时重新挂载链接 */}
        <Tooltip disabled={!collapsed}>
          <TooltipTrigger render={link} />
          <TooltipContent side="right">{entry.label}</TooltipContent>
        </Tooltip>
      </li>
    )
  }

  function renderSection(section: NavSection) {
    return (
      <section key={section.id} aria-label={section.label}>
        <h2
          className="flex h-8 items-center px-3 text-[11px] font-medium text-sidebar-foreground/50 group-data-[collapsed]/app-shell:sr-only"
        >
          {section.label}
        </h2>
        <ul className="flex flex-col gap-1">
          {section.entries.map(renderEntry)}
        </ul>
      </section>
    )
  }

  return (
    <nav
      data-slot="app-shell-primary-nav"
      data-collapsed={collapsed ? "" : undefined}
      aria-label={text.mainNavigation}
      className={cn("flex h-full min-h-0 flex-1 flex-col", className)}
      {...props}
    >
      <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-2 py-4">
        {config.sections.map(renderSection)}
      </div>
      {config.footer ? (
        <div className="shrink-0 border-t border-sidebar-border px-2 py-3">
          {renderSection(config.footer)}
        </div>
      ) : null}
    </nav>
  )
}

export { PrimaryNav }
export type { PrimaryNavProps }

页面

Console Shell企业控制台布局