From 95e119fa3856b84d616d375812c28722515d2af6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= Date: Thu, 5 Sep 2024 02:12:59 +0800 Subject: [PATCH] refactor: Update FlowTemplateModal component to use correct prop names --- .../flow/canvas-modal/template-flow-modal.tsx | 61 ++++++++++--------- web/components/flow/node-renderer/upload.tsx | 11 ++-- web/locales/en/flow.ts | 7 +-- web/locales/zh/flow.ts | 7 +-- web/pages/construct/flow/canvas/index.tsx | 29 +++------ 5 files changed, 52 insertions(+), 63 deletions(-) diff --git a/web/components/flow/canvas-modal/template-flow-modal.tsx b/web/components/flow/canvas-modal/template-flow-modal.tsx index 7c589d06d..3fc5500f0 100644 --- a/web/components/flow/canvas-modal/template-flow-modal.tsx +++ b/web/components/flow/canvas-modal/template-flow-modal.tsx @@ -1,18 +1,13 @@ -import { IFlowData, IFlowUpdateParam } from '@/types/flow'; -import { Button, Form, Input, Modal, Space, message,Table } from 'antd'; -import { useTranslation } from 'react-i18next'; -import { ReactFlowInstance } from 'reactflow'; -import type { TableProps } from 'antd'; - import { getFlowTemplates } from '@/client/api'; - -import { useEffect, useState } from 'react'; - import CanvasWrapper from '@/pages/construct/flow/canvas/index'; +import type { TableProps } from 'antd'; +import { Button, Modal, Space, Table } from 'antd'; +import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; type Props = { - isTemplateFlowModalOpen: boolean; - setIsTemplateFlowModalOpen: (value: boolean) => void; + isFlowTemplateModalOpen: boolean; + setIsFlowTemplateModalOpen: (value: boolean) => void; }; interface DataType { @@ -22,49 +17,57 @@ interface DataType { address: string; tags: string[]; } -export const TemplateFlowModa: React.FC = ({ - isTemplateFlowModalOpen, - setIsTemplateFlowModalOpen, -}) => { + +export const FlowTemplateModal: React.FC = ({ isFlowTemplateModalOpen, setIsFlowTemplateModalOpen }) => { const { t } = useTranslation(); const [dataSource, setDataSource] = useState([]); - const ReferenceTemplate = (record: any,) => { + + const onTemplateImport = (record: DataType) => { if (record?.name) { localStorage.setItem('importFlowData', JSON.stringify(record)); - CanvasWrapper() - setIsTemplateFlowModalOpen(false); + CanvasWrapper(); + setIsFlowTemplateModalOpen(false); } - } + }; + const columns: TableProps['columns'] = [ { - title: t('BringName'), + title: t('Template_Name'), dataIndex: 'name', key: 'name', }, { - title:t('BringAction'), + title: t('Template_Action'), key: 'action', render: (_, record) => ( - - ), }, ]; + useEffect(() => { getFlowTemplates().then(res => { console.log(res); - setDataSource(res?.data?.data?.items) + setDataSource(res?.data?.data?.items); }); - },[]) + }, []); + return ( <> setIsTemplateFlowModalOpen(false)} + title={t('Import_From_Template')} + open={isFlowTemplateModalOpen} + onCancel={() => setIsFlowTemplateModalOpen(false)} cancelButtonProps={{ className: 'hidden' }} okButtonProps={{ className: 'hidden' }} > diff --git a/web/components/flow/node-renderer/upload.tsx b/web/components/flow/node-renderer/upload.tsx index 7f8fa21fa..2085dac09 100644 --- a/web/components/flow/node-renderer/upload.tsx +++ b/web/components/flow/node-renderer/upload.tsx @@ -1,4 +1,5 @@ /* eslint-disable react-hooks/rules-of-hooks */ +import { metadataBatch } from '@/client/api'; import { IFlowNodeParameter } from '@/types/flow'; import { convertKeysToCamelCase } from '@/utils/flow'; import { UploadOutlined } from '@ant-design/icons'; @@ -7,8 +8,6 @@ import { Button, Upload, message } from 'antd'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { metadataBatch } from '@/client/api'; - type Props = { formValuesChange: any; data: IFlowNodeParameter; @@ -18,16 +17,16 @@ export const renderUpload = (params: Props) => { const { t } = useTranslation(); const urlList = useRef([]); const { data, formValuesChange } = params; - const [fileList, setFileList] = useState([]) + const [fileList, setFileList] = useState([]); // 获取上传文件元数据 - useEffect(() => { + useEffect(() => { if (data.value) { let uris: string[] = []; typeof data.value === 'string' ? uris.push(data.value) : (uris = data.value); - const parameter:any = { + const parameter: any = { uris, - } + }; metadataBatch(parameter) .then(res => { const urlList: UploadFile[] = []; diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts index 45e90e21f..b07925e62 100644 --- a/web/locales/en/flow.ts +++ b/web/locales/en/flow.ts @@ -6,15 +6,11 @@ export const FlowEn = { Open_Code_Editor: 'Open Code Editor', Export_Flow_Success: 'Export flow success', Import_Flow_Success: 'Import flow success', - BringTemplate: 'Bring In Template', - BringName: 'Bring Name', - BringAction: 'Bring Action', Import: 'Import', Export: 'Export', Import_Flow: 'Import Flow', Export_Flow: 'Export Flow', Select_File: 'Select File', - LeadTemplate: 'Lead-in template', Save_After_Import: 'Save after import', Export_File_Type: 'File_Type', Export_File_Format: 'File_Format', @@ -25,4 +21,7 @@ export const FlowEn = { Add_Parameter: 'Add Parameter', Higher_Order_Nodes: 'Higher Order', All_Nodes: 'All', + Import_From_Template: 'Import from template', + Template_Name: 'Template Name', + Template_Action: 'Action', }; diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts index 9238b6221..a2c870cd0 100644 --- a/web/locales/zh/flow.ts +++ b/web/locales/zh/flow.ts @@ -6,14 +6,10 @@ export const FlowZn = { Open_Code_Editor: '打开代码编辑器', Export_Flow_Success: '导出工作流成功', Import_Flow_Success: '导入工作流成功', - BringTemplate: '引入模版', - BringAction: '操作', Import: '导入', Export: '导出', - BringName: '模版名称', Import_Flow: '导入工作流', Export_Flow: '导出工作流', - LeadTemplate: '引入模版', Select_File: '选择文件', Save_After_Import: '导入后保存', Export_File_Type: '文件类型', @@ -25,4 +21,7 @@ export const FlowZn = { Add_Parameter: '添加参数', Higher_Order_Nodes: '高阶', All_Nodes: '所有', + Import_Template: '从模版导入', + Template_Name: '模版名称', + Template_Action: '操作', }; diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx index 370456a3e..de333bb77 100644 --- a/web/pages/construct/flow/canvas/index.tsx +++ b/web/pages/construct/flow/canvas/index.tsx @@ -5,9 +5,9 @@ import ButtonEdge from '@/components/flow/button-edge'; import { AddFlowVariableModal, ExportFlowModal, + FlowTemplateModal, ImportFlowModal, SaveFlowModal, - TemplateFlowModa, } from '@/components/flow/canvas-modal'; import CanvasNode from '@/components/flow/canvas-node'; import { IFlowData, IFlowUpdateParam } from '@/types/flow'; @@ -49,7 +49,7 @@ const Canvas: React.FC = () => { const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false); const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false); const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false); - const [isTemplateFlowModalOpen, setIsTemplateFlowModalOpen] = useState(false); + const [isFlowTemplateModalOpen, setIsFlowTemplateModalOpen] = useState(false); if (localStorage.getItem('importFlowData')) { const importFlowData = JSON.parse(localStorage.getItem('importFlowData') || ''); @@ -198,27 +198,15 @@ const Canvas: React.FC = () => { setIsSaveFlowModalOpen(true); } - function onExport() { - setIsExportFlowModalOpen(true); - } - - function onImport() { - setIsImportFlowModalOpen(true); - } - - function onTemplate() { - setIsTemplateFlowModalOpen(true); - } - const getButtonList = () => { const buttonList = [ { title: t('template'), - icon: , + icon: setIsFlowTemplateModalOpen(true)} />, }, { title: t('Import'), - icon: , + icon: setIsImportFlowModalOpen(true)} />, }, { title: t('save'), @@ -229,7 +217,7 @@ const Canvas: React.FC = () => { if (id !== '') { buttonList.unshift({ title: t('Export'), - icon: , + icon: setIsExportFlowModalOpen(true)} />, }); } @@ -304,9 +292,10 @@ const Canvas: React.FC = () => { isImportModalOpen={isImportModalOpen} setIsImportFlowModalOpen={setIsImportFlowModalOpen} /> - {contextHolder}