feat(agent): add agent management feature with list view and routing

src/hooks/agent-hooks.ts

@@ -0,0 +1,82 @@
+import { useState, useCallback, useEffect } from 'react';
+import agentService from '@/services/agent_service';
+import type { IFlow } from '@/interfaces/database/agent';
+import type { IAgentPaginationParams } from '@/interfaces/request/agent';
+import logger from '@/utils/logger';
+
+export interface UseAgentListState {
+  agents: IFlow[];
+  total: number;
+  loading: boolean;
+  error: string | null;
+  currentPage: number;
+  pageSize: number;
+  keywords: string;
+  orderby?: string;
+  desc?: boolean;
+}
+
+export interface UseAgentListReturn extends UseAgentListState {
+  fetchAgents: (params?: IAgentPaginationParams) => Promise<void>;
+  setKeywords: (keywords: string) => void;
+  setCurrentPage: (page: number) => void;
+  setPageSize: (size: number) => void;
+  setOrder: (orderby?: string, desc?: boolean) => void;
+  refresh: () => Promise<void>;
+}
+
+/**
+ * 智能体列表钩子
+ * @param initialParams 初始参数
+ */
+export const useAgentList = (initialParams?: IAgentPaginationParams) => {
+  const [agents, setAgents] = useState<IFlow[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [currentPage, setCurrentPage] = useState(initialParams?.page || 1);
+  const [pageSize, setPageSize] = useState(initialParams?.page_size || 10);
+  const [keywords, setKeywords] = useState(initialParams?.keywords || '');
+
+  const fetchAgentList = useCallback(async (params?: IAgentPaginationParams) => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await agentService.listCanvas(params);
+      const res = response.data || {};
+      logger.info('useAgentList fetchAgentList', res);
+      const data = res.data
+      setAgents(data.canvas || []);
+      setTotal(data.total || 0);
+    } catch (err: any) {
+      setError(err.message || 'Failed to fetch agent list');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const refresh = useCallback(() => fetchAgentList({
+    keywords,
+    page: currentPage,
+    page_size: pageSize,
+  }), [keywords, currentPage, pageSize]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  return {
+    agents,
+    total,
+    loading,
+    error,
+    currentPage,
+    pageSize,
+    keywords,
+    fetchAgents: fetchAgentList,
+    setKeywords,
+    setCurrentPage,
+    setPageSize,
+    refresh,
+  };
+};