feat: 增加后端服务状态检测

shared/hooks/model/useAvailableServices.ts

@@ -0,0 +1,13 @@
+import { fetchAvailableServices } from '../../model/common';
+import { useAsync } from '../useAsync';
+
+/**
+ * 用于监测服务是否可用的hooks
+ */
+export function useAvailableServices() {
+  const { loading, value: availableServices } = useAsync(() =>
+    fetchAvailableServices()
+  );
+
+  return { loading, availableServices };
+}

shared/index.tsx

@@ -64,6 +64,7 @@ export { Trans } from './i18n/Trans';
 export { useLanguage } from './i18n/language';
 
 // hooks
+export { useAvailableServices } from './hooks/model/useAvailableServices';
 export { useUsernames } from './hooks/model/useUsernames';
 export { useAsync } from './hooks/useAsync';
 export { useAsyncFn } from './hooks/useAsyncFn';

web/plugins/com.msgbyte.openapi/src/MainPanel/AppInfo/index.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Menu } from '@capital/component';
 import { Loadable } from '@capital/common';
-import { useOpenAppInfo } from '../context';
 import './index.less';
 
 const menuRouteMap: Record<string, React.ComponentType> = {

web/plugins/com.msgbyte.openapi/src/MainPanel/index.tsx

@@ -10,6 +10,7 @@ import { OpenApp } from './types';
 import AppInfo from './AppInfo';
 import { OpenAppInfoProvider } from './context';
 import { CreateOpenApp } from '../modals/CreateOpenApp';
+import { ServiceChecker } from '../components/ServiceChecker';
 import './index.less';
 
 const OpenApiMainPanel: React.FC = React.memo(() => {
@@ -81,4 +82,12 @@ const OpenApiMainPanel: React.FC = React.memo(() => {
 });
 OpenApiMainPanel.displayName = 'OpenApiMainPanel';
 
-export default OpenApiMainPanel;
+const OpenApiMainPanelWrapper = () => {
+  return (
+    <ServiceChecker>
+      <OpenApiMainPanel />
+    </ServiceChecker>
+  );
+};
+
+export default OpenApiMainPanelWrapper;

web/plugins/com.msgbyte.openapi/src/components/ServiceChecker.tsx

@@ -0,0 +1,25 @@
+import { LoadingSpinner } from '@capital/component';
+import { fetchAvailableServices, useAsync } from '@capital/common';
+import React from 'react';
+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');
+  }, []);
+
+  if (loading) {
+    return <LoadingSpinner />;
+  }
+
+  if (!enabled) {
+    return <div>{Translate.noservice}</div>;
+  }
+
+  return <>{props.children}</>;
+});
+ServiceChecker.displayName = 'ServiceChecker';

web/plugins/com.msgbyte.openapi/src/translate.ts

@@ -2,4 +2,8 @@ import { localTrans } from '@capital/common';
 
 export const Translate = {
   openapi: localTrans({ 'zh-CN': '开放平台', 'en-US': 'Open Api' }),
+  noservice: localTrans({
+    'zh-CN': '管理员没有开放 Openapi 服务',
+    'en-US': 'The administrator did not open the Openapi service',
+  }),
 };

web/src/components/modals/SettingsView/Status.tsx

@@ -2,7 +2,7 @@ import { LoadingSpinner } from '@/components/LoadingSpinner';
 import { pluginInspectServices } from '@/plugin/common';
 import { Icon } from '@iconify/react';
 import React, { useMemo } from 'react';
-import { fetchAvailableServices, t, useAsync } from 'tailchat-shared';
+import { t, useAvailableServices } from 'tailchat-shared';
 
 /**
  * 默认检查服务列表
@@ -47,11 +47,7 @@ export const SettingsStatus: React.FC = React.memo(() => {
     []
   ); // 需要检查服务状态的列表
 
-  const { loading, value: availableServices } = useAsync(async () => {
-    const services = await fetchAvailableServices();
-
-    return services;
-  }, []);
+  const { loading, availableServices } = useAvailableServices();
 
   if (loading) {
     return <LoadingSpinner />;

web/src/plugin/common/index.ts

@@ -33,6 +33,7 @@ export {
   showErrorToasts,
   createFastFormSchema,
   fieldSchema,
+  fetchAvailableServices,
 } from 'tailchat-shared';
 
 /**