Refactor server management UI (#9)

2026-01-03 13:18:59 -05:00 · 2025-04-15 19:02:38 +08:00
parent 6af13f85d4
commit d94a58ebca
15 changed files with 964 additions and 425 deletions
--- a/frontend/src/pages/ServersPage.tsx
+++ b/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;