### What problem does this PR solve? feat: Arrange the form of generate, categorize, switch, retrieval operators vertically #1739 ### Type of change - [ ] Bug Fix (non-breaking change which fixes an issue) - [x] New Feature (non-breaking change which adds functionality) - [ ] Documentation Update - [ ] Refactoring - [ ] Performance Improvement - [ ] Other (please describe):tags/v0.13.0
| .title { | .title { | ||||
| flex-basis: 60px; | flex-basis: 60px; | ||||
| } | } | ||||
| .formWrapper { | |||||
| :global(.ant-form-item-label) { | |||||
| font-weight: 600; | |||||
| } | |||||
| } |
| mask={false} | mask={false} | ||||
| width={470} | width={470} | ||||
| > | > | ||||
| {visible && ( | |||||
| <OperatorForm | |||||
| onValuesChange={handleValuesChange} | |||||
| form={form} | |||||
| node={node} | |||||
| ></OperatorForm> | |||||
| )} | |||||
| <section className={styles.formWrapper}> | |||||
| {visible && ( | |||||
| <OperatorForm | |||||
| onValuesChange={handleValuesChange} | |||||
| form={form} | |||||
| node={node} | |||||
| ></OperatorForm> | |||||
| )} | |||||
| </section> | |||||
| </Drawer> | </Drawer> | ||||
| ); | ); | ||||
| }; | }; |
| return ( | return ( | ||||
| <Form | <Form | ||||
| name="basic" | name="basic" | ||||
| labelCol={{ span: 6 }} | |||||
| wrapperCol={{ span: 18 }} | |||||
| autoComplete="off" | autoComplete="off" | ||||
| form={form} | form={form} | ||||
| onValuesChange={handleValuesChange} | onValuesChange={handleValuesChange} | ||||
| initialValues={{ items: [{}] }} | initialValues={{ items: [{}] }} | ||||
| layout={'vertical'} | |||||
| > | > | ||||
| <Form.Item | <Form.Item | ||||
| name={'llm_id'} | name={'llm_id'} |
| return ( | return ( | ||||
| <Form | <Form | ||||
| name="basic" | name="basic" | ||||
| labelCol={{ span: 10 }} | |||||
| wrapperCol={{ span: 14 }} | |||||
| autoComplete="off" | autoComplete="off" | ||||
| form={form} | form={form} | ||||
| onValuesChange={onValuesChange} | onValuesChange={onValuesChange} | ||||
| layout={'vertical'} | |||||
| > | > | ||||
| <Form.Item | <Form.Item | ||||
| name={'llm_id'} | name={'llm_id'} |
| return ( | return ( | ||||
| <Form | <Form | ||||
| name="basic" | name="basic" | ||||
| labelCol={{ span: 12 }} | |||||
| wrapperCol={{ span: 12 }} | |||||
| onFinish={onFinish} | onFinish={onFinish} | ||||
| onFinishFailed={onFinishFailed} | onFinishFailed={onFinishFailed} | ||||
| autoComplete="off" | autoComplete="off" | ||||
| onValuesChange={onValuesChange} | onValuesChange={onValuesChange} | ||||
| form={form} | form={form} | ||||
| layout={'vertical'} | |||||
| > | > | ||||
| <SimilaritySlider | <SimilaritySlider | ||||
| isTooltipShown | isTooltipShown |
| import { IOperatorForm, ISwitchForm } from '../../interface'; | import { IOperatorForm, ISwitchForm } from '../../interface'; | ||||
| import { getOtherFieldValues } from '../../utils'; | import { getOtherFieldValues } from '../../utils'; | ||||
| const subLabelCol = { | |||||
| span: 11, | |||||
| }; | |||||
| const subWrapperCol = { | |||||
| span: 13, | |||||
| }; | |||||
| const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => { | const SwitchForm = ({ onValuesChange, node, form }: IOperatorForm) => { | ||||
| const { t } = useTranslation(); | const { t } = useTranslation(); | ||||
| const buildCategorizeToOptions = useBuildFormSelectOptions( | const buildCategorizeToOptions = useBuildFormSelectOptions( | ||||
| return ( | return ( | ||||
| <Form | <Form | ||||
| labelCol={{ span: 8 }} | |||||
| wrapperCol={{ span: 16 }} | |||||
| form={form} | form={form} | ||||
| name="dynamic_form_complex" | name="dynamic_form_complex" | ||||
| autoComplete="off" | autoComplete="off" | ||||
| initialValues={{ conditions: [{}] }} | initialValues={{ conditions: [{}] }} | ||||
| onValuesChange={onValuesChange} | onValuesChange={onValuesChange} | ||||
| layout={'vertical'} | |||||
| > | > | ||||
| <Form.List name="conditions"> | <Form.List name="conditions"> | ||||
| {(fields, { add, remove }) => ( | {(fields, { add, remove }) => ( | ||||
| <Form.Item | <Form.Item | ||||
| label={t('flow.componentId')} | label={t('flow.componentId')} | ||||
| name={[subField.name, 'cpn_id']} | name={[subField.name, 'cpn_id']} | ||||
| labelCol={subLabelCol} | |||||
| wrapperCol={subWrapperCol} | |||||
| > | > | ||||
| <Select | <Select | ||||
| placeholder={t('flow.componentId')} | placeholder={t('flow.componentId')} | ||||
| <Form.Item | <Form.Item | ||||
| label={t('flow.operator')} | label={t('flow.operator')} | ||||
| name={[subField.name, 'operator']} | name={[subField.name, 'operator']} | ||||
| labelCol={subLabelCol} | |||||
| wrapperCol={subWrapperCol} | |||||
| > | > | ||||
| <Select | <Select | ||||
| placeholder={t('flow.operator')} | placeholder={t('flow.operator')} | ||||
| <Form.Item | <Form.Item | ||||
| label={t('flow.value')} | label={t('flow.value')} | ||||
| name={[subField.name, 'value']} | name={[subField.name, 'value']} | ||||
| labelCol={subLabelCol} | |||||
| wrapperCol={subWrapperCol} | |||||
| > | > | ||||
| <Input placeholder={t('flow.value')} /> | <Input placeholder={t('flow.value')} /> | ||||
| </Form.Item> | </Form.Item> |