4f:Tf442,import * as React from 'react'; import { ChevronLeft, Moon, Palette, Sun } from 'lucide-react'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; import { Tooltip } from '@/components/ui/tooltip'; import { QUICK_THEME_ACCENTS, type AccentName } from '@/components/form/color-swatches'; import { ThemeMenu } from '@/components/layout/theme-menu'; import type { ThemeMode } from '@/components/layout/types'; import { useLayoutText } from '@/components/layout/layout-text'; /** * 登录 / 注册 / 找回密码的居中卡片布局（HeroUI 风格）： * 灰底 + 顶部主题色光晕和点阵，中间一张白卡放表单；顶栏放品牌和主题切换，底栏放版权与协议链接 */ export function AuthLayout({ brand = 'nest', logo, logoBare, copyright, footerLinks, toolbar, back, children, }: { brand?: string; /** 默认是品牌名的首字母 */ logo?: React.ReactNode; /** 不画底色方块，用于图片 Logo */ logoBare?: boolean; /** 左下角的版权文字，默认 `© {brand}` */ copyright?: React.ReactNode; footerLinks?: React.ReactNode; /** 右上角的工具条（主题色、语言、深色模式），见 AuthToolbar */ toolbar?: React.ReactNode; /** 卡片上方的返回链接 */ back?: React.ReactNode; children: React.ReactNode; }) { return ( <div className="relative isolate flex min-h-svh flex-col overflow-hidden bg-page"> <div aria-hidden className="pointer-events-none absolute inset-0 -z-10"> <div className="absolute inset-0 bg-[radial-gradient(var(--border-strong)_1px,transparent_1px)] [background-size:22px_22px] [mask-image:radial-gradient(ellipse_70%_55%_at_50%_0%,#000_30%,transparent_100%)] opacity-60" /> <div className="absolute top-[-240px] left-1/2 h-[480px] w-[min(820px,140vw)] -translate-x-1/2 rounded-full bg-primary/20 blur-[110px] dark:bg-primary/25" /> </div> <header className="flex h-16 shrink-0 items-center justify-between px-4 sm:px-8"> <div className="flex min-w-0 items-center gap-2.5"> <span className={cn( 'flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md', !logoBare && 'bg-primary text-sm font-semibold text-primary-foreground', )} > {logo ?? brand[0]?.toUpperCase()} </span> <span className="truncate text-[15px] font-semibold">{brand}</span> </div> {toolbar} </header> <main className="flex flex-1 items-center justify-center px-4 py-6 sm:py-10"> <div className="flex w-full max-w-[420px] animate-reveal flex-col gap-3"> {back && <div className="-ml-1.5">{back}</div>} <div className="flex flex-col gap-6 rounded-xl bg-background p-6 shadow-[var(--shadow-card),0_24px_48px_-24px_rgb(0_0_0/0.12)] sm:p-8 dark:ring-1 dark:ring-border"> {children} </div> </div> </main> <footer className="flex shrink-0 flex-col items-center gap-1.5 px-4 pb-6 text-xs text-muted-foreground sm:flex-row sm:justify-between sm:px-8"> <span>{copyright ?? `© ${brand}`}</span> {footerLinks && ( <span className="flex items-center gap-1.5 [&_a]:text-muted-foreground [&_a]:underline-offset-4 [&_a:hover]:text-foreground [&_a:hover]:underline"> {footerLinks} </span> )} </footer> </div> ); } /** * 登录页右上角的胶囊工具条：调色板（碰到时左侧滑出常用主题色色点，窄屏不出；点开是全部主题色与外观模式）、语言、深浅色切换。 * 文字取 LayoutTextProvider（与中台顶栏同一套）。 */ export function AuthToolbar({ theme, resolved, accent, onThemeChange, onAccentChange, language, }: { theme: ThemeMode; resolved: 'light' | 'dark'; accent: AccentName; onThemeChange: (t: ThemeMode) => void; onAccentChange: (a: AccentName) => void; /** 语言切换按钮，没有可选语言时不传 */ language?: React.ReactNode; }) { const text = useLayoutText(); const dark = resolved === 'dark'; return ( <div className="flex items-center gap-0.5 rounded-full bg-background/80 p-1 shadow-card [&_button]:rounded-full backdrop-blur-md dark:ring-1 dark:ring-border"> {/* 色点默认收起，碰到调色板（或键盘聚焦）时从右往左展开；0fr→1fr 让宽度跟着色点个数走 */} <div className="group/accents flex items-center"> <div className="grid grid-cols-[0fr] transition-[grid-template-columns] duration-500 ease-out group-hover/accents:grid-cols-[1fr] group-focus-within/accents:grid-cols-[1fr] max-sm:hidden motion-reduce:transition-none"> <div className="min-w-0 overflow-hidden"> <div role="radiogroup" aria-label={text.accent} className="flex items-center gap-2 py-1 pr-2.5 pl-2.5" > {QUICK_THEME_ACCENTS.map((a) => { const on = a.value === accent; return ( <Tooltip key={a.value} content={text.accentNames[a.value]}> <button type="button" role="radio" aria-checked={on} aria-label={text.accentNames[a.value]} onClick={() => onAccentChange(a.value)} style={{ background: a.color }} className={cn( 'size-[18px] shrink-0 rounded-full ring-offset-2 ring-offset-background transition-transform duration-150 hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', on && 'ring-2 ring-primary', )} /> </Tooltip> ); })} </div> </div> </div> <ThemeMenu theme={theme} resolved={resolved} accent={accent} onThemeChange={onThemeChange} onAccentChange={onAccentChange} icon={<Palette />} /> </div> {language} <Tooltip content={dark ? text.themeLight : text.themeDark}> <Button variant="ghost" size="icon-sm" aria-label={dark ? text.themeLight : text.themeDark} onClick={() => onThemeChange(dark ? 'light' : 'dark')} > {dark ? <Sun /> : <Moon />} </Button> </Tooltip> </div> ); } /** 卡片里的标题（登录 nest） */ export function AuthTitle({ title, description, icon, }: { title: React.ReactNode; description?: React.ReactNode; icon?: React.ReactNode; }) { return ( <div className="flex flex-col gap-1.5"> {icon && ( <span className="mb-2 flex size-11 items-center justify-center rounded-lg bg-primary/10 text-primary [&_svg]:size-5"> {icon} </span> )} <h1 className="m-0 text-2xl leading-tight font-semibold tracking-tight"> {title} </h1> {description && ( <p className="m-0 text-sm text-muted-foreground">{description}</p> )} </div> ); } export function BackLink({ children = '返回登录', render, }: { children?: React.ReactNode; render: (cls: string, inner: React.ReactNode) => React.ReactNode; }) { return ( <> {render( 'inline-flex items-center gap-1 rounded-sm px-1.5 py-1 text-sm text-fg-3 hover:bg-muted hover:text-foreground', <> <ChevronLeft className="size-4" /> {children} </>, )} </> ); } /** “或”分隔线 */ export function OrDivider({ children = '或' }: { children?: React.ReactNode }) { return ( <div className="flex items-center gap-3 text-xs text-muted-foreground"> <span className="h-px flex-1 bg-border" /> {children} <span className="h-px flex-1 bg-border" /> </div> ); } 4e:["$","$L2f","@components/auth/auth-layout.tsx,pre-0",{"className":"my-0 shiki shiki-themes github-light github-dark","style":{"--shiki-light":"#24292e","--shiki-dark":"#e1e4e8","--shiki-light-bg":"#fff","--shiki-dark-bg":"#24292e"},"tabIndex":"0","children":["$","$L34",null,{"children":["$","code","code-0",{"dangerouslySetInnerHTML":{"__html":"$4f"}}]}],"title":"components/auth/auth-layout.tsx","viewportProps":{"className":"max-h-[420px]"}}]

AuthLayout 登录页布局

登录

安装复制链接

用法复制链接

属性复制链接

本页目录

安装

用法

属性