refactor: 服务状态页

shared/cache/utils.ts

@@ -14,10 +14,10 @@ import { queryClient } from './';
 export function buildCachedRequest<
   R extends any,
   F extends (...args: any) => Promise<R>
->(prefix: string, fn: F, options?: FetchQueryOptions): F {
+>(name: string, fn: F, options?: FetchQueryOptions): F {
   return ((...args: any) => {
     return queryClient.fetchQuery(
-      [prefix, JSON.stringify(args)],
+      [name, JSON.stringify(args)],
       () => fn(...args),
       options
     );

shared/index.tsx

@@ -47,6 +47,7 @@ export {
 } from './manager/ui';
 
 // model
+export { fetchAvailableServices } from './model/common';
 export { createDMConverse } from './model/converse';
 export {
   addFriendRequest,

shared/model/common.ts

@@ -0,0 +1,19 @@
+import { request } from '../api/request';
+import { buildCachedRequest } from '../cache/utils';
+
+/**
+ * 获取可用的微服务列表
+ */
+export const fetchAvailableServices = buildCachedRequest(
+  'fetchAvailableServices',
+  async (): Promise<string[]> => {
+    const { data } = await request.get<{
+      nodeID: string;
+      cpu: unknown;
+      memory: unknown;
+      services: string[];
+    }>('/api/gateway/health');
+
+    return data.services;
+  }
+);

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

@@ -0,0 +1,69 @@
+import { LoadingSpinner } from '@/components/LoadingSpinner';
+import { Icon } from '@iconify/react';
+import React from 'react';
+import { fetchAvailableServices, t, useAsync } from 'tailchat-shared';
+
+/**
+ * 检查服务列表
+ */
+const SERVICES = [
+  {
+    name: 'user',
+    label: t('用户服务'),
+  },
+  {
+    name: 'chat.message',
+    label: t('聊天服务'),
+  },
+  {
+    name: 'chat.converse',
+    label: t('会话服务'),
+  },
+  {
+    name: 'friend',
+    label: t('好友服务'),
+  },
+  {
+    name: 'group',
+    label: t('群组服务'),
+  },
+  {
+    name: 'group.invite',
+    label: t('群组邀请服务'),
+  },
+];
+
+/**
+ * 服务状态
+ */
+export const SettingsStatus: React.FC = React.memo(() => {
+  const { loading, value: availableServices } = useAsync(async () => {
+    const services = await fetchAvailableServices();
+
+    return services;
+  }, []);
+
+  if (loading) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <div>
+      {SERVICES.map((service) => (
+        <div key={service.name} className="flex items-center">
+          <span className="mr-1">{service.label}:</span>
+          {availableServices?.includes(service.name) ? (
+            <span title={t('当前服务可用')}>
+              <Icon icon="emojione:white-heavy-check-mark" />
+            </span>
+          ) : (
+            <span title={t('服务异常')}>
+              <Icon icon="emojione:cross-mark-button" />
+            </span>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+});
+SettingsStatus.displayName = 'SettingsStatus';

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

@@ -3,6 +3,7 @@ import { SidebarView, SidebarViewMenuType } from '@/components/SidebarView';
 import React, { useCallback, useMemo } from 'react';
 import { t } from 'tailchat-shared';
 import { SettingsAbout } from './About';
+import { SettingsStatus } from './Status';
 
 interface SettingsViewProps {
   onClose: () => void;
@@ -23,6 +24,11 @@ export const SettingsView: React.FC<SettingsViewProps> = React.memo((props) => {
         type: 'group',
         title: t('通用'),
         children: [
+          {
+            type: 'item',
+            title: t('服务状态'),
+            content: <SettingsStatus />,
+          },
           {
             type: 'item',
             title: t('关于'),