feats

package.json

@@ -14,6 +14,7 @@
     "antd": "^4.22.3",
     "react": "18.1.0",
     "react-dom": "18.1.0",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "6",
     "react-transition-group": "^4.4.5"
   },

pnpm-lock.yaml

@@ -10,6 +10,7 @@ specifiers:
   less: ^4.1.3
   react: 18.1.0
   react-dom: 18.1.0
+  react-helmet: ^6.1.0
   react-router-dom: '6'
   react-transition-group: ^4.4.5
   vite: ^3.0.0
@@ -21,6 +22,7 @@ dependencies:
   antd: registry.npmmirror.com/antd/4.22.3_ef5jwxihqo6n7gxfmzogljlgcm
   react: registry.npmmirror.com/react/18.1.0
   react-dom: registry.npmmirror.com/react-dom/18.1.0_react@18.1.0
+  react-helmet: registry.npmmirror.com/react-helmet/6.1.0_react@18.1.0
   react-router-dom: registry.npmmirror.com/react-router-dom/6.3.0_ef5jwxihqo6n7gxfmzogljlgcm
   react-transition-group: registry.npmmirror.com/react-transition-group/4.4.5_ef5jwxihqo6n7gxfmzogljlgcm
 
@@ -2089,6 +2091,27 @@ packages:
       scheduler: registry.npmmirror.com/scheduler/0.22.0
     dev: false
 
+  registry.npmmirror.com/react-fast-compare/3.2.0:
+    resolution: {integrity: sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz}
+    name: react-fast-compare
+    version: 3.2.0
+    dev: false
+
+  registry.npmmirror.com/react-helmet/6.1.0_react@18.1.0:
+    resolution: {integrity: sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-helmet/-/react-helmet-6.1.0.tgz}
+    id: registry.npmmirror.com/react-helmet/6.1.0
+    name: react-helmet
+    version: 6.1.0
+    peerDependencies:
+      react: '>=16.3.0'
+    dependencies:
+      object-assign: registry.npmmirror.com/object-assign/4.1.1
+      prop-types: registry.npmmirror.com/prop-types/15.8.1
+      react: registry.npmmirror.com/react/18.1.0
+      react-fast-compare: registry.npmmirror.com/react-fast-compare/3.2.0
+      react-side-effect: registry.npmmirror.com/react-side-effect/2.1.2_react@18.1.0
+    dev: false
+
   registry.npmmirror.com/react-is/16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz}
     name: react-is
@@ -2129,6 +2152,17 @@ packages:
       react: registry.npmmirror.com/react/18.1.0
     dev: false
 
+  registry.npmmirror.com/react-side-effect/2.1.2_react@18.1.0:
+    resolution: {integrity: sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-side-effect/-/react-side-effect-2.1.2.tgz}
+    id: registry.npmmirror.com/react-side-effect/2.1.2
+    name: react-side-effect
+    version: 2.1.2
+    peerDependencies:
+      react: ^16.3.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: registry.npmmirror.com/react/18.1.0
+    dev: false
+
   registry.npmmirror.com/react-transition-group/4.4.5_ef5jwxihqo6n7gxfmzogljlgcm:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/react-transition-group/-/react-transition-group-4.4.5.tgz}
     id: registry.npmmirror.com/react-transition-group/4.4.5

public/particles/particles.json

@@ -0,0 +1,110 @@
+{
+  "particles": {
+    "number": {
+      "value": 80,
+      "density": {
+        "enable": true,
+        "value_area": 800
+      }
+    },
+    "color": {
+      "value": "#1890ff"
+    },
+    "shape": {
+      "type": "circle",
+      "stroke": {
+        "width": 0,
+        "color": "#000000"
+      },
+      "polygon": {
+        "nb_sides": 5
+      },
+      "image": {
+        "src": "img/github.svg",
+        "width": 100,
+        "height": 100
+      }
+    },
+    "opacity": {
+      "value": 0.5,
+      "random": false,
+      "anim": {
+        "enable": false,
+        "speed": 1,
+        "opacity_min": 0.1,
+        "sync": false
+      }
+    },
+    "size": {
+      "value": 3,
+      "random": true,
+      "anim": {
+        "enable": false,
+        "speed": 40,
+        "size_min": 0.1,
+        "sync": false
+      }
+    },
+    "line_linked": {
+      "enable": true,
+      "distance": 150,
+      "color": "#1890ff",
+      "opacity": 0.4,
+      "width": 1
+    },
+    "move": {
+      "enable": true,
+      "speed": 6,
+      "direction": "none",
+      "random": false,
+      "straight": false,
+      "out_mode": "out",
+      "bounce": false,
+      "attract": {
+        "enable": false,
+        "rotateX": 600,
+        "rotateY": 1200
+      }
+    }
+  },
+  "interactivity": {
+    "detect_on": "canvas",
+    "events": {
+      "onhover": {
+        "enable": false,
+        "mode": "repulse"
+      },
+      "onclick": {
+        "enable": false,
+        "mode": "push"
+      },
+      "resize": true
+    },
+    "modes": {
+      "grab": {
+        "distance": 400,
+        "line_linked": {
+          "opacity": 1
+        }
+      },
+      "bubble": {
+        "distance": 400,
+        "size": 40,
+        "duration": 2,
+        "opacity": 8,
+        "speed": 3
+      },
+      "repulse": {
+        "distance": 200,
+        "duration": 0.4
+      },
+      "push": {
+        "particles_nb": 4
+      },
+      "remove": {
+        "particles_nb": 2
+      }
+    }
+  },
+  "retina_detect": true
+}

