AI/ragflow
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/infiniflow/ragflow.git synced 2025-08-12 21:19:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Make the category operator form displayed in collapsed mode by default #4505 (#4510)

Browse Source 
### What problem does this PR solve?

Feat: Make the category operator form displayed in collapsed mode by
default #4505

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu 2025-01-16 17:16:58 +08:00 committed by GitHub
parent 37235315e1
commit 4946e43941
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 81 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
web/src/pages/flow/form/categorize-form/dynamic-categorize.tsx
View File

@ -3,7 +3,7 @@ import { CloseOutlined, PlusOutlined } from '@ant-design/icons';
import { useUpdateNodeInternals } from '@xyflow/react'; import { useUpdateNodeInternals } from '@xyflow/react';
import { import {
Button, Button,
Card, Collapse,
Flex, Flex,
Form, Form,
FormListFieldData, FormListFieldData,
@ -97,13 +97,65 @@ const NameInput = ({
); );
}; };
const DynamicCategorize = ({ nodeId }: IProps) => { const FormSet = ({ nodeId, field }: IProps & { field: FormListFieldData }) => {
const updateNodeInternals = useUpdateNodeInternals();
const form = Form.useFormInstance(); const form = Form.useFormInstance();
const { t } = useTranslate('flow');
const buildCategorizeToOptions = useBuildFormSelectOptions( const buildCategorizeToOptions = useBuildFormSelectOptions(
Operator.Categorize, Operator.Categorize,
nodeId, nodeId,
); );
return (
<section>
<Form.Item
label={t('categoryName')}
name={[field.name, 'name']}
validateTrigger={['onChange', 'onBlur']}
rules={[
{
required: true,
whitespace: true,
message: t('nameMessage'),
},
]}
>
<NameInput
otherNames={getOtherFieldValues(form, 'items', field, 'name')}
validate={(errors: string[]) =>
form.setFields([
{
name: ['items', field.name, 'name'],
errors,
},
])
}
></NameInput>
</Form.Item>
<Form.Item label={t('description')} name={[field.name, 'description']}>
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item label={t('examples')} name={[field.name, 'examples']}>
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item label={t('nextStep')} name={[field.name, 'to']}>
<Select
allowClear
options={buildCategorizeToOptions(
getOtherFieldValues(form, 'items', field, 'to'),
)}
/>
</Form.Item>
<Form.Item hidden name={[field.name, 'index']}>
<Input />
</Form.Item>
</section>
);
};
const DynamicCategorize = ({ nodeId }: IProps) => {
const updateNodeInternals = useUpdateNodeInternals();
const form = Form.useFormInstance();
const { t } = useTranslate('flow'); const { t } = useTranslate('flow');
return ( return (
@ -122,74 +174,35 @@ const DynamicCategorize = ({ nodeId }: IProps) => {
}); });
if (nodeId) updateNodeInternals(nodeId); if (nodeId) updateNodeInternals(nodeId);
}; };
return ( return (
<Flex gap={18} vertical> <Flex gap={18} vertical>
{fields.map((field) => ( {fields.map((field) => (
<Card <Collapse
size="small" size="small"
key={field.key} key={field.key}
className={styles.caseCard} className={styles.caseCard}
extra={ items={[
<CloseOutlined {
onClick={() => { key: field.key,
remove(field.name); label: (
}} <div className="flex justify-between">
/> <span>
} {form.getFieldValue(['items', field.name, 'name'])}
> </span>
<Form.Item <CloseOutlined
label={t('categoryName')} onClick={() => {
name={[field.name, 'name']} remove(field.name);
validateTrigger={['onChange', 'onBlur']} }}
rules={[ />
{ </div>
required: true, ),
whitespace: true, children: (
message: t('nameMessage'), <FormSet nodeId={nodeId} field={field}></FormSet>
}, ),
]} },
> ]}
<NameInput ></Collapse>
otherNames={getOtherFieldValues(
form,
'items',
field,
'name',
)}
validate={(errors: string[]) =>
form.setFields([
{
name: ['items', field.name, 'name'],
errors,
},
])
}
></NameInput>
</Form.Item>
<Form.Item
label={t('description')}
name={[field.name, 'description']}
>
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item
label={t('examples')}
name={[field.name, 'examples']}
>
<Input.TextArea rows={3} />
</Form.Item>
<Form.Item label={t('nextStep')} name={[field.name, 'to']}>
<Select
allowClear
options={buildCategorizeToOptions(
getOtherFieldValues(form, 'items', field, 'to'),
)}
/>
</Form.Item>
<Form.Item hidden name={[field.name, 'index']}>
<Input />
</Form.Item>
</Card>
))} ))}
<Button <Button

4
web/src/pages/flow/form/categorize-form/index.less
View File

@ -2,7 +2,9 @@
@darkBackgroundColor: rgba(150, 150, 150, 0.12); @darkBackgroundColor: rgba(150, 150, 150, 0.12);
.caseCard { .caseCard {
background-color: @darkBackgroundColor; :global(.ant-collapse-content) {
background-color: @darkBackgroundColor;
}
} }
.addButton { .addButton {