Providers 组件

Providers 组件

概述

index.tsx 是应用的根 Provider 组件，整合多个上下文 Provider，为整个应用提供主题、认证、国际化等功能。

文件路径

src/components/providers/index.tsx

功能特性

  • SessionProvider: NextAuth 会话管理
  • NextIntlClientProvider: 国际化支持
  • ThemeProvider: 主题管理（next-themes）
  • ThemeStyles: 主题样式注入
  • BrandingProvider: 品牌配置
  • Toaster: 全局 Toast 通知

接口定义

interface ThemeConfig {
  radius: "none" | "sm" | "md" | "lg";     // 圆角大小
  variant: "flat" | "default" | "brutal";  // UI 变体
  density: "compact" | "default" | "comfortable";  // 密度
  colors: {
    primary: string;  // 主色调
  };
}

interface BrandingConfig {
  name: string;              // 应用名称
  logo: string;              // Logo 路径
  description: string;       // 应用描述
  useCloneBranding?: boolean;  // 是否使用克隆品牌
}

interface ProvidersProps {
  children: React.ReactNode;
  locale: string;                    // 当前语言
  messages: AbstractIntlMessages;    // 翻译消息
  theme: ThemeConfig;                // 主题配置
  branding: BrandingConfig;          // 品牌配置
}

使用示例

import { Providers } from "@/components/providers";

export default function RootLayout({
  children,
  params: { locale }
}: {
  children: React.ReactNode;
  params: { locale: string }
}) {
  const messages = useMessages();
  const themeConfig = {
    radius: "md",
    variant: "default",
    density: "default",
    colors: { primary: "#3b82f6" }
  };
  const brandingConfig = {
    name: "Prompts.chat",
    logo: "/logo.svg",
    description: "AI Prompt 社区平台"
  };

  return (
    <Providers
      locale={locale}
      messages={messages}
      theme={themeConfig}
      branding={brandingConfig}
    >
      {children}
    </Providers>
  );
}

Provider 层级

SessionProvider (NextAuth)
  └── NextIntlClientProvider (i18n)
        └── ThemeProvider (next-themes)
              ├── ThemeStyles
              ├── BrandingProvider
              └── Toaster
                    └── {children}

配置说明

主题配置

属性可选值说明
radiusnone / sm / md / lg组件圆角大小
variantflat / default / brutalUI 风格变体
densitycompact / default / comfortable组件密度
colors.primary任意颜色值主题主色

主题 Provider 配置

<ThemeProvider
  attribute="class"           // 使用 class 属性切换主题
  defaultTheme="system"       // 默认跟随系统
  enableSystem                // 启用系统主题检测
  disableTransitionOnChange   // 切换时禁用过渡动画
>

依赖

  • next-themes - 主题管理
  • next-auth/react - 认证
  • next-intl - 国际化
  • @/components/ui/sonner - Toast 组件
  • ./theme-styles - 主题样式
  • ./branding-provider - 品牌 Provider

注意事项

  1. 该组件必须在 layout.tsx 中使用，包裹所有子组件
  2. 主题配置通常来自 prompts.config.ts
  3. 所有子组件都可以使用 useTheme()、useSession()、useTranslations() 等 hooks
  4. Toast 通知默认显示在右下角
← 返回目录