diff --git a/src/frontend/package.json b/src/frontend/package.json index 6ddf1a7..6b16ca8 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -1,7 +1,7 @@ { "name": "network-admin-frontend", "version": "0.1.0", - "private": true, + "private": false, "dependencies": { "@chakra-ui/react": "^3.19.1", "@emotion/react": "^11.14.0", @@ -19,6 +19,7 @@ "react-router-dom": "^7.6.1", "react-scripts": "^5.0.1", "recharts": "^2.15.3", + "styled-components": "^6.1.18", "web-vitals": "^2.1.4", "webpack": "^5.99.9" }, diff --git a/src/frontend/pnpm-lock.yaml b/src/frontend/pnpm-lock.yaml index 49aa48a..635456d 100644 --- a/src/frontend/pnpm-lock.yaml +++ b/src/frontend/pnpm-lock.yaml @@ -56,6 +56,9 @@ importers: recharts: specifier: ^2.15.3 version: 2.15.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + styled-components: + specifier: ^6.1.18 + version: 6.1.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0) web-vitals: specifier: ^2.1.4 version: 2.1.4 @@ -919,9 +922,15 @@ packages: '@emotion/hash@0.9.2': resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==} + '@emotion/is-prop-valid@1.2.2': + resolution: {integrity: sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==} + '@emotion/is-prop-valid@1.3.1': resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==} + '@emotion/memoize@0.8.1': + resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} + '@emotion/memoize@0.9.0': resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==} @@ -953,6 +962,9 @@ packages: '@emotion/unitless@0.10.0': resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==} + '@emotion/unitless@0.8.1': + resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==} + '@emotion/use-insertion-effect-with-fallbacks@1.2.0': resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==} peerDependencies: @@ -1459,6 +1471,9 @@ packages: '@types/stack-utils@2.0.3': resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==} + '@types/stylis@4.2.5': + resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==} + '@types/trusted-types@2.0.7': resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==} @@ -2166,6 +2181,9 @@ packages: resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} engines: {node: '>=10'} + camelize@1.0.1: + resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} + caniuse-api@3.0.0: resolution: {integrity: sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==} @@ -2359,6 +2377,10 @@ packages: peerDependencies: postcss: ^8.4 + css-color-keywords@1.0.0: + resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==} + engines: {node: '>=4'} + css-declaration-sorter@6.4.1: resolution: {integrity: sha512-rtdthzxKuyq6IzqX6jEcIzQF/YqccluefyCYheovBOLhFT/drQA9zj/UbRAa9J7C0o6EG6u3E6g+vKkay7/k3g==} engines: {node: ^10 || ^12 || >=14} @@ -2419,6 +2441,9 @@ packages: css-select@4.3.0: resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==} + css-to-react-native@3.2.0: + resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==} + css-tree@1.0.0-alpha.37: resolution: {integrity: sha512-DMxWJg0rnz7UgxKT0Q1HU/L9BeJI0M6ksor0OgqOnF+aRCDWg/N2641HmVyU9KVIu0OVVWOb2IpC9A+BJRnejg==} engines: {node: '>=8.0.0'} @@ -4852,6 +4877,10 @@ packages: resolution: {integrity: sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==} engines: {node: '>=6.0.0'} + postcss@8.4.49: + resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} + engines: {node: ^10 || ^12 || >=14} + postcss@8.5.3: resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==} engines: {node: ^10 || ^12 || >=14} @@ -5314,6 +5343,9 @@ packages: setprototypeof@1.2.0: resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==} + shallowequal@1.1.0: + resolution: {integrity: sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==} + shebang-command@2.0.0: resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} engines: {node: '>=8'} @@ -5521,6 +5553,13 @@ packages: peerDependencies: webpack: ^5.0.0 + styled-components@6.1.18: + resolution: {integrity: sha512-Mvf3gJFzZCkhjY2Y/Fx9z1m3dxbza0uI9H1CbNZm/jSHCojzJhQ0R7bByrlFJINnMzz/gPulpoFFGymNwrsMcw==} + engines: {node: '>= 16'} + peerDependencies: + react: '>= 16.8.0' + react-dom: '>= 16.8.0' + stylehacks@5.1.1: resolution: {integrity: sha512-sBpcd5Hx7G6seo7b1LkpttvTz7ikD0LlH5RmdcBNb6fFR0Fl7LQwHDFr300q4cwUqi+IYrFGmsIHieMBfnN/Bw==} engines: {node: ^10 || ^12 || >=14.0} @@ -5530,6 +5569,9 @@ packages: stylis@4.2.0: resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==} + stylis@4.3.2: + resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==} + sucrase@3.35.0: resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} engines: {node: '>=16 || 14 >=14.17'} @@ -5675,6 +5717,9 @@ packages: tslib@1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} + tslib@2.6.2: + resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} + tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} @@ -7167,10 +7212,16 @@ snapshots: '@emotion/hash@0.9.2': {} + '@emotion/is-prop-valid@1.2.2': + dependencies: + '@emotion/memoize': 0.8.1 + '@emotion/is-prop-valid@1.3.1': dependencies: '@emotion/memoize': 0.9.0 + '@emotion/memoize@0.8.1': {} + '@emotion/memoize@0.9.0': {} '@emotion/react@11.14.0(react@19.1.0)': @@ -7212,6 +7263,8 @@ snapshots: '@emotion/unitless@0.10.0': {} + '@emotion/unitless@0.8.1': {} + '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.1.0)': dependencies: react: 19.1.0 @@ -7873,6 +7926,8 @@ snapshots: '@types/stack-utils@2.0.3': {} + '@types/stylis@4.2.5': {} + '@types/trusted-types@2.0.7': {} '@types/ws@8.18.1': @@ -9006,6 +9061,8 @@ snapshots: camelcase@6.3.0: {} + camelize@1.0.1: {} + caniuse-api@3.0.0: dependencies: browserslist: 4.24.5 @@ -9188,6 +9245,8 @@ snapshots: postcss: 8.5.3 postcss-selector-parser: 6.1.2 + css-color-keywords@1.0.0: {} + css-declaration-sorter@6.4.1(postcss@8.5.3): dependencies: postcss: 8.5.3 @@ -9241,6 +9300,12 @@ snapshots: domutils: 2.8.0 nth-check: 2.1.1 + css-to-react-native@3.2.0: + dependencies: + camelize: 1.0.1 + css-color-keywords: 1.0.0 + postcss-value-parser: 4.2.0 + css-tree@1.0.0-alpha.37: dependencies: mdn-data: 2.0.4 @@ -12073,6 +12138,12 @@ snapshots: picocolors: 0.2.1 source-map: 0.6.1 + postcss@8.4.49: + dependencies: + nanoid: 3.3.11 + picocolors: 1.1.1 + source-map-js: 1.2.1 + postcss@8.5.3: dependencies: nanoid: 3.3.11 @@ -12674,6 +12745,8 @@ snapshots: setprototypeof@1.2.0: {} + shallowequal@1.1.0: {} + shebang-command@2.0.0: dependencies: shebang-regex: 3.0.0 @@ -12907,6 +12980,20 @@ snapshots: dependencies: webpack: 5.99.9 + styled-components@6.1.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0): + dependencies: + '@emotion/is-prop-valid': 1.2.2 + '@emotion/unitless': 0.8.1 + '@types/stylis': 4.2.5 + css-to-react-native: 3.2.0 + csstype: 3.1.3 + postcss: 8.4.49 + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) + shallowequal: 1.1.0 + stylis: 4.3.2 + tslib: 2.6.2 + stylehacks@5.1.1(postcss@8.5.3): dependencies: browserslist: 4.24.5 @@ -12915,6 +13002,8 @@ snapshots: stylis@4.2.0: {} + stylis@4.3.2: {} + sucrase@3.35.0: dependencies: '@jridgewell/gen-mapping': 0.3.8 @@ -13093,6 +13182,8 @@ snapshots: tslib@1.14.1: {} + tslib@2.6.2: {} + tslib@2.8.1: {} tsutils@3.21.0(typescript@4.9.5): diff --git a/src/frontend/public/index.html b/src/frontend/public/index.html index 1bef530..8428f1b 100644 --- a/src/frontend/public/index.html +++ b/src/frontend/public/index.html @@ -6,6 +6,6 @@ 网络管理后台 -
+
diff --git a/src/frontend/src/components/Header.jsx b/src/frontend/src/components/Header.jsx index f31f811..985db0c 100644 --- a/src/frontend/src/components/Header.jsx +++ b/src/frontend/src/components/Header.jsx @@ -1,6 +1,7 @@ import React from 'react'; -import { Box, Flex, Heading, Spacer, Button } from '@chakra-ui/react'; +import { Box, Flex, Heading, Spacer, Button, Card } from '@chakra-ui/react'; import { useNavigate } from 'react-router-dom'; +import NavButton from '@/components/ui/NavButton'; const Header = () => { const navigate = useNavigate(); @@ -9,12 +10,12 @@ const Header = () => { 网络管理后台 - + ); }; -export default Header; \ No newline at end of file +export default Header; diff --git a/src/frontend/src/components/ui/Card.jsx b/src/frontend/src/components/ui/Card.jsx new file mode 100644 index 0000000..13991aa --- /dev/null +++ b/src/frontend/src/components/ui/Card.jsx @@ -0,0 +1,16 @@ +import { Box } from '@chakra-ui/react'; + +const Card = ({ children, ...props }) => ( + + {children} + +); + +export default Card; diff --git a/src/frontend/src/components/ui/NavButton.jsx b/src/frontend/src/components/ui/NavButton.jsx new file mode 100644 index 0000000..419f2e2 --- /dev/null +++ b/src/frontend/src/components/ui/NavButton.jsx @@ -0,0 +1,19 @@ +import { Button } from '@chakra-ui/react'; +import { motion } from 'framer-motion'; + +const MotionButton = motion(Button); + +const NavButton = ({ children, ...props }) => ( + + {children} + +); + +export default NavButton; diff --git a/src/frontend/src/index.js b/src/frontend/src/index.js index 5ac5ed0..f420add 100644 --- a/src/frontend/src/index.js +++ b/src/frontend/src/index.js @@ -1,8 +1,9 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App' +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import App from '@/App'; import { BrowserRouter } from 'react-router-dom'; -import {Provider} from './components/ui/provider' +import { Provider } from '@/components/ui/provider'; +import system from '@/theme'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( @@ -11,4 +12,4 @@ root.render( -) +); diff --git a/src/frontend/src/pages/Welcome.jsx b/src/frontend/src/pages/Welcome.jsx index 35a6043..88019ea 100644 --- a/src/frontend/src/pages/Welcome.jsx +++ b/src/frontend/src/pages/Welcome.jsx @@ -1,6 +1,7 @@ import React from 'react'; import { Box, Button, Heading, VStack } from '@chakra-ui/react'; import { useNavigate } from 'react-router-dom'; +import Card from '@/components/ui/Card'; const Welcome = () => { const navigate = useNavigate(); @@ -18,4 +19,4 @@ const Welcome = () => { ); }; -export default Welcome; \ No newline at end of file +export default Welcome; diff --git a/src/frontend/src/theme.js b/src/frontend/src/theme.js index e69de29..c07a082 100644 --- a/src/frontend/src/theme.js +++ b/src/frontend/src/theme.js @@ -0,0 +1,105 @@ +import { defineConfig, createSystem, defaultConfig } from '@chakra-ui/react'; + +const config = defineConfig({ + cssVarsRoot: ':where(:root, :host)', + cssVarsPrefix: 'ck', + strictTokens: false, + + globalCss: { + 'html, body': { + margin: 0, + padding: 0, + fontFamily: "'Roboto', sans-serif", + backgroundColor: '{colors.bg}', + color: '{colors.text}', + }, + }, + + conditions: { + cqSm: '@container(min-width: 320px)', + child: '& > *', + }, + + theme: { + breakpoints: { + sm: '320px', + md: '768px', + lg: '960px', + xl: '1200px', + }, + + tokens: { + colors: { + bg: '#f9fafb', + text: '#1a202c', + primary: '#319795', + red: '#E53E3E', + muted: '#718096', + }, + radii: { + md: '12px', + lg: '24px', + }, + shadows: { + soft: '0 4px 12px rgba(0, 0, 0, 0.1)', + }, + }, + + semanticTokens: { + colors: { + danger: { value: '{colors.red}' }, + primary: { value: '{colors.primary}' }, + background: { value: '{colors.bg}' }, + }, + }, + + keyframes: { + fadeIn: { + from: { opacity: 0 }, + to: { opacity: 1 }, + }, + spin: { + from: { transform: 'rotate(0deg)' }, + to: { transform: 'rotate(360deg)' }, + }, + }, + + animationStyles: { + fadeIn: { + animation: 'fadeIn 0.3s ease-in', + }, + spinSlow: { + animation: 'spin 3s linear infinite', + }, + }, + + textStyles: { + heading: { + description: 'Page heading', + value: { + fontSize: '2xl', + fontWeight: 'bold', + }, + }, + body: { + value: { + fontSize: 'md', + lineHeight: '1.5', + }, + }, + }, + + layerStyles: { + card: { + bg: 'white', + boxShadow: 'soft', + borderRadius: 'md', + p: '4', + }, + }, + }, +}); + +const system = createSystem(defaultConfig, config); + +export default system;