Merge remote-tracking branch 'origin/main'

2025-07-04 13:19:20 +00:00 · 2025-05-30 13:31:26 +08:00 · 2025-05-30 13:31:26 +08:00 · 538cc5b17c
commit 538cc5b17c
parent e33bc5428c ccd37ce4e6
9 changed files with 247 additions and 12 deletions
--- 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"
  },
--- 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):
--- a/src/frontend/public/index.html
+++ b/src/frontend/public/index.html
@ -6,6 +6,6 @@
  <title>网络管理后台</title>
 </head>
 <body>
-  <div id="root"></div>
+<div id="root"></div>
 </body>
 </html>
--- 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 = () => {
      <Flex align={'center'}>
        <Heading size={'md'}>网络管理后台</Heading>
        <Spacer />
-        <Button varint={'ghost'} color={'white'} onClick={() => navigate('/')}>
+        <NavButton varint={'ghost'} color={''} onClick={() => navigate('/')}>
          返回欢迎页
-        </Button>
+        </NavButton>
      </Flex>
    </Box>
  );
 };

-export default Header;
+export default Header;
--- a/src/frontend/src/components/ui/Card.jsx
+++ b/src/frontend/src/components/ui/Card.jsx
@ -0,0 +1,16 @@
+import { Box } from '@chakra-ui/react';
+
+const Card = ({ children, ...props }) => (
+  <Box
+    bg={'rgba(255,255,255,0.1)'}
+    backdropFilter={'blur(10px)'}
+    borderRadius={'xl'}
+    boxShadow={'lg'}
+    p={6}
+    {...props}
+  >
+    {children}
+  </Box>
+);
+
+export default Card;
--- a/src/frontend/src/components/ui/NavButton.jsx
+++ 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 }) => (
+  <MotionButton
+    whileHover={{ scale: 1.02 }}
+    whileTap={{ scale: 0.95 }}
+    colorScheme={'teal'}
+    variant={'solid'}
+    borderRadius={'lg'}
+    {...props}
+  >
+    {children}
+  </MotionButton>
+);
+
+export default NavButton;
--- 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(
      <App />
    </BrowserRouter>
  </Provider>
-)
+);
--- 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;
+export default Welcome;
--- 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;