refactor(mcp): improve server list pagination and form validation

src/pages/setting/mcp.tsx

@@ -69,6 +69,19 @@ const SearchContainer = styled(Box)(({ theme }) => ({
 
 
 export default function McpSettingPage() {
+
+  const handleRefreshServer = async (initial?: boolean) => {
+    if (initial) {
+      setCurrentPage(1);
+    } else {
+      await fetchMcpServers({
+        page: currentPage,
+        size: pageSize,
+        keyword: searchString,
+      });
+    }
+  }
+
   const {
     mcpServers,
     loading,
@@ -81,8 +94,8 @@ export default function McpSettingPage() {
     createMcpServer,
     updateMcpServer,
     deleteMcpServer,
-    deleteMcpServers,
-  } = useMcpSetting();
+    batchDeleteMcpServers,
+  } = useMcpSetting({ refreshServer: handleRefreshServer });
 
   // 本地状态
   const [searchString, setSearchString] = useState('');
@@ -93,24 +106,22 @@ export default function McpSettingPage() {
   const [editingServer, setEditingServer] = useState<Partial<IMcpServer> | undefined | null>(null);
   const [importDialogOpen, setImportDialogOpen] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize] = useState(6);
+  const [pageSize] = useState(8);
   const [importJson, setImportJson] = useState('');
 
   const showMessage = useMessage()
 
   // 初始化加载数据
   useEffect(() => {
-    fetchMcpServers();
-  }, [fetchMcpServers]);
+    fetchMcpServers({
+      page: currentPage,
+      size: pageSize,
+      keyword: searchString,
+    });
+  }, [fetchMcpServers, currentPage, pageSize, searchString]);
 
-  // 过滤和分页逻辑
-  const filteredServers = mcpServers.filter(server =>
-    server.name.toLowerCase().includes(searchString.toLowerCase()) ||
-    server.url.toLowerCase().includes(searchString.toLowerCase())
-  );
-
-  const totalPages = Math.ceil(filteredServers.length / pageSize);
-  const paginatedServers = filteredServers.slice(
+  const totalPages = Math.ceil(total / pageSize);
+  const paginatedServers = mcpServers.slice(
     (currentPage - 1) * pageSize,
     currentPage * pageSize
   );
@@ -185,7 +196,7 @@ export default function McpSettingPage() {
   };
 
   const handleBulkDelete = async () => {
-    const result = await deleteMcpServers(selectedServers);
+    const result = await batchDeleteMcpServers(selectedServers);
     if (result.success) {
       showMessage.success('批量删除成功');
       setSelectedServers([]);
@@ -309,6 +320,7 @@ export default function McpSettingPage() {
       </PageHeader>
 
       <SearchContainer>
+        <Box>
         <TextField
           size="small"
           placeholder="Search MCP servers..."
@@ -319,6 +331,7 @@ export default function McpSettingPage() {
           }}
           sx={{ width: 300 }}
         />
+        </Box>
         {selectedServers.length > 0 && (
           <Box display="flex" gap={1}>
             <Button