fix: login page css and error show

src/layouts/UserLayout.jsx

@@ -5,7 +5,7 @@ import React from 'react'
 import logo from '../assets/logo.svg'
 import styles from './UserLayout.less'
 
-const UserLayout = (props) => {
+const UserLayout = props => {
   const {
     route = {
       routes: []
@@ -40,16 +40,11 @@ const UserLayout = (props) => {
         <div className={styles.content}>
           <div className={styles.top}>
             <div className={styles.header}>
-              <Link to="/">
-                <img alt="logo" className={styles.logo} src={logo} />
-                <span className={styles.title}>CLD.SystemV2</span>
-              </Link>
+              <img alt="logo" className={styles.logo} src={logo} />
+              <span className={styles.title}>CLD.SystemV2</span>
             </div>
             <div className={styles.desc}>
-              <FormattedMessage
-                id="pages.layouts.userLayout.title"
-                defaultMessage="纵横办公系统"
-              />
+              <FormattedMessage id="pages.layouts.userLayout.title" defaultMessage="纵横办公系统" />
             </div>
           </div>
           {children}

src/layouts/UserLayout.less

@@ -43,9 +43,7 @@
 .header {
   height: 44px;
   line-height: 44px;
-  a {
-    text-decoration: none;
-  }
+  @apply flex justify-center items-center;
 }
 
 .logo {

src/models/login.js

@@ -19,7 +19,7 @@ const Model = {
       const response = yield call(apiLogin, payload)
       yield put({
         type: 'changeLoginStatus',
-        payload: response
+        payload: response?.code
       }) // Login successfully
 
       if (response && response.code === consts.RET_CODE.SUCCESS) {

src/pages/user/login/index.jsx

@@ -1,17 +1,9 @@
-import {
-  // AlipayCircleOutlined,
-  LockTwoTone,
-  MailTwoTone,
-  MobileTwoTone,
-  // TaobaoCircleOutlined,
-  UserOutlined
-  // WeiboCircleOutlined,
-} from '@ant-design/icons'
-import { Alert, message, Tabs } from 'antd'
+import { LockTwoTone, UserOutlined } from '@ant-design/icons'
+import { Alert, Tabs } from 'antd'
 import React, { useState } from 'react'
-import ProForm, { ProFormCaptcha, ProFormCheckbox, ProFormText } from '@ant-design/pro-form'
+import ProForm, { ProFormCheckbox, ProFormText } from '@ant-design/pro-form'
 import { connect, useIntl, FormattedMessage } from 'umi'
-import { getFakeCaptcha } from '@/services/login'
+// import { getFakeCaptcha } from '@/services/login'
 import styles from './index.less'
 import consts from '@/consts'
 
@@ -78,7 +70,7 @@ const Login = props => {
           /> */}
         </Tabs>
 
-        {status !== consts.RET_CODE.SUCCESS && !submitting && (
+        {status && status !== consts.RET_CODE.SUCCESS && !submitting && (
           <LoginMessage
             content={intl.formatMessage({
               id: 'pages.login.accountLogin.errorMessage',

windi.config.js

@@ -1,4 +1,75 @@
 // windi.config.js
 import { defineConfig } from 'windicss/helpers'
+import lineClamp from 'windicss/plugin/line-clamp'
+import colors from 'windicss/colors'
+import proSettings from 'config/defaultSettings'
 
-export default defineConfig({})
+export default defineConfig({
+  darkMode: 'class',
+  plugins: [lineClamp, createEnterPlugin()],
+  theme: {
+    extend: {
+      colors: {
+        ...colors,
+        primary: proSettings.primaryColor
+      },
+      screens: {
+        sm: '576px',
+        md: '768px',
+        lg: '992px',
+        xl: '1200px',
+        '2xl': '1600px'
+      }
+    }
+  }
+})
+
+/**
+ * Used for animation when the element is displayed
+ * @param maxOutput The larger the maxOutput output, the larger the generated css volume
+ */
+function createEnterPlugin(maxOutput = 10) {
+  const createCss = (index, d = 'x') => {
+    const upd = d.toUpperCase()
+    return {
+      [`*> .enter-${d}:nth-child(${index})`]: {
+        transform: `translate${upd}(50px)`
+      },
+      [`*> .-enter-${d}:nth-child(${index})`]: {
+        transform: `translate${upd}(-50px)`
+      },
+      [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
+        'z-index': `${10 - index}`,
+        opacity: '0',
+        animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
+        'animation-fill-mode': 'forwards',
+        'animation-delay': `${(index * 1) / 10}s`
+      }
+    }
+  }
+  const handler = ({ addBase }) => {
+    const addRawCss = {}
+    for (let index = 1; index < maxOutput; index++) {
+      Object.assign(addRawCss, {
+        ...createCss(index, 'x'),
+        ...createCss(index, 'y')
+      })
+    }
+    addBase({
+      ...addRawCss,
+      [`@keyframes enter-x-animation`]: {
+        to: {
+          opacity: '1',
+          transform: 'translateX(0)'
+        }
+      },
+      [`@keyframes enter-y-animation`]: {
+        to: {
+          opacity: '1',
+          transform: 'translateY(0)'
+        }
+      }
+    })
+  }
+  return { handler }
+}