kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
|
|
|
type PlatformDarkOptionTone = 'emerald' | 'sky' | 'rose' | 'amber';
|
|
type PlatformDarkOptionRadius = 'sm' | 'md' | 'lg';
|
|
type PlatformDarkOptionPadding = 'sm' | 'md' | 'lg';
|
|
|
|
type PlatformDarkOptionCardProps = Omit<
|
|
ButtonHTMLAttributes<HTMLButtonElement>,
|
|
'children'
|
|
> & {
|
|
selected: boolean;
|
|
tone?: PlatformDarkOptionTone;
|
|
radius?: PlatformDarkOptionRadius;
|
|
padding?: PlatformDarkOptionPadding;
|
|
children: ReactNode;
|
|
};
|
|
|
|
const PLATFORM_DARK_OPTION_RADIUS_CLASS: Record<
|
|
PlatformDarkOptionRadius,
|
|
string
|
|
> = {
|
|
sm: 'rounded-lg',
|
|
md: 'rounded-xl',
|
|
lg: 'rounded-2xl',
|
|
};
|
|
|
|
const PLATFORM_DARK_OPTION_PADDING_CLASS: Record<
|
|
PlatformDarkOptionPadding,
|
|
string
|
|
> = {
|
|
sm: 'px-3 py-2',
|
|
md: 'px-3 py-2.5',
|
|
lg: 'px-3 py-3',
|
|
};
|
|
|
|
const PLATFORM_DARK_OPTION_SELECTED_CLASS: Record<
|
|
PlatformDarkOptionTone,
|
|
string
|
|
> = {
|
|
emerald: 'border-emerald-400/45 bg-emerald-500/10 text-emerald-100',
|
|
sky: 'border-sky-400/45 bg-sky-500/10 text-sky-100',
|
|
rose: 'border-rose-400/60 bg-rose-500/10 text-rose-100',
|
|
amber: 'border-amber-400/60 bg-amber-500/10 text-amber-100',
|
|
};
|
|
|
|
const PLATFORM_DARK_OPTION_IDLE_CLASS =
|
|
'border-white/8 bg-black/20 text-zinc-300 hover:border-white/15';
|
|
|
|
/**
|
|
* 暗色面板中的可选项按钮。
|
|
* 统一承接 selected / idle / hover / disabled 的暗色卡片外观。
|
|
*/
|
|
export function PlatformDarkOptionCard({
|
|
selected,
|
|
tone = 'emerald',
|
|
radius = 'md',
|
|
padding = 'sm',
|
|
children,
|
|
className,
|
|
type = 'button',
|
|
...buttonProps
|
|
}: PlatformDarkOptionCardProps) {
|
|
return (
|
|
<button
|
|
{...buttonProps}
|
|
type={type}
|
|
className={[
|
|
'platform-dark-option-card border text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 disabled:cursor-not-allowed disabled:opacity-55',
|
|
PLATFORM_DARK_OPTION_RADIUS_CLASS[radius],
|
|
PLATFORM_DARK_OPTION_PADDING_CLASS[padding],
|
|
selected
|
|
? PLATFORM_DARK_OPTION_SELECTED_CLASS[tone]
|
|
: PLATFORM_DARK_OPTION_IDLE_CLASS,
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|