feat: Bring In Template

web/components/flow/canvas-modal/import-flow-modal.tsx

@@ -40,7 +40,7 @@ export const ImportFlowModal: React.FC<Props> = ({ 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);
     

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<any, any>;
-  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<Props> = ({
-  reactFlow,
-  flowInfo,
   isTemplateFlowModalOpen,
-  setisTemplateFlowModalOpen,
+  setIsTemplateFlowModalOpen,
 }) => {
   const { t } = useTranslation();
-  const [form] = Form.useForm();
+  const [dataSource, setDataSource] = useState([]);
-  const [messageApi, contextHolder] = message.useMessage();
+  const ReferenceTemplate = (record: any,) => {
-  const [loading, setLoading] = useState(false);
+    if (record?.name) {
-  const [templateList, setTemplateList] = useState([]);
+      localStorage.setItem('importFlowData', JSON.stringify(record));
-
+      CanvasWrapper()
+      setIsTemplateFlowModalOpen(false);
+    }
+  }
+  const columns: TableProps<DataType>['columns'] = [
+    {
+      title: 'Name',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: 'Action',
+      key: 'action',
+      render: (_, record) => (
+        <Space  size="middle">
+          <Button type="link" onClick={()=>{ReferenceTemplate(record)}} block>
+          {t('BringTemplate')}  
+          </Button>
+        </Space>
+      ),
+    },
+  ];
   useEffect(() => {
     getFlowTemplates().then(res => {
       console.log(res);
-      
+      setDataSource(res?.data?.data?.items)
-      debugger
     });
-  })
+  },[])
-
-
-  const onFlowExport = async (values: any) => {
-
-
-    setisTemplateFlowModalOpen(false);
-  };
-
   return (
     <>
       <Modal
         title={t('LeadTemplate')}
         open={isTemplateFlowModalOpen}
-        onCancel={() => setisTemplateFlowModalOpen(false)}
+        onCancel={() => setIsTemplateFlowModalOpen(false)}
         cancelButtonProps={{ className: 'hidden' }}
         okButtonProps={{ className: 'hidden' }}
       >
-        <Form
+        <Table dataSource={dataSource} columns={columns} />;
-          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/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',

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: '导入工作流',

web/pages/construct/flow/canvas/index.tsx

@@ -304,10 +304,8 @@ const Canvas: React.FC = () => {
         setIsImportFlowModalOpen={setIsImportFlowModalOpen}
       />
       <TemplateFlowModa
-        setNodes={setNodes}
-        setEdges={setEdges}
         isTemplateFlowModalOpen={isTemplateFlowModalOpen}
-        setIsImportFlowModalOpen={setIsTemplateFlowModalOpen}
+        setIsTemplateFlowModalOpen={setIsTemplateFlowModalOpen}
       />
 
       {contextHolder}