feat: 路由

src/App.css

@@ -1,4 +0,0 @@
-.App {
-  text-align: center;
-  padding: 20px;
-}

src/App.js

@@ -1,13 +0,0 @@
-import './App.css';
-import 'antd/dist/antd.min.css';
-import DatasourceView from './module/datasource/page/DatasourceView.jsx'
-
-
-const App = () => {
-  return (
-    <div className="App">
-      <DatasourceView />
-    </div>
-  );
-}
-export default App;

src/index.js

@@ -1,18 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import 'antd/dist/antd.min.css';
 import reportWebVitals from './reportWebVitals';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import DatasourceView from './module/datasource/page/DatasourceView.jsx'
+import SyncTaskAdd from './module/datasource/component/SyncTaskAdd.jsx'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 
 root.render(
   <BrowserRouter>
     <Routes>
-      <Route path="/" element={<App />} />
-      <Route path="about" element={<DatasourceView />} />
+      <Route path="/" element={<DatasourceView />} />
+      <Route path="sync" element={<SyncTaskAdd />} />
     </Routes>
   </BrowserRouter>
 );

src/module/datasource/component/DrawFormConfig.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Form, Select, Input } from "antd";
+
+export default function DrawFormConfig ({drawDataForm}) {
+  return (
+    <>
+    <p style={{fontWeight: 600, borderLeft: '3px solid #1881DA', paddingLeft: '12px'}}>配置提取源</p>
+    <Form
+      name="drawForm"
+      form={drawDataForm}
+      labelCol={{
+        span: 2,
+      }}
+      wrapperCol={{
+        span: 6,
+      }}
+      initialValues={{
+        datasource_name: 'mysql'
+      }}
+    >
+      <Form.Item
+        label="选择数据源"
+        name="datasource_name"
+        rules={[
+          {
+            required: true,
+            message: '请选择数据源!',
+          },
+        ]}
+      >
+        <Select options={[
+          {label: 'My SQL', value: 'mysql'},
+          {label: 'hive', value: 'hive'}
+        ]} allowClear />
+      </Form.Item>
+      <Form.Item
+        label="选择表"
+        name="datasource_form"
+        rules={[
+          {
+            required: true,
+            message: '请选择表',
+          },
+        ]}
+      >
+        <Select options={[]} allowClear />
+      </Form.Item>
+      <Form.Item label="查询字段" name="query_field" wrapperCol={{span: 10}}>
+        <Input.TextArea rows={5}/>
+      </Form.Item>
+      <Form.Item label="切分主键" name="datasource_mainkey">
+        <Select options={[]} allowClear />
+      </Form.Item>
+      <Form.Item label="条件语句" name="centence" wrapperCol={{span: 10}}>
+        <Input.TextArea rows={5}/>
+      </Form.Item>
+    </Form>
+    </>
+  )
+}

src/module/datasource/component/LoadFormConfig.jsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { Form, Select, Input } from "antd";
+
+export default function LoadFormConfig ({loadDataForm}) {
+  return (
+    <>
+    <p style={{fontWeight: 600, borderLeft: '3px solid #1881DA', paddingLeft: '12px'}}>配置加载源源</p>
+    <Form
+      name="drawForm"
+      form={loadDataForm}
+      labelCol={{
+        span: 2,
+      }}
+      wrapperCol={{
+        span: 6,
+      }}
+      initialValues={{
+        datasource_name: 'mysql'
+      }}
+    >
+      <Form.Item
+        label="选择数据源"
+        name="datasource_name"
+        rules={[
+          {
+            required: true,
+            message: '请选择数据源!',
+          },
+        ]}
+      >
+        <Select options={[
+          {label: 'My SQL', value: 'mysql'},
+          {label: 'hive', value: 'hive'}
+        ]} allowClear />
+      </Form.Item>
+      <Form.Item
+        label="选择表"
+        name="datasource_form"
+        rules={[
+          {
+            required: true,
+            message: '请选择表',
+          },
+        ]}
+      >
+        <Select options={[]} allowClear />
+      </Form.Item>
+      <Form.Item label="preSql" name="preSql" wrapperCol={{span: 10}}>
+        <Input.TextArea rows={5}/>
+      </Form.Item>
+    </Form>
+    </>
+  )
+}

