Merge branch 'master' of http://gogsb.soaringnova.com/liutao/ai-proj-demo

package-lock.json

@@ -6603,6 +6603,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -11053,6 +11061,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
+      "integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
+      "integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.3.0"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

package.json

@@ -14,6 +14,8 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router": "^6.3.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4",

src/App.css

@@ -1,40 +0,0 @@
-.App {
-  /* text-align: center; */
-  background-color: #f2f2f6;
-  padding: 30px;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,17 +0,0 @@
-import './App.css';
-import 'antd/dist/antd.min.css';
-import { Card } from 'antd';
-import DatasourceView from './module/datasource/page/DatasourceView.jsx'
-import SyncTaskAdd from './module/datasource/component/SyncTaskAdd.jsx'
-
-function App () {
-  return (
-    <div className="App">
-      <Card bordered={false}>
-        <SyncTaskAdd />
-      </Card>
-    </div>
-  );
-}
-
-export default App;

src/index.js

@@ -1,14 +1,21 @@
 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(
-  // <React.StrictMode>
-  <App />
-  // </React.StrictMode>
+  <BrowserRouter>
+    <Routes>
+      <Route path="/" element={<DatasourceView />} />
+      <Route path="sync" element={<SyncTaskAdd />} />
+    </Routes>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function

src/module/datasource/component/DatasourceLog.jsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+import { Table, Space } from 'antd'
+
+const DatasourceLog = () => {
+  // 初始化日志列表
+  const [logList, setLogList] = useState([])
+  // 表格Loading状态
+  const [dataLoading, setDataLoading] = useState(false)
+
+  const changeTask = () => {}
+  const checkLog = () => {}
+  const columns = [
+    {
+      title: '同步ID',
+      dataIndex: 'id',
+      key: 'id',
+    },
+    {
+      title: '调度时间',
+      dataIndex: 'scheduleTime',
+      key: 'scheduleTime',
+    },
+    {
+      title: '调度结果',
+      dataIndex: 'scheduleResult',
+      key: 'scheduleResult',
+    },
+    {
+      title: '执行时间',
+      dataIndex: 'executionTime',
+      key: 'executionTime',
+    },
+    {
+      title: '执行结果',
+      dataIndex: 'executionResult',
+      key: 'executionResult',
+    },
+    {
+      title: '操作',
+      key: 'operation',
+      render: (_, record) => (
+        <Space size="middle">
+          <span
+            onClick={() => {
+              checkLog(record.key)
+            }}
+            style={{ color: '#1881DA', cursor: 'pointer' }}>
+            查看
+          </span>
+          {/* <a href="/#" onClick={editData} style={{ color: '#1881DA' }}>
+            编辑
+          </a> */}
+          <span
+            onClick={() => {
+              changeTask(record.key)
+            }}
+            style={{ color: '#1881DA', cursor: 'pointer' }}>
+            终止任务
+          </span>
+        </Space>
+      ),
+    },
+  ]
+  return (
+    <Table
+      columns={columns}
+      dataSource={logList}
+      bordered
+      loading={dataLoading}
+    />
+  )
+}
+
+export default DatasourceLog

src/module/datasource/component/DatasourceManage.jsx

@@ -152,25 +152,23 @@ export default function DatasourceManage({ onRef }) {
       key: 'operation',
       render: (_, record) => (
         <Space size="middle">
-          <a
-            href="/#"
+          <span
             onClick={() => {
               fetchTableNames(record.key)
             }}
-            style={{ color: '#1881DA' }}>
+            style={{ color: '#1881DA', cursor: 'pointer' }}>
             查看
-          </a>
+          </span>
           {/* <a href="/#" onClick={editData} style={{ color: '#1881DA' }}>
             编辑
           </a> */}
-          <a
-            href="/#"
+          <span
             onClick={() => {
               DeleteConfirm(record.key)
             }}
-            style={{ color: '#1881DA' }}>
+            style={{ color: '#1881DA', cursor: 'pointer' }}>
             删除
-          </a>
+          </span>
         </Space>
       ),
     },

src/module/datasource/component/DatasourceSyncView.jsx

@@ -100,12 +100,11 @@ export default function DatasourceSyncView() {
     },
   ]
   return (
-    <>
-      <Table
-        columns={columns}
-        dataSource={jobList}
-        bordered
-        loading={dataLoading}></Table>
-    </>
+    <Table
+      columns={columns}
+      dataSource={jobList}
+      bordered
+      loading={dataLoading}
+    />
   )
 }

