feat(agent): implement agent management UI and operations

src/pages/agent/list.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import {
   Box,
   Typography,
@@ -9,12 +9,19 @@ import {
   Pagination,
   Stack,
 } from '@mui/material';
-import { Search as SearchIcon, Refresh as RefreshIcon } from '@mui/icons-material';
-import { useAgentList } from '@/hooks/agent-hooks';
+import { Search as SearchIcon, Refresh as RefreshIcon, Add as AddIcon } from '@mui/icons-material';
+import { useAgentList, useAgentOperations } from '@/hooks/agent-hooks';
 import AgentGridView from '@/components/agent/AgentGridView';
+import CreateAgentDialog from '@/pages/agent/components/CreateAgentDialog';
+import EditAgentDialog from '@/pages/agent/components/EditAgentDialog';
+import { useTranslation } from 'react-i18next';
+import { useDialog } from '@/hooks/useDialog';
 
 function AgentListPage() {
   const [searchValue, setSearchValue] = useState('');
+  const [createOpen, setCreateOpen] = useState(false);
+  const [editOpen, setEditOpen] = useState(false);
+  const [editTarget, setEditTarget] = useState<any>(null);
   const {
     agents,
     total,
@@ -26,6 +33,10 @@ function AgentListPage() {
     refresh,
   } = useAgentList({ page: 1, page_size: 10 });
 
+  const { t } = useTranslation();
+  const dialog = useDialog();
+  const ops = useAgentOperations();
+
   const totalPages = useMemo(() => {
     return Math.ceil((agents?.length || 0) / pageSize) || 1;
   }, [agents, pageSize]);
@@ -36,20 +47,42 @@ function AgentListPage() {
     return (agents || []).slice(startIndex, endIndex);
   }, [agents, currentPage, pageSize]);
 
-  const handleSearch = useCallback(() => {
-    setKeywords(searchValue);
-    setCurrentPage(1);
+  const handleSearch = useCallback((value: string) => {
+    // 仅更新输入值，实际搜索在 500ms 防抖后触发
+    setSearchValue(value);
+  }, []);
+
+  // 500ms 防抖：在用户停止输入 500ms 后触发搜索
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setKeywords(searchValue);
+      setCurrentPage(1);
+    }, 500);
+    return () => clearTimeout(handler);
   }, [searchValue, setKeywords, setCurrentPage]);
 
   return (
     <Box sx={{ p: 3 }}>
-      <Typography variant="h4" fontWeight={600} mb={2}>Agent 列表</Typography>
+      {/* 页面标题 */}
+      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+        <Typography variant="h4" fontWeight={600}>
+          {t('agent.agentList')}
+        </Typography>
+        <Button
+          variant="contained"
+          startIcon={<AddIcon />}
+          onClick={() => setCreateOpen(true)}
+          sx={{ borderRadius: 2 }}
+        >
+          {t('agent.createAgent')}
+        </Button>
+      </Box>
 
       <Paper sx={{ p: 2, mb: 2 }}>
         <Box display="flex" gap={2} alignItems="center">
           <TextField
             value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
+            onChange={(e) => handleSearch(e.target.value)}
             placeholder="搜索名称或描述"
             size="small"
             InputProps={{
@@ -60,7 +93,6 @@ function AgentListPage() {
               )
             }}
           />
-          <Button variant="contained" onClick={handleSearch}>搜索</Button>
           <Button variant="outlined" startIcon={<RefreshIcon />} onClick={refresh}>刷新</Button>
         </Box>
       </Paper>
@@ -69,6 +101,19 @@ function AgentListPage() {
         agents={currentPageData}
         loading={loading}
         searchTerm={searchValue}
+        onCreateAgent={() => setCreateOpen(true)}
+        onEdit={(agent) => { setEditTarget(agent); setEditOpen(true); }}
+        onDelete={async (agent) => {
+          const confirmed = await dialog.confirm({
+            title: t('dialog.confirmDelete'),
+            content: t('dialog.confirmDeleteMessage'),
+            confirmText: t('dialog.delete'),
+            cancelText: t('dialog.cancel'),
+          });
+          if (!confirmed) return;
+          const res = await ops.deleteAgents([agent.id]);
+          if (res.success) refresh();
+        }}
       />
 
       {totalPages >= 1 && (
@@ -89,6 +134,20 @@ function AgentListPage() {
           </Stack>
         </Box>
       )}
+      <CreateAgentDialog
+        open={createOpen}
+        onClose={() => setCreateOpen(false)}
+        onCreated={() => {
+          setCreateOpen(false);
+          refresh();
+        }}
+      />
+      <EditAgentDialog
+        open={editOpen}
+        agent={editTarget}
+        onClose={() => { setEditOpen(false); setEditTarget(null); }}
+        onSaved={() => { setEditOpen(false); setEditTarget(null); refresh(); }}
+      />
     </Box>
   );
 }