kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
88 lines
2.2 KiB
TypeScript
88 lines
2.2 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
|
|
type PlatformOverlayBadgePlacement =
|
|
| 'topLeft'
|
|
| 'topRight'
|
|
| 'bottomLeft'
|
|
| 'bottomRight';
|
|
type PlatformOverlayBadgeOffset = 'default' | 'tight';
|
|
type PlatformOverlayBadgeSize = 'default' | 'compact';
|
|
type PlatformOverlayBadgeTone = 'light' | 'muted';
|
|
|
|
type PlatformOverlayBadgeProps = Omit<
|
|
HTMLAttributes<HTMLSpanElement>,
|
|
'children'
|
|
> & {
|
|
children: ReactNode;
|
|
placement?: PlatformOverlayBadgePlacement;
|
|
offset?: PlatformOverlayBadgeOffset;
|
|
size?: PlatformOverlayBadgeSize;
|
|
tone?: PlatformOverlayBadgeTone;
|
|
};
|
|
|
|
const PLATFORM_OVERLAY_BADGE_PLACEMENT_CLASS: Record<
|
|
PlatformOverlayBadgeOffset,
|
|
Record<PlatformOverlayBadgePlacement, string>
|
|
> = {
|
|
default: {
|
|
topLeft: 'left-3 top-3',
|
|
topRight: 'right-3 top-3',
|
|
bottomLeft: 'bottom-3 left-3',
|
|
bottomRight: 'bottom-3 right-3',
|
|
},
|
|
tight: {
|
|
topLeft: 'left-2 top-2',
|
|
topRight: 'right-2 top-2',
|
|
bottomLeft: 'bottom-2 left-2',
|
|
bottomRight: 'bottom-2 right-2',
|
|
},
|
|
};
|
|
|
|
const PLATFORM_OVERLAY_BADGE_SIZE_CLASS: Record<
|
|
PlatformOverlayBadgeSize,
|
|
string
|
|
> = {
|
|
default: 'px-3 py-1 tracking-[0.18em] shadow-[0_8px_20px_rgba(0,0,0,0.22)]',
|
|
compact: 'px-2 py-0.5 tracking-normal shadow-sm',
|
|
};
|
|
|
|
const PLATFORM_OVERLAY_BADGE_TONE_CLASS: Record<
|
|
PlatformOverlayBadgeTone,
|
|
string
|
|
> = {
|
|
light: 'border-white/40 bg-white/88 text-zinc-900',
|
|
muted:
|
|
'border-[var(--platform-subpanel-border)] bg-[var(--platform-subpanel-fill)] text-[var(--platform-text-soft)]',
|
|
};
|
|
|
|
/**
|
|
* 平台媒体悬浮标签。
|
|
* 统一承接预览图、素材图和舞台画面上的非交互短标签。
|
|
*/
|
|
export function PlatformOverlayBadge({
|
|
children,
|
|
placement = 'topLeft',
|
|
offset = 'default',
|
|
size = 'default',
|
|
tone = 'light',
|
|
className,
|
|
...spanProps
|
|
}: PlatformOverlayBadgeProps) {
|
|
return (
|
|
<span
|
|
{...spanProps}
|
|
className={[
|
|
'absolute rounded-full border text-[10px] font-bold',
|
|
PLATFORM_OVERLAY_BADGE_PLACEMENT_CLASS[offset][placement],
|
|
PLATFORM_OVERLAY_BADGE_SIZE_CLASS[size],
|
|
PLATFORM_OVERLAY_BADGE_TONE_CLASS[tone],
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|