src/module/datasource/component/SyncTaskAdd.jsx

@@ -1,14 +1,21 @@
-import { Steps, Button, Space, Form } from "antd";
+import { Steps, Button, Space, Form } from 'antd'
 import DrawFormConfig from './DrawFormConfig'
 import LoadFormConfig from './LoadFormConfig'
-import { useState } from "react";
+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) => {
+  const changeStep = num => {
     setCurrentStep(currentStep + num)
   }
 
@@ -18,18 +25,14 @@ export default function SyncTaskAdd() {
   const [loadDataForm] = Form.useForm()
 
   // 提交表单
-  const submit = (drawDataForm) => {
-    console.log('submit');
+  const submit = drawDataForm => {
+    console.log('submit')
   }
 
   return (
-    <>
+    <SyncTask>
       {/* 步骤条 */}
-      <Steps
-        current={currentStep}
-        labelPlacement="vertical"
-        size="small"
-      >
+      <Steps current={currentStep} labelPlacement="vertical" size="small">
         <Step title="步骤1: 配置提取源" />
         <Step title="步骤2: 配置加载源" />
         <Step title="步骤3: 配置转换规则" />
@@ -38,22 +41,37 @@ export default function SyncTaskAdd() {
 
       {/* 表单项 */}
       {/* 配置提取源 */}
-      { currentStep === 0 ? <DrawFormConfig drawDataForm={drawDataForm} /> : ''}
+      {currentStep === 0 ? <DrawFormConfig drawDataForm={drawDataForm} /> : ''}
       {/* 配置加载源 */}
-      { currentStep === 1 ? <LoadFormConfig loadDataForm={loadDataForm} /> : ''}
-      
+      {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 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>
-
-      {/* 侧边按扭 */}
-      <Button style={{position: 'absolute'}}>表结构预览</Button>
-    </>
-  );
-}
+    </SyncTask>
+  )
+}

src/module/datasource/page/DatasourceView.jsx

@@ -2,9 +2,16 @@ import { Tabs, Button } from 'antd'
 import DataSourceManage from '../component/DatasourceManage.jsx'
 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()
@@ -18,17 +25,24 @@ export default function DatasourceView() {
   const tabExtraBtn = () => {
     switch (currentKey) {
       case '1':
-        return <DatasourceAdd updateDataSource={updateDataSource}/>
+        return <DatasourceAdd updateDataSource={updateDataSource} />
       case '2':
-        return <Button type='primary'>添加同步任务</Button>
+        return (
+          <Link to="/sync">
+            <Button type="primary">添加同步任务</Button>
+          </Link>
+        )
       default:
         return <></>
     }
   }
   return (
-    <>
+    <Datasource>
       {/* Tab栏及内容 */}
-      <Tabs type="card" tabBarExtraContent={tabExtraBtn()} onChange={key => setCurrentKey(key)}>
+      <Tabs
+        type="card"
+        tabBarExtraContent={tabExtraBtn()}
+        onChange={key => setCurrentKey(key)}>
         <TabPane tab="数据源管理" key="1">
           <DataSourceManage onRef={sourceRef} />
         </TabPane>
@@ -36,9 +50,9 @@ export default function DatasourceView() {
           <DatasourceSyncView />
         </TabPane>
         <TabPane tab="日志管理" key="3">
-          Content of Tab Pane 3
+          <DatasourceLog />
         </TabPane>
       </Tabs>
-    </>
+    </Datasource>
   )
-}
+}