feat: add SproutWorkCollect apps

SproutWorkCollect-Frontend/src/components/Pagination.js

@@ -0,0 +1,161 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const PaginationContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 30px 0;
+  gap: 10px;
+  flex-wrap: wrap;
+`;
+
+const PaginationButton = styled.button`
+  padding: 8px 12px;
+  border: 1px solid #81c784;
+  background: ${props => props.active ? '#81c784' : 'rgba(255, 255, 255, 0.9)'};
+  color: ${props => props.active ? 'white' : '#2e7d32'};
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  min-width: 40px;
+  
+  &:hover:not(:disabled) {
+    background: ${props => props.active ? '#66bb6a' : '#e8f5e8'};
+    transform: translateY(-1px);
+    box-shadow: 0 2px 8px rgba(129, 199, 132, 0.3);
+  }
+  
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+  }
+  
+  @media (max-width: 768px) {
+    padding: 6px 10px;
+    font-size: 12px;
+    min-width: 35px;
+  }
+`;
+
+const PageInfo = styled.div`
+  color: #666;
+  font-size: 14px;
+  margin: 0 10px;
+  
+  @media (max-width: 768px) {
+    font-size: 12px;
+    margin: 0 5px;
+  }
+`;
+
+const Ellipsis = styled.span`
+  color: #666;
+  padding: 0 5px;
+  font-weight: bold;
+`;
+
+const Pagination = ({ 
+  currentPage, 
+  totalPages, 
+  totalItems, 
+  itemsPerPage, 
+  onPageChange 
+}) => {
+  if (totalPages <= 1) return null;
+
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 7; // 最多显示7个页码按钮
+    
+    if (totalPages <= maxVisiblePages) {
+      // 如果总页数小于等于最大显示页数，显示所有页码
+      for (let i = 1; i <= totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      // 复杂的分页逻辑
+      if (currentPage <= 4) {
+        // 当前页在前面
+        for (let i = 1; i <= 5; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      } else if (currentPage >= totalPages - 3) {
+        // 当前页在后面
+        pages.push(1);
+        pages.push('...');
+        for (let i = totalPages - 4; i <= totalPages; i++) {
+          pages.push(i);
+        }
+      } else {
+        // 当前页在中间
+        pages.push(1);
+        pages.push('...');
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pages.push(i);
+        }
+        pages.push('...');
+        pages.push(totalPages);
+      }
+    }
+    
+    return pages;
+  };
+
+  const handlePageClick = (page) => {
+    if (page !== '...' && page !== currentPage && page >= 1 && page <= totalPages) {
+      onPageChange(page);
+    }
+  };
+
+  const startItem = (currentPage - 1) * itemsPerPage + 1;
+  const endItem = Math.min(currentPage * itemsPerPage, totalItems);
+
+  return (
+    <PaginationContainer>
+      {/* 上一页按钮 */}
+      <PaginationButton
+        onClick={() => handlePageClick(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        ← 上一页
+      </PaginationButton>
+
+      {/* 页码按钮 */}
+      {getPageNumbers().map((page, index) => (
+        page === '...' ? (
+          <Ellipsis key={`ellipsis-${index}`}>...</Ellipsis>
+        ) : (
+          <PaginationButton
+            key={page}
+            active={page === currentPage}
+            onClick={() => handlePageClick(page)}
+          >
+            {page}
+          </PaginationButton>
+        )
+      ))}
+
+      {/* 下一页按钮 */}
+      <PaginationButton
+        onClick={() => handlePageClick(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        下一页 →
+      </PaginationButton>
+
+      {/* 页面信息 */}
+      <PageInfo>
+        第 {startItem}-{endItem} 项，共 {totalItems} 项
+      </PageInfo>
+    </PaginationContainer>
+  );
+};
+
+export default Pagination;