chore: add routes

Author: taosin

web/pnpm-lock.yaml

@@ -1,15 +1,12 @@
 import React from 'react';
-import { ConfigProvider } from 'antd';
 import AppLayout from './components/Layout';
 import './styles/global.scss';
 
 const App: React.FC = () => {
 	return (
-		<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
-			<div className="app-container">
-				<AppLayout/>
-			</div>
-		</ConfigProvider>
+		<div className="app-container">
+			<AppLayout/>
+		</div>
 	)
 };
 

web/src/App.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+	const isAuthenticated = !!localStorage.getItem('token'); // 检查用户是否登录
+
+	return (
+		<Route
+			{...rest}
+			render={(props: React.JSX.IntrinsicAttributes) =>
+				isAuthenticated ? (
+					<Component {...props} />
+				) : (
+					<Redirect to="/login"/>
+				)
+			}
+		/>
+	);
+};
+
+export default PrivateRoute;

web/src/components/PrivateRoute/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import Home from '../pages/Home';
+import Login from '../pages/Login';
+import NotFound from '../pages/NotFound';
+
+const Routers = () => {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/home" element={<Home/>}/>
+        <Route exact path="/" component={Home}/>
+
+        {/* 登录页 */}
+        <Route path="/login" component={Login}/>
+
+        {/* 404 页面 */}
+        <Route component={NotFound}/>
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Routers;

web/src/config/routes.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
+import { ConfigProvider } from 'antd';
 import { LanguageProvider } from './utils/LanguageContext';
 
 
@@ -9,12 +10,8 @@ const container = document.getElementById('root');
 const root = createRoot(container!); // 创建根
 root.render(
 	<LanguageProvider>
-		<App/>
+		<ConfigProvider theme={{ token: { colorPrimary: '#00b96b' } }}>
+			<App/>
+		</ConfigProvider>
 	</LanguageProvider>,
-); // 使用新 API 渲染组件
-// const root = ReactDOM.createRoot(document.getElementById('root'));
-// root.render(
-// 	<React.StrictMode>
-// 		<App />
-// 	</React.StrictMode>
-// );
+);

web/src/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Home: React.FC = () => {
+	return <div>Welcome to the Home Page!</div>;
+};
+
+export default Home;

web/src/pages/Home/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const NotFound: React.FC = () => {
+	return <div>404 - Page Not Found</div>;
+};
+
+export default NotFound;