From ed43e67047de84d0dbe63b938f8f2bf8895750e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?= Date: Sun, 28 Sep 2025 18:08:50 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=88=86=E9=A1=B5=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E5=88=B0=E5=85=B3=E9=94=AE=E8=AF=8D=E3=80=81=E7=B4=A0?= =?UTF-8?q?=E6=9D=90=E5=92=8C=E6=95=8F=E6=84=9F=E8=AF=8D=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=EF=BC=9A=E5=BC=95=E5=85=A5Pagination?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=9B=B4=E6=96=B0=E8=AF=B7=E6=B1=82?= =?UTF-8?q?=E5=8F=82=E6=95=B0=E4=BB=A5=E6=94=AF=E6=8C=81=E5=88=86=E9=A1=B5?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E6=95=B0=E6=8D=AE=E8=8E=B7=E5=8F=96?= =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E4=BD=93=E9=AA=8C=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../management/KeywordManagement.tsx | 56 ++++++++++++- .../management/MaterialManagement.tsx | 82 ++++++++++++++----- .../management/SensitiveWordManagement.tsx | 56 ++++++++++++- 3 files changed, 167 insertions(+), 27 deletions(-) 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} + /> +
+ {/* 编辑弹窗 */}