kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
|
|
type PlatformSlotBadgeTone = 'active' | 'inactive' | 'soft';
|
|
type PlatformSlotBadgeSize = 'sm' | 'md';
|
|
|
|
type PlatformSlotBadgeProps = Omit<
|
|
HTMLAttributes<HTMLSpanElement>,
|
|
'children'
|
|
> & {
|
|
children: ReactNode;
|
|
size?: PlatformSlotBadgeSize;
|
|
tone?: PlatformSlotBadgeTone;
|
|
};
|
|
|
|
const PLATFORM_SLOT_BADGE_TONE_CLASS: Record<PlatformSlotBadgeTone, string> = {
|
|
active: 'border-sky-100/70 bg-sky-300 text-slate-950',
|
|
inactive: 'border-zinc-400/70 bg-zinc-900 text-white',
|
|
soft: 'border-transparent bg-white/82 text-[var(--platform-text-strong)] shadow-sm',
|
|
};
|
|
|
|
const PLATFORM_SLOT_BADGE_SIZE_CLASS: Record<PlatformSlotBadgeSize, string> = {
|
|
sm: 'h-5 min-w-5 px-1 text-[10px]',
|
|
md: 'h-6 min-w-6 px-1.5 text-xs',
|
|
};
|
|
|
|
/**
|
|
* 平台紧凑槽位编号徽标。
|
|
* 统一承接角色槽、步骤槽等复合按钮内部的序号 / 主位标记。
|
|
*/
|
|
export function PlatformSlotBadge({
|
|
children,
|
|
size = 'sm',
|
|
tone = 'inactive',
|
|
className,
|
|
...spanProps
|
|
}: PlatformSlotBadgeProps) {
|
|
return (
|
|
<span
|
|
{...spanProps}
|
|
className={[
|
|
'flex items-center justify-center rounded-full border font-black leading-none',
|
|
PLATFORM_SLOT_BADGE_SIZE_CLASS[size],
|
|
PLATFORM_SLOT_BADGE_TONE_CLASS[tone],
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|