From 7082ea4c9dfd1706b1d83f73a747dc5abcec3970 Mon Sep 17 00:00:00 2001
From: archer <545436317@qq.com>
Date: Tue, 5 Mar 2024 10:03:11 +0800
Subject: [PATCH] extra module ui

---
 .../module/template/system/contextExtract.ts  |   2 +-
 projects/app/public/locales/en/common.json    |   4 +-
 projects/app/public/locales/zh/common.json    |   4 +-
 .../Flow/components/modules/VariableEdit.tsx  |  10 +-
 .../nodes/NodeExtract/ExtractFieldModal.tsx   |  27 ++--
 .../components/nodes/NodeExtract/index.tsx    | 149 ++++++++++--------
 6 files changed, 116 insertions(+), 80 deletions(-)

diff --git a/packages/global/core/module/template/system/contextExtract.ts b/packages/global/core/module/template/system/contextExtract.ts
index aaa413ee1890..86a1bb7bcb2c 100644
--- a/packages/global/core/module/template/system/contextExtract.ts
+++ b/packages/global/core/module/template/system/contextExtract.ts
@@ -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[]}[]
diff --git a/projects/app/public/locales/en/common.json b/projects/app/public/locales/en/common.json
index ff5ccb7d3bf1..162667aac4e5 100644
--- a/projects/app/public/locales/en/common.json
+++ b/projects/app/public/locales/en/common.json
@@ -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",
diff --git a/projects/app/public/locales/zh/common.json b/projects/app/public/locales/zh/common.json
index 78f1ae412bed..19990533fe58 100644
--- a/projects/app/public/locales/zh/common.json
+++ b/projects/app/public/locales/zh/common.json
@@ -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": "添加参数",
diff --git a/projects/app/src/components/core/module/Flow/components/modules/VariableEdit.tsx b/projects/app/src/components/core/module/Flow/components/modules/VariableEdit.tsx
index 5b9c137d90d5..933bca3beeec 100644
--- a/projects/app/src/components/core/module/Flow/components/modules/VariableEdit.tsx
+++ b/projects/app/src/components/core/module/Flow/components/modules/VariableEdit.tsx
@@ -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>
diff --git a/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/ExtractFieldModal.tsx b/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/ExtractFieldModal.tsx
index f063640dffda..1a4868f79710 100644
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/ExtractFieldModal.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/ExtractFieldModal.tsx
@@ -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} />
@@ -58,8 +59,9 @@ 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')}
             />
@@ -67,12 +69,17 @@ const ExtractFieldModal = ({
         )}
 
         <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 })}
           />
@@ -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>
diff --git a/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/index.tsx b/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/index.tsx
index ed3e2b161f0d..f864b8283cf2 100644
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/index.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/index.tsx
@@ -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';
@@ -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>
             )
           }}