Console Shell企业控制台布局

"use client"

import type { ReactNode } from "react"

import { AppShell } from "@/components/app-shell/app-shell"
import { HeaderStatus } from "@/components/app-shell/header-status"
import { navConfig } from "@/components/app-shell/nav-config"
import { services } from "@/components/app-shell/sample-data"

/**
 * 控制台布局：app/(app) 路由组下的所有页面都会套上这层壳。
 * 导航数据里的图标是函数，不能从服务端组件传给客户端组件，所以这个布局是客户端组件。
 * 把 brand、user、onSignOut 换成你自己的数据与登录逻辑。
 * 侧栏折叠状态的首帧脚本由 AppShell 自动注入，这里和根布局都不需要额外接线。
 */
export default function AppLayout({ children }: { children: ReactNode }) {
  return (
    <AppShell
      nav={navConfig}
      brand={{ name: "Acme 控制台", tagline: "企业级监控与运维", href: "/dashboard" }}
      user={{ name: "管理员", email: "admin@example.com" }}
      onSignOut={() => {
        // TODO: 调用你的认证服务退出登录，然后跳转到 /login
      }}
      headerActions={<HeaderStatus services={services} />}
    >
      {children}
    </AppShell>
  )
}

import type { Metadata } from "next"

import { DashboardOverview } from "@/components/app-shell/dashboard-overview"

export const metadata: Metadata = {
  title: "概览",
}

/** 控制台首页：概览仪表盘。按同样的方式在 app/(app)/ 下添加更多页面，它们会自动套上侧栏与顶栏。 */
export default function DashboardPage() {
  return <DashboardOverview />
}

import type { Metadata } from "next"
import { notFound } from "next/navigation"

import { ListPage } from "@/components/app-shell/list-page"
import { navConfig } from "@/components/app-shell/nav-config"
import {
  isModule,
  normalizeHref,
  resolveNav,
} from "@/components/app-shell/nav-types"
import { PageSummary } from "@/components/app-shell/page-summaries"

type Props = { params: Promise<{ slug: string[] }> }

const BASE = "/dashboard"

/** 导航里除概览以外、位于 /dashboard/ 下的全部页面地址 */
function sectionHrefs() {
  const sections = [
    ...navConfig.sections,
    ...(navConfig.footer ? [navConfig.footer] : []),
  ]
  return sections
    .flatMap((section) => section.entries)
    .flatMap((entry) => (isModule(entry) ? entry.items : [entry]))
    .map((item) => normalizeHref(item.href))
    .filter((href) => href.startsWith(`${BASE}/`))
}

/** 只认导航里登记过的地址；其他路径交给 404 */
function resolveSection(slug: string[]) {
  const href = `${BASE}/${slug.join("/")}`
  const active = resolveNav(navConfig, href)
  return active && normalizeHref(active.item.href) === href ? active : undefined
}

export const dynamicParams = false

export function generateStaticParams() {
  return sectionHrefs().map((href) => ({
    slug: href.slice(BASE.length + 1).split("/"),
  }))
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const active = resolveSection((await params).slug)
  return { title: active?.item.label }
}

/**
 * 导航中其余页面的占位实现：按地址找到导航项，显示通用列表页与该页的数据摘要。
 * 开发真实页面时，在 app/(app)/dashboard/ 下新建同名路由即可，具体路由优先于这个兜底页。
 */
export default async function SectionPage({ params }: Props) {
  const active = resolveSection((await params).slug)
  if (!active) notFound()
  return (
    <ListPage
      section={active.trail.at(-2)}
      title={active.item.label}
      description={active.item.description}
      summary={<PageSummary id={active.item.id} />}
    />
  )
}

"use client"

import * as React from "react"
import { usePathname } from "next/navigation"

import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet"
import { TooltipProvider } from "@/components/ui/tooltip"
import { cn } from "@/lib/utils"
import { useControllableState } from "@/hooks/use-controllable-state"

import { AppHeader, type AppShellBrand } from "./app-header"
import { AppShellScript, type AppShellScriptProps } from "./app-shell-script"
import {
  AppShellLabelsProvider,
  DEFAULT_STORAGE_KEY,
  NAV_WIDTH_CLASS,
  NAV_WIDTH_TRANSITION,
  useAppShellLabels,
  type AppShellLabels,
} from "./config"
import type { NavLinkBehavior } from "./nav-link"
import { resolveNav, type NavConfig } from "./nav-types"
import { PrimaryNav } from "./primary-nav"
import { useStoredFlag } from "./use-stored-flag"
import type { AppShellUser } from "./user-menu"
import { WorkspaceMobileNav, WorkspaceSidebar } from "./workspace-sidebar"

type AppShellProps = Omit<React.ComponentProps<"div">, "children"> & {
  /** 导航数据：一级导航 + 二级（工作区）侧栏，见 nav-config.ts */
  nav: NavConfig
  /** 品牌区：名称、Logo、说明与跳转地址 */
  brand?: AppShellBrand
  /** 顶栏右侧的额外操作区，例如「AI 助手」按钮、服务状态 */
  headerActions?: React.ReactNode
  /** 主区域右侧插槽；agent-chat 嵌入面板在空间不足时覆盖显示，高度占满工作区 */
  aside?: React.ReactNode
  /** 当前登录用户，用于顶栏右侧的用户菜单；不传则不显示 */
  user?: AppShellUser
  /** 额外的用户菜单项（DropdownMenuItem），放在「退出登录」之前 */
  userMenu?: React.ReactNode
  /** 点击「退出登录」时的回调 */
  onSignOut?: () => void
  /** 当前地址，用于高亮导航；不传则取 usePathname() */
  activeHref?: string
  /** 传入后拦截导航链接的默认跳转并回调，适合预览 / 单页场景；接入路由时不要传 */
  onNavigate?: (payload: { href: string }) => void
  /**
   * 侧栏是否折叠（受控）；不传则内部维护并记住在 localStorage。
   * 受控时不读写 localStorage、也不注入首帧脚本：想避免首屏闪烁，
   * 请让首次渲染传入的值就是最终状态（例如服务端从 cookie 读取）。
   */
  collapsed?: boolean
  /** 非受控时的初始折叠状态（无本地记录时生效） */
  defaultCollapsed?: boolean
  /** 折叠状态变化时的回调，受控与非受控都会触发 */
  onCollapsedChange?: (collapsed: boolean) => void
  /** 非受控时记住折叠状态的 localStorage 键 */
  storageKey?: string
  /**
   * 是否显示亮暗模式切换（依赖 next-themes）
   * @default true
   */
  themeToggle?: boolean
  /** 覆盖默认文案，见 config.ts 的 DEFAULT_LABELS */
  labels?: Partial<AppShellLabels>
  /** 主区域内容 */
  children: React.ReactNode
}

