Add Chinese localization support and i18n middleware (#253)

frontend/src/hooks/useGroupData.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Group, ApiResponse, IGroupServerConfig } from '@/types';
-import { getApiUrl } from '../utils/runtime';
+import { apiGet, apiPost, apiPut, apiDelete } from '../utils/fetchInterceptor';
 
 export const useGroupData = () => {
   const { t } = useTranslation();
@@ -13,18 +13,7 @@ export const useGroupData = () => {
   const fetchGroups = useCallback(async () => {
     try {
       setLoading(true);
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/groups'), {
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`Status: ${response.status}`);
-      }
-
-      const data: ApiResponse<Group[]> = await response.json();
+      const data: ApiResponse<Group[]> = await apiGet('/groups');
 
       if (data && data.success && Array.isArray(data.data)) {
         setGroups(data.data);
@@ -55,25 +44,16 @@ export const useGroupData = () => {
     servers: string[] | IGroupServerConfig[] = [],
   ) => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/groups'), {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
-        },
-        body: JSON.stringify({ name, description, servers }),
-      });
+      const result: ApiResponse<Group> = await apiPost('/groups', { name, description, servers });
+      console.log('Group created successfully:', result);
 
-      const result: ApiResponse<Group> = await response.json();
-
-      if (!response.ok) {
-        setError(result.message || t('groups.createError'));
-        return null;
+      if (!result || !result.success) {
+        setError(result?.message || t('groups.createError'));
+        return result;
       }
 
       triggerRefresh();
-      return result.data || null;
+      return result || null;
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to create group');
       return null;
@@ -86,25 +66,14 @@ export const useGroupData = () => {
     data: { name?: string; description?: string; servers?: string[] | IGroupServerConfig[] },
   ) => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl(`/groups/${id}`), {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
-        },
-        body: JSON.stringify(data),
-      });
-
-      const result: ApiResponse<Group> = await response.json();
-
-      if (!response.ok) {
-        setError(result.message || t('groups.updateError'));
-        return null;
+      const result: ApiResponse<Group> = await apiPut(`/groups/${id}`, data);
+      if (!result || !result.success) {
+        setError(result?.message || t('groups.updateError'));
+        return result;
       }
 
       triggerRefresh();
-      return result.data || null;
+      return result || null;
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to update group');
       return null;
@@ -114,20 +83,12 @@ export const useGroupData = () => {
   // Update servers in a group (for batch updates)
   const updateGroupServers = async (groupId: string, servers: string[] | IGroupServerConfig[]) => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl(`/groups/${groupId}/servers/batch`), {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
-        },
-        body: JSON.stringify({ servers }),
+      const result: ApiResponse<Group> = await apiPut(`/groups/${groupId}/servers/batch`, {
+        servers,
       });
 
-      const result: ApiResponse<Group> = await response.json();
-
-      if (!response.ok) {
-        setError(result.message || t('groups.updateError'));
+      if (!result || !result.success) {
+        setError(result?.message || t('groups.updateError'));
         return null;
       }
 
@@ -142,46 +103,29 @@ export const useGroupData = () => {
   // Delete a group
   const deleteGroup = async (id: string) => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl(`/groups/${id}`), {
-        method: 'DELETE',
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
-
-      const result = await response.json();
-
-      if (!response.ok) {
-        setError(result.message || t('groups.deleteError'));
-        return false;
+      const result = await apiDelete(`/groups/${id}`);
+      if (!result || !result.success) {
+        setError(result?.message || t('groups.deleteError'));
+        return result;
       }
 
       triggerRefresh();
-      return true;
+      return result;
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to delete group');
-      return false;
+      return null;
     }
   };
 
   // Add server to a group
   const addServerToGroup = async (groupId: string, serverName: string) => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl(`/groups/${groupId}/servers`), {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
-        },
-        body: JSON.stringify({ serverName }),
+      const result: ApiResponse<Group> = await apiPost(`/groups/${groupId}/servers`, {
+        serverName,
       });
 
-      const result: ApiResponse<Group> = await response.json();
-
-      if (!response.ok) {
-        setError(result.message || t('groups.serverAddError'));
+      if (!result || !result.success) {
+        setError(result?.message || t('groups.serverAddError'));
         return null;
       }
 
@@ -196,18 +140,12 @@ export const useGroupData = () => {
   // Remove server from group
   const removeServerFromGroup = async (groupId: string, serverName: string) => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl(`/groups/${groupId}/servers/${serverName}`), {
-        method: 'DELETE',
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
+      const result: ApiResponse<Group> = await apiDelete(
+        `/groups/${groupId}/servers/${serverName}`,
+      );
 
-      const result: ApiResponse<Group> = await response.json();
-
-      if (!response.ok) {
-        setError(result.message || t('groups.serverRemoveError'));
+      if (!result || !result.success) {
+        setError(result?.message || t('groups.serverRemoveError'));
         return null;
       }
 

frontend/src/hooks/useMarketData.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MarketServer, ApiResponse, ServerConfig } from '@/types';
-import { getApiUrl } from '../utils/runtime';
+import { apiGet, apiPost } from '../utils/fetchInterceptor';
 
 export const useMarketData = () => {
   const { t } = useTranslation();
@@ -26,18 +26,7 @@ export const useMarketData = () => {
   const fetchMarketServers = useCallback(async () => {
     try {
       setLoading(true);
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/market/servers'), {
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`Status: ${response.status}`);
-      }
-
-      const data: ApiResponse<MarketServer[]> = await response.json();
+      const data: ApiResponse<MarketServer[]> = await apiGet('/market/servers');
 
       if (data && data.success && Array.isArray(data.data)) {
         setAllServers(data.data);
@@ -87,18 +76,7 @@ export const useMarketData = () => {
   // Fetch all categories
   const fetchCategories = useCallback(async () => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/market/categories'), {
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`Status: ${response.status}`);
-      }
-
-      const data: ApiResponse<string[]> = await response.json();
+      const data: ApiResponse<string[]> = await apiGet('/market/categories');
 
       if (data && data.success && Array.isArray(data.data)) {
         setCategories(data.data);
@@ -113,18 +91,7 @@ export const useMarketData = () => {
   // Fetch all tags
   const fetchTags = useCallback(async () => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/market/tags'), {
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`Status: ${response.status}`);
-      }
-
-      const data: ApiResponse<string[]> = await response.json();
+      const data: ApiResponse<string[]> = await apiGet('/market/tags');
 
       if (data && data.success && Array.isArray(data.data)) {
         setTags(data.data);
@@ -141,18 +108,7 @@ export const useMarketData = () => {
     async (name: string) => {
       try {
         setLoading(true);
-        const token = localStorage.getItem('mcphub_token');
-        const response = await fetch(getApiUrl(`/market/servers/${name}`), {
-          headers: {
-            'x-auth-token': token || '',
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error(`Status: ${response.status}`);
-        }
-
-        const data: ApiResponse<MarketServer> = await response.json();
+        const data: ApiResponse<MarketServer> = await apiGet(`/market/servers/${name}`);
 
         if (data && data.success && data.data) {
           setCurrentServer(data.data);
@@ -186,22 +142,10 @@ export const useMarketData = () => {
           return;
         }
 
-        const token = localStorage.getItem('mcphub_token');
-        const response = await fetch(
-          getApiUrl(`/market/servers/search?query=${encodeURIComponent(query)}`),
-          {
-            headers: {
-              'x-auth-token': token || '',
-            },
-          },
+        const data: ApiResponse<MarketServer[]> = await apiGet(
+          `/market/servers/search?query=${encodeURIComponent(query)}`,
         );
 
-        if (!response.ok) {
-          throw new Error(`Status: ${response.status}`);
-        }
-
-        const data: ApiResponse<MarketServer[]> = await response.json();
-
         if (data && data.success && Array.isArray(data.data)) {
           setAllServers(data.data);
           setCurrentPage(1);
@@ -233,22 +177,10 @@ export const useMarketData = () => {
           return;
         }
 
-        const token = localStorage.getItem('mcphub_token');
-        const response = await fetch(
-          getApiUrl(`/market/categories/${encodeURIComponent(category)}`),
-          {
-            headers: {
-              'x-auth-token': token || '',
-            },
-          },
+        const data: ApiResponse<MarketServer[]> = await apiGet(
+          `/market/categories/${encodeURIComponent(category)}`,
         );
 
-        if (!response.ok) {
-          throw new Error(`Status: ${response.status}`);
-        }
-
-        const data: ApiResponse<MarketServer[]> = await response.json();
-
         if (data && data.success && Array.isArray(data.data)) {
           setAllServers(data.data);
           setCurrentPage(1);
@@ -280,18 +212,9 @@ export const useMarketData = () => {
           return;
         }
 
-        const token = localStorage.getItem('mcphub_token');
-        const response = await fetch(getApiUrl(`/market/tags/${encodeURIComponent(tag)}`), {
-          headers: {
-            'x-auth-token': token || '',
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error(`Status: ${response.status}`);
-        }
-
-        const data: ApiResponse<MarketServer[]> = await response.json();
+        const data: ApiResponse<MarketServer[]> = await apiGet(
+          `/market/tags/${encodeURIComponent(tag)}`,
+        );
 
         if (data && data.success && Array.isArray(data.data)) {
           setAllServers(data.data);
@@ -314,18 +237,7 @@ export const useMarketData = () => {
   // Fetch installed servers
   const fetchInstalledServers = useCallback(async () => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/servers'), {
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`Status: ${response.status}`);
-      }
-
-      const data = await response.json();
+      const data = await apiGet<{ success: boolean; data: any[] }>('/servers');
 
       if (data && data.success && Array.isArray(data.data)) {
         // Extract server names
@@ -365,27 +277,24 @@ export const useMarketData = () => {
         // Prepare server configuration, merging with customConfig
         const serverConfig = {
           name: server.name,
-          config: customConfig.type === 'stdio' ? {
-            command: customConfig.command || installation.command || '',
-            args: customConfig.args || installation.args || [],
-            env: { ...installation.env, ...customConfig.env },
-          } : customConfig
+          config:
+            customConfig.type === 'stdio'
+              ? {
+                  command: customConfig.command || installation.command || '',
+                  args: customConfig.args || installation.args || [],
+                  env: { ...installation.env, ...customConfig.env },
+                }
+              : customConfig,
         };
 
         // Call the createServer API
-        const token = localStorage.getItem('mcphub_token');
-        const response = await fetch(getApiUrl('/servers'), {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'x-auth-token': token || '',
-          },
-          body: JSON.stringify(serverConfig),
-        });
+        const result = await apiPost<{ success: boolean; message?: string }>(
+          '/servers',
+          serverConfig,
+        );
 
-        if (!response.ok) {
-          const errorData = await response.json();
-          throw new Error(errorData.message || `Status: ${response.status}`);
+        if (!result.success) {
+          throw new Error(result.message || 'Failed to install server');
         }
 
         // Update installed servers list after successful installation

frontend/src/hooks/useServerData.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Server, ApiResponse } from '@/types';
-import { getApiUrl } from '../utils/runtime';
+import { apiGet, apiPost, apiDelete } from '../utils/fetchInterceptor';
 
 // Configuration options
 const CONFIG = {
@@ -44,13 +44,7 @@ export const useServerData = () => {
 
     const fetchServers = async () => {
       try {
-        const token = localStorage.getItem('mcphub_token');
-        const response = await fetch(getApiUrl('/servers'), {
-          headers: {
-            'x-auth-token': token || '',
-          },
-        });
-        const data = await response.json();
+        const data = await apiGet('/servers');
 
         if (data && data.success && Array.isArray(data.data)) {
           setServers(data.data);
@@ -97,13 +91,7 @@ export const useServerData = () => {
     // Initialization phase request function
     const fetchInitialData = async () => {
       try {
-        const token = localStorage.getItem('mcphub_token');
-        const response = await fetch(getApiUrl('/servers'), {
-          headers: {
-            'x-auth-token': token || '',
-          },
-        });
-        const data = await response.json();
+        const data = await apiGet('/servers');
 
         // Handle API response wrapper object, extract data field
         if (data && data.success && Array.isArray(data.data)) {
@@ -203,14 +191,8 @@ export const useServerData = () => {
   const handleServerEdit = async (server: Server) => {
     try {
       // Fetch settings to get the full server config before editing
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/settings'), {
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
-
-      const settingsData: ApiResponse<{ mcpServers: Record<string, any> }> = await response.json();
+      const settingsData: ApiResponse<{ mcpServers: Record<string, any> }> =
+        await apiGet('/settings');
 
       if (
         settingsData &&
@@ -240,17 +222,10 @@ export const useServerData = () => {
 
   const handleServerRemove = async (serverName: string) => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl(`/servers/${serverName}`), {
-        method: 'DELETE',
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
-      const result = await response.json();
+      const result = await apiDelete(`/servers/${serverName}`);
 
-      if (!response.ok) {
-        setError(result.message || t('server.deleteError', { serverName }));
+      if (!result || !result.success) {
+        setError(result?.message || t('server.deleteError', { serverName }));
         return false;
       }
 
@@ -264,21 +239,11 @@ export const useServerData = () => {
 
   const handleServerToggle = async (server: Server, enabled: boolean) => {
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl(`/servers/${server.name}/toggle`), {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
-        },
-        body: JSON.stringify({ enabled }),
-      });
+      const result = await apiPost(`/servers/${server.name}/toggle`, { enabled });
 
-      const result = await response.json();
-
-      if (!response.ok) {
+      if (!result || !result.success) {
         console.error('Failed to toggle server:', result);
-        setError(t('server.toggleError', { serverName: server.name }));
+        setError(result?.message || t('server.toggleError', { serverName: server.name }));
         return false;
       }
 

frontend/src/hooks/useSettingsData.ts

@@ -2,7 +2,7 @@ import { useState, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ApiResponse } from '@/types';
 import { useToast } from '@/contexts/ToastContext';
-import { getApiUrl } from '../utils/runtime';
+import { apiGet, apiPut } from '../utils/fetchInterceptor';
 
 // Define types for the settings data
 interface RoutingConfig {
@@ -84,18 +84,7 @@ export const useSettingsData = () => {
     setError(null);
 
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/settings'), {
-        headers: {
-          'x-auth-token': token || '',
-        },
-      });
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const data: ApiResponse<SystemSettings> = await response.json();
+      const data: ApiResponse<SystemSettings> = await apiGet('/settings');
 
       if (data.success && data.data?.systemConfig?.routing) {
         setRoutingConfig({
@@ -134,34 +123,17 @@ export const useSettingsData = () => {
   }, [t]); // 移除 showToast 依赖
 
   // Update routing configuration
-  const updateRoutingConfig = async <T extends keyof RoutingConfig>(
-    key: T,
-    value: RoutingConfig[T],
-  ) => {
+  const updateRoutingConfig = async (key: keyof RoutingConfig, value: any) => {
     setLoading(true);
     setError(null);
 
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/system-config'), {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
+      const data = await apiPut('/system-config', {
+        routing: {
+          [key]: value,
         },
-        body: JSON.stringify({
-          routing: {
-            [key]: value,
-          },
-        }),
       });
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const data = await response.json();
-
       if (data.success) {
         setRoutingConfig({
           ...routingConfig,
@@ -170,7 +142,7 @@ export const useSettingsData = () => {
         showToast(t('settings.systemConfigUpdated'));
         return true;
       } else {
-        showToast(t('errors.failedToUpdateRouteConfig'));
+        showToast(data.message || t('errors.failedToUpdateRouteConfig'));
         return false;
       }
     } catch (error) {
@@ -189,26 +161,12 @@ export const useSettingsData = () => {
     setError(null);
 
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/system-config'), {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
+      const data = await apiPut('/system-config', {
+        install: {
+          [key]: value,
         },
-        body: JSON.stringify({
-          install: {
-            [key]: value,
-          },
-        }),
       });
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const data = await response.json();
-
       if (data.success) {
         setInstallConfig({
           ...installConfig,
@@ -217,7 +175,7 @@ export const useSettingsData = () => {
         showToast(t('settings.systemConfigUpdated'));
         return true;
       } else {
-        showToast(t('errors.failedToUpdateSystemConfig'));
+        showToast(data.message || t('errors.failedToUpdateSystemConfig'));
         return false;
       }
     } catch (error) {
@@ -239,27 +197,12 @@ export const useSettingsData = () => {
     setError(null);
 
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/system-config'), {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
+      const data = await apiPut('/system-config', {
+        smartRouting: {
+          [key]: value,
         },
-        body: JSON.stringify({
-          smartRouting: {
-            [key]: value,
-          },
-        }),
       });
 
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.message || `HTTP error! Status: ${response.status}`);
-      }
-
-      const data = await response.json();
-
       if (data.success) {
         setSmartRoutingConfig({
           ...smartRoutingConfig,
@@ -289,25 +232,10 @@ export const useSettingsData = () => {
     setError(null);
 
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/system-config'), {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
-        },
-        body: JSON.stringify({
-          smartRouting: updates,
-        }),
+      const data = await apiPut('/system-config', {
+        smartRouting: updates,
       });
 
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.message || `HTTP error! Status: ${response.status}`);
-      }
-
-      const data = await response.json();
-
       if (data.success) {
         setSmartRoutingConfig({
           ...smartRoutingConfig,
@@ -337,24 +265,10 @@ export const useSettingsData = () => {
     setError(null);
 
     try {
-      const token = localStorage.getItem('mcphub_token');
-      const response = await fetch(getApiUrl('/system-config'), {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          'x-auth-token': token || '',
-        },
-        body: JSON.stringify({
-          routing: updates,
-        }),
+      const data = await apiPut('/system-config', {
+        routing: updates,
       });
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
-      }
-
-      const data = await response.json();
-
       if (data.success) {
         setRoutingConfig({
           ...routingConfig,
@@ -363,7 +277,7 @@ export const useSettingsData = () => {
         showToast(t('settings.systemConfigUpdated'));
         return true;
       } else {
-        showToast(t('errors.failedToUpdateRouteConfig'));
+        showToast(data.message || t('errors.failedToUpdateRouteConfig'));
         return false;
       }
     } catch (error) {