kdletters
c5200c7d45
## 变更内容 - 新增基于 shadcn open-code 模式的共享 UI canonical 组件、样式与导出。 - 新增 `/components` 共享组件展示页，并覆盖平台组件、Token、状态和移动端布局。 - 补齐平台展示页的筛选、排序、上传预览、标签、开关和异步状态交互。 - 修复排序导致预览主题变化、筛选弹窗误关闭和入口状态不更新的问题。 - 同步网站与客户端构建别名、依赖、路由测试和项目文档。 ## 验证 - `npm run test -- src/components/shared-components/SharedComponentsShowcasePage.test.tsx` - `npm run typecheck` - `npm run check:encoding` - `npm run build:raw` - `git diff --check` - pre-push 门禁通过 Reviewed-on: http://192.168.35.82/git/GenarrativeAI/Genarrative/pulls/202 Co-authored-by: kdletters <kdletters@qq.com> Co-committed-by: kdletters <kdletters@qq.com>
103 lines
2.2 KiB
TypeScript
103 lines
2.2 KiB
TypeScript
import type {
|
|
ButtonHTMLAttributes,
|
|
LabelHTMLAttributes,
|
|
ReactNode,
|
|
} from 'react';
|
|
|
|
import {
|
|
getPlatformActionButtonClassName,
|
|
type PlatformActionButtonAlign,
|
|
type PlatformActionButtonShape,
|
|
type PlatformActionButtonSize,
|
|
type PlatformActionButtonSurface,
|
|
type PlatformActionButtonTone,
|
|
} from './platformActionButtonModel';
|
|
|
|
export type {
|
|
PlatformActionButtonAlign,
|
|
PlatformActionButtonShape,
|
|
PlatformActionButtonSize,
|
|
PlatformActionButtonSurface,
|
|
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';
|
|
};
|
|
|
|
export type PlatformActionButtonProps =
|
|
| PlatformActionButtonButtonProps
|
|
| PlatformActionButtonLabelProps;
|
|
|
|
/**
|
|
* 平台通用动作按钮。
|
|
* 收口平台与个人中心主动作按钮的样式族、尺寸、圆角和禁用态 class。
|
|
*/
|
|
export function PlatformActionButton({
|
|
tone = 'primary',
|
|
surface = 'platform',
|
|
size = 'sm',
|
|
shape = 'default',
|
|
align = 'center',
|
|
fullWidth = false,
|
|
className,
|
|
children,
|
|
asChild,
|
|
...props
|
|
}: PlatformActionButtonProps) {
|
|
const actionClassName = [
|
|
getPlatformActionButtonClassName({
|
|
surface,
|
|
tone,
|
|
size,
|
|
shape,
|
|
align,
|
|
fullWidth,
|
|
}),
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
if (asChild === 'label') {
|
|
return (
|
|
<label
|
|
{...(props as LabelHTMLAttributes<HTMLLabelElement>)}
|
|
className={actionClassName}
|
|
>
|
|
{children}
|
|
</label>
|
|
);
|
|
}
|
|
|
|
const { type = 'button', ...buttonProps } =
|
|
props as ButtonHTMLAttributes<HTMLButtonElement>;
|
|
return (
|
|
<button {...buttonProps} type={type} className={actionClassName}>
|
|
{children}
|
|
</button>
|
|
);
|
|
}
|