kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
|
|
type PlatformStatusTone = 'error' | 'success' | 'info' | 'warning' | 'neutral';
|
|
type PlatformStatusSurface =
|
|
| 'light'
|
|
| 'tinted'
|
|
| 'platform'
|
|
| 'profile'
|
|
| 'editorDark';
|
|
type PlatformStatusSize = 'xs' | 'sm' | 'md';
|
|
|
|
type PlatformStatusMessageProps = Omit<
|
|
HTMLAttributes<HTMLDivElement>,
|
|
'children'
|
|
> & {
|
|
tone: PlatformStatusTone;
|
|
surface?: PlatformStatusSurface;
|
|
size?: PlatformStatusSize;
|
|
remapSurface?: boolean;
|
|
children: ReactNode;
|
|
};
|
|
|
|
const PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE: Record<
|
|
PlatformStatusSurface,
|
|
Record<PlatformStatusTone, string>
|
|
> = {
|
|
light: {
|
|
error: 'border-rose-200 bg-rose-50 text-rose-700',
|
|
success: 'border-emerald-200 bg-emerald-50 text-emerald-700',
|
|
info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
|
|
warning: 'border-amber-200 bg-amber-50 text-amber-900',
|
|
neutral:
|
|
'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
|
|
},
|
|
tinted: {
|
|
error: 'border-rose-400/20 bg-rose-500/10 text-rose-700',
|
|
success: 'border-emerald-300/25 bg-emerald-500/12 text-emerald-700',
|
|
info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
|
|
warning: 'border-amber-300/30 bg-amber-500/12 text-amber-900',
|
|
neutral:
|
|
'border-[var(--platform-subpanel-border)] bg-white/20 text-[var(--platform-text-base)]',
|
|
},
|
|
platform: {
|
|
error:
|
|
'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
|
|
success:
|
|
'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
|
|
info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
|
|
warning:
|
|
'border-[var(--platform-warm-border)] bg-[var(--platform-warm-bg)] text-[var(--platform-warm-text)]',
|
|
neutral:
|
|
'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
|
|
},
|
|
profile: {
|
|
error:
|
|
'border-[var(--platform-button-danger-border)] bg-[var(--platform-button-danger-fill)] text-[var(--platform-button-danger-text)]',
|
|
success:
|
|
'border-[var(--platform-success-border)] bg-[var(--platform-success-bg)] text-[var(--platform-success-text)]',
|
|
info: 'border-[var(--platform-cool-border)] bg-[var(--platform-cool-bg)] text-[var(--platform-cool-text)]',
|
|
warning: 'border-amber-300 bg-amber-500/12 text-amber-900',
|
|
neutral:
|
|
'border-[var(--platform-subpanel-border)] bg-white/68 text-[var(--platform-text-base)]',
|
|
},
|
|
editorDark: {
|
|
error: 'border-rose-300/15 bg-rose-500/10 text-rose-50/90',
|
|
success: 'border-emerald-300/15 bg-emerald-500/10 text-emerald-50/90',
|
|
info: 'border-sky-300/15 bg-sky-500/10 text-sky-50/90',
|
|
warning: 'border-amber-300/15 bg-amber-500/10 text-amber-50/90',
|
|
neutral: 'border-white/10 bg-black/20 text-zinc-300',
|
|
},
|
|
};
|
|
|
|
const PLATFORM_STATUS_MESSAGE_SIZE_CLASS: Record<PlatformStatusSize, string> = {
|
|
xs: 'px-3 py-2 text-xs',
|
|
sm: 'px-3 py-2 text-sm',
|
|
md: 'px-4 py-3 text-sm leading-6',
|
|
};
|
|
|
|
/**
|
|
* 平台通用状态提示条。
|
|
* 收口错误、成功和提示类状态的基础边框、底色和文字颜色。
|
|
*/
|
|
export function PlatformStatusMessage({
|
|
tone,
|
|
surface = 'light',
|
|
size = 'sm',
|
|
remapSurface = false,
|
|
children,
|
|
className,
|
|
...divProps
|
|
}: PlatformStatusMessageProps) {
|
|
return (
|
|
<div
|
|
{...divProps}
|
|
className={[
|
|
remapSurface ? 'platform-remap-surface' : null,
|
|
'platform-status-message rounded-xl border',
|
|
PLATFORM_STATUS_MESSAGE_SIZE_CLASS[size],
|
|
PLATFORM_STATUS_MESSAGE_CLASS_BY_SURFACE_AND_TONE[surface][tone],
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|