[dev]login

src/components/LoadingOverlay.jsx

@@ -1,7 +1,9 @@
 import { Spinner } from 'react-bootstrap';
 
-export default function LoadingOverlay({ status }) {
-    if (status !== 'loading') return null;
+export default function LoadingOverlay({ loading }) {
+    if (!loading) return null;
+
+    
     return (
         <div style={styles.overlay}>
             <Spinner animation='border' role='status' variant='primary' style={{ width: '3rem', height: '3rem' }}>
@@ -12,12 +14,12 @@ export default function LoadingOverlay({ status }) {
 }
 const styles = {
     overlay: {
-        position: 'absolute', // 可改为 fixed 实现全屏
+        position: 'fixed',
         top: 0,
         left: 0,
         width: '100%',
         height: '100%',
-        backgroundColor: 'rgba(255, 255, 255, 0.6)', // 半透明背景
+        backgroundColor: 'rgba(255, 255, 255, 0.6)',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',

src/pages/Login.jsx

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { loginThunk } from '../store/slices/authSlice';
+import LoadingOverlay from '../components/LoadingOverlay';
 
 export default function Login() {
     const [formData, setFormData] = useState({
@@ -39,9 +40,9 @@ export default function Login() {
         }
         return true;
     };
-
     return (
         <div className='login-container'>
+            <LoadingOverlay loading={isLoading} />
             <div className='title'>Creator Center</div>
             <Form className='login-form' onSubmit={handleSubmit}>
                 {/* <Form.Group>

src/store/slices/authSlice.js

@@ -1,16 +1,19 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import api from '@/services/api';
+import { setNotificationBarMessage } from './notificationBarSlice';
 
-export const loginThunk = createAsyncThunk('auth/login', async (credentials, { rejectWithValue }) => {
+
+export const loginThunk = createAsyncThunk('auth/login', async (credentials, { rejectWithValue, dispatch }) => {
     try {
         const response = await api.post('/user/login/', credentials);
         if (response.code === 200) {
             sessionStorage.setItem('token', response.data.token);
             return response.data;
         } else {
-            return rejectWithValue(response.message);
+            throw new Error(response.message);
         }
     } catch (error) {
+        dispatch(setNotificationBarMessage({ message: error.message, type: 'error' }));
         return rejectWithValue(error.message);
     }
 });