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] 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}