修复切换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,19 +43,7 @@ export const useApi = () => {
 
   }, [ api, apiParam ])
 
-
-  const holderElement = (
-          <>
-            <Modal
-                    title={'请指定 api 参数'}
-                    closable={false}
-                    open={open}
-                    maskClosable={false}
-                    afterOpenChange={setOpen}
-                    onCancel={() => {
-                      setOpen(false)
-                    }}
-                    onOk={() => {
+  const onOK = useCallback(() => {
     if (!innerApi) {
       message.destroy()
       message.error('请填写 api 参数')
@@ -71,9 +59,30 @@ export const useApi = () => {
         api: innerApi
       }
     })
+  }, [ innerApi ])
+
+  const holderElement = (
+          <>
+            <Modal
+                    title={'请指定 api 参数'}
+                    closable={false}
+                    open={open}
+                    maskClosable={false}
+                    afterOpenChange={setOpen}
+                    onCancel={() => {
+                      setOpen(false)
+                    }}
+                    onOk={() => {
+                      onOK()
                     }}
             >
-              <Input value={innerApi} onChange={e => {
+              <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',
         })
       }