kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
56 lines
1.3 KiB
TypeScript
56 lines
1.3 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
|
|
type PlatformQuantityBadgePlacement = 'bottomRight';
|
|
type PlatformQuantityBadgeTone = 'dark';
|
|
|
|
type PlatformQuantityBadgeProps = Omit<
|
|
HTMLAttributes<HTMLSpanElement>,
|
|
'children'
|
|
> & {
|
|
children: ReactNode;
|
|
placement?: PlatformQuantityBadgePlacement;
|
|
tone?: PlatformQuantityBadgeTone;
|
|
};
|
|
|
|
const PLATFORM_QUANTITY_BADGE_PLACEMENT_CLASS: Record<
|
|
PlatformQuantityBadgePlacement,
|
|
string
|
|
> = {
|
|
bottomRight: 'bottom-1 right-1',
|
|
};
|
|
|
|
const PLATFORM_QUANTITY_BADGE_TONE_CLASS: Record<
|
|
PlatformQuantityBadgeTone,
|
|
string
|
|
> = {
|
|
dark: 'border-black/35 bg-black/70 text-white',
|
|
};
|
|
|
|
/**
|
|
* 平台物品数量角标。
|
|
* 统一承接物品格、奖励格等缩略图右下角的数量显示。
|
|
*/
|
|
export function PlatformQuantityBadge({
|
|
children,
|
|
placement = 'bottomRight',
|
|
tone = 'dark',
|
|
className,
|
|
...spanProps
|
|
}: PlatformQuantityBadgeProps) {
|
|
return (
|
|
<span
|
|
{...spanProps}
|
|
className={[
|
|
'absolute rounded-full border px-1.5 py-0.5 text-[10px] font-semibold',
|
|
PLATFORM_QUANTITY_BADGE_PLACEMENT_CLASS[placement],
|
|
PLATFORM_QUANTITY_BADGE_TONE_CLASS[tone],
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|