Refactor server management UI (#9)

frontend/src/pages/ChangePasswordPage.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import ChangePasswordForm from '../components/ChangePasswordForm';
-
-const ChangePasswordPage: React.FC = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-
-  const handleSuccess = () => {
-    setTimeout(() => {
-      navigate('/');
-    }, 2000);
-  };
-
-  const handleCancel = () => {
-    navigate('/');
-  };
-
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <div className="max-w-md mx-auto">
-        <h1 className="text-2xl font-bold mb-6">{t('auth.changePassword')}</h1>
-        <ChangePasswordForm onSuccess={handleSuccess} onCancel={handleCancel} />
-      </div>
-    </div>
-  );
-};
-
-export default ChangePasswordPage;

frontend/src/pages/Dashboard.tsx

@@ -0,0 +1,206 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useServerData } from '@/hooks/useServerData';
+import { ServerStatus } from '@/types';
+
+const DashboardPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { servers, error, setError, isLoading } = useServerData();
+
+  // 计算服务器统计信息
+  const serverStats = {
+    total: servers.length,
+    online: servers.filter(server => server.status === 'connected').length,
+    offline: servers.filter(server => server.status === 'disconnected').length,
+    connecting: servers.filter(server => server.status === 'connecting').length
+  };
+
+  // Map status to translation keys
+  const statusTranslations = {
+    connected: 'status.online',
+    disconnected: 'status.offline',
+    connecting: 'status.connecting'
+  }
+
+  // 计算各状态百分比（用于仪表板展示）
+  const getStatusPercentage = (status: ServerStatus) => {
+    if (servers.length === 0) return 0;
+    return Math.round((servers.filter(server => server.status === status).length / servers.length) * 100);
+  };
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900 mb-8">{t('pages.dashboard.title')}</h1>
+
+      {error && (
+        <div className="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded shadow-sm">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-red-600 text-lg font-medium">{t('app.error')}</h3>
+              <p className="text-gray-600 mt-1">{error}</p>
+            </div>
+            <button
+              onClick={() => setError(null)}
+              className="ml-4 text-gray-500 hover:text-gray-700"
+              aria-label={t('app.closeButton')}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M4.293 4.293a1 1 011.414 0L10 8.586l4.293-4.293a1 1 111.414 1.414L11.414 10l4.293 4.293a1 1 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 01-1.414-1.414L8.586 10 4.293 5.707a1 1 010-1.414z" clipRule="evenodd" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="bg-white shadow rounded-lg p-6 flex items-center justify-center">
+          <div className="flex flex-col items-center">
+            <svg className="animate-spin h-10 w-10 text-blue-500 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <p className="text-gray-600">{t('app.loading')}</p>
+          </div>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
+          {/* 服务器总数 */}
+          <div className="bg-white rounded-lg shadow p-6">
+            <div className="flex items-center">
+              <div className="p-3 rounded-full bg-blue-100 text-blue-800">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
+                </svg>
+              </div>
+              <div className="ml-4">
+                <h2 className="text-xl font-semibold text-gray-700">{t('pages.dashboard.totalServers')}</h2>
+                <p className="text-3xl font-bold text-gray-900">{serverStats.total}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* 在线服务器 */}
+          <div className="bg-white rounded-lg shadow p-6">
+            <div className="flex items-center">
+              <div className="p-3 rounded-full bg-green-100 text-green-800">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div className="ml-4">
+                <h2 className="text-xl font-semibold text-gray-700">{t('pages.dashboard.onlineServers')}</h2>
+                <p className="text-3xl font-bold text-gray-900">{serverStats.online}</p>
+              </div>
+            </div>
+            <div className="mt-4 h-2 bg-gray-200 rounded-full">
+              <div
+                className="h-full bg-green-500 rounded-full"
+                style={{ width: `${getStatusPercentage('connected')}%` }}
+              ></div>
+            </div>
+          </div>
+
+          {/* 离线服务器 */}
+          <div className="bg-white rounded-lg shadow p-6">
+            <div className="flex items-center">
+              <div className="p-3 rounded-full bg-red-100 text-red-800">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div className="ml-4">
+                <h2 className="text-xl font-semibold text-gray-700">{t('pages.dashboard.offlineServers')}</h2>
+                <p className="text-3xl font-bold text-gray-900">{serverStats.offline}</p>
+              </div>
+            </div>
+            <div className="mt-4 h-2 bg-gray-200 rounded-full">
+              <div
+                className="h-full bg-red-500 rounded-full"
+                style={{ width: `${getStatusPercentage('disconnected')}%` }}
+              ></div>
+            </div>
+          </div>
+
+          {/* 连接中服务器 */}
+          <div className="bg-white rounded-lg shadow p-6">
+            <div className="flex items-center">
+              <div className="p-3 rounded-full bg-yellow-100 text-yellow-800">
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <div className="ml-4">
+                <h2 className="text-xl font-semibold text-gray-700">{t('pages.dashboard.connectingServers')}</h2>
+                <p className="text-3xl font-bold text-gray-900">{serverStats.connecting}</p>
+              </div>
+            </div>
+            <div className="mt-4 h-2 bg-gray-200 rounded-full">
+              <div
+                className="h-full bg-yellow-500 rounded-full"
+                style={{ width: `${getStatusPercentage('connecting')}%` }}
+              ></div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 最近活动列表 */}
+      {servers.length > 0 && !isLoading && (
+        <div className="mt-8">
+          <h2 className="text-xl font-semibold text-gray-900 mb-4">{t('pages.dashboard.recentServers')}</h2>
+          <div className="bg-white shadow rounded-lg overflow-hidden">
+            <table className="min-w-full divide-y divide-gray-200">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    {t('server.name')}
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    {t('server.status')}
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    {t('server.tools')}
+                  </th>
+                  <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                    {t('server.enabled')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="bg-white divide-y divide-gray-200">
+                {servers.slice(0, 5).map((server, index) => (
+                  <tr key={index}>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+                      {server.name}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${server.status === 'connected'
+                          ? 'bg-green-100 text-green-800'
+                          : server.status === 'disconnected'
+                            ? 'bg-red-100 text-red-800'
+                            : 'bg-yellow-100 text-yellow-800'
+                        }`}>
+                        {t(statusTranslations[server.status] || server.status)}
+                      </span>
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      {server.tools?.length || 0}
+                    </td>
+                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                      {server.enabled !== false ? (
+                        <span className="text-green-600">✓</span>
+                      ) : (
+                        <span className="text-red-600">✗</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DashboardPage;

frontend/src/pages/ServersPage.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Server } from '@/types';
+import ServerCard from '@/components/ServerCard';
+import AddServerForm from '@/components/AddServerForm';
+import EditServerForm from '@/components/EditServerForm';
+import { useServerData } from '@/hooks/useServerData';
+
+const ServersPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { 
+    servers, 
+    error, 
+    setError, 
+    isLoading, 
+    handleServerAdd, 
+    handleServerEdit, 
+    handleServerRemove, 
+    handleServerToggle 
+  } = useServerData();
+  const [editingServer, setEditingServer] = useState<Server | null>(null);
+
+  const handleEditClick = async (server: Server) => {
+    const fullServerData = await handleServerEdit(server);
+    if (fullServerData) {
+      setEditingServer(fullServerData);
+    }
+  };
+
+  const handleEditComplete = () => {
+    setEditingServer(null);
+  };
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">{t('pages.servers.title')}</h1>
+        <div className="flex space-x-4">
+          <AddServerForm onAdd={handleServerAdd} />
+          <button
+            onClick={() => handleServerAdd()}
+            className="px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200 flex items-center"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-2" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clipRule="evenodd" />
+            </svg>
+            {t('common.refresh')}
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded shadow-sm">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-red-600 text-lg font-medium">{t('app.error')}</h3>
+              <p className="text-gray-600 mt-1">{error}</p>
+            </div>
+            <button
+              onClick={() => setError(null)}
+              className="ml-4 text-gray-500 hover:text-gray-700"
+              aria-label={t('app.closeButton')}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M4.293 4.293a1 1 011.414 0L10 8.586l4.293-4.293a1 1 111.414 1.414L11.414 10l4.293 4.293a1 1 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 01-1.414-1.414L8.586 10 4.293 5.707a1 1 010-1.414z" clipRule="evenodd" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isLoading ? (
+        <div className="bg-white shadow rounded-lg p-6 flex items-center justify-center">
+          <div className="flex flex-col items-center">
+            <svg className="animate-spin h-10 w-10 text-blue-500 mb-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <p className="text-gray-600">{t('app.loading')}</p>
+          </div>
+        </div>
+      ) : servers.length === 0 ? (
+        <div className="bg-white shadow rounded-lg p-6">
+          <p className="text-gray-600">{t('app.noServers')}</p>
+        </div>
+      ) : (
+        <div className="space-y-6">
+          {servers.map((server, index) => (
+            <ServerCard
+              key={index}
+              server={server}
+              onRemove={handleServerRemove}
+              onEdit={handleEditClick}
+              onToggle={handleServerToggle}
+            />
+          ))}
+        </div>
+      )}
+
+      {editingServer && (
+        <EditServerForm
+          server={editingServer}
+          onEdit={handleEditComplete}
+          onCancel={() => setEditingServer(null)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ServersPage;

frontend/src/pages/SettingsPage.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import ChangePasswordForm from '@/components/ChangePasswordForm';
+
+const SettingsPage: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  
+  const handlePasswordChangeSuccess = () => {
+    setTimeout(() => {
+      navigate('/');
+    }, 2000);
+  };
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold text-gray-900 mb-8">{t('pages.settings.title')}</h1>
+      
+      <div className="bg-white shadow rounded-lg p-6">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">{t('auth.changePassword')}</h2>
+        <div className="max-w-lg">
+          <ChangePasswordForm onSuccess={handlePasswordChangeSuccess} />
+        </div>
+      </div>
+      
+      {/* 其他设置可以在这里添加 */}
+      <div className="bg-white shadow rounded-lg p-6 mt-6">
+        <h2 className="text-xl font-semibold text-gray-800 mb-4">{t('pages.settings.language')}</h2>
+        <div className="flex space-x-4">
+          <button 
+            className="px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200"
+            onClick={() => {
+              localStorage.setItem('i18nextLng', 'en');
+              window.location.reload();
+            }}
+          >
+            English
+          </button>
+          <button 
+            className="px-4 py-2 bg-blue-100 text-blue-800 rounded hover:bg-blue-200"
+            onClick={() => {
+              localStorage.setItem('i18nextLng', 'zh');
+              window.location.reload();
+            }}
+          >
+            中文
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsPage;