feat: upload metadata 、ui size settings 276 320 530 、import flow

web/client/api/flow/index.ts

@@ -71,3 +71,6 @@ export const getFlowTemplateList = () => {
 export const getFlowTemplateById = (id: string) => {
   return GET<null, any>(`/api/v2/serve/awel/flow/templates/${id}`);
 };
+export const metadataBatch = (data: IUploadFileRequestParams) => {
+  return POST<IUploadFileRequestParams, Array<IUploadFileResponse>>('/api/v2/serve/file/files/metadata/batch', data);
+};

web/components/flow/canvas-node.tsx

@@ -193,8 +193,11 @@ const CanvasNode: React.FC<CanvasNodeProps> = ({ data }) => {
     >
       <div
         className={classNames(
-          'w-80 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',
+          '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',
             'border-blue-500': node.selected || isHovered,
             'border-stone-400 dark:border-white': !node.selected && !isHovered,
             'border-dashed': flowType !== 'operator',

web/components/flow/node-param-handler.tsx

@@ -131,6 +131,7 @@ const NodeParamHandler: React.FC<NodeParamHandlerProps> = ({ formValuesChange, n
     if (ui_type === 'slider' && data.is_list) {
       defaultValue = [0, 1];
     }
+    
     return (
       <Form.Item
         className='mb-2'

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 } from 'antd';
+import type { UploadProps,UploadFile } from 'antd';
 import { Button, Upload, message } from 'antd';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { metadataBatch } from '@/client/api';
 
 type Props = {
   formValuesChange: any;
@@ -16,7 +17,36 @@ export const renderUpload = (params: Props) => {
   const { t } = useTranslation();
   const urlList = useRef<string[]>([]);
   const { data, formValuesChange } = params;
-console.log(data);
+  const [fileList, setFileList] = useState<UploadFile[]>([])
+
+  // 获取上传文件元数据
+  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 (
     <div className='p-2 text-sm text-center'>
       {data.is_list ? (
-        <Upload onRemove={handleFileRemove} {...props} {...attr} multiple={true} accept={uploadType}>
+        <Upload fileList={fileList} onRemove={handleFileRemove} {...props} {...attr} multiple={true} accept={uploadType}>
           <Button loading={uploading} icon={<UploadOutlined />}>
             {t('Upload_Data')}
           </Button>
         </Upload>
       ) : (
-        <Upload onRemove={handleFileRemove} {...props} {...attr} multiple={false} accept={uploadType}>
+        <Upload fileList={fileList} onRemove={handleFileRemove} {...props} {...attr} multiple={false} accept={uploadType}>
           <Button loading={uploading} icon={<UploadOutlined />}>
             {t('Upload_Data')}
           </Button>

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 (
     <ReactFlowProvider>
       <Canvas />

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