feat: Build options for the component id field of the Switch operator #1739 (#2037)

### What problem does this PR solve? feat: Build options for the component id field of the Switch operator #1739 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-05-29 17:45:33 +08:00 · 2024-08-21 17:15:24 +08:00 · 2024-08-21 17:15:24 +08:00 · 9b3f5fd38b
commit 9b3f5fd38b
parent 6c26872799
10 changed files with 59 additions and 47 deletions
--- a/web/src/assets/svg/switch.svg
+++ b/web/src/assets/svg/switch.svg
@ -1,6 +1,6 @@
-<svg t="1724034437425" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1567"
+<svg t="1724229849879" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4299"
    width="200" height="200">
    <path
        d="M128 522.666667c17.066667 0 32-14.933333 32-32v-170.666667c0-6.4 4.266667-10.666667 10.666667-10.666667h652.8l-83.2 83.2c-12.8 12.8-12.8 34.133333 0 46.933334 6.4 6.4 14.933333 10.666667 23.466666 10.666666s17.066667-4.266667 23.466667-10.666666l145.066667-145.066667c12.8-12.8 12.8-34.133333 0-46.933333l-145.066667-145.066667c-12.8-12.8-34.133333-12.8-46.933333 0-12.8 12.8-12.8 34.133333 0 46.933333l93.866666 93.866667H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666667v170.666666c0 19.2 14.933333 34.133333 32 34.133334zM906.666667 501.333333c-17.066667 0-32 14.933333-32 32v170.666667c0 6.4-4.266667 10.666667-10.666667 10.666667H211.2l83.2-83.2c12.8-12.8 12.8-34.133333 0-46.933334-12.8-12.8-34.133333-12.8-46.933333 0l-145.066667 145.066667c-12.8 12.8-12.8 34.133333 0 46.933333l145.066667 145.066667c6.4 6.4 14.933333 10.666667 23.466666 10.666667s17.066667-4.266667 23.466667-10.666667c12.8-12.8 12.8-34.133333 0-46.933333l-93.866667-93.866667h663.466667c40.533333 0 74.666667-34.133333 74.666667-74.666667v-170.666666c0-19.2-12.8-34.133333-32-34.133334z"
-        fill="#666666" p-id="1568"></path>
+        fill="#3b76f4" p-id="4300"></path>
 </svg>
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -603,7 +603,7 @@ The above is the content you need to summarize.`,
      yes: 'Yes',
      no: 'No',
      key: 'key',
-      componentId: 'component id',
+      componentId: 'Component ID',
      add: 'Add',
      operation: 'operation',
      run: 'Run',
@ -637,6 +637,7 @@ The above is the content you need to summarize.`,
      blank: 'Blank',
      createFromNothing: 'Create from nothing',
      addItem: 'Add Item',
+      addSubItem: 'Add Sub Item',
      nameRequiredMsg: 'Name is required',
      nameRepeatedMsg: 'The name cannot be repeated',
      keywordExtract: 'Keyword',