const defaultBrand: AppShellBrand = { name: "控制台" }

/**
 * 企业控制台布局：固定顶栏 + 可折叠一级导航 + 可选二级工作区侧栏 + 独立滚动的主区域 + 右侧 aside 插槽。
 * 窄屏（< 768px）一级导航变为左侧 Sheet 抽屉，二级导航变为顶栏下方的横向标签条。
 */
function AppShell({
  className,
  nav,
  brand = defaultBrand,
  headerActions,
  aside,
  user,
  userMenu,
  onSignOut,
  activeHref,
  onNavigate,
  collapsed: collapsedProp,
  defaultCollapsed = false,
  onCollapsedChange,
  storageKey = DEFAULT_STORAGE_KEY,
  themeToggle = true,
  labels,
  children,
  ...props
}: AppShellProps) {
  const text = useAppShellLabels(labels)
  const pathname = usePathname()
  const currentHref = activeHref ?? pathname
  const active = React.useMemo(
    () => resolveNav(nav, currentHref),
    [nav, currentHref]
  )

  // 非受控时折叠状态来自 localStorage（水合安全）；受控时完全由外部决定
  const [stored, setStored] = useStoredFlag(storageKey, defaultCollapsed)
  const [collapsed, setCollapsed] = useControllableState({
    prop: collapsedProp ?? stored,
    defaultProp: defaultCollapsed,
    onChange: (next) => {
      if (collapsedProp === undefined) setStored(next)
      onCollapsedChange?.(next)
    },
  })
  const [mobileOpen, setMobileOpen] = React.useState(false)
  // 只有用户点击折叠后才开启宽度过渡，首次渲染与水合不播放动画
  const [animate, setAnimate] = React.useState(false)

  const mainRef = React.useRef<HTMLElement>(null)
  React.useEffect(() => {
    mainRef.current?.scrollTo({ top: 0, left: 0 })
  }, [currentHref])

  const navigation = React.useMemo<NavLinkBehavior>(
    () => ({
      intercept: Boolean(onNavigate),
      onNavigate: (payload) => {
        setMobileOpen(false)
        onNavigate?.(payload)
      },
    }),
    [onNavigate]
  )

  const group = active?.module

  return (
    <TooltipProvider>
      <AppShellLabelsProvider labels={text}>
        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
          <div
            data-slot="app-shell"
            data-collapsed={collapsed ? "" : undefined}
            data-animate={animate ? "" : undefined}
            data-has-aside={aside ? "" : undefined}
            data-has-workspace={group ? "" : undefined}
            className={cn(
              "group/app-shell flex h-svh flex-col overflow-hidden bg-muted/35 text-foreground",
              className
            )}
            // 首帧脚本会在水合前改写 data-collapsed，以 DOM 为准
            suppressHydrationWarning
            {...props}
          >
            {/* 受控时折叠状态由外部决定，不能让脚本用本地记录覆盖 */}
            {collapsedProp === undefined ? (
              <AppShellScript storageKey={storageKey} />
            ) : null}
            <a
              href="#main-content"
              className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:shadow-lg focus:ring-3 focus:ring-ring/50 focus:outline-none"
            >
              {text.skipToContent}
            </a>
            <AppHeader
              brand={brand}
              collapsed={collapsed}
              onToggleCollapsed={() => {
                setAnimate(true)
                setCollapsed(!collapsed)
              }}
              trail={active?.trail ?? []}
              actions={headerActions}
              themeToggle={themeToggle}
              user={user}
              userMenu={userMenu}
              onSignOut={onSignOut}
              navigation={navigation}
              labels={labels}
            />
            {group ? (
              <WorkspaceMobileNav
                module={group}
                activeId={active?.item.id}
                navigation={navigation}
                labels={labels}
              />
            ) : null}
            <div className="flex min-h-0 flex-1">
              <aside
                data-slot="app-shell-sidebar"
                data-collapsed={collapsed ? "" : undefined}
                className={cn(
                  "hidden shrink-0 border-r border-sidebar-border bg-sidebar min-[800px]:flex",
                  NAV_WIDTH_CLASS.sidebar,
                  NAV_WIDTH_TRANSITION
                )}
              >
                <PrimaryNav
                  config={nav}
                  active={active}
                  collapsed={collapsed}
                  navigation={navigation}
                  labels={labels}
                />
              </aside>
              {group ? (
                <WorkspaceSidebar
                  module={group}
                  activeId={active?.item.id}
                  navigation={navigation}
                  labels={labels}
                />
              ) : null}
              <div data-slot="app-shell-workspace" className="@container/workspace relative flex min-h-0 min-w-0 flex-1">
                <main
                  data-slot="app-shell-main"
                  id="main-content"
                  ref={mainRef}
                  tabIndex={-1}
                  aria-label={text.mainContent}
                  className="@container/main min-h-0 min-w-0 flex-1 overflow-y-auto bg-background outline-none"
                >
                  {children}
                </main>
                {/* 留足主区域 600px；助手最大拖拽宽度 640px，空间不足时覆盖显示。 */}
                <div className="contents [&>[data-mode=embedded]]:absolute [&>[data-mode=embedded]]:inset-y-0 [&>[data-mode=embedded]]:right-0 [&>[data-mode=embedded]]:z-30 [&>[data-mode=embedded]]:max-w-full [&>[data-mode=embedded]]:shadow-xl @min-[1240px]/workspace:[&>[data-mode=embedded]]:relative @min-[1240px]/workspace:[&>[data-mode=embedded]]:shadow-none">{aside}</div>
              </div>
            </div>
            <SheetContent
              side="left"
              className="gap-0 p-0 data-[side=left]:w-[280px] data-[side=left]:sm:max-w-[280px]"
            >
              <SheetHeader className="border-b border-border px-4 py-3">
                <SheetTitle className="text-sm">{text.mainNavigation}</SheetTitle>
                <SheetDescription className="sr-only">
                  {text.mainNavigationDescription}
                </SheetDescription>
              </SheetHeader>
              <div className="flex min-h-0 flex-1 bg-sidebar">
                <PrimaryNav
                  config={nav}
                  active={active}
                  navigation={navigation}
                  labels={labels}
                />
              </div>
            </SheetContent>
          </div>
        </Sheet>
      </AppShellLabelsProvider>
    </TooltipProvider>
  )
}

