feat: 侧边栏

src/App.jsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { routes } from './routes'
+import { Layout, Menu } from 'antd'
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
+import styled from 'styled-components'
+const { Content, Sider } = Layout
+
+const MenuItem = Menu.Item
+
+const DemoTitle = styled.div`
+  height: 32px;
+  margin: 16px;
+  background: rgba(255, 255, 255, 0.2);
+  text-align: center;
+  color: #fff;
+  line-height: 32px;
+`
+
+export default function Sidebar() {
+  const menus = routes.map((item, index) => {
+    return {
+      key: String(index + 1),
+      label: <Link to={item.path}>{item.title}</Link>,
+    }
+  })
+
+  let childrenList = []
+  const routesInfo = routes.map(item => {
+    if (item.children.length > 0) {
+      childrenList = childrenList.concat(...item.children)
+    }
+    return {
+      path: item.path,
+      exact: item?.exact,
+      component: <item.component />,
+    }
+  })
+  const list = routesInfo.concat(...childrenList)
+
+  return (
+    <Router>
+      <Layout hasSider>
+        <Sider>
+          <DemoTitle>ai中台demo</DemoTitle>
+          <Menu theme="dark" mode="inline" items={menus} />
+        </Sider>
+        <Content>
+          <Routes>
+            {list.map((route, index) => (
+              <Route
+                key={index}
+                path={route.path}
+                exact={route?.exact}
+                element={route.component}
+              />
+            ))}
+          </Routes>
+        </Content>
+      </Layout>
+    </Router>
+  )
+}

src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+section {
+  height: 100vh;
 }

src/index.js

@@ -3,24 +3,11 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import 'antd/dist/antd.min.css';
 import reportWebVitals from './reportWebVitals';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-// eslint-disable-next-line
-import DatasourceView from './module/datasource/page/DatasourceView.jsx'
-import SyncTaskAdd from './module/datasource/component/SyncTaskAdd.jsx'
-import LogWatcher from './module/datasource/component/LogWatcher.jsx'
-import JobManagement from './module/workmgmt/page/JobManagement.jsx'
-import JobCreate from './module/workmgmt/component/JobCreate.jsx'
-import TaskLog from './module/tasklog/page/TaskLog';
+import App from './App'
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <BrowserRouter>
-    <Routes>
-      <Route path="/" element={<TaskLog />} />
-      <Route path="sync" element={<SyncTaskAdd />} />
-      <Route path="log" element={<LogWatcher />} />
-      <Route path="cre" element={<JobCreate />} />
-    </Routes>
-  </BrowserRouter>
+  <App />
 );
 
 // If you want to start measuring performance in your app, pass a function

src/routes/index.js

@@ -0,0 +1,26 @@
+import DatasourceView from '../module/datasource/page/DatasourceView.jsx'
+import SyncTaskAdd from '../module/datasource/component/SyncTaskAdd.jsx'
+import LogWatcher from '../module/datasource/component/LogWatcher.jsx'
+import TaskLog from '../module/tasklog/page/TaskLog';
+
+export const routes = [
+    {
+        path: '/datasource',
+        title: '数据源管理',
+        // exact: true,
+        component: DatasourceView,
+        children: [{
+            path: '/datasource/sync-task',
+            component: SyncTaskAdd,
+        }, {
+            path: '/datasource/log-watcher',
+            component: LogWatcher,
+        }]
+    },
+    {
+        path: '/task-log',
+        title: '任务日志',
+        component: TaskLog,
+        children: []
+    }
+]