kdletters
1ad25e30f8
新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件 迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome 补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import type { InputHTMLAttributes, ReactNode } from 'react';
|
|
|
|
type PlatformPillSwitchProps = Omit<
|
|
InputHTMLAttributes<HTMLInputElement>,
|
|
'children' | 'type'
|
|
> & {
|
|
label: ReactNode;
|
|
};
|
|
|
|
/**
|
|
* 平台胶囊开关。
|
|
* 统一承载图片面板中类似 AI 重绘的 label + switch 语义和视觉。
|
|
*/
|
|
export function PlatformPillSwitch({
|
|
label,
|
|
checked,
|
|
disabled,
|
|
className,
|
|
...inputProps
|
|
}: PlatformPillSwitchProps) {
|
|
return (
|
|
<label
|
|
className={[
|
|
'inline-flex cursor-pointer items-center gap-2 rounded-full border border-white/80 bg-white/94 px-3 py-2 text-xs font-black text-[var(--platform-text-strong)] shadow-sm backdrop-blur',
|
|
disabled ? 'cursor-not-allowed opacity-55' : null,
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
<span>{label}</span>
|
|
<input
|
|
{...inputProps}
|
|
role="switch"
|
|
type="checkbox"
|
|
checked={checked}
|
|
disabled={disabled}
|
|
className="sr-only"
|
|
/>
|
|
<span
|
|
aria-hidden="true"
|
|
className={[
|
|
'relative h-5 w-9 rounded-full transition',
|
|
checked ? 'bg-[var(--platform-accent)]' : 'bg-zinc-300',
|
|
].join(' ')}
|
|
>
|
|
<span
|
|
className={[
|
|
'absolute top-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition',
|
|
checked ? 'left-[1.125rem]' : 'left-0.5',
|
|
].join(' ')}
|
|
/>
|
|
</span>
|
|
</label>
|
|
);
|
|
}
|