@djangocfg/ 传出

布局、应用程序外壳和提供者 Next.js App路由器部分内容 强哥CFG。 。 。 .

pnpm add @djangocfg/layouts

/* Golden path — bundles Tailwind + tokens + base + utilities, layer-safe */
@import "@djangocfg/ui-core/styles/full";
@import "@djangocfg/layouts/styles";

端点 : @djangocfg/ui-core, React 19, Next.js 16+,"尾风CSS 4.

快开始

两项责任,分开处理:

1. 供应商 - 挂载 BaseApp ONCE 在应用根(主题、认证、i18n、SWR、, 监视器,土司。 框架-可知性(Wails/Vite中的工作也).
2. 每节外壳 -每个下一个.js 路由组 layout.tsx 进口 匹配 shell (PrivateLayout 编号 : PublicLayout)并自相传出. 没有运行时间布局路由器,没有 enabledPath 匹配 .

// app/[locale]/layout.tsx — providers, once
import { BaseApp } from '@djangocfg/layouts';
<BaseApp project="my-app" theme={{ defaultTheme: 'system' }}
         auth={{ apiUrl: '…', routes: { auth: '/auth' } }}
         i18n={{ locale, locales, onLocaleChange: changeLocale, routing }}>
  {children}
</BaseApp>

// app/[locale]/(pages)/private/layout.tsx — the private shell
import { PrivateLayout } from '@djangocfg/layouts';
<PrivateLayout sidebar={sidebar} header={header}>{children}</PrivateLayout>

见 BaseApp 读取 全文 供应商表面和Next.js vs Wails 接线,以及演示应用 (单位:千美元)apps/demo/app/_layouts完全参考.

过 i18n 使用时 next-intl 或任何本地化的前置路由,所以 链接桥和本地化切换器解析正确.

布局

管理员 不是单独的布局——使用 PrivateLayout 有管理员 sidebar 在您的配置 app/.../admin/layout.tsx。 。 。 .

仅限工作人员的路线组

PrivateLayout警卫检查会话 表面也需要 工作人员,增加 requireStaff (从 useAuth().isAdminUser,则 is_staff || is_superuser 折叠 :

<PrivateLayout sidebar={sidebar} header={header} requireStaff>{children}</PrivateLayout>

一个签到的编外用户 ForbiddenState 而不是壳 - 没有a 重定向到认证窗体: 它们已经签入, 所以再次签入 无法授予此特权, 既然守护者首先保存当前 URL, a 重定向会回到这里 过 forbiddenFallback 供应自己 屏幕。 细节 : 二等兵拉尤特读取。 。 。 .

AuthLayout 弹壳

两个可切换的可视变体 variant 道具 :

• centered ——Apple HIG风格:无相框,中心形式,动画发光背景.
• split ——桌面上双列卡(形式左,可自定义的侧边栏右);移动上单列. 覆盖+模糊的背景图像/梯度 background 道具 (英语).

// Split variant with background image and testimonial sidebar
<AuthLayout
  variant="split"
  background={{ imageUrl: '/bg.jpg', overlay: 'hsl(var(--background) / 0.6)', blur: '8px' }}
  sidebar={<Testimonial />}
>
  {/* optional custom header, shown only on identifier step */}
</AuthLayout>

结构 : AuthShell 发往 CenteredShell 或者说 SplitShell。通过扩展添加新变量 AuthShellVariant 并创建新的 shell 组件.

ProfileLayout

<ProfileLayout enable2FA enableDeleteAccount tabs={tabs} slots={slots} />

主题

主题由主机应用程序的 CSS 导入所选择. BaseApp 仅拥有 浅/暗类,而不在运行时注入符号样式:

@import "@djangocfg/ui-core/styles/full";
@import "@djangocfg/ui-core/styles/presets/macos";

软件包导出 ThemeStylePresetId 财务报告和审定财务报表 THEME_STYLE_PRESET_ORDER 页:1 元数据和选择器。 预设的符号只活在静态 CSS 中 文件由 @djangocfg/ui-core。 。 。 .

i18n (英语)

import { useLocaleSwitcher } from '@djangocfg/nextjs/i18n/client';
import { routing } from '@djangocfg/nextjs/i18n/routing';

const { locale, locales, changeLocale } = useLocaleSwitcher();
<BaseApp i18n={{ locale, locales, onLocaleChange: changeLocale, routing }}>...</BaseApp>

何时 routing 已经设定, BaseApp 挂载一个地方意识 <Link> 适配器,所以每个布局后接的链接都保留活性地块前缀. 放弃它用于默认本地化的应用程序 .

监视器调试( D)

baseApp.project 启用 window.monitor。调试面板 : Cmd+D 或者说 ?debug=1。 。 。 .

MonitorBoundary

自动报告错误到的错误边界 @djangocfg/devtools。在页面/放出级别上使用,这样会出人意料地使出错降落在您的后端仪表板上.

import { MonitorBoundary } from '@djangocfg/layouts';

export default function Layout({ children }) {
  return (
    <MonitorBoundary variant="fullscreen" name="root-layout">
      {children}
    </MonitorBoundary>
  );
}

// Per-section, non-fatal:
<MonitorBoundary variant="card" name="dashboard-stats" resetKeys={[pathname]}>
  <StatsPanel />
</MonitorBoundary>

// Opt out of reporting (e.g. third-party iframe noise):
<MonitorBoundary reportToMonitor={false} variant="silent">
  <EmbeddedWidget />
</MonitorBoundary>

环绕 Boundary 从 @djangocfg/ui-core - 一样 variant编号 :fallback编号 :resetKeys API, 加自动 FrontendMonitor.capture(...)。 。 。 .

一个顶级边界. BaseApp 已挂载全应用程序崩溃 边界(UiProviders' independent-one, feed an i18n fallback)——不要包装 整个应用程序的第二个 使用 MonitorBoundary 页:1 每节 孤立(所以一个面板的崩溃不取出页面),而不是重复 根边框。 所有边界都共享一个ui-core Boundary 抓起来.

对于不报告到后端的本地 UI 部件, 使用 Boundary 从 @djangocfg/ui-core 直接说.

分析和认证漏斗

BaseApp 挂载第一当事方 AnalyticsProvider 一次和桥梁事件 从 @djangocfg/api/auth。 。 。 . AuthLayout 添加一个小 layouts.auth.step_viewed 面包屑在可见的每个步骤; 服务器确认 auth_login_success 事件仍然是真理的转换来源.

对于定制产品目标,使用 useAnalytics().event(name, props) 从 @djangocfg/analytics。参见该软件包的 README 用于输入事件目录, 浏览器外观, 和扩展模式 。 不要创建第二个路由监听器或 从布局直接发送分析.

片断

小表面显示主机挂载一次, 导出自 @djangocfg/layouts 财务报告和审定财务报表 @djangocfg/layouts/snippets数字 :

概念和决定

版式如何组合(滚动模型、安全区标志、PWA/移动行为、决定日志): @docs/。 。 。 .

故事和测试

@djangocfg/layouts/testing 只用于故事书和测试: MockAuthProvider 财务报告和审定财务报表 buildMockUser 给 useAuth() 固定会议, MockAuthFormProvider 和步骤组件上载一个没有满分的登录步骤 AuthLayout不从生产代码导入它.

软件包出口

扩展名 : @djangocfg/ext-newsletter, (中文(简体) ), ext-knowbase, (中文(简体) ), ext-leads, (中文(简体) ), ext-payments, (中文(简体) ), ext-support,, , , , , , , ,

许可证

麻省理工学院 - 强哥CFG