设置 mock

src/pages/Setting.tsx

@@ -1,21 +1,42 @@
 import { NavBar } from 'antd-mobile';
 import icon_arr_r from '../assets/icon_arr_s_r.svg';
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router';
+import { useAppDispatch, useAppSelector } from '../utils/hooks';
+import { fetchConfig, saveConfig } from '../store/features/contextSlice';
 
 export default function Setting() {
   const navigate = useNavigate();
-  const [addr, setAddr] = useState('');
+  const dispatch = useAppDispatch();
+  const context = useAppSelector((state) => state.context);
+
+  const addrInput = useRef<HTMLInputElement>(null);
+  // const [addr, setAddr] = useState('');
   // const [port, setPort] = useState<number>(80);
 
-  const onAddrChange = (evt: ChangeEvent<HTMLInputElement>) => {
-    setAddr(evt.target.value);
-  };
+  // const onAddrChange = (evt: ChangeEvent<HTMLInputElement>) => {
+  //   setAddr(evt.target.value);
+  // };
   // const onPortChange = (evt: ChangeEvent<HTMLInputElement>) => {
   //   if (/^\d*$/.test(evt.target.value)) {
   //     setPort(+evt.target.value);
   //   }
   // };
+  useEffect(() => {
+    dispatch(fetchConfig());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (addrInput.current) {
+      addrInput.current!.value = context.setting.server;
+    }
+  }, [context.setting.server]);
+
+  const onSaveClick = () => {
+    const server = addrInput.current!.value;
+    dispatch(saveConfig({ server }));
+  };
+
   const back = () => navigate(-1);
   return (
     <div>
@@ -33,16 +54,20 @@ export default function Setting() {
             <div className="h-12 flex items-center">
               <span>服务地址</span>
               <input
+                ref={addrInput}
                 type="text"
-                value={addr}
-                onChange={onAddrChange}
                 placeholder="请填写"
                 className="border-0 outline-none self-stretch text-right flex-1 ml-4"
               />
             </div>
           </div>
         </section>
-        <div className="btn-contained rounded-md h-12 mx-9 my-8 text-base font-medium">保存</div>
+        <div
+          className="btn-contained rounded-md h-12 mx-9 my-8 text-base font-medium"
+          onClick={onSaveClick}
+        >
+          保存
+        </div>
       </div>
     </div>
   );

src/store/features/contextSlice.ts

@@ -1,5 +1,11 @@
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { BleList, PeripheralStatus, SyncItemFinish, SyncProgress } from '../../services/mobileWsType';
+import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
+import {
+  BleList,
+  PeripheralStatus,
+  SyncItemFinish,
+  SyncProgress,
+} from '../../services/mobileWsType';
+import Bridge from '../../utils/bridge';
 
 interface ContextState {
   device: PeripheralStatus['data'];
@@ -8,9 +14,13 @@ interface ContextState {
   currGWDCode: string; // 工务段
   currXMCode: string; // 线名
 
-  bleList: BleList["data"];
-  syncProgress: SyncProgress["data"];
-  syncItems: Array<SyncItemFinish["data"]>
+  bleList: BleList['data'];
+  syncProgress: SyncProgress['data'];
+  syncItems: Array<SyncItemFinish['data']>;
+
+  setting: {
+    server: string;
+  };
 }
 
 const orgGwdXmStr = localStorage.getItem('org_gwd_xm');
@@ -41,9 +51,27 @@ const initialState: ContextState = {
     total: 0,
     finish: true,
   },
-  syncItems:[]
+  syncItems: [],
+
+  setting: {
+    server: '',
+  },
 };
 
+export const fetchConfig = createAsyncThunk('context/fetchConfig', async () => {
+  const conf = await Bridge.getConfig();
+  return conf.success ? conf.data : null;
+});
+
+export const saveConfig = createAsyncThunk(
+  'context/saveConfig',
+  async (param: { server: string }, thunkAPI) => {
+    const res = await Bridge.saveConfig(param);
+    res.success && thunkAPI.dispatch(fetchConfig());
+    return res
+  }
+);
+
 export const contextSlice = createSlice({
   name: 'context',
   initialState,
@@ -52,7 +80,7 @@ export const contextSlice = createSlice({
       state.currOrgCode = action.payload[0];
       state.currGWDCode = action.payload[1];
       state.currXMCode = action.payload[2];
-      localStorage.setItem('org_gwd_xm', action.payload.join(','))
+      localStorage.setItem('org_gwd_xm', action.payload.join(','));
     },
 
     updateDevice: (state, action: PayloadAction<PeripheralStatus['data']>) => {
@@ -63,16 +91,23 @@ export const contextSlice = createSlice({
       state.currRailTypeId = action.payload;
     },
 
-    updateBleList:(state, action: PayloadAction<BleList["data"]>) => {
-      state.bleList = action.payload
+    updateBleList: (state, action: PayloadAction<BleList['data']>) => {
+      state.bleList = action.payload;
     },
 
-    updateSyncProgress: (state, action: PayloadAction<SyncProgress["data"]>) => {
+    updateSyncProgress: (state, action: PayloadAction<SyncProgress['data']>) => {
       state.syncProgress = action.payload;
     },
-
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetchConfig.fulfilled, (state, action) => {
+      if (action.payload) {
+        state.setting = action.payload;
+      }
+    });
   },
 });
 
-export const { updateOrg, updateDevice, updateRailTypeId, updateBleList, updateSyncProgress } = contextSlice.actions;
+export const { updateOrg, updateDevice, updateRailTypeId, updateBleList, updateSyncProgress } =
+  contextSlice.actions;
 export default contextSlice.reducer;