kdletters
fface53745
新增 PlatformFieldLabel inlineForm 变体承接行内表单标题 模板确认弹层“关卡数”标题改为复用 PlatformFieldLabel 补充组件测试、收口计划文档和 Hermes 决策记录
48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import type { ReactNode } from 'react';
|
|
|
|
type PlatformFieldLabelVariant =
|
|
| 'field'
|
|
| 'section'
|
|
| 'form'
|
|
| 'inlineForm'
|
|
| 'pill'
|
|
| 'accentPill';
|
|
|
|
type PlatformFieldLabelProps = {
|
|
children: ReactNode;
|
|
variant?: PlatformFieldLabelVariant;
|
|
className?: string;
|
|
};
|
|
|
|
const PLATFORM_FIELD_LABEL_CLASS: Record<PlatformFieldLabelVariant, string> = {
|
|
field: 'text-xs font-bold text-[var(--platform-text-soft)]',
|
|
section:
|
|
'text-xs font-bold tracking-[0.18em] text-[var(--platform-text-soft)]',
|
|
form: 'mb-2 block text-sm font-black text-[var(--platform-text-strong)]',
|
|
inlineForm:
|
|
'inline-flex items-center text-sm font-bold text-[var(--platform-text-base)]',
|
|
pill: 'mb-2 inline-flex rounded-full px-2 py-0.5 text-sm font-black text-[var(--platform-text-strong)]',
|
|
accentPill:
|
|
'mb-2 inline-flex rounded-full border border-rose-200/70 bg-rose-50/88 px-2.5 py-1 text-sm font-black text-rose-700 shadow-sm',
|
|
};
|
|
|
|
/**
|
|
* 平台字段标签。
|
|
* 统一承接结果页和创作工作台内重复出现的字段标题视觉。
|
|
*/
|
|
export function PlatformFieldLabel({
|
|
children,
|
|
variant = 'field',
|
|
className,
|
|
}: PlatformFieldLabelProps) {
|
|
return (
|
|
<span
|
|
className={[PLATFORM_FIELD_LABEL_CLASS[variant], className]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|