fix(plugin-workflow): fix some ux (#313)

* fix(plugin-workflow): fix some ux

* style(plugin-workflow): optimize node remove button style
This commit is contained in:
Junyi 2022-04-23 23:49:24 +08:00 committed by GitHub
parent f45deaa351
commit fefa1fc0c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 78 additions and 49 deletions

View File

@ -263,6 +263,14 @@ export function Operand({
display: flex; display: flex;
gap: .5em; gap: .5em;
align-items: center; align-items: center;
.ant-select,
.ant-cascader-picker,
.ant-picker,
.ant-input-number,
.ant-input-affix-wrapper{
width: auto;
}
`}> `}>
<Cascader <Cascader
allowClear={false} allowClear={false}
@ -378,28 +386,24 @@ export const CollectionFieldset = observer(({ value, onChange, useProps }: any)
<fieldset className={css` <fieldset className={css`
margin-top: .5em; margin-top: .5em;
.ant-formily-item{ > .ant-formily-item{
.ant-formily-item-label{ flex-direction: column;
line-height: 32px;
}
.ant-select, > .ant-formily-item-label{
.ant-cascader-picker, line-height: 32px;
.ant-picker,
.ant-input-number,
.ant-input-affix-wrapper{
width: auto;
} }
} }
`}> `}>
{fields.length {fields.length
? fields.map(field => { ? fields
.filter(field => !field.hidden)
.map(field => {
const operand = typeof value[field.name] === 'string' const operand = typeof value[field.name] === 'string'
? parseStringValue(value[field.name], VTypes) ? parseStringValue(value[field.name], VTypes)
: { type: 'constant', value: value[field.name] }; : { type: 'constant', value: value[field.name] };
return ( return (
<FormItem label={compile(field.uiSchema?.title)}> <FormItem label={compile(field.uiSchema?.title ?? field.name)} labelAlign="left">
<VariableTypesContext.Provider value={VTypes}> <VariableTypesContext.Provider value={VTypes}>
<Operand <Operand
value={operand} value={operand}

View File

@ -125,19 +125,26 @@ export function RemoveButton() {
onNodeRemoved(node); onNodeRemoved(node);
} }
if (!nodes.find(item => item.upstream === current && item.branchIndex != null)) { const hasBranches = !nodes.find(item => item.upstream === current && item.branchIndex != null);
return onOk(); const message = hasBranches
} ? '确定删除该节点吗?'
: '节点包含分支,将同时删除其所有分支下的子节点,确定继续?';
Modal.confirm({ Modal.confirm({
title: '删除分支', title: '删除节点',
content: '节点包含分支,将同时删除其所有分支下的子节点,确定继续?', content: message,
onOk onOk
}); });
} }
return ( return (
<Button type="text" shape="circle" icon={<DeleteOutlined />} onClick={onRemove} /> <Button
type="text"
shape="circle"
icon={<DeleteOutlined />}
onClick={onRemove}
className="workflow-node-remove-button"
/>
); );
} }

View File

@ -193,6 +193,7 @@ export const workflowSchema: ISchema = {
type: 'boolean', type: 'boolean',
'x-component': 'CollectionField', 'x-component': 'CollectionField',
'x-read-pretty': true, 'x-read-pretty': true,
default: false
}, },
} }
}, },
@ -213,22 +214,22 @@ export const workflowSchema: ISchema = {
title: '配置流程', title: '配置流程',
'x-component': 'WorkflowLink' 'x-component': 'WorkflowLink'
}, },
executions: { // executions: {
type: 'void', // type: 'void',
title: '执行历史', // title: '执行历史',
'x-component': 'Action.Link', // 'x-component': 'Action.Link',
'x-component-props': { // 'x-component-props': {
type: 'primary', // type: 'primary',
}, // },
properties: { // properties: {
drawer: { // drawer: {
type: 'void', // type: 'void',
title: '执行历史', // title: '执行历史',
'x-component': 'Action.Drawer', // 'x-component': 'Action.Drawer',
properties: executionSchema // properties: executionSchema
} // }
} // }
}, // },
update: { update: {
type: 'void', type: 'void',
title: '{{ t("Edit") }}', title: '{{ t("Edit") }}',
@ -279,18 +280,18 @@ export const workflowSchema: ISchema = {
}, },
}, },
}, },
delete: { // delete: {
type: 'void', // type: 'void',
title: '{{ t("Delete") }}', // title: '{{ t("Delete") }}',
'x-component': 'Action.Link', // 'x-component': 'Action.Link',
'x-component-props': { // 'x-component-props': {
confirm: { // confirm: {
title: "{{t('Delete record')}}", // title: "{{t('Delete record')}}",
content: "{{t('Are you sure you want to delete it?')}}", // content: "{{t('Are you sure you want to delete it?')}}",
}, // },
useAction: '{{ cm.useDestroyActionAndRefreshCM }}', // useAction: '{{ cm.useDestroyActionAndRefreshCM }}',
}, // },
}, // },
} }
} }
} }

View File

@ -108,12 +108,29 @@ export const nodeCardClass = css`
background: #fff; background: #fff;
padding: 1em; padding: 1em;
box-shadow: 0 .25em .5em rgba(0, 0, 0, .1); box-shadow: 0 .25em .5em rgba(0, 0, 0, .1);
.workflow-node-remove-button{
position: absolute;
right: -.5em;
top: -.5em;
color: #999;
opacity: 0;
transition: opacity .3s ease;
&:hover {
color: red;
}
}
&:hover{
.workflow-node-remove-button{
opacity: 1;
}
}
`; `;
export const nodeHeaderClass = css` export const nodeHeaderClass = css`
display: flex; position: relative;
align-items: center;
justify-content: space-between;
`; `;
export const nodeTitleClass = css` export const nodeTitleClass = css`