收口前端平台组件库能力
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
This commit is contained in:
44
src/components/common/PlatformFieldLabel.tsx
Normal file
44
src/components/common/PlatformFieldLabel.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
type PlatformFieldLabelVariant =
|
||||
| 'field'
|
||||
| 'section'
|
||||
| 'form'
|
||||
| '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)]',
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user