mirror of
https://github.com/PlayEdu/backend
synced 2025-06-08 06:37:49 +08:00
左侧栏初步
This commit is contained in:
禺狨
parent
3dff7f139d
commit
37c5756866
151
package-lock.json
generated
151
package-lock.json
generated
@ -19,8 +19,10 @@
|
||||
"axios": "^1.3.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.8.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"redux": "^4.2.1",
|
||||
"typescript": "^4.4.2",
|
||||
"web-vitals": "^2.1.0"
|
||||
}
|
||||
@ -3845,6 +3847,15 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"dependencies": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/html-minifier-terser": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
|
||||
@ -4050,6 +4061,11 @@
|
||||
"integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
|
||||
@ -8873,6 +8889,19 @@
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"dependencies": {
|
||||
"react-is": "^16.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/hoist-non-react-statics/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@ -14272,6 +14301,49 @@
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/react-redux": {
|
||||
"version": "8.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.5.tgz",
|
||||
"integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"@types/use-sync-external-store": "^0.0.3",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"react-is": "^18.0.0",
|
||||
"use-sync-external-store": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "^16.8 || ^17.0 || ^18.0",
|
||||
"@types/react-dom": "^16.8 || ^17.0 || ^18.0",
|
||||
"react": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0",
|
||||
"react-native": ">=0.59",
|
||||
"redux": "^4"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-dom": {
|
||||
"optional": true
|
||||
},
|
||||
"react-native": {
|
||||
"optional": true
|
||||
},
|
||||
"redux": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-redux/node_modules/react-is": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@ -14444,6 +14516,14 @@
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/redux": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/redux/-/redux-4.2.1.tgz",
|
||||
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"node_modules/regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
|
||||
@ -16417,6 +16497,14 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
@ -19926,6 +20014,15 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"@types/hoist-non-react-statics": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
|
||||
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
|
||||
"requires": {
|
||||
"@types/react": "*",
|
||||
"hoist-non-react-statics": "^3.3.0"
|
||||
}
|
||||
},
|
||||
"@types/html-minifier-terser": {
|
||||
"version": "6.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
|
||||
@ -20103,6 +20200,11 @@
|
||||
"resolved": "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.3.tgz",
|
||||
"integrity": "sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g=="
|
||||
},
|
||||
"@types/use-sync-external-store": {
|
||||
"version": "0.0.3",
|
||||
"resolved": "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
|
||||
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
},
|
||||
"@types/ws": {
|
||||
"version": "8.5.4",
|
||||
"resolved": "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz",
|
||||
@ -23363,6 +23465,21 @@
|
||||
"resolved": "https://registry.npmmirror.com/he/-/he-1.2.0.tgz",
|
||||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
|
||||
},
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.3.2",
|
||||
"resolved": "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
|
||||
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
|
||||
"requires": {
|
||||
"react-is": "^16.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"hoopy": {
|
||||
"version": "0.1.4",
|
||||
"resolved": "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz",
|
||||
@ -26831,6 +26948,26 @@
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-redux": {
|
||||
"version": "8.0.5",
|
||||
"resolved": "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.5.tgz",
|
||||
"integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"@types/hoist-non-react-statics": "^3.3.1",
|
||||
"@types/use-sync-external-store": "^0.0.3",
|
||||
"hoist-non-react-statics": "^3.3.2",
|
||||
"react-is": "^18.0.0",
|
||||
"use-sync-external-store": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-is": {
|
||||
"version": "18.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.11.0",
|
||||
"resolved": "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz",
|
||||
@ -26951,6 +27088,14 @@
|
||||
"strip-indent": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"redux": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/redux/-/redux-4.2.1.tgz",
|
||||
"integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.9.2"
|
||||
}
|
||||
},
|
||||
"regenerate": {
|
||||
"version": "1.4.2",
|
||||
"resolved": "https://registry.npmmirror.com/regenerate/-/regenerate-1.4.2.tgz",
|
||||
@ -28269,6 +28414,12 @@
|
||||
"requires-port": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"use-sync-external-store": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
|
||||
"requires": {}
|
||||
},
|
||||
"util-deprecate": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz",
|
||||
|
||||
@ -14,8 +14,10 @@
|
||||
"axios": "^1.3.4",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-redux": "^8.0.5",
|
||||
"react-router-dom": "^6.8.2",
|
||||
"react-scripts": "5.0.1",
|
||||
"redux": "^4.2.1",
|
||||
"typescript": "^4.4.2",
|
||||
"web-vitals": "^2.1.0"
|
||||
},
|
||||
|
||||
20
src/App.tsx
20
src/App.tsx
@ -1,23 +1,11 @@
|
||||
import React from "react";
|
||||
import styles from "./App.module.css";
|
||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||
import { Login, HomePage } from "./pages";
|
||||
import { useRoutes } from "react-router-dom";
|
||||
import routes from "./router/routes";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
const element = useRoutes(routes);
|
||||
return <div className={styles.App}>{element}</div>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import styles from "./Header.module.css";
|
||||
import logo from "../../assets/logo.svg";
|
||||
import logo from "../../assets/logo.png";
|
||||
import { Layout, Typography, Menu, Button, Dropdown, MenuProps } from "antd";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
@ -12,13 +12,7 @@ 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>
|
||||
<div></div>
|
||||
<Button.Group className={styles["button-group"]}>
|
||||
<Link style={{ textDecoration: "none" }} to={`/login`}>
|
||||
<Button>登录</Button>
|
||||
|
||||
@ -1,2 +1,3 @@
|
||||
export * from "./footer";
|
||||
export * from "./header";
|
||||
export * from "./leftMenu";
|
||||
12
src/compenents/leftMenu/LeftMenu.module.css
Normal file
12
src/compenents/leftMenu/LeftMenu.module.css
Normal file
@ -0,0 +1,12 @@
|
||||
.left-menu {
|
||||
width: 200px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
width: 124px;
|
||||
height: 40px;
|
||||
margin-top: 16px;
|
||||
margin-left: 38px;
|
||||
}
|
||||
83
src/compenents/leftMenu/LeftMenu.tsx
Normal file
83
src/compenents/leftMenu/LeftMenu.tsx
Normal file
@ -0,0 +1,83 @@
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
MailOutlined,
|
||||
SettingOutlined,
|
||||
AppstoreOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Menu } from "antd";
|
||||
//导出路由跳转hooks函数
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import styles from "./LeftMenu.module.css";
|
||||
import logo from "../../assets/logo.png";
|
||||
|
||||
function getItem(label: any, key: any, icon: any, children: any, type: any) {
|
||||
return {
|
||||
key,
|
||||
icon,
|
||||
children,
|
||||
label,
|
||||
type,
|
||||
};
|
||||
}
|
||||
const items = [
|
||||
getItem("首页概览", "/", <SettingOutlined />, null, null),
|
||||
getItem("网校装修", "/", <SettingOutlined />, null, null),
|
||||
getItem(
|
||||
"课程内容",
|
||||
"2",
|
||||
<MailOutlined />,
|
||||
[
|
||||
getItem("视频", "/vod", null, null, null),
|
||||
getItem("文章", "/topic", null, null, null),
|
||||
getItem("试卷", "/paper", null, null, null),
|
||||
],
|
||||
null
|
||||
),
|
||||
getItem("学员管理", "3", <AppstoreOutlined />, [], null),
|
||||
getItem("证书管理", "4", <SettingOutlined />, [], null),
|
||||
getItem("系统设置", "5", <SettingOutlined />, [,], null),
|
||||
];
|
||||
|
||||
const rootSubmenuKeys = ["2", "3", "4", "5"];
|
||||
|
||||
export const LeftMenu: React.FC = () => {
|
||||
//展开的subMenu
|
||||
const [openKeys, setOpenKeys] = useState(["1"]);
|
||||
//点击subMenu的回调函数
|
||||
const onOpenChange = (keys: any) => {
|
||||
const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);
|
||||
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
||||
setOpenKeys(keys);
|
||||
} else {
|
||||
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
|
||||
}
|
||||
};
|
||||
//路由跳转的函数
|
||||
const navigate = useNavigate();
|
||||
//点击每一项
|
||||
const onClick = (e: any) => {
|
||||
console.log("click ", e);
|
||||
navigate(e.key);
|
||||
};
|
||||
return (
|
||||
<div className={styles["left-menu"]}>
|
||||
<Link
|
||||
style={{ textDecoration: "none" }}
|
||||
to={`/`}
|
||||
>
|
||||
<img src={logo} alt="" className={styles["App-logo"]} />
|
||||
</Link>
|
||||
<Menu
|
||||
onClick={onClick}
|
||||
style={{
|
||||
width: 200,
|
||||
background: "#ffffff",
|
||||
}}
|
||||
openKeys={openKeys}
|
||||
onOpenChange={onOpenChange}
|
||||
mode="inline"
|
||||
items={items}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
1
src/compenents/leftMenu/index.ts
Normal file
1
src/compenents/leftMenu/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from "./LeftMenu";
|
||||
@ -3,15 +3,20 @@ import ReactDOM from "react-dom/client";
|
||||
import "./index.css";
|
||||
import App from "./App";
|
||||
import reportWebVitals from "./reportWebVitals";
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import "./utils/axios";
|
||||
import { Provider } from "react-redux";
|
||||
import store from "./store/store";
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById("root") as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<Provider store={store}>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
</BrowserRouter>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
||||
@ -6,3 +6,18 @@
|
||||
margin-top: 30px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.layout-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left-menu {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.right-cont {
|
||||
width: calc(100% - 200px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -1,13 +1,25 @@
|
||||
import React from "react";
|
||||
import styles from "./HomePage.module.css";
|
||||
import { Header, Footer } from "../../compenents";
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { Header, LeftMenu } from "../../compenents";
|
||||
|
||||
export const HomePage: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<div className={styles["layout-wrap"]}>
|
||||
<div className={styles["left-menu"]}>
|
||||
<LeftMenu />
|
||||
</div>
|
||||
<div className={styles["right-cont"]}>
|
||||
<div className={styles["right-top"]}>
|
||||
<Header></Header>
|
||||
<div className={styles["page-content"]}>主页</div>
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
<div className={styles["right-main"]}>
|
||||
{/* 二级路由出口 */}
|
||||
<Outlet />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
16
src/router/routes.tsx
Normal file
16
src/router/routes.tsx
Normal file
@ -0,0 +1,16 @@
|
||||
import React from "react";
|
||||
import { RouteObject } from "react-router-dom";
|
||||
import { Login, HomePage } from "../pages";
|
||||
|
||||
const routes: RouteObject[] = [
|
||||
{
|
||||
path: "/",
|
||||
element: <HomePage />,
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
element: <Login />,
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
29
src/store/store.ts
Normal file
29
src/store/store.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { createStore } from "redux";
|
||||
interface IAction {
|
||||
type: string;
|
||||
payload?: any;
|
||||
}
|
||||
interface IState {
|
||||
isshow: boolean;
|
||||
}
|
||||
const reducer = (
|
||||
preState: IState = {
|
||||
isshow: false,
|
||||
},
|
||||
action: IAction
|
||||
) => {
|
||||
const { type } = action;
|
||||
const newState = { ...preState };
|
||||
switch (type) {
|
||||
case "show":
|
||||
newState.isshow = true;
|
||||
return newState;
|
||||
case "hidden":
|
||||
newState.isshow = false;
|
||||
return newState;
|
||||
default:
|
||||
return preState;
|
||||
}
|
||||
};
|
||||
const store = createStore(reducer);
|
||||
export default store;
|
||||
51
src/utils/menus.ts
Normal file
51
src/utils/menus.ts
Normal file
@ -0,0 +1,51 @@
|
||||
const menuList = [
|
||||
{
|
||||
title: "首页概览",
|
||||
key: "/home",
|
||||
icon: "icon-icon-study-n",
|
||||
isPublic: true,
|
||||
},
|
||||
{
|
||||
title: "网校装修",
|
||||
icon: "icon-icon-decorate",
|
||||
key: "/decoration",
|
||||
},
|
||||
{
|
||||
title: "课程内容",
|
||||
icon: "icon-icon-lesson",
|
||||
key: "/course",
|
||||
children: [
|
||||
{
|
||||
title: "视频",
|
||||
icon: "",
|
||||
key: "/vod",
|
||||
},
|
||||
{
|
||||
title: "文章",
|
||||
icon: "",
|
||||
key: "/topic",
|
||||
},
|
||||
{
|
||||
title: "试卷",
|
||||
icon: "",
|
||||
key: "/paper",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "学员管理",
|
||||
icon: "icon-icon-me-n",
|
||||
key: "/user",
|
||||
},
|
||||
{
|
||||
title: "证书管理",
|
||||
icon: "icon-icon-operate",
|
||||
key: "/certificate",
|
||||
},
|
||||
{
|
||||
title: "系统设置",
|
||||
icon: "icon-icon-setting-n",
|
||||
key: "/system",
|
||||
},
|
||||
];
|
||||
export default menuList;
|
||||
59
yarn.lock
59
yarn.lock
@ -1082,7 +1082,7 @@
|
||||
"resolved" "https://registry.npmmirror.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz"
|
||||
"version" "0.8.0"
|
||||
|
||||
"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
|
||||
"integrity" "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw=="
|
||||
"resolved" "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz"
|
||||
"version" "7.21.0"
|
||||
@ -2041,6 +2041,14 @@
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/hoist-non-react-statics@^3.3.1":
|
||||
"integrity" "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA=="
|
||||
"resolved" "https://registry.npmmirror.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
|
||||
"version" "3.3.1"
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
"hoist-non-react-statics" "^3.3.0"
|
||||
|
||||
"@types/html-minifier-terser@^6.0.0":
|
||||
"integrity" "sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg=="
|
||||
"resolved" "https://registry.npmmirror.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz"
|
||||
@ -2130,14 +2138,14 @@
|
||||
"resolved" "https://registry.npmmirror.com/@types/range-parser/-/range-parser-1.2.4.tgz"
|
||||
"version" "1.2.4"
|
||||
|
||||
"@types/react-dom@^18.0.0":
|
||||
"@types/react-dom@^16.8 || ^17.0 || ^18.0", "@types/react-dom@^18.0.0":
|
||||
"integrity" "sha512-O38bPbI2CWtgw/OoQoY+BRelw7uysmXbWvw3nLWO21H1HSh+GOlqPuXshJfjmpNlKiiSDG9cc1JZAaMmVdcTlw=="
|
||||
"resolved" "https://registry.npmmirror.com/@types/react-dom/-/react-dom-18.0.11.tgz"
|
||||
"version" "18.0.11"
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*", "@types/react@^18.0.0":
|
||||
"@types/react@*", "@types/react@^16.8 || ^17.0 || ^18.0", "@types/react@^18.0.0":
|
||||
"integrity" "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew=="
|
||||
"resolved" "https://registry.npmmirror.com/@types/react/-/react-18.0.28.tgz"
|
||||
"version" "18.0.28"
|
||||
@ -2207,6 +2215,11 @@
|
||||
"resolved" "https://registry.npmmirror.com/@types/trusted-types/-/trusted-types-2.0.3.tgz"
|
||||
"version" "2.0.3"
|
||||
|
||||
"@types/use-sync-external-store@^0.0.3":
|
||||
"integrity" "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
|
||||
"resolved" "https://registry.npmmirror.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz"
|
||||
"version" "0.0.3"
|
||||
|
||||
"@types/ws@^8.5.1":
|
||||
"integrity" "sha512-zdQDHKUgcX/zBc4GrwsE/7dVdAD8JR4EuiAXiiUhhfyIJXXb2+PrGshFyeXWQPMmmZ2XxgaqclgpIC7eTXc1mg=="
|
||||
"resolved" "https://registry.npmmirror.com/@types/ws/-/ws-8.5.4.tgz"
|
||||
@ -5060,6 +5073,13 @@
|
||||
"resolved" "https://registry.npmmirror.com/he/-/he-1.2.0.tgz"
|
||||
"version" "1.2.0"
|
||||
|
||||
"hoist-non-react-statics@^3.3.0", "hoist-non-react-statics@^3.3.2":
|
||||
"integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
|
||||
"resolved" "https://registry.npmmirror.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
|
||||
"version" "3.3.2"
|
||||
dependencies:
|
||||
"react-is" "^16.7.0"
|
||||
|
||||
"hoopy@^0.1.4":
|
||||
"integrity" "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ=="
|
||||
"resolved" "https://registry.npmmirror.com/hoopy/-/hoopy-0.1.4.tgz"
|
||||
@ -8070,7 +8090,7 @@
|
||||
"strip-ansi" "^6.0.1"
|
||||
"text-table" "^0.2.0"
|
||||
|
||||
"react-dom@*", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.0.0", "react-dom@>=16.11.0", "react-dom@>=16.8", "react-dom@>=16.9.0":
|
||||
"react-dom@*", "react-dom@^16.8 || ^17.0 || ^18.0", "react-dom@^18.0.0", "react-dom@^18.2.0", "react-dom@>=16.0.0", "react-dom@>=16.11.0", "react-dom@>=16.8", "react-dom@>=16.9.0":
|
||||
"integrity" "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g=="
|
||||
"resolved" "https://registry.npmmirror.com/react-dom/-/react-dom-18.2.0.tgz"
|
||||
"version" "18.2.0"
|
||||
@ -8093,6 +8113,11 @@
|
||||
"resolved" "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz"
|
||||
"version" "16.13.1"
|
||||
|
||||
"react-is@^16.7.0":
|
||||
"integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
"resolved" "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz"
|
||||
"version" "16.13.1"
|
||||
|
||||
"react-is@^17.0.1":
|
||||
"integrity" "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
"resolved" "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz"
|
||||
@ -8103,6 +8128,18 @@
|
||||
"resolved" "https://registry.npmmirror.com/react-is/-/react-is-18.2.0.tgz"
|
||||
"version" "18.2.0"
|
||||
|
||||
"react-redux@^8.0.5":
|
||||
"integrity" "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw=="
|
||||
"resolved" "https://registry.npmmirror.com/react-redux/-/react-redux-8.0.5.tgz"
|
||||
"version" "8.0.5"
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.1"
|
||||
"@types/hoist-non-react-statics" "^3.3.1"
|
||||
"@types/use-sync-external-store" "^0.0.3"
|
||||
"hoist-non-react-statics" "^3.3.2"
|
||||
"react-is" "^18.0.0"
|
||||
"use-sync-external-store" "^1.0.0"
|
||||
|
||||
"react-refresh@^0.11.0", "react-refresh@>=0.10.0 <1.0.0":
|
||||
"integrity" "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
|
||||
"resolved" "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.11.0.tgz"
|
||||
@ -8178,7 +8215,7 @@
|
||||
optionalDependencies:
|
||||
"fsevents" "^2.3.2"
|
||||
|
||||
"react@*", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=16.0.0", "react@>=16.11.0", "react@>=16.8", "react@>=16.9.0":
|
||||
"react@*", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^18.0.0", "react@^18.2.0", "react@>= 16", "react@>=16.0.0", "react@>=16.11.0", "react@>=16.8", "react@>=16.9.0":
|
||||
"integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
|
||||
"resolved" "https://registry.npmmirror.com/react/-/react-18.2.0.tgz"
|
||||
"version" "18.2.0"
|
||||
@ -8236,6 +8273,13 @@
|
||||
"indent-string" "^4.0.0"
|
||||
"strip-indent" "^3.0.0"
|
||||
|
||||
"redux@^4", "redux@^4.2.1":
|
||||
"integrity" "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w=="
|
||||
"resolved" "https://registry.npmmirror.com/redux/-/redux-4.2.1.tgz"
|
||||
"version" "4.2.1"
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.9.2"
|
||||
|
||||
"regenerate-unicode-properties@^10.1.0":
|
||||
"integrity" "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ=="
|
||||
"resolved" "https://registry.npmmirror.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz"
|
||||
@ -9393,6 +9437,11 @@
|
||||
"querystringify" "^2.1.1"
|
||||
"requires-port" "^1.0.0"
|
||||
|
||||
"use-sync-external-store@^1.0.0":
|
||||
"integrity" "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
|
||||
"resolved" "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
|
||||
"version" "1.2.0"
|
||||
|
||||
"util-deprecate@^1.0.1", "util-deprecate@^1.0.2", "util-deprecate@~1.0.1":
|
||||
"integrity" "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
|
||||
"resolved" "https://registry.npmmirror.com/util-deprecate/-/util-deprecate-1.0.2.tgz"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user