refactor: Update FlowTemplateModal component to use correct prop names

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

@@ -1,18 +1,13 @@
-import { IFlowData, IFlowUpdateParam } from '@/types/flow';
-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';
+import type { TableProps } from 'antd';
+import { Button, Modal, Space, Table } from 'antd';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 
 type Props = {
-  isTemplateFlowModalOpen: boolean;
+  isFlowTemplateModalOpen: boolean;
-  setIsTemplateFlowModalOpen: (value: boolean) => void;
+  setIsFlowTemplateModalOpen: (value: boolean) => void;
 };
 
 interface DataType {
@@ -22,49 +17,57 @@ interface DataType {
   address: string;
   tags: string[];
 }
-export const TemplateFlowModa: React.FC<Props> = ({
+
-  isTemplateFlowModalOpen,
+export const FlowTemplateModal: React.FC<Props> = ({ isFlowTemplateModalOpen, setIsFlowTemplateModalOpen }) => {
-  setIsTemplateFlowModalOpen,
-}) => {
   const { t } = useTranslation();
   const [dataSource, setDataSource] = useState([]);
-  const ReferenceTemplate = (record: any,) => {
+
+  const onTemplateImport = (record: DataType) => {
     if (record?.name) {
       localStorage.setItem('importFlowData', JSON.stringify(record));
-      CanvasWrapper()
+      CanvasWrapper();
-      setIsTemplateFlowModalOpen(false);
+      setIsFlowTemplateModalOpen(false);
-    }
     }
+  };
+
   const columns: TableProps<DataType>['columns'] = [
     {
-      title: t('BringName'),
+      title: t('Template_Name'),
       dataIndex: 'name',
       key: 'name',
     },
     {
-      title:t('BringAction'),
+      title: t('Template_Action'),
       key: 'action',
       render: (_, record) => (
-        <Space  size="middle">
+        <Space size='middle'>
-          <Button type="link" onClick={()=>{ReferenceTemplate(record)}} block>
+          <Button
-          {t('BringTemplate')}  
+            type='link'
+            onClick={() => {
+              onTemplateImport(record);
+            }}
+            block
+          >
+            {t('Import_From_Template')}
           </Button>
         </Space>
       ),
     },
   ];
+
   useEffect(() => {
     getFlowTemplates().then(res => {
       console.log(res);
-      setDataSource(res?.data?.data?.items)
+      setDataSource(res?.data?.data?.items);
     });
-  },[])
+  }, []);
+
   return (
     <>
       <Modal
-        title={t('LeadTemplate')}
+        title={t('Import_From_Template')}
-        open={isTemplateFlowModalOpen}
+        open={isFlowTemplateModalOpen}
-        onCancel={() => setIsTemplateFlowModalOpen(false)}
+        onCancel={() => setIsFlowTemplateModalOpen(false)}
         cancelButtonProps={{ className: 'hidden' }}
         okButtonProps={{ className: 'hidden' }}
       >

web/components/flow/node-renderer/upload.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { metadataBatch } from '@/client/api';
 import { IFlowNodeParameter } from '@/types/flow';
 import { convertKeysToCamelCase } from '@/utils/flow';
 import { UploadOutlined } from '@ant-design/icons';
@@ -7,8 +8,6 @@ import { Button, Upload, message } from 'antd';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { metadataBatch } from '@/client/api';
-
 type Props = {
   formValuesChange: any;
   data: IFlowNodeParameter;
@@ -18,7 +17,7 @@ export const renderUpload = (params: Props) => {
   const { t } = useTranslation();
   const urlList = useRef<string[]>([]);
   const { data, formValuesChange } = params;
-  const [fileList, setFileList] = useState<UploadFile[]>([])
+  const [fileList, setFileList] = useState<UploadFile[]>([]);
 
   // 获取上传文件元数据
   useEffect(() => {
@@ -27,7 +26,7 @@ export const renderUpload = (params: Props) => {
       typeof data.value === 'string' ? uris.push(data.value) : (uris = data.value);
       const parameter: any = {
         uris,
-      }
+      };
       metadataBatch(parameter)
         .then(res => {
           const urlList: UploadFile[] = [];

web/locales/en/flow.ts

@@ -6,15 +6,11 @@ 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',
-  BringName: 'Bring Name',
-  BringAction: 'Bring Action',
   Import: 'Import',
   Export: 'Export',
   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',
@@ -25,4 +21,7 @@ export const FlowEn = {
   Add_Parameter: 'Add Parameter',
   Higher_Order_Nodes: 'Higher Order',
   All_Nodes: 'All',
+  Import_From_Template: 'Import from template',
+  Template_Name: 'Template Name',
+  Template_Action: 'Action',
 };

web/locales/zh/flow.ts

@@ -6,14 +6,10 @@ export const FlowZn = {
   Open_Code_Editor: '打开代码编辑器',
   Export_Flow_Success: '导出工作流成功',
   Import_Flow_Success: '导入工作流成功',
-  BringTemplate: '引入模版',
-  BringAction: '操作',
   Import: '导入',
   Export: '导出',
-  BringName: '模版名称',
   Import_Flow: '导入工作流',
   Export_Flow: '导出工作流',
-  LeadTemplate: '引入模版',
   Select_File: '选择文件',
   Save_After_Import: '导入后保存',
   Export_File_Type: '文件类型',
@@ -25,4 +21,7 @@ export const FlowZn = {
   Add_Parameter: '添加参数',
   Higher_Order_Nodes: '高阶',
   All_Nodes: '所有',
+  Import_Template: '从模版导入',
+  Template_Name: '模版名称',
+  Template_Action: '操作',
 };

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

@@ -5,9 +5,9 @@ import ButtonEdge from '@/components/flow/button-edge';
 import {
   AddFlowVariableModal,
   ExportFlowModal,
+  FlowTemplateModal,
   ImportFlowModal,
   SaveFlowModal,
-  TemplateFlowModa,
 } from '@/components/flow/canvas-modal';
 import CanvasNode from '@/components/flow/canvas-node';
 import { IFlowData, IFlowUpdateParam } from '@/types/flow';
@@ -49,7 +49,7 @@ const Canvas: React.FC = () => {
   const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false);
   const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false);
-  const [isTemplateFlowModalOpen, setIsTemplateFlowModalOpen] = useState(false);
+  const [isFlowTemplateModalOpen, setIsFlowTemplateModalOpen] = useState(false);
 
   if (localStorage.getItem('importFlowData')) {
     const importFlowData = JSON.parse(localStorage.getItem('importFlowData') || '');
@@ -198,27 +198,15 @@ const Canvas: React.FC = () => {
     setIsSaveFlowModalOpen(true);
   }
 
-  function onExport() {
-    setIsExportFlowModalOpen(true);
-  }
-
-  function onImport() {
-    setIsImportFlowModalOpen(true);
-  }
-
-  function onTemplate() {
-    setIsTemplateFlowModalOpen(true);
-  }
-
   const getButtonList = () => {
     const buttonList = [
       {
         title: t('template'),
-        icon: <FileAddOutlined className='block text-xl' onClick={onTemplate} />,
+        icon: <FileAddOutlined className='block text-xl' onClick={() => setIsFlowTemplateModalOpen(true)} />,
       },
       {
         title: t('Import'),
-        icon: <ImportOutlined className='block text-xl' onClick={onImport} />,
+        icon: <ImportOutlined className='block text-xl' onClick={() => setIsImportFlowModalOpen(true)} />,
       },
       {
         title: t('save'),
@@ -229,7 +217,7 @@ const Canvas: React.FC = () => {
     if (id !== '') {
       buttonList.unshift({
         title: t('Export'),
-        icon: <ExportOutlined className='block text-xl' onClick={onExport} />,
+        icon: <ExportOutlined className='block text-xl' onClick={() => setIsExportFlowModalOpen(true)} />,
       });
     }
 
@@ -304,9 +292,10 @@ const Canvas: React.FC = () => {
         isImportModalOpen={isImportModalOpen}
         setIsImportFlowModalOpen={setIsImportFlowModalOpen}
       />
-      <TemplateFlowModa
+
-        isTemplateFlowModalOpen={isTemplateFlowModalOpen}
+      <FlowTemplateModal
-        setIsTemplateFlowModalOpen={setIsTemplateFlowModalOpen}
+        isFlowTemplateModalOpen={isFlowTemplateModalOpen}
+        setIsFlowTemplateModalOpen={setIsFlowTemplateModalOpen}
       />
 
       {contextHolder}