feats

public/particles/particles.json

@@ -54,7 +54,7 @@
     },
     "move": {
       "enable": true,
-      "speed": 6,
+      "speed": 2,
       "direction": "none",
       "random": false,
       "straight": false,

src/layouts/AuthLayout/index.jsx

@@ -18,8 +18,8 @@ export default (props) => {
   // const isReady = true
 
   const currentRoute = useRoute();
+  const titleTemplate = `%s - ${config.appName}`
   const pageTitle = currentRoute && currentRoute.meta ? currentRoute.meta.title : undefined;
-  const fullTitle = pageTitle ? `${pageTitle} | ${config.appName}` : config.appName;
 
   useEffect(() => {
     if (!user) {
@@ -29,8 +29,8 @@ export default (props) => {
 
   return (
     <Spin spinning={!user} size="large">
-      <Helmet>
-        <title>{fullTitle}</title>
+      <Helmet titleTemplate={titleTemplate} defaultTitle={config.appName}>
+        <title>{pageTitle}</title>
       </Helmet>
       <RequireLogin>
         <div className='main-layout'>

src/pages/login/index.jsx

@@ -1,39 +1,59 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Helmet } from "react-helmet";
 import { useModel } from '@/store';
 import LoginForm from './LoginForm';
 import LoginEffect from './Effect';
-import './style.less'
+import './style.less';
 
 const year = new Date().getFullYear();
 
 export default (props) => {
   const { config } = useModel('system');
 
-  const title = `欢迎使用${config.appName}`
-  const copyright = `${config.company} @ ${year}`
+  const baseUrl = import.meta.env.BASE_URL;
+  const title = `欢迎使用${config.appName}`;
+  const copyright = `${config.company} @ ${year}`;
+
+  useEffect(() => {
+    const oScript = document.createElement("script");
+    oScript.type = "text\/javascript";
+    oScript.onload = () => {
+      particlesJS.load('particles-js', `${baseUrl}particles/particles.json`, function() {
+        console.log('callback - particles.js config loaded');
+      });
+    }
+    document.querySelector('head').appendChild(oScript);
+    oScript.src = `${baseUrl}particles/particles.min.js`;
+
+    return () => {
+      document.querySelector('head').removeChild(oScript);
+    }
+  }, [])
 
   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">{title}</div>
-              <LoginForm />
+      <div id="particles-js"></div>
+      <div className="login-page-container">
+        <div className="login-card">
+          <div className="login-card-left">
+            <div className="login-form-box">
+              <div className="login-form">
+                <h2>登录系统</h2>
+                <div className="login-subtitle">{title}</div>
+                <LoginForm />
+              </div>
+            </div>
+            <div className="login-copyright">
+              {copyright}
             </div>
           </div>
-          <div className="login-copyright">
-            {copyright}
+          <div className="login-card-right">
+            <LoginEffect />
           </div>
         </div>
-        <div className="login-card-right">
-          <LoginEffect />
-        </div>
       </div>
     </div>
   )

src/pages/login/style.less

@@ -2,8 +2,22 @@
 .login-page {
   height: 100%;
   background: linear-gradient(#fff, #e6f7ff);
-  display: grid;
-  place-items: center;
+
+  #particles-js {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  .login-page-container {
+    height: 100%;
+    display: grid;
+    place-items: center;
+    position: relative;
+    z-index: 10;
+  }
 
   .login-card {
     width: 900px;
@@ -20,7 +34,7 @@
     background: rgba(255, 255, 255, 0.9);
   }
   .login-card-right {
-    background: rgba(0, 0, 0, .02);
+    background: #EFF6FA;
   }
 
   .login-form-box {