bugfix: 修复复制均衡页面数据混淆的问题

src/pages/nginx/list.tsx

@@ -10,7 +10,9 @@ import {NginxApis} from "../../api/nginx.ts";
 import {AutoForm, AutoFormInstance, Message, Notify} from "planning-tools";
 import {useFormConfig} from "./config.tsx";
 import {DeleteOutlined, EditOutlined, PlusOutlined, SyncOutlined} from "@ant-design/icons";
-import {Link} from "react-router-dom";
+import {useNavigate} from "react-router";
+import {useAppDispatch} from "../../store";
+import {NginxActions} from "../../store/slice/nginx.ts";
 
 export const NginxList = ()=>{
 
@@ -23,6 +25,8 @@ export const NginxList = ()=>{
   const [modal,contextHolder] = Modal.useModal()
 
   const formConfig = useFormConfig();
+  const navigate = useNavigate();
+  const dispatch = useAppDispatch();
 
   const fetchData = ()=>{
     setLoading(true)
@@ -91,10 +95,15 @@ export const NginxList = ()=>{
     fetchData()
   },[])
 
+  const toNginx = (nginx: INginx) => {
+    dispatch(NginxActions.reset())
+    navigate(`/nginx/${nginx.id}`)
+  }
+
   const renderOperations = (data: INginx)=>{
 
     return (<>
-      <Link to={`/nginx/${data.id}`}><EditOutlined /></Link>
+      <Button onClick={()=>toNginx(data)} type="link"><EditOutlined /></Button>
       <Button onClick={()=>onRemoveNginx(data)} danger type="text" icon={<DeleteOutlined />}/>
     </>)
 

src/pages/nginx/utils/nginx.ts

@@ -1,7 +1,7 @@
 import {IServerHost} from "../../../models/api.ts";
 import {INginx, INginxServer} from "../../../models/nginx.ts";
 import {renderServer} from "./index.ts";
-import {useAppDispatch, useAppSelector} from "../../../store";
+import {useAppDispatch} from "../../../store";
 import {NginxApis} from "../../../api/nginx.ts";
 import {Notify} from "planning-tools";
 import {NginxActions} from "../../../store/slice/nginx.ts";
@@ -30,8 +30,12 @@ export const createServerHost = (nginx: INginx, server: Partial<INginxServer>)=>
   }
 }
 
+/**
+ * 更新本地缓存信息
+ * @param id
+ */
 export const useNginx = (id?: string)=>{
-  const current = useAppSelector(state => state.nginx.current);
+  const [current,setCurrent] = useState<INginx>()
   const navigate = useNavigate();
   const [loading,setLoading] = useState(false)
   const dispatch = useAppDispatch()
@@ -54,10 +58,13 @@ export const useNginx = (id?: string)=>{
             nginx: respData.nginx,
             servers: respData.servers
           }))
+          setCurrent(respData.nginx)
         })
-        .catch(e=>{
-          Notify.warn(e.msg || e.message);
-          navigate('/')
+        .catch((e)=>{
+          setTimeout(()=>{
+            navigate('/');
+          },1000)
+          console.log('getNginx fail',e)
         })
         .finally(()=>{
           setLoading(false)
@@ -66,7 +73,8 @@ export const useNginx = (id?: string)=>{
   }
 
   useEffect(()=>{
+    dispatch(NginxActions.reset())
     toNginx()
   },[id])
   return [current]
-}
+}

src/store/slice/nginx.ts

@@ -8,11 +8,11 @@ export type INginxState = {
   server?: INginxServer,
   location?: PLocation,
   currentId?: number
-  formConfig?: INginxFormConfig
-
   upstream?: INginxServer
   streamUpstream?: INginxServer
+
   servers: INginxServer[]
+  formConfig?: INginxFormConfig
 };
 
 export type SetCurrentData = {
@@ -28,9 +28,17 @@ const nginxSlice = createSlice({
   name: 'user',
   initialState,
   reducers: {
+    reset(state){
+      state.current = undefined;
+      state.server = undefined;
+      state.location = undefined;
+      state.currentId = undefined;
+      state.upstream = undefined;
+      state.streamUpstream = undefined;
+      state.servers = [];
+    },
     setCurrent(state, action: PayloadAction<SetCurrentData>) {
       const payload = action.payload;
-
       const servers: INginxServer[] = [];
        (payload.servers || []).forEach(item=>{
         const server = createServer(item)