@ -833,6 +834,8 @@ The above is the content you need to summarize.`,
        and: 'And',
        or: 'Or',
      },
+      operator: 'Operator',
+      value: 'Value',
    },
    footer: {
      profile: 'All rights reserved @ React',
--- a/web/src/locales/zh-traditional.ts
+++ b/web/src/locales/zh-traditional.ts
@ -597,6 +597,7 @@ export default {
      blank: '空',
      createFromNothing: '從無到有',
      addItem: '新增',
+      addSubItem: '新增子項',
      nameRequiredMsg: '名稱不能為空',
      nameRepeatedMsg: '名稱不能重複',
      keywordExtract: '關鍵字',
@ -791,6 +792,8 @@ export default {
        and: '與',
        or: '或',
      },
+      operator: '操作符',
+      value: '值',
    },
    footer: {
      profile: '“保留所有權利 @ react”',
--- a/web/src/locales/zh.ts
+++ b/web/src/locales/zh.ts
@ -615,6 +615,7 @@ export default {
      blank: '空',
      createFromNothing: '从无到有',
      addItem: '新增',
+      addSubItem: '新增子项',
      nameRequiredMsg: '名称不能为空',
      nameRepeatedMsg: '名称不能重复',
      keywordExtract: '关键词',
@ -809,6 +810,8 @@ export default {
        and: '与',
        or: '或',
      },
+      operator: '操作符',
+      value: '值',
    },
    footer: {
      profile: 'All rights reserved @ React',
--- a/web/src/pages/flow/canvas/node/relevant-node.tsx
+++ b/web/src/pages/flow/canvas/node/relevant-node.tsx
@ -45,8 +45,8 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
          className={styles.handle}
          id={'c'}
        ></Handle>
-        <CategorizeHandle top={20} right={6} text={'yes'}></CategorizeHandle>
-        <CategorizeHandle top={80} right={6} text={'no'}></CategorizeHandle>
+        <CategorizeHandle top={20} right={6} id={'yes'}></CategorizeHandle>
+        <CategorizeHandle top={80} right={6} id={'no'}></CategorizeHandle>
        <Flex vertical align="center" justify="center" gap={0}>
          <Flex flex={1}>
            <OperatorIcon
--- a/web/src/pages/flow/constant.tsx
+++ b/web/src/pages/flow/constant.tsx
@ -97,7 +97,7 @@ export const operatorMap: Record<
    fontSize?: number;
    iconFontSize?: number;
    iconWidth?: number;
-    moreIconColor?: number;
+    moreIconColor?: string;
  }
 > = {
  [Operator.Retrieval]: {
--- a/web/src/pages/flow/generate-form/dynamic-parameters.tsx
+++ b/web/src/pages/flow/generate-form/dynamic-parameters.tsx
@ -4,10 +4,8 @@ import { DeleteOutlined } from '@ant-design/icons';
 import { Button, Flex, Select, Table, TableProps } from 'antd';
 import { IGenerateParameter } from '../interface';

-import {
-  useBuildComponentIdSelectOptions,
-  useHandleOperateParameters,
-} from './hooks';
+import { useBuildComponentIdSelectOptions } from '../hooks';
+import { useHandleOperateParameters } from './hooks';
 import styles from './index.less';

 interface IProps {
--- a/web/src/pages/flow/generate-form/hooks.ts
+++ b/web/src/pages/flow/generate-form/hooks.ts
@ -1,33 +1,9 @@
 import get from 'lodash/get';
 import { useCallback, useMemo } from 'react';
 import { v4 as uuid } from 'uuid';
-import { Operator } from '../constant';
 import { IGenerateParameter } from '../interface';
 import useGraphStore from '../store';

-// exclude nodes with branches
-const ExcludedNodes = [
-  Operator.Categorize,
-  Operator.Relevant,
-  Operator.Begin,
-  Operator.Answer,
-];
-
-export const useBuildComponentIdSelectOptions = (nodeId?: string) => {
-  const nodes = useGraphStore((state) => state.nodes);
-
-  const options = useMemo(() => {
-    return nodes
-      .filter(
-        (x) =>
-          x.id !== nodeId && !ExcludedNodes.some((y) => y === x.data.label),
-      )
-      .map((x) => ({ label: x.data.name, value: x.id }));
-  }, [nodes, nodeId]);
-
-  return options;
-};
-
 export const useHandleOperateParameters = (nodeId: string) => {
  const { getNode, updateNodeForm } = useGraphStore((state) => state);
  const node = getNode(nodeId);
--- a/web/src/pages/flow/hooks.ts
+++ b/web/src/pages/flow/hooks.ts
@ -563,3 +563,26 @@ export const useWatchNodeFormDataChange = () => {
    buildSwitchEdgesByFormData,
  ]);
 };
+
+// exclude nodes with branches
+const ExcludedNodes = [
+  Operator.Categorize,
+  Operator.Relevant,
+  Operator.Begin,
+  Operator.Answer,
+];
+
+export const useBuildComponentIdSelectOptions = (nodeId?: string) => {
+  const nodes = useGraphStore((state) => state.nodes);
+
+  const options = useMemo(() => {
+    return nodes
+      .filter(
+        (x) =>
+          x.id !== nodeId && !ExcludedNodes.some((y) => y === x.data.label),
+      )
+      .map((x) => ({ label: x.data.name, value: x.id }));
+  }, [nodes, nodeId]);
+
+  return options;
+};
--- a/web/src/pages/flow/switch-form/index.tsx
+++ b/web/src/pages/flow/switch-form/index.tsx
@ -9,15 +9,16 @@ import {
  SwitchOperatorOptions,
 } from '../constant';
 import { useBuildFormSelectOptions } from '../form-hooks';
+import { useBuildComponentIdSelectOptions } from '../hooks';
 import { IOperatorForm, ISwitchForm } from '../interface';
 import { getOtherFieldValues } from '../utils';

 const subLabelCol = {
-  span: 7,
+  span: 9,
 };

 const subWrapperCol = {
-  span: 17,
+  span: 15,
 };

 const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
@ -48,10 +49,12 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
    }));
  }, [t]);

+  const componentIdOptions = useBuildComponentIdSelectOptions(node?.id);
+
  return (
    <Form
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
+      labelCol={{ span: 4 }}
+      wrapperCol={{ span: 20 }}
      form={form}
      name="dynamic_form_complex"
      autoComplete="off"
@ -102,7 +105,7 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
                    ])}
                  />
                </Form.Item>
-                <Form.Item label="Items">
+                <Form.Item label=" " colon={false}>
                  <Form.List name={[field.name, 'items']}>
                    {(subFields, subOpt) => (
                      <div
@ -126,31 +129,34 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
                            }
                          >
                            <Form.Item
-                              label={'cpn_id'}
+                              label={t('flow.componentId')}
                              name={[subField.name, 'cpn_id']}
                              labelCol={subLabelCol}
                              wrapperCol={subWrapperCol}
                            >
-                              <Input placeholder="cpn_id" />
+                              <Select
+                                placeholder={t('flow.componentId')}
+                                options={componentIdOptions}
+                              />
                            </Form.Item>
                            <Form.Item
-                              label={'operator'}
+                              label={t('flow.operator')}
                              name={[subField.name, 'operator']}
                              labelCol={subLabelCol}
                              wrapperCol={subWrapperCol}
                            >
                              <Select
-                                placeholder="operator"
+                                placeholder={t('flow.operator')}
                                options={switchOperatorOptions}
                              />
                            </Form.Item>
                            <Form.Item
-                              label={'value'}
+                              label={t('flow.value')}
                              name={[subField.name, 'value']}
                              labelCol={subLabelCol}
                              wrapperCol={subWrapperCol}
                            >
-                              <Input placeholder="value" />
+                              <Input placeholder={t('flow.value')} />
                            </Form.Item>
                          </Card>
                        ))}
@ -159,7 +165,7 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
                          onClick={() => subOpt.add()}
                          block
                        >
-                          + Add Sub Item
+                          + {t('flow.addSubItem')}
                        </Button>
                      </div>
                    )}
@ -169,7 +175,7 @@ const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => {
            ))}

            <Button type="dashed" onClick={() => add()} block>
-              + Add Item
+              + {t('flow.addItem')}
            </Button>
          </div>
        )}