import { brandLogoBox, type BrandLogoFit, type BrandLogoSize, type BrandMark } from "@/lib/brand";
import { densitySrcSet, isOwnImage, pickVariantWidth, variantURL } from "@/lib/responsiveImage";
/** 页眉品牌锁:图加文字 / 纯图 / 纯文字。图槽按画幅占位,铺法决定图怎么填进框。 */
export default function BrandLockup({
mode,
size = "sq",
fit = "contain",
name,
wordmark = "",
slogan = "",
logoLight = "",
logoDark = "",
frame = false,
}: {
mode: BrandMark;
size?: BrandLogoSize;
fit?: BrandLogoFit;
name: string;
wordmark?: string;
slogan?: string;
logoLight?: string;
logoDark?: string;
/** 后台预览画出画幅框,方便看非正方形占位 */
frame?: boolean;
}) {
const label = wordmark.trim() || name;
const line = slogan.trim();
const showImage = mode !== "text";
const showText = mode !== "image";
const box = brandLogoBox(size);
// auto 图槽宽度随图(可达最宽画幅量级),按 176 取密度变体保证清晰
const cssPx = size === "auto" ? 176 : Math.max(box.w, box.h);
const src = logoLight || logoDark;
const both = !!(logoLight && logoDark && logoLight !== logoDark);
const useBox = showImage && (!!src || frame);
return (
{showImage ? (
useBox ? (
{src ? (
both ? (
<>
>
) : (
)
) : (
)}
) : (
)
) : null}
{showText ? (
{label}
{line ? (
{line}
) : null}
) : null}
);
}
function Logo({
src,
fit,
alt,
decorative = false,
extra = "",
cssPx,
}: {
src: string;
fit: BrandLogoFit;
alt: string;
/** 旁边已有站名时,读屏跳过,HTML 仍保留 alt 供检索 */
decorative?: boolean;
extra?: string;
/** 图槽最大边 CSS px,用于密度变体 */
cssPx: number;
}) {
if (fit === "repeat") {
return (
);
}
// 本站光栅图走 1x/2x 变体(SVG/ICO 后端透传);外链图保持原地址
const own = isOwnImage(src);
return (
/* eslint-disable-next-line @next/next/no-img-element */
);
}
function Bubble({ h, label }: { h: number; label?: string }) {
return (
);
}