| "use client"; |
|
|
| import { useEffect, useRef, useState } from "react"; |
|
|
| import { fetchBranding, type BrandingConfig } from "@/lib/api"; |
|
|
| const BRANDING_UPDATED_EVENT = "chatgpt2api:branding-updated"; |
|
|
| export const DEFAULT_BRANDING: Required<BrandingConfig> = { |
| site_title: "ChatGPT 号池管理", |
| site_logo_url: "", |
| site_header_title: "chatgpt2api", |
| site_external_link_label: "GitHub", |
| site_external_link_url: "https://github.com/basketikun/chatgpt2api", |
| site_external_link_icon_url: "", |
| site_external_link_icon_svg: "", |
| }; |
|
|
| function normalizeText(value: unknown, fallback: string) { |
| const normalized = String(value ?? "").trim(); |
| return normalized || fallback; |
| } |
|
|
| export function normalizeBranding(value: BrandingConfig | null | undefined): Required<BrandingConfig> { |
| return { |
| site_title: normalizeText(value?.site_title, DEFAULT_BRANDING.site_title), |
| site_logo_url: String(value?.site_logo_url ?? "").trim(), |
| site_header_title: normalizeText(value?.site_header_title, DEFAULT_BRANDING.site_header_title), |
| site_external_link_label: String(value?.site_external_link_label ?? DEFAULT_BRANDING.site_external_link_label).trim(), |
| site_external_link_url: String(value?.site_external_link_url ?? DEFAULT_BRANDING.site_external_link_url).trim(), |
| site_external_link_icon_url: String(value?.site_external_link_icon_url ?? "").trim(), |
| site_external_link_icon_svg: String(value?.site_external_link_icon_svg ?? "").trim(), |
| }; |
| } |
|
|
| function updateFavicon(href: string) { |
| const targetHref = href || "/favicon.ico"; |
| let icon = document.querySelector<HTMLLinkElement>("link[data-branding-icon='favicon']"); |
| if (!icon) { |
| icon = document.createElement("link"); |
| icon.rel = "icon"; |
| icon.setAttribute("data-branding-icon", "favicon"); |
| document.head.appendChild(icon); |
| } |
| icon.rel = "icon"; |
| icon.href = targetHref; |
| icon.type = guessIconType(targetHref); |
|
|
| let appleIcon = document.querySelector<HTMLLinkElement>("link[data-branding-icon='apple-touch-icon']"); |
| if (!appleIcon) { |
| appleIcon = document.createElement("link"); |
| appleIcon.rel = "apple-touch-icon"; |
| appleIcon.setAttribute("data-branding-icon", "apple-touch-icon"); |
| document.head.appendChild(appleIcon); |
| } |
| appleIcon.rel = "apple-touch-icon"; |
| appleIcon.href = targetHref; |
| } |
|
|
| function guessIconType(href: string) { |
| const cleanHref = href.split(/[?#]/, 1)[0]?.toLowerCase() || ""; |
| if (cleanHref.endsWith(".svg")) { |
| return "image/svg+xml"; |
| } |
| if (cleanHref.endsWith(".jpg") || cleanHref.endsWith(".jpeg")) { |
| return "image/jpeg"; |
| } |
| if (cleanHref.endsWith(".webp")) { |
| return "image/webp"; |
| } |
| if (cleanHref.endsWith(".ico")) { |
| return "image/x-icon"; |
| } |
| return "image/png"; |
| } |
|
|
| function applyBrandingToDocument(branding: Required<BrandingConfig>) { |
| document.title = branding.site_title; |
| updateFavicon(branding.site_logo_url); |
| } |
|
|
| export function publishBrandingUpdate(value: BrandingConfig | null | undefined) { |
| const branding = normalizeBranding(value); |
| if (typeof window !== "undefined") { |
| applyBrandingToDocument(branding); |
| window.dispatchEvent(new CustomEvent(BRANDING_UPDATED_EVENT, { detail: branding })); |
| } |
| return branding; |
| } |
|
|
| export function useBranding(options: { applyDocument?: boolean; documentKey?: string | null } = {}) { |
| const [branding, setBranding] = useState(() => normalizeBranding(null)); |
| const [hasResolvedBranding, setHasResolvedBranding] = useState(false); |
| const currentBrandingRef = useRef(branding); |
|
|
| useEffect(() => { |
| let active = true; |
| void fetchBranding() |
| .then((data) => { |
| if (active) { |
| const nextBranding = normalizeBranding(data.branding); |
| currentBrandingRef.current = nextBranding; |
| setBranding(nextBranding); |
| setHasResolvedBranding(true); |
| } |
| }) |
| .catch(() => undefined); |
| return () => { |
| active = false; |
| }; |
| }, []); |
|
|
| useEffect(() => { |
| const handleBrandingUpdate = (event: Event) => { |
| const detail = (event as CustomEvent<BrandingConfig>).detail; |
| const nextBranding = normalizeBranding(detail); |
| currentBrandingRef.current = nextBranding; |
| setBranding(nextBranding); |
| setHasResolvedBranding(true); |
| }; |
| window.addEventListener(BRANDING_UPDATED_EVENT, handleBrandingUpdate); |
| return () => window.removeEventListener(BRANDING_UPDATED_EVENT, handleBrandingUpdate); |
| }, []); |
|
|
| useEffect(() => { |
| if (!options.applyDocument || !hasResolvedBranding) { |
| return; |
| } |
|
|
| const apply = () => applyBrandingToDocument(branding); |
| apply(); |
| const animationFrame = window.requestAnimationFrame(apply); |
| const observer = new MutationObserver(() => { |
| const expectedTitle = currentBrandingRef.current.site_title; |
| if (document.title !== expectedTitle) { |
| document.title = expectedTitle; |
| } |
| }); |
| observer.observe(document.head, { childList: true, subtree: true, characterData: true }); |
|
|
| return () => { |
| window.cancelAnimationFrame(animationFrame); |
| observer.disconnect(); |
| }; |
| }, [branding, hasResolvedBranding, options.applyDocument, options.documentKey]); |
|
|
| return branding; |
| } |
|
|
