Feat: IfElse node support variable reference (#5025)

* if else node support reference (#5016) * if else node support reference * optimize input render * ui * fix --------- Co-authored-by: Archer <545436317@qq.com> * fix: chat * perf: download invoice * optimize ifelse node ui (#5024) * perf: ifelse node * optimize type (#5027) --------- Co-authored-by: heheer <heheer@sealos.io>
2025-10-17 16:45:02 +00:00 · 2025-06-13 17:15:24 +08:00
parent 8acb16f9f2
commit 0914eacb5e
29 changed files with 393 additions and 276 deletions
--- a/packages/web/components/common/Icon/constants.ts
+++ b/packages/web/components/common/Icon/constants.ts
@@ -8,6 +8,7 @@ export const iconPaths = {
  chatSend: () => import('./icons/chatSend.svg'),
  check: () => import('./icons/check.svg'),
  checkCircle: () => import('./icons/checkCircle.svg'),
+  circleMinus: () => import('./icons/circleMinus.svg'),
  close: () => import('./icons/close.svg'),
  closeSolid: () => import('./icons/closeSolid.svg'),
  code: () => import('./icons/code.svg'),
--- a/packages/web/components/common/Icon/icons/circleMinus.svg
+++ b/packages/web/components/common/Icon/icons/circleMinus.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 17" >
+  <path d="M5.33342 7.80417C4.99499 7.80417 4.72063 8.07852 4.72063 8.41695C4.72063 8.75538 4.99499 9.02974 5.33342 9.02974H10.6667C11.0052 9.02974 11.2795 8.75538 11.2795 8.41695C11.2795 8.07852 11.0052 7.80417 10.6667 7.80417H5.33342Z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7901 8.41695C14.7901 12.167 11.7501 15.207 8.00008 15.207C4.25007 15.207 1.21008 12.167 1.21008 8.41695C1.21008 4.66694 4.25007 1.62695 8.00008 1.62695C11.7501 1.62695 14.7901 4.66694 14.7901 8.41695ZM13.4567 8.41695C13.4567 11.4306 11.0137 13.8736 8.00008 13.8736C4.98645 13.8736 2.54342 11.4306 2.54342 8.41695C2.54342 5.40332 4.98645 2.96029 8.00008 2.96029C11.0137 2.96029 13.4567 5.40332 13.4567 8.41695Z"/>
+</svg>
--- a/packages/web/components/common/Icon/icons/minus.svg
+++ b/packages/web/components/common/Icon/icons/minus.svg
@@ -1,4 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 16 17" >
-  <path d="M5.33342 7.80417C4.99499 7.80417 4.72063 8.07852 4.72063 8.41695C4.72063 8.75538 4.99499 9.02974 5.33342 9.02974H10.6667C11.0052 9.02974 11.2795 8.75538 11.2795 8.41695C11.2795 8.07852 11.0052 7.80417 10.6667 7.80417H5.33342Z" />
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7901 8.41695C14.7901 12.167 11.7501 15.207 8.00008 15.207C4.25007 15.207 1.21008 12.167 1.21008 8.41695C1.21008 4.66694 4.25007 1.62695 8.00008 1.62695C11.7501 1.62695 14.7901 4.66694 14.7901 8.41695ZM13.4567 8.41695C13.4567 11.4306 11.0137 13.8736 8.00008 13.8736C4.98645 13.8736 2.54342 11.4306 2.54342 8.41695C2.54342 5.40332 4.98645 2.96029 8.00008 2.96029C11.0137 2.96029 13.4567 5.40332 13.4567 8.41695Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.15002 9C3.15002 8.58579 3.48581 8.25 3.90002 8.25H14.1C14.5142 8.25 14.85 8.58579 14.85 9C14.85 9.41421 14.5142 9.75 14.1 9.75H3.90002C3.48581 9.75 3.15002 9.41421 3.15002 9Z" />
 </svg>
--- a/packages/web/components/common/Input/NumberInput/index.tsx
+++ b/packages/web/components/common/Input/NumberInput/index.tsx
@@ -4,7 +4,8 @@ import {
  NumberInputField,
  NumberInputStepper,
  NumberDecrementStepper,
-  type NumberInputProps
+  type NumberInputProps,
+  type NumberInputFieldProps
 } from '@chakra-ui/react';
 import React from 'react';
 import MyIcon from '../../Icon';
@@ -16,11 +17,11 @@ type Props = Omit<NumberInputProps, 'onChange' | 'onBlur'> & {
  placeholder?: string;
  register?: UseFormRegister<any>;
  name?: string;
-  bg?: string;
+  inputFieldProps?: NumberInputFieldProps;
 };

 const MyNumberInput = (props: Props) => {
-  const { register, name, onChange, onBlur, placeholder, bg, ...restProps } = props;
+  const { register, name, onChange, onBlur, placeholder, inputFieldProps, ...restProps } = props;

  return (
    <NumberInput
@@ -68,7 +69,6 @@ const MyNumberInput = (props: Props) => {
      }}
    >
      <NumberInputField
-        bg={bg}
        placeholder={placeholder}
        h={restProps.h}
        defaultValue={restProps.defaultValue}
@@ -80,6 +80,7 @@ const MyNumberInput = (props: Props) => {
              valueAsNumber: true
            })
          : {})}
+        {...inputFieldProps}
      />
      <NumberInputStepper>
        <NumberIncrementStepper>
--- a/packages/web/components/common/MySelect/MultipleRowSelect.tsx
+++ b/packages/web/components/common/MySelect/MultipleRowSelect.tsx
@@ -26,7 +26,7 @@ export const MultipleRowSelect = ({
  onSelect,
  ButtonProps,
  changeOnEverySelect = false,
-  rowMinWidth = 'autp'
+  rowMinWidth = 'auto'
 }: MultipleSelectProps & {
  rowMinWidth?: string;
 }) => {
@@ -66,7 +66,7 @@ export const MultipleRowSelect = ({
        if (currentScrollTop !== undefined && MenuRef.current[index]) {
          MenuRef.current[index]!.scrollTop = currentScrollTop;
        }
-      }, [cloneValue, currentScrollTop]);
+      }, [currentScrollTop, index]);

      return (
        <>
@@ -143,7 +143,7 @@ export const MultipleRowSelect = ({
        </>
      );
    },
-    [cloneValue]
+    [changeOnEverySelect, cloneValue, emptyTip, maxH, minWidth, onClose, onSelect, rowMinWidth, t]
  );

  const onOpenSelect = useCallback(() => {
@@ -172,7 +172,6 @@ export const MultipleRowSelect = ({
          ref={ButtonRef}
          width={'100%'}
          px={3}
-          rightIcon={<MyIcon name={'core/chat/chevronDown'} w={4} color={'myGray.500'} />}
          variant={'whitePrimaryOutline'}
          size={'lg'}
          fontSize={'sm'}
@@ -189,7 +188,12 @@ export const MultipleRowSelect = ({
            : {})}
          {...ButtonProps}
        >
-          <Box>{label ?? placeholder}</Box>
+          <Flex alignItems={'center'}>
+            <Box flex="1" overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">
+              {label ?? placeholder}
+            </Box>
+            <MyIcon name={'core/chat/chevronDown'} w={4} flexShrink={0} color={'myGray.500'} />
+          </Flex>
        </MenuButton>
        <MenuList
          className={ButtonProps?.className}
@@ -260,7 +264,7 @@ export const MultipleRowArraySelect = ({
      });
      onSelect(validList);
    },
-    [onSelect]
+    [list, onSelect]
  );

  const RenderList = useCallback(
@@ -334,13 +338,13 @@ export const MultipleRowArraySelect = ({
        </>
      );
    },
-    [navigationPath, formatValue, onSelect]
+    [navigationPath, maxH, emptyTip, t, formatValue, onChange]
  );

  const onOpenSelect = useCallback(() => {
    setNavigationPath([]);
    onOpen();
-  }, []);
+  }, [onOpen]);

  return (
    <Box ref={ref} position={'relative'}>
--- a/packages/web/components/common/Textarea/PromptEditor/index.module.scss
+++ b/packages/web/components/common/Textarea/PromptEditor/index.module.scss
@@ -25,31 +25,6 @@
  }
 }

