From fbfb851627ebade58a7c9bf6bc63b0268796115d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=A5=E5=BF=97=E5=8B=87?= Date: Wed, 4 Sep 2024 20:33:52 +0800 Subject: [PATCH 1/4] feat:Eslint formatting --- web/client/api/flow/index.ts | 3 + .../flow/canvas-modal/import-flow-modal.tsx | 1 + web/components/flow/canvas-modal/index.ts | 1 + .../flow/canvas-modal/template-flow-modal.tsx | 85 +++++++++++++++++++ web/components/flow/node-renderer/upload.tsx | 53 +++++++----- web/locales/en/flow.ts | 1 + web/locales/zh/flow.ts | 1 + web/pages/construct/flow/canvas/index.tsx | 33 +++++-- 8 files changed, 150 insertions(+), 28 deletions(-) create mode 100644 web/components/flow/canvas-modal/template-flow-modal.tsx diff --git a/web/client/api/flow/index.ts b/web/client/api/flow/index.ts index b7f6bd381..25bdd98be 100644 --- a/web/client/api/flow/index.ts +++ b/web/client/api/flow/index.ts @@ -71,6 +71,9 @@ export const getFlowTemplateList = () => { export const getFlowTemplateById = (id: string) => { return GET(`/api/v2/serve/awel/flow/templates/${id}`); }; +export const getFlowTemplates = () => { + return GET(`/api/v2/serve/awel/flow/templates`); +}; export const metadataBatch = (data: IUploadFileRequestParams) => { return POST>('/api/v2/serve/file/files/metadata/batch', data); }; \ No newline at end of file diff --git a/web/components/flow/canvas-modal/import-flow-modal.tsx b/web/components/flow/canvas-modal/import-flow-modal.tsx index 7bc54a7e3..0aa6076cd 100644 --- a/web/components/flow/canvas-modal/import-flow-modal.tsx +++ b/web/components/flow/canvas-modal/import-flow-modal.tsx @@ -4,6 +4,7 @@ import { Button, Form, GetProp, Modal, Radio, Space, Upload, UploadFile, UploadP import { useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Edge, Node } from 'reactflow'; + import CanvasWrapper from '@/pages/construct/flow/canvas/index'; type Props = { isImportModalOpen: boolean; diff --git a/web/components/flow/canvas-modal/index.ts b/web/components/flow/canvas-modal/index.ts index a7cb14203..6fcb0a5d1 100644 --- a/web/components/flow/canvas-modal/index.ts +++ b/web/components/flow/canvas-modal/index.ts @@ -2,3 +2,4 @@ export * from './add-flow-variable-modal'; export * from './export-flow-modal'; export * from './import-flow-modal'; export * from './save-flow-modal'; +export * from './template-flow-modal'; diff --git a/web/components/flow/canvas-modal/template-flow-modal.tsx b/web/components/flow/canvas-modal/template-flow-modal.tsx new file mode 100644 index 000000000..bbf963817 --- /dev/null +++ b/web/components/flow/canvas-modal/template-flow-modal.tsx @@ -0,0 +1,85 @@ +import { IFlowData, IFlowUpdateParam } from '@/types/flow'; +import { Button, Form, Input, Modal, Space, message } from 'antd'; +import { useTranslation } from 'react-i18next'; +import { ReactFlowInstance } from 'reactflow'; + +import { getFlowTemplates } from '@/client/api'; + +import { useEffect, useState } from 'react'; + +type Props = { + reactFlow: ReactFlowInstance; + flowInfo?: IFlowUpdateParam; + isTemplateFlowModalOpen: boolean; + setisTemplateFlowModalOpen: (value: boolean) => void; +}; + +export const TemplateFlowModa: React.FC = ({ + reactFlow, + flowInfo, + isTemplateFlowModalOpen, + setisTemplateFlowModalOpen, +}) => { + const { t } = useTranslation(); + const [form] = Form.useForm(); + const [messageApi, contextHolder] = message.useMessage(); + const [loading, setLoading] = useState(false); + const [templateList, setTemplateList] = useState([]); + + useEffect(() => { + getFlowTemplates().then(res => { + console.log(res); + + debugger + }); + }) + + + const onFlowExport = async (values: any) => { + + + setisTemplateFlowModalOpen(false); + }; + + return ( + <> + setisTemplateFlowModalOpen(false)} + cancelButtonProps={{ className: 'hidden' }} + okButtonProps={{ className: 'hidden' }} + > +
+ + + + + + + + +
+ + + {contextHolder} + + ); +}; diff --git a/web/components/flow/node-renderer/upload.tsx b/web/components/flow/node-renderer/upload.tsx index dadd38207..7f8fa21fa 100644 --- a/web/components/flow/node-renderer/upload.tsx +++ b/web/components/flow/node-renderer/upload.tsx @@ -2,10 +2,11 @@ import { IFlowNodeParameter } from '@/types/flow'; import { convertKeysToCamelCase } from '@/utils/flow'; import { UploadOutlined } from '@ant-design/icons'; -import type { UploadProps,UploadFile } from 'antd'; +import type { UploadFile, UploadProps } from 'antd'; import { Button, Upload, message } from 'antd'; import { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; + import { metadataBatch } from '@/client/api'; type Props = { @@ -22,26 +23,28 @@ export const renderUpload = (params: Props) => { // 获取上传文件元数据 useEffect(() => { if (data.value) { - let uris:string[] = [] - typeof(data.value) === 'string'? uris.push(data.value):uris = data.value - let parameter:any = { - uris + let uris: string[] = []; + typeof data.value === 'string' ? uris.push(data.value) : (uris = data.value); + const parameter:any = { + uris, } - metadataBatch(parameter).then((res)=>{ - let urlList:UploadFile[] = [] - for (let index = 0; index < res.data.data.length; index++) { - const element = res.data.data[index]; - urlList.push({ + metadataBatch(parameter) + .then(res => { + const urlList: UploadFile[] = []; + for (let index = 0; index < res.data.data.length; index++) { + const element = res.data.data[index]; + urlList.push({ uid: element.file_id, - name:element.file_name, + name: element.file_name, status: 'done', url: element.uri, - }) - } - setFileList(urlList) - }).catch((error)=>{ - console.log(error) - }) + }); + } + setFileList(urlList); + }) + .catch(error => { + console.log(error); + }); } }, []); @@ -102,11 +105,17 @@ export const renderUpload = (params: Props) => { return (
- - - + + +
); }; diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts index 27b388e74..54eb8df12 100644 --- a/web/locales/en/flow.ts +++ b/web/locales/en/flow.ts @@ -11,6 +11,7 @@ export const FlowEn = { 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', diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts index f846059c4..b0454bae0 100644 --- a/web/locales/zh/flow.ts +++ b/web/locales/zh/flow.ts @@ -10,6 +10,7 @@ export const FlowZn = { Export: '导出', Import_Flow: '导入工作流', Export_Flow: '导出工作流', + LeadTemplate: '引入模版', Select_File: '选择文件', Save_After_Import: '导入后保存', Export_File_Type: '文件类型', diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx index b3d0889a5..1c988686d 100644 --- a/web/pages/construct/flow/canvas/index.tsx +++ b/web/pages/construct/flow/canvas/index.tsx @@ -2,11 +2,17 @@ import { apiInterceptors, getFlowById } from '@/client/api'; import MuiLoading from '@/components/common/loading'; import AddNodesSider from '@/components/flow/add-nodes-sider'; import ButtonEdge from '@/components/flow/button-edge'; -import { AddFlowVariableModal, ExportFlowModal, ImportFlowModal, SaveFlowModal } from '@/components/flow/canvas-modal'; +import { + AddFlowVariableModal, + ExportFlowModal, + ImportFlowModal, + SaveFlowModal, + TemplateFlowModa, +} from '@/components/flow/canvas-modal'; import CanvasNode from '@/components/flow/canvas-node'; import { IFlowData, IFlowUpdateParam } from '@/types/flow'; import { checkFlowDataRequied, getUniqueNodeId, mapUnderlineToHump } from '@/utils/flow'; -import { ExportOutlined, FrownOutlined, ImportOutlined, SaveOutlined } from '@ant-design/icons'; +import { ExportOutlined, FrownOutlined, ImportOutlined, FileAddOutlined,SaveOutlined } from '@ant-design/icons'; import { Divider, Space, Tooltip, message, notification } from 'antd'; import { useSearchParams } from 'next/navigation'; import React, { DragEvent, useCallback, useEffect, useRef, useState } from 'react'; @@ -43,10 +49,11 @@ const Canvas: React.FC = () => { const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false); const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false); const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false); - - if (localStorage.getItem('importFlowData') ) { - const importFlowData = JSON.parse(localStorage.getItem('importFlowData') ); - localStorage.removeItem('importFlowData') + const [isTemplateFlowModalOpen, setIsTemplateFlowModalOpen] = useState(false); + + if (localStorage.getItem('importFlowData')) { + const importFlowData = JSON.parse(localStorage.getItem('importFlowData')); + localStorage.removeItem('importFlowData'); setLoading(true); const flowData = mapUnderlineToHump(importFlowData.flow_data); setFlowInfo(importFlowData); @@ -198,8 +205,16 @@ const Canvas: React.FC = () => { setIsImportFlowModalOpen(true); } + function onTemplate() { + setIsTemplateFlowModalOpen(true); + } + const getButtonList = () => { const buttonList = [ + { + title: t('template'), + icon: , + }, { title: t('Import'), icon: , @@ -288,6 +303,12 @@ const Canvas: React.FC = () => { isImportModalOpen={isImportModalOpen} setIsImportFlowModalOpen={setIsImportFlowModalOpen} /> + {contextHolder} From 70dc475aa4eb14cda34bea92a3b2e7b6935c4aa6 Mon Sep 17 00:00:00 2001 From: yanzhiyong <932374019@qq.com> Date: Thu, 5 Sep 2024 00:47:08 +0800 Subject: [PATCH 2/4] feat: Bring In Template --- .../flow/canvas-modal/import-flow-modal.tsx | 2 +- .../flow/canvas-modal/template-flow-modal.tsx | 96 +++++++++---------- web/locales/en/flow.ts | 1 + web/locales/zh/flow.ts | 1 + web/pages/construct/flow/canvas/index.tsx | 4 +- 5 files changed, 47 insertions(+), 57 deletions(-) diff --git a/web/components/flow/canvas-modal/import-flow-modal.tsx b/web/components/flow/canvas-modal/import-flow-modal.tsx index 0aa6076cd..bb6e78f18 100644 --- a/web/components/flow/canvas-modal/import-flow-modal.tsx +++ b/web/components/flow/canvas-modal/import-flow-modal.tsx @@ -40,7 +40,7 @@ export const ImportFlowModal: React.FC = ({ isImportModalOpen, setIsImpor if (res?.success) { messageApi.success(t('Import_Flow_Success')); localStorage.setItem('importFlowData', JSON.stringify(res?.data)); - CanvasWrapper(res?.data) + CanvasWrapper() } else if (res?.err_msg) { messageApi.error(res?.err_msg); diff --git a/web/components/flow/canvas-modal/template-flow-modal.tsx b/web/components/flow/canvas-modal/template-flow-modal.tsx index bbf963817..4fafd0f1a 100644 --- a/web/components/flow/canvas-modal/template-flow-modal.tsx +++ b/web/components/flow/canvas-modal/template-flow-modal.tsx @@ -1,85 +1,75 @@ import { IFlowData, IFlowUpdateParam } from '@/types/flow'; -import { Button, Form, Input, Modal, Space, message } from 'antd'; +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'; + type Props = { - reactFlow: ReactFlowInstance; - flowInfo?: IFlowUpdateParam; isTemplateFlowModalOpen: boolean; - setisTemplateFlowModalOpen: (value: boolean) => void; + setIsTemplateFlowModalOpen: (value: boolean) => void; }; +interface DataType { + key: string; + name: string; + age: number; + address: string; + tags: string[]; +} export const TemplateFlowModa: React.FC = ({ - reactFlow, - flowInfo, isTemplateFlowModalOpen, - setisTemplateFlowModalOpen, + setIsTemplateFlowModalOpen, }) => { const { t } = useTranslation(); - const [form] = Form.useForm(); - const [messageApi, contextHolder] = message.useMessage(); - const [loading, setLoading] = useState(false); - const [templateList, setTemplateList] = useState([]); - + const [dataSource, setDataSource] = useState([]); + const ReferenceTemplate = (record: any,) => { + if (record?.name) { + localStorage.setItem('importFlowData', JSON.stringify(record)); + CanvasWrapper() + setIsTemplateFlowModalOpen(false); + } + } + const columns: TableProps['columns'] = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + }, + { + title: 'Action', + key: 'action', + render: (_, record) => ( + + + + ), + }, + ]; useEffect(() => { getFlowTemplates().then(res => { console.log(res); - - debugger + setDataSource(res?.data?.data?.items) }); - }) - - - const onFlowExport = async (values: any) => { - - - setisTemplateFlowModalOpen(false); - }; - + },[]) return ( <> setisTemplateFlowModalOpen(false)} + onCancel={() => setIsTemplateFlowModalOpen(false)} cancelButtonProps={{ className: 'hidden' }} okButtonProps={{ className: 'hidden' }} > -
- - - - - - - - -
+ ; - - {contextHolder} ); }; diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts index 54eb8df12..205c16ae2 100644 --- a/web/locales/en/flow.ts +++ b/web/locales/en/flow.ts @@ -6,6 +6,7 @@ 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', Import: 'Import', Export: 'Export', Import_Flow: 'Import Flow', diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts index b0454bae0..0f15375e3 100644 --- a/web/locales/zh/flow.ts +++ b/web/locales/zh/flow.ts @@ -6,6 +6,7 @@ export const FlowZn = { Open_Code_Editor: '打开代码编辑器', Export_Flow_Success: '导出工作流成功', Import_Flow_Success: '导入工作流成功', + BringTemplate: '引入模版', Import: '导入', Export: '导出', Import_Flow: '导入工作流', diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx index 1c988686d..0cd5b285d 100644 --- a/web/pages/construct/flow/canvas/index.tsx +++ b/web/pages/construct/flow/canvas/index.tsx @@ -304,10 +304,8 @@ const Canvas: React.FC = () => { setIsImportFlowModalOpen={setIsImportFlowModalOpen} /> {contextHolder} From 3b6a5bd602f437478ac5a941dba2cc59981fcadc Mon Sep 17 00:00:00 2001 From: yanzhiyong <932374019@qq.com> Date: Thu, 5 Sep 2024 00:52:30 +0800 Subject: [PATCH 3/4] feat: lang setting --- web/components/flow/canvas-modal/template-flow-modal.tsx | 4 ++-- web/locales/en/flow.ts | 2 ++ web/locales/zh/flow.ts | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/web/components/flow/canvas-modal/template-flow-modal.tsx b/web/components/flow/canvas-modal/template-flow-modal.tsx index 4fafd0f1a..7c589d06d 100644 --- a/web/components/flow/canvas-modal/template-flow-modal.tsx +++ b/web/components/flow/canvas-modal/template-flow-modal.tsx @@ -37,12 +37,12 @@ export const TemplateFlowModa: React.FC = ({ } const columns: TableProps['columns'] = [ { - title: 'Name', + title: t('BringName'), dataIndex: 'name', key: 'name', }, { - title: 'Action', + title:t('BringAction'), key: 'action', render: (_, record) => ( diff --git a/web/locales/en/flow.ts b/web/locales/en/flow.ts index 205c16ae2..b24879616 100644 --- a/web/locales/en/flow.ts +++ b/web/locales/en/flow.ts @@ -7,6 +7,8 @@ export const FlowEn = { 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', diff --git a/web/locales/zh/flow.ts b/web/locales/zh/flow.ts index 0f15375e3..f6eb22869 100644 --- a/web/locales/zh/flow.ts +++ b/web/locales/zh/flow.ts @@ -7,8 +7,10 @@ export const FlowZn = { Export_Flow_Success: '导出工作流成功', Import_Flow_Success: '导入工作流成功', BringTemplate: '引入模版', + BringAction: '操作', Import: '导入', Export: '导出', + BringName: '模版名称', Import_Flow: '导入工作流', Export_Flow: '导出工作流', LeadTemplate: '引入模版', 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 4/4] 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}