export { AppShell, AppShellScript }
export type {
  AppShellBrand,
  AppShellProps,
  AppShellScriptProps,
  AppShellUser,
}

"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 }

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 }

"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 }

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

import { formatLabel, useAppShellLabels, type AppShellLabels } from "./config"
import { NavLink, type NavLinkBehavior } from "./nav-link"
import type { NavModule } from "./nav-types"

type WorkspaceNavProps = Omit<React.ComponentProps<"nav">, "children"> & {
  module: NavModule
  /** 当前选中的子项 id */
  activeId?: string
  navigation?: NavLinkBehavior
  labels?: Partial<AppShellLabels>
}

function WorkspaceNav({
  className,
  module: group,
  activeId,
  navigation,
  labels,
  mobile = false,
  ...props
}: WorkspaceNavProps & { mobile?: boolean }) {
  const text = useAppShellLabels(labels)
  const navRef = React.useRef<HTMLElement>(null)

  // 移动端是横向滚动条：让当前项保持在可视区域中间
  React.useEffect(() => {
    const nav = navRef.current
    if (!mobile || !nav) return
    function reveal() {
      const current = nav!.querySelector<HTMLElement>('a[aria-current="page"]')
      if (current && nav!.clientWidth) {
        nav!.scrollLeft =
          current.offsetLeft -
          nav!.offsetLeft -
          (nav!.clientWidth - current.clientWidth) / 2
      }
    }
    reveal()
    const observer = new ResizeObserver(reveal)
    observer.observe(nav)
    return () => observer.disconnect()
  }, [activeId, mobile])

  return (
    <nav
      data-slot="app-shell-workspace-nav"
      data-mobile={mobile ? "" : undefined}
      ref={navRef}
      aria-label={formatLabel(text.workspaceNavigation, group.label)}
      className={cn(
        "flex",
        mobile
          ? "h-10 shrink-0 items-center gap-1.5 overflow-x-auto overflow-y-hidden border-b border-border bg-muted/20 px-3 [scrollbar-width:none] xl:hidden [&::-webkit-scrollbar]:hidden"
          : "min-h-0 flex-1 flex-col gap-1.5 overflow-y-auto px-3 py-4",
        className
      )}
      {...props}
    >
      {group.items.map((item) => {
        const active = item.id === activeId
        const Icon = item.icon
        return (
          <NavLink
            key={item.id}
            data-slot="app-shell-workspace-item"
            data-active={active ? "" : undefined}
            href={item.href}
            navigation={navigation}
            aria-current={active ? "page" : undefined}
            className={cn(
              "flex min-w-0 shrink-0 items-center rounded-md transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50 motion-reduce:transition-none",
              mobile
                ? "h-7 gap-1.5 px-2.5 text-xs"
                : "min-h-14 gap-2.5 px-3 py-2.5 text-sm",
              active
                ? "bg-primary/10 font-medium text-foreground shadow-[inset_3px_0_0_var(--primary)]"
                : "text-muted-foreground hover:bg-muted hover:text-foreground"
            )}
          >
            <Icon
              aria-hidden="true"
              className={mobile ? "size-3.5 shrink-0" : "size-4 shrink-0"}
            />
            <span className="min-w-0 flex-1 text-left">
              <span className="block truncate">{item.label}</span>
              {!mobile && item.description ? (
                <span className="mt-0.5 block truncate text-[11px] font-normal text-muted-foreground">
                  {item.description}
                </span>
              ) : null}
            </span>
            {!mobile && item.badge !== undefined ? (
              <span className="rounded-full bg-primary/10 px-1.5 text-[11px] leading-5 font-medium text-primary tabular-nums">
                {item.badge}
              </span>
            ) : null}
          </NavLink>
        )
      })}
    </nav>
  )
}

/** 窄屏下二级导航：Header 下方的横向滚动标签条。 */
function WorkspaceMobileNav(props: WorkspaceNavProps) {
  return <WorkspaceNav {...props} mobile />
}

/** 二级（工作区）侧栏：模块标题 + 子项列表，宽屏显示在一级导航右侧。 */
function WorkspaceSidebar({
  className,
  ...props
}: WorkspaceNavProps) {
  const { module: group, labels } = props
  const text = useAppShellLabels(labels)
  const GroupIcon = group.icon
  return (
    <aside
      data-slot="app-shell-workspace-sidebar"
      aria-label={formatLabel(text.workspaceSidebar, group.label)}
      className={cn(
        "hidden h-full min-h-0 w-[220px] shrink-0 flex-col border-r border-border bg-muted/20 xl:flex",
        className
      )}
    >
      <div className="flex h-[76px] shrink-0 items-center gap-2.5 border-b border-border px-5">
        <div className="flex size-8 shrink-0 items-center justify-center rounded-md border border-primary/20 bg-primary/10 text-primary">
          <GroupIcon className="size-4" aria-hidden="true" />
        </div>
        <div className="min-w-0">
          <p className="truncate text-sm font-medium">{group.label}</p>
          {group.description ? (
            <p className="truncate text-[11px] text-muted-foreground">
              {group.description}
            </p>
          ) : null}
        </div>
      </div>
      <WorkspaceNav {...props} />
    </aside>
  )
}

export { WorkspaceMobileNav, WorkspaceSidebar }
export type { WorkspaceNavProps }

"use client"

import * as React from "react"
import type { LucideIcon } from "lucide-react"

import { cn } from "@/lib/utils"
import { SegmentedControl } from "@/components/ui/segmented-control/segmented-control"

import { useAppShellLabels, type AppShellLabels } from "./config"

type PageHeaderProps = Omit<React.ComponentProps<"header">, "title"> & {
  title: string
  description?: string
  /** 标题上方的小标题，通常是所属分组 */
  section?: string
  /** 右侧操作区，例如「新建」「导出」按钮 */
  actions?: React.ReactNode
}

