From 18c2e699ee783efe983cfc714c843374d55390fb Mon Sep 17 00:00:00 2001
From: zhangjiming <zhangjiming@costrip.cn>
Date: Tue, 8 Apr 2025 17:13:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BB=E5=86=99=E5=BE=85=E6=9C=BA=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E6=97=B6=EF=BC=8C=E5=8A=A0=E5=85=A8=E5=B1=8Floading?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Setting.tsx              | 15 ++++++++++++++-
 src/services/apiTypes.ts           |  2 ++
 src/store/features/contextSlice.ts | 36 ++++++++++++++++++++++++++++--------
 3 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx
index 77039e4..01d5266 100644
--- a/src/pages/Setting.tsx
+++ b/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>
   );
 }
diff --git a/src/services/apiTypes.ts b/src/services/apiTypes.ts
index a0b309c..452fe3d 100644
--- a/src/services/apiTypes.ts
+++ b/src/services/apiTypes.ts
@@ -1,3 +1,5 @@
+export type ReqStatus = 'idle' | 'loading' | 'succeeded' | 'failed';
+
 export type Measurement = {
   id: number;
   name: string;
diff --git a/src/store/features/contextSlice.ts b/src/store/features/contextSlice.ts
index d5f5bb1..21fa59f 100644
--- a/src/store/features/contextSlice.ts
+++ b/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) {