添加分页功能到关键词、素材和敏感词管理模块：引入Pagination组件，更新请求参数以支持分页，优化数据获取逻辑，提升用户体验。

2025-09-28 18:08:50 +08:00
parent d8074502e0
commit ed43e67047
3 changed files with 167 additions and 27 deletions
--- 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<any, Record<string, never>>(
    const [editingKeywordId, setEditingKeywordId] = useState<number | null>(
      null,
    );
+    const [pagination, setPagination] = useState({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    });

    //匹配类型
    const getMatchTypeText = (type: number) => {
@@ -93,9 +106,18 @@ const KeywordManagement = forwardRef<any, Record<string, never>>(
    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<any, Record<string, never>>(

    // 搜索处理函数
    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 (
      <div className={styles.keywordContent}>
@@ -244,6 +276,22 @@ const KeywordManagement = forwardRef<any, Record<string, never>>(
          )}
        </div>

+        {/* 分页组件 */}
+        <div style={{ marginTop: 16, textAlign: "right" }}>
+          <Pagination
+            current={pagination.current}
+            pageSize={pagination.pageSize}
+            total={pagination.total}
+            showSizeChanger
+            showQuickJumper
+            showTotal={(total, range) =>
+              `第 ${range[0]}-${range[1]} 条/共 ${total} 条`
+            }
+            onChange={handlePageChange}
+            onShowSizeChange={handlePageChange}
+          />
+        </div>
+
        {/* 编辑弹窗 */}
        <KeywordModal
          visible={editModalVisible}
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/MaterialManagement.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/MaterialManagement.tsx
@@ -3,8 +3,9 @@ import React, {
  useEffect,
  forwardRef,
  useImperativeHandle,
+  useCallback,
 } from "react";
-import { Button, Input, Card, message, Popconfirm } from "antd";
+import { Button, Input, Card, message, Popconfirm, Pagination } from "antd";
 import {
  SearchOutlined,
  FilterOutlined,
@@ -49,6 +50,11 @@ const MaterialManagement = forwardRef<any, Record<string, never>>(
    const [editingMaterialId, setEditingMaterialId] = useState<number | null>(
      null,
    );
+    const [pagination, setPagination] = useState({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+    });

    // 获取类型图标
    const getTypeIcon = (type: string) => {
@@ -65,24 +71,36 @@ const MaterialManagement = forwardRef<any, Record<string, never>>(
    };

    // 获取素材列表
-    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<any, Record<string, never>>(

    // 搜索处理函数
    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 (
      <div className={styles.materialContent}>
@@ -249,6 +277,22 @@ const MaterialManagement = forwardRef<any, Record<string, never>>(
          )}
        </div>

+        {/* 分页组件 */}
+        <div style={{ marginTop: 16, textAlign: "right" }}>
+          <Pagination
+            current={pagination.current}
+            pageSize={pagination.pageSize}
+            total={pagination.total}
+            showSizeChanger
+            showQuickJumper
+            showTotal={(total, range) =>
+              `第 ${range[0]}-${range[1]} 条/共 ${total} 条`
+            }
+            onChange={handlePageChange}
+            onShowSizeChange={handlePageChange}
+          />
+        </div>
+
        {/* 编辑弹窗 */}
        <MaterialModal
          visible={editModalVisible}
--- a/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/SensitiveWordManagement.tsx
+++ b/Touchkebao/src/pages/pc/ckbox/powerCenter/content-management/components/management/SensitiveWordManagement.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 SensitiveWordManagement = forwardRef<any, Record<string, never>>(
    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<any, Record<string, never>>(
    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<any, Record<string, never>>(

    // 搜索处理函数
    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 (
      <div className={styles.sensitiveContent}>
@@ -223,6 +255,22 @@ const SensitiveWordManagement = forwardRef<any, Record<string, never>>(
          )}
        </div>

+        {/* 分页组件 */}
+        <div style={{ marginTop: 16, textAlign: "right" }}>
+          <Pagination
+            current={pagination.current}
+            pageSize={pagination.pageSize}
+            total={pagination.total}
+            showSizeChanger
+            showQuickJumper
+            showTotal={(total, range) =>
+              `第 ${range[0]}-${range[1]} 条/共 ${total} 条`
+            }
+            onChange={handlePageChange}
+            onShowSizeChange={handlePageChange}
+          />
+        </div>
+
        {/* 编辑弹窗 */}
        <SensitiveWordModal
          visible={editModalVisible}