/** 页面标题栏：分组小标题 + 标题 + 说明 + 右侧操作区，滚动时吸附在主区域顶部。 */
function PageHeader({
  className,
  title,
  description,
  section,
  actions,
  ...props
}: PageHeaderProps) {
  return (
    <header
      data-slot="app-shell-page-header"
      className={cn(
        "sticky top-0 z-20 flex min-h-[76px] shrink-0 flex-wrap items-center justify-between gap-4 border-b border-border bg-background/95 px-4 py-3 backdrop-blur @lg/main:px-6",
        className
      )}
      {...props}
    >
      <div className="min-w-0 basis-full @min-[600px]/main:basis-auto @min-[600px]/main:flex-1">
        {section ? (
          <p className="flex items-center gap-2 text-[11px] font-medium whitespace-nowrap tracking-widest text-muted-foreground">
            <span
              className="size-1.5 rounded-full bg-primary"
              aria-hidden="true"
            />
            {section}
          </p>
        ) : null}
        <div className="mt-1 flex min-w-0 flex-wrap items-baseline gap-x-3 gap-y-1">
          <h1 className="shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight @lg/main:text-2xl">
            {title}
          </h1>
          {description ? (
            <p
              className="hidden min-w-0 truncate text-xs text-muted-foreground @min-[600px]/main:block"
              title={description}
            >
              {description}
            </p>
          ) : null}
        </div>
        {description ? (
          <p className="mt-1 truncate text-[11px] text-muted-foreground @min-[600px]/main:hidden">
            {description}
          </p>
        ) : null}
      </div>
      {actions ? (
        <div className="flex shrink-0 items-center gap-2">{actions}</div>
      ) : null}
    </header>
  )
}

type PageTab = { value: string; label: string; icon?: LucideIcon }

type PageTabsProps = Omit<React.ComponentProps<"div">, "onChange"> & {
  tabs: PageTab[]
  value: string
  onValueChange: (value: string) => void
  /** 右侧附加内容，例如时间范围说明 */
  trailing?: React.ReactNode
  labels?: Partial<AppShellLabels>
}

/**
 * 范围切换条（如「全局总览 / 应用 A / 应用 B」）：用分段选择实现。
 * 它切换的是同一页内容的数据范围，没有对应的面板，所以用单选语义而不是 tab；窄屏可横向滚动。
 */
function PageTabs({
  className,
  tabs,
  value,
  onValueChange,
  trailing,
  labels,
  ...props
}: PageTabsProps) {
  const text = useAppShellLabels(labels)
  return (
    <div
      data-slot="app-shell-page-tabs"
      className={cn(
        "flex min-w-0 items-center gap-3 border-b border-border px-4 py-2 @lg/main:px-6",
        className
      )}
      {...props}
    >
      <div className="min-w-0 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
        <SegmentedControl
          size="sm"
          aria-label={text.scopeSwitch}
          className="w-max min-w-max"
          value={value}
          onValueChange={onValueChange}
          options={tabs.map(({ value: tab, label, icon: Icon }) => ({
            value: tab,
            label,
            icon: Icon ? <Icon /> : undefined,
          }))}
        />
      </div>
      {trailing ? (
        <div className="ml-auto hidden shrink-0 text-[11px] text-muted-foreground @min-[700px]/main:block">
          {trailing}
        </div>
      ) : null}
    </div>
  )
}

/** 页面内容区：统一内边距与纵向间距。 */
function PageContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="app-shell-page-content"
      className={cn("flex min-w-0 flex-col gap-5 p-4 @lg/main:p-6", className)}
      {...props}
    />
  )
}

type PageFrameProps = Omit<React.ComponentProps<"div">, "title"> &
  Pick<PageHeaderProps, "title" | "description" | "section" | "actions"> & {
    /** 标题栏下方的标签条，通常是 <PageTabs /> */
    tabs?: React.ReactNode
    /** 标题栏下方的工具栏，通常是 <PageToolbar /> */
    toolbar?: React.ReactNode
  }

/**
 * 页面框架：标题栏 + 可选标签条 + 可选工具栏 + 内容区，一次组合完成。
 * 需要更多控制时直接使用 PageHeader / PageTabs / PageContent。
 */
function PageFrame({
  className,
  title,
  description,
  section,
  actions,
  tabs,
  toolbar,
  children,
  ...props
}: PageFrameProps) {
  return (
    <div
      data-slot="app-shell-page-frame"
      className={cn("flex min-w-0 flex-col", className)}
      {...props}
    >
      <PageHeader
        title={title}
        description={description}
        section={section}
        actions={actions}
      />
      {tabs}
      {toolbar}
      <PageContent>{children}</PageContent>
    </div>
  )
}

export { PageContent, PageFrame, PageHeader, PageTabs }
export type { PageFrameProps, PageHeaderProps, PageTab, PageTabsProps }

"use client"

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

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { cn } from "@/lib/utils"

import { useAppShellLabels, type AppShellLabels } from "./config"

type PageToolbarProps = Omit<React.ComponentProps<"section">, "children"> & {
  total: number
  page: number
  pageSize: number
  onPageChange: (page: number) => void
  search?: string
  onSearchChange?: (value: string) => void
  /** 搜索框的无障碍名称与占位文字，默认取 labels.search */
  searchLabel?: string
  /** 搜索框旁边的筛选控件，例如 Select、Popover */
  filters?: React.ReactNode
  labels?: Partial<AppShellLabels>
}

/**
 * 列表页工具栏：总数 + 翻页 + 搜索 + 自定义筛选项（filters 插槽）。
 * 状态完全受控，数据请求与过滤逻辑由页面自己负责。
 */
