读写待机时间时，加全屏loading

src/pages/Setting.tsx

@@ -1,4 +1,4 @@
-import { NavBar, Picker, Toast } from 'antd-mobile';
+import { Mask, NavBar, Picker, SpinLoading, Toast } from 'antd-mobile';
 import icon_arr_r from '../assets/icon_arr_s_r.svg';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
@@ -37,6 +37,12 @@ export default function Setting() {
     dispatch(fetchConfig());
   }, [dispatch]);
 
+  useEffect(() => {
+    if (context.settingReqStatus === 'failed' && context.error) {
+      Toast.show(context.error);
+    }
+  }, [context.error, context.settingReqStatus]);
+
   const onSaveClick = async () => {
     const server = addrInput.current!.value;
     const res = await dispatch(saveConfig({ server, standbyMinutes: selectStandby[0] })).unwrap();
@@ -108,6 +114,13 @@ export default function Setting() {
           setSelectStandby(v as number[]);
         }}
       />
+
+      <Mask visible={context.settingReqStatus === 'loading'}>
+        <SpinLoading
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+          color="white"
+        />
+      </Mask>
     </div>
   );
 }

src/services/apiTypes.ts

@@ -1,3 +1,5 @@
+export type ReqStatus = 'idle' | 'loading' | 'succeeded' | 'failed';
+
 export type Measurement = {
   id: number;
   name: string;

src/store/features/contextSlice.ts

@@ -7,7 +7,7 @@ import {
 } from '../../services/mobileWsType';
 import Bridge from '../../utils/bridge';
 import { RootState } from '..';
-import { SettingDTO } from '../../services/apiTypes';
+import { ReqStatus, SettingDTO } from '../../services/apiTypes';
 
 interface ContextState {
   device: PeripheralStatus['data'];
@@ -21,6 +21,8 @@ interface ContextState {
   syncItems: Array<SyncItemFinish['data']>;
 
   setting: SettingDTO;
+  settingReqStatus: ReqStatus;
+  error: string | null;
 }
 
 const orgGwdXmStr = localStorage.getItem('org_gwd_xm');
@@ -57,19 +59,21 @@ const initialState: ContextState = {
     server: '',
     standbyMinutes: 20,
   },
+  settingReqStatus: 'idle',
+  error: null,
 };
 
-export const fetchConfig = createAsyncThunk('context/fetchConfig', async () => {
+export const fetchConfig = createAsyncThunk('context/fetchConfig', async (_, thunkAPI) => {
   const conf = await Bridge.getConfig();
-  return conf.success ? conf.data : null;
+  return conf.success ? conf.data : Promise.reject(conf.message);
 });
 
 export const saveConfig = createAsyncThunk(
   'context/saveConfig',
   async (param: SettingDTO, thunkAPI) => {
     const res = await Bridge.saveConfig(param);
-    res.success && thunkAPI.dispatch(fetchConfig());
-    return res;
+    // res.success && thunkAPI.dispatch(fetchConfig());
+    return res.success ? res : Promise.reject(res.message);
   }
 );
 
@@ -115,10 +119,26 @@ export const contextSlice = createSlice({
     },
   },
   extraReducers: (builder) => {
+    builder.addCase(fetchConfig.pending, (state) => {
+      state.settingReqStatus = 'loading';
+    });
     builder.addCase(fetchConfig.fulfilled, (state, action) => {
-      if (action.payload) {
-        state.setting = action.payload;
-      }
+      state.setting = action.payload;
+      state.settingReqStatus = 'succeeded';
+    });
+    builder.addCase(fetchConfig.rejected, (state, action) => {
+      state.settingReqStatus = 'failed';
+      state.error = action.payload as string;
+    });
+    builder.addCase(saveConfig.pending, (state) => {
+      state.settingReqStatus = 'loading';
+    });
+    builder.addCase(saveConfig.fulfilled, (state, action) => {
+      state.settingReqStatus = 'succeeded';
+    });
+    builder.addCase(saveConfig.rejected, (state, action) => {
+      state.settingReqStatus = 'failed';
+      state.error = action.payload as string;
     });
     builder.addCase(refreshSyncProgress.fulfilled, (state, action) => {
       if (action.payload) {