src/module/datasource/component/SyncTaskAdd.jsx

@@ -0,0 +1,77 @@
+import { Steps, Button, Space, Form } from 'antd'
+import DrawFormConfig from './DrawFormConfig'
+import LoadFormConfig from './LoadFormConfig'
+import React, { useState } from 'react'
+import styled from 'styled-components'
+
+const { Step } = Steps
+
+const SyncTask = styled.div`
+  padding: 40px;
+`
+
+export default function SyncTaskAdd() {
+  // 步骤数
+  const [currentStep, setCurrentStep] = useState(0)
+
+  // 上一步/下一步
+  const changeStep = num => {
+    setCurrentStep(currentStep + num)
+  }
+
+  // 配置提取源表单
+  const [drawDataForm] = Form.useForm()
+  // 配置加载源表单
+  const [loadDataForm] = Form.useForm()
+
+  // 提交表单
+  const submit = drawDataForm => {
+    console.log('submit')
+  }
+
+  return (
+    <SyncTask>
+      {/* 步骤条 */}
+      <Steps current={currentStep} labelPlacement="vertical" size="small">
+        <Step title="步骤1: 配置提取源" />
+        <Step title="步骤2: 配置加载源" />
+        <Step title="步骤3: 配置转换规则" />
+        <Step title="步骤4: 设置同步参数" />
+      </Steps>
+
+      {/* 表单项 */}
+      {/* 配置提取源 */}
+      {currentStep === 0 ? <DrawFormConfig drawDataForm={drawDataForm} /> : ''}
+      {/* 配置加载源 */}
+      {currentStep === 1 ? <LoadFormConfig loadDataForm={loadDataForm} /> : ''}
+
+      {/* 按扭操作 */}
+      <Space style={{ margin: '20px' }}>
+        <Button
+          onClick={() => {
+            changeStep(-1)
+          }}
+          disabled={currentStep === 0}>
+          上一步
+        </Button>
+        {currentStep === 3 ? (
+          <Button
+            type="primary"
+            onClick={() => {
+              submit(drawDataForm)
+            }}>
+            提交
+          </Button>
+        ) : (
+          <Button
+            type="primary"
+            onClick={() => {
+              changeStep(1)
+            }}>
+            下一步
+          </Button>
+        )}
+      </Space>
+    </SyncTask>
+  )
+}

src/module/datasource/page/DatasourceView.jsx

@@ -4,8 +4,14 @@ import DatasourceAdd from '../component/DatasourceAdd'
 import DatasourceSyncView from '../component/DatasourceSyncView'
 import DatasourceLog from '../component/DatasourceLog'
 import React, { useState } from 'react'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components'
 const { TabPane } = Tabs
 
+const Datasource = styled.div`
+  padding: 20px;
+`
+
 export default function DatasourceView() {
   // 数据源管理ref
   const sourceRef = React.createRef()
@@ -21,14 +27,17 @@ export default function DatasourceView() {
       case '1':
         return <DatasourceAdd updateDataSource={updateDataSource} />
       case '2':
-        return <Button type="primary">添加同步任务</Button>
+        return (
+          <Link to="/sync">
+            <Button type="primary">添加同步任务</Button>
+          </Link>
+        )
       default:
         return <></>
     }
   }
-  // const syncAddBtn = <Button></Button>
   return (
-    <>
+    <Datasource>
       {/* Tab栏及内容 */}
       <Tabs
         type="card"
@@ -44,6 +53,6 @@ export default function DatasourceView() {
           <DatasourceLog />
         </TabPane>
       </Tabs>
-    </>
+    </Datasource>
   )
 }