function PageToolbar({
  className,
  total,
  page,
  pageSize,
  onPageChange,
  search,
  onSearchChange,
  searchLabel,
  filters,
  labels,
  ...props
}: PageToolbarProps) {
  const text = useAppShellLabels(labels)
  const totalPages = Math.max(1, Math.ceil(total / pageSize))
  const searchName = searchLabel ?? text.search
  return (
    <section
      data-slot="app-shell-page-toolbar"
      aria-label={text.pageToolbar}
      className={cn(
        "flex min-h-14 shrink-0 flex-wrap items-center justify-between gap-x-6 gap-y-3 border-b border-border px-4 py-3 sm:px-6",
        className
      )}
      {...props}
    >
      <div className="flex items-center gap-3">
        <span className="text-xs font-medium tabular-nums">
          {total} {text.totalUnit}
        </span>
        <div className="flex items-center gap-1">
          <Button
            variant="outline"
            size="icon-sm"
            aria-label={text.previousPage}
            disabled={page <= 1}
            onClick={() => onPageChange(page - 1)}
          >
            <ChevronLeftIcon />
          </Button>
          <span className="min-w-14 text-center text-xs text-muted-foreground tabular-nums">
            {page} / {totalPages}
          </span>
          <Button
            variant="outline"
            size="icon-sm"
            aria-label={text.nextPage}
            disabled={page >= totalPages}
            onClick={() => onPageChange(page + 1)}
          >
            <ChevronRightIcon />
          </Button>
        </div>
      </div>
      <div className="flex w-full min-w-0 flex-wrap items-center gap-2 sm:w-auto">
        {onSearchChange ? (
          <div className="relative min-w-36 flex-1 sm:w-64 sm:flex-none">
            <SearchIcon
              aria-hidden="true"
              className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground"
            />
            <Input
              type="search"
              value={search ?? ""}
              onChange={(event) => onSearchChange(event.target.value)}
              aria-label={searchName}
              placeholder={`${searchName}…`}
              className="pl-8 text-xs md:text-xs"
            />
          </div>
        ) : null}
        {filters}
      </div>
    </section>
  )
}

export { PageToolbar }
export type { PageToolbarProps }

"use client"

import * as React from "react"
import {
  ActivityIcon,
  AlertTriangleIcon,
  CheckCircle2Icon,
  CircleDashedIcon,
  XCircleIcon,
  type LucideIcon,
} from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"
import { cn } from "@/lib/utils"

import { formatLabel, useAppShellLabels, type AppShellLabels } from "./config"

type ServiceState = "healthy" | "warning" | "unavailable" | "unknown"

type ServiceStatus = {
  id: string
  label: string
  state: ServiceState
  detail?: string
}

type HeaderStatusProps = {
  services: ServiceStatus[]
  /** 最近一次检查时间的展示文字，例如「14:32:05」 */
  checkedAt?: string
  className?: string
  labels?: Partial<AppShellLabels>
}

// 状态靠「图标 + 文字」区分，颜色只用主题变量，换颜色主题后依然可辨
const stateStyles: Record<
  ServiceState,
  { label: keyof AppShellLabels; icon: LucideIcon; className: string }
> = {
  healthy: {
    label: "stateHealthy",
    icon: CheckCircle2Icon,
    className: "text-primary",
  },
  warning: {
    label: "stateWarning",
    icon: AlertTriangleIcon,
    className: "text-foreground",
  },
  unavailable: {
    label: "stateUnavailable",
    icon: XCircleIcon,
    className: "text-destructive",
  },
  unknown: {
    label: "stateUnknown",
    icon: CircleDashedIcon,
    className: "text-muted-foreground",
  },
}

const severity: ServiceState[] = ["unavailable", "warning", "unknown", "healthy"]

/** 顶栏服务状态：按钮显示整体状态，弹层列出各服务。数据由外部传入（轮询、SSE 等自行实现）。 */
function HeaderStatus({
  services,
  checkedAt,
  className,
  labels,
}: HeaderStatusProps) {
  const text = useAppShellLabels(labels)
  const overall =
    severity.find((state) => services.some((s) => s.state === state)) ??
    "unknown"
  const Overall = stateStyles[overall]
  return (
    <Popover>
      <PopoverTrigger
        render={
          <Button
            variant="ghost"
            className={cn("gap-1.5 px-2 text-muted-foreground", className)}
            aria-label={formatLabel(
              text.serviceStatusAria,
              text[Overall.label]
            )}
          />
        }
      >
        <span className="relative flex size-4 items-center justify-center">
          <ActivityIcon aria-hidden="true" />
          <Overall.icon
            aria-hidden="true"
            className={cn(
              "absolute -top-1 -right-1 size-2.5 rounded-full bg-background",
              Overall.className
            )}
          />
        </span>
        <span className="hidden text-xs xl:inline">{text.serviceStatus}</span>
      </PopoverTrigger>
      <PopoverContent
        data-slot="app-shell-header-status"
        align="end"
        className="w-72 max-w-[calc(100vw-1rem)]"
      >
        <p className="text-sm font-medium">{text.serviceStatus}</p>
        <ul className="divide-y divide-border">
          {services.map((service) => {
            const state = stateStyles[service.state]
            return (
              <li key={service.id} className="py-2 first:pt-0 last:pb-0">
                <div className="flex items-center justify-between gap-2 text-xs">
                  <span>{service.label}</span>
                  <span
                    className={cn("flex items-center gap-1.5", state.className)}
                  >
                    <state.icon className="size-3.5" aria-hidden="true" />
                    {text[state.label]}
                  </span>
                </div>
                {service.detail ? (
                  <p className="mt-1 text-xs leading-5 text-muted-foreground">
                    {service.detail}
                  </p>
                ) : null}
              </li>
            )
          })}
        </ul>
        {checkedAt ? (
          <p className="text-[11px] text-muted-foreground">
            {formatLabel(text.checkedAt, checkedAt)}
          </p>
        ) : null}
      </PopoverContent>
    </Popover>
  )
}

export { HeaderStatus }
export type { HeaderStatusProps, ServiceState, ServiceStatus }

"use client"

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

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

import { formatLabel, useAppShellLabels, type AppShellLabels } from "./config"

type AppShellUser = {
  name: string
  email?: string
  avatar?: string
}

type UserMenuProps = {
  user: AppShellUser
  onSignOut?: () => void
  labels?: Partial<AppShellLabels>
  /** 额外的菜单项，放在账号信息与「退出登录」之间，用 DropdownMenuItem */
  children?: React.ReactNode
}

