- 
- {t('application.returnToApplicationList')}
-
+ :
+
+ {t('application.returnToApplicationList')}
+
+ 1
@@ -160,12 +177,12 @@ const Editor: FC
diff --git a/web/src/views/Workflow/components/Editor/plugin/Jinja2HighlightPlugin.tsx b/web/src/views/Workflow/components/Editor/plugin/Jinja2HighlightPlugin.tsx
index 498f78d7..4c75fc58 100644
--- a/web/src/views/Workflow/components/Editor/plugin/Jinja2HighlightPlugin.tsx
+++ b/web/src/views/Workflow/components/Editor/plugin/Jinja2HighlightPlugin.tsx
@@ -9,12 +9,21 @@ const Jinja2HighlightPlugin = () => {
return editor.registerNodeTransform(TextNode, (textNode: TextNode) => {
const text = textNode.getTextContent();
- if (containsJinja2Patterns(text)) {
- const parent = textNode.getParent();
- if (!parent) return;
+ // Skip if node already has styling (prevent infinite recursion)
+ if (textNode.getStyle()) return;
+
+ // Skip if no Jinja2 patterns found
+ if (!containsJinja2Patterns(text)) return;
+
+ const parent = textNode.getParent();
+ if (!parent) return;
- const tokens = tokenizeJinja2(text);
- const newNodes = tokens.map(token => {
+ const tokens = tokenizeJinja2(text);
+
+ // Skip if no meaningful tokenization (only one text token)
+ if (tokens.length <= 1 || (tokens.length === 1 && tokens[0].type === 'text')) return;
+
+ const newNodes = tokens.map(token => {
const newNode = $createTextNode(token.text);
switch (token.type) {
@@ -30,16 +39,16 @@ const Jinja2HighlightPlugin = () => {
newNode.setStyle('color: #008000');
break;
case 'brace-0':
- newNode.setStyle('color: #d73a49; font-family: monospace; font-weight: bold;');
+ newNode.setStyle('color: #155EEF; font-family: monospace; font-weight: bold;');
break;
case 'brace-1':
- newNode.setStyle('color: #0366d6; font-family: monospace; font-weight: bold;');
+ newNode.setStyle('color: #369F21; font-family: monospace; font-weight: bold;');
break;
case 'brace-2':
- newNode.setStyle('color: #28a745; font-family: monospace; font-weight: bold;');
+ newNode.setStyle('color: #FF5D34; font-family: monospace; font-weight: bold;');
break;
case 'brace-3':
- newNode.setStyle('color: #6f42c1; font-family: monospace; font-weight: bold;');
+ newNode.setStyle('color: #5B6167; font-family: monospace; font-weight: bold;');
break;
case 'expression-0':
case 'expression-1':
@@ -77,7 +86,6 @@ const Jinja2HighlightPlugin = () => {
newNodes[i - 1].insertAfter(newNodes[i]);
}
}
- }
});
}, [editor]);
diff --git a/web/src/views/Workflow/components/Properties/AssignmentList/index.tsx b/web/src/views/Workflow/components/Properties/AssignmentList/index.tsx
index 2ee4f51e..29f8f7a1 100644
--- a/web/src/views/Workflow/components/Properties/AssignmentList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/AssignmentList/index.tsx
@@ -1,7 +1,6 @@
import { type FC } from 'react'
import { useTranslation } from 'react-i18next';
-import { Form, Input, Row, Col, Select, InputNumber, Radio } from 'antd'
-import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import { Form, Input, Select, InputNumber, Radio, Button, Space } from 'antd'
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin'
import VariableSelect from '../VariableSelect'
@@ -9,6 +8,7 @@ interface AssignmentListProps {
value?: Array<{ variable_selector: string; operation: string[]; value: string;}>;
parentName: string;
options: Suggestion[];
+ size?: 'small' | 'middle'
}
const operationsObj = {
@@ -31,6 +31,7 @@ const operationsObj = {
const AssignmentList: FC = ({
parentName,
options = [],
+ size = 'small'
}) => {
const { t } = useTranslation();
const form = Form.useFormInstance();
@@ -39,109 +40,126 @@ const AssignmentList: FC = ({
{(fields, { add, remove }) => (
<>
-
diff --git a/web/src/views/Workflow/components/Properties/CaseList/index.tsx b/web/src/views/Workflow/components/Properties/CaseList/index.tsx
index c475034e..8caa601e 100644
--- a/web/src/views/Workflow/components/Properties/CaseList/index.tsx
+++ b/web/src/views/Workflow/components/Properties/CaseList/index.tsx
@@ -1,8 +1,7 @@
import { type FC } from 'react'
import clsx from 'clsx'
import { useTranslation } from 'react-i18next';
-import { Form, Button, Select, Space, Row, Col, Divider, InputNumber, Radio, type SelectProps } from 'antd'
-import { DeleteOutlined } from '@ant-design/icons';
+import { Form, Button, Select, Space, Divider, InputNumber, Radio, type SelectProps } from 'antd'
import type { Suggestion } from '../../Editor/plugin/AutocompletePlugin'
import VariableSelect from '../VariableSelect'
@@ -247,37 +246,40 @@ const CaseList: FC = ({
{(conditionFields, { add: addCondition, remove: removeCondition }) => {
const logicalOperator = form.getFieldValue(name)?.[caseIndex]?.logical_operator || 'and'
return (
-
- {t(`workflow.config.assigner.${parentName}`)}
- add({ operation: 'cover'})} />
-
- {fields.map(({ key, name, ...restField }) => {
- const variableSelector = form.getFieldValue([parentName, name, 'variable_selector']);
- const selectedOption = options.find(option => `{{${option.value}}}` === variableSelector);
- const dataType = selectedOption?.dataType;
- const operationOptions = dataType === 'number' ? operationsObj.number : operationsObj.default;
-
- return (
-
-
-
- vo.nodeData.type === 'loop' || vo.value.includes('conv.') || (vo.nodeData.type === 'iteration' && (vo.label === 'item' || vo.label === 'index')))}
- popupMatchSelectWidth={false}
- onChange={() => {
- form.setFieldValue([parentName, name, 'operation'], undefined);
- form.setFieldValue([parentName, name, 'value'], undefined);
- }}
- />
-
-
-
-
-
- remove(name)} />
-
-
+
+ {fields.map(({ key, name, ...restField }) => {
+ const variableSelector = form.getFieldValue([parentName, name, 'variable_selector']);
+ const selectedOption = options.find(option => `{{${option.value}}}` === variableSelector);
+ const dataType = selectedOption?.dataType;
+ const operationOptions = dataType === 'number' ? operationsObj.number : operationsObj.default;
+
+ return (
+
+ )
+ })}
+
)}
+
- {(form) => {
- const operation = form.getFieldValue([parentName, name, 'operation']);
- if (operation === 'clear') return null;
-
- return (
+
+
+
+
+ {t(`workflow.config.assigner.${parentName}`)}
+
-
+
+ {(form) => {
+ const operation = form.getFieldValue([parentName, name, 'operation']);
+ if (operation === 'clear') return null;
+
+ return (
+
+ {dataType === 'number' && operation === 'cover'
+ ? vo.dataType === dataType) : options}
+ popupMatchSelectWidth={false}
+ size={size}
+ />
+ : dataType === 'number'
+ ? form.setFieldValue([name, 'value'], value)}
+ size={size}
+ />
+ : operation === 'assign'
+ ? <>
+ {dataType === 'boolean'
+ ?
+ True
+ False
+
+ : vo.dataType === dataType) : options}
+ popupMatchSelectWidth={false}
+ size={size}
+ />
+ }
+
+ );
+ }}
+
+
+
+
- {dataType === 'number' && operation === 'cover'
- ? vo.dataType === dataType) : options}
- popupMatchSelectWidth={false}
- />
- : dataType === 'number'
- ? form.setFieldValue([name, 'value'], value)}
- />
- : operation === 'assign'
- ? <>
- {dataType === 'boolean'
- ?
- True
- False
-
- : vo.dataType === dataType) : options}
- popupMatchSelectWidth={false}
- />
- }
+ vo.nodeData.type === 'loop' || vo.value.includes('conv.') || (vo.nodeData.type === 'iteration' && (vo.label === 'item' || vo.label === 'index')))}
+ popupMatchSelectWidth={false}
+ onChange={() => {
+ form.setFieldValue([parentName, name, 'operation'], undefined);
+ form.setFieldValue([parentName, name, 'value'], undefined);
+ }}
+ size={size}
+ className="rb:w-39!"
+ />
- );
- }}
-
-
- )
- })}
+
+
+
+ remove(name)}
+ >
+
-
-
- {caseIndex === 0 ? 'IF' : 'ELIF'}
- {caseFields.length > 1 && {`CASE ${caseIndex + 1}`}} - +
- {caseFields.length > 1 && {`CASE ${caseIndex + 1}`}} - +
+
+
- {caseFields.length > 1 && handleRemoveCase(removeCase, caseField.name, caseIndex)}
- />}
+ {caseFields.length > 1 &&
+
+ }
- {conditionFields?.length > 1 &&
- <>
-
-
+ {caseIndex === 0 ? 'IF' : 'ELIF'}
+ {caseFields.length > 1 && ({`CASE ${caseIndex + 1}`})}
+
+ {conditionFields?.length > 1 && = ({
const operatorList = operatorsObj[leftFieldType || 'default'] || operatorsObj.default || [];
const inputType = leftFieldType === 'number' ? currentExpression.input_type : undefined;
return (
-
+
+
-
+
-
- }
+
+
}
{conditionFields.map((conditionField, conditionIndex) => {
const cases = form.getFieldValue(name) || [];
const currentCase = cases[caseIndex] || {};
@@ -290,91 +292,86 @@ const CaseList: FC
- = ({
@@ -145,8 +154,8 @@ const EditableTable: React.FC = ({
<>
{title && (
= ({
columns={getColumns(remove)}
pagination={false}
size="small"
+ rowClassName="rb:p-0! rb:bg-[#F6F8FC]!"
locale={{ emptyText:
-
-
- handleLeftFieldChange(caseIndex, conditionIndex, val)}
- />
-
-
-
-
-
- removeCondition(conditionField.name)}
+
)
})}
@@ -388,6 +385,8 @@ const CaseList: FC
+
+
+
{leftFieldType === 'boolean'
?
True
False
- :
}
- }
+
}
+
+ handleLeftFieldChange(caseIndex, conditionIndex, val)}
+ className="rb:bg-white! rb:w-29.5!"
/>
-
-
+
+
+
+
- {!hideRightField && <>
+ {!hideRightField &&
{leftFieldType === 'number'
- ?
-
-
+ }
+
+
: removeCondition(conditionField.name)}
+ >
-
)}
@@ -161,8 +170,9 @@ const EditableTable: React.FC{title}
- {title}
+
-
+
- vo.dataType === 'string' || vo.dataType === 'number')} variant="outlined" />
+ vo.dataType === 'string' || vo.dataType === 'number')}
+ variant="outlined"
+ type="input"
+ size="small"
+ />
-
+
vo.dataType === 'string' || vo.dataType === 'number')}
/>
-
+
vo.dataType === 'string' || vo.dataType === 'number')}
/>
-
+
API
-
+
+
- API
+ }
+ className="rb:mt-1 rb:text-[12px]!"
+ >{t('workflow.config.http-request.auth')}: {!values?.auth?.auth_type || values?.auth?.auth_type === 'none' ? t('workflow.config.http-request.none') : t('workflow.config.http-request.apiKey')}