BrandingProvider 组件

BrandingProvider 组件

概述

BrandingProvider 提供品牌配置的 React Context，允许应用中的任何组件访问品牌信息（名称、Logo、描述等）。

文件路径

src/components/providers/branding-provider.tsx

功能特性

  • 品牌配置上下文: 全局共享品牌信息
  • Hook 访问: 通过 useBranding() 获取品牌数据
  • TypeScript 支持: 完整的类型定义

接口定义

interface BrandingContextValue {
  name: string;              // 应用名称
  logo: string;              // Logo 路径（浅色模式）
  logoDark?: string;         // Logo 路径（深色模式）
  description: string;       // 应用描述
  appStoreUrl?: string;      // App Store 链接
  chromeExtensionUrl?: string;  // Chrome 扩展链接
  useCloneBranding?: boolean;   // 是否使用克隆品牌
}

interface BrandingProviderProps {
  children: ReactNode;
  branding: BrandingContextValue;
}

使用示例

在 Providers 中使用

import { BrandingProvider } from "./branding-provider";

<BrandingProvider branding={brandingConfig}>
  {children}
</BrandingProvider>

在组件中获取品牌信息

"use client";

import { useBranding } from "@/components/providers/branding-provider";

export function Header() {
  const { name, logo, description } = useBranding();

  return (
    <header>
      <img src={logo} alt={name} />
      <h1>{name}</h1>
      <p>{description}</p>
    </header>
  );
}
export function Logo() {
  const { logo, logoDark } = useBranding();
  
  return (
    <>
      <img src={logo} alt="Logo" className="dark:hidden" />
      {logoDark && (
        <img src={logoDark} alt="Logo" className="hidden dark:block" />
      )}
    </>
  );
}

默认值

品牌配置通常来自 prompts.config.ts：

const defaultBranding = {
  name: "Prompts.chat",
  logo: "/logo.svg",
  logoDark: "/logo-dark.svg",
  description: "AI Prompt 社区平台",
  useCloneBranding: false
};

依赖

  • React Context API

注意事项

  1. 必须在 BrandingProvider 内部使用 useBranding()
  2. 如果不在 Provider 内使用会抛出错误
  3. logoDark 是可选的，如果不提供则浅色 Logo 在所有主题使用
  4. 品牌配置通常在应用启动时从配置文件加载
← 返回目录