feat: 用户徽章与等级体系,积分经济管理重构
- 新增徽章系统:badge 服务与 handler、管理端配置页、BadgeChip/LevelBadge 展示组件 - 新增等级模型:model/level 及前端 levels 元数据 - 管理端经济模块拆分为 points/badges/levels 独立页面,EconomySettings 迁入设置 - 积分、签到、评论等服务适配等级与徽章逻辑
This commit is contained in:
33
frontend/components/BadgeChip.tsx
Normal file
33
frontend/components/BadgeChip.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user