hippo4j-ui-new router antd

hippo4j-ui-new/package.json

@@ -10,8 +10,10 @@
     "@types/node": "^16.18.26",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
+    "antd": "^5.4.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

hippo4j-ui-new/src/App.tsx

@@ -1,8 +1,29 @@
-import React from 'react';
+import { Layout } from 'antd';
+import { Routes, Route, Link } from 'react-router-dom';
+import Home from './page/home';
+import About from './page/about';
 import style from './index.module.less';
 
+const { Header, Sider, Content } = Layout;
+
 function App() {
-  return <div className={style.color}>jhhhh</div>;
+  return (
+    <div className={style.container}>
+      <Header className={style.header}>header</Header>
+      <Layout>
+        <Sider className={style.sider}>
+          <Link to="/home">home</Link>
+          <Link to="/about">about</Link>
+        </Sider>
+        <Content className={style.content}>
+          <Routes>
+            <Route path="/home" Component={Home}></Route>
+            <Route path="/about" Component={About}></Route>
+          </Routes>
+        </Content>
+      </Layout>
+    </div>
+  );
 }
 
 export default App;

hippo4j-ui-new/src/index.module.less

@@ -1,3 +1,19 @@
-.color {
+.container {
-    color: black;
+  width: 100vw;
+  height: 100vh;
+  background-color: #eee;
+  color: #fff;
+  .header {
+    height: 64px;
+    color: #fff;
+  }
+  .sider {
+    width: 120px;
+    height: calc(100vh - 64px);
+    color: #fff;
+  }
+  .content {
+    margin: 24px;
+    color: #fff;
+  }
 }

hippo4j-ui-new/src/index.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+import 'antd/dist/reset.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
 root.render(
   <React.StrictMode>
+    <BrowserRouter>
       <App />
+    </BrowserRouter>
   </React.StrictMode>
 );

hippo4j-ui-new/src/page/about/index.tsx

@@ -0,0 +1,4 @@
+const About = () => {
+  return <div style={{ color: 'red' }}>About</div>;
+};
+export default About;

hippo4j-ui-new/src/page/home/index.tsx

@@ -0,0 +1,10 @@
+import { Button } from 'antd';
+const Home = () => {
+  return (
+    <div style={{ color: 'red' }}>
+      <Button>jjjjj</Button>
+    </div>
+  );
+};
+
+export default Home;