初步框架

package.json

@@ -10,8 +10,11 @@
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "antd": "^5.2.3",
+    "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.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.module.css

@@ -0,0 +1,3 @@
+.App {
+  background-color: #f6f6f6;
+}

src/App.tsx

@@ -1,24 +1,21 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import styles from "./App.module.css";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { Login, HomePage } from "./pages";
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+    <div className={styles.App}>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/" element={<HomePage></HomePage>}></Route>
+          <Route path="/login" element={<Login></Login>}></Route>
+          <Route
+            path="*"
+            element={<h1>404 not found 页面去火星了！</h1>}
+          ></Route>
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

src/api/categories.ts

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+export const getCategoriesAsync = (params: any) =>
+  axios.get("/categroy/findCategroy", {
+    params: params,
+  });
+
+export const addCategoriesAsync = (data: any) =>
+  axios.post("/categroy/addCategroy", data);

src/compenents/footer/Footer.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "./Footer.module.css";
+import { Layout, Typography } from "antd";
+
+export const Footer: React.FC = () => {
+  return (
+    <Layout.Footer
+      style={{ backgroundColor: "#0F0A1E", height: 103, paddingTop: 30 }}
+    >
+      <Typography.Title
+        style={{
+          textAlign: "center",
+          fontSize: 12,
+          color: "#FFFFFF",
+          opacity: 0.3,
+        }}
+      >
+        © 2021 PlayEdu • 粤ICP备20026280号-01
+      </Typography.Title>
+      <Typography.Title
+        style={{
+          textAlign: "center",
+          fontSize: 12,
+          color: "#FFFFFF",
+          opacity: 0.3,
+          marginTop: 19,
+        }}
+      >
+        Powered By 杭州白书科技
+      </Typography.Title>
+    </Layout.Footer>
+  );
+};

src/compenents/footer/index.ts

@@ -0,0 +1 @@
+export * from "./Footer";

src/compenents/header/Header.module.css

@@ -0,0 +1,46 @@
+.app-header {
+    background-color: white !important;
+  }
+  
+  .main-menu {
+    padding-left: 6% !important;
+    padding-right: 6% !important;
+    background-color: #1976d2 !important;
+    color: #f5f5f5 !important;
+  }
+  
+  .button-group {
+    float: right;
+  }
+  
+  .main-header {
+    width: 1200px;
+    background-color: white !important;
+    height: 70px;
+    line-height: 70px;
+    width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  
+  .App-logo {
+    width: 151px;
+    height: 40px;
+    float: left;
+  }
+  
+  .top-main {
+    display: flex;
+    align-items: center;
+  }
+  
+  .title {
+    line-height: 64px !important;
+    display: inline;
+    color: #03a9f4 !important;
+  }
+  
+  

src/compenents/header/Header.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styles from "./Header.module.css";
+import logo from "../../assets/logo.svg";
+import { Layout, Typography, Menu, Button, Dropdown, MenuProps } from "antd";
+import { Link } from "react-router-dom";
+
+
+
+export const Header: React.FC = () => {
+
+
+  return (
+    <div className={styles["app-header"]}>
+      <Layout.Header className={styles["main-header"]}>
+        <Link
+          className={styles["top-main"]}
+          style={{ textDecoration: "none" }}
+          to={`/`}
+        >
+          <img src={logo} alt="" className={styles["App-logo"]} />
+        </Link>
+        <Button.Group className={styles["button-group"]}>
+          <Link style={{ textDecoration: "none" }} to={`/login`}>
+            <Button>登录</Button>
+          </Link>
+        </Button.Group>
+      </Layout.Header>
+    </div>
+  );
+};

src/compenents/header/index.ts

@@ -0,0 +1 @@
+export * from "./Header";

src/compenents/index.ts

@@ -0,0 +1,2 @@
+export * from "./footer";
+export * from "./header";

src/custom.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const css: { [key: string]: string };
+  export default css;
+}

src/index.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import "./utils/axios";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>

src/pages/home/HomePage.module.css

@@ -0,0 +1,8 @@
+.page-content {
+    width: 1200px;
+    min-height: calc(100vh - 173px);
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 30px;
+    margin-bottom: 100px;
+  }

src/pages/home/HomePage.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./HomePage.module.css";
+import { Header, Footer } from "../../compenents";
+
+export const HomePage: React.FC = () => {
+  return (
+    <>
+      <Header></Header>
+      <div className={styles["page-content"]}>主页</div>
+      <Footer></Footer>
+    </>
+  );
+};

src/pages/home/index.ts

@@ -0,0 +1 @@
+export * from "./HomePage";

src/pages/index.ts

@@ -0,0 +1,2 @@
+export * from "./home";
+export * from "./login";

src/pages/login/Login.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from "./Login.module.css";
+
+export const Login: React.FC = () => {
+  return <h1>登录页面</h1>;
+};

src/pages/login/index.ts

@@ -0,0 +1 @@
+export * from "./Login";

src/utils/axios.ts

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+axios.defaults.timeout = 10000;
+axios.defaults.headers.Authorization = "Bearer ";
+axios.defaults.headers.common["meedu-platform"] = "backend";
+axios.defaults.baseURL = "https://dev-local.meedu.vip/";
+
+// 响应拦截器
+axios.interceptors.response.use(
+  (res) => res.data, // 拦截到响应对象，将响应对象的 data 属性返回给调用的地方
+  (err) => Promise.reject(err)
+);