收口前端平台组件库能力

新增 PlatformUiKit 通用弹窗、按钮、状态、空态、媒体、表单和标签等公共组件
迁移结果页、创作工作台、认证入口、RPG 暗色面板和运行态弹窗的重复 UI chrome
补充组件测试、页面回归测试、技术文档和 Hermes 共享决策记录
This commit is contained in:
2026-06-10 10:24:18 +08:00
parent a4ee6ff698
commit 1ad25e30f8
226 changed files with 23364 additions and 7825 deletions

View File

@@ -0,0 +1,95 @@
import type {
ButtonHTMLAttributes,
LabelHTMLAttributes,
ReactNode,
} from 'react';
import {
getPlatformActionButtonClassName,
type PlatformActionButtonAlign,
type PlatformActionButtonShape,
type PlatformActionButtonSize,
type PlatformActionButtonSurface,
type PlatformActionButtonTone,
} from './platformActionButtonModel';
type PlatformActionButtonBaseProps = {
children: ReactNode;
tone?: PlatformActionButtonTone;
surface?: PlatformActionButtonSurface;
size?: PlatformActionButtonSize;
shape?: PlatformActionButtonShape;
align?: PlatformActionButtonAlign;
fullWidth?: boolean;
};
type PlatformActionButtonButtonProps = Omit<
ButtonHTMLAttributes<HTMLButtonElement>,
'children'
> &
PlatformActionButtonBaseProps & {
asChild?: false;
};
type PlatformActionButtonLabelProps = Omit<
LabelHTMLAttributes<HTMLLabelElement>,
'children'
> &
PlatformActionButtonBaseProps & {
asChild: 'label';
};
type PlatformActionButtonProps =
| PlatformActionButtonButtonProps
| PlatformActionButtonLabelProps;
/**
* 平台通用动作按钮。
* 收口平台与个人中心主动作按钮的样式族、尺寸、圆角和禁用态 class。
*/
export function PlatformActionButton({
children,
tone = 'primary',
surface = 'platform',
size = 'sm',
shape = 'default',
align = 'center',
fullWidth = false,
className,
asChild,
...buttonProps
}: PlatformActionButtonProps) {
const actionClassName = [
getPlatformActionButtonClassName({
surface,
tone,
size,
shape,
align,
fullWidth,
}),
className,
]
.filter(Boolean)
.join(' ');
if (asChild === 'label') {
return (
<label
{...(buttonProps as LabelHTMLAttributes<HTMLLabelElement>)}
className={actionClassName}
>
{children}
</label>
);
}
const { type = 'button', ...restButtonProps } =
buttonProps as ButtonHTMLAttributes<HTMLButtonElement>;
return (
<button {...restButtonProps} type={type} className={actionClassName}>
{children}
</button>
);
}