diff --git a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/OAuth.tsx b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/OAuth.tsx
index c4c08d2e..32dba9e8 100644
--- a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/OAuth.tsx
+++ b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/OAuth.tsx
@@ -6,7 +6,7 @@ import {
 } from '@capital/component';
 import { useOpenAppInfo } from '../context';
 import { OpenAppCapability } from '../types';
-import { postRequest, useAsyncRequest } from '@capital/common';
+import { postRequest, useAsyncFn, useAsyncRequest } from '@capital/common';
 
 const OAuth: React.FC = React.memo(() => {
   const { refresh, appId, capability, oauth } = useOpenAppInfo();
diff --git a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/context.tsx b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/context.tsx
index b25927d3..928a5bf4 100644
--- a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/context.tsx
+++ b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/context.tsx
@@ -8,10 +8,12 @@ interface OpenAppInfoContextProps extends OpenApp {
 const OpenAppInfoContext = React.createContext<OpenAppInfoContextProps>(null);
 OpenAppInfoContext.displayName = 'OpenAppInfoContext';
 
-export const OpenAppInfoProvider: React.FC<{
-  appInfo: OpenApp;
-  refresh: OpenAppInfoContextProps['refresh'];
-}> = (props) => {
+export const OpenAppInfoProvider: React.FC<
+  React.PropsWithChildren<{
+    appInfo: OpenApp;
+    refresh: OpenAppInfoContextProps['refresh'];
+  }>
+> = (props) => {
   return (
     <OpenAppInfoContext.Provider
       value={{
diff --git a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/useOpenAppList.ts b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/useOpenAppList.ts
index d8afec1f..3b61bdc6 100644
--- a/client/web/plugins/com.msgbyte.openapi/src/MainPanel/useOpenAppList.ts
+++ b/client/web/plugins/com.msgbyte.openapi/src/MainPanel/useOpenAppList.ts
@@ -5,6 +5,7 @@ import {
   useLocation,
   urlSearchParse,
   isValidStr,
+  useNavigate,
 } from '@capital/common';
 import { useEffect, useState } from 'react';
 import { OpenApp } from './types';
@@ -23,6 +24,7 @@ export function useOpenAppList() {
 
     return data ?? [];
   }, []);
+  const navigate = useNavigate();
 
   const location = useLocation();
 
@@ -46,8 +48,7 @@ export function useOpenAppList() {
      * 设置当前选中的开放app
      */
     handleSetSelectedApp(appId: string) {
-      history.push({
-        ...history.location,
+      navigate({
         search: appendUrlSearch({
           appId,
         }),
diff --git a/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx b/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx
index 359c5fa6..8ddf37eb 100644
--- a/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx
+++ b/client/web/plugins/com.msgbyte.openapi/src/components/SecretValue.tsx
@@ -2,22 +2,24 @@ import { Icon } from '@capital/component';
 import React, { useState } from 'react';
 import './SecretValue.less';
 
-export const SecretValue: React.FC = React.memo((props) => {
-  const [show, setShow] = useState(false);
-  return (
-    <span className="plugin-openapi-secret-value">
-      {show ? (
-        <>
-          <span>{props.children}</span>
-          <Icon icon="mdi:eye-off-outline" onClick={() => setShow(false)} />
-        </>
-      ) : (
-        <>
-          <span>********</span>
-          <Icon icon="mdi:eye-outline" onClick={() => setShow(true)} />
-        </>
-      )}
-    </span>
-  );
-});
+export const SecretValue: React.FC<React.PropsWithChildren> = React.memo(
+  (props) => {
+    const [show, setShow] = useState(false);
+    return (
+      <span className="plugin-openapi-secret-value">
+        {show ? (
+          <>
+            <span>{props.children}</span>
+            <Icon icon="mdi:eye-off-outline" onClick={() => setShow(false)} />
+          </>
+        ) : (
+          <>
+            <span>********</span>
+            <Icon icon="mdi:eye-outline" onClick={() => setShow(true)} />
+          </>
+        )}
+      </span>
+    );
+  }
+);
 SecretValue.displayName = 'SecretValue';
diff --git a/client/web/plugins/com.msgbyte.openapi/src/components/ServiceChecker.tsx b/client/web/plugins/com.msgbyte.openapi/src/components/ServiceChecker.tsx
index 5f1b8a77..2085785c 100644
--- a/client/web/plugins/com.msgbyte.openapi/src/components/ServiceChecker.tsx
+++ b/client/web/plugins/com.msgbyte.openapi/src/components/ServiceChecker.tsx
@@ -6,20 +6,22 @@ import { Translate } from '../translate';
 /**
  * 服务监测
  */
-export const ServiceChecker: React.FC = React.memo((props) => {
-  const { loading, value: enabled } = useAsync(async () => {
-    const services = await fetchAvailableServices();
-    return services.includes('openapi.app');
-  }, []);
+export const ServiceChecker: React.FC<React.PropsWithChildren> = React.memo(
+  (props) => {
+    const { loading, value: enabled } = useAsync(async () => {
+      const services = await fetchAvailableServices();
+      return services.includes('openapi.app');
+    }, []);
 
-  if (loading) {
-    return <LoadingSpinner />;
-  }
+    if (loading) {
+      return <LoadingSpinner />;
+    }
 
-  if (!enabled) {
-    return <div>{Translate.noservice}</div>;
-  }
+    if (!enabled) {
+      return <div>{Translate.noservice}</div>;
+    }
 
-  return <>{props.children}</>;
-});
+    return <>{props.children}</>;
+  }
+);
 ServiceChecker.displayName = 'ServiceChecker';