KnowledgeBase_frontend/src/components/Pagination.jsx

import React from 'react';

/**
 * 分页组件
 * @param {Object} props
 * @param {number} props.currentPage - 当前页码
 * @param {number} props.totalPages - 总页数
 * @param {number} props.pageSize - 每页显示的条目数
 * @param {Function} props.onPageChange - 页码变化的回调函数
 * @param {Function} props.onPageSizeChange - 每页条目数变化的回调函数
 */
const Pagination = ({ currentPage, totalPages, pageSize, onPageChange, onPageSizeChange }) => {
    return (
        <div className='d-flex justify-content-between align-items-center mt-4'>
            <div>
                <select
                    className='form-select'
                    value={pageSize}
                    onChange={(e) => onPageSizeChange(Number(e.target.value))}
                >
                    <option value='10'>10条/页</option>
                    <option value='20'>20条/页</option>
                    <option value='50'>50条/页</option>
                </select>
            </div>
            <nav aria-label='分页导航'>
                <ul className='pagination mb-0'>
                    <li className={`page-item ${currentPage === 1 ? 'disabled' : ''}`}>
                        <button
                            className='page-link'
                            onClick={() => onPageChange(currentPage - 1)}
                            disabled={currentPage === 1}
                        >
                            上一页
                        </button>
                    </li>
                    {[...Array(totalPages).keys()].map((i) => (
                        <li key={i} className={`page-item ${currentPage === i + 1 ? 'active' : ''}`}>
                            <button className='page-link' onClick={() => onPageChange(i + 1)}>
                                {i + 1}
                            </button>
                        </li>
                    ))}
                    <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
                        <button
                            className='page-link'
                            onClick={() => onPageChange(currentPage + 1)}
                            disabled={currentPage === totalPages}
                        >
                            下一页
                        </button>
                    </li>
                </ul>
            </nav>
        </div>
    );
};

export default Pagination;