src/components/page/index.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import { PageHeader } from 'antd';
-import { useLocation } from "react-router-dom";
-import { getRouteArr } from '@/routes/menus';
+import useRoute from '@/routes/useRoute';
 import './style.less'
 
 export default (props) => {
   const { children, ...headerProps } = props;
 
-  const location = useLocation();
-  const routeArr = getRouteArr();
-
-  const currentRoute = routeArr.filter(x => x.path === location.pathname)[0] || {};
+  const currentRoute = useRoute() || {};
   const { title } = currentRoute.meta || {};
 
   return (

src/layouts/AuthLayout/components/Header/Logo.jsx

@@ -8,7 +8,7 @@ export default (props) => {
   return (
     <div className='logo'>
       <img src="./logo.png" alt="" />
-      <h3>{config.appName}</h3>
+      <h3>{config.shorName}</h3>
     </div>
   )
 }

src/layouts/AuthLayout/index.jsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useMemo, useState } from 'react';
 import { Layout, Spin } from 'antd';
-import { useModel } from '@/store'
+import { Helmet } from "react-helmet";
+import { useModel } from '@/store';
+import useRoute from '@/routes/useRoute';
 import RequireLogin from './components/RequireLogin';
 import SiderBar from './components/SiderBar';
 import Header from './components/Header';
@@ -10,10 +12,14 @@ import useReady from './useReady';
 import './style.less';
 
 export default (props) => {
+  const { config } = useModel('system');
   const { user, getCurrent } = useModel('user');
   // const isReady = useReady(user)
   // const isReady = true
 
+  const currentRoute = useRoute();
+  const pageTitle = currentRoute && currentRoute.meta ? currentRoute.meta.title : undefined;
+  const fullTitle = pageTitle ? `${pageTitle} | ${config.appName}` : config.appName;
 
   useEffect(() => {
     if (!user) {
@@ -23,6 +29,9 @@ export default (props) => {
 
   return (
     <Spin spinning={!user} size="large">
+      <Helmet>
+        <title>{fullTitle}</title>
+      </Helmet>
       <RequireLogin>
         <div className='main-layout'>
           <Header />

src/pages/404/index.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Button, Result } from 'antd';
+import { Helmet } from "react-helmet";
 import { NavLink } from "react-router-dom";
+import { useModel } from '@/store';
 
 const style = {
   display: 'grid',
@@ -9,8 +11,13 @@ const style = {
 }
 
 export default (props) => {
+  const { config } = useModel('system');
+
   return (
     <div style={style}>
+      <Helmet>
+        <title>{config.appName}</title>
+      </Helmet>
       <Result
         status="404"
         title="404"

src/pages/login/index.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { Helmet } from "react-helmet";
+import { useModel } from '@/store';
 import LoginForm from './LoginForm';
 import LoginEffect from './Effect';
 import './style.less'
@@ -6,19 +8,27 @@ import './style.less'
 const year = new Date().getFullYear();
 
 export default (props) => {
+  const { config } = useModel('system');
+
+  const title = `欢迎使用${config.appName}`
+  const copyright = `${config.company} @ ${year}`
+
   return (
     <div className='login-page'>
+      <Helmet>
+        <title>{config.appName}</title>
+      </Helmet>
       <div className="login-card">
         <div className="login-card-left">
           <div className="login-form-box">
             <div className="login-form">
               <h2>登录系统</h2>
-              <div className="login-subtitle">欢迎使用云致管理系统</div>
+              <div className="login-subtitle">{title}</div>
               <LoginForm />
             </div>
           </div>
           <div className="login-copyright">
-          南京云致 @ {year}
+            {copyright}
           </div>
         </div>
         <div className="login-card-right">

src/pages/login/style.less

@@ -28,10 +28,15 @@
     display: grid;
     place-items: center;
 
+    .login-form {
+      min-width: 280px;
+    }
+
     .login-subtitle {
       font-size: .9em;
       color: #666;
       margin-bottom: 24px;
+      letter-spacing: 2px;
     }
   }
 
@@ -41,8 +46,8 @@
     place-items: center;
 
     .login-effect {
-      width: 120px;
-      height: 120px;
+      width: 180px;
+      height: 180px;
       position: relative;
     }
 

src/routes/useRoute.jsx

@@ -0,0 +1,11 @@
+import { useLocation } from "react-router-dom";
+import { getRouteArr } from './menus';
+
+export default function useRoute() {
+  const location = useLocation();
+  const routeArr = getRouteArr();
+
+  const currentRoute = routeArr.filter(x => x.path === location.pathname)[0];
+
+  return currentRoute;
+}

src/store/models/system.js

@@ -8,7 +8,9 @@ const setRootCssVar = (key, val) => {
 export default function useSystem() {
   const [theme, setTheme] = useState('light');
   const [config, setConfig] = useState({
-    appName: '云致科技',
+    appName: '云致科技信息管理系统',
+    shorName: '云致科技',
+    company: '云致科技'
   });
 
   const updateTheme = useCallback((t) => {