修复切换api时，没有正常初始化相应的界面

src/pages/x-form/hooks/useApi.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from '@tanstack/react-router'
 import { useAtom } from 'jotai/index'
 import { apiAtom } from '@/store/x-form/model.ts'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { Input, message, Modal } from 'antd'
 import { Route } from '@/pages/x-form'
 
@@ -43,6 +43,23 @@ export const useApi = () => {
 
   }, [ api, apiParam ])
 
+  const onOK = useCallback(() => {
+    if (!innerApi) {
+      message.destroy()
+      message.error('请填写 api 参数')
+      return
+    }
+    setChange(false)
+    setOpen(false)
+    setApi(innerApi)
+    setChange(true)
+    nav({
+      to: '/x-form',
+      search: {
+        api: innerApi
+      }
+    })
+  }, [ innerApi ])
 
   const holderElement = (
           <>
@@ -56,26 +73,18 @@ export const useApi = () => {
                       setOpen(false)
                     }}
                     onOk={() => {
-                      if (!innerApi) {
-                        message.destroy()
-                        message.error('请填写 api 参数')
-                        return
-                      }
-                      setChange(false)
-                      setOpen(false)
-                      setApi(innerApi)
-                      setChange(true)
-                      nav({
-                        to: '/x-form',
-                        search: {
-                          api: innerApi
-                        }
-                      })
+                      onOK()
                     }}
             >
-              <Input value={innerApi} onChange={e => {
-                setInnerApi(e.target.value)
-              }}/>
+              <Input value={innerApi}
+                     onKeyDown={e => {
+                       if (e.key === 'Enter') {
+                         onOK()
+                       }
+                     }}
+                     onChange={e => {
+                       setInnerApi(e.target.value)
+                     }}/>
             </Modal>
           </>
   )

src/pages/x-form/index.tsx

@@ -122,7 +122,7 @@ const XForm = () => {
 
               <ProTable
                       rowKey="id"
-                      headerTitle={api}
+                      headerTitle={`${api}/list`}
                       toolbar={{
                         /*search: {
                           loading: isFetching && !!search?.key,
@@ -162,7 +162,7 @@ const XForm = () => {
                         ]
                       }}
                       scroll={{
-                        x: (columns?.length || 1) * 200,
+                        x: (columns?.length || 1) * 100,
                         y: 'calc(100vh - 290px)'
                       }}
                       search={false}

src/store/x-form/model.ts

@@ -1,5 +1,5 @@
 import { atom } from 'jotai'
-import { IApiResult, IPage } from '@/global'
+import { IApiResult, IPage, IPageResult } from '@/global'
 import { atomWithMutation, atomWithQuery, queryClientAtom } from 'jotai-tanstack-query'
 import { message } from 'antd'
 import { t } from 'i18next'
@@ -32,13 +32,12 @@ export const modelPageAtom = atom<IPage>({
   page: 1,
 })
 
-export const modelCURDAtom = atomWithQuery<IApiResult<XForm.IModelCURD>, any, any>((get) => {
-  const api = get(apiAtom)
-  console.log('api', api)
+export const modelCURDAtom = atomWithQuery<IApiResult<XForm.IModelCURD>, any, any, any>((get) => {
+
   return {
-    enabled: !!api,
-    queryKey: [ 'modelCURD' ],
-    queryFn: async () => {
+    enabled: !!get(apiAtom),
+    queryKey: [ 'modelCURD', get(apiAtom) ],
+    queryFn: async ({ queryKey: [ , api ] }) => {
       return await modelServ.model(api).proxy()
     },
     select: (res) => {
@@ -47,14 +46,13 @@ export const modelCURDAtom = atomWithQuery<IApiResult<XForm.IModelCURD>, any, an
   }
 })
 
-export const modelsAtom = atomWithQuery((get) => {
-  const api = get(apiAtom)
-  const curd = get(modelCURDAtom)
+export const modelsAtom = atomWithQuery<IApiResult<IPageResult<any>>, any, any, any>((get) => {
 
+  const curd = get(modelCURDAtom)
   return {
-    enabled: curd.isSuccess && !!api,
-    queryKey: [ 'models', get(modelSearchAtom) ],
-    queryFn: async ({ queryKey: [ , params ] }) => {
+    enabled: curd.isSuccess && !!get(apiAtom),
+    queryKey: [ 'models', get(modelSearchAtom), get(apiAtom) ],
+    queryFn: async ({ queryKey: [ , params, api ] }) => {
 
       if (api.startsWith('http')) {
         return await modelServ.model(api).proxy<XForm.IModel>({
@@ -81,7 +79,7 @@ export const modelsAtom = atomWithQuery((get) => {
 export const saveOrUpdateModelAtom = atomWithMutation<IApiResult, XForm.IModel>((get) => {
 
   return {
-    mutationKey: [ 'updateModel' ],
+    mutationKey: [ 'updateModel', get(apiAtom) ],
     mutationFn: async (data) => {
       const api = get(apiAtom)
       if (!api) {
@@ -119,13 +117,14 @@ export const saveOrUpdateModelAtom = atomWithMutation<IApiResult, XForm.IModel>(
 })
 
 export const deleteModelAtom = atomWithMutation((get) => {
+
   return {
-    mutationKey: [ 'deleteModel' ],
+    mutationKey: [ 'deleteModel', get(apiAtom) ],
     mutationFn: async (ids: number[]) => {
       const api = get(apiAtom)
       if (api.startsWith('http')) {
         return await modelServ.model(api).proxy<XForm.IModel>({
-          body: ids ?? get(modelIdsAtom) ,
+          body: ids ?? get(modelIdsAtom),
           path: '/deletes',
         })
       }