freefire
4ae57d9392
- 新增徽章系统：badge 服务与 handler、管理端配置页、BadgeChip/LevelBadge 展示组件 - 新增等级模型：model/level 及前端 levels 元数据 - 管理端经济模块拆分为 points/badges/levels 独立页面，EconomySettings 迁入设置 - 积分、签到、评论等服务适配等级与徽章逻辑
34 lines
1.0 KiB
TypeScript
34 lines
1.0 KiB
TypeScript
import { badgeIcon } from "@/lib/badgeIcons";
|
||
import type { Badge } from "@/lib/api";
|
||
|
||
/**
|
||
* 徽章 pill：图标 + 名称，配色由后台设定的 CSS token 决定
|
||
* （color: gold/accent/ok/danger/info/purple/teal → var(--token)）。
|
||
* 仅色板内的值生效，异常值回落 accent。
|
||
*/
|
||
export default function BadgeChip({
|
||
badge,
|
||
tip,
|
||
className = "",
|
||
}: {
|
||
badge: Pick<Badge, "name" | "icon" | "color">;
|
||
/** 悬浮提示（默认徽章名；徽章墙可传名称+授予时间） */
|
||
tip?: string;
|
||
className?: string;
|
||
}) {
|
||
const Icon = badgeIcon(badge.icon);
|
||
const color = `var(--${badge.color}, var(--accent))`;
|
||
const soft = `var(--${badge.color}-soft, var(--accent-soft))`;
|
||
|
||
return (
|
||
<span
|
||
className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium leading-[1.6] whitespace-nowrap select-none ${className}`}
|
||
style={{ background: soft, color }}
|
||
data-tip={tip ?? badge.name}
|
||
>
|
||
<Icon size={11} className="shrink-0" />
|
||
{badge.name}
|
||
</span>
|
||
);
|
||
}
|