/** 头像 + 下拉菜单：账号信息、自定义菜单项（children）、退出登录。 */
function UserMenu({ user, onSignOut, labels, children }: UserMenuProps) {
  const text = useAppShellLabels(labels)
  const initial = user.name.trim().slice(0, 1).toUpperCase() || "U"
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        render={
          <Button
            variant="ghost"
            size="icon"
            className="rounded-full"
            aria-label={formatLabel(text.userMenu, user.name)}
          />
        }
      >
        <Avatar size="sm">
          {user.avatar ? <AvatarImage src={user.avatar} alt="" /> : null}
          <AvatarFallback className="bg-primary text-primary-foreground">
            {initial}
          </AvatarFallback>
        </Avatar>
      </DropdownMenuTrigger>
      <DropdownMenuContent
        data-slot="app-shell-user-menu"
        align="end"
        className="w-56"
      >
        <DropdownMenuGroup>
          <DropdownMenuLabel className="flex flex-col gap-0.5 px-2 py-1.5 font-normal">
            <span className="truncate text-sm font-medium text-foreground">
              {user.name}
            </span>
            {user.email ? (
              <span className="truncate text-xs text-muted-foreground">
                {user.email}
              </span>
            ) : null}
          </DropdownMenuLabel>
        </DropdownMenuGroup>
        {children ? (
          <>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>{children}</DropdownMenuGroup>
          </>
        ) : null}
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive" onClick={onSignOut}>
          <LogOutIcon />
          {text.signOut}
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export { UserMenu }
export type { AppShellUser, UserMenuProps }

"use client"

import * as React from "react"
import { MoonIcon, SunIcon } from "lucide-react"
import { useTheme } from "next-themes"

import { Button } from "@/components/ui/button"

import { useAppShellLabels, type AppShellLabels } from "./config"

/** 亮 / 暗模式切换，依赖项目里已有的 next-themes ThemeProvider。用 CSS 切换图标，避免水合不一致。 */
function ThemeToggle({
  labels,
  ...props
}: React.ComponentProps<typeof Button> & {
  labels?: Partial<AppShellLabels>
}) {
  const { resolvedTheme, setTheme } = useTheme()
  const { toggleTheme } = useAppShellLabels(labels)
  return (
    <Button
      data-slot="app-shell-theme-toggle"
      variant="ghost"
      size="icon"
      aria-label={toggleTheme}
      title={toggleTheme}
      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
      {...props}
    >
      <SunIcon className="dark:hidden" />
      <MoonIcon className="hidden dark:block" />
    </Button>
  )
}

export { ThemeToggle }

"use client"

import * as React from "react"
import Link from "next/link"

/** 导航链接的统一行为，由 AppShell 创建后往下传。 */
type NavLinkBehavior = {
  /** 点击任一导航链接后触发：关闭移动端抽屉、通知外部当前地址等 */
  onNavigate?: (payload: { href: string }) => void
  /** 为 true 时拦截浏览器默认跳转，由 onNavigate 自行处理（预览、单页演示用） */
  intercept?: boolean
}

type NavLinkProps = Omit<React.ComponentProps<typeof Link>, "href"> & {
  href: string
  navigation?: NavLinkBehavior
}

/** 对 next/link 的薄封装：保留 Cmd/Ctrl 点击等原生行为，只处理普通左键点击。 */
function NavLink({
  href,
  navigation,
  onClick,
  prefetch,
  ...props
}: NavLinkProps) {
  function handleClick(event: React.MouseEvent<HTMLAnchorElement>) {
    onClick?.(event)
    if (
      event.defaultPrevented ||
      event.button !== 0 ||
      event.metaKey ||
      event.ctrlKey ||
      event.shiftKey ||
      event.altKey
    ) {
      return
    }
    if (navigation?.intercept) event.preventDefault()
    navigation?.onNavigate?.({ href })
  }
  return (
    <Link
      data-slot="app-shell-nav-link"
      href={href}
      onClick={handleClick}
      // 拦截跳转时地址只是标识（预览、单页演示里这些路由并不存在），不要预取，免得请求出一串 404
      prefetch={navigation?.intercept ? false : prefetch}
      {...props}
    />
  )
}

export { NavLink }
export type { NavLinkBehavior, NavLinkProps }

import type { LucideIcon } from "lucide-react"

/** 叶子导航项：点击后直接跳转。 */
type NavLeaf = {
  id: string
  label: string
  href: string
  icon: LucideIcon
  /** 二级侧栏里显示在标题下方的一行说明 */
  description?: string
  /** 右侧角标，例如未读数 */
  badge?: string | number
}

/** 模块：在一级导航里占一行，进入后左侧出现二级（工作区）侧栏。 */
type NavModule = {
  id: string
  label: string
  icon: LucideIcon
  /** 二级侧栏顶部的副标题 */
  description?: string
  items: NavLeaf[]
}

type NavEntry = NavLeaf | NavModule

/** 一级导航的分组：带小标题的一组条目。 */
type NavSection = {
  id: string
  label: string
  entries: NavEntry[]
}

type NavConfig = {
  /** 一级导航分组，自上而下排列 */
  sections: NavSection[]
  /** 固定在一级导航底部的分组（如「资源与帮助」），可选 */
  footer?: NavSection
}

type ResolvedNav = {
  section: NavSection
  /** 当前条目所属的模块；叶子条目直接挂在分组下时为 undefined */
  module?: NavModule
  item: NavLeaf
  /** 面包屑：分组 → 模块 → 页面 */
  trail: string[]
}

function isModule(entry: NavEntry): entry is NavModule {
  return "items" in entry
}

/** 去掉查询串、哈希与末尾斜杠，便于和 href 比较（项目使用 trailingSlash 时尤其需要）。 */
function normalizeHref(href: string) {
  const path = href.split(/[?#]/)[0] ?? ""
  return path.length > 1 ? path.replace(/\/+$/, "") : path || "/"
}

function matches(current: string, href: string) {
  const target = normalizeHref(href)
  return current === target || current.startsWith(`${target}/`)
}

/** 模块在一级导航里指向的地址：第一个子项。 */
function moduleHref(module: NavModule) {
  return module.items[0]?.href ?? "#"
}

/** 根据当前地址找到对应的分组、模块、页面；取匹配最长的 href，未命中返回 undefined。 */
function resolveNav(
  config: NavConfig,
  href: string,
): ResolvedNav | undefined {
  const current = normalizeHref(href)
  let best: ResolvedNav | undefined
  let bestLength = -1
  const visit = (section: NavSection, item: NavLeaf, module?: NavModule) => {
    if (!matches(current, item.href)) return
    const length = normalizeHref(item.href).length
    if (length <= bestLength) return
    bestLength = length
    best = {
      section,
      module,
      item,
      trail: [section.label, ...(module ? [module.label] : []), item.label],
    }
  }
  for (const section of [...config.sections, ...(config.footer ? [config.footer] : [])]) {
    for (const entry of section.entries) {
      if (isModule(entry)) {
        for (const item of entry.items) visit(section, item, entry)
      } else {
        visit(section, entry)
      }
    }
  }
  return best
}

export { isModule, moduleHref, normalizeHref, resolveNav }
export type {
  NavConfig,
  NavEntry,
  NavLeaf,
  NavModule,
  NavSection,
  ResolvedNav,
}

import {
  Activity,
  BellRing,
  BookOpen,
  ClipboardList,
  FileText,
  Gauge,
  KeyRound,
  LayoutDashboard,
  LifeBuoy,
  Radar,
  ScrollText,
  Server,
  Settings,
  ShieldCheck,
  Users,
  Wrench,
} from "lucide-react"

import type { NavConfig } from "./nav-types"

/**
 * 导航数据集中在这里：改这个文件就能换掉整套导航。
 *
 * - sections[].entries 里的叶子条目 → 一级导航里的一行，点击直接跳转；
 * - 带 items 的条目是「模块」→ 一级导航里的一行，进入后出现二级（工作区）侧栏；
 * - footer 固定在一级导航底部。
 * 图标统一用 lucide-react。
 */
const navConfig: NavConfig = {
  sections: [
    {
      id: "workspace",
      label: "工作台",
      entries: [
        {
          id: "overview",
          label: "概览",
          href: "/dashboard",
          icon: LayoutDashboard,
        },
        {
          id: "records",
          label: "拨测记录",
          href: "/dashboard/records",
          icon: FileText,
        },
        {
          id: "interfaces",
          label: "接口探测",
          href: "/dashboard/interfaces",
          icon: Radar,
        },
        {
          id: "nodes",
          label: "节点监控",
          href: "/dashboard/nodes",
          icon: Server,
        },
        {
          id: "events",
          label: "事件与异常",
          href: "/dashboard/events",
          icon: Activity,
        },
      ],
    },
    {
      id: "management",
      label: "业务管理",
      entries: [
        {
          id: "operations",
          label: "运维管理",
          icon: Wrench,
          description: "告警、通知与维护配置",
          items: [
            {
              id: "alert-rules",
              label: "告警规则",
              href: "/dashboard/operations/alert-rules",
              icon: Gauge,
              description: "告警条件与站内提醒",
            },
            {
              id: "incidents",
              label: "告警事件",
              href: "/dashboard/operations/incidents",
              icon: BellRing,
              description: "触发周期与恢复记录",
              badge: 3,
            },
            {
              id: "maintenance",
              label: "维护窗口",
              href: "/dashboard/operations/maintenance",
              icon: ClipboardList,
              description: "维护范围与抑制时段",
            },
          ],
        },
        {
          id: "system",
          label: "系统管理",
          icon: ShieldCheck,
          description: "账号、权限与系统设置",
          items: [
            {
              id: "users",
              label: "用户管理",
              href: "/dashboard/system/users",
              icon: Users,
              description: "账号与角色分配",
            },
            {
              id: "roles",
              label: "角色权限",
              href: "/dashboard/system/roles",
              icon: KeyRound,
              description: "访问权限与首页模块",
            },
            {
              id: "settings",
              label: "系统配置",
              href: "/dashboard/system/settings",
              icon: Settings,
              description: "平台配置与运行约定",
            },
            {
              id: "audit-logs",
              label: "审计日志",
              href: "/dashboard/system/audit-logs",
              icon: ScrollText,
              description: "操作记录与完整上下文",
            },
          ],
        },
      ],
    },
  ],
  footer: {
    id: "resources",
    label: "资源与帮助",
    entries: [
      {
        id: "docs",
        label: "使用文档",
        href: "/dashboard/docs",
        icon: BookOpen,
      },
      {
        id: "support",
        label: "帮助与反馈",
        href: "/dashboard/support",
        icon: LifeBuoy,
      },
    ],
  },
}

export { navConfig }

"use client"

import * as React from "react"

// localStorage 不可用（隐私模式等）时退回内存，保证同一会话内状态仍然生效
const memory = new Map<string, boolean>()
const listeners = new Set<() => void>()

function subscribe(listener: () => void) {
  listeners.add(listener)
  window.addEventListener("storage", listener)
  return () => {
    listeners.delete(listener)
    window.removeEventListener("storage", listener)
  }
}

function read(key: string, fallback: boolean) {
  const cached = memory.get(key)
  if (cached !== undefined) return cached
  try {
    const stored = window.localStorage.getItem(key)
    return stored === null ? fallback : stored === "1"
  } catch {
    return fallback
  }
}

/**
 * 持久化到 localStorage 的布尔状态。
 * 服务端与水合阶段始终返回 fallback，水合完成后再读取本地值，避免水合不一致。
 */
function useStoredFlag(key: string, fallback = false) {
  const value = React.useSyncExternalStore(
    subscribe,
    () => read(key, fallback),
    () => fallback
  )
  const setValue = React.useCallback(
    (next: boolean) => {
      memory.set(key, next)
      try {
        window.localStorage.setItem(key, next ? "1" : "0")
      } catch {
        // 忽略：已写入内存
      }
      listeners.forEach((listener) => listener())
    },
    [key]
  )
  return [value, setValue] as const
}

export { useStoredFlag }

"use client"

import { DownloadIcon, RefreshCwIcon } from "lucide-react"
import * as React from "react"

import { Button } from "@/components/ui/button"
import { MiniChart } from "@/components/ui/mini-chart/mini-chart"
import {
  ChartCard,
  ChartCardContent,
  ChartCardDescription,
  ChartCardHeader,
  ChartCardTitle,
  ChartMetric,
  ChartMetrics,
  ChartSeries,
  ChartTable,
  type ChartTableColumn,
} from "@/components/ui/chart-card/chart-card"
import {
  StatBadge,
  StatCard,
  StatHeader,
  StatIcon,
  StatLabel,
  StatTrend,
  StatValue,
  type StatStatusName,
} from "@/components/ui/stat-card/stat-card"

import { formatLabel, useAppShellLabels } from "./config"
import {
  ErrorBudgetCard,
  SlowestEndpointsCard,
  StatusCodeCard,
} from "./overview-charts"
import { PageContent, PageHeader, PageTabs } from "./page-header"
import {
  dateRange,
  events,
  latencySeries,
  scopes,
  stats,
  type EventRow,
  type EventStatus,
} from "./sample-data"

// 事件状态对应到统计卡片的三档状态：正常 / 关注 / 风险
const statusNames = {
  ok: "ok",
  warning: "watch",
  error: "risk",
} satisfies Record<EventStatus, StatStatusName>

/** 状态徽标：色点 + 文字，不只依赖颜色。 */
function StatusBadge({ status }: { status: EventStatus }) {
  const text = useAppShellLabels()
  const label = {
    ok: text.eventOk,
    warning: text.eventWarning,
    error: text.eventError,
  } satisfies Record<EventStatus, string>
  return (
    <StatBadge
      data-slot="app-shell-status-badge"
      data-status={status}
      status={statusNames[status]}
    >
      {label[status]}
    </StatBadge>
  )
}

/** 事件明细表：仪表盘与列表页共用，仪表盘多一列耗时。 */
function EventsTable({
  rows,
  showLatency = false,
  caption,
}: {
  rows: EventRow[]
  showLatency?: boolean
  caption: string
}) {
  const text = useAppShellLabels()
  const columns: ChartTableColumn[] = [
    { key: "app", header: text.columnApp },
    { key: "target", header: text.columnTarget },
    { key: "status", header: text.columnStatus },
    ...(showLatency
      ? [{ key: "latency", header: text.columnLatency, align: "end" as const }]
      : []),
    { key: "time", header: text.columnTime, align: "end" },
  ]
  if (rows.length === 0) {
    return (
      <p
        data-slot="events-table-empty"
        className="py-10 text-center text-sm text-muted-foreground"
      >
        {text.emptyRows}
      </p>
    )
  }
  return (
    <ChartTable
      aria-label={caption}
      columns={columns}
      rows={rows.map((row) => ({
        app: <span className="font-medium">{row.app}</span>,
        target: (
          <span className="font-mono text-xs text-muted-foreground">
            {row.target}
          </span>
        ),
        status: <StatusBadge status={row.status} />,
        latency: row.latency,
        time: <span className="text-muted-foreground">{row.time}</span>,
      }))}
    />
  )
}

/**
 * 概览仪表盘：统计卡片（含迷你走势）、响应耗时与错误预算、状态码分布与最慢接口、最近事件表。
 * 全部用站内自研的数据展示组件拼成；图表区用容器查询（@container）排版，
 * 主区域被右侧 aside 挤窄时会自动改为单列，而不是只看浏览器视口宽度。
 */
function DashboardOverview() {
  const text = useAppShellLabels()
  const [scope, setScope] = React.useState("all")
  const rows =
    scope === "all"
      ? events
      : events.filter((event) =>
          scope === "orders" ? event.app === "订单中心" : event.app === "支付网关",
        )
  const max = Math.max(...latencySeries)
  const min = Math.min(...latencySeries)
  const average = Math.round(
    latencySeries.reduce((sum, value) => sum + value, 0) / latencySeries.length,
  )
  const latencyData = latencySeries.map((latency, index) => ({
    hour: `${String(index).padStart(2, "0")}:00`,
    latency,
  }))

  return (
    <div
      data-slot="app-shell-dashboard-overview"
      className="flex min-w-0 flex-col"
    >
      <PageHeader
        section={text.overviewSection}
        title={text.overviewTitle}
        description={text.overviewDescription}
        actions={
          <>
            <Button variant="outline">
              <DownloadIcon data-icon="inline-start" />
              {text.exportAction}
            </Button>
            <Button>
              <RefreshCwIcon data-icon="inline-start" />
              {text.refreshAction}
            </Button>
          </>
        }
      />
      <PageTabs
        tabs={scopes}
        value={scope}
        onValueChange={setScope}
        trailing={dateRange}
      />
      <PageContent className="@container">
        <section
          aria-label={text.keyMetrics}
          className="grid gap-4 @min-[480px]:grid-cols-2 @min-[960px]:grid-cols-4"
        >
          {stats.map((stat) => (
            <StatCard key={stat.id}>
              <StatHeader>
                <StatLabel>{stat.label}</StatLabel>
                <StatIcon tone="primary">
                  <stat.icon />
                </StatIcon>
              </StatHeader>
              <StatValue value={stat.value} unit={stat.unit} format={stat.format} />
              <MiniChart
                type="area"
                className="h-10"
                data={stat.trend.map((value, index) => ({
                  label: `${String(index * 2).padStart(2, "0")}:00`,
                  value,
                }))}
                seriesLabel={stat.label}
                format={stat.format}
                label={formatLabel(text.statTrendLabel, stat.label)}
              />
              <StatTrend
                value={stat.delta}
                format={stat.deltaFormat}
                invert={stat.invert}
              >
                {stat.hint}
              </StatTrend>
            </StatCard>
          ))}
        </section>

        <section
          aria-label={text.latencyTrend}
          className="grid gap-4 @3xl:grid-cols-3"
        >
          <ChartCard className="@3xl:col-span-2">
            <ChartCardHeader>
              <div className="flex flex-col gap-1">
                <ChartCardTitle>{text.latencyTrend}</ChartCardTitle>
                <ChartCardDescription>{text.latencyTrendUnit}</ChartCardDescription>
              </div>
              <ChartMetrics>
                <ChartMetric label={text.latencyPeak} value={`${max} ms`} />
                <ChartMetric label={text.latencyLow} value={`${min} ms`} />
                <ChartMetric label={text.latencyAverage} value={`${average} ms`} />
              </ChartMetrics>
            </ChartCardHeader>
            <ChartCardContent className="flex-1">
              <ChartSeries
                type="area"
                className="h-full min-h-44"
                data={latencyData}
                xKey="hour"
                series={[
                  { key: "latency", label: text.latencySeries, tone: "primary" },
                ]}
                label={formatLabel(text.latencyChartLabel, { max, min })}
              />
            </ChartCardContent>
          </ChartCard>
          <ErrorBudgetCard />
        </section>

        <section
          aria-label={text.statusCodes}
          className="grid gap-4 @3xl:grid-cols-3"
        >
          <StatusCodeCard />
          <SlowestEndpointsCard className="@3xl:col-span-2" />
        </section>

        <ChartCard>
          <ChartCardHeader>
            <div className="flex flex-col gap-1">
              <ChartCardTitle>{text.recentEvents}</ChartCardTitle>
              <ChartCardDescription>
                {formatLabel(text.recentEventsCount, { count: rows.length })}
              </ChartCardDescription>
            </div>
          </ChartCardHeader>
          <ChartCardContent>
            <EventsTable
              rows={rows}
              showLatency
              caption={text.eventsCaption}
            />
          </ChartCardContent>
        </ChartCard>
      </PageContent>
    </div>
  )
}

export { DashboardOverview, EventsTable, StatusBadge }