kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
121 lines
3.9 KiB
TypeScript
121 lines
3.9 KiB
TypeScript
export type PlatformActionButtonTone =
|
|
| 'primary'
|
|
| 'secondary'
|
|
| 'ghost'
|
|
| 'danger'
|
|
| 'success'
|
|
| 'warning';
|
|
export type PlatformActionButtonSurface = 'platform' | 'profile' | 'editorDark';
|
|
export type PlatformActionButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
|
|
export type PlatformActionButtonShape = 'default' | 'pill';
|
|
export type PlatformActionButtonAlign = 'center' | 'start';
|
|
|
|
const PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS: Record<
|
|
PlatformActionButtonTone,
|
|
string
|
|
> = {
|
|
primary: 'platform-button platform-button--primary',
|
|
secondary: 'platform-button platform-button--secondary',
|
|
ghost: 'platform-button platform-button--ghost',
|
|
danger: 'platform-button platform-button--danger',
|
|
success: 'platform-button platform-button--primary',
|
|
warning: 'platform-button platform-button--secondary',
|
|
};
|
|
|
|
const PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS: Record<
|
|
PlatformActionButtonTone,
|
|
string
|
|
> = {
|
|
primary: 'platform-primary-button',
|
|
secondary: 'platform-button platform-button--secondary',
|
|
ghost: 'platform-button platform-button--ghost',
|
|
danger: 'platform-button platform-button--danger',
|
|
success: 'platform-primary-button',
|
|
warning: 'platform-button platform-button--secondary',
|
|
};
|
|
|
|
const PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS: Record<
|
|
PlatformActionButtonTone,
|
|
string
|
|
> = {
|
|
primary:
|
|
'platform-action-button platform-action-button--editor-dark border border-sky-300/35 bg-sky-400 text-slate-950 hover:bg-sky-300',
|
|
secondary:
|
|
'platform-action-button platform-action-button--editor-dark border border-white/10 bg-white/5 text-zinc-200 hover:bg-white/10 hover:text-white',
|
|
ghost:
|
|
'platform-action-button platform-action-button--editor-dark border border-white/10 bg-black/20 text-zinc-200 hover:text-white',
|
|
danger:
|
|
'platform-action-button platform-action-button--editor-dark border border-rose-300/25 bg-rose-500/10 text-rose-100 hover:bg-rose-500/15',
|
|
success:
|
|
'platform-action-button platform-action-button--editor-dark border border-emerald-300/35 bg-emerald-400 text-slate-950 hover:bg-emerald-300',
|
|
warning:
|
|
'platform-action-button platform-action-button--editor-dark border border-amber-300/30 bg-amber-500/20 text-amber-50 hover:bg-amber-500/25',
|
|
};
|
|
|
|
const PLATFORM_ACTION_BUTTON_SIZE_CLASS: Record<
|
|
PlatformActionButtonSize,
|
|
string
|
|
> = {
|
|
xxs: 'px-3 py-1 text-[10px]',
|
|
xs: 'px-4 py-2 text-xs',
|
|
sm: 'px-4 py-2.5 text-sm',
|
|
md: 'px-4 py-3 text-sm',
|
|
lg: 'h-12 px-4 text-base',
|
|
};
|
|
|
|
const PLATFORM_ACTION_BUTTON_SHAPE_CLASS: Record<
|
|
PlatformActionButtonShape,
|
|
string
|
|
> = {
|
|
default: 'rounded-2xl',
|
|
pill: 'rounded-full',
|
|
};
|
|
|
|
const PLATFORM_ACTION_BUTTON_ALIGN_CLASS: Record<
|
|
PlatformActionButtonAlign,
|
|
string
|
|
> = {
|
|
center: 'justify-center',
|
|
start: 'justify-start text-left',
|
|
};
|
|
|
|
function getPlatformActionButtonToneClass(
|
|
surface: PlatformActionButtonSurface,
|
|
tone: PlatformActionButtonTone,
|
|
) {
|
|
if (surface === 'editorDark') {
|
|
return PLATFORM_ACTION_BUTTON_EDITOR_DARK_TONE_CLASS[tone];
|
|
}
|
|
|
|
return surface === 'profile'
|
|
? PLATFORM_ACTION_BUTTON_PROFILE_TONE_CLASS[tone]
|
|
: PLATFORM_ACTION_BUTTON_PLATFORM_TONE_CLASS[tone];
|
|
}
|
|
|
|
export function getPlatformActionButtonClassName({
|
|
surface = 'platform',
|
|
tone = 'primary',
|
|
size = 'sm',
|
|
shape = 'default',
|
|
align = 'center',
|
|
fullWidth = false,
|
|
}: {
|
|
surface?: PlatformActionButtonSurface;
|
|
tone?: PlatformActionButtonTone;
|
|
size?: PlatformActionButtonSize;
|
|
shape?: PlatformActionButtonShape;
|
|
align?: PlatformActionButtonAlign;
|
|
fullWidth?: boolean;
|
|
}) {
|
|
return [
|
|
getPlatformActionButtonToneClass(surface, tone),
|
|
PLATFORM_ACTION_BUTTON_SIZE_CLASS[size],
|
|
PLATFORM_ACTION_BUTTON_SHAPE_CLASS[shape],
|
|
PLATFORM_ACTION_BUTTON_ALIGN_CLASS[align],
|
|
fullWidth ? 'w-full' : null,
|
|
'inline-flex items-center gap-2 transition-colors font-black disabled:cursor-not-allowed disabled:opacity-60',
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
}
|