feat: add icon support to ActionModel button

This commit is contained in:
Zeke Zhang 2025-06-19 06:51:18 +08:00
parent 0306ba6423
commit 2ff0bae9d0

View File

@ -11,6 +11,8 @@ import { FlowModel } from '@nocobase/flow-engine';
import { Button } from 'antd'; import { Button } from 'antd';
import type { ButtonProps } from 'antd/es/button'; import type { ButtonProps } from 'antd/es/button';
import React from 'react'; import React from 'react';
import IconPicker from '../../schema-component/antd/icon-picker/IconPicker';
import { Icon } from '../../icon/Icon';
export class ActionModel extends FlowModel { export class ActionModel extends FlowModel {
declare props: ButtonProps; declare props: ButtonProps;
@ -22,8 +24,13 @@ export class ActionModel extends FlowModel {
render() { render() {
const props = { ...this.defaultProps, ...this.props }; const props = { ...this.defaultProps, ...this.props };
const icon = <Icon type={props.icon as any} />;
return <Button {...props}>{props.children || props.title}</Button>; return (
<Button {...props} icon={icon}>
{props.children || props.title}
</Button>
);
} }
} }
@ -36,22 +43,24 @@ ActionModel.registerFlow({
title: '编辑按钮', title: '编辑按钮',
uiSchema: { uiSchema: {
title: { title: {
type: 'string',
title: '标题',
'x-decorator': 'FormItem', 'x-decorator': 'FormItem',
'x-component': 'Input', 'x-component': 'Input',
'x-component-props': { title: 'Button title',
placeholder: '请输入标题', },
}, icon: {
'x-decorator': 'FormItem',
'x-component': IconPicker,
title: 'Button icon',
}, },
}, },
defaultParams(ctx) { defaultParams(ctx) {
return { return {
title: ctx.model.defaultProps.title, title: ctx.model.defaultProps.title,
icon: ctx.model.defaultProps.icon,
}; };
}, },
handler(ctx, params) { handler(ctx, params) {
ctx.model.setProps('children', params.title); ctx.model.setProps(params);
ctx.model.setProps('onClick', (event) => { ctx.model.setProps('onClick', (event) => {
ctx.model.dispatchEvent('click', { ctx.model.dispatchEvent('click', {
...ctx.extra, ...ctx.extra,