Skip to content

Commit

Permalink
extra module ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@c121914yu
c121914yu committed Mar 5, 2024
1 parent c706cf1 commit 7082ea4
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 80 deletions.
2 changes: 1 addition & 1 deletion packages/global/core/module/template/system/contextExtract.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export const ContextExtractModule: FlowModuleTemplateType = {
{
key: ModuleInputKeyEnum.extractKeys,
type: FlowNodeInputTypeEnum.custom,
label: '目标字段',
label: '',
valueType: ModuleIOValueTypeEnum.any,
description: "由 '描述' 和 'key' 组成一个目标字段，可提取多个目标字段",
value: [], // {desc: string; key: string; required: boolean; enum: string[]}[]
Expand Down
4 changes: 3 additions & 1 deletion projects/app/public/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -797,12 +797,14 @@
"Field Edit": "Field Edit"
},
"extract": {
"Add field": "Add",
"Enum Description": "Lists the possible values for the field, one per row",
"Enum Value": "Enum",
"Field Description Placeholder": "Name/age /sql statement......",
"Field Setting Title": "Extract field configuration",
"Required": "Required",
"Required Description": "Even if the field cannot be extracted, it is returned with the default value"
"Required Description": "Even if the field cannot be extracted, it is returned with the default value",
"Target field": "Field"
},
"http": {
"Add props": "Add props",
Expand Down
4 changes: 3 additions & 1 deletion projects/app/public/locales/zh/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -799,12 +799,14 @@
"Field Edit": "字段编辑"
},
"extract": {
"Add field": "新增字段",
"Enum Description": "列举出该字段可能的值，每行一个",
"Enum Value": "枚举值",
"Field Description Placeholder": "姓名/年龄/sql语句……",
"Field Setting Title": "提取字段配置",
"Required": "必须返回",
"Required Description": "即使无法提取该字段，也会使用默认值进行返回"
"Required Description": "即使无法提取该字段，也会使用默认值进行返回",
"Target field": "目标字段"
},
"http": {
"Add props": "添加参数",
Expand Down
10 changes: 5 additions & 5 deletions projects/app/src/components/core/module/Flow/components/modules/VariableEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,11 +132,11 @@ const VariableEdit = ({
<Table bg={'white'}>
<Thead>
<Tr>
<Th w={'18px !important'} p={0} />
<Th>{t('core.module.variable.variable name')}</Th>
<Th>{t('core.module.variable.key')}</Th>
<Th>{t('common.Require Input')}</Th>
<Th></Th>
<Th w={'18px !important'} p={0} bg={'myGray.50'} />
<Th bg={'myGray.50'}>{t('core.module.variable.variable name')}</Th>
<Th bg={'myGray.50'}>{t('core.module.variable.key')}</Th>
<Th bg={'myGray.50'}>{t('common.Require Input')}</Th>
<Th bg={'myGray.50'}></Th>
</Tr>
</Thead>
<Tbody>
Expand Down
27 changes: 18 additions & 9 deletions ...ts/app/src/components/core/module/Flow/components/nodes/NodeExtract/ExtractFieldModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,11 @@ const ExtractFieldModal = ({
iconSrc="/imgs/module/extract.png"
title={t('core.module.extract.Field Setting Title')}
onClose={onClose}
w={['90vw', '500px']}
>
<ModalBody>
<Flex mt={2} alignItems={'center'}>
<Flex alignItems={'center'} flex={'0 0 80px'}>
<Flex alignItems={'center'} flex={['0 0 80px', '0 0 100px']}>
{t('core.module.extract.Required')}
<MyTooltip label={t('core.module.extract.Required Description')} forceShow>
<QuestionOutlineIcon ml={1} />
Expand All @@ -58,21 +59,27 @@ const ExtractFieldModal = ({
</Flex>
{required && (
<Flex mt={5} alignItems={'center'}>
<Box flex={'0 0 80px'}>{t('core.module.Default value')}</Box>
<Box flex={['0 0 80px', '0 0 100px']}>{t('core.module.Default value')}</Box>
<Input
bg={'myGray.50'}
placeholder={t('core.module.Default value placeholder')}
{...register('defaultValue')}
/>
</Flex>
)}

<Flex mt={5} alignItems={'center'}>
<Box flex={'0 0 80px'}>{t('core.module.Field key')}</Box>
<Input placeholder="name/age/sql" {...register('key', { required: true })} />
<Box flex={['0 0 80px', '0 0 100px']}>{t('core.module.Field key')}</Box>
<Input
bg={'myGray.50'}
placeholder="name/age/sql"
{...register('key', { required: true })}
/>
</Flex>
<Flex mt={5} alignItems={'center'}>
<Box flex={'0 0 80px'}>{t('core.module.Field Description')}</Box>
<Box flex={['0 0 80px', '0 0 100px']}>{t('core.module.Field Description')}</Box>
<Input
bg={'myGray.50'}
placeholder={t('core.module.extract.Field Description Placeholder')}
{...register('desc', { required: true })}
/>
Expand All @@ -85,14 +92,16 @@ const ExtractFieldModal = ({
</MyTooltip>
</Flex>

<Textarea rows={5} placeholder={'apple\npeach\nwatermelon'} {...register('enum')} />
<Textarea
rows={5}
bg={'myGray.50'}
placeholder={'apple\npeach\nwatermelon'}
{...register('enum')}
/>
</Box>
</ModalBody>

<ModalFooter>
<Button variant={'whiteBase'} mr={3} onClick={onClose}>
{t('common.Close')}
</Button>
<Button onClick={handleSubmit(onSubmit)}>{t('common.Confirm')}</Button>
</ModalFooter>
</MyModal>
Expand Down
149 changes: 86 additions & 63 deletions projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
import React, { useState } from 'react';
import { Box, Button, Table, Thead, Tbody, Tr, Th, Td, TableContainer } from '@chakra-ui/react';
import {
Box,
Button,
Table,
Thead,
Tbody,
Tr,
Th,
Td,
TableContainer,
Flex
} from '@chakra-ui/react';
import { NodeProps } from 'reactflow';
import { FlowModuleItemType } from '@fastgpt/global/core/module/type.d';
import { useTranslation } from 'next-i18next';
Expand Down Expand Up @@ -36,75 +47,87 @@ const NodeExtract = ({ data }: NodeProps<FlowModuleItemType>) => {
}: {
value?: ContextExtractAgentItemType[];
}) => (
<Box pt={2}>
<Box position={'absolute'} top={0} right={0}>
<Box>
<Flex alignItems={'center'}>
<Box flex={'1 0 0'}>{t('core.module.extract.Target field')}</Box>
<Button
size={'sm'}
variant={'whitePrimary'}
leftIcon={<AddIcon fontSize={'10px'} />}
onClick={() => setEditExtractField(defaultField)}
>
新增字段
{t('core.module.extract.Add field')}
</Button>
</Box>
<TableContainer>
<Table>
<Thead>
<Tr>
<Th>字段 key</Th>
<Th>字段描述</Th>
<Th>必须</Th>
<Th></Th>
</Tr>
</Thead>
<Tbody>
{extractKeys.map((item, index) => (
<Tr
key={index}
position={'relative'}
whiteSpace={'pre-wrap'}
wordBreak={'break-all'}
>
<Td>{item.key}</Td>
<Td>{item.desc}</Td>
<Td>{item.required ? '✔' : ''}</Td>
<Td whiteSpace={'nowrap'}>
<MyIcon
mr={3}
name={'common/settingLight'}
w={'16px'}
cursor={'pointer'}
onClick={() => {
setEditExtractField(item);
}}
/>
<MyIcon
name={'delete'}
w={'16px'}
cursor={'pointer'}
onClick={() => {
onChangeNode({
moduleId,
type: 'updateInput',
key: ModuleInputKeyEnum.extractKeys,
value: {
...props,
value: extractKeys.filter((extract) => item.key !== extract.key)
}
});

onChangeNode({
moduleId,
type: 'delOutput',
key: item.key
});
}}
/>
</Td>
</Flex>
<Box
mt={2}
borderRadius={'md'}
overflow={'hidden'}
borderWidth={'1px'}
borderBottom="none"
>
<TableContainer>
<Table bg={'white'}>
<Thead>
<Tr>
<Th bg={'myGray.50'}>字段 key</Th>
<Th bg={'myGray.50'}>字段描述</Th>
<Th bg={'myGray.50'}>必须</Th>
<Th bg={'myGray.50'}></Th>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Thead>
<Tbody>
{extractKeys.map((item, index) => (
<Tr
key={index}
position={'relative'}
whiteSpace={'pre-wrap'}
wordBreak={'break-all'}
>
<Td>{item.key}</Td>
<Td>{item.desc}</Td>
<Td>{item.required ? '✔' : ''}</Td>
<Td whiteSpace={'nowrap'}>
<MyIcon
mr={3}
name={'common/settingLight'}
w={'16px'}
cursor={'pointer'}
onClick={() => {
setEditExtractField(item);
}}
/>
<MyIcon
name={'delete'}
w={'16px'}
cursor={'pointer'}
onClick={() => {
onChangeNode({
moduleId,
type: 'updateInput',
key: ModuleInputKeyEnum.extractKeys,
value: {
...props,
value: extractKeys.filter(
(extract) => item.key !== extract.key
)
}
});

onChangeNode({
moduleId,
type: 'delOutput',
key: item.key
});
}}
/>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Box>
</Box>
)
}}
Expand Down

0 comments on commit 7082ea4

Please sign in to comment.