feat:Eslint formatting

web/client/api/flow/index.ts

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

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;

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

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<any, any>;
+  flowInfo?: IFlowUpdateParam;
+  isTemplateFlowModalOpen: boolean;
+  setisTemplateFlowModalOpen: (value: boolean) => void;
+};
+
+export const TemplateFlowModa: React.FC<Props> = ({
+  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 (
+    <>
+      <Modal
+        title={t('LeadTemplate')}
+        open={isTemplateFlowModalOpen}
+        onCancel={() => setisTemplateFlowModalOpen(false)}
+        cancelButtonProps={{ className: 'hidden' }}
+        okButtonProps={{ className: 'hidden' }}
+      >
+        <Form
+          form={form}
+          className='mt-6'
+          labelCol={{ span: 6 }}
+          wrapperCol={{ span: 16 }}
+          onFinish={onFlowExport}
+          initialValues={{
+            export_type: 'json',
+            format: 'file',
+            uid: flowInfo?.uid,
+          }}
+        >
+          <Form.Item hidden name='uid'>
+            <Input />
+          </Form.Item>
+
+          <Form.Item wrapperCol={{ offset: 14, span: 8 }}>
+            <Space>
+              <Button htmlType='button' onClick={() => setisTemplateFlowModalOpen(false)}>
+                {t('cancel')}
+              </Button>
+              <Button type='primary' htmlType='submit'>
+                {t('verify')}
+              </Button>
+            </Space>
+          </Form.Item>
+        </Form>
+      </Modal>
+
+      {contextHolder}
+    </>
+  );
+};

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 (
     <div className='p-2 text-sm text-center'>
-        <Upload  onRemove={handleFileRemove} {...props} {...attr} multiple={data.is_list?true:false} accept={uploadType}>
-          <Button loading={uploading} icon={<UploadOutlined />}>
-            {t('Upload_Data')}
-          </Button>
-        </Upload>
+      <Upload
+        onRemove={handleFileRemove}
+        {...props}
+        {...attr}
+        multiple={data.is_list ? true : false}
+        accept={uploadType}
+      >
+        <Button loading={uploading} icon={<UploadOutlined />}>
+          {t('Upload_Data')}
+        </Button>
+      </Upload>
     </div>
   );
 };

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',

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: '文件类型',

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: <FileAddOutlined className='block text-xl' onClick={onTemplate} />,
+      },
       {
         title: t('Import'),
         icon: <ImportOutlined className='block text-xl' onClick={onImport} />,
@@ -288,6 +303,12 @@ const Canvas: React.FC = () => {
         isImportModalOpen={isImportModalOpen}
         setIsImportFlowModalOpen={setIsImportFlowModalOpen}
       />
+      <TemplateFlowModa
+        setNodes={setNodes}
+        setEdges={setEdges}
+        isTemplateFlowModalOpen={isTemplateFlowModalOpen}
+        setIsImportFlowModalOpen={setIsTemplateFlowModalOpen}
+      />
 
       {contextHolder}
     </>