diff --git a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/KeywordManagement.tsx b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/KeywordManagement.tsx index 1dc3055f..276306d4 100644 --- a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/KeywordManagement.tsx +++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/KeywordManagement.tsx @@ -4,7 +4,15 @@ import React, { forwardRef, useImperativeHandle, } from "react"; -import { Button, Input, Tag, Switch, message, Popconfirm } from "antd"; +import { + Button, + Input, + Tag, + Switch, + message, + Popconfirm, + Pagination, +} from "antd"; import { SearchOutlined, FilterOutlined, @@ -43,6 +51,11 @@ const KeywordManagement = forwardRef>( const [editingKeywordId, setEditingKeywordId] = useState( null, ); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 10, + total: 0, + }); //匹配类型 const getMatchTypeText = (type: number) => { @@ -93,9 +106,18 @@ const KeywordManagement = forwardRef>( const fetchKeywords = async (params?: KeywordListParams) => { try { setLoading(true); - const response = await getKeywordList(params || {}); + const requestParams = { + page: pagination.current.toString(), + limit: pagination.pageSize.toString(), + ...params, + }; + const response = await getKeywordList(requestParams); if (response) { setKeywordsList(response.list || []); + setPagination(prev => ({ + ...prev, + total: response.total || 0, + })); } else { setKeywordsList([]); message.error(response?.message || "获取关键词列表失败"); @@ -165,13 +187,23 @@ const KeywordManagement = forwardRef>( // 搜索处理函数 const handleSearch = (value: string) => { + setPagination(prev => ({ ...prev, current: 1 })); fetchKeywords({ keyword: value }); }; - // 组件挂载时获取数据 + // 分页处理函数 + const handlePageChange = (page: number, pageSize?: number) => { + setPagination(prev => ({ + ...prev, + current: page, + pageSize: pageSize || prev.pageSize, + })); + }; + + // 组件挂载和分页变化时获取数据 useEffect(() => { fetchKeywords(); - }, []); + }, [pagination.current, pagination.pageSize]); return (
@@ -244,6 +276,22 @@ const KeywordManagement = forwardRef>( )}
+ {/* 分页组件 */} +
+ + `第 ${range[0]}-${range[1]} 条/共 ${total} 条` + } + onChange={handlePageChange} + onShowSizeChange={handlePageChange} + /> +
+ {/* 编辑弹窗 */} >( const [editingMaterialId, setEditingMaterialId] = useState( null, ); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 10, + total: 0, + }); // 获取类型图标 const getTypeIcon = (type: string) => { @@ -65,24 +71,36 @@ const MaterialManagement = forwardRef>( }; // 获取素材列表 - const fetchMaterials = async (params?: MaterialListParams) => { - try { - setLoading(true); - const response = await getMaterialList(params || {}); - if (response) { - setMaterialsList(response.list || []); - } else { + const fetchMaterials = useCallback( + async (params?: MaterialListParams) => { + try { + setLoading(true); + const requestParams = { + page: pagination.current.toString(), + limit: pagination.pageSize.toString(), + ...params, + }; + const response = await getMaterialList(requestParams); + if (response) { + setMaterialsList(response.list || []); + setPagination(prev => ({ + ...prev, + total: response.total || 0, + })); + } else { + setMaterialsList([]); + message.error(response?.message || "获取素材列表失败"); + } + } catch (error) { + console.error("获取素材列表失败:", error); setMaterialsList([]); - message.error(response?.message || "获取素材列表失败"); + message.error("获取素材列表失败"); + } finally { + setLoading(false); } - } catch (error) { - console.error("获取素材列表失败:", error); - setMaterialsList([]); - message.error("获取素材列表失败"); - } finally { - setLoading(false); - } - }; + }, + [pagination], + ); // 暴露方法给父组件 useImperativeHandle(ref, () => ({ @@ -113,13 +131,23 @@ const MaterialManagement = forwardRef>( // 搜索处理函数 const handleSearch = (value: string) => { + setPagination(prev => ({ ...prev, current: 1 })); fetchMaterials({ keyword: value }); }; - // 组件挂载时获取数据 + // 分页处理函数 + const handlePageChange = (page: number, pageSize?: number) => { + setPagination(prev => ({ + ...prev, + current: page, + pageSize: pageSize || prev.pageSize, + })); + }; + + // 组件挂载和分页变化时获取数据 useEffect(() => { fetchMaterials(); - }, []); + }, [fetchMaterials]); return (
@@ -249,6 +277,22 @@ const MaterialManagement = forwardRef>( )}
+ {/* 分页组件 */} +
+ + `第 ${range[0]}-${range[1]} 条/共 ${total} 条` + } + onChange={handlePageChange} + onShowSizeChange={handlePageChange} + /> +
+ {/* 编辑弹窗 */} >( const [editingSensitiveWordId, setEditingSensitiveWordId] = useState< string | null >(null); + const [pagination, setPagination] = useState({ + current: 1, + pageSize: 10, + total: 0, + }); const getTagColor = (tag: string) => { switch (tag) { @@ -79,9 +92,18 @@ const SensitiveWordManagement = forwardRef>( const fetchSensitiveWords = async (params?: SensitiveWordListParams) => { try { setLoading(true); - const response = await getSensitiveWordList(params || {}); + const requestParams = { + page: pagination.current.toString(), + limit: pagination.pageSize.toString(), + ...params, + }; + const response = await getSensitiveWordList(requestParams); if (response) { setSensitiveWordsList(response.list || []); + setPagination(prev => ({ + ...prev, + total: response.total || 0, + })); } else { setSensitiveWordsList([]); message.error(response?.message || "获取敏感词列表失败"); @@ -153,13 +175,23 @@ const SensitiveWordManagement = forwardRef>( // 搜索处理函数 const handleSearch = (value: string) => { + setPagination(prev => ({ ...prev, current: 1 })); fetchSensitiveWords({ keyword: value }); }; - // 组件挂载时获取数据 + // 分页处理函数 + const handlePageChange = (page: number, pageSize?: number) => { + setPagination(prev => ({ + ...prev, + current: page, + pageSize: pageSize || prev.pageSize, + })); + }; + + // 组件挂载和分页变化时获取数据 useEffect(() => { fetchSensitiveWords(); - }, []); + }, [pagination.current, pagination.pageSize]); return (
@@ -223,6 +255,22 @@ const SensitiveWordManagement = forwardRef>( )}
+ {/* 分页组件 */} +
+ + `第 ${range[0]}-${range[1]} 条/共 ${total} 条` + } + onChange={handlePageChange} + onShowSizeChange={handlePageChange} + /> +
+ {/* 编辑弹窗 */}