-.contentEditable_isFlow {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  border: 1px solid var(--chakra-colors-myGray-200);
-  border-radius: var(--chakra-radii-sm);
-  padding: 6px 8px;
-  font-size: var(--chakra-fontSizes-sm);
-  overflow-y: auto;
-
-  &:hover {
-    border-color: var(--chakra-colors-primary-300);
-  }
-  &::-webkit-scrollbar {
-    color: var(--chakra-colors-myGray-100);
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--chakra-colors-myGray-200) !important;
-    cursor: pointer;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background-color: var(--chakra-colors-myGray-250) !important;
-  }
-}
-
 .contentEditable:focus {
  outline: none;
  border: 1px solid;
--- a/packages/web/i18n/en/workflow.json
+++ b/packages/web/i18n/en/workflow.json
@@ -21,6 +21,8 @@
  "can_not_loop": "This node can't loop.",
  "choose_another_application_to_call": "Select another application to call",
  "classification_result": "Classification Result",
+  "click_to_change_reference": "Click to switch input mode",
+  "click_to_change_value": "Click to switch reference mode",
  "code.Reset template": "Reset Template",
  "code.Reset template confirm": "Confirm reset code template? This will reset all inputs and outputs to template values. Please save your current code.",
  "code.Switch language confirm": "Switching the language will reset the code, will it continue?",
--- a/packages/web/i18n/zh-CN/workflow.json
+++ b/packages/web/i18n/zh-CN/workflow.json
@@ -21,6 +21,8 @@
  "can_not_loop": "该节点不支持循环嵌套",
  "choose_another_application_to_call": "选择一个其他应用进行调用",
  "classification_result": "分类结果",
+  "click_to_change_reference": "点击切换输入模式",
+  "click_to_change_value": "点击切换变量引用模式",
  "code.Reset template": "还原模板",
  "code.Reset template confirm": "确认还原代码模板？将会重置所有输入和输出至模板值，请注意保存当前代码。",
  "code.Switch language confirm": "切换语言将重置代码，是否继续？",
--- a/packages/web/i18n/zh-Hant/workflow.json
+++ b/packages/web/i18n/zh-Hant/workflow.json
@@ -21,6 +21,8 @@
  "can_not_loop": "這個節點不能迴圈。",
  "choose_another_application_to_call": "選擇另一個應用程式來呼叫",
  "classification_result": "分類結果",
+  "click_to_change_reference": "點擊切換輸入模式",
+  "click_to_change_value": "點擊切換變量引用模式",
  "code.Reset template": "重設範本",
  "code.Reset template confirm": "確定要重設程式碼範本嗎？這將會把所有輸入和輸出重設為範本值。請儲存您目前的程式碼。",
  "code.Switch language confirm": "切換語言將重設代碼，是否繼續？",