mirrors/nocobase
1
0
Fork 0
mirror of https://github.com/nocobase/nocobase synced 2024-11-15 03:36:05 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(plugin-workflow): adjust canvas style

Browse Source
This commit is contained in:
mytharcher 2024-11-04 10:31:39 +08:00
parent 8370ba2bc4
commit 590c0aa644
22 changed files with 116 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/plugins/@nocobase/plugin-workflow-aggregate/src/client/AggregateInstruction.tsx
View File

@ -10,6 +10,7 @@
import { useForm } from '@formily/react';
import { Cascader } from 'antd';
import React, { useCallback, useEffect, useState } from 'react';
import { BarChartOutlined } from '@ant-design/icons';
import {
SchemaComponentContext,
@ -169,6 +170,7 @@ export default class extends Instruction {
type = 'aggregate';
group = 'collection';
description = `{{t("Counting, summing, finding maximum, minimum, and average values for multiple records of a collection or associated data of a record.", { ns: "${NAMESPACE}" })}}`;
icon = (<BarChartOutlined style={{}} />);
fieldset = {
aggregator: {
type: 'string',

7
packages/plugins/@nocobase/plugin-workflow-delay/src/client/DelayInstruction.tsx
View File

@ -9,8 +9,10 @@
import React from 'react';
import { InputNumber, Select } from 'antd';
import { css, useCompile, usePlugin } from '@nocobase/client';
import WorkflowPlugin, { Instruction, JOB_STATUS } from '@nocobase/plugin-workflow/client';
import { HourglassOutlined } from '@ant-design/icons';
import { css, useCompile } from '@nocobase/client';
import { Instruction, JOB_STATUS } from '@nocobase/plugin-workflow/client';
import { NAMESPACE } from '../locale';
@ -68,6 +70,7 @@ export default class extends Instruction {
type = 'delay';
group = 'control';
description = `{{t("Delay a period of time and then continue or exit the process. Can be used to set wait or timeout times in parallel branches.", { ns: "${NAMESPACE}" })}}`;
icon = (<HourglassOutlined style={{}} />);
fieldset = {
duration: {
type: 'number',

2
packages/plugins/@nocobase/plugin-workflow-dynamic-calculation/src/client/DynamicCalculation.tsx
View File

@ -8,6 +8,7 @@
*/
import React from 'react';
import { FunctionOutlined } from '@ant-design/icons';
import { SchemaInitializerItemType, Variable, useCollectionManager_deprecated } from '@nocobase/client';
import {
@ -47,6 +48,7 @@ export default class extends Instruction {
type = 'dynamic-calculation';
group = 'calculation';
description = `{{t("Calculate an expression based on a calculation engine and obtain a value as the result. Variables in the upstream nodes can be used in the expression. The expression is dynamic one from an expression collections.", { ns: "${NAMESPACE}" })}}`;
icon = (<FunctionOutlined />);
fieldset = {
expression: {
type: 'string',

8
packages/plugins/@nocobase/plugin-workflow-loop/src/client/LoopInstruction.tsx
View File

@ -8,7 +8,7 @@
*/
import React, { useCallback } from 'react';
import { ArrowUpOutlined } from '@ant-design/icons';
import { ArrowUpOutlined, RollbackOutlined } from '@ant-design/icons';
import { Card, Checkbox } from 'antd';
import { FormLayout, FormItem } from '@formily/antd-v5';
import { useForm } from '@formily/react';
@ -28,7 +28,6 @@ import {
Instruction,
RadioWithTooltip,
renderEngineReference,
RadioWithTooltipOption,
CalculationConfig,
useWorkflowVariableOptions,
UseVariableOptions,
@ -246,6 +245,7 @@ export default class extends Instruction {
type = 'loop';
group = 'control';
description = `{{t("By using a loop node, you can perform the same operation on multiple sets of data. The source of these sets can be either multiple records from a query node or multiple associated records of a single record. Loop node can also be used for iterating a certain number of times or for looping through each character in a string. However, excessive looping may cause performance issues, so use with caution.", { ns: "${NAMESPACE}" })}}`;
icon = (<RollbackOutlined style={{}} />);
fieldset = {
target: {
type: 'string',
@ -381,7 +381,7 @@ export default class extends Instruction {
className={cx(
styles.branchBlockClass,
css`
padding-left: 20em;
padding-left: 16em;
`,
)}
>
@ -389,7 +389,7 @@ export default class extends Instruction {
<div className={styles.branchClass}>
<div className="workflow-branch-lines" />
<div className={cx(styles.addButtonClass, styles.loopLineClass)}>
<div className={styles.loopLineClass}>
<ArrowUpOutlined />
</div>
</div>

3
packages/plugins/@nocobase/plugin-workflow-mailer/src/client/MailerInstruction.tsx
View File

@ -7,6 +7,8 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { MailOutlined } from '@ant-design/icons';
import { ArrayItems } from '@formily/antd-v5';
import { SchemaComponentContext, css } from '@nocobase/client';
@ -32,6 +34,7 @@ export default class extends Instruction {
type = 'mailer';
group = 'extended';
description = `{{t("Send email. You can use the variables in the upstream nodes as receivers, subject and content of the email.", { ns: "${NAMESPACE}" })}}`;
icon = (<MailOutlined style={{}} />);
fieldset = {
provider: {
type: 'object',

4
packages/plugins/@nocobase/plugin-workflow-manual/src/client/instruction/index.tsx
View File

@ -7,6 +7,9 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { SolutionOutlined } from '@ant-design/icons';
import { SchemaInitializerItemType, useCollectionManager_deprecated, useCompile, usePlugin } from '@nocobase/client';
import {
@ -75,6 +78,7 @@ export default class extends Instruction {
type = 'manual';
group = 'manual';
description = `{{t("Could be used for manually submitting data, and determine whether to continue or exit. Workflow will generate a todo item for assigned user when it reaches a manual node, and continue processing after user submits the form.", { ns: "${NAMESPACE}" })}}`;
icon = (<SolutionOutlined />);
fieldset = {
assignees: {
type: 'array',

2
packages/plugins/@nocobase/plugin-workflow-notification/src/client/NotificationInstruction.tsx
View File

@ -7,6 +7,7 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { NotificationOutlined } from '@ant-design/icons';
import { Instruction, useWorkflowVariableOptions } from '@nocobase/plugin-workflow/client';
import { MessageConfigForm } from '@nocobase/plugin-notification-manager/client';
@ -22,6 +23,7 @@ export default class extends Instruction {
type = 'notification';
group = 'extended';
description = `{{t("Send notification. You can use the variables in the upstream nodes as content and ohter config.", { ns: "${NAMESPACE}" })}}`;
icon = (<NotificationOutlined />);
fieldset = {
message: {
type: 'void',

3
packages/plugins/@nocobase/plugin-workflow-parallel/src/client/ParallelInstruction.tsx
View File

@ -9,7 +9,7 @@
import React, { useState } from 'react';
import { Button, Tooltip } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { ApartmentOutlined, PlusOutlined } from '@ant-design/icons';
import { css } from '@nocobase/client';
@ -30,6 +30,7 @@ export default class extends Instruction {
type = 'parallel';
group = 'control';
description = `{{t("Run multiple branch processes in parallel.", { ns: "${NAMESPACE}" })}}`;
icon = (<ApartmentOutlined style={{}} />);
fieldset = {
mode: {
type: 'string',

4
packages/plugins/@nocobase/plugin-workflow-request/src/client/RequestInstruction.tsx
View File

@ -11,7 +11,9 @@ import { onFieldValueChange } from '@formily/core';
import { uid } from '@formily/shared';
import { useForm, useField, useFormEffects } from '@formily/react';
import { ArrayItems } from '@formily/antd-v5';
import { GlobalOutlined } from '@ant-design/icons';
import { SchemaComponent, css } from '@nocobase/client';
import {
Instruction,
WorkflowVariableJSON,
@ -21,7 +23,6 @@ import {
} from '@nocobase/plugin-workflow/client';
import { NAMESPACE, useLang } from '../locale';
import { SchemaComponent, css } from '@nocobase/client';
const BodySchema = {
'application/json': {
@ -155,6 +156,7 @@ export default class extends Instruction {
type = 'request';
group = 'extended';
description = `{{t("Send HTTP request to a URL. You can use the variables in the upstream nodes as request headers, parameters and request body.", { ns: "${NAMESPACE}" })}}`;
icon = (<GlobalOutlined />);
fieldset = {
method: {
type: 'string',

2
packages/plugins/@nocobase/plugin-workflow-sql/src/client/SQLInstruction.tsx
View File

@ -12,6 +12,7 @@ import { DEFAULT_DATA_SOURCE_KEY, css } from '@nocobase/client';
import { Instruction, WorkflowVariableRawTextArea, defaultFieldNames } from '@nocobase/plugin-workflow/client';
import React from 'react';
import { ConsoleSqlOutlined } from '@ant-design/icons';
import { Trans } from 'react-i18next';
import { NAMESPACE } from '../locale';
@ -20,6 +21,7 @@ export default class extends Instruction {
type = 'sql';
group = 'collection';
description = `{{t("Execute a SQL statement in database.", { ns: "${NAMESPACE}" })}}`;
icon = (<ConsoleSqlOutlined style={{}} />);
fieldset = {
dataSource: {
type: 'string',

8
packages/plugins/@nocobase/plugin-workflow/src/client/AddNodeContext.tsx
View File

@ -14,6 +14,7 @@ import { observer, useForm } from '@formily/react';
import {
ActionContextProvider,
css,
cx,
SchemaComponent,
useActionContext,
useAPIClient,
@ -68,6 +69,7 @@ export function AddButton(props: AddButtonProps) {
'aria-label': item.type,
key: item.type,
label: item.title,
icon: item.icon,
})),
};
})
@ -89,7 +91,7 @@ export function AddButton(props: AddButtonProps) {
}
return (
<div className={styles.addButtonClass}>
<div className={cx(styles.addButtonClass, 'workflow-add-node-button')}>
<Dropdown
menu={{
items: groups,
@ -101,6 +103,10 @@ export function AddButton(props: AddButtonProps) {
max-height: 30em;
overflow-y: auto;
}
.ant-dropdown-menu-item-group-list {
display: grid;
grid-template-columns: 1fr 1fr;
}
`}
>
<Button

2
packages/plugins/@nocobase/plugin-workflow/src/client/Branch.tsx
View File

@ -43,8 +43,8 @@ export function Branch({
<div className={cx('workflow-branch', styles.branchClass, className)}>
<div className="workflow-branch-lines" />
{controller}
<AddButton aria-label={getAriaLabel()} upstream={from} branchIndex={branchIndex} />
<div className="workflow-node-list">
<AddButton aria-label={getAriaLabel()} upstream={from} branchIndex={branchIndex} />
{list.map((item) => (
<Node data={item} key={item.id} />
))}

4
packages/plugins/@nocobase/plugin-workflow/src/client/nodes/calculation.tsx
View File

@ -7,6 +7,9 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { CalculatorOutlined } from '@ant-design/icons';
import { SchemaInitializerItemType } from '@nocobase/client';
import { Evaluator, evaluators, getOptions } from '@nocobase/evaluators/client';
@ -22,6 +25,7 @@ export default class extends Instruction {
type = 'calculation';
group = 'calculation';
description = `{{t("Calculate an expression based on a calculation engine and obtain a value as the result. Variables in the upstream nodes can be used in the expression.", { ns: "${NAMESPACE}" })}}`;
icon = (<CalculatorOutlined style={{}} />);
fieldset = {
engine: {
type: 'string',

2
packages/plugins/@nocobase/plugin-workflow/src/client/nodes/condition.tsx
View File

@ -19,6 +19,7 @@ import { lang, NAMESPACE } from '../locale';
import useStyles from '../style';
import { useWorkflowVariableOptions, WorkflowVariableTextArea } from '../variable';
import { CalculationConfig } from '../components/Calculation';
import { QuestionCircleOutlined } from '@ant-design/icons';
const BRANCH_INDEX = {
DEFAULT: null,
@ -31,6 +32,7 @@ export default class extends Instruction {
type = 'condition';
group = 'control';
description = `{{t('Based on boolean result of the calculation to determine whether to "continue" or "exit" the process, or continue on different branches of "yes" and "no".', { ns: "${NAMESPACE}" })}}`;
icon = (<QuestionCircleOutlined style={{}} />);
fieldset = {
rejectOnFalse: {
type: 'boolean',

4
packages/plugins/@nocobase/plugin-workflow/src/client/nodes/create.tsx
View File

@ -7,6 +7,9 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { FileAddOutlined } from '@ant-design/icons';
import { SchemaInitializerItemType, parseCollectionName, useCollectionDataSource, useCompile } from '@nocobase/client';
import { CollectionBlockInitializer } from '../components/CollectionBlockInitializer';
@ -52,6 +55,7 @@ export default class extends Instruction {
type = 'create';
group = 'collection';
description = `{{t("Add new record to a collection. You can use variables from upstream nodes to assign values to fields.", { ns: "${NAMESPACE}" })}}`;
icon = (<FileAddOutlined style={{}} />);
fieldset = {
collection: {
...collection,

4
packages/plugins/@nocobase/plugin-workflow/src/client/nodes/destroy.tsx
View File

@ -7,6 +7,9 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { DeleteOutlined } from '@ant-design/icons';
import { useCollectionDataSource } from '@nocobase/client';
import { isValidFilter } from '@nocobase/utils/client';
@ -20,6 +23,7 @@ export default class extends Instruction {
type = 'destroy';
group = 'collection';
description = `{{t("Delete records of a collection. Could use variables in workflow context as filter. All records match the filter will be deleted.", { ns: "${NAMESPACE}" })}}`;
icon = (<DeleteOutlined style={{}} />);
fieldset = {
collection: {
...collection,

4
packages/plugins/@nocobase/plugin-workflow/src/client/nodes/end.tsx
View File

@ -7,6 +7,9 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { StopOutlined } from '@ant-design/icons';
import { Instruction } from '.';
import { NAMESPACE } from '../locale';
import { JOB_STATUS } from '../constants';
@ -16,6 +19,7 @@ export default class extends Instruction {
type = 'end';
group = 'control';
description = `{{t("End the process immediately, with set status.", { ns: "${NAMESPACE}" })}}`;
icon = (<StopOutlined style={{}} />);
fieldset = {
endStatus: {
type: 'number',

21
packages/plugins/@nocobase/plugin-workflow/src/client/nodes/index.tsx
View File

@ -60,6 +60,7 @@ export abstract class Instruction {
type: string;
group: string;
description?: string;
icon?: JSX.Element;
/**
* @deprecated migrate to `presetFieldset` instead
*/
@ -612,7 +613,7 @@ export function NodeDefaultView(props) {
>
<div className={styles.nodeHeaderClass}>
<div className={cx(styles.nodeMetaClass, 'workflow-node-meta')}>
<Tag>{typeTitle}</Tag>
<Tag icon={instruction.icon}>{typeTitle}</Tag>
<span className="workflow-node-id">{data.id}</span>
</div>
<div className="workflow-node-actions">
@ -648,15 +649,15 @@ export function NodeDefaultView(props) {
type: 'void',
properties: {
...(instruction.view ? { view: instruction.view } : {}),
button: {
type: 'void',
'x-content': detailText,
'x-component': Button,
'x-component-props': {
type: 'link',
className: 'workflow-node-config-button',
},
},
// button: {
// type: 'void',
// 'x-content': detailText,
// 'x-component': Button,
// 'x-component-props': {
// type: 'link',
// className: 'workflow-node-config-button',
// },
// },
[data.id]: {
type: 'void',
title: (

3
packages/plugins/@nocobase/plugin-workflow/src/client/nodes/query.tsx
View File

@ -7,6 +7,8 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import React from 'react';
import { FileSearchOutlined } from '@ant-design/icons';
import { ArrayItems } from '@formily/antd-v5';
import {
@ -62,6 +64,7 @@ export default class extends Instruction {
type = 'query';
group = 'collection';
description = `{{t("Query records from a collection. You can use variables from upstream nodes as query conditions.", { ns: "${NAMESPACE}" })}}`;
icon = (<FileSearchOutlined style={{}} />);
fieldset = {
collection: {
...collection,

4
packages/plugins/@nocobase/plugin-workflow/src/client/nodes/update.tsx
View File

@ -7,7 +7,8 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { uid } from '@formily/shared';
import React from 'react';
import { EditOutlined } from '@ant-design/icons';
import { useCollectionDataSource } from '@nocobase/client';
import { isValidFilter } from '@nocobase/utils/client';
@ -26,6 +27,7 @@ export default class extends Instruction {
type = 'update';
group = 'collection';
description = `{{t("Update records of a collection. You can use variables from upstream nodes as query conditions and field values.", { ns: "${NAMESPACE}" })}}`;
icon = (<EditOutlined style={{}} />);
fieldset = {
collection: {
...collection,

38
packages/plugins/@nocobase/plugin-workflow/src/client/style.tsx
View File

@ -150,11 +150,22 @@ const useStyles = createStyles(({ css, token }) => {
flex-direction: column;
align-items: center;
position: relative;
min-width: 20em;
min-width: 16em;
padding: 0 2em;
.workflow-node-list {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
> :last-child {
> .workflow-add-node-button {
&:after {
display: none;
}
}
}
}
.workflow-branch-lines {
@ -240,7 +251,7 @@ const useStyles = createStyles(({ css, token }) => {
nodeCardClass: css`
position: relative;
width: 20em;
width: 16em;
background: ${token.colorBgContainer};
padding: 1em;
box-shadow: ${token.boxShadowTertiary};
@ -361,14 +372,32 @@ const useStyles = createStyles(({ css, token }) => {
`,
addButtonClass: css`
position: relative;
flex-shrink: 0;
padding: 2em 0;
padding: 1em 0;
> .ant-btn {
&:disabled {
visibility: hidden;
}
}
&:after {
content: '';
display: block;
position: absolute;
bottom: 0.1em;
left: calc(50% - 0.25em);
width: 0.5em;
height: 0.5em;
border: 1px solid ${token.colorBorder};
border-width: 0 1px 1px 0;
transform: rotate(45deg);
}
&:first-child:last-child:after {
display: none;
}
`,
conditionClass: css`
@ -394,6 +423,9 @@ const useStyles = createStyles(({ css, token }) => {
transform: translateY(-50%);
width: 2em;
height: 6em;
flex-shrink: 0;
padding: 2em 0;
font-size: 14px;
`,
terminalClass: css`

18
packages/plugins/@nocobase/plugin-workflow/src/client/triggers/index.tsx
View File

@ -301,15 +301,15 @@ export const TriggerConfig = () => {
name: `workflow-trigger-${workflow.id}`,
type: 'void',
properties: {
config: {
type: 'void',
'x-content': detailText,
'x-component': Button,
'x-component-props': {
type: 'link',
className: 'workflow-node-config-button',
},
},
// config: {
// type: 'void',
// 'x-content': detailText,
// 'x-component': Button,
// 'x-component-props': {
// type: 'link',
// className: 'workflow-node-config-button',
// },
// },
drawer: {
type: 'void',
title: titleText,