From 4edc64a4c936f23059c4941008ff416bb57c7178 Mon Sep 17 00:00:00 2001 From: yanzhiyong <932374019@qq.com> Date: Tue, 3 Sep 2024 00:58:53 +0800 Subject: [PATCH 1/8] feat: import update canvas flow --- web/components/flow/canvas-modal/import-flow-modal.tsx | 7 +++++-- web/components/flow/canvas-node.tsx | 4 ---- web/components/flow/node-renderer/upload.tsx | 1 + 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/web/components/flow/canvas-modal/import-flow-modal.tsx b/web/components/flow/canvas-modal/import-flow-modal.tsx index fbf7e87df..8832c7945 100644 --- a/web/components/flow/canvas-modal/import-flow-modal.tsx +++ b/web/components/flow/canvas-modal/import-flow-modal.tsx @@ -4,7 +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; setNodes: React.Dispatch[]>>; @@ -37,9 +37,12 @@ export const ImportFlowModal: React.FC = ({ isImportModalOpen, setIsImpor const [, , res] = await apiInterceptors(importFlow(formData)); if (res?.success) { - messageApi.success(t('Export_Flow_Success')); + messageApi.success(t('Import_Flow_Success')); + localStorage.setItem('importFlowData', JSON.stringify(res?.data)); + CanvasWrapper(res?.data) } else if (res?.err_msg) { messageApi.error(res?.err_msg); + } setIsImportFlowModalOpen(false); }; diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx index 37449337d..568c51ebf 100644 --- a/web/components/flow/canvas-node.tsx +++ b/web/components/flow/canvas-node.tsx @@ -19,7 +19,6 @@ type CanvasNodeProps = { function TypeLabel({ label }: { label: string }) { return
{label}
; } -const forceTypeList = ['file', 'multiple_files', 'time']; const CanvasNode: React.FC = ({ data }) => { const node = data; @@ -128,9 +127,6 @@ const CanvasNode: React.FC = ({ data }) => { function onParameterValuesChange(changedValues: any, allValues: any) { const [changedKey, changedVal] = Object.entries(changedValues)[0]; - if (!allValues?.force && forceTypeList.includes(changedKey)) { - return; - } updateCurrentNodeValue(changedKey, changedVal); if (changedVal) { updateDependsNodeValue(changedKey, changedVal); diff --git a/web/components/flow/node-renderer/upload.tsx b/web/components/flow/node-renderer/upload.tsx index 93232abdc..83cfa718e 100644 --- a/web/components/flow/node-renderer/upload.tsx +++ b/web/components/flow/node-renderer/upload.tsx @@ -16,6 +16,7 @@ export const renderUpload = (params: Props) => { const { t } = useTranslation(); const urlList = useRef([]); const { data, formValuesChange } = params; +console.log(data); const attr = convertKeysToCamelCase(data.ui?.attr || {}); const [uploading, setUploading] = useState(false); From bc87dec01c63bae0f787d48136e9d7ff18964cc8 Mon Sep 17 00:00:00 2001 From: yanzhiyong <932374019@qq.com> Date: Wed, 4 Sep 2024 01:05:34 +0800 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20upload=20metadata=20=E3=80=81ui=20s?= =?UTF-8?q?ize=20settings=20276=20320=20530=20=E3=80=81import=20flow?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/client/api/flow/index.ts | 3 ++ web/components/flow/canvas-node.tsx | 5 ++- web/components/flow/node-param-handler.tsx | 1 + web/components/flow/node-renderer/upload.tsx | 40 +++++++++++++++++--- web/pages/construct/flow/canvas/index.tsx | 21 ++++++++-- web/styles/globals.css | 7 ++++ 6 files changed, 68 insertions(+), 9 deletions(-) diff --git a/web/client/api/flow/index.ts b/web/client/api/flow/index.ts index 7f32ac1d9..d32ec4b4d 100644 --- a/web/client/api/flow/index.ts +++ b/web/client/api/flow/index.ts @@ -71,3 +71,6 @@ export const getFlowTemplateList = () => { export const getFlowTemplateById = (id: string) => { return GET(`/api/v2/serve/awel/flow/templates/${id}`); }; +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-node.tsx b/web/components/flow/canvas-node.tsx index 568c51ebf..cd9eaf578 100644 --- a/web/components/flow/canvas-node.tsx +++ b/web/components/flow/canvas-node.tsx @@ -193,8 +193,11 @@ const CanvasNode: React.FC = ({ data }) => { >
= ({ formValuesChange, n if (ui_type === 'slider' && data.is_list) { defaultValue = [0, 1]; } + return ( { const { t } = useTranslation(); const urlList = useRef([]); const { data, formValuesChange } = params; -console.log(data); + const [fileList, setFileList] = useState([]) + + // 获取上传文件元数据 + useEffect(() => { + if (data.value) { + let uris:string[] = [] + typeof(data.value) === 'string'? uris.push(data.value):uris = data.value + let 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({ + uid: element.file_id, + name:element.file_name, + status: 'done', + url: element.uri, + }) + } + setFileList(urlList) + }).catch((res)=>{ + debugger + }) + } + + + + }, []); const attr = convertKeysToCamelCase(data.ui?.attr || {}); const [uploading, setUploading] = useState(false); @@ -75,13 +105,13 @@ console.log(data); return (
{data.is_list ? ( - + ) : ( - + diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx index 5957074ea..438a3ffb5 100644 --- a/web/pages/construct/flow/canvas/index.tsx +++ b/web/pages/construct/flow/canvas/index.tsx @@ -28,8 +28,9 @@ import 'reactflow/dist/style.css'; const nodeTypes = { customNode: CanvasNode }; const edgeTypes = { buttonedge: ButtonEdge }; +let importData :any= null +const Canvas: React.FC = (props:any) => { -const Canvas: React.FC = () => { const { t } = useTranslation(); const [messageApi, contextHolder] = message.useMessage(); @@ -45,7 +46,17 @@ 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') + setLoading(true); + const flowData = mapUnderlineToHump(importFlowData.flow_data); + setFlowInfo(importFlowData); + setNodes(flowData.nodes); + setEdges(flowData.edges); + setLoading(false); + } async function getFlowData() { setLoading(true); const [_, data] = await apiInterceptors(getFlowById(id)); @@ -286,7 +297,11 @@ const Canvas: React.FC = () => { ); }; -export default function CanvasWrapper() { +export default function CanvasWrapper(data:any) { + + importData = data + console.log(importData); + return ( diff --git a/web/styles/globals.css b/web/styles/globals.css index 524fb68f5..dc3fa7947 100644 --- a/web/styles/globals.css +++ b/web/styles/globals.css @@ -122,4 +122,11 @@ table { .rc-md-editor .editor-container>.section { border-right: none !important; +} + +.w-530{ + width: 530px; +} +.w-256{ + width:256px; } \ No newline at end of file From 37aed537ce785aa143e4e77aa188f2d120d7155a 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 17:20:41 +0800 Subject: [PATCH 3/8] feat:Optimized code --- web/components/flow/canvas-node.tsx | 6 +++--- web/components/flow/node-renderer/upload.tsx | 14 +++----------- web/pages/construct/flow/canvas/index.tsx | 9 ++------- web/utils/ctx-axios.ts | 6 +++--- 4 files changed, 11 insertions(+), 24 deletions(-) diff --git a/web/components/flow/canvas-node.tsx b/web/components/flow/canvas-node.tsx index cd9eaf578..c1c0d0abb 100644 --- a/web/components/flow/canvas-node.tsx +++ b/web/components/flow/canvas-node.tsx @@ -195,9 +195,9 @@ const CanvasNode: React.FC = ({ data }) => { className={classNames( 'h-auto rounded-xl shadow-md px-2 py-4 border bg-white dark:bg-zinc-800 cursor-grab flex flex-col space-y-2 text-sm', { - 'w-80':node.tags.ui_size === 'middle' || !node.tags.ui_size, - 'w-256':node.tags.ui_size === 'small', - 'w-530':node.tags.ui_size === 'large', + 'w-80':node?.tags?.ui_size === 'middle' || !node?.tags?.ui_size, + 'w-[256px]':node?.tags?.ui_size === 'small', + 'w-[530px]':node?.tags?.ui_size === 'large', 'border-blue-500': node.selected || isHovered, 'border-stone-400 dark:border-white': !node.selected && !isHovered, 'border-dashed': flowType !== 'operator', diff --git a/web/components/flow/node-renderer/upload.tsx b/web/components/flow/node-renderer/upload.tsx index 49dc76aa5..d516338c7 100644 --- a/web/components/flow/node-renderer/upload.tsx +++ b/web/components/flow/node-renderer/upload.tsx @@ -39,8 +39,8 @@ export const renderUpload = (params: Props) => { }) } setFileList(urlList) - }).catch((res)=>{ - debugger + }).catch((error)=>{ + console.log(error) }) } @@ -104,19 +104,11 @@ export const renderUpload = (params: Props) => { return (
- {data.is_list ? ( - + - ) : ( - - - - )}
); }; diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx index 438a3ffb5..67ad93d3b 100644 --- a/web/pages/construct/flow/canvas/index.tsx +++ b/web/pages/construct/flow/canvas/index.tsx @@ -28,8 +28,7 @@ import 'reactflow/dist/style.css'; const nodeTypes = { customNode: CanvasNode }; const edgeTypes = { buttonedge: ButtonEdge }; -let importData :any= null -const Canvas: React.FC = (props:any) => { +const Canvas: React.FC = () => { const { t } = useTranslation(); const [messageApi, contextHolder] = message.useMessage(); @@ -297,11 +296,7 @@ const Canvas: React.FC = (props:any) => { ); }; -export default function CanvasWrapper(data:any) { - - importData = data - console.log(importData); - +export default function CanvasWrapper() { return ( diff --git a/web/utils/ctx-axios.ts b/web/utils/ctx-axios.ts index 94c01767c..f8b1ae696 100644 --- a/web/utils/ctx-axios.ts +++ b/web/utils/ctx-axios.ts @@ -1,14 +1,14 @@ import axios from 'axios'; const api = axios.create({ - baseURL: process.env.API_BASE_URL, + baseURL: 'http://127.0.0.1:5670' }); api.defaults.timeout = 10000; api.interceptors.response.use( response => response.data, - err => Promise.reject(err), + err => Promise.reject(err) ); -export default api; +export default api; \ No newline at end of file From d96e1ec75e543c9540895b746c8d6498d57b9d14 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 17:45:51 +0800 Subject: [PATCH 4/8] fix: upload loading --- web/components/flow/node-renderer/upload.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web/components/flow/node-renderer/upload.tsx b/web/components/flow/node-renderer/upload.tsx index d516338c7..dadd38207 100644 --- a/web/components/flow/node-renderer/upload.tsx +++ b/web/components/flow/node-renderer/upload.tsx @@ -43,9 +43,6 @@ export const renderUpload = (params: Props) => { console.log(error) }) } - - - }, []); const attr = convertKeysToCamelCase(data.ui?.attr || {}); @@ -82,6 +79,7 @@ export const renderUpload = (params: Props) => { headers: { authorization: 'authorization-text', }, + defaultFileList: fileList, onChange(info) { setUploading(true); if (info.file.status !== 'uploading') { @@ -104,7 +102,7 @@ export const renderUpload = (params: Props) => { return (
- + From 59b0e687bad7a90c0783237b409e1dbdebd00b05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E9=94=8B?= <932374019@qq.com> Date: Wed, 4 Sep 2024 18:19:20 +0800 Subject: [PATCH 5/8] Update globals.css --- web/styles/globals.css | 7 ------- 1 file changed, 7 deletions(-) diff --git a/web/styles/globals.css b/web/styles/globals.css index dc3fa7947..1d49ea271 100644 --- a/web/styles/globals.css +++ b/web/styles/globals.css @@ -123,10 +123,3 @@ table { .rc-md-editor .editor-container>.section { border-right: none !important; } - -.w-530{ - width: 530px; -} -.w-256{ - width:256px; -} \ No newline at end of file From 75788f1727dfc9497170601fd0c910ec4191fca4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E9=94=8B?= <932374019@qq.com> Date: Wed, 4 Sep 2024 18:21:33 +0800 Subject: [PATCH 6/8] Update ctx-axios.ts --- web/utils/ctx-axios.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/utils/ctx-axios.ts b/web/utils/ctx-axios.ts index f8b1ae696..18db8413d 100644 --- a/web/utils/ctx-axios.ts +++ b/web/utils/ctx-axios.ts @@ -1,7 +1,7 @@ import axios from 'axios'; const api = axios.create({ - baseURL: 'http://127.0.0.1:5670' + baseURL: process.env.API_BASE_URL }); api.defaults.timeout = 10000; @@ -11,4 +11,4 @@ api.interceptors.response.use( err => Promise.reject(err) ); -export default api; \ No newline at end of file +export default api; From 9b9030cb7c623501bc5a701e0aeb4aae32a13708 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E9=94=8B?= <932374019@qq.com> Date: Wed, 4 Sep 2024 18:25:36 +0800 Subject: [PATCH 7/8] Delete web/utils/ctx-axios.ts --- web/utils/ctx-axios.ts | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 web/utils/ctx-axios.ts diff --git a/web/utils/ctx-axios.ts b/web/utils/ctx-axios.ts deleted file mode 100644 index 18db8413d..000000000 --- a/web/utils/ctx-axios.ts +++ /dev/null @@ -1,14 +0,0 @@ -import axios from 'axios'; - -const api = axios.create({ - baseURL: process.env.API_BASE_URL -}); - -api.defaults.timeout = 10000; - -api.interceptors.response.use( - response => response.data, - err => Promise.reject(err) -); - -export default api; From ecc9c420410c723f1ac078d6b6fb9f528f6c97e9 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 18:30:59 +0800 Subject: [PATCH 8/8] fix: axios file --- web/utils/ctx-axios.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 web/utils/ctx-axios.ts diff --git a/web/utils/ctx-axios.ts b/web/utils/ctx-axios.ts new file mode 100644 index 000000000..94c01767c --- /dev/null +++ b/web/utils/ctx-axios.ts @@ -0,0 +1,14 @@ +import axios from 'axios'; + +const api = axios.create({ + baseURL: process.env.API_BASE_URL, +}); + +api.defaults.timeout = 10000; + +api.interceptors.response.use( + response => response.data, + err => Promise.reject(err), +); + +export default api;